/* ============================================================
   FLOURAL ART — Decorative SVG & Floral Enhancements
   ============================================================ */

/* ── Shared floral animations ─────────────────────────────── */
@keyframes fa-bloom {
    0% {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
    }

    70% {
        transform: scale(1.08) rotate(2deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes fa-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fa-sway {

    0%,
    100% {
        transform: rotate(-3deg) translateX(0);
    }

    50% {
        transform: rotate(3deg) translateX(2px);
    }
}

@keyframes fa-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes fa-sparkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1) rotate(20deg);
    }
}

@keyframes fa-petalspin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fa-fadeup {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fa-pulse-gold {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(197, 165, 114, 0);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(197, 165, 114, 0.12);
    }
}

@keyframes fa-success-draw {
    0% {
        stroke-dashoffset: 600;
        opacity: 0.3;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}


/* ══════════════════════════════════════════════════════════
   1. LOGIN SCREEN
══════════════════════════════════════════════════════════ */

#screen-login {
    background:
        radial-gradient(ellipse 70% 50% at 50% 20%, rgba(197, 165, 114, 0.09) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(74, 140, 92, 0.07) 0%, transparent 60%),
        var(--bg-primary);
    position: relative;
    overflow: hidden;
}

#screen-login::before,
#screen-login::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140' fill='none' stroke='%23C5A572' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.22'%3E%3Cpath d='M60 128 C60 105 57 90 60 72'/%3E%3Cpath d='M58 100 C46 94 38 80 43 74 C50 86 55 94 58 100Z'/%3E%3Cpath d='M62 91 C74 85 82 71 77 65 C70 77 65 85 62 91Z'/%3E%3Cpath d='M60 70 C53 63 44 63 41 54 C38 44 46 37 53 39 C49 35 49 26 55 23 C62 20 67 27 65 33 C72 31 80 35 80 45 C80 56 70 63 60 70Z'/%3E%3Cpath d='M60 64 C56 59 54 54 56 49 C58 44 63 44 65 49 C67 54 65 61 60 64Z'/%3E%3Cpath d='M60 56 C58 54 58 51 60 50 C62 49 63 52 60 56Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

#screen-login::before {
    top: -20px;
    left: -20px;
    opacity: 0.7;
}

#screen-login::after {
    bottom: -20px;
    right: -20px;
    transform: rotate(180deg);
    opacity: 0.5;
}

.login-container {
    position: relative;
    z-index: 1;
}

.login-logo {
    position: relative;
    z-index: 1;
    animation: fa-float 4s ease-in-out infinite;
}

#login-form {
    position: relative;
}

#login-form::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' fill='none'%3E%3Cline x1='0' y1='10' x2='118' y2='10' stroke='%23C5A572' stroke-width='0.8' stroke-opacity='0.3'/%3E%3Cline x1='182' y1='10' x2='300' y2='10' stroke='%23C5A572' stroke-width='0.8' stroke-opacity='0.3'/%3E%3Ccircle cx='150' cy='12' r='3' fill='%23C5A572' fill-opacity='0.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 0;
}

.login-container form {
    animation: fa-fadeup 0.6s 0.2s both ease;
}


/* ══════════════════════════════════════════════════════════
   2. HEADER
══════════════════════════════════════════════════════════ */

.header-center {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.header-center::before,
.header-center::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A572' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'%3E%3Cpath d='M12 22 C12 16 11 12 12 8'/%3E%3Cpath d='M12 8 C10 6 7 6 6 3 C5 0 7 -2 9 -1 C8 -3 8 -6 10 -7 C12 -8 14 -6 13 -4 C15 -5 18 -3 18 0 C18 4 15 6 12 8Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
}

.header-center::after {
    transform: scaleX(-1);
}

#app-header {
    border-bottom: none;
    box-shadow: 0 1px 0 rgba(197, 165, 114, 0.15), 0 2px 12px rgba(0, 0, 0, 0.3);
}

