/* ===== 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;
}



.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; 
  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;
  opacity: .65;
}

.btn-add-to-cart.chip-like.is-enabled,
.btn-add-to-cart.chip-like:enabled {
  cursor: pointer;
  opacity: 1;
}

.btn-add-to-cart.chip-like:enabled:hover {
  border-color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}


.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;
}


/* === Cart page === */
.cart-items{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:.75rem;
}
.cart-item{
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.04);
  border-radius:14px;
  padding:.9rem 1rem;
}
.cart-item-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}
.cart-item-title{
  font-weight:700;
  color:#fff;
  margin-bottom:.25rem;
}
.cart-item-meta{
  color:#d1d5db;
  font-size:.9rem;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.cart-item-price{
  font-weight:800;
  color:#fff;
  white-space:nowrap;
  font-size:1.05rem;
}


/* =========================================================
   Booking Step 2 (calendar + times)
   ========================================================= */

.booking-step2-wrap{
  max-width: 1100px;
  margin: 2.2rem auto 4rem;
  padding: 0 1.2rem 2rem;
}

.booking-step2-header{
  margin-bottom: 1rem;
}

.booking-step2-title{
  font-family: AbelCustom, ui-sans-serif, system-ui;
  color: var(--text-strong);
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  margin: 0 0 .35rem;
}

.booking-step2-lead{
  color:#cfd2ee;
  margin:0 0 1.2rem;
  max-width: 70ch;
}

.booking-step2-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1.25rem;
  align-items:start;
}

@media (max-width: 900px){
  .booking-step2-grid{
    grid-template-columns: 1fr;
  }
}

/* Card heads */
.booking-step2-cardhead{
  margin-bottom: .85rem;
}

.booking-step2-h2{
  margin:0 0 .2rem;
  font-size: 1.05rem;
  color: #fff;
}

.booking-step2-sub{
  font-size: .9rem;
  color: #e5e7eb;
}

/* Months layout (2 months side-by-side on desktop, stacked on mobile) */
.booking-step2-months{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 900px){
  .booking-step2-months{
    grid-template-columns: 1fr;
  }
}

.booking-step2-month{
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: .85rem .85rem .95rem;
  background: rgba(255,255,255,0.04);
}

.booking-step2-month-title{
  font-weight: 700;
  color: #fff;
  margin-bottom: .6rem;
}

/* Day-of-week header */
.booking-step2-dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .35rem;
  margin-bottom: .35rem;
  font-size: .78rem;
  color: rgba(255,255,255,0.7);
  text-align:center;
}

/* Day grid */
.booking-step2-days{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .35rem;
}

.booking-step2-day{
  border-radius: 12px;
  min-height: 40px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.12);
  color: rgba(255,255,255,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 600;
  font-size: .92rem;
  user-select:none;
}

.booking-step2-day--out{
  opacity: .35;
}

.booking-step2-day--disabled{
  opacity: .35;
  cursor: default;
}

.booking-step2-day--available{
  cursor: pointer;
  background: rgba(46, 204, 113, .14);
  border-color: rgba(46, 204, 113, .55);
  transition: transform 120ms ease, background 140ms ease, border-color 140ms ease;
}

.booking-step2-day--available:hover{
  transform: translateY(-1px);
  background: rgba(46, 204, 113, .22);
  border-color: rgba(46, 204, 113, .75);
}

.booking-step2-day--available.is-selected{
  background: rgba(46, 204, 113, .28);
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 0 0 2px rgba(255,255,255,.14) inset;
}

/* Legend */
.booking-step2-legend{
  display:flex;
  gap: 1rem;
  margin-top: .85rem;
  font-size: .9rem;
  color: #e5e7eb;
  flex-wrap:wrap;
}

.booking-step2-legend-item{
  display:flex;
  gap:.5rem;
  align-items:center;
}

.booking-step2-legend-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display:inline-block;
  border: 1px solid rgba(255,255,255,0.35);
}

.booking-step2-legend-dot--available{
  background: rgba(46, 204, 113, .35);
  border-color: rgba(46, 204, 113, .8);
}

.booking-step2-legend-dot--unavailable{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}

/* Time slots */
.booking-step2-timeslots{
  min-height: 220px;
}

