/*
 * Patient account area (sign-in, sign-up, dashboard, bookings, medical file, messages, settings).
 * The bst-final template has no account pages, so these styles only add what it lacks and reuse its
 * colour variables. Logical properties (inline-start/end) keep one file for both LTR and RTL.
 */

/* ---------- Layout ---------- */
.account-area {
    padding: 60px 0 90px;
    background: var(--smoke-color, #f3f6f7);
}

.account-card {
    background: var(--white-color, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.account-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.account-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--title-color, #043872);
}

.account-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--body-color, #63666b);
}

.account-empty i {
    display: block;
    font-size: 48px;
    color: var(--theme-color, #0badc4);
    opacity: .6;
    margin-bottom: 16px;
}

/* ---------- Avatar and badges ---------- */
.account-avatar {
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.account-avatar--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-color, #0badc4);
    color: #fff;
    font-weight: 700;
    line-height: 1;
}

.account-badge {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--error-color, #dc3545);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* Booking status colours follow the Figma screens: upcoming blue, completed green, cancelled red. */
.status-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge--pending { background: #fff4e0; color: #b26a00; }
.status-badge--confirmed { background: #e3efff; color: #1565d8; }
.status-badge--completed { background: #e3f7e7; color: #1e8e3e; }
.status-badge--cancelled { background: #fde7e9; color: #d11a2a; }

/* ---------- Side menu ---------- */
.account-menu {
    background: var(--white-color, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    border-radius: 16px;
    overflow: hidden;
    position: sticky;
    top: 110px;
}

.account-menu__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--secondary-color, #cdf8ff);
}

.account-menu__who {
    min-width: 0;
}

.account-menu__who strong,
.account-menu__who span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu__who strong {
    color: var(--title-color, #043872);
}

.account-menu__who span {
    font-size: 14px;
    color: var(--body-color, #63666b);
    text-align: start;
}

.account-menu__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.account-menu__list a,
.account-menu__logout {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    border: 0;
    border-inline-start: 3px solid transparent;
    background: transparent;
    color: var(--title-color, #043872);
    font-weight: 500;
    text-align: start;
    transition: background .2s, color .2s;
}

.account-menu__list a i,
.account-menu__logout i {
    width: 20px;
    text-align: center;
    color: var(--theme-color, #0badc4);
}

.account-menu__list a span:first-of-type,
.account-menu__logout span {
    flex-grow: 1;
}

.account-menu__list a:hover,
.account-menu__list a.active {
    background: var(--smoke-color, #f3f6f7);
    border-inline-start-color: var(--theme-color, #0badc4);
    color: var(--theme-color4, #009fb3);
}

.account-menu__logout {
    color: var(--error-color, #dc3545);
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, .1));
}

.account-menu__logout i {
    color: inherit;
}

/* On phones and tablets the menu becomes a row of pills above the content. */
@media (max-width: 991.98px) {
    .account-area {
        padding: 30px 0 60px;
    }

    .account-menu {
        position: static;
    }

    .account-menu__user {
        padding: 14px 16px;
    }

    .account-menu__list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 12px 16px;
        scrollbar-width: thin;
    }

    .account-menu__list li {
        flex-shrink: 0;
    }

    .account-menu__list a,
    .account-menu__logout {
        width: auto;
        padding: 8px 14px;
        border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
        border-radius: 30px;
        white-space: nowrap;
    }

    .account-menu__list a:hover,
    .account-menu__list a.active {
        background: var(--theme-color, #0badc4);
        border-color: var(--theme-color, #0badc4);
        color: #fff;
    }

    .account-menu__list a.active i,
    .account-menu__list a:hover i {
        color: #fff;
    }

    .account-menu__logout {
        border-top: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    }

    .account-card {
        padding: 18px;
    }
}

/* ---------- Header user menu ---------- */
.site-account-menu__toggle {
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--secondary-color, #cdf8ff);
}

.site-account-menu__toggle::after {
    display: none;
}

.site-account-menu .dropdown-menu {
    min-width: 240px;
}

.site-account-menu .dropdown-item {
    padding: 8px 16px;
}

.site-account-menu .dropdown-item i {
    color: var(--theme-color, #0badc4);
}

.site-account-menu .dropdown-item.text-danger i {
    color: inherit;
}

/* ---------- Sign-in / sign-up ---------- */
.auth-area .form-wrap1 {
    border-radius: 20px;
    overflow: hidden;
}

.auth-area .form-wrap1 .form-box {
    padding: 30px;
}

.auth-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
}

.auth-benefits li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    color: var(--title-color, #043872);
    font-weight: 500;
}

.auth-benefits i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--secondary-color, #cdf8ff);
    color: var(--theme-color, #0badc4);
    font-size: 20px;
}

.auth-label {
    display: block;
    margin-bottom: 6px;
    padding-inline-start: 20px;
    font-size: 14px;
    color: var(--title-color, #043872);
}

/* Show / hide password button, sitting where the template puts a field icon. */
.form-group > .auth-eye {
    position: absolute;
    top: 14px;
    inset-inline-end: 20px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--title-color, #043872);
}

.form-group > .auth-eye:focus-visible {
    outline: 2px solid var(--theme-color, #0badc4);
    border-radius: 50%;
}

.form-group > .form-control.style2[type="password"],
.form-group > .form-control.style2[name^="password"] {
    padding-inline-end: 60px;
}

@media (max-width: 575.98px) {
    .auth-area .form-wrap1 .form-box {
        padding: 20px;
    }
}

/* The template capitalises every word of labels; sentences read better as written. */
.auth-area .form-check-label,
.auth-area .auth-label {
    text-transform: none;
}

.auth-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--secondary-color, #cdf8ff);
    color: var(--theme-color, #0badc4);
    font-size: 36px;
}

/* Left-to-right fields (email, phone) on Arabic pages: keep the text away from the icon on the left. */
[dir="rtl"] .form-control.style2[dir="ltr"] {
    text-align: right;
}

/* ---------- Shared account form pieces ---------- */
.account-label {
    display: block;
    margin-bottom: 6px;
    padding-inline-start: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--title-color, #043872);
    text-transform: none;
}

.account-area textarea.form-control.style2 {
    height: auto;
    min-height: 110px;
    padding-top: 16px;
    border-radius: 20px;
}

.account-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: var(--secondary-color, #cdf8ff);
    color: var(--title-color, #043872);
    font-weight: 500;
}

.account-note i {
    font-size: 22px;
    color: var(--theme-color, #0badc4);
}

/*
 * Toggle chips (Figma "+" / "check" chips). The input is a visually hidden .btn-check. The template
 * styles every `input[type=checkbox|radio] ~ label` (hidden input, box drawn in label:before, and `~`
 * reaches every later label), so these rules are scoped under .chip-group to outrank it.
 */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip-group > .btn-check {
    position: absolute;
    display: inline-block;
    visibility: visible;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.chip,
.chip-group > .btn-check ~ .chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 16px;
    border: 1.5px solid #e5e9ee;
    border-radius: 30px;
    background: var(--white-color, #fff);
    color: var(--title-color, #043872);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    transition: background .2s, border-color .2s, color .2s;
}

.chip-group > .btn-check ~ .chip::before {
    content: "+";
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--theme-color, #0badc4);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.chip-group > .btn-check:checked + .chip {
    border-color: var(--theme-color, #0badc4);
    background: #e7fafd;
}

.chip-group > .btn-check:checked + .chip::before {
    content: "\2713";
}

.chip-group > .btn-check:focus-visible + .chip {
    outline: 2px solid var(--theme-color, #0badc4);
    outline-offset: 2px;
}

.chip-group > .btn-check ~ .chip--radio::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #c9d1da;
    border-radius: 50%;
}

.chip-group > .btn-check:checked + .chip--radio::before {
    content: "";
    border: 4px solid var(--theme-color, #0badc4);
}

.chip--static {
    cursor: default;
    background: #e7fafd;
    border-color: transparent;
}

/* ---------- Medical file wizard ---------- */
.wizard-progress {
    display: none;
    align-items: center;
    margin: 4px 0 8px;
}

.medical-wizard.is-enhanced .wizard-progress {
    display: flex;
}

/* One item per step: a dot, then the line to the next step. */
.wizard-progress__dot {
    display: flex;
    align-items: center;
    flex: 1;
}

.wizard-progress__dot:last-child {
    flex: 0 0 auto;
}

.wizard-progress__dot::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e5e9ee;
}

.wizard-progress__dot::after {
    content: "";
    flex: 1;
    height: 4px;
    margin: 0 4px;
    background: #e5e9ee;
}

.wizard-progress__dot:last-child::after {
    content: none;
}

.wizard-progress__dot.is-done::before,
.wizard-progress__dot.is-done::after,
.wizard-progress__dot.is-current::before {
    background: var(--theme-color, #0badc4);
}

.wizard-progress__dot.is-current::before {
    box-shadow: 0 0 0 5px rgba(11, 173, 196, .2);
}

.wizard-counter {
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--body-color, #63666b);
    text-align: end;
}

.medical-wizard:not(.is-enhanced) .wizard-counter {
    display: none;
}

.wizard-step {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.wizard-step__head {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    float: none;
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: 14px;
    background: #eef9fb;
    font-size: inherit;
}

.wizard-step__head strong,
.wizard-step__head small {
    display: block;
}

.wizard-step__head strong {
    color: var(--title-color, #043872);
    font-size: 17px;
}

.wizard-step__head small {
    color: var(--body-color, #63666b);
    font-size: 14px;
}

.wizard-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--theme-color, #0badc4);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.wizard-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
}

.wizard-btn-back {
    padding: 14px 26px;
    border: 2px solid #e5e9ee;
    border-radius: 9999px;
    background: var(--white-color, #fff);
    color: var(--title-color, #043872);
    font-weight: 600;
}

.wizard-btn-back:hover {
    border-color: var(--theme-color, #0badc4);
}

[dir="rtl"] .wizard-actions .fa-arrow-left,
[dir="rtl"] .wizard-actions .fa-arrow-right {
    transform: scaleX(-1);
}

.wizard-later {
    margin-inline-start: auto;
    color: var(--body-color, #63666b);
    text-decoration: underline;
}

/* ---------- Summary blocks ---------- */
.summary-block {
    height: 100%;
    padding: 18px 20px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    border-radius: 14px;
}

.summary-block__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 17px;
    font-weight: 700;
    color: var(--title-color, #043872);
}

.summary-block__title i {
    color: var(--theme-color, #0badc4);
}

.summary-list {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: 8px 16px;
    margin: 0;
}

.summary-list dt {
    font-weight: 500;
    color: var(--body-color, #63666b);
}

.summary-list dd {
    margin: 0;
    color: var(--title-color, #043872);
}

.site-account-menu {
    align-self: center;
}

/* ---------- Dashboard ---------- */
.account-welcome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--title-color, #043872), var(--theme-color, #0badc4));
    color: #fff;
}

.account-welcome h2 {
    margin-bottom: 4px;
    font-size: 24px;
    color: #fff;
}

.account-welcome p {
    color: rgba(255, 255, 255, .85);
}

.account-welcome .vs-btn {
    background-color: #fff;
    color: var(--title-color, #043872);
}

.account-note--warning {
    background: #fff4e0;
}

.account-note--warning i {
    color: #b26a00;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    border-radius: 16px;
    background: var(--white-color, #fff);
    color: var(--body-color, #63666b);
    transition: border-color .2s, transform .2s;
}

a.stat-tile[href]:hover {
    border-color: var(--theme-color, #0badc4);
    transform: translateY(-2px);
}

.stat-tile i {
    font-size: 22px;
    color: var(--theme-color, #0badc4);
}

.stat-tile strong {
    font-size: 28px;
    line-height: 1.2;
    color: var(--title-color, #043872);
}

.stat-tile span {
    font-size: 14px;
}

.booking-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    border-radius: 16px;
    background: var(--white-color, #fff);
}

/* Cards in a grid row share the row's height. */
.row > [class*="col"] > .booking-card {
    height: 100%;
}

.booking-card__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.booking-card__photo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--smoke-color, #f3f6f7);
}

.booking-card__who {
    flex-grow: 1;
    min-width: 0;
}

.booking-card__who h3 {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--title-color, #043872);
}

.booking-card__who span {
    font-size: 14px;
    color: var(--body-color, #63666b);
}

.booking-card__meta {
    list-style: none;
    margin: 14px 0;
    padding: 0;
    font-size: 14px;
    color: var(--title-color, #043872);
}

.booking-card__meta li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.booking-card__meta i {
    width: 16px;
    color: var(--theme-color, #0badc4);
    text-align: center;
}

.booking-card__link {
    display: block;
    margin-top: auto;
    padding: 10px;
    border-radius: 10px;
    background: #e7fafd;
    color: var(--theme-color4, #009fb3);
    font-weight: 600;
    text-align: center;
}

.booking-card__link:hover {
    background: var(--theme-color, #0badc4);
    color: #fff;
}

.record-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    border-inline-start: 4px solid var(--theme-color, #0badc4);
    border-radius: 12px;
    color: var(--title-color, #043872);
}

.record-row:hover {
    background: var(--smoke-color, #f3f6f7);
}

.record-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #e7fafd;
    color: var(--theme-color, #0badc4);
    font-size: 20px;
}

.record-row__body {
    flex-grow: 1;
    min-width: 0;
}

.record-row__body strong,
.record-row__body small {
    display: block;
}

.record-row__body small {
    color: var(--body-color, #63666b);
}

.record-row__arrow {
    color: var(--body-color, #63666b);
}

[dir="rtl"] .record-row__arrow {
    transform: scaleX(-1);
}

.account-empty p {
    margin-bottom: 16px;
}

/* ---------- My bookings ---------- */
.account-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.account-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 9px 18px;
    border-radius: 30px;
    background: var(--smoke-color, #f3f6f7);
    color: var(--title-color, #043872);
    font-weight: 600;
}

.account-tabs a.active {
    background: var(--theme-color, #0badc4);
    color: #fff;
}

.account-tabs__count {
    min-width: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    color: var(--title-color, #043872);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.account-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--body-color, #63666b);
}

[dir="rtl"] .account-back .fa-arrow-left {
    transform: scaleX(-1);
}

.doctor-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 14px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    border-radius: 14px;
}

.doctor-strip img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
}

.doctor-strip__who {
    flex-grow: 1;
}

.doctor-strip__who h3 {
    margin: 0;
    font-size: 18px;
    color: var(--title-color, #043872);
}

.doctor-strip__who span {
    color: var(--body-color, #63666b);
}

.doctor-strip__links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-weight: 600;
}

.doctor-strip__links a {
    color: var(--theme-color4, #009fb3);
}

.booking-facts {
    width: 100%;
    margin: 0;
}

.booking-facts th,
.booking-facts td {
    padding: 12px 4px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    vertical-align: middle;
}

.booking-facts th {
    width: 40%;
    font-weight: 500;
    color: var(--body-color, #63666b);
}

.booking-facts th i {
    width: 20px;
    margin-inline-end: 6px;
    color: var(--theme-color, #0badc4);
    text-align: center;
}

.booking-facts td {
    color: var(--title-color, #043872);
    font-weight: 500;
}

.booking-facts__total th,
.booking-facts__total td {
    border-bottom: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--title-color, #043872);
}

.booking-facts__total td {
    color: var(--theme-color4, #009fb3);
}

.booking-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}

.booking-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border: 0;
    border-radius: 9999px;
    font-weight: 700;
    transition: filter .2s;
}

.booking-action:hover {
    filter: brightness(.96);
}

.booking-action--soft {
    background: #e7fafd;
    color: var(--theme-color4, #009fb3);
}

.booking-action--danger {
    background: #fde7e9;
    color: #d11a2a;
}

.my-review {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--smoke-color, #f3f6f7);
}

.my-review__stars {
    margin-inline-start: 10px;
}

.my-review__stars i,
.star-input .star i {
    color: #d5dbe2;
}

.my-review__stars i.is-on {
    color: var(--yellow-color, #fec624);
}

.file-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.file-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, .1));
}

.file-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--title-color, #043872);
    font-weight: 500;
}

.file-list i {
    color: var(--theme-color, #0badc4);
}

.file-list small {
    color: var(--body-color, #63666b);
}

.account-file {
    padding: 16px 20px;
    border: 2px dashed #e5e9ee;
    border-radius: 20px;
}

.account-modal {
    padding: 28px;
    border: 0;
    border-radius: 20px;
}

/* Star rating input; see partials/star-input. Scoped to outrank the template's radio styling. */
.star-input-wrap {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.star-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 6px;
}

.star-input > input[type="radio"] {
    position: absolute;
    display: inline-block;
    visibility: visible;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.star-input > input[type="radio"] ~ label.star {
    margin: 0;
    padding: 0;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.star-input > input[type="radio"] ~ label.star::before {
    content: none;
}

.star-input > label.star:hover i,
.star-input > label.star:hover ~ label.star i,
.star-input > input:checked ~ label.star i {
    color: var(--yellow-color, #fec624);
}

.star-input > input:focus-visible + label.star {
    outline: 2px solid var(--theme-color, #0badc4);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Plain chips (time slots): no + / check mark. */
.chip-group > .btn-check ~ .chip--plain::before {
    content: none;
}

.slot-group .chip {
    min-width: 96px;
    justify-content: center;
}

/* ---------- Booking page ---------- */
.booking-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 19px;
    font-weight: 700;
    color: var(--title-color, #043872);
}

.booking-step > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--theme-color, #0badc4);
    color: #fff;
    font-size: 15px;
}

.booking-step small {
    font-size: 14px;
    font-weight: 500;
    color: var(--body-color, #63666b);
}

.type-card {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 16px;
    border: 2px solid #e5e9ee;
    border-radius: 16px;
    color: var(--title-color, #043872);
    transition: border-color .2s, background .2s;
}

.type-card > i {
    font-size: 26px;
    color: var(--theme-color, #0badc4);
}

.type-card:hover,
.type-card.active {
    border-color: var(--theme-color, #0badc4);
}

.type-card.active {
    background: #e7fafd;
}

.type-card__body {
    flex-grow: 1;
}

.type-card__body strong,
.type-card__body small {
    display: block;
}

.type-card__body small {
    color: var(--body-color, #63666b);
}

.type-card__price {
    font-weight: 700;
    white-space: nowrap;
    color: var(--theme-color4, #009fb3);
}

.day-strip {
    display: flex;
    gap: 10px;
    padding-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.day-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 72px;
    padding: 10px 4px;
    border: 1.5px solid #e5e9ee;
    border-radius: 14px;
    color: var(--title-color, #043872);
    line-height: 1.3;
}

.day-chip strong {
    font-size: 20px;
}

.day-chip small {
    font-size: 12px;
    color: var(--body-color, #63666b);
}

a.day-chip[href]:hover {
    border-color: var(--theme-color, #0badc4);
}

.day-chip.active {
    border-color: var(--theme-color, #0badc4);
    background: var(--theme-color, #0badc4);
    color: #fff;
}

.day-chip.active small {
    color: rgba(255, 255, 255, .85);
}

.day-chip.is-off {
    opacity: .45;
    cursor: not-allowed;
}

.other-day {
    max-width: 220px;
    height: 48px !important;
}

.booking-summary {
    position: sticky;
    top: 110px;
}

.booking-summary .doctor-strip {
    padding: 0;
    border: 0;
}

.booking-summary__list {
    grid-template-columns: auto 1fr;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border-color, rgba(0, 0, 0, .1));
}

.booking-summary__total,
.payment-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 20px;
    font-weight: 600;
    color: var(--title-color, #043872);
}

.booking-summary__total strong,
.payment-total strong {
    font-size: 22px;
    color: var(--theme-color4, #009fb3);
}

.payment-card {
    border-radius: 20px;
    overflow: hidden;
}

.payment-total {
    margin-top: 0;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--smoke-color, #f3f6f7);
}

.gateway-option {
    width: 100%;
    padding: 14px 18px;
}

.vs-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---------- Reports and files ---------- */
.record-row__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--theme-color4, #009fb3);
}

.record-section {
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    border-radius: 14px;
}

.record-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--title-color, #043872);
}

.record-section h3 i {
    color: var(--theme-color, #0badc4);
}

.record-section p {
    color: var(--title-color, #043872);
    line-height: 1.8;
}

.record-section--rx {
    border-color: var(--theme-color, #0badc4);
    background: #f4fcfd;
}

.record-image {
    max-width: 100%;
    max-height: 420px;
    border-radius: 12px;
}

.file-list li > a span {
    display: inline-block;
}

/* Printing a report: only the report sheet. */
@media print {
    .header-wrapper,
    .vs-menu-wrapper,
    .breadcumb-wrapper,
    .account-menu,
    footer,
    .footer-wrapper,
    .no-print,
    .scrollToTop,
    [class*="whatsapp"] {
        display: none !important;
    }

    .account-area {
        padding: 0;
        background: #fff;
    }

    .account-area .col-lg-9 {
        width: 100%;
    }

    .record-sheet {
        border: 0;
        padding: 0;
    }
}

/* ---------- Messages ---------- */
.chat-search {
    max-width: 280px;
    height: 46px !important;
}

.conversation-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    border-radius: 14px;
    color: var(--title-color, #043872);
}

.conversation-row:hover {
    background: var(--smoke-color, #f3f6f7);
}

.conversation-row.is-unread {
    border-inline-start: 4px solid var(--theme-color, #0badc4);
    background: #f4fcfd;
}

.conversation-row img {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.conversation-row__body {
    flex-grow: 1;
    min-width: 0;
}

.conversation-row__top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.conversation-row__top small {
    flex-shrink: 0;
    color: var(--body-color, #63666b);
}

.conversation-row__preview {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--body-color, #63666b);
}

.conversation-row.is-unread .conversation-row__preview {
    font-weight: 600;
    color: var(--title-color, #043872);
}

.chat-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.chat-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, .1));
}

.chat-card__head img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-card__back {
    color: var(--title-color, #043872);
    font-size: 18px;
}

[dir="rtl"] .chat-card__back i {
    transform: scaleX(-1);
}

.chat-card__who {
    flex-grow: 1;
}

.chat-card__who h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--title-color, #043872);
}

.chat-card__who span {
    font-size: 14px;
    color: var(--body-color, #63666b);
}

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 460px;
    padding: 20px;
    overflow-y: auto;
    background: var(--smoke-color, #f3f6f7);
}

.chat-day {
    text-align: center;
}

.chat-day span {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 12px;
    background: #fff;
    font-size: 12px;
    color: var(--body-color, #63666b);
}

.chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 16px;
    word-wrap: break-word;
}

.chat-bubble p {
    margin: 0;
    white-space: pre-line;
}

.chat-bubble img {
    display: block;
    max-width: 220px;
    margin-top: 6px;
    border-radius: 10px;
}

.chat-bubble time {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: .75;
}

.chat-bubble--mine {
    align-self: flex-end;
    border-end-end-radius: 4px;
    background: var(--theme-color, #0badc4);
    color: #fff;
}

.chat-bubble--mine a {
    color: #fff;
}

.chat-bubble--theirs {
    align-self: flex-start;
    border-end-start-radius: 4px;
    background: #fff;
    color: var(--title-color, #043872);
}

.chat-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-weight: 600;
    text-decoration: underline;
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, .1));
}

.chat-composer__attach {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
    background: var(--smoke-color, #f3f6f7);
    color: var(--title-color, #043872);
    cursor: pointer;
}

.chat-composer__attach input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.chat-composer__attach:focus-within {
    outline: 2px solid var(--theme-color, #0badc4);
}

.chat-composer__field {
    flex-grow: 1;
}

.chat-composer__field textarea {
    min-height: 44px;
    max-height: 140px;
    padding: 10px 16px;
    border: 1.5px solid #e5e9ee;
    border-radius: 22px;
    resize: vertical;
}

.chat-composer__file {
    display: block;
    margin-top: 4px;
    color: var(--theme-color4, #009fb3);
}

.chat-composer__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--theme-color, #0badc4);
    color: #fff;
}

[dir="rtl"] .chat-composer__send i {
    transform: scaleX(-1);
}

@media (max-width: 575.98px) {
    .chat-bubble {
        max-width: 88%;
    }

    .chat-thread {
        height: 380px;
    }
}

.chat-bubble--mine p,
.chat-bubble--mine time {
    color: #fff;
}

.chat-bubble--theirs p {
    color: var(--title-color, #043872);
}

/* ---------- Settings ---------- */
.settings-photo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.settings-photo .booking-action {
    cursor: pointer;
}

/* ---------- Notifications ---------- */
.notification-day {
    margin: 18px 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--body-color, #63666b);
}

.notification-day:first-of-type {
    margin-top: 0;
}

.notification-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    border-radius: 14px;
    color: var(--title-color, #043872);
}

.notification-row:hover {
    background: var(--smoke-color, #f3f6f7);
}

.notification-row.is-unread {
    border-inline-start: 4px solid var(--theme-color, #0badc4);
    background: #f4fcfd;
}

.notification-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e7fafd;
    color: var(--theme-color, #0badc4);
}

.notification-row__body {
    flex-grow: 1;
    min-width: 0;
}

.notification-row__body strong,
.notification-row__body span {
    display: block;
}

.notification-row__body span {
    font-size: 14px;
    color: var(--body-color, #63666b);
}

.notification-row > small {
    flex-shrink: 0;
    color: var(--body-color, #63666b);
}

/* The template capitalises every placeholder word; keep them as written. */
.account-area .form-control::placeholder,
.auth-area .form-control::placeholder {
    text-transform: none;
}