/* ============================================================================
   AYS Booking Wizard — premium black & gold theme (mobile-first, theme-agnostic)
   ========================================================================== */
:root {
  --ays-black:#0b0b0d;
  --ays-ink:#14151a;
  --ays-gold:#c9a24b;
  --ays-gold-2:#e7c878;
  --ays-gold-deep:#a8842f;
  --ays-gray:#7a8090;
  --ays-soft:#f4f5f7;
  --ays-line:#e6e8ec;
  --ays-bg:#ffffff;
  --ays-radius:16px;
  --ays-radius-sm:11px;
  --ays-shadow:0 18px 50px rgba(11,11,13,.10);
  --ays-shadow-sm:0 6px 18px rgba(11,11,13,.07);
}
#ays-booking-wizard *,#ays-booking-bar *{box-sizing:border-box}
#ays-booking-wizard{
  /* Inherit the active theme's font so the widget matches the rest of the site */
  font-family:inherit;
  color:var(--ays-ink);max-width:1200px;margin:0 auto;
  background:var(--ays-bg);border:1px solid var(--ays-line);
  border-radius:calc(var(--ays-radius) + 6px);padding:26px 26px 30px;
  box-shadow:var(--ays-shadow);
  -webkit-font-smoothing:antialiased;line-height:1.45;
}
/* Make every control inherit the theme font too (inputs/buttons default to UA font) */
#ays-booking-wizard input,#ays-booking-wizard select,#ays-booking-wizard textarea,
#ays-booking-wizard button,#ays-booking-bar button,#ays-booking-bar a{font-family:inherit}
/* Headings inside the wizard follow the theme heading font if it sets one */
#ays-booking-wizard h2,#ays-booking-wizard h3{font-family:inherit}

/* ---------- Step header ---------- */
.ays-steps{margin-bottom:24px}
.ays-steps-track{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;position:relative}
.ays-steps-track::before{content:"";position:absolute;top:21px;left:9%;right:9%;height:3px;background:var(--ays-line);border-radius:3px;z-index:0}
.ays-step{display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:none;cursor:default;flex:1;position:relative;z-index:1}
.ays-step.is-done{cursor:pointer}
.ays-step-num{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:16px;background:#eceef2;color:var(--ays-gray);
  border:3px solid var(--ays-bg);transition:.25s;box-shadow:0 0 0 1px var(--ays-line)
}
.ays-step.is-active .ays-step-num{
  background:linear-gradient(135deg,var(--ays-gold-2),var(--ays-gold-deep));
  color:#1a1407;box-shadow:0 8px 22px rgba(201,162,75,.5),0 0 0 1px var(--ays-gold-deep)
}
.ays-step.is-done .ays-step-num{background:var(--ays-black);color:var(--ays-gold-2);box-shadow:0 0 0 1px var(--ays-black)}
.ays-step-label{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ays-gray);text-align:center}
.ays-step.is-active .ays-step-label{color:var(--ays-ink)}

/* ---------- Booking-type tabs ---------- */
.ays-typetabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--ays-line)}
.ays-typetab{
  padding:11px 20px;border-radius:999px;border:1.5px solid var(--ays-line);background:#fff;
  font-weight:700;font-size:13.5px;letter-spacing:.2px;cursor:pointer;transition:.18s;color:#3a3f4a
}
.ays-typetab:hover{border-color:var(--ays-gold);color:var(--ays-ink)}
.ays-typetab.is-active{
  background:var(--ays-black);color:var(--ays-gold-2);border-color:var(--ays-black);
  box-shadow:0 8px 20px rgba(11,11,13,.22)
}

/* ---------- Phase 1 layout ---------- */
.ays-p1{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:26px}
@media (max-width:900px){.ays-p1{grid-template-columns:1fr}}
.ays-p1-form{display:flex;flex-direction:column;gap:15px}

