@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --ink: #28552f;
  --muted: #687362;
  --terracotta: #745086;
  --cream: #f8f7f0;
  --paper: #fffef9;
  --sage: #91a584;
  --line: #dfe3d7;
  --violet-soft: #eee8f2;
  --blue-soft: #e7edf6;
  --blush: #f7e9e1;
  --forest: #28552f;
  --shadow: 0 20px 60px rgba(52, 72, 43, .11);
}

html { background: var(--cream); }

.guest-page,
.admin-page {
  background-color: var(--cream);
  background-image: linear-gradient(rgba(255, 254, 249, .70), rgba(248, 247, 240, .88)), url('/assets/floral-frame-landscape.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: min(1380px, 175vw) auto;
  /* Uno sfondo fisso con una PNG grande obbliga molti browser mobili a
     ridisegnare l'intera pagina durante lo scroll. Il motivo resta identico,
     ma scorre insieme al documento. */
  background-attachment: scroll;
  color: var(--ink);
  font-family: Montserrat, Arial, sans-serif;
}

.guest-page::before,
.admin-page::before,
.guest-page::after,
.admin-page::after { display: none; }

.guest-page main,
.admin-page main { position: relative; z-index: 1; }

.hero { padding-top: 105px; }

.hero .date,
.overline,
.date {
  color: var(--terracotta);
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: .2em;
}

.hero h1,
.admin-head h1 {
  color: var(--forest);
  font-family: Allura, 'Cormorant Garamond', Georgia, serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .8);
}

