/* ======================================================================
   SERVICE INFO PLATFORM — DESIGN SYSTEM (LIGHT THEME, BANGLA-FIRST)
   ====================================================================== */

/* ---------- Kalpurush: project-wide font (Bengali Unicode + Latin) ----------
   The Unicode Kalpurush face carries both Bengali (U+0980–U+09FF) and Latin
   glyphs, so the browser picks the correct glyph per codepoint automatically —
   Bengali Unicode text and English/ASCII text both render in Kalpurush.
   Kalpurush ships only a single regular weight, so the face is declared as
   `font-weight: normal`. The browser then SYNTHESIZES bold for 600/700 text,
   preserving the existing boldness hierarchy (titles, buttons, category names).
   "Kalpurush ANSI" is the legacy Bijoy/ANSI face (ASCII codepoints → Bengali
   glyphs); it is registered only for legacy-encoded content, NOT the default. */
@font-face {
  font-family: 'Kalpurush';
  src: url("../fonts/kalpurush.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kalpurush ANSI';
  src: url("../fonts/kalpurush-ansi.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- Mobile: prevent horizontal scroll and layout flow ---------- */
html {
  overflow-x: hidden;
  max-width: 100%;
}
.app-viewport {
  overflow-x: hidden;
  max-width: 100%;
  min-width: 0;
}
.app-content {
  min-width: 0;
  max-width: 100%;
}
/* Contain images and media */
img, video {
  max-width: 100%;
  height: auto;
}
img { display: block; }
iframe, embed, object {
  max-width: 100%;
}
/* Long text/URLs wrap instead of overflowing */
pre, code, .app-body, .app-label, .app-card-title, .app-service-name, .app-service-meta,
.app-notice-text, .app-footer-strip, .contact-card .form-control, .noti-content, .noti-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
/* Bootstrap containers inside app: no overflow on small screens */
.app-viewport .container {
  max-width: 100%;
  padding-left: var(--space-page);
  padding-right: var(--space-page);
}
@media (max-width: 767px) {
  .app-viewport .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* Tables: scroll wrapper or shrink on mobile */
.app-viewport table {
  max-width: 100%;
  table-layout: fixed;
}
.app-viewport .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

:root {
  /* Background & surface */
  --app-bg: #f4f6f9;
  --app-surface: #ffffff;
  --app-surface-elevated: #ffffff;

  /* Primary (teal scale) */
  --primary-50: #e6f7f7;
  --primary-100: #b3eeec;
  --primary-500: #0EB7B2;
  --primary-600: #0A9A96;
  --primary-rgb: 14,183,178;

  /* Text */
  --text-primary: #0f172a;
  --text-secondary: #64748b;

  /* Border */
  --border: #e2e8f0;

  /* Shadow */
  --shadow-soft: 0 10px 30px rgba(2, 6, 23, 0.06);
  --shadow-header: 0 2px 12px rgba(2, 6, 23, 0.06);

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* Spacing (tighter for less vertical/horizontal whitespace) */
  --space-page: 16px;
  --space-page-lg: 20px;
  --space-section: 20px;
  --space-card: 12px;
  --space-card-lg: 16px;

  /* Header */
  --header-height: 68px;
  --header-bg: #ffffff;
  --header-border: 1px solid var(--border);

  /* Bottom nav */
  --nav-height: 76px;
  --nav-margin: 10px;
  --bar-margin: 4px; /* top spacing for header + viewport padding */
  --side-margin: var(--bar-margin); /* horizontal spacing for header, nav, content */
  --nav-radius: 24px;
  --nav-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Motion */
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-slow: 220ms;
}

/* Typography — Bangla-first */
body {
  font-family: "Kalpurush", "Noto Sans Bengali", "Noto Sans", system-ui, sans-serif;
  background: var(--app-bg);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

.app-meta { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.app-label { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.app-body { font-size: 16px; color: var(--text-primary); line-height: 1.55; }
.app-card-title { font-size: 18px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.app-section-title { font-size: 20px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
@media (min-width: 480px) {
  .app-section-title { font-size: 22px; }
}

/* ========== APP LAYOUT ========== */
.app-viewport {
  min-height: 100vh;
  position: relative;
  /* WebViews sometimes apply non-zero safe-area insets at the top.
     Requirement: keep our designed 8px spacing (var(--bar-margin)) but avoid WebView-only extra gap. */
  padding-top: calc(var(--header-height) + var(--bar-margin) * 2);
  padding-bottom: calc(var(--nav-height) + var(--nav-margin) * 2 + 56px + var(--safe-bottom));
}
.app-content {
  padding-left: var(--space-page);
  padding-right: var(--space-page);
}
@media (min-width: 480px) {
  .app-content { padding-left: var(--space-page-lg); padding-right: var(--space-page-lg); }
}
@media (min-width: 768px) {
  .app-content { padding-left: var(--space-page); padding-right: var(--space-page); }
}
@media (max-width: 767px) {
  .app-content { padding-left: 10px; padding-right: 10px; }
}

/* ========== APP HEADER (match bottom nav: same width + same left/right spacing) ========== */
.app-header {
  height: var(--header-height);
  min-height: var(--header-height);
  background: var(--header-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  position: fixed;
  /* Keep designed 8px spacing, but ignore safe-area top to avoid WebView extra gap. */
  top: var(--bar-margin);
  left: var(--side-margin);
  right: var(--side-margin);
  width: calc(100% - var(--side-margin) * 2);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  z-index: 1000;
  border-radius: var(--nav-radius);
  box-shadow: var(--nav-shadow);
  border: 1px solid var(--border);
  transition: box-shadow var(--motion-normal) ease;
}
.app-header.scrolled { box-shadow: var(--shadow-header); }

.app-header-left,
.app-header-right {
  display: flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}
.app-header-left { justify-content: flex-start; }
.app-header-right { justify-content: flex-end; }

.app-header-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--motion-fast) ease, background var(--motion-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.app-header-btn:active { transform: scale(0.96); }
.app-header-btn:hover { background: var(--app-bg); }

.app-header-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.app-header-title img { height: 40px; max-width: 140px; object-fit: contain; }

.notification-wrap { position: relative; }
.notification-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--header-bg);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.1); }
}

/* ========== FLOATING BOTTOM NAV ========== */
.app-bottom-nav-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 var(--side-margin) calc(var(--nav-margin) + var(--safe-bottom));
  z-index: 1000;
  pointer-events: none;
}
.app-bottom-nav {
  pointer-events: auto;
  height: var(--nav-height);
  max-width: 380px;
  margin: 0 auto;
  background: var(--app-surface);
  border-radius: var(--nav-radius);
  box-shadow: var(--nav-shadow);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
}

.app-nav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  transition: color var(--motion-fast) ease, transform var(--motion-fast) ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 56px;
}
.app-nav-item i, .app-nav-item svg { font-size: 22px; }
.app-nav-item:active { transform: scale(0.96); }
.app-nav-item.active { color: var(--primary-500); }
.app-nav-item.active .app-nav-dot { opacity: 1; }
.app-nav-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--primary-500);
  opacity: 0;
  transition: opacity var(--motion-fast) ease;
}

.app-nav-center-wrap {
  position: relative;
  flex: 0 0 auto;
  margin-top: -2px;
}
.app-nav-center-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    animation: none;
}

.app-nav-center-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    border-radius: 50%;
    transition: all .25s ease;
    filter: drop-shadow(0 0 8px rgba(34,197,94,.65));
}

