
:root {
  --rose-gold: #B76E79;
  --off-white: #FDFAF6;
  --sand-beige: #E5D3B3;
  --anthracite: #2D2D2D;
  --glass: rgba(255, 255, 255, 0.4);
}
body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, var(--off-white) 0%, var(--sand-beige) 100%);
  color: var(--anthracite);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(9rem + env(safe-area-inset-bottom));
}
h1, h2, h3, .serif { font-family: 'Playfair Display', serif; }
.glass-card {
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}
.active-tab { color: var(--rose-gold); transform: translateY(-2px); }
.btn-premium {
  background: linear-gradient(135deg, var(--rose-gold) 0%, #a05d68 100%);
  color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-social-clean {
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(183, 110, 121, 0.3);
  color: var(--anthracite);
  transition: all 0.3s ease;
}
.btn-social-clean:hover { background: var(--rose-gold); color: white; border-color: var(--rose-gold); }
.btn-social-clean:hover svg { color: white !important; }
.social-icon-btn { color: var(--rose-gold); }
.btn-social-clean:hover .social-icon-btn { color: white !important; }
.page { display: none; animation: fadeIn 0.5s ease-out forwards; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.floating { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } }
.cookie-banner { transform: translateY(200%); transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
.cookie-banner.show { transform: translateY(0); }
.gallery-item { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 16px; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.gallery-item:hover img { transform: scale(1.1); }
#readerView {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: white; z-index: 200; overflow-y: auto;
  padding-top: max(80px, env(safe-area-inset-top));
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
#readerView.active { display: block; animation: slideUp 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.star-rating { color: #fbbf24; }
.hp-field { display: none !important; visibility: hidden; }
.new-badge {
  background: var(--rose-gold); color: white; font-size: 8px; padding: 2px 8px;
  border-radius: 999px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
}
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] .chev { transform: rotate(180deg); }
.step-num {
  width: 32px; height: 32px; border-radius: 999px; background: var(--rose-gold); color: white;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.lang-switch {
  position: fixed; top: 14px; right: 14px; z-index: 60;
  display: flex; background: var(--glass); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; overflow: hidden;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
}
.lang-switch button { padding: 6px 12px; color: var(--anthracite); transition: all 0.2s ease; }
.lang-switch button.lang-active { background: var(--rose-gold); color: white; }
[data-it] { display: none; }
html.lang-it [data-de] { display: none; }
html.lang-it [data-it] { display: inline; }
html.lang-it [data-it].block-it { display: block; }

/* Custom checkbox styling - fixes black pre-filled look */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(183, 110, 121, 0.5);
  border-radius: 4px;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
input[type="checkbox"]:checked {
  background: var(--rose-gold);
  border-color: var(--rose-gold);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus { outline: 2px solid rgba(183,110,121,0.3); outline-offset: 1px; }

/* Lightbox Gallery with Swipe */
#lightbox {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(20,15,15,0.96); align-items: center; justify-content: center;
  touch-action: pan-y;
}
#lightbox.active { display: flex; animation: fadeIn 0.3s ease-out; }
#lightbox img {
  max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5); user-select: none; -webkit-user-drag: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.lightbox-close {
  position: absolute; top: max(20px, env(safe-area-inset-top)); right: 20px;
  color: white; background: rgba(255,255,255,0.15); border-radius: 999px;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  z-index: 310;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: white; background: rgba(255,255,255,0.15); border-radius: 999px;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  z-index: 310;
}
.lightbox-nav.prev { left: 12px; }
.lightbox-nav.next { right: 12px; }
.lightbox-counter {
  position: absolute; bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  color: white; font-size: 11px; letter-spacing: 0.1em; background: rgba(255,255,255,0.15);
  padding: 4px 14px; border-radius: 999px;
}


#marketingCookies { appearance:none; -webkit-appearance:none; width:32px; height:16px; min-width:32px; border:0; border-radius:999px; background:#767676; position:relative; cursor:pointer; vertical-align:middle; }
#marketingCookies::after { content:''; position:absolute; width:12px; height:12px; left:2px; top:2px; border:0; border-radius:50%; background:white; transform:none; transition:left .2s ease; }
#marketingCookies:checked { background:var(--rose-gold); }
#marketingCookies:checked::after { left:18px; top:2px; width:12px; height:12px; border:0; transform:none; }
#marketingCookies:focus-visible { outline:2px solid var(--anthracite); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { #marketingCookies::after { transition:none; } }


input#legalCookieToggle { position:absolute !important; width:1px !important; height:1px !important; min-width:0 !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important; background:transparent !important; }
input#legalCookieToggle::before, input#legalCookieToggle::after { content:none !important; display:none !important; }
input#legalCookieToggle:focus-visible + div { outline:2px solid var(--anthracite); outline-offset:3px; }


:root { --focus-color:#242424; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid var(--focus-color); outline-offset:4px; }
.lang-switch button { min-width:44px; min-height:44px; font-size:12px; }
.lightbox-close, .lightbox-nav { min-width:44px; min-height:44px; }
#lightbox button:focus-visible { outline-color:white; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}


#languageWelcome { border:1px solid rgba(183,110,121,.22); border-radius:28px; padding:36px 28px 28px; width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:auto; background:#FDFAF6; color:#2d2d2d; box-shadow:0 24px 80px rgba(45,45,45,.18); text-align:center; }
#languageWelcome::backdrop { background:rgba(45,35,35,.32); backdrop-filter:blur(8px); }
#languageWelcome h2 { font-size:28px; line-height:1.25; margin:12px 0; }
#languageWelcome p { font-size:15px; line-height:1.6; margin:12px 0 24px; }
#languageWelcome .language-options { display:grid; gap:12px; }
#languageWelcome .language-options button { min-height:52px; padding:12px 20px; border-radius:16px; font-size:16px; border:1px solid #b76e79; background:white; color:#62343d; }
#languageWelcome .language-options button:first-child { background:#804450; color:white; border-color:#804450; }
#languageWelcome .welcome-close { position:absolute; top:8px; right:8px; width:44px; height:44px; font-size:26px; border-radius:50%; }


@media(min-width:1024px) {
  body > nav { left:50%; right:auto; width:calc(100% - 48px); max-width:560px; transform:translateX(-50%); }
}
#languageWelcome { --rose-gold:#B76E79; padding:40px 32px 32px; width:min(460px,calc(100vw - 32px)); border:1px solid rgba(255,255,255,.65); border-radius:28px; background:linear-gradient(145deg,rgba(253,250,246,.97),rgba(245,234,217,.96)); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 16px 60px rgba(70,45,42,.13),inset 0 1px 0 rgba(255,255,255,.8); }
#languageWelcome::backdrop { background:rgba(55,43,38,.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
#languageWelcome .welcome-brand { width:68px; height:68px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.48); border:1px solid rgba(183,110,121,.12); }
#languageWelcome .welcome-brand svg { display:block; width:46px; height:46px; }
#languageWelcome h2 { font-family:'Playfair Display',serif; font-size:24px; font-weight:400; line-height:1.45; color:#453632; margin:0 0 16px; }
#languageWelcome h2 span[lang="it"] { font-size:20px; font-style:italic; color:#804450; }
#languageWelcome p { font-size:13px; line-height:1.8; color:#625550; margin:0 0 24px; }
#languageWelcome p span[lang="it"] { font-style:italic; }
#languageWelcome .language-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#languageWelcome .language-options button, #languageWelcome .language-options button:first-child { min-height:52px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:#713d47; background:rgba(255,255,255,.55); border:1px solid rgba(128,68,80,.45); border-radius:16px; box-shadow:0 3px 12px rgba(70,45,42,.03); transition:background .2s ease,box-shadow .2s ease; }
#languageWelcome .language-options button:hover { background:rgba(255,255,255,.9); box-shadow:0 5px 16px rgba(128,68,80,.09); }
#languageWelcome .welcome-close { color:#804450; background:transparent; font-size:22px; }
@media(max-width:359px) { #languageWelcome { padding:36px 20px 24px; } #languageWelcome h2 { font-size:21px; } }
@media(prefers-reduced-motion:reduce) { #languageWelcome .language-options button { transition:none; } }


@media(min-width:1024px) {
  body > nav { left:24px !important; right:24px !important; width:calc(100% - 48px) !important; max-width:560px !important; margin-left:auto !important; margin-right:auto !important; transform:none !important; translate:none !important; }
}
#languageWelcome .welcome-close { top:8px; right:8px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-size:16px; font-weight:300; line-height:1; color:#8a7670; background:transparent; border:0; box-shadow:none; }
#languageWelcome .welcome-close:hover, #languageWelcome .welcome-close:focus-visible { color:#62343d; }


body > nav { background:rgba(253,250,246,.90); }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  body > nav { background:rgba(253,250,246,.52); backdrop-filter:blur(28px) saturate(115%); -webkit-backdrop-filter:blur(28px) saturate(115%); }
  #languageWelcome { background:linear-gradient(145deg,rgba(253,250,246,.84),rgba(245,234,217,.80)); backdrop-filter:blur(28px) saturate(110%); -webkit-backdrop-filter:blur(28px) saturate(110%); }
}
#languageWelcome .welcome-close, #languageWelcome .welcome-close:hover, #languageWelcome .welcome-close:active { border:0 !important; border-radius:4px !important; background:none !important; box-shadow:none !important; }
#languageWelcome .welcome-close::before, #languageWelcome .welcome-close::after { content:none !important; }
#languageWelcome .welcome-close:focus:not(:focus-visible) { outline:none; }
#languageWelcome .welcome-close:focus-visible { outline:2px solid #804450; outline-offset:0; }


@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  body > nav.glass-card { background:rgba(253,250,246,.30) !important; backdrop-filter:blur(48px) saturate(110%) !important; -webkit-backdrop-filter:blur(48px) saturate(110%) !important; }
}
#languageWelcome:focus { outline:none; }


html { scroll-padding-bottom:var(--pda-nav-clearance,calc(112px + env(safe-area-inset-bottom,0px))); }
body { padding-bottom:0; }
body > main::after { content:""; display:block; clear:both; height:var(--pda-nav-clearance,calc(112px + env(safe-area-inset-bottom,0px))); pointer-events:none; }

html, body { overscroll-behavior-y:auto; }
