/* ═══════════════════════════════════════════════════
   Shared Header — PIXEL-IDENTICAL copy of tienda.css header
   Used by domicilio, sucursales, club_chupatel, etc.
   ═══════════════════════════════════════════════════ */

/* ── Announcement Bar ── */
.announcement-bar {
    background: linear-gradient(135deg, #E31B4E 0%, #C2173F 50%, #8B0A2D 100%);
    color: #fff;
    padding: 8px 16px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.ab-badge {
    background: #fff;
    color: #E31B4E;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: .5px
}

.ab-text {
    font-weight: 600
}

.ab-cta {
    font-size: 11px;
    font-weight: 700;
    opacity: .85
}

/* ── ic utility (same as tienda.css) ── */
.ic {
    display: inline-flex;
    align-items: center;
    vertical-align: middle
}

.ic svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

/* Specific ic sizes — copied from tienda.css */
.h-btn .ic svg,
.user-btn .ic svg {
    width: 15px;
    height: 15px
}

.cart-icon-btn .ic svg {
    width: 18px;
    height: 18px
}

.mobile-tog .ic svg {
    width: 22px;
    height: 22px
}

/* ── Site Header (exact copy of tienda.css lines 160-167) ── */
.header,
.site-header {
    background: #E31B4E;
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(227, 27, 78, .3)
}

/* ── Header Inner (exact copy of tienda.css lines 208-215) ── */
.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 16px
}

/* ── Logo (exact copy of tienda.css lines 217-227) ── */
.logo-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    text-decoration: none
}

.logo-img {
    height: 38px;
    max-height: 38px
}

/* ── Search Bar (exact copy of tienda.css lines 239-272) ── */
.search-bar {
    flex: 1;
    position: relative;
    max-width: 560px
}

.search-bar input {
    width: 100%;
    padding: 11px 16px 11px 40px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border .2s;
    background: rgba(255, 255, 255, .15);
    color: #fff
}

.search-bar input::placeholder {
    color: rgba(255, 255, 255, .6)
}

.search-bar input:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, .25)
}

.search-bar svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%)
}

/* ── Nav Links (exact copy of tienda.css lines 171-206) ── */
.header-nav {
    display: flex;
    align-items: center;
    gap: 4px
}

.h-link {
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all .15s;
    white-space: nowrap;
    text-decoration: none
}

.h-link:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff
}

.h-link.active {
    background: rgba(255, 255, 255, .2);
    color: #fff
}

.h-link.cta {
    background: #fff;
    color: #E31B4E;
    font-weight: 700
}

.h-link.cta:hover {
    background: rgba(255, 255, 255, .9)
}

/* ── Header Actions (exact copy of tienda.css lines 326-361) ── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

/* ── Cart icon (exact copy of tienda.css lines 3394-3414) ── */
.cart-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    padding: 8px 12px;
    border-radius: 8px;
    font-family: inherit;
    transition: all .15s
}

.cart-icon-btn:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff
}

/* ── h-btn (exact copy of tienda.css lines 333-361) ── */
.h-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    transition: all .15s
}

.h-btn:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff
}

.h-btn.gold {
    background: #fff;
    color: #E31B4E
}

.h-btn.gold:hover {
    background: rgba(255, 255, 255, .9)
}

/* ── Mobile Toggle (exact copy of tienda.css lines 363-370) ── */
.mobile-tog {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #fff
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — EXACT copy of tienda.css @media(max-width:900px)
   (lines 3870-3947)
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {

    .announcement-bar {
        font-size: 11px;
        padding: 6px 12px
    }

    /* Hide desktop nav links — tienda.css line 3878 */
    .header-nav {
        display: none !important
    }

    /* MOBILE HEADER - Walmart style — tienda.css line 3884 */
    .header-inner {
        flex-wrap: wrap;
        gap: 0;
        padding: 8px 12px;
        justify-content: space-between
    }

    /* Row 1: ☰ Logo Cart — tienda.css line 3892 */
    .mobile-tog {
        display: block;
        order: 1;
        font-size: 24px;
        padding: 6px
    }

    /* tienda.css line 3899 */
    .logo-area {
        order: 2;
        flex: 1;
        justify-content: center
    }

    /* tienda.css line 3905 */
    .logo-img {
        height: 32px;
        max-height: 32px
    }

    /* tienda.css line 3910 */
    .header-actions {
        order: 3;
        gap: 0
    }

    /* Hide text buttons, keep only cart icon — tienda.css line 3916 */
    .h-btn {
        display: none !important
    }

    /* tienda.css line 3924 */
    .cart-icon-btn {
        font-size: 20px;
        padding: 6px 8px
    }

    /* Hide cart text — tienda.css line 3929 (#cartIconText) */
    .cart-text {
        display: none
    }

    /* Row 2: Search bar full width — tienda.css line 3934 */
    .search-bar {
        order: 4;
        max-width: 100%;
        flex-basis: 100%;
        margin-top: 8px
    }

    /* tienda.css line 3941 */
    .search-bar input {
        padding: 9px 14px 9px 36px;
        font-size: 13px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .2);
        border: 1.5px solid rgba(255, 255, 255, .3)
    }
}

/* ═══════════════════════════════════════════════════
   USER DROPDOWN DASHBOARD — Premium glassmorphism panel
   ═══════════════════════════════════════════════════ */

.user-menu {
    position: relative;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    transition: all .15s;
}

.user-btn:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
}

.user-drop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .25s cubic-bezier(.4,0,.2,1);
    z-index: 1000;
    overflow: hidden;
}

.user-drop.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Arrow */
.user-drop::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #8B1A3C 0%, #6B1530 100%);
    transform: rotate(45deg);
    border-radius: 2px;
}

/* Header */
.ud-header {
    background: linear-gradient(135deg, #4A0E1E 0%, #6B1530 40%, #8B1A3C 100%);
    padding: 20px;
    color: #fff;
}

.ud-name {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 2px;
}

.ud-phone {
    font-size: 12px;
    opacity: .7;
    margin-bottom: 10px;
}

.ud-plan {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
}

/* Dashboard cards row */
.ud-dash {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px;
    background: #F9FAFB;
    border-bottom: 1px solid #F0F0F0;
}

.ud-card {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    border: 1px solid #F0F0F0;
}

.ud-card-val {
    font-size: 16px;
    font-weight: 800;
    color: #1A1A2E;
    line-height: 1.2;
}

.ud-card-val.accent {
    color: #E31B4E;
}

.ud-card-label {
    font-size: 10px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 2px;
}

/* Links */
.ud-links {
    padding: 6px 0;
}

.ud-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
}

.ud-links a:hover {
    background: #F9FAFB;
}

.ud-links a svg {
    flex-shrink: 0;
    color: #9CA3AF;
}

.ud-links a.logout {
    color: #E31B4E;
    border-top: 1px solid #F0F0F0;
}

.ud-links a.logout svg {
    color: #E31B4E;
}

/* Overlay to close dropdown when clicking outside */
.ud-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
}

.ud-overlay.open {
    display: block;
}

@media(max-width: 900px) {
    .user-menu {
        display: none !important;
    }
    .user-drop {
        position: fixed;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        overflow-y: auto;
    }
    .user-drop::before {
        display: none;
    }
}