.app-nav-center-btn:hover .app-nav-center-icon {
    filter: drop-shadow(0 0 12px rgba(34,197,94,.9));
}

.app-nav-center-btn:active .app-nav-center-icon {
    transform: scale(0.95);
    filter: drop-shadow(0 0 18px rgba(22,163,74,1));
}

.app-nav-center-text {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    transition: color .25s ease;
}

.app-nav-center-btn:active .app-nav-center-text {
    color: #16a34a;
}
.app-nav-center-btn i, .app-nav-center-btn svg { font-size: 24px; }
.app-nav-center-btn:active { transform: scale(0.92); }
@keyframes nav-center-idle {
  0%, 100% { box-shadow: 0 4px 16px rgba(14, 183, 178, 0.4); }
  50% { box-shadow: 0 6px 20px rgba(14, 183, 178, 0.35); }
}

/* Footer copyright strip above nav */
/* Footer copyright: floating pill above bottom nav (matches nav style), centered */
.app-footer-strip {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--nav-margin) * 2 + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--side-margin) * 2);
  max-width: 480px;
  padding: 10px 16px;
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
  z-index: 999;
  background: var(--app-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.app-footer-strip a {
  color: var(--primary-500);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.app-footer-strip a:hover { color: var(--primary-600); }
.app-footer-strip .app-footer-sep {
  color: var(--border);
  font-weight: 300;
  user-select: none;
}

/* ========== HERO BANNER ========== */
.app-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  margin: 0 calc(-1 * var(--space-page) + 10px);
  margin-bottom: var(--space-section);
}
.app-hero img { width: 100%; height: 160px; object-fit: cover; display: block; }
.app-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-card);
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
}

