/* =========================================================
   SNSI 2026 — componenti: pulsanti, card, media, form, modali
   ========================================================= */

/* ---------- pulsanti (squadrati, maiuscolo condensato) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: .85rem 1.6rem;
  border: 2px solid transparent; font-family: var(--ff-h); font-size: .92rem; font-weight: 600; letter-spacing: var(--track);
  text-transform: uppercase; line-height: 1; text-align: center; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover .icon--flip { transform: translateX(4px); }
.btn--sm { min-height: 40px; padding: .55rem 1.1rem; font-size: .85rem; }
.btn--block { width: 100%; }
.btn--yellow, .btn--primary { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.btn--yellow:hover, .btn--primary:hover { background: var(--black); border-color: var(--black); color: var(--yellow); }
.btn--blue { background: var(--blue); border-color: var(--blue); color: var(--white); }
.btn--blue:hover { background: var(--blue-d); border-color: var(--blue-d); }
.btn--dark { background: var(--black); border-color: var(--black); color: var(--white); }
.btn--dark:hover { background: transparent; color: var(--black); }
.btn--ghost, .btn--glass, .btn--ghost-dark { border-color: rgba(255, 255, 255, .5); color: var(--white); }
.btn--ghost:hover, .btn--glass:hover, .btn--ghost-dark:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--white); }
.btn[disabled] { opacity: .6; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }
.btn-row--center { justify-content: center; }
.more-link { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--ff-h); font-size: .9rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--blue); }
.more-link:hover { color: var(--blue-d); }

/* badge store */
/* spazio libero intorno ai badge: almeno 1/4 dell'altezza (regole Apple e Google) → 44px / 4 = 11px */
.store-row, .stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store-row { margin-top: 1rem; }
/* badge ufficiali: stessa larghezza per i due store, proporzioni originali (Apple: minimo 40px di altezza → con 148px è 49px) */
.store-row, .stores { align-items: center; }
.store { display: inline-flex; flex: none; transition: opacity .2s; }
.store:hover { opacity: .85; }
.store img { display: block; width: 148px; height: auto; }
/* pulsanti store + QR code dell'app (solo su computer: dal telefono si tocca il pulsante) */
.get-app { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; }
.qr { display: none; }
@media (min-width: 1000px) and (hover: hover) { .qr { display: flex; flex-direction: column; align-items: center; gap: .3rem; } }
.qr img { width: 96px; height: 96px; padding: 4px; background: var(--white); border: 1px solid var(--line); image-rendering: pixelated; }
.qr__cap { max-width: 96px; font-size: .7rem; line-height: 1.2; text-align: center; color: var(--muted); }

/* ---------- immagini ---------- */
.media { margin: 0; }
.media img { width: 100%; }
.media--small { display: flex; }
.media--small img { width: auto; max-width: 100%; max-height: 220px; }
.media a { display: block; }
.prose + .media, .media + .prose, .media + .media { margin-top: 1rem; }

