/* ============================================================
   OPENAIR SHELL — Layout globale, header, tabbar
   Dipende da: css/design-tokens.css
   ============================================================ */

/* ── Reset ── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    overflow-x: hidden;
}

/* ── App container ── */
.shell-app {
    width: 100%;
    max-width: var(--app-max-w);
    margin: 0 auto;
    min-height: 100dvh;
    background: var(--color-bg-secondary);
    position: relative;
}

/* ── Header ── */
.shell-header {
    position: sticky;
    top: 0;
    background: var(--color-bg-secondary);
    z-index: var(--z-header);
    padding: calc(var(--safe-top) + 12px) var(--space-base) 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.shell-header-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: var(--color-text-primary);
}
.shell-header-btn:active { background: var(--color-border-light); }
.shell-header-btn svg { width: 20px; height: 20px; }

.shell-header-btn--ghost { background: transparent; }
.shell-header-btn[aria-hidden="true"] { visibility: hidden; pointer-events: none; }

/* SOS: freccia back sempre visibile (overlay farmacia ne ha bisogno) */
body[data-section="sos"] #shell-btn-back { visibility: visible; pointer-events: auto; }

/* ── Search bar (pill) ── */
.shell-search-bar {
    flex: 1;
    min-width: 0;
    height: 58px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-search);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.shell-search-bar-content { text-align: center; width: 100%; }

.shell-search-bar-title {
    font-size: var(--fs-body);
    font-weight: var(--font-weight-medium);
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shell-search-bar-subtitle {
    font-size: var(--fs-meta);
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* Header hidden for sections with custom headers */
body[data-section="home"] .shell-header,
body[data-section="concierge"] .shell-header,
body[data-section="eventi"] .shell-header,
body[data-section="sapori"] .shell-header,
body[data-section="alloggi"] .shell-header,
body[data-section="spiagge"] .shell-header,
body[data-section="fauna"] .shell-header,
body[data-section="percorsi"] .shell-header,
body[data-section="fortini"] .shell-header,
body[data-section="borghi"] .shell-header,
body[data-section="consigli"] .shell-header,
body[data-section="rifiuti"] .shell-header,
body[data-section="meteo"] .shell-header,
body[data-section="impostazioni"] .shell-header,
body[data-section="prossimamente"] .shell-header,
body[data-section="trasporti"] .shell-header { display: none; }

/* ── Main content ── */
.shell-main {
    padding: 0 0 calc(80px + var(--safe-bottom));
}

body[data-section="home"] .shell-main {
    padding-bottom: calc(64px + var(--safe-bottom));
}
body[data-section="concierge"] .shell-main {
    padding-bottom: 0;
}
body[data-section="concierge"] .shell-tabbar { display: none; }

/* Pill → content spacing (24px rule) */
.shell-main > :first-child { margin-top: 12px; }
.shell-main > header:first-child { margin-top: 0; }
.shell-main > .spiagge-app,
.shell-main > .fauna-app,
.shell-main > .perc-app,
.shell-main > .fort-app,
.shell-main > .borghi-app,
.shell-main > .cons-app,
.shell-main > .rif-app,
.shell-main > .meteo-app,
.shell-main > .impost-app,
.shell-main > .pross-app,
.shell-main > .trasp-app,
.shell-main > .vacanze-app { margin-top: 0; }

/* ── Tab bar ── */
.shell-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: var(--app-max-w);
    height: calc(64px + var(--safe-bottom));
    background: #FFFFFF;
    border-top: 1px solid #EBEBEB;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: var(--space-xs);
    padding-bottom: var(--safe-bottom);
    z-index: var(--z-tabbar);
}

.shell-tab {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 16px;
    color: var(--color-text-secondary);
    text-decoration: none;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: none;
    font-family: var(--font-family);
}
.shell-tab:active { opacity: 0.7; }
.shell-tab svg { width: 24px; height: 24px; }
.shell-tab span { font-size: var(--fs-tab); font-weight: var(--font-weight-regular); }

.shell-tab.is-active { color: var(--color-accent); }
.shell-tab.is-active span { font-weight: var(--font-weight-medium); }

/* ── Utility ── */
[hidden] { display: none !important; }

.shell-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--color-text-tertiary);
}

.shell-placeholder {
    padding: var(--space-base);
    text-align: center;
    color: var(--color-text-tertiary);
}

/* === Concierge: gabbia fissa, nessun rescaling globale === */
html:has(body[data-section="concierge"]) {
    overflow: hidden;
    overscroll-behavior: none;
    height: 100dvh;
}
body[data-section="concierge"] {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body[data-section="concierge"] .shell-app {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
body[data-section="concierge"] .shell-main {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* === Concierge: host overlay VERI su document.body === */
/* Top e bottom host sono montati come figli diretti di body (non di .shell-app): */
/* escono completamente dal contenitore della shell. Ancorati al visual viewport  */
/* iOS tramite le CSS vars --concierge-vv-top / --concierge-vv-height scritte dal */
/* JS su document.documentElement.                                                */
body > .concierge-top-host {
    position: fixed;
    top: var(--concierge-vv-top, 0px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--app-max-w);
    z-index: 60;
    background: var(--color-bg-secondary);
    pointer-events: auto;
    /* Override dei layout ereditati dalla classe .vacanze-app applicata agli host */
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
}
body > .concierge-bottom-host {
    position: fixed;
    top: calc(var(--concierge-vv-top, 0px) + var(--concierge-vv-height, 100dvh) - var(--bottom-rail-h, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--app-max-w);
    z-index: 60;
    background: var(--color-bg-secondary);
    pointer-events: auto;
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
}