/*
 * Patient-specific styles.
 * New patient-only classes should use the `.pt-` prefix (doctor uses `.dd-`, vendor uses `.vv-`).
 * Do not add generic/shared rules here — those belong in style.css / custom.css.
 */

/* ── Shared utility classes (patient views) ─────────────────────────────── */
.pt-flex-1 { flex: 1; }
.pt-flex-1-no-mb { flex: 1; margin-bottom: 0; }
.pt-hint-text { font-size: var(--font-size-2xs); color: var(--text-muted-cst); }
.pt-emphasis { color: var(--text-primary-cst); }
.pt-required { color: var(--status-error); font-size: var(--font-size-2xs); }
.pt-form-row { display: flex; gap: var(--space-md); }
.pt-form-row-mb { display: flex; gap: var(--space-md); margin-bottom: 0; }
.pt-stack-md { display: flex; flex-direction: column; gap: var(--space-md); }

/* Advance/additional charge notice box (booking_popup.blade.php / booking_request_popup.blade.php) */
.pt-notice-box {
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: color-mix(in srgb, var(--status-pending) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-pending) 20%, transparent);
    font-size: var(--font-size-2xs);
    color: var(--text-muted-cst);
    line-height: var(--line-height-base);
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
}
.pt-notice-box-icon { flex-shrink: 0; margin-top: var(--space-xxs); }
.pt-notice-box-opacity { opacity: .75; }

/* "Didn't find a slot? / No slots?" divider row (doctor.blade.php) */
.pt-divider-row { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); margin-bottom: var(--space-xxs); }
.pt-divider-line { flex: 1; height: 1px; background: var(--border-default); }
.pt-divider-label { font-size: var(--font-size-2xs); color: var(--text-muted-cst); white-space: nowrap; }

/* booking_request_popup.blade.php: taller variant of .booking-popup */
.pt-booking-popup--tall { max-height: 92vh; }

.pt-cursor-pointer { cursor: pointer; }
.pt-icon-inline { vertical-align: middle; margin-right: var(--space-xxs); }

/* doctor.blade.php: doctor name shown at larger size inside the shared .booking-price */
.pt-booking-price--doctor-name { font-size: var(--font-size-md); }

/* doctor.blade.php: calendar legend dot colors */
.pt-legend-dot--available { background: var(--accent-gold); }
.pt-legend-dot--filling { background: var(--status-filling); }
.pt-legend-dot--full { background: var(--status-error); }
.pt-legend-dot--none { background: var(--border-default); }

.pt-avail-schedule-label { font-size: var(--font-size-2xs); color: var(--text-muted-cst); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); margin-bottom: var(--space-xs); }
#avail-location { font-size: var(--font-size-2xs); color: var(--text-muted-cst); margin-top: var(--space-xs); }
#avail-booked { font-size: var(--font-size-2xs); color: var(--text-muted-cst); margin-top: var(--space-xs); }

/* "Request a Booking" secondary buttons */
.pt-btn-request { margin-top: var(--space-xs); }
.pt-btn-request--ghost { margin-top: var(--space-xs); background: transparent; }

/* Generic spacing utilities (patient views) */
.pt-mr-10 { margin-right: var(--space-sm); }
.pt-mt-0 { margin-top: 0; }
.pt-mt-20 { margin-top: var(--space-md); }
.pt-inline-flex-gap10 { display: flex; align-items: center; gap: var(--space-sm); }

