/*!
 * hospitalbooking.css — redesigned /hospital-booking/{slug} wizard
 * Same conventions as hospitaldetails.css / doctordetails.css: `.hb-` prefix,
 * teal/navy tokens on `.hb-section`, and every icon rule setting BOTH color
 * and stroke with !important.
 */

.hb-section {
    --hb-teal: var(--site-base, #09a9b7);
    --hb-teal-dark: var(--site-base-dark, #087e8b);
    --hb-navy: var(--site-secondary, #0d1c51);
    --hb-text: #24355e;
    --hb-muted: #6b7897;
    --hb-line: #dfeaf0;
    --hb-bg: var(--site-base-bg, #f5fbfd);
    --hb-soft: var(--site-base-tint, #eaf9fb);
    --hb-amber: #f5a623;
    --hb-green: #1f9254;
    --hb-red: #e2564f;
    --hb-radius: 16px;
    --hb-shadow: 0 8px 26px rgba(20, 70, 100, .08);
}

.hb-section h1, .hb-section h2, .hb-section h3, .hb-section h4, .hb-section p { margin: 0; }
.hb-section a { text-decoration: none; }

/* mirrors the theme container */
.hb-wrap {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-right: var(--bs-gutter-x, 12px);
    padding-left: var(--bs-gutter-x, 12px);
}
@media (min-width: 576px)  { .hb-wrap { max-width: 540px; } }
@media (min-width: 768px)  { .hb-wrap { max-width: 720px; } }
@media (min-width: 992px)  { .hb-wrap { max-width: 960px; } }
@media (min-width: 1200px) { .hb-wrap { max-width: 1140px; } }
@media (min-width: 1500px) { .hb-wrap { max-width: 1440px; } }

/* ------------------------------------------------------------- breadcrumb */
.hb-crumb { padding: 12px 0; background: #fff; border-bottom: 1px solid var(--hb-line); }
.hb-crumb ol {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px;
}
.hb-crumb li { color: var(--hb-muted); }
.hb-crumb li + li::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 5 Pro";
    font-weight: 900; margin-right: 8px; color: #b6c2d6; font-size: 11px;
}
.hb-crumb a { color: var(--hb-muted); }
.hb-crumb a:hover { color: var(--hb-teal-dark); }
.hb-crumb [aria-current] { color: var(--hb-teal-dark); font-weight: 600; }

/* ============================================================= page head */
.hb-top { background: var(--hb-bg); padding: 24px 0 26px; }
.hb-head { margin-bottom: 18px; }
.hb-head__title { font-size: 30px; font-weight: 700; color: var(--hb-navy); letter-spacing: -.4px; line-height: 1.2; }
.hb-head__sub { font-size: 14px; color: var(--hb-muted); margin-top: 7px; line-height: 1.6; max-width: 640px; }

/* ================================================================ layout */
.hb-body { padding: 22px 0 34px; }
.hb-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}
@media (max-width: 1199px) { .hb-layout { grid-template-columns: minmax(0, 1fr) 310px; } }
@media (max-width: 991px)  { .hb-layout { grid-template-columns: minmax(0, 1fr); } }

.hb-main { min-width: 0; }

/* ---------------------------------------------------------------- panel */
.hb-panel {
    background: #fff;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
    box-shadow: var(--hb-shadow);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.hb-panel:last-child { margin-bottom: 0; }

.hb-panel__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.hb-step {
    flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--hb-teal); color: #fff !important;
    font-size: 14px; font-weight: 700;
}
.hb-panel__title { font-size: 18px; font-weight: 700; color: var(--hb-navy); line-height: 1.3; }
.hb-panel__sub { font-size: 12.5px; color: var(--hb-muted); margin-top: 3px; line-height: 1.5; }

/* ------------------------------------------------- step 1: type + picks */
.hb-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 575px) { .hb-types { grid-template-columns: 1fr; } }

.hb-type {
    position: relative;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px;
    border: 1.5px solid var(--hb-line); border-radius: 14px;
    background: #fff; cursor: pointer;
    transition: all .2s ease;
}
.hb-type input { position: absolute; opacity: 0; pointer-events: none; }
.hb-type__ico {
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative; background: var(--hb-soft);
}
.hb-type__ico svg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: var(--hb-teal-dark) !important; stroke: var(--hb-teal-dark) !important;
}
.hb-type b { display: block; font-size: 14px; font-weight: 700; color: var(--hb-text); }
.hb-type span { display: block; font-size: 12px; color: var(--hb-muted); margin-top: 3px; line-height: 1.45; }
.hb-type:hover { border-color: var(--site-base-tint-4, #b9e3e9); }
.hb-type.is-on { border-color: var(--hb-teal); background: var(--hb-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-base) 10%, transparent); }
.hb-type.is-on .hb-type__ico { background: var(--hb-teal); }
.hb-type.is-on .hb-type__ico svg { color: #fff !important; stroke: #fff !important; }

.hb-picks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 16px;
}
@media (max-width: 575px) { .hb-picks { grid-template-columns: 1fr; } }

.hb-lab { display: block; }
.hb-lab > span {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--hb-text); margin-bottom: 6px;
}
.hb-lab__in {
    display: flex; align-items: center; gap: 8px;
    padding: 0 13px;
    border: 1px solid var(--hb-line); border-radius: 10px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hb-lab__in:focus-within { border-color: var(--hb-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-base) 12%, transparent); }
.hb-lab__in svg {
    width: 17px; height: 17px; flex: 0 0 auto;
    color: var(--site-base-dark, #087e8b) !important; stroke: var(--site-base-dark, #087e8b) !important;
}
.hb-lab__in select, .hb-lab__in input {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: 0; background: transparent;
    padding: 12px 0; font-size: 13.5px; color: var(--hb-text); font-family: inherit;
}
.hb-lab__in select { appearance: none; cursor: pointer; }
.hb-lab__in input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }

.hb-hint {
    display: flex; align-items: flex-start; gap: 7px;
    margin-top: 14px; padding: 11px 13px;
    border-radius: 10px; background: var(--hb-bg);
    font-size: 12.5px; color: var(--hb-muted); line-height: 1.5;
}
.hb-hint svg {
    width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px;
    color: var(--hb-teal) !important; stroke: var(--hb-teal) !important;
}

/* --------------------------------------------------- step 2: doctor grid */
.hb-docs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 1199px) { .hb-docs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .hb-docs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .hb-docs { grid-template-columns: 1fr; } }

.hb-doc {
    position: relative;
    display: flex; gap: 11px; align-items: flex-start;
    padding: 12px;
    border: 1.5px solid var(--hb-line); border-radius: 13px;
    background: #fff; cursor: pointer;
    transition: all .2s ease;
}
.hb-doc input { position: absolute; opacity: 0; pointer-events: none; }
.hb-doc__ava {
    flex: 0 0 auto;
    width: 52px; height: 52px; border-radius: 11px;
    overflow: hidden; position: relative; background: var(--hb-soft);
}
.hb-doc__ava img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hb-doc__body { min-width: 0; flex: 1 1 auto; }
.hb-doc__name {
    font-size: 13px; font-weight: 700; color: var(--hb-navy); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-doc__role { font-size: 11.5px; color: var(--hb-teal-dark); font-weight: 600; margin-top: 2px; }
.hb-doc__dept { font-size: 11px; color: var(--hb-muted); margin-top: 3px; }
.hb-doc__fee { font-size: 12.5px; font-weight: 800; color: var(--hb-navy); margin-top: 5px; }
.hb-doc:hover { border-color: var(--site-base-tint-4, #b9e3e9); transform: translateY(-2px); }
.hb-doc.is-on { border-color: var(--hb-teal); background: var(--hb-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-base) 10%, transparent); }

.hb-doc__tick {
    position: absolute; top: 8px; right: 8px;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: absolute;
    background: var(--hb-teal);
    opacity: 0; transform: scale(.5);
    transition: all .2s ease;
}
.hb-doc__tick svg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 12px; height: 12px; color: #fff !important; stroke: #fff !important;
}
.hb-doc.is-on .hb-doc__tick { opacity: 1; transform: scale(1); }

.hb-skip {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; padding: 13px 15px;
    border: 1.5px dashed var(--hb-line); border-radius: 12px;
    cursor: pointer; transition: all .2s ease;
}
.hb-skip input { accent-color: var(--hb-teal); width: 16px; height: 16px; }
.hb-skip b { font-size: 13px; font-weight: 600; color: var(--hb-text); }
.hb-skip.is-on { border-color: var(--hb-teal); background: var(--hb-bg); }

/* ---------------------------------------------------- step 3: date & time */
.hb-step3 {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 22px;
}
@media (max-width: 991px) { .hb-step3 { grid-template-columns: 1fr; } }

/* calendar */
.hb-cal__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.hb-cal__month { font-size: 14.5px; font-weight: 700; color: var(--hb-navy); }
.hb-cal__nav { display: flex; gap: 6px; }
.hb-cal__btn {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--hb-line); background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .2s ease;
}
.hb-cal__btn:hover { border-color: var(--hb-teal); background: var(--hb-soft); }
.hb-cal__btn svg { width: 14px; height: 14px; color: var(--hb-text) !important; stroke: var(--hb-text) !important; }

.hb-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hb-cal__dow {
    text-align: center; font-size: 10.5px; font-weight: 700;
    color: var(--hb-muted); padding-bottom: 4px; text-transform: uppercase;
}
.hb-day {
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 9px;
    background: transparent; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--hb-text);
    transition: all .15s ease;
}
.hb-day:hover:not(.is-off) { background: var(--hb-soft); border-color: var(--site-base-tint-4, #b9e3e9); }
.hb-day.is-out { visibility: hidden; }
.hb-day.is-off { color: #c3ccdb; cursor: not-allowed; }
.hb-day.is-full { color: #c3ccdb; cursor: not-allowed; text-decoration: line-through; }
.hb-day.is-today { border-color: var(--hb-teal); }
.hb-day.is-on { background: var(--hb-teal); border-color: var(--hb-teal); color: #fff !important; }

.hb-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.hb-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--hb-muted); }
.hb-legend i {
    width: 11px; height: 11px; border-radius: 3px; display: inline-block;
}
.hb-legend .sw-free { background: #fff; border: 1px solid var(--hb-teal); }
.hb-legend .sw-full { background: #e3edf2; }
.hb-legend .sw-off  { background: #f3f6f9; border: 1px solid var(--hb-line); }

/* slot part tabs + grid */
.hb-parts { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--hb-bg); border-radius: 10px; }
.hb-part {
    flex: 1; padding: 9px 6px; border: 0; border-radius: 8px;
    background: transparent; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--hb-muted);
    transition: all .2s ease;
}
.hb-part.is-on { background: var(--hb-teal); color: #fff !important; box-shadow: 0 3px 10px color-mix(in srgb, var(--site-base) 28%, transparent); }

.hb-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 575px) { .hb-slots { grid-template-columns: repeat(3, 1fr); } }

.hb-slot {
    padding: 11px 4px;
    border: 1px solid var(--hb-line); border-radius: 10px;
    background: #fff; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--hb-text);
    transition: all .2s ease; text-align: center;
}
.hb-slot:hover:not(:disabled) { border-color: var(--hb-teal); background: var(--hb-soft); }
.hb-slot:disabled {
    color: #c3ccdb; cursor: not-allowed;
    background: #f6f9fb; text-decoration: line-through;
}
.hb-slot.is-on { background: var(--hb-teal); border-color: var(--hb-teal); color: #fff !important; }

.hb-note {
    padding: 16px; text-align: center;
    border: 1px dashed var(--hb-line); border-radius: 12px;
    background: var(--hb-bg);
    font-size: 13px; color: var(--hb-muted);
}

/* ------------------------------------------------- step 4: patient form */
.hb-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.hb-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .hb-row, .hb-row--3 { grid-template-columns: 1fr; } }

.hb-full { grid-column: 1 / -1; }
.hb-req { color: var(--hb-red); }

.hb-phone {
    display: flex; align-items: center;
    border: 1px solid var(--hb-line); border-radius: 10px;
    overflow: hidden; background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hb-phone:focus-within { border-color: var(--hb-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-base) 12%, transparent); }
.hb-phone__cc {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 5px;
    padding: 0 12px; align-self: stretch;
    border-right: 1px solid var(--hb-line);
    background: var(--hb-bg);
    font-size: 13px; font-weight: 600; color: var(--hb-text);
}
.hb-phone input {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: 0; background: transparent;
    padding: 12px 13px; font-size: 13.5px; color: var(--hb-text); font-family: inherit;
}

.hb-ptypes {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 575px) { .hb-ptypes { grid-template-columns: 1fr; } }

.hb-ptype {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 12px;
    border: 1.5px solid var(--hb-line); border-radius: 12px;
    background: #fff; cursor: pointer;
    transition: all .2s ease;
}
.hb-ptype input { position: absolute; opacity: 0; pointer-events: none; }
.hb-ptype__ico {
    flex: 0 0 auto;
    width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative; background: var(--hb-soft);
}
.hb-ptype__ico svg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: var(--hb-teal-dark) !important; stroke: var(--hb-teal-dark) !important;
}
.hb-ptype b { display: block; font-size: 13px; font-weight: 600; color: var(--hb-text); }
.hb-ptype span { display: block; font-size: 11px; color: var(--hb-muted); margin-top: 1px; }
.hb-ptype.is-on { border-color: var(--hb-teal); background: var(--hb-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-base) 10%, transparent); }
.hb-ptype.is-on .hb-ptype__ico { background: var(--hb-teal); }
.hb-ptype.is-on .hb-ptype__ico svg { color: #fff !important; stroke: #fff !important; }

.hb-textarea {
    width: 100%; min-height: 96px; padding: 12px 13px;
    border: 1px solid var(--hb-line); border-radius: 10px;
    font-family: inherit; font-size: 13.5px; color: var(--hb-text);
    outline: 0; resize: vertical;
}
.hb-textarea:focus { border-color: var(--hb-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-base) 12%, transparent); }
.hb-textarea::placeholder { color: #a9b6c9; }

.hb-counter { font-size: 11.5px; color: var(--hb-muted); text-align: right; margin-top: 5px; }

.hb-err {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 5px;
    font-size: 11.5px; color: var(--hb-red) !important;
}
.hb-err svg {
    width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px;
    color: var(--hb-red) !important; stroke: var(--hb-red) !important;
}

.hb-alert {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 12px 14px; margin-bottom: 16px;
    border: 1px solid #f6c9c6; border-radius: 11px;
    background: #fdf3f2;
    font-size: 13px; color: #a63c36; line-height: 1.5;
}
.hb-alert svg {
    width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px;
    color: var(--hb-red) !important; stroke: var(--hb-red) !important;
}

/* ------------------------------------------------- step 5: confirm + pay */
.hb-pays {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
@media (max-width: 1199px) { .hb-pays { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px)  { .hb-pays { grid-template-columns: repeat(2, 1fr); } }

.hb-pay {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 14px 8px; text-align: center;
    border: 1.5px solid var(--hb-line); border-radius: 12px;
    background: #fff; cursor: pointer;
    transition: all .2s ease;
}
.hb-pay input { position: absolute; opacity: 0; pointer-events: none; }
.hb-pay__ico {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative; background: var(--hb-soft);
}
.hb-pay__ico svg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: var(--hb-teal-dark) !important; stroke: var(--hb-teal-dark) !important;
}
.hb-pay b { font-size: 12.5px; font-weight: 700; color: var(--hb-text); line-height: 1.3; }
.hb-pay span { font-size: 10.5px; color: var(--hb-muted); line-height: 1.4; }
.hb-pay:hover { border-color: var(--site-base-tint-4, #b9e3e9); }
.hb-pay.is-on { border-color: var(--hb-teal); background: var(--hb-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-base) 10%, transparent); }
.hb-pay.is-on .hb-pay__ico { background: var(--hb-teal); }
.hb-pay.is-on .hb-pay__ico svg { color: #fff !important; stroke: #fff !important; }

.hb-terms {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 18px; padding: 14px;
    border: 1px solid var(--hb-line); border-radius: 12px;
    background: var(--hb-bg);
    font-size: 13px; color: var(--hb-text); line-height: 1.55; cursor: pointer;
}
.hb-terms input { flex: 0 0 auto; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--hb-teal); }

/* ---------------------------------------------------------------- btns */
.hb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    border: 1px solid var(--hb-teal); border-radius: 11px;
    background: var(--hb-teal); color: #fff !important;
    font-size: 14px; font-weight: 600; line-height: 1.2;
    cursor: pointer; transition: all .2s ease; text-align: center;
}
.hb-btn:hover { background: var(--hb-teal-dark); border-color: var(--hb-teal-dark); color: #fff !important; }
.hb-btn svg { width: 17px; height: 17px; color: #fff !important; stroke: #fff !important; }
.hb-btn--block { display: flex; width: 100%; }
.hb-btn--outline { background: #fff; color: var(--hb-teal-dark) !important; border-color: var(--site-base-tint-4, #b9e3e9); }
.hb-btn--outline:hover { background: var(--hb-soft); color: var(--hb-teal-dark) !important; }
.hb-btn--ghost { background: transparent; border-color: var(--hb-line); color: var(--hb-text) !important; }
.hb-btn--ghost:hover { background: var(--hb-bg); color: var(--hb-teal-dark) !important; border-color: var(--hb-teal); }
.hb-btn--lg { padding: 14px 26px; font-size: 15px; }

.hb-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    margin-top: 18px; flex-wrap: wrap;
}

/* ================================================================ sidebar */
.hb-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 991px) { .hb-side { position: static; } }

.hb-box {
    background: #fff;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
    box-shadow: var(--hb-shadow);
    padding: 16px 17px;
}
.hb-box__head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.hb-box__ico {
    flex: 0 0 auto;
    width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative; background: var(--hb-soft);
}
.hb-box__ico svg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: var(--hb-teal-dark) !important; stroke: var(--hb-teal-dark) !important;
}
.hb-box__title { font-size: 15.5px; font-weight: 700; color: var(--hb-navy); }
.hb-box__sub { font-size: 11.5px; color: var(--hb-muted); margin-top: 3px; line-height: 1.45; }

/* summary rows */
.hb-sum__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; }
.hb-sum__row + .hb-sum__row { border-top: 1px dashed var(--hb-line); }
.hb-sum__lab { font-size: 12.5px; color: var(--hb-muted); flex: 0 0 auto; }
.hb-sum__val { font-size: 12.5px; font-weight: 600; color: var(--hb-text); text-align: right; word-break: break-word; }
.hb-sum__val.is-muted { font-weight: 500; color: var(--hb-muted); }

.hb-sum__doc { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.hb-sum__doc img {
    width: 36px; height: 36px; border-radius: 9px;
    object-fit: cover; object-position: top center; background: var(--hb-soft);
}

/* fee table */
.hb-fee { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--hb-line); }
.hb-fee__row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.hb-fee__lab { color: var(--hb-muted); }
.hb-fee__val { font-weight: 600; color: var(--hb-text); }
.hb-fee__row--total {
    margin-top: 8px; padding-top: 11px;
    border-top: 1px dashed var(--hb-line);
}
.hb-fee__row--total .hb-fee__lab { font-weight: 700; color: var(--hb-navy); font-size: 14px; }
.hb-fee__row--total .hb-fee__val { font-weight: 800; color: var(--hb-teal-dark); font-size: 18px; }

/* what happens next */
.hb-next { display: flex; flex-direction: column; gap: 14px; }
.hb-next__item { display: flex; align-items: flex-start; gap: 11px; }
.hb-next__n {
    flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
    background: var(--hb-soft);
    font-size: 11.5px; font-weight: 800; color: var(--hb-teal-dark) !important;
}
.hb-next__n svg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: var(--hb-teal-dark) !important; stroke: var(--hb-teal-dark) !important;
}
.hb-next__t { font-size: 13px; font-weight: 700; color: var(--hb-text); }
.hb-next__d { font-size: 12px; color: var(--hb-muted); line-height: 1.55; margin-top: 3px; }

/* help */
.hb-help { text-align: center; background: linear-gradient(180deg, #f6fcfd, #e9f7fa); }
.hb-help__ico {
    width: 54px; height: 54px; margin: 0 auto 11px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
    background: #fff; box-shadow: 0 3px 12px rgba(20, 70, 100, .1);
}
.hb-help__ico svg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: var(--hb-teal) !important; stroke: var(--hb-teal) !important;
}
.hb-help__t { font-size: 15.5px; font-weight: 700; color: var(--hb-navy); }
.hb-help__d { font-size: 12.5px; line-height: 1.6; color: var(--hb-muted); margin-top: 6px; }
.hb-help__cta { margin-top: 13px; }

/* ================================================================= empty */
.hb-empty {
    text-align: center; padding: 24px 14px;
    border: 1px dashed var(--hb-line); border-radius: 13px;
    background: var(--hb-bg);
}
.hb-empty__ico {
    width: 44px; height: 44px; margin: 0 auto 10px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative; background: #fff;
}
.hb-empty__ico svg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    color: #a9bdd0 !important; stroke: #a9bdd0 !important;
}
.hb-empty h4 { font-size: 14px; font-weight: 700; color: var(--hb-text); }
.hb-empty p { font-size: 12.5px; color: var(--hb-muted); margin-top: 4px; }

/* ========================================================== confirmation */
.hb-done {
    max-width: 780px; margin: 0 auto;
    padding: 34px 22px 40px;
}
.hb-done__card {
    background: #fff;
    border: 1px solid var(--hb-line);
    border-radius: 20px;
    box-shadow: var(--hb-shadow);
    padding: 30px 26px;
    text-align: center;
}
.hb-done__tick {
    width: 74px; height: 74px; margin: 0 auto 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
    background: #e7f7ec;
}
.hb-done__tick svg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 36px; height: 36px;
    color: var(--hb-green) !important; stroke: var(--hb-green) !important;
}
.hb-done__title { font-size: 25px; font-weight: 700; color: var(--hb-navy); letter-spacing: -.3px; }
.hb-done__sub { font-size: 14px; color: var(--hb-muted); margin-top: 9px; line-height: 1.6; }
.hb-done__ref {
    display: inline-block;
    margin-top: 18px; padding: 11px 22px;
    border: 1px dashed var(--hb-teal); border-radius: 12px;
    background: var(--hb-bg);
}
.hb-done__ref span { display: block; font-size: 11.5px; color: var(--hb-muted); }
.hb-done__ref b { display: block; font-size: 20px; font-weight: 800; color: var(--hb-navy); letter-spacing: 1px; margin-top: 3px; }

.hb-done__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--hb-line);
    text-align: left;
}
@media (max-width: 575px) { .hb-done__grid { grid-template-columns: 1fr; } }
.hb-done__cell { padding: 9px 0; display: flex; align-items: flex-start; gap: 9px; }
.hb-done__cell svg {
    width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px;
    color: var(--hb-teal) !important; stroke: var(--hb-teal) !important;
}
.hb-done__cell span { display: block; font-size: 11.5px; color: var(--hb-muted); }
.hb-done__cell b { display: block; font-size: 13.5px; font-weight: 600; color: var(--hb-text); margin-top: 2px; line-height: 1.4; }

