/**
 * Loyalty Club by Atypiq — Public (Frontend) Styles
 *
 * Minimal — the aq-csd design system (Customer Dashboard by Atypiq)
 * handles the My Account layout, cards, tables, and buttons.
 * This file adds only loyalty-specific elements.
 */


/* ═══ ORDER DETAILS — POINTS EARNED ═════════════════════════════════ */

.aq-lc-order-points {
    margin-top:    12px;
    padding:       10px 14px;
    background:    var(--aq-csd-success-light, #ecfdf5);
    border-left:   3px solid var(--aq-csd-success, #10b981);
    border-radius: 0 var(--aq-csd-radius, 8px) var(--aq-csd-radius, 8px) 0;
    font-size:     14px;
    color:         var(--aq-csd-success-text, #065f46);
}


/* ═══ LOAD MORE — TRANSITION STATE ══════════════════════════════════ */

.aq-lc-load-more:disabled {
    opacity: 0.6;
    cursor:  wait;
}


/* ═══ TIER BADGE ══════════════════════════════════════════════════════ */

.aq-lc-tier-dot {
    display:       inline-block;
    width:         14px;
    height:        14px;
    border-radius: 50%;
    flex-shrink:   0;
    vertical-align: middle;
}

.aq-lc-tier-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        4px 12px;
    border-radius:  6px;
    font-size:      15px;
    font-weight:    700;
    background:     var(--aq-lc-tier-color, #ccc);
    color:          #fff;
    text-shadow:    0 1px 2px rgba(0,0,0,.2);
    line-height:    1.4;
}

.aq-lc-tier-badge--sm {
    font-size:      12px;
    padding:        2px 8px;
    border-radius:  4px;
    font-weight:    600;
}


/* ═══ TIER STAT CARD (inside aq-csd-stat) ════════════════════════════ */

.aq-lc-stat-tier {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.aq-lc-stat-tier__row {
    display:        flex;
    align-items:    baseline;
    gap:            10px;
    flex-wrap:      wrap;
}

.aq-lc-stat-tier__name {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-size:      22px;
    font-weight:    700;
    color:          var(--aq-csd-text, #111827);
    line-height:    1.3;
}

.aq-lc-stat-tier__multiplier {
    font-size:    13px;
    font-weight:  400;
    color:        var(--aq-csd-text-muted, #9ca3af);
    white-space:  nowrap;
}

.aq-lc-stat-tier__progress {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    width:          100%;
}

.aq-lc-stat-tier__bar {
    height:        4px;
    background:    var(--aq-csd-border, #e5e7eb);
    border-radius: 2px;
    overflow:      hidden;
    width:         100%;
}

.aq-lc-stat-tier__fill {
    height:        100%;
    border-radius: 2px;
    background:    var(--aq-csd-accent);
    display:       block;
    transition:    width .4s ease;
    min-width:     3px;
}

.aq-lc-stat-tier__remaining {
    font-size:  12px;
    color:      var(--aq-csd-text-muted, #9ca3af);
}


/* ═══ PRODUCT PAGE — POINTS WIDGET ═══════════════════════════════════ */

.aq-lc-product-points {
    margin:        12px 0;
    padding:       10px 14px;
    background:    var(--aq-csd-accent-light, #eef2ff);
    border-left:   3px solid var(--aq-csd-accent, #4f46e5);
    border-radius: 0 6px 6px 0;
    font-size:     14px;
    color:         var(--aq-csd-accent-text, #3730a3);
    line-height:   1.5;
    transition:    opacity .2s;
}

.aq-lc-product-points strong {
    color:       var(--aq-csd-accent, #4f46e5);
    font-weight: 700;
}

.aq-lc-pp-multiplier {
    font-size:  12px;
    opacity:    0.7;
}


/* ═══ BIRTHDAY CTA BANNER ════════════════════════════════════════════ */

.aq-lc-birthday-cta {
    display:        flex;
    align-items:    center;
    gap:            12px;
    margin-bottom:  16px;
    padding:        14px 18px;
    background:     linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border:         1px solid #f59e0b;
    border-radius:  8px;
    font-size:      14px;
    color:          #78350f;
}

.aq-lc-birthday-cta__icon {
    font-size: 28px;
    flex-shrink: 0;
}

.aq-lc-birthday-cta__text {
    flex: 1;
    line-height: 1.4;
}

.aq-lc-birthday-cta__text strong {
    display: block;
    margin-bottom: 2px;
}

.aq-lc-birthday-cta__btn {
    display:       inline-block;
    padding:       8px 16px;
    background:    #f59e0b;
    color:         #fff !important;
    border-radius: 6px;
    font-weight:   600;
    font-size:     13px;
    text-decoration: none !important;
    white-space:   nowrap;
    transition:    background .2s;
}

.aq-lc-birthday-cta__btn:hover {
    background: #d97706;
}