/* Tokens e regras base do layout (extraído de layouts/base.blade.php - T047) */
:root {
            --radius: 0.9rem;
            --background: oklch(97.8% 0.008 85);
            --foreground: oklch(26% 0.035 45);
            --card: oklch(100% 0 0);
            --card-foreground: oklch(26% 0.035 45);
            --popover: oklch(100% 0 0);
            --popover-foreground: oklch(26% 0.035 45);
            --primary: oklch(63% 0.18 42);
            --primary-foreground: oklch(99% 0.005 85);
            --secondary: oklch(95% 0.02 75);
            --secondary-foreground: oklch(33% 0.05 45);
            --muted: oklch(95.5% 0.012 80);
            --muted-foreground: oklch(52% 0.03 55);
            --accent: oklch(94% 0.035 70);
            --accent-foreground: oklch(33% 0.06 45);
            --destructive: oklch(58% 0.2 22);
            --destructive-foreground: oklch(99% 0.005 85);
            --success: oklch(60% 0.14 155);
            --success-foreground: oklch(99% 0.005 85);
            --warning: oklch(79% 0.15 78);
            --warning-foreground: oklch(30% 0.06 55);
            --info: oklch(60% 0.13 240);
            --info-foreground: oklch(99% 0.005 85);
            --border: oklch(91% 0.015 75);
            --input: oklch(91% 0.015 75);
            --ring: oklch(63% 0.18 42);
            --chart-1: oklch(68% 0.18 50);
            --chart-2: oklch(60% 0.13 240);
            --chart-3: oklch(62% 0.14 155);
            --chart-4: oklch(55% 0.17 300);
            --chart-5: oklch(66% 0.17 15);
            --sidebar: oklch(31% 0.045 40);
            --sidebar-foreground: oklch(94% 0.015 80);
            --sidebar-primary: oklch(98% 0.008 85);
            --sidebar-primary-foreground: oklch(31% 0.045 40);
            --sidebar-accent: oklch(37% 0.05 40);
            --sidebar-accent-foreground: oklch(97% 0.01 80);
            --sidebar-border: oklch(40% 0.045 40);
            --sidebar-ring: oklch(63% 0.18 42);

            /* Paleta artesanal (cardápio) — Padaria Artesanal Nobre */
            --olika-terracotta: #b85d36;
            --olika-terracotta-dark: #8c4217;
            --olika-terracotta-light: #faede7;
            --olika-slate-teal: #5B3A23;
            --olika-slate-teal-dark: #422918;
            --olika-slate-teal-light: #f7f2ed;
            --olika-cream-bg: #fafaf8;
            --olika-cream-surface: #ffffff;
            --olika-sand-border: #f1ede8;
            --olika-espresso: #241A14;
            --olika-gold: #d97706;
        }
        .dark {
            --background: oklch(19% 0.02 45);
            --foreground: oklch(95% 0.01 80);
            --card: oklch(24% 0.025 45);
            --card-foreground: oklch(95% 0.01 80);
            --popover: oklch(24% 0.025 45);
            --popover-foreground: oklch(95% 0.01 80);
            --primary: oklch(70% 0.17 45);
            --primary-foreground: oklch(20% 0.03 45);
            --secondary: oklch(30% 0.03 45);
            --secondary-foreground: oklch(95% 0.01 80);
            --muted: oklch(29% 0.025 45);
            --muted-foreground: oklch(72% 0.02 70);
            --accent: oklch(33% 0.04 45);
            --accent-foreground: oklch(96% 0.01 80);
            --destructive: oklch(65% 0.19 22);
            --destructive-foreground: oklch(98% 0.005 85);
            --success: oklch(68% 0.14 155);
            --success-foreground: oklch(20% 0.03 45);
            --warning: oklch(82% 0.15 78);
            --warning-foreground: oklch(25% 0.04 55);
            --info: oklch(68% 0.13 240);
            --info-foreground: oklch(20% 0.03 45);
            --border: oklch(100% 0 0/.12);
            --input: oklch(100% 0 0/.16);
            --ring: oklch(70% 0.17 45);
            --chart-1: oklch(72% 0.18 50);
            --chart-2: oklch(68% 0.13 240);
            --chart-3: oklch(68% 0.14 155);
            --chart-4: oklch(65% 0.17 300);
            --chart-5: oklch(70% 0.17 15);
            --sidebar: oklch(24% 0.03 40);
            --sidebar-foreground: oklch(94% 0.015 80);
            --sidebar-primary: oklch(70% 0.17 45);
            --sidebar-primary-foreground: oklch(20% 0.03 45);
            --sidebar-accent: oklch(31% 0.04 40);
            --sidebar-accent-foreground: oklch(96% 0.01 80);
            --sidebar-border: oklch(100% 0 0/.12);
            --sidebar-ring: oklch(70% 0.17 45);
        }

        body {
            font-family: 'Inter', 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--background);
            color: var(--foreground);
            -webkit-font-smoothing: antialiased;
        }
        .font-display {
            font-family: 'Inter', 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            letter-spacing: -0.02em;
        }
        .font-display-artesanal {
            font-family: 'Fraunces', Georgia, serif;
            letter-spacing: -0.01em;
        }

        /* Tipografia sóbria, técnica e sem serifa no painel administrativo */
        .app-shell,
        .app-shell .font-display,
        .app-shell h1,
        .app-shell h2,
        .app-shell h3,
        .app-shell h4,
        .app-shell .font-serif {
            font-family: 'Inter', 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        }

        .label-caps {
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--muted-foreground);
            font-size: 0.6875rem;
            font-weight: 700;
        }
        .panel-card {
            background-color: var(--card);
            border: 1px solid var(--border);
            border-radius: calc(var(--radius) + 4px);
            box-shadow: 0 1px 2px oklch(28% .05 45/.06), 0 8px 24px -12px oklch(28% .05 45/.18);
        }
        .panel-stat-card {
            background-color: var(--card);
            border: 1px solid var(--border);
            border-radius: calc(var(--radius) + 4px);
            box-shadow: 0 1px 2px oklch(28% .05 45/.06), 0 8px 24px -12px oklch(28% .05 45/.18);
            padding: 0.625rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 84px;
            height: 100%;
        }
        @media (min-width: 640px) {
            .panel-stat-card {
                padding: 1rem;
                min-height: 110px;
            }
        }
        .panel-card-header, .panel-section__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            background-color: color-mix(in srgb, var(--muted) 12%, transparent);
        }
        .panel-card-title, .panel-section__title {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--foreground);
            margin: 0;
            line-height: 1.25;
        }