/* my_appointments.blade.php: appointments card header + date filter form */
.pt-card-header-wrap { flex-wrap: wrap; gap: var(--space-sm); }
.pt-date-filter-form { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.pt-date-filter-label { font-size: var(--font-size-2xs); color: var(--text-muted-cst); white-space: nowrap; margin-bottom: 0; line-height: var(--line-height-tight); }
.pt-date-filter-input { border: 1px solid var(--neutral-line); border-radius: var(--radius-sm); padding: var(--space-xxs) var(--space-sm); font-size: var(--font-size-2xs); cursor: pointer; }
.pt-clear-link { font-size: var(--font-size-2xs); color: var(--color-primary); white-space: nowrap; }

/* Approve/reject/pay action button color tones (my_appointments / doctor_booking_requests) */
.pt-tone-green { background: var(--accent-gold-icon); color: var(--accent-gold-dark); border-color: color-mix(in srgb, var(--accent-gold) 30%, transparent); }
.pt-tone-red { background: color-mix(in srgb, var(--status-full) 8%, transparent); color: var(--status-full); border-color: color-mix(in srgb, var(--status-full) 20%, transparent); }
.plx-appt-view-btn--pay { margin-top: var(--space-xxs); display: block; }

.pt-btn-cta { margin-top: var(--space-sm); display: inline-block; }

/* small secondary note below a label/value (my_appointments charge breakdown, doctor_patient_bookings "Full" tag) */
.pt-small-note { font-size: var(--font-size-2xs); display: block; margin-top: var(--space-xxs); }

/* doctor_booking_requests.blade.php */
.pt-mb-20 { margin-bottom: var(--space-md); }
.pt-phone-text { font-size: var(--font-size-2xs); }
.pt-status-payment-pending { background: color-mix(in srgb, var(--status-payment-pending) 10%, transparent); color: var(--status-payment-pending); border-color: color-mix(in srgb, var(--status-payment-pending) 30%, transparent); }
.pt-btn-approve-solid { background: color-mix(in srgb, var(--accent-gold) 80%, transparent); }
.pt-btn-reject-solid { background: color-mix(in srgb, var(--status-full) 80%, transparent); }

/* doctor_patient_bookings.blade.php & patient booking actions */
.pt-fs-14 { font-size: var(--font-size-xs); }
.dpb-btn-mt { margin-top: 4px; }
.dpb-action-wrap { margin-top: 4px; }
.google-cal-btn { text-decoration: none; }
.google-cal-btn svg { vertical-align: middle; }
.pt-avail-schedule-label--mt { margin-top: 12px; }

/* Copy button success state classes */
.btn-copied-success { background-color: #10b981 !important; }
.btn-copy-success { border-color: #10b981 !important; color: #10b981 !important; }

/* SweetAlert patient booking link share modal styles */
.swal-share-hint { font-size: 14px; margin-bottom: 8px; }
.swal-share-input { width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid #374151; background: #1f2937; color: #fff; font-size: 13px; }

/* Per-slot Patient Booking Link button styles */
.bds-patient-link-wrap {
    margin-top: 6px;
    display: flex;
    justify-content: center;
    width: 100%;
}
.bds-patient-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--color-primary, #FF4415) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #FF4415) 30%, transparent);
    color: var(--color-primary, #FF4415);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: all 0.2s ease;
    width: auto;
    max-width: max-content;
}
.bds-patient-link-btn svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}
.bds-patient-link-btn:hover:not(:disabled):not(.is-disabled) {
    background: var(--color-primary, #FF4415);
    color: #ffffff;
    border-color: var(--color-primary, #FF4415);
}
.bds-patient-link-btn:disabled,
.bds-patient-link-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: rgba(156, 163, 175, 0.08);
    border-color: rgba(156, 163, 175, 0.25);
    color: #9ca3af;
    pointer-events: auto;
}
.bds-patient-link-btn:disabled:hover,
.bds-patient-link-btn.is-disabled:hover {
    background: rgba(156, 163, 175, 0.08);
    color: #9ca3af;
    border-color: rgba(156, 163, 175, 0.25);
}


/* patient/search.blade.php */
.pt-star-rating-icon { color: var(--status-warning); font-size: var(--font-size-2xs); line-height: var(--line-height-tight); }
.pt-icon-muted { color: var(--text-muted-cst); }
.pt-icon-muted-fade { color: var(--text-muted-cst); opacity: 0.85; }
.pt-lcard-desc--specialization { color: var(--text-muted-cst); font-size: var(--font-size-2xs); margin-bottom: var(--space-xxs); }
.pt-lcard-desc--location { color: var(--text-muted-cst); font-size: var(--font-size-2xs); display: flex; align-items: center; gap: var(--space-xxs); margin-top: var(--space-xxs); margin-bottom: var(--space-xs); }
.pt-lcard-price--label { color: var(--text-muted-cst); font-size: var(--font-size-2xs); font-weight: var(--font-weight-med); }

/* my_appointments.blade.php: rating modal visibility (state via data-state, not inline style) */
#ratingModal[data-state="hidden"] { display: none; }
#ratingModal[data-state="visible"] { display: flex; }

/* doctor.blade.php / booking_request_popup.blade.php: calendar picker state via
   data-state, not inline style. Class-based (not ID-based) so it covers every
   .custom-date-picker instance, not just doctor.blade.php's #custom-date-picker. */
.custom-date-picker[data-state="hidden"] { display: none; }
.custom-date-picker[data-state="visible"] { display: block; }

/* booking_request_popup.blade.php: class-based twin of the shared #calendar-month-year
   rule (custom.css) — that one is ID-scoped to listing/show.blade.php's calendar and
   doesn't match this popup's own id, so its span was missing flex:1/centering, breaking
   the .calendar-header space-between balance at narrow widths. */
.calendar-month-year { color: var(--text-primary-cst); font-size: 12px; text-align: center; flex: 1; }

#avail-panel {
    margin: var(--space-sm) 0 0;
}
#avail-panel[data-state="hidden"] { display: none; }
#avail-panel[data-state="visible"] { display: block; }

#avail-loading {
    text-align: center;
    padding: var(--space-sm) 0;
    color: var(--text-muted-cst);
    font-size: var(--font-size-2xs);
}
#avail-loading[data-state="hidden"] { display: none; }
#avail-loading[data-state="visible"] { display: block; }

#avail-content[data-state="hidden"] { display: none; }
#avail-content[data-state="visible"] { display: block; }

#space-picker-section[data-state="hidden"] { display: none; }
#space-picker-section[data-state="visible"] { display: block; }

#avail-window {
    padding: var(--space-sm) var(--space-sm);
}
#avail-window[data-state="hidden"] { display: none; }
#avail-window[data-state="visible"] { display: block; }

#avail-full-msg {
    text-align: center;
    padding: var(--space-sm);
    background: color-mix(in srgb, var(--status-full) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-full) 15%, transparent);
    font-size: var(--font-size-2xs);
    color: var(--status-full);
    margin-top: var(--space-sm);
}
#avail-full-msg[data-state="hidden"] { display: none; }
#avail-full-msg[data-state="visible"] { display: block; }