/* ========== SEARCH FIELD ========== */
.app-search-wrap {
  position: sticky;
  /* Keep search field directly under the fixed header (header top offset + header height). */
  top: calc(var(--header-height) + var(--bar-margin));
  z-index: 100;
  background: var(--app-bg);
  padding: 8px 0;
  margin: 0 calc(-1 * var(--space-page));
  padding-left: var(--space-page);
  padding-right: var(--space-page);
}
@media (max-width: 767px) {
  .app-search-wrap { margin: 0 -10px; padding-left: 10px; padding-right: 10px; padding-top: 6px; padding-bottom: 6px; }
}
.app-search-inner {
  display: flex;
  align-items: center;
  background: var(--app-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  gap: 8px;
}
@media (max-width: 767px) {
  .app-search-inner { padding: 8px 10px; }
}
.app-search-inner:focus-within { border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-50); }
.app-search-inner i { color: var(--text-secondary); font-size: 18px; flex-shrink: 0; }
.app-search-inner input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  color: var(--text-primary);
  background: transparent;
}
.app-search-inner input::placeholder { color: var(--text-secondary); }
.app-search-clear {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.app-search-clear:active { transform: scale(0.96); }

/* ========== NOTICE STRIP ========== */
.app-notice-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--app-surface);
  border-radius: var(--radius-md);
  padding: 12px var(--space-card);
  margin-bottom: var(--space-section);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary);
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.app-notice-card:active { transform: scale(0.99); }
.app-notice-chip {
  flex-shrink: 0;
  background: var(--primary-500);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}
.app-notice-text {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Notice marquee: scrolling text */
.app-notice-marquee .app-notice-marquee-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.app-notice-marquee .app-notice-marquee-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(to left, var(--app-surface), transparent);
  pointer-events: none;
  z-index: 1;
}
.app-notice-marquee .app-notice-marquee-content {
  display: inline-block;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.45;
  padding-right: 40px;
  animation: app-notice-scroll 35s linear infinite;
}
.app-notice-marquee:hover .app-notice-marquee-content {
  animation-play-state: paused;
}
.app-notice-marquee .app-notice-sep {
  opacity: 0.6;
  margin: 0 6px;
}
.app-notice-marquee .app-notice-arrow {
  flex-shrink: 0;
  color: var(--text-secondary);
}
@keyframes app-notice-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ========== CATEGORY CARD ========== */
.app-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: var(--space-section);
}
.app-home-grid-promo {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
#home-view .app-home-grid-promo {
  margin: 8px 0 12px;
}
.app-promo-featured-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: var(--primary-500);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  pointer-events: none;
}
.app-home-promo-carousel {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.app-home-promo-carousel .carousel-indicators {
  margin-bottom: 6px;
}
.app-home-promo-mobile-only,
.app-home-promo-pc-only {
  grid-column: 1 / -1;
  width: 100%;
}
.app-home-promo-pc-only {
  display: none;
}
@media (min-width: 769px) {
  .app-home-promo-mobile-only { display: none !important; }
  .app-home-promo-pc-only { display: block; }
}
@media (max-width: 768px) {
  .app-home-promo-pc-only { display: none !important; }
  .app-home-promo-mobile-only { display: block; }
}

.app-category-card {
  background: var(--app-surface);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  text-align: center;
  text-decoration: none;
  color: var(--text-primary);
  box-shadow: 0 2px 12px rgba(2,6,23,0.07);
  border: 1.5px solid rgba(var(--primary-rgb),0.10);
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}
.app-category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 200ms ease;
  background: linear-gradient(135deg, rgba(var(--primary-rgb),0.08) 0%, rgba(var(--primary-rgb),0.05) 100%);
}
.app-category-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 28px rgba(var(--primary-rgb),0.18), 0 2px 8px rgba(2,6,23,0.08);
  border-color: rgba(var(--primary-rgb),0.35);
}
.app-category-card:hover::after { opacity: 1; }
.app-category-card:active { transform: scale(0.95); box-shadow: 0 2px 8px rgba(2,6,23,0.08); }
.app-category-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.app-category-card:hover .app-category-icon-wrap {
  transform: scale(1.10) rotate(-3deg);
}
.app-category-icon-wrap img { width: 52px; height: 52px; object-fit: contain; }
.app-category-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  display: block;
}

