/* ==================================================================
   The site's form fields, in one place.

   Every data-entry form — guest and passenger details, payment, contact, tour
   requests, reservation lookup — draws its fields the same way: a white box,
   a hairline border, 8px corners, a green ring on focus. Each page used to carry
   its own copy in an inline <style>: grey-filled 48px boxes on one, white 38px
   boxes with a blue focus ring on the next.

   The search boxes at the top of the product pages (hotel, transfer, flight)
   are a different component — filled boxes on a card over a photograph — and
   keep their own, more specific rules in hotel.css.

   Loaded on every page by _Layout, after site.css and transfer-home.css.
   ================================================================== */

:root {
    --form-ink: #1a1a1a;
    --form-muted: #6b7671;
    --form-line: #d5dcd8;
    --form-line-hover: #b9c4be;
    --form-ring: rgba(0, 114, 150, .14);
    --form-error: #c3202f;
}

.form-control,
.form-select {
    min-height: 46px;
    border: 1px solid var(--form-line);
    border-radius: 8px;
    background-color: #fff;
    color: var(--form-ink);
    font-size: .95rem;
    font-weight: 400;
    padding: .6rem .85rem;
    box-shadow: 0 1px 2px rgba(16, 42, 34, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-select { padding-right: 2.25rem; }

textarea.form-control { min-height: 96px; }

.form-control:hover,
.form-select:hover { border-color: var(--form-line-hover); }

.form-control::placeholder { color: #9aa5a0; opacity: 1; }

/* Green, the site's colour, in place of Bootstrap's blue and site.css's two-ring
   blue outline. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--form-ring);
    outline: none;
}

.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.form-control:disabled,
.form-control[readonly] { background-color: #f4f6f5; color: var(--form-muted); }

/* A refused field, from the server or from the unobtrusive validator. */
.form-control.input-validation-error,
.form-select.input-validation-error,
.form-control.is-invalid { border-color: var(--form-error); }
.form-control.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(195, 32, 47, .12); }
.field-validation-error { display: block; font-size: .8rem; margin-top: .25rem; }

.form-label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--form-ink);
    margin-bottom: .3rem;
}

.form-label .req { color: var(--form-error); }
.form-text { font-size: .78rem; color: var(--form-muted); }

/* ------------------------------------------------ an icon inside a field */

.has-field-icon { position: relative; }

.field-icon {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #8a9690;
    pointer-events: none;
    z-index: 1;
}

.has-field-icon > .form-control,
.has-field-icon > .form-select { padding-left: 2.5rem; }

/* ------------------------------------------------ dates that read the same
   The native input keeps its picker; its own text is hidden and "7 Oct 2026 Wed"
   is drawn over it (wwwroot/js/date-field.js). Any input[type=date][data-pretty]
   on any page, with the script loaded. */

.date-field { position: relative; }

.date-field.has-value input[type="date"] { color: transparent; }
.date-field.has-value input[type="date"]::-webkit-datetime-edit { color: transparent; }

/* Two lines — the date, and the weekday under it — so the text never runs into
   the browser's calendar icon on a field half a phone wide. */
.date-field-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    white-space: nowrap;
    color: var(--form-ink);
    display: flex;
    flex-direction: column;
    line-height: 1.12;
}

.date-field-text strong { font-weight: 600; }
.date-field-text span { color: var(--form-muted); font-size: .72em; }

/* Where the box has room, date and weekday share one line. */
.date-field.one-line .date-field-text { flex-direction: row; align-items: baseline; gap: .4rem; }
.date-field.one-line .date-field-text span { font-size: .85em; }

.date-field input[type="date"] { cursor: pointer; }

.date-field.with-icon input[type="date"] { padding-left: 2.5rem; }

/* Chrome's own calendar icon is stretched invisibly over the whole box, so a click
   anywhere opens the picker and only our icon shows. */
.date-field input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

/* --------------------------------------------------- a section of a form */

.form-card {
    background: #fff;
    border: 1px solid #e3e8e5;
    border-radius: 16px;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
}

.form-card-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; }
.form-card-head h2 { font-size: 1.05rem; font-weight: 800; color: var(--form-ink); margin: 0; }
.form-card-head h2 span { font-weight: 400; color: var(--form-muted); font-size: .92rem; }

.form-avatar {
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #eaf3f7;
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
}

.form-card-note { color: var(--form-muted); font-size: .85rem; margin: -.3rem 0 .9rem; }

/* The one primary action of a form. */
.btn-form-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    min-height: 50px;
    padding: .75rem 1.25rem;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand), #00a2cc);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(0, 114, 150, .25);
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-form-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 114, 150, .32); }
.btn-form-primary:disabled { opacity: .65; transform: none; }
.btn-form-primary .bx { font-size: 1.2rem; }

/* ---------------------------------------------- the booking summary card
   The stay, flight or transfer being paid for, beside the form: on the guest
   step and on every payment page. */

.bk-summary {
    background: #fff;
    border: 1px solid #e3e8e5;
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 10px 30px rgba(16, 42, 34, .06);
    position: sticky;
    top: 1rem;
}
.bk-title { font-size: 1.15rem; font-weight: 800; color: var(--form-ink); margin-bottom: .85rem; }
.bk-photo { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; margin-bottom: .85rem; }

