/* ==========================================================================
   Custom Login & Register Pro — Frontend Styles  v2.0
   Design: Clean single-column card, theme-override-safe
   All selectors scoped to #clrp-page for maximum specificity.
   ========================================================================== */

/* ── CSS Custom Properties (may be overridden by inline PHP <style>) ───── */
:root {
    --clrp-primary:         #16a34a;
    --clrp-primary-dark:    #15803d;
    --clrp-label-color:     #111827;
    --clrp-btn-text:        #ffffff;
    --clrp-heading-color:   #111827;
    --clrp-page-bg:         #ffffff;
    --clrp-card-bg:         #ffffff;

    --clrp-text:            #111827;
    --clrp-text-muted:      #6b7280;
    --clrp-border:          #e5e7eb;
    --clrp-input-bg:        #f9fafb;
    --clrp-error:           #dc2626;
    --clrp-error-bg:        #fef2f2;
    --clrp-required:        #ef4444;

    --clrp-radius:          10px;
    --clrp-radius-lg:       16px;
    --clrp-shadow:          0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
    --clrp-transition:      180ms ease;
    --clrp-font:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Scoped box-model reset ─────────────────────────────────────────────── */
#clrp-page,
#clrp-page * {
    box-sizing: border-box !important;
    font-family: var(--clrp-body-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */
#clrp-page.clrp-page {
    font-family:    var(--clrp-font) !important;
    background:     var(--clrp-page-bg) !important;
    padding:        24px 16px !important;
    margin:         0 !important;
    min-height:     auto !important;
}

#clrp-page > .woocommerce-notices-wrapper {
    max-width: 520px !important;
    margin:    0 auto 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════════════════ */
#clrp-page .clrp-card {
    background:     var(--clrp-card-bg, #ffffff) !important;
    border-radius:  var(--clrp-radius-lg) !important;
    box-shadow:     var(--clrp-shadow) !important;
    border:         1px solid var(--clrp-border) !important;
    width:          100% !important;
    max-width:      var(--clrp-card-maxwidth, 520px) !important;
    margin:         0 auto !important;
    display:        flex !important;
    flex-direction: column !important;
    overflow:       hidden !important;
}

/* ── Brand header ────────────────────────────────────────────────────────── */
#clrp-page .clrp-brand {
    padding:       28px 32px 22px !important;
    border-bottom: 1px solid var(--clrp-border) !important;
    text-align:    var(--clrp-brand-align, center) !important;
    background:    var(--clrp-card-bg, #ffffff) !important;
}

#clrp-page .clrp-heading,
#clrp-page .clrp-subheading {
    text-align: var(--clrp-brand-align, center) !important;
    width:      100% !important;
}

#clrp-page .clrp-logo {
    display:    block !important;
    max-height: 48px !important;
    max-width:  160px !important;
    width:      auto !important;
    margin:     0 auto 14px !important;
    object-fit: contain !important;
}

#clrp-page .clrp-heading {
    font-size:      var(--clrp-heading-size, 1.4375rem) !important;
    font-weight:    700 !important;
    color:          var(--clrp-heading-color, #111827) !important;
    margin:         0 0 6px !important;
    padding:        0 !important;
    line-height:    1.3 !important;
    letter-spacing: -.02em !important;
    border:         none !important;
    background:     none !important;
}

#clrp-page .clrp-subheading {
    font-size:   var(--clrp-subheading-size, .9375rem) !important;
    color:       #6b7280 !important;
    margin:      0 !important;
    padding:     0 !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAB NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */
#clrp-page .clrp-tab-nav {
    display:       flex !important;
    border-bottom: 1px solid var(--clrp-border) !important;
    background:    #fafafa !important;
    padding:       0 !important;
    margin:        0 !important;
    list-style:    none !important;
}

