/* ==========================================================================
   DAYANA — Contact / Request a Quote page layout
   Request form (left) with the "what happens next" steps (right).
   Form controls are page-specific here; promote to components.css when a
   second form appears.
   ========================================================================== */

.request { position: relative; overflow: hidden; }
.request__stripes { position: absolute; inset-inline-end: 0; inset-block: 0; inline-size: 40%; pointer-events: none; background: repeating-linear-gradient(-32deg, transparent 0 22px, rgba(43, 58, 152, 0.06) 22px 23px); mask-image: linear-gradient(to right, transparent, rgba(0,0,0,1) 70%); }
.request__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.hero-panel__item a { color: #fff; }
.hero-panel__item a:hover { color: var(--c-accent); }

/* Form */
.form { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--c-card); border: 1px solid var(--c-border); border-block-start: 4px solid var(--c-accent); border-radius: 2px; }
.form__row { display: grid; gap: 1.25rem; }
.form__field { display: grid; gap: 0.4rem; }
.form__label { font-size: 0.875rem; font-weight: 600; color: var(--c-heading); }
.form__req { color: var(--c-accent); }
.form__input { inline-size: 100%; min-block-size: 48px; padding: 0.7rem 0.9rem; font: inherit; font-size: 1rem; color: var(--c-heading); background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 2px; transition: border-color 0.25s ease, background-color 0.25s ease; }
.form__input:focus { outline: 0; border-color: var(--c-accent); background: var(--c-card); }
.form__input[aria-invalid="true"] { border-color: #c62828; }
.form__textarea { min-block-size: 160px; resize: vertical; }
.form__hint { font-size: 0.8125rem; color: var(--c-muted); line-height: 1.45; }
.form__error { font-size: 0.8125rem; color: #c62828; }
.form__select { position: relative; }
.form__select select { appearance: none; padding-inline-end: 2.5rem; cursor: pointer; }
.form__select svg { position: absolute; inset-inline-end: 0.85rem; inset-block-start: 50%; inline-size: 18px; block-size: 18px; transform: translateY(-50%); pointer-events: none; color: var(--c-secondary); }
.form__hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.form__actions { display: flex; justify-content: center; }
.form__submit { min-inline-size: 220px; }
.form__submit .form__spinner { display: none; inline-size: 16px; block-size: 16px; border: 2px solid rgba(255,255,255,0.4); border-block-start-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
.form.is-sending .form__submit { pointer-events: none; opacity: 0.8; }
.form.is-sending .form__spinner { display: inline-block; }
.form.is-sending .form__submit > svg:last-child { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__message { padding: 0.9rem 1rem; border-radius: 2px; border: 1px solid var(--c-border); font-weight: 500; }
.form__message--success { background: rgba(11, 142, 215, 0.1); border-color: var(--c-accent); color: var(--c-heading); }
.form__message--error { background: rgba(198, 40, 40, 0.08); border-color: #c62828; color: #8e1b1b; }

/* What happens next */
.request__aside { display: grid; gap: 1.5rem; align-content: start; }
.steps { padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--c-primary); color: var(--c-on-dark-muted); border-radius: 2px; }
.steps__title { color: #fff; font-size: 1.25rem; margin-block-end: 1.25rem; }
.steps__list { position: relative; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: flex; gap: 0.9rem; align-items: flex-start; }
.step .icon-tile { flex: none; background: rgba(255, 255, 255, 0.1); color: #fff; }
.step__title { color: #fff; font-size: 1rem; margin-block-end: 0.25rem; }
.step p { font-size: 0.9rem; line-height: 1.5; }
.step + .step::before { content: ""; position: absolute; inset-inline-start: 27px; inset-block-start: -1rem; block-size: 1rem; inline-size: 2px; background: rgba(255, 255, 255, 0.18); }
.request__media { aspect-ratio: 4 / 3; border: 1px solid var(--c-border); }

@media (max-width: 1023.98px) {
  .request__form-col .section-head { text-align: center; }
  .request__media { display: none; }
}
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .request__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .request__aside { position: sticky; inset-block-start: 110px; }
  .form__actions { justify-content: flex-start; }
}