/**
 * eGIRO Integration - Public Styles
 */

/* Container Styles */
.egiro-dda-setup-container,
.egiro-dda-cancel-container,
.egiro-dda-list-container {
    /* max-width: 700px;
    margin: 30px auto; */
    padding: 30px;
    /* background: #fff; */
    /* border-radius: 8px; */
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
}

/* Form Styles */
.egiro-form {
    /* margin-top: 20px; */
}

.egiro-form-group {
    margin-bottom: 20px;
}

.egiro-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.egiro-form-group input[type="text"],
.egiro-form-group input[type="email"],
.egiro-form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    transition: border-color 0.3s;
    box-sizing: border-box;
	background-color: #fff;

}

.egiro-form-group input:focus,
.egiro-form-group select:focus {
   outline: none !important;
    /* box-shadow: 0 0 0 1px #000000 !important;
    border: none !important; */
}

.egiro-form-group input.error,
.egiro-form-group select.error {
    border-color: #e63946;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, .08);
}

.egiro-field-error {
    display: none;
    font-size: 12px;
    color: #e63946;
    margin-top: 5px;
    font-weight: 500;
}

.egiro-form-group small,
.egiro-help-text {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 13px;
}

/* Checkbox Styles */
.egiro-checkbox,
.egiro-checkbox-label {
    display: flex;
    align-items: flex-start;
    font-weight: normal !important;
    cursor: pointer;
    margin-bottom: 10px;
}

.egiro-checkbox input[type="checkbox"],
.egiro-checkbox-label input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 3px;
    width: auto !important;
    cursor: pointer;
}

/* Radio Button Styles */
.egiro-radio-label {
    display: block;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.egiro-radio-label:hover {
    border-color: #0073aa;
    background: #f8f9fa;
}

.egiro-radio-label input[type="radio"] {
    margin-right: 12px;
}

.egiro-radio-label input[type="radio"]:checked + .egiro-dda-details {
    color: #0073aa;
}

/* Button Styles */
.egiro-btn {
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.egiro-btn-primary {
    background: #0073aa;
    color: #fff;
}

.egiro-btn-primary:hover {
    background: #005177;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.egiro-btn-secondary {
    background: #46b450;
    color: #fff;
}

.egiro-btn-secondary:hover {
    background: #368f3e;
}

.egiro-btn-danger {
    background: #dc3545;
    color: #fff;
}

.egiro-btn-danger:hover {
    background: #c82333;
}

.egiro-btn-outline {
    background: transparent;
    color: #0073aa;
    border: 2px solid #0073aa;
}

.egiro-btn-outline:hover {
    background: #0073aa;
    color: #fff;
}

.egiro-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Status Messages */
.egiro-status,
.egiro-message,
.egiro-alert {
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
    font-size: 14px;
}

.egiro-success,
.egiro-message.egiro-success,
.egiro-alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.egiro-error,
.egiro-message.egiro-error,
.egiro-alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.egiro-info,
.egiro-alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.egiro-warning,
.egiro-alert-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

/* Loading Spinner */
.egiro-loading {
    text-align: center;
    padding: 20px;
    color: #666;
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top-color: #0073aa;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* DDA List Styles */
.egiro-dda-list {
    margin-top: 20px;
}

.egiro-dda-item {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 15px;
    transition: all 0.3s;
}

.egiro-dda-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.egiro-dda-details strong {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    color: #333;
}

.egiro-dda-details p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}

/* Table Styles */
.egiro-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.egiro-table thead {
    background: #f8f9fa;
}

.egiro-table th,
.egiro-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
	    font-size: 13px;
}

.egiro-table th {
    font-weight: 600;
    color: #333;
}

.egiro-table tbody tr:hover {
    background: #f8f9fa;
}

/* Status progress strip — shared by the creation and cancellation
   confirmation pages (templates/partials/status-progress.php). */
.egiro-confirm-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f0f6ff;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 auto 24px;
    font-size: 14px;
    line-height: 1.4;
    color: #1565c0;
    text-align: left;
}

