/* ================================================
   ULTRA COMPACT MOBILE VIEW FOR SEARCH LISTING
   Optimized for small mobile screens
   ================================================ */

@media (max-width: 576px) {

  /* GLOBAL RESETS */
  body {
    font-size: 13px !important;
    overflow-x: hidden !important;
  }

  html {
    overflow-x: hidden !important;
  }

  *:not(.insurance-dropdown-menu):not(.insurance-dropdown-container) {
    max-width: 100vw !important;
  }

  .section-bottom .container {
    padding: 8px !important;
    max-width: 100% !important;
  }

  /* Fix horizontal scroll */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .col-xxl-3, .col-xxl-4, .col-xxl-5,
  .col-xl-3, .col-xl-4, .col-xl-5,
  .col-lg-3, .col-lg-6, .col-lg-12,
  .col-md-3, .col-md-12,
  .col-sm-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* DOCTOR CARD - ULTRA COMPACT */
  .dr-list-item-flex {
    margin-bottom: 10px !important;
  }

  .dr-pt-listing {
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }

  .dr-pt-step1 {
    padding: 10px !important;
  }

  .dr-pt-set-right {
    padding-bottom: 10px !important;
  }

  /* DOCTOR PROFILE - COMPACT */
  .drproifle.listing-pro {
    gap: 10px !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }

  .profilDr img {
    max-width: 52px !important;
    min-width: 52px !important;
    max-height: 52px !important;
    min-height: 52px !important;
    border-radius: 8px !important;
  }

  /* Mobile star rating positioning */
  .mobile-star-rating {
    margin-top: 0 !important;
  }

  /* DOCTOR NAME - SMALLER */
  .doctor-name {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
  }

  .doctor-specialty {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  /* STAR RATING - MOVE TO HEADER & MAKE SMALLER */
  .doctor-details.doctro-det.lis-de-fle {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .doctor-details.doctro-det > div:first-child {
    order: 10 !important;
    margin-top: 4px !important;
  }

  /* Move stars under doctor name in mobile */
  .drproifle.listing-pro .doctor-details.doctro-det.lis-de-fle > div:first-child {
    order: 1 !important;
    margin-top: 0 !important;
  }

  /* STAR RATING - SMALLER */
  .doctor-details.doctro-det > div:first-child {
    gap: 4px !important;
  }

  .doctor-details.doctro-det > div:first-child svg {
    width: 12px !important;
    height: 12px !important;
    margin-right: 1px !important;
  }

  .doctor-details.doctro-det > div:first-child > div {
    margin-right: 4px !important;
  }

  .doctor-details.doctro-det > div:first-child span {
    font-size: 11px !important;
    font-weight: 400 !important;
  }

  /* Position stars directly under doctor name */
  .drproifle.listing-pro .doctor-details.doctro-det.lis-de-fle {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Show mobile star rating, hide desktop star rating */
  .mobile-star-rating {
    display: flex !important;
  }

  .doctor-details.doctro-det > div:first-child {
    display: none !important;
  }

  /* INFO SECTION - COMPACT */
  .doctor-details.doctro-det {
    gap: 8px !important;
  }

  /* LANGUAGE SECTION - COMPACT */
  .dr-language-speak {
    gap: 6px !important;
    margin: 0 !important;
  }

  .dr-language-speak p {
    font-size: 11px !important;
  }

  .language-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
  }

  .language-badge img {
    width: 12px !important;
    height: 9px !important;
  }

  /* ADDRESS - COMPACT */
  .pro-address {
    font-size: 11px !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .pro-address img {
    width: 14px !important;
    height: 14px !important;
  }

  .pro-address span {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  /* BUTTON - COMPACT */
  .appointment-btn-margin {
    margin: 10px 0 !important;
  }

  .bookappoiment-btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  /* CALENDAR SECTION - COMPACT */
  .avail-cal-wrapper {
    padding: 8px !important;
    max-width: 100% !important;
  }

  .avail-cal-main-layout {
    gap: 6px !important;
  }

  .avail-cal-day-column {
    min-width: 70px !important;
    flex-shrink: 0 !important;
  }

  .avail-cal-nav-button button {
    padding: 4px !important;
    min-width: 24px !important;
  }

  .avail-cal-nav-button svg {
    width: 14px !important;
    height: 14px !important;
  }

  .avail-cal-date-new {
    padding: 8px 6px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
  }

  .avail-cal-weekday {
    font-size: 10px !important;
  }

  .avail-cal-date-month {
    font-size: 12px !important;
  }

  .avail-cal-slot-button {
    padding: 7px 10px !important;
    font-size: 11px !important;
    margin-bottom: 5px !important;
    border-radius: 6px !important;
  }

  .avail-cal-slot-empty span {
    font-size: 10px !important;
  }

  .avail-cal-footer {
    padding: 8px 0 0 !important;
    margin-top: 6px !important;
  }

  .avail-cal-showmore {
    font-size: 12px !important;
    padding: 8px 16px !important;
  }

  /* MAP - COMPACT */
  .location-maps {
    width: 100% !important;
    max-width: 100% !important;
  }

  .location-maps iframe {
    height: 180px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* FILTER CHIPS - COMPACT */
  .bg-filter {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin-top: 0 !important;
  }

  .bg-filter .container {
    max-width: 100% !important;
    padding: 0 10px !important;
  }

  .select-filter {
    padding: 6px 10px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  .seleFilter1 {
    font-size: 12px !important;
  }

  .seleFilter2 {
    max-width: calc(100vw - 100px) !important;
  }

  .seleFilter2 span {
    padding: 5px 10px !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    pointer-events: auto !important;
  }

  /* INSURANCE DROPDOWN - COMPACT */
  .insurance-dropdown-container {
    pointer-events: auto !important;
    z-index: 10000 !important;
    position: relative !important;
  }

  .insurance-dropdown-container span {
    padding: 5px 10px !important;
    font-size: 10px !important;
    gap: 3px !important;
    pointer-events: auto !important;
  }

  .insurance-dropdown-container svg {
    width: 8px !important;
    height: 8px !important;
  }

  .insurance-dropdown-menu {
    position: absolute !important;
    z-index: 999999 !important;
    max-width: none !important;
    width: auto !important;
    pointer-events: auto !important;
  }

  .insurance-dropdown-menu > div {
    padding: 8px 10px !important;
    font-size: 10px !important;
    pointer-events: auto !important;
  }

  /* NAVBAR FIX */
  .navbar {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 8px 0 !important;
    min-height: auto !important;
  }

  .navbar .container-fluid {
    padding: 0 12px !important;
  }

  .navbar .logo img {
    max-width: 100px !important;
    height: auto !important;
  }

  .page-header {
    padding: 6px 0 !important;
  }

  /* SECTION FIX */
  .section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .section .container {
    max-width: 100% !important;
    padding: 0 10px !important;
  }
}

/* EXTRA SMALL DEVICES (< 375px) */
@media (max-width: 374px) {

  .section-bottom .container {
    padding: 6px !important;
  }

  .dr-pt-step1 {
    padding: 8px !important;
  }

  .profilDr img {
    max-width: 48px !important;
    min-width: 48px !important;
    max-height: 48px !important;
    min-height: 48px !important;
  }

  .doctor-name {
    font-size: 13px !important;
  }

  .doctor-specialty {
    font-size: 10px !important;
  }

  .pro-address {
    font-size: 10px !important;
  }

  .pro-address span {
    font-size: 10px !important;
  }

  .language-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }

  .bookappoiment-btn {
    padding: 9px 14px !important;
    font-size: 12px !important;
  }

  .avail-cal-day-column {
    min-width: 70px !important;
  }

  .avail-cal-slot-button {
    padding: 6px 8px !important;
    font-size: 10px !important;
  }
}