#clrp-page .clrp-tab {
    flex:               1 1 0 !important;
    padding:            13px 16px !important;
    font-family:        var(--clrp-font) !important;
    font-size:          .9375rem !important;
    font-weight:        500 !important;
    color:              #6b7280 !important;
    background:         transparent !important;
    border:             none !important;
    border-bottom:      2.5px solid transparent !important;
    cursor:             pointer !important;
    transition:         color var(--clrp-transition), border-color var(--clrp-transition), background var(--clrp-transition) !important;
    outline:            none !important;
    white-space:        nowrap !important;
    text-align:         center !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    letter-spacing:     .01em !important;
    line-height:        1.4 !important;
    text-decoration:    none !important;
    visibility:         visible !important;
    opacity:            1 !important;
}

#clrp-page .clrp-tab:hover {
    color:      var(--clrp-primary, #16a34a) !important;
    background: #f0fdf4 !important;
}

#clrp-page .clrp-tab:focus-visible {
    outline:        2px solid var(--clrp-primary, #16a34a) !important;
    outline-offset: -2px !important;
}

#clrp-page .clrp-tab.clrp-tab--active,
#clrp-page .clrp-tab[aria-selected="true"] {
    color:               var(--clrp-primary, #16a34a) !important;
    font-weight:         700 !important;
    border-bottom-color: var(--clrp-primary, #16a34a) !important;
    background:          #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANELS
   ═══════════════════════════════════════════════════════════════════════════ */
#clrp-page .clrp-panel {
    display:    none !important;
    padding:    26px 32px 32px !important;
    background: var(--clrp-card-bg, #ffffff) !important;
}

#clrp-page .clrp-panel.clrp-panel--active {
    display:   block !important;
    animation: clrp-panel-in .2s ease both !important;
}

@keyframes clrp-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── WC notices inside panel ──────────────────────────────────────────── */
#clrp-page .woocommerce-error,
#clrp-page .woocommerce-message,
#clrp-page .woocommerce-info {
    list-style:    none !important;
    margin:        0 0 20px !important;
    padding:       10px 14px !important;
    border-radius: 8px !important;
    font-size:     .875rem !important;
    line-height:   1.5 !important;
    border-left:   3px solid !important;
}

#clrp-page .woocommerce-error {
    background:   #fef2f2 !important;
    border-color: #dc2626 !important;
    color:        #991b1b !important;
}

#clrp-page .woocommerce-error li {
    list-style: none !important;
    padding:    2px 0 !important;
    color:      #991b1b !important;
}

#clrp-page .woocommerce-message {
    background:   #ecfdf5 !important;
    border-color: #16a34a !important;
    color:        #166534 !important;
}

#clrp-page .woocommerce-info {
    background:   #eff6ff !important;
    border-color: #3b82f6 !important;
    color:        #1e40af !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */
#clrp-page .clrp-form {
    margin:  0 !important;
    padding: 0 !important;
}

#clrp-page .clrp-grid {
    display: grid !important;
    gap:     14px !important;
}

#clrp-page .clrp-grid--2 {
    grid-template-columns: 1fr 1fr !important;
}

@media (max-width: 480px) {
    #clrp-page .clrp-grid--2 {
        grid-template-columns: 1fr !important;
    }
}

/* ── Field wrapper ──────────────────────────────────────────────────────── */
#clrp-page .clrp-field {
    margin-bottom: 16px !important;
}

#clrp-page .clrp-field:last-of-type {
    margin-bottom: 0 !important;
}

/* ── Label (CSS backup; primary override via PHP inline style) ──────────── */
#clrp-page .clrp-field > label {
    display:        block !important;
    font-size:      var(--clrp-label-size, .8125rem) !important;
    font-weight:    600 !important;
    color:          var(--clrp-label-color, #111827) !important;
    margin-bottom:  6px !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    line-height:    1.4 !important;
    visibility:     visible !important;
    opacity:        1 !important;
}

#clrp-page .clrp-required {
    color:       var(--clrp-required, #ef4444) !important;
    margin-left: 2px !important;
    font-weight: 700 !important;
}