.egiro-confirm-progress.is-done {
    background: #eef7ee;
    border-color: #cfe6cf;
    color: #1e7e34;
}

.egiro-confirm-progress.is-failed {
    background: #fdecea;
    border-color: #f5c6c2;
    color: #8a1f11;
}

.egiro-confirm-progress.is-waiting {
    background: #fff8e6;
    border-color: #f5e2b8;
    color: #8a6d3b;
}

.egiro-confirm-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2px solid rgba(21, 101, 192, .25);
    border-top-color: #1565c0;
    border-radius: 50%;
    animation: egiro-confirm-spin .7s linear infinite;
}

/* Resolved states are static — no spinner. */
.egiro-confirm-progress.is-done .egiro-confirm-spinner,
.egiro-confirm-progress.is-failed .egiro-confirm-spinner,
.egiro-confirm-progress.is-waiting .egiro-confirm-spinner {
    display: none;
}

@keyframes egiro-confirm-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .egiro-confirm-spinner { animation-duration: 2s; }
}

/* Cancel confirmation modal */
.egiro-modal[hidden] {
    display: none;
}

.egiro-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.egiro-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .55);
}

body.egiro-modal-open {
    overflow: hidden;
}

.egiro-modal-box {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 12px;
    padding: 28px 26px 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    max-height: 90vh;
    overflow-y: auto;
}

.egiro-modal-x {
    position: absolute;
    top: 5px;
    right: 14px;
    background: none;
    border: 0 !important;
    font-size: 35px !important;
    line-height: 1;
    color: #888 !important;
    cursor: pointer !important;
    padding: 0 !important;
    background-color: transparent !important;
}

.egiro-modal-x:hover {
    color: #b3261e  !important;
}
.egiro-modal-x:focus{
	outline:0 !important;
}
.egiro-modal-title {
    margin: 0 0 10px;
    font-size: 20px;
    color: #b3261e;
}

.egiro-modal-text {
    margin: 0 0 16px;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

.egiro-modal-meta {
    margin: 0 0 18px;
    background: #f6f7f9;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
}

.egiro-modal-meta > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}

.egiro-modal-meta dt {
    color: #666;
    font-weight: 500;
}

.egiro-modal-meta dd {
    margin: 0;
    text-align: right;
    word-break: break-all;
}

.egiro-modal-error {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #fde2e2;
    color: #8a1f11;
    font-size: 13px;
}

.egiro-modal-error[hidden] {
    display: none;
}

.egiro-modal-actions {
    display: flex;
    gap: 10px;
    justify-content:flex-end;
    flex-wrap: wrap;
}

.egiro-modal-actions .egiro-btn {
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer !important;
    background: #001D4F !important;
    color: #fff !important;
}
.egiro-modal-actions .egiro-btn:focus{
	outline:0 !important;
}
.egiro-btn-danger {
    background: #b3261e;
    color: #fff;
}
.egiro-modal-actions .egiro-btn#egiro-cancel-confirm{
	    background: #e63946 !important;
}
.egiro-modal-actions .egiro-btn#egiro-cancel-confirm:hover{
	  background: #001D4F !important;
}
.egiro-btn-danger:hover:not(:disabled) {
    background: #93201a;
}

.egiro-btn-danger:disabled {
    opacity: .6;
    cursor: default;
}

.egiro-modal-actions .egiro-btn-secondary {
    background: #fff;
    color: #444;
    border-color: #cfd4dc;
}

.egiro-cancel-trigger {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* Table Pagination */
.egiro-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.egiro-pagination .egiro-page-btn{
	    background: #897959;
    color: #fff !important;
    border: 0 !important;
    font-size: 15px !important;
    border-radius: 3px;
}
.egiro-pagination .egiro-page-btn:focus{
	outline:0 !important;
}
.egiro-pagination .egiro-page-btn:hover{
	    background: #001d55 !important;
}
.egiro-page-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
}