/* Mobile only: larger icons and text for readability */
@media (max-width: 479px) {
  .app-category-card { min-height: 120px; padding: 12px 10px; }
  .app-category-icon-wrap { width: 72px; height: 72px; margin-bottom: 10px; }
  .app-category-icon-wrap img { width: 60px; height: 60px; }
  .app-category-title { font-size: 17px; }
  #home-view .app-category-card { padding: 14px 10px; }
  #home-view .app-category-icon-wrap { margin-bottom: 10px; }
  .app-nav-item { font-size: 13px; }
  .app-nav-item i, .app-nav-item svg { font-size: 24px; }
}

@media (min-width: 480px) {
  .app-category-grid { gap: 8px; }
  .app-category-card { padding: 12px 10px; min-height: 118px; }
  .app-category-icon-wrap { width: 64px; height: 64px; margin-bottom: 8px; }
  .app-category-icon-wrap img { width: 52px; height: 52px; }
  .app-category-title { font-size: 15px; }
}

/* Homepage only: restore original spacing (category/service pages keep tighter spacing) */
#home-view .app-hero {
  margin: 0 calc(-1 * var(--space-page) + 12px);
  margin-top: 12px;
  margin-bottom: 14px;
}
#home-view .app-notice-card {
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
#home-view .app-section {
  margin-bottom: 32px;
}
/* Tighten the top stack: search bar + উপজেলা pills sit close to the banner. */
#home-view .app-upazila-section {
  margin-bottom: 18px;
}
#home-view .app-category-grid {
  gap: 10px;
  margin-bottom: 32px;
}
#home-view .app-category-card {
  padding: 12px 10px;
}
#home-view .app-category-icon-wrap {
  margin-bottom: 8px;
}
@media (min-width: 480px) {
  #home-view .app-category-grid { gap: 12px; }
  #home-view .app-category-card { padding: 14px 12px; }
  #home-view .app-category-icon-wrap { margin-bottom: 10px; }
}

/* Stagger reveal */
.app-stagger > * {
  opacity: 0;
  animation: stagger-in var(--motion-slow) ease forwards;
}
.app-stagger > *:nth-child(1) { animation-delay: 0ms; }
.app-stagger > *:nth-child(2) { animation-delay: 40ms; }
.app-stagger > *:nth-child(3) { animation-delay: 80ms; }
.app-stagger > *:nth-child(4) { animation-delay: 120ms; }
.app-stagger > *:nth-child(5) { animation-delay: 160ms; }
.app-stagger > *:nth-child(6) { animation-delay: 200ms; }
.app-stagger > *:nth-child(7) { animation-delay: 240ms; }
.app-stagger > *:nth-child(8) { animation-delay: 280ms; }
.app-stagger > *:nth-child(9) { animation-delay: 320ms; }
.app-stagger > *:nth-child(n+10) { animation-delay: 360ms; }
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== INLINE PROMO (between service cards) ========== */
.app-inline-promo-wrap {
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  position: relative;
}
.app-inline-promo-banner {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  line-height: 0;
}
.app-inline-promo-img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: var(--app-bg);
}

