/*
====================================================
NÉV: Rock'n'Doll Studio – foglalási oldal megjelenés
PROJEKT: Weblabs / RockNDoll
TÍPUS: CSS stíluslap
VERZIÓ: v1.0.0
UTOLSÓ FRISSÍTÉS: 2026-09-24

LEÍRÁS: A vendég foglalási felület (booking.html) stílusa a styles.css
tokenjeire építve. Az admin továbbra is a booking.css-t használja.

FEJLESZTŐ:
Balázs Bakos
NextSheet Innovations
https://www.nextsheet.hu

CHANGELOG:

v1.0.0 - 2026-09-24
- Első verzió: élő belépőjegy, jukebox szolgáltatáskártyák

====================================================
*/
.booking-page .site-header{position:relative}
.stepper{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:10px}
.stepper li{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:700;font-size:14px}
.stepper li:not(:last-child)::after{content:"";width:30px;height:3px;border-radius:2px;background:var(--ink);opacity:.25}
.stepper li span{width:34px;height:34px;border-radius:50%;border:var(--line);display:grid;place-items:center;background:var(--paper);color:var(--ink);font-size:14px}
.stepper li.active{color:var(--ink)}
.stepper li.active span{background:var(--accent);color:var(--accent-ink)}
.stepper li.done span{background:var(--ink);color:var(--paper);font-size:0}
.stepper li.done span::before{content:"✓";font-size:15px}
.stepper li.done::after{opacity:1}

.booking-shell{display:grid;grid-template-columns:minmax(340px,500px) minmax(0,1fr);min-height:calc(100vh - 88px)}
.ticket-side{background:var(--ink);color:var(--paper);padding:clamp(32px,4vw,52px) clamp(24px,3.5vw,48px);display:flex;flex-direction:column;gap:30px}
.ticket-side .script{color:var(--second)}
.ticket-side h1{font-size:clamp(34px,3.4vw,46px);margin-top:6px}
.live-ticket{background:var(--paper);color:var(--ink);border-radius:var(--radius);overflow:hidden;transform:rotate(-1.5deg);box-shadow:calc(var(--shadow) + 4px) calc(var(--shadow) + 4px) 0 var(--accent)}
.lt-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px;background:var(--accent);color:var(--accent-ink);border-bottom:var(--line)}
.lt-head span{font-weight:700;font-size:12px;letter-spacing:.26em}
.lt-head b{font-family:var(--font-display);font-weight:400;font-size:19px}
.lt-body{margin:0;padding:18px 24px;display:flex;flex-direction:column;gap:14px}
.lt-body div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:2px dotted rgba(var(--ink-rgb),.5)}
.lt-body div:last-child{border-bottom:0;padding-bottom:0}
.lt-body dt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.lt-body dd{margin:0;font-weight:700;font-size:16px;text-align:right}
.lt-body .lt-big{font-family:var(--font-display);font-weight:400;font-size:20px}
.lt-body .lt-time{font-family:var(--font-display);font-weight:400;font-size:28px;color:var(--accent);-webkit-text-stroke:.6px var(--ink)}
.lt-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;border-top:4px dashed var(--ink)}
.lt-foot .script{font-size:24px;color:var(--second-text)}
.lt-foot small{font-size:11px;font-weight:700;letter-spacing:.12em;text-align:right}
.approval-note{margin-top:auto;display:flex;gap:12px;align-items:flex-start;border:2px solid rgba(255,255,255,.35);border-radius:var(--radius);padding:16px 18px}
.approval-note svg{flex-shrink:0;width:24px;height:24px;fill:none;stroke:var(--second);stroke-width:2;stroke-linecap:round}
.approval-note p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82)}
.approval-note b{color:var(--paper)}

