:root{
  --bg:#fbf6ef;
  --card:#fffaf4;
  --text:#1c1a18;
  --muted:#6a625b;
  --line:rgba(0,0,0,.08);
  --gold1:#d7b46a;
  --gold2:#b58a3d;
  --shadow: 0 18px 50px rgba(0,0,0,.10);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 600px at 20% 10%, #fff 0%, var(--bg) 45%, #f6efe6 100%);
  color:var(--text);
}

.wrap{width:min(1080px, 92vw); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(251,246,239,.72);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 0}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.brand-mark{
  width:40px; height:40px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background: transparent;
  box-shadow: none;
}
.brand-logo{height:44px;width:auto;display:block;object-fit:contain}
.brand-name{font-weight:800; letter-spacing:.2px}
.brand-sub{color:var(--muted); font-weight:600; font-size:14px}

.nav{display:flex; gap:10px}
.navlink{
  text-decoration:none; color:var(--muted); font-weight:650;
  padding:10px 12px; border-radius:12px;
}
.navlink:hover{background:rgba(0,0,0,.04); color:var(--text)}

main.wrap{padding:28px 0 44px}
.footer{padding:18px 0 30px; color:var(--muted); border-top:1px solid var(--line); background:rgba(255,255,255,.35)}
.footer small{display:block; text-align:center}

.bg-orb{
  position:fixed; inset:auto;
  width:540px; height:540px; border-radius:999px;
  filter: blur(50px);
  opacity:.22; pointer-events:none;
}
.orb1{left:-220px; top:80px; background: radial-gradient(circle at 30% 30%, var(--gold1), transparent 55%)}
.orb2{right:-260px; bottom:-220px; background: radial-gradient(circle at 40% 40%, #e6cfa1, transparent 60%)}

.h1{font-size: clamp(28px, 3.1vw, 44px); margin:0 0 6px; letter-spacing:-.6px}
.p{margin:0; color:var(--muted); line-height:1.6}
.sp-16{height:16px}
.sp-24{height:24px}

.grid{display:grid; gap:18px}
@media(min-width: 920px){ .grid-2{grid-template-columns: 1.1fr .9fr} }

.card{
  background: rgba(255,250,244,.85);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad{padding:18px}
.card-title{font-weight:800; margin:0 0 8px}
.form{display:grid; gap:12px}
.row{display:grid; gap:10px}
@media(min-width: 720px){ .row-2{grid-template-columns: 1fr 1fr} }

.label{font-size:13px; color:var(--muted); font-weight:700}
.input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.8);
  outline:none;
  font-size:15px;
}
.input:focus, select:focus, textarea:focus{
  border-color: rgba(181,138,61,.55);
  box-shadow: 0 0 0 4px rgba(215,180,106,.18);
}

.btn{
  appearance:none; border:0; cursor:pointer;
  padding:12px 14px; border-radius:14px;
  font-weight:800; letter-spacing:.2px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--gold1), var(--gold2));
  box-shadow: 0 16px 30px rgba(181,138,61,.28);
}
.btn-primary:hover{filter:brightness(1.02)}
.btn-success{
  color:#fff;
  background: linear-gradient(135deg, #1F9D55, #2FBF71);
  box-shadow: 0 16px 30px rgba(47,191,113,.25);
}
.btn-success:hover{filter:brightness(1.03)}
.btn-ghost{background: transparent; border:1px solid var(--line); color:var(--text)}
.notice{
  padding:12px 14px; border-radius:14px;
  border:1px solid rgba(181,138,61,.18);
  background: rgba(215,180,106,.12);
  color:#5a3f11;
  font-weight:700;
}
.error{
  padding:12px 14px; border-radius:14px;
  border:1px solid rgba(160,30,30,.18);
  background: rgba(220,80,80,.10);
  color:#7a1e1e;
  font-weight:700;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.65);
}
.table th, .table td{
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:14px;
}
.table th{color:var(--muted); font-weight:800; background: rgba(255,255,255,.5)}
.table tr:last-child td{border-bottom:0}

.pill{
  display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line);
  font-weight:800; font-size:12px;
}
.pill.pending{background: rgba(215,180,106,.14); color:#6a4b14}
.pill.approved{background: rgba(80,160,120,.14); color:#1f5d3f}
.pill.rejected{background: rgba(220,80,80,.12); color:#7a1e1e}

.adminbar{
  display:flex; gap:10px; align-items:center;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.logout{margin:0; margin-left:auto}

.chip{
  text-decoration:none;
  padding:10px 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--text); font-weight:800;
  background: rgba(255,255,255,.55);

  display:inline-flex; align-items:center; line-height:1.1; white-space:nowrap;
}

.chip{position:relative}
.chip-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 6px;
  border-radius:999px;
  background: var(--gold);
  color:#2b1b00;
  font-weight:900;
  font-size:12px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.55);
}
@keyframes badgePulse{
  0%{transform:scale(1); box-shadow:0 6px 16px rgba(0,0,0,.18)}
  50%{transform:scale(1.08); box-shadow:0 10px 22px rgba(0,0,0,.22)}
  100%{transform:scale(1); box-shadow:0 6px 16px rgba(0,0,0,.18)}
}
.chip-badge{animation: badgePulse 1.6s ease-in-out infinite}

.chip:hover{background: rgba(255,255,255,.85)}
.pill.cancelled{background: rgba(120,120,120,.12); color:#3f3b36}

/* Local calendar (no external CDN) */
.lc-hdr{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.lc-title{font-weight:900; letter-spacing:-.3px}
.lc-controls{display:flex; gap:8px; flex-wrap:wrap}
.lc-grid{display:grid; grid-template-columns: repeat(7, 1fr); gap:8px}
.lc-dow{font-size:12px; color:var(--muted); font-weight:900; text-align:center; padding:8px 0}
.lc-day{background: rgba(255,255,255,.75); border:1px solid var(--line); border-radius:14px; padding:10px; min-height:70px; cursor:pointer; text-align:left}
.lc-day:hover{background: rgba(255,255,255,.95)}
.lc-out{opacity:.55}
.lc-today{border-color: rgba(181,138,61,.55); box-shadow: 0 0 0 4px rgba(215,180,106,.18)}
.lc-num{font-weight:900}
.lc-dot{margin-top:8px; display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; border-radius:999px; background: rgba(215,180,106,.18); border:1px solid rgba(181,138,61,.20); color:#6a4b14; font-weight:900; font-size:12px}
#lc-detail{display:none}
.lc-ev{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line)}
.lc-ev:last-child{border-bottom:0}
.lc-ev-time{font-weight:900; min-width:52px; color:#6a4b14}
.lc-ev-title{font-weight:700; color:var(--text); font-size:14px}

/* Naptár – napi lista akció gombok */
.lc-ev{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.lc-ev:last-child{border-bottom:0}
.lc-ev-left{display:flex; gap:10px; align-items:flex-start}
.lc-ev-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.lc-act{padding:8px 10px; border-radius:12px; font-weight:800}


/* === FIX: naptár méret ne nőjön a napi részletektől === */
#local-cal {
  max-height: 520px;
  overflow: hidden;
}

#local-cal .lc-grid {
  max-height: 460px;
  overflow-y: auto;
}

#lc-detail {
  max-height: 360px;
  overflow-y: auto;
}

/* Emoji buttons – subtle */
.lc-act{display:inline-flex; gap:6px; align-items:center}

/* Time picker (no dropdown) */
.time-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}
.time-btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.72);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
}
.time-btn:hover{ background: rgba(255,255,255,.92); }
.time-btn.on{
  border-color: rgba(215,180,106,.75);
  box-shadow: 0 0 0 4px rgba(215,180,106,.18);
  background: linear-gradient(135deg, rgba(215,180,106,.22), rgba(181,138,61,.14));
}
.time-btn.disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.7);
  background: rgba(255,255,255,.55);
}

/* Time pills (used by the calendar JS renderer) */
.time-pill{
  appearance:none;
  border:1px solid rgba(215,180,106,.55);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  letter-spacing:.2px;
  cursor: pointer;
  color: rgba(55,36,14,.95);
  width:auto;
  min-width:72px;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.time-pill:hover{
  background: rgba(215,180,106,.10);
  border-color: rgba(215,180,106,.75);
}
.time-pill:active{ transform: translateY(1px); }
.time-pill.is-selected{
  border-color: rgba(215,180,106,.95);
  background: linear-gradient(135deg, rgba(215,180,106,.85), rgba(181,138,61,.78));
  color:#fff;
  box-shadow: 0 10px 24px rgba(181,138,61,.18), 0 0 0 4px rgba(215,180,106,.18);
}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:960px){.grid-3{grid-template-columns:1fr}}

.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:720px){.service-grid{grid-template-columns:1fr}}
.service-card{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px;cursor:pointer;background:rgba(255,255,255,.75)}
.service-card input{display:none}
.service-card img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.service-card .svc-placeholder{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e7d3a3,#caa85b);color:#fff;font-size:22px}
.service-card .svc-name{font-weight:900}
.service-card .svc-meta{font-size:13px;color:var(--muted)}
.service-card input:checked + img,
.service-card input:checked ~ .svc-placeholder,
.service-card input:checked ~ .svc-name{outline:2px solid rgba(215,180,106,.7)}

.service-card.on{border-color:rgba(215,180,106,.75);box-shadow:0 0 0 4px rgba(215,180,106,.18);background:linear-gradient(135deg,rgba(215,180,106,.18),rgba(181,138,61,.10))}


/* ===== Kért elrendezés: Telefon középen, Szolgáltatás új sorban (kép nélkül) ===== */
#phoneWrap, #serviceWrap{width:100%}
.label-center{text-align:center !important; display:block;}
.input-center{max-width:420px;margin:0 auto !important;display:block;text-align:center;}

#serviceWrap .service-grid{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
@media (min-width: 820px){
  #serviceWrap .service-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px !important;}
}
@media (min-width: 1900px){
  #serviceWrap .service-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
#serviceWrap .service-card{
  padding:20px 22px !important;
  border-radius:26px !important;
  min-height:132px !important;
}
#serviceWrap .service-card .svc-name{font-size:18px !important; line-height:1.25 !important; white-space:normal !important;}
#serviceWrap .service-card .svc-meta{font-size:15px !important; line-height:1.35 !important; white-space:normal !important; margin-top:10px !important;}
#serviceWrap .service-card img, #serviceWrap .service-card .svc-placeholder{display:none !important;}


/* ===== Kérés: minden beírható mező szövege középen ===== */
input.input, textarea, select{ text-align:center !important; }
input.input::placeholder, textarea::placeholder{ text-align:center !important; }


/* ===== Kérés: minden mező FELIRATA középen legyen ===== */
.label{
  text-align: center !important;
  width: 100%;
}


/* Safari placeholder + input centering */
input.input::-webkit-input-placeholder{ text-align:center !important; }
textarea::-webkit-input-placeholder{ text-align:center !important; }


.time-pill:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(1);}


/* ===== Telefon mező: 2 oszlop alatt, KÖZÉPEN =====
   Cél: a Név/E-mail sor alatt egy középre igazított (nem balra tapadó) mező. */
#phoneWrap{
  grid-column: 1 / -1;       /* teljes sor */
  justify-self: center;       /* a sor közepére */
  width: min(520px, 100%);    /* ne legyen túl széles */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
}
#phoneWrap .label{
  width: 100%;
  text-align: center !important;
}
#phoneWrap input[name="phone"]{
  width: 100%;
  max-width: 520px;
  text-align: center !important;
}
#phoneWrap input[name="phone"]::placeholder{ text-align:center !important; }
#phoneWrap input[name="phone"]::-webkit-input-placeholder{ text-align:center !important; }


/* Checkbox rows (GDPR + marketing) */
.checkbox-row{
  margin-top: 10px;
}
.checkbox{
  display:flex;
  gap:10px;
  align-items:flex-start;
  line-height:1.35;
  font-size:14px;
}
.checkbox input[type="checkbox"]{
  margin-top:3px;
}

.time-pill.is-disabled{opacity:.45;cursor:not-allowed;filter:grayscale(1);}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
@media(max-width:900px){.grid2{grid-template-columns:1fr;}}
.panel{padding:14px;border:1px solid rgba(0,0,0,.06);border-radius:16px;background:rgba(255,255,255,.65);}
.lab{display:block;margin:10px 0 6px;font-weight:600;}
.inp{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.10);background:#fff;}
.table{border:1px solid rgba(0,0,0,.06);border-radius:16px;overflow:hidden;}
.tr{display:grid;grid-template-columns:140px 1fr 140px;gap:12px;padding:12px 14px;align-items:center;}
.th{font-weight:700;background:rgba(0,0,0,.03);}
.right{text-align:right;}

.weekly{display:grid;gap:10px;margin:10px 0 14px;}
.weekly-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid rgba(0,0,0,.06);border-radius:14px;background:rgba(255,255,255,.55);} 
.chk{display:flex;align-items:center;gap:10px;font-weight:600;}
.times{display:flex;align-items:center;gap:8px;}
.inp.small{max-width:130px;}
.dash{opacity:.6;}

.ga-cal{margin-top:8px;border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:14px;background:rgba(255,255,255,.65)}
.ga-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ga-cal-title{font-weight:700}
.ga-cal-nav{width:38px;height:38px;border-radius:12px;border:1px solid rgba(0,0,0,.10);background:#fff;cursor:pointer}
.ga-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;font-size:12px;opacity:.75;margin-bottom:8px}
.ga-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.ga-cal-cell{height:40px;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:#fff;cursor:pointer;font-weight:700}
.ga-cal-cell.is-empty{border:none;background:transparent}
.ga-cal-cell.is-closed{background:rgba(220,0,0,.08);border-color:rgba(220,0,0,.18);opacity:.55;cursor:not-allowed}
.ga-cal-cell.is-open:hover{transform:translateY(-1px)}
.ga-cal-cell.is-selected{outline:2px solid rgba(180,140,60,.55)}
.ga-cal-hint{margin-top:8px}

/* === Gold Angel – Soft page loader === */
@media (prefers-reduced-motion: reduce){
  .ga-loader{ display:none!important; }
}
.ga-loader{
  position:fixed; inset:0; background:#f6f1e9; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .6s ease;
}
.ga-loader.hide{ opacity:0; pointer-events:none; }
.ga-loader .ring{
  width:64px; height:64px; border-radius:50%;
  border:3px solid rgba(197,163,93,.25);
  border-top-color:#c5a35d;
  animation: ga-spin 1.6s ease-in-out infinite;
}
@keyframes ga-spin{
  0%{ transform:rotate(0deg); opacity:.6; }
  50%{ opacity:1; }
  100%{ transform:rotate(360deg); opacity:.6; }
}

/* === GA ANIM PACK 5 START === */
/* 1) Fullscreen "curtain" intro on every page */
@media (prefers-reduced-motion: reduce){
  .ga-curtain{ display:none !important; }
  .ga-reveal, .ga-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}
.ga-curtain{
  position:fixed; inset:0; z-index:99999; pointer-events:none;
}
.ga-curtain .p1, .ga-curtain .p2{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(197,163,93,.22), transparent 60%),
    radial-gradient(700px 420px at 85% 80%, rgba(197,163,93,.16), transparent 62%),
    linear-gradient(180deg,#f7f2ea 0%, #fbf6ef 100%);
  transform: translateY(0);
  animation: ga-curtain-up 1.55s cubic-bezier(.77,0,.18,1) forwards;
}
.ga-curtain .p2{
  background:
    linear-gradient(90deg, rgba(197,163,93,0) 0%, rgba(197,163,93,.18) 35%, rgba(197,163,93,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 100%);
  mix-blend-mode: multiply;
  opacity:.95;
  animation: ga-curtain-up 1.55s cubic-bezier(.77,0,.18,1) forwards;
}
@keyframes ga-curtain-up{
  0%{ transform: translateY(0); filter: blur(0); opacity:1; }
  70%{ filter: blur(1px); }
  100%{ transform: translateY(-108%); filter: blur(12px); opacity:0; }
}
.ga-curtain .brand{
  position:absolute; inset:0; display:grid; place-items:center;
  text-align:center;
  opacity:0;
  animation: ga-brand-in .55s ease-out forwards, ga-brand-out .55s ease-in forwards;
  animation-delay: .12s, 1.00s;
}
.ga-curtain .line{
  width:160px; height:1px; margin:0 auto 12px;
  background: linear-gradient(90deg, transparent, rgba(197,163,93,.95), transparent);
  opacity:.85;
}
.ga-curtain .name{
  letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  font-size:14px; color: rgba(74,58,40,.78);
}
.ga-curtain .sub{
  margin-top:6px; font-size:12px; letter-spacing:.08em;
  color: rgba(74,58,40,.55);
}
@keyframes ga-brand-in{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
@keyframes ga-brand-out{ from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(-8px)} }

/* While intro runs: soften content */
body.ga-curtain-on main, body.ga-curtain-on .card, body.ga-curtain-on .container, body.ga-curtain-on .wrap{
  filter: blur(6px);
  transform: translateY(8px);
  opacity: .86;
  transition: filter .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s cubic-bezier(.2,.8,.2,1);
}
body.ga-curtain-done main, body.ga-curtain-done .card, body.ga-curtain-done .container, body.ga-curtain-done .wrap{
  filter: blur(0);
  transform: translateY(0);
  opacity: 1;
}

/* 2) Stagger fade-in for forms/cards */
.ga-stagger > *{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
.ga-stagger.is-in > *{ opacity:1; transform: translateY(0); }
.ga-stagger.is-in > *:nth-child(1){ transition-delay:.03s }
.ga-stagger.is-in > *:nth-child(2){ transition-delay:.09s }
.ga-stagger.is-in > *:nth-child(3){ transition-delay:.15s }
.ga-stagger.is-in > *:nth-child(4){ transition-delay:.21s }
.ga-stagger.is-in > *:nth-child(5){ transition-delay:.27s }
.ga-stagger.is-in > *:nth-child(6){ transition-delay:.33s }

/* 3) Button ripple */
.btn, button{ position:relative; overflow:hidden; }
.ga-ripple{
  position:absolute;
  left:var(--x); top:var(--y);
  width:240px; height:240px;
  transform: translate(-50%,-50%) scale(0);
  border-radius:999px;
  background: rgba(197,163,93,.25);
  animation: ga-ripple .6s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
@keyframes ga-ripple{
  to{ transform: translate(-50%,-50%) scale(1); opacity:0; }
}

/* 4) Micro hover lift + focus glow */
.card, .service-card, .time-pill, .stat-card{
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1);
}

.time-pill.is-selected{
  outline: 2px solid rgba(180,140,60,.55);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

.card:hover, .service-card:hover, .stat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}
input, select, textarea{
  transition: box-shadow .18s cubic-bezier(.2,.8,.2,1), border-color .18s cubic-bezier(.2,.8,.2,1);
}
input:focus, select:focus, textarea:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(197,163,93,.18);
  border-color: rgba(197,163,93,.55);
}

/* 5) Toast notifications */
.ga-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(197,163,93,.25);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  border-radius: 16px;
  padding: 12px 14px;
  max-width: min(560px, calc(100vw - 24px));
  z-index: 9999;
}
.ga-toast.is-in{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1);
}
.ga-toast .t-title{ font-weight: 700; }
.ga-toast .t-msg{ opacity: .9; font-size: 14px; margin-top: 2px; }
/* === GA ANIM PACK 5 END === */

/* === GA BOOKING ANIMS START === */
/* Modern interactions for calendar + time slots + service selection */

:root{
  --ga-gold: rgba(197,163,93,1);
  --ga-gold-soft: rgba(197,163,93,.18);
  --ga-ease: cubic-bezier(.2,.8,.2,1);
}

.ga-press{
  transform: translateY(0) scale(1);
  transition: transform .18s var(--ga-ease), box-shadow .18s var(--ga-ease);
}
.ga-press:hover{ transform: translateY(-1px) scale(1.01); }
.ga-press:active{ transform: translateY(0) scale(.99); }

.ga-pulse{
  position: relative;
}
.ga-pulse::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius: 16px;
  border: 1px solid rgba(197,163,93,.0);
  opacity: 0;
  transform: scale(.98);
  transition: opacity .22s var(--ga-ease), transform .22s var(--ga-ease), border-color .22s var(--ga-ease);
  pointer-events:none;
}
.ga-pulse.is-selected::after{
  opacity: 1;
  transform: scale(1);
  border-color: rgba(197,163,93,.35);
}

/* Calendar day tiles (works if your calendar uses buttons/links with .cal-day or data-date) */
.cal-day, .calendar-day, [data-date]{
  transition: transform .18s var(--ga-ease), box-shadow .18s var(--ga-ease), background-color .18s var(--ga-ease), color .18s var(--ga-ease), border-color .18s var(--ga-ease);
  will-change: transform;
}
.cal-day:hover, .calendar-day:hover, [data-date]:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.cal-day.is-disabled, .calendar-day.is-disabled, [data-date].is-disabled{
  opacity: .45;
  filter: grayscale(.15);
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Time slots: fade/slide in when loaded */
.ga-times{
  display:grid;
  gap:10px;
}
.ga-time{
  opacity: 0;
  transform: translateY(10px);
  animation: ga-in .45s var(--ga-ease) forwards;
}
.ga-time:nth-child(1){ animation-delay: .02s }
.ga-time:nth-child(2){ animation-delay: .05s }
.ga-time:nth-child(3){ animation-delay: .08s }
.ga-time:nth-child(4){ animation-delay: .11s }
.ga-time:nth-child(5){ animation-delay: .14s }
.ga-time:nth-child(6){ animation-delay: .17s }
.ga-time:nth-child(7){ animation-delay: .20s }
.ga-time:nth-child(8){ animation-delay: .23s }
.ga-time:nth-child(9){ animation-delay: .26s }
.ga-time:nth-child(10){ animation-delay: .29s }

@keyframes ga-in{
  to{ opacity:1; transform: translateY(0); }
}

/* Disabled/taken slot look */
.time-pill[disabled], .time-pill.is-taken, .ga-time.is-taken button{
  opacity: .45;
  filter: grayscale(.2);
  cursor: not-allowed;
}
.time-pill[disabled]:hover, .time-pill.is-taken:hover{
  transform:none !important;
  box-shadow:none !important;
}

/* Loading shimmer for time area */
.ga-shimmer{
  position: relative;
  overflow: hidden;
}
.ga-shimmer::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(197,163,93,.18), transparent);
  transform: translateX(-100%);
  animation: ga-shimmer 1.1s var(--ga-ease) infinite;
}
@keyframes ga-shimmer{
  to{ transform: translateX(100%); }
}

/* Subtle shake on error */
.ga-shake{
  animation: ga-shake .35s ease-in-out;
}
@keyframes ga-shake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  75%{ transform: translateX(6px); }
}
/* === GA BOOKING ANIMS END === */


/* === Landing sections === */
[id]{ scroll-margin-top: 86px; }

.landing{display:grid; gap:16px; margin-top:16px}
.landing .card{overflow:hidden}
.hero{display:grid; gap:10px}
.hero .kicker{letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:var(--muted)}
.hero .h1{margin:0}
.hero .p{margin:0}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}

.service-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.service-item{padding:14px; border:1px solid var(--line); border-radius:18px; background: rgba(255,255,255,.55)}
.service-item .s-title{font-weight:700}
.service-item .s-meta{color:var(--muted); font-size:13px; margin-top:4px}
.service-item .s-cta{margin-top:10px}

.nav-cta{border:1px solid rgba(0,0,0,.10); padding:8px 12px; border-radius:999px; background: rgba(255,255,255,.55)}
.nav-admin{opacity:.65}

@media (max-width: 600px){
  .service-grid{grid-template-columns: 1fr; }
  .nav{flex-wrap:wrap}
  .navlink{padding:10px 12px}
}


/* Date picker fallback */
#datePick{ padding:12px 12px; border-radius:14px; border:1px solid var(--line); background: rgba(255,255,255,.70); }


/* === Modern scroll animations === */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
[id]{ scroll-margin-top: 92px; }

/* Subtle background gradient for landing */
body{
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(181,138,61,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(0,0,0,.06), transparent 55%),
    var(--bg);
}



/* Slightly nicer section spacing */
.landing{ margin-top:18px; }
.landing .card{ box-shadow: 0 18px 60px rgba(0,0,0,.08); }

/* Mobile polish */
@media (max-width: 600px){
  .hero .h1{ font-size:28px; }
}

/* Active nav state */
.navlink.active{ text-decoration:none; box-shadow: inset 0 -2px 0 rgba(181,138,61,.65); }


