/*
 * OneClub V2 — Public Styles
 * All colors reference CSS custom properties injected by PHP (output_css_variables).
 * Default values in parentheses are the fallback if the variable is not set.
 */

/* ═══════════════════════════════════════════════════════
   1. AUTH LINKS (header shortcode)
═══════════════════════════════════════════════════════ */

.oneclub-auth-links {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    font-family: var(--oc-font-family, inherit);
    direction: rtl;
}
.oneclub-auth-link,
.oneclub-auth-logout {
    color: var(--oc-primary, #000);
    text-decoration: none;
    cursor: pointer;
}
.oneclub-auth-link:hover,
.oneclub-auth-logout:hover {
    color: var(--oc-primary-hover, #222);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════
   2. STANDALONE LOGIN FORM
═══════════════════════════════════════════════════════ */

.oneclub-login-form-container {
    max-width: 380px;
    margin: 0 auto;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--oc-border-radius, 14px);
    font-family: var(--oc-font-family, 'Segoe UI', Arial, sans-serif);
    direction: rtl;
}
.oneclub-login-form-header h3 {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}
.oneclub-login-messages {
    margin-bottom: 12px;
    font-size: 14px;
}
.oneclub-login-messages .oneclub-error  { color: var(--oc-error, #dc2626); }
.oneclub-login-messages .oneclub-success{ color: var(--oc-success, #16a34a); }
.oneclub-login-field {
    margin-bottom: 16px;
}
.oneclub-login-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.oneclub-login-field input[type="tel"],
.oneclub-login-field input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.oneclub-login-field input:focus {
    outline: none;
    border-color: var(--oc-primary, #000);
}
.oneclub-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.oneclub-password-wrapper input {
    flex: 1;
    padding-left: 40px;
}
.oneclub-toggle-password {
    position: absolute;
    left: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #9ca3af;
}
.oneclub-toggle-password:hover { color: #374151; }
.oneclub-login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 13px;
}
.oneclub-remember-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #374151;
}
.oneclub-lost-password {
    color: var(--oc-text-muted, #6b7280);
    text-decoration: none;
    font-size: 12px;
}
.oneclub-lost-password:hover { text-decoration: underline; }
.oneclub-login-submit,
.oneclub-register-submit {
    width: 100%;
    padding: 12px;
    background: var(--oc-primary, #000);
    color: var(--oc-btn-color, #fff);
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.oneclub-login-submit:hover,
.oneclub-register-submit:hover {
    background: var(--oc-primary-hover, #222);
}
.oneclub-login-join-link,
.oneclub-register-login-link {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--oc-text-muted, #6b7280);
}
.oneclub-login-join-link a,
.oneclub-register-login-link a {
    color: var(--oc-primary, #000);
    text-decoration: none;
    font-weight: 600;
}
.oneclub-already-logged-in {
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    color: var(--oc-success, #16a34a);
    font-size: 14px;
    direction: rtl;
}

/* ═══════════════════════════════════════════════════════
   3. STANDALONE REGISTER FORM
═══════════════════════════════════════════════════════ */

.oneclub-register-form-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--oc-border-radius, 14px);
    font-family: var(--oc-font-family, 'Segoe UI', Arial, sans-serif);
    direction: rtl;
}
.oneclub-register-messages {
    margin-bottom: 12px;
    font-size: 14px;
}
.oneclub-register-messages .oneclub-error   { color: var(--oc-error, #dc2626); }
.oneclub-register-messages .oneclub-success { color: var(--oc-success, #16a34a); }
.oneclub-register-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.oneclub-register-field {
    margin-bottom: 14px;
}
.oneclub-register-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}
.oneclub-register-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.oneclub-register-field input:focus {
    outline: none;
    border-color: var(--oc-primary, #000);
}
.oneclub-terms-checkbox-label {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    direction: rtl !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #374151 !important;
    cursor: pointer !important;
    white-space: normal !important;
}
.oneclub-terms-checkbox-label input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    display: inline-block !important;
    order: 0 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.oneclub-terms-checkbox-label span {
    display: inline !important;
    order: 1 !important;
    flex: 1 1 auto !important;
}
.oneclub-terms-checkbox-label a {
    color: var(--oc-primary, #000) !important;
    text-decoration: underline !important;
}
.oneclub-register-success {
    text-align: center;
    padding: 16px 0;
}
.oneclub-register-success-icon { font-size: 36px; margin-bottom: 8px; }
.oneclub-register-success h4 { font-size: 18px; margin: 0 0 16px; }
.oneclub-register-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px solid #f3f4f6;
}
.oneclub-register-detail-label { color: var(--oc-text-muted, #6b7280); }
.oneclub-register-detail-value { font-weight: 600; }

/* ═══════════════════════════════════════════════════════
   4. REGISTER POPUP OVERLAY
═══════════════════════════════════════════════════════ */

.oneclub-register-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.oneclub-register-popup-overlay.active {
    display: flex;
}
.oneclub-register-popup-box {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--oc-border-radius, 14px);
    background: #fff;
}
.oneclub-register-popup-box .oneclub-register-form-container {
    border: none;
    border-radius: var(--oc-border-radius, 14px);
}
.oneclub-popup-close {
    position: absolute;
    top: 14px;
    left: 16px;
    background: rgba(0,0,0,0.15);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: #fff;
    z-index: 1;
}
.oneclub-popup-close:hover { background: rgba(0,0,0,0.35); }
.oneclub-register-popup-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

/* ═══════════════════════════════════════════════════════
   5. FAB MODAL  (multi-state)
═══════════════════════════════════════════════════════ */

.oneclub-fab-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.6);
    align-items: flex-end;
    justify-content: center;
}
.oneclub-fab-overlay.active { display: flex; }

.oneclub-fab-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--oc-bg-dark, #111);
    border-radius: var(--oc-border-radius, 14px) var(--oc-border-radius, 14px) 0 0;
    font-family: var(--oc-font-family, 'Segoe UI', Arial, sans-serif);
    color: var(--oc-text-on-dark, #fff);
    animation: oc-slide-up 0.28s ease;
}
@keyframes oc-slide-up {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes oc-fade-scale {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.oneclub-fab-close {
    position: absolute !important;
    top: 14px !important;
    left: 16px !important;
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    cursor: pointer !important;
    z-index: 2 !important;
    padding: 0 !important;
}
.oneclub-fab-close:hover { background: rgba(255,255,255,0.3) !important; }

/* On white-card states (login / register) the button sits on a white background —
   switch to dark so it stays visible. :has() is supported in all modern browsers. */
.oneclub-fab-modal:has(.oneclub-fab-state-login.active) .oneclub-fab-close,
.oneclub-fab-modal:has(.oneclub-fab-state-register.active) .oneclub-fab-close {
    background: rgba(0,0,0,0.07) !important;
    color: #111827 !important;
}
.oneclub-fab-modal:has(.oneclub-fab-state-login.active) .oneclub-fab-close:hover,
.oneclub-fab-modal:has(.oneclub-fab-state-register.active) .oneclub-fab-close:hover {
    background: rgba(0,0,0,0.14);
}

/* States */
.oneclub-fab-state { display: none; }
.oneclub-fab-state.active { display: block; }

/* Dark header (used in join CTA, welcome, returning) */
.oneclub-fab-dark-header {
    padding: 36px 28px 28px;
    text-align: right;
    direction: rtl;
    background: var(--oc-bg-dark, #111);
}
.oneclub-fab-eyebrow {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.55);
    margin: 0 0 8px;
    direction: ltr;
    text-align: left;
}
.oneclub-fab-h2 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 14px;
    color: var(--oc-text-on-dark, #fff);
}
.oneclub-fab-lead {
    font-size: 15px;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin: 0 0 8px;
}
.oneclub-fab-lead span {
    color: #fff;
    font-weight: 700;
}
.oneclub-fab-product-price {
    display: inline-block;
    margin-top: 6px;
    margin-left: 10px;
    font-size: 14px;
    color: rgba(255,255,255,0.55);
}
.oneclub-fab-product-price strong {
    color: rgba(255,255,255,0.9);
    font-weight: 600;
}
.oneclub-fab-note {
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

/* White card (login / register panels) */
.oneclub-fab-card {
    background: #fff;
    border-radius: var(--oc-border-radius, 14px) var(--oc-border-radius, 14px) 0 0;
    padding: 24px 24px 28px;
    direction: rtl;
    color: #111827;
}
.oneclub-fab-card-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 18px;
    color: #111827;
}

/* Buttons */
.oneclub-fab-btn {
    display: block;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 18px;
    text-align: center;
    transition: opacity 0.15s;
}
.oneclub-fab-btn:hover { opacity: 0.88; }
.oneclub-fab-btn-light {
    background: #fff;
    color: #111;
}
.oneclub-fab-btn-dark {
    background: var(--oc-primary, #000);
    color: var(--oc-btn-color, #fff);
}
.oneclub-fab-link {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    text-decoration: underline;
    padding: 0;
}
.oneclub-fab-card .oneclub-fab-link {
    color: var(--oc-text-muted, #6b7280);
}

/* Discount badge (welcome state) */
.oneclub-fab-discount {
    text-align: center;
    padding: 18px 0 8px;
}
.oneclub-fab-discount b {
    font-size: 48px;
    font-weight: 900;
    color: var(--oc-primary, #000);
    display: block;
    line-height: 1;
}
.oneclub-fab-discount small {
    font-size: 13px;
    color: var(--oc-text-muted, #6b7280);
}

/* Perks list */
.oneclub-fab-perks {
    border-top: 1px solid #e5e7eb;
    padding-top: 14px;
    margin-top: 14px;
}
.oneclub-fab-perk {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #374151;
    direction: rtl;
    text-align: right;
}
.oneclub-fab-perk svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--oc-primary, #000);
}

/* Credentials block (after free registration) */
.oneclub-fab-creds {
    margin-top: 16px;
    background: #f9fafb;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13px;
}
.oneclub-fab-cred-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    gap: 8px;
}
.oneclub-fab-cred-label { color: var(--oc-text-muted, #6b7280); }
.oneclub-fab-cred-value { font-weight: 600; font-family: monospace; }

/* Switch-row ("already a member?" / "not a member yet?") below login/register forms */
.oneclub-fab-switch-row {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--oc-text-muted, #6b7280);
}

/* Lead text on white card (welcome screen) */
.oneclub-fab-card-lead {
    font-size: 14px;
    font-weight: 400;
    color: #374151;
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Login: 2-step flow */
.oneclub-login-phone-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 14px;
    color: #374151;
}
.oneclub-login-phone-shown { font-weight: 600; }
.oneclub-login-back {
    font-size: 12px;
    color: var(--oc-primary, #000);
}

/* ═══════════════════════════════════════════════════════
   6. CHECKOUT BENEFITS SECTION
═══════════════════════════════════════════════════════ */

/* ── Checkout member banner (non-member / guest) ── */

.oc-checkout-banner {
    margin: 0 0 20px;
    background: var(--oc-checkout-banner-bg, #111111);
    border-radius: 10px;
    overflow: hidden;
    font-family: var(--oc-font-family, inherit);
    direction: rtl;
    border-right: 4px solid var(--oc-primary, #000);
}
.oc-checkout-banner-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
}
.oc-checkout-banner-sep {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 0 18px;
}
.oc-checkout-banner-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}
.oc-checkout-banner-txt {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.4;
}
.oc-checkout-banner-txt-muted {
    color: rgba(255,255,255,0.65);
    font-weight: 400;
}
.oc-checkout-login-btn {
    flex-shrink: 0;
    padding: 8px 20px;
    background: transparent;
    color: var(--oc-checkout-banner-btn-color, #fff);
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    font-family: var(--oc-font-family, inherit);
}
.oc-checkout-login-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.65);
}
.oc-checkout-join-link {
    flex-shrink: 0;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}
.oc-checkout-join-link:hover {
    color: #ffffff;
    border-color: rgba(255,255,255,0.7);
}

/* ── Member section (logged-in club members) ── */

.oneclub-benefits-section {
    margin: 16px 0;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: var(--oc-font-family, inherit);
    direction: rtl;
}
.oneclub-benefits-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    color: #111827 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.oneclub-no-benefits {
    font-size: 14px;
    color: var(--oc-text-muted, #6b7280);
    margin: 0;
}
.oneclub-points-row,
.oneclub-welcome-row,
.oneclub-birthday-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    color: #374151;
}
.oneclub-benefit-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.oneclub-use-points,
.oneclub-use-welcome,
.oneclub-use-birthday {
    padding: 6px 14px !important;
    background: var(--oc-primary, #000) !important;
    color: var(--oc-btn-color, #fff) !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}
.oneclub-use-points:hover,
.oneclub-use-welcome:hover,
.oneclub-use-birthday:hover {
    background: var(--oc-primary-hover, #222) !important;
}
.oneclub-remove-benefit {
    background: #212121 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
#oneclub-benefits-summary {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-size: 13px;
}
#oneclub-benefits-summary h4 {
    font-size: 13px;
    margin: 0 0 6px;
    color: var(--oc-text-muted, #6b7280);
}
#oneclub-benefits-list {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}
#oneclub-benefits-list li {
    padding: 3px 0;
    color: var(--oc-success, #16a34a);
    font-weight: 600;
}

/* Points modal */
.oneclub-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
}
.oneclub-modal.active { display: flex; }
.oneclub-modal-inner {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    width: 320px;
    max-width: 90vw;
    direction: rtl;
    position: relative;
}
.oneclub-modal-close {
    position: absolute;
    top: 12px;
    left: 14px;
    font-size: 22px;
    cursor: pointer;
    color: #9ca3af;
    line-height: 1;
}
.oneclub-modal-close:hover { color: #374151; }
.oneclub-modal-inner h3 { margin: 0 0 14px; font-size: 16px; }
#oneclub-points-slider {
    width: 100%;
    margin: 12px 0;
    accent-color: var(--oc-primary, #000);
}

/* ═══════════════════════════════════════════════════════
   7. CHECKOUT POPUPS (membership check)
═══════════════════════════════════════════════════════ */

.oneclub-popup-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(0,0,0,0.5);
}
.oneclub-popup-backdrop.active { display: block; }
.oneclub-popup-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99991;
    background: #fff;
    border-radius: var(--oc-border-radius, 14px);
    width: 340px;
    max-width: 95vw;
    padding: 28px 24px;
    font-family: var(--oc-font-family, 'Segoe UI', Arial, sans-serif);
    direction: rtl;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.oneclub-popup-dialog h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #111827;
}
.oneclub-popup-dialog p {
    font-size: 14px;
    color: var(--oc-text-muted, #6b7280);
    margin: 0 0 16px;
}
.oneclub-popup-dialog input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 15px;
    box-sizing: border-box;
    margin-bottom: 10px;
    direction: ltr;
}
.oneclub-popup-dialog input:focus {
    outline: none;
    border-color: var(--oc-primary, #000);
}
.oneclub-popup-btn-primary {
    width: 100%;
    padding: 12px;
    background: var(--oc-primary, #000);
    color: var(--oc-btn-color, #fff);
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.oneclub-popup-btn-primary:hover { background: var(--oc-primary-hover, #222); }
.oneclub-popup-close-btn {
    position: absolute;
    top: 12px;
    left: 14px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #9ca3af;
}
.oneclub-popup-close-btn:hover { color: #374151; }

/* ═══════════════════════════════════════════════════════
   8. PASSWORD SHOW/HIDE
═══════════════════════════════════════════════════════ */

.oneclub-password-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}
.oneclub-password-wrapper input {
    flex: 1;
}
.oneclub-success-password-input {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 14px;
    width: auto;
    flex: 1;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   9. RESPONSIVE
═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   OTP LOGIN FLOW
═══════════════════════════════════════════════════════ */

.oneclub-otp-hint {
    font-size: 13px;
    color: var(--oc-text-muted, #6b7280);
    margin: 4px 0 12px;
    text-align: center;
}

.oneclub-otp-dest-msg {
    font-size: 14px;
    color: var(--oc-text-muted, #6b7280);
    text-align: center;
    margin-bottom: 14px;
    line-height: 1.5;
}
.oneclub-otp-dest-msg strong {
    color: #111;
    direction: ltr;
    display: inline-block;
}

.oneclub-otp-timer {
    font-size: 12px;
    color: var(--oc-text-muted, #6b7280);
    text-align: center;
    margin: 8px 0 14px;
}
.oneclub-otp-countdown {
    font-weight: 600;
    color: var(--oc-primary, #000);
    font-variant-numeric: tabular-nums;
}

.oneclub-otp-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--oc-text-muted, #6b7280);
}
.oneclub-otp-sep {
    color: #d1d5db;
}

/* Mobile: slide up from bottom (default behaviour, no overrides needed) */
@media (max-width: 520px) {
    .oneclub-fab-modal {
        border-radius: 0;
        max-height: 96vh;
    }
    .oneclub-fab-dark-header { padding: 28px 18px 20px; }
    .oneclub-fab-card { padding: 18px 18px 22px; }
    .oneclub-fab-h2 { font-size: 24px; }
    .oneclub-register-name-row { grid-template-columns: 1fr; }
}

/* Desktop: centred overlay, fade-scale animation */
@media (min-width: 521px) {
    .oneclub-fab-overlay {
        align-items: center;
    }
    .oneclub-fab-modal {
        border-radius: var(--oc-border-radius, 14px);
        max-height: 88vh;
        animation: oc-fade-scale 0.22s ease;
    }
}

/* ═══════════════════════════════════════════════════════
   10. THEME OVERRIDE HARDENING
   Prefixing with `body` raises specificity above the
   common theme/WooCommerce selectors that bleed in
   (e.g. `.woocommerce a`, `body .woocommerce .button`).
═══════════════════════════════════════════════════════ */

/* Reset link colour inside every plugin container */
body .oneclub-fab-modal a,
body .oneclub-login-form-container a,
body .oneclub-register-form-container a,
body .oneclub-register-popup-overlay a,
body .oc-checkout-banner a,
body .oneclub-benefits-section a,
body .oneclub-popup-dialog a {
    color: inherit;
    text-decoration: none;
    box-shadow: none;
    background: none;
}

/* Solid action buttons */
body .oneclub-fab-btn-dark,
body .oneclub-login-submit,
body .oneclub-register-submit,
body .oneclub-use-points,
body .oneclub-use-welcome,
body .oneclub-popup-btn-primary,
body #oneclub-apply-points {
    background: var(--oc-primary, #000) !important;
    color: var(--oc-btn-color, #fff) !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 5px !important;
}
body .oneclub-fab-btn-dark:hover,
body .oneclub-login-submit:hover,
body .oneclub-register-submit:hover,
body .oneclub-use-points:hover,
body .oneclub-use-welcome:hover,
body .oneclub-popup-btn-primary:hover,
body #oneclub-apply-points:hover {
    background: var(--oc-primary-hover, #222) !important;
    color: var(--oc-btn-color, #fff) !important;
}

/* Light action button (white bg on dark modal) */
body .oneclub-fab-btn-light {
    background: #fff !important;
    color: #111 !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Checkout banner join link — theme link colour bleed fix */
body a.oc-checkout-join-link,
body a.oc-checkout-join-link:visited {
    color: var(--oc-checkout-banner-text, #fff) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
body a.oc-checkout-join-link:hover {
    color: #fff !important;
    opacity: 0.85;
}

/* Checkout banner button */
body .oc-checkout-login-btn {
    background: transparent !important;
    color: var(--oc-checkout-banner-btn-color, #fff) !important;
    border: 2px solid rgba(255,255,255,0.35) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body .oc-checkout-login-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.65) !important;
}

/* Icon/close buttons — keep transparent */
body .oneclub-popup-close,
body .oneclub-popup-close-btn,
body .oneclub-modal-close {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}
/* FAB close: white on dark states, dark on white-card states */
body .oneclub-fab-close {
    border: none !important;
    box-shadow: none !important;
}
body .oneclub-fab-modal:has(.oneclub-fab-state-login.active) .oneclub-fab-close,
body .oneclub-fab-modal:has(.oneclub-fab-state-register.active) .oneclub-fab-close {
    background: rgba(0,0,0,0.07) !important;
    color: #111827 !important;
}

/* Login messages — push down below close button */
body .oneclub-login-messages {
    margin-top: 50px !important;
}

/* Form inputs — reset theme borders/backgrounds */
body .oneclub-login-field input[type="tel"],
body .oneclub-login-field input[type="password"],
body .oneclub-login-field input[type="text"],
body .oneclub-register-field input,
body .oneclub-popup-dialog input[type="email"],
body .oneclub-fab-card input[type="tel"],
body .oneclub-fab-card input[type="password"],
body .oneclub-fab-card input[type="text"] {
    background: #fff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
    border-radius: 5px !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: right !important;
}
body .oneclub-login-field input:focus,
body .oneclub-register-field input:focus,
body .oneclub-fab-card input:focus {
    border-color: var(--oc-primary, #000) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Tel inputs are LTR characters but right-aligned to match RTL layout */
body .oneclub-login-field input[type="tel"],
body .oneclub-fab-card input[type="tel"] {
    direction: ltr !important;
    text-align: right !important;
}

/* Link-style buttons — theme must not add borders, backgrounds, or shadows */
body .oneclub-fab-link,
body .oneclub-fab-link:hover,
body .oneclub-fab-link:focus {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

/* On dark header: keep the existing muted white colour */
body .oneclub-fab-dark-header .oneclub-fab-link {
    color: rgba(255,255,255,0.6) !important;
    font-size: 13px !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}
body .oneclub-fab-dark-header .oneclub-fab-link:hover {
    color: #fff !important;
    background: none !important;
}
/* "התחברו" switch button in join CTA (explicitly white, no border) */
body #oneclubSwitchToLogin,
body #oneclubSwitchToLogin:hover,
body #oneclubSwitchToLogin:focus {
    color: #fff !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* On white card (login / register): dark text, no border/bg/padding */
body .oneclub-fab-card .oneclub-fab-link,
body #oneclubSwitchToJoin,
body #oneclubRegSwitchToLogin,
body .oneclub-otp-resend-btn,
body .oneclub-otp-back-btn {
    color: #111 !important;
    font-size: 14px !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
body .oneclub-fab-card .oneclub-fab-link:hover,
body #oneclubSwitchToJoin:hover,
body #oneclubRegSwitchToLogin:hover,
body .oneclub-otp-resend-btn:hover,
body .oneclub-otp-back-btn:hover {
    color: var(--oc-primary, #000) !important;
    background: none !important;
}

/* Headings inside plugin containers */
body .oneclub-fab-h2 {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: var(--oc-text-on-dark, #fff) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
body .oneclub-fab-card-title,
body .oneclub-login-form-header h3,
body .oneclub-register-popup-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Eyebrow text right-aligned inside RTL header */
body .oneclub-fab-eyebrow {
    text-align: right !important;
}

/* White card: no border-radius (flat against modal edges) */
body .oneclub-fab-modal .oneclub-fab-card {
    border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   11. PER-ELEMENT DESIGN VARIABLES
   Login and CTA states use dedicated CSS vars so each
   popup can be styled independently from the admin.
═══════════════════════════════════════════════════════ */

/* Login card — split background: top 20% = header-bg, rest = card-bg */
body .oneclub-fab-state-login .oneclub-fab-card {
    background: linear-gradient(
        to bottom,
        var(--oc-login-header-bg, #fff) 0,
        var(--oc-login-header-bg, #fff) 20%,
        var(--oc-login-bg, #fff) 20%,
        var(--oc-login-bg, #fff) 100%
    ) !important;
    color: var(--oc-login-text, #111827) !important;
}
body .oneclub-fab-state-login .oneclub-fab-card-title {
    color: var(--oc-login-header-text, #111827) !important;
}
body .oneclub-fab-state-login .oneclub-login-field input[type="tel"],
body .oneclub-fab-state-login .oneclub-login-field input[type="text"],
body .oneclub-fab-state-login .oneclub-login-field input[type="password"] {
    background: var(--oc-login-field-bg, #fff) !important;
    color: var(--oc-login-field-text, #111827) !important;
}
body .oneclub-fab-state-login .oneclub-login-submit {
    background: var(--oc-login-btn-bg, #000) !important;
    color: var(--oc-login-btn-text, #fff) !important;
}

/* Login close button — admin-controlled dark/light style */
body .oneclub-fab-modal:has(.oneclub-fab-state-login.active) .oneclub-fab-close {
    background: var(--oc-login-close-bg, rgba(0,0,0,0.07)) !important;
    color: var(--oc-login-close-color, #111827) !important;
}

/* CTA (Join) state */
body .oneclub-fab-state-join .oneclub-fab-dark-header {
    background: var(--oc-cta-bg, #111111) !important;
}
body .oneclub-fab-state-join .oneclub-fab-h2 {
    color: var(--oc-cta-text, #fff) !important;
}
body .oneclub-fab-state-join .oneclub-fab-lead {
    color: var(--oc-cta-text-muted, rgba(255,255,255,0.75)) !important;
}
body .oneclub-fab-state-join .oneclub-fab-lead span {
    color: var(--oc-cta-text, #fff) !important;
}
body .oneclub-fab-state-join .oneclub-fab-note,
body .oneclub-fab-state-join .oneclub-fab-product-price {
    color: var(--oc-cta-text-muted, rgba(255,255,255,0.5)) !important;
}
body .oneclub-fab-state-join .oneclub-fab-btn-light {
    background: var(--oc-cta-btn-bg, #fff) !important;
    color: var(--oc-cta-btn-text, #111) !important;
}

/* Register state */
body .oneclub-fab-state-register .oneclub-fab-card {
    background: linear-gradient(
        to bottom,
        var(--oc-register-header-bg, #fff) 0,
        var(--oc-register-header-bg, #fff) 15%,
        var(--oc-register-bg, #fff) 15%,
        var(--oc-register-bg, #fff) 100%
    ) !important;
    color: var(--oc-register-text, #111827) !important;
}
body .oneclub-fab-state-register .oneclub-fab-card-title {
    color: var(--oc-register-header-text, #111827) !important;
}
body .oneclub-fab-state-register .oneclub-register-field input {
    background: var(--oc-register-field-bg, #fff) !important;
    color: var(--oc-register-field-text, #111827) !important;
}
body .oneclub-fab-state-register .oneclub-register-submit {
    background: var(--oc-register-btn-bg, #000) !important;
    color: var(--oc-register-btn-text, #fff) !important;
}
body .oneclub-fab-modal:has(.oneclub-fab-state-register.active) .oneclub-fab-close {
    background: var(--oc-register-close-bg, rgba(0,0,0,0.07)) !important;
    color: var(--oc-register-close-color, #111827) !important;
}

/* Welcome state */
body .oneclub-fab-state-welcome .oneclub-fab-dark-header {
    background: var(--oc-welcome-dark-bg, #111111) !important;
}
body .oneclub-fab-state-welcome .oneclub-fab-h2 {
    color: var(--oc-welcome-dark-text, #fff) !important;
}
body .oneclub-fab-state-welcome .oneclub-fab-lead {
    color: var(--oc-welcome-dark-text, #fff) !important;
    opacity: 0.8;
}
body .oneclub-fab-state-welcome .oneclub-fab-card {
    background: var(--oc-welcome-card-bg, #fff) !important;
    color: var(--oc-welcome-card-text, #111827) !important;
}
body .oneclub-fab-state-welcome .oneclub-fab-btn-dark {
    background: var(--oc-welcome-btn-bg, #000) !important;
    color: var(--oc-welcome-btn-text, #fff) !important;
}

/* Returning state */
body .oneclub-fab-state-returning .oneclub-fab-dark-header {
    background: var(--oc-returning-dark-bg, #111111) !important;
}
body .oneclub-fab-state-returning .oneclub-fab-h2 {
    color: var(--oc-returning-dark-text, #fff) !important;
}
body .oneclub-fab-state-returning .oneclub-fab-lead {
    color: var(--oc-returning-dark-text, #fff) !important;
    opacity: 0.8;
}
body .oneclub-fab-state-returning .oneclub-fab-card {
    background: var(--oc-returning-card-bg, #fff) !important;
    color: var(--oc-returning-card-text, #111827) !important;
}
body .oneclub-fab-state-returning .oneclub-fab-btn-dark {
    background: var(--oc-returning-btn-bg, #000) !important;
    color: var(--oc-returning-btn-text, #fff) !important;
}

/* Checkout banner text */
body .oc-checkout-banner-txt {
    color: var(--oc-checkout-banner-text, #fff) !important;
}