/* ================================================================
   WooCommerce Custom Product Fields — Receipt Styles
   Fully settings-driven via CSS custom properties
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');

/* ---- Base CSS vars (overridden by inline style from template) ---- */
:root {
    --wccpf-receipt-width:  302px;
    --wccpf-primary:        #1a1a2e;
    --wccpf-accent:         #e94560;
    --wccpf-gold:           #f5a623;
    --wccpf-gold-light:     #ffd580;
    --wccpf-success:        #2ecc71;
    --wccpf-bg:             #ffffff;
    --wccpf-surface:        #f8f9fa;
    --wccpf-border:         #d8d8d8;
    --wccpf-text-main:      #1a1a2e;
    --wccpf-text-muted:     #666666;
    --wccpf-font:           'Cairo', 'Segoe UI', Arial, sans-serif;
    --wccpf-radius:         10px;
    --wccpf-shadow:         0 4px 20px rgba(26,26,46,0.14);

    /* These are overridden per-receipt by the template inline <style> */
    --rs-primary:   var(--wccpf-accent);
    --rs-accent:    var(--wccpf-gold);
    --rs-bg:        var(--wccpf-primary);
    --rs-fs-base:   11px;
    --rs-fs-store:  15px;
    --rs-fs-item:   11px;
    --rs-fs-total:  13px;
    --rs-logo-bg:   rgba(255,255,255,0.1);
    --rs-store-name: #ffffff;
    --rs-thank-title: #ffffff;
    --rs-thank-sub:  rgba(255,255,255,0.55);
    --rs-status-badge: var(--wccpf-success);
}

/* Bold option */
.wccpf-receipt-outer--bold .wccpf-receipt * {
    font-weight: 800 !important;
}

/* ================================================================
   OUTER WRAPPER
   ================================================================ */
.wccpf-receipt-outer {
    display:         flex;
    justify-content: center;
    align-items:     flex-start;
    padding:         12px 8px 16px;
    direction:       rtl;
    font-family:     var(--wccpf-font);
    font-size:       var(--rs-fs-base);
}

/* ================================================================
   RECEIPT CARD
   ================================================================ */
.wccpf-receipt {
    width:         var(--wccpf-receipt-width);
    max-width:     100%;
    background:    var(--wccpf-bg);
    border-radius: var(--wccpf-radius);
    box-shadow:    var(--wccpf-shadow);
    overflow:      hidden;
    font-family:   var(--wccpf-font);
    direction:     rtl;
    border:        1px solid var(--wccpf-border);
}

/* ================================================================
   HEADER — uses settings colours
   ================================================================ */
.wccpf-receipt__header {
    background:  var(--rs-bg);
    padding:     10px 14px 8px;
    text-align:  center;
    position:    relative;
    overflow:    hidden;
}
.wccpf-receipt__header::before {
    content:       '';
    position:      absolute;
    width:         90px;
    height:        90px;
    border-radius: 50%;
    background:    rgba(245,166,35,0.07);
    top:           -30px;
    left:          -20px;
    pointer-events: none;
}

.wccpf-receipt__logo {
    width:         40px;
    height:        40px;
    object-fit:    contain;
    border-radius: 50%;
    border:        2px solid var(--rs-accent);
    padding:       2px;
    background:    var(--rs-logo-bg);
    margin:        0 auto 4px;
    display:       block;
}

.wccpf-receipt__store-initial {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--rs-primary);
    color:           #fff;
    font-size:       18px;
    font-weight:     900;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 4px;
    border:          2px solid rgba(255,255,255,0.25);
}

.wccpf-receipt__store-name {
    color:          var(--rs-store-name);
    font-size:      var(--rs-fs-store);
    font-weight:    900;
    margin:         0 0 5px;
    letter-spacing: 0.4px;
}

