.d-none   { display: none !important; }
.me-1     { margin-right: .25rem !important; }
.me-2     { margin-right: .5rem  !important; }
.ms-1     { margin-left:  .25rem !important; }
.mt-3     { margin-top:   1rem   !important; }
.mt-4     { margin-top:   1.5rem !important; }
.text-success { color: #16a34a !important; }

:root {
    --bk-primary:   #7c3aed;
    --bk-primary-d: #6d28d9;
    --bk-primary-l: #f5f3ff;
    --bk-primary-ll:#ede9fe;
    --bk-accent:    #a855f7;
    --bk-green:     #16a34a;
    --bk-dark:      #0f0a2e;
    --bk-navy:      #1e1b4b;
    --bk-text:      #374151;
    --bk-muted:     #6b7280;
    --bk-border:    #e5e7eb;
    --bk-border-l:  #ede9fe;
    --bk-white:     #ffffff;
    --bk-bg:        #f8f7ff;
    --bk-radius:    20px;
    --bk-radius-sm: 14px;
    --bk-shadow:    0 8px 40px rgba(124,58,237,.10);
    --bk-shadow-md: 0 16px 56px rgba(124,58,237,.16);
    --bk-gradient:  linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);
    --bk-gradient-d:linear-gradient(135deg,#6d28d9 0%,#7c3aed 100%);
    --bk-gradient-dark: linear-gradient(145deg,#0f0a2e 0%,#1e1b4b 60%,#2d1b69 100%);
    --bk-font-serif: 'Cormorant Garamond', Georgia, serif;
    --bk-font-sans:  'Inter', 'Segoe UI', sans-serif;
}

*,*::before,*::after { box-sizing: border-box; }

/* ══ HERO STRIP ══ */
.bk-hero-strip {
    background: var(--bk-gradient-dark);
    text-align: center;
    padding: 56px 24px 48px;
    position: relative;
    overflow: hidden;
}
.bk-hero-strip::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% -10%, rgba(124,58,237,.55) 0%, transparent 65%);
    pointer-events: none;
}
.bk-hero-strip p {
    position: relative; z-index: 1;
    font-size: 1.05rem;
    color: rgba(255,255,255,.8);
    margin: 0 0 4px;
}
.bk-hero-strip-title {
    position: relative; z-index: 1;
    font-family: var(--bk-font-serif);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.15;
}
.bk-hero-strip-sub {
    position: relative; z-index: 1;
    font-size: .88rem;
    color: rgba(255,255,255,.5);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 18px;
}
.bk-hero-dots {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bk-hero-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.3);
}
.bk-hero-dot.active { background: #a855f7; width: 20px; border-radius: 3px; }

/* ══ NOTICE / DEPOSIT ══ */
.bk-notice-bar {
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
    color: #92400e;
    padding: 12px 24px;
    text-align: center;
    font-size: .875rem;
    font-weight: 600;
}
.bk-deposit-bar {
    background: #f0fdf4;
    border-bottom: 1px solid #86efac;
    color: #166534;
    padding: 12px 24px;
    text-align: center;
    font-size: .875rem;
    font-weight: 600;
}

/* ══ CONTAINER ══ */
.bk-container {
    max-width: 920px;
    margin: 0 auto;
    padding: 44px 24px 100px;
}

/* ══ STEP INDICATORS ══ */
.bk-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 44px;
    background: #fff;
    border-radius: 60px;
    padding: 14px 24px;
    box-shadow: 0 4px 24px rgba(124,58,237,.08);
    border: 1.5px solid var(--bk-border-l);
}
.bk-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    cursor: default;
}
.bk-step-circle {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #9ca3af;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    border: 2.5px solid transparent;
}
.bk-step-label {
    font-size: .65rem;
    color: #9ca3af;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: color .3s;
}
.bk-step.active .bk-step-circle {
    background: var(--bk-gradient);
    color: #fff;
    box-shadow: 0 0 0 7px rgba(124,58,237,.15);
    transform: scale(1.15);
}
.bk-step.active .bk-step-label { color: var(--bk-primary); font-weight: 800; }
.bk-step.done .bk-step-circle {
    background: linear-gradient(135deg,#16a34a,#15803d);
    color: #fff;
    border-color: transparent;
}
.bk-step.done .bk-step-label { color: #16a34a; }
.bk-step-line {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 22px 6px 0;
    min-width: 14px;
    border-radius: 2px;
    transition: background .3s;
}
.bk-step.done + .bk-step-line { background: #16a34a; }

/* ══ PANEL ══ */
.bk-panel {
    background: var(--bk-white);
    border-radius: var(--bk-radius);
    padding: 44px;
    box-shadow: var(--bk-shadow);
    border: 1.5px solid var(--bk-border-l);
}
@keyframes bkFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bk-panel { animation: bkFadeIn .3s ease; }
.bk-panel-enter { animation: bkFadeIn .3s ease; }

.bk-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--bk-primary-ll);
}
.bk-panel-icon {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 16px;
    background: var(--bk-gradient);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 24px rgba(124,58,237,.3);
}
.bk-panel-title {
    font-family: var(--bk-font-serif);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--bk-dark);
    margin: 0 0 6px;
    line-height: 1.2;
}
.bk-panel-sub {
    font-size: .86rem;
    color: var(--bk-muted);
    margin: 0;
    line-height: 1.55;
}

/* ══ CATEGORY LABEL ══ */
.bk-cat-label {
    font-size: .72rem;
    font-weight: 800;
    color: var(--bk-primary);
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin: 32px 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bk-primary-l);
    border-radius: 8px;
    border-left: 3px solid var(--bk-primary);
}
.bk-cat-label:first-of-type { margin-top: 0; }
.bk-cat-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--bk-primary);
    flex-shrink: 0;
}
.bk-cat-count {
    margin-left: auto;
    background: var(--bk-primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 10px;
    letter-spacing: .5px;
}

/* ══ SERVICE CARDS ══ */
.bk-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 6px;
}
.bk-service-card {
    border: 2px solid var(--bk-border);
    border-radius: var(--bk-radius-sm);
    padding: 0;
    cursor: pointer;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    background: var(--bk-white);
    position: relative;
    overflow: hidden;
}
.bk-service-card:hover {
    border-color: var(--bk-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(124,58,237,.18);
}
.bk-service-check {
    display: none;
    position: absolute;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bk-gradient);
    color: #fff;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 3px 10px rgba(124,58,237,.4);
}
.bk-service-card.selected { border-color: var(--bk-primary); box-shadow: 0 0 0 3px rgba(124,58,237,.2), 0 8px 28px rgba(124,58,237,.15); }
.bk-service-card.selected .bk-service-check { display: flex; }

/* Image top */
.bk-service-img-top {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}
.bk-service-img-top img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .45s;
}
.bk-service-card:hover .bk-service-img-top img { transform: scale(1.06); }
.bk-service-card.selected .bk-service-img-top::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(124,58,237,.22);
}

/* Icon top (no image) */
.bk-service-icon-top {
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bk-primary-l), var(--bk-primary-ll));
    font-size: 2.5rem;
    color: var(--bk-primary);
    position: relative;
}
.bk-service-icon { display: none; } /* legacy — not used in new layout */

/* Card body */
.bk-service-body {
    padding: 16px 18px 18px;
}
.bk-service-name {
    font-weight: 800;
    font-size: .97rem;
    color: var(--bk-dark);
    margin-bottom: 5px;
    line-height: 1.3;
}
.bk-service-desc {
    font-size: .78rem;
    color: var(--bk-muted);
    line-height: 1.5;
    margin-bottom: 12px;
    min-height: 2.25em;
}
.bk-service-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--bk-muted);
    padding-top: 10px;
    border-top: 1.5px solid var(--bk-border);
}
.bk-service-price {
    font-weight: 800;
    color: var(--bk-primary);
    font-size: 1.05rem;
}

/* ══ CART BAR ══ */
.bk-cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bk-gradient);
    color: #fff;
    border-radius: var(--bk-radius-sm);
    padding: 18px 26px;
    margin-top: 24px;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 8px 32px rgba(124,58,237,.3);
}
.bk-cart-info { font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: 12px; }
.bk-cart-sep  { opacity: .4; }
.bk-cart-total { font-size: 1.25rem; font-weight: 800; }
.bk-cart-btn {
    background: rgba(255,255,255,.2);
    color: #fff;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: .92rem;
    border: 2px solid rgba(255,255,255,.4);
    cursor: pointer;
    transition: all .2s;
    font-family: var(--bk-font-sans);
    letter-spacing: .2px;
}
.bk-cart-btn:hover { background: rgba(255,255,255,.32); border-color: rgba(255,255,255,.7); }