#avail-full-request-hint {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-sm);
    background: var(--accent-gold-bg);
    border: 1px solid var(--accent-gold-border);
    font-size: var(--font-size-2xs);
    color: var(--text-muted-cst);
    line-height: var(--line-height-base);
}
#avail-full-request-hint[data-state="hidden"] { display: none; }
#avail-full-request-hint[data-state="visible"] { display: block; }

#no-avail-msg {
    text-align: center;
    padding: var(--space-sm) 0;
    color: var(--text-muted-cst);
    font-size: var(--font-size-2xs);
}
#no-avail-msg[data-state="hidden"] { display: none; }
#no-avail-msg[data-state="visible"] { display: block; }

#advance-charge-note {
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: color-mix(in srgb, var(--status-pending) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-pending) 20%, transparent);
    font-size: var(--font-size-2xs);
    color: var(--text-muted-cst);
    line-height: var(--line-height-base);
}
#advance-charge-note[data-state="hidden"] { display: none; }
#advance-charge-note[data-state="visible"] { display: block; }

#book-now-btn {
    margin-top: var(--space-sm);
}
#book-now-btn[data-state="hidden"] { display: none; }
#book-now-btn[data-state="visible"] { display: block; }

/* doctor profile page (patient/doctor.blade.php) */
.plx-doc-hero { display: flex; gap: var(--space-sm); align-items: flex-start; margin-bottom: var(--space-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: var(--space-sm); width: 100%; }
.plx-doc-hero-photo { width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; }
.plx-doc-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.plx-doc-hero-initials { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--text-muted-cst); }
.plx-doc-hero-info { display: flex; flex-direction: column; gap: var(--space-xxs); flex: 1; min-width: 0; width: 100%; }
.plx-doc-hero-name { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--text-primary-cst); margin: 0; line-height: var(--line-height-tight); }
.plx-doc-hero-spec { display: inline-block; font-size: var(--font-size-2xs); font-weight: var(--font-weight-semi); color: var(--text-primary-cst); background: var(--bg-elevated); border: 1px solid var(--border-default); padding: var(--space-xxs) var(--space-xs); align-self: flex-start; }
.plx-doc-hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-xxs) var(--space-sm); margin-top: var(--space-xxs); }
.plx-doc-hero-meta span { font-size: var(--font-size-2xs); color: var(--text-muted-cst); display: flex; align-items: center; gap: var(--space-xxs); }

.plx-doc-section { margin-bottom: var(--space-sm); }
.plx-doc-section-title { font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); color: var(--text-muted-cst); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); margin: 0 0 var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--border-subtle); }
.plx-doc-bio { font-size: var(--font-size-2xs); color: var(--text-muted-cst); line-height: var(--line-height-base); margin: 0; white-space: pre-line; }

.plx-doc-prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.plx-doc-prof-tile { background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: var(--space-sm) var(--space-sm); }
.plx-doc-prof-tile-label { font-size: var(--font-size-2xs); color: var(--text-muted-cst); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); margin-bottom: var(--space-xxs); }
.plx-doc-prof-tile-value { font-size: var(--font-size-2xs); font-weight: var(--font-weight-semi); color: var(--text-primary-cst); }

.plx-avail-at-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.plx-avail-at-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); overflow: hidden; }
.plx-avail-at-top { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm); }
.plx-avail-at-thumb { width: 52px; height: 52px; flex-shrink: 0; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; }
.plx-avail-at-thumb img { width: 100%; height: 100%; object-fit: cover; }
.plx-avail-at-thumb-ph { color: var(--text-muted-cst); }
.plx-avail-at-meta { flex: 1; min-width: 0; }
.plx-avail-at-name { font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); color: var(--text-primary-cst); margin-bottom: var(--space-xxs); }
.plx-avail-at-loc { font-size: var(--font-size-2xs); color: var(--text-muted-cst); display: flex; align-items: center; gap: var(--space-xxs); }
.plx-avail-at-badge { font-size: var(--font-size-2xs); font-weight: var(--font-weight-semi); padding: var(--space-xxs) var(--space-xs); border: 1px solid var(--border-default); color: var(--text-muted-cst); white-space: nowrap; flex-shrink: 0; }
.plx-avail-at-schedule { border-top: 1px solid var(--border-subtle); padding: var(--space-xs) var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--space-xxs); }
.plx-avail-at-chip { display: inline-flex; align-items: center; gap: var(--space-xxs); padding: var(--space-xxs) var(--space-xs); background: var(--bg-elevated); border: 1px solid var(--border-subtle); font-size: var(--font-size-2xs); white-space: nowrap; }
.plx-avail-at-chip-day { font-weight: var(--font-weight-bold); color: var(--text-primary-cst); }
.plx-avail-at-chip-sep { color: var(--text-muted-cst); opacity: 0.4; }
.plx-avail-at-chip-time { color: var(--text-muted-cst); font-weight: var(--font-weight-med); }
.avail-slot-row { padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.avail-slot-row:last-child { border-bottom: none; }
.avail-slot-time { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-primary-cst); white-space: nowrap; }
.avail-slot-purposes { font-size: var(--font-size-2xs); color: var(--text-muted-cst); background: var(--bg-elevated); border: 1px solid var(--border-subtle); padding: var(--space-xxs) var(--space-xs); border-radius: var(--radius-xl); white-space: nowrap; }