.bk-hotel { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; }
.bk-hotel h3 { font-size: 1.12rem; font-weight: 800; color: var(--form-ink); margin: 0; }
.bk-address { font-size: .82rem; color: var(--form-muted); margin-top: .25rem; }
.bk-address .bx { color: var(--brand); }

/* The stay as icon, label, value — one fact a line, on a tinted panel. */
.bk-facts {
    list-style: none;
    margin: 1rem 0;
    padding: .85rem .9rem;
    background: #f6f9f7;
    border-radius: 12px;
}

.bk-facts li {
    display: grid;
    grid-template-columns: 1.4rem 5.6rem minmax(0, 1fr);
    align-items: start;
    gap: .5rem;
    padding: .4rem 0;
    font-size: .88rem;
}

.bk-facts li + li { border-top: 1px solid #e8eeea; }
.bk-facts > li > .bx { color: var(--brand); font-size: 1.15rem; line-height: 1.3; }
.bk-k { color: var(--form-muted); line-height: 1.5; }
.bk-v { font-weight: 600; color: var(--form-ink); line-height: 1.45; }
.bk-v small { display: block; font-weight: 400; color: var(--form-muted); font-size: .8rem; }
.bk-arrow { color: var(--form-muted); vertical-align: -2px; }

.bk-price-title { font-weight: 700; font-size: .95rem; color: var(--form-ink); margin-bottom: .35rem; }
.bk-price-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; color: var(--form-muted); padding: .15rem 0; }
.bk-price-row span:last-child { color: var(--form-ink); font-weight: 600; }

.bk-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: .75rem;
    padding: .7rem .9rem;
    border-radius: 12px;
    background: #e5f2f7;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--form-ink);
}

.bk-summary .booking-submit { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.bk-summary .booking-submit .bx { font-size: 1.2rem; }

.bk-after { color: var(--form-muted); font-size: .76rem; margin: .6rem 0 0; }

.bk-trust {
    display: grid;
    /* One line each: three columns in a sidebar a third of the page wide broke
       "Licensed agency" over two lines. */
    grid-template-columns: 1fr;
    gap: .4rem;
    margin-top: 1rem;
    padding: .75rem .9rem;
    border-radius: 12px;
    background: #f6f9f7;
    font-size: .8rem;
    color: var(--form-muted);
}

.bk-trust > div { display: flex; gap: .5rem; align-items: center; min-width: 0; }
.bk-trust .bx { color: var(--brand); font-size: 1.15rem; flex: none; }
.bk-trust strong { color: var(--form-ink); font-weight: 700; margin-right: .3rem; }
.bk-trust a { color: inherit; white-space: nowrap; }


/* MM / YY as one field split in two. */
.card-expiry { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .35rem; }
.card-expiry-sep { color: var(--form-muted); font-size: 1.1rem; }

.bk-total-amount { font-size: 1.45rem; font-weight: 800; color: var(--brand-dark); }
.bk-vehicle { width: 100%; max-height: 150px; object-fit: contain; margin: .25rem 0 .5rem; }

.pay-after { color: var(--form-muted); font-size: .78rem; text-align: center; margin: .6rem 0 0; }

/* The error box is in every form's markup; it shows only when it has something to say. */
.validation-summary-valid { display: none; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* A number with − and + either side. */
.qty-stepper { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: .4rem; }
.qty-stepper > button {
    border: 1px solid var(--form-line);
    border-radius: 8px;
    background: #fff;
    color: var(--brand);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}
.qty-stepper > button:hover { border-color: var(--brand); background: #f1f8fb; }
.qty-stepper > .form-control { text-align: center; font-weight: 600; -moz-appearance: textfield; }
.qty-stepper > .form-control::-webkit-outer-spin-button,
.qty-stepper > .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* A page's own heading on the booking steps: "Guest details", "Payment". */
.page-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f1f2a;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin: .25rem 0 .35rem;
}

.page-lead { color: var(--form-muted); font-size: .9rem; margin-bottom: 1rem; }

/* "Processed by Iyzico with 3-D Secure" — the one reassurance a payment form owes. */
.secure-strip {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .82rem;
    color: #374151;
    padding: .65rem .85rem;
    background: #f1f8fb;
    border: 1px solid #d5e7ee;
    border-radius: 10px;
    margin-bottom: 1rem;
}
.secure-strip .bx { color: var(--brand); font-size: 1.15rem; flex: none; }

.policy-note {
    font-size: .82rem;
    color: #4b5563;
    background: #fffdf5;
    border: 1px solid #f0e3c0;
    border-radius: 10px;
    padding: .7rem .85rem;
    margin-top: 1rem;
}

/* 16px on a phone, or iOS zooms the page into the field on every tap. Repeated
   here because the rules above are later and as specific as transfer-home.css's. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select { font-size: 16px; }
}

/* The lira amount a card is charged, above the pay button (_ChargeInLira). */
.charge-lira { display: flex; gap: .65rem; align-items: flex-start; margin-top: 1.25rem; padding: .85rem 1rem; border: 1px solid #d2e6ee; border-radius: 12px; background: #f5fbfd; }
.charge-lira > i { color: var(--brand-dark); font-size: 1.35rem; margin-top: .05rem; }
.charge-lira strong { display: block; color: #1a1a1a; }
.charge-lira small { display: block; color: var(--form-muted); margin-top: .2rem; line-height: 1.45; }