/* ---------- Fields ---------- */
.ays-fld{display:flex;flex-direction:column;gap:7px}
.ays-fld-label{font-size:12.5px;font-weight:700;letter-spacing:.2px;color:#3a3f4a}
.ays-fld-input{
  width:100%;padding:13px 15px;border:1.5px solid var(--ays-line);border-radius:var(--ays-radius-sm);
  font-size:15px;background:#fcfcfd;transition:.15s;color:var(--ays-ink);font-family:inherit
}
.ays-fld-input::placeholder{color:#a7adba}
.ays-fld-input:focus{outline:none;border-color:var(--ays-gold);background:#fff;box-shadow:0 0 0 3.5px rgba(201,162,75,.16)}
select.ays-fld-input{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237a8090' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;cursor:pointer}
.ays-fld-input-wrap{position:relative;display:block}
.ays-fld-pin{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.85;line-height:1;font-size:15px;z-index:2}
.ays-fld-place{padding-left:42px}
.ays-fld-input-wrap .ays-fld-place{width:100%;display:block}
/* Google Places autocomplete dropdown — keep above everything and on-brand */
.pac-container{z-index:100000;border-radius:10px;box-shadow:var(--ays-shadow);border:1px solid var(--ays-line);font-family:inherit;margin-top:4px}
.pac-item{padding:8px 12px;cursor:pointer}
.pac-item:hover{background:#fbf6e9}

/* ---------- Buttons ---------- */
.ays-cta{
  appearance:none;border:none;cursor:pointer;width:100%;
  background:linear-gradient(135deg,var(--ays-gold-2),var(--ays-gold-deep));
  color:#1a1407;font-weight:800;font-size:15px;letter-spacing:.3px;
  padding:15px 22px;border-radius:var(--ays-radius-sm);transition:.16s;
  box-shadow:0 10px 24px rgba(168,132,47,.32)
}
.ays-cta:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 14px 30px rgba(168,132,47,.4)}
.ays-cta:active{transform:translateY(0)}
.ays-cta:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.ays-cta-sm{width:auto;padding:11px 20px;font-size:14px}
.ays-cta-lg{padding:17px 24px;font-size:16px;margin-top:8px}
.ays-cta.is-selected{background:var(--ays-black);color:var(--ays-gold-2);box-shadow:none}

/* ---------- Map ---------- */
.ays-p1-map{display:flex;flex-direction:column;gap:13px}
.ays-map-canvas{
  width:100%;height:440px;border-radius:var(--ays-radius);overflow:hidden;
  background:#eceef2;border:1px solid var(--ays-line);position:relative
}
.ays-map-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:30px;
  background:radial-gradient(120% 120% at 50% 0%,#1c1d22 0%,#0b0b0d 70%);color:#e9eaf0
}
.ays-map-placeholder-mark{
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:22px;letter-spacing:1px;color:#1a1407;margin-bottom:4px;
  background:linear-gradient(135deg,var(--ays-gold-2),var(--ays-gold-deep));
  box-shadow:0 10px 30px rgba(201,162,75,.45)
}
.ays-map-placeholder-title{font-size:18px;font-weight:800;color:#fff;letter-spacing:.3px}
.ays-map-placeholder-sub{font-size:13.5px;color:#aeb4c0;max-width:320px}
.ays-stats{display:flex;gap:13px}
.ays-stat{flex:1;display:flex;align-items:center;gap:12px;padding:15px 16px;border:1px solid var(--ays-line);border-radius:var(--ays-radius-sm);background:#fbfbfc;box-shadow:var(--ays-shadow-sm)}
.ays-stat-ico{font-size:22px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(201,162,75,.12)}
.ays-stat-label{font-size:10.5px;font-weight:800;letter-spacing:.7px;color:var(--ays-gray)}
.ays-stat-val{font-size:19px;font-weight:800;color:var(--ays-ink)}

/* ---------- Phase 2 / 3 layout ---------- */
.ays-p2,.ays-p3{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.ays-p2,.ays-p3{grid-template-columns:1fr}}

/* ---------- Vehicle cards ---------- */
.ays-vlist{display:flex;flex-direction:column;gap:15px}
.ays-vcard-pub{
  display:grid;grid-template-columns:170px 1fr auto;gap:18px;align-items:center;
  padding:16px;border:1.5px solid var(--ays-line);border-radius:var(--ays-radius);
  transition:.18s;background:#fff
}
.ays-vcard-pub:hover{border-color:var(--ays-gold);box-shadow:var(--ays-shadow);transform:translateY(-2px)}
.ays-vcard-pub.is-selected{border-color:var(--ays-gold);background:linear-gradient(0deg,#fffdf6,#fff)}
.ays-vcard-pub-img{width:170px;height:104px;border-radius:var(--ays-radius-sm);background:#eceef2 center/cover no-repeat;display:grid;place-items:center}
.ays-vcard-pub-placeholder{font-size:12px;color:var(--ays-gray)}
.ays-vcard-pub-title{font-weight:800;font-size:17px;margin-bottom:8px}
.ays-vcard-pub-specs{display:flex;gap:16px;flex-wrap:wrap}
.ays-vcard-pub-spec{font-size:13px;color:var(--ays-gray);text-transform:capitalize}
.ays-vcard-pub-right{text-align:right;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.ays-vcard-pub-price{font-size:24px;font-weight:900;color:var(--ays-ink);letter-spacing:-.5px}
.ays-vcard-pub-price-quote{font-size:15px;font-weight:800;color:var(--ays-gold-deep)}
.ays-vcard-pub-price-na{font-size:14px;color:var(--ays-gray)}

/* ---------- Summary ---------- */
.ays-summary{background:#fbfbfc;border:1px solid var(--ays-line);border-radius:var(--ays-radius);padding:20px;box-shadow:var(--ays-shadow-sm);position:sticky;top:16px}
/* Keep a tall summary scrollable instead of overflowing past the viewport. */
@media (min-width:901px){.ays-summary{max-height:calc(100vh - 32px);overflow-y:auto}}
/* Below 900px the grid collapses to one column and the summary stacks ABOVE the
   content — sticky there pins it over the vehicle cards and hides them. Static. */
@media (max-width:900px){
  .ays-summary{position:static;top:auto;max-height:none;overflow:visible}
}
.ays-summary-h{font-size:11px;font-weight:900;letter-spacing:1.4px;color:var(--ays-gold-deep);margin-bottom:14px}
.ays-summary-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #eef0f3}
.ays-summary-label{font-size:12.5px;color:var(--ays-gray)}
.ays-summary-value{font-size:12.5px;font-weight:700;text-align:right;max-width:60%}
.ays-summary-totalrow{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:2px solid var(--ays-black)}
.ays-summary-totalrow>div:first-child{font-weight:800;font-size:14px}
.ays-summary-total{font-size:24px;font-weight:900;color:var(--ays-ink)}
.ays-back{margin-top:16px;background:none;border:none;color:var(--ays-gray);cursor:pointer;font-weight:700;font-size:13.5px;padding:0}
.ays-back:hover{color:var(--ays-ink)}

/* ---------- Phase 3 form ---------- */
.ays-p3-form{display:flex;flex-direction:column;gap:8px}
.ays-p3-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.ays-p3-h{font-size:15px;font-weight:800;margin:18px 0 6px;padding-bottom:8px;border-bottom:1px solid var(--ays-line);letter-spacing:.2px}
.ays-p3-h:first-child{margin-top:0}

/* ---------- Add-ons ---------- */
.ays-addons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px}
.ays-addon-card{display:flex;gap:11px;align-items:center;padding:13px;border:1.5px solid var(--ays-line);border-radius:var(--ays-radius-sm);cursor:pointer;transition:.15s;background:#fff}
.ays-addon-card:hover{border-color:var(--ays-gold)}
.ays-addon-card.is-selected{border-color:var(--ays-gold);background:#fffdf6}
.ays-addon-card input{width:18px;height:18px;accent-color:var(--ays-gold-deep)}
.ays-addon-card-body{display:flex;flex-direction:column;gap:2px}
.ays-addon-card-name{font-weight:700;font-size:14px}
.ays-addon-card-price{font-size:13px;color:var(--ays-gold-deep);font-weight:700}

/* ---------- Checkbox ---------- */
.ays-checkbox{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.ays-checkbox input{width:18px;height:18px;accent-color:var(--ays-gold-deep)}

/* Field hint + checkout reassurance note */
.ays-fld-hint{font-size:12px;color:var(--ays-gray);margin-top:2px}
.ays-checkout-note{margin:16px 0 4px;padding:13px 15px;background:#fbf6e9;border:1px solid #ecd9a8;border-radius:var(--ays-radius-sm);font-size:13px;color:#6b5a2f;line-height:1.5}

/* ---------- Thank-you / states ---------- */
.ays-thanks{text-align:center;padding:56px 20px}
.ays-thanks-icon{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,var(--ays-gold-2),var(--ays-gold-deep));color:#1a1407;font-size:34px;font-weight:900;display:grid;place-items:center;margin:0 auto 20px;box-shadow:0 12px 30px rgba(201,162,75,.4)}
.ays-thanks h2{font-size:28px;margin:0 0 10px;color:var(--ays-ink)}
.ays-thanks p{color:#4b5563;max-width:520px;margin:0 auto;font-size:15px}
.ays-error{background:#fef2f2;border:1px solid #f6caca;color:#9b1c1c;padding:13px 15px;border-radius:var(--ays-radius-sm);font-size:14px;font-weight:600}
.ays-loading-block,.ays-empty{padding:40px;text-align:center;color:var(--ays-gray);font-weight:600}

/* ---------- Sticky bar ---------- */
.ays-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,#16171c,var(--ays-black));color:#fff;padding:14px 18px;border-radius:var(--ays-radius);box-shadow:var(--ays-shadow)}
.ays-bar-title{font-weight:800;letter-spacing:.3px;color:#fff}
.ays-bar-actions .ays-cta{width:auto}

/* ---------- Responsive ---------- */
@media (max-width:560px){
  #ays-booking-wizard{padding:18px 16px 22px;border-radius:var(--ays-radius)}
  .ays-step-label{font-size:10px}
  .ays-step-num{width:38px;height:38px;font-size:14px}
  .ays-p3-row{grid-template-columns:1fr}
  .ays-vcard-pub{grid-template-columns:90px 1fr;grid-auto-rows:auto}
  .ays-vcard-pub-img{width:90px;height:64px}
  .ays-vcard-pub-right{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center}
  .ays-map-canvas{height:280px}
  .ays-typetab{padding:9px 15px;font-size:12.5px}
}