#app-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(90deg,
            transparent 0px, transparent 8px,
            rgba(197, 165, 114, 0.2) 8px, rgba(197, 165, 114, 0.2) 10px,
            transparent 10px, transparent 14px,
            rgba(197, 165, 114, 0.35) 14px, rgba(197, 165, 114, 0.35) 15px);
    pointer-events: none;
}


/* ══════════════════════════════════════════════════════════
   3. BOTTOM NAV
══════════════════════════════════════════════════════════ */

#bottom-nav {
    border-top: none;
}

#bottom-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(90deg,
            transparent 0px, transparent 8px,
            rgba(197, 165, 114, 0.18) 8px, rgba(197, 165, 114, 0.18) 10px,
            transparent 10px, transparent 14px,
            rgba(197, 165, 114, 0.3) 14px, rgba(197, 165, 114, 0.3) 15px);
    pointer-events: none;
}

/* Petal stays INSIDE the nav button — no upward overflow */
.nav-btn {
    overflow: hidden;
}

.nav-btn.active::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6' fill='none'%3E%3Cellipse cx='10' cy='3' rx='3' ry='3' fill='rgba(197%2C165%2C114%2C0.2)' stroke='%23C5A572' stroke-width='0.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: 1;
}


/* ══════════════════════════════════════════════════════════
   4. CART SCREEN
══════════════════════════════════════════════════════════ */

#screen-cart {
    position: relative;
    overflow: hidden;
}

#screen-cart::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -15px;
    width: 120px;
    height: 160px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' fill='none' stroke='%23C5A572' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.12'%3E%3Cpath d='M30 135 C35 112 42 90 50 68 C58 46 66 28 68 12'/%3E%3Cpath d='M36 118 C28 112 24 98 30 90 C34 102 36 112 36 118Z'/%3E%3Cpath d='M38 116 C46 110 50 96 44 88 C40 100 38 110 38 116Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

#screen-cart>* {
    position: relative;
    z-index: 1;
}

#cart-totals {
    position: relative;
}

#cart-totals::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' fill='none'%3E%3Cline x1='0' y1='8' x2='126' y2='8' stroke='%23C5A572' stroke-width='0.7' stroke-opacity='0.25'/%3E%3Cline x1='174' y1='8' x2='300' y2='8' stroke='%23C5A572' stroke-width='0.7' stroke-opacity='0.25'/%3E%3Ccircle cx='150' cy='8' r='4' fill='rgba(197%2C165%2C114%2C0.2)' stroke='%23C5A572' stroke-width='0.8' stroke-opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    pointer-events: none;
}

.cart-item {
    border-left: 2px solid rgba(197, 165, 114, 0.2);
    transition: border-left-color 0.2s ease;
}

.cart-item:hover {
    border-left-color: rgba(197, 165, 114, 0.5);
}


/* ══════════════════════════════════════════════════════════
   5. PAYMENT SCREEN
══════════════════════════════════════════════════════════ */

#screen-payment {
    position: relative;
    overflow: hidden;
}

#screen-payment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 220px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none' stroke='%234a8c5c' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Ccircle cx='70' cy='70' r='50' stroke-dasharray='5 8' stroke-opacity='0.4'/%3E%3Ccircle cx='70' cy='70' r='18' stroke='%23C5A572' stroke-opacity='0.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

#screen-payment>* {
    position: relative;
    z-index: 1;
}

.payment-method-btn {
    position: relative;
    overflow: hidden;
}

.payment-method-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent), rgba(197, 165, 114, 0.3));
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.payment-method-btn:hover::before {
    opacity: 1;
}

.payment-total-display {
    position: relative;
}

.payment-total-display::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12' fill='none'%3E%3Cpath d='M0 6 C20 2 60 10 80 6' stroke='%23C5A572' stroke-width='1' stroke-opacity='0.4' stroke-linecap='round'/%3E%3Ccircle cx='40' cy='6' r='2.5' fill='%23C5A572' fill-opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80px 12px;
    pointer-events: none;
}


/* ══════════════════════════════════════════════════════════
   6. SUCCESS SCREEN
══════════════════════════════════════════════════════════ */