/* Doctor Card Rating Badge in Search Page (patient/search.blade.php + patient/doctor.blade.php) */
.doc-search-rating {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.doc-rating-badge {
    background-color: var(--accent-gold);
    color: var(--text-inverse-cst);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    padding: var(--space-xxs) var(--space-xs);
    border-radius: var(--radius-sm);
    line-height: var(--line-height-tight);
}

.doc-rating-stars {
    display: flex;
    gap: var(--space-xxs);
}

.doc-rating-stars .star {
    font-size: var(--font-size-2xs);
    color: var(--neutral-line); /* empty star color */
}

.doc-rating-stars .star.filled {
    color: var(--status-warning); /* filled star color */
}

.doc-rating-stars .star.half-filled {
    background: linear-gradient(90deg, var(--status-warning) 50%, var(--neutral-line) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.doc-reviews-count {
    font-size: var(--font-size-2xs);
    color: var(--text-muted-cst);
}

.doc-view-reviews-btn {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 6px;
    color: #1a1a1a;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.doc-view-reviews-btn:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: #000000;
}

/* ── Patient Dashboard — Appointments Table (doctor_booking_requests / doctor_patient_bookings) ─────────────────────────────────── */
.dpb-group { margin-bottom: var(--space-lg); }
.dpb-group:last-child { margin-bottom: 0; }
.dpb-group-header {
    padding: var(--space-sm) var(--space-sm);
    margin-bottom: 0;
    background: var(--bg-subtle, var(--bg-surface));
    border: 1px solid var(--border-default);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.dpb-group-space-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi);
    color: var(--text-primary-cst);
    flex-shrink: 0;
}
.dpb-group-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}
.dpb-group-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.dpb-group-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xxs);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-med);
    color: var(--text-muted-cst);
    background: var(--bg-default, var(--bg-page));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-xxs) var(--space-sm);
    white-space: nowrap;
}
.dpb-group-meta-chip svg {
    opacity: .65;
    flex-shrink: 0;
}
.dpb-group-meta-chip--time {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.dpb-table-wrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.dpb-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-2xs); }
.dpb-table thead tr { border-bottom: 1px solid var(--border-default); }
.dpb-table th {
    padding: var(--space-sm) var(--space-sm);
    text-align: left;
    color: var(--text-muted-cst);
    font-weight: var(--font-weight-med);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-size: var(--font-size-2xs);
}
.dpb-table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background 0.15s; }
.dpb-table td { padding: var(--space-sm); color: var(--text-primary-cst); }
.dpb-td-muted { color: var(--text-muted-cst); }
.dpb-td-nowrap { white-space: nowrap; }
.dpb-td-bold { font-weight: var(--font-weight-med); }
.dpb-td-booked { font-size: var(--font-size-2xs); color: var(--text-muted-cst); }
.dpb-td-space-title { font-weight: var(--font-weight-med); }
.dpb-td-space-sub { font-size: var(--font-size-2xs); color: var(--text-muted-cst); margin-top: var(--space-xxs); }
.pt-rescheduled-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #d97706;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 1px 6px;
}
.pt-original-slot {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    font-size: 10.5px;
    color: #94a3b8;
    font-style: italic;
}
.pt-original-slot-icon {
    flex-shrink: 0;
    color: #94a3b8;
}
.dpb-td-link { font-size: var(--font-size-2xs); color: var(--text-muted-cst); text-decoration: none; margin-top: var(--space-xxs); display: inline-block; }
.dpb-td-link:hover { text-decoration: underline; }

.dpb-status-badge {
    padding: var(--space-xxs) var(--space-xs);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}
.dpb-status-pending   { background: color-mix(in srgb, var(--status-pending) 12%, transparent); color: var(--status-pending); }
.dpb-status-confirmed { background: color-mix(in srgb, var(--accent-gold) 12%, transparent);  color: var(--accent-gold); }
.dpb-status-cancelled { background: color-mix(in srgb, var(--status-error) 12%, transparent);  color: var(--status-error); }
.dpb-stat-full { color: var(--status-full); }
.dpb-bookings-card { margin-top: var(--space-xs); }

.dpb-date-bar {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: var(--space-md) 0 var(--space-sm);
    flex-wrap: wrap;
}
.dpb-nav-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    color: var(--text-muted-cst);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}
.dpb-nav-btn:hover { color: var(--text-primary-cst); border-color: var(--border-focus); }
.dpb-date-input {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    color: var(--text-primary-cst);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-med);
    font-family: inherit;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    outline: none;
    height: 34px;
}
.dpb-date-input:focus { border-color: var(--border-focus); }
.dpb-date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.dpb-today-btn {
    padding: var(--space-xs) var(--space-sm);
    background: none;
    border: 1px solid var(--border-default);
    color: var(--text-muted-cst);
    font-size: var(--font-size-2xs);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.dpb-today-btn:hover { color: var(--text-primary-cst); border-color: var(--border-focus); text-decoration: none; }
.dpb-today-btn.active { background: var(--accent-gold); color: var(--text-inverse-cst); border-color: var(--accent-gold); }
.dpb-count-badge { margin-left: auto; font-size: var(--font-size-2xs); color: var(--text-muted-cst); }

.dpb-limit-bar { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.dpb-limit-chip {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xxs) var(--space-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2xs);
}
.dpb-limit-chip--full { border-color: color-mix(in srgb, var(--status-full) 30%, transparent); background: color-mix(in srgb, var(--status-full) 5%, transparent); }
.dpb-limit-name { color: var(--text-muted-cst); }
.dpb-limit-val  { font-weight: var(--font-weight-bold); color: var(--text-primary-cst); }
.dpb-limit-tag  { font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); text-transform: uppercase; color: var(--status-full); letter-spacing: var(--letter-spacing-wide); }

