/* ==========================================================================
   Popup appointment form. Uses the tokens already defined in style.css.
   ========================================================================== */

/* ---------- floating trigger ---------- */
.bk-fab{position:fixed;right:20px;bottom:22px;z-index:9000;display:inline-flex;align-items:center;gap:9px;
    padding:14px 22px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;font-size:.95rem;
    line-height:1;box-shadow:var(--shadow-blue);transition:transform .22s cubic-bezier(.4,0,.2,1),background .22s}
.bk-fab:hover{background:var(--blue-dark);color:#fff;transform:translateY(-2px)}
.bk-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.bk-fab svg{flex:none}
@media(max-width:600px){
    .bk-fab{right:14px;bottom:14px;padding:13px 18px;font-size:.9rem}
    .bk-fab span{display:none}
    .bk-fab{padding:15px;border-radius:50%}
    .bk-fab svg{width:22px;height:22px}
}
@media print{.bk-fab{display:none}}

/* ---------- overlay ---------- */
.bk-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;
    background:rgba(10,22,40,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    opacity:0;transition:opacity .24s ease}
.bk-overlay[hidden]{display:none}
.bk-overlay.is-open{opacity:1}

/* ---------- dialog ---------- */
.bk-dialog{position:relative;display:grid;grid-template-columns:270px 1fr;width:min(840px,100%);
    max-height:calc(100vh - 40px);overflow:hidden;background:#fff;border-radius:var(--r-xl);
    box-shadow:var(--shadow-xl);transform:translateY(14px) scale(.985);
    transition:transform .28s cubic-bezier(.16,1,.3,1)}
.bk-overlay.is-open .bk-dialog{transform:none}

.bk-close{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:36px;height:36px;
    border:0;border-radius:50%;background:rgba(10,22,40,.06);color:var(--navy);transition:background .2s}
.bk-close:hover{background:rgba(10,22,40,.12)}
.bk-close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- left panel ---------- */
.bk-aside{display:flex;flex-direction:column;gap:14px;padding:34px 26px;color:#fff;
    background:linear-gradient(160deg,var(--navy) 0%,#12305c 100%)}
.bk-aside-badge{display:inline-block;align-self:flex-start;padding:6px 12px;border-radius:999px;
    background:rgba(255,255,255,.13);font-size:.76rem;font-weight:600;margin:0}
.bk-aside-title{font-family:var(--font-display);font-size:1.5rem;line-height:1.25;font-weight:600;margin:0}
.bk-aside-list{display:grid;gap:10px;margin:4px 0 0}
.bk-aside-list li{position:relative;padding-left:24px;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.86)}
.bk-aside-list li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:50%;
    background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.5 4.8 6.4 10.9 3.5 8' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.bk-aside-foot{margin:auto 0 0;font-size:.82rem;color:rgba(255,255,255,.6)}

/* ---------- form panel ---------- */
.bk-main{padding:34px 32px;overflow-y:auto}
.bk-main h2{font-size:1.6rem;margin-bottom:6px}
.bk-sub{color:var(--gray-600);font-size:.94rem;margin-bottom:20px}

.bk-field{margin-bottom:15px;border:0;padding:0}
.bk-field label,.bk-field legend{display:block;font-size:.85rem;font-weight:600;color:var(--navy);margin-bottom:6px;padding:0}
.bk-req{color:#DC2626}
.bk-opt{font-weight:400;color:var(--gray-400)}
.bk-field input[type=text],.bk-field input[type=tel],.bk-field select{
    width:100%;padding:12px 14px;border:1.5px solid var(--gray-100);border-radius:var(--r-sm);
    font-family:var(--font);font-size:.98rem;color:var(--navy);background:#fff;
    transition:border-color .18s,box-shadow .18s}
.bk-field input:focus,.bk-field select:focus{outline:0;border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(27,111,216,.14)}
.bk-field input[aria-invalid="true"]{border-color:#DC2626;box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.bk-err{color:#DC2626;font-size:.82rem;margin:6px 0 0}
.bk-err[hidden]{display:none}

/* honeypot — off-screen, not display:none, so bots still fill it */
.bk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* time chips */
.bk-chips{display:flex;flex-wrap:wrap;gap:8px}
.bk-chips label{margin:0}
.bk-chips input{position:absolute;opacity:0;width:0;height:0}
.bk-chips span{display:inline-block;padding:8px 15px;border:1.5px solid var(--gray-100);border-radius:999px;
    font-size:.88rem;font-weight:500;color:var(--body);cursor:pointer;transition:all .18s}
.bk-chips label:hover span{border-color:var(--blue-mid);background:var(--blue-light)}
.bk-chips input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.bk-chips input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}

/* submit */
.bk-submit{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
    width:100%;margin-top:6px;padding:14px 20px;border:0;border-radius:var(--r-md);
    background:var(--blue);color:#fff;font-family:var(--font);font-size:1rem;font-weight:600;
    transition:background .2s,transform .12s}
.bk-submit:hover:not(:disabled){background:var(--blue-dark)}
.bk-submit:active:not(:disabled){transform:translateY(1px)}
.bk-submit:disabled{opacity:.72;cursor:progress}
.bk-submit:focus-visible{outline:3px solid rgba(27,111,216,.4);outline-offset:2px}
.bk-spinner{display:none;width:17px;height:17px;border:2.5px solid rgba(255,255,255,.4);
    border-top-color:#fff;border-radius:50%;animation:bk-spin .7s linear infinite}
.bk-submit.is-busy .bk-spinner{display:block}
@keyframes bk-spin{to{transform:rotate(360deg)}}

.bk-formerr{margin:12px 0 0;padding:11px 14px;border-radius:var(--r-sm);
    background:#FEF2F2;color:#B91C1C;font-size:.88rem}
.bk-formerr[hidden]{display:none}
.bk-alt{margin:16px 0 0;font-size:.86rem;color:var(--gray-600);text-align:center}

/* success */
.bk-done{text-align:center;padding:26px 4px 10px}
.bk-done[hidden]{display:none}
.bk-done-tick{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;
    border-radius:50%;background:#ECFDF5;color:#16A34A;animation:bk-pop .42s cubic-bezier(.16,1,.3,1)}
@keyframes bk-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.bk-done-title{font-size:1.35rem;margin-bottom:8px}
.bk-done-msg{color:var(--gray-600);font-size:.95rem;margin-bottom:22px}
.bk-done-close{max-width:190px;margin:0 auto}

/* ---------- responsive ---------- */
@media(max-width:760px){
    .bk-overlay{padding:0;place-items:end stretch}
    .bk-dialog{grid-template-columns:1fr;width:100%;max-height:94vh;
        border-radius:var(--r-xl) var(--r-xl) 0 0;transform:translateY(100%)}
    .bk-overlay.is-open .bk-dialog{transform:none}
    .bk-aside{display:none}
    .bk-main{padding:30px 20px 26px}
    .bk-main h2{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){
    .bk-overlay,.bk-dialog,.bk-fab,.bk-done-tick{transition:none;animation:none}
}