/* ═══════════════════════════════════════════════════════════════════════════
   WooCommerce Mobile Cart Widget — cart.css
   Reference: dark navy bg (#1a1a3e), orange accent (#F07C1E),
              white text, scrollable items, fixed summary footer.
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ── Root tokens ─────────────────────────────────────────────────────────── */
.wmc-cart {
    /* Colours (all overridable via Elementor controls) */
    --wmc-bg:         #1a1a3e;
    --wmc-bg-summary: #23234d;
    --wmc-bg-item:    rgba(255,255,255,0.04);
    --wmc-accent:     #F07C1E;
    --wmc-accent-dk:  #d9690f;
    --wmc-text:       #ffffff;
    --wmc-muted:      #8080aa;
    --wmc-border:     rgba(255,255,255,0.08);
    --wmc-thumb-size: 80px;
    --wmc-radius-sm:  12px;
    --wmc-radius-md:  18px;
    --wmc-radius-pill:999px;
    --wmc-font:       'Nunito', system-ui, sans-serif;
    --wmc-transition: 140ms ease;

    /* Layout */
    display:        flex;
    flex-direction: column;
    background:     var(--wmc-bg);
    border-radius:  var(--wmc-radius-md);
    overflow:       hidden;
    font-family:    var(--wmc-font);
    color:          var(--wmc-text);
    -webkit-font-smoothing: antialiased;
    position:       relative;
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL LOADING OVERLAY
══════════════════════════════════════════════════════════════════════════ */

.wmc-overlay {
    display:          none;
    position:         absolute;
    inset:            0;
    z-index:          100;
    background:       rgba(26, 26, 62, 0.7);
    backdrop-filter:  blur(3px);
    align-items:      center;
    justify-content:  center;
}

.wmc-cart[data-loading="true"] .wmc-overlay {
    display: flex;
}

.wmc-cart[data-loading="true"] .wmc-fragment {
    pointer-events: none;
    user-select:    none;
}

/* Spinner ring */
.wmc-spinner {
    width:        44px;
    height:       44px;
    border:       3.5px solid rgba(240,124,30,0.25);
    border-top-color: var(--wmc-accent);
    border-radius:   50%;
    animation:    wmc-spin 0.7s linear infinite;
}

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

/* ══════════════════════════════════════════════════════════════════════════
   FRAGMENT WRAPPER — stretches to fill; houses items + summary
══════════════════════════════════════════════════════════════════════════ */

.wmc-fragment {
    display:        flex;
    flex-direction: column;
    min-height:     0;      /* critical: allows flex child to shrink below content */
    overflow:       hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLLABLE ITEMS AREA
══════════════════════════════════════════════════════════════════════════ */

.wmc-items-wrap {
    flex:          1 1 auto;
    overflow-y:    auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding:       16px 16px 8px;

    /* Custom scrollbar (Webkit) */
    scrollbar-width: thin;
    scrollbar-color: rgba(240,124,30,0.3) transparent;
}

.wmc-items-wrap::-webkit-scrollbar          { width: 4px; }
.wmc-items-wrap::-webkit-scrollbar-track    { background: transparent; }
.wmc-items-wrap::-webkit-scrollbar-thumb    { background: rgba(240,124,30,0.35); border-radius: 2px; }

.wmc-items {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        0;
    height: 280px;
    overflow-y: auto;
}

/* ── Single cart item ─────────────────────────────────────────────────── */

.wmc-item {
    display:        flex;
    align-items:    center;
    gap:            14px;
    padding:        14px 0;
    border-bottom:  1px solid var(--wmc-border);
    position:       relative;
    transition:     opacity var(--wmc-transition);
}

.wmc-item:last-child {
    border-bottom: none;
}

/* Thumbnail */
.wmc-item-thumb {
    flex-shrink:   0;
    width:         var(--wmc-thumb-size);
    height:        var(--wmc-thumb-size);
    border-radius: var(--wmc-radius-sm);
    overflow:      hidden;
    background:    rgba(255,255,255,0.95);
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.wmc-item-thumb img,
.wmc-item-img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
    padding:    4px;
    box-sizing: border-box;
}

/* Body */
.wmc-item-body {
    flex:        1 1 auto;
    min-width:   0;
    display:     flex;
    flex-direction: column;
    gap:         4px;
}

.wmc-item-top {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             8px;
}

.wmc-item-name {
    margin:        0;
    font-size:     14px;
    font-weight:   700;
    line-height:   1.3;
    color:         var(--wmc-text);
    flex:          1;
    /* Clamp to 2 lines */
    display:       -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:      hidden;
}

.wmc-item-price {
    margin:      0;
    font-size:   14px;
    font-weight: 700;
    color:       var(--wmc-text);
    white-space: nowrap;
    flex-shrink: 0;
}

.wmc-item-note {
    margin:    0;
    font-size: 12px;
    color:     var(--wmc-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* Qty row */
.wmc-qty-row {
    display:     flex;
    justify-content: flex-end;
}

/* ── Quantity pill ────────────────────────────────────────────────────── */

.wmc-qty-pill {
    display:       flex;
    align-items:   center;
    background:    var(--wmc-accent);
    border-radius: var(--wmc-radius-pill);
    padding:       3px 3px;
    gap:           0;
    height:        40px;
}

.wmc-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          34px;
    border-radius:   50%;
    border:          none;
    background:      transparent;
    cursor:          pointer;
    color:           #ffffff;
    padding:         0;
    flex-shrink:     0;
    transition:      background var(--wmc-transition), transform var(--wmc-transition);
    -webkit-tap-highlight-color: transparent;
}

.wmc-btn svg {
    width:  16px;
    height: 16px;
    stroke: currentColor;
    fill:   none;
    pointer-events: none;
    display: block;
}

.wmc-btn:hover  { background: rgba(255,255,255,0.15); }
.wmc-btn:active { transform: scale(0.9); }

/* Minus text button */
.wmc-btn-minus {
    font-size:   24px;
    font-weight: 300;
    line-height: 1;
    padding-bottom: 1px; /* optical centering */
}

.wmc-qty-num {
    min-width:   24px;
    text-align:  center;
    font-size:   16px;
    font-weight: 800;
    color:       #ffffff;
    font-family: var(--wmc-font);
    user-select: none;
    padding:     0 2px;
}

/* Plus button — white circle on top of orange pill */
.wmc-btn-plus {
    background:    #ffffff;
    color:         var(--wmc-accent);
}

.wmc-btn-plus svg {
    stroke: var(--wmc-accent);
}

.wmc-btn-plus:hover {
    background:  rgba(255,255,255,0.9);
    color:       var(--wmc-accent-dk);
}

/* ── Per-item loading overlay ─────────────────────────────────────────── */

.wmc-item-loading {
    display:         none;
    position:        absolute;
    inset:           0;
    z-index:         5;
    background:      rgba(26, 26, 62, 0.65);
    border-radius:   var(--wmc-radius-sm);
    align-items:     center;
    justify-content: center;
}

.wmc-item.is-updating .wmc-item-loading {
    display: flex;
}

.wmc-item.is-updating .wmc-item-body,
.wmc-item.is-updating .wmc-item-thumb {
    opacity: 0.4;
}

.wmc-item-spinner {
    width:         22px;
    height:        22px;
    border:        2.5px solid rgba(240,124,30,0.3);
    border-top-color: var(--wmc-accent);
    border-radius: 50%;
    animation:     wmc-spin 0.65s linear infinite;
}

/* ══════════════════════════════════════════════════════════════════════════
   SUMMARY PANEL — sticks to bottom of widget
══════════════════════════════════════════════════════════════════════════ */

.wmc-summary {
    flex-shrink:    0;
    background:     var(--wmc-bg-summary);
    padding:        20px 16px 16px;
    border-top-left-radius:  var(--wmc-radius-md);
    border-top-right-radius: var(--wmc-radius-md);
    display:        flex;
    flex-direction: column;
    gap:            0;
}

/* Rows */
.wmc-summary-rows {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding-bottom: 14px;
}

.wmc-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
}

.wmc-row-label {
    font-size:   14px;
    font-weight: 600;
    color:       var(--wmc-text);
}

.wmc-row-value {
    font-size:   14px;
    font-weight: 600;
    color:       var(--wmc-text);
}

.wmc-free-label {
    font-size:   14px;
    font-weight: 600;
    color:       var(--wmc-text);
}

.wmc-muted {
    color: var(--wmc-muted);
}

/* Divider */
.wmc-summary-divider {
    height:     1px;
    background: var(--wmc-border);
    margin:     0 0 14px;
}

/* Total */
.wmc-summary-total {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-bottom:  16px;
}

.wmc-total-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
}

.wmc-total-label {
    font-size:   20px;
    font-weight: 800;
    color:       var(--wmc-text);
}

.wmc-total-value {
    font-size:   18px;
    font-weight: 700;
    color:       var(--wmc-text);
}

.wmc-delivery-hint {
    margin:    0;
    font-size: 12px;
    color:     var(--wmc-muted);
    line-height: 1.4;
}

/* ── Checkout button ──────────────────────────────────────────────────── */

.wmc-checkout-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    padding:         18px 24px;
    background:      var(--wmc-accent);
    color:           #ffffff;
    font-family:     var(--wmc-font);
    font-size:       17px;
    font-weight:     800;
    border-radius:   var(--wmc-radius-pill);
    text-decoration: none;
    box-sizing:      border-box;
    letter-spacing:  0.01em;
    transition:      background var(--wmc-transition), transform var(--wmc-transition);
    -webkit-tap-highlight-color: transparent;
    gap:             4px;
}

.wmc-checkout-btn:hover {
    background:      var(--wmc-accent-dk);
    color:           #ffffff;
    text-decoration: none;
}

.wmc-checkout-btn:active {
    transform: scale(0.98);
}

.wmc-checkout-total {
    font-weight: 800;
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════════════════ */

.wmc-empty {
    flex:            1 1 auto;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         40px 24px;
    gap:             12px;
    text-align:      center;
}

.wmc-empty-icon svg {
    width:  64px;
    height: 64px;
    stroke: var(--wmc-muted);
}

.wmc-empty-title {
    margin:      0;
    font-size:   18px;
    font-weight: 800;
    color:       var(--wmc-text);
}

.wmc-empty-desc {
    margin:      0;
    font-size:   14px;
    color:       var(--wmc-muted);
    line-height: 1.55;
    max-width:   240px;
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .wmc-spinner,
    .wmc-item-spinner { animation: none; }
    .wmc-btn,
    .wmc-checkout-btn { transition: none; }
}