/* ensure nav items are not in a row / wrap */
  .navlink{padding:12px 12px; border-radius:14px;}
}


/* Desktop nav visibility */
@media (min-width: 601px){
  .nav-toggle{ display:none !important; }
  .nav{ display:flex !important; position:static; flex-direction:row; }
}


/* === Mobile hamburger nav (phone) === */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  font-size:18px;
  line-height:1;
  align-items:center;
  justify-content:center;
}

@media (max-width: 600px){
  .topbar .wrap{position:relative; padding:12px 0; align-items:center; gap:10px;}
  .brand-logo{height:34px;}
  .brand-sub{display:none;}

  .nav-toggle{display:inline-flex !important;}

  .nav{
    display:none !important;
    position:absolute;
    top:62px;
    left:0;
    right:0;
    flex-direction:column;
    gap:6px;
    padding:10px;
    border-radius:18px;
    border:1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0,0,0,.10);
    z-index: 80;
  }
  .nav.open{display:flex !important;}
  .navlink{padding:12px 12px; border-radius:14px;}
}

/* Desktop / tablet nav */
@media (min-width: 601px){
  .nav-toggle{ display:none !important; }
  .nav{ display:flex !important; position:static; flex-direction:row; }
}


/* === Modern About section === */
.about-modern{overflow:hidden}
.about-kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.about-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  align-items:center;
}
.about-text .h2{margin-top:6px}
.about-cards{
  display:grid;
  gap:12px;
}
.about-card{
  padding:16px 18px;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}
.about-card strong{
  display:block;
  font-weight:700;
  margin-bottom:4px;
}
.about-card span{
  font-size:14px;
  color:var(--muted);
}

@media (max-width: 860px){
  .about-grid{
    grid-template-columns: 1fr;
  }
}


/* === Larger premium About section === */
.about-large{
  padding-top:48px;
  padding-bottom:48px;
}
.about-header{
  max-width:760px;
  margin-bottom:32px;
}
.about-lead{
  font-size:18px;
  line-height:1.6;
  color:var(--text);
  margin-top:12px;
}

.about-large .about-grid{
  grid-template-columns: 1.4fr .9fr;
}

.about-card.highlight{
  background: linear-gradient(135deg, rgba(181,138,61,.18), rgba(255,255,255,.85));
  border-color: rgba(181,138,61,.45);
}

@media (max-width: 860px){
  .about-large{
    padding-top:32px;
    padding-bottom:32px;
  }
  .about-lead{
    font-size:16px;
  }
}


/* === References gallery === */
.references .ref-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.ref-item{
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
}
.ref-item{aspect-ratio:4/3; background:rgba(255,255,255,.6);}
.ref-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .5s ease;
}
.ref-item:hover img{
  transform: scale(1.05);
}

/* === Contact section === */
.contact-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.contact-item{
  padding:16px;
  border-radius:18px;
  background: rgba(255,255,255,.7);
  border:1px solid rgba(0,0,0,.08);
}
.contact-item strong{
  display:block;
  margin-bottom:6px;
}

@media (max-width: 860px){
  .references .ref-grid,
  .contact-grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px){
  .references .ref-grid,
  .contact-grid{
    grid-template-columns: 1fr;
  }
}


/* === Stats counters === */
.stats{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
}
.stat{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
}
.stat-num{
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
}
.stat-label{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

/* === GA Slider Lightbox === */
.ga-lb{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.86);z-index:99999;padding:16px;padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
.ga-lb.is-open{display:flex}
.ga-lb-stage{position:relative;max-width:min(96vw,980px);max-height:82vh;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.ga-lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.ga-lb-close{position:absolute;top:10px;right:12px;font-size:34px;line-height:1;background:transparent;border:0;color:#fff;padding:6px 10px}
.ga-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;font-size:38px;line-height:1;padding:10px 14px;border-radius:14px}
.ga-lb-prev{left:10px}
.ga-lb-next{right:10px}
.ga-lb-count{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;background:rgba(0,0,0,.35);padding:6px 10px;border-radius:999px}
body.ga-noscroll{overflow:hidden}


/* === Map === */
.map-wrap{
  margin-top:18px;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
}
.gmap{
  width:100%;
  height:340px;
  border:0;
  display:block;
}
@media (max-width: 600px){
  .gmap{ height:300px; }
  .lightbox-img{ height:60vh; max-height:60vh; }
}


/* === Social links (modern) === */
.socials{
  margin-top:22px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.social-btn{
  padding:12px 18px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.social-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.12);
}
.social-btn.fb{ color:#1877f2; }
.social-btn.ig{
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:#fff;
  border:none;
}
.social-btn.tt{ color:#000; }


/* === Social buttons refinements === */
.social-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* Facebook */
.social-btn.fb{
  background:#1877f2;
  color:#fff;
  border:none;
}

/* TikTok official vibe */
.social-btn.tt{
  background:#000;
  color:#fff;
  border:none;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

/* Icons */
.social-btn .icon{
  width:18px;
  height:18px;
  display:inline-block;
  background-size:contain;
  background-repeat:no-repeat;
}

/* SVG icons via data-uri */
.icon.fb{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M22.675 0h-21.35C.597 0 0 .597 0 1.326v21.348C0 23.403.597 24 1.326 24H12.82v-9.294H9.692V11.01h3.128V8.309c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24h-1.918c-1.504 0-1.796.715-1.796 1.763v2.313h3.587l-.467 3.696h-3.12V24h6.116C23.403 24 24 23.403 24 22.674V1.326C24 .597 23.403 0 22.675 0z'/%3E%3C/svg%3E");
}

.icon.ig{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' ry='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E");
}

.icon.tt{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21 8.5c-2.2 0-4.2-.8-5.8-2.1v9.3c0 4.2-3.4 7.6-7.6 7.6S0 19.9 0 15.7s3.4-7.6 7.6-7.6c.3 0 .7 0 1 .1v4.2c-.3-.1-.6-.1-1-.1-2 0-3.6 1.6-3.6 3.6S5.6 19.5 7.6 19.5s3.6-1.6 3.6-3.6V0h4.1c.4 2.5 2.6 4.4 5.2 4.4v4.1H21z'/%3E%3C/svg%3E");
}


/* === Follow badge === */
.socials-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-top:8px;
}
.follow-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  letter-spacing:.02em;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  position:relative;
  overflow:hidden;
}
.follow-badge::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg, rgba(24,119,242,.35), rgba(225,48,108,.35), rgba(0,0,0,.35));
  filter: blur(10px);
  opacity:.55;
  animation: badgeGlow 3.2s ease-in-out infinite;
}
.follow-badge > *{ position:relative; }
.follow-badge .dot{
  width:10px; height:10px;
  border-radius:999px;
  background: #3ad17a;
  box-shadow: 0 0 0 0 rgba(58,209,122,.55);
  animation: pulseDot 1.8s ease-out infinite;
}

@keyframes pulseDot{
  0%{ box-shadow: 0 0 0 0 rgba(58,209,122,.55); transform: scale(1); }
  70%{ box-shadow: 0 0 0 10px rgba(58,209,122,0); transform: scale(1.05); }
  100%{ box-shadow: 0 0 0 0 rgba(58,209,122,0); transform: scale(1); }
}
@keyframes badgeGlow{
  0%,100%{ opacity:.35; transform: translateX(-6px); }
  50%{ opacity:.65; transform: translateX(6px); }
}

/* Icon micro-animation */
.social-btn .icon{
  transition: transform .25s ease;
}
.social-btn:hover .icon{
  transform: translateY(-1px) scale(1.06);
}

@media (prefers-reduced-motion: reduce){
  .follow-badge::before, .follow-badge .dot{ animation: none !important; }
  .social-btn:hover .icon{ transform:none; }
}


/* Contact CTA + simple social links (no "buborék" gombok) */
.contact-cta{ margin: 10px 0 18px; }
.booking-cta-link{
  display:inline-block;
  font-weight:700;
  text-decoration:none;
  border-bottom:1px dashed rgba(0,0,0,.35);
}
.booking-cta-link:hover{ border-bottom-style: solid; }

.contact-socials-footer{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}
.social-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:600;
  padding:6px 0;
}
.social-link .label{ line-height:1; }

