/* ── Callback booking form ──────────────────────────────── */

.bk-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

/* ── Aside ── */
.bk-aside {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.bk-aside__card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,204,0,.1);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.bk-aside__icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: rgba(255,204,0,.1);
    color: var(--pub-cta, #ffcc00);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}
.bk-aside__text {
    display: flex; flex-direction: column; gap: .18rem;
    font-size: .85rem;
}
.bk-aside__text strong { color: #e2e8f0; font-size: .9rem; }
.bk-aside__text span, .bk-aside__text a {
    color: #94a3b8;
    text-decoration: none;
}
.bk-aside__text a:hover { color: var(--pub-cta, #ffcc00); }

/* ── Form wrap ── */
.bk-form-wrap {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 2rem 2rem 2.2rem;
}

/* ── Floating label fields ── */
.bk-field {
    position: relative;
    margin-bottom: 1.1rem;
}
.bk-input {
    width: 100%;
    padding: 1.05rem 1rem .45rem 2.4rem;
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 10px;
    color: #e2e8f0;
    font-size: .95rem;
    font-family: inherit;
    outline: none;
    transition: border-color .18s;
    appearance: none;
    box-sizing: border-box;
}
.bk-input:focus {
    border-color: var(--pub-cta, #ffcc00);
    background: rgba(255,204,0,.04);
}
.bk-label {
    position: absolute;
    left: 2.4rem; top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: .95rem;
    pointer-events: none;
    transition: all .18s;
}
.bk-field .bk-textarea ~ .bk-label { top: 1.1rem; transform: none; }

.bk-input:focus ~ .bk-label,
.bk-input:not(:placeholder-shown) ~ .bk-label {
    top: .38rem !important;
    transform: none !important;
    font-size: .72rem;
    color: var(--pub-cta, #ffcc00);
}
.bk-field__icon {
    position: absolute;
    left: .85rem; top: 50%;
    transform: translateY(-50%);
    color: #4b5563;
    font-size: .85rem;
    pointer-events: none;
    transition: color .18s;
}
.bk-field__icon--top { top: 1.1rem; transform: none; }
.bk-input:focus ~ .bk-field__icon { color: var(--pub-cta, #ffcc00); }

/* always-float label for selects */
.bk-label--sel {
    top: .38rem !important;
    transform: none !important;
    font-size: .72rem;
    color: var(--pub-cta, #ffcc00);
}
.bk-select { cursor: pointer; }
.bk-select option { background: #1e2228; color: #e2e8f0; }

/* brand + model side by side */
.bk-car-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
@media (max-width: 480px) {
    .bk-car-row { grid-template-columns: 1fr; }
}

.bk-textarea {
    resize: vertical;
    min-height: 70px;
    padding-top: 1.4rem;
}

.bk-req { color: #f87171; font-size: .8rem; }

.bk-input--error { border-color: #f87171 !important; }
.bk-field-err { display: block; font-size: .78rem; color: #f87171; margin-top: .25rem; padding-left: 2.4rem; }

/* ── Privacy note ── */
.bk-privacy {
    font-size: .78rem;
    color: #475569;
    margin: .6rem 0 1.1rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* ── Submit button ── */
.bk-btn {
    width: 100%;
    padding: .95rem 1.5rem;
    background: var(--pub-cta, #ffcc00);
    color: var(--pub-cta-text, #1a1200);
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: background .18s, transform .15s;
}
.bk-btn:hover:not(:disabled) {
    background: var(--pub-cta-dark, #ffb300);
    transform: translateY(-2px);
}
.bk-btn:disabled { opacity: .7; cursor: not-allowed; }

/* ── Alert flashes ── */
.alert {
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}
.alert--warning { background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); color: #fbbf24; }
.alert--danger  { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: #f87171; }
.alert--success { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); color: #34d399; }

/* ── Responsive ── */
@media (max-width: 760px) {
    .bk-layout { grid-template-columns: 1fr; }
    .bk-aside { flex-direction: row; flex-wrap: wrap; }
    .bk-aside__card { flex: 1 1 calc(50% - .4rem); }
    .bk-form-wrap { padding: 1.3rem 1rem 1.5rem; }
}
@media (max-width: 480px) {
    .bk-aside__card { flex: 1 1 100%; }
}