/* =============================================================================
   WooCommerce Mini Cart — Slide Drawer
   ============================================================================= */

/* ─── CSS variables ─────────────────────────────────────────────────────────── */
:root {
    --wcmc-green:       #16a34a;
    --wcmc-green-dark:  #15803d;
    --wcmc-green-light: #dcfce7;
    --wcmc-red:         #dc2626;
    --wcmc-text:        #111827;
    --wcmc-muted:       #6b7280;
    --wcmc-border:      #e5e7eb;
    --wcmc-bg:          #ffffff;
    --wcmc-drawer-w:    400px;
    --wcmc-radius:      12px;
    --wcmc-shadow:      0 20px 60px rgba(0,0,0,0.18);
    --wcmc-transition:  0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Trigger button (shortcode output) ─────────────────────────────────────── */
.wcmc-trigger {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      transparent;
    border:          none;
    padding:         6px;
    cursor:          pointer;
    color:           inherit;
    line-height:     1;
    transition:      color 0.2s, transform 0.15s;
}
.wcmc-trigger:hover  { transform: scale(1.1); }
.wcmc-trigger:focus-visible {
    outline:        2px solid var(--wcmc-green);
    outline-offset: 3px;
    border-radius:  6px;
}

.wcmc-cart-svg {
    width:  26px;
    height: 26px;
    display: block;
}

/* Badge */
.wcmc-badge {
    position:         absolute;
    top:              -4px;
    right:            -6px;
    min-width:        18px;
    height:           18px;
    padding:          0 4px;
    background:       var(--wcmc-green);
    color:            #fff;
    font-size:        11px;
    font-weight:      700;
    line-height:      18px;
    text-align:       center;
    border-radius:    999px;
    box-shadow:       0 1px 4px rgba(22,163,74,0.4);
    transform:        scale(0);
    transition:       transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events:   none;
}
.wcmc-badge.is-visible { transform: scale(1); }

/* ─── Overlay ────────────────────────────────────────────────────────────────── */
.wcmc-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.45);
    z-index:    99998;
    opacity:    0;
    visibility: hidden;
    transition: opacity var(--wcmc-transition), visibility var(--wcmc-transition);
    backdrop-filter: blur(2px);
}
.wcmc-overlay.is-open {
    opacity:    1;
    visibility: visible;
}

/* ─── Drawer ─────────────────────────────────────────────────────────────────── */
.wcmc-drawer {
    position:   fixed;
    top:        0;
    right:      0;
    bottom:     0;
    width:      var(--wcmc-drawer-w);
    max-width:  100vw;
    background: var(--wcmc-bg);
    z-index:    99999;
    display:    flex;
    flex-direction: column;
    box-shadow: var(--wcmc-shadow);
    transform:  translateX(100%);
    transition: transform var(--wcmc-transition);
    border-radius: var(--wcmc-radius) 0 0 var(--wcmc-radius);
}
.wcmc-drawer.is-open { transform: translateX(0); }

/* ─── Drawer header ──────────────────────────────────────────────────────────── */
.wcmc-drawer-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         18px 20px;
    border-bottom:   1px solid var(--wcmc-border);
    flex-shrink:     0;
}

.wcmc-drawer-title {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   17px;
    font-weight: 700;
    color:       var(--wcmc-text);
    margin:      0;
}
.wcmc-drawer-title .dashicons {
    color:     var(--wcmc-green);
    font-size: 22px;
    width:     22px;
    height:    22px;
}

.wcmc-header-count {
    font-size:   12px;
    font-weight: 600;
    color:       var(--wcmc-muted);
    background:  #f3f4f6;
    padding:     2px 8px;
    border-radius: 999px;
}