/* ── Booking Popup (partials/booking_popup.blade.php, partials/booking_request_popup.blade.php) ───────────────────────────────────── */
#booking-popup-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-modal);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
}
#booking-popup-overlay[data-state="hidden"] { display: none; }
#booking-popup-overlay[data-state="visible"] { display: flex; }
#popup-form[data-state="hidden"] { display: none; }
#popup-form[data-state="visible"] { display: block; }

/* booking_request_popup.blade.php: state via data-state, not inline style */
#booking-request-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-light);
    z-index: 1100;
    align-items: center;
    justify-content: center;
}
#booking-request-overlay[data-state="hidden"] { display: none; }
#booking-request-overlay[data-state="visible"] { display: flex; }
#req-popup-form[data-state="hidden"] { display: none; }
#req-popup-form[data-state="visible"] { display: block; }

.booking-popup {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: var(--space-md) var(--space-sm);
    position: relative;
    gap: var(--space-md);
}

/* Wraps the scrollable body between the fixed header (.popup-title) and the
   fixed footer (.popup-submit-btn), so header/button stay visible while the
   content in between scrolls. */
.pt-popup-scroll {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* booking_popup.blade.php: .pt-form-grid IS the scrollable body directly (no
   .pt-popup-scroll wrapper needed) since the popup has nothing above the
   grid besides the title. Single shared scroll by default; at lg+ (see
   ccc-patient-responsive.css) each column scrolls independently instead,
   since the left column (static info/alerts) doesn't need to move just
   because the right column (form) is taller. */
.pt-form-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Vertical rhythm inside each .pt-form-grid column comes from gap, not
   per-element margin — reset the direct children's own margins so gap is
   the single source of spacing between them. */
.pt-form-grid > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.pt-form-grid > div > * {
    margin-top: 0;
    margin-bottom: 0;
}

.booking-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-muted-cst);
    cursor: pointer;
    padding: var(--space-xxs);
    line-height: var(--line-height-tight);
    transition: color 0.15s;
}
.booking-popup-close:hover { color: var(--text-primary-cst); }

.popup-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi);
    color: var(--text-primary-cst);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    flex-shrink: 0;
}

.popup-slot-info {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    padding: var(--space-xs) var(--space-sm);
    margin-bottom: 0;
}

.popup-slot-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-2xs);
    padding: var(--space-xxs) 0;
}

.popup-slot-label {
    color: var(--text-muted-cst);
    font-weight: var(--font-weight-med);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-size: var(--font-size-2xs);
}

.popup-slot-value {
    color: var(--text-primary-cst);
    font-weight: var(--font-weight-med);
    text-align: right;
}

.popup-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-sm) 0;
}

.popup-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.popup-form-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semi);
    color: var(--text-muted-cst);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin: 0;
}

.popup-form-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary-cst);
    padding: var(--space-xxs) var(--space-sm);
    font-size: var(--font-size-2xs);
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.popup-form-input:focus {
    border-color: var(--border-focus);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 3px rgba(247, 247, 247, 0.05);
}
.popup-form-input::placeholder { color: var(--text-muted-cst); opacity: 0.5; }

.popup-error {
    color: var(--status-error);
    font-size: var(--font-size-2xs);
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
}
.popup-error[data-state="hidden"] { display: none; }
.popup-error[data-state="visible"] { display: block; }

.popup-submit-btn {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-primary-cst);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
    flex-shrink: 0;
    margin-top: 0;
}
#popup-submit-btn[data-state="hidden"],
#req-popup-submit-btn[data-state="hidden"] { display: none; }
.popup-submit-btn:hover:not(:disabled) { border-color: var(--text-primary-cst); }
.popup-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.popup-success {
    text-align: center;
    padding: var(--space-md) 0 var(--space-xs);
}
.popup-success[data-state="hidden"] { display: none; }
.popup-success[data-state="visible"] { display: block; }
.popup-success-icon { color: var(--accent-gold); margin-bottom: var(--space-sm); }
.popup-success-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semi); color: var(--text-primary-cst); margin: 0 0 var(--space-xs) 0; }
.popup-success-msg { font-size: var(--font-size-2xs); color: var(--text-muted-cst); margin: 0; }

.plx-popup-textarea {
    resize: vertical;
    min-height: 72px;
}