/* ---------- card (blurb) ---------- */
.card { position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.6rem; background: var(--white); border: 1px solid var(--line); transition: background .3s; }
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; height: 0; background: var(--blue); transition: height .35s var(--ease); }
.card--link:hover { background: var(--off); }
.card--link:hover::before { height: 100%; }
.card__media { display: flex; align-items: center; min-height: 90px; margin-bottom: .6rem; }
.card__media img { max-height: 100px; width: auto; max-width: 100%; }
.card__title { font-family: var(--ff-h); font-size: 1.3rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.card__text { color: var(--muted); font-size: .98rem; }
.card__text p + p { margin-top: .4em; }
.card__go { margin-top: auto; padding-top: .4rem; color: var(--blue); }

/* ---------- video ---------- */
.video, .vid { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; background: var(--black); text-align: start; isolation: isolate; }
.video img, .vid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.video:hover img, .vid:hover img { transform: scale(1.05); }
.video::after, .vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55)); transition: background .4s var(--ease); }
.video:hover::after, .vid:hover::after { background: rgba(0, 0, 0, .3); }
.video__play, .vid__play {
  position: absolute; z-index: 1; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .18); color: #fff; display: grid; place-items: center;
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.video__play .icon, .vid__play .icon { width: 20px; height: 20px; margin-inline-start: 3px; }
.video:hover .video__play, .vid:hover .vid__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(255, 255, 255, .15); }
.video__label, .vid__label { position: absolute; z-index: 1; inset: auto 1rem .9rem 1rem; color: #fff; font-family: var(--ff-h); font-size: 1.05rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.video--empty { display: grid; place-items: center; }

/* ---------- manuale PDF (flipbook) ---------- */
.book { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.book__cover { display: block; max-width: 240px; box-shadow: 0 20px 36px -18px rgba(0, 0, 0, .55); transition: transform .3s var(--ease); }
.book__cover:hover { transform: translateY(-4px) rotate(-1deg); }
.book__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- embed ---------- */
.embed { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--off); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.acc--boxed > summary { font-size: 1.2rem; }

/* ---------- avvisi ---------- */
.notice { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.4rem; background: var(--blue-soft); border-inline-start: 4px solid var(--blue); color: var(--ink-2); }
.notice__icon { color: var(--blue); margin-top: 2px; }
.notice strong { display: block; color: var(--ink); margin-bottom: .2rem; font-family: var(--ff-h); font-size: 1.15rem; text-transform: uppercase; }
.flash { padding: .9rem 0; font-weight: 500; margin-top: var(--hdr); }
.flash--success { background: #E4F4EA; color: var(--success); }
.flash--error { background: #FBE9E7; color: var(--danger); }
.has-hero .flash { position: relative; z-index: 2; }

/* ---------- form ---------- */
.form { display: flex; flex-direction: column; gap: 1.1rem; }
.form--card { padding: clamp(22px, 4vw, 40px); background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--yellow); }
.form__title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); text-transform: uppercase; }
.form__section { font-size: 1.3rem; text-transform: uppercase; margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.form__note { font-size: .95rem; }
.form__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; border: 0; }
.field > label, .field > legend { font-family: var(--ff-h); font-size: .9rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select, .field textarea, .search-box input {
  width: 100%; min-height: 52px; padding: .7rem .95rem; border: 1.5px solid #CFCFC8; background: var(--white); outline: none; border-radius: 0; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 119, 200, .15); }
.field input[type="file"] { padding: .7rem; border: 1.5px dashed #CFCFC8; background: var(--off); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: .85rem; }
.field__error:empty { display: none; }
.req { color: var(--danger); }
.choices { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.check { display: inline-flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--blue); }
.sign__pad { width: 100%; height: 180px; border: 1.5px solid #CFCFC8; border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; }
.sign__pad:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 119, 200, .15); }
.field.has-error .sign__pad { border-color: var(--danger); }
.sign__clear { align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.form__status { font-weight: 500; }
.form__status.is-ok { color: var(--success); }
.form__status.is-error { color: var(--danger); }
.form__hint { font-size: .88rem; color: var(--muted); }
.form.is-sent .form__grid, .form.is-sent .form__foot button { display: none; }
@media (min-width: 700px) { .form__grid { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }

/* ---------- modale login ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.modal__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .65); }
.modal__panel { position: relative; width: min(440px, 100%); max-height: calc(100svh - 32px); overflow: auto; background: var(--white); border-top: 4px solid var(--yellow); padding: clamp(24px, 5vw, 36px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); animation: pop .3s var(--ease); }
.modal__panel--frame { width: min(640px, 100%); height: min(820px, calc(100svh - 32px)); padding: 0; overflow: hidden; }
.modal__panel--frame .modal__close { background: var(--white); z-index: 1; }
.modal__frame { display: block; width: 100%; height: 100%; border: 0; }
.modal__close { position: absolute; top: 10px; inset-inline-end: 10px; color: var(--ink); }
.modal__logo { height: 40px; width: auto; padding: 8px 12px; background: var(--black); box-sizing: content-box; margin-bottom: 1rem; }
.modal__title { font-size: 1.9rem; text-transform: uppercase; margin-bottom: 1.2rem; }
.modal__text { color: var(--muted); margin: .3rem 0 1.2rem; }
.pass-field { position: relative; }
.pass-field input { width: 100%; padding-inline-end: 3rem !important; }
.pass-field__eye { position: absolute; inset-block: 0; inset-inline-end: 0; width: 3rem; display: grid; place-items: center; background: none; border: 0; color: var(--muted); cursor: pointer; }
.pass-field__eye:hover, .pass-field__eye[aria-pressed="true"] { color: var(--blue); }
.modal__link { align-self: center; font-size: .92rem; color: var(--blue); }
@keyframes pop { from { opacity: 0; transform: translateY(12px); } }

/* ---------- lightbox video ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.lightbox__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .92); }
.lightbox__close { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; }
.lightbox__frame { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox__consent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center; color: #fff; padding: 24px; max-width: 520px; margin: auto; }

/* ---------- visualizzatore PDF ---------- */
.flipbook { position: fixed; inset: 0; z-index: 90; background: #111; color: #fff; display: flex; flex-direction: column; }
.flipbook__bar { display: flex; align-items: center; gap: .6rem; padding: 10px var(--pad); background: var(--black); border-bottom: 2px solid var(--yellow); }
.flipbook__title { flex: 1; font-family: var(--ff-h); font-size: 1.05rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flipbook__count { font-size: .88rem; opacity: .8; font-variant-numeric: tabular-nums; }
.flipbook__stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; }
.flipbook__pages { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; padding: 16px 56px; perspective: 2000px; }
.flipbook__pages canvas { max-height: 100%; max-width: 100%; height: auto; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.flipbook__pages.is-spread canvas { max-width: 50%; }
.flipbook__pages.turn-next { animation: turnNext .45s var(--ease); }
.flipbook__pages.turn-prev { animation: turnPrev .45s var(--ease); }
@keyframes turnNext { from { opacity: .3; transform: rotateY(-12deg) translateX(30px); } }
@keyframes turnPrev { from { opacity: .3; transform: rotateY(12deg) translateX(-30px); } }
.flipbook__loading { opacity: .8; }
.flipbook__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; }
.flipbook__nav:hover { background: var(--yellow); color: var(--black); }
.flipbook__nav--prev { inset-inline-start: 8px; }
.flipbook__nav--next { inset-inline-end: 8px; }

/* ---------- banner cookie ---------- */
.cookie { position: fixed; inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px; z-index: 85; display: flex; justify-content: center; pointer-events: none; }
.cookie__panel { pointer-events: auto; width: min(720px, 100%); background: var(--black); color: rgba(255, 255, 255, .78); border-top: 3px solid var(--yellow); padding: 20px 22px; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .6); animation: pop .35s var(--ease); }
.cookie__title { color: #fff; font-size: 1.35rem; text-transform: uppercase; margin-bottom: .3rem; }
.cookie__text { font-size: .93rem; }
.cookie__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cookie__prefs { display: grid; gap: .8rem; margin-top: 1rem; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; justify-content: flex-end; }
.switch { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; font-size: .9rem; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__ui { flex: none; width: 42px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, .2); position: relative; transition: .2s; margin-top: 2px; }
.switch__ui::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s; }
.switch input:checked + .switch__ui { background: var(--blue); }
.switch input:checked + .switch__ui::after { transform: translateX(18px); }
.switch input:disabled + .switch__ui { opacity: .6; }
.switch input:focus-visible + .switch__ui { outline: 3px solid var(--yellow); outline-offset: 2px; }
.switch strong { display: block; color: #fff; }
.switch small { display: block; opacity: .85; }
.flipbook--single .flipbook__nav, .flipbook--single .flipbook__count { display: none; }
.flipbook__img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }