/* ============================================
   Mobile Responsive Fixes
   Pages: /Doctor, /Hospital, /DoctorProfile
   ============================================ */

/* --- Filter date icon (always visible) --- */
.filter-date-icon {
    display: none;
}

/* --- Mobile Schedule: show/hide toggle --- */
.schedule-mobile {
    display: none;
}

.schedule-desktop {
    display: block;
}

/* --- Filter chips: show/hide toggle --- */
.filter-chips-mobile {
    display: none;
}

.filter-list-desktop {
    display: block;
}

/* Utility: w-lg-25 - 25% width on large screens, 100% on mobile */
.w-lg-25 {
    width: 100%;
}

@media (min-width: 992px) {
    .w-lg-25 {
        width: 25% !important;
    }
}

/* --- Tablet (max-width: 991px) --- */
@media only screen and (max-width: 991.98px) {

    /* Search section - account for fixed header */
    .section-hospital-search {
        padding: 80px 0 30px 0;
    }

    .section-hospital-search .container.mt-7 {
        margin-top: 0 !important;
    }

    /* Blue info bar - reduce horizontal padding */
    .content .px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Doctor/Hospital card widget */
    .doctor-widget {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .doc-info-left {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .doc-info-cont {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center;
    }

    .doc-info-right {
        width: 100%;
        justify-content: center;
        margin-top: 0.75rem;
    }

    .doc-info-right .btn {
        width: 100%;
        max-width: 280px;
    }

    /* Hospital card - type badges centered */
    .doc-info-cont .clinic-services {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Doctor profile - sitting hospitals section */
    .d-flex.justify-content-between.mt-5.pb-3 {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* DoctorProfile - location list hospital image */
    .location-list .col-md-2 {
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .location-list .col-md-2 .doctor-img {
        width: 80px;
        height: auto;
    }

    .location-list .col-md-2 .doctor-img img {
        width: 80px;
        height: 80px;
        object-fit: contain;
    }

    /* Clinic content - remove left padding on mobile */
    .clinic-content {
        padding-left: 0 !important;
    }

    /* Schedule day timing grid - use 33% instead of 25% on tablet */
    .clinic-timing .w-25 {
        width: 33.33% !important;
    }

    /* HospitalProfile card on tablet */
    .hospital-profile-card {
        height: auto !important;
    }

    /* Booking modal - make it responsive */
    #myModalBookingForm .modal-dialog {
        max-width: 95% !important;
        margin: 1rem auto;
    }
}

/* --- Mobile (max-width: 767px) --- */
@media only screen and (max-width: 767.98px) {

    /* Search section - account for fixed header (~70px) */
    .section-search {
        padding-top: 80px;
    }

    .section-hospital-search {
        padding: 80px 0 20px 0;
        min-height: unset;
    }

    .section-hospital-search .container.mt-7 {
        margin-top: 0 !important;
    }

    .banner-header {
        margin-bottom: 15px !important;
    }

    /* Global font size reduction for mobile */
    body {
        font-size: 0.8125rem;
    }

    h1, .h1 {
        font-size: 1.5rem;
    }

    h2, .h2 {
        font-size: 1.25rem;
    }

    h3, .h3 {
        font-size: 1.1rem;
    }

    h4, .h4 {
        font-size: 0.9rem;
    }

    h5, .h5 {
        font-size: 0.8rem;
    }

    p, span, a, label, li {
        font-size: 0.8125rem;
    }

    .banner-header h1 {
        font-size: 1.25rem;
    }

    .banner-header p {
        font-size: 0.8rem;
    }

    /* Search box - full width, stack vertically */
    .search-box {
        width: 100%;
        max-width: 100%;
        padding: 0 0.5rem;
    }

    .search-box-form {
        flex-direction: column !important;
        padding: 0 !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        gap: 0.5rem;
    }

    .search-box-form .careme-btn {
        width: 100%;
        border-radius: 12px !important;
    }

    input.search-with-icon {
        width: 100% !important;
        border-radius: 12px !important;
    }

    /* Blue info bar */
    .content .px-5 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Sort by - show on mobile too */
    .sort-by {
        margin-top: 0.5rem;
    }

    /* --- Filter sidebar: convert to horizontal on mobile --- */
    .theiaStickySidebar {
        margin-bottom: 0.5rem;
    }

    .search-filter {
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
    }

    .search-filter .card-header {
        display: none;
    }

    .search-filter .card-body {
        padding: 0 !important;
    }

    /* Hide desktop checkbox list, show mobile chips */
    .filter-list-desktop {
        display: none !important;
    }

    .filter-chips-mobile {
        display: block !important;
    }

    .filter-chips-mobile h4 {
        font-size: 0.85rem;
        color: #64748B;
        margin-bottom: 8px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .filter-chips-scroll {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

    .filter-chips-scroll::-webkit-scrollbar {
        display: none;
    }

    .filter-chip {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        margin: 0;
    }

    .filter-chip input[type="checkbox"] {
        display: none;
    }

    .filter-chip-label {
        display: inline-block;
        padding: 6px 16px;
        border: 1px solid #CBD5E1;
        border-radius: 20px;
        font-size: 0.8rem;
        color: #475569;
        background: #fff;
        white-space: nowrap;
        transition: all 0.2s ease;
        user-select: none;
    }

    .filter-chip input[type="checkbox"]:checked + .filter-chip-label {
        background: #2563EB;
        border-color: #2563EB;
        color: #fff;
    }

    /* Filter date icon - show on mobile */
    .filter-date-icon {
        display: block !important;
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #2563EB;
        font-size: 0.85rem;
        z-index: 2;
        pointer-events: none;
    }

    /* --- Calendar / Date filter: pill button style --- */
    .search-filter .filter-widget .datetimepicker,
    .filter-widget .form-control.datetimepicker {
        border: 1px solid #2563EB !important;
        border-radius: 20px !important;
        color: #2563EB !important;
        font-size: 0.8rem !important;
        font-weight: 500;
        padding: 6px 14px 6px 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        background-color: #EFF6FF;
        cursor: pointer;
        width: auto !important;
        display: inline-block;
    }

    .search-filter .filter-widget .cal-icon::before,
    .search-filter .filter-widget .datetimepicker::placeholder {
        color: #2563EB;
    }

    /* Date filter container - inline */
    .search-filter .filter-widget:first-child {
        margin-bottom: 8px;
    }

    /* Gender filter - pill chips style */
    .filter-widget h4 {
        font-size: 0.75rem !important;
        color: #64748B;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 6px;
        font-weight: 600;
    }

    .filter-widget .d-flex.flex-row {
        gap: 6px;
    }

    .filter-widget .custom_check {
        font-size: 0.8rem !important;
        margin-bottom: 4px;
    }

    /* Doctor name search input in HospitalProfile sidebar */
    .search-filter .filter-widget .form-group input.form-control:not(.datetimepicker) {
        border-radius: 12px !important;
        height: 36px !important;
        min-height: 36px !important;
        font-size: 0.8rem !important;
        padding: 6px 14px !important;
    }

    /* MyBooking page - date picker pill style */
    #div-ddate .div_date {
        display: inline-block;
    }

    #div-ddate .p-date-txt {
        border: 1px solid #2563EB !important;
        border-radius: 20px !important;
        color: #2563EB !important;
        font-size: 0.8rem !important;
        font-weight: 500;
        padding: 6px 14px 6px 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        background-color: #EFF6FF !important;
        max-width: 260px !important;
    }

    #div-ddate .date-img-profile {
        width: 18px;
        height: 18px;
        left: 10px !important;
        top: 9px !important;
    }

    /* ====================================
       Airbnb-style daterangepicker on mobile
       Full-screen bottom sheet overlay
       ==================================== */

    /* Dark backdrop overlay */
    .daterangepicker-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 3000;
    }

    /* Main container - bottom sheet */
    .daterangepicker {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15) !important;
        z-index: 3001 !important;
        font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 14px;
        padding: 0 !important;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Hide the arrow pointers */
    .daterangepicker::before,
    .daterangepicker::after {
        display: none !important;
    }

    /* Handle bar at top */
    .daterangepicker .drp-calendar:first-child::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #D1D5DB;
        border-radius: 2px;
        margin: 12px auto 8px;
    }

    /* Calendar panels */
    .daterangepicker .drp-calendar {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 16px 8px !important;
        float: none !important;
        clear: both !important;
    }

    .daterangepicker .drp-calendar.left {
        padding-top: 0 !important;
    }

    .daterangepicker .drp-calendar.right {
        padding-top: 0 !important;
        border-top: 1px solid #F3F4F6;
    }

    /* Calendar table */
    .daterangepicker .calendar-table {
        border: none !important;
        background: transparent !important;
    }

    .daterangepicker .calendar-table table {
        width: 100%;
    }

    /* Month/year header */
    .daterangepicker th.month {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #1F2937 !important;
        padding: 12px 0 !important;
        height: auto !important;
        line-height: 1.4 !important;
    }

    /* Prev/Next arrows */
    .daterangepicker .calendar-table .prev,
    .daterangepicker .calendar-table .next {
        min-width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        border-radius: 50% !important;
    }

    .daterangepicker .calendar-table .prev:hover,
    .daterangepicker .calendar-table .next:hover {
        background: #F3F4F6 !important;
    }

    .daterangepicker .calendar-table .prev span,
    .daterangepicker .calendar-table .next span {
        border-color: #374151 !important;
        border-width: 0 2px 2px 0 !important;
        padding: 4px !important;
    }

    /* Day-of-week headers */
    .daterangepicker .calendar-table thead tr:nth-child(2) th {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        color: #9CA3AF !important;
        text-transform: uppercase;
        padding: 8px 0 4px !important;
        height: auto !important;
        line-height: 1.4 !important;
    }

    /* Day cells */
    .daterangepicker .calendar-table td {
        font-size: 0.875rem !important;
        min-width: 40px !important;
        width: calc(100% / 7) !important;
        height: 42px !important;
        line-height: 42px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        color: #1F2937;
        transition: all 0.15s ease;
    }

    .daterangepicker .calendar-table th {
        font-size: 0.875rem !important;
        min-width: 40px !important;
        height: 42px !important;
        line-height: 42px !important;
        padding: 0 !important;
    }

    /* Hover */
    .daterangepicker td.available:hover {
        background-color: #F3F4F6 !important;
        border-radius: 50% !important;
    }

    /* In-range (between start and end) */
    .daterangepicker td.in-range {
        background-color: #EFF6FF !important;
        border-radius: 0 !important;
        color: #1F2937 !important;
    }

    /* Start date */
    .daterangepicker td.start-date {
        background-color: #2563EB !important;
        color: #fff !important;
        border-radius: 50% 0 0 50% !important;
    }

    .daterangepicker td.start-date.end-date {
        border-radius: 50% !important;
    }

    /* End date */
    .daterangepicker td.end-date {
        background-color: #2563EB !important;
        color: #fff !important;
        border-radius: 0 50% 50% 0 !important;
    }

    /* Active (selected) */
    .daterangepicker td.active,
    .daterangepicker td.active:hover {
        background-color: #2563EB !important;
        color: #fff !important;
    }

    /* Disabled / off dates */
    .daterangepicker td.off {
        color: #D1D5DB !important;
        background: transparent !important;
    }

    .daterangepicker td.disabled {
        color: #D1D5DB !important;
        text-decoration: none !important;
        opacity: 0.4;
    }

    /* Today */
    .daterangepicker td.available:not(.off):not(.in-range):not(.active) {
        position: relative;
    }

    /* Month/Year selects */
    .daterangepicker select.monthselect,
    .daterangepicker select.yearselect {
        font-size: 0.875rem !important;
        padding: 4px 6px !important;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        background: #F9FAFB;
        color: #1F2937;
        height: 32px;
    }

    .daterangepicker select.monthselect {
        width: 55% !important;
    }

    .daterangepicker select.yearselect {
        width: 42% !important;
    }

    /* Buttons bar at bottom - sticky */
    .daterangepicker .drp-buttons {
        position: sticky;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #F3F4F6 !important;
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        z-index: 2;
    }

    .daterangepicker .drp-selected {
        font-size: 0.8rem !important;
        color: #6B7280;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .daterangepicker .drp-buttons .btn {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        padding: 8px 20px !important;
        border-radius: 10px !important;
        margin-left: 8px !important;
        min-width: 70px;
    }

    .daterangepicker .drp-buttons .cancelBtn {
        background: transparent !important;
        border: 1px solid #D1D5DB !important;
        color: #374151 !important;
    }

    .daterangepicker .drp-buttons .applyBtn {
        background: #2563EB !important;
        border: none !important;
        color: #fff !important;
    }

    /* Ranges list (if shown) */
    .daterangepicker .ranges {
        padding: 8px 0;
    }

    .daterangepicker .ranges li {
        font-size: 0.875rem;
        padding: 10px 16px;
        border-radius: 8px;
        margin: 2px 8px;
    }

    .daterangepicker .ranges li:hover {
        background: #F3F4F6;
    }

    .daterangepicker .ranges li.active {
        background: #2563EB;
        color: #fff;
    }

    /* Single calendar - no right panel needed */
    .daterangepicker.single .drp-calendar {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hide desktop-only elements */
    .daterangepicker .calendar-table .next span,
    .daterangepicker .calendar-table .prev span {
        border-width: 0 2.5px 2.5px 0 !important;
        padding: 4px !important;
    }

    /* --- Patient page --- */
    .content.padding-x-3-3 .mt-7 {
        margin-top: 5rem !important;
    }

    /* Sidebar navigation - horizontal tabs on mobile */
    .profile-sidebar .dashboard-widget {
        margin-bottom: 1rem;
    }

    .dashboard-menu {
        border-radius: 12px !important;
    }

    .dashboard-menu ul {
        display: flex;
        flex-wrap: wrap;
        padding: 10px !important;
        gap: 0;
    }

    .dashboard-menu ul li {
        flex: 1;
        min-width: auto;
    }

    .dashboard-menu ul li a {
        padding: 8px 12px !important;
        text-align: center;
        font-size: 0.85rem !important;
        justify-content: center;
    }

    .dashboard-menu ul li a span {
        font-size: 0.85rem !important;
    }

    .dash-logout {
        margin-left: 15px !important;
        margin-top: 10px !important;
        font-size: 0.9rem;
    }

    /* Sidebar padding */
    .col-md-5.col-lg-4.col-xl-3.theiaStickySidebar[style*="padding-right:30px"] {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    /* Date picker in patient page */
    .date-img-profile {
        left: 10px !important;
        top: 7px;
        position: absolute;
    }

    .p-date-txt {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 35px !important;
    }

    /* Profile settings form */
    .change-avatar {
        flex-direction: column;
        align-items: center;
    }

    .change-avatar .profile-img img {
        width: 80px !important;
        height: 80px !important;
    }

    .change-avatar .upload-img {
        padding-left: 0 !important;
        text-align: center;
    }

    .form-input {
        font-size: 14px !important;
        padding: 8px 20px !important;
    }

    .p-gender-lbl {
        font-size: 14px !important;
    }

    .submit-section {
        float: none !important;
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .submit-section .btn {
        width: auto !important;
    }

    /* Appointment list cards - stack vertically */
    .p-card .profile-widget {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 12px;
    }

    .p-card .doc-info-left {
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    .p-card .doctor-img {
        margin-right: 12px !important;
        margin-bottom: 0;
    }

    .p-card .doctor-img img {
        width: 50px !important;
        height: 50px !important;
    }

    .p-card .doc-info-cont {
        text-align: left;
        padding: 0 !important;
    }

    .p-card .d-flex.mt-2.pr-lg-5 {
        padding-right: 0 !important;
        width: 100%;
    }

    .p-infotitle {
        font-size: 0.95rem !important;
    }

    .p-counter {
        font-size: 0.9rem !important;
    }

    .p-info {
        font-size: 0.85rem !important;
    }

    /* Pagination */
    .pagedList {
        overflow-x: auto;
    }

    /* --- BookingSuccess page --- */
    .success-page-cont {
        padding: 10px 0 !important;
    }

    .b-success-txt {
        font-size: 0.9rem;
    }

    .bold-b-success-txt {
        font-size: 1.3rem !important;
        line-height: 1.5 !important;
    }

    .p-summary-txt {
        font-size: 0.85rem;
    }

    .p-infosuccess {
        font-size: 1.1rem !important;
        width: auto !important;
    }

    .h3-txt {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }

    .patient-details {
        border-radius: 12px !important;
        padding: 10px !important;
    }

    .bs-dnt {
        padding-top: 20px !important;
    }

    .p-counter-d {
        font-size: 0.85rem;
    }

    /* Booking success doctor image */
    .success-page-cont .img-fluid {
        height: 80px !important;
    }

    /* Cancel/Check Queue buttons */
    .rounded-default {
        font-size: 0.85rem;
        padding: 8px 16px;
    }

    /* --- HospitalProfile page --- */
    .bg-gradient .mt-7 {
        margin-top: 5rem !important;
    }

    /* Hospital card */
    .hospital-profile-card {
        height: auto !important;
        border-radius: 16px !important;
    }

    .profile-info-widget {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-info-widget .booking-doc-img {
        margin-right: 0 !important;
        margin-bottom: 12px;
    }

    .profile-info-widget .booking-doc-img img {
        width: 80px !important;
        height: 80px !important;
    }

    .hospital-active {
        right: 0 !important;
        top: 60px !important;
    }

    .hospital-det-info {
        align-items: center;
    }

    .hospital-det-info h3 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
        text-align: center;
    }

    .hospital-det-info .d-flex.flex-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hospital-det-info .patient-status {
        font-size: 0.85rem;
    }

    .hospital-det-info p {
        font-size: 0.85rem;
        word-break: break-word;
        text-align: center;
    }

    .hospital-det-info .clinic-details p {
        text-align: center;
    }

    /* Map box on mobile */
    .map-box {
        margin-top: 1rem;
    }

    .map-box iframe {
        height: 200px !important;
        border-radius: 12px !important;
    }

    /* Doctor/Hospital card adjustments */
    .card .card-body {
        padding: 1rem;
    }

    .doctor-widget {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .doc-info-left {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .doctor-img {
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
    }

    .doctor-img img {
        width: 80px;
        height: 80px;
    }

    .doc-info-cont {
        text-align: center;
        padding: 0 !important;
    }

    .doc-info-cont .d-flex.flex-row {
        justify-content: center;
    }

    .doc-info-right {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .doc-info-right .btn,
    .doc-info-right .custom-btn {
        width: 100%;
    }

    .doc-info-right .w-220 {
        width: 100% !important;
    }

    /* Hospital card phone/address - prevent overflow */
    .clinic-details p,
    .doc-info-cont p {
        word-break: break-word;
        font-size: 0.85rem;
    }

    /* Hospital card - type tags wrap */
    .clinic-services {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    /* Doctor profile - top card */
    .doc-info-cont .doc-name {
        font-size: 1.1rem;
    }

    .doc-speciality {
        font-size: 0.85rem;
        margin-bottom: 8px;
    }

    /* Sitting hospitals title row */
    .secondry-title {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    /* DoctorProfile - location list */
    .location-list {
        padding: 10px 0;
    }

    .location-list .row {
        flex-direction: column;
    }

    .location-list .col-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 0.75rem;
    }

    .location-list .col-md-10 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .location-list .col-md-2 .doctor-img {
        width: 60px;
    }

    .location-list .col-md-2 .doctor-img img {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

    .clinic-content {
        padding-left: 0 !important;
    }

    /* Schedule timing grid - stack on mobile */
    .clinic-timing.w-100 {
        flex-direction: column;
    }

    .clinic-timing .w-25 {
        width: 100% !important;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .clinic-timing .w-25 .timings-days {
        min-width: 50px;
        margin-bottom: 0;
    }

    .clinic-timing .w-25 .timings-times {
        font-size: 0.85rem;
    }

    /* Schedule widget - date row */
    .schedule-header .row .col-lg-8,
    .schedule-header .row .col-md-8 {
        padding-left: 0;
        padding-right: 0;
    }

    .schDataTitle {
        font-size: 0.9rem;
    }

    .schedule-date-range {
        margin: 0;
    }

    /* Schedule - day/time slots horizontal scroll */
    .booking-schedule.schedule-widget {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .booking-schedule.schedule-widget .sch-div {
        min-width: 500px;
    }

    .day-slot ul {
        display: flex;
    }

    .day-slot li {
        flex: 1;
        min-width: 90px;
    }

    .time-slot ul {
        display: flex;
    }

    .time-slot li {
        flex: 1;
        min-width: 90px;
    }

    /* Date input */
    .div_date .data-input {
        font-size: 0.85rem;
    }

    /* --- Mobile Schedule View --- */
    .schedule-desktop {
        display: none !important;
    }

    .schedule-mobile {
        display: block !important;
    }

    .schedule-mobile-header {
        padding: 12px 0;
    }

    .schedule-mobile-header .schDataTitle {
        font-weight: 600;
        font-size: 0.95rem;
        color: #2563EB;
    }

    .schedule-mobile-day {
        border: 1px solid #E2E8F0;
        border-radius: 12px;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .schedule-mobile-day-today {
        border-color: #2563EB;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    }

    .schedule-mobile-day-past {
        opacity: 0.5;
    }

    .schedule-mobile-day-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        background: linear-gradient(180deg, #F0F6FF 0%, #FFFFFF 100%);
        border-bottom: 1px solid #E2E8F0;
    }

    .schedule-mobile-day-name {
        font-weight: 700;
        font-size: 0.95rem;
        color: #0F172A;
        min-width: 36px;
    }

    .schedule-mobile-day-date {
        font-size: 0.9rem;
        color: #64748B;
    }

    .schedule-mobile-today-badge {
        background-color: #2563EB;
        color: #fff;
        font-size: 0.7rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 10px;
        margin-left: auto;
    }

    .schedule-mobile-slots {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
    }

    .schedule-mobile-slot {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #2563EB;
        color: #2563EB;
        border-radius: 10px;
        padding: 8px 14px;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
        min-width: 120px;
    }

    .schedule-mobile-slot:hover,
    .schedule-mobile-slot:active {
        background-color: #2563EB;
        color: #fff;
        text-decoration: none;
    }

    .schedule-mobile-slot.selected {
        background-color: #2563EB;
        color: #fff;
    }

    .schedule-mobile-slot-oncall {
        border-color: #94A3B8;
        color: #64748B;
        cursor: default;
    }

    .schedule-mobile-slot-oncall:hover,
    .schedule-mobile-slot-oncall:active {
        background-color: transparent;
        color: #64748B;
    }

    .schedule-mobile-slot-label {
        font-size: 0.7rem;
        font-weight: 400;
        margin-top: 2px;
        opacity: 0.8;
    }

    .schedule-mobile-no-slot {
        color: #94A3B8;
        font-size: 0.85rem;
        padding: 4px 0;
        font-style: italic;
    }

    .schedule-mobile-footer {
        padding: 8px 0;
        text-align: center;
    }

    .schedule-mobile-footer .clinic-direction {
        font-size: 0.8rem;
    }

    /* Booking form modal */
    #myModalBookingForm .modal-dialog {
        max-width: 100% !important;
        margin: 0.5rem;
    }

    #myModalBookingForm .modal-content {
        border-radius: 12px !important;
    }

    #myModalBookingForm .modal-header {
        padding: 15px 15px 5px 15px !important;
    }

    #myModalBookingForm .modal-header .sub-title {
        font-size: 0.75rem;
    }

    #myModalBookingForm .modal-header .title {
        font-size: 1rem;
    }

    /* Booking form inner content */
    .booking-form-wrapper {
        padding: 15px !important;
    }

    /* Booking form - stack columns */
    .booking-card {
        margin-top: 1.5rem;
    }

    /* Booking form button full width */
    .submit-section .btn {
        width: 100% !important;
    }

    /* Login modal inside booking */
    .modal.right_modal .modal-dialog,
    .modal.left_modal .modal-dialog {
        width: 90% !important;
    }

    /* Load more button */
    .load-more {
        padding: 1rem 0;
    }

    /* Breadcrumb */
    .breadcrumb-title {
        font-size: 1rem;
    }

    .page-breadcrumb .breadcrumb {
        font-size: 0.85rem;
    }
}

/* --- Small phones (max-width: 479px) --- */
@media only screen and (max-width: 479px) {

    body {
        font-size: 0.75rem;
    }

    h1, .h1 {
        font-size: 1.25rem;
    }

    h2, .h2 {
        font-size: 1.1rem;
    }

    h3, .h3 {
        font-size: 1rem;
    }

    h4, .h4 {
        font-size: 0.85rem;
    }

    p, span, a, label, li {
        font-size: 0.75rem;
    }

    .section-hospital-search {
        padding: 75px 0 10px 0;
    }

    .banner-header h1 {
        font-size: 1.1rem;
    }

    .banner-header p {
        font-size: 0.75rem;
        margin-top: 0.25rem !important;
    }

    /* Calendar pill even more compact */
    .search-filter .filter-widget .datetimepicker,
    .filter-widget .form-control.datetimepicker,
    #div-ddate .p-date-txt {
        font-size: 0.7rem !important;
        padding: 5px 10px 5px 30px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

    .filter-chip-label {
        font-size: 0.7rem !important;
        padding: 4px 12px !important;
    }

    .filter-chips-mobile h4,
    .filter-widget h4 {
        font-size: 0.7rem !important;
    }

    /* Daterangepicker - smaller day cells on tiny screens */
    .daterangepicker .calendar-table td {
        height: 36px !important;
        line-height: 36px !important;
        font-size: 0.8rem !important;
    }

    .daterangepicker .calendar-table th {
        height: 36px !important;
        line-height: 36px !important;
    }

    .daterangepicker th.month {
        font-size: 0.9rem !important;
    }

    .content .px-5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .doctor-img img {
        width: 70px;
        height: 70px;
    }

    .doc-info-cont .doc-name {
        font-size: 1rem;
    }

    /* Schedule widget - narrower columns */
    .booking-schedule.schedule-widget .sch-div {
        min-width: 450px;
    }

    .day-slot li {
        min-width: 80px;
    }

    .time-slot li {
        min-width: 80px;
    }

    /* Booking form adjustments */
    .form-input {
        font-size: 14px !important;
        padding: 8px 15px !important;
        border-radius: 12px !important;
    }

    .booking-doc-info .booking-doc-img img {
        width: 60px;
        height: 60px;
    }

    /* Booking summary */
    .booking-summary .booking-date li {
        font-size: 0.8rem;
    }

    .booking-summary .booking-date {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Location list - hospital name */
    .clinic-name {
        font-size: 1rem;
    }

    /* Sitting hospitals title */
    .secondry-title {
        font-size: 1.1rem;
        line-height: 1.3rem;
    }

    /* Patient page - appointment list */
    .p-infotitle {
        font-size: 0.85rem !important;
    }

    .p-counter {
        font-size: 0.8rem !important;
    }

    .p-info, .p-infoeng {
        font-size: 0.75rem !important;
    }

    /* BookingSuccess - smaller text */
    .bold-b-success-txt {
        font-size: 1.1rem !important;
    }

    .h3-txt {
        font-size: 1.25rem !important;
    }

    .p-infosuccess {
        font-size: 0.95rem !important;
    }

    .p-infos {
        font-size: 0.8rem;
    }

    /* HospitalProfile card - smaller image */
    .profile-info-widget .booking-doc-img img {
        width: 65px !important;
        height: 65px !important;
    }

    .hospital-active {
        top: 48px !important;
        width: 14px !important;
        height: 14px !important;
    }

    .hospital-det-info h3 {
        font-size: 1rem !important;
    }

    /* Modal */
    .modal.right_modal .modal-dialog,
    .modal.left_modal .modal-dialog {
        width: 100% !important;
    }
}