.hb-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
}
.hb-badge svg { width: 13px; height: 13px; }
.hb-badge.is-pending   { background: #fff4e2; color: #b8760f !important; }
.hb-badge.is-pending svg { color: #b8760f !important; stroke: #b8760f !important; }
.hb-badge.is-confirmed { background: #e7f7ec; color: var(--hb-green) !important; }
.hb-badge.is-confirmed svg { color: var(--hb-green) !important; stroke: var(--hb-green) !important; }
.hb-badge.is-completed { background: var(--hb-soft); color: var(--hb-teal-dark) !important; }
.hb-badge.is-completed svg { color: var(--hb-teal-dark) !important; stroke: var(--hb-teal-dark) !important; }
.hb-badge.is-cancelled, .hb-badge.is-rejected { background: #fdf3f2; color: var(--hb-red) !important; }
.hb-badge.is-cancelled svg, .hb-badge.is-rejected svg { color: var(--hb-red) !important; stroke: var(--hb-red) !important; }

.hb-done__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* ============================================================ responsive */
@media (max-width: 767px) {
    .hb-panel { padding: 15px 15px; }
    .hb-box { padding: 14px 15px; }
    .hb-head__title { font-size: 23px; }
    .hb-panel__title { font-size: 16px; }
    .hb-done__card { padding: 24px 18px; }
    .hb-done__title { font-size: 21px; }
    .hb-actions { flex-direction: column-reverse; }
    .hb-actions .hb-btn { width: 100%; }
}

@media (hover: none), (pointer: coarse) {
    .hb-doc:hover { transform: none; }
}


.hb-lab > .hb-in,
.hb-lab > .hb-phone {
    display: flex;
    align-items: center;
}
/* ---------------------------------------------------------------------------
 * Form control wrappers must stay flex rows.
 *
 * `.xx-lab > span { display: block }` (used for the field label text) also
 * matches the `.xx-in` wrapper, because that wrapper is a direct span child of
 * the label. Its specificity (0,1,1) beat `.xx-in` (0,1,0), so the wrapper
 * collapsed to a block and the icon was pushed onto its own line above the
 * input. Re-declaring the wrapper as `.xx-lab > .xx-in` (0,2,0) wins and puts
 * the icon, the control and the optional trailing button on one line again.
 * --------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
 * Keep the BEM input wrapper a flex row.
 *
 * `.hb-lab > span { display: block }` styles the field label text, but
 * the `.xx-lab__in` wrapper is also a direct span child of that label, so
 * the higher-specificity block rule collapsed it and pushed the icon onto
 * its own line. Re-declare it through the label so it wins.
 * ------------------------------------------------------------------------- */
.hb-lab > .hb-lab__in {
    display: flex;
    align-items: center;
}