/* ============================================================
   Doctor Page — Isolated Styles  (dp- prefix, no conflicts)
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.dp-hero {
    position: relative;
    background-image: url(../img/how-do-blood-tests.jpg);
    background-size: cover;
    background-position: center;
    min-height: 310px;
    display: flex;
    align-items: center;
}
.dp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,151,210,.88), rgba(0,45,80,.80));
}
.dp-hero__content {
    position: relative;
    z-index: 2;
    padding: 44px 0 36px;
    width: 100%;
}
.dp-hero__title {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
}
.dp-hero__subtitle {
    color: rgba(255,255,255,.82);
    font-size: 14px;
    text-align: center;
    margin-bottom: 26px;
}

/* ── Search Card ─────────────────────────────────────────── */
.dp-search-card {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 22px 24px 20px !important;
    box-shadow: 0 16px 50px rgba(0,0,0,.22) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dp-field {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dp-field--btn {
    flex: 0 0 auto !important;
    min-width: auto !important;
    width: auto !important;
}

label.dp-label {
    display: block !important;
    color: #0097D2 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    width: auto !important;
    white-space: nowrap !important;
}
label.dp-label i { font-size: 11px; margin-right: 4px; }

/* ── Custom Select ───────────────────────────────────────── */
.dp-select {
    position: relative;
    border: 2px solid #ddf0f8 !important;
    border-radius: 10px !important;
    background: #f5fbff !important;
    cursor: pointer;
    user-select: none;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
}
.dp-select:hover { border-color: #aad5ec !important; }
.dp-select.dp-open {
    border-color: #0097D2 !important;
    box-shadow: 0 0 0 3px rgba(0,151,210,.13) !important;
    background: #fff !important;
}
.dp-select__val {
    display: block !important;
    padding: 11px 34px 11px 12px !important;
    font-size: 14px !important;
    color: #1a2b3c !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    background: none !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box;
}
.dp-placeholder { color: #a0b4c4 !important; }

.dp-select__caret {
    position: absolute !important;
    right: 11px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
    color: #0097D2 !important;
    pointer-events: none !important;
    transition: transform .22s !important;
}
.dp-select.dp-open .dp-select__caret { transform: translateY(-50%) rotate(180deg) !important; }

.dp-select__list {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important; right: 0 !important;
    background: #fff !important;
    border: 1.5px solid #c6e8f5 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(0,151,210,.14) !important;
    z-index: 9999 !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    padding: 4px 0 !important;
}
.dp-select.dp-open .dp-select__list { display: block !important; }

.dp-opt {
    display: block !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #2c4a5e !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background .15s !important;
    background: none !important;
    border: none !important;
}
.dp-opt:hover, .dp-opt.dp-opt--active {
    background: #e2f3fc !important;
    color: #0097D2 !important;
}

/* ── Text input ──────────────────────────────────────────── */
.dp-text-input {
    display: block !important;
    width: 100% !important;
    border: 2px solid #ddf0f8 !important;
    border-radius: 10px !important;
    padding: 11px 12px !important;
    font-size: 14px !important;
    color: #1a2b3c !important;
    font-weight: 500 !important;
    background: #f5fbff !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color .2s !important;
}
.dp-text-input::placeholder { color: #a0b4c4 !important; font-weight: 400 !important; }
.dp-text-input:focus {
    border-color: #0097D2 !important;
    box-shadow: 0 0 0 3px rgba(0,151,210,.13) !important;
    background: #fff !important;
}

/* ── Search Button ───────────────────────────────────────── */
.dp-search-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #0097D2, #00bef0) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    height: 46px !important;
    box-shadow: 0 6px 18px rgba(0,151,210,.35) !important;
    transition: all .22s !important;
    text-decoration: none !important;
}
.dp-search-btn:hover {
    background: linear-gradient(135deg, #0082b8, #00a8d8) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

/* ── Doctor Cards ────────────────────────────────────────── */
.dp-card {
    background: #fff !important;
    border-radius: 14px !important;
    border: 1px solid #e4f1f9 !important;
    box-shadow: 0 4px 20px rgba(0,151,210,.08) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: transform .3s, box-shadow .3s !important;
    position: relative !important;
}
.dp-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 36px rgba(0,151,210,.16) !important;
}
.dp-card__bar {
    height: 4px !important;
    background: linear-gradient(90deg,#0097D2,#00c6ff) !important;
    flex-shrink: 0 !important;
}

/* head row */
.dp-card__head {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 18px 12px !important;
    flex-wrap: nowrap !important;
}
.dp-card__avatar {
    width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #e4f1f9 !important;
    flex-shrink: 0 !important;
    border: 3px solid #cce8f5 !important;
}
.dp-card__avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.dp-card__info { flex: 1 !important; min-width: 0 !important; }

.dp-card__badge {
    display: inline-block !important;
    background: rgba(0,151,210,.10) !important;
    color: #0097D2 !important;
    border: 1px solid rgba(0,151,210,.20) !important;
    border-radius: 20px !important;
    padding: 2px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}
.dp-card__name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a2b3c !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 2px !important;
    display: block !important;
}
.dp-card__spec {
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 6px !important;
    display: block !important;
}
.dp-card__stars { display: flex !important; gap: 2px !important; margin-bottom: 3px !important; }
.dp-card__stars i { font-size: 12px !important; color: #fbbf24 !important; }
.dp-card__stars i.fa-regular { color: #d1d5db !important; }
.dp-card__reviews { font-size: 11px !important; color: #94a3b8 !important; display: block !important; }

/* meta rows */
.dp-card__meta { border-top: 1px solid #f1f6fa !important; }
.dp-card__row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    color: #475569 !important;
    border-bottom: 1px solid #f8fbfd !important;
}
.dp-card__row i { color: #0097D2 !important; width: 14px !important; flex-shrink: 0 !important; }

/* action buttons */
.dp-card__actions {
    display: flex !important;
    border-top: 1px solid #f1f6fa !important;
    margin-top: auto !important;
}
.dp-card__btn {
    flex: 1 !important;
    padding: 13px 8px !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: background .2s !important;
}
.dp-card__btn:first-child { border-radius: 0 0 0 14px !important; }
.dp-card__btn:last-child  { border-radius: 0 0 14px 0 !important; }

.dp-card__btn--fill {
    background: linear-gradient(135deg,#0097D2,#00bef0) !important;
    color: #fff !important;
}
.dp-card__btn--fill:hover { background: linear-gradient(135deg,#0082b8,#00a8d8) !important; color:#fff !important; }

.dp-card__btn--ghost {
    background: #f7fbfe !important;
    color: #0097D2 !important;
    border-left: 1px solid #e0eff8 !important;
}
.dp-card__btn--ghost:hover { background: #e4f2fc !important; color: #0097D2 !important; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 992px) {
    .dp-search-card {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .dp-field {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
    }
    .dp-field--btn {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .dp-search-btn { width: 100% !important; }
}

@media (max-width: 576px) {
    .dp-field {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .dp-hero__title { font-size: 22px !important; }
    .dp-search-card { padding: 16px !important; }
}