/* ===== Shared form + input styles for XpatHaven ===== */

/* Form container card */
.form-card{
  background:var(--card);
  border:1px solid rgba(0,0,0,0.12);
  border-radius:var(--radius-lg);
  padding:1.15rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
  color:#ffffff;
}

/* Generic 2-column form grid */
.form-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr 1fr;
}
@media (max-width:900px){
  .form-grid{
    grid-template-columns:1fr;
  }
}

/* Two-column variant used on some pages */
.form-grid-two{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr 1fr;
}
.form-grid-two .span-2{
  grid-column:1 / -1;
}
@media (max-width:900px){
  .form-grid-two{
    grid-template-columns:1fr;
  }
  .form-grid-two .span-2{
    grid-column:auto;
  }
}

/* Simple vertical stack */
.form-stack{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* Generic field wrapper */
.field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.field label{
  color:#ffffff;
  font-size:.96rem;
}

/* Text-like inputs only (avoid styling radios/checkboxes) */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="search"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field input[type="url"],
.field textarea,
.field select{
  appearance:none;
  width:100%;
  border:1px solid rgba(255,255,255,0.6);
  background:#ffffff;
  color:var(--text);
  border-radius:12px;
  padding:.7rem .85rem;
  font:inherit;
  box-sizing:border-box;
}

.field textarea{
  min-height:130px;
  resize:vertical;
}

/* Keep radios / checkboxes normal-sized when inside .field */
.field input[type="radio"],
.field input[type="checkbox"]{
  width:auto;
  height:auto;
  margin:0;
}

/* Inline layout helpers (labels with radios/checkboxes etc.) */
.inline{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}

/* Phone field: prefix + number on ONE line */
.phone-inline{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:.6rem;
    
    width:100%;
}

/* Prefix selector is small */
.phone-inline select{
    flex:0 0 250px;                 /* fixed narrow width */
    max-width:250px;
    border-radius:12px;
}

/* Phone number grows to fill the rest */
.phone-inline input{
    flex:1 1 auto;
    min-width:0;                   /* required to allow shrinking instead of wrapping */
}


/* Vertical form layout (half-width fields on desktop) */
.form-vertical{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
}
.form-vertical .field{
  width:50%;
  max-width:50%;
}
.form-vertical .field--full{
  width:100%;
  max-width:100%;
}
@media (max-width:900px){
  .form-vertical .field{
    width:100%;
    max-width:100%;
  }
}

/* Actions row for submit buttons */
.actions-row{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}


/* === Early bird page layout === */

/* Make the whole early-bird form card narrower on desktop */
.earlybird-form .form-card{
  max-width:500px;
  margin:0 auto 1.25rem;   /* center + space under each card */
}


/* Stack name + email (and phone) vertically, always */
.earlybird-form .form-grid-two{
  display:grid;
  grid-template-columns:1fr;  /* always single column */
  gap:1rem;
}

/* span-2 is still full width, but that’s the only width anyway */
.earlybird-form .form-grid-two .span-2{
  grid-column:1 / -1;
}


/* Prevent radio + text from splitting onto separate lines */
.no-wrap-radio{
    flex-wrap:nowrap !important;   /* radio + text stay together */
    align-items:center;
}

.no-wrap-radio span{
    white-space:normal;            /* allow text inside span to wrap */
}


/* === Early Bird: subtle branded submit button === */
.btn-earlybird-submit {
    background:#3143a8 !important;    
    border-color:#3143a8 !important;
    color:#ffffff !important;
    font-weight:600;
    padding:.7rem 1.4rem;
    border-radius:12px;
    cursor:pointer;
    transition:background .15s ease, transform .15s ease;
}

.btn-earlybird-submit:hover {
    background:#3c4ec0 !important;     /* slightly lighter on hover */
    transform:translateY(-2px);
}

.btn-earlybird-submit:active {
    transform:translateY(0);
}

/* === Booking / options cards === */

/* Each numbered block (1., 2., etc.) becomes an options card.
   The visual “card” is provided by .form-card; .options-card is spacing only. */
.options-card{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

/* Stack groups of chip options */
.chips{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

/* Single chip (radio/checkbox option) */
.chip{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  width:100%;
  padding:.6rem .85rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.06);
  cursor:pointer;
  box-sizing:border-box;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* Make sure radio/checkbox + text stay on one line */
.chip.no-wrap-radio{
  align-items:center;
}

/* Native controls, normal size */
.chip input[type="radio"],
.chip input[type="checkbox"]{
  margin:0;
  flex:0 0 auto;
}

/* Text block after the control */
.chip > div{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

/* Main label */
.chip-title{
  font-weight:600;
  color:#ffffff;
  font-size:.95rem;
}

/* Sub text */
.chip-meta{
  font-size:.85rem;
  color:#d1d5db;
}

/* Price label on the right */
.chip-price{
  margin-left:auto;
  font-weight:600;
  white-space:nowrap;
  font-size:.95rem;
  color:#e5e7eb;
}

/* Hover feedback */
.chip:hover{
  border-color:#ffffff;
  background:rgba(255,255,255,0.12);
}

/* Checkbox helper row (like AL flag) */
.checkbox-row{
  margin-top:.6rem;
  font-size:.9rem;
  color:#e5e7eb;
}

/* Summary styles reused from the original booking UI */
.order-summary h2{
  font-size:1.05rem;
  margin:0 0 .25rem;
  color:#ffffff;
}
.order-summary .hint{
  font-size:.8rem;
  color:#e5e7eb;
  margin-bottom:.7rem;
}
.summary-list{
  list-style:none;
  padding:0;
  margin:.4rem 0 1rem;
}
.summary-list li{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  padding:.3rem 0;
  border-top:1px solid rgba(255,255,255,0.25);
  font-size:.85rem;
}
.summary-list li:first-child{
  border-top:none;
}
.summary-key{
  color:#e5e7eb;
}
.summary-val{
  font-weight:600;
  text-align:right;
  color:#ffffff;
}
.total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:.6rem;
  margin-top:.3rem;
  border-top:1px dashed rgba(255,255,255,0.35);
}
.total-row .total-label{
  font-weight:700;
}
.total-row .total-amount{
  font-weight:800;
  font-size:1.15rem;
}

/* === Generic booking: callback slots (green buttons) === */

.callback-day-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:1rem;
}

.callback-day-card{
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  padding:.8rem 1rem 1rem;
  background:rgba(255,255,255,0.04);
}

.callback-day-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.75rem;
  margin-bottom:.5rem;
}

.callback-date{
  font-weight:600;
  color:#ffffff;
}

.callback-note{
  font-size:.8rem;
  color:#d1d5db;
}

.callback-slots{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.callback-slot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .9rem;
  border-radius:9999px;
  font-size:.9rem;
  font-weight:500;
  background:rgba(46, 204, 113, .25);           /* green-ish, like availability */
  color:#e6ffe6;
  border:1px solid rgba(46, 204, 113, .65);
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
  pointer-events:none;                           /* explicitly non-interactive */
}

/* === Home cleaning booking layout: narrow stack + sticky summary === */

.booking-wrap .booking-shell{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:1.5rem;
  margin-top:1.5rem;
}

/* Left column: all main cards, max ~500px (same as early-bird) */
.booking-wrap .booking-main{
  flex:0 0 auto;
  width:100%;
  max-width:500px;
}

/* Make all cards inside the left column full-width and aligned,
   overriding the earlybird auto-centering */
.booking-wrap .booking-main .form-card{
  max-width:100%;
  margin:0 0 1rem 0;
}

/* Centered content wrapper – same behaviour as home-cleaning */
.booking-wrap {
    display: flex;
    justify-content: center;
}

/* Main column width identical to home-cleaning */
.booking-main {
    width: 100%;
    max-width: 500px;        /* ← the magic number */
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Right column: summary card – narrower and sticky on desktop */
.booking-wrap .booking-summary{
  flex:0 0 260px;
  max-width:260px;
  position:sticky;
  top:150px;          /* tweak if it collides with brandbar */
  align-self:flex-start;
  margin:0;
}

/* On mobile: everything stacked, summary at the bottom, same width as main */
@media (max-width:900px){
  .booking-wrap .booking-shell{
    flex-direction:column;
    align-items:stretch;
  }

  .booking-wrap .booking-main{
    max-width:500px;
    width:100%;
    margin:0 auto;
  }

  .booking-wrap .booking-summary{
    position:static;
    max-width:500px;
    width:100%;
    margin:1rem auto 0;
  }
}

/* Summary content (if not already styled elsewhere) */
.booking-summary .summary-list{
  list-style:none;
  padding:0;
  margin:.4rem 0 1rem;
}

.booking-summary .summary-list li{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  padding:.3rem 0;
  border-top:1px solid rgba(255,255,255,0.25);
  font-size:.9rem;
}

.booking-summary .summary-list li:first-child{
  border-top:none;
}

.booking-summary .summary-key{
  color:#e5e7eb;
}

.booking-summary .summary-val{
  font-weight:600;
  text-align:right;
  color:#ffffff;
}

.booking-summary .total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:.6rem;
  margin-top:.3rem;
  border-top:1px dashed rgba(255,255,255,0.35);
}

.booking-summary .total-row .total-label{
  font-weight:700;
}

.booking-summary .total-row .total-amount{
  font-weight:800;
  font-size:1.1rem;
}

.booking-summary .actions-row{
  justify-content:flex-end;
  margin-top:1.1rem;
}


/* Generic & booking pages: tighten gap between header card and first options card */
.wrap.earlybird-form .booking-main > section {
    margin-top: 1.25rem;   /* or 1rem or whatever feels right */
}

/* Shared top spacing for all booking-style pages */
.wrap.earlybird-form .booking-wrap {
    margin-top: 1.7rem;   /* adjust to match home-cleaning visually */
}

/* Wrapper */
.add-to-cart-wrapper {
  margin-top: 1.5rem;
}

/* Button styled like a .chip */
.btn-add-to-cart.chip-like {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  padding: .75rem .95rem;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);

  cursor: not-allowed; /* temporarily */
  box-sizing: border-box;

  transition: border-color .15s ease,
              background-color .15s ease,
              box-shadow .15s ease;

  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;

  overflow: hidden;
}

.btn-add-to-cart.chip-eb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  padding: .75rem .95rem;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);

  cursor: pointer; 
  box-sizing: border-box;

  transition: border-color .15s ease,
              background-color .15s ease,
              box-shadow .15s ease;

  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;

  overflow: hidden;
}

/* Hover, same behaviour as .chip */
.btn-add-to-cart.chip-like:hover {
  border-color: #ffffff;
  background: rgba(255,255,255,0.12);
}



/* Title uses chip-title styling */
.btn-add-to-cart .chip-title {
  position: relative;
  z-index: 2;
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
}

/* Full-card diagonal Coming Soon overlay */
.coming-soon-overlay {
  position: relative;
  overflow: visible;
}