/*
 * Sarang Seni Studio — Booking V3 CLEAN presentation layer
 *
 * Safe scope:
 * - booking page presentation only
 * - no pricing / availability / booking logic
 * - does NOT redefine the progress markup used by booking.php
 * - intended to load AFTER site.css
 */
/*
 * Sarang Seni Studio — Booking V3 Phase 3
 * Dedicated booking-only presentation layer.
 * Loaded by /assets/js/booking.js so site.css remains untouched.
 */

/* Package information: keep the existing info-box, improve its internal rhythm. */
#packageInfo.info-box {
  display: block;
}

#packageInfo .package-info-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

#packageInfo .package-info-main strong {
  font-size: 16px;
}

#packageInfo .package-duration {
  flex: 0 0 auto;
  color: #777;
  font-size: 13px;
  white-space: nowrap;
}

#packageInfo > p,
#packageInfo .package-info-promo p {
  margin: 8px 0 0;
}

#packageInfo .package-info-promo {
  display: grid;
  gap: 3px;
}

#packageInfo .package-info-promo-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

#packageInfo .package-info-promo-title strong {
  line-height: 1.25;
}

#packageInfo .package-info-promo small {
  color: #777;
}

.promo-flag-icon {
  display: inline-block;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 18px;
  line-height: 1;
  vertical-align: -2px;
}

.promo-banner {
  overflow: hidden;
}

.promo-banner .promo-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.promo-banner p {
  max-width: 760px;
}



.marketing-consent{display:flex!important;flex-direction:row!important;grid-column:1/-1;gap:10px;align-items:flex-start;font-size:12px;line-height:1.5;color:#666}.marketing-consent input{width:16px!important;height:16px!important;margin:2px 0 0!important;padding:0!important;flex:0 0 16px}.marketing-consent span{max-width:760px}


/* V3 Customer UX — final polish */
.step-helper{margin:-10px 0 14px;color:#777;font-size:13px;line-height:1.5}
.booking-summary{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
.booking-summary > div{min-width:0}
.booking-summary strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.booking-summary #summarySlot{white-space:normal}
@media(max-width:1100px){
  .booking-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
  .booking-summary .btn{grid-column:1/-1}
}
@media(max-width:800px){
  .booking-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}