/*
 * BlueArk CORPOMEDGUA — Mini-Checkout Drawer CSS
 * Gradiente: #2BA8E2 → #202988 | Texto botones: #fff SIEMPRE
 * © 2024 Blue Ark Solutions
 */

:root {
    --ba-mc-g1      : #2BA8E2;
    --ba-mc-g2      : #202988;
    --ba-mc-grad    : linear-gradient(135deg, #2BA8E2 0%, #202988 100%);
    --ba-mc-w       : 380px;
    --ba-mc-radius  : 12px;
    --ba-mc-border  : #e2e8f0;
    --ba-mc-text    : #1a2a3a;
    --ba-mc-muted   : #6b7a8d;
    --ba-mc-bg      : #ffffff;
    --ba-mc-shadow  : 0 8px 40px rgba(32,41,136,.18);
    --ba-mc-z       : 99999;
    --ba-mc-ease    : cubic-bezier(.4,0,.2,1);
}

/* ── Overlay ─────────────────────────────────────────────────── */
.ba-mc-overlay {
    position   : fixed;
    inset      : 0;
    z-index    : calc(var(--ba-mc-z) - 1);
    background : rgba(10, 20, 50, .45);
    opacity    : 0;
    pointer-events : none;
    transition : opacity .3s var(--ba-mc-ease);
    backdrop-filter: blur(2px);
}
.ba-mc-overlay.ba-mc-open {
    opacity        : 1;
    pointer-events : all;
}

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

/* ── Header ──────────────────────────────────────────────────── */
.ba-mc-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 16px 20px;
    background      : var(--ba-mc-grad);
    color           : #fff;
    flex-shrink     : 0;
}
.ba-mc-header-title {
    display     : flex;
    align-items : center;
    gap         : 8px;
    font-size   : 15px;
    font-weight : 700;
    color       : #fff;
}
.ba-mc-header-icon { font-size: 18px; }

.ba-mc-header-count {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    min-width       : 22px;
    height          : 22px;
    background      : rgba(255,255,255,.25);
    border-radius   : 11px;
    font-size       : 12px;
    font-weight     : 800;
    padding         : 0 6px;
    color           : #fff;
}

.ba-mc-close {
    background   : rgba(255,255,255,.15);
    border       : none;
    color        : #fff;
    font-size    : 18px;
    line-height  : 1;
    cursor       : pointer;
    width        : 32px;
    height       : 32px;
    border-radius: 50%;
    display      : flex;
    align-items  : center;
    justify-content: center;
    transition   : background .15s;
}
.ba-mc-close:hover { background: rgba(255,255,255,.28); }

/* ── Body (scrollable) ───────────────────────────────────────── */
.ba-mc-body {
    flex       : 1;
    overflow-y : auto;
    padding    : 0;
    scrollbar-width: thin;
    scrollbar-color: #c5d5f0 transparent;
}
.ba-mc-body::-webkit-scrollbar { width: 4px; }
.ba-mc-body::-webkit-scrollbar-thumb { background: #c5d5f0; border-radius: 2px; }

/* ── Loading spinner ─────────────────────────────────────────── */
.ba-mc-loading {
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 48px;
}
.ba-mc-spinner {
    width        : 32px;
    height       : 32px;
    border       : 3px solid #e0eaf5;
    border-top-color: var(--ba-mc-g1);
    border-radius: 50%;
    animation    : baMcSpin .7s linear infinite;
}
@keyframes baMcSpin { to { transform: rotate(360deg); } }

/* ── Empty state ─────────────────────────────────────────────── */
.ba-mc-empty {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    padding         : 48px 24px;
    color           : var(--ba-mc-muted);
    text-align      : center;
}
.ba-mc-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .5; }
.ba-mc-empty p    { font-size: 14px; font-weight: 500; }