.wccpf-receipt__badge {
    display:        inline-block;
    background:     var(--rs-accent);
    color:          #fff;
    font-size:      9.5px;
    font-weight:    700;
    padding:        2px 10px;
    border-radius:  20px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* ================================================================
   DIVIDERS
   ================================================================ */
.wccpf-receipt__divider        { margin: 0; border: none; height: 1px; }
.wccpf-receipt__divider--dashed { border-top: 1.5px dashed var(--wccpf-border); margin: 0 10px; }
.wccpf-receipt__divider--solid  {
    background: linear-gradient(90deg, transparent, var(--rs-accent), transparent);
    height: 1.5px;
    margin: 0 10px;
}

/* ================================================================
   ORDER META
   ================================================================ */
.wccpf-receipt__meta {
    padding:    5px 14px 4px;
    background: var(--wccpf-surface);
}
.wccpf-receipt__meta-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   2px;
    font-size:       var(--rs-fs-base);
    line-height:     1.4;
}
.wccpf-receipt__meta-label { color: var(--wccpf-text-muted); font-weight: 600; }
.wccpf-receipt__meta-value {
    color:        var(--wccpf-text-main);
    font-weight:  700;
    text-align:   left;
    direction:    ltr;
    unicode-bidi: embed;
}

/* ================================================================
   SECTION TITLE
   ================================================================ */
.wccpf-receipt__section-title {
    display:        flex;
    align-items:    center;
    gap:            4px;
    padding:        4px 14px 2px;
    font-size:      9.5px;
    font-weight:    700;
    color:          var(--wccpf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.wccpf-receipt__section-icon { font-size: 11px; }

/* ================================================================
   CUSTOMER INFO
   ================================================================ */
.wccpf-receipt__customer { padding: 0 14px 4px; }
.wccpf-receipt__customer-row {
    display:       flex;
    gap:           6px;
    margin-bottom: 1px;
    font-size:     var(--rs-fs-base);
    align-items:   flex-start;
    line-height:   1.5;
}
.wccpf-receipt__customer-label {
    color:       var(--wccpf-text-muted);
    font-weight: 700;
    min-width:   36px;
    flex-shrink: 0;
}
.wccpf-receipt__customer-value {
    color:      var(--wccpf-text-main);
    flex:       1;
    word-break: break-word;
}

/* ================================================================
   ITEMS
   ================================================================ */
.wccpf-receipt__items { padding: 3px 14px 6px; }
.wccpf-receipt__item {
    background:    var(--wccpf-surface);
    border-radius: 5px;
    padding:       5px 8px;
    margin-bottom: 4px;
    border-right:  3px solid var(--rs-accent);
}
.wccpf-receipt__item:last-child { margin-bottom: 0; }
.wccpf-receipt__item-header    { margin-bottom: 2px; }
.wccpf-receipt__item-name {
    font-size:   var(--rs-fs-item);
    font-weight: 700;
    color:       var(--wccpf-text-main);
    line-height: 1.3;
    display:     block;
}
.wccpf-receipt__item-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       var(--rs-fs-base);
}
.wccpf-receipt__item-qty      { color: var(--wccpf-text-muted); font-weight: 600; }
.wccpf-receipt__item-subtotal {
    color:        var(--wccpf-text-main);
    font-weight:  800;
    font-size:    var(--rs-fs-item);
    direction:    ltr;
    unicode-bidi: embed;
}

.wccpf-receipt__custom-fields {
    margin-top:  5px;
    padding-top: 5px;
    border-top:  1px dashed var(--wccpf-border);
}
.wccpf-receipt__cf-row {
    display:       flex;
    gap:           4px;
    font-size:     var(--rs-fs-base);
    margin-bottom: 2px;
    align-items:   flex-start;
    flex-wrap:     wrap;
}
.wccpf-receipt__cf-label { color: var(--rs-primary); font-weight: 700; flex-shrink: 0; }
.wccpf-receipt__cf-value { color: var(--wccpf-text-main); word-break: break-word; }

/* ================================================================
   TOTALS
   ================================================================ */
.wccpf-receipt__totals {
    padding:    4px 14px 7px;
    background: var(--wccpf-surface);
}
.wccpf-receipt__totals-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       var(--rs-fs-base);
    margin-bottom:   2px;
    color:           var(--wccpf-text-muted);
}
.wccpf-receipt__totals-row--discount { color: var(--rs-primary); font-weight: 600; }
.wccpf-receipt__totals-row--grand {
    font-size:     var(--rs-fs-total);
    font-weight:   900;
    color:         var(--wccpf-text-main);
    border-top:    2px solid var(--wccpf-text-main);
    padding-top:   4px;
    margin-top:    2px;
    margin-bottom: 0;
}
.wccpf-receipt__totals-row--grand span:last-child {
    color:        var(--rs-primary);
    font-size:    calc(var(--rs-fs-total) + 2px);
    direction:    ltr;
    unicode-bidi: embed;
}

