/* ============================================================
   assets/css/cardapio/components.css
   Camada 5 — Usado tanto na vitrine (home) quanto no cardápio:
   topbar, container da hero, toast e rodapé.
   ============================================================ */
/* ── TOPBAR ──────────────────────────────────────────────── */
.cd-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    height: var(--topbar-h);
}

.cd-topbar-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}

.cd-brand { line-height: 0; flex-shrink: 0; }
.cd-logo  { height: 20px; width: auto; display: block; }

.cd-rest-name {
    flex: 1;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

/* Localização na topbar — só desktop */
.cd-topbar-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}
.cd-topbar-location svg {
    width: 14px;
    height: 14px;
    stroke: var(--brand);
    flex-shrink: 0;
}

/* Botão carrinho flutuante — mobile */
.cd-fab-cart {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 200;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.22);
    transition: background .2s, transform .15s;
}
.cd-fab-cart:hover  { background: var(--brand-dark); transform: scale(1.07); }
.cd-fab-cart:active { transform: scale(.95); }
.cd-fab-cart svg    { width: 22px; height: 22px; }

.cd-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #1a1f2e;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}


/* ── HERO (container base, o conteúdo interno é exclusivo de cada página) ── */
.cd-hero {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    position: relative;
    overflow: hidden;
}

.cd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 90% 10%, rgba(255,255,255,.12) 0%, transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(0,0,0,.08) 0%, transparent 50%);
    pointer-events: none;
}

.cd-hero-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 48px 20px 52px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

/* ── TOAST ───────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--text-1);
    color: #fff;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 999;
    transition: transform .3s ease;
    white-space: nowrap;
    pointer-events: none;
    max-width: calc(100vw - 40px);
    text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── FOOTER ──────────────────────────────────────────────── */
.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    text-align: center;
}
.app-footer-text {
    font-size: .7rem;
    color: var(--text-3, #aaa);
    font-weight: 500;
}
.app-footer-logo {
    height: 14px;
    opacity: .5;
}