/* ============================================================
   REQUEST A QUOTE — PAGE STYLES
   Built on the shared RoyalCraft tokens (styles/main.css).
   No token overrides — fully theme-aware (light/dark).
   ============================================================ */

/* Banner image for this page (keeps the shared .page-banner) */
.page-banner .banner-bg{
  background-image: url('https://images.unsplash.com/photo-1556909212-d5b604d0c90d?q=80&w=1800&auto=format&fit=crop');
}

/* Layout: form + aside */
.quote-layout{
  display:grid; gap:40px;
  grid-template-columns:1fr;
  align-items:start;
}
@media(min-width:980px){
  .quote-layout{ grid-template-columns:1.35fr 1fr; gap:56px; }
}

/* ----- Form card ----- */
.quote-form-card{
  background:var(--bg-surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:36px 30px;
  box-shadow:0 30px 70px -40px rgba(10,35,66,.4);
}
@media(min-width:768px){ .quote-form-card{ padding:46px 44px; } }
.quote-form-card .eyebrow{ margin-bottom:14px; }
.quote-form-card h2{ margin-bottom:8px; }
.quote-form-card .form-intro{ color:var(--text-muted); font-size:.96rem; margin-bottom:32px; }

.q-field{ margin-bottom:22px; }
.q-field label{
  display:block; font-size:.74rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-muted); margin-bottom:9px;
}
.q-field input,
.q-field select,
.q-field textarea{
  width:100%; padding:14px 16px;
  font-family:var(--font-body); font-size:.95rem; color:var(--text-main);
  background:var(--bg-alt); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.q-field textarea{ resize:vertical; min-height:130px; line-height:1.7; }
.q-field input::placeholder,
.q-field textarea::placeholder{ color:var(--text-muted); opacity:.7; }
.q-field input:focus,
.q-field select:focus,
.q-field textarea:focus{
  outline:none; background:var(--bg-surface);
  border-color:var(--gold); box-shadow:0 4px 16px -6px rgba(212,175,55,.4);
}
/* Native <select> options inherit theme surface so they're readable in dark mode */
.q-field select option{ background:var(--bg-surface); color:var(--text-main); }

.q-row{ display:grid; grid-template-columns:1fr; gap:0 22px; }
@media(min-width:560px){ .q-row{ grid-template-columns:1fr 1fr; } }

.quote-form-card .btn{ width:100%; margin-top:6px; }

/* Flash messages */
.q-flash{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 18px; border-radius:var(--radius-sm); margin-bottom:28px;
  font-size:.92rem; line-height:1.5;
}
.q-flash svg{ width:20px; height:20px; flex-shrink:0; margin-top:1px; }
.q-flash.ok{ background:rgba(46,139,87,.1); border:1px solid rgba(46,139,87,.35); color:#2E8B57; }
.q-flash.err{ background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.3); color:#C0392B; }
[data-theme="dark"] .q-flash.ok{ color:#5fd49a; }
[data-theme="dark"] .q-flash.err{ color:#e8857a; }

/* ----- Aside panel ----- */
.quote-aside{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:var(--text-inverse);
  border-radius:var(--radius-lg);
  padding:40px 34px;
  position:relative; overflow:hidden;
}
.quote-aside::after{
  content:''; position:absolute; right:-50px; top:-50px; width:200px; height:200px;
  background:radial-gradient(circle,rgba(212,175,55,.22),transparent 70%);
}
.quote-aside .eyebrow{ color:var(--gold-soft); }
.quote-aside .eyebrow::before{ background:var(--gold-soft); }
.quote-aside h3{ font-family:var(--font-display); font-size:1.5rem; color:var(--text-inverse); margin-bottom:8px; }
.quote-aside > p{ color:rgba(244,241,234,.7); font-size:.94rem; margin-bottom:30px; }

.q-steps{ position:relative; z-index:1; }
.q-step{ display:flex; gap:16px; padding-bottom:26px; position:relative; }
.q-step:last-child{ padding-bottom:0; }
.q-step .n{
  width:40px; height:40px; flex-shrink:0; border-radius:50%;
  border:1px solid rgba(212,175,55,.45); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700;
}
.q-step h4{ font-family:var(--font-display); font-size:1.05rem; color:var(--text-inverse); margin-bottom:3px; }
.q-step p{ font-size:.88rem; color:rgba(244,241,234,.65); }

.q-aside-contact{
  margin-top:32px; padding-top:26px; border-top:1px solid rgba(244,241,234,.12);
  display:flex; flex-direction:column; gap:14px;
}
.q-aside-contact a, .q-aside-contact span{
  display:flex; align-items:center; gap:12px;
  font-size:.92rem; color:rgba(244,241,234,.8);
}
.q-aside-contact svg{ width:18px; height:18px; stroke:var(--gold); flex-shrink:0; }
.q-aside-contact a:hover{ color:var(--gold-soft); }