.booking-step2-times-placeholder{
  padding: .9rem 1rem;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.14);
  color: rgba(255,255,255,0.85);
}

.booking-step2-slotlist{
  display:flex;
  flex-wrap:wrap;
  gap: .5rem;
}

.booking-step2-slot{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .45rem .85rem;
  border-radius: 9999px;
  border:1px solid rgba(255,255,255,0.24);
  background: rgba(0,0,0,0.16);
  cursor:pointer;
  transition: transform 120ms ease, border-color 140ms ease, background 140ms ease;
}

.booking-step2-slot input{
  position:absolute;
  inset:0;
  opacity:0;
  margin:0;
  cursor:pointer;
}

.booking-step2-slot:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
}

.booking-step2-slot:has(input:checked){
  background: var(--card-hover);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,255,255,.14) inset;
}

.booking-step2-slot-label{
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
}

/* Buttons row */
.booking-step2-actions{
  display:flex;
  gap: .75rem;
  justify-content:flex-end;
  align-items:center;
  margin-top: 1.1rem;
  flex-wrap:wrap;
}

.booking-step2-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: .55rem 1.35rem;
  border: 1px solid transparent;
  font-size: .95rem;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}

.booking-step2-btn--ghost{
  border-color: var(--border);
  color: var(--text-strong);
  background: transparent;
}

.booking-step2-btn--primary{
  background: var(--card-hover);
  border-color: var(--accent);
  color: var(--text-strong);
}

.booking-step2-btn--primary:disabled{
  opacity: .4;
  cursor:not-allowed;
}

/* Error + empty */
.booking-step2-error{
  margin-bottom: 1rem;
  border-color:#f97373;
  background:rgba(248,113,113,0.08);
}

.booking-step2-error-title{
  color:#fecaca;
  display:block;
  margin-bottom:.35rem;
}

.booking-step2-error-list{
  margin:0;
  padding-left:1.1rem;
  color:#fecaca;
  font-size:.9rem;
}

.booking-step2-empty{
  border-color: rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.12);
}

.booking-step2-empty-title{
  display:block;
  font-weight: 700;
  margin-bottom: .35rem;
  color:#fff;
}

.booking-step2-empty-body{
  color:#e5e7eb;
}


/* =========================
   Booking Step 3 (Summary)
   ========================= */

.booking-page-wrap{
  max-width:1100px;
  margin:2.5rem auto 4rem;
  padding:0 1.5rem;
}

.booking-page-title{
  font-family:AbelCustom, ui-sans-serif, system-ui;
  color:var(--text-strong);
  font-size:clamp(1.9rem, 3vw, 2.3rem);
  margin:0 0 .35rem;
}

.booking-page-lead{
  color:#cfd2ee;
  margin:0 0 1.5rem;
  max-width:60ch;
}

.booking-step3-layout{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:1.5rem;
  align-items:flex-start;
}
@media (max-width:900px){
  .booking-step3-layout{
    grid-template-columns:1fr;
  }
}

.booking-card-title{
  margin:0 0 .75rem;
  font-family:AbelCustom, ui-sans-serif, system-ui;
  color:var(--text-strong);
  font-size:1.3rem;
}

.booking-summary-list{
  list-style:none;
  padding:0;
  margin:.4rem 0 0;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.booking-summary-extras{
  align-items:flex-start;
}

.booking-extras-list{
  margin:.25rem 0 0;
  padding-left:1.1rem;
  color:#e5e5e5;
  font-size:.92rem;
}

.summary-badge{
  display:inline-block;
  margin-left:.5rem;
  padding:.15rem .55rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  line-height:1.2;
  border:1px solid rgba(255,255,255,0.25);
}
.summary-badge--al{
  color:#facc15;
  border-color:rgba(250,204,21,0.45);
  background:rgba(250,204,21,0.08);
}

.booking-address-block{
  margin-top:1.1rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,0.18);
}

.booking-subtitle{
  margin:0 0 .5rem;
  font-family:AbelCustom, ui-sans-serif, system-ui;
  color:var(--text-strong);
  font-size:1.1rem;
}

.booking-address-readonly{
  margin:0;
  color:#e5e5e5;
}

.booking-address-note{
  margin:.5rem 0 0;
  color:#c7c7c7;
  font-size:.88rem;
}