.plx-popup-file-hint {
    font-weight: var(--font-weight-reg);
    text-transform: none;
    letter-spacing: var(--letter-spacing-normal);
    font-size: var(--font-size-2xs);
    color: var(--text-primary-cst);
    /* opacity: 0.7; */
}

.plx-popup-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.plx-popup-file-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxs);
    width: 76px;
}

.plx-popup-file-thumb {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-subtle);
    background: var(--bg-elevated);
    display: block;
    cursor: pointer;
}

.plx-popup-file-pdf {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--status-error-border);
    background: var(--status-error-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--status-error-light);
}

.plx-popup-file-item-name {
    font-size: var(--font-size-2xs);
    color: var(--text-muted-cst);
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: var(--line-height-tight);
}

.plx-popup-file-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background: color-mix(in srgb, var(--status-error) 12%, transparent);
    border: none;
    color: var(--status-error);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-tight);
    width: 16px;
    height: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.plx-popup-file-remove:hover { background: color-mix(in srgb, var(--status-error) 25%, transparent); }

/* ── Appointment Modal Close Buttons (my_appointments / doctor_booking_requests / doctor_patient_bookings) ─────────────────────────── */
.plx-modal-close-btn {
    background: none;
    border: none;
    padding: var(--space-xxs);
    cursor: pointer;
    color: var(--text-muted-cst);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    margin-left: auto;
}
.plx-modal-close-btn:hover { color: var(--text-primary-cst); background: var(--bg-elevated); }

.plx-modal-close-text-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-muted-cst);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-2xs);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.plx-modal-close-text-btn:hover { color: var(--text-primary-cst); border-color: var(--border-focus); }

/* ── Appointment Report Tiles (my_appointments / doctor_booking_requests / doctor_patient_bookings) ───────────────────────────────── */
.plx-appt-report-grid { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xxs); }
.plx-appt-report-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 64px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-decoration: none;
    color: var(--text-muted-cst);
    background: var(--bg-elevated);
    transition: border-color 0.15s;
}
.plx-appt-report-tile:hover { border-color: var(--border-focus); }
.plx-appt-report-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plx-appt-report-tile-pdf { flex-direction: column; gap: var(--space-xxs); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semi); }

.plx-appt-view-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xxs);
    padding: var(--space-xxs) var(--space-sm);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-med);
    color: var(--text-muted-cst);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.plx-appt-view-btn:hover { color: var(--text-primary-cst); border-color: var(--border-focus); }

.plx-appt-reports { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.plx-appt-report-link {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    text-decoration: none;
    color: var(--text-muted-cst);
    transition: border-color 0.15s;
    overflow: hidden;
}
.plx-appt-report-link:hover { border-color: var(--border-focus); }
.plx-appt-report-thumb { width: 44px; height: 38px; object-fit: cover; display: block; }
.plx-appt-report-pdf { width: 44px; height: 38px; font-size: var(--font-size-2xs); font-weight: var(--font-weight-semi); flex-direction: column; gap: var(--space-xxs); }

/* ── Doctor Card inside Bookings/Requests Modals ───────────────────────────────── */
.popup-doctor-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    margin-bottom: var(--space-xs);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.popup-doctor-card-body {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.popup-doctor-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    flex-shrink: 0;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.popup-doctor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.popup-doctor-avatar-initials {
    text-transform: uppercase;
}
.popup-doctor-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    flex: 1;
}
.popup-doctor-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-cst);
    margin: 0;
    line-height: 1.2;
}
.popup-doctor-meta {
    font-size: var(--font-size-2xs);
    color: var(--text-muted-cst);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
}
.popup-doctor-meta svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

/* Override scrolling behavior on requested booking form grid to prevent layout height clipping */
.pt-form-grid--request {
    overflow-y: visible !important;
}
.pt-form-grid--request > div {
    overflow-y: visible !important;
}

#popup-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#popup-form[data-state="hidden"] {
    display: none !important;
}

/* ── Patient Badge and Alignment Styles ─────────────────────────── */
.pt-patient-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: capitalize;
}

.pt-patient-badge-dependent {
    background: #e0e7ff;
    color: #3730a3;
}

.pt-patient-badge-self {
    background: #f3f4f6;
    color: #4b5563;
}

.pt-patient-activity-badge-wrapper {
    margin-left: auto;
}

/* ── Popup Form Layout helper classes ─────────────────────────── */
.pt-dependant-fields-container {
    margin-top: 14px;
    margin-bottom: 20px;
}

.pt-popup-form-group-nested {
    margin-top: 6px;
    margin-bottom: 12px;
}

