/* =============================================================================
   360 School Trips — quote request form (contactus.php)
   Design layer only. Every input name, attribute and handler is untouched;
   this file restyles the wrappers around them. Namespaced .cq-*.
   ========================================================================== */

.cq {
  --cq-ink:      #16202F;
  --cq-muted:    #5B6779;
  --cq-soft:     #6B7280;
  --cq-line:     #A99CC8;   /* soft lavender, 1px — visible without weight */
  --cq-line-2:   #7B67AA;   /* hover */
  --cq-accent:   #6D28A8;
  --cq-accent-2: #8B5CF6;
  --cq-accent-dk:#58207F;
  --cq-tint:     #F5F2FC;
  --cq-green:    #2E7D32;
  --cq-font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cq-ease:     cubic-bezier(.4, 0, .2, 1);

  padding: 56px 0 72px;
  background:
    radial-gradient(900px 420px at 8% -8%, #EFE9FB 0%, rgba(239,233,251,0) 70%),
    radial-gradient(700px 380px at 98% 4%, #EAF3FB 0%, rgba(234,243,251,0) 70%),
    linear-gradient(#FBFAFE, #FFFFFF 60%);
  font-family: var(--cq-font);
  color: var(--cq-ink);
}
.cq *, .cq *::before, .cq *::after { box-sizing: border-box; }

.cq__grid {
  display: grid;
  grid-template-columns: 352px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* -----------------------------------------------------------------------------
   Left panel
   -------------------------------------------------------------------------- */
.cq-aside {
  position: sticky;
  top: 132px;
  padding: 32px 30px;
  border-radius: 20px;
  background: linear-gradient(158deg, #2A1150 0%, #4C1D95 52%, #6D28A8 100%);
  color: #fff;
  box-shadow: 0 24px 48px -28px rgba(42, 17, 80, .7);
  overflow: hidden;
}
.cq-aside::before {
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.cq-aside__eyebrow {
  margin: 0 0 10px;
  color: #D9C7F2;
  font: 700 11px/1.4 var(--cq-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cq-aside__title {
  margin: 0 0 12px;
  color: #fff;
  font: 700 27px/1.25 var(--cq-font);
  letter-spacing: -.01em;
}
.cq-aside__text {
  margin: 0 0 26px;
  color: rgba(255,255,255,.82) !important;
  font: 400 14.5px/1.65 var(--cq-font);
}
.cq-perks { margin: 0 0 26px; padding: 0; list-style: none; }
.cq-perk {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0 0 16px;
}
.cq-perk__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(255,255,255,.13);
  color: #fff;
  font-size: 15px;
}
.cq-perk__title {
  display: block;
  color: #fff;
  font: 600 14.5px/1.35 var(--cq-font);
}
.cq-perk__text {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.72);
  font: 400 13px/1.5 var(--cq-font);
}
.cq-aside__rule { height: 1px; margin: 0 0 20px; background: rgba(255,255,255,.16); }
.cq-aside__contact {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
  color: #fff !important;
  font: 600 15px/1 var(--cq-font);
  text-decoration: none;
}
.cq-aside__contact .fa { color: #C9AEEC; width: 16px; text-align: center; }
.cq-aside__contact:hover,
.cq-aside__contact:focus { color: #fff !important; text-decoration: underline; }
.cq-aside__license {
  margin: 18px 0 0;
  color: rgba(255,255,255,.62) !important;
  font: 400 12px/1.55 var(--cq-font);
}

/* -----------------------------------------------------------------------------
   Form card
   -------------------------------------------------------------------------- */
.cq-card {
  padding: 34px 36px 38px;
  border: 1px solid #C9BEE2;   /* was #EEF0F5 — 1.09:1, invisible on the page */
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(16,24,40,.04), 0 30px 60px -38px rgba(42,17,80,.45);
}
.cq-card__head { margin-bottom: 26px; }
.cq-card__title {
  margin: 0 0 6px;
  color: var(--cq-ink);
  font: 700 23px/1.3 var(--cq-font);
  letter-spacing: -.01em;
}
.cq-card__sub {
  margin: 0;
  color: var(--cq-muted) !important;
  font: 400 14.5px/1.6 var(--cq-font);
}

/* Completion meter */
.cq-progress { margin-top: 20px; }
.cq-progress__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.cq-progress__label {
  margin: 0;
  color: var(--cq-soft) !important;
  font: 600 12.5px/1 var(--cq-font);
  letter-spacing: .02em;
}
.cq-progress__pct {
  color: var(--cq-accent);
  font: 700 12.5px/1 var(--cq-font);
  font-variant-numeric: tabular-nums;
}
.cq-progress__track {
  height: 7px;
  border-radius: 99px;
  background: #EFEDF7;
  overflow: hidden;
}
.cq-progress__fill {
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cq-accent), var(--cq-accent-2));
  transition: width .45s var(--cq-ease);
}

/* -----------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.cq-set {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  animation: cq-rise .5s var(--cq-ease) both;
}
.cq-set:nth-of-type(2) { animation-delay: .05s; }
.cq-set:nth-of-type(3) { animation-delay: .1s; }
.cq-set:nth-of-type(4) { animation-delay: .15s; }
.cq-set:nth-of-type(5) { animation-delay: .2s; }
@keyframes cq-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Section headings sit on a tinted bar with an accent edge, so they read as
   headings rather than another form control. */
.cq-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid #E9E2F6;
  border-left: 3px solid var(--cq-accent);
  border-radius: 12px;
  background: linear-gradient(90deg, #F3EFFB 0%, #FBFAFE 100%);
}
.cq-legend__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--cq-accent);
  color: #fff;
  font: 700 13px/1 var(--cq-font);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px -2px rgba(109,40,168,.6);
}
.cq-legend__title {
  display: block;
  color: var(--cq-ink);
  font: 700 16px/1.3 var(--cq-font);
}
.cq-legend__hint {
  display: block;
  margin-top: 2px;
  color: var(--cq-muted);   /* --cq-soft drops to 4.27:1 on the tinted bar */
  font: 400 12.5px/1.4 var(--cq-font);
}

.cq-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
.cq-field { min-width: 0; }
.cq-field--full { grid-column: 1 / -1; }

/* -----------------------------------------------------------------------------
   Labels + controls
   -------------------------------------------------------------------------- */
/* :not(.cq-chip) — chip labels are grid items and must not become flex rows,
   or their inner box collapses to the width of its text. */
.cq-card label:not(.cq-chip),
.cq-card .cq-label {
  display: flex !important;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px !important;
  color: var(--cq-ink) !important;
  font: 600 13px/1.4 var(--cq-font) !important;
}
.cq-label .fa { color: var(--cq-accent); font-size: 12.5px; width: 14px; text-align: center; }

.cq-card .form-control {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 15px;
  /* 2px, not 1.5 — Chrome rounds a 1.5px border down to 1px when painting */
  border: 1px solid var(--cq-line);
  border-radius: 12px;
  background-color: #FBFBFD;
  color: var(--cq-ink);
  font: 400 14.5px/1.5 var(--cq-font);
  box-shadow: none;
  transition: border-color .18s var(--cq-ease), background-color .18s var(--cq-ease), box-shadow .18s var(--cq-ease);
}
.cq-card textarea.form-control {
  height: auto;
  min-height: 120px;
  padding: 13px 15px;
  resize: vertical;
}
.cq-card .form-control::placeholder { color: #A0A6B4; opacity: 1; }
.cq-card .form-control:hover { border-color: var(--cq-line-2); }
.cq-card .form-control:focus {
  outline: none;
  border-color: var(--cq-accent);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(109,40,168,.12);
}

/* Filled + valid gets a quiet tick — progress you can feel while typing */
.cq-card input.form-control:valid:not(:placeholder-shown),
.cq-card input[type="date"].form-control:valid {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.6l3 3 6-6.6' fill='none' stroke='%232E7D32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.cq-card input[type="date"].form-control:invalid { background-image: none; }

.cq-card select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}

/* Prefixed inputs ($ / #) */
.cq-adorn { position: relative; }
.cq-adorn__sym {
  position: absolute;
  top: 50%; left: 15px;
  transform: translateY(-50%);
  color: var(--cq-soft);
  font: 600 14px/1 var(--cq-font);
  pointer-events: none;
}
.cq-adorn .form-control { padding-left: 32px; }

.cq-hint {
  display: block;
  margin-top: 6px;
  color: var(--cq-soft);
  font: 400 12px/1.5 var(--cq-font);
}

/* -----------------------------------------------------------------------------
   Transport chips (native radios, restyled)
   -------------------------------------------------------------------------- */
.cq-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.cq-chip { display: block; margin: 0 !important; cursor: pointer; }
.cq-chip input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cq-chip__box {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 74px;
  padding: 0 8px;
  border: 1px solid var(--cq-line);
  border-radius: 13px;
  background: #FBFBFD;
  color: var(--cq-muted);
  font: 600 13px/1 var(--cq-font);
  text-align: center;
  transition: all .18s var(--cq-ease);
}
.cq-chip__box .fa { font-size: 17px; color: #97A0B0; transition: color .18s var(--cq-ease); }
.cq-chip:hover .cq-chip__box { border-color: var(--cq-accent-2); background: #fff; }
.cq-chip input:checked + .cq-chip__box {
  border-color: var(--cq-accent);
  background: var(--cq-tint);
  color: var(--cq-accent);
  box-shadow: inset 0 0 0 1px var(--cq-accent);
}
.cq-chip input:checked + .cq-chip__box .fa { color: var(--cq-accent); }
.cq-chip input:focus-visible + .cq-chip__box {
  outline: 2px solid var(--cq-accent);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   CAPTCHA tile
   -------------------------------------------------------------------------- */
.cq-captcha {
  padding: 18px;
  border: 1.5px dashed #DCD5EC;
  border-radius: 14px;
  background: #FBFAFE;
}
.cq-captcha .cq-label { margin-bottom: 10px !important; }
.cq-captcha__sum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 7px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--cq-line);
  color: var(--cq-ink);
  font: 700 16px/1 var(--cq-font);
  font-variant-numeric: tabular-nums;
}
.cq-captcha__sum .fa { color: var(--cq-accent); font-size: 13px; }
.cq-captcha small { display: block; margin-top: 8px; font: 500 12.5px/1.5 var(--cq-font); }

/* -----------------------------------------------------------------------------
   Submit
   -------------------------------------------------------------------------- */
.cq-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #F0F2F7;
}
.cq-card .cq-submit__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 34px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cq-accent) 0%, #7C3FBF 100%);
  color: #fff;
  font: 700 15.5px/1 var(--cq-font);
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(109,40,168,.8);
  transition: transform .18s var(--cq-ease), box-shadow .18s var(--cq-ease), background .18s var(--cq-ease);
}
.cq-card .cq-submit__btn:hover {
  background: linear-gradient(135deg, var(--cq-accent-dk) 0%, #6B32A8 100%);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(109,40,168,.9);
}
.cq-card .cq-submit__btn:active { transform: translateY(0); }
.cq-card .cq-submit__btn:focus-visible { outline: 3px solid rgba(109,40,168,.4); outline-offset: 3px; }
.cq-submit__btn .fa { font-size: 15px; }
.cq-submit__note {
  margin: 0;
  color: var(--cq-soft) !important;
  font: 400 13px/1.5 var(--cq-font);
}
.cq-submit__note .fa { margin-right: 6px; color: var(--cq-green); }

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .cq__grid { grid-template-columns: 300px minmax(0, 1fr); gap: 22px; }
  .cq-card { padding: 30px 26px 32px; }
}

@media (max-width: 991px) {
  .cq { padding: 34px 0 56px; }
  .cq__grid { grid-template-columns: minmax(0, 1fr); }
  .cq-aside { position: static; padding: 26px 24px; }
  .cq-aside__title { font-size: 24px; }
  .cq-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
}

@media (max-width: 767px) {
  .cq__grid { padding: 0 16px; }
  .cq-card { padding: 24px 18px 28px; border-radius: 16px; }
  .cq-card__title { font-size: 20px; }
  .cq-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cq-perks { grid-template-columns: minmax(0, 1fr); }
  .cq-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cq-submit { flex-direction: column; align-items: stretch; text-align: center; }
  .cq-card .cq-submit__btn { justify-content: center; width: 100%; }
}

@media (max-width: 420px) {
  .cq-aside { padding: 22px 18px; }
  .cq-aside__title { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .cq *, .cq *::before, .cq *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .cq-card .cq-submit__btn:hover { transform: none; }
}