/* ── Input wrapper ──────────────────────────────────────────────────────── */
#clrp-page .clrp-input-wrap {
    position: relative !important;
}

#clrp-page .clrp-input-wrap .clrp-input-icon {
    position:       absolute !important;
    left:           12px !important;
    top:            50% !important;
    transform:      translateY(-50%) !important;
    display:        flex !important;
    align-items:    center !important;
    pointer-events: none !important;
    color:          #9ca3af !important;
    line-height:    1 !important;
}

#clrp-page .clrp-input-wrap > .clrp-input-icon + .clrp-input,
#clrp-page .clrp-input-wrap > .clrp-input-icon + input {
    padding-left: 38px !important;
}

/* ── Input ──────────────────────────────────────────────────────────────── */
#clrp-page .clrp-input,
#clrp-page .clrp-form input[type="text"],
#clrp-page .clrp-form input[type="email"],
#clrp-page .clrp-form input[type="tel"],
#clrp-page .clrp-form input[type="password"],
#clrp-page .clrp-form input[type="url"] {
    display:            block !important;
    width:              100% !important;
    height:             44px !important;
    padding:            0 14px !important;
    font-size:          var(--clrp-input-size, .9375rem) !important;
    color:              #111827 !important;
    background:         var(--clrp-input-bg, #f9fafb) !important;
    border:             1.5px solid var(--clrp-border, #e5e7eb) !important;
    border-radius:      var(--clrp-radius, 10px) !important;
    box-shadow:         none !important;
    outline:            none !important;
    transition:         border-color var(--clrp-transition), background var(--clrp-transition) !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    margin:             0 !important;
}

#clrp-page .clrp-input:focus,
#clrp-page .clrp-form input[type="text"]:focus,
#clrp-page .clrp-form input[type="email"]:focus,
#clrp-page .clrp-form input[type="tel"]:focus,
#clrp-page .clrp-form input[type="password"]:focus {
    border-color: var(--clrp-primary, #16a34a) !important;
    box-shadow:   0 0 0 3px rgba(22,163,74,.12) !important;
    background:   #ffffff !important;
    outline:      none !important;
}

#clrp-page .clrp-input::placeholder {
    color:   #c0c8d0 !important;
    opacity: 1 !important;
}

#clrp-page .clrp-input-wrap--password .clrp-input {
    padding-right: 44px !important;
}

/* ── Password toggle ────────────────────────────────────────────────────── */
#clrp-page .clrp-toggle-pw {
    position:           absolute !important;
    right:              2px !important;
    top:                2px !important;
    bottom:             2px !important;
    padding:            0 11px !important;
    background:         transparent !important;
    border:             none !important;
    cursor:             pointer !important;
    color:              #9ca3af !important;
    display:            flex !important;
    align-items:        center !important;
    border-radius:      0 8px 8px 0 !important;
    transition:         color var(--clrp-transition) !important;
    -webkit-appearance: none !important;
}

#clrp-page .clrp-toggle-pw:hover {
    color: var(--clrp-primary, #16a34a) !important;
}

/* ── Strength bar ───────────────────────────────────────────────────────── */
#clrp-page .clrp-strength-bar {
    height:        3px !important;
    background:    #e5e7eb !important;
    border-radius: 99px !important;
    margin-top:    6px !important;
    overflow:      hidden !important;
}

#clrp-page .clrp-strength-fill {
    height:        100% !important;
    width:         0% !important;
    border-radius: 99px !important;
    transition:    width .3s ease, background .3s ease !important;
}

#clrp-page .clrp-strength-label {
    font-size:      .72rem !important;
    font-weight:    700 !important;
    color:          #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin:         5px 0 0 !important;
    min-height:     1em !important;
    visibility:     visible !important;
    opacity:        1 !important;
}