.booking-total-card{
  position:sticky;
  top:110px;
}
@media (max-width:900px){
  .booking-total-card{
    position:static;
  }
}

.booking-total-breakdown{
  font-size:.9rem;
  color:#c7c7c7;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  margin-bottom:.4rem;
}

.booking-step3-actions{
  justify-content:space-between;
}

.btn-outline{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-strong);
}

/* ADD to public/css/forms.css (no duplicates) */

/* Centered header variant (used by step4) */
.booking-page-header--center{
  text-align:center;
}
.booking-page-lead--center{
  margin-left:auto;
  margin-right:auto;
}

/* Step 4 "added to cart" card */
.booking-step4-card{
  max-width:560px;
  margin:0 auto;
}

.booking-step4-status{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  margin-bottom:1.1rem;
}

.booking-step4-icon{
  width:28px;
  height:28px;
  border-radius:999px;
  background:#22c55e;
  color:#04110a;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  flex:0 0 auto;
  margin-top:.1rem;
}

.booking-step4-status-title{
  color:#ffffff;
  font-weight:700;
  margin:0 0 .15rem;
}

.booking-step4-status-text{
  color:#d1d5db;
  font-size:.95rem;
}

.booking-step4-actions{
  justify-content:center;
  gap:.75rem;
  margin-top:1.25rem;
}

/* If you don't already have a shared outline button */
.btn.btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,0.45);
  color:#ffffff;
}
.btn.btn-outline:hover{
  border-color:#ffffff;
  background:rgba(255,255,255,0.08);
}


/* =========================
   Auth (Login/Register)
   ========================= */

.auth-main{
  display:flex;
  justify-content:center;
  padding:3rem 1.5rem;
}

.auth-card{
  width:100%;
  max-width:460px;
}

/* Header */
.auth-header{
  margin-bottom:1.1rem;
}

.auth-title{
  margin:0 0 .25rem;
  font-family:AbelCustom, ui-sans-serif, system-ui;
  color:#ffffff;
  font-size:1.7rem;
}

.auth-subtitle{
  margin:0;
  color:#d1d5db;
  font-size:.95rem;
}

/* Row with remember + forgot */
.auth-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

.auth-remember{
  color:#ffffff;
  font-size:.92rem;
}

/* Actions */
.auth-actions{
  justify-content:stretch;
}

.auth-submit{
  width:100%;
}

/* Links + footer */
.auth-link{
  color:var(--accent);
  text-decoration:none;
  font-size:.92rem;
}

.auth-link:hover{
  text-decoration:underline;
}

.auth-footer{
  margin-top:.25rem;
  text-align:center;
  color:#d1d5db;
  font-size:.92rem;
}

/* Alerts + errors */
.form-alert{
  margin-bottom:1rem;
  padding:.7rem .9rem;
  border-radius:12px;
  font-size:.9rem;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(0,0,0,0.12);
  color:#ffffff;
}

.form-alert--success{
  background:rgba(34,197,94,0.10);
  border-color:rgba(34,197,94,0.45);
  color:#bbf7d0;
}

.form-error{
  color:#f97373;
  font-size:.85rem;
}

/* =========================
   Dashboard buttons
   ========================= */

.dash-card .btn,
.calendar-card .btn,
.avail-side button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .7rem 1.05rem;
  border-radius: 12px;

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

  color: #ffffff;
  font-weight: 600;
  font-size: .95rem;

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

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

/* Hover = clearly interactive */
.dash-card .btn:hover,
.calendar-card .btn:hover,
.avail-side button:hover {
  border-color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}

/* Active press */
.dash-card .btn:active,
.calendar-card .btn:active,
.avail-side button:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0,0,0,0.16);
}

/* Disabled */
.dash-card .btn:disabled,
.calendar-card .btn:disabled,
.avail-side button:disabled {
  cursor: not-allowed;
  opacity: .55;
  box-shadow: none;
}

/* Primary buttons keep accent but gain depth */
.btn-primary {
  background: rgba(79,70,229,0.35);
  border-color: rgba(79,70,229,0.75);
}

.btn-primary:hover {
  background: rgba(79,70,229,0.45);
  border-color: rgba(99,102,241,0.95);
}