/* =======================================================
   Affilia — Services listing mobile overrides (<= 767px)
======================================================= */

.services-search-sort { display: flex; min-width: 0; align-items: stretch; gap: 0.65rem; }
.featured-star-overlay { position: absolute; top: 0.45rem; left: 0.55rem; z-index: 3; display: grid; width: 2.15rem; height: 2.15rem; place-items: center; color: #ffd700; font-size: 1.35rem; line-height: 1; filter: drop-shadow(0 0 4px rgba(255,215,70,0.9)) drop-shadow(0 4px 8px rgba(234,179,8,0.45)); }
.featured-star-overlay i { position: relative; z-index: 1; color: gold;}
.featured-star-overlay::before { content: ''; position: absolute; inset: 0.22rem; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255,243,163,0.32), rgba(234,179,8,0.08) 58%, transparent 72%); }
.featured-star-overlay i { color: #ffd700 !important; text-shadow: 0 1px 0 #fff3a3, 0 0 7px rgba(255,215,70,0.95); animation: featured-star-rotate 5s linear infinite; transform-origin: center; }
@keyframes featured-star-rotate {
  0%, 70% { transform: rotate(0deg); }
  85%, 100% { transform: rotate(360deg); }
}
.services-location-filter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .45rem .8rem; padding: .7rem .85rem; border: 1px solid rgba(99,102,241,.2); border-radius: var(--r-md); background: rgba(99,102,241,.06); }
.services-location-filter[hidden] { display: none; }
.services-location-label { display: inline-flex; align-items: center; gap: .45rem; color: var(--c-text-2); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.services-location-label i { color: var(--c-cyan); }
.services-location-label small { color: var(--c-text-3); font-weight: 500; }
.services-location-filter .form-input { min-width: 0; }
.services-location-hint { grid-column: 2; color: var(--c-text-3); font-size: .72rem; margin-top: -.35rem; }
.services-search-field { min-width: 0; flex: 1 1 auto; }
.services-search-field .form-input { height: 100%; min-height: 44px; padding: 0.65rem 0.8rem 0.65rem 2.35rem; text-indent: 0; }
.services-search-icon { position: absolute; top: 50%; left: 0.85rem; color: var(--c-text-3); font-size: 0.9rem; pointer-events: none; transform: translateY(-50%); }
.services-sort-control { position: relative; z-index: 1000; flex: 0 0 92px; width: 92px; isolation: isolate; animation: services-sort-control-pulse 3s ease-in-out infinite; transform-origin: center; }
.services-sort-trigger { display: inline-flex; width: 92px !important; min-width: 92px; height: 44px; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 0.65rem !important; border: 1px solid rgba(129,140,248,0.38); border-radius: var(--r-md); background: linear-gradient(145deg, rgba(99,102,241,0.16), rgba(139,92,246,0.1)); color: #c4b5fd; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.services-sort-trigger-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; }
.services-sort-trigger:hover, .services-sort-trigger[aria-expanded="true"] { transform: translateY(-1px); border-color: rgba(129,140,248,0.78); background: rgba(99,102,241,0.22); box-shadow: 0 5px 16px rgba(79,70,229,0.2); }
.services-sort-trigger:focus-visible, .services-sort-option:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.services-sort-current-icon { font-size: 0.95rem; }
.services-sort-chevron { color: #a5b4fc; font-size: 0.52rem; }
.services-sort-menu { position: absolute; z-index: 1001; top: calc(100% + 0.45rem); right: 0; display: grid; width: 14.5rem; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; padding: 0.55rem; border: 1px solid rgba(129,140,248,0.3); border-radius: 0.9rem; background: rgba(10,14,26,0.99); box-shadow: 0 22px 60px rgba(0,0,0,0.62), 0 0 32px rgba(99,102,241,0.2); backdrop-filter: blur(18px); animation: services-sort-pop 140ms ease-out; }
.services-sort-menu[hidden] { display: none !important; }
.services-sort-option { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; justify-self: center; border: 1px solid transparent; border-radius: 0.65rem; background: rgba(255,255,255,0.035); color: var(--c-text-2); cursor: pointer; transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.services-sort-option:hover { transform: translateY(-1px); border-color: rgba(129,140,248,0.4); background: rgba(99,102,241,0.14); color: #e0e7ff; }
.services-sort-option.is-selected { border-color: rgba(129,140,248,0.62); background: rgba(99,102,241,0.24); color: #c4b5fd; box-shadow: inset 0 0 0 1px rgba(129,140,248,0.12); }
.services-sort-option i { font-size: 0.95rem; }
.services-sort-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }
@keyframes services-sort-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes services-sort-control-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .services-sort-control, .services-sort-trigger, .services-sort-option { animation: none; transition: none; } .services-sort-menu { animation: none; } .featured-star-overlay i { animation: none; } }
@media (max-width: 640px) { .services-location-filter { grid-template-columns: 1fr; } .services-location-hint { grid-column: 1; margin-top: -.15rem; } .services-location-label { justify-content: space-between; } }

@media (max-width: 767px) {
  .hero-bg.grid-bg.py-10 .heading-xl { font-size: 1.25rem !important; line-height: 1.15; }
  .hero-bg.grid-bg.py-10 p.text-lg { font-size: 0.703125rem !important; line-height: 1.4; }
  .services-stats-grid > div > div:first-child { font-size: 0.9375rem !important; line-height: 1.2; white-space: nowrap; }
  .services-stats-grid > div > div:last-child { font-size: 0.546875rem !important; line-height: 1.3; }

  #servicesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem;
  }

  .service-card { min-width: 0; }
  .service-card-img { height: clamp(5rem, 25vw, 8rem); }
  .service-card-body { min-width: 0; padding: 0.5rem; }
  .service-card-body .badge { max-width: 100%; overflow: hidden; font-size: 0.85rem !important; text-overflow: ellipsis; white-space: nowrap; }
  .service-card-body h3 { margin-bottom: 0.28rem; overflow: hidden; font-size: 0.9rem !important; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .service-card-body p { display: block; min-width: 0; flex: initial; margin-bottom: 0.3rem !important; overflow: hidden; font-size: 0.85rem !important; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .service-price { top: 0.45rem; right: 0.45rem; padding: 0.2rem 0.44rem; font-size: 0.8rem; }
  .service-card-body .btn-sm { min-width: 0; min-height: 1.8rem; padding: 0.28rem 0.2rem; font-size: 0.8rem; }
  .service-card [style*="font-size:0.62rem"] { font-size: 0.62rem !important; }
  .service-card [style*="font-size: 0.62rem"] { font-size: 0.62rem !important; }
  .service-card [style*="font-size:0.6rem"] { font-size: 0.6rem !important; }
  .service-card [style*="font-size: 0.6rem"] { font-size: 0.6rem !important; }
  .service-card [style*="font-size:0.68rem"] { font-size: 0.68rem !important; }
  .service-card [style*="font-size: 0.68rem"] { font-size: 0.68rem !important; }
  .ev-card-countdown { min-width: 0; gap: 0.22rem; padding: 0.24rem 0.35rem; font-size: 0.7rem; }

  .card { padding: 1rem; }
  .form-input { padding: 0.6rem 0.8rem; }
  .services-search-sort { gap: 0.4rem; }
  .services-search-field .form-input { min-height: 44px; padding-left: 2.1rem; font-size: 0.82rem; }
  .services-search-icon { left: 0.7rem; font-size: 0.82rem; }
  .services-sort-control { flex-basis: 92px; width: 92px; }
  .services-sort-trigger { width: 92px; height: 44px; }
  .services-sort-menu { width: 14.5rem; }
}

@media (max-width: 500px) {
  .service-card-body p { font-size: 0.9rem !important; }
  .service-price { font-size: 0.74rem; }
  #servicesGrid { gap: 0.45rem; }
  .service-card-body { padding: 0.45rem; }
}

@media (max-width: 360px) {
  .services-sort-control { flex-basis: 92px; width: 92px; }
  .services-sort-trigger { width: 92px; height: 44px; }
  .services-sort-menu { width: 14.5rem; }
  .services-search-field .form-input { padding-right: 0.5rem; font-size: 0.76rem; }
  .services-sort-control select { font-size: 0.66rem; }
}