/* RESET BASE */


:root {
    --bg: #ffffff;
    --text: #222;
    --card-bg: rgba(255,255,255,0.7);
}

.status-trigger {
    cursor: pointer;
}

.status-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: 999px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161618;
        --text: #f1f1f1;
        --card-bg: rgba(30,30,33,0.8);
    }
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BODY */
body {
    font-family: system-ui, -apple-system, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* =========================
   HOME CONTAINER
========================= */

.home {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

}

.home-content {
    flex: 1;
}

.home-content > *:not(:first-child) {
    margin-bottom: 16px;
}

.home-content > *:last-child {
    margin-bottom: 0;
}


.layout-base {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-footer {
    margin-top: auto;

    text-align: center;
    padding: 16px;

    font-size: 12px;
    color: #888;
}

.app-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
/* =========================
   HERO
========================= */

.home-hero {
    width: 100%;
    padding: 30px 20px 20px;

    text-align: center;

    background: transparent;

    color: var(--text);
}



/* conteúdo acima do overlay */
.home-hero > * {
    position: relative;
    z-index: 1;
}



@media (prefers-color-scheme: dark) {
    .home-hero {
        background: linear-gradient(
            160deg,
            var(--primary),
            color-mix(in srgb, var(--primary) 40%, #000)
        );
    }
}


/* LOGO */

.home-logo {
    width: 110px;
    height: 110px;

    border-radius: 50%;

    background: var(--card-bg);
    padding: 6px;

    object-fit: contain;

    box-shadow: 0 10px 25px rgba(0,0,0,0.12);

    margin-bottom: 12px;
}

.home-logo:active {
    transform: scale(0.96);
}

/* TÍTULO */

.home-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-on-primary);
}

/* =========================
   BOTÃO PRINCIPAL
========================= */

.btn-main {
    width: calc(100% - 50px);
    height: 50px;

    margin: 0 25px 30px;


    background: linear-gradient(
        to bottom,
        var(--primary),
        color-mix(in srgb, var(--primary) 85%, #000)
    );


    border-radius: 10px;
    
    color: var(--text-on-primary);

    font-size: 18px;
    font-weight: 600;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    box-shadow: 0 12px 30px rgba(0,0,0,0.2);

    transition: all 0.2s ease;
}


.btn-main:hover {
    filter: brightness(1.05);
}

.btn-main:active {
    transform: scale(0.96);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    margin-top: 0px;
    padding: 0px 0px;
    border-radius: 20px;
    background: var(--card-bg);
    backdrop-filter: blur(8px);
}

/* bolinha */
.status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* cores */
.status.aberto .dot { background: #00c853; }
.status.aberto { color: #00c853; }
.status.quase-fechando .dot { background: #ff9800; }
.status.quase-abrindo .dot { background: #2196f3; }
.status.fechado .dot { background: #f44336; }

.status.fechado {color: #f44336}

.home-links {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 14px;

    padding: 20px 16px 40px;
}

.link-btn {
    height: 58px;

    border-radius: 16px;

     background: color-mix(in srgb, var(--primary) 10%, var(--bg));


    border: 1px solid var(--primary-soft);

    backdrop-filter: blur(12px);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-decoration: none;
    color: var(--text);

    font-weight: 500;

    box-shadow: 0 8px 18px rgba(0,0,0,0.08);

    transition: all 0.2s ease;
}

/*.link-btn:active {
    transform: scale(0.95);
}*/

/* ícone */
.link-btn .material-symbols-rounded {
    font-size: 20px;

    color: var(--primary-dark);
}
.link-btn:active {
    transform: scale(0.95);
}



/* =========================
   TEMA CLARO (FORÇADO)
========================= */
body[data-theme="claro"] {
    --bg: #ffffff;
    --text: #222;
    --card-bg: rgba(255,255,255,0.7);
}

/* =========================
   TEMA ESCURO (FORÇADO)
========================= */
body[data-theme="escuro"] {
    --bg: #161618;
    --text: #f1f1f1;
    --card-bg: rgba(30,30,33,0.85);
}

/* HERO NO ESCURO */
body[data-theme="escuro"] .home-hero {
    background: linear-gradient(
        160deg,
        var(--primary),
        color-mix(in srgb, var(--primary) 40%, #000)
    );
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="claro"]) {
        --bg: #161618;
        --text: #f1f1f1;
        --card-bg: rgba(30,30,33,0.8);
    }
}


body {
    background: var(--bg);
}

/* camada principal */
.home-content {

    flex: 1;

    display: flex;
    flex-direction: column;

    max-width: 500px;
    margin: 0 auto;
    width: 100%;

    margin: 0 auto;

    background: var(--bg);

    border-radius: 24px 24px 0 0;

    margin-top: -20px;

    padding-top: 20px;

    box-shadow: 0 -10px 30px rgba(0,0,0,0.08);
}

.home-info {
    width: 100%;
    padding: 0 20px;
    margin-top: -5px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 13px;
    color: var(--text);

    margin-bottom: 6px;
}

.info-item .material-symbols-rounded {
    font-size: 16px;
    color: var(--primary-dark);
}


.home-divider {
    width: 40px;
    height: 4px;

    border-radius: 10px;

    background: var(--primary-soft);

    margin: 20px auto;
}

.link-btn {
    position: relative;
    overflow: hidden;
}

/* efeito de luz */
.link-btn::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.2),
        transparent
    );

    opacity: 0;
    transition: 0.3s;
}

.link-btn:active::after {
    opacity: 1;
}


.home-hero {
    animation: fadeHero 0.6s ease;
}

@keyframes fadeHero {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


body::before {
    content: "";
    position: fixed;
    inset: 0;

    background: radial-gradient(
        circle at top,
        color-mix(in srgb, var(--primary) 15%, transparent),
        transparent 60%
    );

    z-index: -1;
}

.home-carousel {
    display: flex;
    gap: 12px;
    perspective: 1000px;
/*    overflow-x: auto;*/
    overflow-y: hidden;

    scroll-behavior: auto; /* importante */

    padding: 10px 16px 20px!important;

/*    scroll-snap-type: x mandatory;*/
/*    -webkit-overflow-scrolling: touch;*/
}

/* remove scrollbar */
.home-carousel::-webkit-scrollbar {
    display: none;
}


.carousel-item {
    min-width: 240px;
    height: 160px;

    border-radius: 16px;
    overflow: hidden;
    position: relative;

    flex-shrink: 0;

    background: #000;

    transform: scale(0.9);
    opacity: 0.5;

    transition: none; /* 🔥 remove transição seca */
}


.carousel-item.active {
    transform: scale(1);
    opacity: 1;



    z-index: 2;
}

.carousel-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.7),
        rgba(0,0,0,0.2),
        transparent
    );
}


.carousel-info {
    position: absolute;

    bottom: 10px;
    left: 10px;
    right: 10px;

    z-index: 2;

    color: #fff;
}

.carousel-info h3 {
    font-size: 14px;
    font-weight: 600;

    margin-bottom: 2px;
}

.carousel-info span {
    font-size: 13px;
    opacity: 0.9;
}


.carousel-item {
    transition: transform 0.2s ease;
}

.carousel-item:active {
    transform: scale(0.97);
}


@media (max-width: 480px) {
    .carousel-item {
        min-width: 200px;
        height: 140px;
        max-width: 200px;
    }
}


.carousel-track {
    display: flex;
    gap: 12px;
    transform-style: preserve-3d;
    will-change: transform;
    transform: translate3d(0,0,0); /* 🔥 GPU */
}



.home-carousel {
    overflow: hidden;
    position: relative;
    z-index: 1;

    padding: 10px 16px 30px!important;
}

.home-actions {
    display: flex;
    justify-content: center;
    gap: 18px;

    margin-top: 10px;
}

.home-actions a {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    background: color-mix(in srgb, var(--primary) 10%, var(--bg));

    box-shadow: 0 6px 14px rgba(0,0,0,0.12);

    transition: all 0.2s ease;
}

.home-actions a:active {
    transform: scale(0.92);
}

.home-actions .material-symbols-rounded {
    font-size: 22px;

    color: color-mix(in srgb, var(--primary) 60%, var(--text));
}

.home-about {
    display: block;

    text-align: center;

    margin-top: 18px;
    margin-bottom: 30px;
    letter-spacing: 0.2px;
    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    color: color-mix(in srgb, var(--primary) 70%, var(--text));
}

.home-about:active {
    opacity: 0.6;
}

.home-footer {
    text-align: center;

    font-size: 12px;

    margin-top: 10px;
    margin-bottom: 20px;

    opacity: 0.6;
}

.home-footer a {
    text-decoration: none;

    font-weight: 500;

    color: color-mix(in srgb, var(--primary) 60%, var(--text));
}

.home-footer a:active {
    opacity: 0.6;
}

.home-section-title {
    font-size: 16px;
    font-weight: 600;

    padding: 0 16px;
    margin-top: 10px;
    margin-bottom: 0px;

    color: var(--text);
}
.home-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.home-impact {
    text-align: center;

    font-size: 15px;
    font-weight: 500;

    padding: 0 24px;

    margin-top: -5px;
    margin-bottom: 10px;

    line-height: 1.4;

    color: color-mix(in srgb, var(--primary) 60%, var(--text));
}

.home-info-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    padding: 0 16px;
    margin-top: 10px;
}

.info-box {
    background: var(--card-bg);
    border-radius: 14px;

    padding: 10px;

    display: flex;
    align-items: center;
    gap: 8px;

    cursor: pointer;

    box-shadow: 0 6px 14px rgba(0,0,0,0.08);

    transition: 0.2s;
}

.info-box:active {
    transform: scale(0.97);
}

.info-box span {
    font-size: 20px;
    color: var(--primary);
}

.info-box strong {
    font-size: 13px;
}

.info-box small {
    font-size: 11px;
    opacity: 0.7;
}

/* EXPANSÃO */

.info-expand {
    display: none;

    margin: 10px 16px;

    padding: 12px;

    border-radius: 12px;

    background: var(--card-bg);

    font-size: 13px;
}

/* OVERLAY */
.sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);

    opacity: 0;
    pointer-events: none;

    transition: 0.3s;

    z-index: 999;
}

