
:root{--bg:#000;--fg:#fff;--gold:#d4af37;--muted:#bdbdbd}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:30;background:#000000d9;border-bottom:1px solid #131313;backdrop-filter:saturate(120%) blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand .title{font-family:"Playfair Display",serif;font-size:22px;letter-spacing:.6px}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav a{font-weight:600;padding:8px 12px;border-radius:10px}
nav a.active,nav a:hover{background:#101010;outline:1px solid #1a1a1a}
.mobile-toggle{display:none}
@media(max-width:860px){
  .mobile-toggle{display:block;border:1px solid #1a1a1a;background:#0b0b0b;color:#fff;border-radius:10px;padding:8px 12px}
  nav ul{display:none;flex-direction:column;position:absolute;right:20px;top:66px;background:#0b0b0b;border:1px solid #1a1a1a;border-radius:12px;padding:12px;width:220px}
  nav ul.open{display:flex}
}
.btn{display:inline-block;padding:12px 20px;border:1.5px solid var(--gold);border-radius:999px;color:#fff;font-weight:700;letter-spacing:.4px;transition:.2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(212,175,55,.18)}
.hero{min-height:70vh;display:grid;place-items:center;background:
radial-gradient(1000px 500px at 80% -10%, rgba(212,175,55,.12), transparent 60%),
radial-gradient(800px 400px at 20% 110%, rgba(212,175,55,.10), transparent 60%), #000}
.hero-inner{text-align:center;padding:80px 0}
.kicker{color:var(--gold);text-transform:uppercase;letter-spacing:2px;font-weight:800;font-size:12px}
h1{font-family:"Playfair Display",serif;font-size:54px;line-height:1.1;margin:14px 0 12px}
.lead{max-width:820px;margin:0 auto 28px;color:#e8e8e8;font-size:18px}
.section{padding:64px 0;border-top:1px solid #0f0f0f}
.section h2{font-family:"Playfair Display",serif;font-size:36px;margin:0 0 12px}
.section .sub{color:var(--muted);margin-bottom:22px}
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#0c0c0c;border:1px solid #1a1a1a;border-radius:16px;padding:20px}
.card h3{margin:8px 0 6px;font-family:"Playfair Display",serif}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:12px;border:1px solid #1a1a1a;cursor:pointer;transition:.2s}
.gallery img:hover{transform:scale(1.01)}
.footer{border-top:1px solid #0f0f0f;background:#060606;padding:26px 0;margin-top:64px;color:#dcdcdc}
.footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:24px}
.small{color:#b7b7b7;font-size:13px}
.hero-logo{display:block;margin:0 auto 18px auto;max-width:640px;width:68vw;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
@media(max-width:540px){.hero-logo{max-width:360px;width:84vw}}
.partners{margin-top:24px}
.partners-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.partner-card{display:flex;align-items:center;gap:16px;background:#0c0c0c;border:1px solid #1a1a1a;padding:16px;border-radius:16px;transition:.15s}
.partner-card:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(212,175,55,.07)}
.partner-card img{width:88px;height:88px;object-fit:contain;border-radius:12px;background:transparent}
.partner-card .info{flex:1}
.partner-card .info .name{font-weight:800}
@media(max-width:640px){.partners-grid{grid-template-columns:1fr}}


/* --- Booking form redesign --- */
.form-card{background:#0c0c0c;border:1px solid #1a1a1a;border-radius:20px;padding:24px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.form-grid{grid-template-columns:1fr}}
.field{position:relative}
.field input,.field textarea,.field select{width:100%;padding:18px 14px 14px;border-radius:14px;border:1px solid #222;background:#0a0a0a;color:#fff;outline:none;transition:.15s;font-size:15px}
.field textarea{min-height:140px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#705f1d;box-shadow:0 0 0 4px rgba(212,175,55,.12)}
.field label{position:absolute;left:12px;top:14px;color:#bdbdbd;background:#0a0a0a;padding:0 6px;border-radius:8px;pointer-events:none;transform-origin:left top;transition:.15s}
.field input::placeholder,.field textarea::placeholder{opacity:0}
.field input:focus + label,
.field textarea:focus + label,
.field select:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{transform:translateY(-16px) scale(.88);color:#d4af37}
.req:after{content:" *";color:#ffb0b0}
.inline-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.inline-2{grid-template-columns:1fr}}
.btn.solid{background:linear-gradient(180deg,#d4af37,#b9962d);color:#000;font-weight:900;border-color:#d4af37}
.btn.solid:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 10px 30px rgba(212,175,55,.25)}
.helper{color:#a6a6a6;font-size:12px;margin-top:6px}

.social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px}
@media(max-width:640px){.social-grid{grid-template-columns:repeat(3,88px);justify-content:flex-start}}
.social-card{display:grid;place-items:center;background:#0c0c0c;border:1px solid #1a1a1a;padding:12px;border-radius:14px;transition:.15s}
.social-card:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(212,175,55,.07)}
.social-card img{width:24px;height:24px;object-fit:contain;border-radius:6px;display:block}


.fav-list{margin-top:12px}
.fav{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 0;border-bottom:1px dotted #242424}
.fav .name{font-weight:700}
.fav .desc{color:#bdbdbd;margin-top:2px}
.fav .price{color:#d4af37;font-weight:800;white-space:nowrap;align-self:center}

/* Home gallery preview sizing */
.gallery-home{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gallery-home img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:14px;border:1px solid #1a1a1a}
@media(max-width:1024px){.gallery-home{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.gallery-home{grid-template-columns:1fr}}

/* Gallery item wrapper and numbering */
.gallery .gitem{position:relative}
.gallery .gitem img{width:100%;height:220px;object-fit:cover;border-radius:14px;border:1px solid #1a1a1a;display:block}
.gallery .badge{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  color:#d4af37;
  font-weight:900;
  font-size:28px;
  line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
  pointer-events:none;
}


/* Smaller social icons */
.social, .socials, .social-links { display:flex; gap:12px; align-items:center; }
.social img, .socials img, .social-links img { width:28px; height:28px; display:block }
.social a, .socials a, .social-links a { line-height:0 }

/* Awards section */
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:8px}
.award-card{background:#0c0c0c;border:1px solid #1a1a1a;border-radius:16px;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.award-card img{width:88px;height:88px;object-fit:contain;display:block;margin-bottom:10px;filter:none}
.award-caption{color:#d4af37;font-weight:700;text-align:center;font-size:14px}


/* Social icons responsive sizing */
.social, .socials, .social-links, .social-row { display:flex; gap:14px; align-items:center; }
.social-card, .social a, .socials a, .social-links a, .social-row a { line-height:0; display:inline-flex; }
.social-card img, .social img, .socials img, .social-links img, .social-row img { 
  width:36px; height:36px; object-fit:contain; display:block;
}
@media (max-width: 1024px) {
  .social-card img, .social img, .socials img, .social-links img, .social-row img {
    width:32px; height:32px;
  }
}
@media (max-width: 640px) {
  .social-card img, .social img, .socials img, .social-links img, .social-row img {
    width:28px; height:28px;
  }
}


/* Social cards proportional sizing */
.social-row, .socials, .social-links {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.social-card {
  flex: 0 0 auto;              /* don't stretch */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;          /* proportional padding around the icon */
  border-radius: 16px;
  background: #0c0c0c;
  border: 1px solid #1a1a1a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
@media (max-width: 1024px) {
  .social-card { padding: 9px 14px; border-radius: 14px; }
}
@media (max-width: 640px) {
  .social-card { padding: 8px 12px; border-radius: 12px; }
}


/* === Lightbox (fullscreen image viewer) === */
.lb-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:9999}
.lb-backdrop.open{display:flex}
.lb-content{position:relative; max-width:90vw; max-height:90vh}
.lb-img{max-width:90vw; max-height:90vh; display:block}
.lb-close, .lb-prev, .lb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.25);
  padding:10px 14px; border-radius:10px; font-size:18px; color:#fff; cursor:pointer; user-select:none;
}
.lb-close{top:18px; right:18px; transform:none}
.lb-prev{left:-64px}
.lb-next{right:-64px}
@media (max-width: 768px){
  .lb-prev{left:-44px}
  .lb-next{right:-44px}
}
.gallery .gitem{cursor: zoom-in;}



/* Touch: prevent native scroll inside lightbox, enable drag */
.lb-backdrop, .lb-content { touch-action: none; }
.lb-content { cursor: grab; }
.lb-content:active { cursor: grabbing; }


/* Quick contact chips */
.contact-quick{
  display:flex; gap:12px; flex-wrap:wrap; margin: 8px 0 12px 0;
}
.contact-quick .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px; border:1px solid var(--gold, #CBA74A);
  border-radius:12px; text-decoration:none; color:#e9e0c9; background:#0f0f0f; box-shadow: 0 0 0 1px rgba(203,167,74,.08) inset;
}
.contact-quick .chip:hover{ box-shadow:0 0 0 1px rgba(203,167,74,.3) inset; }
.contact-quick .chip span{ opacity:.85; }
.nav-phone{
  margin-left:auto; padding:6px 10px; border:1px solid rgba(203,167,74,.35);
  border-radius:10px; text-decoration:none; color:#e9e0c9; font-size:14px;
}
.nav-phone:hover{ background:rgba(203,167,74,.1); }
footer .footer-contacts{ margin-top:10px; opacity:.9; }
footer .footer-contacts a{ color:#e9e0c9; text-decoration:none; }
footer .footer-contacts a:hover{ text-decoration:underline; }


/* ===== Amici Miei — Italia Theme (palette-only, no content change) ===== */
:root{
  --bg:#0b0b0b;
  --panel:#121212;
  --text:#F3EEE4;
  --muted:#CFC6B3;
  --green:#1B8F5A;       /* Italian green */
  --red:#C4332C;         /* Tuscan red */
  --gold:#D4B15F;        /* Warm gold accent */
  --accent:var(--gold);
  --outline:rgba(212,177,95,.35);
}
body{ background:var(--bg); color:var(--text); }

/* Header & footer subtle tricolore bars */
header.site-header::after{
  content:""; display:block; height: 10px; margin-top:8px;
  background:linear-gradient(90deg,var(--green),#ffffff,var(--red));
  border-radius:2px; opacity: 1;
}
footer.site-footer::before{
  content:""; display:block; height:3px; margin-bottom:10px;
  background:linear-gradient(90deg,var(--green),#ffffff,var(--red));
  border-radius:2px; opacity:.9;
}

/* Section titles — tricolore underline */
h1, h2, .section-title{
  color:var(--text);
}
h1::after, h2::after, .section-title::after{
  content:""; display:block; width: 220px; height: 8px; margin:10px 0 2px 0;
  background:linear-gradient(90deg,var(--green),#ffffff,var(--red));
  border-radius:3px; opacity:.95;
}

/* Cards / panels */
.card, .panel, .menu-card, .gallery-card, .contact-card{
  background:var(--panel);
  border:1px solid var(--outline);
  border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 10px 24px rgba(0,0,0,.25);
}

/* Buttons */
.btn{
  background:linear-gradient(180deg, var(--gold), #B99545);
  color:#0b0b0b;
  border:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset, 0 6px 24px rgba(212,177,95,.25);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(0,0,0,.35) inset, 0 12px 28px rgba(212,177,95,.35); }
.btn:active{ transform:translateY(0); }
.btn-secondary{ background:transparent; color:var(--text); border:1px solid var(--outline); }
.btn-secondary:hover{ border-color:var(--gold); color:var(--gold); }

/* Links */
a{ color:var(--gold); }
a:hover{ color:#FFE19A; }

/* Inputs */
input, select, textarea{
  background:#0E0E0E; color:var(--text);
  border:1px solid rgba(255,255,255,.08);
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(27,143,90,.25);
}

/* Gallery tiles hover — thin tricolore glow */
.gallery-grid .tile, .gallery-card{
  transition:box-shadow .2s ease, transform .2s ease;
}
.gallery-grid .tile:hover, .gallery-card:hover{
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 0 0 3px rgba(27,143,90,.35), 0 14px 32px rgba(0,0,0,.45);
  transform:translateY(-2px);
}

/* Contact quick chips (if present) refreshed style */
.contact-quick .chip{
  background:#0f0f0f;
  border-color:var(--outline);
  color:var(--text);
}
.contact-quick .chip:hover{ border-color:var(--gold); color:var(--gold); }

/* Nav phone badge, social icon wrap */
.nav-phone{
  border-color:var(--outline);
  color:var(--text);
}
.nav-phone:hover{ border-color:var(--gold); color:var(--gold); }
.social-card, .social-pill{
  background:var(--panel); border:1px solid var(--outline); border-radius:14px;
}

/* Lightbox controls recolor */
.lb-prev, .lb-next, .lb-close{
  background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.15);
}
.lb-prev:hover, .lb-next:hover, .lb-close:hover{ border-color:var(--gold); color:#fff; }



/* Wide tricolore banner under the first section (hero) */
main > section:first-of-type::before{
  content:"";
  display:block;
  width:100%;
  height:18px;
  margin:8px 0 18px 0;
  background:linear-gradient(90deg,var(--green),#ffffff,var(--red));
  border-radius:4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
@media (min-width: 900px){
  main > section:first-of-type::before{ height:24px; margin:12px 0 22px 0; }
}



/* ===================== ITALIA OVERDRIVE (visual only) ===================== */
/* Massive Italian vibe without touching copy/structure */

/* 0) ensure basics */
:root{
  --green:#1B8F5A;
  --red:#C4332C;
  --gold:#D4B15F;
  --bg:#0b0b0b;
  --panel:#121212;
  --text:#F3EEE4;
}
body{ background:var(--bg); color:var(--text); }

/* 1) Full-page subtle terrazzo / vignette backdrop (non-intrusive) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1000px 800px at -15% 0%, rgba(27,143,90,.08), transparent 70%),
    radial-gradient(900px 700px at 115% 10%, rgba(196,51,44,.08), transparent 72%),
    radial-gradient(800px 650px at 50% 120%, rgba(212,177,95,.08), transparent 72%),
    linear-gradient(#0b0b0b,#0b0b0b);
  filter:saturate(1);
}

/* 2) Big tricolore hero banner below first section title */
main > section:first-of-type .section-title,
main > section:first-of-type h1{
  position:relative; isolation:isolate;
}
main > section:first-of-type .section-title::after,
main > section:first-of-type h1::after{
  content:""; display:block; position:relative; z-index:-1;
  width:280px; height:12px; margin:14px 0 18px 0;
  background:linear-gradient(90deg,var(--green),#ffffff,var(--red));
  border-radius:8px;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}
@media(min-width:980px){
  main > section:first-of-type .section-title::after,
  main > section:first-of-type h1::after{ width:420px; height:16px; }
}

/* 3) Global header tricolore bar (thick) */
header.site-header::after{
  content:""; display:block; height:14px; margin-top:8px;
  background:linear-gradient(90deg,var(--green),#ffffff,var(--red));
  border-radius:4px; box-shadow:0 4px 20px rgba(0,0,0,.35);
}

/* 4) Cards with diagonal tricolore micro-ribbons */
.card, .panel, .menu-card, .gallery-card, .contact-card{
  position:relative; background:var(--panel);
  border:1px solid rgba(212,177,95,.35);
  border-radius:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 16px 34px rgba(0,0,0,.35);
}
.card::before, .panel::before, .menu-card::before, .gallery-card::before, .contact-card::before{
  content:""; position:absolute; left:0; top:0; width:0;height:0;
  border-top:18px solid var(--green); border-right:18px solid transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
.card::after, .panel::after, .menu-card::after, .gallery-card::after, .contact-card::after{
  content:""; position:absolute; right:0; bottom:0; width:0;height:0;
  border-bottom:18px solid var(--red); border-left:18px solid transparent;
  filter:drop-shadow(0 -1px 0 rgba(0,0,0,.25));
}

/* 5) Gallery tiles — bold Italian border hover */
.gallery-grid .tile, .gallery-card{
  transition:transform .18s ease, box-shadow .18s ease;
}
.gallery-grid .tile:hover, .gallery-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.04) inset,
    0 0 0 4px rgba(27,143,90,.35),
    0 18px 36px rgba(0,0,0,.45);
}

/* 6) Menu / Étlap area with trattoria tablecloth banner (non-blocking) */
section#etlap, section#menu{
  position:relative;
}
section#etlap::before, section#menu::before{
  content:""; position:absolute; left:-14px; right:-14px; top:-14px; height:90px;
  background:
    linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.28)),
    repeating-linear-gradient(45deg, #b90d0d 0 16px, #ffffff 16px 32px);
  border-radius:18px; box-shadow:0 6px 24px rgba(0,0,0,.35);
}

/* 7) Buttons: stronger gold + subtle tricolore edge on hover */
.btn{
  background:linear-gradient(180deg, var(--gold), #B99545);
  color:#0b0b0b; border:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset, 0 10px 26px rgba(212,177,95,.28);
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset, 0 14px 28px rgba(212,177,95,.38),
    0 0 0 4px rgba(27,143,90,.25);
}
.btn:active{ transform:none; }

/* 8) Inputs: Italian green focus ring */
input, select, textarea{
  background:#0E0E0E; color:var(--text);
  border:1px solid rgba(255,255,255,.08); border-radius:10px;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--green)!important;
  box-shadow:0 0 0 4px rgba(27,143,90,.28);
}

/* 9) Social blocks — tricolore subtle ring */
.social-card, .social-pill{
  background:var(--panel);
  border:1px solid rgba(212,177,95,.35);
  border-radius:14px; padding:8px 10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
}
.social-card:hover, .social-pill:hover{
  box-shadow:0 0 0 3px rgba(196,51,44,.25);
}

/* 10) Footer top tricolore */
footer.site-footer::before{
  content:""; display:block; height:10px; margin-bottom:10px;
  background:linear-gradient(90deg,var(--green),#ffffff,var(--red));
  border-radius:4px; box-shadow:0 -4px 18px rgba(0,0,0,.35);
}
/* --- Nyelvváltó: fixen a jobb felső sarokban --- */
.lang-switch{
  position: fixed !important;
  top: 10px;
  right: 12px;
  left: auto !important;
  transform: none !important;
  margin-left: 0 !important;
  z-index: 100; /* backdrop(65), drawer(70) fölött */
  display: flex;
  gap: 8px;
}

@media (max-width: 768px){
  .lang-switch{
    top: 12px;
    right: 14px;
  }
}
/* === Nyelvváltó – fejlec jobb felső sarok, minden oldal === */
header .nav{ position: relative; } /* legyen viszonyítási pont */
.lang-switch{
  position: absolute; top: 10px; right: 12px;
  display: flex; gap: 8px; z-index: 75;
}
.lang-btn{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:24px;border-radius:6px;
  border:1px solid #2a2a2a;background:#111;color:#fff;
  font-size:18px;line-height:1;cursor:pointer;opacity:.95;overflow:hidden;
}
.lang-btn.active{ outline:2px solid #c9a26c; opacity:1 }
@media (max-width:768px){
  .lang-switch{ top:12px; right:14px; }
  .lang-btn{ width:28px;height:22px;font-size:16px }
}

/* === Google fordító saját elemei globálisan elrejtve === */
#google_translate_element{display:none}
iframe.goog-te-banner-frame,.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none!important}
html,body{margin-top:0!important;top:0!important}
.goog-text-highlight{background:transparent!important;box-shadow:none!important}

/* === Biztonsági jelölés: ami 'notranslate', azt ne fordítsa === */
.notranslate{unicode-bidi:isolate}


/* ======================================================================= */

