/* Nyilvános foglalóoldal */
.page { width: min(760px, 100%); margin: 0 auto; padding: 1.25rem 1rem 3rem; display: grid; gap: 1.25rem; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---- Profil ---- */
.profile { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cover { aspect-ratio: 740 / 240; background-color: var(--ink); background-size: cover; background-position: center; }
.cover.empty {
  background-image: radial-gradient(circle, var(--gold) 1.6px, transparent 2px), radial-gradient(circle, #5fb39f 1.2px, transparent 1.6px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px; opacity: 1;
}
.profile-body { position: relative; padding: 0 1.5rem 1.4rem; }
.avatar-wrap { position: relative; width: 132px; height: 132px; margin-top: -66px; margin-bottom: .5rem; }
.avatar-wrap .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.avatar { position: absolute; inset: 0; border-radius: 50%; background: var(--card) center/cover; border: 4px solid var(--card); box-shadow: 0 2px 10px rgba(30, 42, 51, .18); }
.profile-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.profile h1 { margin: 0; font-size: 2rem; }
.socials { display: flex; gap: .4rem; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--jade-wash); color: var(--jade-deep); }
.socials a:hover { background: var(--jade); color: #fff; }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.intro { margin-top: .8rem; max-width: 68ch; white-space: pre-line; }
.address { display: flex; gap: .4rem; align-items: center; color: var(--muted); font-size: .92rem; margin-top: .4rem; }
.address svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* ---- Foglaló kártya ---- */
.booking { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.5rem 1.6rem; min-height: 200px; }
.booking-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.booking-head h2 { margin: 0; }
.back { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: .3rem 0; color: var(--jade); font: 600 .95rem var(--font-body); cursor: pointer; margin-bottom: .6rem; }
.back:hover { text-decoration: underline; }
.tabs { display: flex; gap: 1.6rem; border-bottom: 1px solid var(--line); margin-bottom: 1.1rem; }
.tabs button { background: none; border: 0; padding: .7rem 0; font: 600 1rem var(--font-body); color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected=true] { color: var(--jade-deep); border-bottom-color: var(--jade); }
.search { margin-bottom: 1rem; }

.list { display: grid; gap: .8rem; }
.item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: .9rem; align-items: center; width: 100%; text-align: left;
  padding: .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: inherit; font: inherit; cursor: pointer;
}
.item:hover { border-color: var(--jade); }
.item .thumb { width: 64px; height: 64px; border-radius: 10px; background: var(--jade-wash) center/cover; display: grid; place-items: center; color: var(--jade); }
.item .thumb svg { width: 30px; height: 30px; }
.item h3 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin: 0 0 .15rem; }
.item .meta { color: var(--muted); font-size: .9rem; }
.item .chev { color: var(--muted); font-size: 1.3rem; }
.item .next { margin-top: .35rem; font-size: .88rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }

/* ---- Workshop részletek ---- */
.svc-cover { aspect-ratio: 740 / 240; border-radius: var(--radius-s); background: var(--ink) center/cover; margin-bottom: 1rem; }
.svc-title { font-size: 1.6rem; margin-bottom: .2rem; }
.svc-meta { color: var(--muted); margin-bottom: 1rem; display: flex; gap: .4rem 1rem; flex-wrap: wrap; }
.desc { max-width: 68ch; margin-bottom: 1.4rem; }
.desc ul, .desc ol { padding-left: 1.3rem; }
.step-title { font-family: var(--font-display); font-size: 1.2rem; margin: 1.4rem 0 .7rem; }

/* Naptár */
.cal { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; max-width: 420px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.cal-head strong { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-grid .dow { font-size: .78rem; color: var(--muted); padding: .2rem 0; }
.cal-grid button {
  aspect-ratio: 1; border: 0; border-radius: 50%; background: none; font: 500 .95rem var(--font-body); color: var(--muted); opacity: .45; cursor: default; position: relative;
}
.cal-grid button.avail { opacity: 1; color: var(--text); cursor: pointer; background: var(--jade-wash); }
.cal-grid button.avail::after { content: ''; position: absolute; bottom: 14%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--gold); }
.cal-grid button.avail:hover { background: color-mix(in srgb, var(--jade) 25%, var(--card)); }
.cal-grid button.sel { background: var(--jade); color: #fff; }
.cal-grid button.sel::after { background: #fff; }
.slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot { min-width: 84px; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font: 600 .95rem var(--font-body); cursor: pointer; }
.slot:hover { border-color: var(--jade); }
.slot[aria-pressed=true] { background: var(--jade); border-color: var(--jade); color: #fff; }

/* Csoportos alkalmak */
.occ { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.occ.sel { border-color: var(--jade); box-shadow: 0 0 0 2px color-mix(in srgb, var(--jade) 30%, transparent); }
.occ .when { font-weight: 700; }
.occ .free { font-size: .88rem; color: var(--muted); display: flex; gap: .5rem; align-items: center; margin-top: .2rem; }

/* Foglalási űrlap */
.form { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px dashed var(--line); }
.summary { display: flex; gap: .4rem 1.2rem; flex-wrap: wrap; padding: .8rem 1rem; border-radius: var(--radius-s); background: var(--jade-wash); margin-bottom: 1.1rem; font-size: .95rem; }
.summary b { font-weight: 700; }

/* Visszaigazolás */
.done { text-align: center; padding: 1rem 0 .5rem; }
.done .ring-big { width: 120px; height: 120px; margin: 0 auto 1rem; }
.done-mark { position: relative; width: 120px; height: 120px; margin: 0 auto 1rem; }
.done-mark .ring-big { position: absolute; inset: 0; margin: 0; }
.done-mark .avatar { inset: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 1.2rem auto; text-align: left; max-width: 460px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }

.foot { text-align: center; font-size: .85rem; color: var(--muted); }
.foot a { color: var(--muted); }

@media (max-width: 560px) {
  .page { padding: 0 0 2rem; gap: .8rem; }
  .profile, .booking { border-radius: 0; }
  .booking { padding: 1.1rem 1rem 1.4rem; }
  .profile-body { padding: 0 1rem 1.1rem; }
  .avatar-wrap { width: 112px; height: 112px; margin-top: -56px; }
  .profile h1 { font-size: 1.6rem; }
  .item { grid-template-columns: 52px 1fr auto; }
  .item .thumb { width: 52px; height: 52px; }
  .occ { grid-template-columns: 1fr; }
}