/* ================================================
   DOCTOR SEARCH LISTING - MOBILE OPTIMIZATIONS
   Modern, clean design inspired by Doctolib
   ================================================ */

/* Mobile-only styles - applies to screens 576px and below */
@media (max-width: 576px) {

  /* ==================== SEARCH SECTION ==================== */
  .bg-filter {
    background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%) !important;
    padding: 10px 0 8px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  /* Hide search card on mobile - user is already on results page */
  .modern-listing-search-card {
    display: none !important;
  }

  .filter-dr-listing {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ==================== FILTER CHIPS ==================== */
  .select-filter {
    padding: 10px 12px !important;
    margin: 10px 0 !important;
    background: white !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .select-filter::-webkit-scrollbar {
    display: none !important;
  }

  .seleFilter1 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-right: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .seleFilter2 {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  .seleFilter2 span {
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    border-radius: 18px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: auto !important;
  }

  /* Insurance Dropdown Container */
  .insurance-dropdown-container {
    pointer-events: auto !important;
    z-index: 10000 !important;
    position: relative !important;
  }

  .seleFilter2 span:active {
    background: #e2e8f0 !important;
    transform: scale(0.96) !important;
    border-color: #cbd5e1 !important;
  }

  /* ==================== RESULTS CONTAINER ==================== */
  .section-bottom {
    padding: 0 !important;
    background: #fafbfc !important;
    min-height: 100vh !important;
  }

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

  /* ==================== DOCTOR CARD ==================== */
  .dr-list-item-flex {
    margin-bottom: 16px !important;
  }

  .dr-pt-listing {
    border: none !important;
    border-radius: 14px !important;
    background: white !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease !important;
  }

  .dr-pt-listing:active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  }

  /* Card sections */
  .dr-pt-step1 {
    padding: 16px !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  .dr-pt-set-right {
    border-right: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 16px !important;
  }

  /* ==================== DOCTOR HEADER ==================== */
  .drproifle.listing-pro {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
  }

  .profilDr.lis-de-fle {
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .profilDr img {
    max-width: 68px !important;
    min-width: 68px !important;
    max-height: 68px !important;
    min-height: 68px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    border: 2px solid #f1f5f9 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  }

  .doctor-details.doctro-det.lis-de-fle {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Doctor name */
  .doctor-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    display: block !important;
    color: #0f172a !important;
    margin-bottom: 2px !important;
    word-wrap: break-word !important;
  }

  .doctor-specialty {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
  }

  /* ==================== DOCTOR INFO SECTION ==================== */
  .doctor-details.doctro-det {
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Star rating section */
  .doctor-details.doctro-det > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Language badges */
  .dr-language-speak {
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 12px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 4px 0 !important;
  }

  .dr-language-speak p {
    font-size: 12px !important;
    margin: 0 !important;
    font-weight: 500 !important;
    color: #64748b !important;
  }

  .language-badge {
    font-size: 12px !important;
    padding: 5px 12px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    gap: 6px !important;
  }

  .language-badge img {
    width: 16px !important;
    height: 12px !important;
    margin: 0 !important;
    object-fit: cover !important;
    border-radius: 2px !important;
  }

  /* Address & Info */
  .pro-address {
    font-size: 13px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
  }

  .pro-address img {
    width: 18px !important;
    height: 18px !important;
    margin-top: 1px !important;
    flex-shrink: 0 !important;
    opacity: 0.5 !important;
  }

  .pro-address span {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    word-break: break-word !important;
  }

  /* ==================== BOOK BUTTON ==================== */
  .bookappinment {
    margin: 0 !important;
    padding: 0 !important;
  }

  .appointment-btn-margin {
    margin: 16px 0 !important;
  }

  .bookappoiment-btn {
    padding: 13px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #2E7A4E !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(92, 184, 122, 0.2) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .bookappoiment-btn:active {
    transform: scale(0.98) !important;
    background: #256642 !important;
    box-shadow: 0 1px 2px rgba(92, 184, 122, 0.3) !important;
  }

  /* ==================== AVAILABILITY CALENDAR ==================== */
  .avail-cal-wrapper {
    margin: 0 !important;
    border-radius: 0 !important;
    background: #fafbfc !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 14px !important;
  }

  .avail-cal-main-layout {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    scrollbar-width: thin !important;
    display: flex !important;
    gap: 10px !important;
  }

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

  /* Calendar date header */
  .avail-cal-date-new {
    padding: 10px !important;
    border-radius: 10px !important;
    background: white !important;
    border: 1.5px solid #e2e8f0 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
  }

  .avail-cal-date-new:active {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
  }

  .avail-cal-weekday {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
  }

  .avail-cal-date-month {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-top: 4px !important;
  }

  /* Time slot buttons */
  .avail-cal-slot-button {
    padding: 9px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    background: white !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #2E7A4E !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .avail-cal-slot-button:active {
    background: #f1f5f9 !important;
    transform: scale(0.96) !important;
    border-color: #cbd5e1 !important;
  }

  .avail-cal-slot-empty {
    padding: 9px 12px !important;
    text-align: center !important;
  }

  .avail-cal-slot-empty span {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-style: italic !important;
  }

  /* Calendar footer */
  .avail-cal-footer {
    padding: 12px 0 0 !important;
    margin-top: 8px !important;
    border-top: 1px solid #f1f5f9 !important;
    text-align: center !important;
  }

  .avail-cal-showmore {
    font-size: 13px !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    background: white !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .avail-cal-showmore:active {
    background: #f8fafc !important;
    transform: scale(0.98) !important;
  }

  /* ==================== MAP SECTION ==================== */
  .location-maps {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    border-top: 1px solid #f1f5f9 !important;
    background: #f8fafc !important;
  }

  .location-maps iframe {
    height: 220px !important;
    border-radius: 0 !important;
    width: 100% !important;
    border: none !important;
  }

  /* ==================== LOADING STATES ==================== */
  .dr-list-item-flex .skeleton {
    background: linear-gradient(
      90deg,
      #f1f5f9 0%,
      #e2e8f0 50%,
      #f1f5f9 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-loading 1.5s ease-in-out infinite !important;
  }

  @keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ==================== UTILITY CLASSES ==================== */
  .no-scroll {
    overflow: hidden !important;
  }

  .smooth-scroll {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ==================== EMPTY STATE MOBILE ==================== */
  .d-flex.flex-column.align-items-center.justify-content-center.text-center.p-4 {
    padding: 40px 20px !important;
    margin: 20px 0 !important;
  }

  .d-flex.flex-column.align-items-center.justify-content-center.text-center.p-4 h4 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }

  .d-flex.flex-column.align-items-center.justify-content-center.text-center.p-4 p {
    font-size: 14px !important;
    color: #64748b !important;
  }

  /* ==================== PERFORMANCE OPTIMIZATIONS ==================== */
  * {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Smooth transitions */
  .dr-pt-listing,
  .bookappoiment-btn,
  .avail-cal-slot-button,
  .seleFilter2 span {
    will-change: transform !important;
  }

  /* Reduce motion for accessibility */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ================================================
   TABLET OPTIMIZATIONS (577px - 768px)
   ================================================ */
@media (min-width: 577px) and (max-width: 768px) {
  .dr-pt-listing {
    border-radius: 12px !important;
  }

  .select-filter {
    padding: 14px 16px !important;
  }

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

  .bookappoiment-btn {
    padding: 14px 28px !important;
    font-size: 15px !important;
  }
}