/* =========================================================
   JERUCAS — MODERN QUOTE MODAL + ROUTE CTA + WHATSAPP HELP
   Final corrected version
========================================================= */

/* =========================================================
   ROUTE QUOTE CTA
========================================================= */

/* =========================================================
   JERUCAS — MODERN QUOTE MODAL + ROUTE CTA + WHATSAPP HELP
   Final corrected version
========================================================= */

/* =========================================================
   ROUTE QUOTE CTA
========================================================= */

.route-quote-card{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:20px;
  margin-top:2px;
  border:1px solid rgba(190,151,55,.32);
  border-radius:16px;
  background:linear-gradient(135deg,#fffdf7 0%,#f7f0dc 100%);
  box-shadow:0 12px 30px rgba(38,29,10,.08);
}

.route-quote-copy{
  display:grid;
  gap:4px;
}

.route-quote-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  color:#9a7418;
}

.route-quote-copy strong{
  font-size:18px;
  color:#18140b;
}

.route-quote-copy p{
  margin:0;
  color:#665f50;
  line-height:1.55;
}

.route-quote-button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border:0;
  border-radius:12px;
  background:#111;
  color:#d8b24a;
  font-weight:800;
  cursor:pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.route-quote-button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.18);
  background:#1b1b1b;
}

.route-quote-button:focus-visible{
  outline:3px solid rgba(212,175,55,.35);
  outline-offset:3px;
}

/* =========================================================
   MODAL BASE — HIDDEN BY DEFAULT
========================================================= */

.quote-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
}

.quote-modal.is-open,
.quote-modal[aria-hidden="false"]{
  display:flex;
}

.quote-modal[aria-hidden="true"]{
  display:none !important;
}

.quote-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.quote-modal-dialog{
  position:relative;
  z-index:2;
}

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

/* =========================================================
   MODERN MODAL CONTAINER
========================================================= */

.quote-modal-modern{
  width:min(980px,calc(100% - 28px));
  max-height:92vh;
  overflow:auto;
  border-radius:22px;
  background:#f6f3ec;
  border:1px solid rgba(212,175,55,.32);
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  scrollbar-width:thin;
  scrollbar-color:#b48a27 #ece6d8;
}

.quote-modal-modern::-webkit-scrollbar{
  width:10px;
}

.quote-modal-modern::-webkit-scrollbar-track{
  background:#ece6d8;
}

.quote-modal-modern::-webkit-scrollbar-thumb{
  background:#b48a27;
  border-radius:999px;
  border:2px solid #ece6d8;
}

.quote-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:5;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:25px;
  line-height:1;
  cursor:pointer;
  transition:
    transform .2s ease,
    background .2s ease;
}

.quote-modal-close:hover{
  transform:rotate(6deg) scale(1.04);
  background:rgba(0,0,0,.55);
}

/* =========================================================
   MODAL HEADER
========================================================= */

.quote-modern-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:30px 72px 30px 30px;
  color:#fff;
  background:
    radial-gradient(circle at top right,rgba(212,175,55,.22),transparent 34%),
    linear-gradient(135deg,#0d0d0d,#222);
}

.quote-modal-eyebrow{
  display:inline-block;
  color:#d8b24a;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
}

.quote-modern-header h2{
  margin:8px 0;
  font-size:clamp(26px,4vw,42px);
  line-height:1.1;
}

.quote-modern-header p{
  max-width:650px;
  margin:0;
  color:#d4d4d4;
  line-height:1.65;
}

.quote-secure-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 13px;
  border:1px solid rgba(212,175,55,.45);
  border-radius:999px;
  color:#d8b24a;
  background:rgba(212,175,55,.1);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

/* =========================================================
   MODAL FORM
========================================================= */

.quote-modern-form{
  display:grid;
  gap:18px;
  padding:24px;
}

.quote-modern-section{
  padding:22px;
  border:1px solid #e1dccf;
  border-radius:17px;
  background:#fff;
  box-shadow:0 10px 24px rgba(39,31,15,.05);
}

.quote-section-heading{
  display:flex;
  gap:13px;
  align-items:flex-start;
  margin-bottom:18px;
}

.quote-section-heading > span{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  min-width:38px;
  height:38px;
  border-radius:12px;
  background:#111;
  color:#d8b24a;
  font-weight:900;
}

.quote-section-heading h3{
  margin:0 0 3px;
  color:#17130b;
}

.quote-section-heading p{
  margin:0;
  color:#777064;
  line-height:1.5;
}

.quote-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.quote-form-grid label,
.quote-full-field{
  display:block;
  color:#242016;
  font-size:14px;
  font-weight:700;
}

.quote-full-field{
  grid-column:1 / -1;
}

