/* ==========================================================================
   İZKOL 5.0 — scene 03 · randevu
   Functionality is owned by booking.js. Only the surface is restyled here.
   Form field names, ids and step behaviour are untouched.
   ========================================================================== */

/* the selected service's atmosphere, washed far back ------------------- */
.booking-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:.5;
}
.booking-backdrop::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(58% 62% at 78% 34%,rgba(247,245,238,.2),rgba(247,245,238,.86) 62%),
    linear-gradient(90deg,var(--paper) 0%,rgba(247,245,238,.9) 34%,rgba(247,245,238,.34) 78%);
}
.booking-backdrop img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 52%;
  transform:scale(1.04);
  transition:opacity 700ms var(--soft-ease),transform 1400ms var(--scene-ease);
  opacity:.42;
}
.booking-backdrop.is-swapping img{opacity:0}

/* layout --------------------------------------------------------------- */
.booking-layout{
  display:grid;
  grid-template-columns:minmax(0,clamp(280px,25vw,352px)) 1fr;
  gap:clamp(24px,3.2vw,60px);
  min-height:0;
}
.booking-intro{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.booking-step-tag{
  display:block;
  margin-top:22px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--blue-deep);
}
.booking-intro h2{font-size:clamp(26px,2.5vw,40px);line-height:1.1;margin:8px 0 16px}
.booking-intro>p{font-size:15px;line-height:1.72;color:var(--muted);max-width:32ch}
.booking-change{width:fit-content}
.process-mini{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:10px}
.process-mini li{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
}
.process-mini b{font-size:11px;letter-spacing:.14em;color:var(--blue)}
.booking-note{margin-top:20px!important;font-size:12.5px!important;line-height:1.6!important;color:var(--muted-soft)!important}
.booking-more{width:fit-content;margin-top:14px}

/* the panel ------------------------------------------------------------ */
.booking-panel{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  max-height:100%;
  padding:clamp(18px,1.9vw,28px);
  border:1px solid rgba(16,47,72,.09);
  border-radius:var(--r-lg);
  background:rgba(253,252,247,.97);
  box-shadow:var(--shadow-panel);
}
.booking-panel h3{font-size:clamp(19px,1.6vw,24px);line-height:1.25;margin-bottom:8px}
.booking-hint{display:block;font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 16px}
.optional{color:var(--muted-soft);font-weight:400}

#booking-loading{font-size:14.5px;line-height:1.7;color:var(--muted)}
#booking-loading a{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-weight:700;color:var(--blue-deep)}

.booking-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--blue-deep);
}
.booking-panel-head a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:4px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:12.5px;
  font-weight:700;
  color:var(--muted);
  transition:border-color var(--fast-dur) var(--soft-ease),color var(--fast-dur) var(--soft-ease);
}
.booking-panel-head a:hover{border-color:var(--ink-soft);color:var(--ink)}

/* steps ---------------------------------------------------------------- */
.booking-steps{display:flex;gap:8px;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line-faint)}
.booking-steps li{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted-soft);white-space:nowrap}
.booking-steps li>span{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--cream);
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  transition:background var(--fast-dur) var(--soft-ease),color var(--fast-dur) var(--soft-ease);
}
.booking-steps li[aria-current]{color:var(--navy)}
.booking-steps li[aria-current]>span{background:var(--navy);color:var(--paper)}

/* the scrolling step area — buttons below stay on screen -------------- */
.booking-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;margin-right:-4px}
.booking-body>div{animation:stepIn 420ms var(--soft-ease)}
@keyframes stepIn{from{opacity:0;transform:translate3d(14px,0,0)}to{opacity:1;transform:none}}

/* item quantities ------------------------------------------------------ */
.booking-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 16px}
.booking-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  padding:9px 10px 9px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:14px;
}
.booking-item>span{font-weight:700;min-width:0;overflow-wrap:anywhere}
.quantity{display:flex;align-items:center;flex:0 0 auto}
.quantity button{
  display:grid;
  place-items:center;
  width:34px;
  height:38px;
  font-size:20px;
  line-height:1;
  color:var(--blue-deep);
  border-radius:var(--r-xs);
  transition:background var(--fast-dur) var(--soft-ease);
}
.quantity button:hover{background:var(--cream)}
.quantity input{
  width:32px;
  padding:4px 0;
  border:0;
  background:transparent;
  text-align:center;
  font-family:inherit;
  font-size:16px;
  font-weight:800;
  color:var(--navy);
  -moz-appearance:textfield;
}
.quantity input::-webkit-inner-spin-button{-webkit-appearance:none}

/* quote fields --------------------------------------------------------- */
.booking-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin:0 0 16px}
.booking-fields label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--ink-soft);min-width:0}
.booking-fields .full{grid-column:1/-1}
.booking-fields input,.booking-fields select,.booking-fields textarea{
  width:100%;
  min-height:48px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--paper);
  font-family:inherit;
  font-size:15px;
  font-weight:400;
  color:var(--ink);
  transition:border-color var(--fast-dur) var(--soft-ease),background var(--fast-dur) var(--soft-ease);
}
.booking-fields textarea{min-height:76px;resize:vertical;line-height:1.55}
.booking-fields select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.booking-fields input:hover,.booking-fields select:hover,.booking-fields textarea:hover{border-color:var(--line-strong)}
.booking-fields input:focus,.booking-fields select:focus,.booking-fields textarea:focus{outline:none;border-color:var(--blue);background:var(--paper-bright);box-shadow:0 0 0 3px rgba(21,127,167,.13)}
.booking-fields input[type="file"]{
  padding:9px 12px;
  font-size:13.5px;
  background:var(--paper);
}
.booking-fields input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:8px 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:var(--paper-bright);
  font:inherit;
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
}
.booking-fields .booking-hint{margin:2px 0 0}