.hero h1 { font-size: clamp(4.2rem, 18vw, 7.3rem); line-height: .84; }
.hero h1 i { color: var(--forest); font-family: Allura, cursive; font-size: .7em; vertical-align: 7%; }
.tagline { color: #586b54; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-style: italic; }
.ornament { color: var(--terracotta); }

h2,
.identify h2,
.upload-progress h2 {
  color: var(--forest);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.01em;
}

.panel {
  border: 1px solid rgba(121, 146, 108, .27);
  border-radius: 28px;
  background: rgba(255, 254, 249, .94);
  box-shadow: var(--shadow);
  /* Il pannello e' gia' quasi opaco: evitare la sfocatura mantiene lo stesso
     effetto carta e libera parecchio lavoro alla GPU. */
  backdrop-filter: none;
}

.panel::selection { background: var(--violet-soft); }
.lead, .tagline { color: var(--muted); }
.invalid span { background: var(--violet-soft); color: var(--terracotta); }
.invalid p { min-width: 0; overflow-wrap: anywhere; }

.guest-list button {
  border-color: #dce3d7;
  border-radius: 17px;
  background: rgba(255, 255, 252, .96);
  color: var(--forest);
  font-family: Montserrat, Arial, sans-serif;
}

.guest-list button span { background: var(--violet-soft); color: var(--terracotta); font-family: 'Cormorant Garamond', serif; }
.guest-list button:nth-child(3n+2) span { background: var(--blue-soft); color: #55709a; }
.guest-list button:nth-child(3n) span { background: var(--blush); color: #a36762; }
.guest-list button:hover,
.guest-list button:focus { border-color: var(--sage); box-shadow: 0 9px 24px rgba(61, 93, 50, .13); }

.identity { border-color: var(--line); }
.identity i, .selection, .message { color: var(--terracotta); }
.heading > span { color: var(--terracotta); font-family: Montserrat, sans-serif; }

.picker {
  border-color: #a8b79e;
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(238, 232, 242, .62), rgba(247, 233, 225, .54));
}

.picker:hover { border-color: var(--terracotta); background: linear-gradient(135deg, #eee8f2, #f7e9e1); }
.picker-icon { background: #fff; color: var(--forest); box-shadow: 0 5px 16px rgba(50, 82, 40, .1); }

.primary {
  border-radius: 18px;
  background: var(--forest);
  box-shadow: 0 10px 26px rgba(40, 85, 47, .25);
  font-family: Montserrat, Arial, sans-serif;
  letter-spacing: .01em;
}

.primary:hover:not(:disabled) { background: #1f4726; transform: translateY(-1px); }
.refresh { border-color: #cfd9ca; background: #fffef9; color: var(--forest); }
.empty { border-color: #b8c4b0; background: rgba(255, 254, 249, .82); }
.empty i { color: var(--terracotta); }

.memory-carousel {
  border: 5px solid rgba(255, 254, 249, .96);
  border-radius: 28px;
  background: #dce4d7;
  box-shadow: 0 22px 60px rgba(40, 67, 34, .2), 0 0 0 1px rgba(107, 132, 94, .2);
}

.memory-slide { transition-duration: .85s; }
.open-hint,
.carousel-arrow { border-color: rgba(255, 255, 255, .72); background: rgba(30, 67, 37, .65); }
.memory-carousel::after { background: linear-gradient(transparent, rgba(23, 57, 29, .82)); }
.carousel-timer i { background: #d9cae4; }

.live-toast {
  border-color: rgba(255, 255, 255, .2);
  border-radius: 20px;
  background: rgba(31, 71, 38, .96);
  box-shadow: 0 20px 55px rgba(20, 48, 25, .35);
}

.live-toast div button { color: #ded0e8; }
.live-dot { background: #c8acd8; box-shadow: 0 0 0 5px rgba(200, 172, 216, .16); }

.upload-overlay { background: #18351f; }
.carousel-stage { background: radial-gradient(circle at 65% 25%, #788b6b, #17351e 68%); }
.carousel-stage.fallback::after { color: rgba(255,255,255,.28); font-family: Allura, cursive; }
.shade { background: linear-gradient(180deg, rgba(18,48,24,.08) 20%, rgba(18,48,24,.94) 90%); }
.upload-progress .overline { color: #d8c6e3; }
.upload-progress h2 { color: #fffef9; }

.guest-page > footer { color: #536a50; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1rem; }
.guest-page > footer span { color: var(--terracotta); }

/* Pannello amministratore */
.admin-page main { width: min(100%, 980px); padding-top: 78px; }
.admin-head { max-width: 600px; margin: 0 auto 35px; text-align: center; }
.admin-head h1 { margin: 6px 0 0; font-size: clamp(4rem, 12vw, 6rem); line-height: .9; }
.admin-head > p:last-child { color: var(--muted); }
.total-guests > span { background: var(--violet-soft); color: var(--terracotta); font-family: 'Cormorant Garamond', serif; }
.couple-totals span { background: #f1f4ed; }
.couple-totals b,
.guest-breakdown a,
.table-title > span,
.qr-link { color: var(--terracotta); }
.tableau-link { background: var(--forest); color: #fff; box-shadow: 0 6px 16px rgba(40, 85, 47, .18); }
.tableau-link:hover { background: #1f4726; }
.admin-form input,
.guest-editor input {
  border-color: #d9e0d4;
  border-radius: 14px;
  background: #fffefb;
  color: var(--forest);
  font-family: Montserrat, Arial, sans-serif;
}
.table-card:target { outline-color: rgba(116, 80, 134, .35); }
.couple-toggle { border-color: #dbe2d6; background: #fffefb; }
.couple-toggle > span { background: #9a76aa; }
.couple-toggle > input:checked + span { background: var(--forest); }
.child-toggle > input:checked + span { background: var(--terracotta); }
.save-guest, .remove-guest { border-color: #d9e0d4; border-radius: 12px; background: #fffefb; }
.danger-link, .remove-guest { color: #a24f5d; }

/* Visualizzatore a schermo intero */
.viewer-page {
  background: #142f1b;
  color: #fffef9;
  font-family: Montserrat, Arial, sans-serif;
}
.viewer-page header { background: rgba(20, 47, 27, .94); border-bottom: 1px solid rgba(255,255,255,.1); }
.viewer-page header p { color: #d2bbdf; font-family: Montserrat, sans-serif; }
.viewer-page h1 { color: #fffef9; font-family: Allura, 'Cormorant Garamond', serif; font-style: normal; font-size: 1.8rem; font-weight: 400; }
.viewer-page h1 i { color: #d2bbdf; font-family: Allura, cursive; }
.viewer-page .download { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
.viewer-page #viewer { background-image: radial-gradient(circle at center, rgba(107,137,94,.22), transparent 65%); }
.viewer-page #viewer img,
.viewer-page #viewer video { box-shadow: 0 18px 55px rgba(0,0,0,.26); }
.viewer-page footer { color: rgba(255,255,255,.65); }

/* Cartello A4 */
.table-card-page { background: #e8e8e1; color: var(--forest); font-family: Montserrat, Arial, sans-serif; }
.table-card-page .preview-toolbar { background: #214829; }
.table-card-page .sheet {
  background-color: #fffef9;
  background-image:
    linear-gradient(rgba(255, 254, 249, .42), rgba(255, 254, 249, .42)),
    url('/assets/floral-frame-a4.png');
  background-size: 100% 100%;
  background-position: center;
  color: var(--forest);
}
.table-card-page .inner-frame { inset: 7mm; border-color: rgba(71, 104, 60, .34); }
.table-card-page .botanical { display: none; }
.table-card-page .date,
.table-card-page .eyebrow {
  color: var(--terracotta);
  font-family: Montserrat, sans-serif;
  font-size: 3mm;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .18em;
}
.table-card-page .sheet h1 {
  color: var(--forest);
  font-family: Allura, 'Cormorant Garamond', Georgia, serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}
.table-card-page .sheet h1 span { color: var(--forest); font-family: Allura, cursive; font-size: .8em; vertical-align: 5%; }
.table-card-page .ornament { color: var(--terracotta); }
.table-card-page .welcome h2,
.table-card-page .qr-area h3 { color: var(--forest); font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; }
.table-card-page .welcome > p:last-child,
.table-card-page .qr-area > p { color: #687362; }
.table-card-page .city-photo { border-color: #fffef9; box-shadow: 0 4mm 9mm rgba(50, 72, 42, .18); }
.table-card-page .city-photos > p { background: rgba(255, 254, 249, .94); color: var(--terracotta); font-family: 'Cormorant Garamond', Georgia, serif; }
.table-card-page .qr-frame { background: rgba(255, 254, 249, .96); }
.table-card-page .qr-corner { border-color: var(--forest); }
.table-card-page .sheet footer { color: #71846a; }
.table-card-page .sheet footer span { background: #aebda7; }

.table-card-page .sheet.has-photos h1 {
  margin: 3mm 0 1mm;
  font-size: 15mm;
  line-height: .9;
}

.table-card-page .sheet.has-photos .welcome { margin-top: 3mm; }
.table-card-page .sheet.has-photos .welcome h2 {
  margin: 1.5mm 0 2mm;
  font-size: 10mm;
  line-height: 1;
}

.table-card-page .sheet.has-photos .welcome > p:last-child {
  max-width: 150mm;
  color: #4f604c;
  font-size: 3.5mm;
  font-weight: 500;
  line-height: 1.5;
}

.table-card-page .sheet.has-photos .city-photos {
  height: 77mm;
  margin-top: 6mm;
  margin-bottom: 4mm;
}

.table-card-page .sheet.has-photos .city-photos > p {
  font-size: 3.4mm;
  font-weight: 600;
}

.table-card-page .sheet.has-photos .qr-area { margin-top: 2mm; }
.table-card-page .sheet.has-photos .qr-frame { width: 53mm; height: 53mm; }
.table-card-page .sheet.has-photos .qr-area h3 {
  margin: 3mm 0 1.5mm;
  font-size: 7.2mm;
  line-height: 1;
}

.table-card-page .sheet.has-photos .qr-area > p {
  max-width: 145mm;
  color: #4f604c;
  font-size: 3.3mm;
  font-weight: 500;
  line-height: 1.5;
}

.table-card-page .sheet.has-photos footer {
  margin-top: 4mm;
  color: #5d7357;
  font-size: 2.6mm;
  font-weight: 700;
}

@media (max-width: 560px) {
  .guest-page,
  .admin-page { background-size: 950px auto; background-position: 48% top; }
  .hero { padding-top: 92px; }
  .hero h1 { font-size: clamp(3.7rem, 18vw, 5.6rem); }
  .panel { border-radius: 23px; }
  .admin-page main { padding-top: 68px; }
  .table-card-page .sheet { background-size: 100% 100%; }
}

/* Alleggerimenti mirati ai dispositivi touch, dove video e immagini del
   carosello occupano gia' buona parte della memoria grafica disponibile. */
@media (pointer: coarse) {
  .memory-carousel { box-shadow: 0 14px 34px rgba(40, 67, 34, .16); }
  .open-hint,
  .carousel-arrow,
  .live-toast { backdrop-filter: none; }
  .memory-slide { transition-duration: .48s; }
  .admin-tables .table-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 360px;
  }
}

@media print {
  .table-card-page .sheet {
    background-image:
      linear-gradient(rgba(255, 254, 249, .42), rgba(255, 254, 249, .42)),
      url('/assets/floral-frame-a4.png') !important;
    background-color: #fffef9 !important;
  }
}