.egiro-page-btn:hover:not(:disabled) {
    background: #f8f9fa;
}

.egiro-page-btn:disabled {
    opacity: .45;
    cursor: default;
}

.egiro-page-info {
    font-size: 13px;
    color: #666;
}

/* Status Badges */
.egiro-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.egiro-status-edda-setup-success {
    background: #d4edda;
    color: #155724;
}

 
.egiro-status-pending,
.egiro-status-token-issued {
    background: #fff3cd;
    color: #856404;
}

.egiro-status-edda-setup-rejected,
.egiro-status-edda-setup-failed,
.egiro-status-edda-cancel-rejected,
.egiro-status-failed {
    background: #f8d7da;
    color: #721c24;
}

.egiro-status-cancellation-initiated,
.egiro-status-cancellation-authorised {
    background: #e2e3f5;
    color: #37397a;
}

.egiro-status-edda-cancel-success {
    background: #e6e6e6;
    color: #444;
}

/* Membership status (xClubSys MemberStatus) — Active and Defaulter are the
   two statuses allowed to register/log in; anything else falls back to grey. */
.egiro-status-active {
    background: #d4edda;
    color: #155724;
}

.egiro-status-defaulter {
    background: #fff3cd;
    color: #856404;
}

button.egiro-link.egiro-link-danger{
	    background: #e63946;
    color: #fff;
    border: 0;
    font-size: 12px;
    line-height: normal;
    border-radius: 3px;
}

button.egiro-link.egiro-link-danger:hover{
	    background: #897959;
}
/* Info Box */
.egiro-info-box {
    background: #e8f4f8;
    border-left: 4px solid #0073aa;
    padding: 20px;
    margin: 20px 0;
    border-radius: 4px;
}

.egiro-info-box h4 {
    margin-top: 0;
    color: #0073aa;
}

.egiro-info-box ol,
.egiro-info-box ul {
    margin: 10px 0;
    padding-left: 20px;
}

.egiro-info-box li {
    margin: 8px 0;
}

/* Notice Box */
.egiro-notice {
    padding: 20px;
    margin: 20px 0;
    border-radius: 4px;
}

.egiro-notice-info {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

/* Actions */
.egiro-actions {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.egiro-link {
    color: #0073aa;
    text-decoration: none;
}

.egiro-link:hover {
    text-decoration: underline;
}

.egiro-link-danger {
    color: #dc3545;
}


#forgot-password-form{
 background: var(--crf-card);
    border-radius: var(--crf-radius);
    box-shadow: var(--crf-shadow);
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--crf-border);
    padding: 35px;
}
/* Responsive */
@media (max-width: 768px) {
    .egiro-dda-setup-container,
    .egiro-dda-cancel-container,
    .egiro-dda-list-container {
        padding: 20px;
        margin: 20px 10px;
    }
    
    .egiro-table {
        font-size: 14px;
    }
    
    .egiro-table th,
    .egiro-table td {
        padding: 8px;
    }
    
    .egiro-actions {
        flex-direction: column;
    }
    
    .egiro-btn {
        width: 100%;
    }
}



/*================== Registration Form =======================*/

