/* ==========================================================================
   "Book a shoot" page — Views/Booking/Index.cshtml
   Same dark page, eyebrow, heading size and greys as the Portraits and
   Landscapes pages, and the same underlined boxes as the contact form, so it
   reads as part of the same site. Loaded by that page alone, with its own
   ?v= number there — bump it after changing anything here.
   ========================================================================== */

.bk_wrap { width:100%; float:left; clear:both; background-color:#121212; }
.bk_in   { max-width:980px; margin:0 auto; box-sizing:border-box; padding:40px 80px 100px 80px; }

.bk_eyebrow { display:inline-block; font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:5px;
              text-transform:uppercase; color:#9db9d2; margin-bottom:22px; }
.bk_in h1   { margin:0 0 24px; font-size:52px; line-height:1.15; letter-spacing:0; font-weight:400; color:#fff;
              max-width:16ch; }
.bk_lead    { max-width:58ch; font-size:16px; line-height:1.8; color:#93a7b8; margin:0 0 50px; }

/* ── The four parts of the form ─────────────────────────────────────────── */
.bk_section { border:0; margin:0 0 56px; padding:0; min-width:0; }
.bk_section > legend { font-family:'Poppins',sans-serif; font-size:11px; letter-spacing:4px; text-transform:uppercase;
                       color:#fff; padding:0 0 14px; margin-bottom:28px; width:100%; border-bottom:1px solid #2a2e33; }
.bk_section > legend span { color:#9db9d2; margin-right:10px; }

.bk_grid  { display:grid; grid-template-columns:1fr 1fr; gap:30px 40px; }
.bk_field { margin-bottom:32px; min-width:0; }
.bk_grid .bk_field { margin-bottom:0; }
.bk_field.bk_wide { grid-column:1 / -1; }

.bk_label { display:block; font-size:14px; color:#dfe6ec; margin-bottom:6px; line-height:1.5; }
.bk_label .bk_opt { color:#7d8e9d; font-size:12px; }
.bk_hint  { display:block; font-size:12px; line-height:1.6; color:#7d8e9d; margin-top:6px; }

.bk_form input[type="text"],
.bk_form input[type="tel"],
.bk_form input[type="email"],
.bk_form input[type="number"],
.bk_form input[type="date"],
.bk_form select,
.bk_form textarea {
    width:100%; box-sizing:border-box; background-color:transparent; border:1px solid transparent;
    border-bottom-color:rgba(255,255,255,.3); border-radius:0; padding:10px 0; color:#fff; font-size:15px;
    letter-spacing:0; font-family:'Anonymous Pro', monospace; transition:border-color .3s ease;
}
.bk_form textarea { resize:vertical; min-height:120px; line-height:1.6; }
.bk_form input:hover, .bk_form input:focus,
.bk_form select:hover, .bk_form select:focus,
.bk_form textarea:hover, .bk_form textarea:focus { border-bottom-color:#fff; outline:none; }
.bk_form input:focus-visible, .bk_form select:focus-visible, .bk_form textarea:focus-visible {
    border-bottom-color:#9db9d2; box-shadow:0 1px 0 0 #9db9d2;
}
.bk_form input::placeholder, .bk_form textarea::placeholder { color:#6b7784; opacity:1; }
.bk_form input[type="number"] { max-width:120px; }
.bk_form input[type="date"] { max-width:220px; color-scheme:dark; }
.bk_form select { color-scheme:dark; cursor:pointer; }
.bk_form select option { background:#1b1d20; color:#fff; }

/* ── Tap-to-choose buttons (the radio buttons and tick boxes) ───────────── */
.bk_chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.bk_chip  { position:relative; margin:0; cursor:pointer; }
.bk_chip input { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.bk_chip span { display:inline-block; padding:10px 16px; border:1px solid #3a3f45; color:#b6c3ce; font-size:13px;
                line-height:1.4; transition:border-color .2s ease, color .2s ease, background-color .2s ease;
                user-select:none; }
.bk_chip:hover span { border-color:#6b7784; color:#fff; }
.bk_chip input:checked + span { border-color:#9db9d2; color:#fff; background-color:rgba(157,185,210,.14); }
.bk_chip input:focus-visible + span { outline:2px solid #9db9d2; outline-offset:2px; }

/* The 1 – 5 posing scale: five equal boxes in one row, with the two ends
   named underneath — the row and the names share a width, so "Very
   experienced" always sits under the 5, on a phone too. */
.bk_scale { display:grid; grid-template-columns:repeat(5, 1fr); max-width:340px; }
.bk_scale .bk_chip span { display:block; text-align:center; padding:10px 0; }
.bk_scale_ends { display:flex; justify-content:space-between; max-width:340px; font-size:12px; color:#7d8e9d;
                 margin-top:8px; }

/* ── The tick boxes at the end ──────────────────────────────────────────── */
.bk_tick { display:flex; align-items:flex-start; gap:12px; margin-bottom:22px; cursor:pointer; }
.bk_tick input { margin-top:3px; width:17px; height:17px; min-width:17px; accent-color:#9db9d2; cursor:pointer; }
.bk_tick span { color:#b6c3ce; font-size:13px; line-height:1.7; }
.bk_tick span small { display:block; color:#7d8e9d; font-size:12px; }

/* ── Messages ───────────────────────────────────────────────────────────── */
.bk_error, .bk_form .field-validation-error { display:block; color:#ff8a80; font-size:12px; margin-top:6px; }
.bk_notice { color:#ff8a80; border:1px solid rgba(255,138,128,.4); padding:14px 18px; margin-bottom:40px; font-size:14px; }

.bk_send { display:inline-block; background:transparent; border:1px solid rgba(255,255,255,.6); padding:16px 48px;
           color:#fff; font-family:'Poppins',sans-serif; font-size:11px; letter-spacing:3px; text-transform:uppercase;
           cursor:pointer; transition:background-color .3s ease, color .3s ease, border-color .3s ease; }
.bk_send:hover, .bk_send:focus-visible { background-color:#fff; color:#111; border-color:#fff; }
.bk_after { font-size:12px; color:#7d8e9d; margin-top:14px; max-width:58ch; line-height:1.7; }

.bk_thanks { border:1px solid #3a3f45; padding:40px; max-width:620px; }
.bk_thanks h2 { color:#fff; font-size:28px; font-weight:400; margin:0 0 16px; }
.bk_thanks p  { color:#93a7b8; font-size:15px; line-height:1.8; margin:0 0 24px; }
.bk_thanks a  { display:inline-block; padding:14px 28px; font-family:'Poppins',sans-serif; font-size:11px;
                letter-spacing:3px; text-transform:uppercase; color:#fff; text-decoration:none; border:1px solid #3a3f45;
                transition:border-color .3s ease, color .3s ease; }
.bk_thanks a:hover { border-color:#9db9d2; color:#9db9d2; }

/* ── Smaller screens ────────────────────────────────────────────────────── */
@media (max-width:1024px) {
    .bk_in { padding:30px 40px 80px 40px; }
    .bk_in h1 { font-size:40px; }
}
@media (max-width:767px) {
    .bk_in { padding:24px 16px 60px 16px; }
    .bk_in h1 { font-size:30px; max-width:none; }
    .bk_lead { margin-bottom:36px; }
    .bk_grid { grid-template-columns:1fr; gap:26px; }
    .bk_section { margin-bottom:44px; }
    .bk_chip span { padding:10px 13px; }
    .bk_scale .bk_chip span { padding:10px 0; }
    .bk_send { width:100%; }
    .bk_thanks { padding:26px 20px; }
}