/* Footer note */
.wccpf-receipt__footer-note {
    color:       rgba(255,255,255,0.7);
    font-size:   9.5px;
    text-align:  center;
    margin:      4px 0;
    line-height: 1.5;
}

/* ================================================================
   STATUS BADGE
   ================================================================ */
.wccpf-receipt__status { padding: 5px 14px 4px; text-align: center; }
.wccpf-receipt__status-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    border:        1.5px solid var(--rs-status-badge);
    color:         var(--rs-status-badge);
    font-size:     var(--rs-fs-base);
    font-weight:   700;
    padding:       4px 12px;
    border-radius: 20px;
}
.wccpf-receipt__status-check {
    width:           16px;
    height:          16px;
    background:      var(--rs-status-badge);
    color:           #fff;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       10px;
    font-weight:     900;
    flex-shrink:     0;
}

/* ================================================================
   FOOTER / THANK YOU
   ================================================================ */
.wccpf-receipt__footer {
    background: var(--rs-bg);
    padding:    8px 14px 7px;
    text-align: center;
}
.wccpf-receipt__thankyou        { margin-bottom: 4px; }
.wccpf-receipt__thankyou-icon   { font-size: 18px; margin-bottom: 2px; animation: wccpf-bounce 1.4s ease infinite; }
@keyframes wccpf-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}
.wccpf-receipt__thankyou-title {
    color:       var(--rs-thank-title);
    font-size:   var(--rs-fs-base);
    font-weight: 900;
    margin:      0 0 1px;
}
.wccpf-receipt__thankyou-sub {
    color:     var(--rs-thank-sub);
    font-size: 9px;
    margin:    0;
}

.wccpf-receipt__footer-dots {
    display:         flex;
    justify-content: center;
    gap:             4px;
    margin:          5px 0 4px;
}
.wccpf-receipt__footer-dots span {
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    var(--rs-accent);
    opacity:       0.7;
    animation:     wccpf-pulse-dot 1.4s ease-in-out infinite;
}
.wccpf-receipt__footer-dots span:nth-child(2) { animation-delay: 0.15s; }
.wccpf-receipt__footer-dots span:nth-child(3) { animation-delay: 0.30s; }
.wccpf-receipt__footer-dots span:nth-child(4) { animation-delay: 0.45s; }
.wccpf-receipt__footer-dots span:nth-child(5) { animation-delay: 0.60s; }
@keyframes wccpf-pulse-dot {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.35); }
}

.wccpf-receipt__footer-copy {
    color:     rgba(255,255,255,0.3);
    font-size: 9px;
    margin:    0;
}

/* ================================================================
   ADMIN WRAPPER
   ================================================================ */
.wccpf-admin-receipt-wrapper .wccpf-receipt-outer {
    justify-content: flex-start;
    padding:         8px 0 16px;
}

/* ================================================================
   PRINT — Black & White optimised, respects font-size settings
   ================================================================ */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust:         exact !important;
    }

    html, body {
        background: transparent !important;
        margin:     0 !important;
        padding:    0 !important;
    }

    .wccpf-no-print {
        display: none !important;
    }

    .wccpf-receipt-outer {
        padding:    0 !important;
        background: transparent !important;
    }

    .wccpf-receipt {
        box-shadow:        none !important;
        border:            1px solid var(--wccpf-border) !important;
        border-radius:     0 !important;
        page-break-inside: avoid;
        background:        #fff !important;
    }

    /* Kill animations */
    *, .wccpf-receipt__thankyou-icon, .wccpf-receipt__footer-dots span {
        animation:  none !important;
        transition: none !important;
    }
}