/* ==========================================================================
   Αστερόπλοιο — form.css (φόρμα αιτήματος)
   ========================================================================== */

.request { padding-bottom: calc(var(--section) + 24px); }
.request.section--cream { padding-top: calc(var(--section) + 40px); }
.request__grid { display: grid; gap: var(--s-7); align-items: start; }
.request__lead { margin-top: var(--s-5); font-size: var(--fs-lead); max-width: 40ch; }
.request__notes { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.request__notes li { display: flex; gap: .6em; align-items: flex-start; color: var(--c-ink-soft); }
.request__notes .icon { margin-top: .2em; color: var(--c-ink); }
.request__phone { margin-top: var(--s-6); font-weight: 600; }
.request__phone-link { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-family: var(--f-head); font-weight: 700; font-size: 1.4rem; text-decoration-color: var(--c-yellow); }
@media (min-width: 960px) { .request__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); } }

.request__panel { background: var(--c-white); border: var(--border); border-radius: var(--radius); padding: clamp(20px, 3.5vw, 40px); box-shadow: 10px 10px 0 0 var(--c-yellow); position: relative; overflow: hidden; }

.req-form { display: grid; gap: var(--s-5); }
.req-form__legend { font-size: var(--fs-small); color: var(--c-ink-soft); }
.req-form__alert {
  display: flex; gap: .6em; align-items: flex-start; padding: var(--s-4); border-radius: var(--radius-sm);
  background: var(--c-danger-bg); color: var(--c-danger); border: 2px solid currentColor; font-weight: 600;
}
.req-form__alert .icon { margin-top: .15em; }

.field { display: grid; gap: 6px; }
.field label, .field__label { font-weight: 700; }
.field__req { color: var(--c-danger); margin-left: 2px; }
.field__opt { font-weight: 400; color: var(--c-ink-soft); }
.field__hint { font-size: var(--fs-small); color: var(--c-ink-soft); }
.field__fixed { padding: 12px 16px; background: var(--c-cream); border-radius: var(--radius-sm); font-weight: 600; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px;
  background: var(--c-white); border: 2px solid var(--c-ink-soft); border-radius: var(--radius-sm);
  font-size: 1.0625rem; line-height: 1.4; transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%), linear-gradient(135deg, var(--c-ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--c-ink); border-radius: var(--radius-sm); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--c-danger); background: #FFFBFA; }
.field__error { display: flex; gap: .4em; align-items: flex-start; color: var(--c-danger); font-size: var(--fs-small); font-weight: 600; }
.field__error:empty { display: none; }
.field__error .icon { width: 1.1em; height: 1.1em; margin-top: .15em; }

.field-row { display: grid; gap: var(--s-5); }
@media (min-width: 600px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

.field-group { border: 0; margin: 0; padding: var(--s-4) 0 0; border-top: 1px dashed var(--c-line); display: grid; gap: var(--s-4); min-width: 0; }
.field-group legend { font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; padding: 0; float: left; width: 100%; }
.field-group legend + * { clear: both; }
.field-group__note { font-family: var(--f-body); font-weight: 400; font-size: var(--fs-small); color: var(--c-ink-soft); }
.js [data-hide-initially] { display: none; }

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--s-3); }
.field--check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--c-ink); }
.field--check label { font-weight: 400; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.req-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); padding-top: var(--s-2); }
.req-form__privacy { font-size: var(--fs-small); color: var(--c-ink-soft); max-width: 36ch; }
.req-form__privacy a { font-weight: 700; color: var(--c-ink); }
.req-form.is-sending [data-req-submit] { opacity: .7; pointer-events: none; }

/* ---------- Success ---------- */
.req-success { text-align: center; padding-block: var(--s-4); }
.req-success:focus { outline: none; }
.req-success__art { height: 150px; display: grid; place-items: end center; margin-bottom: var(--s-4); }
.req-success__ship { position: relative; width: 150px; }
.req-success__img { width: 150px; }
.req-success__letter { position: absolute; left: 34%; bottom: -26px; width: 38px; height: 38px; transform: rotate(-8deg); }
.req-success__ship::after { content: ""; position: absolute; left: 47%; bottom: -8px; width: 2px; height: 12px; background: var(--c-ink); }
.req-success__title { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-h2); margin-top: var(--s-6); }
.req-success__text { font-size: var(--fs-lead); max-width: 34ch; margin: var(--s-3) auto 0; }
.req-success__number { margin-top: var(--s-5); display: inline-block; padding: 8px 16px; background: var(--c-cream); border-radius: var(--radius-pill); }
.motion-ok .req-success.is-live .req-success__ship { animation: takeoff 2.6s var(--ease-out) both; }
@keyframes takeoff {
  0% { transform: translate(-40px, 60px) rotate(6deg) scale(.8); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translate(0, 0) rotate(-3deg) scale(1); opacity: 1; }
}