/* ── registration-form.css ─────────────────────────────────────────────────── */

 
/* ── Root variables ──────────────────────────────────────────────────────── */
:root {
    --crf-bg:         #f5f4f0;
    --crf-card:       #ffffff;
    --crf-accent:     #1a1a2e;
    --crf-accent2:    #e63946;
    --crf-border:     #d6d3cc;
    --crf-text:       #1a1a2e;
    --crf-muted:      #6b6860;
    --crf-input-bg:   #fafaf8;
    --crf-radius:     10px;
    --crf-shadow:     0 8px 40px rgba(26,26,46,.10);
 
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.crf-wrapper {
     /* background:  var(--crf-bg);
    min-height:  100vh; */
    display:     flex;
    align-items: center;
    justify-content: center;
    /* padding:     40px 16px; */
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.crf-card {
    background:    var(--crf-card);
    border-radius: var(--crf-radius);
    box-shadow:    var(--crf-shadow);
    width:         100%;
     overflow:      hidden;
    border:        1px solid var(--crf-border);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.crf-header {
    background:  #001D4F;
    color:       #fff;
    padding:     36px 40px 28px;
    position:    relative;
}

.crf-header-badge {
    display:       inline-block;
    background:    var(--crf-accent2);
    color:         #fff;
     font-weight:   600;
    font-size:     11px;
    letter-spacing: 2px;
    padding:       4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.crf-title {
     font-size:     28px;
    font-weight:   400;
    margin:        0 0 6px;
    color:         #fff;
    line-height:   1.2;
}

.crf-subtitle {
    font-size:  13px;
    color:      rgba(255,255,255,.6);
    margin:     0;
}

/* ── Form body ───────────────────────────────────────────────────────────── */
.crf-form {
    padding: 32px 40px 36px;
}

/* ── Field ───────────────────────────────────────────────────────────────── */
.crf-field {
    margin-bottom: 20px;
    position:      relative;
}
.crf-field-half{
    display: flex;
    gap: 20px;
}
.crf-field-half .crf-field {
    flex: 1;
    /* margin-bottom: 0; */
}
.crf-required{
    color: red;
}
.crf-field label {
    display:       block;
    font-size:     13px;
    font-weight:   600;
    color:         var(--crf-text);
    margin-bottom: 6px;
    letter-spacing: .3px;
}

.crf-field input,
.crf-field select {
width: 100% !important;
    font-size: 15px;
    box-sizing: border-box;
    padding: 12px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgb(221, 221, 221) !important;
    border-image: initial !important;
    border-radius: 4px !important;
    transition: border-color 0.3s !important;
    outline: none;
    appearance: none;
}

.crf-field input::placeholder {
    color: var(--crf-muted);
}

.crf-field input:focus,
.crf-field select:focus {
    border-color: var(--crf-accent);
    
    background:   #fff;
}

/* ── Select custom arrow ─────────────────────────────────────────────────── */
.crf-select-wrap {
    position: relative;
}

.crf-select-wrap select {
    padding-right: 36px;
    cursor:        pointer;
}

.crf-select-arrow {
    position:       absolute;
    right:          14px;
    top:            50%;
    transform:      translateY(-50%);
    color:          var(--crf-muted);
    font-size:      10px;
    pointer-events: none;
}

/* ── Field error state ───────────────────────────────────────────────────── */
.crf-field--error input,
.crf-field--error select {
    border-color: var(--crf-accent2);
    box-shadow:   0 0 0 3px rgba(230,57,70,.08);
}

.crf-error {
    display:     none;
    font-size:   12px;
    color:       var(--crf-accent2);
    margin-top:  5px;
    font-weight: 500;
}

/* ── Submit button ───────────────────────────────────────────────────────── */
.crf-btn,.egiro-btn-primary {
    padding: 10px 15px !important;
    background-color: #897959 !important;
    color: #fff !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 8px;
    letter-spacing: .3px;
    transition: background .2s, transform .1s, box-shadow .2s !important;
    box-shadow: 0 4px 16px rgba(26, 26, 46, .20);
    position: relative;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.crf-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}
.crf-btn.crf-loading .crf-spinner{
    display: inline-block !important;
}
.crf-spinner.active {
    display: inline-block;
}

.crf-btn:hover:not(:disabled) {
    background: #2c2c4a;
    transform:  translateY(-1px);
    box-shadow: 0 6px 20px rgba(26,26,46,.28);
}

.crf-btn:active:not(:disabled) {
    transform:  translateY(0);
    box-shadow: 0 2px 8px rgba(26,26,46,.18);
}

.crf-btn:disabled {
    opacity: .7;
    cursor:  not-allowed;
}

/* ── Message banner ──────────────────────────────────────────────────────── */
.crf-message {
    margin:        20px 40px 15px;
    padding:       14px 18px;
    border-radius: var(--crf-radius);
    font-size:     14px;
    font-weight:   500;
    line-height:   1.5;
}

.crf-message--success {
    background: #edfaed;
    color:      #1a7a2e;
    border:     1.5px solid #a8e6b0;
}

.crf-message--error {
    background: #fef0f0;
    color:      #c0392b;
    border:     1.5px solid #f5b8b8;
}

/* ── Login notice ────────────────────────────────────────────────────────── */
.login-notice {
    display:       none;
    padding:       12px 16px;
    border-radius: 6px;
    font-size:     14px;
    font-weight:   500;
    margin-bottom: 16px;
}

.login-notice.visible { display: block; }

.login-notice.error {
    background: #fef0f0;
    color:      #c0392b;
    border:     1.5px solid #f5b8b8;
}

.login-notice.success {
    background: #edfaed;
    color:      #1a7a2e;
    border:     1.5px solid #a8e6b0;
}

/* ── Login field error state ─────────────────────────────────────────────── */
.crf-field input.error,
.crf-field select.error {
    border-color: var(--crf-accent2) !important;
    box-shadow:   0 0 0 3px rgba(230, 57, 70, .08) !important;
}

.field-error {
    display:     block;
    font-size:   12px;
    color:       var(--crf-accent2);
    margin-top:  5px;
    font-weight: 500;
}

/* ── Login button & spinner ──────────────────────────────────────────────── */
#login-submit {
    width:           100%;
    padding:         12px;
    background:      #897959;
    color:           #fff;
    border:          none;
    border-radius:   4px;
    font-size:       15px;
    font-weight:     600;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    transition:      background 0.2s;
    margin-top:      8px;
}

#login-submit:hover:not(:disabled) { background: #6b5e44; }
#login-submit:disabled { opacity: .7; cursor: not-allowed; }

.login-spinner {
    display:       none;
    width:         16px;
    height:        16px;
    border:        2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation:     spin 0.6s linear infinite;
}

.login-spinner.active { display: inline-block; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .crf-header  { padding: 28px 24px 22px; }
    #crf-form    { padding: 24px 24px 28px; }
    .crf-message { margin: 0 24px 24px; }
    .crf-title   { font-size: 24px; }
}


/* ══════════════════════════════════════════════════════════════
   Member Dashboard  –  dash-* classes
   ══════════════════════════════════════════════════════════════ */

/* Wider card override */
.dash-card {
    /* max-width: 960px; */
}

/* Header layout */
.dash-header {
    display: flex;
    flex-direction: column;
}

.dash-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Circular avatar */
.dash-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Header action row (Setup GIRO + Logout) */
.dash-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 16px;
}

.dash-nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.dash-nav-link:hover {
    opacity: 1;
    color: #fff;
    text-decoration: none;
}

.dash-nav-logout {
    margin-left: auto;
    opacity: 0.6;
}

/* ── Tab bar ─────────────────────────────────────────────────── */
.dash-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--crf-border);
    margin-bottom: 24px;
}