.booking-panel{padding:clamp(28px,4vw,52px) clamp(18px,4.5vw,64px) 60px;max-width:980px;width:100%}
.booking-alert{background:#ffe1e6;border:var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:22px;font-weight:700;color:#8a0f2e}
.booking-alert[hidden]{display:none}
.booking-step{display:none}
.booking-step.active{display:block;animation:rd-step .35s ease}
@keyframes rd-step{from{opacity:0;transform:translateY(10px)}}
.panel-heading{margin-bottom:26px}
.panel-heading h2{font-size:clamp(38px,4.2vw,56px);margin:4px 0 8px}
.panel-heading p:last-child{margin:0;font-size:17px;color:var(--muted)}
.back-button{border:0;background:transparent;padding:8px 0;min-height:44px;font-weight:700;font-size:15px;cursor:pointer;margin-bottom:6px}
.back-button:hover{color:var(--accent)}

.service-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.service-option{display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left;padding:24px;min-height:170px;background:var(--card);border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow) var(--shadow) 0 var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.service-option:hover{transform:translate(-3px,-3px);box-shadow:calc(var(--shadow) + 4px) calc(var(--shadow) + 4px) 0 var(--ink)}
.service-option.selected{background:var(--accent);color:var(--accent-ink)}
.service-top{display:flex;justify-content:space-between;align-items:center;width:100%}
.service-icon{background:var(--ink);color:var(--paper);font-weight:700;font-size:14px;padding:5px 11px;border-radius:8px;letter-spacing:.1em}
.service-top small{font-weight:700;font-size:15px}
.service-option strong{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1.05}
.loading,.empty-state{grid-column:1/-1;border:3px dashed rgba(var(--ink-rgb),.35);border-radius:var(--radius);padding:32px;text-align:center;color:var(--muted);font-weight:700}

.date-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:12px;margin-bottom:22px}
.date-button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;background:var(--card);border:var(--line);border-radius:var(--radius);cursor:pointer;transition:transform .15s}
.date-button:hover{transform:translateY(-2px)}
.date-button span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.date-button strong{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1}
.date-button.active{background:var(--ink);color:var(--paper);box-shadow:var(--shadow-sm) var(--shadow-sm) 0 var(--accent)}
.time-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.time-button{min-height:58px;background:var(--card);border:var(--line);border-radius:14px;font-weight:700;font-size:18px;cursor:pointer;transition:transform .15s,background .15s}
.time-button:hover,.time-button.selected{background:var(--second);color:#16101a;transform:translate(-2px,-2px);box-shadow:var(--shadow-sm) var(--shadow-sm) 0 var(--ink)}

.selection-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.selection-summary div{background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:8px 16px;display:flex;gap:10px;align-items:baseline}
.selection-summary span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.selection-summary b{font-size:16px}
#bookingForm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#bookingForm .full{grid-column:1/-1}
#bookingForm label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:14px}
#bookingForm label small{font-weight:500;color:var(--muted)}
#bookingForm input:not([type=checkbox]),#bookingForm textarea{width:100%;border:var(--line);border-radius:14px;padding:14px 16px;font:inherit;font-size:16px;background:var(--card);color:var(--ink)}
#bookingForm input:focus,#bookingForm textarea:focus{outline:none;box-shadow:var(--shadow-sm) var(--shadow-sm) 0 var(--second)}
#bookingForm .consent{flex-direction:row;align-items:flex-start;gap:12px;font-weight:500;font-size:15px;line-height:1.45}
#bookingForm .consent input{width:22px;height:22px;margin:0;flex-shrink:0;accent-color:var(--ink)}
.primary-button{justify-self:start}
.primary-button:disabled{opacity:.55;cursor:wait}

.success-step{text-align:center;padding-top:10px}
.success-step.active{display:flex;flex-direction:column;align-items:center;gap:14px}
.success-burst{position:relative;width:200px;height:200px;transform:rotate(-8deg)}
.success-burst svg{width:100%;height:100%}
.success-burst polygon{fill:var(--yellow);stroke:var(--ink);stroke-width:4}
.success-burst span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-size:34px;color:#16101a}
.success-step h2{font-size:clamp(38px,4.2vw,56px)}
.success-step>p:not(.script){max-width:520px;margin:0;font-size:17px;line-height:1.55}
.request-code{border:var(--line);border-radius:var(--radius);padding:14px 26px;background:var(--card);margin:6px 0 10px}
.request-code span{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.request-code strong{font-family:var(--font-display);font-weight:400;font-size:28px}

.mini-footer{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap;padding:22px var(--gutter);background:var(--ink);color:rgba(255,255,255,.7);font-size:13px}
.mini-footer a{color:var(--paper);font-weight:700}

@media (max-width:1100px){
  .stepper li b{display:none}
}
@media (max-width:900px){
  .booking-shell{grid-template-columns:1fr}
  .ticket-side{padding:24px var(--gutter);gap:18px}
  .ticket-side-head,.approval-note{display:none}
  .live-ticket{transform:none;box-shadow:var(--shadow-sm) var(--shadow-sm) 0 var(--accent)}
  .lt-body{flex-direction:row;flex-wrap:wrap;gap:8px 18px;padding:14px 18px}
  .lt-body div{flex-direction:column;align-items:flex-start;gap:2px;border:0;padding:0}
  .lt-body dd{text-align:left}
  .lt-foot{display:none}
  .booking-panel{padding-top:28px}
}
@media (max-width:640px){
  .site-header .brand-words{display:none}
  .stepper{gap:6px}
  .stepper li{gap:6px}
  .stepper li:not(:last-child)::after{width:12px}
  .stepper li span{width:30px;height:30px;font-size:13px}
  .service-options{grid-template-columns:1fr;gap:14px}
  .service-option{min-height:0;padding:18px 20px}
  .date-strip{display:flex;overflow-x:auto;padding:4px 4px 10px;margin-inline:-4px;scroll-snap-type:x mandatory}
  .date-button{min-width:74px;scroll-snap-align:start}
  .time-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #bookingForm{grid-template-columns:1fr}
  .primary-button{justify-self:stretch}
}
@media (max-width:480px){
  .booking-page .site-header{gap:10px}
  .stepper{gap:4px}
  .stepper li:not(:last-child)::after{display:none}
  .booking-page .lang-switch button{min-width:32px;padding:6px 6px}
}