#screen-success {
    position: relative;
    overflow: hidden;
}

#screen-success::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 280px;
    height: 280px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 230' fill='none' stroke='%23C5A572' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cpath d='M100 220 C100 185 95 162 100 130'/%3E%3Cpath d='M100 128 C88 115 72 115 68 98 C64 81 74 69 84 72 C78 65 78 50 88 46 C98 42 105 53 103 62 C113 58 125 64 125 79 C125 95 112 109 100 128Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

#screen-success>* {
    position: relative;
    z-index: 1;
}

.success-icon {
    position: relative;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.success-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 140, 92, 0.15) 0%, transparent 70%);
    animation: fa-pulse-gold 2.5s ease-in-out infinite;
    pointer-events: none;
}

#screen-success h2 {
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--success);
    position: relative;
}

#screen-success h2::before,
#screen-success h2::after {
    content: '✦';
    color: var(--accent);
    font-size: 10px;
    opacity: 0.6;
    margin: 0 8px;
    vertical-align: middle;
}

.success-details {
    border-left: 3px solid rgba(197, 165, 114, 0.35);
    position: relative;
    overflow: hidden;
}

.success-details::after {
    content: '';
    position: absolute;
    bottom: 6px;
    right: 8px;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23C5A572' stroke-width='1' stroke-linecap='round' opacity='0.2'%3E%3Cpath d='M5 20 C5 11 11 5 20 5'/%3E%3Cpath d='M9 20 C9 13 13 9 20 9'/%3E%3Ccircle cx='5' cy='5' r='2' fill='%23C5A572'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}


/* ══════════════════════════════════════════════════════════
   7. TEAM HUB
══════════════════════════════════════════════════════════ */

#screen-team-hub {
    position: relative;
}

#team-hub-content {
    position: relative;
}

.th-hero::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 14px;
    width: 60px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none'%3E%3Ccircle cx='12' cy='12' r='2' fill='%23C5A572' opacity='0.4'/%3E%3Ccircle cx='48' cy='8' r='1.5' fill='%23C5A572' opacity='0.3'/%3E%3Cpath d='M40 20 L40 14 M37 17 L43 17' stroke='%23C5A572' stroke-width='1.2' stroke-linecap='round' opacity='0.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    animation: fa-sparkle 3s ease-in-out infinite;
}

.th-member-card::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23C5A572' stroke-width='1.2' stroke-linecap='round' opacity='0.4'%3E%3Cellipse cx='10' cy='6' rx='3' ry='5'/%3E%3Ccircle cx='10' cy='10' r='2' fill='%23C5A572'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.th-member-card:hover::after {
    opacity: 1;
}

.th-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(197, 165, 114, 0.2), transparent);
    margin-left: 8px;
}


/* ══════════════════════════════════════════════════════════
   8. GLOBAL POLISH
══════════════════════════════════════════════════════════ */

/* Screen header — simple border, no pseudo-element height */
.screen-header {
    position: relative;
    border-bottom: 1px solid rgba(197, 165, 114, 0.12);
    margin-bottom: 14px;
    padding-bottom: 10px;
}

.hub-card {
    position: relative;
    overflow: hidden;
}

.hub-card::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 70px;
    height: 70px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70' fill='none' stroke='%23C5A572' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' opacity='0.12'%3E%3Cpath d='M35 65 C35 52 33 44 35 34'/%3E%3Cpath d='M34 50 C27 46 23 37 27 32 C31 40 33 46 34 50Z'/%3E%3Cpath d='M36 44 C43 40 47 31 43 26 C39 34 37 40 36 44Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: scale(0.8) rotate(-10deg);
    pointer-events: none;
}