/* ========== SERVICE LIST CARD ========== */
.app-service-card {
  background: var(--app-surface);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 6px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.app-service-card.mb-3 { margin-bottom: 6px !important; }
@media (max-width: 767px) {
  .app-service-card { padding: 8px 10px; margin-bottom: 5px; }
}
.app-service-card:active { transform: scale(0.99); }

.app-service-card-inner { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
@media (max-width: 767px) {
  .app-service-card-inner { gap: 8px; margin-bottom: 3px; }
}
.app-service-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  width: 70px;
}
@media (max-width: 767px) {
  .app-service-media { width: 56px; gap: 4px; }
}
.app-service-media .app-service-badges {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 3px;
}
.app-service-media .app-service-badge {
  width: 100%;
  justify-content: flex-start;
  padding: 5px 6px 5px 5px;
  gap: 5px;
}
.app-service-media .app-service-badge-icon {
  width: 18px;
  height: 18px;
}
.app-service-media .app-service-badge-icon svg {
  width: 11px;
  height: 11px;
}
.app-service-media .app-service-badge-label {
  font-size: 9px;
  white-space: normal;
  line-height: 1.15;
}
.app-service-avatar {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--app-bg);
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .app-service-avatar { width: 56px; height: 56px; border-radius: var(--radius-sm); }
}
.app-service-details { flex: 1; min-width: 0; }
.app-service-details > p,
.app-service-details > .app-service-head {
  margin-top: 0;
}
.app-service-details > p { margin-bottom: 2px !important; }
.app-service-details > p:last-child { margin-bottom: 0 !important; }
.app-service-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 2px;
  width: 100%;
  min-width: 0;
}
.app-service-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
  width: 100%;
  word-break: break-word;
}
@media (max-width: 767px) {
  .app-service-name { font-size: 15px; }
}
.app-service-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.app-service-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.app-service-badge-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}
.app-service-badge-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding-right: 2px;
}
.app-service-badge-verified {
  color: var(--primary-600);
  background: var(--primary-50);
  border: 1px solid rgba(14, 183, 178, 0.28);
}
.app-service-badge-verified .app-service-badge-icon {
  background: var(--primary-500);
  color: #fff;
}
.app-service-badge-sponsored {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.app-service-badge-sponsored .app-service-badge-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
}
.app-service-subtitle { font-size: 13px; color: var(--text-secondary); margin: 0 0 2px 0 !important; line-height: 1.35; }
.app-service-meta { font-size: 13px; color: var(--text-primary); margin: 0 0 2px 0 !important; line-height: 1.4; }
@media (max-width: 767px) {
  .app-service-subtitle, .app-service-meta { font-size: 12px; }
}
.app-service-meta i { color: var(--text-secondary); margin-right: 5px; width: 16px; text-align: center; font-size: 12px; }
.app-service-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; padding-top: 0; }
@media (max-width: 767px) {
  .app-service-actions { gap: 6px; margin-top: 3px; }
}
/* Button width distribution:
   - 2 buttons -> 50/50, 3 buttons -> 1/3 each (single row, via flex:1 on each button)
   - exactly 4 buttons -> two rows of two (each ~50%). */
.app-service-actions > :first-child:nth-last-child(4),
.app-service-actions > :first-child:nth-last-child(4) ~ * {
  flex: 1 1 calc(50% - 3px);
}
/* তথ্যসূত্রেঃ — shown at the bottom-right corner of a service card */
.app-service-source {
  margin: 6px 0 0 0 !important;
  text-align: right;
  font-size: 11px;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.3;
}
@media (max-width: 767px) {
  .app-service-source { font-size: 10px; }
}
.app-service-card .app-btn-call,
.app-service-card .app-btn-outline {
  padding: 10px 12px;
  font-size: 13px;
}
.app-btn-call {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  background: var(--primary-500);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--motion-fast) ease, background var(--motion-fast) ease;
}
.app-btn-call:active { transform: scale(0.98); }
.app-btn-call:hover { background: var(--primary-600); color: #fff; }
@media (max-width: 767px) {
  .app-btn-call { padding: 12px 14px; font-size: 13px; min-width: 0; }
  .app-btn-outline { padding: 10px 12px; font-size: 13px; }
}
.app-btn-outline {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  color: var(--primary-500);
  border: 2px solid var(--primary-500);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--motion-fast) ease, background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.app-btn-outline:active { transform: scale(0.98); }
.app-btn-outline:hover { background: var(--primary-500); color: #fff; }

/* ========== PAGE TOP (BACK + TITLE) ========== */
.app-page-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  margin-bottom: 12px;
}
@media (max-width: 767px) {
  .app-page-top { padding: 6px 0; margin-bottom: 10px; }
}
.app-back-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--app-bg);
  border: 1px solid var(--border);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform var(--motion-fast) ease, background var(--motion-fast) ease;
}
.app-back-btn:active { transform: scale(0.96); }
.app-page-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0 0 2px 0; }
.app-breadcrumb { font-size: 12px; color: var(--text-secondary); }
.app-breadcrumb a { color: var(--text-secondary); text-decoration: none; }

