*{box-sizing:border-box}
html,body{height:100%}
body.reserve{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 20% -10%, #0b1023 0%, var(--bg) 40%, #0b1023 100%), var(--bg);
  color:var(--text); display:grid; place-items:center; padding:24px;
}
.wrap{
  width:min(860px, 100%);
}
.card{
  background: linear-gradient(180deg, #0f172a 0%, #0b1224 100%);
  border:1px solid #1f2937;
  border-radius:var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
}
header{
  padding:24px 28px; border-bottom:1px solid #1f2937;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
header h1{margin:0; font-size:20px; letter-spacing:.2px}
header h1 a{
  color:inherit;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
header h1 a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
}
header .hint{font-size:13px; color:var(--muted)}
.slider{
  display:grid; grid-template-columns:auto 1fr auto; align-items:stretch; gap:12px;
  padding:18px;
}
.navbtn{
  display:grid; place-items:center; width:56px; border-radius:14px;
  background:#0b1224; border:1px solid #1f2937; cursor:pointer; user-select:none;
  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.navbtn:hover{border-color:#334155}
.navbtn:active{transform:translateY(1px)}
.navbtn svg{width:24px; height:24px; fill:var(--text); opacity:.9}
.viewport{
  position:relative; display:grid; place-items:center;
  overflow:hidden; border-radius:16px; border:1px dashed #243040;
  background: conic-gradient(from 180deg at 50% 50%, #0b1326, #0a1429, #0b1326);
}
.slide{
  position:relative; display:grid; place-items:center; padding:24px;
  opacity:0; transform:translateX(30px) scale(.98);
  transition: opacity .22s ease, transform .22s ease;
  grid-area:1 / 1;
  pointer-events:none;
  width:100%;
}
.slide.active{opacity:1; transform:translateX(0) scale(1); pointer-events:auto}
.product{
  text-align:center; max-width:560px; margin-inline:auto;
}
.product .media{
  margin:0 auto 16px;
  width:100%;
  max-width:100%;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(15, 23, 42, 0.55);
}
.product .media img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}
.product .name{font-size:26px; font-weight:700; margin:0 0 8px}
.product .desc{margin:0; color:var(--muted); font-size:14px}
.qty{
  display:flex; align-items:center; justify-content:center; gap:10px; margin:18px 0 4px;
}
.qty button{
  width:40px; height:40px; border-radius:12px; border:1px solid #1f2937;
  background:#0b1224; color:var(--text); font-size:20px; cursor:pointer;
  transition:transform .06s ease, border-color .12s ease;
}
.qty button:hover{border-color:#334155}
.qty button:active{transform:translateY(1px)}
.qty input{
  width:88px; text-align:center; font-size:18px; padding:10px 12px; border-radius:12px;
  background:#0b1224; color:var(--text); border:1px solid #1f2937;
  outline:none; box-shadow: 0 0 0 0 var(--ring);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.qty input:focus{border-color:#334155; box-shadow:0 0 0 6px var(--ring)}
.maxnote{font-size:12px; color:var(--muted); text-align:center}
form{padding:18px 18px 24px; display:grid; gap:16px}
.field{
  display:grid; gap:8px;
}
label{font-size:13px; color:var(--muted)}
/* Base checkbox styling */
.checkbox-input{
  --checkbox-size:1.25rem;
  --checkbox-radius:0.45rem;
  --checkbox-border:color-mix(in srgb, var(--color-text, #e2e8f0) 45%, transparent);
  --checkbox-bg:color-mix(in srgb, var(--card, rgba(15, 23, 42, 1)) 82%, transparent);
  --checkbox-focus-ring:color-mix(in srgb, #f97316 28%, transparent);
  --checkbox-checked-bg:color-mix(in srgb, rgba(249, 115, 22, 0.52) 55%, rgba(255, 255, 255, 0.18));
  appearance:none;
  margin:0;
  width:var(--checkbox-size);
  height:var(--checkbox-size);
  border-radius:var(--checkbox-radius);
  border:1.5px solid var(--checkbox-border);
  background:var(--checkbox-bg);
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .12s ease;
  background-repeat:no-repeat;
  background-position:center;
  background-size:70%;
  vertical-align:middle;
}
.checkbox-input:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--checkbox-focus-ring);
}
.checkbox-input:active{transform:scale(.96)}
.checkbox-input:checked{
  border-color:color-mix(in srgb, #f97316 68%, var(--checkbox-border));
  background-color:var(--checkbox-checked-bg);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M5 10.5 8.2 14l6.8-8' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
.checkbox-input:disabled{
  cursor:not-allowed;
  opacity:.65;
  background-color:color-mix(in srgb, var(--checkbox-bg) 85%, rgba(148, 163, 184, 0.18));
  border-color:color-mix(in srgb, var(--checkbox-border) 70%, rgba(148, 163, 184, 0.4));
  box-shadow:none;
}
.checkbox-input:disabled:checked{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M5 10.5 8.2 14l6.8-8' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
input[type="email"]{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #1f2937;
  background:#0b1224; color:var(--text); outline:none;
  transition: box-shadow .12s ease, border-color .12s ease;
}
input[type="email"]:focus{border-color:#334155; box-shadow:0 0 0 6px var(--ring)}
.cta{
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding-top:6px;
}
.submit{
  padding:14px 18px; border:none; border-radius:14px; cursor:pointer;
  font-size:16px; font-weight:700; letter-spacing:.2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#072215; box-shadow:0 10px 30px rgba(20,184,166,.35);
  transition: transform .06s ease, filter .12s ease;
}
.submit:hover{filter:saturate(1.1) brightness(1.05)}
.submit:active{transform:translateY(1px)}
.ghost{
  font-size:13px; color:var(--muted)
}
footer{
  padding:14px 20px; border-top:1px solid #1f2937; font-size:12px; color:#94a3b8a6;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.pill{
  border:1px solid #1f2937; padding:6px 10px; border-radius:999px; background:#0b1224;
  font-size:12px; color:var(--muted)
}