#clrp-page .clrp-strength--1 .clrp-strength-fill { width:25%  !important; background:#ef4444 !important; }
#clrp-page .clrp-strength--2 .clrp-strength-fill { width:50%  !important; background:#f59e0b !important; }
#clrp-page .clrp-strength--3 .clrp-strength-fill { width:75%  !important; background:#3b82f6 !important; }
#clrp-page .clrp-strength--4 .clrp-strength-fill { width:100% !important; background:#16a34a !important; }

/* ── Row (remember me + lost password) ─────────────────────────────────── */
#clrp-page .clrp-row {
    display:         flex !important;
    align-items:     center !important;
    gap:             8px !important;
    margin:          0 0 18px !important;
    flex-wrap:       wrap !important;
}

#clrp-page .clrp-row--space-between {
    justify-content: space-between !important;
}

#clrp-page .clrp-checkbox-label {
    display:     flex !important;
    align-items: center !important;
    gap:         7px !important;
    font-size:   .875rem !important;
    color:       #6b7280 !important;
    cursor:      pointer !important;
    user-select: none !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

#clrp-page .clrp-checkbox-label span {
    color:      #6b7280 !important;
    font-size:  .875rem !important;
    visibility: visible !important;
    opacity:    1 !important;
}

#clrp-page .clrp-checkbox-label input[type="checkbox"] {
    width:        16px !important;
    height:       16px !important;
    flex-shrink:  0 !important;
    cursor:       pointer !important;
    accent-color: var(--clrp-primary, #16a34a) !important;
    margin:       0 !important;
}

#clrp-page .clrp-lost-pw {
    font-size:       .875rem !important;
    font-weight:     500 !important;
    color:           var(--clrp-primary, #16a34a) !important;
    text-decoration: none !important;
}

#clrp-page .clrp-lost-pw:hover {
    text-decoration: underline !important;
    opacity:         .8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */
#clrp-page .clrp-btn {
    display:            inline-flex !important;
    align-items:        center !important;
    justify-content:    center !important;
    gap:                8px !important;
    padding:            0 24px !important;
    height:             48px !important;
    font-size:          var(--clrp-btn-size, .9375rem) !important;
    font-weight:        600 !important;
    letter-spacing:     .01em !important;
    border-radius:      var(--clrp-radius, 10px) !important;
    border:             1.5px solid transparent !important;
    cursor:             pointer !important;
    text-decoration:    none !important;
    position:           relative !important;
    overflow:           hidden !important;
    transition:         background-color var(--clrp-transition), transform var(--clrp-transition), box-shadow var(--clrp-transition) !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
}

#clrp-page .clrp-btn--primary {
    background-color: var(--clrp-primary, #16a34a) !important;
    color:            var(--clrp-btn-text, #ffffff) !important;
    border-color:     var(--clrp-primary, #16a34a) !important;
    box-shadow:       0 2px 8px rgba(22,163,74,.25) !important;
}

#clrp-page .clrp-btn--primary:hover {
    background-color: var(--clrp-primary-dark, #15803d) !important;
    border-color:     var(--clrp-primary-dark, #15803d) !important;
    box-shadow:       0 4px 16px rgba(22,163,74,.35) !important;
    transform:        translateY(-1px) !important;
    color:            var(--clrp-btn-text, #ffffff) !important;
}

#clrp-page .clrp-btn--primary:active {
    transform:  translateY(0) !important;
    box-shadow: 0 1px 4px rgba(22,163,74,.2) !important;
}

#clrp-page .clrp-btn--full {
    width:      100% !important;
    margin-top: 22px !important;
}

#clrp-page .clrp-btn-text {
    color:       var(--clrp-btn-text, #ffffff) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    visibility:  visible !important;
    opacity:     1 !important;
}

#clrp-page .clrp-btn.is-loading           { opacity: .85 !important; cursor: wait !important; }
#clrp-page .clrp-btn.is-loading .clrp-btn-text { opacity: 0 !important; }
#clrp-page .clrp-btn-spinner              { display: none !important; position: absolute !important; }

#clrp-page .clrp-btn.is-loading .clrp-btn-spinner {
    display:          block !important;
    width:            20px !important;
    height:           20px !important;
    border:           2.5px solid rgba(255,255,255,.35) !important;
    border-top-color: #fff !important;
    border-radius:    50% !important;
    animation:        clrp-spin .65s linear infinite !important;
}

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

/* ── Privacy ────────────────────────────────────────────────────────────── */
#clrp-page .clrp-privacy {
    font-size:   .8125rem !important;
    color:       #9ca3af !important;
    margin:      18px 0 0 !important;
    line-height: 1.55 !important;
}