/* ========== FLOATING ACTION BUTTON ========== */
.app-fab {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--nav-margin) + 60px + var(--safe-bottom));
  right: var(--space-page);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-500);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 1001;
  text-decoration: none;
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.app-fab:active { transform: scale(0.92); }
.app-fab:hover { box-shadow: 0 12px 28px rgba(14, 183, 178, 0.25); }

/* Install / PWA FAB */
.app-fab-install {
  bottom: calc(var(--nav-height) + var(--nav-margin) + 60px + var(--safe-bottom));
  animation: fab-pulse 2s ease-in-out infinite;
}
@keyframes fab-pulse {
  0%, 100% { box-shadow: var(--shadow-soft); }
  50% { box-shadow: 0 10px 28px rgba(14, 183, 178, 0.2); }
}

/* ========== SECTION CONTAINER ========== */
.app-section { margin-bottom: var(--space-section); }
.app-section-title-wrap { margin-bottom: 12px; }

/* ========== UTILITIES ========== */
.app-tap-scale:active { transform: scale(0.96); }
.app-no-results {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-secondary);
}
.app-no-results i { font-size: 40px; color: var(--border); margin-bottom: 8px; display: block; }
.service-item.hidden { display: none !important; }

/* Filter pills (services page) */
.app-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; justify-content: center; min-height: 32px; }
@media (max-width: 767px) {
  .app-filter-row { margin-top: 4px; gap: 4px; }
}
.app-filter-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--app-surface);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.app-filter-btn.active { background: var(--primary-500); color: #fff; border-color: var(--primary-500); }

/* Tighter margins for Bootstrap spacing inside app content */
.app-content .mb-3 { margin-bottom: 10px !important; }
.app-content .mb-4 { margin-bottom: 14px !important; }
.app-content .mb-5 { margin-bottom: 18px !important; }
.app-content .py-5 { padding-top: 24px !important; padding-bottom: 24px !important; }

/* ========== CHAT PAGE (matches app layout) ========== */
.app-chat-wrap {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height) - var(--nav-height) - var(--nav-margin) * 2 - 80px);
  padding-bottom: 140px;
}
.app-chat-container {
  flex: 1;
  padding: var(--space-card);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}