.hub-card:hover::after {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.modal-content {
    position: relative;
}

.modal-header {
    position: relative;
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(90deg,
            transparent 0px, transparent 20px,
            rgba(197, 165, 114, 0.2) 20px, rgba(197, 165, 114, 0.2) 22px);
    pointer-events: none;
}

.report-section {
    border-left: 2px solid rgba(197, 165, 114, 0.18);
    transition: border-left-color 0.2s ease;
}

.report-section:hover {
    border-left-color: rgba(197, 165, 114, 0.4);
}

.order-card {
    position: relative;
    overflow: hidden;
}

.order-card::after {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23C5A572' stroke-width='1' stroke-linecap='round' opacity='0.15'%3E%3Cpath d='M24 44 C24 34 22 28 24 20'/%3E%3Cpath d='M24 20 C20 15 14 15 12 8 C10 2 15 -2 19 0 C17 -3 17 -9 21 -11 C25 -13 28 -9 27 -5 C31 -7 36 -3 36 5 C36 13 31 17 24 20Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.btn-primary {
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.btn-primary:hover::before {
    left: 160%;
}

/* Category tab — petal INSIDE the tab, no upward bleed */
.category-tab {
    position: relative;
    overflow: hidden;
}

.category-tab.active::before {
    content: '✿';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    line-height: 1;
    color: var(--accent);
    opacity: 0.5;
    pointer-events: none;
    animation: fa-float 3s ease-in-out infinite;
}

.menu-item.in-cart {
    box-shadow: 0 0 0 1px var(--accent), inset 0 0 20px rgba(197, 165, 114, 0.06);
}

.side-menu-list li.active::before {
    background: linear-gradient(180deg, var(--accent), rgba(197, 165, 114, 0.4));
    width: 3px;
}

.empty-state-icon {
    animation: fa-float 3s ease-in-out infinite;
}

.toast {
    border-left: 3px solid var(--accent);
}

.toast.success {
    border-left-color: var(--success);
}

.toast.error {
    border-left-color: var(--danger);
}

.summary-card {
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.summary-card:hover {
    border-color: rgba(197, 165, 114, 0.3);
    transform: translateY(-1px);
}

.list-item {
    border-left: 2px solid transparent;
    transition: border-left-color 0.18s ease, background 0.18s ease;
}

.list-item:hover {
    border-left-color: rgba(197, 165, 114, 0.3);
}


/* ══════════════════════════════════════════════════════════
   9. CART — compact items, Lucide icon sizing
══════════════════════════════════════════════════════════ */

/* Tighter cart items so more fit on screen */
.cart-item {
    padding: 8px 10px;
    margin-bottom: 5px;
    gap: 6px;
}

.cart-item-top {
    margin-bottom: 2px;
}

.cart-item-name {
    font-size: 13px;
    font-weight: 600;
}

.cart-item-subtotal {
    font-size: 13px;
}

/* Inline note line */
.cart-item-note {
    font-size: 11px;
    color: var(--info);
    margin-top: 1px;
    margin-bottom: 2px;
}

/* Per-piece price */
.cart-item-price {
    font-size: 11px;
    color: var(--text-muted);
    flex: 1;
    text-align: right;
    padding-right: 4px;
}

/* Controls row — tighter */
.cart-item-controls {
    gap: 6px;
}

.cart-item-controls .qty-btn {
    width: 26px;
    height: 26px;
    font-size: 14px;
    border-radius: 6px;
}

.cart-item-controls .qty-display {
    font-size: 13px;
    min-width: 20px;
}

/* Note + delete icon buttons — small and icon-only */
.cart-item-controls .btn-note,
.cart-item-controls .btn-delete {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.cart-item-controls .btn-note svg,
.cart-item-controls .btn-delete svg {
    width: 13px;
    height: 13px;
    stroke-width: 2;
}

.cart-item-controls .btn-note {
    color: var(--info);
    border-color: rgba(90, 138, 122, 0.25);
}

.cart-item-controls .btn-note:hover {
    background: var(--info-bg);
    border-color: var(--info);
}

.cart-item-controls .btn-delete {
    color: var(--danger);
    border-color: rgba(192, 112, 90, 0.25);
}

.cart-item-controls .btn-delete:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
}

/* Cart totals — tighter */
.cart-totals {
    padding: 10px 12px;
    margin: 6px 0;
}

.cart-totals .total-row {
    font-size: 12px;
    padding: 4px 0;
    margin-bottom: 3px;
}

.cart-totals .total-row.grand {
    font-size: 15px;
    margin-top: 8px;
    padding-top: 8px;
}

/* Cart action buttons — slimmer */
.cart-actions {
    gap: 6px;
    padding-top: 6px;
}

.cart-actions .btn {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 13px;
}

.cart-actions .btn svg {
    width: 14px;
    height: 14px;
}

.cart-actions #btn-checkout {
    min-height: 42px;
    font-size: 14px;
}

/* Empty state icon — lucide sized */
.empty-state-icon svg {
    width: 36px;
    height: 36px;
    stroke-width: 1.5;
    color: var(--text-muted);
    opacity: 0.4;
}

/* Cart bar — lucide icon inline */
#cart-summary svg {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin-right: 4px;
}

/* ══════════════════════════════════════════════════════════
   10. SIDE MENU — Floral Background
══════════════════════════════════════════════════════════ */

/* DO NOT re-declare position here — .side-menu is already position:fixed */
.side-menu {
    background: linear-gradient(160deg,
            var(--bg-secondary) 0%,
            rgba(197, 165, 114, 0.04) 40%,
            var(--bg-secondary) 70%,
            rgba(74, 140, 92, 0.04) 100%);
    /* overflow:hidden is safe here since fixed elements don't affect flow */
    overflow: hidden;
}

/* Large botanical sprig — top right corner */
.side-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 160px;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160' fill='none' stroke='%23C5A572' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='0.18'%3E%3Cpath d='M90 10 C85 35 75 55 60 80 C50 95 40 110 38 140'/%3E%3Cpath d='M70 30 C60 28 50 32 45 42 C55 40 65 36 70 30Z'/%3E%3Cpath d='M80 20 C88 15 96 18 98 28 C90 26 83 23 80 20Z'/%3E%3Cpath d='M65 55 C55 50 44 54 40 64 C51 62 60 58 65 55Z'/%3E%3Cpath d='M72 46 C80 40 90 43 92 53 C83 51 76 48 72 46Z'/%3E%3Cpath d='M55 80 C45 76 35 80 32 90 C42 88 50 84 55 80Z'/%3E%3Cpath d='M60 72 C68 65 78 68 80 78 C71 77 64 74 60 72Z'/%3E%3Cpath d='M46 105 C38 100 28 104 26 114 C36 112 43 108 46 105Z'/%3E%3Cpath d='M50 98 C58 92 68 95 69 105 C61 103 54 100 50 98Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

/* Small floral cluster — bottom left corner */
.side-menu::after {
    content: '';
    position: absolute;
    bottom: 60px;
    left: -10px;
    width: 130px;
    height: 160px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' fill='none' stroke='%23C5A572' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cpath d='M20 130 C25 105 30 85 35 60 C40 40 50 22 55 8'/%3E%3Cpath d='M30 110 C20 105 12 95 16 85 C22 95 27 104 30 110Z'/%3E%3Cpath d='M32 108 C42 103 48 92 43 82 C38 92 34 102 32 108Z'/%3E%3Cpath d='M38 82 C28 78 20 68 24 58 C30 68 35 77 38 82Z'/%3E%3Cpath d='M40 80 C50 75 55 64 50 54 C45 64 41 74 40 80Z'/%3E%3Cpath d='M46 55 C38 48 36 36 43 28 C45 40 46 48 46 55Z'/%3E%3Cpath d='M48 53 C56 46 65 47 67 57 C59 55 52 54 48 53Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    transform: scaleX(-1);
}

/* Ensure all menu content sits above the decorations */
.side-menu-header,
.side-menu-list,
.side-menu-footer {
    position: relative;
    z-index: 1;
}

/* Dotted gold divider under the header — uses a different property
   so it doesn't conflict with the existing border-bottom */
.side-menu-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: repeating-linear-gradient(90deg,
            transparent 0px, transparent 6px,
            rgba(197, 165, 114, 0.25) 6px, rgba(197, 165, 114, 0.25) 8px);
}

/* Small petal dot on active menu items */
.side-menu-list li.active::after {
    content: '✿';
    position: absolute;
    right: 14px;
    font-size: 10px;
    color: var(--accent);
    opacity: 0.5;
    animation: fa-float 3s ease-in-out infinite;
}

/* ── Screen isolation fix ── */
#screen-pos:not(.active) {
    display: none !important;
}