/* availability --------------------------------------------------------- */
.booking-slots{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  max-height:216px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:2px;
  margin:0 0 14px;
}
.booking-slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-height:60px;
  padding:8px 4px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:15px;
  font-weight:800;
  color:var(--ink-soft);
  transition:background var(--fast-dur) var(--soft-ease),border-color var(--fast-dur) var(--soft-ease),color var(--fast-dur) var(--soft-ease);
}
.booking-slot small{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-soft)}
.booking-slot:hover{border-color:var(--blue);color:var(--blue-deep)}
.booking-slot[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.booking-slot[aria-pressed="true"] small{color:var(--cyan)}
.booking-busy{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px;font-size:12.5px;color:var(--muted)}
.booking-busy strong{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-soft)}
.booking-busy span{padding:3px 9px;border-radius:var(--r-pill);background:var(--cream);font-weight:600}
.preferred-time{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;font-size:13px;font-weight:700;color:var(--ink-soft)}
.preferred-time select{appearance:none;min-height:48px;padding:11px 40px 11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);font-family:inherit;font-size:15px;font-weight:400;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* summary, checkboxes, honeypot ---------------------------------------- */
.booking-summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0 0 16px;
  padding:14px 16px;
  border-left:2px solid var(--blue-light);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--cream);
}
.booking-summary strong{font-size:14.5px}
.booking-summary span{font-size:13.5px;color:var(--muted)}
.booking-check{display:flex;align-items:flex-start;gap:11px;margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.booking-check input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue)}
.booking-check a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:2px}
.hp-field{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.booking-error{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:#a33a2c}
.booking-error:empty{display:none}

/* pinned action row ---------------------------------------------------- */
.booking-bottom{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding-top:16px;margin-top:4px;border-top:1px solid var(--line-faint)}
.booking-bottom .button{flex:1 1 auto;min-height:54px}
.booking-secondary{
  flex:0 0 auto;
  min-height:48px;
  padding:12px 20px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  font-size:14px;
  font-weight:700;
  color:var(--ink-soft);
  transition:border-color var(--fast-dur) var(--soft-ease),color var(--fast-dur) var(--soft-ease);
}
.booking-secondary:hover{border-color:var(--ink-soft);color:var(--ink)}
.booking-secondary:disabled{opacity:.5;cursor:not-allowed}

/* receipt -------------------------------------------------------------- */
#booking-receipt{display:flex;flex-direction:column;min-height:0}
.status-label{
  align-self:flex-start;
  padding:5px 13px;
  border-radius:var(--r-pill);
  background:var(--navy);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--paper);
}
#booking-receipt h3{font-size:clamp(19px,1.7vw,24px);margin:14px 0 8px}
#booking-receipt .notice{font-size:14.5px;line-height:1.68;color:var(--muted);margin:0 0 18px}
.receipt-actions{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 16px}
.receipt-actions .button,.receipt-actions .booking-secondary{flex:1 1 200px;justify-content:center}
.receipt-code{
  padding:11px 14px;
  border:1px dashed var(--line-strong);
  border-radius:var(--r-sm);
  font-size:12.5px;
  line-height:1.5;
  overflow-wrap:anywhere;
  color:var(--ink-soft);
}

/* mobile ---------------------------------------------------------------- */
@media (max-width:1023.98px){
  .booking-backdrop{opacity:.34}
  .booking-layout{grid-template-columns:1fr;gap:24px}
  .booking-intro{overflow:visible;order:1}
  .booking-panel{order:2;max-height:none}
  .process-mini{margin-top:0;padding-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 18px}
  .booking-note{display:none}
  .booking-more{margin-top:12px}
  .booking-body{overflow:visible}
  .booking-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:599.98px){
  .booking-panel{padding:18px 15px;border-radius:var(--r-md)}
  .booking-steps{gap:6px;overflow-x:auto;scrollbar-width:none}
  .booking-steps::-webkit-scrollbar{display:none}
  .booking-steps li{font-size:11.5px;gap:6px}
  .booking-steps li>span{width:22px;height:22px}
  .booking-items,.booking-fields{grid-template-columns:1fr}
  .booking-items{gap:7px}
  .booking-item{padding:10px 10px 10px 14px;font-size:15px}
  .quantity button{width:40px;height:44px}
  .quantity input{width:36px;font-size:17px}
  .booking-bottom{flex-wrap:wrap}
  .booking-bottom .button{flex:1 1 100%;order:2}
  .booking-bottom .booking-secondary{order:1;flex:1 1 100%}
  .receipt-actions{flex-direction:column}
  .receipt-actions>*{text-align:center;justify-content:center}
}

/* tablet: keep the form panel comfortably tall */
@media (min-width:640px) and (max-width:1023.98px){
  .booking-slots{grid-template-columns:repeat(4,minmax(0,1fr))}
  .booking-items{grid-template-columns:repeat(2,minmax(0,1fr))}
}