/* CTA link fix (anchor) */
.follow-badge{ text-decoration:none; color:inherit; cursor:pointer; }
.follow-badge:visited{ color:inherit; }



/* Red cancel button */
.btn-danger{background:#e53935 !important; color:#fff !important; border-color:#e53935 !important;}
.btn-danger:hover{filter:brightness(0.95);}



/* Manage page: Mobile - show 'Adatok' card at the very top */
@media (max-width: 720px){
  .grid.grid-2{display:flex !important; flex-direction:column !important; gap:12px !important;}
  .grid.grid-2 > aside.card{order:-1 !important;}
}


/* Animated CTA badge near experience stat */
.ga-exp-stat{ position:relative; }
.ga-cta-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  font-size:12px;
  line-height:1;
  letter-spacing:.2px;
  background: rgba(201,162,77,.18);
  border:1px solid rgba(201,162,77,.45);
  color: inherit;
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  animation: gaBadgePulse 2.8s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
  width: fit-content;
}
.ga-cta-badge::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(201,162,77,.38) 35%, rgba(201,162,77,.10) 55%, transparent 80%);
  transform: translateX(-120%);
  animation: gaBadgeShine 3.6s ease-in-out infinite;
}
.ga-cta-badge:hover{ background: rgba(201,162,77,.26); }
.ga-cta-badge:focus{ outline:2px solid rgba(201,162,77,.55); outline-offset:2px; }

@keyframes gaBadgePulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(201,162,77,0); transform: translateY(0); }
  50%{ box-shadow: 0 14px 30px -20px rgba(201,162,77,.65); transform: translateY(-1px); }
}
@keyframes gaBadgeShine{
  0%{ transform: translateX(-120%); opacity:0; }
  10%{ opacity:1; }
  45%{ transform: translateX(120%); opacity:0; }
  100%{ transform: translateX(120%); opacity:0; }
}

@media (max-width: 720px){
  .ga-cta-badge{ margin-top:8px; }
}


/* Soft luxury pill CTA */
.ga-cta-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  letter-spacing:.4px;
  text-decoration:none;
  color:#1f1f1f;
  background: linear-gradient(180deg, rgba(217,182,104,.95), rgba(201,162,77,.95));
  box-shadow: 0 10px 24px rgba(201,162,77,.35);
  border:none;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ga-cta-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(201,162,77,.45);
  filter: brightness(1.02);
}
.ga-cta-pill:active{
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(201,162,77,.30);
}
@media (max-width: 720px){
  .ga-cta-pill{
    width:100%;
    padding:16px 24px;
    font-size:15px;
  }
}


/* Outline + fill on hover */
.ga-cta-outline{
  background: transparent;
  color:#c9a24d;
  border:1.5px solid #c9a24d;
  box-shadow:none;
}
.ga-cta-outline:hover{
  background: linear-gradient(180deg, rgba(217,182,104,.95), rgba(201,162,77,.95));
  color:#1f1f1f;
  box-shadow: 0 16px 30px rgba(201,162,77,.45);
}

/* Floating booking button (mobile) */
.ga-floating-booking{
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  padding:14px 26px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(217,182,104,.95), rgba(201,162,77,.95));
  color:#1f1f1f;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  box-shadow: 0 16px 34px rgba(201,162,77,.45);
  z-index:9999;
  display:none;
}
@media (max-width: 720px){
  .ga-floating-booking{ display:inline-flex; }
}


/* Floating booking button visibility after scroll */
.ga-floating-booking{ display:none; }
.ga-floating-booking.show{ display:inline-flex; }

/* Hide floating booking button while the booking section is in view */
.ga-floating-booking.hide-on-booking{ display:none !important; }


/* === FIXED Floating booking button (mobile only, scroll-based) === */
.ga-floating-booking{
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(217,182,104,.95), rgba(201,162,77,.95));
  color:#1f1f1f;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  box-shadow: 0 16px 34px rgba(201,162,77,.45);
  z-index: 9999;
  display: none; /* default hidden */
}
@media (max-width: 720px){
  .ga-floating-booking.show{ display: inline-flex; }
}


/* CTA delayed reveal (home) */
65%  {opacity:1; transform: translate3d(0, -1px, 0);}
  100% {opacity:1; transform: translate3d(0, 0, 0);}
}
  60%  {opacity:1; transform: translateY(-2px) scale(1.01); filter: blur(0);}
  100% {opacity:1; transform: translateY(0) scale(1); filter: blur(0);}
}