.app-chat-msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.5;
  word-wrap: break-word;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.app-chat-msg.bot {
  background: var(--app-surface);
  color: var(--text-primary);
  align-self: flex-start;
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.app-chat-msg.user {
  background: var(--primary-500);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.app-chat-msg .chat-img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  display: block;
}
.app-chat-copy {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--app-bg);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.app-chat-copy:hover { color: var(--primary-500); }
.app-chat-copy:active { transform: scale(0.98); }

/* Chat input bar: fixed above bottom nav */
.app-chat-footer {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--nav-margin) * 2 + var(--safe-bottom));
  left: 0;
  right: 0;
  background: var(--app-surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(2, 6, 23, 0.06);
  z-index: 100;
  display: flex;
  flex-direction: column;
}
@media (min-width: 769px) {
  .app-chat-footer {
    left: var(--side-margin);
    right: var(--side-margin);
    width: auto;
    max-width: none;
    transform: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}
.app-chat-suggestions {
  display: flex;
  gap: 8px;
  padding: 10px var(--space-card);
  overflow-x: auto;
  white-space: nowrap;
  background: var(--app-bg);
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app-chat-toolbar {
  padding: 8px var(--space-card);
  border-bottom: 1px solid var(--border);
  background: var(--app-surface);
}
.app-chat-new-btn {
  background: none;
  border: none;
  color: var(--primary-500);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-family: inherit;
  transition: color var(--motion-fast);
}
.app-chat-new-btn:hover { color: var(--primary-600); }
.app-chat-new-btn:active { transform: scale(0.98); }
.app-chat-suggestions::-webkit-scrollbar { display: none; }
.app-chat-chip {
  flex-shrink: 0;
  background: var(--app-surface);
  color: var(--primary-500);
  border: 1px solid var(--primary-500);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.app-chat-chip:active { background: var(--primary-500); color: #fff; }
.app-chat-input-row {
  padding: var(--space-card);
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-chat-input-wrap {
  flex: 1;
  background: var(--app-bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 12px 6px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.app-chat-input-wrap:focus-within {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.app-chat-input-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 8px;
  outline: none;
  font-size: 15px;
  color: var(--text-primary);
  font-family: inherit;
}
.app-chat-input-wrap input::placeholder { color: var(--text-secondary); }
.app-chat-voice-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--primary-500);
  font-size: 18px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--motion-fast);
  -webkit-tap-highlight-color: transparent;
}
.app-chat-voice-btn:active { transform: scale(0.94); }
.app-chat-voice-btn.voice-active { color: #ef4444; animation: chat-voice-pulse 1s ease-in-out infinite; }
@keyframes chat-voice-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.app-chat-send-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-500);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(14, 183, 178, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--motion-fast), background var(--motion-fast);
  -webkit-tap-highlight-color: transparent;
}
.app-chat-send-btn:active { transform: scale(0.92); }
.app-chat-send-btn:hover { background: var(--primary-600); }

/* Chat modal (new chat confirm) */
.app-chat-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-normal) ease, visibility var(--motion-normal) ease;
  backdrop-filter: blur(4px);
}
.app-chat-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.app-chat-modal-card {
  background: var(--app-surface);
  padding: var(--space-section);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 340px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
  transform: scale(0.9);
  transition: transform var(--motion-normal) cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.app-chat-modal-overlay.active .app-chat-modal-card { transform: scale(1); }
.app-chat-modal-icon {
  font-size: 40px;
  color: var(--primary-500);
  margin-bottom: 16px;
}
.app-chat-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.app-chat-modal-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}
.app-chat-modal-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.app-chat-modal-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast), transform var(--motion-fast);
  border: none;
  font-family: inherit;
}
.app-chat-modal-btn-cancel {
  background: var(--app-bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.app-chat-modal-btn-cancel:active { transform: scale(0.98); }
.app-chat-modal-btn-confirm {
  background: var(--primary-500);
  color: #fff;
}
.app-chat-modal-btn-confirm:hover { background: var(--primary-600); }
.app-chat-modal-btn-confirm:active { transform: scale(0.98); }

/* PC view: full width with 150px side spacing (top unchanged) */
@media (min-width: 769px) {
  :root {
    --side-margin: 150px;
    --space-page: 150px;
    --space-page-lg: 150px;
  }
  .app-viewport {
    max-width: 100%;
    margin: 0;
    box-shadow: none;
  }
  .app-header {
    max-width: none;
  }
  .app-bottom-nav-wrap {
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    max-width: none;
  }
  .app-bottom-nav {
    max-width: 100%;
  }
  .app-footer-strip {
    max-width: none;
  }
  .app-hero,
  #home-view .app-hero,
  .app-search-wrap {
    margin-left: 0;
    margin-right: 0;
  }
  .app-category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1024px) {
  .app-category-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ========== CATEGORY CARD — DATA COUNT BADGE ========== */
.app-cat-count-divider {
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14,183,178,0.30), transparent);
  margin: auto auto 6px;
  border-radius: 1px;
  flex-shrink: 0;
}

.app-cat-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.app-cat-count-badge i {
  font-size: 9px;
  flex-shrink: 0;
}

/* has data — teal pill */
.app-cat-count-badge.has-data {
  background: linear-gradient(135deg, rgba(14,183,178,0.13) 0%, rgba(6,214,160,0.10) 100%);
  color: #0A9A96;
  border: 1px solid rgba(14,183,178,0.28);
}
.app-category-card:hover .app-cat-count-badge.has-data {
  background: linear-gradient(135deg, rgba(var(--primary-rgb),0.22) 0%, rgba(var(--primary-rgb),0.16) 100%);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb),0.20);
}

/* no data — muted grey pill */
.app-cat-count-badge.no-data {
  background: rgba(100,116,139,0.08);
  color: #94a3b8;
  border: 1px solid rgba(100,116,139,0.15);
}

