/* =========================================================
   GUNGCHIL — Booking Form & Calendar Widget Styles
   Depends on css/style.css being loaded first (uses its
   CSS variables, fonts and button classes).
   ========================================================= */

.booking-page{
  background: var(--paper);
  min-height: 100vh;
}

.booking-hero{
  background: linear-gradient(155deg, var(--maroon-deep), var(--maroon) 65%);
  color: var(--white);
  padding: 150px 0 64px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.booking-hero .wm{
  position:absolute; right:-8%; top:-18%;
  width: min(46vw, 520px);
  opacity:.1;
  filter: brightness(0) invert(1);
}
.booking-hero .inner{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
.booking-hero .eyebrow{ color:#f2c9ca; justify-content:center; }
.booking-hero .eyebrow::before{ background:#f2c9ca; }
.booking-hero h1{ color:var(--white); font-size: clamp(2rem,4.4vw,2.9rem); margin-bottom:14px; }
.booking-hero p{ color: rgba(255,255,255,.82); font-size:1.02rem; }

.booking-wrap{
  max-width: 880px;
  margin: -46px auto 100px;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 5;
}

.booking-card{
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 40px 80px -40px rgba(20,4,5,.28);
  padding: clamp(28px, 5vw, 56px);
}

.b-progress{
  display:flex;
  gap: 8px;
  margin-bottom: 40px;
}
.b-progress span{
  flex:1;
  height: 3px;
  background: rgba(18,18,18,.1);
  border-radius: 2px;
  overflow:hidden;
  position:relative;
}
.b-progress span::after{
  content:"";
  position:absolute; inset:0;
  background: var(--maroon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.b-progress span.done::after{ transform: scaleX(1); }

.b-field{ margin-bottom: 30px; }
.b-field:last-child{ margin-bottom: 0; }
.b-label{
  display:flex;
  align-items:center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing:.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.b-label .req{ color: var(--maroon); }
.b-hint{
  font-size: .82rem;
  color: var(--ink-faint);
  margin-top: 8px;
}

.b-input{
  width: 100%;
  padding: 15px 18px;
  border: 1.5px solid rgba(18,18,18,.14);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: .98rem;
  color: var(--ink);
  background: var(--white);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.b-input:focus{
  outline:none;
  border-color: var(--maroon);
  box-shadow: 0 0 0 4px var(--maroon-veil);
}
.b-input.has-error{
  border-color: #b3261e;
}
.b-error{
  display:none;
  font-size: .8rem;
  color: #b3261e;
  margin-top: 8px;
}
.b-field.has-error .b-error{ display:block; }

.b-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* --- Package picker --- */
.pkg-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.pkg-option{ position: relative; }
.pkg-option input{
  position:absolute;
  opacity:0;
  inset:0;
  width:100%; height:100%;
  cursor:pointer;
  margin:0;
  padding:0;
  border:0;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
.pkg-option .card{
  display:flex;
  flex-direction:column;
  border: 1.5px solid rgba(18,18,18,.14);
  border-radius: 8px;
  padding: 16px 18px;
  transition: all .3s var(--ease);
  height: 100%;
}
.pkg-option .card .name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.pkg-option .card .name .tick{
  width:18px; height:18px;
  border-radius:50%;
  border: 1.5px solid rgba(18,18,18,.25);
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: all .3s ease;
}
.pkg-option .card .name .tick svg{
  width:10px; height:10px;
  opacity:0;
  transition: opacity .2s ease;
  color: var(--white);
}
.pkg-option .card .meta{
  font-size: .78rem;
  color: var(--ink-soft);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.pkg-option input:checked + .card{
  border-color: var(--maroon);
  background: var(--maroon-veil);
  box-shadow: 0 8px 20px -12px rgba(107,15,19,.4);
}
.pkg-option input:checked + .card .name .tick{
  background: var(--maroon);
  border-color: var(--maroon);
}
.pkg-option input:checked + .card .name .tick svg{ opacity:1; }
.pkg-option input:focus-visible + .card{
  outline: 2px solid var(--maroon);
  outline-offset: 2px;
}

/* --- Guest stepper --- */
.stepper{
  display:inline-flex;
  align-items:center;
  border: 1.5px solid rgba(18,18,18,.14);
  border-radius: 6px;
  overflow:hidden;
}
.stepper button{
  width: 48px; height: 50px;
  border:none;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.2rem;
  display:flex; align-items:center; justify-content:center;
  transition: background .25s ease;
}
.stepper button:hover{ background: var(--maroon-veil); color: var(--maroon); }
.stepper input{
  width: 76px;
  height: 50px;
  border: none;
  border-left: 1.5px solid rgba(18,18,18,.14);
  border-right: 1.5px solid rgba(18,18,18,.14);
  text-align:center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  appearance: textfield;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* --- Privacy option cards --- */
.privacy-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.privacy-option{ position:relative; }
.privacy-option input{
  position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; margin:0; padding:0; border:0;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
.privacy-option .card{
  border: 1.5px solid rgba(18,18,18,.14);
  border-radius: 8px;
  padding: 18px 20px;
  height:100%;
  transition: all .3s var(--ease);
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.privacy-option .card .icon{
  flex:none;
  width: 36px; height:36px;
  border-radius:50%;
  background: var(--maroon-veil);
  color: var(--maroon);
  display:flex; align-items:center; justify-content:center;
}
.privacy-option .card .icon svg{ width:17px; height:17px; }
.privacy-option .card h4{
  font-size: .95rem;
  margin-bottom:4px;
}
.privacy-option .card p{
  font-size: .8rem;
  color: var(--ink-soft);
  margin:0;
}
.privacy-option input:checked + .card{
  border-color: var(--maroon);
  background: var(--maroon-veil);
}

/* --- Calendar widget (shared: bcal-*) --- */
.bcal{
  border: 1.5px solid rgba(18,18,18,.12);
  border-radius: 10px;
  padding: 18px;
  background: var(--white);
  max-width: 380px;
}
.bcal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 14px;
}
.bcal-title{
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}
.bcal-nav{
  width: 32px; height:32px;
  border-radius:50%;
  border: 1px solid rgba(18,18,18,.16);
  background: none;
  display:flex; align-items:center; justify-content:center;
  color: var(--ink);
  transition: all .25s ease;
}
.bcal-nav:hover{ background: var(--maroon); border-color: var(--maroon); color: var(--white); }
.bcal-nav svg{ width:15px; height:15px; }

.bcal-weekdays{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.bcal-weekdays span{
  text-align:center;
  font-size: .68rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color: var(--ink-faint);
  font-weight:700;
  padding: 6px 0;
}

.bcal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.bcal-day{
  aspect-ratio: 1;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: .86rem;
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  position: relative;
  transition: background .2s ease, color .2s ease;
  cursor:pointer;
}
.bcal-day.is-outside{
  color: rgba(18,18,18,.2);
  cursor:default;
}
.bcal-day:not(.is-outside):not(.is-disabled):hover{
  background: var(--maroon-veil);
  color: var(--maroon);
}
.bcal-day.is-today{
  box-shadow: inset 0 0 0 1.5px var(--maroon-line);
  font-weight:700;
}
.bcal-day.is-selected{
  background: var(--maroon) !important;
  color: var(--white) !important;
  font-weight:700;
}
.bcal-day.is-disabled{
  color: rgba(18,18,18,.22);
  text-decoration: line-through;
  cursor: not-allowed;
}
.bcal-day .ev-dot{
  position:absolute;
  bottom: 5px; left:50%;
  transform: translateX(-50%);
  width:5px; height:5px;
  border-radius:50%;
  background: var(--maroon);
}
.bcal-day.is-selected .ev-dot{ background: var(--white); }

.bcal-legend{
  display:flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(18,18,18,.08);
  flex-wrap:wrap;
}
.bcal-legend-item{
  display:flex;
  align-items:center;
  gap: 6px;
  font-size: .74rem;
  color: var(--ink-soft);
}
.bcal-legend-item .dot{
  width:8px; height:8px;
  border-radius:50%;
  display:inline-block;
}
.dot-selected{ background: var(--maroon); }
.dot-disabled{ background: rgba(18,18,18,.25); }
.dot-event{ background: var(--maroon); }

.b-selected-date{
  margin-top: 14px;
  font-size: .88rem;
  color: var(--ink-soft);
}
.b-selected-date strong{ color: var(--maroon); }

.b-submit-row{
  margin-top: 44px;
  display:flex;
  align-items:center;
  gap: 20px;
  flex-wrap:wrap;
}
.b-submit-note{
  font-size: .82rem;
  color: var(--ink-faint);
}

.b-alert{
  display:none;
  align-items:flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 8px;
  font-size: .88rem;
  margin-bottom: 26px;
}
.b-alert.show{ display:flex; }
.b-alert svg{ flex:none; width:18px; height:18px; margin-top:1px; }
.b-alert.error{ background: #fdecea; color: #7a1f18; }
.b-alert.info{ background: var(--maroon-veil); color: var(--maroon-deep); }

/* --- Success state --- */
.b-success{
  display:none;
  text-align:center;
  padding: 20px 0 8px;
}
.b-success.show{ display:block; }
.b-success .icon{
  width: 74px; height:74px;
  border-radius:50%;
  background: var(--maroon-veil);
  color: var(--maroon);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 26px;
}
.b-success .icon svg{ width:34px; height:34px; }
.b-success h2{ font-size: 1.7rem; margin-bottom: 14px; }
.b-success p{ color: var(--ink-soft); max-width: 46ch; margin: 0 auto 8px; }
.b-success .ref{
  display:inline-block;
  margin: 18px 0 30px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing:.04em;
  color: var(--ink);
  background: var(--paper);
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px dashed var(--maroon-line);
}
.b-form.hide{ display:none; }

@media (max-width: 720px){
  .b-row{ grid-template-columns: 1fr; }
  .pkg-grid{ grid-template-columns: 1fr; }
  .privacy-grid{ grid-template-columns: 1fr; }
  .bcal{ max-width: 100%; }
}