/* Make anchor jumps land correctly with fixed/sticky header (mobile) */
#booking{scroll-margin-top:96px;}
@media (min-width:721px){#booking{scroll-margin-top:64px;}}


/* Floating booking button - mobile FIX */

.floating-booking-btn {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 9999;
  padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c9a24d, #f3d98b);
  color: #3b2a10;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .4s ease, opacity .3s ease;
  opacity: 0;
}
.floating-booking-btn.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.floating-booking-btn.hide-on-booking{
  transform: translateX(-50%) translateY(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (min-width: 769px) {
  .floating-booking-btn { display: none; }
}




/* Premium animated primary CTA button (homepage) */
.btn-primary,
a.btn-primary,
button.btn-primary {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 14px 26px;
  border: 1px solid rgba(201,162,77,.7);
  background: rgba(201,162,77,.12);
  color: #c9a24d;
  font-weight: 700;
  letter-spacing: .4px;
  transition: transform .18s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  -webkit-tap-highlight-color: transparent;
}

/* subtle glow ring */
.btn-primary::before,
a.btn-primary::before,
button.btn-primary::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(243,217,139,.45), rgba(201,162,77,0) 55%);
  opacity: .9;
  pointer-events: none;
}

/* shimmer sweep */
.btn-primary::after,
a.btn-primary::after,
button.btn-primary::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 60%;
  height: 180%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(243,217,139,.55), transparent);
  opacity: .0;
  pointer-events: none;
}

/* idle animation: gentle pulse (not too much) */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 0 0 rgba(201,162,77,.0); transform: translateY(0); }
  50% { box-shadow: 0 14px 34px rgba(0,0,0,.22), 0 0 0 6px rgba(201,162,77,.10); transform: translateY(-1px); }
}

.btn-primary.cta-animated,
a.btn-primary.cta-animated,
button.btn-primary.cta-animated {
  animation: ctaPulse 2.8s ease-in-out infinite;
}

@keyframes shimmerMove {
  0% { left: -60%; opacity: 0; }
  15% { opacity: .9; }
  45% { opacity: .0; }
  100% { left: 140%; opacity: 0; }
}

.btn-primary.cta-animated::after,
a.btn-primary.cta-animated::after,
button.btn-primary.cta-animated::after {
  animation: shimmerMove 3.8s ease-in-out infinite;
}

/* hover/focus: outline -> fill feel */
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.btn-primary:focus-visible,
a.btn-primary:focus-visible,
button.btn-primary:focus-visible {
  background: linear-gradient(135deg, rgba(201,162,77,.9), rgba(243,217,139,.95));
  color: #3b2a10;
  border-color: rgba(201,162,77,.95);
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  outline: none;
}

/* active (tap) */
.btn-primary:active,
a.btn-primary:active,
button.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-primary.cta-animated,
  a.btn-primary.cta-animated,
  button.btn-primary.cta-animated,
  .btn-primary.cta-animated::after,
  a.btn-primary.cta-animated::after,
  button.btn-primary.cta-animated::after {
    animation: none !important;
  }
}



/* === Global button color unification (Gold Angel) === */
:root{
  --ga-gold: #c9a24d;
  --ga-gold-2: #f3d98b;
  --ga-dark: #3b2a10;
}

button,
input[type="submit"],
input[type="button"],
a.button,
a.btn,
.btn,
.btn-primary,
button.btn-primary,
a.btn-primary {
  border-radius: 999px;
}

a.button, a.btn, .btn, button.btn, input[type="submit"], input[type="button"],
.btn-primary, a.btn-primary, button.btn-primary {
  background: linear-gradient(135deg, var(--ga-gold), var(--ga-gold-2));
  color: var(--ga-dark);
  border: 1px solid rgba(201,162,77,.95);
  font-weight: 700;
  text-decoration: none;
}

a.button:hover, a.btn:hover, .btn:hover, button.btn:hover, input[type="submit"]:hover, input[type="button"]:hover,
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover {
  filter: brightness(1.03);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

a.button:focus-visible, a.btn:focus-visible, .btn:focus-visible, button.btn:focus-visible,
.btn-primary:focus-visible, a.btn-primary:focus-visible, button.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(201,162,77,.25), 0 14px 34px rgba(0,0,0,.22);
}

/* keep floating button gold as well */
.floating-booking-btn {
  background: linear-gradient(135deg, var(--ga-gold), var(--ga-gold-2)) !important;
  color: var(--ga-dark) !important;
}



/* CTA animation gating (only after it becomes visible) */
.cta-delay:not(.show).cta-animated,
.cta-delay:not(.show).cta-animated::after{
  animation: none !important;
}



/* Gold outline ghost buttons (site-wide) */
.btn-ghost,
a.btn-ghost{
  background: transparent;
  color: var(--ga-gold, #c9a24d);
  border: 1px solid rgba(201,162,77,.85);
  font-weight: 700;
}
.btn-ghost:hover,
a.btn-ghost:hover,
.btn-ghost:focus-visible,
a.btn-ghost:focus-visible{
  background: linear-gradient(135deg, var(--ga-gold, #c9a24d), var(--ga-gold-2, #f3d98b));
  color: var(--ga-dark, #3b2a10);
  border-color: rgba(201,162,77,.95);
  outline: none;
}



/* Hero CTA enforce hidden until show */
.hero-actions .cta-delay{opacity:0;visibility:hidden;pointer-events:none;}
.hero-actions .cta-delay.show{opacity:1;visibility:visible;pointer-events:auto;}



/* === Hero CTA reveal (crisp + smooth) === */
.hero-actions .cta-delay{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform: translate3d(0, 16px, 0);
  visibility:hidden;
  pointer-events:none;
  will-change: transform, opacity;
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.85,.2,1);
}
.hero-actions .cta-delay.show{
  opacity:1;
  transform: translate3d(0,0,0);
  visibility:visible;
  pointer-events:auto;
}



/* Mobile-only hide hero CTA until about */
@media (max-width: 820px){
  #heroCta.cta-delay{ opacity:0; transform:translate3d(0,16px,0); visibility:hidden; pointer-events:none; }
  #heroCta.cta-delay.show{ opacity:1; transform:translate3d(0,0,0); visibility:visible; pointer-events:auto; }
}



/* STRICT MOBILE CTA VISIBILITY */
@media (max-width: 820px){
  #heroCta.cta-delay{
    opacity:0;
    transform: translate3d(0,18px,0);
    visibility:hidden;
    pointer-events:none;
  }
  #heroCta.cta-delay.show{
    opacity:1;
    transform: translate3d(0,0,0);
    visibility:visible;
    pointer-events:auto;
  }
}

/* Admin mobile cards */
@media (max-width: 760px){
  .adminbar{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    padding-bottom:6px;
  }
  .adminbar::-webkit-scrollbar{height:6px}
  .adminbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12); border-radius:999px}

  .chip{padding:12px 14px; font-size:14px}
  .logout{margin-left:8px}
  .logout .btn{padding:10px 12px}
}

