/* ============================================================
   PsihoAsist booking flow — /app/ design tokens
   (teal/cream, Playfair Display + Lato — matches app/auth pages)
   ============================================================ */
:root {
    --teal-deep: #156e6a;
    --teal: #1d9990;
    --aqua: #3bbfb8;
    --brown: #7a5c42;
    --muted: #7a7068;
    --ink: #3a3530;
    --cream: #faf7f3;
    --card-shadow: 0 8px 40px rgba(21, 110, 106, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    color: var(--ink);
    background: linear-gradient(135deg, #e0f5f3 0%, #faf7f3 50%, #f0e8df 100%);
    min-height: 100vh;
    padding: 2rem 1.5rem 3rem;
    -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

a { color: var(--teal); }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* ---------------- page chrome ---------------- */
.bk-wrap { max-width: 1060px; margin: 0 auto; }

.bk-top {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem;
}
.bk-logo {
    font-family: "Playfair Display", serif; font-style: italic; font-weight: 300;
    font-size: 1.5rem; color: var(--teal-deep); text-decoration: none;
}
.bk-top-nav {
    display: flex; align-items: center; gap: 1.1rem;
    font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.bk-top-nav a { color: var(--muted); text-decoration: none; transition: color 0.3s; }
.bk-top-nav a:hover { color: var(--teal); }
.bk-lang { display: inline-flex; gap: 0.55rem; }
.bk-lang a.active { color: var(--teal-deep); font-weight: 400; border-bottom: 1px solid var(--aqua); }

/* ---------------- card layout ---------------- */
.bk-card {
    background: #fff; border-radius: 8px; box-shadow: var(--card-shadow);
    display: grid; grid-template-columns: 330px minmax(0, 1fr);
    overflow: hidden; min-height: 600px;
}

.bk-left {
    padding: 2.6rem 2.2rem;
    border-right: 1px solid rgba(59, 191, 184, 0.18);
    background: #fdfbf8;
    display: flex; flex-direction: column;
}
.bk-avatar {
    width: 76px; height: 76px; border-radius: 50%;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: "Playfair Display", serif; font-style: italic;
    font-size: 1.7rem; font-weight: 300; margin-bottom: 1.1rem;
    user-select: none;
}
.bk-name {
    font-family: "Playfair Display", serif; font-weight: 400;
    font-size: 1.45rem; color: var(--teal-deep); line-height: 1.25;
}
.bk-creds {
    font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brown); margin-top: 0.45rem;
}
.bk-intro { font-size: 0.9rem; color: var(--muted); line-height: 1.65; margin-top: 1.1rem; }

.bk-panel-service {
    margin-top: 1.6rem; padding-top: 1.6rem;
    border-top: 1px solid rgba(59, 191, 184, 0.2);
}
.bk-ps-name {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 1.02rem; font-weight: 400; color: var(--ink);
}
.bk-dot {
    width: 11px; height: 11px; border-radius: 50%; flex: none;
    background: var(--teal); display: inline-block;
}
.bk-ps-meta { font-size: 0.82rem; color: var(--teal-deep); margin-top: 0.5rem; line-height: 1.6; }
.bk-ps-desc { font-size: 0.84rem; color: var(--muted); margin-top: 0.55rem; line-height: 1.6; }

.bk-tz {
    margin-top: auto; padding-top: 1.6rem;
    font-size: 0.78rem; color: var(--muted); line-height: 1.55;
    display: flex; gap: 0.45rem; align-items: flex-start;
}
.bk-tz svg { flex: none; margin-top: 0.1rem; color: var(--aqua); }

.bk-right { padding: 2.4rem 2.6rem; min-width: 0; }

/* ---------------- steps ---------------- */
.bk-step { animation: bkfade 0.35s ease; }
@keyframes bkfade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.bk-step-count {
    font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--brown); margin-bottom: 0.35rem;
}
.bk-step-title {
    font-family: "Playfair Display", serif; font-weight: 400;
    font-size: 1.7rem; color: var(--teal-deep); margin-bottom: 1.4rem;
    outline: none;
}
.bk-back {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); text-decoration: none; margin-bottom: 1.1rem;
    background: none; border: none; cursor: pointer;
    font-family: "Lato", sans-serif; font-weight: 300;
    transition: color 0.3s;
}
.bk-back:hover { color: var(--teal); }

/* ---------------- messages ---------------- */
.bk-msg {
    padding: 0.85rem 1rem; border-radius: 4px;
    font-size: 0.85rem; margin-bottom: 1.1rem; line-height: 1.5;
}
.bk-msg.error { background: #fef2f2; color: #b91c1c; }
.bk-msg.success { background: #f0fdf4; color: #166534; }

/* ---------------- step 1: services ---------------- */
.bk-services { display: flex; flex-direction: column; gap: 0.9rem; }
.bk-service {
    display: flex; gap: 1rem; align-items: flex-start; text-align: left;
    padding: 1.15rem 1.3rem; width: 100%;
    border: 1px solid rgba(59, 191, 184, 0.28); border-radius: 8px;
    background: #fff; text-decoration: none; color: var(--ink);
    font-family: "Lato", sans-serif; font-weight: 300;
    cursor: pointer;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.bk-service:hover, .bk-service:focus-visible {
    border-color: var(--teal);
    box-shadow: 0 6px 22px rgba(21, 110, 106, 0.12);
    transform: translateY(-1px);
}
.bk-service .bk-dot { margin-top: 0.42rem; }
.bk-service-body { flex: 1; min-width: 0; }
.bk-service-name { display: block; font-size: 1.04rem; font-weight: 400; }
.bk-service-meta {
    display: block; font-size: 0.78rem; letter-spacing: 0.04em;
    color: var(--teal-deep); margin-top: 0.25rem;
}
.bk-service-desc { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.55; margin-top: 0.45rem; }
.bk-service-arrow { margin-left: auto; align-self: center; color: var(--aqua); font-size: 1.4rem; line-height: 1; }

/* ---------------- step 2: calendar + slots ---------------- */
.bk-daytime { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 2.2rem; }

.bk-cal { max-width: 430px; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.bk-cal-title {
    font-family: "Playfair Display", serif; font-weight: 400;
    font-size: 1.15rem; color: var(--ink);
}
.bk-cal-nav { display: flex; gap: 0.5rem; }
.bk-cal-btn {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(59, 191, 184, 0.4); background: #fff; color: var(--teal);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer;
    transition: all 0.25s; user-select: none;
}
.bk-cal-btn:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.bk-cal-btn.disabled { opacity: 0.35; pointer-events: none; }

.bk-cal-dow, .bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-cal-dow span {
    text-align: center; font-size: 0.62rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); padding: 0.35rem 0;
}
.bk-day {
    aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
    font-size: 0.88rem; border-radius: 50%; color: #c8c0b8;
    border: none; background: transparent; text-decoration: none;
    font-family: "Lato", sans-serif; font-weight: 300;
    position: relative;
}
.bk-day.pad { visibility: hidden; }
.bk-day.avail {
    background: rgba(29, 153, 144, 0.1); color: var(--teal-deep);
    font-weight: 400; cursor: pointer; transition: background 0.2s;
}
.bk-day.avail:hover { background: rgba(29, 153, 144, 0.22); }
.bk-day.avail.selected { background: var(--teal); color: #fff; }
.bk-day.today::after {
    content: ""; position: absolute; bottom: 5px; left: 50%;
    transform: translateX(-50%); width: 4px; height: 4px;
    border-radius: 50%; background: currentColor; opacity: 0.7;
}

.bk-slots { min-width: 0; }
.bk-slots-title {
    font-size: 0.95rem; font-weight: 400; color: var(--ink);
    margin-bottom: 0.8rem; min-height: 1.2em;
}
.bk-slot-list {
    display: flex; flex-direction: column; gap: 0.55rem;
    max-height: 340px; overflow-y: auto; padding-right: 4px;
}
.bk-slot {
    display: block; width: 100%; text-align: center;
    padding: 0.68rem 0.5rem; border: 1px solid var(--teal); border-radius: 4px;
    color: var(--teal); background: #fff; font-size: 0.9rem;
    font-family: "Lato", sans-serif; font-weight: 400; letter-spacing: 0.05em;
    text-decoration: none; cursor: pointer; transition: all 0.2s;
}
.bk-slot:hover, .bk-slot:focus-visible { background: var(--teal); color: #fff; }

.bk-empty { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }
.bk-tz-note { margin-top: 1.4rem; font-size: 0.78rem; color: var(--muted); }
.bk-tz-badge { display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(59,191,184,0.12); color: #156e6a; padding: 0.45rem 0.95rem; border-radius: 999px; font-size: 0.8rem; margin: 0 0 1.2rem; }
.bk-tz-badge svg { flex: none; }
.bk-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.2s; }

/* ---------------- step 3: inline auth ---------------- */
.bk-auth-intro { font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.3rem; }
.bk-auth { max-width: 420px; }
.bk-tabs { display: flex; border-bottom: 1px solid rgba(59, 191, 184, 0.25); margin-bottom: 1.4rem; }
.bk-tab {
    flex: 1; padding: 0.8rem 0.5rem; margin-bottom: -1px;
    background: none; border: none; border-bottom: 2px solid transparent;
    font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); cursor: pointer; text-align: center; text-decoration: none;
    font-family: "Lato", sans-serif; font-weight: 400; transition: all 0.25s;
    display: inline-block;
}
.bk-tab:hover { color: var(--teal); }
.bk-tab[aria-selected="true"] { color: var(--teal-deep); border-bottom-color: var(--teal); }

/* ---------------- forms (shared with confirm) ---------------- */
.form-group { margin-bottom: 1.15rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label {
    display: block; font-size: 0.7rem; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem;
}
input[type="email"], input[type="password"], input[type="text"], input[type="tel"], textarea {
    width: 100%; padding: 0.85rem 1rem;
    border: 1px solid rgba(59, 191, 184, 0.25); border-radius: 4px;
    font-family: "Lato", sans-serif; font-size: 0.95rem; font-weight: 300;
    color: var(--ink); background: #fff;
    transition: border 0.3s; outline: none;
}
input:focus, textarea:focus { border-color: var(--aqua); }
textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.bk-help { font-size: 0.75rem; color: var(--muted); margin-top: 0.35rem; line-height: 1.5; }

.btn-primary {
    width: 100%; padding: 1rem; margin-top: 0.4rem;
    background: var(--teal); color: #fff; border: none; border-radius: 4px;
    font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase;
    cursor: pointer; transition: background 0.3s;
    font-family: "Lato", sans-serif; font-weight: 300;
}
.btn-primary:hover { background: var(--teal-deep); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

/* ---------------- step 4: confirm ---------------- */
.bk-confirm { max-width: 460px; }
.bk-user-chip { font-size: 0.82rem; color: var(--muted); margin-bottom: 1.1rem; }
.bk-user-chip a { color: var(--teal); text-decoration: none; }
.bk-user-chip a:hover { text-decoration: underline; }

.bk-summary {
    background: var(--cream); border: 1px solid rgba(59, 191, 184, 0.2);
    border-radius: 8px; padding: 1.1rem 1.5rem; margin-bottom: 1.3rem;
}
.bk-sum-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding: 0.45rem 0; font-size: 0.92rem;
}
.bk-sum-row dt {
    color: var(--muted); font-size: 0.68rem; letter-spacing: 0.14em;
    text-transform: uppercase; flex: none;
}
.bk-sum-row dd { text-align: right; color: var(--ink); font-weight: 400; line-height: 1.45; }
.bk-sum-svc { display: inline-flex; align-items: center; gap: 0.5rem; }

.bk-hint {
    font-size: 0.88rem; color: var(--teal-deep);
    background: rgba(59, 191, 184, 0.12); border-radius: 4px;
    padding: 0.8rem 1rem; margin-bottom: 1.3rem; line-height: 1.55;
}
.bk-fine { font-size: 0.76rem; color: var(--muted); line-height: 1.6; margin-top: 0.9rem; }

/* ---------------- footer ---------------- */
.bk-foot { text-align: center; margin-top: 1.4rem; }
.bk-foot a {
    font-size: 0.78rem; color: var(--muted); text-decoration: none;
    letter-spacing: 0.05em; transition: color 0.3s;
}
.bk-foot a:hover { color: var(--teal); }

/* ---------------- responsive ---------------- */
@media (max-width: 920px) {
    body { padding: 1rem 0.8rem 2rem; }
    .bk-card { grid-template-columns: 1fr; min-height: 0; }
    .bk-left {
        border-right: none; border-bottom: 1px solid rgba(59, 191, 184, 0.18);
        padding: 1.8rem 1.5rem;
    }
    .bk-avatar { width: 60px; height: 60px; font-size: 1.35rem; margin-bottom: 0.9rem; }
    .bk-tz { margin-top: 1.2rem; padding-top: 0; }
    .bk-right { padding: 1.8rem 1.5rem; }
    .bk-daytime { grid-template-columns: 1fr; gap: 1.5rem; }
    .bk-cal { max-width: none; }
    .bk-slot-list { flex-direction: row; flex-wrap: wrap; max-height: none; padding-right: 0; }
    .bk-slot { width: calc(33.33% - 0.4rem); }
}

@media (max-width: 520px) {
    .bk-slot { width: calc(50% - 0.3rem); }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .bk-step-title { font-size: 1.4rem; }
    .bk-right { padding: 1.5rem 1.1rem; }
    .bk-left { padding: 1.5rem 1.1rem; }
    .bk-sum-row { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
    .bk-sum-row dd { text-align: left; }
}