.sheet-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* SHEET */
.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    background: var(--bg);

    border-radius: 20px 20px 0 0;

     /* 🔥 AQUI A MÁGICA */
    min-height: 35vh;   /* altura mínima */
    max-height: 85vh;   /* limite */

    transform: translateY(100%);
    transition: 0.3s;

    z-index: 1000;

    max-height: 80vh;

    overflow: hidden;

    touch-action: pan-y;
    will-change: transform;
}

.sheet.active {
    transform: translateY(0);
}

/* HEADER */
.sheet-header {
    text-align: center;
    padding: 10px;
}

.sheet-handle {
    width: 40px;
    height: 4px;

    background: #ccc;
    border-radius: 10px;

    margin: 0 auto 6px;
}

.sheet-header h3 {
    font-size: 15px;
}

/* CONTENT */
.sheet-content {
    padding: 16px;
    font-size: 14px;

    overflow-y: auto;
}

.home-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 0 8px;

    padding: 0 16px;
    margin: 20px 10px;
}

/* ITEM */
.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 12px 10px;

    font-size: 14px;

    background: transparent;

    border-radius: 10px;

    cursor: pointer;

    transition: 0.15s;
}

/* toque */
.info-item:active {
    background: rgba(0,0,0,0.05);
}

/* lado esquerdo */
.info-item .left {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* bolinha */
.info-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* status cores */
.dot.aberto { background: #00c853; }
.dot.quase-fechando { background: #ff9800; }
.dot.quase-abrindo { background: #2196f3; }
.dot.fechado { background: #f44336; }

/* seta */
.info-item .arrow {
    font-size: 13px;
    opacity: 0.5;
}


.info-item .icon {
    font-size: 18px;
    transition: 0.2s;
    /* cor inteligente (igual resto do sistema) */
    color: color-mix(in srgb, var(--primary) 60%, var(--text));

    opacity: 0.9;
}

.info-item:active .icon {
    transform: scale(1.1);
}

.home-carousel {
    padding-left: 16px!important;
}

.home-carousel::before,
.home-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px; /* 🔥 menor */

    z-index: 2;
    pointer-events: none;
}

.home-carousel::before {
    left: 0;
    background: linear-gradient(to right, var(--bg), transparent 80%);
}

.home-carousel::after {
    right: 0;
    background: linear-gradient(to left, var(--bg), transparent 80%);
}

/* =========================
   HEADER (COPIADO DO MENU)
========================= */

/* HERO */
.menu-hero {
    position: relative;
    height: 140px;
    overflow: visible;
    z-index: 0;
}

.menu-hero:has(.language-menu[open]) {
    z-index: 30;
}

.menu-hero:has(.language-menu[open]) + .hero-info .hero-logo {
    z-index: 31;
}
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.language-menu { position:absolute;top:10px;right:10px;z-index:20; }
.language-menu summary { min-width:70px;height:36px;padding:0 9px;border:1px solid rgba(255,255,255,.34);border-radius:10px;background:rgba(0,0,0,.5);color:#fff;box-shadow:0 5px 16px rgba(0,0,0,.24);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px; }
.language-menu summary::-webkit-details-marker { display:none; }
.language-menu summary:focus-visible { outline:3px solid #fff;outline-offset:2px; }
.language-menu[open] summary { border-radius:10px 10px 4px 4px; }
.language-flag { width:20px;height:20px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.5);flex:0 0 auto; }
.language-chevron { font-size:10px;transition:transform .18s ease; }
.language-menu[open] .language-chevron { transform:rotate(180deg); }
.language-menu-options { position:absolute;top:calc(100% + 5px);right:0;width:72px;padding:5px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(18,18,20,.94);box-shadow:0 12px 28px rgba(0,0,0,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); }
.language-menu-options a { min-height:38px;padding:7px 8px;border-radius:7px;color:#fff;text-decoration:none;display:grid;grid-template-columns:22px 1fr;align-items:center;gap:5px;font-size:12px; }
.language-menu-options a:hover,.language-menu-options a.active { background:var(--primary);color:var(--text-on-primary); }
/* fallback sem banner */
.menu-hero:not(.tem-banner) .hero-bg {
    background: linear-gradient(
        135deg,
        var(--primary),
        color-mix(in srgb, var(--primary) 70%, #000)
    );
}

.hero-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* BOTÃO VOLTAR */
.btn-back {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;

    padding: 5px 10px;

    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;

    color: #fff;
    text-decoration: none;

    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.25);

    transition: 0.2s;
}

.btn-back:active {
    transform: scale(0.95);
}

/* INFO (PARTE BRANCA) */
.hero-info {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 5px 10px 15px;

    background: var(--bg);

    padding-left: 115px;
    padding-right: 70px;
}

/* LOGO SOBREPOSTA */
.hero-info .hero-logo {
    position: absolute;
    left: 16px;
    top: -37px;

    width: 90px;
    height: 90px;

    border-radius: 50%;
    overflow: hidden;

    background: #fff;
    padding: 3px;

    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* TEXTO */
.hero-info .hero-text h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

/* STATUS */
.hero-info .status {
    font-size: 13px;
}

/* SHARE */
.btn-share {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    border-radius: 50%;
    border: none;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    /* 🔥 fundo inteligente */
    background: color-mix(in srgb, var(--card-bg) 85%, var(--primary));

    /* 🔥 ícone sempre visível */
    color: var(--text);

    box-shadow: 0 6px 14px rgba(0,0,0,0.12);

    transition: 0.2s;
}

.btn-share:active {
    transform: translateY(-50%) scale(0.92);
}


/* =========================
   HERO SEM BANNER
========================= */

/* centraliza conteúdo */
.menu-hero.no-banner {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* logo central */
.hero-logo-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100px;
    height: 100px;

    border-radius: 50%;
    overflow: hidden;

    background: rgba(255,255,255,0.95);
    padding: 4px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.3);

    z-index: 5; /* 🔥 ESSENCIAL */
}
.hero-logo-center img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 🔥 importante */
    border-radius: 50%;
}

/* remove espaço lateral da logo */
.menu-hero.no-banner + .hero-info {
    padding-left: 16px;
}

/* texto alinhado esquerda */
.menu-hero.no-banner + .hero-info .hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-logo,
.hero-logo-center {
    display: block;
    text-decoration: none;
}

.hero-logo:active,
.hero-logo-center:active {
    transform: scale(0.95);
}


.sheet-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 0;

    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.sheet-row strong {
    font-weight: 600;
}

.sheet-link {
    display: block;

    margin: 15px 0;

    padding: 12px;

    border-radius: 10px;

    background: color-mix(in srgb, var(--primary) 10%, var(--bg));

    text-decoration: none;

    color: var(--text);

    font-weight: 500;
}

.sheet-content {
    padding: 16px;
}

/* bloco */
.sheet-block {
    background: var(--card-bg);
    border-radius: 14px;

    padding: 12px 14px;
    margin-bottom: 10px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

/* título */
.sheet-block strong {
    font-size: 14px;
}

/* valor */
.sheet-block span {
    font-size: 13px;
    opacity: 0.8;
}

/* destaque hoje */
.sheet-block.today {
    border: 1px solid var(--primary);
}

/* links */
.sheet-link {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px;
    margin-top: 10px;

    border-radius: 12px;

    background: color-mix(in srgb, var(--primary) 10%, var(--bg));

    text-decoration: none;
    color: var(--text);

    font-weight: 500;
}

/* ícone */
.sheet-link span {
    font-size: 18px;
}


/* ÍCONES */
.sheet-icon {
    font-family: 'Material Symbols Rounded';
    font-size: 20px;

    color: var(--text);
    opacity: 0.85;

    display: flex;
    align-items: center;
}

/* LINHA COM ÍCONE */
.sheet-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* BADGE HOJE */
.sheet-badge {
    font-size: 11px;
    font-weight: 600;

    padding: 4px 8px;

    border-radius: 999px;

    background: var(--primary);
    color: var(--text-on-primary);

    margin-left: 8px;
}

/* STATUS TEXTO */
.sheet-status {
    font-size: 12px;
    opacity: 0.7;
}

.btn-share span {
    font-size: 20px;
}



/* BLOCO ENDEREÇO */
.sheet-address {
    text-align: center;

    padding: 18px 16px;
    margin-bottom: 12px;

    border-radius: 16px;

    background: var(--card-bg);

    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* ÍCONE */
.addr-icon {
    font-size: 28px;

    color: var(--primary);

    margin-bottom: 10px;
}

/* TEXTO */
.addr-text {
    font-size: 14px;
    line-height: 1.5;

    color: var(--text);
    opacity: 0.8;
}

/* quebra linha bonita */
.addr-text br {
    margin-bottom: 4px;
}

.addr-icon {
    color: color-mix(in srgb, var(--text) 80%, var(--primary));
}

.copy-btn {
    margin-top: 12px;

    border: none;
    border-radius: 10px;

    padding: 8px 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    background: color-mix(in srgb, var(--card-bg) 80%, var(--primary));

    color: var(--text);

    transition: 0.2s;
}

.copy-btn span {
    font-size: 18px;
}

.copy-btn:active {
    transform: scale(0.92);
}

.notice-open {
    overflow: hidden;
}

.public-notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 22px;

    background: rgba(0,0,0,0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.public-notice-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.public-notice-modal {
    width: min(100%, 390px);
    max-height: min(82vh, 620px);
    overflow-y: auto;

    padding: 26px 24px 22px;
    border-radius: 18px;

    background: var(--bg, #fff);
    color: var(--text, #111);

    text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,0.28);

    transform: translateY(10px) scale(0.98);
    transition: transform 0.22s ease;
}

.public-notice-overlay.active .public-notice-modal {
    transform: translateY(0) scale(1);
}

.public-notice-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 16%, #fff);
    color: var(--primary);
}

.public-notice-icon span {
    font-size: 25px;
}

.public-notice-modal h2 {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--primary);
}

.public-notice-message {
    font-size: 16px;
    line-height: 1.48;
    color: var(--text, #222);
}

.public-notice-close {
    margin-top: 22px;
    min-width: 112px;
    height: 48px;

    border: none;
    border-radius: 10px;

    background: var(--primary);
    color: var(--text-on-primary, #fff);

    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.public-notice-close:active {
    transform: scale(0.96);
}

body[data-theme="escuro"] .public-notice-modal {
    background: #1b1b1d;
    color: #fff;
}

body[data-theme="escuro"] .public-notice-icon {
    background: color-mix(in srgb, var(--primary) 20%, #1b1b1d);
}

body[data-theme="escuro"] .public-notice-message {
    color: #e5e5e5;
}

@media (max-width: 420px) {
    .public-notice-overlay {
        padding: 18px;
    }

    .public-notice-modal {
        padding: 24px 20px 20px;
        border-radius: 16px;
    }

    .public-notice-modal h2 {
        font-size: 24px;
    }

    .public-notice-message {
        font-size: 15px;
    }
}

.home-highlight {
    text-align: center;
    padding: 20px;
}

.home-highlight h3 {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 6px;
}

.home-highlight p {
    font-size: 14px;
    color: #666;
}

body[data-theme="escuro"] .home-highlight h3 {
    color: #f2f3f7;
}

body[data-theme="escuro"] .home-highlight p {
    color: #c8cad2;
}

.carousel-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    color: #fff;

    background: linear-gradient(
        135deg,
        var(--primary),
        color-mix(in srgb, var(--primary) 70%, #000)
    );
}

body[data-theme="escuro"] .carousel-placeholder {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary) 80%, #000),
        color-mix(in srgb, var(--primary) 60%, #000)
    );
}

.modal-price-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-price-box .price-old {
    font-size: 14px;
    text-decoration: line-through;
    color: #999;
}

.modal-price-box .price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-price-box .price-new {
    font-size: 20px;
    font-weight: bold;
    color: var(--price-color);
}

.modal-price-box .badge-desconto {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #00c853;
    color: #fff;
}

.btn-main.disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.8;
}

/* =========================
   PAGAMENTOS MODERNOS
========================= */

.payments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.payment-item {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px;

    border-radius: 14px;

    background: color-mix(in srgb, var(--primary) 10%, var(--bg));

    border: 1px solid var(--primary-soft);

    font-size: 13px;
    font-weight: 500;

    box-shadow: 0 6px 14px rgba(0,0,0,0.06);

    transition: 0.2s;
}

.payment-item span:first-child {
    font-size: 20px;
    color: var(--primary-dark);
}

.payment-item:active {
    transform: scale(0.96);
}