.pt-popup-form-label-styled {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.pt-popup-form-input-readonly {
    background-color: #f9fafb;
    cursor: not-allowed;
}

.pt-notice-box-timing {
    margin-top: 12px;
    background: rgba(99, 102, 241, 0.05);
    border-color: rgba(99, 102, 241, 0.2);
}

.pt-notice-title-timing {
    font-weight: 600;
    color: #4f46e5;
}

.pt-notice-body-timing {
    font-size: 12px;
    color: var(--text-primary-cst);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pt-margin-top-md {
    margin-top: 16px;
}

/* ── Dashboard Upcoming Mini Card Styles ────────────────────────── */
@media (min-width: 992px) {
    .stat-card.span-2 {
        grid-column: span 2;
        padding: 16px 20px !important;
    }
}
.pt-upcoming-mini-card {
    margin-top: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none !important;
    display: block;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    width: 100%;
}
.pt-upcoming-mini-card:hover {
    border-color: #10b981;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.1);
    transform: translateY(-1px);
}
.pt-upcoming-mini-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
    width: 100%;
}
.pt-upcoming-mini-card-spacename {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    margin-top: 1px;
}
.pt-upcoming-mini-card-doctor {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pt-upcoming-mini-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pt-upcoming-mini-card-docname {
    font-weight: 600;
    font-size: 0.88rem;
    color: #0f172a;
}
.pt-upcoming-mini-card-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: capitalize;
}
.pt-upcoming-mini-card-badge-self {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}
.pt-upcoming-mini-card-badge-dependent {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}
.pt-upcoming-mini-card-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.pt-upcoming-mini-card-badge-dot-self {
    background-color: #9ca3af;
}
.pt-upcoming-mini-card-badge-dot-dependent {
    background-color: #4f46e5;
}
.pt-upcoming-mini-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}
.pt-upcoming-mini-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #475569;
    background: #ffffff;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #e2e8f0;
    font-weight: 500;
}
.pt-upcoming-mini-card-pill svg {
    color: #10b981;
    flex-shrink: 0;
}

/* ── Booking & Booking Request Popups Unified Styling ───────────── */
.popup-form-group {
    margin-bottom: 16px !important;
}
.pt-dependant-fields-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}
.pt-bfor-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 8px;
}
@media (max-width: 576px) {
    .pt-bfor-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.pt-bfor-card {
    position: relative;
    cursor: pointer;
    margin: 0;
}
.pt-bfor-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.pt-bfor-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}
.pt-bfor-btn svg {
    color: #64748b;
    transition: all 0.2s ease;
}
.pt-bfor-card:hover .pt-bfor-btn {
    border-color: #ec4899;
    color: #ec4899;
    background: #fdf2f8;
}
.pt-bfor-card:hover .pt-bfor-btn svg {
    color: #ec4899;
}
.pt-bfor-radio:checked + .pt-bfor-btn {
    background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%);
    border-color: #ec4899;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}
.pt-bfor-radio:checked + .pt-bfor-btn svg {
    color: #ffffff !important;
}
.pt-required-star {
    color: #ef4444;
}
.pt-bg-white {
    background: #ffffff !important;
}
.pt-save-checkbox-wrap {
    margin-top: 4px;
    margin-bottom: 0;
}
.pt-save-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    cursor: pointer;
    color: #475569;
}
.pt-pink-checkbox {
    accent-color: #ec4899;
}
.pt-primary-badge {
    font-size: 9px;
    font-weight: 600;
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.pt-flex-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pt-meta-line-top {
    margin-top: 4px;
}
.pt-margin-bottom-xs {
    margin-bottom: var(--space-xs);
}
.pt-meta-border-top {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-primary-cst);
}
.pt-meta-icon-pink {
    color: #ec4899;
}
.pt-margin-top-zero {
    margin-top: 0;
}
.pt-margin-bottom-20 {
    margin-bottom: 20px;
}

/* ── Patient slot picker ────────────────────────────────────────────────────── */
#patient-slot-picker[data-state="hidden"] { display: none; }
.pt-patient-slot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}
.pt-slot-pill {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-med);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-primary-cst);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.pt-slot-pill:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb, 37,99,235), 0.06);
    color: var(--color-primary);
}
.pt-slot-pill--selected {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}
.pt-slot-pill--booked {
    border-color: var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-muted-cst);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.6;
}
.pt-slot-pill--old {
    border-color: #f59e0b;
    background: #fef3c7;
    color: #92400e;
    cursor: pointer;
    font-style: italic;
}
.pt-slot-pill--old::after {
    content: ' ★';
    font-size: 9px;
    opacity: 0.75;
}