#clrp-page .clrp-privacy a {
    color: var(--clrp-primary, #16a34a) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    #clrp-page .clrp-panel  { padding: 20px 20px 28px !important; }
    #clrp-page .clrp-brand  { padding: 22px 20px 18px !important; }
    #clrp-page .clrp-heading { font-size: 1.25rem !important; }
}

@media (max-width: 400px) {
    #clrp-page.clrp-page  { padding: 0 !important; }
    #clrp-page .clrp-card {
        border-radius: 0 !important;
        border-left:   none !important;
        border-right:  none !important;
        box-shadow:    none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PENDING APPROVAL NOTICE (My Account dashboard after registration)
   ═══════════════════════════════════════════════════════════════════════════ */
.clrp-pending-notice {
    display:       flex;
    gap:           20px;
    align-items:   flex-start;
    background:    #fffbeb;
    border:        1.5px solid #f59e0b;
    border-radius: 12px;
    padding:       24px 28px;
    margin:        0 0 24px;
}

.clrp-pending-icon   { flex-shrink: 0; color: #d97706; margin-top: 2px; }
.clrp-pending-body   { flex: 1; min-width: 0; }

.clrp-pending-title {
    font-size:   1.0625rem !important;
    font-weight: 700 !important;
    color:       #92400e !important;
    margin:      0 0 8px !important;
}

.clrp-pending-title-en {
    display:     block;
    font-weight: 400 !important;
    font-size:   .9rem !important;
    color:       #b45309 !important;
}

.clrp-pending-desc {
    font-size:   .9375rem !important;
    color:       #78350f !important;
    margin:      0 0 16px !important;
    line-height: 1.6 !important;
}

.clrp-pending-benefits {
    background: rgba(245,158,11,.08);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

.clrp-pending-benefits h3 {
    font-size:      .8rem !important;
    font-weight:    700 !important;
    color:          #92400e !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin:         0 0 6px !important;
}

.clrp-pending-benefits ul { margin: 0 !important; padding: 0 0 0 18px !important; list-style: disc !important; }
.clrp-pending-benefits li { font-size: .875rem !important; color: #78350f !important; line-height: 1.65 !important; }

.clrp-pending-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.clrp-pending-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         9px 20px !important;
    border-radius:   8px !important;
    font-size:       .875rem !important;
    font-weight:     600 !important;
    text-decoration: none !important;
    cursor:          pointer !important;
    transition:      background .18s, opacity .18s !important;
}

.clrp-pending-btn--primary   { background: #f59e0b !important; color: #1c1917 !important; }
.clrp-pending-btn--primary:hover { background: #d97706 !important; color: #1c1917 !important; }
.clrp-pending-btn--secondary { background: transparent !important; color: #92400e !important; border: 1.5px solid #f59e0b !important; }
.clrp-pending-btn--secondary:hover { background: rgba(245,158,11,.1) !important; }

@media (max-width: 560px) {
    .clrp-pending-notice  { flex-direction: column; gap: 14px; padding: 18px; }
    .clrp-pending-actions { flex-direction: column; }
    .clrp-pending-btn     { width: 100% !important; text-align: center !important; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #clrp-page .clrp-panel,
    #clrp-page .clrp-btn,
    #clrp-page .clrp-input,
    #clrp-page .clrp-tab,
    #clrp-page .clrp-btn-spinner {
        animation:  none !important;
        transition: none !important;
    }
}