/* Ensure non-active screens are fully hidden */
.content-screen:not(.active) {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

/* ── Full viewport lock — no page-level scroll ── */
html,
body {
    height: 100%;
    max-height: 100vh;
    overflow: hidden;
}

#app-content {
    height: calc(100vh - var(--header-height));
    overflow: hidden;
    position: relative;
}

.content-screen {
    height: calc(100vh - var(--header-height) - var(--bottom-nav-height));
    max-height: calc(100vh - var(--header-height) - var(--bottom-nav-height));
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent the screen itself from growing beyond viewport */
    flex-shrink: 0;
}

/* POS screen already has its own height management — don't double it */
#screen-pos {
    height: calc(100vh - var(--header-height) - var(--bottom-nav-height)) !important;
    max-height: calc(100vh - var(--header-height) - var(--bottom-nav-height)) !important;
}

/* On desktop where bottom-nav is hidden */
@media (min-width: 1024px) {
    .content-screen {
        height: calc(100vh - var(--header-height));
        max-height: calc(100vh - var(--header-height));
    }

    #screen-pos {
        height: calc(100vh - var(--header-height)) !important;
        max-height: calc(100vh - var(--header-height)) !important;
    }
}

/* ══════════════════════════════════════════════════════════
   11. CATEGORY TABS — Delicate Vine & Petal Dot
══════════════════════════════════════════════════════════ */