.quote-modern-form input,
.quote-modern-form select,
.quote-modern-form textarea{
  width:100%;
  box-sizing:border-box;
  min-height:48px;
  margin-top:7px;
  padding:11px 13px;
  border:1px solid #d8d2c5;
  border-radius:11px;
  background:#fff;
  color:#171717;
  font:inherit;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.quote-modern-form textarea{
  min-height:110px;
  resize:vertical;
}

.quote-modern-form input:focus,
.quote-modern-form select:focus,
.quote-modern-form textarea:focus{
  outline:none;
  border-color:#b98d25;
  box-shadow:0 0 0 3px rgba(185,141,37,.12);
}

.quote-modern-form input::placeholder,
.quote-modern-form textarea::placeholder{
  color:#9a9489;
}

.quote-modern-form select:disabled,
.quote-modern-form input:disabled,
.quote-modern-form textarea:disabled{
  opacity:.65;
  cursor:not-allowed;
  background:#f3f0ea;
}

/* =========================================================
   CONDITIONAL SECTIONS
========================================================= */

.quote-conditional-fields{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #e7e1d5;
}

.quote-conditional-fields h4{
  margin:0 0 14px;
  color:#5d4a1d;
}

/* =========================================================
   EXTRAS
========================================================= */

.quote-extras-leg{
  padding:18px;
  border:1px solid #e2dac7;
  border-radius:14px;
  background:#fbf8f0;
}

.quote-extras-return{
  margin-top:14px;
  background:#f7f5ef;
}

.quote-extras-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}

.quote-extras-title div{
  display:grid;
  gap:3px;
}

.quote-extras-title span{
  color:#9b7418;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}

.quote-extras-title strong{
  color:#1e1a11;
}

.quote-extras-title b{
  color:#655b45;
  font-size:13px;
  text-align:right;
}

.quote-return-extras-controls{
  margin-top:16px;
}

.quote-same-extras-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding:14px;
  border:1px solid #ddd4c3;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}

.quote-checkbox-field{
  display:flex !important;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:12px 14px;
  border:1px solid #ddd4c3;
  border-radius:11px;
  background:#faf8f3;
  cursor:pointer;
}

.quote-same-extras-toggle input,
.quote-checkbox-field input{
  width:auto;
  min-height:auto;
  margin:0;
  accent-color:#b98d25;
}

/* =========================================================
   FORM MESSAGE
========================================================= */

.quote-form-message{
  display:none;
  padding:14px 16px;
  border-radius:12px;
  font-weight:700;
  line-height:1.5;
}

.quote-form-message:not(:empty){
  display:block;
}

.quote-form-message.is-success{
  color:#0d5f2d;
  background:#e6f7ed;
  border:1px solid #b7e4c7;
}

.quote-form-message.is-error{
  color:#8f1d1d;
  background:#fdeaea;
  border:1px solid #f2bcbc;
}

/* =========================================================
   MODAL ACTIONS
========================================================= */

.quote-modal-actions{
  position:sticky;
  bottom:-24px;
  z-index:3;
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:20px 0 4px;
  background:linear-gradient(
    to bottom,
    rgba(246,243,236,0),
    #f6f3ec 26%
  );
}

.quote-cancel-button,
.quote-submit-button{
  min-height:50px;
  padding:0 20px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

.quote-cancel-button{
  border:1px solid #cfc7b6;
  background:#fff;
  color:#29251c;
}

.quote-submit-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  background:#111;
  color:#d8b24a;
}

.quote-cancel-button:hover,
.quote-submit-button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}

.quote-submit-button:disabled{
  opacity:.65;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* =========================================================
   BOOKING SUBMIT BUTTON
========================================================= */

.booking-payment-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* =========================================================
   LOWER WHATSAPP SECTION
========================================================= */

.booking-help-section{
  padding:0 24px 70px;
  background:#f5f2eb;
}

.booking-help-card{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:28px;
  box-sizing:border-box;
  border-radius:20px;
  color:#fff;
  background:
    radial-gradient(circle at top right,rgba(212,175,55,.24),transparent 30%),
    linear-gradient(135deg,#101010,#242424);
  box-shadow:0 22px 55px rgba(0,0,0,.16);
}

.booking-help-icon{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:17px;
  background:#25d366;
  color:#fff;
  font-weight:900;
}

.booking-help-copy span{
  color:#d8b24a;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
}

.booking-help-copy h2{
  margin:5px 0 7px;
}

.booking-help-copy p{
  margin:0;
  color:#d2d2d2;
  line-height:1.6;
}

.booking-help-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 18px;
  border-radius:12px;
  background:#25d366;
  color:#071d0e;
  font-weight:900;
  text-decoration:none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.booking-help-button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(37,211,102,.22);
  background:#2ee26f;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:760px){

  .route-quote-card,
  .quote-modern-header{
    flex-direction:column;
    align-items:stretch;
  }

  .booking-help-card{
    grid-template-columns:1fr;
    text-align:left;
  }

  .route-quote-button,
  .booking-help-button{
    width:100%;
  }

  .quote-secure-badge{
    align-self:flex-start;
  }

  .quote-modern-form{
    padding:14px;
  }

  .quote-modern-section{
    padding:17px;
  }

  .quote-form-grid{
    grid-template-columns:1fr;
  }

  .quote-full-field{
    grid-column:auto;
  }

  .quote-modern-header{
    padding:26px 58px 24px 20px;
  }

  .quote-extras-title{
    flex-direction:column;
    align-items:flex-start;
  }

  .quote-extras-title b{
    text-align:left;
  }

  .quote-modal-actions{
    display:grid;
    grid-template-columns:1fr;
    bottom:-14px;
  }

  .quote-cancel-button,
  .quote-submit-button{
    width:100%;
  }
}

@media(max-width:480px){

  .quote-modal{
    padding:8px;
  }

  .quote-modal-modern{
    width:100%;
    max-height:96vh;
    border-radius:16px;
  }

  .quote-modern-header h2{
    font-size:28px;
  }

  .route-quote-card{
    padding:16px;
  }

  .booking-help-section{
    padding:0 14px 50px;
  }

  .booking-help-card{
    padding:22px;
  }
}