.wcmc-close {
    background:  transparent;
    border:      none;
    cursor:      pointer;
    padding:     6px;
    color:       var(--wcmc-muted);
    border-radius: 6px;
    transition:  background 0.15s, color 0.15s;
    line-height: 1;
    display:     flex;
}
.wcmc-close:hover { background: #f3f4f6; color: var(--wcmc-text); }
.wcmc-close .dashicons { font-size: 20px; width: 20px; height: 20px; }

/* ─── Drawer body ────────────────────────────────────────────────────────────── */
.wcmc-drawer-body {
    flex:       1;
    overflow-y: auto;
    padding:    16px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--wcmc-border) transparent;
}
.wcmc-drawer-body::-webkit-scrollbar       { width: 4px; }
.wcmc-drawer-body::-webkit-scrollbar-track { background: transparent; }
.wcmc-drawer-body::-webkit-scrollbar-thumb { background: var(--wcmc-border); border-radius: 4px; }

/* ─── Loading ────────────────────────────────────────────────────────────────── */
.wcmc-loading {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         48px 0;
    gap:             14px;
    color:           var(--wcmc-muted);
    font-size:       14px;
}
.wcmc-loading p { margin: 0; }

.wcmc-spinner {
    width:  32px;
    height: 32px;
    border: 3px solid var(--wcmc-border);
    border-top-color: var(--wcmc-green);
    border-radius: 50%;
    animation: wcmc-spin 0.7s linear infinite;
}
@keyframes wcmc-spin { to { transform: rotate(360deg); } }

/* ─── Empty state ─────────────────────────────────────────────────────────────── */
.wcmc-empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         48px 0;
    gap:             12px;
    color:           var(--wcmc-muted);
    text-align:      center;
}
.wcmc-empty .dashicons { font-size: 48px; width: 48px; height: 48px; opacity: 0.3; }
.wcmc-empty p { margin: 0; font-size: 15px; }