/* ── Progress bar ────────────────────────────────────────────── */
.ba-mc-progress-wrap {
    padding         : 16px 20px 12px;
    border-bottom   : 1px solid var(--ba-mc-border);
    background      : #f8faff;
}
.ba-mc-progress-label {
    font-size    : 12px;
    color        : var(--ba-mc-muted);
    margin       : 0 0 8px;
    line-height  : 1.4;
}
.ba-mc-progress-label strong { color: var(--ba-mc-g2); }
.ba-mc-progress-label--free  { color: #16a34a; font-weight: 700; }

.ba-mc-progress-track {
    height          : 8px;
    background      : #e2e8f0;
    border-radius   : 4px;
    overflow        : hidden;
}
.ba-mc-progress-fill {
    height          : 100%;
    background      : var(--ba-mc-grad);
    border-radius   : 4px;
    transition      : width .5s var(--ba-mc-ease);
    min-width       : 4px;
}

/* ── Item list ───────────────────────────────────────────────── */
.ba-mc-items {
    list-style : none;
    margin     : 0;
    padding    : 0;
}
.ba-mc-item {
    display        : flex;
    align-items    : flex-start;
    gap            : 12px;
    padding        : 14px 16px;
    border-bottom  : 1px solid var(--ba-mc-border);
    transition     : background .12s;
}
.ba-mc-item:last-child { border-bottom: none; }
.ba-mc-item:hover { background: #f8faff; }

.ba-mc-item-img-link { flex-shrink: 0; }
.ba-mc-item-img {
    width        : 58px;
    height       : 58px;
    object-fit   : contain;
    border-radius: 8px;
    border       : 1px solid var(--ba-mc-border);
    background   : #f5f7fa;
}

.ba-mc-item-info {
    flex     : 1;
    min-width: 0;
    display  : flex;
    flex-direction: column;
    gap      : 4px;
}

/* Top row: name + remove button */
.ba-mc-item-top {
    display        : flex;
    align-items    : flex-start;
    justify-content: space-between;
    gap            : 6px;
}
.ba-mc-item-name {
    font-size      : 12px;
    font-weight    : 600;
    color          : var(--ba-mc-text);
    text-decoration: none;
    line-height    : 1.35;
    display        : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow       : hidden;
    flex           : 1;
}
.ba-mc-item-name:hover { color: var(--ba-mc-g1); }

.ba-mc-item-var {
    font-size: 11px;
    color    : var(--ba-mc-muted);
}

/* Remove button — inline next to name */
.ba-mc-item-remove {
    flex-shrink  : 0;
    background   : none;
    border       : none;
    color        : #bbb;
    font-size    : 16px;
    line-height  : 1;
    cursor       : pointer;
    padding      : 0;
    margin-top   : 1px;
    transition   : color .15s;
    width        : 18px;
    height       : 18px;
    display      : flex;
    align-items  : center;
    justify-content: center;
}
.ba-mc-item-remove:hover { color: #e53e3e; }

/* Bottom row: qty controls + price */
.ba-mc-item-row {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    margin-top     : 4px;
}

/* ── Quantity controls ───────────────────────────────────────── */
.ba-mc-qty-ctrl {
    display     : flex;
    align-items : center;
    gap         : 0;
    border      : 1px solid var(--ba-mc-border);
    border-radius: 8px;
    overflow    : hidden;
    height      : 28px;
}
.ba-mc-qty-btn {
    background   : #f0f4ff;
    border       : none;
    color        : var(--ba-mc-g2);
    font-size    : 16px;
    font-weight  : 700;
    line-height  : 1;
    width        : 28px;
    height       : 28px;
    cursor       : pointer;
    display      : flex;
    align-items  : center;
    justify-content: center;
    transition   : background .15s, color .15s;
    padding      : 0;
    flex-shrink  : 0;
}
.ba-mc-qty-btn:hover:not(:disabled) {
    background : var(--ba-mc-grad);
    color      : #fff;
}
.ba-mc-qty-btn:disabled {
    opacity : .35;
    cursor  : not-allowed;
}
.ba-mc-qty-btn.ba-mc-qty-loading {
    pointer-events: none;
    opacity       : .5;
}
.ba-mc-qty-num {
    min-width    : 28px;
    text-align   : center;
    font-size    : 13px;
    font-weight  : 700;
    color        : var(--ba-mc-text);
    border-left  : 1px solid var(--ba-mc-border);
    border-right : 1px solid var(--ba-mc-border);
    height       : 28px;
    line-height  : 28px;
    display      : inline-block;
    transition   : opacity .15s;
}
.ba-mc-qty-num.ba-mc-qty-updating {
    opacity: .4;
}

.ba-mc-item-price {
    font-size  : 13px;
    font-weight: 700;
    color      : var(--ba-mc-g2);
}

/* ── Totals ──────────────────────────────────────────────────── */
.ba-mc-totals {
    padding     : 14px 20px;
    background  : #f8faff;
    border-top  : 1px solid var(--ba-mc-border);
}
.ba-mc-total-row {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    font-size       : 14px;
    font-weight     : 600;
    color           : var(--ba-mc-text);
    margin-bottom   : 4px;
}
.ba-mc-total-row:last-child { margin-bottom: 0; }

.ba-mc-shipping-free { color: #16a34a; }
.ba-mc-free-badge {
    background   : #dcfce7;
    color        : #16a34a;
    font-size    : 11px;
    font-weight  : 800;
    padding      : 2px 8px;
    border-radius: 10px;
    letter-spacing: .5px;
}
.ba-mc-total-amount { color: var(--ba-mc-g2); }

/* ── Footer buttons ──────────────────────────────────────────── */
.ba-mc-footer {
    padding     : 16px 20px;
    display     : flex;
    flex-direction: column;
    gap         : 10px;
    border-top  : 1px solid var(--ba-mc-border);
    background  : #fff;
    flex-shrink : 0;
}

/* Primary: "Realizar el pedido" — gradiente completo */
.ba-mc-btn {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    padding         : 13px 20px;
    border-radius   : 10px;
    font-size       : 14px;
    font-weight     : 700;
    text-decoration : none;
    text-align      : center;
    border          : none;
    cursor          : pointer;
    transition      : opacity .2s ease, box-shadow .2s ease;
    line-height     : 1;
}

.ba-mc-btn--primary {
    background      : var(--ba-mc-grad) !important;
    color           : #ffffff !important;
    box-shadow      : 0 3px 10px rgba(32,41,136,.22);
    text-shadow     : none;
}
.ba-mc-btn--primary:hover,
.ba-mc-btn--primary:focus,
.ba-mc-btn--primary:active,
.ba-mc-btn--primary:visited {
    background      : var(--ba-mc-grad) !important;
    color           : #ffffff !important;
    opacity         : .88;
    box-shadow      : 0 5px 16px rgba(32,41,136,.32);
    text-decoration : none;
}

/* Secondary: "Revisar carrito" — borde azul, fondo transparente */
.ba-mc-btn--secondary {
    background      : transparent !important;
    color           : var(--ba-mc-g2) !important;
    border          : 2px solid var(--ba-mc-g1) !important;
    text-shadow     : none;
}
.ba-mc-btn--secondary:hover,
.ba-mc-btn--secondary:focus,
.ba-mc-btn--secondary:active,
.ba-mc-btn--secondary:visited {
    background      : #eef5ff !important;
    color           : var(--ba-mc-g2) !important;
    text-decoration : none;
    opacity         : 1;
}

/* ── Toast notification ──────────────────────────────────────── */
.ba-mc-toast {
    position    : fixed;
    bottom      : 24px;
    left        : 50%;
    transform   : translateX(-50%) translateY(20px);
    z-index     : calc(var(--ba-mc-z) + 10);
    background  : var(--ba-mc-grad);
    color       : #fff;
    padding     : 10px 20px;
    border-radius: 24px;
    font-size   : 13px;
    font-weight : 600;
    box-shadow  : 0 4px 16px rgba(32,41,136,.30);
    opacity     : 0;
    transition  : opacity .25s ease, transform .25s ease;
    white-space : nowrap;
    pointer-events: none;
}
.ba-mc-toast.ba-mc-toast--show {
    opacity     : 1;
    transform   : translateX(-50%) translateY(0);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ba-mc-drawer { width: 100vw; border-radius: 0; }
}