@media (max-width: 760px){
  table.table thead{display:none}
  table.table, table.table tbody, table.table tr, table.table td{display:block; width:100%}
  table.table tr{
    background: rgba(255,255,255,.72);
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px;
    margin:10px 0;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
  }
  table.table td{
    border:none;
    padding:8px 6px;
    display:flex;
    justify-content:space-between;
    gap:12px;
  }
  table.table td::before{
    content: attr(data-label);
    font-weight:800;
    color: var(--muted);
    flex:0 0 auto;
  }
  table.table td[data-label="Műveletek"]{
    padding-top:10px;
  }
  table.table td[data-label="Műveletek"] > div{
    justify-content:flex-end;
    width:100%;
  }
  table.table td[data-label="Műveletek"] .btn{
    padding:10px 12px;
  }
}


/* Admin – Weekly calendar (pretty) */
.week-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(220px, 1fr));
  gap:12px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.week-grid::-webkit-scrollbar{ height:10px; }
.week-grid::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius:999px; }
.day-col{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:12px;
  min-height: 180px;
  scroll-snap-align:start;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}
.day-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(0,0,0,.10);
  margin-bottom:10px;
}
.day-name{ font-weight:700; }
.day-date{ color:#6a625b; font-size:13px; }
.day-empty{
  color:#6a625b;
  font-size:13px;
  padding:10px 6px;
}
.day-list{ display:flex; flex-direction:column; gap:10px; }
.appt-card{
  display:block;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:10px 10px;
  background: rgba(255,255,255,.85);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.appt-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
}
.appt-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.appt-time{ font-weight:800; letter-spacing:.2px; }
.appt-name{ font-weight:700; margin-bottom:2px; color:#1f1a17; }
.appt-service{ font-size:13px; color:#6a625b; }

/* Badges */
.badge{
  font-size:12px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  white-space:nowrap;
}
.badge-approved{ background: rgba(20, 160, 90, .10); border-color: rgba(20, 160, 90, .22); }
.badge-pending{ background: rgba(230, 170, 40, .12); border-color: rgba(230, 170, 40, .26); }
.badge-rejected{ background: rgba(220, 70, 70, .10); border-color: rgba(220, 70, 70, .22); }
.badge-cancelled{ background: rgba(120, 120, 120, .10); border-color: rgba(120, 120, 120, .22); }

@media (max-width: 1100px){
  .week-grid{ grid-template-columns: repeat(7, minmax(200px, 1fr)); }
}
@media (max-width: 760px){
  .week-grid{ grid-template-columns: repeat(7, minmax(180px, 1fr)); }
  .day-col{ border-radius:14px; padding:10px; }
}

/* Mobile polish – Admin */
@media (max-width: 720px){
  /* keep admin nav usable without wrapping into 3 lines */
  .adminbar{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251,246,239,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 0;
    margin: 0 0 12px 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
  }
  .adminbar::-webkit-scrollbar{ height: 8px; }
  .adminbar::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.14); border-radius: 999px; }

  .chip{ flex: 0 0 auto; padding: 10px 12px; font-size: 14px; }
  .chip-badge{ top:-4px; right:-4px; }

  .logout{ margin-left: 0; flex: 0 0 auto; }
  .logout .btn{ padding: 10px 12px; }

  /* tighter, cleaner spacing */
  .container{ padding-left: 14px; padding-right: 14px; }
  .card-pad{ padding: 14px; border-radius: 16px; }
  .h1{ font-size: 22px; text-align: center; }
  .p{ text-align: center; }
  .actions, .row-actions{ flex-wrap: wrap; gap: 8px; justify-content: center; }

  /* forms: single column and full-width controls */
  .form-grid, .grid-2, .grid-3{ grid-template-columns: 1fr !important; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  input[type="date"], input[type="time"], select, textarea{
    width: 100%;
  }
  .btn{ width: 100%; }
  .btn.btn-ghost{ width: auto; }
  table.table td[data-label="Műveletek"]{ justify-content: center; }
}

/* --- Pagespeed image optimizations --- */
.ref-picture{display:block;}
.ref-picture img{display:block; width:100%; height:100%;}
.brand-logo-picture{display:inline-block; line-height:0;}
.brand-logo-picture img{display:block;}


/* Reveal (progressive enhancement) */
.reveal{opacity:1;transform:none;}
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;will-change:opacity,transform;}
.js .reveal.is-in{opacity:1;transform:none;}

/* Calendar overrides for closed days */
.ga-cal .ga-cal-cell.is-closed{ cursor:not-allowed; }

/* Times: past times disabled */
.time-pill.is-past-time{
  background: rgba(220, 53, 69, 0.10);
  border-color: rgba(220, 53, 69, 0.35);
  color: #b02a37;
  cursor: not-allowed;
  opacity: .75;
}


/* v17: Pretty time pills (consistent) */

#timePicker .time-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
#timePicker .time-pill{
  appearance:none;
  border:1px solid rgba(201,162,77,.55);
  background: rgba(255,255,255,.85);
  color: var(--text);
  padding:10px 14px;
  border-radius:999px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
#timePicker .time-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(201,162,77,.85);
}
#timePicker .time-pill.is-selected{
  background: rgba(201,162,77,1);
  color:#fff;
  border-color: rgba(201,162,77,1);
}
#timePicker .time-pill.is-disabled{
  opacity:.45;
  cursor:not-allowed;
  border-color: rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
}