/* ==========================================================================
   Tema natalino — aba Festas de Fim de Ano (isolado por body.tema-natal)
   ========================================================================== */
body.tema-natal,
body.rota-festas-fim-de-ano {
    --festivo-vinho: #9E1B1B;
    --festivo-verde: #113826;
    --festivo-dourado: #D4AF37;
    --festivo-dourado-suave: #DEC484;
    --festivo-creme: #FAF6F0;
    --festivo-card-bg: rgba(255, 253, 249, 0.96);
    background-color: #FAF6F0 !important;
    background-image: url('/images/natal/bg-natal-suave.png') !important;
    background-repeat: repeat !important;
    background-size: 720px auto !important;
    background-position: center top !important;
}

@media (min-width: 1024px) {
    body.tema-natal,
    body.rota-festas-fim-de-ano {
        background-attachment: fixed !important;
    }
}

body.tema-natal main,
body.rota-festas-fim-de-ano main {
    background: transparent !important;
    background-image: none !important;
    position: relative;
    z-index: 1;
    padding-top: 5.75rem !important;
}

@media (min-width: 640px) {
    body.tema-natal main,
    body.rota-festas-fim-de-ano main {
        padding-top: 6.25rem !important;
    }
}

body.tema-natal,
body.tema-natal * {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    body.tema-natal,
    body.tema-natal * {
        scroll-behavior: auto;
    }
}

/* Banner hero */
.hero-natal {
    background-color: #113826 !important;
    background-image:
        radial-gradient(circle at 20% 15%, rgba(212, 175, 55, 0.16), transparent 42%),
        linear-gradient(135deg, rgba(8, 46, 34, 0.86), rgba(17, 56, 38, 0.92)),
        url('/images/natal/banner-natal-rico.png') !important;
    background-size: cover, cover, cover !important;
    background-position: center center !important;
    border: 2px solid #D4AF37 !important;
    box-shadow: 0 10px 30px -5px rgba(17, 56, 38, 0.4), 0 0 18px rgba(212, 175, 55, 0.18) !important;
}

.hero-natal::before {
    display: none !important;
}

/* Hero de uma aba festiva sem tema natalino: mantém a identidade sazonal
   sem herdar gorrinhos, festões ou o padrão de Natal. */
.hero-festivo {
    background-color: #113826 !important;
    background-image: linear-gradient(135deg, rgba(8, 46, 34, 0.9), rgba(17, 56, 38, 0.94)), url('/images/natal/banner-natal-rico.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    border: 2px solid #DEC484 !important;
    box-shadow: 0 10px 30px -5px rgba(17, 56, 38, 0.35) !important;
}

/* Cabeçalho no tema natalino */
body.tema-natal #app-bar,
body.rota-festas-fim-de-ano #app-bar {
    background-color: rgba(250, 246, 240, 0.98) !important;
    border-bottom: 1px solid #DEC484 !important;
}

/* Selo central natalino */
.header-natal-pill {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    /* No mobile o atendimento já aparece no hero e no rodapé; libera o centro
       do cabeçalho para o selo natalino não colidir com os ícones. */
    body.tema-natal #app-bar a[href^="https://wa.me"] {
        display: none !important;
    }
}