/* Reset pill shape entirely */
.category-tab {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 6px 14px 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    position: relative;
    min-height: unset;
    transition: color 0.18s ease;
    flex-shrink: 0;
}

.category-tab:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

/* Suppress ✿ from earlier floralart rule */
.category-tab.active::before {
    content: none !important;
}

/* Active: gold text */
.category-tab.active {
    color: var(--accent);
    font-weight: 600;
    background: transparent;
    border-color: transparent;
}

/* Gold underline on active */
.category-tab.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 14px;
    right: 14px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    border-radius: 2px;
    opacity: 0.9;
}

/* Inactive: no underline pseudo */
.category-tab:not(.active)::after {
    content: none;
}

/* Container: thin vine underneath */
.category-tabs {
    position: relative;
    gap: 0;
    padding-bottom: 6px;
    padding-left: 4px;
    padding-right: 4px;
}

.category-tabs::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 8px;
    right: 8px;
    height: 10px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 6 C50 3 100 8 150 5 C200 2 250 8 300 5 C340 3 370 7 400 5' stroke='%23C5A572' stroke-width='0.8' stroke-linecap='round' stroke-opacity='0.25'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Petal dot — only on active, sits on the vine */
.category-tab.active {
    --petal-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Ccircle cx='6' cy='6' r='2.5' fill='%23C5A572' fill-opacity='0.9'/%3E%3Ccircle cx='6' cy='2' r='1' fill='%23C5A572' fill-opacity='0.5'/%3E%3Ccircle cx='6' cy='10' r='1' fill='%23C5A572' fill-opacity='0.5'/%3E%3Ccircle cx='2' cy='6' r='1' fill='%23C5A572' fill-opacity='0.5'/%3E%3Ccircle cx='10' cy='6' r='1' fill='%23C5A572' fill-opacity='0.5'/%3E%3C/svg%3E");
}

/* Inject petal dot via a wrapper span added by JS, OR use a sibling trick */
/* Since we can't easily add a child, we use the underline ::after
   and place the petal as a centered background on the tab bottom */
.category-tab.active {
    background-image: var(--petal-dot);
    background-repeat: no-repeat;
    background-position: center bottom 0px;
    background-size: 10px 10px;
}