/* ─── Items list ──────────────────────────────────────────────────────────────── */
.wcmc-items {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.wcmc-item {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       14px;
    background:    #fafafa;
    border:        1px solid var(--wcmc-border);
    border-radius: var(--wcmc-radius);
    transition:    opacity 0.25s, transform 0.25s;
    position:      relative;
}
.wcmc-item.is-removing {
    opacity:   0;
    transform: translateX(30px);
}

/* Thumbnail */
.wcmc-item-thumb {
    flex-shrink: 0;
    width:       70px;
    height:      70px;
    border-radius: 8px;
    overflow:    hidden;
    border:      1px solid var(--wcmc-border);
    background:  #fff;
}
.wcmc-item-thumb img,
.wcmc-item-thumb .wcmc-item-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* Item info */
.wcmc-item-info { flex: 1; min-width: 0; }

.wcmc-item-name {
    font-size:   14px;
    font-weight: 600;
    color:       var(--wcmc-text);
    margin:      0 0 4px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    display:     block;
}
.wcmc-item-name:hover { color: var(--wcmc-green); }

.wcmc-item-price {
    font-size:   13px;
    color:       var(--wcmc-muted);
    margin:      0 0 10px;
}
.wcmc-item-line-total {
    font-size:   14px;
    font-weight: 700;
    color:       var(--wcmc-green);
}

/* Quantity row */
.wcmc-qty-row {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.wcmc-qty-stepper {
    display:     inline-flex;
    align-items: center;
    border:      1.5px solid var(--wcmc-border);
    border-radius: 999px;
    overflow:    hidden;
    background:  #fff;
}

.wcmc-qty-btn {
    width:       30px;
    height:      30px;
    background:  transparent;
    border:      none;
    cursor:      pointer;
    font-size:   18px;
    line-height: 1;
    color:       var(--wcmc-text);
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background 0.15s;
    flex-shrink: 0;
}
.wcmc-qty-btn:hover:not(:disabled) { background: #f3f4f6; }
.wcmc-qty-btn:disabled { color: var(--wcmc-border); cursor: default; }

.wcmc-qty-val {
    width:       32px;
    text-align:  center;
    font-size:   14px;
    font-weight: 700;
    border:      none;
    background:  transparent;
    color:       var(--wcmc-text);
    padding:     0;
    -moz-appearance: textfield;
}
.wcmc-qty-val::-webkit-inner-spin-button,
.wcmc-qty-val::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Remove button */
.wcmc-remove-btn {
    background:  transparent;
    border:      none;
    cursor:      pointer;
    color:       var(--wcmc-muted);
    padding:     4px;
    border-radius: 50%;
    transition:  background 0.15s, color 0.15s;
    display:     flex;
    line-height: 1;
    margin-left: auto;
}
.wcmc-remove-btn:hover { background: #fef2f2; color: var(--wcmc-red); }
.wcmc-remove-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }

/* ─── Drawer footer ──────────────────────────────────────────────────────────── */
.wcmc-drawer-footer {
    flex-shrink:  0;
    padding:      16px 20px;
    border-top:   2px solid var(--wcmc-border);
    background:   #fafafa;
    border-radius: 0 0 0 var(--wcmc-radius);
}

.wcmc-subtotal-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       16px;
    font-weight:     700;
    color:           var(--wcmc-text);
    margin-bottom:   4px;
}

.wcmc-footer-note {
    font-size:     12px;
    color:         var(--wcmc-muted);
    margin:        0 0 14px;
}

.wcmc-footer-actions {
    display: flex;
    gap:     10px;
}

/* Shared button base */
.wcmc-btn-outline,
.wcmc-btn-primary {
    flex:            1;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         11px 16px;
    border-radius:   999px;
    font-size:       13px;
    font-weight:     700;
    text-decoration: none;
    cursor:          pointer;
    transition:      background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    border:          2px solid transparent;
    white-space:     nowrap;
}
.wcmc-btn-outline:hover,
.wcmc-btn-primary:hover { transform: translateY(-1px); }

/* Outline variant */
.wcmc-btn-outline {
    background:   transparent;
    border-color: var(--wcmc-border);
    color:        var(--wcmc-text);
}
.wcmc-btn-outline:hover {
    border-color: var(--wcmc-green);
    color:        var(--wcmc-green);
    box-shadow:   0 2px 8px rgba(22,163,74,0.15);
}

/* Primary / green variant */
.wcmc-btn-primary {
    background:  var(--wcmc-green);
    border-color: var(--wcmc-green);
    color:       #fff;
    box-shadow:  0 2px 10px rgba(22,163,74,0.30);
}
.wcmc-btn-primary:hover {
    background:  var(--wcmc-green-dark);
    border-color: var(--wcmc-green-dark);
    box-shadow:  0 4px 16px rgba(22,163,74,0.40);
}

.wcmc-btn-outline .dashicons,
.wcmc-btn-primary .dashicons {
    font-size: 16px;
    width:     16px;
    height:    16px;
}

/* ─── Empty continue shopping btn ────────────────────────────────────────────── */
.wcmc-empty .wcmc-btn-outline {
    margin-top: 4px;
    flex: none;
    padding: 10px 22px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    :root { --wcmc-drawer-w: 100vw; }
    .wcmc-drawer { border-radius: 0; }
}

/* ─── Overrides / fixes ──────────────────────────────────────────────────────── */

/* Checkout button: force white text regardless of theme */
.wcmc-btn-primary,
.wcmc-btn-primary:visited,
.wcmc-btn-primary:hover,
.wcmc-btn-primary:focus {
    color: #ffffff !important;
}

/* Initial states — loading visible, items/empty/footer hidden */
#wcmc-loading  { display: flex;  }
#wcmc-items    { display: none;  }
#wcmc-empty    { display: none;  }
#wcmc-footer   { display: none;  }

/* ─── State-driven visibility via data-state attribute ───────────────────────
   This replaces all JS style.display manipulation.
   Only the drawer element needs to be found; CSS handles the rest.
   --------------------------------------------------------------------------- */

/* Default: everything hidden */
.wcmc-drawer .wcmc-loading,
.wcmc-drawer .wcmc-items,
.wcmc-drawer .wcmc-empty,
.wcmc-drawer .wcmc-drawer-footer { display: none !important; }

/* Loading state */
.wcmc-drawer[data-state="loading"] .wcmc-loading { display: flex !important; }

/* Items state */
.wcmc-drawer[data-state="items"] .wcmc-items          { display: flex  !important; }
.wcmc-drawer[data-state="items"] .wcmc-drawer-footer  { display: block !important; }

/* Empty state */
.wcmc-drawer[data-state="empty"] .wcmc-empty { display: flex !important; }