/**
 * Mzansi Doctor Appointment UX Style
 * Version 1.0.1
 *
 * IMPORTANT:
 * - CSS only.
 * - No display/visibility state overrides.
 * - No appointment loader overrides.
 * - No intake open/close overrides.
 * - No booking action behavior changes.
 */

/* Design tokens scoped to the existing appointment section. */
.dc-apointments-wraptest {
    --mza-text: #152238;
    --mza-text-soft: #53647c;
    --mza-muted: #7d8ba0;
    --mza-border: #e2e8f0;
    --mza-border-strong: #cfd8e5;
    --mza-surface: #ffffff;
    --mza-surface-soft: #f8fafc;
    --mza-blue: #1769e8;
    --mza-blue-dark: #0f54c4;
    --mza-blue-soft: #eef5ff;
    --mza-green: #117a3b;
    --mza-green-soft: #edf9f1;
    --mza-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    --mza-shadow-hover: 0 12px 30px rgba(15, 23, 42, 0.09);
}

/* Section heading. */
.dc-apointments-wraptest .dc-searchresult-head {
    margin-bottom: 14px !important;
    padding: 0 2px 12px !important;
    border-bottom: 1px solid var(--mza-border) !important;
}

.dc-apointments-wraptest .dc-searchresult-head h2 {
    margin: 0 !important;
    color: var(--mza-text) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
}

/* Main appointment card. */
.dc-apointments-wraptest .dc-appointment-card {
    margin: 0 0 14px !important;
    border: 1px solid var(--mza-border) !important;
    border-radius: 16px !important;
    background: var(--mza-surface) !important;
    box-shadow: var(--mza-shadow) !important;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease !important;
}

.dc-apointments-wraptest .dc-appointment-card:hover {
    border-color: var(--mza-border-strong) !important;
    box-shadow: var(--mza-shadow-hover) !important;
    transform: translateY(-1px) !important;
}

/*
 * The theme already makes this element a grid.
 * Only the existing column proportions are refined.
 */
.dc-apointments-wraptest .dc-appointment-card .dc-card-header {
    grid-template-columns:
        minmax(210px, 1.35fr)
        minmax(165px, 0.85fr)
        minmax(205px, 1fr)
        minmax(260px, 1.2fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    background: var(--mza-surface) !important;
}

/* Clean column separation instead of four bulky inner cards. */
.dc-apointments-wraptest .dc-appointment-card .dc-card-header > div {
    padding: 18px 20px !important;
    border-left: 1px solid var(--mza-border) !important;
    background: transparent !important;
}

.dc-apointments-wraptest .dc-appointment-card .dc-card-header > div:first-child {
    border-left: 0 !important;
}

/* Patient and doctor avatars. */
.dc-apointments-wraptest .dc-mini {
    gap: 12px !important;
}

.dc-apointments-wraptest .dc-mini img {
    width: 48px !important;
    height: 48px !important;
    border: 1px solid var(--mza-border) !important;
    border-radius: 12px !important;
    background: var(--mza-surface-soft) !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
}

.dc-apointments-wraptest .dc-patient img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 13px !important;
}