/* Gorrinhos */
.gorro-natal-logo,
.gorro-natal-user {
    pointer-events: none;
    z-index: 25;
    filter: drop-shadow(0 2px 2px rgba(30, 22, 16, 0.22));
}

.gorro-natal-logo {
    position: absolute;
    top: -12px;
    left: -10px;
    width: 30px;
    height: 30px;
    transform: rotate(-12deg);
}

.gorro-natal-user {
    position: absolute;
    top: -12px;
    right: -9px;
    width: 28px;
    height: 28px;
    transform: rotate(14deg);
}

@media (min-width: 640px) {
    .gorro-natal-logo {
        top: -15px;
        left: -12px;
        width: 34px;
        height: 34px;
    }

    .gorro-natal-user {
        top: -15px;
        right: -11px;
        width: 32px;
        height: 32px;
    }
}

/* Festões */
.festao-topo-natal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -24px;
    height: 32px;
    background-image: url('/images/natal/festao-top.png');
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center top;
    pointer-events: none;
    z-index: 40;
}

.festao-rodape-natal {
    position: relative;
    width: 100%;
    height: 36px;
    margin-top: -36px;
    margin-bottom: 10px;
    background-image: url('/images/natal/festao-bottom.png');
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center bottom;
    pointer-events: none;
    z-index: 10;
}

@media (max-width: 639px) {
    .festao-topo-natal {
        height: 24px;
        bottom: -18px;
    }

    .festao-rodape-natal {
        height: 28px;
        margin-top: -28px;
        margin-bottom: 8px;
    }
}

/* Cards natalinos */
.card-natal {
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 253, 249, 0.96) !important;
    border: 1px solid #DEC484 !important;
    box-shadow: 0 4px 14px -2px rgba(91, 58, 35, 0.08), 0 2px 6px -1px rgba(212, 175, 55, 0.12) !important;
}

.card-natal::after {
    content: "✦";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 11px;
    line-height: 1;
    color: #C9A24A;
    opacity: 0.55;
    pointer-events: none;
}

.secao-titulo-natal {
    position: relative;
    padding-left: 16px;
}

.secao-titulo-natal::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #C9A24A;
    font-size: 11px;
}

/* Superfícies internas da ceia */
body.tema-natal [data-ceia-root] article,
body.tema-natal [data-ceia-root] section,
body.tema-natal .ceia-destaque-card {
    background-color: rgba(255, 253, 249, 0.97) !important;
    border-color: #DEC484 !important;
    box-shadow: 0 4px 14px -2px rgba(91, 58, 35, 0.08), 0 2px 6px -1px rgba(212, 175, 55, 0.12) !important;
}

/* Barra inferior fixa da ceia */
body.tema-natal .ceia-bottom-bar,
div[data-ceia-root] .fixed.bottom-0 {
    background-color: #113826 !important;
    border-top: 2px solid #D4AF37 !important;
    box-shadow: 0 -8px 25px rgba(17, 56, 38, 0.35) !important;
}

body.tema-natal .ceia-bottom-bar strong,
body.tema-natal .ceia-bottom-bar [data-ceia-total],
div[data-ceia-root] .fixed.bottom-0 strong,
div[data-ceia-root] .fixed.bottom-0 [data-ceia-total] {
    color: #FBF6EC !important;
}

body.tema-natal .ceia-bottom-bar span,
div[data-ceia-root] .fixed.bottom-0 span {
    color: #E8DCC8 !important;
}

body.tema-natal .ceia-bottom-bar button,
div[data-ceia-root] .fixed.bottom-0 button[data-ceia-adicionar] {
    background-color: #9E1B1B !important;
    color: #FFFFFF !important;
    border: 1px solid #D4AF37 !important;
}

body.tema-natal .ceia-bottom-bar button:hover,
div[data-ceia-root] .fixed.bottom-0 button[data-ceia-adicionar]:hover {
    background-color: #B22222 !important;
}

/* Barra flutuante de sacola */
body.tema-natal #bottom-cart-bar > div {
    background-color: #9E1B1B;
    border-color: #D4AF37;
}

body.tema-natal #bottom-cart-bar > div span {
    color: #FBF6EC;
}

body.tema-natal #bottom-cart-bar > div a {
    background-color: #D4AF37;
    color: #113826;
    font-weight: 700;
}

body.tema-natal #bottom-cart-bar > div a span {
    color: #113826;
}

body.tema-natal #bottom-cart-bar .cart-count {
    background-color: #FBF6EC;
    color: #9E1B1B;
}

/* Rodapé natalino consolidado */
.rodape-natal-fiel {
    display: flex;
}

body.tema-natal footer,
body.rota-festas-fim-de-ano footer {
    padding-top: 0 !important;
}