/* make the card taller to fit badge — unified across home grid + subcategory grid */
.app-category-card {
  min-height: 138px;
  padding-bottom: 10px;
  justify-content: flex-start;
}
@media (max-width: 479px) {
  .app-category-card { min-height: 148px; }
  .app-cat-count-badge { font-size: 10px; padding: 3px 7px; }
}
@media (min-width: 480px) {
  .app-category-card { min-height: 144px; }
}

/* ========== HOME SEARCH BAR ========== */
.app-home-search-wrap {
  margin: 30px 0 30px;
  position: relative;
}
.app-home-search-inner {
  display: flex;
  align-items: center;
  background: var(--app-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  gap: 10px;
  box-shadow: 0 2px 12px rgba(14,183,178,0.07);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.app-home-search-inner:focus-within {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(14,183,178,0.12), 0 2px 12px rgba(14,183,178,0.10);
}
.app-home-search-inner > i {
  color: var(--text-secondary);
  font-size: 17px;
  flex-shrink: 0;
  transition: color 200ms ease;
}
.app-home-search-inner:focus-within > i { color: var(--primary-500); }
.app-home-search-inner input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--text-primary);
  background: transparent;
  font-family: inherit;
}
.app-home-search-inner input::placeholder { color: var(--text-secondary); }
.app-home-search-clear {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--app-bg);
  color: var(--text-secondary);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 150ms, color 150ms, transform 150ms;
  flex-shrink: 0;
}
.app-home-search-clear:hover { background: var(--border); color: var(--text-primary); }
.app-home-search-clear:active { transform: scale(0.9); }

/* ========== HOME SECTION HEADER ========== */
.app-home-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.app-home-section-icon {
  font-size: 18px;
  line-height: 1;
}
.app-home-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.app-home-section-count {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-left: 2px;
}

/* Empty search state spans full grid */
.app-search-empty-state {
  grid-column: 1 / -1;
}

/* ========== LOCATION DIRECTORY PILLS ========== */
/* "উপজেলা সমূহ" — horizontally scrollable, touch-friendly pills (wraps on desktop). */
.app-upazila-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app-upazila-pills::-webkit-scrollbar { display: none; }
.app-pill {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--app-surface);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.app-pill:hover { border-color: var(--primary-500); }
.app-pill.active {
  background: var(--primary-500);
  color: #fff;
  border-color: var(--primary-500);
}
@media (min-width: 769px) {
  /* On wide screens, wrap instead of scroll. */
  .app-upazila-pills { flex-wrap: wrap; overflow-x: visible; }
}
/* Union pills reuse .app-filter-row/.app-filter-btn; keep them scrollable on small screens. */
.app-union-pills { justify-content: flex-start; }

/* ========== DESKTOP BANNER SIZING (>=769px) ==========
   Banners are uploaded at the recommended 1200x600 (2:1) ratio.
   On mobile the banner container width is close to that ratio, so the base
   `height:160px; object-fit:cover` rules crop almost nothing and look correct
   (mobile is intentionally left untouched above).
   On desktop the full-width container becomes much wider than 2:1, so forcing the
   image into a fixed 160px box with object-fit:cover clipped ~60% of it (top and
   bottom cut off, apparent stretching). Here we cap the width, centre the banner
   and let the height follow the image so the COMPLETE banner is shown with correct
   proportions, no stretching and no vertical cropping. This block is appended last
   so it reliably overrides the earlier desktop margin rules. */
@media (min-width: 769px) {
  /* Hero spans the full content width so its left/right edges line up with the
     search bar, notice card and category grid below it. Height follows the
     recommended 1200x600 (2:1) banner ratio, so the COMPLETE image shows with no
     stretching and no top/bottom cropping. */
  .app-hero,
  #home-view .app-hero {
    margin-left: 0;
    margin-right: 0;
  }
  .app-hero img {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 600;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--app-bg);
  }
}


/* Search Results */
#searchResultsContainer {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 16px;
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.search-result-card {
    transition: all 0.2s ease;
    position: relative;
}

.search-result-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.search-result-service {
    transition: all 0.2s ease;
}

.search-result-service:hover {
    border-color: var(--primary-500) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.search-result-service a {
    transition: color 0.2s ease;
}

.search-result-service a:hover {
    color: var(--primary-500) !important;
}

/* Empty state */
.app-no-results i {
    opacity: 0.5;
}