/* ── Reschedule mode banner (inside booking card) ───────────────────────────── */
.pt-reschedule-mode-banner {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 3px solid #3b82f6;
    border-radius: 8px;
    padding: 11px 14px;
    margin-bottom: 16px;
}
.pt-reschedule-mode-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #dbeafe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
}
.pt-reschedule-mode-text {
    flex: 1;
    min-width: 0;
}
.pt-reschedule-mode-label {
    font-size: 10px;
    font-weight: 700;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1px;
}
.pt-reschedule-mode-from {
    font-size: 13px;
    font-weight: 600;
    color: #1d4ed8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-reschedule-mode-cancel {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    padding: 4px 11px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #fff;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.5;
}
.pt-reschedule-mode-cancel:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ── Reschedule confirmation popup ──────────────────────────────────────────── */
#reschedule-confirm-overlay[data-state="hidden"] { display: none; }
#reschedule-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}
.pt-reschedule-from-to {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0 4px;
}
.pt-reschedule-leg {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 16px;
    border-radius: 8px;
}
.pt-reschedule-leg--from {
    background: #fff8f1;
    border: 1px solid #fed7aa;
    border-left: 3px solid #f97316;
}
.pt-reschedule-leg--to {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 3px solid #22c55e;
}
.pt-reschedule-leg-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.pt-reschedule-leg--from .pt-reschedule-leg-label { color: #f97316; }
.pt-reschedule-leg--to .pt-reschedule-leg-label { color: #16a34a; }
.pt-reschedule-leg-value {
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2937;
}
.pt-reschedule-leg--to .pt-reschedule-leg-value { color: #15803d; }
.pt-reschedule-arrow-wrap {
    text-align: center;
    color: #cbd5e1;
    line-height: 1;
}
.pt-reschedule-hint {
    font-size: 11.5px;
    color: #9ca3af;
    text-align: center;
    margin: 14px 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Patient Appointments Switchable Tabs (my_appointments.blade.php) */
.pt-card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.pt-appt-tabs-nav {
    display: inline-flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 8px;
    gap: 4px;
}

.pt-tab-btn {
    padding: 8px 16px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #64748b;
    box-shadow: none;
}

.pt-tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pt-tab-count {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
}

.pt-tab-count--upcoming {
    background: #10b981;
}

.pt-tab-count--requests {
    background: #f59e0b;
}

.pt-tab-count--past {
    background: #64748b;
}

/* ── Doctor Reviews & Rating Modal Styles ── */
.reviews-stars-wrap {
    user-select: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    margin-top: 10px;
}

.doc-reviews-toggle-btn {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.doc-reviews-modal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.doc-reviews-modal .modal-header {
    border-bottom: 1px solid #e2e8f0;
    padding: 18px 24px;
}

.doc-reviews-modal .modal-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 1.1rem;
}

.doc-reviews-modal .modal-subtitle {
    font-size: 0.8rem;
}

.doc-reviews-modal .modal-overall-rating {
    color: #f59e0b;
}

.doc-reviews-modal .btn-close-custom {
    border: none;
    background: transparent;
    font-size: 1.25rem;
    cursor: pointer;
    color: #64748b;
}

.doc-reviews-modal .modal-body {
    padding: 24px;
    max-height: 480px;
    overflow-y: auto;
}

.review-item-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.review-item-card:last-child {
    margin-bottom: 0;
}

.reviewer-name {
    font-weight: 600;
    font-size: 0.925rem;
    color: #1e293b;
    line-height: 1.2;
}

.review-date {
    font-size: 0.75rem;
    color: #64748b;
}

.review-stars-badge {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #f59e0b;
    font-size: 0.875rem;
}

.review-stars-badge .star-num,
.star-num {
    color: #475569;
    font-weight: 600;
    font-size: 0.825rem;
    margin-left: 4px;
}

.review-stars-empty {
    color: #cbd5e1 !important;
}

.review-text {
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.5;
}

.doc-reviews-modal .modal-footer {
    border-top: 1px solid #e2e8f0;
    padding: 12px 24px;
}

.doc-reviews-modal .btn-close-modal {
    border-radius: 8px;
    font-weight: 600;
}

/* ── Dashboard & Appointments Helper Utility Classes ── */
.stat-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.stat-card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.stat-card-view-btn {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f172a;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stat-card-link:hover .stat-card-view-btn,
.stat-card-view-btn:hover {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.stat-card-icon--muted {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
}

.dashboard-more-link-wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 6px;
}

.dashboard-more-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: #10b981;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dashboard-more-link:hover {
    color: #059669;
    text-decoration: underline;
}

.empty-state--compact {
    padding: 30px 20px;
}

.empty-state-icon--sm {
    margin-bottom: 12px;
}

.empty-state-text--sm {
    font-size: 1rem;
    margin-bottom: 4px;
}

.empty-state-sub--sm {
    font-size: 0.85rem;
}

/* ── Listing Page Inline & All Reviews Modal Styles ── */
.space-inline-reviews-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.space-reviews-header-badge {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 12px;
}

.space-reviews-modal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.space-reviews-modal .modal-header {
    border-bottom: 1px solid #e2e8f0;
    padding: 18px 24px;
}

.space-reviews-modal .modal-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 1.1rem;
}

.space-reviews-modal .modal-overall {
    font-size: 0.8rem;
}

.space-reviews-modal .modal-overall-star {
    color: #f59e0b;
}

.space-reviews-modal .btn-close-custom {
    border: none;
    background: transparent;
    font-size: 1.25rem;
    cursor: pointer;
    color: #64748b;
}

.space-reviews-modal .modal-body {
    padding: 24px;
    max-height: 480px;
    overflow-y: auto;
}

.space-reviews-modal .modal-footer {
    border-top: 1px solid #e2e8f0;
    padding: 12px 24px;
}

.space-reviews-modal .btn-close-modal {
    border-radius: 8px;
}

/* ── Small Variant Reviews Classes ── */
.reviewer-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    background: #3b82f6;
    color: #ffffff;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

.reviewer-avatar img,
img.reviewer-avatar-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

.review-item-card--sm {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
}

.reviewer-avatar--sm {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    font-size: 0.85rem;
}

.reviewer-name--sm {
    font-size: 0.875rem;
}

.review-date--sm {
    font-size: 0.725rem;
}

.review-stars-badge--sm {
    font-size: 0.8rem;
}

.star-num--sm {
    font-size: 0.775rem;
    margin-left: 3px;
}

.review-text--sm {
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.45;
}

.space-view-more-btn {
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 5px 16px;
}