/* =========================================================
   TradieList Quote Wizard (quote-modal.css)
   FIXED + SECTIONED (Freeio modal + wizard)
   Notes:
   - Prevents "giant empty white space" feel by tightening layout
   - Keeps actions pinned to bottom while body scrolls
   - Mobile-safe sizing + better panel spacing
   ========================================================= */


/* =========================================================
   1) Trigger Button
   ========================================================= */
a.open-quote-modal,
.open-quote-modal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:10px;
  background:#f26522;
  color:#fff !important;
  font-weight:600;
  font-size:14px;
  line-height:1;
  text-decoration:none !important;
  border:2px solid #f26522;
  transition:all .2s ease;
  cursor:pointer;
}
a.open-quote-modal:hover,
.open-quote-modal:hover{
  background:#fff;
  color:#f26522 !important;
}
a.open-quote-modal:focus,
.open-quote-modal:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(242,101,34,.25);
}


/* =========================================================
   2) Modal Shell
   ========================================================= */
.tl-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
}
.tl-modal.is-open{ display:block; }

.tl-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}


.tl-modal__panel{
  position:relative;
  width:min(920px, calc(100% - 32px));
  margin:6vh auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;

  display:flex;
  flex-direction:column;
  height: 650px;
  max-height:88vh;
  padding:22px 22px 18px; /* bottom slightly tighter */
}

/* Close button */
.tl-modal__close{
  position:absolute;
  right:16px;
  top:14px;
  width:40px;
  height:40px;
  border:0;
  background:#f26522;
  color:#fff;
  border-radius:10px;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

body.tl-modal-open{ overflow:hidden; }


/* =========================================================
   3) Wizard Root / Layout
   ========================================================= */
#quoteWizardRoot{
  flex:1;
  min-height:0;          /* critical for scroll areas inside flex */
  display:flex;
  flex-direction:column;
}