/* Labels. */
.dc-apointments-wraptest .dc-patient small,
.dc-apointments-wraptest .dc-kv small,
.dc-apointments-wraptest .dc-card-header > div:last-child > small {
    margin-bottom: 5px !important;
    color: var(--mza-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
}

/* Patient ID. */
.dc-apointments-wraptest .dc-id {
    margin-bottom: 4px !important;
    color: var(--mza-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

/* Primary values. */
.dc-apointments-wraptest .dc-patient strong,
.dc-apointments-wraptest .dc-kv strong,
.dc-apointments-wraptest .booking_doctor_name {
    color: var(--mza-text) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

.dc-apointments-wraptest .booking_subtitle {
    color: var(--mza-text) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

/* Appointment date icon. */
.dc-apointments-wraptest .dc-kv strong i {
    margin-right: 5px !important;
    color: var(--mza-blue) !important;
}

/* Consultation badges. */
.dc-apointments-wraptest .badge {
    margin-top: 3px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.dc-apointments-wraptest .badge-inperson {
    border-color: #bee5ca !important;
    background: var(--mza-green-soft) !important;
    color: var(--mza-green) !important;
}

.dc-apointments-wraptest .badge-video {
    border-color: #c7dbff !important;
    background: var(--mza-blue-soft) !important;
    color: var(--mza-blue-dark) !important;
}

/* Softer divider between consultation type and actions. */
.dc-apointments-wraptest .dc-divider-soft {
    margin: 11px 0 !important;
    border-top-color: var(--mza-border) !important;
}

/* Existing action controls: visuals only. */
.dc-apointments-wraptest .dc-actions {
    gap: 8px !important;
}

.dc-apointments-wraptest .dc-actions > a,
.dc-apointments-wraptest .dc-actions > button {
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    border: 1px solid var(--mza-border-strong) !important;
    border-radius: 10px !important;
    background: var(--mza-surface) !important;
    color: #32445c !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        transform 150ms ease !important;
}

.dc-apointments-wraptest .dc-actions > a:hover,
.dc-apointments-wraptest .dc-actions > button:hover {
    border-color: #b8d1f8 !important;
    background: var(--mza-blue-soft) !important;
    color: var(--mza-blue-dark) !important;
    transform: translateY(-1px) !important;
}

.dc-apointments-wraptest .dc-actions > a:focus-visible,
.dc-apointments-wraptest .dc-actions > button:focus-visible {
    outline: 3px solid rgba(23, 105, 232, 0.18) !important;
    outline-offset: 2px !important;
}

.dc-apointments-wraptest .dc-intake-toggle {
    border-color: #c7dbff !important;
    background: var(--mza-blue-soft) !important;
    color: var(--mza-blue-dark) !important;
}

/* Main divider. */
.dc-apointments-wraptest .dc-appointment-card .dc-divider {
    border-top-color: var(--mza-border) !important;
}

/*
 * Expanded intake area.
 * No display rules here: the theme's own JS/CSS keeps full control.
 */
.dc-apointments-wraptest .dc-appointment-card .dc-card-body {
    padding: 16px 18px !important;
    background: var(--mza-surface-soft) !important;
}

.dc-apointments-wraptest .dc-intake-grid {
    gap: 12px !important;
}

.dc-apointments-wraptest .dc-intake-grid > div {
    padding: 14px !important;
    border: 1px solid var(--mza-border) !important;
    border-radius: 12px !important;
    background: var(--mza-surface) !important;
}

.dc-apointments-wraptest .md-sec-title {
    margin-bottom: 9px !important;
    color: var(--mza-text) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.03em !important;
}

.dc-apointments-wraptest .dc-intake-list li {
    margin: 4px 0 !important;
    color: var(--mza-text-soft) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.dc-apointments-wraptest .dc-intake-list .key {
    color: var(--mza-text) !important;
    font-weight: 800 !important;
}

/* Payment summary visuals only. */
.dc-apointments-wraptest .md-payment-title {
    margin: 14px 0 7px !important;
    color: var(--mza-text) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.dc-apointments-wraptest .md-price-card {
    border-color: var(--mza-border) !important;
    border-radius: 12px !important;
    background: var(--mza-surface) !important;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05) !important;
}

.dc-apointments-wraptest .md-price-row {
    padding: 9px 13px !important;
    border-bottom-color: var(--mza-border) !important;
}

.dc-apointments-wraptest .md-price-row span:first-child {
    color: var(--mza-text-soft) !important;
    font-size: 12px !important;
}

.dc-apointments-wraptest .md-money {
    color: var(--mza-blue-dark) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.dc-apointments-wraptest .md-price-row.total {
    background: var(--mza-blue-soft) !important;
}

/*
 * Responsive refinements.
 * Only the theme's existing grid column definition is changed.
 */
@media (max-width: 1200px) {
    .dc-apointments-wraptest .dc-appointment-card .dc-card-header {
        grid-template-columns:
            minmax(210px, 1.2fr)
            minmax(160px, 0.8fr)
            minmax(190px, 1fr)
            minmax(220px, 1fr) !important;
    }

    .dc-apointments-wraptest .dc-appointment-card .dc-card-header > div {
        padding: 16px 14px !important;
    }
}

@media (max-width: 992px) {
    .dc-apointments-wraptest .dc-appointment-card .dc-card-header {
        grid-template-columns: 1fr 1fr !important;
    }

    .dc-apointments-wraptest .dc-appointment-card .dc-card-header > div {
        border-left: 0 !important;
        border-bottom: 1px solid var(--mza-border) !important;
    }

    .dc-apointments-wraptest .dc-appointment-card .dc-card-header > div:nth-child(even) {
        border-left: 1px solid var(--mza-border) !important;
    }

    .dc-apointments-wraptest .dc-appointment-card .dc-card-header > div:nth-last-child(-n + 2) {
        border-bottom: 0 !important;
    }
}

@media (max-width: 768px) {
    .dc-apointments-wraptest .dc-appointment-card .dc-card-header {
        grid-template-columns: 1fr !important;
    }

    .dc-apointments-wraptest .dc-appointment-card .dc-card-header > div,
    .dc-apointments-wraptest .dc-appointment-card .dc-card-header > div:nth-child(even) {
        padding: 14px !important;
        border-left: 0 !important;
        border-bottom: 1px solid var(--mza-border) !important;
    }

    .dc-apointments-wraptest .dc-appointment-card .dc-card-header > div:last-child {
        border-bottom: 0 !important;
    }

    .dc-apointments-wraptest .dc-mini img,
    .dc-apointments-wraptest .dc-patient img {
        width: 44px !important;
        height: 44px !important;
    }
}