/* ══ STAFF CARDS ══ */
.bk-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.bk-staff-card {
    border: 2px solid var(--bk-border);
    border-radius: var(--bk-radius-sm);
    padding: 28px 16px 20px;
    cursor: pointer;
    text-align: center;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    background: var(--bk-white);
}
.bk-staff-card:hover {
    border-color: var(--bk-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(124,58,237,.15);
}
.bk-staff-card.selected {
    border-color: var(--bk-primary);
    background: var(--bk-primary-l);
    box-shadow: 0 0 0 3px rgba(124,58,237,.2);
}
.bk-staff-any-card { border-style: dashed; border-color: #d1d5db; }
.bk-staff-any-card:hover { border-style: solid; }
.bk-staff-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    margin: 0 auto 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    transition: transform .22s;
}
.bk-staff-card:hover .bk-staff-avatar { transform: scale(1.1); }
.bk-staff-any { background: linear-gradient(135deg,#9ca3af,#6b7280); font-size: 1.3rem; }
.bk-staff-img {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 14px;
    display: block;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    transition: transform .22s;
    border: 3px solid rgba(124,58,237,.15);
}
.bk-staff-card:hover .bk-staff-img { transform: scale(1.1); }
.bk-staff-card.selected .bk-staff-img,
.bk-staff-card.selected .bk-staff-avatar { box-shadow: 0 0 0 4px rgba(124,58,237,.3); }
.bk-staff-name {
    font-size: .92rem;
    font-weight: 800;
    color: var(--bk-dark);
    margin-bottom: 4px;
}
.bk-staff-pos { font-size: .75rem; color: var(--bk-muted); }

/* ══ DATE & SLOTS ══ */
.bk-date-row { margin-bottom: 32px; }
.bk-label {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    color: var(--bk-muted);
    margin-bottom: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.bk-date-input {
    max-width: 240px;
    border: 2px solid var(--bk-border);
    border-radius: var(--bk-radius-sm);
    padding: 13px 16px;
    font-size: .95rem;
    font-family: var(--bk-font-sans);
    color: var(--bk-dark);
    background: var(--bk-white);
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}
.bk-date-input:focus {
    border-color: var(--bk-primary);
    box-shadow: 0 0 0 4px rgba(124,58,237,.1);
    outline: none;
}
.bk-slots-wrap { margin-bottom: 32px; }
.bk-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 56px;
}
.bk-slots-loading, .bk-slots-empty {
    font-size: .88rem;
    color: var(--bk-muted);
    padding: 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bk-slot-btn {
    padding: 11px 22px;
    border: 2px solid var(--bk-border);
    border-radius: 50px;
    background: var(--bk-white);
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    color: var(--bk-text);
    font-family: var(--bk-font-sans);
    letter-spacing: .2px;
}
.bk-slot-btn:hover { border-color: var(--bk-primary); color: var(--bk-primary); background: var(--bk-primary-l); }
.bk-slot-btn.selected { border-color: var(--bk-primary); background: var(--bk-gradient); color: #fff; box-shadow: 0 4px 16px rgba(124,58,237,.3); }

/* ══ INFO FORM ══ */
.bk-selected-summary {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 12px;
    padding: 13px 20px;
    font-size: .86rem;
    color: #15803d;
    font-weight: 600;
    margin-bottom: 28px;
    display: flex; align-items: center; gap: 8px;
}
.bk-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 10px;
}
.bk-form-group { display: flex; flex-direction: column; gap: 8px; }
.bk-form-full  { grid-column: 1 / -1; }
.bk-form-group label { font-size: .72rem; font-weight: 800; color: var(--bk-dark); letter-spacing: .8px; text-transform: uppercase; }
.bk-input {
    border: 2px solid var(--bk-border);
    border-radius: var(--bk-radius-sm);
    padding: 13px 16px;
    font-size: .93rem;
    transition: border-color .2s, box-shadow .2s;
    font-family: var(--bk-font-sans);
    color: var(--bk-dark);
    background: #fafafa;
    width: 100%;
}
.bk-input:focus { border-color: var(--bk-primary); box-shadow: 0 0 0 4px rgba(124,58,237,.1); outline: none; background: #fff; }
.bk-input::placeholder { color: #b0b7c0; }
.bk-required { color: #ef4444; margin-left: 2px; }
.bk-optional { color: var(--bk-muted); font-size: .72rem; font-weight: 400; margin-left: 4px; text-transform: none; letter-spacing: 0; }

/* ══ COUPON ══ */
.bk-coupon-row { display: flex; gap: 10px; }
.bk-coupon-input { flex: 1; text-transform: uppercase; letter-spacing: .08em; }
.bk-apply-coupon-btn {
    white-space: nowrap;
    padding: 0 24px;
    border-radius: var(--bk-radius-sm);
    border: 2px solid var(--bk-primary);
    background: transparent;
    color: var(--bk-primary);
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    transition: all .2s;
    font-family: var(--bk-font-sans);
    min-height: 48px;
}
.bk-apply-coupon-btn:hover, .bk-apply-coupon-btn.bk-coupon-applied-btn { background: var(--bk-gradient); color: #fff; border-color: transparent; }
.bk-coupon-msg { margin-top: 8px; font-size: .82rem; font-weight: 600; }
.bk-coupon-success { color: var(--bk-green); }
.bk-coupon-error   { color: #dc2626; }
.bk-coupon-applied { color: var(--bk-green); font-weight: 700; }

/* ══ ERRORS ══ */
.bk-error {
    background: #fff0f0;
    border: 1.5px solid #fca5a5;
    border-radius: 12px;
    padding: 13px 18px;
    font-size: .86rem;
    color: #b91c1c;
    display: flex; align-items: center; gap: 9px;
    margin-top: 14px;
}

/* ══ BUTTONS ══ */
.bk-btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.bk-back-btn {
    padding: 13px 26px;
    border: 2px solid var(--bk-border);
    border-radius: 50px;
    background: var(--bk-white);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--bk-muted);
    transition: all .2s;
    font-family: var(--bk-font-sans);
    display: flex; align-items: center; gap: 6px;
}
.bk-back-btn:hover { border-color: var(--bk-dark); color: var(--bk-dark); }
.bk-primary-btn {
    flex: 1;
    padding: 15px 32px;
    border: none;
    border-radius: 50px;
    background: var(--bk-gradient);
    color: #fff;
    font-size: .97rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .22s;
    font-family: var(--bk-font-sans);
    letter-spacing: .3px;
    box-shadow: 0 6px 24px rgba(124,58,237,.35);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none;
}
.bk-primary-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(124,58,237,.45); }
.bk-confirm-btn {
    flex: 1;
    padding: 15px 32px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg,#16a34a,#15803d);
    color: #fff;
    font-size: .97rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .22s;
    font-family: var(--bk-font-sans);
    box-shadow: 0 6px 24px rgba(22,163,74,.35);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bk-confirm-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(22,163,74,.45); }
.bk-confirm-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.bk-outline-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 30px;
    border: 2px solid var(--bk-primary);
    border-radius: 50px;
    background: transparent;
    color: var(--bk-primary);
    font-size: .93rem; font-weight: 700;
    cursor: pointer; transition: all .2s;
    font-family: var(--bk-font-sans);
}
.bk-outline-btn:hover { background: var(--bk-gradient); color: #fff; border-color: transparent; }

/* ══ SUMMARY / CONFIRM ══ */
.bk-summary {
    background: var(--bk-bg);
    border-radius: var(--bk-radius-sm);
    overflow: hidden;
    border: 1.5px solid var(--bk-border-l);
}
.bk-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 24px;
    font-size: .9rem;
    border-bottom: 1px solid var(--bk-border);
    gap: 12px;
}
.bk-summary-row:last-child { border-bottom: none; }
.bk-summary-label {
    color: var(--bk-muted);
    font-weight: 600;
    font-size: .8rem;
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.bk-summary-val { font-weight: 600; color: var(--bk-dark); text-align: right; }
.bk-summary-total { background: var(--bk-primary-l); border-top: 2px solid var(--bk-primary-ll); }
.bk-summary-price { font-size: 1.25rem; font-weight: 800; color: var(--bk-primary); }

/* ══ EMPTY ══ */
.bk-empty { text-align: center; padding: 56px 20px; color: var(--bk-muted); font-size: .92rem; }
.bk-empty-icon { font-size: 3rem; display: block; margin-bottom: 14px; opacity: .3; }

/* ══ SUCCESS ══ */
.bk-success-wrap { text-align: center; padding: 24px 0; }
.bk-success-icon {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg,#16a34a,#15803d);
    color: #fff;
    font-size: 3rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
    animation: bkPop .5s cubic-bezier(.175,.885,.32,1.275);
    box-shadow: 0 12px 40px rgba(22,163,74,.35);
}
@keyframes bkPop {
    from { transform: scale(0) rotate(-12deg); opacity: 0; }
    to   { transform: scale(1) rotate(0);      opacity: 1; }
}
.bk-success-title {
    font-family: var(--bk-font-serif);
    font-size: 2rem; font-weight: 800;
    color: var(--bk-dark);
    margin-bottom: 10px;
}
.bk-success-sub { color: var(--bk-muted); margin-bottom: 32px; font-size: .95rem; }
.bk-success-card {
    background: var(--bk-bg);
    border-radius: var(--bk-radius-sm);
    text-align: left;
    border: 1.5px solid var(--bk-border-l);
    overflow: hidden;
    margin-bottom: 24px;
}
.bk-conf-num { font-weight: 800; color: var(--bk-primary); font-size: 1.05rem; letter-spacing: .8px; }
.bk-success-email-note {
    font-size: .82rem; color: var(--bk-muted); margin: 0 0 24px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.bk-success-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.bk-invoice-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

/* ══ SPINNER ══ */
.bk-spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bkSpin .65s linear infinite;
    vertical-align: middle;
}
.bk-spinner-sm { width: 14px; height: 14px; }
@keyframes bkSpin { to { transform: rotate(360deg); } }

/* ══ RESPONSIVE ══ */
@media (max-width: 640px) {
    .bk-hero-strip { padding: 40px 20px 36px; }
    .bk-container  { padding: 24px 16px 80px; }
    .bk-panel      { padding: 24px 20px; }
    .bk-steps      { padding: 10px 12px; border-radius: 16px; }
    .bk-step-label { display: none; }
    .bk-step-line  { min-width: 8px; }
    .bk-step-circle { width: 40px; height: 40px; font-size: .95rem; }
    .bk-service-grid { grid-template-columns: 1fr 1fr; }
    .bk-staff-grid   { grid-template-columns: repeat(3, 1fr); }
    .bk-form-grid    { grid-template-columns: 1fr; }
    .bk-form-full    { grid-column: 1; }
    .bk-cart-bar     { flex-direction: column; align-items: flex-start; gap: 12px; }
    .bk-cart-btn     { width: 100%; text-align: center; justify-content: center; display: flex; }
    .bk-date-input   { max-width: 100%; }
}
@media (max-width: 400px) {
    .bk-staff-grid   { grid-template-columns: 1fr 1fr; }
    .bk-service-grid { grid-template-columns: 1fr; }
}

@media print {
    .bk-steps, .bk-btn-row, .bk-hero-strip { display: none; }
}

/* booking-flow */

/* ── Reset & base ── */
*,*::before,*::after{box-sizing:border-box}
html,body{height:auto;overflow:auto;background:#f4f0ff}

/* ── Page wrapper ── */
.bkp{min-height:100vh;background:linear-gradient(160deg,#f4f0ff 0%,#ede8ff 40%,#f9f0ff 100%);font-family:'Inter',system-ui,sans-serif}

/* ── Container ── */
.bk-wrap{max-width:1080px;margin:0 auto;padding:40px clamp(14px,4vw,24px) 60px}

/* ── Steps indicator ── */
.bk-steps-bar{
    display:flex;align-items:center;margin-bottom:36px;
    background:#fff;border-radius:16px;padding:20px 28px;
    box-shadow:0 2px 16px rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.08)
}
.bk-step-item{display:flex;align-items:center;flex:1}
.bk-step-item:last-child{flex:0 0 auto}
.bk-step-dot{
    width:44px;height:44px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:1rem;font-weight:800;
    background:#f3e8ff;color:#9333ea;border:2px solid #e9d5ff;
    transition:all .3s
}
.bk-step-item.active .bk-step-dot{background:#7c3aed;color:#fff;border-color:#7c3aed;box-shadow:0 4px 16px rgba(124,58,237,.4)}
.bk-step-item.done   .bk-step-dot{background:#22c55e;color:#fff;border-color:#22c55e}
.bk-step-info{margin-left:10px}
.bk-step-num{font-size:.67rem;color:#a78bfa;font-weight:700;text-transform:uppercase;letter-spacing:1px;line-height:1}
.bk-step-name{font-size:.88rem;font-weight:700;color:#374151;line-height:1.3;margin-top:2px}
.bk-step-item.active .bk-step-name{color:#7c3aed}
.bk-step-item.done   .bk-step-name{color:#16a34a}
.bk-step-line{flex:1;height:2px;background:#e9d5ff;margin:0 14px;border-radius:2px;position:relative;overflow:hidden}
.bk-step-line::after{content:'';position:absolute;left:0;top:0;height:100%;background:#7c3aed;width:0;transition:width .4s;border-radius:2px}
.bk-step-item.done + .bk-step-line::after,
.bk-step-item.done~.bk-step-line::after{width:100%}
@media(max-width:560px){
    .bk-steps-bar{padding:14px 16px}
    .bk-step-dot{width:36px;height:36px;font-size:.88rem}
    .bk-step-info{display:none}
    .bk-step-line{margin:0 8px}
}

/* ── Main grid ── */
.bk-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
@media(max-width:900px){.bk-grid{grid-template-columns:1fr}}
@media(max-width:900px){.bk-summary-col{display:none}}

/* ── Card ── */
.bk-card{
    background:#fff;border-radius:18px;padding:24px;margin-bottom:16px;
    box-shadow:0 2px 20px rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.06)
}
.bk-card:last-child{margin-bottom:0}

/* ── Card heading ── */
.bk-card-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.bk-card-icon{
    width:42px;height:42px;border-radius:12px;flex-shrink:0;
    background:linear-gradient(135deg,#ede9fe,#ddd6fe);
    display:flex;align-items:center;justify-content:center;
    font-size:1.05rem;color:#7c3aed
}
.bk-card-title{font-size:1rem;font-weight:800;color:#1e1333}
.bk-card-sub{font-size:.78rem;color:#9ca3af;margin-top:2px}

/* ── Category label ── */
.bk-cat{
    font-size:.65rem;letter-spacing:2px;text-transform:uppercase;
    color:#a855f7;font-weight:700;margin:18px 0 10px;
    display:flex;align-items:center;gap:8px
}
.bk-cat::after{content:'';flex:1;height:1px;background:#f3e8ff}
.bk-cat:first-child{margin-top:0}

/* ── Service grid ── */
.bk-svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.bk-svc{
    border:2px solid #f3e8ff;border-radius:14px;cursor:pointer;
    background:#fafafa;overflow:hidden;position:relative;
    transition:border-color .2s,box-shadow .2s,background .2s;
    -webkit-tap-highlight-color:transparent
}
.bk-svc:hover{border-color:#c4b5fd;box-shadow:0 4px 16px rgba(124,58,237,.12)}
.bk-svc.selected{border-color:#7c3aed;background:#faf5ff;box-shadow:0 4px 20px rgba(124,58,237,.18)}
.bk-svc-img{
    width:100%;height:110px;overflow:hidden;
    background:linear-gradient(135deg,#f3e8ff,#ede9fe);
    display:flex;align-items:center;justify-content:center;
    font-size:2rem;color:#c4b5fd;border-bottom:1px solid #f3e8ff;flex-shrink:0
}
.bk-svc-img img{width:100%;height:100%;object-fit:cover;display:block}
.bk-svc-body{padding:12px 12px 13px;position:relative}
.bk-svc-tick{
    position:absolute;top:9px;right:9px;
    width:22px;height:22px;border-radius:50%;
    background:#e9d5ff;border:2px solid #c4b5fd;
    display:flex;align-items:center;justify-content:center;
    font-size:.6rem;color:transparent;transition:all .2s
}
.bk-svc.selected .bk-svc-tick{background:#7c3aed;border-color:#7c3aed;color:#fff}
.bk-svc-name{font-size:.85rem;font-weight:700;color:#1e1333;margin-bottom:6px;padding-right:26px;line-height:1.35}
.bk-svc-price{font-size:.95rem;font-weight:800;color:#7c3aed}
.bk-svc-dur{font-size:.68rem;color:#9ca3af;margin-top:3px}
@media(max-width:520px){
    .bk-svc-grid{grid-template-columns:1fr 1fr;gap:8px}
    .bk-svc-img{height:90px;font-size:1.6rem}
}

/* ── Staff grid ── */
.bk-staff-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.bk-staff{
    border:2px solid #f3e8ff;border-radius:14px;
    padding:16px 10px 14px;text-align:center;cursor:pointer;
    background:#fafafa;transition:all .2s;position:relative;
    -webkit-tap-highlight-color:transparent
}
.bk-staff:hover{border-color:#c4b5fd}
.bk-staff.selected{border-color:#7c3aed;background:#faf5ff;box-shadow:0 4px 16px rgba(124,58,237,.15)}
.bk-staff-av{
    width:52px;height:52px;border-radius:50%;margin:0 auto 10px;
    background:linear-gradient(135deg,#ede9fe,#ddd6fe);
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;font-weight:800;color:#7c3aed;
    overflow:hidden;border:2px solid #e9d5ff
}
.bk-staff-av img{width:100%;height:100%;object-fit:cover}
.bk-staff-nm{font-size:.8rem;font-weight:700;color:#1e1333;line-height:1.3}
.bk-staff-role{font-size:.65rem;color:#9ca3af;margin-top:2px}
.bk-staff.any-staff .bk-staff-av{background:#f3f4f6;color:#9ca3af;border-color:#e5e7eb}
@media(max-width:520px){
    .bk-staff-row{display:flex;overflow-x:auto;gap:10px;padding-bottom:4px;scrollbar-width:none}
    .bk-staff-row::-webkit-scrollbar{display:none}
    .bk-staff{min-width:90px;flex-shrink:0}
}

/* ── Calendar ── */
.bk-cal-wrap{background:#fafafa;border:1px solid #f3e8ff;border-radius:14px;overflow:hidden}
.bk-cal-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px 12px;border-bottom:1px solid #f3e8ff;background:#fff
}
.bk-cal-nav{
    width:30px;height:30px;border-radius:8px;background:#f3e8ff;border:none;
    color:#7c3aed;cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-size:.78rem;transition:all .18s
}
.bk-cal-nav:hover:not(:disabled){background:#7c3aed;color:#fff}
.bk-cal-nav:disabled{opacity:.3;cursor:not-allowed}
.bk-cal-month{font-size:.9rem;font-weight:700;color:#1e1333}
.bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:10px}
.bk-cal-dow{text-align:center;font-size:.58rem;font-weight:700;color:#c4b5fd;letter-spacing:.8px;text-transform:uppercase;padding:3px 0 6px}
.bk-cal-day{
    aspect-ratio:1;display:flex;align-items:center;justify-content:center;
    border-radius:8px;font-size:.82rem;font-weight:500;color:#374151;
    cursor:pointer;transition:all .15s;border:1.5px solid transparent
}
.bk-cal-day:not(.disabled):not(.empty):not(.selected):hover{background:#f3e8ff;color:#7c3aed}
.bk-cal-day.today{border-color:#c4b5fd;color:#7c3aed;font-weight:700}
.bk-cal-day.selected{background:#7c3aed;color:#fff;border-color:#7c3aed;box-shadow:0 3px 10px rgba(124,58,237,.35);font-weight:800}
.bk-cal-day.disabled{opacity:.25;cursor:not-allowed;pointer-events:none}
.bk-cal-day.empty{pointer-events:none}

/* ── Time slots ── */
.bk-slots-box{
    background:#fafafa;border:1px solid #f3e8ff;border-radius:14px;
    overflow:hidden;min-height:160px
}
.bk-slots-label{
    padding:11px 14px;background:#fff;border-bottom:1px solid #f3e8ff;
    display:flex;align-items:center;gap:8px;
    font-size:.78rem;font-weight:600;color:#6d28d9
}
.bk-slots-label i{font-size:.9rem}
.bk-slots-body{padding:12px;max-height:230px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#e9d5ff transparent}
.bk-slots-body::-webkit-scrollbar{width:3px}
.bk-slots-body::-webkit-scrollbar-thumb{background:#e9d5ff;border-radius:3px}
.bk-tg-label{
    font-size:.6rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
    color:#c4b5fd;margin:0 0 7px;display:flex;align-items:center;gap:6px
}
.bk-tg-label::after{content:'';flex:1;height:1px;background:#f3e8ff}
.bk-tg-label:not(:first-child){margin-top:12px}
.bk-slots-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:0}
.bk-slot{
    padding:9px 4px;border:1.5px solid #e9d5ff;border-radius:9px;
    font-size:.78rem;font-weight:600;color:#6b7280;cursor:pointer;
    text-align:center;background:#fff;transition:all .15s;
    -webkit-tap-highlight-color:transparent
}
.bk-slot:hover{border-color:#a855f7;color:#7c3aed;background:#f3e8ff}
.bk-slot.selected{background:#7c3aed;border-color:#7c3aed;color:#fff;box-shadow:0 3px 10px rgba(124,58,237,.3);font-weight:700}
.bk-slot-msg{padding:20px;text-align:center;font-size:.82rem;color:#9ca3af}

/* ── Inputs ── */
.bk-field{margin-bottom:0}
.bk-lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#6d28d9;margin-bottom:7px;display:block}
.bk-inp{
    width:100%;background:#fafafa;border:1.5px solid #e9d5ff;
    border-radius:12px;color:#1e1333;padding:13px 15px;font-size:.93rem;
    outline:none;transition:border-color .2s,background .2s
}
.bk-inp:focus{border-color:#7c3aed;background:#fff}
.bk-inp::placeholder{color:#c4b5fd}
textarea.bk-inp{resize:vertical;min-height:88px}

/* ── Coupon ── */
.bk-coupon-row{display:flex;gap:10px}
.bk-coupon-row .bk-inp{flex:1;letter-spacing:2px;font-weight:700;text-transform:uppercase}
.bk-coupon-btn{
    padding:0 20px;background:#7c3aed;border:none;border-radius:12px;
    color:#fff;font-weight:700;font-size:.85rem;cursor:pointer;
    white-space:nowrap;transition:all .2s
}
.bk-coupon-btn:hover{background:#5b21b6}

/* ── Nav buttons ── */
.bk-nav{display:flex;gap:12px;justify-content:space-between;margin-top:20px}
.bk-btn-back{
    padding:13px 22px;background:#fff;border:1.5px solid #e9d5ff;
    border-radius:12px;color:#6d28d9;font-weight:700;font-size:.88rem;
    cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px
}
.bk-btn-back:hover{background:#f3e8ff;border-color:#c4b5fd}
.bk-btn-next{
    padding:13px 26px;
    background:linear-gradient(135deg,#7c3aed,#5b21b6);
    border:none;border-radius:12px;color:#fff;font-weight:800;font-size:.9rem;
    cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:8px;
    box-shadow:0 4px 18px rgba(124,58,237,.3)
}
.bk-btn-next:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(124,58,237,.4)}
.bk-btn-next:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.bk-btn-confirm{
    flex:1;padding:15px;
    background:linear-gradient(135deg,#7c3aed,#5b21b6);
    border:none;border-radius:12px;color:#fff;font-weight:800;font-size:.92rem;
    cursor:pointer;transition:all .25s;
    display:flex;align-items:center;justify-content:center;gap:8px;
    box-shadow:0 4px 18px rgba(124,58,237,.3)
}
.bk-btn-confirm:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(124,58,237,.45)}
.bk-btn-confirm:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
@media(max-width:480px){
    .bk-btn-back{padding:12px 16px;font-size:.82rem}
    .bk-btn-next{flex:1;justify-content:center;padding:12px 14px;font-size:.84rem}
}

/* ── Errors ── */
.bk-err{font-size:.76rem;color:#ef4444;margin-top:6px;display:none;align-items:center;gap:5px}
.bk-err.show{display:flex}
.bk-err::before{content:'!';width:15px;height:15px;background:#ef4444;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:900;color:#fff;flex-shrink:0}
.bk-alert{padding:13px 16px;border-radius:12px;font-size:.86rem;margin-top:14px;display:none}
.bk-alert.show{display:flex;align-items:center;gap:8px}
.bk-alert.err{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}
.bk-alert.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#16a34a}
.bk-coupon-ok{font-size:.8rem;color:#16a34a;margin-top:8px;display:flex;align-items:center;gap:5px}
.bk-coupon-err{font-size:.8rem;color:#dc2626;margin-top:8px;display:flex;align-items:center;gap:5px}

/* ── Summary sidebar ── */
.bk-summary{
    background:#fff;border-radius:18px;padding:22px;
    box-shadow:0 2px 20px rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.08);
    position:sticky;top:80px
}
.bk-sum-title{
    font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
    color:#a855f7;margin-bottom:16px;display:flex;align-items:center;gap:6px
}
.bk-sum-empty{text-align:center;padding:28px 10px;color:#d8b4fe}
.bk-sum-empty i{font-size:2.2rem;display:block;margin-bottom:10px;opacity:.6}
.bk-sum-empty p{font-size:.8rem;color:#9ca3af;margin:0}
.bk-sum-row{
    display:flex;justify-content:space-between;align-items:flex-start;
    padding:9px 0;border-bottom:1px solid #f3e8ff;
    font-size:.82rem;color:#6b7280;gap:8px
}
.bk-sum-row:last-child{border-bottom:none}
.bk-sum-row strong{color:#1e1333;font-weight:700;text-align:right}
.bk-sum-total-wrap{
    background:linear-gradient(135deg,#7c3aed,#5b21b6);
    border-radius:12px;padding:14px 16px;margin-top:14px;
    display:flex;justify-content:space-between;align-items:center
}
.bk-sum-total-lbl{font-size:.72rem;color:rgba(255,255,255,.7);font-weight:600;text-transform:uppercase;letter-spacing:1px}
.bk-sum-total{font-size:1.4rem;font-weight:900;color:#fff}
.bk-sum-secure{margin-top:12px;text-align:center;font-size:.7rem;color:#c4b5fd;display:flex;align-items:center;justify-content:center;gap:5px}

/* ── Mobile bar ── */
.bk-mobile-bar{
    display:none;position:fixed;bottom:0;left:0;right:0;
    background:rgba(255,255,255,.97);border-top:1px solid #e9d5ff;
    backdrop-filter:blur(20px);z-index:999;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));
    align-items:center;gap:14px;
    transform:translateY(110%);transition:transform .3s cubic-bezier(.4,0,.2,1)
}
.bk-mobile-bar.visible{transform:translateY(0)}
@media(max-width:900px){
    .bk-mobile-bar{display:flex}
    .bk-wrap{padding-bottom:90px}
}
.bk-mb-dot{width:8px;height:8px;border-radius:50%;background:#7c3aed;flex-shrink:0;box-shadow:0 0 0 4px rgba(124,58,237,.15)}
.bk-mb-info{flex:1;min-width:0}
.bk-mb-lbl{font-size:.68rem;color:#9ca3af;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-mb-total{font-size:1.15rem;font-weight:900;color:#7c3aed}
.bk-mb-shield{font-size:1rem;color:#c4b5fd;flex-shrink:0}

/* ── Notice ── */
.bk-notice{
    background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;
    padding:12px 16px;font-size:.85rem;color:#15803d;
    display:flex;align-items:center;gap:8px;margin-bottom:20px
}

/* ── Utility ── */
.bk-nav-end{justify-content:flex-end}
.bk-req{color:#ef4444}
.bk-opt-label{color:#9ca3af;font-weight:400;text-transform:none;letter-spacing:0;font-size:.75rem}
.bk-card-icon-gold{background:linear-gradient(135deg,#fef3c7,#fde68a)!important;color:#d97706!important}
.bk-sum-green{color:#16a34a}
.bk-svc-empty{text-align:center;padding:40px;color:#c4b5fd}
.bk-svc-empty i{font-size:2.5rem;display:block;margin-bottom:12px;opacity:.4}
.bk-svc-empty p{margin:0;color:#9ca3af}
.bk-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(124,58,237,.25);border-top-color:#7c3aed;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}
.bk-spin-white{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* booking-lookup */

body:has(.uw) .site-header,
body:has(.uw) .site-footer { display:none!important; }
body:has(.uw) { background:var(--c-bg); }

.uw { display:flex; height:100vh; width:100vw; position:fixed; inset:0; z-index:9999; background:var(--c-bg); overflow:hidden; }
.da-sidebar { width:260px; flex-shrink:0; background:var(--c-surface); border-right:1px solid var(--c-border); display:flex; flex-direction:column; height:100vh; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.da-sidebar::-webkit-scrollbar { display:none; }
.da-sb-brand { padding:22px 20px 18px; border-bottom:1px solid var(--c-border); display:flex; align-items:center; gap:12px; text-decoration:none; }
.da-sb-logo { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark)); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff; font-weight:800; }
.da-sb-logo-full { flex-shrink:0; overflow:hidden; display:flex; align-items:center; }
.da-sb-logo-full img { height:44px; max-width:120px; object-fit:contain; }
.da-sb-brand-name { font-size:1.05rem; font-weight:800; color:var(--c-text); }
.da-sb-brand-tag  { font-size:.75rem; color:var(--c-primary); font-weight:600; }
.da-sb-nav { padding:16px 12px; flex:1; }
.da-sb-section { font-size:.68rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--c-text-faint); padding:12px 8px 6px; }
.da-nav-item { display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:var(--radius-sm); text-decoration:none; color:var(--c-text-muted); font-size:1rem; font-weight:500; transition:all .18s; margin-bottom:3px; }
.da-nav-item:hover { background:var(--c-primary-ultra); color:var(--c-primary); }
.da-nav-item.active { background:var(--c-primary-ultra); color:var(--c-primary); font-weight:700; }
.da-nav-icon { width:20px; text-align:center; font-size:1.1rem; flex-shrink:0; }
.da-nav-item.logout { color:#f87171; }
.da-nav-item.logout:hover { background:#fff5f5; color:#dc2626; }
.da-nav-badge { margin-left:auto; background:var(--c-primary); color:#fff; font-size:.68rem; font-weight:700; border-radius:20px; padding:1px 7px; }
.uw-main { flex:1; overflow-y:auto; background:var(--c-bg); }
.uw-topbar { position:sticky; top:0; z-index:10; background:rgba(245,247,251,.95); backdrop-filter:blur(14px); border-bottom:1px solid var(--c-border); padding:18px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.uw-topbar-title { font-size:1.3rem; font-weight:800; color:var(--c-text); }
.uw-topbar-sub { font-size:.85rem; color:var(--c-text-muted); }
.uw-content { padding:28px 32px 60px; }
.btn-new-appt {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 22px; border-radius:var(--radius-pill);
    background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark));
    color:#fff; font-size:.9rem; font-weight:700; text-decoration:none;
    box-shadow:var(--shadow-brand); transition:all .2s;
}
.btn-new-appt:hover { opacity:.9; color:#fff; transform:translateY(-1px); }
/* filter tabs */
.appt-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.appt-tab { padding:8px 18px; border-radius:var(--radius-pill); font-size:.88rem; font-weight:700; border:1.5px solid var(--c-border); background:var(--c-surface); color:var(--c-text-muted); cursor:pointer; transition:all .18s; }
.appt-tab.active, .appt-tab:hover { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
/* bottom nav */
.da-bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,.97); border-top:1px solid var(--c-border); backdrop-filter:blur(20px); padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px)); }
.da-bottom-nav-inner { display:flex; justify-content:space-around; align-items:center; }
.da-bn-item { display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:var(--c-text-faint); font-size:.72rem; font-weight:600; padding:5px 12px; border-radius:var(--radius-sm); }
.da-bn-item i { font-size:1.3rem; }
.da-bn-item.active { color:var(--c-primary); }
.da-bn-item-book i { font-size:1.5rem; color:var(--c-primary); }
@media(max-width:991px){
    .da-sidebar { display:none; } .da-bottom-nav { display:block; }
    .uw-content { padding:16px 16px 80px; } .uw-topbar { padding:14px 18px; }
}

.lk-wrap { max-width:860px; margin:0 auto; padding:40px 20px 60px; }
.lk-header { text-align:center; margin-bottom:32px; }
.lk-logo { width:60px; height:60px; border-radius:16px; margin:0 auto 16px; background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark)); display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:#fff; font-weight:800; box-shadow:0 6px 20px var(--c-shadow-color); }
.lk-title { font-size:1.8rem; font-weight:900; color:var(--c-text); margin-bottom:6px; }
.lk-sub   { font-size:1rem; color:var(--c-text-muted); }
.lk-search-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:28px 32px; box-shadow:var(--shadow); margin-bottom:28px; }
.lk-search-title { font-size:1.05rem; font-weight:800; color:var(--c-text); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.lk-search-title i { color:var(--c-primary); }
.lk-row { display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end; }
.lk-group { display:flex; flex-direction:column; gap:7px; }
.lk-label { font-size:.9rem; font-weight:700; color:var(--c-text); }
.lk-label-opt { font-weight:400; color:var(--c-text-muted); }
.lk-input { padding:13px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--c-border); background:var(--c-surface); font-size:1rem; color:var(--c-text); outline:none; transition:all .2s; width:100%; }
.lk-input:focus { border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-ultra); }
.lk-input::placeholder { color:var(--c-text-faint); }
.lk-input-uc { text-transform:uppercase; }
.lk-btn { padding:13px 28px; border-radius:var(--radius-pill); background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark)); color:#fff; font-size:1rem; font-weight:700; border:none; cursor:pointer; box-shadow:0 4px 14px var(--c-shadow-color); transition:all .2s; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.lk-btn:hover { transform:translateY(-1px); box-shadow:0 8px 22px var(--c-shadow-color); }
.lk-results-title { font-size:1.1rem; font-weight:800; color:var(--c-text); margin-bottom:16px; }
.lk-login-prompt { text-align:center; margin-top:24px; }
.lk-login-link { color:var(--c-primary); font-weight:600; text-decoration:none; font-size:.95rem; }
.lk-login-link:hover { text-decoration:underline; }
@media(max-width:600px){ .lk-row { grid-template-columns:1fr; } .lk-wrap { padding:24px 14px 40px; } .lk-search-card { padding:20px 18px; } }

.lk-alert { padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:20px; display:flex; align-items:center; gap:12px; font-size:.97rem; font-weight:600; }
.lk-alert-success { background:var(--c-success-bg); border:1px solid var(--c-success-border); color:var(--c-success); }
.lk-alert-error   { background:var(--c-danger-bg);  border:1px solid var(--c-danger-border);  color:var(--c-danger); }
.lk-alert i { font-size:1.2rem; }
.lk-appt-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:20px; margin-bottom:13px; box-shadow:var(--shadow); display:flex; gap:16px; align-items:flex-start; transition:box-shadow .2s,border-color .2s; }
.lk-appt-card:hover { box-shadow:var(--shadow-md); border-color:var(--c-primary-light); }
.lk-appt-icon { width:56px; height:56px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.6rem; overflow:hidden; }
.lk-appt-thumb { width:56px; height:56px; object-fit:cover; border-radius:14px; }
.lk-appt-body { flex:1; min-width:0; }
.lk-appt-name  { font-size:1.05rem; font-weight:800; color:var(--c-text); margin-bottom:4px; }
.lk-appt-staff { font-size:.88rem; color:var(--c-text-muted); margin-bottom:10px; }
.lk-appt-staff i { color:var(--c-primary); }
.lk-metas { display:flex; flex-wrap:wrap; gap:5px 16px; margin-bottom:12px; }
.lk-meta  { font-size:.86rem; color:var(--c-text-muted); display:flex; align-items:center; gap:5px; }
.lk-meta i { color:var(--c-primary); }
.lk-actions { display:flex; gap:9px; flex-wrap:wrap; }
.lk-appt-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.lk-appt-rel { font-size:.78rem; color:var(--c-text-faint); }
.lk-badge { padding:5px 13px; border-radius:var(--radius-pill); font-size:.8rem; font-weight:700; white-space:nowrap; }
.lk-badge-confirmed { background:var(--c-success-bg); color:var(--c-success); border:1px solid var(--c-success-border); }
.lk-badge-pending   { background:var(--c-warning-bg); color:var(--c-warning); border:1px solid var(--c-warning-border); }
.lk-badge-completed { background:var(--c-info-bg);    color:var(--c-info);    border:1px solid var(--c-info-border); }
.lk-badge-cancelled { background:var(--c-danger-bg);  color:var(--c-danger);  border:1px solid var(--c-danger-border); }
.btn-lk { padding:8px 18px; border-radius:var(--radius-pill); font-size:.88rem; font-weight:700; border:2px solid var(--c-primary); color:var(--c-primary); background:var(--c-surface); text-decoration:none; cursor:pointer; white-space:nowrap; transition:all .18s; display:inline-flex; align-items:center; gap:6px; }
.btn-lk:hover { background:var(--c-primary); color:#fff; }
.btn-lk-success { border-color:var(--c-success); color:var(--c-success); }
.btn-lk-success:hover { background:var(--c-success); color:#fff; }
.btn-lk-info { border-color:#c4b5fd; color:var(--c-info); }
.btn-lk-info:hover { background:var(--c-info-bg); border-color:var(--c-info); }
.btn-lk-danger { border-color:#fca5a5; color:var(--c-danger); }
.btn-lk-danger:hover { background:var(--c-danger-bg); border-color:var(--c-danger); }
.lk-empty { text-align:center; padding:48px 20px; background:var(--c-surface); border:1px dashed var(--c-primary-light); border-radius:var(--radius); }
.lk-empty i { font-size:2.8rem; color:var(--c-primary); opacity:.4; display:block; margin-bottom:14px; }
.lk-empty p { font-size:1rem; color:var(--c-text-muted); margin:0 0 16px; }

/* modal */
.lk-modal-backdrop { display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); align-items:center; justify-content:center; }
.lk-modal-backdrop.show { display:flex; }
.lk-modal { background:var(--c-surface); border-radius:20px; padding:32px 30px 26px; max-width:420px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,.15); animation:modalIn .25s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.lk-modal-icon  { font-size:2.6rem; text-align:center; display:block; margin-bottom:12px; }
.lk-modal-title { font-size:1.15rem; font-weight:800; color:var(--c-text); text-align:center; margin-bottom:8px; }
.lk-modal-body  { font-size:.97rem; color:var(--c-text-muted); text-align:center; margin-bottom:24px; }
.lk-modal-actions { display:flex; gap:12px; }
.lk-modal-btn-cancel  { flex:1; padding:13px; border-radius:var(--radius-pill); border:1.5px solid var(--c-border); background:var(--c-surface); font-size:.97rem; font-weight:700; cursor:pointer; transition:all .2s; }
.lk-modal-btn-cancel:hover  { background:var(--c-bg); }
.lk-modal-btn-confirm { flex:1; padding:13px; border-radius:var(--radius-pill); border:none; background:var(--c-danger); color:#fff; font-size:.97rem; font-weight:700; cursor:pointer; }
.lk-modal-btn-confirm:hover { background:#b91c1c; }
@media(max-width:600px){ .lk-appt-card { flex-wrap:wrap; } .lk-appt-right { width:100%; flex-direction:row; justify-content:space-between; } }

/* booking-confirm */

.bk-confirm-page {
    background:linear-gradient(180deg,var(--salon-dark,#1e1b4b) 0%,#080518 100%);
    min-height:90vh;padding:80px 0;
}
.bk-success-card {
    background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.2);
    border-radius:24px;padding:48px 40px;text-align:center;margin-bottom:28px;
}
.bk-success-icon {
    width:80px;height:80px;background:rgba(34,197,94,.15);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 24px;font-size:2rem;color:#22c55e;
}
.bk-success-title { font-size:1.8rem;font-weight:800;color:#fff;margin-bottom:8px; }
.bk-success-sub { color:rgba(255,255,255,.5);margin-bottom:0; }
.bk-details-card {
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
    border-radius:20px;padding:32px;
}
.bk-details-header {
    display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;
}
.bk-details-label {
    font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.35);
}
.bk-status-badge {
    background:rgba(34,197,94,.15);color:#22c55e;
    padding:4px 14px;border-radius:20px;font-size:.78rem;font-weight:600;
}
.bk-row {
    display:flex;align-items:center;gap:14px;
    padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.bk-row-icon {
    width:36px;height:36px;
    background:rgba(var(--salon-primary-rgb,124,58,237),.15);
    border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.bk-row-icon i { color:var(--salon-primary,#7c3aed); }
.bk-row-lbl { font-size:.72rem;color:rgba(255,255,255,.35); }
.bk-row-val { font-size:.95rem;color:#fff;font-weight:500; }
.bk-services { margin-top:16px; }
.bk-services-label {
    font-size:.72rem;letter-spacing:2px;text-transform:uppercase;
    color:rgba(255,255,255,.35);margin-bottom:12px;
}
.bk-service-row {
    display:flex;justify-content:space-between;
    padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.9rem;
}
.bk-service-name { color:rgba(255,255,255,.7); }
.bk-service-staff { color:rgba(255,255,255,.3);font-size:.78rem; }
.bk-service-price { color:#fff;font-weight:700; }
.bk-total-row { display:flex;justify-content:space-between;padding:12px 0;font-size:1rem; }
.bk-total-lbl { color:rgba(255,255,255,.5); }
.bk-total-val { color:var(--salon-accent,#f59e0b);font-size:1.1rem;font-weight:700; }
.bk-actions { display:flex;gap:12px;margin-top:24px;flex-wrap:wrap; }
.bk-action-btn {
    flex:1;padding:14px;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);border-radius:12px;
    color:#fff;text-align:center;text-decoration:none;font-weight:600;font-size:.9rem;
}
.bk-action-btn:hover { background:rgba(255,255,255,.1);color:#fff; }
.bk-action-btn-primary {
    flex:1;padding:14px;
    background:linear-gradient(135deg,var(--salon-primary,#7c3aed),var(--salon-secondary,#5b21b6));
    border-radius:12px;color:#fff;text-align:center;text-decoration:none;font-weight:600;font-size:.9rem;
}
.bk-action-btn-primary:hover { opacity:.92;color:#fff; }
@media(max-width:600px){
    .bk-success-card { padding:32px 22px; }
    .bk-details-card { padding:22px 18px; }
    .bk-actions { flex-direction:column; }
}

/* booking-closed */

.bk-closed-section {
    background:linear-gradient(180deg,var(--salon-dark,#1e1b4b) 0%,#080518 100%);
    min-height:80vh;display:flex;align-items:center;justify-content:center;padding:60px 20px;
}
.bk-closed-inner { text-align:center;max-width:480px; }
.bk-closed-icon {
    width:80px;height:80px;
    background:rgba(var(--salon-primary-rgb,124,58,237),.12);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    margin:0 auto 28px;font-size:2rem;color:var(--salon-primary,#7c3aed);
}
.bk-closed-title { font-size:2rem;font-weight:800;color:#fff;margin-bottom:12px; }
.bk-closed-msg { color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:32px; }
.bk-closed-btn {
    display:inline-block;padding:14px 36px;
    background:linear-gradient(135deg,var(--salon-primary,#7c3aed),var(--salon-secondary,#5b21b6));
    border-radius:12px;color:#fff;text-decoration:none;font-weight:700;
}
.bk-closed-btn:hover { opacity:.9;color:#fff; }

/* booking-invoice */

.inv-page-wrap {
    background:linear-gradient(180deg,var(--salon-dark,#1e1b4b) 0%,#080518 100%);
    min-height:90vh; padding:48px 0 80px;
}

/* Action bar */
.inv-action-bar {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px; margin-bottom:24px;
}
.inv-back-link {
    display:inline-flex; align-items:center; gap:8px;
    color:rgba(255,255,255,.45); font-size:.88rem; text-decoration:none;
    transition:color .18s;
}
.inv-back-link:hover { color:rgba(255,255,255,.8); }
.inv-btns { display:flex; gap:10px; flex-wrap:wrap; }
.inv-btn-print {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 22px; background:rgba(255,255,255,.07);
    border:1.5px solid rgba(255,255,255,.14); border-radius:12px;
    color:#fff; font-weight:600; font-size:.88rem; cursor:pointer; transition:all .2s;
}
.inv-btn-print:hover { background:rgba(255,255,255,.12); }
.inv-btn-pdf {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 22px;
    background:linear-gradient(135deg,var(--salon-primary,#7c3aed),var(--salon-secondary,#5b21b6));
    border:none; border-radius:12px; color:#fff; font-weight:700;
    font-size:.88rem; cursor:pointer;
    box-shadow:0 4px 18px rgba(var(--salon-primary-rgb,124,58,237),.35);
    transition:all .2s;
}
.inv-btn-pdf:hover { transform:translateY(-1px); }

/* Invoice card */
.inv-card { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.4); }

/* Card header */
.inv-card-head {
    background:linear-gradient(135deg,#0f0a2e,var(--salon-secondary,#5b21b6));
    padding:36px 40px;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:16px;
}
.inv-head-salon-name { color:#fff; font-size:1.5rem; font-weight:800; }
.inv-head-salon-tag  { color:rgba(255,255,255,.5); font-size:.85rem; }
.inv-head-right      { text-align:right; }
.inv-head-label      { color:rgba(255,255,255,.45); font-size:.68rem; letter-spacing:2.5px; text-transform:uppercase; }
.inv-head-number     { color:#fff; font-weight:800; font-size:1.05rem; margin-top:2px; }
.inv-head-date       { color:rgba(255,255,255,.4); font-size:.78rem; margin-top:4px; }

/* Card body */
.inv-body { padding:36px 40px; }

/* From / To */
.inv-parties { display:flex; gap:40px; margin-bottom:32px; flex-wrap:wrap; }
.inv-party { flex:1; min-width:160px; }
.inv-party-lbl  { font-size:.68rem; color:#aaa; text-transform:uppercase; letter-spacing:2px; margin-bottom:8px; }
.inv-party-name { font-weight:700; color:#111; font-size:.95rem; }
.inv-party-info { color:#555; font-size:.85rem; margin-top:3px; }

/* Appointment meta strip */
.inv-meta {
    background:#f5f3ff; border-radius:12px; padding:16px 20px;
    margin-bottom:28px; display:flex; gap:32px; flex-wrap:wrap;
}
.inv-meta-item {}
.inv-meta-lbl { font-size:.68rem; color:#888; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; }
.inv-meta-val { font-weight:700; color:#111; }
.inv-meta-val-accent { font-weight:700; color:var(--salon-primary,#7c3aed); text-transform:capitalize; }

/* Services table */
.inv-table { width:100%; border-collapse:collapse; margin-bottom:24px; }
.inv-table thead tr { background:#f1f0ff; }
.inv-table th {
    padding:12px 16px; text-align:left; font-size:.72rem; color:#666;
    font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
}
.inv-table th:first-child { border-radius:8px 0 0 8px; }
.inv-table th:last-child  { border-radius:0 8px 8px 0; text-align:right; }
.inv-table tbody tr { border-bottom:1px solid #f0f0f0; }
.inv-td-service  { padding:14px 16px; color:#222; font-size:.9rem; font-weight:500; }
.inv-td-staff    { padding:14px 16px; color:#777; font-size:.85rem; }
.inv-td-duration { padding:14px 16px; color:#777; font-size:.85rem; text-align:center; }
.inv-td-price    { padding:14px 16px; text-align:right; font-weight:700; color:#222; }
.inv-table tfoot tr { background:#fafafe; }
.inv-total-lbl { padding:16px; text-align:right; font-weight:700; color:#333; font-size:.95rem; }
.inv-total-val { padding:16px; text-align:right; font-weight:900; color:var(--salon-primary,#7c3aed); font-size:1.2rem; }

/* Notes */
.inv-notes {
    background:#fffbeb; border:1px solid #fde68a; border-radius:10px;
    padding:14px 18px; margin-bottom:24px; font-size:.85rem; color:#92400e;
}

/* Footer */
.inv-footer {
    text-align:center; padding-top:20px; border-top:1px solid #f0f0f0;
    color:#bbb; font-size:.8rem;
}
.inv-footer strong { color:var(--salon-primary,#7c3aed); }

@media print {
    .no-print, .site-header, .site-footer, .ud-hero, nav { display:none !important; }
    body { background:#fff !important; }
    .inv-page-wrap { background:#fff !important; padding:0 !important; }
    .inv-card { box-shadow:none !important; border-radius:0 !important; }
}

@media(max-width:600px) {
    .inv-card-head { padding:24px 22px; }
    .inv-body { padding:22px 18px; }
    .inv-parties { gap:20px; }
    .inv-table th, .inv-td-staff, .inv-td-duration { display:none; }
    .inv-td-service, .inv-td-price { display:table-cell; }
}

/* booking-reschedule */

body:has(.uw) .site-header,
body:has(.uw) .site-footer { display:none!important; }

body:has(.uw) { overflow:hidden; height:100%; background:var(--c-bg); }
.uw { display:flex; height:100vh; width:100vw; position:fixed; inset:0; z-index:9999; background:var(--c-bg); overflow:hidden; }
.da-sidebar { width:260px; flex-shrink:0; background:var(--c-surface); border-right:1px solid var(--c-border); display:flex; flex-direction:column; height:100vh; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.da-sidebar::-webkit-scrollbar { display:none; }
.da-sb-brand { padding:22px 20px 18px; border-bottom:1px solid var(--c-border); display:flex; align-items:center; gap:12px; text-decoration:none; }
.da-sb-logo { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark)); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff; font-weight:800; }
.da-sb-logo-full { flex-shrink:0; overflow:hidden; display:flex; align-items:center; }
.da-sb-logo-full img { height:44px; max-width:120px; object-fit:contain; }
.da-sb-brand-name { font-size:1.05rem; font-weight:800; color:var(--c-text); }
.da-sb-brand-tag  { font-size:.75rem; color:var(--c-primary); font-weight:600; }
.da-sb-nav { padding:16px 12px; flex:1; }
.da-sb-section { font-size:.68rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--c-text-faint); padding:12px 8px 6px; }
.da-nav-item { display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:var(--radius-sm); text-decoration:none; color:var(--c-text-muted); font-size:1rem; font-weight:500; transition:all .18s; margin-bottom:3px; }
.da-nav-item:hover { background:var(--c-primary-ultra); color:var(--c-primary); }
.da-nav-item.active { background:var(--c-primary-ultra); color:var(--c-primary); font-weight:700; }
.da-nav-icon { width:20px; text-align:center; font-size:1.1rem; flex-shrink:0; }
.da-nav-item.logout { color:#f87171; }
.da-nav-item.logout:hover { background:#fff5f5; color:#dc2626; }
.da-nav-badge { margin-left:auto; background:var(--c-primary); color:#fff; font-size:.68rem; font-weight:700; border-radius:20px; padding:1px 7px; }
.uw-main { flex:1; overflow-y:auto; background:var(--c-bg); }
.uw-topbar { position:sticky; top:0; z-index:10; background:rgba(245,247,251,.95); backdrop-filter:blur(14px); border-bottom:1px solid var(--c-border); padding:18px 32px; display:flex; align-items:center; justify-content:space-between; }
.uw-topbar-title { font-size:1.3rem; font-weight:800; color:var(--c-text); }
.uw-back { display:inline-flex; align-items:center; gap:8px; color:var(--c-text-muted); font-size:.95rem; font-weight:600; text-decoration:none; }
.uw-back:hover { color:var(--c-primary); }
.uw-content { padding:28px 32px 60px; max-width:700px; }
.da-bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,.97); border-top:1px solid var(--c-border); backdrop-filter:blur(20px); padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px)); }
.da-bottom-nav-inner { display:flex; justify-content:space-around; align-items:center; }
.da-bn-item { display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:var(--c-text-faint); font-size:.72rem; font-weight:600; padding:5px 12px; border-radius:var(--radius-sm); }
.da-bn-item i { font-size:1.3rem; }
.da-bn-item.active { color:var(--c-primary); }
@media(max-width:991px){ .da-sidebar{display:none;} .da-bottom-nav{display:block;} .uw-content{padding:16px 16px 80px;} .uw-topbar{padding:14px 18px;} }
body { background:var(--c-bg); min-height:100vh; }
.rs-wrap { max-width:680px; margin:0 auto; padding:40px 20px 60px; }
.rs-back { display:inline-flex; align-items:center; gap:8px; margin-bottom:24px; color:var(--c-text-muted); font-size:.97rem; font-weight:600; text-decoration:none; }
.rs-back:hover { color:var(--c-primary); }
.rs-header { text-align:center; margin-bottom:28px; }
.rs-icon { width:60px; height:60px; border-radius:16px; margin:0 auto 16px; background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark)); display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:#fff; box-shadow:0 6px 20px var(--c-shadow-color); }
.rs-title { font-size:1.7rem; font-weight:900; color:var(--c-text); margin-bottom:6px; }
.rs-sub   { font-size:.97rem; color:var(--c-text-muted); }

/* shared */
.rs-current-card { background:var(--c-primary-ultra); border:1px solid var(--c-primary-light); border-radius:var(--radius); padding:20px 24px; margin-bottom:24px; display:flex; gap:16px; align-items:center; }
.rs-current-icon { width:52px; height:52px; border-radius:14px; flex-shrink:0; overflow:hidden; background:var(--c-primary-light); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.rs-current-icon img { width:100%; height:100%; object-fit:cover; border-radius:14px; }
.rs-current-name { font-size:1.05rem; font-weight:800; color:var(--c-text); margin-bottom:6px; }
.rs-current-meta { font-size:.88rem; color:var(--c-text-muted); display:flex; flex-wrap:wrap; gap:4px 14px; }
.rs-current-meta i { color:var(--c-primary); }
.rs-current-badge { margin-left:auto; flex-shrink:0; padding:5px 13px; border-radius:var(--radius-pill); background:var(--c-primary-light); color:var(--c-primary); font-size:.8rem; font-weight:700; white-space:nowrap; }
.rs-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:28px 32px; box-shadow:var(--shadow); margin-bottom:20px; }
.rs-card-title { font-size:1.05rem; font-weight:800; color:var(--c-text); margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.rs-card-title i { color:var(--c-primary); }
.rs-group { display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.rs-label { font-size:.92rem; font-weight:700; color:var(--c-text); }
.rs-input { padding:13px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--c-border); background:var(--c-surface); font-size:1rem; color:var(--c-text); outline:none; transition:all .2s; width:100%; }
.rs-input:focus { border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-ultra); }
.rs-slots { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.rs-slot { padding:9px 18px; border-radius:var(--radius-pill); font-size:.92rem; font-weight:700; border:2px solid var(--c-border); background:var(--c-surface); color:var(--c-text-muted); cursor:pointer; transition:all .18s; }
.rs-slot:hover { border-color:var(--c-primary-light); color:var(--c-primary); }
.rs-slot.selected { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.rs-slots-loading,.rs-slots-empty { color:var(--c-text-muted); font-size:.92rem; padding:8px 0; }
.rs-alert { padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:20px; display:flex; align-items:center; gap:12px; font-size:.97rem; font-weight:600; }
.rs-alert-error { background:var(--c-danger-bg); border:1px solid var(--c-danger-border); color:var(--c-danger); }
.rs-actions { display:flex; gap:12px; margin-top:8px; }
.btn-rs-save { padding:13px 32px; border-radius:var(--radius-pill); background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark)); color:#fff; font-size:1rem; font-weight:700; border:none; cursor:pointer; box-shadow:var(--shadow-brand); transition:all .2s; display:inline-flex; align-items:center; gap:8px; }
.btn-rs-save:hover { transform:translateY(-1px); box-shadow:0 8px 22px var(--c-shadow-color); }
.btn-rs-save:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.btn-rs-cancel { padding:13px 24px; border-radius:var(--radius-pill); border:2px solid var(--c-border); background:var(--c-surface); color:var(--c-text-muted); font-size:1rem; font-weight:700; text-decoration:none; transition:all .2s; display:inline-flex; align-items:center; gap:8px; }
.btn-rs-cancel:hover { border-color:var(--c-primary-light); color:var(--c-primary); }
@media(max-width:600px){ .rs-card{padding:20px 18px;} .rs-current-card{flex-direction:column;text-align:center;} .rs-current-badge{margin-left:0;} .rs-actions{flex-direction:column;} .btn-rs-save,.btn-rs-cancel{justify-content:center;} }