.qz{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* Top spacing (keeps title away from close button) */
.qz__top{
  padding-right:56px;     /* prevents overlap under close button */
}

/* Progress */
.qz__progress{
  height:8px;
  background:#eee;
  border-radius:999px;
  overflow:hidden;
  margin:0 0 16px;
}
.qz__progress span{
  display:block;
  height:100%;
  width:0%;
  background:#f26522;
  border-radius:999px;
  transition:width .25s ease;
}

/* Title / subtitle */
.qz__title{
  font-size:22px;
  font-weight:700;
  margin:0 0 6px;
  color:#222;
}
.qz__sub{
  margin:0 0 14px;
  font-size:14px;
  color:#666;
  line-height:1.4;
}


/* =========================================================
   4) Form Structure
   ========================================================= */
#qzForm{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* ALWAYS respect hidden attribute */
[hidden],
.qz__step[hidden]{
  display:none !important;
}

/* Scrollable step body */
.qz__body{
  flex:1;
  min-height:0;
  overflow:auto;

  /* Better "not empty" feel */
  padding:6px 2px 12px;   /* bottom padding keeps last content clear */
}

/* Step container:
   - IMPORTANT: remove flex:1 so step doesn't force-stretch to full height
   - That stretch is what often looks like "huge empty white area" */
.qz__step{
  display:block;
  width:100%;
}

/* Step 1: keep hint visible (users need it), hide only label */
.qz__step[data-step="1"] .qz__label{
  display:none !important;
}
.qz__step[data-step="2"] .clear-location{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f3f3;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
/* Step-2 wrapper should position clear button correctly */
.qz__step[data-step="2"] .action-location{
  position:relative;
}

/* Step-2 input needs padding for clear button */
.qz__step[data-step="2"] input[name="location"]{
  padding-right:56px;
}

/* =========================================================
   5) Fields
   ========================================================= */
.qz__label{
  display:block;
  font-weight:600;
  margin:10px 0 6px;
}

.qz__input,
.qz__textarea{
  width:100%;
  padding:14px 14px;
  border:1px solid #ddd;
  border-radius:12px;
  font-size:14px;
  outline:none;
  background:#fff;
}

.qz__input:focus,
.qz__textarea:focus{
  border-color:#f26522;
  box-shadow:0 0 0 3px rgba(242,101,34,.18);
}

.qz__textarea{
  min-height:140px;
  resize:vertical;
}

.qz__hint{
  font-size:12px;
  color:#777;
  margin-top:8px;
}

/* Step 1 input tweak */
.qz__step[data-step="1"] .qz__input{
  border-radius:12px;
}

/* Radios */
.qz__radio label{
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 12px;
  border:1px solid #eee;
  border-radius:12px;
  margin-bottom:10px;
  cursor:pointer;
  user-select:none;
}

/* Consent */
.qz__consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:12px;
}
/* =========================================================
   Autocomplete Dropdown (hiPages-like)
   ========================================================= */
.qz__acWrap{
  position:relative;
}

.qz__acClear{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border:0;
  border-radius:999px;
  background:#f3f3f3;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.qz__ac{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 50;

  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  max-height: min(60vh, 420px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header row like screenshot */
.qz__acHeader{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:#f4f4f4;
  border-bottom:1px solid #e9e9e9;
}

.qz__acIcon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.qz__acHeaderText{
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:#6b6b6b;
}

/* List items */
.qz__acList{
  list-style:none;
  margin:0;
  padding:0;
  max-height:320px;
  overflow:auto;
}

.qz__acItem{
  padding:14px 14px;
  cursor:pointer;
  font-size:14px;
  color:#222;
  border-bottom:1px solid #f0f0f0;
}

.qz__acItem:hover{
  background:rgba(242,101,34,.10);
}

.qz__acItem.is-active{
  background:rgba(242,101,34,.14);
}

.qz__acItem--muted{
  cursor:default;
  color:#777;
  background:#fff !important;
}

/* Footer link like screenshot */
.qz__acFooter{
  padding:12px 14px;
  border-top:1px solid #eee;
  background:#fff;
}

.qz__acFooterLink{
  font-size:13px;
  text-decoration:none;
  color:#2b63f1;
}
.qz[data-step="1"] .qz__body{
  overflow: visible !important;
}

/* Google Places dropdown above modal */
.pac-container { z-index: 999999 !important; }


@media (max-width: 768px){
  .qz__acList{ max-height:260px; }
}

/* --- Hipages-like radio cards (for Property step) --- */
.qz__radio--cards .qz__card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 14px;
  border:1px solid #e6e6e6;
  border-radius:12px;
  margin-bottom:12px;
  cursor:pointer;
  background:#fff;
}

.qz__radio--cards .qz__card input{
  margin:0;
}

.qz__radio--cards .qz__cardText{
  font-size:15px;
  color:#222;
}

/* selected state */
.qz__radio--cards .qz__card:has(input:checked){
  border-color:#f26522;
  background:rgba(242,101,34,.08);
}

/* =========================================================
   6) Bottom Actions (pinned)
   ========================================================= */
.qz__actions{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  gap:12px;

  padding-top:14px;
  margin-top:10px;

  /* subtle separation */
  border-top:1px solid #f1f1f1;
  background:#fff;
}

/* Buttons */
.qz__btn{
  padding:12px 22px;
  border-radius:12px;
  border:2px solid #f26522;
  background:#f26522;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  min-width:110px;
}

.qz__btn--ghost{
  background:#f7b089;
  border-color:#f7b089;
  color:#fff;
}

.qz__btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* Hide Back on step 1 */
.qz[data-step="1"] #qzBack{
  display:none !important;
}


/* =========================================================
   7) Messages
   ========================================================= */
.qz__error{
  margin-top:12px;
  color:#b00020;
  font-weight:600;
}
.qz__success{
  margin-top:12px;
  font-weight:600;
}


/* =========================================================
   8) Responsive
   ========================================================= */
@media (max-width: 768px){
  .tl-modal__panel{
    width:calc(100% - 20px);
    margin:3vh auto;
    max-height:94vh;
    padding:18px 16px 14px;
    border-radius:14px;
  }
  .tl-modal__close{
    right:12px;
    top:10px;
    width:38px;
    height:38px;
    border-radius:10px;
  }
  .qz__title{ font-size:20px; }
  .qz__btn{ min-width:96px; padding:12px 16px; }
}

@media (max-width: 420px){
  .qz__actions{
    gap:10px;
  }
  .qz__btn{
    flex:1;              /* equal width buttons on tiny screens */
    min-width:0;
  }
}