.dash-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--crf-muted);
    cursor: pointer;
    letter-spacing: .2px;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-tab:hover, .dash-tab:focus {
    color: var(--crf-text);
    background-color: transparent;
}
.dash-tab:focus {
    outline: 0 !important;
 }

.dash-tab.active {
    color: #897959;
    border-bottom-color: #897959;
}

.dash-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #897959;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* ── Tab panels ──────────────────────────────────────────────── */
.dash-tab-panel {
    display: none;
}

.dash-tab-panel.active {
    display: block;
}

/* Body */
.dash-body {
    padding: 32px 40px 40px;
}

/* Stats strip */
.dash-stats {
    display: flex;
    gap: 1px;
    background: var(--crf-border);
    border: 1px solid var(--crf-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 28px;
}

.dash-stat {
    flex: 1;
    background: #fff;
    padding: 20px 24px;
    text-align: center;
}

.dash-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--crf-accent);
}

.dash-stat-label {
    display: block;
    font-size: 11px;
    color: var(--crf-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
}

/* Two-column grid */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* margin-bottom: 28px; */
}

/* Section card */
.dash-section {
    background: #fafaf8;
    border: 1px solid var(--crf-border);
    border-radius: 8px;
    padding: 22px 24px;
}

.dash-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dash-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--crf-text);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 16px;
}

.dash-section-header .dash-section-title {
    margin: 0;
}

/* Definition list rows */
.dash-info {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}

.dash-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--crf-border);
    padding-bottom: 10px;
}

.dash-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dash-info-row dt {
    color: var(--crf-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.dash-info-row dd {
    margin: 0;
    color: var(--crf-text);
    font-weight: 500;
    text-align: right;
    word-break: break-all;
}

/* Small action button */
.dash-btn-sm {
    padding: 6px 14px !important;
    font-size: 12px !important;
    background: #897959 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    display: inline-block;
}

.dash-btn-sm:hover {
    background: #6b5e44 !important;
    color: #fff;
    text-decoration: none;
}

/* Empty state */
.dash-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--crf-muted);
    font-size: 14px;
}

.dash-empty a {
    color: #897959;
    text-decoration: none;
}

.dash-empty a:hover {
    text-decoration: underline;
}

/* ── Dashboard responsive ────────────────────────────────────── */
@media (max-width: 680px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }

    .dash-body {
        padding: 24px 20px;
    }

    .dash-stats {
        flex-direction: column;
        gap: 0;
    }

    .dash-tab {
        padding: 10px 14px;
        font-size: 12px;
    }

    .dash-nav-logout {
        margin-left: 0;
    }
}

/* ── Login step 2: verification code ─────────────────────────────────────── */
.crf-otp-lead {
    margin:      0 0 16px;
    font-size:   14px;
    line-height: 1.5;
    color:       var(--crf-muted);
}

.crf-otp-lead strong {
    color: var(--crf-text);
}

.crf-otp-input {
    font-family:    'Courier New', Courier, monospace;
    font-size:      22px !important;
    letter-spacing: 8px;
    text-align:     center;
    font-weight:    600;
}

.crf-otp-expiry {
    margin:    10px 0 0;
    font-size: 12px;
    color:     var(--crf-muted);
    text-align: center;
}

.crf-otp-actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.crf-otp-actions .crf-link-btn{
	    background: #001c4c !important;
		border: 1px solid #000 !important;
		padding: 8px 20px !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		color: #ffffff !important;
		cursor: pointer !important;
		text-decoration: none !important;
}
.crf-otp-actions .crf-link-btn:hover{
	  background: #897959 !important;
	  border-color:#897959 !important;
}
.crf-link-btn {
    background:  none;
    border:      none;
    padding:     0;
    font-size:   13px;
    font-weight: 500;
    color:       var(--crf-accent);
    cursor:      pointer;
    text-decoration: underline;
}

.crf-link-btn:hover:not(:disabled) {
    color: var(--crf-accent2);
}

.crf-link-btn:disabled {
    color:  var(--crf-muted);
    cursor: default;
    text-decoration: none;
}

/*
 * TEMPORARY — the on-screen copy of the code, shown only while the xClubSys
 * records carry undeliverable addresses. Remove with the server-side
 * EGIRO_Public::crf_otp_show_on_screen().
 */
.crf-otp-debug {
    display:       block;
    background:    #fff8e6;
    border:        1.5px dashed #e0b84c;
    border-radius: var(--crf-radius);
    padding:       12px 16px;
    margin-bottom: 16px;
    text-align:    center;
}

.crf-otp-debug-label {
    display:        block;
    font-size:      12px;
    color:          #8a6d1f;
    margin-bottom:  6px;
}

.crf-otp-debug-code {
    display:        block;
    font-family:    'Courier New', Courier, monospace;
    font-size:      26px;
    font-weight:    700;
    letter-spacing: 8px;
    color:          #6b530f;
}