/* =============================================================================
   AMAR KHULNA — main.css  v1.4.1 (Phase 2 Design Enhancement)
   Brand: Primary #075d3a · Accent Red #e8172b · Derived from official logo
   Fonts: NotoSansBengali — locally hosted, no CDN dependency
   All original class names and PHP template bindings preserved.
   ============================================================================= */

/* ── Fonts ─────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: AmarBengali;
  src: url('../fonts/NotoSansBengali-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: AmarBengali;
  src: url('../fonts/NotoSansBengali-Bold.ttf') format('truetype');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand — derived from logo (#075d3a green, #e8172b red) */
  --brand:        #075d3a;
  --brand-accent: #e8172b;       /* logo red underline / sun */
  --brand-accent-soft: #ffeaed;

  /* Derived dynamically so Customizer changes update everywhere */
  --brand-hover:  color-mix(in srgb, var(--brand) 86%, #000);
  --brand-deep:   color-mix(in srgb, var(--brand) 75%, #000);
  --brand-mid:    color-mix(in srgb, var(--brand) 90%, #fff);
  --brand-light:  color-mix(in srgb, var(--brand) 12%, #fff);
  --brand-tint:   color-mix(in srgb, var(--brand) 5%, #fff);

  /* Aliases kept for PHP template and plugin compatibility */
  --green:    var(--brand);
  --ak-green: var(--brand);

  /* Neutral ink scale */
  --ink:       #162e1e;   /* darkest readable text */
  --ink-mid:   #2e4a38;
  --muted:     #5f7568;
  --subtle:    #8a9e92;
  --line:      #deeade;
  --line-soft: #edf4ec;

  /* Surface */
  --paper:    #fff;
  --tint:     #f3f9f5;
  --bg:       #f7fbf7;

  /* Shadows (including legacy --shadow for 100% backward compatibility) */
  --shadow-sm:   0 2px 8px rgba(7,93,58,.06);
  --shadow-md:   0 6px 22px rgba(7,93,58,.09);
  --shadow-lg:   0 14px 45px rgba(7,93,58,.11);
  --shadow-card: 0 3px 14px rgba(20,60,35,.055);
  --shadow:      0 8px 28px rgba(7,93,58,.08);

  /* Radii */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  26px;

  /* Transitions */
  --t-fast:  .16s ease;
  --t-base:  .22s ease;
}

/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: AmarBengali, 'Noto Sans Bengali', sans-serif;
  font-size: 15px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.48; }
a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }

/* Focus rings — WCAG 2.1 AA visible */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #d49a22;
  outline-offset: 3px;
  border-radius: 4px;
}

button:disabled, select:disabled { cursor: default; opacity: .65; }
input, select, textarea { accent-color: var(--brand); }

/* Icons */
.ak-icon { width: 22px; height: 22px; vertical-align: middle; }

/* Layout container */
.ak-container {
  width: min(1240px, calc(100% - 64px));
  margin-inline: auto;
}

/* Accessibility utilities */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 1000;
  padding: 12px 22px; background: var(--brand); color: #fff;
  border-radius: var(--r-sm); font-weight: 700;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 14px; }

/* ── Premium Button System & Animations ─────────────────────────────────────── */
.ak-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 46px; padding: 11px 22px;
  border: 1.5px solid var(--brand); border-radius: var(--r-sm);
  background: linear-gradient(180deg, #097247 0%, var(--brand) 100%); color: #fff;
  font-weight: 700; font-size: 13.5px; line-height: 1.4;
  letter-spacing: -0.1px;
  box-shadow: 0 2px 5px rgba(7, 93, 58, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: background var(--t-fast), border-color var(--t-fast),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.2s ease;
  will-change: transform;
  cursor: pointer;
  text-decoration: none;
}
.ak-button:hover {
  background: linear-gradient(180deg, #0e8c56 0%, #097247 100%);
  border-color: #097247;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(7, 93, 58, 0.26), 0 2px 4px rgba(7, 93, 58, 0.12);
  filter: brightness(1.02);
}
.ak-button:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 1px 3px rgba(7, 93, 58, 0.2);
}
.ak-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(7, 93, 58, 0.25), 0 4px 12px rgba(7, 93, 58, 0.2);
}
.ak-button:disabled, .ak-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.ak-button .ak-icon { width: 17px; height: 17px; transition: transform 0.2s ease; }
.ak-button:hover .ak-icon { transform: translateX(2px); }

.ak-button-outline {
  background: #fff; color: var(--brand);
  border: 1.5px solid rgba(7, 93, 58, 0.35);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ak-button-outline:hover {
  background: var(--brand-light); color: var(--brand-deep);
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(7, 93, 58, 0.12);
}
.ak-button-outline:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 1px 2px rgba(7, 93, 58, 0.08);
}

.ak-button-white {
  background: #fff; color: var(--brand); border: 1.5px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ak-button-white:hover {
  background: #f4fbf6; border-color: #f4fbf6; color: var(--brand-deep);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.ak-button-white:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ak-button-outline-light {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
}
.ak-button-outline-light:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff; color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ak-button-emergency, .ak-floater-btn-red {
  background: linear-gradient(180deg, #e53935 0%, #c62828 100%) !important;
  color: #fff !important; border: 1.5px solid #b71c1c !important;
  box-shadow: 0 2px 6px rgba(198, 40, 40, 0.25) !important;
}
.ak-button-emergency:hover, .ak-floater-btn-red:hover {
  background: linear-gradient(180deg, #ef5350 0%, #d32f2f 100%) !important;
  border-color: #c62828 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(198, 40, 40, 0.35) !important;
}
.ak-button-emergency:active, .ak-floater-btn-red:active {
  transform: translateY(0) scale(0.985);
}

.ak-button-small {
  min-height: 38px; padding: 7px 16px; font-size: 12.5px; border-radius: 8px;
}
.ak-button-block {
  width: 100%; display: flex; text-align: center;
}

/* Text link */
.ak-text-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--brand); font-weight: 700; font-size: 13px;
  transition: color var(--t-fast);
}
.ak-text-link:hover { text-decoration: underline; color: var(--brand-deep); }
.ak-text-link .ak-icon { width: 17px; height: 17px; }

/* Eyebrow label */
.ak-eyebrow {
  margin-bottom: 10px; font-size: 12px; font-weight: 700;
  color: var(--brand); letter-spacing: .3px; text-transform: none;
}

/* Icon button */
.ak-icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-mid);
  transition: background var(--t-fast);
}
.ak-icon-button:hover { background: var(--tint); }

/* ── Header ────────────────────────────────────────────────────────────────── */
.ak-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 8px rgba(7,93,58,.05);
}

/* WordPress Admin Bar compatibility */
.admin-bar .ak-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .ak-header { top: 46px; }
}

.ak-header-inner {
  display: flex; align-items: center; gap: 28px;
  min-height: 82px;
}

/* Brand text fallback (when no custom logo uploaded) */
.ak-brand { flex-shrink: 0; }

.brand {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  line-height: 1.05; white-space: nowrap;
}
.brand-name {
  position: relative; color: var(--brand);
  font-size: 30px; font-weight: 800; letter-spacing: -1.6px;
}
.brand-name > span { color: var(--brand-accent); }
.brand-name > i {
  position: absolute; right: 33px; top: -6px;
  width: 13px; height: 7px; border-radius: 90% 0 90% 0;
  background: var(--brand); transform: rotate(-12deg);
}
.brand-domain {
  margin-top: 6px; font-family: Arial, sans-serif;
  font-size: 10px; color: var(--ink-mid); font-weight: 700; letter-spacing: .7px;
}

/* Custom logo & Brand Group */
.ak-brand-with-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.ak-brand-with-logo:hover {
  text-decoration: none;
}
.custom-logo-link img,
.ak-custom-logo {
  width: auto;
  max-width: 220px;
  max-height: 58px;
  object-fit: contain;
  display: block;
}
.ak-brand-text-group {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
.ak-brand-text-group .brand-name {
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -1.2px;
}
.ak-brand-text-group .brand-domain {
  margin-top: 3px;
  font-size: 10px;
}

/* Header Banner Strip */
.ak-header-banner-container {
  width: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  z-index: 40;
}
.ak-header-banner-below_header {
  border-bottom: 2px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.ak-header-banner-link {
  display: block;
  overflow: hidden;
  text-decoration: none;
  transition: opacity var(--t-fast);
}
.ak-header-banner-link:hover {
  opacity: .94;
}
.ak-header-banner-img {
  width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--r-sm);
  margin: 6px auto;
}
@media (max-width: 768px) {
  .ak-brand-with-logo { gap: 8px; }
  .custom-logo-link img,
  .ak-custom-logo { max-width: 150px; max-height: 44px; }
  .ak-brand-text-group .brand-name { font-size: 21px; }
  .ak-header-banner-img { max-height: 110px; margin: 4px auto; }
}

/* Navigation */
.ak-nav { margin-left: auto; }
.primary-menu, .primary-menu ul { list-style: none; padding: 0; margin: 0; }
.primary-menu { display: flex; align-items: center; gap: 4px; }
.primary-menu > li { position: relative; }

.primary-menu a {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  color: var(--ink-mid);
  transition: color var(--t-fast), background var(--t-fast);
}
.primary-menu a:hover,
.primary-menu .current,
.primary-menu > .current-menu-item > a {
  color: var(--brand); background: var(--brand-tint);
}
.primary-menu a .ak-icon { width: 16px; height: 16px; }

/* Dropdown submenu */
.primary-menu .sub-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 200px; padding: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  z-index: 50;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { display: block; }
.primary-menu .sub-menu .sub-menu { top: -8px; left: 100%; }

/* Header actions */
.ak-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ak-account-link { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.ak-account-link .ak-icon { width: 18px; height: 18px; }
.ak-menu-toggle { display: none; }
.ak-mobile-nav { display: none; }

/* ── Hero section ──────────────────────────────────────────────────────────── */
.ak-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(145deg, #e8f5ea 0%, #d4eddb 100%);
}

.ak-hero-art {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 70% center;
}

/* Gradient overlay — keeps text readable across all viewport widths */
.ak-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(242,249,236,.99) 0%,
    rgba(242,249,236,.97) 28%,
    rgba(242,249,236,.80) 50%,
    rgba(242,249,236,.12) 78%,
    rgba(242,249,236,.00) 100%
  );
}

.ak-hero-inner {
  min-height: 400px; max-width: 780px;
  padding: 38px 0 52px;
}

.ak-hero .ak-eyebrow {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
}
.ak-status-dot {
  width: 8px; height: 8px; background: var(--brand); border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(7,93,58,.10);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(7,93,58,.10); }
  50%       { box-shadow: 0 0 0 8px rgba(7,93,58,.04); }
}

.ak-hero-title {
  margin: 14px 0 12px;
  font-size: clamp(28px, 4.2vw, 44px); line-height: 1.32; letter-spacing: -1px; color: var(--ink);
}
.ak-hero-title > span { color: var(--brand); }

.ak-hero-subtitle {
  max-width: 520px; margin-bottom: 28px;
  font-size: 14.5px; line-height: 1.95; color: var(--ink-mid);
}

/* Search panel */
.ak-search-panel {
  max-width: 710px;
  padding: 24px;
  background: rgba(255,255,255,.98);
  border: 1.5px solid rgba(195,225,202,.85);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(7,93,58,.11), 0 4px 14px rgba(7,93,58,.05);
}

.ak-search-caption {
  margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ink);
}

.ak-search-main {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 7px 7px 7px 18px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--tint);
  box-shadow: inset 0 2px 4px rgba(7,93,58,.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ak-search-main:focus-within {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(7,93,58,.12), inset 0 2px 4px rgba(7,93,58,.02);
}
.ak-search-main > .ak-icon { width: 20px; height: 20px; color: var(--muted); }
.ak-search-main input {
  width: 100%; min-width: 0; min-height: 44px;
  padding: 6px 0; border: 0; background: transparent;
  color: var(--ink); font-size: 14px; outline: none;
}
.ak-search-main input::placeholder { color: var(--subtle); }
.ak-search-main button { flex-shrink: 0; min-height: 50px; padding: 13px 22px; }

/* Location dropdowns */
.ak-location-fields {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px; min-width: 0; margin-top: 12px;
}
.ak-location-fields label { position: relative; min-width: 0; }
.ak-location-fields label > .ak-icon {
  position: absolute; left: 12px; top: 14px;
  width: 16px; height: 16px; color: var(--brand); pointer-events: none;
}
.ak-location-fields select {
  width: 100%; min-width: 0; min-height: 46px;
  padding: 10px 24px 10px 34px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--ink-mid); font-size: 12px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ak-location-fields select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(7,93,58,.10);
  outline: none;
}
.ak-location-fields select:disabled { color: var(--subtle); background: var(--tint); }

/* Quick links */
.ak-hero-quick {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 12px; margin-top: 18px;
  color: var(--muted); font-size: 12px;
}
.ak-hero-quick a {
  color: var(--ink-mid); background: var(--brand-light);
  border-radius: 7px; padding: 4px 12px; font-size: 12px; font-weight: 700;
  transition: background var(--t-fast), color var(--t-fast);
}
.ak-hero-quick a:hover { background: var(--brand); color: #fff; }

/* ── Category section ──────────────────────────────────────────────────────── */
.ak-category-section {
  position: relative; z-index: 3; margin-top: -30px;
}

.ak-category-heading {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.ak-category-heading h2 { font-size: 24px; margin: 0; }
.ak-category-heading .ak-eyebrow { margin-bottom: 4px; }

/* Balanced 6-column grid on desktop so Bengali names don't cramp */
.ak-category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px 10px; padding: 26px 20px 24px;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.ak-category-card {
  display: flex; align-items: center; flex-direction: column;
  gap: 11px; min-width: 0; text-align: center;
  font-weight: 700; font-size: 12.5px; line-height: 1.55;
  padding: 12px 6px; border-radius: var(--r-md);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background var(--t-fast), box-shadow 0.22s ease;
  cursor: pointer;
}
.ak-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(7,93,58,.08);
}

/* Icon box */
.ak-icon-box {
  display: inline-flex; flex-shrink: 0; align-items: center;
  justify-content: center;
  width: 58px; height: 58px; border-radius: 17px;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.ak-category-card:hover .ak-icon-box {
  transform: scale(1.06);
  box-shadow: var(--shadow-sm);
}
.ak-icon-box .ak-icon { width: 28px; height: 28px; stroke-width: 1.9; }
.ak-category-image {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}

/* ── Semantic tone palette (default definitions) ─────────────────────────── */
.tone-green   { background: #e4f3e8; color: #0d6638; }
.tone-blue    { background: #e5effc; color: #1765b8; }
.tone-rose    { background: #fde8ec; color: #cc1f3a; }
.tone-orange  { background: #fff0e0; color: #c25f0a; }
.tone-purple  { background: #eee7fa; color: #7435c4; }
.tone-teal    { background: #e2f4f2; color: #136975; }
.tone-pink    { background: #fbeaf5; color: #b82d87; }

/* Category-card hover tints */
.ak-category-tone-green:hover  { background: #dff0e4; }
.ak-category-tone-blue:hover   { background: #e0ecfb; }
.ak-category-tone-rose:hover   { background: #fce0e6; }
.ak-category-tone-orange:hover { background: #ffecd3; }
.ak-category-tone-purple:hover { background: #e8dcf8; }
.ak-category-tone-teal:hover   { background: #d9f0ee; }
.ak-category-tone-pink:hover   { background: #f8dff1; }

/* ── Sections ──────────────────────────────────────────────────────────────── */
.ak-section { padding-top: 46px; scroll-margin-top: 28px; }

.ak-section-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 24px;
}
.ak-section-heading .ak-eyebrow { margin-bottom: 5px; font-size: 11px; }
.ak-section-heading h2 {
  display: flex; align-items: center; gap: 9px; margin-bottom: 0;
  font-size: 28px; letter-spacing: -.5px; line-height: 1.4;
}
.ak-section-heading h2 .ak-icon { width: 24px; height: 24px; color: var(--brand); }
.ak-section-heading > .ak-text-link { flex-shrink: 0; padding-bottom: 4px; }

/* ── Area / upazila grid (5 columns on desktop for 10 areas = 2 clean rows) ─ */
.ak-area-section {
  margin-top: 38px; padding: 28px;
  background: linear-gradient(120deg, #eff6ef, #f7f9ef);
  border: 1px solid #dce8dc; border-radius: var(--r-lg);
}

.ak-location-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
}

.ak-location-card {
  position: relative; min-height: 148px;
  overflow: hidden; border-radius: 13px;
  background: #c9daba; isolation: isolate;
  box-shadow: 0 3px 12px rgba(5,35,18,.06);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.ak-location-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.ak-location-card::after {
  content: '';
  position: absolute; inset: 32% 0 0; z-index: 1;
  background: linear-gradient(transparent, rgba(5,35,18,.92));
}
.ak-location-card img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.ak-location-card:hover img { transform: scale(1.08); }

/* Subtle hue variety so upazila cards don't look identical */
.area-1 img { object-position: 30%; filter: hue-rotate(10deg); }
.area-2 img { object-position: 65%; filter: hue-rotate(-10deg); }
.area-3 img { object-position: 15%; }
.area-4 img { object-position: 85%; filter: saturate(.9); }

.ak-location-card > span {
  position: absolute; left: 12px; right: 12px; bottom: 13px;
  z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  color: #fff; font-size: 13px; font-weight: 700; line-height: 1.5;
}
.ak-location-card .ak-icon { width: 14px; height: 14px; }

.ak-section-note {
  display: flex; align-items: center; gap: 6px;
  margin: 16px 0 0; color: var(--muted); font-size: 11.5px;
}
.ak-section-note .ak-icon { width: 15px; height: 15px; }

/* ── Service cards ─────────────────────────────────────────────────────────── */
.ak-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.ak-service-card {
  display: flex; align-items: center; gap: 14px;
  min-width: 0; min-height: 100px;
  padding: 20px 16px;
  border: 1.5px solid var(--line-soft); border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
}
.ak-service-card:hover {
  border-color: #a3ccad;
  box-shadow: 0 8px 24px rgba(7,93,58,.11);
  transform: translateY(-3px);
}
.ak-service-card .ak-icon-box { width: 48px; height: 50px; border-radius: 13px; flex-shrink: 0; }
.ak-service-card .ak-icon-box .ak-icon { width: 26px; height: 26px; }

.ak-service-copy {
  display: flex; min-width: 0; flex-direction: column; gap: 4px;
}
.ak-service-copy strong { font-size: 14px; line-height: 1.55; }
.ak-service-copy small {
  font-size: 11px; line-height: 1.7; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden;
}
.ak-service-arrow { margin-left: auto; color: #b8cec0; width: 13px; height: 13px; flex-shrink: 0; }

/* ── Priority / Emergency section ─────────────────────────────────────────── */
.ak-priority-section .ak-eyebrow { color: #cc1f3a; }

.ak-priority-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 22px;
}

/* Blood donor panel */
.ak-blood-panel {
  background: linear-gradient(135deg, #fff7f8 0%, #fff0f3 100%);
  border: 1.5px solid #f2d4db; border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: 0 4px 20px rgba(181,31,57,.06);
}
.ak-blood-heading {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.ak-blood-heading h3 { font-size: 22px; margin: 0 0 3px; color: #9c1c32; }
.ak-blood-heading p { font-size: 13px; color: #7a5f63; margin: 0; }

.ak-blood-groups {
  display: grid; grid-template-columns: repeat(8, minmax(0,1fr));
  gap: 7px; margin-bottom: 18px;
}
.ak-blood-groups a {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px;
  border: 1.5px solid #e8c6ce; background: #fff; border-radius: 10px;
  color: #b51f39; font: 700 14px Arial, sans-serif;
  box-shadow: 0 2px 6px rgba(181,31,57,.04);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.ak-blood-groups a:hover {
  background: #b51f39; color: #fff; border-color: #b51f39;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(181,31,57,.25);
}

.ak-urgent-links {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.ak-urgent-links .ak-service-card { min-height: 108px; }

/* ── Feature / market / education split cards ─────────────────────────────── */
.ak-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
}

.ak-feature-card {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 330px; padding: 32px;
  border: 1px solid #e0e9dc; border-radius: var(--r-lg);
  background: linear-gradient(130deg, #f8faf3, #eff6e8);
}

.ak-feature-copy { position: relative; z-index: 2; width: 64%; }
.ak-feature-card .ak-eyebrow { font-size: 10px; }
.ak-feature-card h2 { margin-bottom: 12px; font-size: 26px; line-height: 1.5; letter-spacing: -.5px; }
.ak-feature-card p:not(.ak-eyebrow) {
  max-width: 310px; color: var(--muted); font-size: 13px; line-height: 1.95;
}
.ak-feature-card .ak-button { min-height: 44px; padding: 10px 18px; font-size: 13px; }

.ak-feature-image {
  position: absolute; z-index: 1; right: -16px; bottom: 30px;
  width: 42%; height: 230px; object-fit: contain; object-position: center bottom;
  transition: transform .32s ease;
}
.ak-feature-card:hover .ak-feature-image { transform: translateX(-4px) scale(1.02); }

.ak-market-card {
  background: linear-gradient(125deg, #fdf7ea, #f9f2e3);
  border-color: #ebdfbb;
}
.ak-market-card .ak-eyebrow { color: #96570a; }

.ak-education-card {
  background: linear-gradient(125deg, #edf4fc, #eef5fb);
  border-color: #dae5f3;
}
.ak-education-card .ak-eyebrow { color: #1765b8; }
.ak-education-card .ak-feature-image { right: -22px; width: 43%; }

.ak-feature-tags {
  position: relative; z-index: 2;
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px;
}
.ak-feature-tags a {
  padding: 5px 12px;
  border: 1px solid rgba(0,0,0,.10); border-radius: 7px;
  background: rgba(255,255,255,.65);
  font-size: 11px; color: var(--ink-mid);
  transition: background var(--t-fast);
}
.ak-feature-tags a:hover { background: #fff; }
.ak-education-card .ak-feature-tags a { border-color: #d8e5f2; color: #3d5f80; }

/* ── How-to guide steps ─────────────────────────────────────────────────────── */
.ak-guide-section { padding-top: 44px; }
.ak-guide-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 38px; padding: 10px 0;
}
.ak-guide-grid article { display: flex; align-items: flex-start; gap: 18px; }
.ak-step-number {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 50px; height: 50px; border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--tint); color: var(--brand-mid);
  font-size: 17px; font-weight: 700;
}
.ak-guide-grid h3 { margin: 0 0 5px; font-size: 16px; }
.ak-guide-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }

/* ── CTA bar ────────────────────────────────────────────────────────────────── */
.ak-cta {
  display: flex; align-items: center; gap: 26px;
  margin: 46px 0 0; padding: 32px 38px;
  border-radius: var(--r-lg);
  background: linear-gradient(115deg, #054d30, #0c7a4e);
  color: #fff;
  box-shadow: 0 8px 30px rgba(5,77,48,.25);
}
.ak-cta-icon {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 64px; height: 64px;
  border: 1px solid rgba(255,255,255,.20); border-radius: 18px;
  background: rgba(255,255,255,.10);
}
.ak-cta-icon .ak-icon { width: 32px; height: 32px; }
.ak-cta .ak-eyebrow { color: rgba(255,255,255,.70); font-size: 11px; margin-bottom: 4px; }
.ak-cta h2 { font-size: 26px; margin-bottom: 6px; }
.ak-cta p:not(.ak-eyebrow) { margin-bottom: 0; font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.85; }
.ak-cta .ak-button { margin-left: auto; flex-shrink: 0; }

/* Contribute bar */
.ak-contribute {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 34px 0 42px;
  border-top: 1px solid var(--line-soft);
}
.ak-contribute h2 { margin-bottom: 5px; font-size: 21px; }
.ak-contribute p { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.ak-contribute .ak-button { flex-shrink: 0; }

/* ── Listing cards ─────────────────────────────────────────────────────────── */
.ak-listing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}

.ak-listing-card {
  overflow: hidden; display: flex; flex-direction: column;
  border: 1.5px solid var(--line-soft); border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
}
.ak-listing-card:hover {
  border-color: #a8cfb2;
  box-shadow: 0 12px 30px rgba(7,93,58,.12);
  transform: translateY(-3px);
}

.ak-listing-image {
  display: flex; align-items: center; justify-content: center;
  height: 185px; overflow: hidden; background: var(--tint);
}
.ak-listing-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.ak-listing-card:hover .ak-listing-image img { transform: scale(1.04); }
.ak-listing-placeholder {
  display: flex; width: 100%; height: 100%;
  align-items: center; justify-content: center;
}
.ak-listing-placeholder .ak-icon { width: 56px; height: 56px; opacity: .45; }

.ak-listing-body {
  display: flex; flex: 1; flex-direction: column; padding: 22px;
}
.ak-listing-badges {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px; margin-bottom: 12px;
}
.ak-tag, .ak-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 8px; border-radius: 6px;
  background: var(--tint); color: #3d6c47; font-size: 10px; line-height: 1.5;
}
.ak-badge { background: #e5f5ef; color: #116048; }
.ak-badge .ak-icon { width: 11px; height: 11px; }
.ak-badge-sample { background: #fff4d8; color: #855b12; }

.ak-listing-card h3 { font-size: 18px; margin-bottom: 8px; line-height: 1.5; }
.ak-listing-location {
  display: flex; gap: 4px; align-items: center;
  font-size: 11px; color: var(--muted); margin-bottom: 11px;
}
.ak-listing-location .ak-icon { width: 14px; height: 14px; }
.ak-listing-excerpt { color: var(--muted); font-size: 12px; line-height: 1.85; }
.ak-listing-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; margin-top: auto;
  border-top: 1px solid var(--line-soft);
}
.ak-call-link {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; border-radius: 50%;
  background: #e8f5ed; color: var(--brand);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.ak-call-link:hover { background: var(--brand); color: #fff; transform: scale(1.06); }
.ak-call-link .ak-icon { width: 16px; height: 16px; }

/* ── Notices / announcements ───────────────────────────────────────────────── */
.ak-notice-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.ak-notice-card {
  padding: 24px; border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md); background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
}
.ak-notice-card:hover {
  border-color: #a8cfb2;
  box-shadow: 0 8px 22px rgba(7,93,58,.10);
  transform: translateY(-2px);
}
.ak-notice-card time { font-size: 10px; color: var(--subtle); }
.ak-notice-card h3 { font-size: 17px; margin: 8px 0 10px; line-height: 1.5; }
.ak-notice-card p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.85; }

/* ── Page hero / breadcrumb / content ─────────────────────────────────────── */
.ak-page-hero {
  padding: 40px 0 36px; background: var(--tint);
  border-bottom: 1px solid var(--line-soft);
}
.ak-page-hero h1 { font-size: 34px; margin: 0 0 8px; line-height: 1.45; }
.ak-page-hero > div > p, .ak-page-intro {
  max-width: 820px; color: var(--muted); font-size: 14px; margin-bottom: 0;
}

.ak-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: 11px;
}
.ak-breadcrumb .ak-icon { width: 12px; height: 12px; }

.ak-page-content { padding-top: 36px; padding-bottom: 55px; }

.ak-content {
  max-width: 880px; margin: 0 auto 26px;
  padding: 36px; border: 1px solid var(--line-soft);
  border-radius: var(--r-md); background: #fff;
  box-shadow: var(--shadow-sm);
}

/* Rich text */
.ak-entry-content { overflow-wrap: anywhere; }
.ak-entry-content h2 { margin-top: 1.4em; font-size: 24px; }
.ak-entry-content h3 { margin-top: 1.25em; font-size: 20px; }
.ak-entry-content > :first-child { margin-top: 0; }
.ak-entry-content > :last-child { margin-bottom: 0; }
.ak-entry-content p, .ak-entry-content li { color: var(--ink-mid); line-height: 1.95; }
.ak-entry-content a:not(.ak-button):not(.ak-text-link) {
  color: var(--brand); text-decoration: underline;
}
.ak-entry-content img { border-radius: var(--r-sm); }
.ak-entry-content table { width: 100%; border-collapse: collapse; }
.ak-entry-content td, .ak-entry-content th {
  padding: 10px 14px; border: 1px solid var(--line); text-align: left;
}
.ak-entry-content blockquote {
  margin: 20px 0; padding: 18px 22px;
  border-left: 4px solid var(--brand); background: var(--tint);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Search results page */
.ak-generic-search { margin: 0 auto 28px; max-width: 880px; }
.ak-search-results h2 { font-size: 22px; }
.ak-search-results p { color: var(--muted); font-size: 14px; }

/* Empty / error states */
.ak-empty-state {
  padding: 60px 28px; border: 1px dashed #c4d8c8;
  border-radius: var(--r-lg); background: #f9fdf9; text-align: center;
}
.ak-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin-bottom: 18px;
  border-radius: 50%; background: #e2f0e5; color: #568060;
}
.ak-empty-icon .ak-icon { width: 30px; height: 30px; }
.ak-empty-state h2 { font-size: 24px; margin-bottom: 10px; }
.ak-empty-state p {
  max-width: 580px; margin: 0 auto 24px;
  color: var(--muted); font-size: 14px;
}
.ak-empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.ak-error-number { font-size: 80px !important; font-weight: 700; line-height: 1.2; color: var(--brand) !important; }
.ak-not-found { padding-block: 70px; }
.ak-inline-empty { padding: 22px; font-size: 14px; color: var(--muted); grid-column: 1 / -1; }

/* ── Directory / filter ────────────────────────────────────────────────────── */
.ak-directory-main { padding-top: 32px; padding-bottom: 58px; }

.ak-filter-form {
  padding: 26px; border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md); background: #fff;
  box-shadow: var(--shadow-sm); margin-bottom: 28px;
}

/* Adaptive 3 or 4 columns based on presence of doctor departments */
.ak-filter-top {
  display: grid;
  grid-template-columns: 2fr 1.35fr 1fr;
  gap: 16px;
}
.ak-filter-top:has(.ak-field:nth-child(4)) {
  grid-template-columns: 1.8fr 1.3fr 1.2fr 1fr;
}
.ak-filter-top .ak-field { margin-bottom: 16px; }

.ak-input-icon { position: relative; }
.ak-input-icon > .ak-icon {
  position: absolute; left: 13px; top: 13px;
  width: 18px; height: 18px; color: var(--muted);
}
.ak-input-icon input { padding-left: 40px !important; }

.ak-filter-bottom { display: flex; align-items: center; gap: 12px; }
.ak-filter-bottom .ak-location-fields { flex: 1; margin: 0; }
.ak-filter-bottom .ak-button { min-height: 44px; padding: 11px 22px; }
.ak-clear-filter { font-size: 12px; color: var(--muted); text-decoration: underline; white-space: nowrap; }

.ak-subcategory-list {
  display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px;
}
.ak-subcategory-list a {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); background: #fff; font-size: 12px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.ak-subcategory-list a:hover {
  background: var(--brand-tint); color: var(--brand); border-color: var(--line);
}
.ak-subcategory-list .ak-icon { width: 15px; height: 15px; }
.ak-subcategory-list .ak-icon:last-child { width: 11px; height: 11px; margin-left: 4px; }

.ak-results-heading {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 22px;
}
.ak-results-heading h2 { margin: 0; font-size: 22px; }
.ak-results-heading p { margin: 0; color: var(--muted); font-size: 12px; }

/* Pagination */
.ak-pagination,
.navigation.pagination .nav-links {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 7px; margin-top: 32px;
}
.page-numbers {
  display: inline-flex; min-width: 42px; min-height: 42px;
  align-items: center; justify-content: center;
  padding: 8px 14px; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); background: #fff; font-size: 13px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.page-numbers:hover { background: var(--tint); }
.page-numbers.current {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

/* ── Service / listing detail page ─────────────────────────────────────────── */
.ak-detail-heading h1 { margin-top: 8px; }
.ak-detail-area {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px; font-size: 13px; color: var(--muted); margin: 0;
}
.ak-detail-area .ak-icon { width: 16px; height: 16px; }

.ak-detail-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 350px;
  gap: 30px; padding-top: 34px; padding-bottom: 48px;
}

.ak-content-card {
  padding: 28px; border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md); background: #fff;
  box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.ak-content-card h2 { font-size: 22px; margin: 0 0 18px; }
.ak-content-card h3 { font-size: 19px; margin: 0 0 10px; }

.ak-detail-image {
  margin-bottom: 26px; border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.ak-detail-image img { width: 100%; max-height: 480px; object-fit: cover; }

/* Facts table */
.ak-facts { margin: 22px 0 0; display: grid; gap: 0; }
.ak-facts > div {
  display: grid; grid-template-columns: 130px minmax(0,1fr);
  gap: 16px; padding: 13px 0;
  border-top: 1px solid var(--line-soft); font-size: 14px;
}
.ak-facts dt { color: var(--muted); }
.ak-facts dd { margin: 0; }

/* Info note */
.ak-info-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 17px 22px; border: 1px solid #dde9d8;
  border-radius: 11px; background: #f5f9f2;
}
.ak-info-note > .ak-icon { width: 18px; height: 18px; color: #638260; margin-top: 3px; }
.ak-info-note p { margin: 0; font-size: 12px; color: #637560; line-height: 1.85; }

/* Contact list */
.ak-contact-list { display: grid; gap: 20px; }
.ak-contact-list > div {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px; overflow-wrap: anywhere;
}
.ak-contact-list > div > .ak-icon { width: 18px; height: 18px; color: var(--brand); margin-top: 4px; }
.ak-contact-list strong {
  display: block; font-weight: 400; color: var(--muted);
  font-size: 11px; margin-bottom: 3px;
}
.ak-contact-actions { display: grid; gap: 10px; margin-top: 24px; }
.ak-contact-actions p, .ak-correction-card p { font-size: 12px; color: var(--muted); }
.ak-contact-page-details { padding-top: 25px; border-top: 1px solid var(--line-soft); margin-top: 25px; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.ak-field { display: grid; gap: 6px; margin-bottom: 18px; min-width: 0; }
.ak-field label { font-size: 13px; font-weight: 700; color: var(--ink-mid); }
.ak-field input:not([type=checkbox]):not([type=radio]),
.ak-field textarea,
.ak-field select {
  width: 100%; min-width: 0; min-height: 46px;
  padding: 12px 14px;
  border: 1.5px solid #cdd9cc; border-radius: var(--r-sm);
  background: #fff; color: var(--ink); font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ak-field input:focus,
.ak-field textarea:focus,
.ak-field select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3.5px rgba(7,93,58,.12);
  background: #fff;
  outline: none;
}
.ak-field textarea { min-height: 130px; resize: vertical; }
.ak-field small, .ak-form-note { font-size: 12px; color: var(--muted); }

.ak-form fieldset {
  min-width: 0; border: 0; border-bottom: 1px solid var(--line-soft);
  padding: 0 0 24px; margin: 0 0 26px;
}
.ak-form legend { font-size: 19px; font-weight: 700; margin-bottom: 18px; }

/* Alerts */
.ak-alert {
  padding: 16px 20px; margin-bottom: 24px;
  border: 1px solid #d6e8cf; border-radius: 10px;
  background: #f2faf0; color: #3d6838; font-size: 13px;
}
.ak-alert--error, .ak-alert-error {
  border-color: #f0d0cc; background: #fff3f2; color: #8c332e;
}
.ak-alert--success, .ak-alert-success {
  border-color: #c8e6cc; background: #eef9ef; color: #2e6234;
}
.ak-entry-content .ak-form a { overflow-wrap: anywhere; }
.ak-entry-content .ak-form { font-size: 14px; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.ak-footer {
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #f8fcf9 0%, #ffffff 35%);
  position: relative;
}

/* Footer Pre-strip / Citizen Callout */
.ak-footer-prestrip {
  background: linear-gradient(135deg, #075d3a 0%, #0d462f 60%, #093824 100%);
  color: #fff;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.ak-footer-prestrip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.ak-prestrip-copy {
  max-width: 660px;
}
.ak-prestrip-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}
.ak-prestrip-badge .ak-icon {
  width: 13px;
  height: 13px;
  color: #ff9da8;
}
.ak-prestrip-copy h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  margin: 4px 0 6px;
  line-height: 1.45;
  letter-spacing: -0.3px;
}
.ak-prestrip-copy p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 12.5px;
  line-height: 1.7;
  margin: 0;
}
.ak-prestrip-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Main 4-column Grid */
.ak-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.15fr 1.25fr;
  gap: 38px;
  padding-top: 52px;
  padding-bottom: 46px;
}

/* Col 1: Brand & About */
.ak-footer-about {
  display: flex;
  flex-direction: column;
}
.ak-footer-about .brand {
  margin-bottom: 14px;
}
.ak-footer-desc {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--muted);
  margin: 0 0 16px;
}
.ak-footer-statement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #edf6f0;
  border: 1px solid #d2e7d7;
  border-radius: 9px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #0b4a2a;
  font-weight: 600;
  margin-bottom: 18px;
}
.ak-footer-statement .ak-icon {
  width: 16px;
  height: 16px;
  color: var(--brand);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Social Icon Pills */
.ak-footer-social {
  margin-top: auto;
}
.ak-social-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-mid);
  margin-bottom: 8px;
  text-transform: none;
}
.ak-social-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ak-social-pill {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1.5px solid #d4e4d8;
  color: var(--brand);
  box-shadow: 0 2px 5px rgba(7, 93, 58, 0.06);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.22s ease,
              border-color 0.22s ease,
              color 0.22s ease,
              box-shadow 0.22s ease;
  text-decoration: none;
}
.ak-social-pill:hover {
  transform: translateY(-3px);
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(7, 93, 58, 0.24);
}
.ak-social-pill:active {
  transform: translateY(0) scale(0.95);
}
.ak-social-pill .ak-icon {
  width: 17px;
  height: 17px;
}

/* Columns 2 & 3: Lists & Navigation */
.ak-footer-heading {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 18px;
  position: relative;
  padding-bottom: 8px;
  line-height: 1.4;
}
.ak-footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2.5px;
  background: var(--brand);
  border-radius: 2px;
}
.ak-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ak-footer-links li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}
.ak-footer-links li a .ak-icon {
  width: 14px;
  height: 14px;
  color: var(--brand);
  opacity: 0.75;
  flex-shrink: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.ak-footer-links li a:hover {
  color: var(--brand-deep);
  transform: translateX(3px);
  text-decoration: none;
}
.ak-footer-links li a:hover .ak-icon {
  opacity: 1;
  transform: scale(1.15);
}

/* Col 4: Contact & Support */
.ak-contact-intro {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 14px;
}
.ak-contact-items {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.ak-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e1ede4;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(7, 93, 58, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ak-contact-item:hover {
  border-color: #b7dac0;
  box-shadow: 0 4px 12px rgba(7, 93, 58, 0.08);
}
.ak-contact-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #eaf4ed;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ak-contact-icon .ak-icon {
  width: 14px;
  height: 14px;
}
.ak-contact-item div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ak-contact-item strong {
  font-size: 11px;
  font-weight: 600;
  color: var(--subtle);
}
.ak-contact-item a,
.ak-contact-item span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ak-contact-item a:hover {
  color: var(--brand);
  text-decoration: underline;
}
.ak-footer-cta-box {
  margin-top: 14px;
}

/* Footer Bottom Bar */
.ak-footer-bottom-wrap {
  background: #091f14;
  color: #9cb5a5;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ak-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 0;
  font-size: 11.5px;
}
.ak-footer-bottom-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ak-footer-badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 10.5px;
  color: #79d89b;
}
.ak-footer-legal-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ak-footer-legal-links a {
  color: #bed5c6;
  text-decoration: none;
  font-size: 11.5px;
  transition: color 0.18s ease;
}
.ak-footer-legal-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.ak-footer-legal-links .ak-sep {
  color: rgba(255, 255, 255, 0.25);
}
.ak-footer-menu { display: flex !important; flex-wrap: wrap; }

/* ── Tablet (≤1200px) ───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .ak-header-inner { gap: 16px; }
  .ak-container { width: calc(100% - 48px); }
  .brand-name { font-size: 27px; }
  .primary-menu a { padding: 8px 9px; font-size: 12px; }
  .ak-header-actions { gap: 8px; }
  .ak-header-actions .ak-icon-button { width: 34px; }
  .ak-category-grid { gap: 8px; padding-inline: 14px; }
  .ak-category-card { font-size: 11.5px; }
  .ak-icon-box { width: 52px; height: 52px; }
  .ak-location-card { min-height: 132px; }
  .ak-location-card > span { font-size: 12px; left: 8px; right: 8px; }
  .ak-service-card { gap: 10px; padding: 16px 13px; }
  .ak-service-copy strong { font-size: 13px; }
  .ak-service-copy small { font-size: 10px; }
  .ak-service-arrow { display: none; }
  .ak-feature-copy { width: 68%; }
  .ak-footer-grid { gap: 28px; }
}

/* Tablet intermediate (1100px) — priority grid adjustments */
@media (min-width: 1101px) {
  .ak-hero-art { object-position: 78% center; }
  .ak-header-inner { min-height: 82px; }
}
@media (max-width: 1100px) {
  .ak-priority-grid { grid-template-columns: 1fr 1.3fr; }
  .ak-blood-groups { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .ak-urgent-links .ak-service-card { padding: 14px; }
  .ak-hero-title { font-size: 48px; }
  .ak-hero-inner { max-width: 730px; }
  .ak-service-copy strong { font-size: 14px; }
}

/* Header in middle range */
@media (min-width: 992px) and (max-width: 1250px) {
  .ak-header-inner { gap: 12px; }
  .primary-menu a { padding: 9px 7px; }
  .brand-name { font-size: 26px; }
}

/* ── Phablet/Tablet (≤991px) ─────────────────────────────────────────────── */
@media (max-width: 991px) {
  .ak-header-inner { min-height: 78px; }
  .ak-header-actions { margin-left: auto; }
  .ak-menu-toggle { display: inline-flex !important; }

  .ak-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    margin: 0; padding: 16px 24px;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(7,93,58,.08);
  }
  .ak-nav.is-open { display: block; }
  .primary-menu { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
  .primary-menu a { min-height: 44px; font-size: 14px; padding: 10px 14px; }
  .primary-menu .sub-menu { display: block; position: static; box-shadow: none; border: 0; min-width: 0; padding: 0 0 0 14px; }
  .primary-menu .sub-menu a { font-size: 12px; }

  .ak-hero-inner { min-height: 450px; padding-top: 45px; padding-bottom: 60px; }
  .ak-hero-title { font-size: 47px; }
  .ak-hero::before {
    background: linear-gradient(
      90deg, rgba(242,249,236,.97), rgba(242,249,236,.90) 40%, rgba(242,249,236,.22) 100%
    );
  }
  .ak-search-form { max-width: 650px; }

  /* 4 columns on tablets for categories */
  .ak-category-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px 10px; padding: 22px 14px; }
  .ak-category-card { font-size: 12px; gap: 8px; }

  .ak-location-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
  .ak-location-card { min-height: 138px; }
  .ak-location-card > span { font-size: 12px; left: 10px; right: 10px; }

  .ak-service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ak-service-copy strong { font-size: 15px; }
  .ak-service-copy small { font-size: 11px; }
  .ak-service-card { padding: 18px; gap: 14px; }

  .ak-feature-card { padding: 26px; min-height: 320px; }
  .ak-feature-card h2 { font-size: 23px; }
  .ak-feature-copy { width: 76%; }
  .ak-feature-image { right: -40px; width: 46%; opacity: .55; }
  .ak-feature-card p:not(.ak-eyebrow) { font-size: 12px; }
  .ak-education-card .ak-feature-image { right: -28px; opacity: .55; }

  .ak-guide-grid { gap: 22px; }
  .ak-guide-grid article { gap: 12px; }
  .ak-guide-grid h3 { font-size: 14px; }
  .ak-step-number { width: 42px; height: 42px; font-size: 15px; }
  .ak-guide-grid p { font-size: 12px; }

  .ak-cta { gap: 18px; padding: 28px 30px; }
  .ak-cta-icon { display: none; }
  .ak-cta h2 { font-size: 23px; }
  .ak-cta .ak-button { font-size: 12px; padding: 11px 16px; }

  .ak-contribute h2 { font-size: 19px; }
  .ak-contribute .ak-button { font-size: 12px; padding: 11px 16px; }

  .ak-footer-prestrip-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ak-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-top: 40px; padding-bottom: 36px; }
  .ak-footer-about { grid-column: 1 / -1; }
  .ak-footer-desc { max-width: 560px; }

  .ak-detail-layout { grid-template-columns: minmax(0,1fr) 295px; gap: 22px; }
  .ak-content-card { padding: 23px; }

  .ak-listing-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ak-filter-top { grid-template-columns: 1.6fr 1.2fr 1fr; }
  .ak-filter-bottom { flex-wrap: wrap; }
  .ak-filter-bottom .ak-location-fields { flex-basis: 100%; margin-bottom: 2px; }
}

/* ── Mobile (≤767px) — bottom navigation appears ─────────────────────────── */
@media (max-width: 767px) {
  html { scroll-padding-top: 16px; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); font-size: 14px; }

  .ak-container { width: calc(100% - 24px); max-width: 100%; box-sizing: border-box; }
  .ak-header-inner { min-height: 64px; gap: 8px; justify-content: space-between; align-items: center; }
  .ak-brand { min-width: 0; flex-shrink: 1; }
  .brand-name { font-size: 24px; }
  .brand-domain { font-size: 8.5px; }
  .custom-logo-link img, .ak-brand .custom-logo { max-width: 130px; max-height: 44px; object-fit: contain; }
  .ak-header-actions { gap: 4px; flex-shrink: 0; display: flex; align-items: center; }
  .ak-easy-mode-text { display: none !important; }
  .ak-easy-mode-toggle {
    padding: 6px 8px !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .ak-account-link, .ak-add-link { display: none; }
  .ak-header-actions .ak-icon-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }
  .ak-nav { padding-inline: 16px; }

  .ak-hero-art { object-position: 72% center; }
  .ak-hero::before {
    background:
      linear-gradient(90deg, rgba(242,249,236,.95), rgba(242,249,236,.82) 52%, rgba(242,249,236,.38)),
      linear-gradient(0deg, rgba(236,246,224,.95), transparent 65%);
  }
  .ak-hero-inner { min-height: 420px; padding: 30px 0 46px; }
  .ak-hero .ak-eyebrow { font-size: 10px; margin-bottom: 9px; gap: 7px; }
  .ak-hero-title { font-size: 36px; line-height: 1.38; letter-spacing: -.6px; margin: 14px 0 11px; }
  .ak-hero-subtitle { max-width: 400px; font-size: 12.5px; line-height: 1.95; margin-bottom: 20px; }

  .ak-search-panel { padding: 16px; border-radius: var(--r-md); }
  .ak-search-caption { font-size: 14px; margin-bottom: 10px; }
  .ak-search-main { min-height: 58px; padding: 6px 6px 6px 12px; gap: 8px; border-radius: 11px; }
  .ak-search-main > .ak-icon { width: 18px; height: 18px; }
  .ak-search-main input { min-height: 42px; font-size: 13px; }
  .ak-search-main button { min-height: 44px; padding: 10px 14px; font-size: 12px; }
  .ak-search-main button .ak-icon { display: none; }

  .ak-location-fields { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 10px; }
  .ak-location-fields label:first-of-type { grid-column: 1 / -1; }
  .ak-location-fields select { min-height: 44px; font-size: 12px; padding: 10px 20px 10px 32px; }
  .ak-location-fields label > .ak-icon { top: 13px; left: 10px; width: 15px; height: 15px; }
  .ak-hero-quick { font-size: 11px; margin-top: 14px; gap: 6px 11px; }

  .ak-category-section { margin-top: -20px; }
  .ak-category-grid { grid-template-columns: repeat(4, minmax(0,1fr)); padding: 20px 8px 18px; gap: 16px 6px; border-radius: var(--r-md); }
  .ak-category-card { font-size: 11px; line-height: 1.6; gap: 8px; padding: 8px 2px; }
  .ak-category-card .ak-icon-box { width: 48px; height: 48px; border-radius: 14px; }
  .ak-category-card .ak-icon-box .ak-icon { width: 25px; height: 25px; }

  .ak-section { padding-top: 32px; }
  .ak-section-heading { gap: 12px; margin-bottom: 18px; }
  .ak-section-heading .ak-eyebrow { font-size: 10px; margin-bottom: 5px; }
  .ak-section-heading h2 { font-size: 22px; line-height: 1.48; gap: 7px; letter-spacing: -.3px; }
  .ak-section-heading h2 .ak-icon { width: 20px; height: 20px; }
  .ak-section-heading > .ak-text-link { font-size: 11px; gap: 4px; padding-bottom: 3px; }
  .ak-section-heading > .ak-text-link .ak-icon { width: 14px; height: 14px; }

  .ak-area-section { margin-top: 26px; padding: 18px 14px; border-radius: var(--r-md); }
  .ak-area-section .ak-section-heading h2 { font-size: 20px; }
  .ak-area-section .ak-section-heading h2 > .ak-icon { display: none; }
  .ak-location-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
  .ak-location-card { min-height: 118px; border-radius: 10px; }
  .ak-location-card > span { left: 8px; right: 8px; bottom: 10px; font-size: 11.5px; }
  .ak-location-card .ak-icon { width: 11px; height: 11px; }
  .ak-section-note { font-size: 10px; align-items: flex-start; line-height: 1.85; gap: 5px; margin-top: 13px; }
  .ak-section-note .ak-icon { width: 13px; height: 13px; margin-top: 2px; }

  .ak-service-grid { gap: 10px; }
  .ak-service-card { padding: 14px 12px; gap: 10px; min-height: 90px; align-items: flex-start; border-radius: 12px; }
  .ak-service-card .ak-icon-box { width: 38px; height: 42px; border-radius: 11px; margin-top: 2px; }
  .ak-service-card .ak-icon-box .ak-icon { width: 23px; height: 23px; }
  .ak-service-copy strong { font-size: 12px; line-height: 1.65; }
  .ak-service-copy small { font-size: 10px; line-height: 1.7; }

  .ak-feature-grid { grid-template-columns: 1fr; gap: 16px; }
  .ak-feature-card { min-height: 306px; padding: 26px; }
  .ak-feature-copy { width: 72%; }
  .ak-feature-card h2 { font-size: 24px; }
  .ak-feature-card p:not(.ak-eyebrow) { font-size: 12px; }
  .ak-feature-image { right: -24px; bottom: 36px; width: 42%; height: 215px; opacity: .8; }
  .ak-education-card .ak-feature-image { right: -28px; width: 43%; opacity: .8; }
  .ak-feature-tags { gap: 6px; margin-top: 20px; }
  .ak-feature-tags a { font-size: 10px; padding: 4px 10px; }

  .ak-guide-grid { grid-template-columns: 1fr; gap: 22px; padding-top: 4px; }
  .ak-guide-grid article { gap: 15px; }
  .ak-guide-grid h3 { font-size: 15px; margin-bottom: 4px; }
  .ak-guide-grid p { font-size: 12px; }
  .ak-step-number { width: 44px; height: 44px; }

  .ak-cta { display: block; margin-top: 32px; padding: 26px; border-radius: var(--r-md); }
  .ak-cta h2 { font-size: 24px; margin-bottom: 8px; }
  .ak-cta p:not(.ak-eyebrow) { font-size: 12px; line-height: 1.95; }
  .ak-cta .ak-button { margin-top: 20px; min-height: 46px; font-size: 12px; }

  .ak-contribute { display: block; padding: 28px 0 34px; }
  .ak-contribute h2 { font-size: 20px; line-height: 1.6; }
  .ak-contribute p { font-size: 12px; }
  .ak-contribute .ak-button { margin-top: 18px; min-height: 46px; }

  .ak-listing-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .ak-listing-image { height: 180px; }
  .ak-listing-body { padding: 18px; }
  .ak-listing-card h3 { font-size: 16px; }
  .ak-listing-badges { gap: 4px; }
  .ak-listing-excerpt { font-size: 11px; }
  .ak-listing-grid .ak-tag, .ak-listing-grid .ak-badge { font-size: 9px; }

  .ak-notice-grid { grid-template-columns: 1fr; gap: 12px; }
  .ak-notice-card { padding: 20px; }

  .ak-page-hero { padding: 28px 0 24px; }
  .ak-page-hero h1 { font-size: 27px; }
  .ak-page-hero > div > p, .ak-page-intro { font-size: 12px; }
  .ak-breadcrumb { font-size: 10px; gap: 6px; }
  .ak-page-content, .ak-directory-main { padding-top: 24px; padding-bottom: 36px; }
  .ak-content { padding: 24px 20px; border-radius: var(--r-md); }
  .ak-entry-content h2 { font-size: 21px; }
  .ak-entry-content h3 { font-size: 18px; }
  .ak-entry-content p, .ak-entry-content li { font-size: 14px; }

  .ak-filter-form { padding: 18px; margin-bottom: 24px; }
  .ak-filter-top { grid-template-columns: 1fr; gap: 0 12px; }
  .ak-filter-top .ak-field { margin-bottom: 14px; }
  .ak-field label { font-size: 12px; }
  .ak-filter-top .ak-field select { font-size: 12px; }
  .ak-filter-bottom { gap: 10px; flex-wrap: wrap; }
  .ak-filter-bottom .ak-location-fields { margin-bottom: 3px; flex-basis: 100%; }
  .ak-filter-bottom .ak-button { flex: 1; min-height: 46px; }
  .ak-clear-filter { padding: 10px; font-size: 12px; }
  .ak-subcategory-list { gap: 7px; margin-bottom: 24px; }
  .ak-subcategory-list a { font-size: 11px; padding: 8px 11px; }
  .ak-results-heading { margin-bottom: 18px; gap: 10px; }
  .ak-results-heading h2 { font-size: 20px; }
  .ak-results-heading p { font-size: 11px; }

  .ak-empty-state { padding: 38px 20px; }
  .ak-empty-state h2 { font-size: 21px; }
  .ak-empty-state p { font-size: 12px; }
  .ak-empty-actions { gap: 10px; }
  .ak-empty-actions .ak-button { font-size: 12px; padding: 11px 16px; min-height: 44px; }

  .ak-detail-layout { grid-template-columns: 1fr; gap: 0; padding-top: 24px; padding-bottom: 32px; }
  .ak-detail-image { margin-bottom: 20px; }
  .ak-content-card { padding: 22px; }
  .ak-content-card h2 { font-size: 21px; }
  .ak-facts > div { grid-template-columns: 100px minmax(0,1fr); font-size: 13px; gap: 12px; }
  .ak-detail-sidebar { margin-top: 22px; }
  .ak-contact-actions .ak-button { min-height: 48px; }

  .ak-footer-prestrip { padding: 24px 0; }
  .ak-prestrip-copy h3 { font-size: 18px; }
  .ak-prestrip-actions { width: 100%; }
  .ak-prestrip-actions .ak-button { flex: 1; min-height: 44px; justify-content: center; }
  .ak-footer-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; padding-bottom: 28px; }
  .ak-footer-about { grid-column: auto; }
  .ak-footer-heading { font-size: 14px; margin-bottom: 14px; }
  .ak-footer-desc, .ak-contact-intro { font-size: 12px; }
  .ak-footer-links li a { font-size: 12px; }
  .ak-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 10.5px; padding-top: 16px; padding-bottom: 20px; }
  .ak-footer-legal-links { gap: 6px 8px; }

  /* Mobile bottom navigation — 5 tabs, fixed blur */
  .ak-mobile-nav {
    position: fixed; z-index: 90; right: 0; bottom: 0; left: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
    min-height: 68px;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-soft);
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(14px);
    box-shadow: 0 -4px 20px rgba(7,93,58,.07);
  }
  .ak-mobile-nav a {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    min-height: 54px; border-radius: 10px;
    color: var(--subtle); font-size: 10.5px; font-weight: 700; line-height: 1.4;
    transition: background var(--t-fast), color var(--t-fast);
    position: relative;
  }
  /* 4th tab (জরুরি/emergency red) */
  .ak-mobile-nav a:nth-child(4) { color: #b62030; }
  .ak-mobile-nav .ak-icon { width: 22px; height: 22px; }

  /* Active state with dot indicator matching reference design */
  .ak-mobile-nav a.is-active, .ak-mobile-nav a:hover {
    background: var(--brand-tint); color: var(--brand); font-weight: 700;
  }
  .ak-mobile-nav a.is-active::after {
    content: '';
    position: absolute; bottom: 4px;
    width: 4px; height: 4px; border-radius: 50%;
    background: currentColor;
  }
  .ak-mobile-nav a:nth-child(4).is-active,
  .ak-mobile-nav a:nth-child(4):hover { background: #fde8ea; color: #b62030; }

  .ak-form .ak-button { min-height: 46px; }
  .ak-alert { font-size: 12px; padding: 13px 16px; }
}

/* ── Very small phones (≤700px) — hero + priority tweaks ─────────────────── */
@media (max-width: 700px) {
  .ak-hero-inner { padding: 28px 0 26px; min-height: 0; }
  .ak-hero-title { font-size: 34px; line-height: 1.4; letter-spacing: -.6px; margin: 13px 0 10px; }
  .ak-hero-subtitle { font-size: 13px; max-width: 320px; margin-bottom: 18px; }
  .ak-hero-art { opacity: .22; object-position: 76% center; }
  .ak-hero::before { background: linear-gradient(90deg, rgba(242,249,236,.97), rgba(242,249,236,.62)); }

  .ak-priority-grid { grid-template-columns: 1fr; gap: 14px; }
  .ak-blood-panel { padding: 20px; }
  .ak-blood-heading h3 { font-size: 21px; }
  .ak-blood-groups { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
  .ak-urgent-links { gap: 10px; }
  .ak-urgent-links .ak-service-card {
    display: flex; flex-direction: row; align-items: center;
    gap: 10px; padding: 12px 14px; min-height: 76px;
  }
  .ak-urgent-links .ak-service-arrow { display: none; }
  .ak-urgent-links .ak-service-copy strong { font-size: 14px; }
  .ak-urgent-links .ak-service-copy small { font-size: 11px; }

  .ak-section-heading { gap: 10px; }
  .ak-section-heading h2 { font-size: 22px; }
  .ak-section-heading > .ak-text-link { font-size: 11px; }

  .ak-feature-card { min-height: 296px; }
  .ak-filter-form .ak-location-fields { grid-template-columns: 1fr; }
}

/* ── Tiny phones (≤380px) ───────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .ak-container { width: calc(100% - 20px); }
  .ak-hero-title { font-size: 30px; }
  .ak-hero-subtitle { font-size: 11.5px; }
  .ak-category-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px 6px; }
  .ak-category-card { font-size: 10px; }
  .ak-location-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .ak-location-card { min-height: 110px; }
  .ak-location-card > span { font-size: 11px; left: 6px; right: 6px; }
  .ak-service-card { padding: 12px 9px; gap: 7px; }
  .ak-service-card .ak-icon-box { width: 32px; height: 36px; }
  .ak-service-card .ak-icon-box .ak-icon { width: 20px; height: 20px; }
  .ak-service-copy strong { font-size: 11px; }
  .ak-service-copy small { font-size: 9px; }
  .ak-section-heading h2 { font-size: 19px; }
  .ak-feature-card { padding: 20px; }
  .ak-feature-card h2 { font-size: 21px; }
  .ak-feature-copy { width: 80%; }
  .ak-listing-grid { grid-template-columns: 1fr; }
  .ak-listing-image { height: 180px; }
  .ak-listing-card h3 { font-size: 17px; }
  .ak-area-section .ak-section-heading h2 { font-size: 18px; }
  .ak-area-section .ak-text-link { font-size: 9px; }
  .ak-facts > div { grid-template-columns: 86px minmax(0,1fr); }
}

/* ── Ultra small devices (≤360px) ───────────────────────────────────────────── */
@media (max-width: 360px) {
  .ak-container { width: calc(100% - 16px) !important; }
  .ak-brand .custom-logo,
  .ak-brand .custom-logo-link img { max-width: 105px !important; max-height: 38px !important; }
  .brand-name { font-size: 21px !important; }
  .ak-header-actions { gap: 3px !important; }
  .ak-header-actions .ak-icon-button,
  .ak-easy-mode-toggle { width: 32px !important; height: 32px !important; min-width: 32px !important; }
  .ak-header-actions .ak-icon-button .ak-icon { width: 17px !important; height: 17px !important; }
}

/* ── Interaction helpers, save/share tools, FAQ ─────────────────────────────── */
[hidden] { display: none !important; }

.ak-listing-tools {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px;
}
.ak-tool-button {
  font: inherit; font-size: 12px; padding: 9px 13px; min-height: 44px;
  border: 1.5px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--brand); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.ak-tool-button:hover,
.ak-tool-button[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--line); }

.ak-tool-status { width: 100%; margin: 0; font-size: 12px; color: #3d5e4a; overflow-wrap: anywhere; }
.ak-tool-status input { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
.ak-updated { font-size: 12px; color: #4e6457; }

/* FAQ accordion */
.ak-faq-list {
  background: #fff; border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ak-faq-list details + details { border-top: 1px solid var(--line-soft); }
.ak-faq-list summary {
  padding: 20px 26px; font-weight: 700; cursor: pointer;
  min-height: 58px; font-size: 14px;
  transition: background var(--t-fast), color var(--t-fast);
  list-style: none;
}
.ak-faq-list summary::-webkit-details-marker { display: none; }
.ak-faq-list details[open] summary { color: var(--brand); background: var(--brand-tint); }
.ak-faq-list details p {
  padding: 0 26px 22px; margin: 12px 0 0;
  color: var(--ink-mid); max-width: 900px; font-size: 14px; line-height: 1.9;
}
.ak-faq-list summary:focus-visible { outline: 3px solid #d49a22; outline-offset: -4px; }

/* Saved listing dialog */
.ak-saved-dialog {
  width: min(630px, calc(100% - 32px)); max-height: 80dvh;
  border: 1.5px solid var(--line); border-radius: var(--r-xl);
  padding: 28px; color: var(--ink);
  box-shadow: 0 28px 90px rgba(7,93,58,.20);
}
.ak-saved-dialog::backdrop { background: rgba(12,40,26,.65); }
.ak-saved-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.ak-saved-heading h2 { font-size: 23px; margin: 0; }
.ak-saved-dialog > p { font-size: 13px; color: var(--muted); }
.ak-saved-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.ak-saved-row a { overflow-wrap: anywhere; color: var(--brand); font-weight: 700; }
.ak-saved-row button { flex-shrink: 0; }

/* Back-to-top */
.ak-back-top {
  position: fixed; right: 22px; bottom: 26px; width: 44px; height: 44px; z-index: 45;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--brand);
  box-shadow: var(--shadow-md); font-size: 22px;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.ak-back-top:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Shared transition for all interactive cards */
.ak-service-card,
.ak-listing-card,
.ak-tool-button,
.ak-notice-card { transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease, border-color var(--t-fast) ease; }

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .ak-listing-card:hover,
  .ak-service-card:hover,
  .ak-category-card:hover,
  .ak-button:hover,
  .ak-location-card:hover { transform: none; }
}

/* ── Back-to-top mobile placement ─────────────────────────────────────────── */
@media (max-width: 700px) {
  .ak-back-top { bottom: 84px; right: 14px; }
  .ak-faq-list summary { padding: 17px 18px; font-size: 14px; }
  .ak-faq-list details p { padding: 0 18px 18px; font-size: 13px; }
  .ak-saved-dialog { padding: 20px; }
  .ak-saved-heading h2 { font-size: 20px; }
  .ak-header-actions { gap: 4px; }
}

/* =============================================================================
   PHASE 3: Professional Inner Pages & Design System Extensions
   ============================================================================= */

/* ── Hospital & Emergency Single & Card Variants ─────────────────────────── */
.ak-hospital-hero {
  background: linear-gradient(135deg, #e8f5f4 0%, #f4faf9 100%);
  border-bottom: 1.5px solid #c8e6e3;
}
.ak-hospital-hero h1 { color: #0b4e4b; }
.ak-hospital-hero .ak-hospital-type-badge { color: #0f615e; font-size: 15px; font-weight: 700; }
.ak-hospital-portrait {
  background: #d8eeeb !important;
  color: #0d6662 !important;
  border-color: #c4e4e0 !important;
}

.ak-emergency-hero {
  background: linear-gradient(135deg, #fff0f2 0%, #fff7f8 100%);
  border-bottom: 1.5px solid #f6cfd6;
}
.ak-emergency-hero h1 { color: #a01318; }
.ak-emergency-hero .ak-hospital-type-badge { color: #c4181d; font-size: 15px; font-weight: 700; }

.ak-button-emergency {
  background: #c4181d !important;
  border-color: #c4181d !important;
  color: #fff !important;
}
.ak-button-emergency:hover {
  background: #9e1014 !important;
  border-color: #9e1014 !important;
}

.ak-hospital-card {
  border-color: #cbe6e3;
}
.ak-hospital-card:hover {
  border-color: #9cd4cd;
  box-shadow: 0 8px 28px rgba(13,102,98,.10);
}
.ak-emergency-card {
  border-color: #f7d2d8;
}
.ak-emergency-card:hover {
  border-color: #e89aa6;
  box-shadow: 0 8px 28px rgba(196,24,29,.10);
}

.ak-hospital-badge {
  background: #e2f4f2;
  color: #0d6662;
  border: 1px solid #c2e6e2;
  font-size: 11px;
}
.ak-hospital-call {
  color: #0d6662;
  border-color: #c2e6e2;
}
.ak-emergency-call {
  color: #c4181d;
  border-color: #f6cfd6;
  background: #fff5f6;
}

/* ── National Helpline Box ─────────────────────────────────────────────────── */
.ak-helpline-box {
  margin: 22px 0 24px;
  padding: 20px 22px;
  background: linear-gradient(132deg, #fff3f5, #fff8f9);
  border: 1.5px solid #f6cfd6;
  border-radius: var(--r-md);
}
.ak-helpline-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a01318;
  font-size: 13.5px;
  margin-bottom: 12px;
}
.ak-helpline-title .ak-icon { width: 20px; height: 20px; }
.ak-helpline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ak-helpline-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid #f2bdc6;
  border-radius: 10px;
  color: #2b3a32;
  font-size: 12px;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.ak-helpline-chip strong {
  font-size: 16px;
  color: #c4181d;
  font-family: Arial, sans-serif;
  letter-spacing: .3px;
}
.ak-helpline-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(196,24,29,.12);
  border-color: #c4181d;
}

/* ── Upazila Landing Page & Quick Chips ────────────────────────────────────── */
.ak-upazila-hero {
  background: linear-gradient(138deg, #eff7f1 0%, #e2efe5 100%);
  border-bottom: 1px solid #d2e5d6;
}
.ak-upazila-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--brand-light);
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 12px;
}
.ak-upazila-badge .ak-icon { width: 14px; height: 14px; }

.ak-upazila-quick-links {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(7,93,58,.12);
}
.ak-quick-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-mid);
  margin: 0 0 10px;
}
.ak-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.ak-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid transparent;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
}
.ak-quick-chip .ak-icon { width: 16px; height: 16px; }
.ak-quick-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.ak-sublocation-panel {
  margin-bottom: 24px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.ak-sublocation-panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 14px;
}
.ak-sublocation-panel h3 .ak-icon { width: 18px; height: 18px; color: var(--brand); }

/* ── Subcategory Panel (Directory) ─────────────────────────────────────────── */
.ak-subcategory-panel {
  margin-bottom: 22px;
}
.ak-subcategory-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 9px;
}
.ak-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px;
}
.ak-category-badge .ak-icon { width: 14px; height: 14px; }

/* ── Search Results Page ───────────────────────────────────────────────────── */
.ak-search-results {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
}
.ak-search-card {
  padding: 22px 24px;
  background: #fff;
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.ak-search-card:hover {
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: var(--shadow-md);
}
.ak-search-card-meta { margin-bottom: 8px; }
.ak-search-card h2 { font-size: 18px; margin: 0 0 8px; line-height: 1.45; }
.ak-search-card h2 a { color: var(--ink); }
.ak-search-card h2 a:hover { color: var(--brand); }
.ak-search-card p { font-size: 13px; color: var(--ink-mid); margin: 0 0 12px; line-height: 1.7; }

/* ── 404 & Empty State Extensions ─────────────────────────────────────────── */
.ak-empty-state.ak-not-found {
  max-width: 680px;
  margin: 40px auto 50px;
  padding: 48px 32px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.ak-error-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand);
  margin-bottom: 8px;
}
.ak-error-badge .ak-icon { width: 32px; height: 32px; }
.ak-error-number {
  font-size: 48px;
  font-weight: 800;
  color: var(--brand);
  margin: 0 0 8px;
  letter-spacing: -1px;
  line-height: 1;
}
.ak-empty-state.ak-not-found h1 {
  font-size: 26px;
  margin: 0 0 12px;
}
.ak-error-message {
  font-size: 14px;
  color: var(--ink-mid);
  max-width: 480px;
  margin: 0 auto 24px;
  line-height: 1.8;
}
.ak-404-search {
  max-width: 520px;
  margin: 0 auto 24px;
}
.ak-404-search .ak-search-main {
  min-height: 52px;
}
.ak-404-quick-links {
  margin: 20px 0 28px;
  padding: 18px;
  background: var(--tint);
  border-radius: var(--r-sm);
}
.ak-404-quick-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ── Contact Page Cards Grid ───────────────────────────────────────────────── */
.ak-contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.ak-contact-info-card {
  padding: 24px 20px;
  background: var(--tint);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: center;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.ak-contact-info-card:hover {
  transform: translateY(-3px);
  border-color: var(--line);
}
.ak-contact-info-card .ak-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin: 0 auto 12px;
}
.ak-contact-info-card h3 {
  font-size: 16px;
  margin: 0 0 6px;
}
.ak-contact-info-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.6;
}

/* ── Responsive adjustments for Phase 3 components ─────────────────────────── */
@media (max-width: 767px) {
  .ak-contact-cards-grid { grid-template-columns: 1fr; gap: 12px; }
  .ak-helpline-chips { flex-direction: column; }
  .ak-helpline-chip { width: 100%; justify-content: flex-start; }
  .ak-empty-state.ak-not-found { padding: 32px 18px; margin: 24px auto; }
  .ak-error-number { font-size: 38px; }
  .ak-empty-state.ak-not-found h1 { font-size: 22px; }
  .ak-upazila-quick-links { margin-top: 18px; padding-top: 14px; }
  .ak-quick-chip { font-size: 11px; padding: 6px 11px; }
}

/* ── Upgraded Blood Assistance & Emergency Callouts ──────────────────────────── */
.ak-blood-badge-wrap { margin-bottom: 12px; }
.ak-urgent-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #d32f2f; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.25);
  animation: ak-pulse 2s infinite;
}
@keyframes ak-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.ak-blood-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; margin-bottom: 12px;
}
.ak-btn-donor-reg {
  background: var(--brand); color: #fff !important;
  border: 1px solid var(--brand); font-weight: 700;
}
.ak-btn-donor-reg:hover { background: #05482c; }
.ak-btn-blood-req {
  background: #fff; color: #d32f2f !important;
  border: 1.5px solid #d32f2f; font-weight: 700;
}
.ak-btn-blood-req:hover { background: #fdf2f4; }
.ak-blood-disclaimer {
  background: #fff8eb; border-left: 3px solid #e08e00;
  padding: 8px 12px; border-radius: 4px; font-size: 11.5px;
  color: #7a4d00; line-height: 1.5; margin: 10px 0 14px;
}

/* ── Welcome Modal (Phase 5) ──────────────────────────────────────────────── */
.ak-welcome-dialog {
  border: none; border-radius: 16px; padding: 0;
  max-width: 520px; width: calc(100% - 32px);
  background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  margin: auto; overflow: hidden;
}
.ak-welcome-dialog::backdrop {
  background: rgba(10, 30, 20, 0.6);
  backdrop-filter: blur(4px);
}
.ak-welcome-dialog-inner {
  padding: 32px 28px; text-align: center;
}
.ak-welcome-dialog-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #e8f5ea; color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.ak-welcome-dialog-icon .ak-icon { width: 32px; height: 32px; }
.ak-welcome-dialog-inner h2 {
  font-size: 22px; color: #1a2e22; margin: 0 0 12px; line-height: 1.35;
}
.ak-welcome-dialog-inner p {
  font-size: 14px; color: var(--muted); margin: 0 0 24px; line-height: 1.6;
}
.ak-welcome-dialog-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
}
.ak-welcome-dialog-actions .ak-button { min-width: 140px; }

/* ── Floating Blood Assistance Widget (Phase 6) ────────────────────────────── */
.ak-blood-floater {
  position: fixed; bottom: 85px; right: 24px; z-index: 999;
  max-width: 340px; width: calc(100% - 40px);
  background: #fff; border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
  border: 1.5px solid #fbd5dc; padding: 16px 18px;
  animation: ak-slide-up 0.4s ease-out;
}
@keyframes ak-slide-up {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.ak-blood-floater-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; font-size: 16px;
  color: #888; cursor: pointer; padding: 4px; line-height: 1;
}
.ak-blood-floater-close:hover { color: #d32f2f; }
.ak-blood-floater-content {
  display: flex; gap: 12px; align-items: flex-start;
}
.ak-blood-floater-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: #fde8ec; color: #d32f2f;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ak-blood-floater-icon .ak-icon { width: 22px; height: 22px; }
.ak-blood-floater h4 {
  font-size: 15px; margin: 0 0 4px; color: #9c1c32; line-height: 1.3;
}
.ak-blood-floater p {
  font-size: 12px; color: #666; margin: 0 0 10px; line-height: 1.4;
}
.ak-blood-floater-actions { display: flex; gap: 8px; }
.ak-floater-btn {
  font-size: 12px; font-weight: 700; padding: 6px 12px;
  border-radius: 6px; text-decoration: none; text-align: center;
}
.ak-floater-btn-red { background: #d32f2f; color: #fff !important; }
.ak-floater-btn-green { background: #e8f5ea; color: #075d3a !important; }

/* ── Internal Messaging System (Phase 7) ─────────────────────────────────── */
.ak-messaging-wrapper {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px; margin: 24px auto 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.ak-messaging-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 14px; border-bottom: 1px solid var(--line);
  padding-bottom: 18px; margin-bottom: 20px;
}
.ak-messaging-header h2 { margin: 0 0 4px; font-size: 22px; }
.ak-messaging-header p { margin: 0; font-size: 13.5px; color: var(--muted); }
.ak-messaging-layout {
  display: grid; grid-template-columns: 300px 1fr; gap: 20px; min-height: 480px;
}
.ak-threads-list {
  background: #fbfdfc; border: 1px solid var(--line);
  border-radius: 8px; padding: 14px; overflow-y: auto; max-height: 600px;
}
.ak-threads-list h3 { font-size: 15px; margin: 0 0 12px; color: #333; }
.ak-threads-list ul { list-style: none; margin: 0; padding: 0; }
.ak-threads-list li {
  margin-bottom: 6px; border-radius: 6px; transition: background 0.2s;
}
.ak-threads-list li.is-active { background: #e8f5ea; }
.ak-threads-list a {
  display: block; padding: 10px 12px; text-decoration: none; color: inherit;
}
.ak-thread-item-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.ak-thread-item-head strong { font-size: 13.5px; color: #222; }
.ak-unread-dot {
  background: #d32f2f; color: #fff; border-radius: 50%;
  width: 18px; height: 18px; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.ak-thread-item-meta {
  display: flex; justify-content: space-between; font-size: 11px; color: #777;
}
.ak-thread-badge {
  padding: 2px 6px; border-radius: 4px; font-weight: 700; font-size: 10px;
}
.badge-open { background: #fff3cd; color: #856404; }
.badge-replied { background: #d4edda; color: #155724; }
.badge-resolved { background: #e2e3e5; color: #383d41; }
.ak-chat-window {
  border: 1px solid var(--line); border-radius: 8px;
  display: flex; flex-direction: column; overflow: hidden; background: #fff;
}
.ak-chat-header {
  padding: 14px 18px; background: #fbfdfc; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.ak-chat-header h3 { margin: 0 0 4px; font-size: 16px; }
.ak-chat-header small { color: var(--muted); font-size: 12px; }
.ak-messages-stream {
  flex: 1; padding: 18px; overflow-y: auto; max-height: 400px;
  background: #f7faf8; display: flex; flex-direction: column; gap: 14px;
}
.ak-msg-row { display: flex; width: 100%; }
.ak-msg-customer { justify-content: flex-start; }
.ak-msg-admin { justify-content: flex-end; }
.ak-msg-bubble {
  max-width: 78%; padding: 12px 16px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.5; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.ak-msg-customer .ak-msg-bubble {
  background: #fff; border: 1px solid #ddd;
  border-top-left-radius: 2px;
}
.ak-msg-admin .ak-msg-bubble {
  background: #e8f5ea; border: 1px solid #c8e6c9;
  color: #1a4d2e; border-top-right-radius: 2px;
}
.ak-msg-sender {
  font-size: 11px; font-weight: 700; margin-bottom: 4px; color: #555;
  display: flex; align-items: center; gap: 6px;
}
.ak-admin-pill {
  background: #075d3a; color: #fff; padding: 1px 6px;
  border-radius: 4px; font-size: 9px;
}
.ak-msg-time {
  display: block; font-size: 10.5px; color: #888;
  margin-top: 6px; text-align: right;
}
.ak-reply-box {
  padding: 14px 18px; background: #fff; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.ak-reply-box textarea {
  width: 100%; padding: 10px; border: 1.5px solid var(--line);
  border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical;
}
.ak-reply-box textarea:focus {
  border-color: var(--brand); outline: none;
}
.ak-chat-placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 300px; color: var(--muted); font-size: 14px;
}
.ak-resolved-notice {
  padding: 14px; margin: 0; background: #fdf2f4;
  color: #9c1c32; font-size: 13px; text-align: center;
}

/* ── Spinner & Loading (Phase 2 & 8) ────────────────────────────────────────── */
.ak-spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid rgba(7, 93, 58, 0.2);
  border-top-color: var(--brand); border-radius: 50%;
  animation: ak-spin 0.7s linear infinite;
}
@keyframes ak-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  .ak-blood-floater {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
  }
  .ak-messaging-layout { grid-template-columns: 1fr; }
  .ak-threads-list { max-height: 200px; }
}

/* ── Easy Mode Toggle Button & Styles (Priority 4) ───────────────────────── */
.ak-easy-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1.5px solid #075d3a;
  background: #f0fdf4;
  color: #075d3a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}
.ak-easy-mode-toggle:hover {
  background: #075d3a;
  color: #fff;
}
.ak-easy-mode-toggle.is-active {
  background: #075d3a;
  color: #fff;
  border-color: #075d3a;
  box-shadow: 0 0 0 3px rgba(7, 93, 58, 0.25);
}
.ak-easy-mode-icon {
  font-size: 15px;
}

body.ak-easy-mode {
  font-size: 18px;
  line-height: 1.75;
  color: #052214;
  background-color: #fbfdfc;
}
body.ak-easy-mode h1,
body.ak-easy-mode h2,
body.ak-easy-mode h3 {
  color: #022010;
  font-weight: 800;
  letter-spacing: -0.01em;
}
body.ak-easy-mode a {
  text-decoration-thickness: 2px;
}
body.ak-easy-mode .ak-listing-card {
  border: 2px solid #075d3a;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(7, 93, 58, 0.12);
  padding: 18px;
}
body.ak-easy-mode .ak-listing-card h3 a {
  font-size: 1.35rem;
  line-height: 1.4;
  color: #022010;
}
body.ak-easy-mode .ak-listing-excerpt {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #1a382b;
}
body.ak-easy-mode .ak-button,
body.ak-easy-mode .ak-call-link {
  min-height: 52px;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 12px 24px;
}
body.ak-easy-mode .ak-call-link {
  background: #075d3a;
  color: #fff;
  border-radius: 8px;
}
body.ak-easy-mode .ak-call-link:hover {
  background: #054028;
}
body.ak-easy-mode .ak-call-link.ak-emergency-call {
  background: #dc2626;
  color: #fff;
}
body.ak-easy-mode .ak-field input,
body.ak-easy-mode .ak-field select {
  font-size: 1.05rem;
  padding: 12px 14px;
  border: 2px solid #075d3a;
}
body.ak-easy-mode .ak-badge {
  font-size: 0.95rem;
  padding: 5px 10px;
  font-weight: 700;
}

/* ── Nearby Geolocation Button & Distance Badge (Priority 5) ─────────────── */
.ak-btn-nearby {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  color: #075d3a;
  border: 1.5px solid #075d3a;
  font-weight: 700;
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ak-btn-nearby:hover {
  background: #075d3a;
  color: #fff;
}
.ak-badge-distance {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  font-weight: 700 !important;
}

/* ── Heritage and Historical Personality Styling (Priority 1) ───────────── */
.ak-heritage-hero {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #e0f2fe 100%);
  border-bottom: 2px solid #bbf7d0;
}
.ak-heritage-portrait {
  background: #dcfce7;
  color: #166534;
  border: 2px solid #86efac;
}
.ak-heritage-card {
  border-top: 3px solid #16a34a !important;
}
.ak-badge-lifespan {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

/* ── Citizen Service Guides (Priority 2) ─────────────────────────────────── */
.ak-citizen-guides-wrap {
  margin: 2rem 0;
}
.ak-guides-header {
  margin-bottom: 1.5rem;
  text-align: center;
}
.ak-guides-header h2 {
  font-size: 1.6rem;
  color: #075d3a;
  margin-bottom: 6px;
}
.ak-guides-intro {
  color: #4b6356;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.6;
}
.ak-guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 20px;
  margin-top: 1.5rem;
}
.ak-guide-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-top: 4px solid var(--brand, #075d3a);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.ak-guide-card.ak-tone-green { border-top-color: #16a34a; }
.ak-guide-card.ak-tone-blue { border-top-color: #2563eb; }
.ak-guide-card.ak-tone-teal { border-top-color: #0d9488; }
.ak-guide-card.ak-tone-orange { border-top-color: #d97706; }
.ak-guide-card.ak-tone-purple { border-top-color: #9333ea; }
.ak-guide-authority {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ak-guide-card h3 {
  font-size: 1.25rem;
  margin: 6px 0 4px;
  color: #0f172a;
}
.ak-guide-subtitle {
  font-size: 0.88rem;
  color: #64748b;
  margin-bottom: 14px;
}
.ak-guide-section {
  margin-bottom: 14px;
}
.ak-guide-section h4 {
  font-size: 0.95rem;
  margin: 0 0 6px;
  color: #1e293b;
  font-weight: 700;
}
.ak-guide-section p {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}
.ak-guide-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ak-guide-checklist li {
  font-size: 0.88rem;
  color: #334155;
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.5;
}
.ak-doc-check {
  color: #16a34a;
  font-weight: 800;
  flex-shrink: 0;
}
.ak-guide-steps {
  margin: 0;
  padding-left: 20px;
  color: #334155;
  font-size: 0.88rem;
  line-height: 1.55;
}
.ak-guide-steps li {
  margin-bottom: 6px;
}
.ak-guide-facts-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ak-guide-card-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}
.ak-btn-portal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: #075d3a;
  color: #fff !important;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ak-btn-portal:hover {
  background: #05442a;
}
.ak-guide-checked {
  font-size: 0.78rem;
  color: #94a3b8;
  text-align: right;
}

/* ── Event Calendar (Priority 6) ─────────────────────────────────────────── */
.ak-events-calendar-wrap {
  margin: 2rem 0;
}
.ak-events-header {
  margin-bottom: 1.5rem;
}
.ak-events-header h2 {
  font-size: 1.5rem;
  color: #075d3a;
  margin-bottom: 6px;
}
.ak-events-intro {
  color: #4b6356;
}
.ak-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.ak-event-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.ak-event-date-col {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ak-event-day {
  font-size: 1.4rem;
  font-weight: 800;
  color: #166534;
  line-height: 1;
}
.ak-event-month {
  font-size: 0.75rem;
  color: #166534;
  font-weight: 700;
  text-transform: uppercase;
}
.ak-event-content-col {
  flex: 1;
  min-width: 0;
}
.ak-event-meta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ak-event-venue {
  font-size: 0.8rem;
  color: #64748b;
}
.ak-event-title {
  font-size: 1.05rem;
  margin: 0 0 6px;
  color: #0f172a;
}
.ak-event-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 8px;
}
.ak-event-organizer {
  font-size: 0.8rem;
  color: #64748b;
}

/* Customer Authentication & Dashboard Styles */
.ak-password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.ak-password-input-wrap input {
  padding-right: 48px;
}
.ak-toggle-password {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
  font-size: 1.15rem;
  line-height: 1;
  border-radius: 6px;
  color: #566e62;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ak-toggle-password:hover {
  color: #075d3a;
  background: #eef6f2;
}
.ak-strength-meter {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ak-strength-bar-wrap {
  height: 5px;
  width: 100%;
  background: #e1ece6;
  border-radius: 3px;
  overflow: hidden;
}
.ak-strength-bar {
  height: 100%;
  width: 0;
  transition: width .3s ease, background-color .3s ease;
  border-radius: 3px;
}
.ak-strength-text {
  font-size: .78rem;
  font-weight: 700;
}
.ak-auth-tab-switch {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}
.ak-auth-tab-btn {
  padding: 10px 22px;
  border: 1px solid #dce9e1;
  background: #fff;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  color: #566e62;
  cursor: pointer;
  transition: all .2s ease;
}
.ak-auth-tab-btn.is-active,
.ak-auth-tab-btn:hover {
  background: #075d3a;
  color: #fff;
  border-color: #075d3a;
  box-shadow: 0 3px 8px rgba(7,93,58,.18);
}
.ak-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}
.ak-saved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}
.ak-saved-card {
  background: #fff;
  border: 1px solid #dce9e1;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: box-shadow .2s ease;
}
.ak-saved-card:hover {
  box-shadow: 0 4px 14px rgba(7,93,58,.08);
}


/* =============================================================================
   FINAL PREMIUM UI, MOBILE COMPACTNESS, WELCOME POPUP & FB/MESSENGER WIDGET
   ============================================================================= */

.ak-cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
  flex-shrink: 0;
}

/* Colorful icon-based category cards */
.ak-category-card {
  border: 1px solid var(--line-soft);
  background: #fbfdfb;
}
.ak-category-card.ak-category-tone-green  { background: #f4fbf6; border-color: #d8eee0; }
.ak-category-card.ak-category-tone-teal   { background: #f2faf9; border-color: #d4ecea; }
.ak-category-card.ak-category-tone-blue   { background: #f3f8fe; border-color: #d8e7fb; }
.ak-category-card.ak-category-tone-rose   { background: #fff5f7; border-color: #f9d8e0; }
.ak-category-card.ak-category-tone-orange { background: #fff9f2; border-color: #f7e3c8; }
.ak-category-card.ak-category-tone-purple { background: #f8f5fd; border-color: #e5d8f8; }
.ak-category-card.ak-category-tone-pink   { background: #fdf5fa; border-color: #f4d8eb; }

/* Upgraded Welcome & Add Info Modal */
.ak-welcome-dialog {
  border: 1.5px solid #cde2d4;
  border-radius: 20px;
  padding: 0;
  max-width: 480px;
  width: calc(100% - 28px);
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(7, 93, 58, 0.24);
  margin: auto;
  overflow: hidden;
}
.ak-welcome-dialog-inner {
  position: relative;
  padding: 30px 26px 26px;
  text-align: center;
  background: linear-gradient(180deg, #f2faf5 0%, #ffffff 42%);
}
.ak-welcome-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #d5e6dc;
  background: #ffffff;
  color: #4b6356;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.ak-welcome-close:hover {
  background: #fde8ec;
  color: #c4181d;
  border-color: #f5c2cb;
}
.ak-welcome-dialog-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, #075d3a 0%, #0d7a4e 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 8px 20px rgba(7, 93, 58, 0.22);
}
.ak-welcome-dialog-inner h2 {
  font-size: 23px;
  color: #075d3a;
  margin: 0 0 10px;
  font-weight: 800;
}
.ak-welcome-dialog-inner .ak-welcome-lead {
  font-size: 14px;
  color: #2e4a38;
  margin: 0 0 10px;
  line-height: 1.75;
}
.ak-welcome-dialog-inner .ak-welcome-sub {
  font-size: 13.5px;
  font-weight: 700;
  color: #075d3a;
  background: #eef8f1;
  border: 1px solid #d4ebdc;
  border-radius: 10px;
  padding: 9px 12px;
  margin: 0 0 20px;
  line-height: 1.6;
}
.ak-welcome-dialog-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ak-welcome-dialog-actions .ak-button {
  min-width: 145px;
  min-height: 44px;
}

/* Emergency Blood Assistance Widget button refinement */
.ak-blood-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 12px;
}
.ak-btn-blood-req {
  background: linear-gradient(180deg, #e53935 0%, #c62828 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #b71c1c !important;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(198, 40, 40, 0.22);
}
.ak-btn-blood-req:hover {
  background: linear-gradient(180deg, #ef5350 0%, #b71c1c 100%) !important;
  color: #ffffff !important;
}
.ak-btn-donor-reg {
  background: linear-gradient(180deg, #097247 0%, #075d3a 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #075d3a !important;
  font-weight: 700;
}

/* Compact Floating Facebook & Messenger Communication Widget (Requirement 9) */
.ak-fb-comm-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 85;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 260px;
}
.ak-fb-comm-panel {
  background: #ffffff;
  border: 1.5px solid #cde2d4;
  border-radius: 16px;
  padding: 12px;
  width: 244px;
  box-shadow: 0 12px 32px rgba(7, 93, 58, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ak-fb-comm-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid #e6f0ea;
  font-size: 12.5px;
  color: #075d3a;
}
.ak-fb-comm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  flex-shrink: 0;
}
.ak-fb-comm-minimize {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #d5e6dc;
  background: #f4faf6;
  color: #075d3a;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ak-fb-comm-minimize:hover {
  background: #075d3a;
  color: #ffffff;
}
.ak-fb-comm-links {
  display: grid;
  gap: 7px;
}
.ak-fb-comm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.ak-fb-comm-btn .ak-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.ak-fb-comm-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.ak-fb-comm-messenger {
  background: linear-gradient(135deg, #0084ff 0%, #1877f2 100%);
  color: #ffffff !important;
  border: 1px solid #0073e6;
  box-shadow: 0 3px 10px rgba(24, 119, 242, 0.24);
}
.ak-fb-comm-page {
  background: #f0fdf4;
  color: #075d3a !important;
  border: 1.5px solid #075d3a;
}
.ak-fb-comm-page:hover {
  background: #075d3a;
  color: #ffffff !important;
}
.ak-fb-comm-launcher {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid #ffffff;
  background: linear-gradient(135deg, #075d3a 0%, #1877f2 100%);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(7, 93, 58, 0.28);
  cursor: pointer;
}
.ak-fb-comm-launcher .ak-icon {
  width: 18px;
  height: 18px;
}
.ak-fb-comm-widget.is-minimized .ak-fb-comm-panel {
  display: none;
}
.ak-fb-comm-widget.is-minimized .ak-fb-comm-launcher {
  display: inline-flex;
}

/* Keep back-to-top on left side so it never collides with FB widget */
.ak-back-top {
  left: 20px;
  right: auto;
  bottom: 20px;
}

@media (max-width: 767px) {
  .ak-hero-inner {
    min-height: 0;
    padding: 22px 0 32px;
  }
  .ak-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 6px;
    padding: 14px 10px;
  }
  .ak-category-card {
    padding: 8px 4px;
    gap: 6px;
    font-size: 11px;
    border-radius: 12px;
  }
  .ak-category-card .ak-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  .ak-category-card .ak-icon-box .ak-icon {
    width: 22px;
    height: 22px;
  }
  .ak-blood-actions {
    grid-template-columns: 1fr;
  }
  .ak-cta-actions {
    margin-top: 16px;
    width: 100%;
  }
  .ak-cta-actions .ak-button {
    flex: 1 1 auto;
    justify-content: center;
  }
  .ak-fb-comm-widget {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
  }
  .ak-fb-comm-panel {
    width: min(236px, calc(100vw - 24px));
    padding: 10px;
  }
  .ak-fb-comm-launcher {
    min-height: 38px;
    padding: 6px 12px;
    font-size: 12px;
  }
  .ak-back-top {
    left: 12px;
    right: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}


/* =============================================================================
   COMPLETE MULTI-VIEWPORT & ORIENTATION RESPONSIVE ARCHITECTURE
   Covers: 320px, 360px, 375px, 390px, 414px, 480px, 600px, 768px,
           820px, 1024px, 1280px, 1366px, 1440px, 1920px+ & Landscape
   ============================================================================= */

/* Hide mobile-only drawer quick buttons on desktop */
.ak-mobile-drawer-actions {
  display: none;
}

/* Global safeguard against child element horizontal overflow */
.ak-content,
.ak-content-card,
.ak-listing-card,
.ak-service-card,
.ak-feature-card,
.ak-blood-panel,
.ak-search-panel,
.ak-filter-form {
  max-width: 100%;
  min-width: 0;
}

/* Responsive tables inside page/listing content */
.ak-entry-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Popups: fit within viewport height & width with internal scrolling */
.ak-welcome-dialog,
.ak-saved-dialog {
  max-width: min(500px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Large Desktop & Wide Monitors (1440px, 1920px+) */
@media (min-width: 1440px) {
  .ak-container {
    width: min(1280px, calc(100% - 80px));
  }
  .ak-hero-inner {
    max-width: 820px;
    padding: 48px 0 60px;
  }
}

/* Intermediate Laptop / Tablet Landscape (820px – 1100px) */
@media (max-width: 1100px) {
  .ak-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ak-location-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Tablet Portrait & Phablet (≤991px: covers 820px, 768px) */
@media (max-width: 991px) {
  .ak-priority-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ak-blood-groups {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .ak-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ak-location-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ak-mobile-drawer-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
  }
  .ak-mobile-drawer-actions .ak-button {
    width: 100%;
    justify-content: center;
  }
}

/* Stack Single Listing Sidebar cleanly at ≤860px (covers 820px and 768px tablets) */
@media (max-width: 860px) {
  .ak-detail-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ak-detail-sidebar {
    margin-top: 0;
  }
}

/* Mobile & Small Tablet (≤767px: covers 600px, 480px, 414px, 390px, 375px, 360px, 320px) */
@media (max-width: 767px) {
  body {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
  .ak-blood-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .ak-feature-copy {
    width: 100%;
  }
  .ak-feature-image {
    opacity: 0.18;
    right: -12px;
    bottom: 12px;
    width: 38%;
    pointer-events: none;
  }
  .ak-results-heading {
    flex-wrap: wrap;
    gap: 6px 12px;
  }
}

/* Phablets & Large Phones (≤599px: covers 480px, 414px, 390px, 375px, 360px, 320px) */
@media (max-width: 599px) {
  .ak-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 8px;
    padding: 14px 10px;
  }
  .ak-category-card {
    font-size: 11.5px;
    line-height: 1.45;
    padding: 10px 6px;
  }
  .ak-service-grid,
  .ak-urgent-links {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ak-service-card,
  .ak-urgent-links .ak-service-card {
    min-height: 72px;
    padding: 12px 14px;
    align-items: center;
    flex-direction: row;
  }
  .ak-service-arrow,
  .ak-urgent-links .ak-service-arrow {
    display: inline-block;
  }
  .ak-location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .ak-location-fields {
    grid-template-columns: 1fr;
  }
}

/* Standard & Compact Phones (≤480px: covers 480px, 414px, 390px, 375px, 360px, 320px) */
@media (max-width: 480px) {
  .ak-container {
    width: calc(100% - 24px);
  }
  .ak-brand-with-logo .brand-domain {
    display: none;
  }
  .ak-nav .primary-menu {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ak-search-main {
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 8px;
  }
  .ak-search-main input {
    flex: 1 1 calc(100% - 34px);
    min-height: 40px;
  }
  .ak-search-main button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }
  .ak-content,
  .ak-content-card {
    padding: 18px 15px;
  }
  .ak-facts > div {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }
  .ak-facts dt {
    font-weight: 700;
    font-size: 12px;
  }
  .ak-welcome-dialog-inner {
    padding: 24px 18px 20px;
  }
  .ak-welcome-dialog-inner h2 {
    font-size: 20px;
  }
  .ak-welcome-dialog-actions {
    flex-direction: column;
  }
  .ak-welcome-dialog-actions .ak-button {
    width: 100%;
  }
}

/* Small Phones (≤380px: covers 375px, 360px, 320px) */
@media (max-width: 380px) {
  .ak-container {
    width: calc(100% - 20px) !important;
  }
  /* When custom logo image is present alongside text, hide duplicate text on ≤380px so header icons never collide */
  .ak-brand-with-logo .ak-brand-text-group {
    display: none;
  }
  .brand-name {
    font-size: 20px !important;
    letter-spacing: -0.8px !important;
  }
  .brand-domain {
    font-size: 8px !important;
  }
  .ak-header-actions {
    gap: 2px !important;
  }
  .ak-header-actions .ak-icon-button,
  .ak-easy-mode-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  .ak-mobile-nav a {
    font-size: 9.5px;
    gap: 2px;
    min-height: 50px;
  }
  .ak-mobile-nav .ak-icon {
    width: 19px;
    height: 19px;
  }
}

/* Ultra-Small Phones (≤339px: covers 320px) */
@media (max-width: 339px) {
  .ak-container {
    width: calc(100% - 16px) !important;
  }
  .brand-name {
    font-size: 18px !important;
  }
  .ak-header-actions .ak-icon-button,
  .ak-easy-mode-toggle {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
  }
  .ak-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ak-blood-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .ak-blood-groups a {
    min-height: 40px;
    font-size: 13px;
  }
}

/* Landscape Mobile Orientation (Short Viewport Height ≤540px) */
@media (max-height: 540px) and (orientation: landscape) {
  .ak-header-inner {
    min-height: 54px;
  }
  .ak-hero-inner {
    min-height: 0;
    padding: 18px 0 24px;
  }
  .ak-welcome-dialog,
  .ak-saved-dialog {
    max-height: calc(100dvh - 16px);
  }
  .ak-welcome-dialog-inner {
    padding: 16px 20px;
  }
  .ak-welcome-dialog-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
  }
  .ak-welcome-dialog-inner h2 {
    font-size: 18px;
    margin-bottom: 6px;
  }
  .ak-welcome-dialog-inner .ak-welcome-lead,
  .ak-welcome-dialog-inner .ak-welcome-sub {
    font-size: 12.5px;
    margin-bottom: 8px;
    padding: 6px 10px;
  }
  .ak-welcome-dialog-actions {
    flex-direction: row;
  }
  .ak-mobile-nav {
    min-height: 52px;
    padding-top: 3px;
    padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px));
  }
  .ak-mobile-nav a {
    min-height: 44px;
    flex-direction: row;
    gap: 5px;
  }
  .ak-fb-comm-widget {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  .ak-back-top {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}


/* =============================================================================
   HOMEPAGE HERO, SEARCH CARD, POPULAR SEARCHES, QUICK SERVICE GRID & AREA BANNER
   Matches Official Amar Khulna Visual Design Reference Across All Viewports
   ============================================================================= */

/* Official Pin + Bridge + Red Sun Emblem Brand Header */
.ak-brand-with-emblem {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.ak-brand-emblem {
  width: 38px;
  height: 42px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 5px rgba(7, 93, 58, 0.16));
}
.ak-brand-with-emblem .brand-name {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.08;
  color: var(--brand);
}
.ak-brand-with-emblem .brand-name > span {
  color: var(--brand-accent);
}
.ak-brand-with-emblem .brand-name > i {
  display: none;
}
.ak-brand-with-emblem .brand-domain {
  display: none;
}

/* Modern Scenic Hero Banner with Readable Dark Overlay */
.ak-hero.ak-hero-modern {
  background: transparent;
  overflow: visible;
  padding-bottom: 10px;
}
.ak-hero-banner-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #063824;
  min-height: 350px;
  display: flex;
  align-items: center;
  padding: 36px 0 84px;
}
.ak-hero-banner-wrap .ak-hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 1 !important;
}
.ak-hero-banner-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg, rgba(4, 34, 24, 0.90) 0%, rgba(5, 48, 33, 0.78) 45%, rgba(8, 52, 37, 0.34) 78%, rgba(8, 52, 37, 0.18) 100%),
    linear-gradient(180deg, rgba(4, 28, 19, 0.30) 0%, rgba(4, 28, 19, 0.55) 100%);
}
.ak-hero-modern .ak-hero-inner {
  min-height: 0;
  max-width: 680px;
  padding: 0;
  margin: 0;
}
.ak-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(9, 70, 46, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.ak-hero-pill .ak-icon {
  width: 15px;
  height: 15px;
  color: #ffffff;
  flex-shrink: 0;
}
.ak-hero-modern .ak-hero-title {
  margin: 0 0 12px;
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -1px;
  color: #ffffff;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.38);
}
.ak-hero-modern .ak-hero-title .ak-hero-title-main {
  color: #ffffff;
}
.ak-hero-modern .ak-hero-title .ak-hero-title-accent {
  color: #facc15;
}
.ak-hero-modern .ak-hero-subtitle {
  max-width: 520px;
  margin: 0;
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 600;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Overlapping Floating Search Panel */
.ak-hero-search-container {
  position: relative;
  z-index: 6;
  margin-top: -58px;
}
.ak-search-panel.ak-hero-search-card {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(14px, 2.5vw, 22px);
  background: #ffffff;
  border: 1px solid #e2ece5;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(6, 52, 33, 0.13), 0 3px 10px rgba(0, 0, 0, 0.04);
}

/* 5 Search Category Tabs */
.ak-search-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.ak-search-tabs::-webkit-scrollbar {
  display: none;
}
.ak-search-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 7px 15px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: #1e3a2b;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.ak-search-tab .ak-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ak-search-tab:hover {
  background: #eff7f2;
  color: var(--brand);
}
.ak-search-tab.is-active {
  background: var(--brand);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(7, 93, 58, 0.24);
}
.ak-search-tab.is-active .ak-icon {
  color: #ffffff;
}

/* Search Input Bar & Submit Button Row */
.ak-search-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}
.ak-hero-search-card .ak-search-main {
  min-height: 50px;
  padding: 4px 14px;
  border: 1.5px solid #e3ebe6;
  border-radius: 13px;
  background: #f5f8f6;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.ak-hero-search-card .ak-search-main:focus-within {
  background: #ffffff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(7, 93, 58, 0.12);
}
.ak-hero-search-card .ak-search-main > .ak-icon {
  width: 20px;
  height: 20px;
  color: #2e4a38;
  flex-shrink: 0;
}
.ak-hero-search-card .ak-search-main input {
  width: 100%;
  min-height: 40px;
  font-size: 14.5px;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 4px 0;
}
.ak-hero-search-card .ak-search-main input::placeholder {
  color: #7b8e83;
}
.ak-search-submit {
  min-height: 50px;
  padding: 10px 22px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 800;
  gap: 6px;
  background: linear-gradient(180deg, #097247 0%, #075d3a 100%);
  white-space: nowrap;
  flex-shrink: 0;
}
.ak-search-submit .ak-icon {
  width: 16px;
  height: 16px;
}

/* District & Upazila Location Row */
.ak-hero-location-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.ak-loc-pill {
  position: relative;
  display: flex;
  align-items: center;
  background: #f3f6f4;
  border: 1px solid #e2ebe5;
  border-radius: 12px;
  min-height: 44px;
  padding: 0 12px;
  min-width: 0;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.ak-loc-pill:focus-within {
  background: #ffffff;
  border-color: var(--brand);
}
.ak-loc-pill > .ak-icon {
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  color: #1f3a2c !important;
  flex-shrink: 0;
  margin-right: 8px;
}
.ak-loc-pill select {
  width: 100%;
  min-width: 0;
  min-height: 42px !important;
  padding: 6px 22px 6px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #1f3a2c !important;
  font-size: 13px !important;
  font-weight: 700;
  box-shadow: none !important;
  cursor: pointer;
  text-overflow: ellipsis;
}
.ak-sublocation-cascade {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ak-sublocation-cascade[hidden] {
  display: none !important;
}

/* Popular Search Suggestions Row */
.ak-popular-searches {
  max-width: 860px;
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  padding: 0 4px;
}
.ak-popular-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  color: #1c3527;
  white-space: nowrap;
}
.ak-fire-emoji {
  font-size: 15px;
  line-height: 1;
}
.ak-popular-pills {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.ak-popular-pills a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: #eef2f0;
  border: 1px solid #e0e8e3;
  color: #243b2e;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ak-popular-pills a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Compact, Colorful 10-Service Icon Grid */
.ak-quick-services-section {
  margin-top: 18px !important;
}
.ak-quick-service-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px 12px;
  max-width: 860px;
  margin: 0 auto;
  padding: 6px 0 10px;
}
.ak-quick-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  min-width: 0;
  padding: 4px 2px;
  border-radius: 16px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ak-quick-service-item:hover {
  transform: translateY(-3px);
}
.ak-qs-icon-tile {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ak-quick-service-item:hover .ak-qs-icon-tile {
  transform: scale(1.05);
  box-shadow: 0 8px 18px rgba(7, 93, 58, 0.10);
}
.ak-qs-icon-tile .ak-icon {
  width: 30px;
  height: 30px;
  stroke-width: 2;
}
.ak-qs-label {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  color: #182e21;
  overflow-wrap: anywhere;
}

/* Vibrant Pastel Tones Matching Mockup */
.ak-qs-icon-tile.tone-rose    { background: #ffe4e8; color: #e8172b; }
.ak-qs-icon-tile.tone-blue    { background: #e0f2fe; color: #0284c7; }
.ak-qs-icon-tile.tone-emerald { background: #dcfce7; color: #16a34a; }
.ak-qs-icon-tile.tone-orange  { background: #ffedd5; color: #ea580c; }
.ak-qs-icon-tile.tone-purple  { background: #f3e8ff; color: #9333ea; }
.ak-qs-icon-tile.tone-amber   { background: #fef3c7; color: #d97706; }
.ak-qs-icon-tile.tone-crimson { background: #ffe4e6; color: #e11d48; }
.ak-qs-icon-tile.tone-teal    { background: #d1fae5; color: #059669; }
.ak-qs-icon-tile.tone-sky     { background: #e0f2fe; color: #0284c7; }
.ak-qs-icon-tile.tone-violet  { background: #f3e8ff; color: #9333ea; }

/* Khulna 9-Upazila & KCC Promo Banner Strip */
.ak-upazila-promo-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 860px;
  margin: 18px auto 0;
  border-radius: 20px;
  background: #063b27;
  box-shadow: 0 10px 28px rgba(6, 59, 39, 0.18);
}
.ak-upazila-promo-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 75%;
}
.ak-upazila-promo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(4, 44, 29, 0.92) 0%, rgba(7, 74, 48, 0.84) 55%, rgba(6, 56, 37, 0.76) 100%);
}
.ak-upazila-promo-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  flex-wrap: wrap;
}
.ak-upazila-promo-text h2 {
  margin: 0 0 4px;
  font-size: clamp(19px, 2.8vw, 24px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}
.ak-upazila-promo-text p {
  margin: 0;
  font-size: clamp(12.5px, 1.8vw, 14.5px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
}
.ak-upazila-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: #163022 !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.ak-upazila-promo-btn:hover {
  background: #f0fdf4;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.ak-upazila-promo-btn .ak-icon {
  width: 16px;
  height: 16px;
  color: var(--brand);
}

/* Responsive Breakpoints for Hero, Search Card & Quick Service Grid */
@media (max-width: 767px) {
  .ak-hero-banner-wrap {
    min-height: 290px;
    padding: 24px 0 72px;
  }
  .ak-hero-search-container {
    margin-top: -50px;
  }
  .ak-search-tab {
    padding: 6px 12px;
    font-size: 12.5px;
    min-height: 36px;
  }
  .ak-qs-icon-tile {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }
  .ak-qs-icon-tile .ak-icon {
    width: 26px;
    height: 26px;
  }
  .ak-qs-label {
    font-size: 12px;
  }
  .ak-upazila-promo-content {
    padding: 16px 18px;
  }
}

@media (max-width: 480px) {
  .ak-brand-emblem {
    width: 32px;
    height: 36px;
  }
  .ak-brand-with-emblem .brand-name {
    font-size: 22px !important;
  }
  .ak-hero-banner-wrap {
    min-height: 265px;
    padding: 20px 0 66px;
  }
  .ak-hero-pill {
    font-size: 11px;
    padding: 5px 11px;
    margin-bottom: 10px;
  }
  .ak-hero-modern .ak-hero-title {
    font-size: clamp(32px, 9vw, 42px);
  }
  .ak-hero-modern .ak-hero-subtitle {
    font-size: 13.5px;
  }
  .ak-search-bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .ak-hero-search-card .ak-search-main {
    min-height: 46px;
    padding: 4px 10px;
  }
  .ak-hero-search-card .ak-search-main input {
    font-size: 14px;
    min-height: 36px;
    flex: 1 1 auto;
  }
  .ak-search-submit {
    min-height: 46px;
    padding: 8px 16px;
    font-size: 14px;
    width: auto;
  }
  .ak-loc-pill {
    padding: 0 9px;
    min-height: 40px;
  }
  .ak-loc-pill select {
    font-size: 12px !important;
    min-height: 38px !important;
    padding-right: 16px !important;
  }
  .ak-quick-service-grid {
    gap: 12px 6px;
  }
  .ak-qs-icon-tile {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }
  .ak-qs-icon-tile .ak-icon {
    width: 24px;
    height: 24px;
  }
  .ak-qs-label {
    font-size: 11px;
  }
  .ak-upazila-promo-content {
    padding: 15px 16px;
    gap: 12px;
  }
  .ak-upazila-promo-btn {
    padding: 8px 14px;
    font-size: 12px;
  }
}

@media (max-width: 379px) {
  .ak-quick-service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ak-hero-location-row,
  .ak-sublocation-cascade {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 339px) {
  .ak-brand-emblem {
    width: 28px;
    height: 32px;
  }
  .ak-brand-with-emblem .brand-name {
    font-size: 19px !important;
  }
  .ak-search-bar-row {
    grid-template-columns: 1fr;
  }
  .ak-search-submit {
    width: 100%;
    justify-content: center;
  }
  .ak-quick-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   COMPLETE BLOOD DONOR PAGE REDESIGN (Desktop 3-Col & Mobile 2-Col)
   ========================================================================== */

.ak-blood-page-wrap {
  background: #f5f9f7;
  padding-bottom: 56px;
  overflow-x: clip;
}

/* 1. Hero Banner */
.ak-blood-hero {
  position: relative;
  background-color: #e8f3f8;
  background-image: var(--ak-blood-hero-bg);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 36px 0 54px;
  border-bottom: 1px solid #d8e8e0;
  overflow: hidden;
}

.ak-blood-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(236, 246, 251, 0.97) 0%,
    rgba(241, 249, 252, 0.92) 45%,
    rgba(241, 249, 252, 0.38) 74%,
    rgba(241, 249, 252, 0.08) 100%
  );
  pointer-events: none;
}

.ak-blood-hero-inner {
  position: relative;
  z-index: 2;
}

.ak-blood-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.ak-blood-hero-copy {
  max-width: 560px;
}

.ak-blood-hero-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.ak-blood-title-green {
  display: block;
  color: #064e32;
}

.ak-blood-title-red {
  display: block;
  color: #e11d2e;
}

.ak-blood-hero-sub {
  margin: 0 0 8px;
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 700;
  color: #112a1f;
  line-height: 1.35;
}

.ak-blood-hero-desc {
  margin: 0;
  font-size: clamp(13px, 1.3vw, 15px);
  color: #334e42;
  line-height: 1.55;
  max-width: 490px;
}

.ak-blood-hero-motto {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: rotate(-5deg);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(7, 45, 28, 0.08);
  margin-top: 6px;
  margin-right: 12%;
  flex-shrink: 0;
}

.ak-blood-hero-motto span {
  font-size: 16px;
  font-weight: 800;
  color: #0f291e;
  line-height: 1.35;
}

.ak-blood-motto-swish {
  width: 118px;
  height: 14px;
  margin-top: 2px;
}

/* Two Prominent Side-by-Side Hero Action Buttons */
.ak-blood-hero-ctas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 880px;
}

.ak-blood-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  color: #ffffff !important;
  text-decoration: none !important;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  min-width: 0;
}

.ak-blood-cta:hover,
.ak-blood-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

.ak-blood-cta-bank {
  background: linear-gradient(135deg, #f0182d 0%, #c50e20 100%);
}

.ak-blood-cta-join {
  background: linear-gradient(135deg, #0b6b43 0%, #05492c 100%);
}

.ak-blood-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}

.ak-blood-cta-icon .ak-icon {
  width: 24px;
  height: 24px;
  color: #ffffff;
}

.ak-blood-cta-text {
  flex: 1;
  min-width: 0;
  font-size: clamp(13px, 1.45vw, 17px);
  font-weight: 700;
  line-height: 1.32;
  color: #ffffff;
}

.ak-blood-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #ffffff;
  flex-shrink: 0;
}

.ak-blood-cta-bank .ak-blood-cta-arrow .ak-icon {
  color: #d91627;
  width: 16px;
  height: 16px;
}

.ak-blood-cta-join .ak-blood-cta-arrow .ak-icon {
  color: #075d3a;
  width: 16px;
  height: 16px;
}

/* 2. Donor Search Panel */
.ak-blood-main-container {
  position: relative;
  z-index: 3;
}

.ak-donor-search-panel {
  margin-top: -28px;
  background: #ffffff;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 12px 32px rgba(7, 45, 28, 0.08);
  border: 1px solid #e1ece6;
  margin-bottom: 20px;
}

.ak-donor-search-form {
  margin: 0;
}

.ak-donor-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 195px auto;
  gap: 12px;
  align-items: stretch;
}

.ak-donor-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8fbf9;
  border: 1.5px solid #d5e3dc;
  border-radius: 12px;
  padding: 0 14px;
  min-height: 48px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ak-donor-input-wrap:focus-within {
  border-color: #075d3a;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(7, 93, 58, 0.12);
}

.ak-donor-input-icon {
  display: inline-flex;
  color: #5b7268;
  margin-right: 10px;
  flex-shrink: 0;
}

.ak-donor-input-icon .ak-icon {
  width: 19px;
  height: 19px;
}

.ak-donor-input-wrap input[type="search"] {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  font-size: 15px;
  color: #12291e;
  outline: none;
}

.ak-donor-blood-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8fbf9;
  border: 1.5px solid #d5e3dc;
  border-radius: 12px;
  padding: 0 12px;
  min-height: 48px;
}

.ak-donor-drop-icon {
  display: inline-flex;
  color: #e11d2e;
  margin-right: 8px;
  flex-shrink: 0;
}

.ak-donor-drop-icon .ak-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.ak-donor-blood-select-wrap select {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 4px !important;
  font-size: 15px;
  font-weight: 700;
  color: #12291e;
  cursor: pointer;
  outline: none;
}

.ak-donor-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #075d3a;
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  padding: 0 24px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.ak-donor-submit-btn:hover,
.ak-donor-submit-btn:focus-visible {
  background: #05482d;
}

.ak-donor-submit-btn .ak-icon {
  width: 18px;
  height: 18px;
}

/* Quick Blood Group Filter Pills */
.ak-donor-quick-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #edf3f0;
}

.ak-donor-qf-label {
  font-size: 14px;
  font-weight: 700;
  color: #1f372b;
  white-space: nowrap;
}

.ak-donor-qf-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.ak-blood-qf-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: #f1f5f3;
  color: #1d3529;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #dce7e1;
  transition: all 0.15s ease;
}

.ak-blood-qf-pill:hover {
  background: #e4efe9;
  color: #075d3a;
}

.ak-blood-qf-pill.is-active {
  background: #075d3a;
  color: #ffffff;
  border-color: #075d3a;
  box-shadow: 0 4px 10px rgba(7, 93, 58, 0.22);
}

.ak-donor-reset-link {
  font-size: 13px;
  font-weight: 700;
  color: #c81e2b;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  white-space: nowrap;
}

.ak-donor-reset-link:hover {
  background: #fee2e2;
}

/* 3. Donor Statistics & Sorting Toolbar */
.ak-donor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 10px;
}

.ak-donor-stats-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.ak-donor-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ak-donor-stat-item:hover,
.ak-donor-stat-item.is-selected {
  background: #ffffff;
  border-color: #d6e5dd;
  box-shadow: 0 2px 8px rgba(7, 45, 28, 0.05);
}

.ak-donor-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  flex-shrink: 0;
}

.ak-donor-stat-icon.tone-green {
  background: #e3f3eb;
  color: #075d3a;
}

.ak-donor-stat-icon.tone-emerald {
  background: #d1fae5;
  color: #059669;
}

.ak-donor-stat-icon.tone-amber {
  background: #fef3c7;
  color: #d97706;
}

.ak-donor-stat-icon .ak-icon {
  width: 19px;
  height: 19px;
}

.ak-donor-stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.ak-stat-label {
  font-size: 12.5px;
  color: #4b6358;
  font-weight: 600;
}

.ak-stat-value {
  font-size: 15px;
  font-weight: 800;
  color: #10261b;
}

.ak-stat-value.text-emerald {
  color: #059669;
}

.ak-stat-value.text-amber {
  color: #b45309;
}

.ak-donor-controls-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.ak-donor-sort-select {
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #d5e3dc;
  background: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  color: #163024;
  cursor: pointer;
}

.ak-donor-view-toggle {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d5e3dc;
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}

.ak-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #566e62;
  cursor: pointer;
}

.ak-view-btn.is-active {
  background: #075d3a;
  color: #ffffff;
}

.ak-view-btn .ak-icon {
  width: 17px;
  height: 17px;
}

.ak-donor-medical-disclaimer {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: #4c6458;
  background: #ebf5ef;
  border: 1px solid #cfe4d8;
  border-radius: 10px;
  padding: 8px 12px;
  line-height: 1.45;
}

.ak-donor-medical-disclaimer a {
  color: #075d3a;
  font-weight: 700;
  text-decoration: underline;
}

/* 4. Donor Cards Grid (Desktop: 3 Columns, Mobile: 2 Columns) */
.ak-donor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.ak-donor-grid.is-list-view {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ak-donor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(7, 45, 28, 0.04);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
  min-width: 0;
  overflow: hidden;
}

.ak-donor-card:hover {
  border-color: #bfd6ca;
  box-shadow: 0 8px 24px rgba(7, 45, 28, 0.08);
}

.ak-dcard-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
}

.ak-dcard-avatar {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  overflow: hidden;
  background: #ebf3ef;
  border: 2px solid #d8e8e0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ak-dcard-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-dcard-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #075d3a;
}

.ak-dcard-avatar-placeholder .ak-icon {
  width: 30px;
  height: 30px;
}

.ak-dcard-identity {
  flex: 1;
  min-width: 0;
}

.ak-dcard-name {
  margin: 0 0 5px;
  font-size: 16.5px;
  font-weight: 800;
  color: #10261b;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ak-dcard-badge-row {
  margin-bottom: 5px;
}

.ak-dcard-blood-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e11d2e;
  color: #ffffff;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 11px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.ak-dcard-status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.ak-dcard-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.ak-dcard-status-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.ak-dcard-status-icon .ak-icon {
  width: 13px;
  height: 13px;
}

.ak-dcard-status.status-ready {
  color: #059669;
}
.ak-dcard-status.status-ready .ak-dcard-status-dot {
  background: #059669;
}

.ak-dcard-status.status-resting {
  color: #d97706;
}

.ak-dcard-status.status-unavailable {
  color: #dc2626;
}
.ak-dcard-status.status-unavailable .ak-dcard-status-dot {
  background: #dc2626;
}

.ak-dcard-bookmark-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #4b6358;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.ak-dcard-bookmark-icon:hover,
.ak-dcard-bookmark-icon.is-saved {
  color: #075d3a;
  background: #eaf5ef;
}

.ak-dcard-bookmark-icon.is-saved .ak-icon {
  fill: currentColor;
}

.ak-dcard-bookmark-icon .ak-icon {
  width: 18px;
  height: 18px;
}

/* Donor Meta Details List */
.ak-dcard-details {
  list-style: none;
  margin: 0 0 14px;
  padding: 10px 0 0;
  border-top: 1px solid #eef4f1;
  display: grid;
  gap: 6px;
}

.ak-dcard-detail-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #374f43;
  line-height: 1.35;
  min-width: 0;
}

.ak-dcard-detail-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #1f3a2d;
}

.ak-dcard-detail-icon.is-drop {
  color: #075d3a;
}

.ak-dcard-detail-icon .ak-icon {
  width: 15px;
  height: 15px;
}

.ak-dcard-text-full {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-dcard-text-short {
  display: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card Bottom Action Buttons (Call + Save) */
.ak-dcard-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
  gap: 8px;
  margin-top: auto;
}

.ak-dcard-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
}

.ak-dcard-call-btn .ak-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ak-dcard-call-btn.is-ready {
  background: #075d3a;
  color: #ffffff !important;
}

.ak-dcard-call-btn.is-ready:hover,
.ak-dcard-call-btn.is-ready:focus-visible {
  background: #05482d;
}

.ak-dcard-call-btn.is-disabled {
  background: #9ca3af;
  color: #ffffff !important;
  cursor: not-allowed;
  opacity: 0.92;
}

.ak-dcard-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  background: #ffffff;
  color: #1c3528;
  border: 1px solid #cedcd4;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  transition: all 0.15s ease;
}

.ak-dcard-save-btn:hover {
  background: #f2f8f5;
  border-color: #075d3a;
  color: #075d3a;
}

.ak-dcard-save-btn.is-saved {
  background: #eaf5ef;
  border-color: #075d3a;
  color: #075d3a;
}

.ak-dcard-save-btn.is-saved .ak-icon {
  fill: currentColor;
}

.ak-dcard-save-btn .ak-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Pagination */
.ak-donor-pagination {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-donor-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #d8e5de;
  color: #1c3528;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.ak-donor-pagination .page-numbers.current {
  background: #075d3a;
  border-color: #075d3a;
  color: #ffffff;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR BLOOD DONORS PAGE (320px - 1920px+)
   ========================================================================== */

@media (max-width: 991px) {
  .ak-donor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .ak-blood-hero-motto {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .ak-blood-hero {
    padding: 20px 0 38px;
    background-position: 72% center;
  }

  .ak-blood-hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(236, 246, 251, 0.96) 0%,
      rgba(241, 249, 252, 0.88) 58%,
      rgba(241, 249, 252, 0.35) 100%
    );
  }

  .ak-blood-hero-motto {
    display: none;
  }

  .ak-blood-hero-top {
    margin-bottom: 16px;
  }

  .ak-blood-hero-title {
    font-size: clamp(23px, 6.5vw, 30px);
    margin-bottom: 6px;
  }

  .ak-blood-hero-sub {
    font-size: 13.5px;
    margin-bottom: 4px;
  }

  .ak-blood-hero-desc {
    font-size: 12px;
    line-height: 1.45;
    max-width: 78%;
  }

  /* Keep both Hero CTA buttons side-by-side on mobile */
  .ak-blood-hero-ctas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ak-blood-cta {
    padding: 9px 10px;
    gap: 7px;
    border-radius: 12px;
    border-width: 1.5px;
  }

  .ak-blood-cta-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .ak-blood-cta-icon .ak-icon {
    width: 17px;
    height: 17px;
  }

  .ak-blood-cta-text {
    font-size: 11.5px;
    line-height: 1.26;
  }

  .ak-blood-cta-arrow {
    width: 20px;
    height: 20px;
  }

  .ak-blood-cta-arrow .ak-icon {
    width: 11px !important;
    height: 11px !important;
  }

  /* Search Panel on Mobile: Search Input + খুঁজুন in the same row */
  .ak-donor-search-panel {
    margin-top: -22px;
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 14px;
  }

  .ak-donor-search-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .ak-donor-input-wrap {
    grid-column: 1 / 2;
    grid-row: 1;
    min-height: 42px;
    padding: 0 10px;
  }

  .ak-donor-input-wrap input[type="search"] {
    font-size: 13px;
    padding: 7px 0 !important;
  }

  .ak-donor-submit-btn {
    grid-column: 2 / 3;
    grid-row: 1;
    min-height: 42px;
    padding: 0 14px;
    font-size: 13.5px;
    border-radius: 10px;
  }

  .ak-donor-blood-select-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 40px;
    padding: 0 10px;
  }

  .ak-donor-blood-select-wrap select {
    font-size: 13.5px;
  }

  .ak-donor-quick-filters {
    margin-top: 10px;
    padding-top: 10px;
    gap: 6px 8px;
  }

  .ak-donor-qf-label {
    display: none;
  }

  .ak-donor-qf-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .ak-donor-qf-pills::-webkit-scrollbar {
    display: none;
  }

  .ak-blood-qf-pill {
    min-width: 38px;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    flex-shrink: 0;
  }

  /* Compact Toolbar on Mobile */
  .ak-donor-toolbar {
    gap: 8px;
    margin-bottom: 8px;
  }

  .ak-donor-stats-bar {
    gap: 6px;
  }

  .ak-donor-stat-item {
    padding: 4px 6px;
    gap: 6px;
  }

  .ak-donor-stat-icon {
    width: 28px;
    height: 28px;
  }

  .ak-donor-stat-icon .ak-icon {
    width: 15px;
    height: 15px;
  }

  .ak-stat-label {
    font-size: 11px;
  }

  .ak-stat-value {
    font-size: 12.5px;
  }

  .ak-donor-sort-select {
    height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }

  .ak-view-btn {
    width: 30px;
    height: 28px;
  }

  /* 2 Side-by-Side Donor Cards on Mobile (320px - 639px) */
  .ak-donor-grid,
  .ak-donor-grid.is-list-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 639px) {
  .ak-stat-desktop-extra {
    display: none;
  }

  .ak-donor-stat-text {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }

  .ak-stat-label::after {
    content: ":";
  }

  .ak-donor-card {
    padding: 10px;
    border-radius: 12px;
  }

  .ak-dcard-top {
    gap: 8px;
    margin-bottom: 8px;
  }

  .ak-dcard-avatar {
    width: 42px;
    height: 42px;
    border-width: 1.5px;
  }

  .ak-dcard-avatar-placeholder .ak-icon {
    width: 20px;
    height: 20px;
  }

  .ak-dcard-bookmark-icon {
    display: none;
  }

  .ak-dcard-name {
    font-size: 13px;
    margin-bottom: 3px;
    line-height: 1.22;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ak-dcard-badge-row {
    margin-bottom: 3px;
  }

  .ak-dcard-blood-pill {
    font-size: 11px;
    padding: 2.5px 8px;
  }

  .ak-dcard-status {
    font-size: 10px;
    gap: 4px;
  }

  .ak-dcard-status-dot {
    width: 6px;
    height: 6px;
  }

  .ak-dcard-status-icon .ak-icon {
    width: 11px;
    height: 11px;
  }

  .ak-dcard-details {
    padding-top: 7px;
    margin-bottom: 9px;
    gap: 4px;
  }

  .ak-dcard-detail-item {
    font-size: 11px;
    gap: 5px;
  }

  .ak-dcard-detail-icon .ak-icon {
    width: 12.5px;
    height: 12.5px;
  }

  .ak-dcard-text-full {
    display: none;
  }

  .ak-dcard-text-short {
    display: inline;
  }

  .ak-dcard-actions {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: 5px;
  }

  .ak-dcard-call-btn,
  .ak-dcard-save-btn {
    min-height: 32px;
    padding: 4px 6px;
    font-size: 10.5px;
    border-radius: 7px;
    gap: 3px;
  }

  .ak-dcard-call-btn .ak-icon,
  .ak-dcard-save-btn .ak-icon {
    width: 12px;
    height: 12px;
  }
}

/* Ultra-narrow Mobile (320px - 359px) */
@media (max-width: 359px) {
  .ak-blood-hero-ctas {
    gap: 6px;
  }

  .ak-blood-cta {
    padding: 7px 7px;
    gap: 5px;
  }

  .ak-blood-cta-icon {
    width: 24px;
    height: 24px;
  }

  .ak-blood-cta-icon .ak-icon {
    width: 14px;
    height: 14px;
  }

  .ak-blood-cta-text {
    font-size: 10.2px;
  }

  .ak-blood-cta-arrow {
    display: none;
  }

  .ak-donor-grid,
  .ak-donor-grid.is-list-view {
    gap: 7px;
  }

  .ak-donor-card {
    padding: 8px;
  }

  .ak-dcard-avatar {
    width: 34px;
    height: 34px;
  }

  .ak-dcard-name {
    font-size: 11.8px;
  }

  .ak-dcard-detail-item {
    font-size: 10px;
    gap: 4px;
  }

  .ak-dcard-call-btn,
  .ak-dcard-save-btn {
    min-height: 30px;
    padding: 3px 4px;
    font-size: 9.8px;
    gap: 2px;
  }
}

/* ==========================================================================
   PROFESSIONAL HOSPITAL & CLINIC DIRECTORY REDESIGN (Desktop & Mobile)
   ========================================================================== */

.ak-hosp-page-wrap {
  background: #f5f9f7;
  padding-bottom: 56px;
  overflow-x: clip;
}

/* 1. Hero Banner */
.ak-hosp-hero {
  position: relative;
  background-color: #e6f3fa;
  background-image: var(--ak-hosp-hero-bg);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 26px 0 48px;
  border-bottom: 1px solid #d5e6de;
  overflow: hidden;
}

.ak-hosp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(235, 246, 252, 0.97) 0%,
    rgba(241, 249, 253, 0.92) 46%,
    rgba(241, 249, 253, 0.34) 76%,
    rgba(241, 249, 253, 0.08) 100%
  );
  pointer-events: none;
}

.ak-hosp-hero-inner {
  position: relative;
  z-index: 2;
}

.ak-hosp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #365245;
  margin-bottom: 14px;
}

.ak-hosp-breadcrumb a {
  color: #1f4232;
  text-decoration: none;
}

.ak-hosp-breadcrumb a:hover {
  color: #075d3a;
  text-decoration: underline;
}

.ak-hosp-hero-copy {
  max-width: 580px;
  margin-bottom: 24px;
}

.ak-hosp-hero-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.ak-hosp-title-green {
  color: #075d3a;
}

.ak-hosp-title-red {
  color: #e11d2e;
}

.ak-hosp-hero-desc {
  margin: 0;
  font-size: clamp(13.5px, 1.4vw, 16px);
  color: #274235;
  line-height: 1.55;
  font-weight: 500;
}

/* 2. Four Quick-Access Category Cards (Desktop: 4-Col Row, Mobile: 2-Col Grid) */
.ak-hosp-quick-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ak-hosp-qcard {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1.5px solid #e2ece7;
  border-radius: 14px;
  padding: 13px 15px;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(7, 45, 28, 0.06);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  min-width: 0;
}

.ak-hosp-qcard:hover,
.ak-hosp-qcard:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(7, 45, 28, 0.1);
}

.ak-hosp-qcard.is-active {
  border-color: #075d3a;
  background: #f2fbf6;
  box-shadow: 0 0 0 2px rgba(7, 93, 58, 0.16);
}

.ak-hosp-qcard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: #ffffff;
  flex-shrink: 0;
}

.ak-hosp-qcard.tone-green .ak-hosp-qcard-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.ak-hosp-qcard.tone-red .ak-hosp-qcard-icon {
  background: linear-gradient(135deg, #f43f5e 0%, #dc2626 100%);
}

.ak-hosp-qcard.tone-blue .ak-hosp-qcard-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.ak-hosp-qcard.tone-purple .ak-hosp-qcard-icon {
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
}

.ak-hosp-qcard-icon .ak-icon {
  width: 22px;
  height: 22px;
}

.ak-hosp-qcard-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.28;
}

.ak-hosp-qcard-text strong {
  font-size: 15px;
  font-weight: 800;
  color: #10261b;
}

.ak-hosp-qcard.tone-green .ak-hosp-qcard-text strong { color: #065f46; }
.ak-hosp-qcard.tone-red .ak-hosp-qcard-text strong { color: #991b1b; }
.ak-hosp-qcard.tone-blue .ak-hosp-qcard-text strong { color: #1e40af; }
.ak-hosp-qcard.tone-purple .ak-hosp-qcard-text strong { color: #6b21a8; }

.ak-hosp-qcard-text small {
  font-size: 12px;
  color: #556e62;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3. Professional Hospital Search Panel */
.ak-hosp-main-container {
  position: relative;
  z-index: 3;
}

.ak-hosp-search-panel {
  margin-top: -22px;
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 12px 32px rgba(7, 45, 28, 0.07);
  border: 1px solid #e0ece6;
  margin-bottom: 20px;
}

.ak-hosp-search-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ak-hosp-search-heading-icon {
  display: inline-flex;
  color: #075d3a;
}

.ak-hosp-search-heading-icon .ak-icon {
  width: 20px;
  height: 20px;
}

.ak-hosp-search-heading h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #0f291e;
}

.ak-hosp-search-form {
  margin: 0;
}

.ak-hosp-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 215px auto;
  gap: 12px;
  align-items: stretch;
}

.ak-hosp-input-wrap,
.ak-hosp-location-wrap {
  display: flex;
  align-items: center;
  background: #f8fbf9;
  border: 1.5px solid #d5e3dc;
  border-radius: 12px;
  padding: 0 13px;
  min-height: 46px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ak-hosp-input-wrap:focus-within,
.ak-hosp-location-wrap:focus-within {
  border-color: #075d3a;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(7, 93, 58, 0.12);
}

.ak-hosp-input-icon,
.ak-hosp-loc-icon {
  display: inline-flex;
  color: #546d61;
  margin-right: 8px;
  flex-shrink: 0;
}

.ak-hosp-input-icon .ak-icon,
.ak-hosp-loc-icon .ak-icon {
  width: 18px;
  height: 18px;
}

.ak-hosp-input-wrap input[type="search"] {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 9px 0 !important;
  font-size: 14.5px;
  color: #10261b;
  outline: none;
}

.ak-hosp-location-wrap select {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 4px !important;
  font-size: 14px;
  font-weight: 700;
  color: #10261b;
  cursor: pointer;
  outline: none;
}

.ak-hosp-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #075d3a;
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  padding: 0 24px;
  min-height: 46px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.ak-hosp-submit-btn:hover,
.ak-hosp-submit-btn:focus-visible {
  background: #05482d;
}

.ak-hosp-submit-btn .ak-icon {
  width: 18px;
  height: 18px;
}

/* Quick Category Filter Pills */
.ak-hosp-quick-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #edf3f0;
}

.ak-hosp-qf-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #1d3529;
  white-space: nowrap;
}

.ak-hosp-qf-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.ak-hosp-qf-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: #f1f6f3;
  color: #1d3529;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #dce7e1;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.ak-hosp-qf-pill:hover {
  background: #e3efe8;
  color: #075d3a;
}

.ak-hosp-qf-pill.is-active {
  background: #075d3a;
  color: #ffffff;
  border-color: #075d3a;
}

.ak-hosp-reset-link {
  font-size: 12.5px;
  font-weight: 700;
  color: #c81e2b;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  white-space: nowrap;
}

/* 4. Results Toolbar */
.ak-hosp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ak-hosp-results-count {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: #10261b;
}

.ak-hosp-count-short {
  display: none;
}

.ak-hosp-sort-select {
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #d5e3dc;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  color: #163024;
  cursor: pointer;
}

/* 5. Two-Column Desktop Layout (Main Cards + Map/Emergency Sidebar) */
.ak-hosp-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  align-items: start;
}

.ak-hosp-card-list {
  display: grid;
  gap: 14px;
}

/* 6. Hospital & Clinic Listing Card */
.ak-hosp-card {
  background: #ffffff;
  border: 1px solid #e1ece6;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(7, 45, 28, 0.04);
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
  min-width: 0;
}

.ak-hosp-card:hover {
  border-color: #bfd6ca;
  box-shadow: 0 8px 24px rgba(7, 45, 28, 0.08);
}

.ak-hcard-inner {
  display: flex;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
}

.ak-hcard-media {
  width: 152px;
  min-height: 116px;
  border-radius: 12px;
  overflow: hidden;
  background: #e8f4fa;
  border: 1px solid #d8e6df;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ak-hcard-media img,
.ak-hcard-illust,
.ak-hcard-building-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-hcard-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ak-hcard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ak-hcard-title-wrap {
  min-width: 0;
  flex: 1;
}

.ak-hcard-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-hcard-title a {
  color: #10261b;
  text-decoration: none;
}

.ak-hcard-title a:hover {
  color: #075d3a;
}

.ak-hcard-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  flex-shrink: 0;
}

.ak-hcard-verified-badge .ak-icon {
  width: 11px;
  height: 11px;
}

.ak-hcard-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-hcard-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
}

.ak-hcard-pill.pill-green {
  background: #dcfce7;
  color: #166534;
}

.ak-hcard-pill.pill-pink {
  background: #fce7f3;
  color: #9d174d;
}

.ak-hcard-pill.pill-blue {
  background: #dbeafe;
  color: #1e40af;
}

.ak-hcard-pill.pill-purple {
  background: #f3e8ff;
  color: #6b21a8;
}

.ak-hcard-pill.pill-teal {
  background: #ccfbf1;
  color: #115e59;
}

.ak-hcard-pill.pill-emergency {
  background: #fee2e2;
  color: #dc2626;
}

.ak-hcard-pill.pill-beds {
  background: #f1f5f9;
  color: #334155;
}

.ak-hcard-save-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #f1d4d7;
  background: #fff5f6;
  color: #e11d2e;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.15s ease;
}

.ak-hcard-save-icon:hover,
.ak-hcard-save-icon.is-saved {
  background: #e11d2e;
  color: #ffffff;
  border-color: #e11d2e;
}

.ak-hcard-save-icon.is-saved .ak-icon {
  fill: currentColor;
}

.ak-hcard-save-icon .ak-icon {
  width: 16px;
  height: 16px;
}

/* Info List + Desktop Call Button Row */
.ak-hcard-details-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ak-hcard-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.ak-hcard-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374f43;
  line-height: 1.35;
  min-width: 0;
}

.ak-hcard-info-icon {
  display: inline-flex;
  color: #075d3a;
  flex-shrink: 0;
}

.ak-hcard-info-icon .ak-icon {
  width: 14px;
  height: 14px;
}

.ak-hcard-phone-text {
  font-weight: 700;
  color: #163024;
}

.ak-hcard-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #075d3a;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 16px;
  min-height: 38px;
  border-radius: 10px;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.ak-hcard-call-btn:hover,
.ak-hcard-call-btn:focus-visible {
  background: #05482d;
}

.ak-hcard-call-btn .ak-icon {
  width: 15px;
  height: 15px;
}

.ak-hcard-footer {
  padding-top: 8px;
  border-top: 1px solid #eef4f1;
}

.ak-hcard-meta-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.ak-hcard-meta-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: #466053;
  text-decoration: none;
}

.ak-hcard-meta-link:hover {
  color: #075d3a;
}

.ak-hcard-meta-link .ak-icon {
  width: 14px;
  height: 14px;
}

.ak-hcard-mobile-actions {
  display: none;
}

/* 7. Right Sidebar (Map + Emergency Services + Popular Categories) */
.ak-hosp-sidebar {
  display: grid;
  gap: 16px;
}

.ak-hosp-side-card {
  background: #ffffff;
  border: 1px solid #e1ece6;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(7, 45, 28, 0.04);
}

.ak-hosp-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.ak-hosp-side-head h3,
.ak-hosp-side-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: #10261b;
}

.ak-hosp-side-head h3 {
  margin-bottom: 0;
}

.ak-hosp-map-ext {
  font-size: 12px;
  font-weight: 700;
  color: #075d3a;
  text-decoration: none;
}

.ak-hosp-map-viewport {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #cfe2d8;
  background: #e5f2ea;
}

.ak-hosp-map-svg {
  width: 100%;
  height: auto;
  display: block;
}

.ak-map-pin-group.is-selected path {
  fill: #075d3a;
}

.ak-hosp-map-Selected {
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #d5e5dc;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ak-hosp-map-Selected strong {
  font-size: 12.5px;
  color: #10261b;
}

.ak-hosp-map-Selected span {
  font-size: 11.5px;
  color: #526b5e;
}

.ak-hosp-map-tip-btn {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #075d3a;
  text-decoration: none;
}

.ak-hosp-map-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: #587064;
}

/* Emergency Health Services 2x2 Grid */
.ak-hosp-emg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ak-hosp-emg-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: #f8fbf9;
  border: 1px solid #e3ede8;
  text-decoration: none !important;
  min-width: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ak-hosp-emg-item:hover {
  background: #eef7f2;
  border-color: #075d3a;
}

.ak-hosp-emg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #ffffff;
  flex-shrink: 0;
}

.ak-hosp-emg-icon.tone-red { background: #ef4444; }
.ak-hosp-emg-icon.tone-blue { background: #2563eb; }
.ak-hosp-emg-icon.tone-green { background: #10b981; }
.ak-hosp-emg-icon.tone-amber { background: #f59e0b; }

.ak-hosp-emg-icon .ak-icon {
  width: 17px;
  height: 17px;
}

.ak-hosp-emg-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.22;
}

.ak-hosp-emg-copy strong {
  font-size: 12px;
  font-weight: 800;
  color: #10261b;
}

.ak-hosp-emg-copy small {
  font-size: 10.5px;
  color: #5a7266;
  margin-top: 2px;
}

/* Popular Service Subcategories 4-Col Grid */
.ak-hosp-pop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ak-hosp-pop-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: 12px;
  background: #f8fbf9;
  border: 1px solid #e4eee9;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  color: #1c3528;
}

.ak-hosp-pop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

.ak-hosp-pop-item.tone-pink .ak-hosp-pop-icon { background: #fce7f3; color: #db2777; }
.ak-hosp-pop-item.tone-purple .ak-hosp-pop-icon { background: #f3e8ff; color: #7e22ce; }
.ak-hosp-pop-item.tone-green .ak-hosp-pop-icon { background: #dcfce7; color: #15803d; }
.ak-hosp-pop-item.tone-blue .ak-hosp-pop-icon { background: #dbeafe; color: #1d4ed8; }

.ak-hosp-pop-icon .ak-icon {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR HOSPITAL DIRECTORY (320px - 1920px+)
   ========================================================================== */

@media (max-width: 991px) {
  .ak-hosp-quick-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ak-hosp-content-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .ak-hosp-hero {
    padding: 16px 0 34px;
    background-position: 75% center;
  }

  .ak-hosp-hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(235, 246, 252, 0.96) 0%,
      rgba(241, 249, 253, 0.89) 62%,
      rgba(241, 249, 253, 0.35) 100%
    );
  }

  .ak-hosp-breadcrumb {
    font-size: 11.5px;
    margin-bottom: 8px;
  }

  .ak-hosp-hero-copy {
    margin-bottom: 14px;
    max-width: 82%;
  }

  .ak-hosp-hero-title {
    font-size: clamp(22px, 6.2vw, 28px);
    margin-bottom: 6px;
  }

  .ak-hosp-hero-desc {
    font-size: 12px;
    line-height: 1.45;
  }

  /* Two-Column Quick Category Grid on Mobile */
  .ak-hosp-quick-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ak-hosp-qcard {
    padding: 10px;
    gap: 8px;
    border-radius: 12px;
  }

  .ak-hosp-qcard-icon {
    width: 34px;
    height: 34px;
  }

  .ak-hosp-qcard-icon .ak-icon {
    width: 18px;
    height: 18px;
  }

  .ak-hosp-qcard-text strong {
    font-size: 12.5px;
  }

  .ak-hosp-qcard-text small {
    font-size: 10.5px;
  }

  /* Mobile Search Panel: Search input + খুঁজুন button in the same row */
  .ak-hosp-search-panel {
    margin-top: -18px;
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 14px;
  }

  .ak-hosp-search-heading {
    margin-bottom: 8px;
  }

  .ak-hosp-search-heading h2 {
    font-size: 15px;
  }

  .ak-hosp-search-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .ak-hosp-input-wrap {
    grid-column: 1 / 2;
    grid-row: 1;
    min-height: 42px;
    padding: 0 10px;
  }

  .ak-hosp-input-wrap input[type="search"] {
    font-size: 13px;
  }

  .ak-hosp-submit-btn {
    grid-column: 2 / 3;
    grid-row: 1;
    min-height: 42px;
    padding: 0 14px;
    font-size: 13.5px;
    border-radius: 10px;
  }

  .ak-hosp-location-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 38px;
    padding: 0 10px;
  }

  .ak-hosp-location-wrap select {
    font-size: 13px;
  }

  .ak-hosp-quick-filters {
    margin-top: 10px;
    padding-top: 10px;
    gap: 6px;
  }

  .ak-hosp-qf-label {
    display: none;
  }

  .ak-hosp-qf-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .ak-hosp-qf-pills::-webkit-scrollbar {
    display: none;
  }

  .ak-hosp-qf-pill {
    height: 30px;
    padding: 0 11px;
    font-size: 12px;
    flex-shrink: 0;
  }

  /* Toolbar on Mobile */
  .ak-hosp-count-full {
    display: none;
  }

  .ak-hosp-count-short {
    display: inline;
    font-size: 13.5px;
  }

  .ak-hosp-sort-select {
    height: 34px;
    font-size: 12px;
    padding: 0 8px;
  }

  /* Mobile Hospital Cards */
  .ak-hosp-card {
    padding: 12px;
    border-radius: 14px;
  }

  .ak-hcard-inner {
    gap: 11px;
  }

  .ak-hcard-media {
    width: 86px;
    height: 86px;
    min-height: 86px;
    border-radius: 10px;
  }

  .ak-hcard-title {
    font-size: 15px;
    margin-bottom: 4px;
  }

  .ak-hcard-pill {
    font-size: 10.5px;
    padding: 2px 8px;
  }

  .ak-hcard-save-icon {
    width: 28px;
    height: 28px;
  }

  .ak-hcard-save-icon .ak-icon {
    width: 14px;
    height: 14px;
  }

  .ak-hcard-details-row {
    margin-bottom: 8px;
  }

  .ak-hcard-info-item {
    font-size: 12px;
  }

  .ak-hcard-hours-item {
    display: none;
  }

  .ak-hcard-desktop-call,
  .ak-hcard-meta-links {
    display: none;
  }

  .ak-hcard-footer {
    padding-top: 8px;
  }

  .ak-hcard-mobile-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 8px;
  }

  .ak-hcard-mobile-actions .ak-hcard-call-btn {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12.5px;
    border-radius: 9px;
  }

  .ak-hcard-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 9px;
    background: #f1f6f3;
    border: 1px solid #d2e2da;
    color: #183326;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  .ak-hcard-secondary-btn .ak-icon {
    width: 13px;
    height: 13px;
    color: #075d3a;
    flex-shrink: 0;
  }
}

@media (max-width: 359px) {
  .ak-hosp-quick-cards {
    gap: 6px;
  }

  .ak-hosp-qcard {
    padding: 8px;
    gap: 6px;
  }

  .ak-hosp-qcard-icon {
    width: 28px;
    height: 28px;
  }

  .ak-hosp-qcard-text strong {
    font-size: 11.5px;
  }

  .ak-hcard-media {
    width: 72px;
    height: 72px;
    min-height: 72px;
  }

  .ak-hcard-title {
    font-size: 13.8px;
  }

  .ak-hcard-mobile-actions {
    gap: 6px;
  }

  .ak-hcard-mobile-actions .ak-hcard-call-btn,
  .ak-hcard-secondary-btn {
    font-size: 11px;
    padding: 5px 6px;
    min-height: 34px;
  }
}

/* ==========================================================================
   HOSPITAL DETAILS PAGE & DEPARTMENT-WISE DOCTORS DIRECTORY (19006 & 19007)
   ========================================================================== */

.ak-hdet-page-wrap {
  background: #f4f8f6;
  padding: 18px 0 60px;
  overflow-x: clip;
}

.ak-hdet-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #486356;
  margin-bottom: 16px;
}

.ak-hdet-breadcrumb a {
  color: #1c3a2b;
  text-decoration: none;
}

.ak-hdet-breadcrumb a:hover {
  color: #075d3a;
  text-decoration: underline;
}

/* 1. Top Hospital Hero Card */
.ak-hdet-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 24px;
  background: #ffffff;
  border: 1px solid #e1ece6;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 8px 26px rgba(7, 45, 28, 0.05);
  margin-bottom: 18px;
}

.ak-hdet-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ak-hdet-main-photo-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #e6f2ec;
  aspect-ratio: 16 / 10;
  max-height: 330px;
}

.ak-hdet-main-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-hdet-photo-counter {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.ak-hdet-all-photos-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ak-hdet-all-photos-btn .ak-icon {
  width: 15px;
  height: 15px;
}

.ak-hdet-thumb-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}

.ak-hdet-thumb-btn {
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  background: #e6f2ec;
  height: 54px;
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.ak-hdet-thumb-btn.is-active,
.ak-hdet-thumb-btn:hover {
  border-color: #075d3a;
  opacity: 1;
}

.ak-hdet-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right Summary Column */
.ak-hdet-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.ak-hdet-badges-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ak-hdet-title {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  color: #0f261b;
  line-height: 1.24;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ak-hdet-verified {
  width: 22px;
  height: 22px;
}

.ak-hdet-verified .ak-icon {
  width: 13px;
  height: 13px;
}

.ak-hdet-subtitle {
  margin: 0 0 18px;
  font-size: 14.5px;
  color: #496356;
  font-weight: 500;
}

.ak-hdet-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ak-hdet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.16s ease;
  text-align: center;
}

.ak-hdet-btn .ak-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ak-hdet-btn-call {
  background: #075d3a;
  color: #ffffff !important;
  border: 1.5px solid #075d3a;
  box-shadow: 0 6px 16px rgba(7, 93, 58, 0.2);
}

.ak-hdet-btn-call:hover {
  background: #05482d;
}

.ak-hdet-btn-map {
  background: #f4f9f6;
  color: #123022 !important;
  border: 1.5px solid #cde0d6;
}

.ak-hdet-btn-map:hover {
  background: #e6f3ec;
  border-color: #075d3a;
}

.ak-hdet-utility-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #ecf2ef;
}

.ak-hdet-util-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #f8fbf9;
  border: 1px solid #e1ece6;
  color: #2b4538;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ak-hdet-util-btn:hover {
  background: #edf6f1;
  color: #075d3a;
}

.ak-hdet-util-btn.is-report {
  color: #c81e2b;
}

.ak-hdet-util-btn .ak-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* 2. Four Compact Hospital Statistics Cards */
.ak-hdet-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.ak-hdet-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e1ece6;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(7, 45, 28, 0.03);
  min-width: 0;
}

.ak-hdet-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
}

.ak-hdet-stat-icon.tone-green {
  background: #e6f4ed;
  color: #075d3a;
}

.ak-hdet-stat-icon.tone-red {
  background: #fee2e2;
  color: #dc2626;
}

.ak-hdet-stat-icon .ak-icon {
  width: 22px;
  height: 22px;
}

.ak-hdet-stat-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.28;
}

.ak-hdet-stat-label {
  font-size: 12.5px;
  color: #526c5f;
  font-weight: 600;
}

.ak-hdet-stat-val {
  font-size: 16px;
  font-weight: 800;
  color: #0f261b;
  margin-top: 2px;
}

/* 3. Seven-Tab Navigation Bar */
.ak-hdet-tabs-wrap {
  background: #ffffff;
  border: 1px solid #e1ece6;
  border-radius: 14px;
  padding: 6px;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(7, 45, 28, 0.03);
}

.ak-hdet-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ak-hdet-tabs::-webkit-scrollbar {
  display: none;
}

.ak-hdet-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #2b4639;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.ak-hdet-tab-btn:hover {
  background: #eef6f2;
  color: #075d3a;
}

.ak-hdet-tab-btn.is-active {
  background: #075d3a;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(7, 93, 58, 0.22);
}

.ak-htab-label-short {
  display: none;
}

/* 4. Overview Tab Layout */
.ak-hdet-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  align-items: start;
}

.ak-hdet-main-col,
.ak-hdet-side-col {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.ak-hdet-card {
  background: #ffffff;
  border: 1px solid #e1ece6;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(7, 45, 28, 0.04);
  min-width: 0;
}

.ak-hdet-section-title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  color: #0f261b;
}

.ak-hdet-section-sub {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: #516b5e;
}

.ak-hdet-prose {
  font-size: 14.5px;
  line-height: 1.7;
  color: #263e32;
}

.ak-hdet-meta-box {
  margin-top: 16px;
  background: #edf7f2;
  border: 1px solid #cde3d7;
  border-radius: 14px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}

.ak-hdet-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.ak-hdet-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  color: #075d3a;
  flex-shrink: 0;
}

.ak-hdet-meta-icon .ak-icon {
  width: 17px;
  height: 17px;
}

.ak-hdet-meta-label {
  display: block;
  font-size: 12px;
  color: #4f695c;
  font-weight: 600;
}

.ak-hdet-meta-val {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #10261b;
  overflow-wrap: anywhere;
}

.ak-hdet-card-head-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.ak-hdet-loc-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #3b5649;
}

.ak-hdet-loc-line .ak-icon {
  width: 16px;
  height: 16px;
  color: #075d3a;
  flex-shrink: 0;
}

.ak-hdet-gmap-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #075d3a;
  color: #ffffff !important;
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
}

.ak-hdet-gmap-btn .ak-icon {
  width: 15px;
  height: 15px;
}

.ak-hdet-map-box {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #cde2d7;
}

.ak-hdet-map-svg {
  width: 100%;
  height: auto;
  display: block;
}

.ak-hdet-map-floating-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-10%, -115%);
  background: #ffffff;
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
}

.ak-hdet-map-pin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fee2e2;
  color: #e11d2e;
  flex-shrink: 0;
}

.ak-hdet-map-pin-badge .ak-icon {
  width: 15px;
  height: 15px;
}

.ak-hdet-map-floating-card strong {
  display: block;
  font-size: 12px;
  color: #10261b;
  line-height: 1.25;
}

.ak-hdet-map-floating-card small {
  display: block;
  font-size: 10.5px;
  color: #587064;
}

/* Sidebar Contact & Services List */
.ak-hdet-side-title {
  margin: 0 0 14px;
  font-size: 16.5px;
  font-weight: 800;
  color: #0f261b;
}

.ak-hdet-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ak-hdet-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #284235;
}

.ak-hdet-cicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  flex-shrink: 0;
}

.ak-hdet-cicon.tone-green { background: #e5f4ec; color: #075d3a; }
.ak-hdet-cicon.tone-red { background: #fee2e2; color: #dc2626; }
.ak-hdet-cicon.tone-blue { background: #dbeafe; color: #1d4ed8; }

.ak-hdet-cicon .ak-icon {
  width: 15px;
  height: 15px;
}

.ak-hdet-phone-link {
  font-size: 15px;
  font-weight: 800;
  color: #0f261b;
  text-decoration: none;
  display: block;
}

.ak-hdet-contact-list small {
  color: #5b7468;
  font-size: 11.5px;
}

.ak-hdet-short-services {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.ak-hdet-short-services li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1f392c;
}

.ak-hdet-svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fef2f2;
  color: #dc2626;
  flex-shrink: 0;
}

.ak-hdet-svc-icon .ak-icon {
  width: 14px;
  height: 14px;
}

.ak-hdet-side-btns {
  display: grid;
  gap: 8px;
}

.ak-hdet-outline-btn,
.ak-hdet-solid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
}

.ak-hdet-outline-btn {
  background: #f5faf7;
  border: 1px solid #cce0d5;
  color: #075d3a;
}

.ak-hdet-solid-btn {
  background: #075d3a;
  border: 1px solid #075d3a;
  color: #ffffff;
}

.ak-hdet-solid-btn .ak-icon,
.ak-hdet-outline-btn .ak-icon {
  width: 16px;
  height: 16px;
}

/* Services & Departments Grids (Tabs 2 & 3) */
.ak-hdet-services-grid,
.ak-hdet-depts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ak-hdet-service-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 12px;
  background: #f8fbf9;
  border: 1px solid #dfece5;
}

.ak-hdet-service-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e5f4ec;
  color: #075d3a;
  flex-shrink: 0;
}

.ak-hdet-service-tile-icon .ak-icon {
  width: 18px;
  height: 18px;
}

.ak-hdet-dept-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f8fbf9;
  border: 1px solid #dfece5;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ak-hdet-dept-card:hover {
  background: #eef7f2;
  border-color: #075d3a;
}

.ak-hdet-dept-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e5f4ec;
  color: #075d3a;
  flex-shrink: 0;
}

.ak-hdet-dept-card-icon .ak-icon {
  width: 18px;
  height: 18px;
}

.ak-hdet-dept-card-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ak-hdet-dept-card-copy strong {
  font-size: 14px;
  color: #10261b;
}

.ak-hdet-dept-card-copy small {
  font-size: 12px;
  color: #546e61;
}

/* ==========================================================================
   5. COMPLETE DEPARTMENT-WISE DOCTORS DIRECTORY (Tab 4 — 19007.png)
   ========================================================================== */

.ak-hdoc-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.ak-hdoc-main-heading {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  color: #0f261b;
}

.ak-hdoc-main-sub {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #3f594c;
}

.ak-hdoc-main-sub .ak-icon {
  width: 15px;
  height: 15px;
  color: #075d3a;
}

.ak-hdoc-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  color: #075d3a !important;
  border: 1.5px solid #075d3a;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}

.ak-hdoc-add-btn:hover {
  background: #075d3a;
  color: #ffffff !important;
}

.ak-hdoc-add-btn .ak-icon {
  width: 15px;
  height: 15px;
}

.ak-hdoc-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

/* Left Department Sidebar (Desktop) */
.ak-hdoc-dept-sidebar {
  background: #ffffff;
  border: 1px solid #e1ece6;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(7, 45, 28, 0.04);
}

.ak-hdoc-dept-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ak-hdoc-dept-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #253f32;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ak-hdoc-dept-item:hover {
  background: #eef6f1;
  color: #075d3a;
}

.ak-hdoc-dept-item.is-active {
  background: #075d3a;
  color: #ffffff;
}

.ak-hdoc-dept-icon {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.85;
}

.ak-hdoc-dept-icon .ak-icon {
  width: 16px;
  height: 16px;
}

.ak-hdoc-dept-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ak-hdoc-dept-count {
  font-size: 12px;
  opacity: 0.82;
  flex-shrink: 0;
}

.ak-hdoc-more-depts-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px dashed #c8dcd2;
  background: #f8fbf9;
  color: #075d3a;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ak-hdoc-more-depts-btn .ak-icon {
  width: 14px;
  height: 14px;
}

/* Center Doctor Search & Cards Area */
.ak-hdoc-center-col {
  min-width: 0;
}

.ak-hdoc-search-form {
  background: #ffffff;
  border: 1px solid #e1ece6;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(7, 45, 28, 0.03);
}

.ak-hdoc-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.ak-hdoc-search-input-wrap {
  display: flex;
  align-items: center;
  background: #f8fbf9;
  border: 1.5px solid #d5e3dc;
  border-radius: 10px;
  padding: 0 12px;
  min-height: 44px;
}

.ak-hdoc-search-input-wrap:focus-within {
  border-color: #075d3a;
  background: #ffffff;
}

.ak-hdoc-search-icon {
  display: inline-flex;
  color: #587064;
  margin-right: 8px;
  flex-shrink: 0;
}

.ak-hdoc-search-icon .ak-icon {
  width: 17px;
  height: 17px;
}

.ak-hdoc-search-input-wrap input[type="search"] {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #10261b;
  outline: none;
}

.ak-hdoc-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #075d3a;
  color: #ffffff;
  border: 0;
  border-radius: 10px;
  padding: 0 18px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ak-hdoc-search-btn .ak-icon {
  width: 16px;
  height: 16px;
}

.ak-hdoc-subfilters-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ak-hdoc-mobile-dept-select-wrap {
  display: none;
  flex: 1;
  min-width: 180px;
}

.ak-hdoc-mobile-select,
.ak-hdoc-desig-select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid #d5e3dc;
  background: #f8fbf9;
  font-size: 13px;
  font-weight: 700;
  color: #153023;
}

.ak-hdoc-desig-select-wrap {
  flex: 1;
  min-width: 180px;
}

.ak-hdoc-reset-btn {
  font-size: 12.5px;
  font-weight: 700;
  color: #c81e2b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}

/* Department Group Section & Doctor Cards */
.ak-hdoc-group-section {
  margin-bottom: 22px;
}

.ak-hdoc-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ak-hdoc-group-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #0f261b;
}

.ak-hdoc-group-more {
  border: 0;
  background: transparent;
  color: #075d3a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ak-hdoc-cards-stack {
  display: grid;
  gap: 12px;
}

.ak-hdoc-card {
  background: #ffffff;
  border: 1px solid #e1ece6;
  border-radius: 14px;
  padding: 15px;
  box-shadow: 0 4px 14px rgba(7, 45, 28, 0.03);
  min-width: 0;
}

.ak-hdoc-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.ak-hdoc-avatar {
  width: 74px;
  height: 74px;
  border-radius: 14px;
  overflow: hidden;
  background: #e8f3ee;
  border: 1.5px solid #cfe2d8;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ak-hdoc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-hdoc-avatar-placeholder {
  color: #075d3a;
  display: inline-flex;
}

.ak-hdoc-avatar-placeholder .ak-icon {
  width: 34px;
  height: 34px;
}

.ak-hdoc-body {
  flex: 1;
  min-width: 0;
}

.ak-hdoc-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.ak-hdoc-name {
  margin: 0 0 3px;
  font-size: 16.5px;
  font-weight: 800;
  color: #0f261b;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-hdoc-designation {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: #365244;
}

.ak-hdoc-qual {
  margin: 0;
  font-size: 12.5px;
  color: #587064;
}

.ak-hdoc-pills-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 7px 0;
}

.ak-hdoc-pill {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.ak-hdoc-pill.pill-dept {
  background: #dcfce7;
  color: #166534;
}

.ak-hdoc-pill.pill-spec,
.ak-hdoc-pill.pill-role {
  background: #dbeafe;
  color: #1e40af;
}

.ak-hdoc-hours {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: #466053;
}

.ak-hdoc-hours .ak-icon {
  width: 14px;
  height: 14px;
  color: #075d3a;
  flex-shrink: 0;
}

.ak-hdoc-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ak-hdoc-btn-call,
.ak-hdoc-btn-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
}

.ak-hdoc-btn-call {
  background: #075d3a;
  color: #ffffff !important;
  border: 1px solid #075d3a;
}

.ak-hdoc-btn-call:hover {
  background: #05482d;
}

.ak-hdoc-btn-detail {
  background: #f5faf7;
  color: #1c382b !important;
  border: 1px solid #cde0d6;
}

.ak-hdoc-btn-detail:hover {
  background: #e6f3ec;
  border-color: #075d3a;
}

.ak-hdoc-btn-call .ak-icon,
.ak-hdoc-btn-detail .ak-icon {
  width: 14px;
  height: 14px;
}

/* Doctor Empty State */
.ak-hdoc-empty-state {
  background: #ffffff;
  border: 1px solid #e1ece6;
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
}

.ak-hdoc-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #e6f4ed;
  color: #075d3a;
  margin-bottom: 12px;
}

.ak-hdoc-empty-icon .ak-icon {
  width: 28px;
  height: 28px;
}

.ak-hdoc-empty-state h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: #0f261b;
}

.ak-hdoc-empty-state p {
  margin: 0 auto 16px;
  max-width: 520px;
  font-size: 13.5px;
  color: #516b5e;
  line-height: 1.6;
}

.ak-hdoc-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ak-hdoc-right-sidebar {
  display: grid;
  gap: 16px;
}

.ak-hdoc-mini-map {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #cfe2d8;
}

.ak-hdoc-mini-map svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Media Gallery Tab */
.ak-hdet-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.ak-hdet-media-figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #dce8e2;
  aspect-ratio: 16 / 10;
}

.ak-hdet-media-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 6. Related Healthcare Institutions */
.ak-hdet-related-section {
  margin-top: 32px;
}

.ak-hdet-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ak-hdet-related-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #0f261b;
}

.ak-hdet-related-head a {
  font-size: 13.5px;
  font-weight: 700;
  color: #075d3a;
  text-decoration: none;
}

.ak-hdet-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ak-hdet-rel-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e1ece6;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(7, 45, 28, 0.04);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.ak-hdet-rel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(7, 45, 28, 0.09);
}

.ak-hdet-rel-media {
  height: 120px;
  background: #e6f2ec;
  overflow: hidden;
}

.ak-hdet-rel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-hdet-rel-body {
  padding: 12px 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
}

.ak-hdet-rel-copy {
  min-width: 0;
}

.ak-hdet-rel-copy h3 {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 800;
  color: #10261b;
  line-height: 1.3;
}

.ak-hdet-rel-copy p {
  margin: 6px 0 0;
  font-size: 12px;
  color: #546e61;
}

.ak-hdet-rel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #075d3a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Doctor Detail Modal */
.ak-doc-detail-modal {
  width: min(92vw, 480px);
  border: 1px solid #d5e5dc;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 18px 44px rgba(7, 45, 28, 0.22);
}

.ak-doc-detail-modal::backdrop {
  background: rgba(10, 32, 21, 0.62);
}

.ak-doc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6f0eb;
  margin-bottom: 12px;
}

.ak-doc-modal-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #075d3a;
}

.ak-doc-modal-meta p {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: #243d30;
  line-height: 1.5;
}

.ak-doc-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR HOSPITAL DETAILS & DOCTORS (320px - 1920px+)
   ========================================================================== */

@media (max-width: 1120px) {
  .ak-hdoc-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .ak-hdoc-right-sidebar {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .ak-hdet-hero-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .ak-hdet-two-col {
    grid-template-columns: minmax(0, 1fr);
  }

  .ak-hdet-services-grid,
  .ak-hdet-depts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-hdoc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ak-hdoc-dept-sidebar {
    display: none;
  }

  .ak-hdoc-mobile-dept-select-wrap {
    display: block;
  }

  .ak-hdoc-right-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-hdet-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ak-hdet-page-wrap {
    padding: 10px 0 48px;
  }

  .ak-hdet-breadcrumb {
    font-size: 11.5px;
    margin-bottom: 10px;
  }

  .ak-hdet-hero-card {
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 12px;
  }

  .ak-hdet-main-photo-wrap {
    max-height: 220px;
    border-radius: 12px;
  }

  .ak-hdet-thumb-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .ak-hdet-thumb-btn {
    height: 44px;
    border-radius: 8px;
  }

  .ak-hdet-title {
    font-size: clamp(19px, 5.5vw, 24px);
  }

  .ak-hdet-subtitle {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .ak-hdet-primary-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .ak-hdet-btn {
    min-height: 42px;
    font-size: 13.5px;
    padding: 8px 12px;
  }

  .ak-hdet-utility-bar {
    gap: 6px;
    padding-top: 10px;
  }

  .ak-hdet-util-btn {
    font-size: 11px;
    padding: 5px 6px;
    min-height: 34px;
    gap: 4px;
  }

  /* 2x2 Compact Hospital Stats Cards on Mobile */
  .ak-hdet-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }

  .ak-hdet-stat-card {
    padding: 10px 12px;
    gap: 8px;
    border-radius: 12px;
  }

  .ak-hdet-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .ak-hdet-stat-icon .ak-icon {
    width: 18px;
    height: 18px;
  }

  .ak-hdet-stat-label {
    font-size: 11px;
  }

  .ak-hdet-stat-val {
    font-size: 13.5px;
  }

  /* Compact Scrollable Tab Bar on Mobile */
  .ak-hdet-tabs-wrap {
    padding: 5px;
    border-radius: 12px;
    margin-bottom: 14px;
  }

  .ak-hdet-tab-btn {
    min-height: 36px;
    padding: 0 13px;
    font-size: 12.5px;
    border-radius: 8px;
  }

  .ak-htab-label-full {
    display: none;
  }

  .ak-htab-label-short {
    display: inline;
  }

  .ak-hdet-card {
    padding: 14px;
    border-radius: 14px;
  }

  .ak-hdet-meta-box {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
    gap: 10px;
  }

  .ak-hdet-services-grid,
  .ak-hdet-depts-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  /* Mobile Doctors Directory Layout */
  .ak-hdoc-main-heading {
    font-size: 18px;
  }

  .ak-hdoc-search-form {
    padding: 10px;
    border-radius: 12px;
  }

  .ak-hdoc-search-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .ak-hdoc-search-input-wrap {
    min-height: 40px;
    padding: 0 10px;
  }

  .ak-hdoc-search-input-wrap input[type="search"] {
    font-size: 12.5px;
  }

  .ak-hdoc-search-btn {
    min-height: 40px;
    padding: 0 12px;
    font-size: 13px;
  }

  .ak-hdoc-subfilters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .ak-hdoc-mobile-dept-select-wrap,
  .ak-hdoc-desig-select-wrap {
    min-width: 0;
    width: 100%;
  }

  .ak-hdoc-card {
    padding: 12px;
    border-radius: 12px;
  }

  .ak-hdoc-card-inner {
    gap: 10px;
  }

  .ak-hdoc-avatar {
    width: 60px;
    height: 60px;
    border-radius: 12px;
  }

  .ak-hdoc-name {
    font-size: 15px;
  }

  .ak-hdoc-designation {
    font-size: 12px;
  }

  .ak-hdoc-qual {
    font-size: 11.5px;
  }

  .ak-hdoc-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .ak-hdoc-btn-call,
  .ak-hdoc-btn-detail {
    min-height: 34px;
    padding: 5px 8px;
    font-size: 12px;
  }

  .ak-hdoc-right-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 359px) {
  .ak-hdet-util-btn span {
    font-size: 10px;
  }

  .ak-hdoc-avatar {
    width: 50px;
    height: 50px;
  }

  .ak-hdoc-name {
    font-size: 13.8px;
  }

  .ak-hdet-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   EMERGENCY AMBULANCE DIRECTORY PAGE (জরুরি অ্যাম্বুলেন্স)
   Desktop & Mobile Responsive Design (320px, 360px, 375px, 390px, 414px, Desktop)
   ========================================================================== */

.ak-amb-page-wrap {
  background: #f4f8f5;
  padding-bottom: 56px;
  overflow-x: clip;
}

/* 1. Hero Banner */
.ak-amb-hero {
  position: relative;
  background-color: #eef5f0;
  background-image: var(--ak-amb-hero-bg);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  border-bottom: 1px solid #d9e6de;
  padding: 22px 0 34px;
  overflow: hidden;
}

.ak-amb-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(250, 253, 251, 0.92) 44%,
    rgba(250, 253, 251, 0.45) 70%,
    rgba(250, 253, 251, 0.10) 100%
  );
  pointer-events: none;
}

.ak-amb-hero-inner {
  position: relative;
  z-index: 2;
}

.ak-amb-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: #4b6358;
  margin-bottom: 14px;
}

.ak-amb-breadcrumb a {
  color: #365347;
  text-decoration: none;
  font-weight: 500;
}

.ak-amb-breadcrumb a:hover {
  color: #075d3a;
  text-decoration: underline;
}

.ak-amb-hero-copy {
  max-width: 580px;
}

.ak-amb-hero-title {
  margin: 0 0 8px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ak-amb-title-green {
  color: #075d3a;
}

.ak-amb-title-red {
  color: #d91b24;
}

.ak-amb-hero-subtitle {
  margin: 0 0 6px;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 700;
  color: #162e24;
  line-height: 1.4;
}

.ak-amb-hero-desc {
  margin: 0 0 20px;
  font-size: 14px;
  color: #435c50;
  line-height: 1.55;
  max-width: 510px;
}

.ak-amb-hero-actions {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 14px;
}

.ak-amb-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-height: 58px;
  box-sizing: border-box;
}

.ak-amb-cta-btn:hover {
  transform: translateY(-1px);
}

.ak-amb-cta-btn--primary {
  background: linear-gradient(135deg, #dc1e28 0%, #b9151e 100%);
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(220, 30, 40, 0.25);
  border: 1px solid #b9151e;
}

.ak-amb-cta-btn--primary .ak-amb-cta-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}

.ak-amb-cta-btn--primary .ak-amb-cta-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.ak-amb-cta-btn--primary .ak-amb-cta-text strong {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
}

.ak-amb-cta-btn--primary .ak-amb-cta-text small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.ak-amb-cta-btn--999 {
  background: #ffffff;
  color: #162e24 !important;
  border: 1.5px solid #f1c2c5;
  box-shadow: 0 6px 18px rgba(15, 36, 27, 0.08);
  padding-right: 18px;
}

.ak-amb-cta-icon--siren {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff0f1;
  color: #dc1e28;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-amb-cta-btn--999 .ak-amb-cta-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.ak-amb-cta-btn--999 .ak-amb-cta-text small {
  font-size: 12px;
  font-weight: 700;
  color: #dc1e28;
}

.ak-amb-cta-btn--999 .ak-amb-cta-text strong {
  font-size: 22px;
  font-weight: 800;
  color: #dc1e28;
  letter-spacing: 0.02em;
}

.ak-amb-cta-arrow {
  font-size: 22px;
  font-weight: 700;
  color: #dc1e28;
  margin-left: 4px;
}

/* Official 999 Info Banner */
.ak-amb-999-banner {
  margin-top: 16px;
  background: #fff5f5;
  border: 1.5px solid #fecaca;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.08);
}

.ak-amb-999-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ak-amb-999-badge {
  display: inline-block;
  background: #dc2626;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.ak-amb-999-info h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: #7f1d1d;
}

.ak-amb-999-info p {
  margin: 0;
  font-size: 13.5px;
  color: #451a1a;
  max-width: 680px;
  line-height: 1.5;
}

.ak-amb-999-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ak-amb-999-call-now {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #dc2626;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: 10px;
  text-decoration: none;
}

.ak-amb-999-call-alt {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: #991b1b !important;
  border: 1px solid #fca5a5;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
  text-decoration: none;
}

.ak-amb-999-close {
  background: transparent;
  border: 1px solid #fca5a5;
  color: #991b1b;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

/* 2. Five Ambulance Category Buttons */
.ak-amb-category-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.ak-amb-cat-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #ffffff;
  border: 1px solid #dce8e1;
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration: none;
  color: #162e24;
  box-shadow: 0 3px 10px rgba(10, 42, 28, 0.04);
  transition: all 0.16s ease;
  min-width: 0;
}

.ak-amb-cat-btn:hover {
  border-color: #075d3a;
  transform: translateY(-1px);
}

.ak-amb-cat-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-amb-cat-btn.tone-green .ak-amb-cat-icon {
  background: #e6f5ec;
  color: #075d3a;
}

.ak-amb-cat-btn.tone-red .ak-amb-cat-icon {
  background: #fee2e2;
  color: #dc2626;
}

.ak-amb-cat-btn.tone-blue .ak-amb-cat-icon {
  background: #dbeafe;
  color: #2563eb;
}

.ak-amb-cat-btn.tone-purple .ak-amb-cat-icon {
  background: #ede9fe;
  color: #7c3aed;
}

.ak-amb-cat-btn.tone-orange .ak-amb-cat-icon {
  background: #ffedd5;
  color: #ea580c;
}

.ak-amb-cat-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.ak-amb-cat-copy strong {
  font-size: 14.5px;
  font-weight: 700;
  color: #132a20;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-amb-cat-copy small {
  font-size: 11.8px;
  color: #5c7468;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-amb-cat-btn.is-active {
  background: #075d3a;
  border-color: #075d3a;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(7, 93, 58, 0.22);
}

.ak-amb-cat-btn.is-active .ak-amb-cat-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.ak-amb-cat-btn.is-active .ak-amb-cat-copy strong {
  color: #ffffff;
}

.ak-amb-cat-btn.is-active .ak-amb-cat-copy small {
  color: rgba(255, 255, 255, 0.85);
}

/* 3. Search & Filter Card */
.ak-amb-search-card {
  background: #ffffff;
  border: 1px solid #dce8e1;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(10, 42, 28, 0.04);
  margin-bottom: 22px;
}

.ak-amb-search-heading {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  color: #132a20;
}

.ak-amb-search-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(170px, 0.85fr) auto;
  gap: 12px;
  margin-bottom: 14px;
}

.ak-amb-input-keyword,
.ak-amb-input-location {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8fbf9;
  border: 1px solid #cfe0d6;
  border-radius: 11px;
  padding: 0 12px;
  min-height: 44px;
  min-width: 0;
}

.ak-amb-input-keyword:focus-within,
.ak-amb-input-location:focus-within {
  border-color: #075d3a;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(7, 93, 58, 0.1);
}

.ak-amb-input-icon {
  color: #557063;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  flex-shrink: 0;
}

.ak-amb-input-keyword input,
.ak-amb-input-location select {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  font-size: 14px;
  color: #132a20;
  padding: 8px 0;
  outline: none !important;
  box-shadow: none !important;
  min-width: 0;
}

.ak-amb-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #075d3a;
  color: #ffffff;
  border: 0;
  border-radius: 11px;
  padding: 0 24px;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.ak-amb-submit-btn:hover {
  background: #05492d;
}

.ak-amb-search-bottom-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.ak-amb-filter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ak-amb-filter-field label {
  font-size: 12.5px;
  font-weight: 700;
  color: #2c473b;
}

.ak-amb-filter-field select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #cfe0d6;
  border-radius: 10px;
  background: #f8fbf9;
  padding: 6px 10px;
  font-size: 13.5px;
  color: #162e24;
  outline: none;
  box-sizing: border-box;
}

.ak-amb-filter-field select:focus {
  border-color: #075d3a;
  background: #ffffff;
}

.ak-amb-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  background: #f1f6f3;
  border: 1px solid #cfe0d6;
  border-radius: 10px;
  color: #254236;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.ak-amb-reset-btn:hover {
  background: #e2ede7;
  color: #075d3a;
}

/* 4. Two-Column Main Layout */
.ak-amb-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}

.ak-amb-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ak-amb-results-count {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: #162e24;
}

.ak-amb-results-count strong {
  color: #075d3a;
}

.ak-amb-view-toggle {
  display: inline-flex;
  background: #ffffff;
  border: 1px solid #d5e3dc;
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}

.ak-amb-view-btn {
  border: 0;
  background: transparent;
  color: #526b5e;
  width: 32px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ak-amb-view-btn.is-active {
  background: #075d3a;
  color: #ffffff;
}

/* 5. Professional Ambulance Cards */
.ak-amb-cards-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ak-amb-cards-list.is-grid-view {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ak-amb-card {
  background: #ffffff;
  border: 1px solid #dce8e1;
  border-radius: 15px;
  padding: 14px 16px;
  box-shadow: 0 3px 12px rgba(10, 42, 28, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ak-amb-card:hover {
  border-color: #9ec8b2;
  box-shadow: 0 8px 22px rgba(10, 42, 28, 0.08);
}

.ak-acard-inner {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.ak-amb-cards-list.is-grid-view .ak-acard-inner {
  grid-template-columns: minmax(0, 1fr);
}

.ak-acard-media {
  display: block;
  width: 168px;
  height: 124px;
  border-radius: 11px;
  overflow: hidden;
  background: #eef6f2;
  border: 1px solid #e1ece6;
  flex-shrink: 0;
}

.ak-amb-cards-list.is-grid-view .ak-acard-media {
  width: 100%;
  height: 150px;
}

.ak-acard-media img,
.ak-acard-illust,
.ak-acard-ambulance-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-acard-body {
  min-width: 0;
}

.ak-acard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ak-acard-title-wrap {
  min-width: 0;
}

.ak-acard-title {
  margin: 0 0 6px;
  font-size: 17.5px;
  font-weight: 800;
  line-height: 1.3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-acard-title a {
  color: #12281e;
  text-decoration: none;
}

.ak-acard-title a:hover {
  color: #075d3a;
}

.ak-acard-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  flex-shrink: 0;
}

.ak-acard-verified-badge svg {
  width: 11px;
  height: 11px;
}

.ak-acard-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-acard-pill {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.ak-acard-pill.pill-green {
  background: #e3f5ea;
  color: #075d3a;
}

.ak-acard-pill.pill-blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.ak-acard-pill.pill-orange {
  background: #ffedd5;
  color: #c2410c;
}

.ak-acard-pill.pill-247 {
  background: #ffe4e6;
  color: #be123c;
}

.ak-acard-bookmark {
  border: 1px solid #e2ece6;
  background: #fff8f8;
  color: #e11d48;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.ak-acard-bookmark:hover,
.ak-acard-bookmark[aria-pressed="true"] {
  background: #ffe4e6;
  border-color: #fda4af;
}

.ak-acard-meta-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ak-acard-meta-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: #3d564a;
  line-height: 1.4;
}

.ak-acard-meta-item svg {
  width: 15px;
  height: 15px;
  color: #075d3a;
  flex-shrink: 0;
}

.ak-acard-phone-link {
  color: #153125;
  font-weight: 700;
  text-decoration: none;
}

.ak-acard-phone-link:hover {
  color: #075d3a;
  text-decoration: underline;
}

.ak-acard-facilities {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 3px;
}

.ak-acard-fac-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #2f5241;
}

.ak-acard-fac-chip svg {
  color: #075d3a;
  flex-shrink: 0;
}

.ak-acard-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 132px;
}

.ak-amb-cards-list.is-grid-view .ak-acard-actions {
  flex-direction: row;
}

.ak-acard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13.8px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.ak-acard-btn--call {
  background: #075d3a;
  color: #ffffff !important;
  border: 1px solid #075d3a;
}

.ak-acard-btn--call:hover {
  background: #05492d;
}

.ak-acard-btn--details {
  background: #f3f8f5;
  color: #19382b !important;
  border: 1px solid #cfe0d6;
}

.ak-acard-btn--details:hover {
  background: #e4efe9;
  border-color: #075d3a;
  color: #075d3a !important;
}

/* Pagination */
.ak-amb-pagination {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

.ak-amb-pagination ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ak-amb-pagination a,
.ak-amb-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  background: #ffffff;
  border: 1px solid #d5e3dc;
  color: #183528;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.ak-amb-pagination span.current {
  background: #075d3a;
  border-color: #075d3a;
  color: #ffffff;
}

/* Empty State */
.ak-amb-empty-state {
  background: #ffffff;
  border: 1px dashed #b9d3c5;
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
}

.ak-amb-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #eaf5ee;
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.ak-amb-empty-state h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #162e24;
}

.ak-amb-empty-state p {
  margin: 0 auto 18px;
  max-width: 500px;
  font-size: 14px;
  color: #4c6659;
  line-height: 1.55;
}

.ak-amb-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ak-amb-reset-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 10px;
  background: #075d3a;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.ak-amb-999-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  background: #dc2626;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

/* 6. Right Sidebar: Map & Emergency Assistance */
.ak-amb-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 84px;
}

.ak-amb-map-card,
.ak-amb-emergency-card {
  background: #ffffff;
  border: 1px solid #dce8e1;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(10, 42, 28, 0.04);
}

.ak-amb-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ak-amb-map-head h3,
.ak-amb-emergency-heading {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: #132a20;
}

.ak-amb-map-expand {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #d5e3dc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2c4a3d;
  background: #f8fbf9;
}

.ak-amb-map-canvas {
  position: relative;
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #d5e3dc;
  background: #edf4f0;
}

.ak-amb-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.2s ease;
}

.ak-amb-map-pins {
  position: absolute;
  inset: 0;
}

.ak-amb-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #dc2626;
  color: #ffffff;
  border: 2.5px solid #ffffff;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}

.ak-amb-map-pin.is-selected,
.ak-amb-map-pin:hover {
  transform: translate(-50%, -50%) scale(1.18);
  background: #075d3a;
  z-index: 4;
}

.ak-amb-map-popup {
  position: absolute;
  left: 12px;
  right: 48px;
  bottom: 12px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #cfe0d6;
  border-radius: 11px;
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(10, 42, 28, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 5;
}

.ak-amb-map-popup strong {
  font-size: 13px;
  color: #12281e;
  line-height: 1.3;
}

.ak-amb-map-popup span {
  font-size: 11.5px;
  color: #546e61;
}

.ak-amb-popup-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.ak-amb-popup-links a {
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
}

.ak-amb-popup-links a.ak-amb-popup-call {
  color: #075d3a;
}

.ak-amb-map-zoom {
  position: absolute;
  right: 10px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #cfe0d6;
  border-radius: 8px;
  overflow: hidden;
  z-index: 5;
}

.ak-amb-map-zoom button {
  width: 28px;
  height: 28px;
  border: 0;
  background: #ffffff;
  color: #1f3c2f;
  font-weight: 800;
  cursor: pointer;
}

.ak-amb-map-zoom button + button {
  border-top: 1px solid #e2ece6;
}

/* Emergency Assistance 2x2 Grid */
.ak-amb-emergency-heading {
  margin-bottom: 12px;
}

.ak-amb-emergency-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ak-amb-emg-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid #e4ede8;
  background: #fcfefd;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.ak-amb-emg-tile:hover {
  transform: translateY(-1px);
  border-color: #b7d4c4;
}

.ak-amb-emg-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-amb-emg-tile.tone-red {
  background: #fff5f5;
  border-color: #fed7d7;
}
.ak-amb-emg-tile.tone-red .ak-amb-emg-icon {
  background: #dc2626;
  color: #ffffff;
}

.ak-amb-emg-tile.tone-orange {
  background: #fffaf0;
  border-color: #feebc8;
}
.ak-amb-emg-tile.tone-orange .ak-amb-emg-icon {
  background: #ea580c;
  color: #ffffff;
}

.ak-amb-emg-tile.tone-blue {
  background: #f0f7ff;
  border-color: #bfdbfe;
}
.ak-amb-emg-tile.tone-blue .ak-amb-emg-icon {
  background: #2563eb;
  color: #ffffff;
}

.ak-amb-emg-tile.tone-green {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.ak-amb-emg-tile.tone-green .ak-amb-emg-icon {
  background: #075d3a;
  color: #ffffff;
}

.ak-amb-emg-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.ak-amb-emg-copy small {
  font-size: 11.5px;
  font-weight: 700;
  color: #496356;
}

.ak-amb-emg-copy strong {
  font-size: 17px;
  font-weight: 800;
  color: #12281e;
}

.ak-amb-verified-hotlines {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e4ede8;
}

.ak-amb-verified-hotlines h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #284739;
}

.ak-amb-verified-hotlines ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ak-amb-verified-hotlines li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: #435e51;
}

.ak-amb-verified-hotlines li a {
  font-weight: 700;
  color: #075d3a;
  text-decoration: none;
  white-space: nowrap;
}

/* Responsive Breakpoints (Tablet & Mobile: 320px, 360px, 375px, 390px, 414px) */
@media (max-width: 1080px) {
  .ak-amb-main-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ak-amb-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .ak-amb-category-bar {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    padding-bottom: 4px;
  }

  .ak-amb-category-bar::-webkit-scrollbar {
    display: none;
  }

  .ak-amb-cat-btn {
    flex: 0 0 auto;
    min-width: 185px;
  }
}

@media (max-width: 767px) {
  .ak-amb-page-wrap {
    padding-bottom: 84px;
  }

  .ak-amb-hero {
    padding: 14px 0 20px;
    background-position: 78% center;
  }

  .ak-amb-hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.92) 56%,
      rgba(255, 255, 255, 0.68) 100%
    );
  }

  .ak-amb-breadcrumb {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .ak-amb-hero-title {
    font-size: 26px;
    margin-bottom: 5px;
  }

  .ak-amb-hero-subtitle {
    font-size: 14.5px;
    margin-bottom: 4px;
  }

  .ak-amb-hero-desc {
    font-size: 12.8px;
    margin-bottom: 14px;
  }

  .ak-amb-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 10px;
  }

  .ak-amb-cta-btn {
    padding: 9px 12px;
    min-height: 50px;
    gap: 8px;
    border-radius: 12px;
  }

  .ak-amb-cta-btn--primary .ak-amb-cta-icon,
  .ak-amb-cta-icon--siren {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .ak-amb-cta-btn--primary .ak-amb-cta-text strong {
    font-size: 13.8px;
  }

  .ak-amb-cta-btn--primary .ak-amb-cta-text small {
    font-size: 10.8px;
  }

  .ak-amb-cta-btn--999 .ak-amb-cta-text small {
    font-size: 10.8px;
  }

  .ak-amb-cta-btn--999 .ak-amb-cta-text strong {
    font-size: 18px;
  }

  .ak-amb-category-bar {
    margin: 14px 0;
    gap: 8px;
  }

  .ak-amb-cat-btn {
    min-width: 152px;
    padding: 9px 12px;
    border-radius: 12px;
    gap: 9px;
  }

  .ak-amb-cat-icon {
    width: 32px;
    height: 32px;
  }

  .ak-amb-cat-copy strong {
    font-size: 13.2px;
  }

  .ak-amb-cat-copy small {
    font-size: 11px;
  }

  .ak-amb-search-card {
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 16px;
  }

  .ak-amb-search-heading {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .ak-amb-search-top-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
    margin-bottom: 10px;
  }

  .ak-amb-input-keyword {
    grid-column: 1 / -1;
    min-height: 42px;
  }

  .ak-amb-input-location {
    min-height: 42px;
  }

  .ak-amb-submit-btn {
    min-height: 42px;
    padding: 0 16px;
    font-size: 14px;
    width: 100%;
  }

  .ak-amb-search-bottom-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .ak-amb-reset-btn {
    width: 100%;
  }

  .ak-amb-card {
    padding: 12px;
    border-radius: 14px;
  }

  .ak-acard-inner {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .ak-acard-media {
    width: 96px;
    height: 88px;
    border-radius: 10px;
  }

  .ak-acard-title {
    font-size: 15.2px;
    margin-bottom: 4px;
  }

  .ak-acard-pill {
    font-size: 11px;
    padding: 2px 8px;
  }

  .ak-acard-bookmark {
    width: 30px;
    height: 30px;
  }

  .ak-acard-meta-item {
    font-size: 12.5px;
  }

  .ak-acard-facilities {
    gap: 7px;
  }

  .ak-acard-fac-chip {
    font-size: 11.5px;
  }

  .ak-acard-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    margin-top: 2px;
  }

  .ak-acard-btn {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .ak-amb-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 374px) {
  .ak-amb-hero-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .ak-amb-search-top-row,
  .ak-amb-search-bottom-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ak-acard-inner {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
  }

  .ak-acard-media {
    width: 82px;
    height: 78px;
  }

  .ak-acard-title {
    font-size: 14.2px;
  }
}

/* ==========================================================================
   POLICE ASSISTANCE & THANA DIRECTORY PAGE (পুলিশ সহায়তা ও থানা)
   Desktop & Mobile Responsive Design (320px, 360px, 375px, 390px, 414px, 480px, Desktop)
   ========================================================================== */

.ak-pol-page-wrap {
  background: #f4f7f9;
  padding-bottom: 60px;
  overflow-x: clip;
}

/* 1. Hero Banner */
.ak-pol-hero {
  position: relative;
  background-color: #eaf2fb;
  background-image: var(--ak-pol-hero-bg);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  border-bottom: 1px solid #d5e2ef;
  padding: 22px 0 32px;
  overflow: hidden;
}

.ak-pol-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(246, 250, 255, 0.93) 45%,
    rgba(246, 250, 255, 0.45) 72%,
    rgba(246, 250, 255, 0.08) 100%
  );
  pointer-events: none;
}

.ak-pol-hero-inner {
  position: relative;
  z-index: 2;
}

.ak-pol-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: #4b6358;
  margin-bottom: 14px;
}

.ak-pol-breadcrumb a {
  color: #355245;
  text-decoration: none;
  font-weight: 500;
}

.ak-pol-breadcrumb a:hover {
  color: #075d3a;
  text-decoration: underline;
}

.ak-pol-hero-copy {
  max-width: 580px;
}

.ak-pol-hero-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ak-pol-title-green {
  color: #075d3a;
}

.ak-pol-title-blue {
  color: #1d4ed8;
}

.ak-pol-hero-desc {
  margin: 0 0 20px;
  font-size: clamp(14.5px, 1.5vw, 17.5px);
  font-weight: 600;
  color: #1e332a;
  line-height: 1.5;
  max-width: 490px;
}

/* Two Hero Buttons Side-by-Side on Desktop & Mobile */
.ak-pol-hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 265px));
  gap: 14px;
  align-items: stretch;
}

.ak-pol-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  min-height: 58px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ak-pol-hero-btn:hover {
  transform: translateY(-1px);
}

.ak-pol-hero-btn--999 {
  background: linear-gradient(135deg, #e51d24 0%, #c8141b 100%);
  color: #ffffff !important;
  border: 1.5px solid #c8141b;
  box-shadow: 0 8px 20px rgba(225, 29, 36, 0.25);
}

.ak-pol-hero-btn--999 .ak-pol-hero-btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-pol-hero-btn--999 .ak-pol-hero-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}

.ak-pol-hero-btn--999 .ak-pol-hero-btn-text small {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.ak-pol-hero-btn--999 .ak-pol-hero-btn-text strong {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
}

.ak-pol-hero-btn--nearest {
  background: #ffffff;
  color: #1d4ed8;
  border: 1.5px solid #60a5fa;
  box-shadow: 0 6px 18px rgba(29, 78, 216, 0.09);
}

.ak-pol-hero-btn-icon--pin {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eff6ff;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-pol-hero-btn--nearest .ak-pol-hero-btn-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.ak-pol-hero-btn--nearest .ak-pol-hero-btn-text strong {
  font-size: 15.5px;
  font-weight: 800;
  color: #1e3a8a;
  display: block;
  line-height: 1.25;
}

.ak-pol-hero-btn-arrow {
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Geolocation / Nearest Notice */
.ak-pol-nearest-notice {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  font-size: 13.8px;
  line-height: 1.5;
}

.ak-pol-nearest-notice.is-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

/* 2. Six Quick Service Cards — Tidy 3-Column Grid on Both Desktop & Mobile */
.ak-pol-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.ak-pol-qcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #dde6ef;
  border-radius: 16px;
  padding: 16px 12px;
  min-height: 118px;
  text-decoration: none;
  color: #162e24;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 12px rgba(15, 36, 56, 0.04);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
  box-sizing: border-box;
}

.ak-pol-qcard:hover,
.ak-pol-qcard.is-active {
  border-color: #1d4ed8;
  box-shadow: 0 6px 18px rgba(29, 78, 216, 0.1);
  transform: translateY(-1px);
}

.ak-pol-qcard-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-pol-qcard-icon.tone-blue {
  background: #dbeafe;
  color: #1d4ed8;
}
.ak-pol-qcard-icon.tone-green {
  background: #dcfce7;
  color: #075d3a;
}
.ak-pol-qcard-icon.tone-red {
  background: #fee2e2;
  color: #dc2626;
}
.ak-pol-qcard-icon.tone-orange {
  background: #ffedd5;
  color: #ea580c;
}
.ak-pol-qcard-icon.tone-purple {
  background: #ede9fe;
  color: #7c3aed;
}
.ak-pol-qcard-icon.tone-teal {
  background: #ccfbf1;
  color: #0d9488;
}

.ak-pol-qcard-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #152c22;
  line-height: 1.32;
  word-break: break-word;
}

.ak-pol-qcard-title small {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

/* 3. Search & Quick Area Filter Card */
.ak-pol-search-card {
  background: #ffffff;
  border: 1px solid #dde6ef;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(15, 36, 56, 0.04);
  margin-bottom: 22px;
}

.ak-pol-search-heading {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  color: #132a20;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ak-pol-search-heading svg {
  width: 19px;
  height: 19px;
  color: #075d3a;
}

.ak-pol-search-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(180px, 0.85fr) auto;
  gap: 12px;
  margin-bottom: 14px;
}

.ak-pol-input-q,
.ak-pol-input-loc {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 11px;
  padding: 0 12px;
  min-height: 44px;
  min-width: 0;
}

.ak-pol-input-q:focus-within,
.ak-pol-input-loc:focus-within {
  border-color: #075d3a;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(7, 93, 58, 0.1);
}

.ak-pol-field-icon {
  color: #64748b;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  flex-shrink: 0;
}

.ak-pol-input-q input,
.ak-pol-input-loc select {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  font-size: 14px;
  color: #132a20;
  padding: 8px 0;
  outline: none !important;
  box-shadow: none !important;
  min-width: 0;
}

.ak-pol-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #075d3a;
  color: #ffffff;
  border: 0;
  border-radius: 11px;
  padding: 0 28px;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ak-pol-submit-btn:hover {
  background: #05492d;
}

/* Quick Area Pills Row */
.ak-pol-pills-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ak-pol-pills-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.ak-pol-pills-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 0;
}

.ak-pol-pills-scroll::-webkit-scrollbar {
  display: none;
}

.ak-pol-area-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: all 0.15s ease;
}

.ak-pol-area-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.ak-pol-area-pill.is-active {
  background: #075d3a;
  border-color: #075d3a;
  color: #ffffff;
  font-weight: 700;
}

.ak-pol-more-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  font-size: 12.8px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.ak-pol-extra-filters {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.ak-pol-extra-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ak-pol-extra-field label {
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
}

.ak-pol-extra-field select {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  padding: 6px 10px;
  font-size: 13.5px;
  color: #1e293b;
}

.ak-pol-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* 4. Two-Column Layout */
.ak-pol-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 22px;
  align-items: start;
}

.ak-pol-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ak-pol-results-heading {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: #12281e;
}

.ak-pol-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ak-pol-mobile-tabs {
  display: none;
}

.ak-pol-sort-select {
  min-height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #ffffff;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

/* 5. Professional Police-Station Cards */
.ak-pol-cards-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ak-pol-card {
  background: #ffffff;
  border: 1px solid #dde6ef;
  border-radius: 15px;
  padding: 14px 16px;
  box-shadow: 0 3px 12px rgba(15, 36, 56, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ak-pol-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 8px 22px rgba(15, 36, 56, 0.08);
}

.ak-pcard-inner {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.ak-pcard-media {
  display: block;
  width: 164px;
  height: 114px;
  border-radius: 10px;
  overflow: hidden;
  background: #dceeff;
  border: 1px solid #cbd5e1;
  flex-shrink: 0;
}

.ak-pcard-media img,
.ak-pcard-illust,
.ak-pcard-thana-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-pcard-body {
  min-width: 0;
}

.ak-pcard-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.ak-pcard-heading-group {
  min-width: 0;
}

.ak-pcard-title {
  margin: 0 0 5px;
  font-size: 17.5px;
  font-weight: 800;
  line-height: 1.3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-pcard-title a {
  color: #0f172a;
  text-decoration: none;
}

.ak-pcard-title a:hover {
  color: #1d4ed8;
}

.ak-pcard-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  flex-shrink: 0;
}

.ak-pcard-verified svg {
  width: 11px;
  height: 11px;
}

.ak-pcard-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-pcard-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.ak-pcard-pill.pill-blue {
  background: #dbeafe;
  color: #1e40af;
}

.ak-pcard-pill.pill-green {
  background: #dcfce7;
  color: #075d3a;
}

.ak-pcard-pill.pill-teal {
  background: #ccfbf1;
  color: #0f766e;
}

.ak-pcard-pill.pill-purple {
  background: #ede9fe;
  color: #6d28d9;
}

.ak-pcard-pill.pill-outpost {
  background: #fef3c7;
  color: #92400e;
}

.ak-pcard-pill.pill-control {
  background: #fee2e2;
  color: #991b1b;
}

.ak-pcard-distance {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  color: #065f46;
  font-size: 11.5px;
  font-weight: 700;
}

.ak-pcard-bookmark {
  border: 1px solid #e2e8f0;
  background: #fff8f8;
  color: #e11d48;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.ak-pcard-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ak-pcard-meta-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.ak-pcard-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #334155;
  line-height: 1.4;
}

.ak-pcard-meta-item svg {
  width: 15px;
  height: 15px;
  color: #075d3a;
  flex-shrink: 0;
}

.ak-pcard-addr-sub,
.ak-pcard-oc-sub {
  font-size: 12.2px;
  color: #64748b;
}

.ak-pcard-phone-link {
  color: #0f172a;
  font-weight: 700;
  text-decoration: none;
}

.ak-pcard-phone-link:hover {
  color: #075d3a;
  text-decoration: underline;
}

.ak-pcard-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ak-pcard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 13.2px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.ak-pcard-btn--call {
  background: #075d3a;
  color: #ffffff !important;
  border: 1px solid #075d3a;
}

.ak-pcard-btn--call:hover {
  background: #05492d;
}

.ak-pcard-btn--map {
  background: #f1f5f9;
  color: #1e293b !important;
  border: 1px solid #cbd5e1;
}

.ak-pcard-btn--map:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.ak-pcard-btn--details {
  background: #ffffff;
  color: #075d3a !important;
  border: 1px solid #b6d8c6;
}

.ak-pcard-btn--details:hover {
  background: #ecfdf5;
  border-color: #075d3a;
}

/* 6. Right Sidebar: Khulna Thana Map, Emergency Contacts & Important Links */
.ak-pol-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 84px;
}

.ak-pol-map-card,
.ak-pol-emergency-card {
  background: #ffffff;
  border: 1px solid #dde6ef;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(15, 36, 56, 0.04);
}

.ak-pol-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ak-pol-map-head h3,
.ak-pol-sidebar-heading {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: #0f172a;
}

.ak-pol-map-expand {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1e293b;
  background: #f8fafc;
}

.ak-pol-map-canvas {
  position: relative;
  height: 245px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  background: #ebf3fa;
}

.ak-pol-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.2s ease;
}

.ak-pol-map-pins {
  position: absolute;
  inset: 0;
}

.ak-pol-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1d4ed8;
  color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(29, 78, 216, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}

.ak-pol-map-pin.is-selected,
.ak-pol-map-pin:hover {
  transform: translate(-50%, -50%) scale(1.2);
  background: #dc2626;
  z-index: 4;
}

.ak-pol-map-popup {
  position: absolute;
  left: 12px;
  right: 46px;
  bottom: 12px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #cbd5e1;
  border-radius: 11px;
  padding: 9px 12px;
  box-shadow: 0 6px 18px rgba(15, 36, 56, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 5;
}

.ak-pol-map-popup strong {
  font-size: 13px;
  color: #0f172a;
}

.ak-pol-map-popup span {
  font-size: 11.5px;
  color: #475569;
}

.ak-pol-popup-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.ak-pol-popup-links a {
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
}

.ak-pol-popup-links a.ak-pol-popup-call {
  color: #075d3a;
}

.ak-pol-map-zoom {
  position: absolute;
  right: 10px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  z-index: 5;
}

.ak-pol-map-zoom button {
  width: 28px;
  height: 28px;
  border: 0;
  background: #ffffff;
  color: #1e293b;
  font-weight: 800;
  cursor: pointer;
}

.ak-pol-map-zoom button + button {
  border-top: 1px solid #e2e8f0;
}

.ak-pol-full-map-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  min-height: 38px;
  border-radius: 10px;
  border: 1.5px solid #075d3a;
  color: #075d3a !important;
  background: #f4fbf7;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.ak-pol-full-map-btn:hover {
  background: #075d3a;
  color: #ffffff !important;
}

/* Emergency Contacts 2x2 Grid */
.ak-pol-sidebar-heading {
  margin-bottom: 12px;
}

.ak-pol-emg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ak-pol-emg-tile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  min-width: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.ak-pol-emg-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-pol-emg-tile.tone-red {
  background: #fff5f5;
  border-color: #fed7d7;
}
.ak-pol-emg-tile.tone-red .ak-pol-emg-icon {
  background: #dc2626;
  color: #ffffff;
}

.ak-pol-emg-tile.tone-blue {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.ak-pol-emg-tile.tone-blue .ak-pol-emg-icon {
  background: #1d4ed8;
  color: #ffffff;
}

.ak-pol-emg-tile.tone-green {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.ak-pol-emg-tile.tone-green .ak-pol-emg-icon {
  background: #075d3a;
  color: #ffffff;
}

.ak-pol-emg-tile.tone-orange {
  background: #fffaf0;
  border-color: #feebc8;
}
.ak-pol-emg-tile.tone-orange .ak-pol-emg-icon {
  background: #ea580c;
  color: #ffffff;
}

.ak-pol-emg-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.ak-pol-emg-copy small {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

.ak-pol-emg-copy strong {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
}

.ak-pol-links-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.ak-pol-sidebar-subheading {
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
}

.ak-pol-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ak-pol-link-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #1e293b !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.ak-pol-link-row:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8 !important;
}

.ak-pol-link-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Pagination & Empty State */
.ak-pol-pagination {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

.ak-pol-pagination ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ak-pol-pagination a,
.ak-pol-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.ak-pol-pagination span.current {
  background: #075d3a;
  border-color: #075d3a;
  color: #ffffff;
}

.ak-pol-empty-state {
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
}

.ak-pol-empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.ak-pol-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.ak-pol-reset-cta,
.ak-pol-999-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.ak-pol-reset-cta {
  background: #075d3a;
  color: #ffffff !important;
}

.ak-pol-999-cta {
  background: #dc2626;
  color: #ffffff !important;
}

/* ==========================================================================
   7. Emergency Contact Bottom Sheet / Modal (#ak-pol-emergency-modal)
   Matches reference image 19028.png — Centered Dialog on Desktop, Bottom Sheet on Mobile
   ========================================================================== */
.ak-pol-emodal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 540px;
  width: calc(100% - 28px);
  margin: auto;
  overflow: visible;
}

.ak-pol-emodal::backdrop {
  background: rgba(15, 23, 42, 0.56);
  backdrop-filter: blur(2px);
}

.ak-pol-emodal-sheet {
  background: #ffffff;
  border-radius: 22px;
  padding: 16px 20px 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  max-height: 88vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.ak-pol-sheet-handle {
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: #9ca3af;
  margin: 0 auto 14px;
}

.ak-pol-emodal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ak-pol-emodal-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ak-pol-emodal-main-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e11d24;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-pol-emodal-main-icon svg {
  width: 24px;
  height: 24px;
}

.ak-pol-emodal-head-copy h3 {
  margin: 0 0 3px;
  font-size: 22px;
  font-weight: 800;
  color: #0f291e;
  line-height: 1.2;
}

.ak-pol-emodal-head-copy p {
  margin: 0;
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.4;
}

.ak-pol-emodal-close-x {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-pol-emodal-close-x:hover {
  background: #f3f4f6;
}

.ak-pol-emodal-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fdf2f2;
  border: 1px solid #fbd5d5;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.ak-pol-emodal-alert-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-pol-emodal-alert p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #7f1d1d;
  line-height: 1.45;
}

.ak-pol-emodal-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #f1f5f9;
  margin-bottom: 16px;
}

.ak-pol-emodal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #eef2f6;
}

.ak-pol-emodal-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.ak-pol-emodal-svc-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-pol-emodal-svc-icon.is-red {
  background: #e11d24;
  color: #ffffff;
}

.ak-pol-emodal-svc-icon.is-police {
  background: #e0f2fe;
  color: #1e3a8a;
  border: 1px solid #bae6fd;
}

.ak-pol-emodal-svc-icon.is-fire {
  background: #fee2e2;
  color: #dc2626;
}

.ak-pol-emodal-svc-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.ak-pol-emodal-svc-copy strong {
  font-size: 15.5px;
  font-weight: 800;
  color: #0f291e;
}

.ak-pol-emodal-svc-copy small {
  font-size: 12.5px;
  color: #4b5563;
}

.ak-pol-emodal-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.ak-pol-emodal-call-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ak-pol-emodal-call-btn:hover {
  transform: translateY(-1px);
}

.ak-pol-emodal-call-btn.is-solid-red {
  background: #e11d24;
  color: #ffffff !important;
  border: 1.5px solid #e11d24;
  box-shadow: 0 4px 12px rgba(225, 29, 36, 0.25);
}

.ak-pol-emodal-call-btn.is-outline-green {
  background: #ffffff;
  color: #075d3a !important;
  border: 1.5px solid #2e7d5b;
}

.ak-pol-emodal-call-btn.is-outline-green:hover {
  background: #f0fdf4;
}

.ak-pol-emodal-footer-close {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 0;
  background: #e5e7eb;
  color: #1f2937;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.ak-pol-emodal-footer-close:hover {
  background: #d1d5db;
}

.ak-pol-emodal-footer-x {
  color: #dc2626;
  font-size: 16px;
  font-weight: 800;
}

/* Modals (জিডি / অভিযোগ করার নিয়ম & পুলিশ সেবা ও নির্দেশনা) */
.ak-pol-modal {
  border: 0;
  border-radius: 18px;
  padding: 0;
  max-width: 620px;
  width: calc(100% - 28px);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
}

.ak-pol-modal::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.ak-pol-modal-box {
  padding: 20px 22px;
}

.ak-pol-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 14px;
}

.ak-pol-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #0f172a;
}

.ak-pol-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  cursor: pointer;
}

.ak-pol-modal-intro {
  margin: 0 0 14px;
  font-size: 14px;
  color: #334155;
  line-height: 1.55;
}

.ak-pol-guide-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.ak-pol-step-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
}

.ak-pol-step-card strong {
  display: block;
  font-size: 14.5px;
  color: #0f172a;
  margin-bottom: 4px;
}

.ak-pol-step-card p {
  margin: 0;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.5;
}

.ak-pol-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ak-pol-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13.8px;
  font-weight: 700;
  text-decoration: none;
}

.ak-pol-modal-btn--primary {
  background: #1d4ed8;
  color: #ffffff !important;
}

.ak-pol-modal-btn--secondary {
  background: #075d3a;
  color: #ffffff !important;
}

/* Responsive Breakpoints (1080px, 767px, 480px, 414px, 390px, 375px, 360px, 320px) */
@media (max-width: 1080px) {
  .ak-pol-main-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ak-pol-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .ak-pol-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ak-pol-page-wrap {
    padding-bottom: 96px;
  }

  .ak-pol-hero {
    padding: 14px 0 18px;
    background-position: 78% center;
  }

  .ak-pol-hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(248, 251, 255, 0.92) 58%,
      rgba(248, 251, 255, 0.65) 100%
    );
  }

  .ak-pol-breadcrumb {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .ak-pol-hero-title {
    font-size: 26px;
    margin-bottom: 6px;
  }

  .ak-pol-hero-desc {
    font-size: 13.2px;
    margin-bottom: 14px;
  }

  /* 2 Side-by-Side Hero Buttons on Mobile */
  .ak-pol-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ak-pol-hero-btn {
    padding: 8px 11px;
    min-height: 50px;
    gap: 8px;
    border-radius: 12px;
  }

  .ak-pol-hero-btn--999 .ak-pol-hero-btn-icon,
  .ak-pol-hero-btn-icon--pin {
    width: 32px;
    height: 32px;
  }

  .ak-pol-hero-btn--999 .ak-pol-hero-btn-text small {
    font-size: 11px;
  }

  .ak-pol-hero-btn--999 .ak-pol-hero-btn-text strong {
    font-size: 17px;
  }

  .ak-pol-hero-btn--nearest .ak-pol-hero-btn-text strong {
    font-size: 13.2px;
  }

  .ak-pol-hero-btn-arrow {
    font-size: 15px;
  }

  /* 3-Column Quick Service Cards on Mobile */
  .ak-pol-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 14px 0;
  }

  .ak-pol-qcard {
    padding: 11px 6px;
    min-height: 98px;
    border-radius: 13px;
    gap: 7px;
  }

  .ak-pol-qcard-icon {
    width: 38px;
    height: 38px;
  }

  .ak-pol-qcard-title {
    font-size: 12.2px;
    line-height: 1.28;
  }

  .ak-pol-qcard-title small {
    font-size: 11px;
  }

  /* Mobile Bottom Sheet Styling for Emergency Modal */
  .ak-pol-emodal {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0 0;
  }

  .ak-pol-emodal-sheet {
    border-radius: 24px 24px 0 0;
    padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 88vh;
  }

  .ak-pol-emodal-head-copy h3 {
    font-size: 19px;
  }

  .ak-pol-emodal-head-copy p {
    font-size: 12.5px;
  }

  .ak-pol-emodal-alert {
    padding: 10px 12px;
  }

  .ak-pol-emodal-alert p {
    font-size: 12.5px;
  }

  .ak-pol-emodal-svc-copy strong {
    font-size: 14.2px;
  }

  .ak-pol-emodal-svc-copy small {
    font-size: 11.5px;
  }

  .ak-pol-emodal-call-btn {
    min-height: 38px;
    padding: 6px 12px;
    font-size: 12.8px;
  }

  .ak-pol-search-card {
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 16px;
  }

  .ak-pol-search-heading {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .ak-pol-search-main-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 10px;
  }

  .ak-pol-input-q {
    grid-column: 1 / -1;
    min-height: 42px;
  }

  .ak-pol-input-loc {
    min-height: 42px;
  }

  .ak-pol-submit-btn {
    min-height: 42px;
    padding: 0 20px;
    font-size: 14px;
  }

  .ak-pol-pills-label {
    display: none;
  }

  .ak-pol-extra-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .ak-pol-results-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .ak-pol-results-heading {
    font-size: 16.5px;
  }

  .ak-pol-mobile-tabs {
    display: inline-flex;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 2px;
    gap: 2px;
  }

  .ak-pol-mtab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    color: #334155;
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
  }

  .ak-pol-mtab.is-active {
    background: #075d3a;
    color: #ffffff;
  }

  .ak-pol-sort-select {
    display: none;
  }

  .ak-pol-card {
    padding: 12px;
    border-radius: 14px;
  }

  .ak-pcard-inner {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .ak-pcard-media {
    width: 104px;
    height: 84px;
    border-radius: 9px;
  }

  .ak-pcard-title {
    font-size: 15.2px;
    margin-bottom: 4px;
  }

  .ak-pcard-bookmark {
    width: 30px;
    height: 30px;
  }

  .ak-pcard-meta-item {
    font-size: 12.5px;
  }

  .ak-pcard-meta-inline {
    gap: 10px;
  }

  .ak-pcard-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 2px;
  }

  .ak-pcard-btn {
    min-height: 38px;
    padding: 7px 8px;
    font-size: 12.5px;
  }

  .ak-pol-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 389px) {
  /* Keep 2 buttons side-by-side and 3 service cards side-by-side on 320px-389px screens */
  .ak-pol-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .ak-pol-hero-btn {
    padding: 7px 8px;
    min-height: 46px;
    gap: 6px;
  }

  .ak-pol-hero-btn--999 .ak-pol-hero-btn-icon,
  .ak-pol-hero-btn-icon--pin {
    width: 26px;
    height: 26px;
  }

  .ak-pol-hero-btn--999 .ak-pol-hero-btn-text small {
    font-size: 10px;
  }

  .ak-pol-hero-btn--999 .ak-pol-hero-btn-text strong {
    font-size: 15px;
  }

  .ak-pol-hero-btn--nearest .ak-pol-hero-btn-text strong {
    font-size: 11.8px;
  }

  .ak-pol-hero-btn-arrow {
    font-size: 13px;
  }

  .ak-pol-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .ak-pol-qcard {
    padding: 9px 4px;
    min-height: 88px;
    gap: 5px;
  }

  .ak-pol-qcard-icon {
    width: 32px;
    height: 32px;
  }

  .ak-pol-qcard-title {
    font-size: 11px;
    line-height: 1.22;
  }

  .ak-pol-qcard-title small {
    font-size: 10px;
  }

  .ak-pol-emodal-item {
    gap: 8px;
  }

  .ak-pol-emodal-svc-icon {
    width: 34px;
    height: 34px;
  }

  .ak-pol-emodal-svc-copy strong {
    font-size: 13px;
  }

  .ak-pol-emodal-svc-copy small {
    font-size: 10.8px;
  }

  .ak-pol-emodal-call-btn {
    padding: 5px 10px;
    font-size: 11.8px;
    min-height: 34px;
  }

  .ak-pcard-inner {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
  }

  .ak-pcard-media {
    width: 84px;
    height: 74px;
  }

  .ak-pcard-title {
    font-size: 14.2px;
  }
}


/* ==========================================================================
   POLICE SINGLE DETAILS PAGE REDESIGN (template-parts/single-police.php)
   Consistent, Reusable Design System for Thana, Outpost, Investigation Centre & Control Room
   ========================================================================== */

.ak-psingle-page {
  background: #f4f7f5;
  padding: 18px 0 96px;
  color: #132a20;
}

/* 1. Breadcrumb */
.ak-psingle-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: #64748b;
  margin-bottom: 14px;
}

.ak-psingle-breadcrumb a {
  color: #475569;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.ak-psingle-breadcrumb a:hover {
  color: #075d3a;
}

.ak-psingle-bc-sep {
  color: #94a3b8;
  font-size: 14px;
}

.ak-psingle-bc-current {
  color: #0f172a;
  font-weight: 600;
}

/* 2. Single Page Header Card */
.ak-psingle-hero-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 6px 20px rgba(7, 45, 29, 0.05);
  margin-bottom: 14px;
}

.ak-psingle-hero-grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.ak-psingle-media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #eff6ff;
  min-height: 220px;
  display: flex;
  align-items: stretch;
}

.ak-psingle-photo {
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 250px;
  object-fit: cover;
  display: block;
}

.ak-psingle-illust {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ak-psingle-building-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ak-psingle-photo-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 8px;
}

.ak-psingle-photo-badge svg {
  width: 14px;
  height: 14px;
}

.ak-psingle-header-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.ak-psingle-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.ak-psingle-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1d4ed8;
}

.ak-psingle-type-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1d4ed8;
  color: #ffffff;
}

.ak-psingle-type-check svg {
  width: 11px;
  height: 11px;
}

.ak-psingle-fav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #e11d48;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}

.ak-psingle-fav-btn:hover,
.ak-psingle-fav-btn[aria-pressed="true"] {
  background: #fff1f2;
  border-color: #fecdd3;
  transform: translateY(-1px);
}

.ak-psingle-fav-btn svg {
  width: 18px;
  height: 18px;
}

.ak-psingle-title {
  margin: 0 0 5px;
  font-size: 27px;
  line-height: 1.25;
  font-weight: 800;
  color: #064e3b;
}

.ak-psingle-parent {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}

.ak-psingle-meta-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.ak-psingle-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #334155;
  line-height: 1.45;
}

.ak-psingle-meta-icon {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  flex-shrink: 0;
}

.ak-psingle-meta-icon svg {
  width: 16px;
  height: 16px;
}

.ak-psingle-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.ak-psingle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.8px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
}

.ak-psingle-pill svg {
  width: 14px;
  height: 14px;
}

.ak-psingle-pill.pill-247 {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.ak-psingle-pill.pill-247 svg {
  color: #075d3a;
}

.ak-psingle-pill.pill-verified {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.ak-psingle-pill.pill-public {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* 3. Primary Action Buttons Bar */
.ak-psingle-actions-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.ak-psingle-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #dbe7e1;
  color: #064e3b;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.16s ease;
  box-shadow: 0 2px 8px rgba(7, 45, 29, 0.04);
}

.ak-psingle-action-btn:hover {
  border-color: #075d3a;
  background: #f8faf9;
  transform: translateY(-1px);
}

.ak-psingle-action-btn.ak-psingle-action-call {
  background: #e11d24;
  border-color: #e11d24;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(225, 29, 36, 0.24);
}

.ak-psingle-action-btn.ak-psingle-action-call:hover {
  background: #be1219;
  border-color: #be1219;
  color: #ffffff;
}

.ak-psingle-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-psingle-action-icon svg {
  width: 20px;
  height: 20px;
}

.ak-psingle-action-icon.icon-map {
  color: #dc2626;
}

.ak-psingle-action-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  min-width: 0;
}

.ak-psingle-action-copy strong {
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ak-psingle-action-copy small {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.92;
  white-space: nowrap;
}

.ak-psingle-action-map .ak-psingle-action-copy small {
  color: #075d3a;
}

/* 4. Section Navigation Tabs */
.ak-psingle-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  padding: 6px 10px 0;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-shadow: 0 2px 8px rgba(7, 45, 29, 0.03);
}

.ak-psingle-tabs-bar::-webkit-scrollbar {
  display: none;
}

.ak-psingle-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 16px 10px;
  color: #64748b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  transition: all 0.15s ease;
  flex: 1 0 auto;
}

.ak-psingle-tab:hover {
  color: #075d3a;
}

.ak-psingle-tab.is-active {
  color: #075d3a;
  font-weight: 700;
  border-bottom-color: #075d3a;
}

.ak-psingle-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ak-psingle-tab-icon svg {
  width: 18px;
  height: 18px;
}

/* 5. Two-Column Details Layout */
.ak-psingle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 16px;
  align-items: start;
}

.ak-psingle-col-main,
.ak-psingle-col-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ak-psingle-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 14px rgba(7, 45, 29, 0.04);
  scroll-margin-top: 84px;
}

.ak-psingle-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.ak-psingle-head-icon {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ak-psingle-head-icon svg {
  width: 19px;
  height: 19px;
}

.ak-psingle-card-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}

/* Contact List Card */
.ak-psingle-contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ak-psingle-contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  background: #f8fbf9;
  border: 1px solid #e6f0eb;
  border-radius: 12px;
}

.ak-psingle-contact-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ak-psingle-contact-ico {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ak-psingle-contact-ico svg {
  width: 17px;
  height: 17px;
}

.ak-psingle-contact-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ak-psingle-contact-text strong {
  font-size: 13.8px;
  font-weight: 700;
  color: #0f172a;
}

.ak-psingle-contact-num {
  font-size: 14px;
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
}

.ak-psingle-contact-num:hover {
  text-decoration: underline;
}

.ak-psingle-call-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #075d3a;
  color: #ffffff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 9px;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.ak-psingle-call-pill:hover {
  background: #05482d;
  color: #ffffff;
}

.ak-psingle-call-pill svg {
  width: 14px;
  height: 14px;
}

/* Institution / Jurisdiction Table */
.ak-psingle-kv-table {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #edf2ef;
}

.ak-psingle-kv-row {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2ef;
  font-size: 14px;
  align-items: baseline;
}

.ak-psingle-kv-key {
  color: #64748b;
  font-weight: 600;
}

.ak-psingle-kv-val {
  color: #0f172a;
  font-weight: 600;
}

.ak-psingle-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #075d3a;
  font-weight: 700;
  text-decoration: none;
}

.ak-psingle-ext-link:hover {
  text-decoration: underline;
}

.ak-psingle-about-box {
  margin-top: 12px;
  padding: 11px 13px;
  background: #f8fbf9;
  border-radius: 10px;
  border: 1px solid #e6f0eb;
}

.ak-psingle-subhead {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: #075d3a;
}

.ak-psingle-about-box p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #334155;
}

/* Coverage Area Card */
.ak-psingle-coverage-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
}

.ak-psingle-coverage-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fbf9;
  border: 1px solid #dce8e2;
  border-radius: 10px;
  color: #064e3b;
  font-size: 13.8px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
}

.ak-psingle-coverage-btn:hover {
  background: #eef6f2;
  border-color: #075d3a;
}

/* Related / Nearby Units Card */
.ak-psingle-related-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ak-psingle-related-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #f8fbf9;
  border: 1px solid #e8f0ec;
  text-decoration: none;
  color: #0f172a;
  transition: all 0.15s ease;
}

.ak-psingle-related-item:hover {
  border-color: #075d3a;
  background: #eff7f3;
}

.ak-psingle-related-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.ak-psingle-related-pin {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ak-psingle-related-pin svg {
  width: 16px;
  height: 16px;
}

.ak-psingle-related-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ak-psingle-related-copy strong {
  font-size: 13.8px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-psingle-related-copy small {
  font-size: 12px;
  color: #64748b;
}

.ak-psingle-related-dist {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Map Card */
.ak-psingle-map-box {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ak-psingle-map-canvas {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #dce6e1;
  height: 175px;
  background: #f1f5f9;
}

.ak-psingle-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ak-psingle-map-tooltip {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 14px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  text-align: center;
  max-width: 84%;
}

.ak-psingle-map-tooltip strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-psingle-map-tooltip span {
  display: block;
  font-size: 11.8px;
  color: #475569;
}

.ak-psingle-map-pin-floating {
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 6px rgba(220, 38, 38, 0.35));
}

.ak-psingle-map-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.ak-psingle-map-addr {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13.2px;
  color: #475569;
}

.ak-psingle-map-addr svg {
  width: 15px;
  height: 15px;
  color: #075d3a;
  flex-shrink: 0;
  margin-top: 2px;
}

.ak-psingle-map-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ak-psingle-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  background: #064e3b;
  color: #ffffff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}

.ak-psingle-map-btn:hover {
  background: #04392b;
  color: #ffffff;
}

.ak-psingle-map-btn svg {
  width: 16px;
  height: 16px;
}

.ak-psingle-dir-link {
  text-align: center;
  font-size: 12.8px;
  font-weight: 600;
  color: #075d3a;
  text-decoration: none;
}

.ak-psingle-dir-link:hover {
  text-decoration: underline;
}

/* Services & Activities Card */
.ak-psingle-service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ak-psingle-service-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.ak-psingle-srv-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #16a34a;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-psingle-srv-check svg {
  width: 12px;
  height: 12px;
}

/* Operating Hours Card */
.ak-psingle-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ak-psingle-hours-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.2px;
  font-weight: 600;
  color: #1e293b;
}

.ak-psingle-hours-ico {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
}

.ak-psingle-hours-ico svg {
  width: 16px;
  height: 16px;
}

.ak-psingle-247-tag {
  background: #15803d;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 7px;
}

/* Important Links Card */
.ak-psingle-links-list {
  display: flex;
  flex-direction: column;
}

.ak-psingle-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid #edf2ef;
  color: #1e293b;
  font-size: 13.8px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.ak-psingle-link-item:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.ak-psingle-link-item:hover {
  color: #075d3a;
}

/* Citizen Guidance & Correction Card */
.ak-psingle-guidance-notes {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 13.4px;
  line-height: 1.55;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ak-psingle-guidance-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ak-psingle-report-btn,
.ak-psingle-emg-sheet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12.8px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

.ak-psingle-report-btn {
  background: #f8fbf9;
  border: 1px solid #cbd5e1;
  color: #1e293b;
}

.ak-psingle-report-btn:hover {
  border-color: #075d3a;
  color: #075d3a;
}

.ak-psingle-emg-sheet-btn {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.ak-psingle-emg-sheet-btn:hover {
  background: #fee2e2;
}

.ak-psingle-report-btn svg,
.ak-psingle-emg-sheet-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Responsive Breakpoints (Tablet & Mobile) */
@media (max-width: 991px) {
  .ak-psingle-hero-grid {
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 18px;
  }

  .ak-psingle-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ak-psingle-page {
    padding: 12px 0 110px;
  }

  .ak-psingle-hero-card {
    padding: 14px;
    border-radius: 15px;
  }

  .ak-psingle-hero-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ak-psingle-media,
  .ak-psingle-photo,
  .ak-psingle-illust {
    min-height: 185px;
    max-height: 210px;
  }

  .ak-psingle-title {
    font-size: 21px;
  }

  .ak-psingle-parent {
    font-size: 13.8px;
    margin-bottom: 10px;
  }

  .ak-psingle-actions-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .ak-psingle-action-btn {
    min-height: 48px;
    padding: 7px 10px;
    gap: 8px;
  }

  .ak-psingle-action-copy strong {
    font-size: 13.5px;
  }

  .ak-psingle-action-copy small {
    font-size: 11.2px;
  }

  .ak-psingle-tab {
    padding: 7px 12px 9px;
    font-size: 12.2px;
  }

  .ak-psingle-card {
    padding: 14px;
    border-radius: 14px;
  }

  .ak-psingle-kv-row {
    grid-template-columns: 118px minmax(0, 1fr);
    font-size: 13.3px;
  }

  .ak-psingle-guidance-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .ak-psingle-actions-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .ak-psingle-action-btn {
    padding: 6px 8px;
    gap: 6px;
  }

  .ak-psingle-action-copy strong {
    font-size: 12.6px;
  }

  .ak-psingle-contact-item {
    padding: 9px 10px;
  }

  .ak-psingle-call-pill {
    padding: 6px 11px;
    font-size: 12.5px;
  }
}


/* ==========================================================================
   EDUCATION & RESEARCH DIRECTORY + SINGLE INSTITUTION PAGE (v3.3.2)
   Final UI & Functionality Update (Matches 19086.png & 19087.png)
   ========================================================================== */

.ak-edu-dir-page,
.ak-edu-dir-page *,
.ak-edu-dir-page *::before,
.ak-edu-dir-page *::after,
.ak-esingle-page,
.ak-esingle-page *,
.ak-esingle-page *::before,
.ak-esingle-page *::after {
  box-sizing: border-box;
}

.ak-edu-dir-page,
.ak-esingle-page {
  background: #f3f7f5;
  padding: 12px 0 calc(92px + env(safe-area-inset-bottom, 0px));
  color: #132a20;
  overflow-x: clip;
  width: 100%;
}

/* Breadcrumb */
.ak-edu-breadcrumb,
.ak-esingle-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.8px;
  color: #64748b;
  margin-bottom: 10px;
}

.ak-edu-breadcrumb a,
.ak-esingle-breadcrumb a {
  color: #475569;
  text-decoration: none;
  font-weight: 500;
}

.ak-edu-breadcrumb a:hover,
.ak-esingle-breadcrumb a:hover {
  color: #075d3a;
}

.ak-edu-bc-sep,
.ak-esingle-bc-sep {
  color: #94a3b8;
}

.ak-edu-bc-current,
.ak-esingle-bc-current {
  color: #0f172a;
  font-weight: 600;
}

/* 1. Education Hero Banner */
.ak-edu-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #eaf3ef;
  border: 1px solid #d5e6dd;
  padding: 22px 26px;
  margin-bottom: 12px;
  box-shadow: 0 6px 20px rgba(7, 45, 29, 0.05);
}

.ak-edu-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.ak-edu-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(242, 248, 245, 0.98) 0%,
    rgba(242, 248, 245, 0.93) 45%,
    rgba(242, 248, 245, 0.4) 75%,
    rgba(242, 248, 245, 0.08) 100%
  );
}

.ak-edu-hero-content {
  position: relative;
  z-index: 2;
  max-width: 540px;
}

.ak-edu-hero-title {
  margin: 0 0 6px;
  font-size: clamp(23px, 4vw, 35px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ak-edu-title-green { color: #064e3b; }
.ak-edu-title-blue  { color: #0b63e5; }

.ak-edu-hero-desc {
  margin: 0 0 14px;
  font-size: clamp(12.5px, 1.8vw, 14.8px);
  line-height: 1.46;
  color: #1e293b;
  font-weight: 500;
  max-width: 420px;
}

.ak-edu-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  max-width: 490px;
}

.ak-edu-stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border: 1px solid #dcebe3;
  border-radius: 12px;
  padding: 7px 10px;
  min-width: 0;
  box-shadow: 0 3px 10px rgba(7, 45, 29, 0.05);
}

.ak-edu-stat-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-edu-stat-ico svg {
  width: 17px;
  height: 17px;
}

.ak-edu-stat-ico.tone-green  { background: #dcfce7; color: #15803d; }
.ak-edu-stat-ico.tone-purple { background: #ede9fe; color: #6d28d9; }
.ak-edu-stat-ico.tone-red    { background: #fee2e2; color: #dc2626; }

.ak-edu-stat-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.ak-edu-stat-copy small {
  font-size: 10.8px;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-edu-stat-copy strong {
  font-size: 13.8px;
  color: #0f172a;
  font-weight: 800;
  white-space: nowrap;
}

/* 2. Horizontal Scrollable Category Bar (Matches 19086.png) */
.ak-edu-cats-section {
  margin-bottom: 12px;
}

.ak-edu-cats-scroll-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ak-edu-cats-track {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 36px 4px 2px;
  width: 100%;
}

.ak-edu-cats-track::-webkit-scrollbar {
  display: none;
}

.ak-edu-cat-card {
  flex: 0 0 auto;
  width: 92px;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  background: #ffffff;
  border: 1.5px solid #e2ece7;
  border-radius: 13px;
  padding: 8px 6px;
  text-decoration: none;
  color: #1e293b;
  transition: all 0.16s ease;
  box-shadow: 0 2px 6px rgba(7, 45, 29, 0.03);
  cursor: pointer;
}

.ak-edu-cat-card:hover {
  border-color: #075d3a;
  background: #f8fbf9;
}

.ak-edu-cat-card.is-active {
  background: #ecfdf5;
  border-color: #075d3a;
  color: #064e3b;
  box-shadow: 0 3px 10px rgba(7, 93, 58, 0.12);
}

.ak-edu-cat-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-edu-cat-icon svg {
  width: 18px;
  height: 18px;
}

.ak-edu-cat-icon.tone-green   { background: #dcfce7; color: #15803d; }
.ak-edu-cat-icon.tone-orange  { background: #ffedd5; color: #d97706; }
.ak-edu-cat-icon.tone-purple  { background: #ede9fe; color: #7c3aed; }
.ak-edu-cat-icon.tone-rose    { background: #ffe4e6; color: #e11d48; }
.ak-edu-cat-icon.tone-indigo  { background: #dbeafe; color: #1d4ed8; }
.ak-edu-cat-icon.tone-teal    { background: #ccfbf1; color: #0f766e; }
.ak-edu-cat-icon.tone-cyan    { background: #cffafe; color: #0e7490; }
.ak-edu-cat-icon.tone-slate   { background: #e2e8f0; color: #334155; }
.ak-edu-cat-icon.tone-pink    { background: #fce7f3; color: #be185d; }
.ak-edu-cat-icon.tone-sky     { background: #e0f2fe; color: #0284c7; }
.ak-edu-cat-icon.tone-amber   { background: #fef3c7; color: #b45309; }

.ak-edu-cat-title {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.ak-edu-cats-next {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  z-index: 3;
}

.ak-edu-cats-next:hover {
  border-color: #075d3a;
  color: #075d3a;
}

/* 3. Search & Filter Panel (Matches 19086.png & 19087.png) */
.ak-edu-search-panel {
  background: #eaf3ef;
  border: 1px solid #d5e5dc;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.ak-edu-search-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.ak-edu-search-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 800;
  color: #064e3b;
}

.ak-edu-search-title-ico {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
}

.ak-edu-search-title-ico svg {
  width: 17px;
  height: 17px;
}

.ak-edu-reset-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  min-height: 30px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  font-size: 11.8px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.ak-edu-reset-pill:hover {
  border-color: #075d3a;
  color: #075d3a;
}

/* Full-width Search Bar */
.ak-edu-q-wrap {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d8e3dd;
  border-radius: 11px;
  padding: 0 12px;
  min-height: 40px;
  margin-bottom: 9px;
}

.ak-edu-q-wrap:focus-within {
  border-color: #075d3a;
  box-shadow: 0 0 0 2.5px rgba(7, 93, 58, 0.12);
}

.ak-edu-q-icon {
  color: #64748b;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  flex-shrink: 0;
}

.ak-edu-q-icon svg {
  width: 16px;
  height: 16px;
}

.ak-edu-q-wrap input {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  font-size: 13.2px;
  color: #0f172a;
  padding: 6px 0;
  outline: none !important;
  box-shadow: none !important;
  min-width: 0;
}

/* 4 Filter Dropdowns + Full-Width Search Submit Button */
.ak-edu-filters-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.ak-edu-select-box {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1px solid #d8e3dd;
  border-radius: 10px;
  padding: 4px 10px;
  min-height: 42px;
  min-width: 0;
}

.ak-edu-select-box:focus-within {
  border-color: #075d3a;
}

.ak-edu-select-ico {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ak-edu-select-ico svg {
  width: 15px;
  height: 15px;
}

.ak-edu-select-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.ak-edu-select-inner label {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-edu-select-inner select {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  font-size: 12.4px;
  font-weight: 700;
  color: #0f172a;
  padding: 0;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  min-width: 0;
}

.ak-edu-submit-btn {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #064e3b;
  color: #ffffff;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  min-height: 40px;
  padding: 0 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ak-edu-submit-btn svg {
  width: 15px;
  height: 15px;
}

.ak-edu-submit-btn:hover {
  background: #04392b;
}

/* Quick Area Pills Row */
.ak-edu-quick-row {
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
}

.ak-edu-quick-label {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  flex-shrink: 0;
}

.ak-edu-quick-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 0;
}

.ak-edu-quick-scroll::-webkit-scrollbar {
  display: none;
}

.ak-edu-area-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 11px;
  min-height: 27px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d8e3dd;
  color: #334155;
  font-size: 11.8px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.ak-edu-area-pill:hover {
  border-color: #075d3a;
  color: #075d3a;
}

.ak-edu-area-pill.is-active {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
}

.ak-edu-quick-next {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 4. Results Toolbar & Institution Cards */
.ak-edu-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ak-edu-results-heading {
  margin: 0;
  font-size: clamp(14.5px, 2.4vw, 18px);
  font-weight: 800;
  color: #0f172a;
}

.ak-edu-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ak-edu-view-switcher {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d8e3dd;
  border-radius: 9px;
  overflow: hidden;
}

.ak-edu-view-btn {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ak-edu-view-btn.is-active {
  background: #064e3b;
  color: #ffffff;
}

.ak-edu-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #d8e3dd;
  border-radius: 999px;
  padding: 4px 10px;
  min-height: 30px;
  color: #334155;
}

.ak-edu-sort-wrap select {
  border: 0 !important;
  background: transparent !important;
  font-size: 11.8px;
  font-weight: 700;
  color: #0f172a;
  outline: none !important;
  cursor: pointer;
}

.ak-edu-map-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid #075d3a;
  border-radius: 999px;
  padding: 4px 11px;
  min-height: 30px;
  font-size: 11.8px;
  font-weight: 700;
  color: #064e3b;
  cursor: pointer;
  white-space: nowrap;
}

.ak-edu-map-toggle-btn.is-active {
  background: #064e3b;
  color: #ffffff;
}

/* Map Drawer */
.ak-edu-map-drawer {
  background: #ffffff;
  border: 1px solid #dce8e2;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(7, 45, 29, 0.05);
}

.ak-edu-map-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ak-edu-map-drawer-head h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 800;
  color: #064e3b;
}

.ak-edu-map-drawer-head p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

.ak-edu-map-close {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ak-edu-map-pins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 7px;
  max-height: 220px;
  overflow-y: auto;
}

.ak-edu-map-pin-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  background: #f8fbf9;
  border: 1px solid #e2ece7;
  border-radius: 9px;
  text-decoration: none;
  color: #0f172a;
}

.ak-edu-pin-dot { color: #dc2626; display: inline-flex; }
.ak-edu-pin-copy { display: flex; flex-direction: column; min-width: 0; }
.ak-edu-pin-copy strong { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-edu-pin-copy small { font-size: 11px; color: #64748b; }

/* Desktop 3-Column Grid View (Matches 19087.png Right) & List View */
.ak-edu-cards-container.is-grid-view {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ak-edu-cards-container.is-list-view {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ak-edu-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  padding: 11px;
  box-shadow: 0 2px 10px rgba(7, 45, 29, 0.035);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ak-edu-card:hover {
  border-color: #b7d7c8;
  box-shadow: 0 6px 18px rgba(7, 45, 29, 0.06);
}

.ak-ecard-inner {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 13px;
  align-items: stretch;
  flex: 1 1 auto;
}

.ak-edu-cards-container.is-grid-view .ak-ecard-inner {
  grid-template-columns: 1fr;
  gap: 10px;
}

.ak-ecard-media-wrap {
  position: relative;
}

.ak-ecard-media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #e0f2fe;
  height: 116px;
  display: block;
}

.ak-edu-cards-container.is-grid-view .ak-ecard-media {
  height: 144px;
}

.ak-ecard-media img,
.ak-ecard-illust,
.ak-ecard-campus-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-ecard-mgmt-badge {
  position: absolute;
  left: 7px;
  bottom: 7px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #0b63e5;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.ak-ecard-mgmt-badge.is-private {
  background: #15803d;
}

/* Bookmark buttons: overlay on Grid View, inline on List/Mobile View */
.ak-ecard-bookmark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #e11d48;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.ak-ecard-bookmark svg {
  width: 16px;
  height: 16px;
}

.ak-ecard-bookmark--overlay {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
  z-index: 2;
}

.ak-edu-cards-container.is-grid-view .ak-ecard-bookmark--overlay {
  display: inline-flex;
}

.ak-edu-cards-container.is-grid-view .ak-ecard-bookmark--inline {
  display: none;
}

.ak-ecard-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.ak-ecard-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.ak-ecard-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.28;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.ak-ecard-title a {
  color: inherit;
  text-decoration: none;
}

.ak-ecard-title a:hover {
  color: #075d3a;
}

.ak-ecard-verified {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0b63e5;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9.5px;
}

.ak-ecard-verified svg {
  width: 9.5px;
  height: 9.5px;
}

.ak-ecard-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 3px 10px;
  margin-bottom: 9px;
}

.ak-edu-cards-container.is-grid-view .ak-ecard-meta-grid {
  grid-template-columns: 1fr;
}

.ak-edu-cards-container.is-grid-view .ak-ecard-meta-right {
  display: none;
}

.ak-ecard-meta-col,
.ak-ecard-meta-right {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ak-ecard-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.2px;
  color: #334155;
  line-height: 1.3;
  min-width: 0;
}

.ak-ecard-meta-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-ecard-meta-ico {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ak-ecard-meta-ico svg {
  width: 13px;
  height: 13px;
}

.ak-ecard-meta-phone a {
  color: #0f172a;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.ak-ecard-distance {
  font-size: 10.5px;
  font-weight: 700;
  color: #075d3a;
  background: #ecfdf5;
  padding: 1px 6px;
  border-radius: 999px;
}

/* 3 Equal Action Buttons (কল, ম্যাপ, বিস্তারিত — Matches 19086.png & 19087.png) */
.ak-ecard-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: auto;
}

.ak-ecard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 31px;
  padding: 4px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #dce6e0;
  background: #f1f6f3;
  color: #0f172a;
  transition: all 0.15s ease;
  white-space: nowrap;
  min-width: 0;
}

.ak-ecard-btn svg {
  width: 12.5px;
  height: 12.5px;
  flex-shrink: 0;
}

.ak-ecard-btn:hover {
  border-color: #075d3a;
  color: #075d3a;
  background: #e6f4ec;
}

.ak-ecard-btn.ak-ecard-btn--call {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
}

.ak-ecard-btn.ak-ecard-btn--call:hover {
  background: #04392b;
  color: #ffffff;
}

/* Empty State & Pagination */
.ak-edu-empty-state {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  padding: 28px 16px;
  text-align: center;
}

.ak-edu-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.ak-edu-empty-state h3 { margin: 0 0 5px; font-size: 16.5px; color: #0f172a; }
.ak-edu-empty-state p { margin: 0 auto 14px; max-width: 460px; font-size: 13px; color: #64748b; }
.ak-edu-empty-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ak-edu-reset-cta,
.ak-edu-submit-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.ak-edu-reset-cta { background: #064e3b; color: #ffffff; }
.ak-edu-submit-cta { background: #f8fafc; border: 1px solid #cbd5e1; color: #0f172a; }
.ak-edu-pagination { margin-top: 16px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }

/* ==========================================================================
   SINGLE EDUCATION INSTITUTION PAGE (.ak-esingle-*)
   ========================================================================== */

.ak-esingle-hero-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(7, 45, 29, 0.05);
}

.ak-esingle-cover { position: relative; height: 245px; background: #e0f2fe; overflow: hidden; }
.ak-esingle-cover-img,
.ak-esingle-cover-illust,
.ak-esingle-campus-svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-esingle-cover-actions { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 7px; }
.ak-esingle-cover-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.14);
}
.ak-esingle-cover-circle.is-heart { color: #e11d48; }
.ak-esingle-cover-circle svg { width: 16px; height: 16px; }
.ak-esingle-cover-badge {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  font-size: 11.8px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
}
.ak-esingle-header-body { padding: 16px 18px; }
.ak-esingle-title {
  margin: 0 0 4px;
  font-size: clamp(19px, 3.5vw, 25px);
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  line-height: 1.25;
}
.ak-esingle-verified-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0b63e5;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ak-esingle-verified-icon svg { width: 12px; height: 12px; }
.ak-esingle-name-en { margin: 0 0 6px; font-size: 12.8px; color: #64748b; font-weight: 600; }
.ak-esingle-meta-lines { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.ak-esingle-meta-line { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #334155; font-weight: 500; }
.ak-esingle-meta-ico { color: #075d3a; display: inline-flex; align-items: center; flex-shrink: 0; }
.ak-esingle-meta-ico svg { width: 15px; height: 15px; }
.ak-esingle-pills-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-esingle-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.ak-esingle-pill svg { width: 12px; height: 12px; }
.ak-esingle-pill.pill-mgmt { background: #dcfce7; color: #166534; }
.ak-esingle-pill.pill-mgmt.is-private { background: #e0e7ff; color: #3730a3; }
.ak-esingle-pill.pill-level { background: #dbeafe; color: #1d4ed8; }
.ak-esingle-pill.pill-est { background: #fee2e2; color: #b91c1c; }
.ak-esingle-pill.pill-eiin { background: #f1f5f9; color: #334155; }
.ak-esingle-actions-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 9px; margin-bottom: 12px; }
.ak-esingle-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 12px;
  border-radius: 11px;
  background: #ffffff;
  border: 1px solid #dbe7e1;
  color: #0f172a;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(7, 45, 29, 0.03);
}
.ak-esingle-action-btn:hover { border-color: #075d3a; background: #f8fbf9; }
.ak-esingle-action-btn.is-call { background: #064e3b; border-color: #064e3b; color: #ffffff; }
.ak-esingle-action-btn.is-call:hover { background: #04392b; color: #ffffff; }
.ak-esingle-action-ico { display: inline-flex; align-items: center; color: #075d3a; flex-shrink: 0; }
.ak-esingle-action-btn.is-call .ak-esingle-action-ico { color: #ffffff; }
.ak-esingle-action-ico svg { width: 17px; height: 17px; }
.ak-esingle-action-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.18; min-width: 0; }
.ak-esingle-action-copy strong { font-size: 13.2px; font-weight: 700; }
.ak-esingle-action-copy small { font-size: 11.2px; opacity: 0.9; }
.ak-esingle-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 12px;
  padding: 4px 8px 0;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ak-esingle-tabs-bar::-webkit-scrollbar { display: none; }
.ak-esingle-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px 8px;
  color: #64748b;
  text-decoration: none;
  font-size: 12.2px;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  flex: 1 0 auto;
}
.ak-esingle-tab.is-active { color: #064e3b; font-weight: 700; border-bottom-color: #064e3b; }
.ak-esingle-tab-ico svg { width: 15px; height: 15px; }
.ak-esingle-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: 14px; align-items: start; }
.ak-esingle-col-main,
.ak-esingle-col-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ak-esingle-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  padding: 15px;
  box-shadow: 0 3px 12px rgba(7, 45, 29, 0.035);
  scroll-margin-top: 76px;
}
.ak-esingle-card-title { margin: 0 0 11px; font-size: 15.8px; font-weight: 800; color: #0f172a; }
.ak-esingle-kv-table { display: flex; flex-direction: column; border-top: 1px solid #edf2ef; }
.ak-esingle-kv-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px;
  padding: 8.5px 0;
  border-bottom: 1px solid #edf2ef;
  font-size: 13.2px;
  align-items: center;
}
.ak-esingle-kv-key { color: #64748b; font-weight: 600; }
.ak-esingle-kv-val { color: #0f172a; font-weight: 600; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ak-esingle-kv-val.is-eiin strong { color: #075d3a; font-size: 14px; }
.ak-esingle-copy-btn { border: 1px solid #cbd5e1; background: #f8fafc; color: #475569; border-radius: 5px; padding: 2px 5px; display: inline-flex; align-items: center; cursor: pointer; }
.ak-esingle-web-link { display: inline-flex; align-items: center; gap: 4px; color: #075d3a; font-weight: 700; text-decoration: none; word-break: break-all; }
.ak-esingle-ver-date { color: #64748b; font-size: 11.5px; }
.ak-esingle-desc p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: #334155; }
.ak-esingle-subhead { margin: 10px 0 7px; font-size: 13px; font-weight: 700; color: #064e3b; }
.ak-esingle-facility-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-esingle-fac-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 7px; background: #f0fdf4; border: 1px solid #bbf7d0; font-size: 12.2px; font-weight: 600; color: #166534; }
.ak-esingle-fac-check svg { width: 11px; height: 11px; }
.ak-esingle-contact-rows { display: flex; flex-direction: column; gap: 9px; }
.ak-esingle-contact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; background: #f8fbf9; border: 1px solid #e6f0eb; border-radius: 10px; }
.ak-esingle-contact-left { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.ak-esingle-contact-ico { color: #075d3a; display: inline-flex; margin-top: 2px; }
.ak-esingle-contact-ico svg { width: 16px; height: 16px; }
.ak-esingle-contact-left strong { display: block; font-size: 12.5px; color: #0f172a; }
.ak-esingle-contact-val { display: block; font-size: 13px; color: #334155; text-decoration: none; word-break: break-word; }
.ak-esingle-call-btn { display: inline-flex; align-items: center; gap: 5px; background: #064e3b; color: #ffffff; text-decoration: none; font-size: 12.2px; font-weight: 700; padding: 5px 11px; border-radius: 7px; flex-shrink: 0; }
.ak-esingle-call-btn svg { width: 12px; height: 12px; }
.ak-esingle-area-line { margin: 0 0 9px; display: flex; align-items: center; gap: 6px; font-size: 13.4px; color: #334155; font-weight: 600; }
.ak-esingle-area-pin { color: #075d3a; display: inline-flex; }
.ak-esingle-area-pin svg { width: 15px; height: 15px; }
.ak-esingle-area-pill-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #065f46; font-size: 12.4px; font-weight: 700; text-decoration: none; }
.ak-esingle-area-pill-btn svg { width: 13px; height: 13px; }
.ak-esingle-map-preview { position: relative; height: 165px; border-radius: 11px; overflow: hidden; border: 1px solid #dce6e1; margin-bottom: 10px; }
.ak-esingle-map-svg { width: 100%; height: 100%; display: block; }
.ak-esingle-map-label { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.95); border: 1px solid #fecaca; padding: 3px 10px; border-radius: 7px; max-width: 84%; }
.ak-esingle-map-label strong { font-size: 12px; color: #dc2626; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ak-esingle-map-pin { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); }
.ak-esingle-map-expand { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 6px; background: #ffffff; border: 1px solid #cbd5e1; color: #0f172a; display: inline-flex; align-items: center; justify-content: center; }
.ak-esingle-map-open-pill { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; background: #ffffff; border: 1px solid #bbf7d0; color: #064e3b; font-size: 11.8px; font-weight: 700; padding: 4px 11px; border-radius: 999px; text-decoration: none; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12); }
.ak-esingle-map-open-pill svg { width: 12px; height: 12px; }
.ak-esingle-addr-block strong { display: block; font-size: 12.2px; color: #64748b; margin-bottom: 2px; }
.ak-esingle-addr-block p { margin: 0 0 8px; font-size: 13.4px; font-weight: 700; color: #0f172a; }
.ak-esingle-dir-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: #f8fbf9; border: 1px solid #cbd5e1; color: #064e3b; font-size: 12px; font-weight: 700; text-decoration: none; }
.ak-esingle-dir-pill svg { width: 12px; height: 12px; }
.ak-esingle-program-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ak-esingle-program-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.2px; font-weight: 600; color: #1e293b; line-height: 1.42; }
.ak-esingle-prog-check { width: 18px; height: 18px; border-radius: 50%; background: #16a34a; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.ak-esingle-prog-check svg { width: 10px; height: 10px; }
.ak-esingle-admission-text { margin: 0 0 10px; font-size: 13.2px; line-height: 1.5; color: #334155; }
.ak-esingle-apply-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 38px; background: #064e3b; color: #ffffff; border-radius: 9px; font-size: 13px; font-weight: 700; text-decoration: none; }
.ak-esingle-links-list,
.ak-esingle-related-list { display: flex; flex-direction: column; }
.ak-esingle-link-row,
.ak-esingle-related-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8.5px 2px; border-bottom: 1px solid #edf2ef; color: #1e293b; font-size: 13px; font-weight: 600; text-decoration: none; }
.ak-esingle-link-row:last-child,
.ak-esingle-related-row:last-child { border-bottom: 0; }
.ak-esingle-link-row:hover,
.ak-esingle-related-row:hover { color: #075d3a; }
.ak-esingle-related-copy { display: flex; flex-direction: column; min-width: 0; }
.ak-esingle-related-copy strong { font-size: 13px; color: #0f172a; }
.ak-esingle-related-copy small { font-size: 11.5px; color: #64748b; }
.ak-esingle-feedback-box { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #dce8e2; }
.ak-esingle-feedback-box h3 { margin: 0 0 3px; font-size: 13.4px; font-weight: 700; color: #0f172a; }
.ak-esingle-feedback-box p { margin: 0 0 8px; font-size: 12.2px; color: #64748b; }
.ak-esingle-report-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 36px; background: #f8fbf9; border: 1px solid #cbd5e1; border-radius: 8px; color: #0f172a; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.ak-esingle-report-btn svg { width: 13px; height: 13px; }

/* ==========================================================================
   TABLET & MOBILE RESPONSIVE BREAKPOINTS (Matches 19086.png & 19087.png)
   ========================================================================== */

@media (max-width: 1024px) {
  .ak-edu-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-edu-cards-container.is-grid-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .ak-esingle-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ak-header-inner {
    min-height: 54px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .ak-mobile-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    transform: translateZ(0);
    will-change: transform;
  }

  .ak-fb-comm-widget {
    right: 12px !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 84;
  }

  .ak-fb-comm-launcher {
    min-height: 36px !important;
    padding: 6px 13px !important;
    font-size: 12px !important;
    background: #1877f2 !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.32) !important;
  }

  .ak-fb-comm-launcher .ak-icon {
    width: 15px !important;
    height: 15px !important;
  }

  .ak-edu-dir-page,
  .ak-esingle-page {
    padding: 8px 0 calc(108px + env(safe-area-inset-bottom, 0px));
  }

  /* 1. Mobile Hero Banner & Stat Cards (19086.png) */
  .ak-edu-hero {
    padding: 15px 14px 13px;
    border-radius: 15px;
    margin-bottom: 10px;
  }

  .ak-edu-hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(242, 248, 245, 0.96) 0%,
      rgba(242, 248, 245, 0.9) 52%,
      rgba(242, 248, 245, 0.35) 85%,
      rgba(242, 248, 245, 0.12) 100%
    );
  }

  .ak-edu-hero-title {
    font-size: clamp(22px, 6vw, 27px);
    margin-bottom: 5px;
  }

  .ak-edu-hero-desc {
    font-size: clamp(11.8px, 3.2vw, 13.4px);
    margin-bottom: 12px;
    max-width: 72%;
  }

  .ak-edu-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    max-width: 100%;
  }

  .ak-edu-stat-pill {
    padding: 6px 7px;
    gap: 6px;
    border-radius: 10px;
  }

  .ak-edu-stat-ico {
    width: 26px;
    height: 26px;
  }

  .ak-edu-stat-ico svg {
    width: 14px;
    height: 14px;
  }

  .ak-edu-stat-copy small {
    font-size: clamp(9.4px, 2.5vw, 10.6px);
  }

  .ak-edu-stat-copy strong {
    font-size: clamp(11.2px, 3vw, 12.8px);
  }

  /* 2. Mobile Horizontal Scrollable Category Cards (19086.png) */
  .ak-edu-cats-track {
    gap: 7px;
    padding-right: 32px;
  }

  .ak-edu-cat-card {
    width: 78px;
    min-height: 70px;
    padding: 7px 4px;
    border-radius: 12px;
    gap: 5px;
  }

  .ak-edu-cat-icon {
    width: 31px;
    height: 31px;
  }

  .ak-edu-cat-icon svg {
    width: 16px;
    height: 16px;
  }

  .ak-edu-cat-title {
    font-size: 10.8px;
    line-height: 1.18;
  }

  /* 3. Mobile Search & 2x2 Filter Grid (19086.png & 19087.png) */
  .ak-edu-search-panel {
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 13px;
  }

  .ak-edu-search-title {
    font-size: 14.8px;
  }

  .ak-edu-reset-pill {
    font-size: 11px;
    padding: 4px 9px;
    min-height: 27px;
  }

  .ak-edu-q-wrap {
    min-height: 38px;
    padding: 0 10px;
    margin-bottom: 8px;
  }

  .ak-edu-q-wrap input {
    font-size: 12.5px;
    padding: 5px 0;
  }

  .ak-edu-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 8px;
  }

  .ak-edu-select-box {
    padding: 4px 8px;
    min-height: 38px;
    gap: 6px;
    border-radius: 9px;
  }

  .ak-edu-select-ico svg {
    width: 13.5px;
    height: 13.5px;
  }

  .ak-edu-select-inner label {
    font-size: 9.5px;
  }

  .ak-edu-select-inner select {
    font-size: 11.6px;
  }

  .ak-edu-submit-btn {
    grid-column: 1 / -1;
    min-height: 38px;
    font-size: 13.5px;
    border-radius: 9px;
  }

  .ak-edu-quick-label {
    font-size: 11.5px;
  }

  .ak-edu-area-pill {
    padding: 3px 9px;
    min-height: 25px;
    font-size: 11px;
  }

  /* 4. Mobile Results Cards (Always Horizontal 1-Column Card on Mobile matching 19086.png) */
  .ak-edu-view-switcher {
    display: none;
  }

  .ak-edu-cards-container.is-grid-view,
  .ak-edu-cards-container.is-list-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .ak-edu-card {
    padding: 10px;
    border-radius: 13px;
  }

  .ak-edu-cards-container.is-grid-view .ak-ecard-inner,
  .ak-ecard-inner {
    grid-template-columns: clamp(92px, 27vw, 122px) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .ak-edu-cards-container.is-grid-view .ak-ecard-media,
  .ak-ecard-media {
    height: clamp(80px, 23vw, 98px);
    border-radius: 9px;
  }

  .ak-edu-cards-container.is-grid-view .ak-ecard-bookmark--overlay {
    display: none;
  }

  .ak-edu-cards-container.is-grid-view .ak-ecard-bookmark--inline {
    display: inline-flex;
  }

  .ak-ecard-mgmt-badge {
    font-size: 9.5px;
    padding: 2px 6px;
    left: 5px;
    bottom: 5px;
  }

  .ak-ecard-top-row {
    margin-bottom: 3px;
  }

  .ak-ecard-title {
    font-size: clamp(13.5px, 3.7vw, 15px);
  }

  .ak-ecard-bookmark {
    width: 24px;
    height: 24px;
  }

  .ak-ecard-bookmark svg {
    width: 14.5px;
    height: 14.5px;
  }

  .ak-edu-cards-container.is-grid-view .ak-ecard-meta-grid,
  .ak-ecard-meta-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 3px 8px;
    margin-bottom: 7px;
  }

  .ak-edu-cards-container.is-grid-view .ak-ecard-meta-right {
    display: flex;
  }

  .ak-ecard-meta-item {
    font-size: clamp(10.6px, 2.85vw, 11.8px);
    gap: 4px;
  }

  .ak-ecard-meta-ico svg {
    width: 11.5px;
    height: 11.5px;
  }

  .ak-ecard-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .ak-ecard-btn {
    min-height: 29px;
    padding: 3px 5px;
    font-size: clamp(10.5px, 2.8vw, 11.6px);
    gap: 3px;
  }

  .ak-ecard-btn svg {
    width: 11px;
    height: 11px;
  }

  /* 5. Single Institution Page Mobile */
  .ak-esingle-cover { height: 175px; }
  .ak-esingle-header-body { padding: 12px 14px; }
  .ak-esingle-actions-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .ak-esingle-action-btn { min-height: 42px; padding: 6px 8px; gap: 6px; }
  .ak-esingle-action-copy strong { font-size: 12.5px; }
  .ak-esingle-action-copy small { font-size: 10.6px; }
  .ak-esingle-kv-row { grid-template-columns: 110px minmax(0, 1fr); font-size: 12.5px; }
}

/* Extra-Small Mobile Screens (320px - 349px) */
@media (max-width: 349px) {
  .ak-edu-hero-desc {
    max-width: 100%;
  }

  .ak-edu-cat-card {
    width: 72px;
    min-height: 66px;
  }

  .ak-edu-cards-container.is-grid-view .ak-ecard-inner,
  .ak-ecard-inner {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
  }

  .ak-edu-cards-container.is-grid-view .ak-ecard-media,
  .ak-ecard-media {
    height: 76px;
  }

  .ak-edu-cards-container.is-grid-view .ak-ecard-meta-grid,
  .ak-ecard-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   TUITION SERVICE DIRECTORY & SINGLE TUTOR PROFILE (v3.4.0)
   Matches 19092.png:
   - Desktop: 4-Col Tutor Cards Grid + 2-Col Single Tutor Profile
   - Tablet: 3-Col / 2-Col Tutor Cards Grid
   - Mobile (320px-767px): 2-Col Side-by-Side Tutor Cards + 1-Col Single Profile
   ========================================================================== */

.ak-tuition-dir-page,
.ak-tuition-dir-page *,
.ak-tuition-dir-page *::before,
.ak-tuition-dir-page *::after,
.ak-tsingle-page,
.ak-tsingle-page *,
.ak-tsingle-page *::before,
.ak-tsingle-page *::after {
  box-sizing: border-box;
}

.ak-tuition-dir-page,
.ak-tsingle-page {
  background: #f3f7f5;
  padding: 12px 0 calc(96px + env(safe-area-inset-bottom, 0px));
  color: #132a20;
  overflow-x: clip;
  width: 100%;
}

/* Breadcrumb & Topbar */
.ak-tuition-breadcrumb,
.ak-tsingle-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.8px;
  color: #64748b;
  margin-bottom: 10px;
}

.ak-tuition-breadcrumb a,
.ak-tsingle-breadcrumb a {
  color: #475569;
  text-decoration: none;
  font-weight: 500;
}

.ak-tuition-breadcrumb a:hover,
.ak-tsingle-breadcrumb a:hover {
  color: #075d3a;
}

.ak-tuition-bc-sep,
.ak-tsingle-bc-sep {
  color: #94a3b8;
}

.ak-tuition-bc-current,
.ak-tsingle-bc-current {
  color: #0f172a;
  font-weight: 600;
}

/* 1. Tuition Hero Banner (Matches 19092.png) */
.ak-tuition-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #e6f2ec;
  border: 1px solid #d0e4d9;
  padding: 22px 24px;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(7, 45, 29, 0.05);
}

.ak-tuition-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.ak-tuition-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(241, 248, 244, 0.98) 0%,
    rgba(241, 248, 244, 0.92) 44%,
    rgba(241, 248, 244, 0.35) 74%,
    rgba(15, 65, 42, 0.25) 100%
  );
}

.ak-tuition-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ak-tuition-hero-copy {
  max-width: 550px;
  min-width: 0;
}

.ak-tuition-hero-title {
  margin: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.18;
  font-weight: 800;
}

.ak-tuition-title-green {
  font-size: clamp(18px, 2.8vw, 25px);
  color: #064e3b;
}

.ak-tuition-title-blue {
  font-size: clamp(24px, 3.8vw, 35px);
  color: #0b63e5;
}

.ak-tuition-hero-desc {
  margin: 0 0 14px;
  font-size: clamp(12.5px, 1.7vw, 14.5px);
  line-height: 1.45;
  color: #1e293b;
  font-weight: 500;
  max-width: 440px;
}

.ak-tuition-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ak-tuition-stat-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border: 1px solid #dbeae2;
  border-radius: 11px;
  padding: 6px 9px;
  min-width: 0;
  box-shadow: 0 2px 8px rgba(7, 45, 29, 0.04);
}

.ak-tuition-stat-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-tuition-stat-ico svg {
  width: 15px;
  height: 15px;
}

.ak-tuition-stat-ico.tone-green { background: #dcfce7; color: #15803d; }
.ak-tuition-stat-ico.tone-blue  { background: #dbeafe; color: #1d4ed8; }
.ak-tuition-stat-ico.tone-rose  { background: #ffe4e6; color: #e11d48; }
.ak-tuition-stat-ico.tone-red   { background: #fee2e2; color: #dc2626; }

.ak-tuition-stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
  min-width: 0;
}

.ak-tuition-stat-text strong {
  font-size: 12.6px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}

.ak-tuition-stat-text small {
  font-size: 10.4px;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desktop Right Teacher Join Card */
.ak-tuition-join-card {
  width: 255px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid #d4e6dd;
  border-radius: 14px;
  padding: 15px;
  box-shadow: 0 8px 22px rgba(7, 45, 29, 0.09);
}

.ak-tuition-join-card h3 {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 800;
  color: #064e3b;
}

.ak-tuition-join-card p {
  margin: 0 0 11px;
  font-size: 12.2px;
  line-height: 1.42;
  color: #334155;
}

.ak-tuition-join-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 37px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 0;
  background: #064e3b;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.ak-tuition-join-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ak-tuition-join-btn:hover {
  background: #04392b;
}

/* Mobile 2-Button CTA Bar (Hidden on Desktop, Shown on Mobile) */
.ak-tuition-mobile-ctas {
  display: none;
}

/* 2. Search & 4-Filter Panel */
.ak-tuition-search-panel {
  background: #eaf3ef;
  border: 1px solid #d5e5dc;
  border-radius: 15px;
  padding: 13px 15px;
  margin-bottom: 13px;
}

.ak-tuition-q-wrap {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d8e3dd;
  border-radius: 10px;
  padding: 0 12px;
  min-height: 40px;
  margin-bottom: 9px;
}

.ak-tuition-q-wrap:focus-within {
  border-color: #075d3a;
  box-shadow: 0 0 0 2.5px rgba(7, 93, 58, 0.12);
}

.ak-tuition-q-ico {
  color: #64748b;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  flex-shrink: 0;
}

.ak-tuition-q-ico svg {
  width: 16px;
  height: 16px;
}

.ak-tuition-q-wrap input {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  font-size: 13.2px;
  color: #0f172a;
  padding: 6px 0;
  outline: none !important;
  box-shadow: none !important;
  min-width: 0;
}

.ak-tuition-q-clear {
  color: #64748b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 6px;
}

.ak-tuition-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ak-tuition-select-box {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1px solid #d8e3dd;
  border-radius: 9px;
  padding: 0 10px;
  min-height: 39px;
  min-width: 0;
}

.ak-tuition-select-box:focus-within {
  border-color: #075d3a;
}

.ak-tuition-select-ico {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ak-tuition-select-ico svg {
  width: 15px;
  height: 15px;
}

.ak-tuition-select-box select {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  padding: 6px 0;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  min-width: 0;
}

.ak-tuition-submit-btn {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #064e3b;
  color: #ffffff;
  border: 0;
  border-radius: 9px;
  font-size: 13.8px;
  font-weight: 700;
  min-height: 40px;
  padding: 0 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ak-tuition-submit-btn svg {
  width: 15px;
  height: 15px;
}

.ak-tuition-submit-btn:hover {
  background: #04392b;
}

/* 3. Horizontal Scrollable Quick Category Tabs (Matches 19092.png) */
.ak-tuition-cats-section {
  margin-bottom: 14px;
}

.ak-tuition-cats-track {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 4px;
}

.ak-tuition-cats-track::-webkit-scrollbar {
  display: none;
}

.ak-tuition-cat-tab {
  flex: 0 0 auto;
  min-width: 84px;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid #e2ece7;
  text-decoration: none;
  color: #334155;
  text-align: center;
  transition: all 0.15s ease;
}

.ak-tuition-cat-tab:hover {
  border-color: #075d3a;
  color: #064e3b;
}

.ak-tuition-cat-tab.is-active {
  background: #ecfdf5;
  border-color: #075d3a;
  color: #064e3b;
  box-shadow: 0 3px 10px rgba(7, 93, 58, 0.11);
}

.ak-tuition-cat-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ak-tuition-cat-ico svg {
  width: 17px;
  height: 17px;
}

.ak-tuition-cat-ico.tone-green  { background: #dcfce7; color: #15803d; }
.ak-tuition-cat-ico.tone-amber  { background: #fef3c7; color: #d97706; }
.ak-tuition-cat-ico.tone-indigo { background: #dbeafe; color: #1d4ed8; }
.ak-tuition-cat-ico.tone-rose   { background: #ffe4e6; color: #e11d48; }
.ak-tuition-cat-ico.tone-sky    { background: #e0f2fe; color: #0284c7; }
.ak-tuition-cat-ico.tone-teal   { background: #ccfbf1; color: #0f766e; }
.ak-tuition-cat-ico.tone-orange { background: #ffedd5; color: #ea580c; }
.ak-tuition-cat-ico.tone-purple { background: #ede9fe; color: #6d28d9; }
.ak-tuition-cat-ico.tone-cyan   { background: #cffafe; color: #0e7490; }

.ak-tuition-cat-lbl {
  font-size: 11.4px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* 4. Results Toolbar & 4-Col Desktop / 2-Col Mobile Tutor Cards Grid */
.ak-tuition-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ak-tuition-results-heading {
  margin: 0;
  font-size: clamp(15px, 2.3vw, 18.5px);
  font-weight: 800;
  color: #0f172a;
}

.ak-tuition-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ak-tuition-reset-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  min-height: 30px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d8e3dd;
  color: #334155;
  font-size: 11.8px;
  font-weight: 700;
  text-decoration: none;
}

.ak-tuition-reset-btn:hover {
  border-color: #075d3a;
  color: #075d3a;
}

.ak-tuition-sort-box {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid #d8e3dd;
  border-radius: 9px;
  padding: 4px 10px;
  min-height: 30px;
  color: #334155;
}

.ak-tuition-sort-box select {
  border: 0 !important;
  background: transparent !important;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  outline: none !important;
  cursor: pointer;
}

/* 4-Column Desktop Grid */
.ak-tuition-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* Tutor Card (.ak-tutor-card) */
.ak-tutor-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(7, 45, 29, 0.035);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  min-width: 0;
  height: 100%;
}

.ak-tutor-card:hover {
  border-color: #b7d7c8;
  box-shadow: 0 6px 18px rgba(7, 45, 29, 0.07);
}

.ak-tcard-media-wrap {
  position: relative;
  margin-bottom: 9px;
}

.ak-tcard-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.1;
  border-radius: 10px;
  overflow: hidden;
  background: #e6f4ee;
}

.ak-tcard-media img,
.ak-tcard-avatar,
.ak-tcard-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-tcard-verified-badge {
  position: absolute;
  left: 7px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #065f46;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.ak-tcard-verified-badge svg {
  width: 10px;
  height: 10px;
}

.ak-tcard-save-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  color: #e11d48;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
  z-index: 2;
  padding: 0;
}

.ak-tcard-save-btn svg {
  width: 15px;
  height: 15px;
}

.ak-tcard-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.ak-tcard-title {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.26;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.ak-tcard-title a {
  color: inherit;
  text-decoration: none;
}

.ak-tcard-title a:hover {
  color: #075d3a;
}

.ak-tcard-exp-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11.4px;
  color: #475569;
  font-weight: 600;
  margin-bottom: 2px;
}

.ak-tcard-star {
  color: #f59e0b;
  font-size: 12px;
}

.ak-tcard-inst-text {
  color: #065f46;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ak-tcard-qual {
  margin: 0 0 5px;
  font-size: 11.2px;
  color: #64748b;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ak-tcard-subj-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 5px;
}

.ak-tcard-subjects {
  font-size: 12.2px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ak-tcard-classes {
  font-size: 11.4px;
  color: #334155;
  font-weight: 600;
}

.ak-tcard-loc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.4px;
  color: #475569;
  margin-bottom: 6px;
  min-width: 0;
}

.ak-tcard-loc span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-tcard-loc-ico {
  color: #dc2626;
  display: inline-flex;
  flex-shrink: 0;
}

.ak-tcard-loc-ico svg {
  width: 12px;
  height: 12px;
}

.ak-tcard-mediums {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 9px;
}

.ak-tcard-med-pill {
  font-size: 10.2px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  white-space: nowrap;
}

.ak-tcard-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: auto;
}

.ak-tcard-actions.is-single-btn {
  grid-template-columns: 1fr;
}

.ak-tcard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 31px;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #dce6e0;
  background: #f3f7f5;
  color: #0f172a;
  transition: all 0.15s ease;
  white-space: nowrap;
  min-width: 0;
}

.ak-tcard-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.ak-tcard-btn:hover {
  border-color: #075d3a;
  color: #075d3a;
  background: #e6f4ec;
}

.ak-tcard-btn.ak-tcard-btn--call {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
}

.ak-tcard-btn.ak-tcard-btn--call:hover {
  background: #04392b;
  color: #ffffff;
}

/* Empty State & Pagination */
.ak-tuition-empty {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  padding: 28px 16px;
  text-align: center;
}

.ak-tuition-empty-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.ak-tuition-empty h3 { margin: 0 0 5px; font-size: 16.5px; color: #0f172a; }
.ak-tuition-empty p { margin: 0 auto 14px; max-width: 450px; font-size: 13px; color: #64748b; }
.ak-tuition-empty-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ak-tuition-empty-reset,
.ak-tuition-empty-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 12.8px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.ak-tuition-empty-reset { background: #064e3b; color: #ffffff; border: 0; }
.ak-tuition-empty-join  { background: #ffffff; color: #064e3b; border: 1px solid #075d3a; }

.ak-tuition-pagination {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ak-tuition-pagination .page-numbers {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid #d8e3dd;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.ak-tuition-pagination .page-numbers.current {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
}

/* ==========================================================================
   SINGLE TUTOR PROFILE PAGE (.ak-tsingle-*) — Matches 19092.png Right Panel
   ========================================================================== */

.ak-tsingle-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ak-tsingle-topbar .ak-tsingle-breadcrumb {
  margin-bottom: 0;
}

.ak-tsingle-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d5e4dc;
  color: #064e3b;
  font-size: 12.2px;
  font-weight: 700;
  text-decoration: none;
}

.ak-tsingle-back-btn:hover {
  border-color: #075d3a;
  background: #ecfdf5;
}

.ak-tsingle-hero-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(7, 45, 29, 0.045);
}

.ak-tsingle-hero-main {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}

.ak-tsingle-portrait {
  position: relative;
  width: 156px;
  height: 168px;
  border-radius: 12px;
  overflow: hidden;
  background: #e6f4ee;
  border: 1px solid #d5e5dc;
}

.ak-tsingle-portrait img,
.ak-tsingle-avatar,
.ak-tsingle-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-tsingle-verified-pill {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #065f46;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
}

.ak-tsingle-verified-pill svg {
  width: 11px;
  height: 11px;
}

.ak-tsingle-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.ak-tsingle-name {
  margin: 0;
  font-size: clamp(19px, 3vw, 24px);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.22;
}

.ak-tsingle-heart-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #e11d48;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.ak-tsingle-heart-btn svg {
  width: 16px;
  height: 16px;
}

.ak-tsingle-exp-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 13px;
  color: #334155;
  margin-bottom: 6px;
}

.ak-tsingle-star {
  color: #f59e0b;
}

.ak-tsingle-subj-summary {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.ak-tsingle-class-summary {
  margin: 0 0 6px;
  font-size: 13.2px;
  font-weight: 600;
  color: #334155;
}

.ak-tsingle-loc-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #475569;
  margin-bottom: 8px;
}

.ak-tsingle-loc-ico {
  color: #dc2626;
  display: inline-flex;
}

.ak-tsingle-loc-ico svg {
  width: 14px;
  height: 14px;
}

.ak-tsingle-medium-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-tsingle-med-chip {
  font-size: 11.6px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 7px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

.ak-tsingle-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #edf2ef;
}

.ak-tsingle-btn {
  flex: 1 1 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 39px;
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #d5e4dc;
  background: #f8fbf9;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ak-tsingle-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ak-tsingle-btn.ak-tsingle-btn--call {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
}

.ak-tsingle-btn.ak-tsingle-btn--call:hover {
  background: #04392b;
  color: #ffffff;
}

.ak-tsingle-btn.ak-tsingle-btn--wa {
  background: #ecfdf5;
  border-color: #16a34a;
  color: #15803d;
}

.ak-tsingle-btn.ak-tsingle-btn--wa:hover {
  background: #dcfce7;
}

/* 4 Stat Cards on Single Tutor Page */
.ak-tsingle-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.ak-tsingle-stat-box {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
}

.ak-tsingle-stat-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.ak-tsingle-stat-ico.tone-green  { background: #dcfce7; color: #15803d; }
.ak-tsingle-stat-ico.tone-teal   { background: #ccfbf1; color: #0f766e; }
.ak-tsingle-stat-ico.tone-amber  { background: #fef3c7; color: #d97706; }
.ak-tsingle-stat-ico.tone-purple { background: #ede9fe; color: #6d28d9; }

.ak-tsingle-stat-box strong {
  font-size: 12.6px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.ak-tsingle-stat-box small {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  line-height: 1.2;
}

/* Desktop 2-Col / Mobile 1-Col Details Grid */
.ak-tsingle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 20px;
}

.ak-tsingle-col-main,
.ak-tsingle-col-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ak-tsingle-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(7, 45, 29, 0.03);
}

.ak-tsingle-card-title {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15.5px;
  font-weight: 800;
  color: #0f172a;
}

.ak-tsingle-subtitle {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.ak-tsingle-title-ico {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
}

.ak-tsingle-bio-text p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.58;
  color: #334155;
}

.ak-tsingle-edu-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ak-tsingle-edu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fbf9;
  border: 1px solid #e5efe9;
}

.ak-tsingle-edu-badge {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-tsingle-edu-badge.tone-green { background: #dcfce7; color: #15803d; }
.ak-tsingle-edu-badge.tone-rose  { background: #ffe4e6; color: #e11d48; }

.ak-tsingle-edu-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ak-tsingle-edu-copy strong {
  font-size: 13.6px;
  color: #0f172a;
}

.ak-tsingle-edu-copy span {
  font-size: 12.5px;
  color: #475569;
}

.ak-tsingle-exp-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.ak-tsingle-exp-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #16a34a;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-tsingle-exp-card strong {
  display: block;
  font-size: 13.8px;
  color: #064e3b;
  margin-bottom: 2px;
}

.ak-tsingle-exp-card p {
  margin: 0;
  font-size: 12.8px;
  color: #1e293b;
  line-height: 1.45;
}

.ak-tsingle-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ak-tsingle-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  font-size: 12.6px;
  font-weight: 700;
}

.ak-tsingle-chip.is-soft-green {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #065f46;
}

.ak-tsingle-chip.is-mode-chip {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}

.ak-tsingle-pref-areas {
  margin: 0;
  font-size: 12.8px;
  color: #334155;
  line-height: 1.45;
}

.ak-tsingle-bottom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ak-tsingle-bottom-actions .ak-tsingle-btn--share {
  flex: 0 0 42px;
}

.ak-tsingle-back-full {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  border-radius: 8px;
  background: #f8fbf9;
  border: 1px solid #d5e4dc;
  color: #064e3b;
  font-size: 12.6px;
  font-weight: 700;
  text-decoration: none;
}

.ak-tsingle-related-section {
  margin-top: 8px;
}

.ak-tsingle-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.ak-tsingle-related-head h2 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: #0f172a;
}

.ak-tsingle-related-head a {
  font-size: 12.8px;
  font-weight: 700;
  color: #075d3a;
  text-decoration: none;
}

/* Tutor Registration Modal */
.ak-tutor-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(3px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ak-tutor-modal-backdrop[hidden] {
  display: none !important;
}

.ak-tutor-modal {
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.ak-tutor-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2ece7;
}

.ak-tutor-modal-head h2 {
  margin: 0 0 3px;
  font-size: 17.5px;
  font-weight: 800;
  color: #064e3b;
}

.ak-tutor-modal-head p {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
}

.ak-tutor-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ak-tutor-form-alert {
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12.8px;
  font-weight: 600;
  margin-bottom: 12px;
}

.ak-tutor-form-alert.is-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.ak-tutor-form-alert.is-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.ak-tutor-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ak-tutor-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ak-tutor-field--wide {
  grid-column: 1 / -1;
}

.ak-tutor-field label {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

.ak-tutor-field label span {
  color: #dc2626;
}

.ak-tutor-field input,
.ak-tutor-field select,
.ak-tutor-field textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: #0f172a;
  background: #ffffff;
  font-family: inherit;
}

.ak-tutor-field input:focus,
.ak-tutor-field select:focus,
.ak-tutor-field textarea:focus {
  border-color: #075d3a;
  outline: none;
}

.ak-tutor-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e2ece7;
}

.ak-tutor-btn-cancel,
.ak-tutor-btn-submit {
  min-height: 38px;
  padding: 6px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ak-tutor-btn-cancel {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.ak-tutor-btn-submit {
  background: #064e3b;
  border: 0;
  color: #ffffff;
}

.ak-tutor-btn-submit[disabled] {
  opacity: 0.65;
  cursor: wait;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR TUITION DIRECTORY & SINGLE TUTOR PROFILE
   ========================================================================== */

@media (max-width: 1199px) {
  .ak-tuition-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 959px) {
  .ak-tuition-join-card {
    display: none;
  }

  .ak-tuition-mobile-ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }

  .ak-tuition-mcta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12.2px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    line-height: 1.2;
  }

  .ak-tuition-mcta svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  .ak-tuition-mcta--primary {
    background: #064e3b;
    border: 1.5px solid #064e3b;
    color: #ffffff;
  }

  .ak-tuition-mcta--outline {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #0f172a;
  }

  .ak-tuition-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-tuition-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-tsingle-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ak-tuition-dir-page,
  .ak-tsingle-page {
    padding: 8px 0 calc(108px + env(safe-area-inset-bottom, 0px));
  }

  /* Mobile Hero Banner (19092.png Left) */
  .ak-tuition-hero {
    padding: 15px 14px 13px;
    border-radius: 15px;
    margin-bottom: 10px;
  }

  .ak-tuition-hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(241, 248, 244, 0.96) 0%,
      rgba(241, 248, 244, 0.9) 55%,
      rgba(241, 248, 244, 0.35) 86%,
      rgba(241, 248, 244, 0.12) 100%
    );
  }

  .ak-tuition-hero-desc {
    max-width: 70%;
    margin-bottom: 12px;
    font-size: clamp(11.6px, 3.2vw, 13.2px);
  }

  .ak-tuition-stat-pill.is-desktop-only {
    display: none;
  }

  .ak-tuition-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .ak-tuition-stat-pill {
    padding: 5px 7px;
    gap: 5px;
  }

  .ak-tuition-stat-ico {
    width: 24px;
    height: 24px;
  }

  .ak-tuition-stat-ico svg {
    width: 13px;
    height: 13px;
  }

  .ak-tuition-stat-text strong {
    font-size: clamp(11px, 3vw, 12.4px);
  }

  .ak-tuition-stat-text small {
    font-size: clamp(9.2px, 2.5vw, 10.4px);
  }

  /* Mobile Search & 2x2 Filter Grid */
  .ak-tuition-search-panel {
    padding: 11px;
    border-radius: 14px;
    margin-bottom: 11px;
  }

  .ak-tuition-q-wrap {
    min-height: 38px;
    padding: 0 10px;
    margin-bottom: 7px;
  }

  .ak-tuition-q-wrap input {
    font-size: 12.4px;
  }

  .ak-tuition-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .ak-tuition-select-box {
    min-height: 36px;
    padding: 0 8px;
    gap: 5px;
  }

  .ak-tuition-select-ico svg {
    width: 13.5px;
    height: 13.5px;
  }

  .ak-tuition-select-box select {
    font-size: 11.5px;
  }

  .ak-tuition-submit-btn {
    min-height: 38px;
    font-size: 13.4px;
  }

  /* Mobile Quick Category Tabs */
  .ak-tuition-cat-tab {
    min-width: 72px;
    min-height: 62px;
    padding: 6px 7px;
    border-radius: 11px;
  }

  .ak-tuition-cat-ico {
    width: 27px;
    height: 27px;
  }

  .ak-tuition-cat-lbl {
    font-size: 10.6px;
  }

  /* Mobile 2-Column Side-by-Side Tutor Cards (Matches 19092.png Left) */
  .ak-tuition-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ak-tutor-card {
    padding: 8px;
    border-radius: 12px;
  }

  .ak-tcard-media-wrap {
    margin-bottom: 7px;
  }

  .ak-tcard-media {
    border-radius: 8px;
  }

  .ak-tcard-verified-badge {
    font-size: 9px;
    padding: 2px 6px;
    left: 5px;
    bottom: 5px;
  }

  .ak-tcard-save-btn {
    width: 25px;
    height: 25px;
    top: 5px;
    right: 5px;
  }

  .ak-tcard-save-btn svg {
    width: 13px;
    height: 13px;
  }

  .ak-tcard-title {
    font-size: clamp(12.6px, 3.6vw, 14.2px);
    margin-bottom: 2px;
  }

  .ak-tcard-exp-row {
    font-size: clamp(10px, 2.7vw, 11px);
    gap: 3px;
  }

  .ak-tcard-qual {
    font-size: clamp(9.8px, 2.6vw, 10.8px);
    margin-bottom: 4px;
  }

  .ak-tcard-subjects {
    font-size: clamp(10.8px, 2.9vw, 11.8px);
  }

  .ak-tcard-classes {
    font-size: clamp(10px, 2.7vw, 11px);
  }

  .ak-tcard-loc {
    font-size: clamp(10px, 2.7vw, 11px);
    margin-bottom: 5px;
  }

  .ak-tcard-mediums {
    gap: 3px;
    margin-bottom: 7px;
  }

  .ak-tcard-med-pill {
    font-size: clamp(9px, 2.4vw, 10px);
    padding: 1.5px 5px;
  }

  .ak-tcard-actions {
    gap: 5px;
  }

  .ak-tcard-btn {
    min-height: 28px;
    padding: 3px 4px;
    font-size: clamp(10.2px, 2.8vw, 11.4px);
    gap: 3px;
    border-radius: 7px;
  }

  .ak-tcard-btn svg {
    width: 11px;
    height: 11px;
  }

  /* Mobile Single Tutor Profile (19092.png Right) */
  .ak-tsingle-hero-card {
    padding: 12px;
  }

  .ak-tsingle-hero-main {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 11px;
  }

  .ak-tsingle-portrait {
    width: 112px;
    height: 132px;
  }

  .ak-tsingle-verified-pill {
    font-size: 9.5px;
    padding: 3px 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
  }

  .ak-tsingle-name {
    font-size: clamp(16.5px, 4.6vw, 19.5px);
  }

  .ak-tsingle-exp-line,
  .ak-tsingle-class-summary,
  .ak-tsingle-loc-line {
    font-size: 12px;
  }

  .ak-tsingle-subj-summary {
    font-size: 12.8px;
  }

  .ak-tsingle-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .ak-tsingle-stat-box {
    padding: 8px 4px;
  }

  .ak-tsingle-stat-box strong {
    font-size: 11.2px;
  }

  .ak-tsingle-stat-box small {
    font-size: 9.8px;
  }

  .ak-tutor-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 359px) {
  .ak-tuition-mobile-ctas {
    grid-template-columns: 1fr;
  }

  .ak-tuition-cards-grid {
    gap: 6px;
  }

  .ak-tutor-card {
    padding: 6px;
  }

  .ak-tsingle-hero-main {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 9px;
  }

  .ak-tsingle-portrait {
    width: 96px;
    height: 116px;
  }

  .ak-tsingle-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   ADVANCED LOCAL JOB PORTAL & SINGLE JOB DETAILS (v3.5.0)
   Matches 19096.png:
   - Desktop (>= 1200px): 4 Job Cards per Row + 2-Col Single Job Page
   - Tablet (768px-1199px): 3 / 2 Job Cards per Row
   - Mobile (320px-767px): 2 Job Cards per Row + Slide-up Filter Sheet + Tabbed Single Job Page
   ========================================================================== */

.ak-job-dir-page,
.ak-job-dir-page *,
.ak-job-dir-page *::before,
.ak-job-dir-page *::after,
.ak-jsingle-page,
.ak-jsingle-page *,
.ak-jsingle-page *::before,
.ak-jsingle-page *::after {
  box-sizing: border-box;
}

.ak-job-dir-page,
.ak-jsingle-page {
  background: #f3f7f5;
  padding: 12px 0 calc(96px + env(safe-area-inset-bottom, 0px));
  color: #132a20;
  overflow-x: clip;
  width: 100%;
}

/* Breadcrumb & Topbar */
.ak-job-breadcrumb,
.ak-jsingle-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.8px;
  color: #64748b;
  margin-bottom: 10px;
}

.ak-job-breadcrumb a,
.ak-jsingle-breadcrumb a {
  color: #475569;
  text-decoration: none;
  font-weight: 500;
}

.ak-job-breadcrumb a:hover,
.ak-jsingle-breadcrumb a:hover {
  color: #075d3a;
}

.ak-job-bc-sep,
.ak-jsingle-bc-sep {
  color: #94a3b8;
}

.ak-job-bc-current,
.ak-jsingle-bc-current {
  color: #0f172a;
  font-weight: 600;
}

/* 1. Job Portal Hero Banner (Matches 19096.png) */
.ak-job-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #e8f3ef;
  border: 1px solid #d0e4d9;
  padding: 22px 24px;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(7, 45, 29, 0.05);
}

.ak-job-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.ak-job-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(240, 248, 250, 0.98) 0%,
    rgba(240, 248, 250, 0.92) 45%,
    rgba(240, 248, 250, 0.35) 75%,
    rgba(10, 56, 37, 0.3) 100%
  );
}

.ak-job-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ak-job-hero-copy {
  max-width: 560px;
  min-width: 0;
}

.ak-job-hero-title {
  margin: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.18;
  font-weight: 800;
}

.ak-job-title-blue {
  font-size: clamp(20px, 3vw, 28px);
  color: #0b5ed7;
}

.ak-job-title-green {
  font-size: clamp(22px, 3.3vw, 31px);
  color: #064e3b;
}

.ak-job-hero-desc {
  margin: 0 0 14px;
  font-size: clamp(12.5px, 1.7vw, 14.5px);
  line-height: 1.45;
  color: #1e293b;
  font-weight: 500;
  max-width: 440px;
}

.ak-job-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ak-job-stat-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border: 1px solid #dbeae2;
  border-radius: 11px;
  padding: 6px 9px;
  min-width: 0;
  box-shadow: 0 2px 8px rgba(7, 45, 29, 0.04);
}

.ak-job-stat-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-job-stat-ico svg {
  width: 15px;
  height: 15px;
}

.ak-job-stat-ico.tone-green { background: #dcfce7; color: #15803d; }
.ak-job-stat-ico.tone-blue  { background: #dbeafe; color: #1d4ed8; }
.ak-job-stat-ico.tone-rose  { background: #ffe4e6; color: #e11d48; }
.ak-job-stat-ico.tone-red   { background: #fee2e2; color: #dc2626; }

.ak-job-stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
  min-width: 0;
}

.ak-job-stat-text strong {
  font-size: 12.6px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}

.ak-job-stat-text small {
  font-size: 10.4px;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2 Primary Hero Action Buttons */
.ak-job-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 235px;
  flex-shrink: 0;
}

.ak-job-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.16s ease;
  text-align: left;
}

.ak-job-cta-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ak-job-cta-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
}

.ak-job-cta-copy strong {
  font-size: 13px;
  font-weight: 800;
}

.ak-job-cta-copy small {
  font-size: 10.6px;
  opacity: 0.9;
}

.ak-job-cta-btn--primary {
  background: #064e3b;
  border: 1.5px solid #064e3b;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(6, 78, 59, 0.2);
}

.ak-job-cta-btn--primary:hover {
  background: #04392b;
  color: #ffffff;
}

.ak-job-cta-btn--secondary {
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid #cbd5e1;
  color: #0f172a;
}

.ak-job-cta-btn--secondary:hover {
  border-color: #075d3a;
  color: #064e3b;
}

/* 2. Search & 7-Dimension Filter Panel */
.ak-job-search-panel {
  background: #eaf3ef;
  border: 1px solid #d5e5dc;
  border-radius: 15px;
  padding: 13px 15px;
  margin-bottom: 13px;
}

.ak-job-search-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.ak-job-q-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d8e3dd;
  border-radius: 10px;
  padding: 0 12px;
  min-height: 40px;
  min-width: 0;
}

.ak-job-q-wrap:focus-within {
  border-color: #075d3a;
  box-shadow: 0 0 0 2.5px rgba(7, 93, 58, 0.12);
}

.ak-job-q-ico {
  color: #64748b;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  flex-shrink: 0;
}

.ak-job-q-ico svg {
  width: 16px;
  height: 16px;
}

.ak-job-q-wrap input {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  font-size: 13.2px;
  color: #0f172a;
  padding: 6px 0;
  outline: none !important;
  box-shadow: none !important;
  min-width: 0;
}

.ak-job-mobile-filter-btn {
  display: none;
}

.ak-job-drawer-head {
  display: none;
}

.ak-job-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ak-job-select-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #d8e3dd;
  border-radius: 9px;
  padding: 0 10px;
  min-height: 38px;
  min-width: 0;
}

.ak-job-select-box:focus-within {
  border-color: #075d3a;
}

.ak-job-select-ico {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ak-job-select-ico svg {
  width: 14px;
  height: 14px;
}

.ak-job-select-box select {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  font-size: 12.3px;
  font-weight: 600;
  color: #0f172a;
  padding: 5px 0;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  min-width: 0;
}

.ak-job-filter-actions {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}

.ak-job-reset-btn,
.ak-job-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 12.8px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ak-job-reset-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.ak-job-reset-btn:hover {
  border-color: #075d3a;
  color: #075d3a;
}

.ak-job-submit-btn {
  background: #064e3b;
  border: 1px solid #064e3b;
  color: #ffffff;
}

.ak-job-submit-btn svg {
  width: 14px;
  height: 14px;
}

.ak-job-submit-btn:hover {
  background: #04392b;
}

/* Active Filter Chips Bar */
.ak-job-active-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed #cbd5e1;
  font-size: 11.8px;
}

.ak-job-active-chips[hidden] {
  display: none !important;
}

.ak-job-active-lbl {
  font-weight: 700;
  color: #475569;
}

.ak-job-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ak-job-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-weight: 700;
}

.ak-job-clear-inline {
  margin-left: auto;
  color: #dc2626;
  font-weight: 700;
  text-decoration: none;
}

/* 3. Horizontal Scrollable 10 Quick Category Cards (Matches 19096.png) */
.ak-job-cats-section {
  margin-bottom: 14px;
}

.ak-job-cats-track {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 4px;
}

.ak-job-cats-track::-webkit-scrollbar {
  display: none;
}

.ak-job-cat-tab {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid #e2ece7;
  text-decoration: none;
  color: #334155;
  text-align: center;
  transition: all 0.15s ease;
}

.ak-job-cat-tab:hover {
  border-color: #075d3a;
  color: #064e3b;
}

.ak-job-cat-tab.is-active {
  background: #ecfdf5;
  border-color: #075d3a;
  color: #064e3b;
  box-shadow: 0 3px 10px rgba(7, 93, 58, 0.11);
}

.ak-job-cat-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ak-job-cat-ico svg {
  width: 17px;
  height: 17px;
}

.ak-job-cat-ico.tone-green  { background: #dcfce7; color: #15803d; }
.ak-job-cat-ico.tone-amber  { background: #fef3c7; color: #d97706; }
.ak-job-cat-ico.tone-blue   { background: #dbeafe; color: #1d4ed8; }
.ak-job-cat-ico.tone-orange { background: #ffedd5; color: #ea580c; }
.ak-job-cat-ico.tone-sky    { background: #e0f2fe; color: #0284c7; }
.ak-job-cat-ico.tone-indigo { background: #e0e7ff; color: #4338ca; }
.ak-job-cat-ico.tone-purple { background: #ede9fe; color: #6d28d9; }
.ak-job-cat-ico.tone-red    { background: #fee2e2; color: #dc2626; }
.ak-job-cat-ico.tone-rose   { background: #ffe4e6; color: #e11d48; }
.ak-job-cat-ico.tone-teal   { background: #ccfbf1; color: #0f766e; }

.ak-job-cat-lbl {
  font-size: 11.2px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* 4. Job Results Toolbar & 4-Col Desktop / 2-Col Mobile Job Cards Grid */
.ak-job-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ak-job-results-heading {
  margin: 0;
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 800;
  color: #0f172a;
}

.ak-job-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ak-job-sort-box {
  background: #ffffff;
  border: 1px solid #d8e3dd;
  border-radius: 9px;
  padding: 4px 10px;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
}

.ak-job-sort-box select {
  border: 0 !important;
  background: transparent !important;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  outline: none !important;
  cursor: pointer;
}

.ak-job-view-toggle {
  display: inline-flex;
  background: #ffffff;
  border: 1px solid #d8e3dd;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.ak-job-view-btn {
  width: 28px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ak-job-view-btn.is-active {
  background: #064e3b;
  color: #ffffff;
}

/* 4-Column Desktop Grid */
.ak-job-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.ak-job-cards-grid.is-list-view {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Job Card (.ak-job-card) — Matches 19096.png */
.ak-job-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(7, 45, 29, 0.035);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  min-width: 0;
  height: 100%;
}

.ak-job-card:hover {
  border-color: #b7d7c8;
  box-shadow: 0 6px 18px rgba(7, 45, 29, 0.07);
}

.ak-job-card.is-expired {
  background: #fafafa;
  border-color: #e2e8f0;
}

.ak-jcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.ak-jcard-logo-wrap {
  position: relative;
  display: inline-flex;
  text-decoration: none;
  flex-shrink: 0;
}

.ak-jcard-logo-img,
.ak-jcard-monogram {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  object-fit: cover;
}

.ak-jcard-monogram.tone-green,
.ak-jsingle-monogram.tone-green  { background: #064e3b; }
.ak-jcard-monogram.tone-blue,
.ak-jsingle-monogram.tone-blue   { background: #1d4ed8; }
.ak-jcard-monogram.tone-red,
.ak-jsingle-monogram.tone-red    { background: #dc2626; }
.ak-jcard-monogram.tone-indigo,
.ak-jsingle-monogram.tone-indigo { background: #2563eb; }
.ak-jcard-monogram.tone-teal,
.ak-jsingle-monogram.tone-teal   { background: #0f766e; }
.ak-jcard-monogram.tone-purple,
.ak-jsingle-monogram.tone-purple { background: #6d28d9; }
.ak-jcard-monogram.tone-amber,
.ak-jsingle-monogram.tone-amber  { background: #d97706; }
.ak-jcard-monogram.tone-rose,
.ak-jsingle-monogram.tone-rose   { background: #e11d48; }

.ak-jcard-verified-dot {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #16a34a;
  color: #ffffff;
  border: 2px solid #ffffff;
  font-size: 9px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ak-jcard-top-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ak-jcard-status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

.ak-jcard-status-pill.is-new {
  background: #dcfce7;
  color: #15803d;
}

.ak-jcard-status-pill.is-expired {
  background: #fee2e2;
  color: #b91c1c;
}

.ak-jcard-heart-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #f1f5f9;
  background: #fff1f2;
  color: #e11d48;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.ak-jcard-heart-btn svg {
  width: 14px;
  height: 14px;
}

.ak-jcard-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.ak-jcard-title {
  margin: 0 0 6px;
  font-size: 15.2px;
  font-weight: 800;
  line-height: 1.28;
  color: #0f172a;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ak-jcard-title a {
  color: inherit;
  text-decoration: none;
}

.ak-jcard-title a:hover {
  color: #075d3a;
}

.ak-jcard-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.8px;
  color: #475569;
  margin-bottom: 4px;
  min-width: 0;
}

.ak-jcard-meta-row span:last-child,
.ak-jcard-meta-row strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-jcard-company span:last-child {
  font-weight: 600;
  color: #334155;
}

.ak-jcard-salary strong {
  color: #064e3b;
  font-weight: 800;
  font-size: 12.2px;
}

.ak-jcard-ico {
  color: #64748b;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ak-jcard-ico svg {
  width: 12.5px;
  height: 12.5px;
}

.ak-jcard-ico.is-salary {
  color: #075d3a;
}

.ak-jcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 7px;
}

.ak-jcard-tag {
  font-size: 10.4px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  white-space: nowrap;
}

.ak-jcard-tag.is-type {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #065f46;
}

.ak-jcard-dates {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 7px;
}

.ak-jcard-deadline-exp {
  color: #dc2626;
  font-weight: 700;
}

.ak-jcard-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4.5px 8px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #f8fbf9;
  border: 1px solid #d9ebe2;
  min-width: 0;
}

.ak-jcard-phone-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.ak-jcard-ico.is-phone {
  color: #075d3a;
}

.ak-jcard-phone-num {
  font-size: 11.4px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-jcard-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2.5px 8px;
  border-radius: 6px;
  background: #ecfdf5;
  border: 1px solid #075d3a;
  color: #064e3b;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.ak-jcard-call-btn svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.ak-jcard-call-btn:hover {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
}

.ak-jcard-actions {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 6px;
  margin-top: auto;
}

.ak-jcard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  min-width: 0;
}

.ak-jcard-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.ak-jcard-btn--details {
  background: #064e3b;
  border: 1px solid #064e3b;
  color: #ffffff;
}

.ak-jcard-btn--details:hover {
  background: #04392b;
  color: #ffffff;
}

.ak-jcard-btn--save {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.ak-jcard-btn--save svg {
  color: #e11d48;
}

.ak-jcard-btn--save:hover {
  border-color: #075d3a;
  color: #064e3b;
}

/* Empty State & Pagination */
.ak-job-empty {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  padding: 28px 16px;
  text-align: center;
}

.ak-job-empty-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.ak-job-empty h3 { margin: 0 0 5px; font-size: 16.5px; color: #0f172a; }
.ak-job-empty p { margin: 0 auto 14px; max-width: 460px; font-size: 13px; color: #64748b; }
.ak-job-empty-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ak-job-empty-reset,
.ak-job-empty-post {
  padding: 8px 15px;
  border-radius: 9px;
  font-size: 12.8px;
  font-weight: 700;
  cursor: pointer;
}
.ak-job-empty-reset { background: #064e3b; color: #ffffff; border: 0; }
.ak-job-empty-post  { background: #ffffff; color: #064e3b; border: 1px solid #075d3a; }

.ak-job-pagination {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ak-job-pagination .page-numbers {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid #d8e3dd;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.ak-job-pagination .page-numbers.current {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
}

/* ==========================================================================
   SINGLE JOB DETAILS PAGE (.ak-jsingle-*) — Matches 19096.png Right Panel
   ========================================================================== */

.ak-jsingle-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ak-jsingle-topbar .ak-jsingle-breadcrumb {
  margin-bottom: 0;
}

.ak-jsingle-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d5e4dc;
  color: #064e3b;
  font-size: 12.2px;
  font-weight: 700;
  text-decoration: none;
}

.ak-jsingle-back-btn:hover {
  border-color: #075d3a;
  background: #ecfdf5;
}

/* Employer / Admin Management Bar */
.ak-jsingle-manage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12.6px;
}

.ak-jsingle-manage-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #064e3b;
}

.ak-jsingle-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-jsingle-mbtn {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid #075d3a;
  background: #ffffff;
  color: #064e3b;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.ak-jsingle-mbtn.is-warn {
  border-color: #dc2626;
  color: #b91c1c;
}

.ak-jsingle-mbtn.is-approve {
  background: #064e3b;
  color: #ffffff;
}

/* Top Job Summary Header Card */
.ak-jsingle-hero-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(7, 45, 29, 0.045);
}

.ak-jsingle-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.ak-jsingle-hero-identity {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.ak-jsingle-logo-box {
  flex-shrink: 0;
}

.ak-jsingle-logo-box img,
.ak-jsingle-monogram {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 800;
  color: #ffffff;
  object-fit: cover;
}

.ak-jsingle-monogram.is-sm {
  width: 44px;
  height: 44px;
  font-size: 19px;
}

.ak-jsingle-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.ak-jsingle-title {
  margin: 0;
  font-size: clamp(19px, 3vw, 25px);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.22;
}

.ak-jsingle-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
}

.ak-jsingle-badge.is-new,
.ak-jsingle-badge.is-active {
  background: #16a34a;
  color: #ffffff;
}

.ak-jsingle-badge.is-expired {
  background: #dc2626;
  color: #ffffff;
}

.ak-jsingle-company-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13.8px;
  color: #1e293b;
  margin-bottom: 3px;
}

.ak-jsingle-verified-inline {
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  padding: 1.5px 7px;
  border-radius: 999px;
}

.ak-jsingle-loc-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.8px;
  color: #475569;
}

.ak-jsingle-loc-line svg {
  width: 13px;
  height: 13px;
}

.ak-jsingle-phone-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.8px;
  color: #064e3b;
  margin-top: 3px;
}

.ak-jsingle-phone-ico {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
}

.ak-jsingle-phone-ico svg {
  width: 13px;
  height: 13px;
}

.ak-jsingle-top-utilities {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.ak-jsingle-util-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 33px;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid #d5e4dc;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ak-jsingle-util-btn.is-save svg {
  color: #e11d48;
  width: 14px;
  height: 14px;
}

.ak-jsingle-util-btn:hover {
  border-color: #075d3a;
  color: #064e3b;
}

/* 4 Key Meta Boxes */
.ak-jsingle-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.ak-jsingle-meta-box {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #f8fbf9;
  border: 1px solid #e2ece7;
  border-radius: 11px;
  padding: 10px 12px;
  min-width: 0;
}

.ak-jsingle-meta-box.is-expired-box {
  background: #fef2f2;
  border-color: #fecaca;
}

.ak-jsingle-meta-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #ecfdf5;
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-jsingle-meta-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ak-jsingle-meta-copy strong {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.24;
}

.ak-jsingle-meta-copy small {
  font-size: 11.2px;
  color: #64748b;
  font-weight: 600;
}

/* Hero Action Buttons */
.ak-jsingle-hero-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.ak-jsingle-hero-actions.cols-1 {
  grid-template-columns: 1fr;
}

.ak-jsingle-hero-actions.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ak-jsingle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 41px;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 13.4px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #d5e4dc;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ak-jsingle-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ak-jsingle-btn--apply {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
}

.ak-jsingle-btn--apply:hover {
  background: #04392b;
  color: #ffffff;
}

.ak-jsingle-btn--call {
  background: #f8fbf9;
  border-color: #075d3a;
  color: #064e3b;
}

.ak-jsingle-btn--wa {
  background: #ecfdf5;
  border-color: #16a34a;
  color: #15803d;
}

.ak-jsingle-btn--disabled {
  grid-column: 1 / -1;
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
  cursor: not-allowed;
}

/* Mobile Quick Tab Switcher (Hidden on Desktop, Shown on Mobile) */
.ak-jsingle-mobile-tabs {
  display: none;
}

/* Desktop 2-Column Details Grid */
.ak-jsingle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.95fr);
  gap: 14px;
  align-items: start;
}

.ak-jsingle-col-main,
.ak-jsingle-col-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ak-jsingle-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(7, 45, 29, 0.03);
}

.ak-jsingle-sec-title {
  margin: 0 0 11px;
  font-size: 16.5px;
  font-weight: 800;
  color: #0f172a;
}

.ak-jsingle-sub-heading {
  margin: 16px 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.ak-jsingle-prose p {
  margin: 0;
  font-size: 13.6px;
  line-height: 1.6;
  color: #334155;
}

.ak-jsingle-bullet-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.4px;
  line-height: 1.5;
  color: #334155;
}

.ak-jsingle-bullet-list li::marker {
  color: #075d3a;
}

.ak-jsingle-apply-box {
  background: #f8fbf9;
  border: 1px solid #d5e5dc;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13px;
  color: #1e293b;
}

.ak-jsingle-apply-box p {
  margin: 0 0 4px;
}

.ak-jsingle-apply-box p:last-child {
  margin-bottom: 0;
}

/* Employer Profile Sidebar Card */
.ak-jsingle-comp-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}

.ak-jsingle-comp-logo img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.ak-jsingle-comp-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ak-jsingle-comp-meta strong {
  font-size: 14.5px;
  color: #0f172a;
}

.ak-jsingle-comp-meta span {
  font-size: 12.2px;
  color: #64748b;
}

.ak-jsingle-comp-verified {
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
}

.ak-jsingle-comp-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.8px;
  color: #334155;
}

.ak-jsingle-comp-list li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ak-jsingle-comp-ico svg {
  width: 14px;
  height: 14px;
  color: #075d3a;
}

.ak-jsingle-comp-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 12.4px;
  font-weight: 700;
  text-decoration: none;
}

.ak-jsingle-comp-more-btn:hover {
  border-color: #075d3a;
  color: #064e3b;
  background: #ecfdf5;
}

/* Job Summary Table List */
.ak-jsingle-summary-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ak-jsingle-summary-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px dashed #e2ece7;
  font-size: 12.8px;
}

.ak-jsingle-summary-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ak-jsingle-sum-lbl {
  color: #64748b;
  font-weight: 600;
}

.ak-jsingle-sum-val {
  color: #0f172a;
  font-weight: 700;
  text-align: right;
}

.ak-jsingle-sum-val.is-expired-text {
  color: #dc2626;
}

.ak-jsingle-side-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ak-jsingle-back-full {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 35px;
  border-radius: 8px;
  background: #f8fbf9;
  border: 1px solid #d5e4dc;
  color: #064e3b;
  font-size: 12.4px;
  font-weight: 700;
  text-decoration: none;
}

/* Job Portal Modals (#ak-job-post-modal, #ak-job-apply-modal, #ak-job-report-modal) */
.ak-job-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(3px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ak-job-modal-backdrop[hidden] {
  display: none !important;
}

.ak-job-modal {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.ak-job-modal.is-compact {
  max-width: 460px;
}

.ak-job-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2ece7;
}

.ak-job-modal-head h2 {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 800;
  color: #064e3b;
}

.ak-job-modal-head p {
  margin: 0;
  font-size: 12.4px;
  color: #64748b;
}

.ak-job-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ak-job-form-alert {
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12.8px;
  font-weight: 600;
  margin-bottom: 12px;
}

.ak-job-form-alert.is-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.ak-job-form-alert.is-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.ak-job-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ak-job-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ak-job-field--wide {
  grid-column: 1 / -1;
}

.ak-job-field label {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

.ak-job-field label span {
  color: #dc2626;
}

.ak-job-field input,
.ak-job-field select,
.ak-job-field textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: #0f172a;
  background: #ffffff;
  font-family: inherit;
}

.ak-job-field input:focus,
.ak-job-field select:focus,
.ak-job-field textarea:focus {
  border-color: #075d3a;
  outline: none;
}

.ak-job-modal-foot {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e2ece7;
}

.ak-job-btn-cancel,
.ak-job-btn-draft,
.ak-job-btn-submit {
  min-height: 38px;
  padding: 6px 15px;
  border-radius: 9px;
  font-size: 12.8px;
  font-weight: 700;
  cursor: pointer;
}

.ak-job-btn-cancel {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.ak-job-btn-draft {
  background: #ecfdf5;
  border: 1px solid #075d3a;
  color: #064e3b;
}

.ak-job-btn-submit {
  background: #064e3b;
  border: 0;
  color: #ffffff;
}

.ak-job-btn-submit[disabled],
.ak-job-btn-draft[disabled] {
  opacity: 0.65;
  cursor: wait;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR JOB PORTAL & SINGLE JOB DETAILS
   ========================================================================== */

@media (max-width: 1199px) {
  .ak-job-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 959px) {
  .ak-job-hero-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .ak-job-hero-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ak-job-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-job-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-jsingle-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-jsingle-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ak-job-dir-page,
  .ak-jsingle-page {
    padding: 8px 0 calc(108px + env(safe-area-inset-bottom, 0px));
  }

  .ak-job-hero {
    padding: 15px 14px 13px;
    border-radius: 15px;
    margin-bottom: 11px;
  }

  .ak-job-hero-desc {
    max-width: 74%;
    margin-bottom: 11px;
    font-size: clamp(11.5px, 3.2vw, 13px);
  }

  .ak-job-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .ak-job-stat-pill {
    flex-direction: column;
    align-items: flex-start;
    padding: 6px;
    gap: 3px;
  }

  .ak-job-stat-ico {
    width: 22px;
    height: 22px;
  }

  .ak-job-stat-text strong {
    font-size: clamp(10.8px, 2.9vw, 12px);
  }

  .ak-job-stat-text small {
    font-size: clamp(8.8px, 2.4vw, 9.8px);
  }

  .ak-job-cta-btn {
    min-height: 42px;
    padding: 6px 8px;
    border-radius: 10px;
    gap: 6px;
  }

  .ak-job-cta-copy strong {
    font-size: clamp(11px, 3vw, 12.2px);
  }

  .ak-job-cta-copy small {
    font-size: clamp(9.2px, 2.5vw, 10px);
  }

  /* Mobile Search + Slide-Up Filter Sheet (Matches 19096.png 2nd Bottom Mockup) */
  .ak-job-search-top {
    margin-bottom: 0;
  }

  .ak-job-mobile-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #075d3a;
    background: #ffffff;
    color: #064e3b;
    font-size: 12.2px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
  }

  .ak-job-filters-grid {
    display: none;
  }

  .ak-job-filters-grid.is-sheet-open {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    background: #ffffff;
    border-radius: 18px 18px 0 0;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.25);
    max-height: 85vh;
    overflow-y: auto;
  }

  .ak-job-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2ece7;
    font-size: 15.5px;
    color: #0f172a;
  }

  .ak-job-drawer-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  /* Mobile Quick Category Tabs */
  .ak-job-cat-tab {
    min-width: 78px;
    min-height: 60px;
    padding: 6px 7px;
  }

  .ak-job-cat-lbl {
    font-size: 10.4px;
  }

  /* Mobile 2-Column Side-by-Side Job Cards (Matches 19096.png Bottom-Left & Bottom-Center) */
  .ak-job-cards-grid,
  .ak-job-cards-grid.is-list-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ak-job-card {
    padding: 9px;
    border-radius: 12px;
  }

  .ak-jcard-top {
    margin-bottom: 7px;
  }

  .ak-jcard-logo-img,
  .ak-jcard-monogram {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .ak-jcard-heart-btn {
    width: 24px;
    height: 24px;
  }

  .ak-jcard-title {
    font-size: clamp(12.6px, 3.6vw, 14.2px);
    margin-bottom: 4px;
  }

  .ak-jcard-meta-row {
    font-size: clamp(10.2px, 2.8vw, 11.2px);
    gap: 4px;
    margin-bottom: 3px;
  }

  .ak-jcard-salary strong {
    font-size: clamp(10.6px, 2.9vw, 11.6px);
  }

  .ak-jcard-tags {
    gap: 3px;
    margin: 4px 0 5px;
  }

  .ak-jcard-tag {
    font-size: clamp(9.2px, 2.5vw, 10px);
    padding: 1.5px 5px;
  }

  .ak-jcard-dates {
    font-size: clamp(9.4px, 2.5vw, 10.4px);
    margin-bottom: 5px;
  }

  .ak-jcard-contact-row {
    padding: 3.5px 5.5px;
    margin-bottom: 6px;
    gap: 4px;
    border-radius: 7px;
  }

  .ak-jcard-phone-info {
    gap: 3px;
  }

  .ak-jcard-phone-num {
    font-size: clamp(9.5px, 2.55vw, 10.6px);
  }

  .ak-jcard-call-btn {
    padding: 2px 5.5px;
    font-size: clamp(9.4px, 2.5vw, 10.4px);
    border-radius: 5px;
    gap: 2.5px;
  }

  .ak-jcard-call-btn svg {
    width: 9.5px;
    height: 9.5px;
  }

  .ak-jcard-actions {
    grid-template-columns: 1.25fr 0.85fr;
    gap: 4px;
  }

  .ak-jcard-btn {
    min-height: 28px;
    padding: 3px 4px;
    font-size: clamp(10px, 2.7vw, 11.2px);
    border-radius: 7px;
    gap: 3px;
  }

  .ak-jcard-btn svg {
    width: 10.5px;
    height: 10.5px;
  }

  /* Mobile Single Job Page */
  .ak-jsingle-hero-card {
    padding: 13px;
  }

  .ak-jsingle-hero-top {
    flex-direction: column;
    gap: 10px;
  }

  .ak-jsingle-top-utilities {
    width: 100%;
    justify-content: space-between;
  }

  .ak-jsingle-util-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 5px 6px;
    font-size: 11.2px;
  }

  .ak-jsingle-hero-actions,
  .ak-jsingle-hero-actions.cols-3 {
    grid-template-columns: 0.9fr 1.25fr;
    gap: 7px;
  }

  .ak-jsingle-hero-actions.cols-3 .ak-jsingle-btn--apply {
    grid-column: 1 / -1;
  }

  .ak-jsingle-btn {
    min-height: 36px;
    padding: 5px 6px;
    font-size: clamp(10.8px, 3vw, 12.2px);
    gap: 4px;
  }

  .ak-jsingle-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2ece7;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 12px;
  }

  .ak-jsingle-mtab {
    min-height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #475569;
    font-size: 12.4px;
    font-weight: 700;
    cursor: pointer;
  }

  .ak-jsingle-mtab.is-active {
    background: #ecfdf5;
    color: #064e3b;
  }

  .ak-job-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 359px) {
  .ak-job-hero-actions {
    grid-template-columns: 1fr;
  }

  .ak-job-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-job-cards-grid {
    gap: 6px;
  }

  .ak-job-card {
    padding: 7px;
  }

  .ak-jcard-contact-row {
    padding: 3px 4.5px;
    gap: 3px;
  }

  .ak-jcard-call-btn svg {
    display: none;
  }

  .ak-jsingle-hero-actions,
  .ak-jsingle-hero-actions.cols-2,
  .ak-jsingle-hero-actions.cols-3 {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   MARKETPLACE & SHOPPING DIRECTORY (.ak-mkt-*) & SINGLE SHOP (.ak-msingle-*)
   Matches Reference Images 19157.png & 19156.png (v3.6.0)
   ========================================================================== */

.ak-mkt-dir-page,
.ak-mkt-dir-page *,
.ak-mkt-dir-page *::before,
.ak-mkt-dir-page *::after,
.ak-msingle-page,
.ak-msingle-page *,
.ak-msingle-page *::before,
.ak-msingle-page *::after {
  box-sizing: border-box;
}

.ak-mkt-dir-page,
.ak-msingle-page {
  background: #f5f9f6;
  padding: 14px 0 calc(92px + env(safe-area-inset-bottom, 0px));
  overflow-x: clip;
}

.ak-mkt-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: #64748b;
  margin-bottom: 12px;
}

.ak-mkt-breadcrumb a {
  color: #475569;
  text-decoration: none;
  font-weight: 500;
}

.ak-mkt-breadcrumb a:hover {
  color: #075d3a;
}

.ak-mkt-bc-sep {
  color: #94a3b8;
}

.ak-mkt-bc-current {
  color: #064e3b;
  font-weight: 700;
}

/* 1. Marketplace Hero Banner (Matches 19157.png) */
.ak-mkt-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background-color: #ecfdf5;
  background-image:
    linear-gradient(92deg, rgba(240, 253, 246, 0.97) 0%, rgba(236, 253, 245, 0.92) 48%, rgba(236, 253, 245, 0.22) 100%),
    var(--ak-mkt-hero-bg);
  background-size: cover;
  background-position: right center;
  border: 1px solid #d1e7db;
  box-shadow: 0 8px 26px rgba(7, 45, 29, 0.06);
  padding: 24px 26px 20px;
  margin-bottom: 14px;
}

.ak-mkt-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.ak-mkt-hero-copy {
  flex: 1 1 680px;
  min-width: 0;
}

.ak-mkt-hero-title {
  margin: 0 0 8px;
  font-size: clamp(24px, 3.8vw, 35px);
  font-weight: 800;
  line-height: 1.18;
  color: #064e3b;
}

.ak-mkt-hero-desc {
  margin: 0 0 16px;
  max-width: 540px;
  font-size: clamp(13px, 1.8vw, 15px);
  line-height: 1.5;
  color: #1e293b;
  font-weight: 500;
}

.ak-mkt-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 650px;
}

.ak-mkt-stat-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #dcebe3;
  border-radius: 12px;
  padding: 9px 11px;
  box-shadow: 0 3px 10px rgba(7, 45, 29, 0.04);
  min-width: 0;
}

.ak-mkt-stat-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-mkt-stat-ico.tone-orange { background: #fff7ed; color: #ea580c; }
.ak-mkt-stat-ico.tone-green  { background: #ecfdf5; color: #059669; }
.ak-mkt-stat-ico.tone-pink   { background: #fdf2f8; color: #db2777; }
.ak-mkt-stat-ico.tone-blue   { background: #eff6ff; color: #2563eb; }

.ak-mkt-stat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ak-mkt-stat-text strong {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-mkt-stat-text small {
  font-size: 10.8px;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-mkt-hero-cta {
  flex-shrink: 0;
}

.ak-mkt-add-shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 16px;
  border-radius: 11px;
  border: 0;
  background: #064e3b;
  color: #ffffff;
  font-size: 13.2px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(6, 78, 59, 0.22);
  transition: background 0.15s ease, transform 0.15s ease;
}

.ak-mkt-add-shop-btn:hover {
  background: #04392b;
  transform: translateY(-1px);
}

/* 2. Unified Search & Filter Panel (Matches 19157.png) */
.ak-mkt-search-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 3px 14px rgba(7, 45, 29, 0.035);
}

.ak-mkt-search-top {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 10px;
}

.ak-mkt-search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.ak-mkt-search-ico {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  display: inline-flex;
  pointer-events: none;
}

.ak-mkt-search-ico svg {
  width: 16px;
  height: 16px;
}

.ak-mkt-search-input-wrap input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 38px;
  border-radius: 10px;
  border: 1px solid #d5e3dc;
  background: #f8fbf9;
  font-size: 13.5px;
  color: #0f172a;
  font-family: inherit;
}

.ak-mkt-search-input-wrap input:focus {
  border-color: #075d3a;
  background: #ffffff;
  outline: none;
}

.ak-mkt-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 108px;
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 0;
  background: #064e3b;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}

.ak-mkt-search-btn svg {
  width: 15px;
  height: 15px;
}

.ak-mkt-search-btn:hover {
  background: #04392b;
}

.ak-mkt-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 9px;
  align-items: center;
}

.ak-mkt-select-box select {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid #d5e3dc;
  background: #ffffff;
  font-size: 12.6px;
  font-weight: 600;
  color: #1e293b;
  font-family: inherit;
  cursor: pointer;
}

.ak-mkt-select-box select:focus {
  border-color: #075d3a;
  outline: none;
}

.ak-mkt-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 12.4px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ak-mkt-reset-btn:hover {
  border-color: #dc2626;
  color: #b91c1c;
  background: #fef2f2;
}

/* 3. Horizontal Right-Scrollable 16 Categories Strip (Matches 19157.png) */
.ak-mkt-cats-section {
  margin-bottom: 16px;
}

.ak-mkt-cats-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 15px;
  padding: 11px 10px;
  box-shadow: 0 2px 10px rgba(7, 45, 29, 0.03);
}

.ak-mkt-cat-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d5e3dc;
  background: #ffffff;
  color: #064e3b;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  transition: all 0.15s ease;
}

.ak-mkt-cat-arrow:hover {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
}

.ak-mkt-cats-track {
  display: flex;
  align-items: stretch;
  gap: 9px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.ak-mkt-cats-track::-webkit-scrollbar {
  display: none;
}

.ak-mkt-cat-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 86px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: #f8fbf9;
  text-decoration: none;
  color: #1e293b;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.ak-mkt-cat-tab:hover {
  border-color: #b7d7c8;
  background: #f0fdf4;
}

.ak-mkt-cat-tab.is-active {
  background: #ecfdf5;
  border-color: #075d3a;
  box-shadow: 0 3px 10px rgba(7, 93, 58, 0.12);
}

.ak-mkt-cat-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ak-mkt-cat-ico.tone-green  { background: #dcfce7; color: #15803d; }
.ak-mkt-cat-ico.tone-amber  { background: #fef3c7; color: #d97706; }
.ak-mkt-cat-ico.tone-blue   { background: #dbeafe; color: #1d4ed8; }
.ak-mkt-cat-ico.tone-orange { background: #ffedd5; color: #ea580c; }
.ak-mkt-cat-ico.tone-purple { background: #f3e8ff; color: #7e22ce; }
.ak-mkt-cat-ico.tone-rose   { background: #ffe4e6; color: #e11d48; }
.ak-mkt-cat-ico.tone-sky    { background: #e0f2fe; color: #0284c7; }
.ak-mkt-cat-ico.tone-indigo { background: #e0e7ff; color: #4338ca; }
.ak-mkt-cat-ico.tone-pink   { background: #fce7f3; color: #db2777; }
.ak-mkt-cat-ico.tone-red    { background: #fee2e2; color: #dc2626; }
.ak-mkt-cat-ico.tone-teal   { background: #ccfbf1; color: #0f766e; }

.ak-mkt-cat-lbl {
  font-size: 11.4px;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

.ak-mkt-cat-tab.is-active .ak-mkt-cat-lbl {
  color: #064e3b;
  font-weight: 800;
}

/* 4. Results Toolbar & 4-Col Desktop / 2-Col Mobile Cards Grid */
.ak-mkt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.ak-mkt-results-heading {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 19.5px);
  font-weight: 800;
  color: #0f172a;
}

.ak-mkt-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ak-mkt-sort-box select {
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #d5e3dc;
  background: #ffffff;
  font-size: 12.2px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
}

.ak-mkt-view-toggle {
  display: inline-flex;
  background: #ffffff;
  border: 1px solid #d5e3dc;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.ak-mkt-view-btn {
  width: 30px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ak-mkt-view-btn.is-active {
  background: #064e3b;
  color: #ffffff;
}

.ak-mkt-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.ak-mkt-cards-grid.is-list-view {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Shop / Business Card (.ak-market-card) — Matches 19157.png */
.ak-market-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 12px rgba(7, 45, 29, 0.04);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  min-width: 0;
  height: 100%;
}

.ak-market-card:hover {
  border-color: #b7d7c8;
  box-shadow: 0 8px 22px rgba(7, 45, 29, 0.08);
  transform: translateY(-2px);
}

.ak-mcard-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.8;
  background: #0f172a;
  overflow: hidden;
  flex-shrink: 0;
}

.ak-mcard-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
}

.ak-mcard-img,
.ak-mcard-media .ak-mkt-svg-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-mcard-verified {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 10.4px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.ak-mcard-heart-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  color: #e11d48;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
  padding: 0;
}

.ak-mcard-heart-btn svg {
  width: 15px;
  height: 15px;
}

.ak-mcard-body {
  padding: 12px 13px 13px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.ak-mcard-title {
  margin: 0 0 4px;
  font-size: 15.4px;
  font-weight: 800;
  line-height: 1.28;
  color: #0f172a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ak-mcard-title a {
  color: inherit;
  text-decoration: none;
}

.ak-mcard-title a:hover {
  color: #075d3a;
}

.ak-mcard-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  margin-bottom: 5px;
}

.ak-mcard-star {
  color: #f59e0b;
  font-size: 13px;
}

.ak-mcard-rating strong {
  color: #d97706;
  font-weight: 800;
}

.ak-mcard-rev-count {
  color: #64748b;
  font-size: 11.4px;
}

.ak-mcard-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.8px;
  color: #475569;
  margin-bottom: 5px;
  min-width: 0;
}

.ak-mcard-meta span:not(.ak-mcard-ico) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-mcard-ico {
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ak-mcard-ico svg {
  width: 13px;
  height: 13px;
}

.ak-mcard-hours-short {
  display: none;
}

.ak-mcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 3px 0 6px;
}

.ak-mcard-tag {
  font-size: 10.4px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-mcard-actions {
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}

.ak-mcard-actions.no-call {
  grid-template-columns: 1fr;
}

.ak-mcard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 33px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
  min-width: 0;
}

.ak-mcard-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.ak-mcard-btn--call {
  background: #ffffff;
  border: 1px solid #075d3a;
  color: #064e3b;
}

.ak-mcard-btn--call:hover {
  background: #ecfdf5;
  color: #04392b;
}

.ak-mcard-btn--details {
  background: #064e3b;
  border: 1px solid #064e3b;
  color: #ffffff;
}

.ak-mcard-btn--details:hover {
  background: #04392b;
  color: #ffffff;
}

.ak-mkt-empty {
  grid-column: 1 / -1;
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  padding: 32px 16px;
  text-align: center;
}

.ak-mkt-empty h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #0f172a;
}

.ak-mkt-empty p {
  margin: 0 auto 14px;
  max-width: 440px;
  font-size: 13px;
  color: #64748b;
}

.ak-mkt-empty-reset {
  padding: 8px 16px;
  border-radius: 9px;
  border: 0;
  background: #064e3b;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ak-mkt-pagination {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ak-mkt-pagination .page-numbers {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid #d5e3dc;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ak-mkt-pagination .page-numbers.current {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
}

/* ==========================================================================
   SINGLE SHOP / BUSINESS DETAILS PAGE (.ak-msingle-*) — Matches 19156.png
   ========================================================================== */

.ak-msingle-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ak-msingle-topbar .ak-mkt-breadcrumb {
  margin-bottom: 0;
}

.ak-msingle-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d5e3dc;
  color: #064e3b;
  font-size: 12.2px;
  font-weight: 700;
  text-decoration: none;
}

.ak-msingle-back-btn:hover {
  border-color: #075d3a;
  background: #ecfdf5;
}

.ak-msingle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(0, 0.92fr);
  gap: 16px;
  align-items: start;
}

.ak-msingle-col-main,
.ak-msingle-col-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ak-msingle-hero-card,
.ak-msingle-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 3px 14px rgba(7, 45, 29, 0.04);
}

/* Interactive Cover Gallery Viewer */
.ak-msingle-gallery-viewer {
  margin-bottom: 14px;
}

.ak-msingle-slides-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.2;
  border-radius: 13px;
  overflow: hidden;
  background: #0f172a;
  margin-bottom: 9px;
}

.ak-msingle-slide {
  width: 100%;
  height: 100%;
}

.ak-msingle-slide[hidden] {
  display: none !important;
}

.ak-msingle-slide img,
.ak-msingle-slide .ak-mkt-svg-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-msingle-gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.ak-msingle-gal-nav.is-prev { left: 10px; }
.ak-msingle-gal-nav.is-next { right: 10px; }

.ak-msingle-gal-counter {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
}

.ak-msingle-thumbs-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.ak-msingle-thumb-btn {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0f172a;
  cursor: pointer;
  opacity: 0.78;
  transition: all 0.15s ease;
}

.ak-msingle-thumb-btn.is-active,
.ak-msingle-thumb-btn:hover {
  border-color: #075d3a;
  opacity: 1;
}

.ak-msingle-thumb-btn img,
.ak-msingle-thumb-btn .ak-mkt-svg-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Title, Verified Badge, Rating & Short Desc */
.ak-msingle-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.ak-msingle-title {
  margin: 0;
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.22;
}

.ak-msingle-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3.5px 10px;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 11.4px;
  font-weight: 800;
}

.ak-msingle-rating-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  margin-bottom: 8px;
}

.ak-msingle-star {
  color: #f59e0b;
  font-size: 15px;
}

.ak-msingle-rating-line strong {
  color: #d97706;
  font-weight: 800;
}

.ak-msingle-rev-link {
  color: #64748b;
  text-decoration: none;
  font-weight: 600;
}

.ak-msingle-rev-link:hover {
  color: #075d3a;
  text-decoration: underline;
}

.ak-msingle-short-desc {
  margin: 0 0 14px;
  font-size: 13.6px;
  line-height: 1.55;
  color: #334155;
}

/* Primary Action Buttons Row */
.ak-msingle-action-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.ak-msingle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  font-size: 12.6px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.ak-msingle-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ak-msingle-btn--call {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
}

.ak-msingle-btn--call:hover {
  background: #04392b;
  color: #ffffff;
}

.ak-msingle-btn--wa {
  background: #ecfdf5;
  border-color: #16a34a;
  color: #15803d;
}

.ak-msingle-btn--wa:hover {
  background: #16a34a;
  color: #ffffff;
}

.ak-msingle-btn--save svg {
  color: #e11d48;
}

/* 5 Quick Highlight Boxes */
.ak-msingle-highlights {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.ak-msingle-hl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 11px;
  background: #f8fbf9;
  border: 1px solid #e2ece7;
  min-width: 0;
}

.ak-msingle-hl-ico {
  font-size: 17px;
  flex-shrink: 0;
}

.ak-msingle-hl-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ak-msingle-hl-copy strong {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-msingle-hl-copy small {
  font-size: 10.6px;
  color: #64748b;
  font-weight: 600;
}

/* Content Cards */
.ak-msingle-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

.ak-msingle-sec-title {
  margin: 0 0 10px;
  font-size: 16.5px;
  font-weight: 800;
  color: #0f172a;
}

.ak-msingle-sec-head .ak-msingle-sec-title {
  margin-bottom: 0;
}

.ak-msingle-sec-sub {
  font-size: 12px;
  font-weight: 700;
  color: #075d3a;
}

.ak-msingle-prose p {
  margin: 0;
  font-size: 13.6px;
  line-height: 1.62;
  color: #334155;
}

.ak-msingle-fac-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.ak-msingle-fac-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  font-size: 12.6px;
  font-weight: 700;
  color: #064e3b;
}

.ak-msingle-fac-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #16a34a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Photo Gallery Section */
.ak-msingle-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ak-msingle-photo-card {
  padding: 0;
  border: 1px solid #e2ece7;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fbf9;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.ak-msingle-photo-card:hover {
  border-color: #075d3a;
  transform: translateY(-2px);
}

.ak-msingle-photo-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.ak-msingle-photo-media img,
.ak-msingle-photo-media .ak-mkt-svg-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-msingle-photo-cap {
  display: block;
  padding: 6px 8px;
  font-size: 11.2px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reviews & Rating Breakdown */
.ak-msingle-write-rev-btn {
  padding: 6px 13px;
  border-radius: 8px;
  border: 0;
  background: #064e3b;
  color: #ffffff;
  font-size: 12.2px;
  font-weight: 700;
  cursor: pointer;
}

.ak-msingle-rating-summary {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: #f8fbf9;
  border: 1px solid #e2ece7;
  margin-bottom: 12px;
}

.ak-msingle-rating-big {
  text-align: center;
}

.ak-msingle-rating-big strong {
  font-size: 32px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
}

.ak-msingle-stars-row {
  color: #f59e0b;
  font-size: 15px;
  margin: 3px 0;
}

.ak-msingle-rating-big small {
  font-size: 11.4px;
  color: #64748b;
  font-weight: 600;
}

.ak-msingle-rating-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ak-msingle-rbar-row {
  display: grid;
  grid-template-columns: 28px 1fr 34px;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
}

.ak-msingle-rbar-track {
  height: 7px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.ak-msingle-rbar-fill {
  height: 100%;
  border-radius: 999px;
  background: #f59e0b;
}

.ak-msingle-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ak-msingle-review-item {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2ece7;
  background: #ffffff;
}

.ak-msingle-rev-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12.6px;
}

.ak-msingle-rev-stars {
  color: #f59e0b;
}

.ak-msingle-rev-top small {
  color: #94a3b8;
  margin-left: auto;
}

.ak-msingle-review-item p {
  margin: 0;
  font-size: 12.8px;
  color: #334155;
  line-height: 1.5;
}

.ak-msingle-no-reviews {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

/* Right Sidebar Contact, Hours, Address, Map & Tags */
.ak-msingle-side-title {
  margin: 0 0 11px;
  font-size: 15.8px;
  font-weight: 800;
  color: #0f172a;
}

.ak-msingle-side-subtitle {
  margin: 0 0 7px;
  font-size: 13.8px;
  font-weight: 800;
  color: #0f172a;
}

.ak-msingle-side-divider {
  height: 1px;
  background: #e2ece7;
  margin: 13px 0;
}

.ak-msingle-phone-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #f8fbf9;
  border: 1px solid #d5e3dc;
  margin-bottom: 10px;
}

.ak-msingle-phone-num-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ak-msingle-phone-text {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.ak-msingle-copy-btn {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 11.2px;
  font-weight: 700;
  cursor: pointer;
}

.ak-msingle-side-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ak-msingle-side-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 40px;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 13.2px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.15s ease;
}

.ak-msingle-side-btn svg {
  width: 15px;
  height: 15px;
}

.ak-msingle-side-btn.is-call {
  background: #064e3b;
  border: 1px solid #064e3b;
  color: #ffffff;
}

.ak-msingle-side-btn.is-call:hover {
  background: #04392b;
  color: #ffffff;
}

.ak-msingle-side-btn.is-wa {
  background: #ffffff;
  border: 1px solid #16a34a;
  color: #15803d;
}

.ak-msingle-side-btn.is-wa:hover {
  background: #ecfdf5;
}

.ak-msingle-side-btn.is-map {
  background: #ffffff;
  border: 1px solid #075d3a;
  color: #064e3b;
  margin-top: 8px;
}

.ak-msingle-side-btn.is-map:hover {
  background: #ecfdf5;
}

.ak-msingle-hours-block,
.ak-msingle-address-block {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #334155;
  line-height: 1.45;
}

.ak-msingle-side-ico {
  color: #075d3a;
  display: inline-flex;
  margin-top: 2px;
  flex-shrink: 0;
}

.ak-msingle-side-ico svg {
  width: 15px;
  height: 15px;
}

.ak-msingle-open-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 800;
}

.ak-msingle-website-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #f8fbf9;
  border: 1px solid #d5e3dc;
  color: #064e3b;
  font-size: 12.6px;
  font-weight: 700;
  text-decoration: none;
  word-break: break-all;
}

.ak-msingle-map-card {
  padding: 10px;
}

.ak-msingle-map-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #d5e3dc;
}

.ak-msingle-map-svg {
  width: 100%;
  height: auto;
  display: block;
}

.ak-msingle-map-pin-label {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e2ece7;
  border-radius: 9px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.ak-msingle-map-pin-label strong {
  font-size: 12.4px;
  color: #dc2626;
}

.ak-msingle-map-pin-label small {
  font-size: 11px;
  color: #475569;
}

.ak-msingle-map-open-btn {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 8px;
  background: #064e3b;
  color: #ffffff;
  font-size: 12.2px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(6, 78, 59, 0.28);
}

.ak-msingle-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ak-msingle-tag-chip {
  padding: 5px 11px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.ak-msingle-tag-chip:hover {
  border-color: #075d3a;
  background: #ecfdf5;
  color: #064e3b;
}

.ak-msingle-report-card p {
  margin: 0 0 9px;
  font-size: 12.2px;
  color: #64748b;
}

.ak-msingle-report-btn {
  width: 100%;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 12.2px;
  font-weight: 700;
  cursor: pointer;
}

.ak-msingle-related-section {
  margin-top: 22px;
}

.ak-msingle-view-all-link {
  font-size: 13px;
  font-weight: 800;
  color: #064e3b;
  text-decoration: none;
}

.ak-msingle-missing-note {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR MARKETPLACE & SINGLE BUSINESS PAGE
   ========================================================================== */

@media (max-width: 1199px) {
  .ak-mkt-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ak-msingle-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 959px) {
  .ak-mkt-hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ak-mkt-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-mkt-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-msingle-grid {
    grid-template-columns: 1fr;
  }

  .ak-msingle-fac-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ak-mkt-dir-page,
  .ak-msingle-page {
    padding: 8px 0 calc(108px + env(safe-area-inset-bottom, 0px));
  }

  .ak-mkt-hero {
    padding: 16px 14px 14px;
    border-radius: 15px;
  }

  .ak-mkt-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .ak-mkt-add-shop-btn {
    width: 100%;
  }

  .ak-mkt-search-top {
    gap: 6px;
  }

  .ak-mkt-search-btn {
    min-width: 78px;
    padding: 0 12px;
  }

  .ak-mkt-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .ak-mkt-filter-actions {
    grid-column: 1 / -1;
  }

  .ak-mkt-reset-btn {
    width: 100%;
  }

  /* Horizontal Category Scroll on Mobile */
  .ak-mkt-cats-shell {
    padding: 8px 6px;
    gap: 4px;
  }

  .ak-mkt-cat-arrow {
    width: 26px;
    height: 26px;
    font-size: 17px;
  }

  .ak-mkt-cat-tab {
    min-width: 74px;
    padding: 6px 7px;
    gap: 4px;
  }

  .ak-mkt-cat-ico {
    width: 36px;
    height: 36px;
  }

  .ak-mkt-cat-lbl {
    font-size: 10.4px;
  }

  /* Mobile 2-Column Side-by-Side Shop Cards (Matches 19157.png Right Phone Mockup) */
  .ak-mkt-cards-grid,
  .ak-mkt-cards-grid.is-list-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ak-market-card {
    border-radius: 12px;
  }

  .ak-mcard-verified {
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    font-size: 9.2px;
  }

  .ak-mcard-heart-btn {
    top: 6px;
    right: 6px;
    width: 25px;
    height: 25px;
  }

  .ak-mcard-heart-btn svg {
    width: 13px;
    height: 13px;
  }

  .ak-mcard-body {
    padding: 9px;
  }

  .ak-mcard-title {
    font-size: clamp(12.6px, 3.6vw, 14.2px);
    margin-bottom: 3px;
  }

  .ak-mcard-rating {
    font-size: clamp(10.4px, 2.8vw, 11.4px);
    margin-bottom: 3px;
  }

  .ak-mcard-meta {
    font-size: clamp(10.2px, 2.8vw, 11.2px);
    margin-bottom: 3px;
    gap: 4px;
  }

  .ak-mcard-hours-full {
    display: none;
  }

  .ak-mcard-hours-short {
    display: inline;
  }

  .ak-mcard-tags {
    gap: 3px;
    margin: 2px 0 5px;
  }

  .ak-mcard-tag {
    font-size: clamp(9.2px, 2.5vw, 10px);
    padding: 1.5px 5px;
  }

  .ak-mcard-actions {
    grid-template-columns: 0.92fr 1.12fr;
    gap: 4px;
    padding-top: 4px;
  }

  .ak-mcard-btn {
    min-height: 28px;
    padding: 3px 4px;
    font-size: clamp(9.8px, 2.7vw, 11px);
    border-radius: 7px;
    gap: 3px;
  }

  .ak-mcard-btn svg {
    width: 10px;
    height: 10px;
  }

  /* Mobile Single Shop Page (Matches 19156.png Right Phone Mockup) */
  .ak-msingle-hero-card,
  .ak-msingle-card {
    padding: 12px;
    border-radius: 14px;
  }

  .ak-msingle-thumbs-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .ak-msingle-action-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .ak-msingle-btn {
    min-height: 37px;
    font-size: 11.8px;
    padding: 5px 8px;
  }

  .ak-msingle-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .ak-msingle-fac-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .ak-msingle-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ak-msingle-rating-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 359px) {
  .ak-mkt-cards-grid {
    gap: 6px;
  }

  .ak-mcard-body {
    padding: 7px;
  }

  .ak-mcard-btn svg {
    display: none;
  }

  .ak-msingle-fac-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   DOCTORS DIRECTORY (.ak-doc-*) & SINGLE DOCTOR PROFILE (.ak-dsingle-*)
   Matches Reference Images 19204.png & 19199.png (v3.7.0)
   ========================================================================== */

.ak-doc-dir-page,
.ak-doc-dir-page *,
.ak-doc-dir-page *::before,
.ak-doc-dir-page *::after,
.ak-dsingle-page,
.ak-dsingle-page *,
.ak-dsingle-page *::before,
.ak-dsingle-page *::after {
  box-sizing: border-box;
}

.ak-doc-dir-page,
.ak-dsingle-page {
  background: #f5f9f6;
  padding: 14px 0 calc(98px + env(safe-area-inset-bottom, 0px));
  overflow-x: clip;
}

.ak-doc-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: #64748b;
  margin-bottom: 11px;
}

.ak-doc-breadcrumb a {
  color: #475569;
  text-decoration: none;
  font-weight: 500;
}

.ak-doc-breadcrumb a:hover {
  color: #075d3a;
}

.ak-doc-bc-sep {
  color: #94a3b8;
}

.ak-doc-bc-current {
  color: #064e3b;
  font-weight: 700;
}

/* 1. Doctors Directory Hero Banner (Matches 19204.png) */
.ak-doc-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background-color: #ebf8f3;
  background-image:
    linear-gradient(92deg, rgba(235, 248, 243, 0.96) 0%, rgba(235, 248, 243, 0.90) 48%, rgba(235, 248, 243, 0.16) 100%),
    var(--ak-doc-hero-bg);
  background-size: cover;
  background-position: right center;
  border: 1px solid #d1e7db;
  box-shadow: 0 8px 24px rgba(7, 45, 29, 0.05);
  padding: 24px 26px 20px;
  margin-bottom: 14px;
}

.ak-doc-hero-copy {
  max-width: 640px;
}

.ak-doc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #065f46;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}

.ak-doc-hero-title {
  margin: 0 0 8px;
  font-size: clamp(24px, 3.8vw, 35px);
  font-weight: 800;
  line-height: 1.18;
  color: #064e3b;
}

.ak-doc-hero-desc {
  margin: 0 0 16px;
  max-width: 520px;
  font-size: clamp(13px, 1.8vw, 15px);
  line-height: 1.5;
  color: #1e293b;
  font-weight: 500;
}

.ak-doc-hero-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.ak-doc-trust-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #d9ebe2;
  min-width: 0;
}

.ak-doc-tp-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.ak-doc-tp-ico.tone-green { background: #dcfce7; color: #15803d; }
.ak-doc-tp-ico.tone-blue  { background: #dbeafe; color: #1d4ed8; }
.ak-doc-tp-ico.tone-rose  { background: #ffe4e6; color: #e11d48; }
.ak-doc-tp-ico.tone-amber { background: #fef3c7; color: #d97706; }

.ak-doc-tp-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ak-doc-tp-text strong {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-doc-tp-text small {
  font-size: 10.6px;
  color: #64748b;
  font-weight: 600;
}

/* 2. Doctors Search & 4 Filters Bar */
.ak-doc-search-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 3px 14px rgba(7, 45, 29, 0.035);
}

.ak-doc-search-top {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 10px;
}

.ak-doc-search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.ak-doc-search-ico {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  display: inline-flex;
  pointer-events: none;
}

.ak-doc-search-ico svg {
  width: 16px;
  height: 16px;
}

.ak-doc-search-input-wrap input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 38px;
  border-radius: 10px;
  border: 1px solid #d5e3dc;
  background: #f8fbf9;
  font-size: 13.5px;
  color: #0f172a;
  font-family: inherit;
}

.ak-doc-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 108px;
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 0;
  background: #064e3b;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}

.ak-doc-search-btn svg {
  width: 15px;
  height: 15px;
}

.ak-doc-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.ak-doc-select-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #d5e3dc;
  background: #ffffff;
}

.ak-doc-select-box label {
  font-size: 10.6px;
  font-weight: 700;
  color: #64748b;
}

.ak-doc-select-box select {
  border: 0;
  background: transparent;
  font-size: 12.6px;
  font-weight: 700;
  color: #0f172a;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
}

.ak-doc-select-box select:focus {
  outline: none;
}

/* 3. Horizontal Scrollable 12 Specialty Tabs (Matches 19204.png) */
.ak-doc-tabs-section {
  margin-bottom: 16px;
}

.ak-doc-tabs-shell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ak-doc-tabs-track {
  display: flex;
  align-items: stretch;
  gap: 9px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 0;
}

.ak-doc-tabs-track::-webkit-scrollbar {
  display: none;
}

.ak-doc-spec-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 82px;
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid #e2ece7;
  background: #ffffff;
  color: #1e293b;
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.ak-doc-spec-tab.is-active {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(6, 78, 59, 0.2);
}

.ak-doc-spec-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ak-doc-spec-tab.is-active .ak-doc-spec-ico {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.ak-doc-spec-ico.tone-green  { background: #dcfce7; color: #15803d; }
.ak-doc-spec-ico.tone-blue   { background: #dbeafe; color: #1d4ed8; }
.ak-doc-spec-ico.tone-rose   { background: #ffe4e6; color: #e11d48; }
.ak-doc-spec-ico.tone-sky    { background: #e0f2fe; color: #0284c7; }
.ak-doc-spec-ico.tone-pink   { background: #fce7f3; color: #db2777; }
.ak-doc-spec-ico.tone-orange { background: #ffedd5; color: #ea580c; }
.ak-doc-spec-ico.tone-teal   { background: #ccfbf1; color: #0f766e; }
.ak-doc-spec-ico.tone-indigo { background: #e0e7ff; color: #4338ca; }
.ak-doc-spec-ico.tone-amber  { background: #fef3c7; color: #d97706; }
.ak-doc-spec-ico.tone-purple { background: #f3e8ff; color: #7e22ce; }

.ak-doc-spec-lbl {
  font-size: 11.4px;
  font-weight: 700;
  white-space: nowrap;
}

.ak-doc-tab-next {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d5e3dc;
  background: #ffffff;
  color: #064e3b;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 4. Doctor Cards Grid (3-Col Desktop / 2-Col Mobile — Matches 19204.png) */
.ak-doc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.ak-doc-results-heading {
  margin: 0;
  font-size: clamp(17px, 2.2vw, 20.5px);
  font-weight: 800;
  color: #0f172a;
}

.ak-doc-count-pill {
  font-size: 14px;
  color: #075d3a;
  font-weight: 700;
}

.ak-doc-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ak-doc-sort-select {
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #d5e3dc;
  background: #ffffff;
  font-size: 12.2px;
  font-weight: 700;
  color: #1e293b;
}

.ak-doc-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.ak-doc-cards-grid.is-list-view {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ak-doctor-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 15px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 12px rgba(7, 45, 29, 0.04);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  min-width: 0;
}

.ak-doctor-card:hover {
  border-color: #b7d7c8;
  box-shadow: 0 8px 22px rgba(7, 45, 29, 0.08);
  transform: translateY(-2px);
}

.ak-dcard-top {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 9px;
}

.ak-dcard-avatar-link {
  position: relative;
  width: 82px;
  height: 90px;
  border-radius: 12px;
  overflow: hidden;
  background: #e6f4ee;
  flex-shrink: 0;
  display: block;
}

.ak-dcard-photo,
.ak-dcard-avatar-link .ak-doc-avatar-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-dcard-verified-mobile {
  display: none;
}

.ak-dcard-head-info {
  flex: 1 1 auto;
  min-width: 0;
}

.ak-dcard-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.ak-dcard-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  padding: 2.5px 9px;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 10.6px;
  font-weight: 800;
}

.ak-dcard-heart-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #e11d48;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.ak-dcard-heart-btn svg {
  width: 14px;
  height: 14px;
}

.ak-dcard-name {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
}

.ak-dcard-name a {
  color: inherit;
  text-decoration: none;
}

.ak-dcard-name a:hover {
  color: #075d3a;
}

.ak-dcard-specialty {
  margin: 0 0 3px;
  font-size: 12.4px;
  font-weight: 700;
  color: #065f46;
}

.ak-dcard-qual {
  margin: 0;
  font-size: 11.4px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ak-dcard-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  margin-bottom: 10px;
}

.ak-dcard-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.8px;
  color: #334155;
  min-width: 0;
}

.ak-dcard-meta span:not(.ak-dcard-ico),
.ak-dcard-meta strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-dcard-ico {
  font-size: 12px;
  color: #075d3a;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ak-dcard-ico svg {
  width: 13px;
  height: 13px;
}

.ak-dcard-actions {
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  gap: 7px;
  margin-top: auto;
}

.ak-dcard-actions.no-call {
  grid-template-columns: 1fr;
}

.ak-dcard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12.2px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.ak-dcard-btn svg {
  width: 13px;
  height: 13px;
}

.ak-dcard-btn--call {
  background: #ffffff;
  border: 1px solid #075d3a;
  color: #064e3b;
}

.ak-dcard-btn--call:hover {
  background: #ecfdf5;
}

.ak-dcard-btn--details {
  background: #064e3b;
  border: 1px solid #064e3b;
  color: #ffffff;
}

.ak-dcard-btn--details:hover {
  background: #04392b;
  color: #ffffff;
}

.ak-dcard-call-short,
.ak-dcard-det-short {
  display: none;
}

/* ==========================================================================
   SINGLE DOCTOR PROFILE PAGE (.ak-dsingle-*) — Matches 19199.png
   ========================================================================== */

.ak-dsingle-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ak-dsingle-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d5e3dc;
  color: #0f172a;
  font-size: 12.6px;
  font-weight: 700;
  text-decoration: none;
}

.ak-dsingle-back-btn:hover {
  border-color: #075d3a;
  color: #064e3b;
}

.ak-dsingle-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ak-dsingle-util-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid #d5e3dc;
  background: #ffffff;
  color: #1e293b;
  font-size: 12.2px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.ak-dsingle-util-btn.is-save svg {
  width: 14px;
  height: 14px;
  color: #e11d48;
}

/* 1. Doctor Profile Header Card */
.ak-dsingle-header-card {
  background: #ffffff;
  border: 1px solid #dce9e2;
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 6px 22px rgba(7, 45, 29, 0.045);
}

.ak-dsingle-header-grid {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.ak-dsingle-portrait-box {
  width: 205px;
  height: 228px;
  border-radius: 16px;
  overflow: hidden;
  background: #e6f4ee;
  border: 1px solid #d1e7db;
}

.ak-dsingle-portrait-img,
.ak-dsingle-portrait-box .ak-doc-avatar-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-dsingle-identity-col {
  min-width: 0;
}

.ak-dsingle-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ak-dsingle-name {
  margin: 0;
  font-size: clamp(22px, 3vw, 29px);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.ak-dsingle-verified-tick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-dsingle-degrees {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
}

.ak-dsingle-specialty {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: #064e3b;
}

.ak-dsingle-badge-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 13px;
}

.ak-dsingle-spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #065f46;
  color: #ffffff;
  font-size: 11.8px;
  font-weight: 800;
}

.ak-dsingle-bmdc-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 11.5px;
  font-weight: 700;
}

.ak-dsingle-summary-strip {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 1fr;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 13px;
  background: #f8fbf9;
  border: 1px solid #e2ece7;
  margin-bottom: 14px;
}

.ak-dsingle-sum-box {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.ak-dsingle-sum-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.ak-dsingle-sum-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ak-dsingle-sum-copy small {
  font-size: 10.8px;
  color: #64748b;
  font-weight: 700;
}

.ak-dsingle-sum-copy strong {
  font-size: 12.8px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

.ak-dsingle-sum-copy span {
  font-size: 11.4px;
  color: #475569;
  font-weight: 600;
}

.ak-dsingle-primary-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.ak-dsingle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.ak-dsingle-btn svg {
  width: 15px;
  height: 15px;
}

.ak-dsingle-btn--call {
  background: #064e3b;
  border: 1px solid #064e3b;
  color: #ffffff;
}

.ak-dsingle-btn--call:hover {
  background: #04392b;
  color: #ffffff;
}

.ak-dsingle-btn--wa {
  background: #ffffff;
  border: 1px solid #16a34a;
  color: #15803d;
}

.ak-dsingle-btn--wa:hover {
  background: #ecfdf5;
}

.ak-dsingle-btn--serial {
  background: #065f46;
  border: 1px solid #065f46;
  color: #ffffff;
}

.ak-dsingle-btn--serial:hover {
  background: #064e3b;
  color: #ffffff;
}

.ak-dsingle-btn--map {
  background: #ffffff;
  border: 1px solid #075d3a;
  color: #064e3b;
}

.ak-dsingle-btn--map:hover {
  background: #ecfdf5;
}

/* 2. Section Navigation Bar */
.ak-dsingle-subnav {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 13px;
  padding: 7px 9px;
  margin-bottom: 14px;
}

.ak-dsingle-subnav::-webkit-scrollbar {
  display: none;
}

.ak-dsingle-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 9px;
  color: #334155;
  font-size: 12.4px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.ak-dsingle-nav-pill:hover {
  background: #f0fdf4;
  color: #064e3b;
}

.ak-dsingle-nav-pill.is-active {
  background: #064e3b;
  color: #ffffff;
}

/* 3. Desktop 2-Column Content Layout */
.ak-dsingle-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
}

.ak-dsingle-col-main,
.ak-dsingle-col-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ak-dsingle-card {
  background: #ffffff;
  border: 1px solid #e2ece7;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 3px 12px rgba(7, 45, 29, 0.035);
}

.ak-dsingle-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ak-dsingle-sec-title {
  margin: 0 0 11px;
  font-size: 16.5px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ak-dsingle-sec-head .ak-dsingle-sec-title {
  margin-bottom: 0;
}

.ak-dsingle-role-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
}

.ak-dsingle-role-tag.is-specialist {
  background: #dcfce7;
  color: #15803d;
}

.ak-dsingle-role-tag.is-general {
  background: #e0f2fe;
  color: #0369a1;
}

.ak-dsingle-bio-text p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.65;
  color: #334155;
}

.ak-dsingle-subspec-row {
  padding: 8px 11px;
  border-radius: 9px;
  background: #f8fbf9;
  border: 1px solid #e2ece7;
  font-size: 12.6px;
  color: #334155;
  margin-bottom: 11px;
}

.ak-dsingle-sub-title {
  margin: 10px 0 8px;
  font-size: 13.6px;
  font-weight: 800;
  color: #0f172a;
}

.ak-dsingle-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.ak-dsingle-cond-chip {
  padding: 5px 11px;
  border-radius: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  font-size: 12.2px;
  font-weight: 700;
}

.ak-dsingle-check-list,
.ak-dsingle-icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ak-dsingle-check-list li,
.ak-dsingle-icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.2px;
  color: #334155;
  line-height: 1.48;
}

.ak-dsingle-chk {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.ak-dsingle-patient-group-box {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  font-size: 12.5px;
  color: #064e3b;
}

/* Education & Experience Timeline */
.ak-dsingle-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 6px;
}

.ak-dsingle-tl-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.ak-dsingle-tl-dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #dcfce7;
  color: #065f46;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-dsingle-tl-body {
  flex: 1 1 auto;
  min-width: 0;
}

.ak-dsingle-tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-dsingle-tl-head strong {
  font-size: 13.8px;
  font-weight: 800;
  color: #0f172a;
}

.ak-dsingle-tl-year {
  font-size: 11.4px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}

.ak-dsingle-tl-inst {
  margin: 2px 0 0;
  font-size: 12.8px;
  color: #334155;
  font-weight: 600;
}

.ak-dsingle-tl-note {
  display: block;
  margin-top: 2px;
  font-size: 11.8px;
  color: #64748b;
}

.ak-dsingle-reg-banner {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fbf9;
  border: 1px solid #d5e3dc;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.6px;
  color: #1e293b;
}

/* Publications */
.ak-dsingle-pubs-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ak-dsingle-pub-item {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2ece7;
  background: #f8fbf9;
}

.ak-dsingle-pub-item h4 {
  margin: 0 0 3px;
  font-size: 13.4px;
  color: #0f172a;
}

.ak-dsingle-pub-item p {
  margin: 0 0 5px;
  font-size: 12px;
  color: #475569;
}

.ak-dsingle-pub-link {
  font-size: 12px;
  font-weight: 700;
  color: #075d3a;
  text-decoration: none;
}

/* Right Column: বর্তমান কর্মস্থল (Highest Priority) */
.ak-dsingle-wp-stack {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ak-dsingle-wp-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  padding: 11px;
  border-radius: 12px;
  background: #f8fbf9;
  border: 1px solid #dcebe3;
  align-items: center;
}

.ak-dsingle-wp-thumb {
  width: 112px;
  height: 86px;
  border-radius: 9px;
  overflow: hidden;
}

.ak-dsingle-wp-thumb .ak-doc-gal-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ak-dsingle-wp-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.ak-dsingle-wp-name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
}

.ak-dsingle-wp-name a {
  color: inherit;
  text-decoration: none;
}

.ak-dsingle-wp-name a:hover {
  color: #075d3a;
  text-decoration: underline;
}

.ak-dsingle-wp-badge {
  padding: 2.5px 9px;
  border-radius: 999px;
  font-size: 10.8px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.ak-dsingle-wp-badge.is-active {
  background: #16a34a;
  color: #ffffff;
}

.ak-dsingle-wp-badge.is-past {
  background: #e2e8f0;
  color: #475569;
}

.ak-dsingle-wp-loc {
  margin: 0 0 5px;
  font-size: 11.8px;
  color: #64748b;
}

.ak-dsingle-wp-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.2px;
  color: #334155;
}

.ak-dsingle-wp-ext {
  display: inline-block;
  margin-top: 5px;
  font-size: 11.8px;
  font-weight: 700;
  color: #075d3a;
  text-decoration: none;
}

/* Multi-Chamber Cards (Matches 19199.png Right Middle) */
.ak-dsingle-chambers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}

.ak-dsingle-chambers-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ak-dsingle-chamber-box {
  border: 1px solid #d5e3dc;
  border-radius: 13px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.ak-dsingle-ch-tab-head {
  padding: 8px 12px;
  background: #f1f5f9;
  color: #1e293b;
  font-size: 12.6px;
  font-weight: 800;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
}

.ak-dsingle-chamber-box.is-primary .ak-dsingle-ch-tab-head {
  background: #064e3b;
  color: #ffffff;
  border-bottom-color: #064e3b;
}

.ak-dsingle-ch-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 auto;
}

.ak-dsingle-ch-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.4px;
  color: #334155;
  line-height: 1.38;
}

.ak-dsingle-ch-row.is-title strong {
  display: block;
  font-size: 13.2px;
  color: #0f172a;
}

.ak-dsingle-ch-row.is-title small {
  color: #64748b;
  font-size: 11.5px;
}

.ak-dsingle-ch-phone-num {
  font-size: 13.5px;
  color: #064e3b;
}

.ak-dsingle-copy-inline {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 11px;
  cursor: pointer;
}

.ak-dsingle-ch-note {
  margin: 2px 0;
  padding: 6px 8px;
  border-radius: 7px;
  background: #f8fbf9;
  font-size: 11.4px;
  color: #475569;
}

.ak-dsingle-ch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}

.ak-dsingle-ch-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.ak-dsingle-ch-btn.is-serial {
  background: #064e3b;
  color: #ffffff;
}

.ak-dsingle-ch-btn.is-map {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
}

.ak-dsingle-ch-btn.is-wa {
  width: 100%;
  background: #ecfdf5;
  border: 1px solid #86efac;
  color: #15803d;
}

/* Contact & Location Row */
.ak-dsingle-contact-map-row {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 12px;
}

.ak-dsingle-contact-list {
  list-style: none;
  margin: 0 0 11px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ak-dsingle-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.6px;
  color: #334155;
  word-break: break-word;
}

.ak-dsingle-contact-list a {
  color: #064e3b;
  font-weight: 700;
  text-decoration: none;
}

.ak-dsingle-contact-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-dsingle-cbtn {
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 11.6px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  background: #f8fafc;
}

.ak-dsingle-cbtn.is-call {
  background: #064e3b;
  border-color: #064e3b;
  color: #ffffff;
}

.ak-dsingle-cbtn.is-wa {
  background: #ecfdf5;
  border-color: #16a34a;
  color: #15803d;
}

.ak-dsingle-map-preview {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: center;
}

.ak-dsingle-map-preview svg {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #d5e3dc;
}

.ak-dsingle-map-caption {
  margin: 0;
  font-size: 11.6px;
  font-weight: 700;
  color: #334155;
}

.ak-dsingle-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 8px;
  background: #064e3b;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

/* Doctor Photos Gallery */
.ak-dsingle-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.ak-dsingle-gal-item {
  margin: 0;
  border: 1px solid #e2ece7;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fbf9;
}

.ak-dsingle-gal-thumb {
  aspect-ratio: 16 / 10;
}

.ak-dsingle-gal-thumb .ak-doc-gal-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ak-dsingle-gal-item figcaption {
  padding: 5px 7px;
  font-size: 10.8px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile Sticky Bottom Bar (Hidden on Desktop) */
.ak-dsingle-mobile-sticky-bar {
  display: none;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR DOCTORS DIRECTORY & SINGLE DOCTOR PAGE
   ========================================================================== */

@media (max-width: 1140px) {
  .ak-doc-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-dsingle-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .ak-doc-hero-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-doc-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-dsingle-header-grid {
    grid-template-columns: 1fr;
  }

  .ak-dsingle-summary-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ak-doc-dir-page,
  .ak-dsingle-page {
    padding: 8px 0 calc(136px + env(safe-area-inset-bottom, 0px));
  }

  .ak-doc-hero {
    padding: 16px 14px 14px;
    border-radius: 15px;
  }

  .ak-doc-search-top {
    gap: 6px;
  }

  .ak-doc-search-btn {
    min-width: 78px;
    padding: 0 12px;
  }

  .ak-doc-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  /* Mobile 2-Column Side-by-Side Doctor Cards (Matches 19204.png Right Phone Mockup) */
  .ak-doc-cards-grid,
  .ak-doc-cards-grid.is-list-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ak-doctor-card {
    padding: 9px;
    border-radius: 12px;
  }

  .ak-dcard-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    margin-bottom: 6px;
    position: relative;
  }

  .ak-dcard-avatar-link {
    width: 76px;
    height: 82px;
    border-radius: 11px;
  }

  .ak-dcard-verified-pill {
    display: none;
  }

  .ak-dcard-verified-mobile {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #065f46;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    padding: 1.5px 7px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .ak-dcard-heart-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 25px;
  }

  .ak-dcard-name {
    font-size: clamp(12.6px, 3.6vw, 14.2px);
  }

  .ak-dcard-specialty {
    font-size: clamp(10.5px, 3vw, 11.6px);
  }

  .ak-dcard-qual {
    justify-content: center;
    font-size: 10px;
  }

  .ak-dcard-meta {
    font-size: clamp(10px, 2.8vw, 11px);
    gap: 4px;
  }

  .ak-dcard-actions {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4px;
  }

  .ak-dcard-btn {
    min-height: 28px;
    padding: 3px 5px;
    font-size: clamp(10px, 2.8vw, 11px);
    border-radius: 7px;
  }

  .ak-dcard-call-full,
  .ak-dcard-det-full {
    display: none;
  }

  .ak-dcard-call-short,
  .ak-dcard-det-short {
    display: inline;
  }

  /* Mobile Single Doctor Profile Layout (Matches 19199.png Right Phone Mockup) */
  .ak-dsingle-header-card,
  .ak-dsingle-card {
    padding: 13px;
    border-radius: 14px;
  }

  .ak-dsingle-header-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ak-dsingle-portrait-box {
    width: 112px;
    height: 124px;
    border-radius: 13px;
  }

  .ak-dsingle-primary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .ak-dsingle-wp-item {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 9px;
  }

  .ak-dsingle-wp-thumb {
    width: 82px;
    height: 68px;
  }

  .ak-dsingle-chambers-grid,
  .ak-dsingle-chambers-grid.cols-2,
  .ak-dsingle-contact-map-row {
    grid-template-columns: 1fr;
  }

  .ak-dsingle-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Compact Sticky Contact Bar above Mobile Bottom Navigation */
  .ak-dsingle-mobile-sticky-bar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 88;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 7px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #cbd5e1;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  }

  .ak-dsingle-sticky-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    border-radius: 9px;
    font-size: 12.6px;
    font-weight: 800;
    text-decoration: none;
  }

  .ak-dsingle-sticky-btn.is-call {
    background: #064e3b;
    color: #ffffff;
  }

  .ak-dsingle-sticky-btn.is-wa {
    background: #ecfdf5;
    border: 1px solid #16a34a;
    color: #15803d;
  }
}

@media (max-width: 359px) {
  .ak-doc-cards-grid {
    gap: 6px;
  }

  .ak-doctor-card {
    padding: 7px;
  }
}


/* ==========================================================================
   GLOBAL PROFESSIONAL BACK NAVIGATION SYSTEM (v3.8.0)
   Consistent top-left Back button directly below header across all internal pages
   ========================================================================== */
.ak-global-back-bar {
  position: relative;
  z-index: 15;
  width: 100%;
  background: #f6faf8;
  border-bottom: 1px solid rgba(7, 93, 58, 0.1);
  padding: 8px 0;
  overflow-x: clip;
}

.ak-global-back-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.ak-global-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 36px;
  padding: 6px 14px 6px 11px;
  background: #ffffff;
  color: #075d3a;
  border: 1px solid rgba(7, 93, 58, 0.24);
  border-radius: 9px;
  font-family: inherit;
  font-size: 13.8px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  box-shadow: 0 1px 3px rgba(7, 93, 58, 0.06);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ak-global-back-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: #075d3a;
  transition: transform 0.18s ease;
}

.ak-global-back-icon svg,
.ak-global-back-svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.25;
  display: block;
}

.ak-global-back-label {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.ak-global-back-btn:hover {
  background: #eaf5ef;
  border-color: #075d3a;
  color: #05472c;
  box-shadow: 0 3px 9px rgba(7, 93, 58, 0.12);
  text-decoration: none;
}

.ak-global-back-btn:hover .ak-global-back-icon {
  transform: translateX(-2.5px);
}

.ak-global-back-btn:focus-visible {
  outline: 2.5px solid #075d3a;
  outline-offset: 2px;
  background: #eaf5ef;
  border-color: #075d3a;
}

.ak-global-back-btn:active {
  transform: translateY(0.5px);
  background: #def0e6;
}

body.ak-easy-mode .ak-global-back-btn {
  font-size: 15px;
  min-height: 40px;
  padding: 7px 16px 7px 13px;
  border-width: 1.5px;
  border-color: #075d3a;
}

/* Hide any legacy breadcrumb bars across all templates (Global Back Bar replaces them) */
.ak-breadcrumb,
.ak-hosp-breadcrumb,
.ak-hdet-breadcrumb,
.ak-amb-breadcrumb,
.ak-pol-breadcrumb,
.ak-psingle-breadcrumb,
.ak-edu-breadcrumb,
.ak-esingle-breadcrumb,
.ak-tuition-breadcrumb,
.ak-tsingle-breadcrumb,
.ak-job-breadcrumb,
.ak-jsingle-breadcrumb,
.ak-mkt-breadcrumb,
.ak-doc-breadcrumb,
.ak-echub-breadcrumb {
  display: none !important;
}

/* Align utility actions in single doctor topbar cleanly to the right */
.ak-dsingle-topbar {
  justify-content: flex-end !important;
}

@media (max-width: 767px) {
  .ak-global-back-bar {
    padding: 6px 0;
  }

  .ak-global-back-btn {
    min-height: 34px;
    padding: 5px 12px 5px 9px;
    font-size: 13px;
    gap: 6px;
    border-radius: 8px;
  }

  .ak-global-back-icon {
    width: 15px;
    height: 15px;
  }

  .ak-global-back-icon svg,
  .ak-global-back-svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 359px) {
  .ak-global-back-bar {
    padding: 5px 0;
  }

  .ak-global-back-btn {
    min-height: 32px;
    padding: 4px 10px 4px 8px;
    font-size: 12.4px;
    gap: 5px;
  }
}

@media print {
  .ak-global-back-bar {
    display: none !important;
  }
}


/* ==========================================================================
   EMERGENCY NUMBERS & CITIZEN SERVICES PLATFORM (v3.9.0)
   Matches Reference Image 1 (Mobile - 19233.png) & Image 2 (Desktop - 19234.png)
   ========================================================================== */
body.ak-ec-modal-open {
  overflow: hidden;
}

.ak-echub-page {
  background: #f5f8f6;
  color: #0f291e;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  overflow-x: clip;
}

/* 1. Hero Banner Section */
.ak-echub-hero-section {
  position: relative;
  background-color: #e8f4ee;
  background-image: var(--ak-echub-bg);
  background-position: right top;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 18px 0 26px;
  border-bottom: 1px solid #d5e6dc;
  overflow: hidden;
}

.ak-echub-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(240, 249, 244, 0.97) 0%, rgba(240, 249, 244, 0.90) 48%, rgba(240, 249, 244, 0.45) 100%);
  pointer-events: none;
}

.ak-echub-hero-container {
  position: relative;
  z-index: 2;
}

.ak-echub-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #476758;
  margin-bottom: 10px;
}

.ak-echub-breadcrumb a {
  color: #075d3a;
  text-decoration: none;
  font-weight: 600;
}

.ak-echub-breadcrumb a:hover {
  text-decoration: underline;
}

.ak-echub-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.ak-echub-hero-copy {
  max-width: 680px;
}

.ak-echub-title {
  margin: 0 0 8px;
  font-size: clamp(1.65rem, 2.7vw, 2.35rem);
  font-weight: 800;
  color: #064e3b;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ak-echub-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #1e3a2f;
  font-weight: 500;
}

.ak-echub-civic-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 14px 20px;
  background: linear-gradient(145deg, #075d3a 0%, #0d7a4d 100%);
  color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(7, 93, 58, 0.22);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  white-space: nowrap;
}

.ak-echub-mobile-art {
  display: none;
}

.ak-echub-trio-mobile-head {
  display: none;
}

/* 2. Top 3 Priority Emergency Cards (Blood, Ambulance, Police) */
.ak-echub-top-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.ak-echub-prio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 156px;
  padding: 18px 20px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  user-select: none;
}

.ak-prio-label-mobile {
  display: none;
}

.ak-prio-label-desktop {
  display: inline;
}

.ak-echub-prio-card.is-blood {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  border: 1.5px solid #fecdd3;
  box-shadow: 0 8px 22px rgba(225, 29, 36, 0.08);
}

.ak-echub-prio-card.is-ambulance {
  background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
  border: 1.5px solid #fecaca;
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.08);
}

.ak-echub-prio-card.is-police {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1.5px solid #bfdbfe;
  box-shadow: 0 8px 22px rgba(29, 78, 216, 0.08);
}

.ak-echub-prio-card:hover {
  transform: translateY(-3px);
}

.ak-echub-prio-card.is-blood:hover {
  border-color: #f43f5e;
  box-shadow: 0 12px 28px rgba(225, 29, 36, 0.15);
}

.ak-echub-prio-card.is-ambulance:hover {
  border-color: #ef4444;
  box-shadow: 0 12px 28px rgba(239, 68, 68, 0.15);
}

.ak-echub-prio-card.is-police:hover {
  border-color: #3b82f6;
  box-shadow: 0 12px 28px rgba(29, 78, 216, 0.15);
}

.ak-echub-prio-card:focus-visible {
  outline: 3px solid #075d3a;
  outline-offset: 2px;
}

.ak-echub-prio-decor {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 96px;
  height: 86px;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

.ak-echub-prio-decor svg {
  width: 100%;
  height: 100%;
}

.ak-echub-prio-main {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-right: 68px;
}

.ak-echub-prio-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ak-echub-prio-icon-wrap.is-blood {
  background: #e11d24;
  color: #ffffff;
}

.ak-echub-prio-icon-wrap.is-ambulance {
  background: #fee2e2;
  color: #dc2626;
  border: 1.5px solid #fca5a5;
}

.ak-echub-prio-icon-wrap.is-police {
  background: #1d4ed8;
  color: #ffffff;
}

.ak-echub-prio-copy {
  min-width: 0;
}

.ak-echub-prio-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
}

.ak-echub-prio-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #334155;
  font-weight: 500;
}

.ak-echub-prio-footer {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  padding-left: 64px;
}

.ak-echub-prio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 18px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
  white-space: nowrap;
}

.ak-echub-prio-btn.is-blood {
  background: linear-gradient(135deg, #e11d24 0%, #be123c 100%);
  box-shadow: 0 4px 12px rgba(225, 29, 36, 0.28);
}

.ak-echub-prio-btn.is-ambulance {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28);
}

.ak-echub-prio-btn.is-police {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.28);
}

.ak-echub-prio-btn:hover {
  filter: brightness(1.06);
}

.ak-echub-prio-btn-ico {
  display: none;
}

/* 3. Unified Search & Category Filter Card */
.ak-echub-search-card {
  background: #ffffff;
  border: 1px solid #d8e6df;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 6px 20px rgba(7, 93, 58, 0.06);
}

.ak-echub-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ak-echub-search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.ak-echub-search-icon {
  position: absolute;
  left: 14px;
  color: #64748b;
  display: inline-flex;
  pointer-events: none;
}

.ak-echub-search-icon svg {
  width: 18px;
  height: 18px;
}

.ak-echub-search-input {
  width: 100%;
  min-height: 44px;
  padding: 8px 38px 8px 42px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  font-family: inherit;
  font-size: 14px;
  color: #0f172a;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.ak-echub-search-input:focus {
  outline: none;
  border-color: #075d3a;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(7, 93, 58, 0.12);
}

.ak-echub-search-clear {
  position: absolute;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #334155;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ak-echub-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: none;
  background: #075d3a;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s ease;
}

.ak-echub-search-submit:hover {
  background: #05472c;
}

.ak-echub-search-submit svg {
  width: 16px;
  height: 16px;
}

.ak-echub-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.ak-echub-filter-pills::-webkit-scrollbar {
  display: none;
}

.ak-echub-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #dce6e0;
  background: #f8fbf9;
  color: #1e3a2f;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.16s ease;
}

.ak-echub-pill:hover {
  border-color: #075d3a;
  background: #eef7f2;
}

.ak-echub-pill.is-active {
  background: #075d3a;
  border-color: #075d3a;
  color: #ffffff;
}

.ak-echub-pill.is-reset {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

/* 4. Main Content Layout & Helplines Grid */
.ak-echub-body {
  padding-top: 24px;
}

.ak-echub-filter-bar-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #eaf5ef;
  border: 1px solid #b7dec9;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 700;
  color: #064e3b;
}

.ak-echub-inline-reset {
  border: 1px solid #075d3a;
  background: #ffffff;
  color: #075d3a;
  border-radius: 999px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ak-echub-empty-state {
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 36px 20px;
  text-align: center;
  margin-bottom: 24px;
}

.ak-echub-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.ak-echub-empty-state h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #0f172a;
}

.ak-echub-empty-state p {
  margin: 0 0 16px;
  font-size: 14px;
  color: #475569;
}

.ak-echub-empty-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ak-echub-reset-btn {
  min-height: 38px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #075d3a;
  background: #075d3a;
  color: #ffffff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.ak-echub-reset-btn.is-outline {
  background: #ffffff;
  color: #075d3a;
}

.ak-echub-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: start;
  margin-bottom: 30px;
}

.ak-echub-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ak-echub-sec-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ak-echub-sec-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #075d3a;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-echub-sec-icon svg {
  width: 20px;
  height: 20px;
}

.ak-echub-sec-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

.ak-echub-sec-sub {
  margin: 2px 0 0;
  font-size: 13.2px;
  color: #475569;
}

.ak-echub-see-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid #cce3d6;
  background: #eaf5ef;
  color: #075d3a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.16s ease;
}

.ak-echub-see-all-btn:hover {
  background: #d8eee2;
}

.ak-echub-helplines-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ak-echub-hl-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2ebe6;
  border-radius: 14px;
  padding: 14px 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ak-echub-hl-card:hover {
  transform: translateY(-2px);
  border-color: #075d3a;
  box-shadow: 0 8px 20px rgba(7, 93, 58, 0.1);
}

.ak-echub-hl-card:focus-visible {
  outline: 2.5px solid #075d3a;
  outline-offset: 2px;
}

.ak-echub-hl-icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-echub-hl-icon svg {
  width: 26px;
  height: 26px;
}

.ak-echub-hl-icon.tone-red { background: #ffe4e6; color: #e11d24; }
.ak-echub-hl-icon.tone-orange { background: #ffedd5; color: #ea580c; }
.ak-echub-hl-icon.tone-blue { background: #dbeafe; color: #1d4ed8; }
.ak-echub-hl-icon.tone-pink { background: #fce7f3; color: #db2777; }
.ak-echub-hl-icon.tone-green { background: #dcfce7; color: #075d3a; }

.ak-echub-hl-body {
  flex: 1;
  min-width: 0;
}

.ak-echub-hl-title {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
}

.ak-echub-hl-num {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.ak-echub-hl-num.tone-red { color: #e11d24; }
.ak-echub-hl-num.tone-orange { color: #dc2626; }
.ak-echub-hl-num.tone-blue { color: #1d4ed8; }
.ak-echub-hl-num.tone-pink { color: #e11d24; }
.ak-echub-hl-num.tone-green { color: #075d3a; }

.ak-echub-hl-desc {
  margin: 4px 0 0;
  font-size: 11.8px;
  line-height: 1.35;
  color: #64748b;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ak-echub-hl-chevron {
  font-size: 22px;
  font-weight: 700;
  color: #64748b;
  flex-shrink: 0;
}

/* 5. Right Sidebar Widgets */
.ak-echub-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ak-echub-side-card {
  background: #ffffff;
  border: 1px solid #dce8e1;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.ak-echub-side-card.is-local-contact {
  background: linear-gradient(180deg, #eff8f3 0%, #ffffff 100%);
}

.ak-echub-side-card.is-tips {
  background: linear-gradient(180deg, #fefce8 0%, #fffbeb 100%);
  border-color: #fde68a;
}

.ak-echub-side-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ak-echub-side-ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.ak-echub-side-ico.is-green {
  background: #dcfce7;
  color: #075d3a;
}

.ak-echub-side-ico.is-amber {
  background: #fef3c7;
}

.ak-echub-side-head h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: #0f172a;
}

.ak-echub-side-head p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #475569;
}

.ak-echub-upazila-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.ak-echub-select-pin {
  position: absolute;
  left: 12px;
  pointer-events: none;
  font-size: 14px;
}

.ak-echub-upazila-select {
  width: 100%;
  min-height: 40px;
  padding: 6px 12px 6px 34px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-family: inherit;
  font-size: 13.2px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
}

.ak-echub-upazila-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ak-echub-ucontact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.ak-echub-ucontact-info {
  min-width: 0;
}

.ak-echub-ucontact-role {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #075d3a;
}

.ak-echub-ucontact-info strong {
  display: block;
  font-size: 12.6px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-echub-ucontact-call {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eaf5ef;
  color: #075d3a;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.ak-echub-ucontact-call:hover {
  background: #075d3a;
  color: #ffffff;
}

.ak-echub-tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ak-echub-tips-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

.ak-echub-tip-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #16a34a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 6. Citizen Services Section */
.ak-echub-citizen-section {
  margin-top: 8px;
}

.ak-echub-citizen-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.ak-echub-cit-card {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #ffffff;
  border: 1px solid #e2ebe6;
  border-radius: 14px;
  padding: 14px 12px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ak-echub-cit-card:hover {
  transform: translateY(-2px);
  border-color: #075d3a;
  box-shadow: 0 8px 18px rgba(7, 93, 58, 0.1);
}

.ak-echub-cit-card:focus-visible {
  outline: 2.5px solid #075d3a;
  outline-offset: 2px;
}

.ak-echub-cit-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-echub-cit-icon svg {
  width: 20px;
  height: 20px;
}

.ak-echub-cit-icon.tone-blue { background: #dbeafe; color: #1d4ed8; }
.ak-echub-cit-icon.tone-pink { background: #fce7f3; color: #db2777; }
.ak-echub-cit-icon.tone-orange { background: #ffedd5; color: #ea580c; }
.ak-echub-cit-icon.tone-green { background: #dcfce7; color: #075d3a; }

.ak-echub-cit-body {
  min-width: 0;
}

.ak-echub-cit-title {
  margin: 0 0 2px;
  font-size: 13.8px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

.ak-echub-cit-count {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

/* 7. Interactive Modals (Blood, Ambulance, Police, Detail) */
.ak-ec-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ak-ec-modal-backdrop[hidden] {
  display: none !important;
}

.ak-ec-modal-dialog {
  width: 100%;
  max-width: 780px;
  max-height: 88vh;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: akEcModalIn 0.2s ease-out;
}

@keyframes akEcModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ak-ec-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.ak-ec-modal-header.is-blood { background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%); }
.ak-ec-modal-header.is-ambulance { background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%); }
.ak-ec-modal-header.is-police { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }
.ak-ec-modal-header.is-detail { background: linear-gradient(135deg, #eaf5ef 0%, #dcfce7 100%); }

.ak-ec-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ak-ec-modal-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ak-ec-modal-title-wrap h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

.ak-ec-modal-title-wrap p {
  margin: 2px 0 0;
  font-size: 12.8px;
  color: #475569;
}

.ak-ec-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #ffffff;
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-ec-modal-close:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

.ak-ec-pol-emergency-strip {
  padding: 12px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ak-ec-pol-999-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 12px;
  padding: 10px 14px;
}

.ak-ec-pol-999-pill {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #be123c;
}

.ak-ec-pol-999-box strong {
  font-size: 15px;
  color: #881337;
}

.ak-ec-pol-ctrl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ak-ec-ctrl-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.ak-ec-modal-filters {
  padding: 12px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ak-ec-bgroup-row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ak-ec-bgroup-pill {
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #9f1239;
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ak-ec-bgroup-pill.is-active {
  background: #e11d24;
  border-color: #e11d24;
  color: #ffffff;
}

.ak-ec-filter-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.ak-ec-filter-select,
.ak-ec-filter-search {
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  font-family: inherit;
  font-size: 13px;
  color: #0f172a;
}

.ak-ec-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.ak-ec-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

.ak-ec-blood-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e11d24;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ak-ec-blood-badge.is-all {
  background: #075d3a;
  font-size: 11.5px;
  text-align: center;
  padding: 4px;
  line-height: 1.15;
}

.ak-ec-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.ak-ec-item-info {
  flex: 1;
  min-width: 0;
}

.ak-ec-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.ak-ec-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #f1f5f9;
  color: #334155;
}

.ak-ec-tag.is-bank { background: #dcfce7; color: #166534; }
.ak-ec-tag.is-donor { background: #ffe4e6; color: #9f1239; }
.ak-ec-tag.is-ready { background: #dcfce7; color: #15803d; }
.ak-ec-tag.is-rest { background: #fef3c7; color: #92400e; }
.ak-ec-tag.is-amb-type { background: #fee2e2; color: #b91c1c; }
.ak-ec-tag.is-pol-unit { background: #dbeafe; color: #1e40af; }

.ak-ec-item-title {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.ak-ec-item-desc {
  margin: 0 0 5px;
  font-size: 13px;
  color: #334155;
  line-height: 1.45;
}

.ak-ec-item-meta {
  margin: 0;
  font-size: 12.4px;
  color: #475569;
}

.ak-ec-item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.ak-ec-chip {
  font-size: 11.2px;
  font-weight: 600;
  color: #075d3a;
  background: #eaf5ef;
  padding: 2px 8px;
  border-radius: 6px;
}

.ak-ec-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.ak-ec-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  color: #ffffff;
  white-space: nowrap;
}

.ak-ec-call-btn.is-red { background: #e11d24; }
.ak-ec-call-btn.is-blue { background: #1d4ed8; }
.ak-ec-call-btn.is-green { background: #075d3a; }
.ak-ec-call-btn.is-outline-blue {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #1d4ed8;
}

.ak-ec-sub-link,
.ak-ec-portal-btn {
  font-size: 12px;
  font-weight: 700;
  color: #075d3a;
  text-decoration: none;
}

.ak-ec-portal-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eaf5ef;
  border: 1px solid #b7dec9;
}

.ak-ec-detail-hero {
  padding: 16px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ak-ec-detail-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.ak-ec-detail-big-num {
  display: block;
  font-size: 32px;
  font-weight: 900;
  color: #e11d24;
  line-height: 1.15;
  margin: 2px 0 6px;
}

.ak-ec-detail-cta-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ak-ec-detail-box {
  background: #f8fbf9;
  border: 1px solid #d8e8df;
  border-radius: 12px;
  padding: 14px 16px;
}

.ak-ec-detail-box h4 {
  margin: 0 0 8px;
  font-size: 14.5px;
  color: #064e3b;
}

.ak-ec-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  color: #1e293b;
}

.ak-ec-detail-local {
  padding: 12px 14px;
  border-radius: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-size: 13px;
  color: #1e3a8a;
}

.ak-ec-modal-footer {
  padding: 12px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.ak-ec-modal-note {
  font-size: 12.2px;
  color: #475569;
}

.ak-ec-footer-link {
  font-size: 13px;
  font-weight: 800;
  color: #075d3a;
  text-decoration: none;
}

.ak-ec-close-footer-btn {
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Tablet & Mobile 320px–767px matching 19233.png)
   ========================================================================== */
@media (max-width: 1100px) {
  .ak-echub-main-layout {
    grid-template-columns: 1fr;
  }

  .ak-echub-citizen-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ak-echub-hero-section {
    padding: 12px 0 18px;
  }

  .ak-echub-civic-badge {
    display: none;
  }

  .ak-echub-mobile-art {
    display: block;
    flex-shrink: 0;
  }

  .ak-echub-mobile-art svg {
    width: 112px;
    height: 96px;
  }

  .ak-echub-hero-top {
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .ak-echub-title {
    font-size: 1.48rem;
  }

  .ak-echub-subtitle {
    font-size: 12.8px;
    line-height: 1.45;
  }

  /* Show Mobile Quick Access Header (Matches 19233.png) */
  .ak-echub-trio-mobile-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 10px;
  }

  .ak-echub-trio-head-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fee2e2;
    color: #e11d24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ak-echub-trio-head-text h2 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 800;
    color: #0f172a;
  }

  .ak-echub-trio-head-text p {
    margin: 1px 0 0;
    font-size: 12px;
    color: #475569;
  }

  /* 3 Equal Side-by-Side Buttons on Mobile (রক্ত সহায়তা, অ্যাম্বুলেন্স, পুলিশ সহায়তা) */
  .ak-echub-top-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
    align-items: stretch;
  }

  .ak-echub-prio-card {
    min-height: 92px;
    padding: 12px 6px;
    border-radius: 14px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .ak-echub-prio-card.is-blood {
    box-shadow: 0 4px 12px rgba(225, 29, 36, 0.1), inset 0 -3px 0 #e11d24;
  }

  .ak-echub-prio-card.is-ambulance {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1), inset 0 -3px 0 #ef4444;
  }

  .ak-echub-prio-card.is-police {
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.1), inset 0 -3px 0 #1d4ed8;
  }

  .ak-echub-prio-decor,
  .ak-echub-prio-sub,
  .ak-echub-prio-footer {
    display: none;
  }

  .ak-echub-prio-main {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-right: 0;
    width: 100%;
  }

  .ak-echub-prio-icon-wrap {
    width: 38px;
    height: 38px;
    margin: 0 auto;
  }

  .ak-echub-prio-icon-wrap svg {
    width: 20px;
    height: 20px;
  }

  .ak-echub-prio-copy {
    width: 100%;
    min-width: 0;
  }

  .ak-echub-prio-title {
    margin: 0;
    font-size: 13.2px;
    font-weight: 800;
    line-height: 1.26;
    text-align: center;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ak-echub-prio-card.is-blood .ak-echub-prio-title { color: #881337; }
  .ak-echub-prio-card.is-ambulance .ak-echub-prio-title { color: #7f1d1d; }
  .ak-echub-prio-card.is-police .ak-echub-prio-title { color: #1e3a8a; }

  .ak-prio-label-desktop {
    display: none;
  }

  .ak-prio-label-mobile {
    display: inline;
  }

  /* Search Card on Mobile */
  .ak-echub-search-card {
    padding: 10px 12px;
    border-radius: 14px;
  }

  .ak-echub-search-input {
    min-height: 40px;
    font-size: 12.8px;
    padding-left: 36px;
  }

  .ak-echub-search-submit {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }

  /* Helplines Grid on Mobile */
  .ak-echub-helplines-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .ak-echub-hl-card {
    padding: 10px 10px;
    gap: 8px;
    border-radius: 12px;
  }

  .ak-echub-hl-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .ak-echub-hl-icon svg {
    width: 20px;
    height: 20px;
  }

  .ak-echub-hl-title {
    font-size: 12.4px;
  }

  .ak-echub-hl-num {
    font-size: 17.5px;
  }

  .ak-echub-hl-desc {
    display: none;
  }

  .ak-echub-citizen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  /* Centered Mobile Modal with 12-16px Horizontal Margin & 85-90% Viewport Height */
  .ak-ec-modal-backdrop {
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    z-index: 100050;
  }

  .ak-ec-modal-dialog {
    width: 100%;
    max-width: calc(100vw - 28px);
    height: 88vh;
    height: 88dvh;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 16px;
  }

  .ak-ec-item-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .ak-ec-item-actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .ak-ec-call-btn {
    flex: 1;
  }
}

/* Ultra-narrow screens (320px–359px): Keep all 3 Emergency Buttons side-by-side on the same row */
@media (max-width: 359px) {
  .ak-echub-top-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .ak-echub-prio-card,
  .ak-echub-prio-card:nth-child(3) {
    grid-column: auto;
    min-height: 84px;
    padding: 10px 4px;
    border-radius: 12px;
  }

  .ak-echub-prio-icon-wrap {
    width: 34px;
    height: 34px;
  }

  .ak-echub-prio-icon-wrap svg {
    width: 18px;
    height: 18px;
  }

  .ak-echub-prio-title {
    font-size: 12px;
    line-height: 1.22;
  }

  .ak-echub-mobile-art {
    display: none;
  }
}

/* ==========================================================================
   KHULNA 9 UPAZILAS PROFESSIONAL DIRECTORY PAGE (v4.4.0)
   Matches Reference Design (19298.png) — Desktop 3×3 Grid & Mobile 2-Col Grid
   Scoped strictly under .ak-upz-* to prevent any global style collision.
   ========================================================================== */
.ak-upz-directory {
  background: #f5f9f7;
  padding-bottom: 56px;
  overflow-x: clip;
  font-family: inherit;
}

/* 1. Hero Banner */
.ak-upz-hero {
  position: relative;
  background-color: #ecf7f2;
  background-image: var(--ak-upz-hero-bg);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 24px 0 54px;
  border-bottom: 1px solid rgba(7, 93, 58, 0.08);
  overflow: hidden;
}

.ak-upz-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(240, 249, 244, 0.98) 0%,
    rgba(240, 249, 244, 0.95) 45%,
    rgba(240, 249, 244, 0.52) 72%,
    rgba(240, 249, 244, 0.12) 100%
  );
  pointer-events: none;
}

.ak-upz-hero-inner {
  position: relative;
  z-index: 2;
}

.ak-upz-hero-copy {
  max-width: 580px;
}

.ak-upz-back-row {
  margin-bottom: 12px;
}

.ak-upz-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 16px 6px 13px;
  background: rgba(255, 255, 255, 0.94);
  color: #075d3a;
  border: 1.5px solid #075d3a;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(7, 93, 58, 0.08);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.ak-upz-back-btn:hover {
  background: #075d3a;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(7, 93, 58, 0.18);
}

.ak-upz-back-btn:focus-visible {
  outline: 2.5px solid #075d3a;
  outline-offset: 2px;
}

.ak-upz-back-btn:active {
  transform: translateY(1px);
}

.ak-upz-back-icon {
  font-size: 15px;
  line-height: 1;
}

.ak-upz-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #335c4a;
}

.ak-upz-breadcrumb a {
  color: #075d3a;
  text-decoration: none;
  transition: color 0.15s ease;
}

.ak-upz-breadcrumb a:hover {
  color: #043e26;
  text-decoration: underline;
}

.ak-upz-bc-sep {
  color: #648b7a;
  font-size: 14px;
}

.ak-upz-bc-current {
  color: #0f291e;
  font-weight: 700;
}

.ak-upz-hero-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  color: #0c261b;
  letter-spacing: -0.01em;
}

.ak-upz-hero-desc {
  margin: 0;
  font-size: clamp(14px, 1.45vw, 16.5px);
  line-height: 1.6;
  color: #234235;
  font-weight: 500;
}

/* 2. Search Bar & Quick Stats Container */
.ak-upz-main-container {
  position: relative;
  z-index: 3;
}

.ak-upz-search-wrap {
  margin-top: -28px;
  margin-bottom: 28px;
}

.ak-upz-search-form {
  margin: 0 0 18px;
}

.ak-upz-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1.5px solid rgba(7, 93, 58, 0.16);
  border-radius: 999px;
  padding: 7px 8px 7px 20px;
  box-shadow: 0 10px 28px rgba(7, 93, 58, 0.09);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ak-upz-search-box:focus-within {
  border-color: #075d3a;
  box-shadow: 0 10px 30px rgba(7, 93, 58, 0.15);
}

.ak-upz-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #476b5b;
  flex-shrink: 0;
}

.ak-upz-search-box input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  padding: 8px 4px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  color: #0f291e;
  outline: none !important;
  box-shadow: none !important;
}

.ak-upz-search-box input[type="search"]::placeholder {
  color: #6b887b;
}

.ak-upz-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: #eef5f1;
  color: #3b5e4e;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ak-upz-search-clear:hover {
  background: #dcebe3;
  color: #0c261b;
}

.ak-upz-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 28px;
  background: #075d3a;
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

.ak-upz-search-btn:hover {
  background: #05472c;
  box-shadow: 0 4px 12px rgba(7, 93, 58, 0.22);
}

.ak-upz-search-btn:focus-visible {
  outline: 2.5px solid #075d3a;
  outline-offset: 2px;
}

.ak-upz-search-btn:active {
  transform: translateY(1px);
}

/* 4 Quick Stat Summary Cards */
.ak-upz-stats-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  background: #edf7f2;
  border: 1px solid rgba(7, 93, 58, 0.11);
  border-radius: 18px;
  padding: 14px;
}

.ak-upz-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid rgba(7, 93, 58, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
  box-shadow: 0 2px 8px rgba(7, 93, 58, 0.04);
}

.ak-upz-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}

.ak-upz-stat-icon.is-green {
  background: #e6f5ed;
  color: #075d3a;
}

.ak-upz-stat-icon.is-blue {
  background: #e8f1ff;
  color: #1d4ed8;
}

.ak-upz-stat-icon.is-red {
  background: #ffeef0;
  color: #dc2626;
}

.ak-upz-stat-icon.is-teal {
  background: #e6f7f2;
  color: #0d9488;
}

.ak-upz-stat-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ak-upz-stat-num {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.ak-upz-stat-num.is-green { color: #0c261b; }
.ak-upz-stat-num.is-blue  { color: #1d4ed8; }
.ak-upz-stat-num.is-red   { color: #dc2626; }
.ak-upz-stat-num.is-teal  { color: #075d3a; }

.ak-upz-stat-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #425f52;
  line-height: 1.35;
  margin-top: 2px;
}

/* 3. Section Heading & View Switch Toolbar */
.ak-upz-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.ak-upz-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ak-upz-section-title {
  margin: 0;
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 800;
  color: #0c261b;
}

.ak-upz-match-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  background: #e3f4ec;
  color: #075d3a;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.ak-upz-view-switch {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(7, 93, 58, 0.16);
  border-radius: 999px;
  padding: 3px;
  gap: 3px;
}

.ak-upz-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #365849;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.ak-upz-view-btn.is-active {
  background: #075d3a;
  color: #ffffff;
}

.ak-upz-view-btn:focus-visible {
  outline: 2px solid #075d3a;
  outline-offset: 2px;
}

/* 4. Upazila Cards Grid — Desktop 3×3 Grid */
.ak-upz-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.ak-upz-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: #ffffff;
  border: 1px solid rgba(7, 93, 58, 0.11);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(7, 93, 58, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.ak-upz-card[hidden] {
  display: none !important;
}

.ak-upz-card:hover {
  transform: translateY(-3px);
  border-color: rgba(7, 93, 58, 0.28);
  box-shadow: 0 12px 28px rgba(7, 93, 58, 0.12);
}

.ak-upz-card-media {
  position: relative;
  display: block;
  width: 100%;
  height: 146px;
  overflow: hidden;
  background: #dceee6;
  flex-shrink: 0;
}

.ak-upz-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

.ak-upz-card:hover .ak-upz-card-img {
  transform: scale(1.03);
}

.ak-upz-card-union-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  background: rgba(12, 38, 27, 0.76);
  backdrop-filter: blur(4px);
  color: #ffffff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.ak-upz-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 18px 18px;
  min-width: 0;
}

.ak-upz-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.ak-upz-card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  color: #0c261b;
  min-width: 0;
}

.ak-upz-card-title-link {
  color: inherit;
  text-decoration: none;
}

.ak-upz-card-title-link:hover {
  color: #075d3a;
  text-decoration: none;
}

.ak-upz-card-chevron {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #2c4a3e;
  flex-shrink: 0;
}

.ak-upz-card-desc {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #3d5a4d;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.95em;
}

/* 3 Mini Stat Boxes Inside Card */
.ak-upz-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.ak-upz-metric {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 10px;
  background: #f5f9f7;
  border: 1px solid rgba(7, 93, 58, 0.08);
  min-width: 0;
}

.ak-upz-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex-shrink: 0;
}

.ak-upz-metric.is-edu .ak-upz-metric-icon {
  background: #ffeef0;
  color: #dc2626;
}

.ak-upz-metric.is-hosp .ak-upz-metric-icon {
  background: #e6f5ed;
  color: #075d3a;
}

.ak-upz-metric.is-pop .ak-upz-metric-icon {
  background: #e8f1ff;
  color: #1d4ed8;
}

.ak-upz-metric-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ak-upz-metric-val {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: #0c261b;
  white-space: nowrap;
}

.ak-upz-metric-lbl {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #4f6d5f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-upz-card-footer {
  margin-top: auto;
}

.ak-upz-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 8px 20px;
  background: #075d3a;
  color: #ffffff !important;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.ak-upz-card-btn:hover {
  background: #05472c;
  box-shadow: 0 4px 12px rgba(7, 93, 58, 0.22);
}

.ak-upz-card-btn:focus-visible {
  outline: 2.5px solid #075d3a;
  outline-offset: 2px;
}

.ak-upz-card-btn:active {
  transform: translateY(1px);
}

.ak-upz-btn-arrow {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.18s ease;
}

.ak-upz-card:hover .ak-upz-btn-arrow {
  transform: translateX(3px);
}

/* List View Mode (.ak-upz-grid.is-list-view) */
.ak-upz-grid.is-list-view {
  grid-template-columns: 1fr;
  gap: 14px;
}

.ak-upz-grid.is-list-view .ak-upz-card {
  flex-direction: row;
  align-items: stretch;
}

.ak-upz-grid.is-list-view .ak-upz-card-media {
  width: 240px;
  height: auto;
  min-height: 156px;
}

.ak-upz-grid.is-list-view .ak-upz-card-body {
  padding: 16px 20px;
}

.ak-upz-grid.is-list-view .ak-upz-card-desc {
  min-height: 0;
  margin-bottom: 12px;
}

/* 5. Empty State */
.ak-upz-empty {
  text-align: center;
  background: #ffffff;
  border: 1px dashed rgba(7, 93, 58, 0.25);
  border-radius: 18px;
  padding: 40px 20px;
  margin-top: 8px;
}

.ak-upz-empty[hidden] {
  display: none !important;
}

.ak-upz-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.ak-upz-empty-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: #0c261b;
}

.ak-upz-empty-desc {
  margin: 0 auto 18px;
  max-width: 480px;
  font-size: 14px;
  line-height: 1.6;
  color: #425f52;
}

.ak-upz-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 22px;
  background: #075d3a;
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ak-upz-reset-btn:hover {
  background: #05472c;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS: TABLET (<1024px) & MOBILE (<=767px, 320px-430px)
   Strictly 2 Upazila Cards Side-by-Side on Mobile with Zero Overflow
   ========================================================================== */
@media (max-width: 1023px) {
  .ak-upz-stats-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .ak-upz-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .ak-upz-directory {
    padding-bottom: 76px;
  }

  .ak-upz-hero {
    padding: 14px 0 36px;
    background-position: right bottom;
  }

  .ak-upz-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(240, 249, 244, 0.96) 0%,
      rgba(240, 249, 244, 0.90) 62%,
      rgba(240, 249, 244, 0.78) 100%
    );
  }

  .ak-upz-back-row {
    margin-bottom: 8px;
  }

  .ak-upz-back-btn {
    min-height: 32px;
    padding: 4px 12px 4px 10px;
    font-size: 12.5px;
    gap: 6px;
  }

  .ak-upz-breadcrumb {
    font-size: 11.5px;
    gap: 4px;
    margin-bottom: 6px;
  }

  .ak-upz-hero-title {
    font-size: 24px;
    margin-bottom: 6px;
  }

  .ak-upz-hero-desc {
    font-size: 13px;
    line-height: 1.48;
  }

  .ak-upz-search-wrap {
    margin-top: -20px;
    margin-bottom: 18px;
  }

  .ak-upz-search-form {
    margin-bottom: 12px;
  }

  .ak-upz-search-box {
    padding: 5px 6px 5px 12px;
    gap: 6px;
  }

  .ak-upz-search-icon svg {
    width: 17px;
    height: 17px;
  }

  .ak-upz-search-box input[type="search"] {
    font-size: 13px;
    padding: 6px 2px;
  }

  .ak-upz-search-btn {
    min-height: 36px;
    padding: 6px 16px;
    font-size: 13px;
  }

  .ak-upz-stats-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
  }

  .ak-upz-stat-card {
    padding: 8px 9px;
    gap: 8px;
    border-radius: 10px;
  }

  .ak-upz-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .ak-upz-stat-icon svg {
    width: 17px;
    height: 17px;
  }

  .ak-upz-stat-num {
    font-size: 14.5px;
  }

  .ak-upz-stat-label {
    font-size: 10.5px;
    line-height: 1.25;
  }

  .ak-upz-toolbar {
    margin-bottom: 12px;
    gap: 8px;
  }

  .ak-upz-section-title {
    font-size: 18px;
  }

  .ak-upz-view-btn {
    padding: 5px 10px;
    font-size: 11.5px;
    gap: 4px;
  }

  /* Strictly 2 Cards Per Row on Mobile */
  .ak-upz-grid,
  .ak-upz-grid.is-list-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ak-upz-grid.is-list-view .ak-upz-card {
    flex-direction: column;
  }

  .ak-upz-card {
    border-radius: 13px;
  }

  .ak-upz-card-media,
  .ak-upz-grid.is-list-view .ak-upz-card-media {
    width: 100%;
    height: 94px;
    min-height: 94px;
  }

  .ak-upz-card-union-pill {
    top: 6px;
    right: 6px;
    padding: 2px 7px;
    font-size: 9.5px;
  }

  .ak-upz-card-body,
  .ak-upz-grid.is-list-view .ak-upz-card-body {
    padding: 10px;
  }

  .ak-upz-card-head {
    margin-bottom: 4px;
    gap: 4px;
  }

  .ak-upz-card-title {
    font-size: 15px;
    line-height: 1.25;
  }

  .ak-upz-card-chevron {
    font-size: 17px;
  }

  .ak-upz-card-desc {
    font-size: 11.2px;
    line-height: 1.38;
    margin-bottom: 9px;
    min-height: 2.76em;
    -webkit-line-clamp: 2;
  }

  /* 3 Compact Vertical-Centered Mini Stat Pills inside each Mobile Card */
  .ak-upz-card-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 10px;
  }

  .ak-upz-metric {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 5px 2px;
    border-radius: 7px;
  }

  .ak-upz-metric-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
  }

  .ak-upz-metric-icon svg {
    width: 11px;
    height: 11px;
  }

  .ak-upz-metric-text {
    align-items: center;
    width: 100%;
  }

  .ak-upz-metric-val {
    font-size: 10.8px;
    line-height: 1.15;
  }

  .ak-upz-metric-lbl {
    font-size: 8.8px;
    line-height: 1.15;
    max-width: 100%;
  }

  .ak-upz-card-btn {
    width: 100%;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 10px;
    font-size: 11.8px;
  }

  .ak-upz-btn-arrow {
    font-size: 12.5px;
  }
}

@media (max-width: 359px) {
  .ak-upz-grid,
  .ak-upz-grid.is-list-view {
    gap: 8px;
  }

  .ak-upz-card-media,
  .ak-upz-grid.is-list-view .ak-upz-card-media {
    height: 82px;
    min-height: 82px;
  }

  .ak-upz-card-body,
  .ak-upz-grid.is-list-view .ak-upz-card-body {
    padding: 8px;
  }

  .ak-upz-card-title {
    font-size: 13.8px;
  }

  .ak-upz-card-desc {
    font-size: 10.5px;
  }

  .ak-upz-metric-val {
    font-size: 10px;
  }

  .ak-upz-metric-lbl {
    font-size: 8.2px;
  }

  .ak-upz-card-btn {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* ==========================================================================
   SINGLE UPAZILA PAGE SYSTEM (v4.5.0)
   Matches Reference Image (19388.png — Desktop Left & Mobile Right)
   Scoped strictly under .ak-supz-* to protect all existing website pages.
   ========================================================================== */
.ak-supz-page {
  background: #f4f8f6;
  padding-bottom: 64px;
  overflow-x: clip;
  font-family: inherit;
}

/* 1. Hero Section */
.ak-supz-hero {
  position: relative;
  background-color: #eaf6f0;
  background-image: var(--ak-supz-hero-bg);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px 0 28px;
  border-bottom: 1px solid rgba(7, 93, 58, 0.10);
  overflow: hidden;
}

.ak-supz-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(239, 248, 244, 0.98) 0%,
    rgba(239, 248, 244, 0.94) 44%,
    rgba(239, 248, 244, 0.42) 72%,
    rgba(239, 248, 244, 0.08) 100%
  );
  pointer-events: none;
}

.ak-supz-hero-inner {
  position: relative;
  z-index: 2;
}

.ak-supz-hero-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}

.ak-supz-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #365b4a;
}

.ak-supz-breadcrumb a {
  color: #075d3a;
  text-decoration: none;
}

.ak-supz-breadcrumb a:hover {
  text-decoration: underline;
}

.ak-supz-bc-sep {
  color: #6b8e7e;
}

.ak-supz-bc-current {
  color: #0d281d;
  font-weight: 700;
}

.ak-supz-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 16px 6px 13px;
  background: rgba(255, 255, 255, 0.95);
  color: #075d3a;
  border: 1.5px solid #075d3a;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(7, 93, 58, 0.08);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

.ak-supz-back-btn:hover {
  background: #075d3a;
  color: #ffffff;
  text-decoration: none;
}

.ak-supz-mobile-banner-card {
  display: none;
}

.ak-supz-hero-copy {
  max-width: 560px;
  margin-bottom: 20px;
}

.ak-supz-title {
  margin: 0 0 8px;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  color: #0c261b;
}

.ak-supz-subtitle {
  margin: 0;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.55;
  color: #254638;
  font-weight: 500;
}

.ak-supz-hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ak-supz-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  flex: 1 1 680px;
  max-width: 780px;
}

.ak-supz-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(7, 93, 58, 0.11);
  border-radius: 14px;
  padding: 10px 13px;
  min-width: 0;
  box-shadow: 0 4px 14px rgba(7, 93, 58, 0.06);
}

.ak-supz-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
}

.ak-supz-stat-icon.is-green { background: #e6f5ed; color: #075d3a; }
.ak-supz-stat-icon.is-amber { background: #fff4e5; color: #d97706; }
.ak-supz-stat-icon.is-blue  { background: #e8f1ff; color: #2563eb; }
.ak-supz-stat-icon.is-teal  { background: #e6f7f2; color: #0d9488; }

.ak-supz-stat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ak-supz-stat-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: #527062;
  line-height: 1.2;
}

.ak-supz-stat-val {
  font-size: 14.5px;
  font-weight: 800;
  color: #0c261b;
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-supz-gallery-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: rgba(12, 38, 27, 0.86);
  backdrop-filter: blur(6px);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.15s ease;
}

.ak-supz-gallery-btn:hover {
  background: #075d3a;
  transform: translateY(-1px);
}

/* 2. Sticky Smooth-Scroll Section Navigation Bar */
.ak-supz-nav-bar {
  position: sticky;
  top: 0;
  z-index: 25;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(7, 93, 58, 0.10);
  padding: 10px 0;
  box-shadow: 0 4px 14px rgba(7, 93, 58, 0.04);
}

.ak-supz-nav-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.ak-supz-nav-scroll::-webkit-scrollbar {
  display: none;
}

.ak-supz-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f3f8f5;
  color: #244537;
  border: 1px solid rgba(7, 93, 58, 0.13);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.ak-supz-nav-pill:hover {
  background: #e3f2ea;
  color: #075d3a;
  text-decoration: none;
}

.ak-supz-nav-pill.is-active {
  background: #075d3a;
  color: #ffffff;
  border-color: #075d3a;
}

/* 3. Body Container & Shared Section Panels */
.ak-supz-body-container {
  padding-top: 22px;
}

.ak-supz-section {
  margin-bottom: 24px;
  scroll-margin-top: 74px;
}

.ak-supz-panel {
  background: #ffffff;
  border: 1px solid rgba(7, 93, 58, 0.10);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 4px 16px rgba(7, 93, 58, 0.04);
}

.ak-supz-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ak-supz-sec-title {
  margin: 0;
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 800;
  color: #0c261b;
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 4px solid #075d3a;
  padding-left: 10px;
  line-height: 1.25;
}

.ak-supz-sec-sub {
  margin: 4px 0 0 14px;
  font-size: 13px;
  color: #4b695b;
}

.ak-supz-sec-link,
.ak-supz-sec-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 0;
  color: #075d3a;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.ak-supz-sec-link:hover,
.ak-supz-sec-link-btn:hover {
  color: #043e26;
  text-decoration: underline;
}

.ak-supz-sec-hint {
  font-size: 13px;
  font-weight: 600;
  color: #075d3a;
}

/* 4. Upazila Parichiti + Map Grid */
.ak-supz-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: stretch;
}

.ak-supz-parichiti-inner {
  display: grid;
  grid-template-columns: minmax(220px, 0.92fr) minmax(0, 1.25fr);
  gap: 20px;
  align-items: start;
}

.ak-supz-parichiti-media {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ak-supz-parichiti-img {
  width: 100%;
  height: 195px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.ak-supz-readmore-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: #f0f7f3;
  color: #0c261b;
  border: 1px solid rgba(7, 93, 58, 0.16);
  border-radius: 11px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.ak-supz-readmore-btn:hover {
  background: #e1f1e8;
  border-color: #075d3a;
}

.ak-supz-intro-p {
  margin: 0 0 14px;
  font-size: 14.2px;
  line-height: 1.65;
  color: #264336;
}

.ak-supz-specialty-box {
  background: #eff8f3;
  border: 1px solid rgba(7, 93, 58, 0.12);
  border-radius: 14px;
  padding: 14px 16px;
}

.ak-supz-specialty-title {
  margin: 0 0 10px;
  font-size: 15.5px;
  font-weight: 800;
  color: #0c261b;
}

.ak-supz-specialty-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ak-supz-specialty-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #214033;
  line-height: 1.4;
}

.ak-supz-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #075d3a;
  color: #ffffff;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Map Card */
.ak-supz-map-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #f5fbf8;
}

.ak-supz-map-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
  color: #0c261b;
}

.ak-supz-map-visual {
  position: relative;
  width: 100%;
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ak-supz-map-svg {
  width: 100%;
  max-width: 290px;
  height: auto;
  display: block;
}

.ak-supz-map-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ak-supz-map-tag {
  position: absolute;
  pointer-events: auto;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.90);
  color: #0c261b;
  border: 1px solid rgba(7, 93, 58, 0.25);
  border-radius: 999px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ak-supz-map-tag:hover {
  background: #075d3a;
  color: #ffffff;
  transform: scale(1.05);
}

.ak-supz-map-actions {
  text-align: center;
  margin-top: 12px;
}

.ak-supz-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 22px;
  background: #075d3a;
  color: #ffffff !important;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.ak-supz-map-btn:hover {
  background: #05472c;
  box-shadow: 0 4px 12px rgba(7, 93, 58, 0.22);
}

/* 5. Interactive Unions Grid (Desktop: 4 Cols, Mobile: 2 Cols) */
.ak-supz-unions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ak-supz-union-card {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #f8fbf9;
  border: 1px solid rgba(7, 93, 58, 0.12);
  border-radius: 14px;
  padding: 9px 12px 9px 9px;
  min-width: 0;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.ak-supz-union-card:hover,
.ak-supz-union-card:focus-visible {
  background: #edf7f2;
  border-color: #075d3a;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(7, 93, 58, 0.10);
  outline: none;
}

.ak-supz-union-thumb-wrap {
  width: 64px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #d8ebe2;
}

.ak-supz-union-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-supz-union-info {
  flex: 1 1 auto;
  min-width: 0;
}

.ak-supz-union-name {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 800;
  color: #0c261b;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-supz-union-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #4b695b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-supz-union-arrow {
  font-size: 20px;
  font-weight: 700;
  color: #2c4a3e;
  flex-shrink: 0;
}

/* 6. 3-Column Service Overview Trio */
.ak-supz-overview-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ak-supz-trio-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.ak-supz-trio-card.is-edu {
  background: #fff7f7;
  border-color: rgba(220, 38, 38, 0.14);
}

.ak-supz-trio-card.is-health {
  background: #f1fbf6;
  border-color: rgba(7, 93, 58, 0.15);
}

.ak-supz-trio-card.is-admin {
  background: #f2f7ff;
  border-color: rgba(37, 99, 235, 0.15);
}

.ak-supz-trio-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ak-supz-trio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 19px;
}

.ak-supz-trio-icon.is-edu    { background: #ffe4e6; }
.ak-supz-trio-icon.is-health { background: #dcfce7; }
.ak-supz-trio-icon.is-admin  { background: #dbeafe; }

.ak-supz-trio-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.ak-supz-trio-card.is-edu .ak-supz-trio-title    { color: #b91c1c; }
.ak-supz-trio-card.is-health .ak-supz-trio-title { color: #075d3a; }
.ak-supz-trio-card.is-admin .ak-supz-trio-title  { color: #1d4ed8; }

.ak-supz-trio-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

.ak-supz-trio-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: #264336;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.07);
  padding-bottom: 6px;
}

.ak-supz-trio-cnt {
  font-weight: 800;
  color: #0c261b;
}

.ak-supz-trio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff !important;
  text-decoration: none !important;
  align-self: flex-start;
  transition: opacity 0.16s ease, transform 0.15s ease;
}

.ak-supz-trio-btn.is-green { background: #075d3a; }
.ak-supz-trio-btn.is-blue  { background: #1d4ed8; }

.ak-supz-trio-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* 7. Institution Cards Grid (Education, Health, Administration) */
.ak-supz-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 16px;
  padding-bottom: 2px;
}

.ak-supz-filter-pills::-webkit-scrollbar {
  display: none;
}

.ak-supz-fpill {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(7, 93, 58, 0.18);
  background: #f4f9f6;
  color: #254638;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

.ak-supz-fpill.is-active {
  background: #075d3a;
  color: #ffffff;
  border-color: #075d3a;
}

.ak-supz-inst-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ak-supz-inst-card {
  display: flex;
  flex-direction: column;
  background: #f9fcfa;
  border: 1px solid rgba(7, 93, 58, 0.11);
  border-radius: 14px;
  padding: 15px 16px;
  min-width: 0;
}

.ak-supz-inst-card[hidden] {
  display: none !important;
}

.ak-supz-inst-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.ak-supz-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.ak-supz-badge.is-edu    { background: #e8f1ff; color: #1d4ed8; }
.ak-supz-badge.is-eiin   { background: #fef3c7; color: #92400e; }
.ak-supz-badge.is-health { background: #dcfce7; color: #075d3a; }
.ak-supz-badge.is-urgent { background: #fee2e2; color: #b91c1c; }
.ak-supz-badge.is-admin  { background: #ede9fe; color: #5b21b6; }

.ak-supz-inst-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  color: #0c261b;
}

.ak-supz-inst-title a {
  color: inherit;
  text-decoration: none;
}

.ak-supz-inst-title a:hover {
  color: #075d3a;
}

.ak-supz-inst-addr,
.ak-supz-inst-hours {
  margin: 0 0 6px;
  font-size: 12.8px;
  color: #466356;
  line-height: 1.45;
}

.ak-supz-inst-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.ak-supz-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
}

.ak-supz-act-btn.is-call {
  background: #075d3a;
  color: #ffffff !important;
}

.ak-supz-act-btn.is-map {
  background: #e8f1ff;
  color: #1d4ed8 !important;
}

.ak-supz-act-btn.is-detail {
  background: #eaf5ef;
  color: #075d3a !important;
}

/* 8. Scenic & Historical Places Grid (Desktop: 3 Cols, Mobile: 2 Cols) */
.ak-supz-history-narrative {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
  background: #f4faf6;
  border: 1px solid rgba(7, 93, 58, 0.11);
  border-radius: 14px;
  padding: 15px 18px;
}

.ak-supz-hn-col h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: #075d3a;
}

.ak-supz-hn-col p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #284639;
}

.ak-supz-places-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ak-supz-place-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(7, 93, 58, 0.12);
  border-radius: 15px;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 3px 12px rgba(7, 93, 58, 0.05);
}

.ak-supz-place-media {
  position: relative;
  height: 148px;
  background: #d9ece3;
  overflow: hidden;
}

.ak-supz-place-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-supz-place-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 3px 9px;
  background: rgba(7, 93, 58, 0.88);
  color: #ffffff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}

.ak-supz-place-badge.is-hist {
  background: rgba(180, 83, 9, 0.90);
}

.ak-supz-place-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 13px 15px 15px;
  min-width: 0;
}

.ak-supz-place-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: #0c261b;
}

.ak-supz-place-desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #425f52;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ak-supz-place-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.ak-supz-place-loc {
  font-size: 11.5px;
  font-weight: 600;
  color: #547264;
}

.ak-supz-place-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  background: #eaf5ef;
  color: #075d3a !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
}

.ak-supz-place-map-btn:hover {
  background: #075d3a;
  color: #ffffff !important;
}

/* Emergency Helpline Strip */
.ak-supz-helpline-strip {
  margin-top: 18px;
  padding: 15px 18px;
  background: #f0f9f4;
  border: 1px solid rgba(7, 93, 58, 0.14);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ak-supz-hl-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: #365748;
}

.ak-supz-hl-info strong {
  font-size: 14.5px;
  color: #0c261b;
}

.ak-supz-hl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ak-supz-hl-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
}

.ak-supz-hl-pill.is-red     { background: #dc2626; color: #ffffff !important; }
.ak-supz-hl-pill.is-green   { background: #075d3a; color: #ffffff !important; }
.ak-supz-hl-pill.is-blue    { background: #1d4ed8; color: #ffffff !important; }
.ak-supz-hl-pill.is-teal    { background: #0d9488; color: #ffffff !important; }
.ak-supz-hl-pill.is-outline { background: #ffffff; color: #075d3a !important; border: 1px solid #075d3a; }

/* 9. Modals (Union Modal, Detailed Intro Modal, Gallery Modal) */
.ak-supz-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(12, 30, 22, 0.68);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ak-supz-modal-backdrop[hidden] {
  display: none !important;
}

.ak-supz-modal-dialog {
  width: 100%;
  max-width: 680px;
  max-height: 88dvh;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ak-supz-modal-dialog.is-wide {
  max-width: 820px;
}

.ak-supz-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  background: #f2f9f5;
  border-bottom: 1px solid rgba(7, 93, 58, 0.12);
  flex-shrink: 0;
}

.ak-supz-modal-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ak-supz-modal-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 9px;
  background: #075d3a;
  color: #ffffff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.ak-supz-modal-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: #0c261b;
  line-height: 1.25;
}

.ak-supz-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(7, 93, 58, 0.20);
  background: #ffffff;
  color: #0c261b;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ak-supz-modal-close:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

.ak-supz-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

.ak-supz-um-hero {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 16px;
  align-items: center;
}

.ak-supz-um-img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
}

.ak-supz-um-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ak-supz-um-qitem {
  background: #f4faf6;
  border: 1px solid rgba(7, 93, 58, 0.10);
  border-radius: 10px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ak-supz-um-qitem span {
  font-size: 11px;
  color: #527062;
  font-weight: 600;
}

.ak-supz-um-qitem strong {
  font-size: 13.5px;
  color: #0c261b;
  font-weight: 800;
}

.ak-supz-um-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ak-supz-um-box {
  background: #f9fcfa;
  border: 1px solid rgba(7, 93, 58, 0.10);
  border-radius: 12px;
  padding: 12px 14px;
}

.ak-supz-um-box h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: #075d3a;
}

.ak-supz-um-box p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #264336;
}

.ak-supz-modal-lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #1f3c30;
  background: #eff8f3;
  padding: 12px 14px;
  border-radius: 12px;
}

.ak-supz-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ak-supz-gallery-item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(7, 93, 58, 0.12);
  background: #f8fbf9;
}

.ak-supz-gallery-item img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.ak-supz-gallery-item figcaption {
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1c3a2d;
}

.ak-supz-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  background: #f7fbf9;
  border-top: 1px solid rgba(7, 93, 58, 0.10);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.ak-supz-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  border: 0;
}

.ak-supz-modal-btn.is-primary { background: #075d3a; color: #ffffff !important; }
.ak-supz-modal-btn.is-map     { background: #e8f1ff; color: #1d4ed8 !important; }
.ak-supz-modal-btn.is-ghost   { background: #e6efea; color: #1e3b2e !important; }

/* ==========================================================================
   RESPONSIVE DESIGN: TABLET (<1024px) & MOBILE (<=767px, 320px–430px)
   Matches Mobile Reference Mockup on the Right Side of 19388.png
   ========================================================================== */
@media (max-width: 1023px) {
  .ak-supz-intro-grid {
    grid-template-columns: 1fr;
  }

  .ak-supz-unions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-supz-overview-trio {
    grid-template-columns: 1fr;
  }

  .ak-supz-inst-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-supz-places-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ak-supz-page {
    padding-bottom: 82px;
  }

  .ak-supz-hero {
    background-image: none !important;
    background-color: #f2f9f5;
    padding: 12px 0 18px;
  }

  .ak-supz-hero-overlay {
    display: none;
  }

  .ak-supz-hero-top {
    margin-bottom: 10px;
    gap: 6px;
  }

  .ak-supz-breadcrumb {
    font-size: 11.5px;
    gap: 4px;
  }

  .ak-supz-back-btn {
    min-height: 32px;
    padding: 4px 13px 4px 10px;
    font-size: 12.5px;
  }

  .ak-supz-mobile-banner-card {
    display: block;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(7, 93, 58, 0.10);
  }

  .ak-supz-mobile-banner-img {
    width: 100%;
    height: 156px;
    object-fit: cover;
    display: block;
  }

  .ak-supz-gallery-btn.is-mobile-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px 11px;
    font-size: 11.5px;
  }

  .ak-supz-gallery-btn.is-desktop-btn {
    display: none;
  }

  .ak-supz-hero-copy {
    margin-bottom: 12px;
  }

  .ak-supz-title {
    font-size: 23px;
    margin-bottom: 5px;
  }

  .ak-supz-subtitle {
    font-size: 13px;
    line-height: 1.45;
  }

  /* Strictly 2 Stat Cards per Row on Mobile (Matches 19388.png Mobile View) */
  .ak-supz-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .ak-supz-stat-card {
    padding: 8px 10px;
    gap: 8px;
    border-radius: 11px;
  }

  .ak-supz-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .ak-supz-stat-lbl {
    font-size: 10.5px;
  }

  .ak-supz-stat-val {
    font-size: 12.8px;
  }

  .ak-supz-nav-bar {
    padding: 8px 0;
  }

  .ak-supz-nav-pill {
    padding: 7px 12px;
    font-size: 12.5px;
    border-radius: 9px;
  }

  .ak-supz-body-container {
    padding-top: 14px;
  }

  .ak-supz-section {
    margin-bottom: 16px;
  }

  .ak-supz-panel {
    padding: 14px;
    border-radius: 14px;
  }

  .ak-supz-sec-head {
    margin-bottom: 12px;
  }

  .ak-supz-sec-title {
    font-size: 17.5px;
  }

  .ak-supz-parichiti-inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ak-supz-parichiti-img {
    height: 146px;
  }

  /* Strictly 2 Union Cards per Row on Mobile (Matches Requirement 5 & 11) */
  .ak-supz-unions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ak-supz-union-card {
    padding: 7px 8px 7px 7px;
    gap: 7px;
    border-radius: 11px;
  }

  .ak-supz-union-thumb-wrap {
    width: 44px;
    height: 40px;
    border-radius: 8px;
  }

  .ak-supz-union-name {
    font-size: 13px;
    margin-bottom: 2px;
  }

  .ak-supz-union-meta {
    font-size: 10px;
  }

  .ak-supz-union-arrow {
    font-size: 16px;
  }

  /* Strictly 2 Scenic & Historical Cards per Row on Mobile (Matches Requirement 8) */
  .ak-supz-places-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ak-supz-place-media {
    height: 98px;
  }

  .ak-supz-place-badge {
    top: 6px;
    left: 6px;
    padding: 2px 7px;
    font-size: 9.5px;
  }

  .ak-supz-place-body {
    padding: 9px 10px 10px;
  }

  .ak-supz-place-title {
    font-size: 13.2px;
    margin-bottom: 4px;
  }

  .ak-supz-place-desc {
    font-size: 11px;
    line-height: 1.38;
    margin-bottom: 8px;
  }

  .ak-supz-place-loc {
    font-size: 10px;
  }

  .ak-supz-place-map-btn {
    width: 100%;
    justify-content: center;
    padding: 5px 8px;
    font-size: 11px;
  }

  .ak-supz-inst-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ak-supz-history-narrative {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 10px;
  }

  /* Mobile Modal Optimization */
  .ak-supz-modal-backdrop {
    padding: 10px 12px;
  }

  .ak-supz-modal-dialog {
    max-height: 88dvh;
    border-radius: 16px;
  }

  .ak-supz-modal-header {
    padding: 12px 14px;
  }

  .ak-supz-modal-title {
    font-size: 16px;
  }

  .ak-supz-modal-body {
    padding: 12px 14px;
  }

  .ak-supz-um-hero {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ak-supz-um-img {
    height: 128px;
  }

  .ak-supz-um-sections {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .ak-supz-gallery-grid {
    grid-template-columns: 1fr;
  }

  .ak-supz-modal-footer {
    padding: 10px 14px;
    justify-content: stretch;
  }

  .ak-supz-modal-btn {
    flex: 1 1 auto;
    font-size: 12px;
    padding: 8px 12px;
  }
}

@media (max-width: 359px) {
  .ak-supz-stat-grid,
  .ak-supz-unions-grid,
  .ak-supz-places-grid {
    gap: 6px;
  }

  .ak-supz-union-thumb-wrap {
    width: 36px;
    height: 36px;
  }

  .ak-supz-union-name {
    font-size: 12px;
  }

  .ak-supz-place-title {
    font-size: 12.2px;
  }
}

/* ==========================================================================
   PART 1: HOMEPAGE TOURIST ATTRACTIONS INFINITE CAROUSEL (v4.6.0)
   Scoped under .ak-hattr-* — Placed immediately below "খুলনার ৯টি উপজেলা"
   ========================================================================== */
.ak-hattr-section {
  margin-top: 26px;
  margin-bottom: 30px;
  overflow-x: clip;
}

.ak-hattr-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ak-hattr-title-group {
  min-width: 0;
}

.ak-hattr-title {
  margin: 0 0 5px;
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.25;
  color: #0c261b;
}

.ak-hattr-subtitle {
  margin: 0;
  font-size: clamp(13px, 1.35vw, 15px);
  line-height: 1.5;
  color: #425f52;
  font-weight: 500;
}

.ak-hattr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ak-hattr-nav-btns {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ak-hattr-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(7, 93, 58, 0.22);
  background: #ffffff;
  color: #075d3a;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(7, 93, 58, 0.06);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.ak-hattr-arrow-btn:hover {
  background: #075d3a;
  color: #ffffff;
  border-color: #075d3a;
}

.ak-hattr-arrow-btn:focus-visible {
  outline: 2.5px solid #075d3a;
  outline-offset: 2px;
}

.ak-hattr-viewall-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 18px;
  background: #075d3a;
  color: #ffffff !important;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(7, 93, 58, 0.16);
  transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

.ak-hattr-viewall-btn:hover {
  background: #05472c;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(7, 93, 58, 0.22);
}

.ak-hattr-viewall-btn:focus-visible {
  outline: 2.5px solid #075d3a;
  outline-offset: 2px;
}

.ak-hattr-viewport {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
  padding: 4px 2px 12px;
  cursor: grab;
  user-select: none;
}

.ak-hattr-viewport::-webkit-scrollbar {
  display: none;
}

.ak-hattr-viewport.is-dragging {
  cursor: grabbing;
}

.ak-hattr-viewport:focus-visible {
  outline: 2px solid #075d3a;
  outline-offset: 4px;
  border-radius: 16px;
}

.ak-hattr-track {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: max-content;
}

/* Desktop: ~4.35 cards visible (4–5 cards visible) */
.ak-hattr-card {
  width: 268px;
  flex: 0 0 268px;
  background: #ffffff;
  border: 1px solid rgba(7, 93, 58, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(7, 93, 58, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.ak-hattr-card:hover {
  transform: translateY(-3px);
  border-color: rgba(7, 93, 58, 0.30);
  box-shadow: 0 10px 24px rgba(7, 93, 58, 0.13);
}

.ak-hattr-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit !important;
  text-decoration: none !important;
}

.ak-hattr-card-media {
  position: relative;
  width: 100%;
  height: 158px;
  background: #d9ece3;
  overflow: hidden;
  flex-shrink: 0;
}

.ak-hattr-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.32s ease;
}

.ak-hattr-card:hover .ak-hattr-card-img {
  transform: scale(1.04);
}

.ak-hattr-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  background: rgba(7, 93, 58, 0.88);
  backdrop-filter: blur(4px);
  color: #ffffff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.ak-hattr-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.ak-hattr-card-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.ak-hattr-card-title {
  margin: 0 0 5px;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.32;
  color: #0c261b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.64em;
}

.ak-hattr-card-loc {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.2px;
  font-weight: 600;
  color: #3f6152;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-hattr-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eaf5ef;
  color: #075d3a;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.ak-hattr-card:hover .ak-hattr-card-arrow {
  background: #075d3a;
  color: #ffffff;
  transform: translateX(2px);
}


/* ==========================================================================
   PART 2: TOURIST ATTRACTIONS DIRECTORY PAGE (v4.6.0)
   Scoped under .ak-attr-* — Desktop 4-Col, Tablet 3-Col, Mobile 2-Col Grid
   ========================================================================== */
.ak-attr-dir {
  background: #f4f8f6;
  padding-bottom: 64px;
  overflow-x: clip;
}

.ak-attr-hero {
  position: relative;
  background-color: #eaf6f0;
  background-image: var(--ak-attr-hero-bg);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 24px 0 48px;
  border-bottom: 1px solid rgba(7, 93, 58, 0.10);
  overflow: hidden;
}

.ak-attr-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(239, 248, 244, 0.98) 0%,
    rgba(239, 248, 244, 0.94) 48%,
    rgba(239, 248, 244, 0.48) 76%,
    rgba(239, 248, 244, 0.12) 100%
  );
  pointer-events: none;
}

.ak-attr-hero-inner {
  position: relative;
  z-index: 2;
}

.ak-attr-hero-copy {
  max-width: 640px;
}

.ak-attr-back-row {
  margin-bottom: 10px;
}

.ak-attr-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 5px 15px 5px 12px;
  background: rgba(255, 255, 255, 0.95);
  color: #075d3a;
  border: 1.5px solid #075d3a;
  border-radius: 999px;
  font-size: 13.2px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.ak-attr-back-btn:hover {
  background: #075d3a;
  color: #ffffff;
  text-decoration: none;
}

.ak-attr-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #365b4a;
}

.ak-attr-breadcrumb a {
  color: #075d3a;
  text-decoration: none;
}

.ak-attr-bc-current {
  color: #0c261b;
  font-weight: 700;
}

.ak-attr-hero-title {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.22;
  color: #0c261b;
}

.ak-attr-hero-desc {
  margin: 0 0 14px;
  font-size: clamp(13.8px, 1.4vw, 16px);
  line-height: 1.58;
  color: #254638;
}

.ak-attr-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ak-attr-hbadge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(7, 93, 58, 0.16);
  border-radius: 999px;
  font-size: 12.2px;
  font-weight: 700;
  color: #075d3a;
}

/* Filter Panel */
.ak-attr-main-container {
  position: relative;
  z-index: 3;
}

.ak-attr-filter-panel {
  margin-top: -24px;
  margin-bottom: 22px;
  background: #ffffff;
  border: 1px solid rgba(7, 93, 58, 0.14);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 10px 28px rgba(7, 93, 58, 0.08);
}

.ak-attr-filter-top {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) minmax(170px, 1fr) minmax(150px, 0.85fr) auto;
  gap: 10px;
  margin-bottom: 14px;
}

.ak-attr-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f9f7;
  border: 1px solid rgba(7, 93, 58, 0.18);
  border-radius: 12px;
  padding: 0 12px;
}

.ak-attr-search-wrap:focus-within {
  background: #ffffff;
  border-color: #075d3a;
}

.ak-attr-search-icon {
  color: #466658;
  display: inline-flex;
  flex-shrink: 0;
}

.ak-attr-search-wrap input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  padding: 10px 4px;
  font-family: inherit;
  font-size: 14px;
  color: #0c261b;
  outline: none !important;
  box-shadow: none !important;
}

.ak-attr-clear-q {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: #e2eee8;
  color: #1f3d30;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ak-attr-select-wrap select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  background: #f5f9f7;
  border: 1px solid rgba(7, 93, 58, 0.18);
  border-radius: 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #0c261b;
}

.ak-attr-submit-btn {
  height: 44px;
  padding: 0 22px;
  background: #075d3a;
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ak-attr-submit-btn:hover {
  background: #05472c;
}

.ak-attr-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ak-attr-cat-pills {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  flex: 1 1 auto;
}

.ak-attr-cat-pills::-webkit-scrollbar {
  display: none;
}

.ak-attr-cpill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(7, 93, 58, 0.18);
  background: #f3f8f5;
  color: #234335;
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.ak-attr-cpill.is-active {
  background: #075d3a;
  color: #ffffff;
  border-color: #075d3a;
}

.ak-attr-cpill.is-nearby-pill {
  border-style: dashed;
}

.ak-attr-reset-inline {
  background: transparent;
  border: 0;
  color: #b91c1c;
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ak-attr-reset-inline:hover {
  text-decoration: underline;
}

/* Toolbar & Count */
.ak-attr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ak-attr-count-text {
  margin: 0;
  font-size: 14px;
  color: #2f4f41;
}

/* Desktop Grid: 4 Cards Per Row (Requirement 2.8) */
.ak-attr-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.ak-attr-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: #ffffff;
  border: 1px solid rgba(7, 93, 58, 0.11);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(7, 93, 58, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.ak-attr-card[hidden] {
  display: none !important;
}

.ak-attr-card:hover {
  transform: translateY(-3px);
  border-color: rgba(7, 93, 58, 0.28);
  box-shadow: 0 10px 24px rgba(7, 93, 58, 0.11);
}

.ak-attr-card-media {
  position: relative;
  display: block;
  width: 100%;
  height: 152px;
  background: #d9ece3;
  overflow: hidden;
  flex-shrink: 0;
}

.ak-attr-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.ak-attr-card:hover .ak-attr-card-img {
  transform: scale(1.04);
}

.ak-attr-card-cat {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 3px 9px;
  background: rgba(7, 93, 58, 0.88);
  color: #ffffff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}

.ak-attr-card-cat.is-nearby {
  background: rgba(180, 83, 9, 0.92);
}

.ak-attr-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 13px 14px 15px;
  min-width: 0;
}

.ak-attr-card-loc {
  margin: 0 0 5px;
  font-size: 11.8px;
  font-weight: 700;
  color: #075d3a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-attr-card-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.32;
  color: #0c261b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.64em;
}

.ak-attr-card-title-link {
  color: inherit;
  text-decoration: none;
}

.ak-attr-card-title-link:hover {
  color: #075d3a;
}

.ak-attr-card-desc {
  margin: 0 0 13px;
  font-size: 12.8px;
  line-height: 1.48;
  color: #466356;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.95em;
}

.ak-attr-card-footer {
  margin-top: auto;
}

.ak-attr-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 36px;
  padding: 7px 14px;
  background: #eaf5ef;
  color: #075d3a !important;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.ak-attr-card:hover .ak-attr-card-btn,
.ak-attr-card-btn:hover {
  background: #075d3a;
  color: #ffffff !important;
}

.ak-attr-loadmore-wrap {
  text-align: center;
  margin-top: 24px;
}

.ak-attr-loadmore-wrap[hidden] {
  display: none !important;
}

.ak-attr-loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  background: #ffffff;
  color: #075d3a;
  border: 1.5px solid #075d3a;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ak-attr-loadmore-btn:hover {
  background: #075d3a;
  color: #ffffff;
}

.ak-attr-empty {
  text-align: center;
  background: #ffffff;
  border: 1px dashed rgba(7, 93, 58, 0.24);
  border-radius: 18px;
  padding: 40px 20px;
  margin-top: 12px;
}

.ak-attr-empty[hidden] {
  display: none !important;
}

.ak-attr-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.ak-attr-empty-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: #0c261b;
}

.ak-attr-empty-desc {
  margin: 0 auto 18px;
  max-width: 460px;
  font-size: 14px;
  color: #466356;
}

.ak-attr-reset-btn {
  padding: 9px 22px;
  background: #075d3a;
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}


/* ==========================================================================
   PART 3: SINGLE ATTRACTION DETAIL PAGE (v4.6.0)
   Scoped under .ak-sattr-*
   ========================================================================== */
.ak-sattr-page {
  background: #f4f8f6;
  padding-bottom: 64px;
  overflow-x: clip;
}

.ak-sattr-topbar-wrap {
  background: #ffffff;
  border-bottom: 1px solid rgba(7, 93, 58, 0.10);
  padding: 10px 0;
}

.ak-sattr-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ak-sattr-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}

.ak-sattr-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #f2f9f5;
  color: #075d3a;
  border: 1.5px solid #075d3a;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.ak-sattr-back-btn:hover {
  background: #075d3a;
  color: #ffffff;
  text-decoration: none;
}

.ak-sattr-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.8px;
  color: #49685a;
  flex-wrap: wrap;
}

.ak-sattr-breadcrumb a {
  color: #075d3a;
  text-decoration: none;
  font-weight: 600;
}

.ak-sattr-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ak-sattr-util-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(7, 93, 58, 0.18);
  background: #ffffff;
  color: #1f3d30;
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 700;
  cursor: pointer;
}

.ak-sattr-util-btn:hover {
  background: #eaf5ef;
  border-color: #075d3a;
}

.ak-sattr-main {
  padding-top: 22px;
}

.ak-sattr-hero-card {
  background: #ffffff;
  border: 1px solid rgba(7, 93, 58, 0.11);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: 0 4px 18px rgba(7, 93, 58, 0.05);
}

.ak-sattr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ak-sattr-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.ak-sattr-badge.is-cat {
  background: #075d3a;
  color: #ffffff;
}

.ak-sattr-badge.is-loc {
  background: #eaf5ef;
  color: #075d3a;
}

.ak-sattr-title {
  margin: 0 0 8px;
  font-size: clamp(24px, 3.1vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  color: #0c261b;
}

.ak-sattr-subtitle {
  margin: 0 0 18px;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.55;
  color: #365648;
}

.ak-sattr-main-photo-wrap {
  width: 100%;
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  background: #d9ece3;
}

.ak-sattr-main-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-sattr-thumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.ak-sattr-thumb-btn {
  width: 86px;
  height: 58px;
  border-radius: 10px;
  overflow: hidden;
  border: 2.5px solid transparent;
  padding: 0;
  background: #d9ece3;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.72;
  transition: opacity 0.16s ease, border-color 0.16s ease;
}

.ak-sattr-thumb-btn.is-active,
.ak-sattr-thumb-btn:hover {
  opacity: 1;
  border-color: #075d3a;
}

.ak-sattr-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2-Column Content Grid */
.ak-sattr-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(290px, 1fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 28px;
}

.ak-sattr-col-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ak-sattr-card {
  background: #ffffff;
  border: 1px solid rgba(7, 93, 58, 0.10);
  border-radius: 18px;
  padding: 20px 22px;
}

.ak-sattr-card.is-highlight {
  background: #eff8f3;
  border-color: rgba(7, 93, 58, 0.18);
}

.ak-sattr-sec-title {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 800;
  color: #0c261b;
}

.ak-sattr-prose p,
.ak-sattr-prose-p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: #234235;
}

.ak-sattr-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ak-sattr-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #1f3d30;
  line-height: 1.5;
}

.ak-sattr-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #075d3a;
  color: #ffffff;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ak-sattr-tips-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ak-sattr-tip-box {
  background: #f5f9f7;
  border: 1px solid rgba(7, 93, 58, 0.11);
  border-radius: 14px;
  padding: 14px;
}

.ak-sattr-tip-box.is-tip {
  background: #fffbeb;
  border-color: rgba(217, 119, 6, 0.22);
}

.ak-sattr-tip-box h3 {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 800;
  color: #0c261b;
}

.ak-sattr-tip-box p {
  margin: 0;
  font-size: 13.2px;
  line-height: 1.55;
  color: #365648;
}

/* Sidebar */
.ak-sattr-side-card {
  background: #ffffff;
  border: 1px solid rgba(7, 93, 58, 0.12);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(7, 93, 58, 0.05);
}

.ak-sattr-side-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  color: #0c261b;
}

.ak-sattr-info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.ak-sattr-info-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(7, 93, 58, 0.12);
}

.ak-sattr-info-lbl {
  font-size: 12px;
  font-weight: 600;
  color: #547264;
}

.ak-sattr-info-val {
  font-size: 13.8px;
  font-weight: 700;
  color: #0c261b;
  line-height: 1.45;
}

.ak-sattr-info-val a {
  color: #075d3a;
  text-decoration: none;
}

.ak-sattr-side-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ak-sattr-map-cta,
.ak-sattr-upz-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none !important;
  text-align: center;
}

.ak-sattr-map-cta {
  background: #075d3a;
  color: #ffffff !important;
}

.ak-sattr-map-cta:hover {
  background: #05472c;
}

.ak-sattr-upz-cta {
  background: #eaf5ef;
  color: #075d3a !important;
}

.ak-sattr-nearby-sec {
  margin-top: 12px;
}

.ak-sattr-nearby-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ak-sattr-all-link {
  color: #075d3a;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (1024px, 768px, 414px, 390px, 375px, 360px, 320px)
   ========================================================================== */
@media (max-width: 1023px) {
  /* Tablet Carousel: ~2.6 cards visible */
  .ak-hattr-card {
    width: 248px;
    flex: 0 0 248px;
  }

  .ak-attr-filter-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Tablet Directory Grid: 3 Cards Per Row */
  .ak-attr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .ak-sattr-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ak-hattr-section {
    margin-top: 20px;
    margin-bottom: 22px;
  }

  .ak-hattr-header {
    gap: 10px;
    margin-bottom: 12px;
  }

  .ak-hattr-title {
    font-size: 19px;
  }

  .ak-hattr-subtitle {
    font-size: 12.5px;
  }

  .ak-hattr-arrow-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .ak-hattr-viewall-btn {
    min-height: 34px;
    padding: 5px 14px;
    font-size: 12.5px;
  }

  .ak-hattr-track {
    gap: 12px;
  }

  /* Mobile Carousel: ~1.65–1.85 cards visible (1.5–2 cards visible depending on width) */
  .ak-hattr-card {
    width: clamp(195px, 56vw, 224px);
    flex: 0 0 clamp(195px, 56vw, 224px);
    border-radius: 14px;
  }

  .ak-hattr-card-media {
    height: 122px;
  }

  .ak-hattr-card-badge {
    top: 7px;
    left: 7px;
    padding: 2px 8px;
    font-size: 10px;
  }

  .ak-hattr-card-body {
    padding: 10px 11px 11px;
    gap: 6px;
  }

  .ak-hattr-card-title {
    font-size: 13.8px;
    margin-bottom: 3px;
  }

  .ak-hattr-card-loc {
    font-size: 11px;
  }

  .ak-hattr-card-arrow {
    width: 26px;
    height: 26px;
    font-size: 12.5px;
  }

  /* Directory Mobile Hero & Filters */
  .ak-attr-dir,
  .ak-sattr-page {
    padding-bottom: 80px;
  }

  .ak-attr-hero {
    padding: 16px 0 36px;
  }

  .ak-attr-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(239, 248, 244, 0.96) 0%,
      rgba(239, 248, 244, 0.90) 65%,
      rgba(239, 248, 244, 0.80) 100%
    );
  }

  .ak-attr-hero-title {
    font-size: 23px;
  }

  .ak-attr-hero-desc {
    font-size: 13px;
  }

  .ak-attr-filter-panel {
    margin-top: -18px;
    padding: 12px;
    border-radius: 14px;
  }

  .ak-attr-filter-top {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Strictly 2 Cards Per Row on Mobile Directory (Requirement 2.7) */
  .ak-attr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ak-attr-card {
    border-radius: 13px;
  }

  .ak-attr-card-media {
    height: 104px;
  }

  .ak-attr-card-cat {
    top: 6px;
    left: 6px;
    padding: 2px 7px;
    font-size: 9.5px;
  }

  .ak-attr-card-body {
    padding: 9px 10px 11px;
  }

  .ak-attr-card-loc {
    font-size: 10.2px;
    margin-bottom: 3px;
  }

  .ak-attr-card-title {
    font-size: 13.5px;
    margin-bottom: 4px;
  }

  .ak-attr-card-desc {
    font-size: 11.2px;
    line-height: 1.38;
    margin-bottom: 9px;
  }

  .ak-attr-card-btn {
    min-height: 31px;
    padding: 5px 10px;
    font-size: 11.5px;
    justify-content: center;
    gap: 5px;
  }

  /* Single Attraction Mobile */
  .ak-sattr-hero-card {
    padding: 14px;
    border-radius: 15px;
  }

  .ak-sattr-main-photo-wrap {
    height: 210px;
    border-radius: 12px;
  }

  .ak-sattr-card {
    padding: 15px;
    border-radius: 14px;
  }

  .ak-sattr-tips-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 359px) {
  .ak-hattr-card {
    width: 184px;
    flex: 0 0 184px;
  }

  .ak-attr-grid {
    gap: 8px;
  }

  .ak-attr-card-media {
    height: 92px;
  }

  .ak-attr-card-title {
    font-size: 12.6px;
  }
}


.ak-sattr-main-photo-wrap {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  background: #d9ece3;
}

.ak-sattr-lightbox-trigger {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(12, 38, 27, 0.78);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}

.ak-sattr-lightbox-trigger:hover {
  background: #075d3a;
  transform: translateY(-1px);
}

.ak-sattr-lead-p {
  font-size: 15.2px !important;
  font-weight: 700;
  color: #075d3a !important;
  margin-bottom: 10px !important;
}

.ak-sattr-sec-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ak-sattr-gallery-hint {
  font-size: 12.2px;
  font-weight: 600;
  color: #547264;
}

.ak-sattr-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ak-sattr-grid-photo-btn {
  position: relative;
  display: block;
  width: 100%;
  height: 150px;
  padding: 0;
  border: 1px solid rgba(7, 93, 58, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #d9ece3;
  cursor: pointer;
}

.ak-sattr-grid-photo-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.28s ease;
}

.ak-sattr-grid-photo-btn:hover img {
  transform: scale(1.05);
}

.ak-sattr-grid-zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(12, 38, 27, 0.74);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.ak-sattr-inline-map-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(7, 93, 58, 0.14);
}

.ak-sattr-inline-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #eaf5ef;
  color: #075d3a !important;
  border: 1px solid rgba(7, 93, 58, 0.20);
  font-size: 13.2px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.16s ease, color 0.16s ease;
}

.ak-sattr-inline-map-btn:hover {
  background: #075d3a;
  color: #ffffff !important;
}

.ak-sattr-tip-box.is-instruction {
  background: #f0f7ff;
  border-color: rgba(2, 132, 199, 0.22);
  grid-column: 1 / -1;
}

/* Lightbox Modal */
.ak-sattr-lightbox[hidden] {
  display: none !important;
}

.ak-sattr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(8, 22, 16, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ak-sattr-lb-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.ak-sattr-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.ak-sattr-lb-nav.is-prev {
  left: 18px;
}

.ak-sattr-lb-nav.is-next {
  right: 18px;
}

.ak-sattr-lb-stage {
  max-width: min(980px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ak-sattr-lb-img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

.ak-sattr-lb-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  color: #e6f4ed;
  font-size: 13.5px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .ak-sattr-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .ak-sattr-grid-photo-btn {
    height: 112px;
  }
  .ak-sattr-lightbox-trigger {
    right: 10px;
    bottom: 10px;
    padding: 5px 11px;
    font-size: 11.5px;
  }
}




/* ==========================================================================
   AMAR KHULNA v4.9.0 — PREMIUM HOMEPAGE REDESIGN & COLOR-COORDINATED SECTIONS
   Global Design Tokens:
   - Deep Emerald Green: #075B40
   - Dark Forest Green: #103D2C
   - Soft Mint: #EAF8F1
   - Clean White: #FFFFFF
   - Premium Off-White: #F7FAF8
   - Text Dark: #172B24
   - Muted Text: #64756C
   ========================================================================== */

body.home {
  background-color: #F7FAF8;
  color: #172B24;
  overflow-x: clip;
}

/* Entrance Reveal Animations (250-550ms, prefers-reduced-motion safe) */
@media (prefers-reduced-motion: no-preference) {
  .ak-reveal-sec {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1), transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .ak-reveal-sec.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 1. Desktop Top Utility Bar */
.ak-top-infobar {
  background: #103D2C;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12.2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.ak-top-infobar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  gap: 12px;
}

.ak-top-infobar-left,
.ak-top-infobar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ak-top-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}

.ak-top-loc svg {
  width: 13px;
  height: 13px;
  color: #34D399;
}

.ak-top-sep {
  opacity: 0.35;
}

.ak-top-infobar-right a {
  color: rgba(255, 255, 255, 0.90);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.16s ease;
}

.ak-top-infobar-right a:hover {
  color: #FFFFFF;
}

.ak-top-socials {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}

.ak-top-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

.ak-top-socials a:hover {
  background: #075B40;
}

.ak-top-socials svg {
  width: 12px;
  height: 12px;
}

/* 2. Section 2: Premium Hero Banner (.ak-hp-hero) */
.ak-hp-hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0 46px;
  background: #0c2b1f;
  color: #FFFFFF;
}

.ak-hp-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ak-hp-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

.ak-hp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    94deg,
    rgba(234, 248, 241, 0.94) 0%,
    rgba(234, 248, 241, 0.84) 44%,
    rgba(16, 61, 44, 0.42) 100%
  );
}

.ak-hp-hero-inner {
  position: relative;
  z-index: 2;
}

.ak-hp-hero-top-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.ak-hp-hero-copy {
  max-width: 680px;
}

.ak-hp-hero-eyebrow {
  margin: 0 0 4px;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 800;
  color: #172B24;
}

.ak-hp-hero-title {
  margin: 0 0 8px;
  font-size: clamp(34px, 4.8vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.ak-hp-title-green {
  color: #075B40;
}

.ak-hp-title-red {
  color: #E11D48;
}

.ak-hp-hero-subtitle {
  margin: 0 0 20px;
  font-size: clamp(14px, 1.45vw, 17px);
  font-weight: 600;
  line-height: 1.5;
  color: #1F3B30;
}

.ak-hp-hero-pride {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  color: #172B24;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(7, 91, 64, 0.16);
}

.ak-hp-hero-pride span {
  font-size: 14px;
  font-weight: 700;
  color: #075B40;
}

.ak-hp-hero-pride strong {
  font-size: 18px;
  font-weight: 800;
  color: #103D2C;
}

.ak-hp-search-wrap {
  max-width: 760px;
}

.ak-hp-search-pill {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 5px 6px 5px 16px;
  box-shadow: 0 12px 30px rgba(7, 91, 64, 0.16);
  border: 1.5px solid rgba(7, 91, 64, 0.20);
  gap: 6px;
}

.ak-hp-search-icon {
  display: inline-flex;
  align-items: center;
  color: #64756C;
  flex-shrink: 0;
}

.ak-hp-search-icon svg {
  width: 19px;
  height: 19px;
}

.ak-hp-search-pill input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  padding: 9px 6px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: #172B24;
  outline: none !important;
  box-shadow: none !important;
}

.ak-hp-cat-select-wrap,
.ak-hp-loc-select-wrap {
  flex: 0 0 auto;
  border-left: 1px solid #E2EBE6;
  padding-left: 6px;
}

.ak-hp-cat-select-wrap select,
.ak-hp-loc-select-wrap select {
  border: none !important;
  background: transparent !important;
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 700;
  color: #075B40;
  padding: 6px 6px;
  cursor: pointer;
  outline: none;
  max-width: 145px;
}

.ak-hp-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #075B40 0%, #087A58 100%);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ak-hp-search-btn svg {
  width: 15px;
  height: 15px;
}

.ak-hp-search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(7, 91, 64, 0.32);
}

.ak-hp-popular-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.ak-hp-pop-label {
  font-size: 13px;
  font-weight: 800;
  color: #172B24;
  background: rgba(255, 255, 255, 0.78);
  padding: 3px 10px;
  border-radius: 999px;
}

.ak-hp-pop-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.ak-hp-pop-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(7, 91, 64, 0.22);
  color: #172B24 !important;
  font-size: 12.6px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.ak-hp-pop-pill.is-blood {
  background: #FFF1F2;
  border-color: #FDA4AF;
  color: #BE123C !important;
}

.ak-hp-pop-pill:hover {
  background: #075B40;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* Main Container & Section Block Shared Spacing */
.ak-hp-main-container {
  padding-top: 22px;
  padding-bottom: 48px;
}

.ak-hp-sec-block {
  border-radius: 22px;
  padding: 24px 22px;
  margin-bottom: 26px;
  box-shadow: 0 8px 26px rgba(16, 61, 44, 0.05);
}

/* Shared Section Header (.ak-hp-sec-header) */
.ak-hp-sec-header {
  margin-bottom: 18px;
}

.ak-hp-sec-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ak-hp-sec-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ak-hp-sec-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #DCFCE7;
  color: #075B40;
  flex-shrink: 0;
}

.ak-hp-sec-emblem svg {
  width: 20px;
  height: 20px;
}

.ak-hp-sec-emblem.is-crimson { background: #FFE4E6; color: #E11D48; }
.ak-hp-sec-emblem.is-green   { background: #D1FAE5; color: #075B40; }
.ak-hp-sec-emblem.is-blue    { background: #DBEAFE; color: #1D4ED8; }
.ak-hp-sec-emblem.is-peach   { background: #FFEDD5; color: #EA580C; }
.ak-hp-sec-emblem.is-lavender{ background: #E0E7FF; color: #4338CA; }
.ak-hp-sec-emblem.is-mint    { background: #CCFBF1; color: #0F766E; }

.ak-hp-sec-title {
  margin: 0;
  font-size: clamp(20px, 2.25vw, 25px);
  font-weight: 800;
  line-height: 1.22;
  color: #172B24;
}

.ak-hp-sec-subtitle {
  margin: 4px 0 0 48px;
  font-size: 13.8px;
  font-weight: 500;
  color: #52665D;
  line-height: 1.45;
}

.ak-hp-sec-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 18px;
  border-radius: 999px;
  background: #075B40;
  color: #FFFFFF !important;
  font-size: 13.2px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(7, 91, 64, 0.20);
  transition: background 0.18s ease, transform 0.18s ease;
}

.ak-hp-sec-btn:hover {
  background: #103D2C;
  transform: translateY(-1px);
}

/* ==========================================================================
   SECTION 3 — IMPORTANT SERVICES ("জরুরি ও গুরুত্বপূর্ণ সেবা")
   Background: Soft blush pink/red (#FFF5F6 -> #FDECEF)
   ========================================================================== */
.ak-hp-emergency-sec {
  background: linear-gradient(145deg, #FFF6F7 0%, #FDECEF 100%);
  border: 1px solid #FBCFE8;
}

/* Desktop: 6 cards per row (12 cards total in 2 balanced rows) or 5-6 cards depending on width */
.ak-hp-imp-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.ak-hp-imp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px 10px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(16, 61, 44, 0.09);
  text-decoration: none !important;
  color: #172B24 !important;
  box-shadow: 0 4px 14px rgba(16, 61, 44, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-width: 0;
}

.ak-hp-imp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(16, 61, 44, 0.10);
  border-color: rgba(7, 91, 64, 0.28);
}

.ak-hp-imp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  margin-bottom: 8px;
  background: #EAF8F1;
  color: #075B40;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.ak-hp-imp-card:hover .ak-hp-imp-icon {
  transform: scale(1.06);
}

.ak-hp-imp-icon svg {
  width: 24px;
  height: 24px;
}

.ak-hp-imp-label {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  color: #172B24;
  margin-bottom: 3px;
}

.ak-hp-imp-sub {
  font-size: 11.2px;
  line-height: 1.35;
  color: #64756C;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Special Blood Donor Card: Sophisticated Red Gradient */
.ak-hp-imp-card.is-blood-featured {
  background: linear-gradient(145deg, #E11D48 0%, #BE123C 100%);
  border-color: #9F1239;
  color: #FFFFFF !important;
  box-shadow: 0 8px 22px rgba(225, 29, 72, 0.26);
}

.ak-hp-imp-card.is-blood-featured .ak-hp-imp-icon {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

.ak-hp-imp-card.is-blood-featured .ak-hp-imp-label {
  color: #FFFFFF;
}

.ak-hp-imp-card.is-blood-featured .ak-hp-imp-sub {
  color: rgba(255, 255, 255, 0.90);
}

.ak-hp-imp-blood-pill {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.20);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
}

/* Card Icon Color Tones */
.ak-hp-imp-card.is-blue .ak-hp-imp-icon    { background: #DBEAFE; color: #1D4ED8; }
.ak-hp-imp-card.is-emerald .ak-hp-imp-icon { background: #D1FAE5; color: #059669; }
.ak-hp-imp-card.is-amber .ak-hp-imp-icon   { background: #FEF3C7; color: #D97706; }
.ak-hp-imp-card.is-purple .ak-hp-imp-icon  { background: #F3E8FF; color: #7C3AED; }
.ak-hp-imp-card.is-orange .ak-hp-imp-icon  { background: #FFEDD5; color: #EA580C; }
.ak-hp-imp-card.is-rose .ak-hp-imp-icon    { background: #FFE4E6; color: #E11D48; }
.ak-hp-imp-card.is-teal .ak-hp-imp-icon    { background: #CCFBF1; color: #0F766E; }
.ak-hp-imp-card.is-sky .ak-hp-imp-icon     { background: #E0F2FE; color: #0284C7; }
.ak-hp-imp-card.is-green .ak-hp-imp-icon   { background: #DCFCE7; color: #075B40; }
.ak-hp-imp-card.is-indigo .ak-hp-imp-icon  { background: #E0E7FF; color: #4338CA; }
.ak-hp-imp-card.is-slate .ak-hp-imp-icon   { background: #E2E8F0; color: #334155; }

/* ==========================================================================
   SECTION 4 — NINE UPAZILAS OF KHULNA ("খুলনার ৯টি উপজেলা")
   Background: Soft mint-green (#EAF8F1 -> #DFF3E9)
   ========================================================================== */
.ak-hp-upazilas-sec {
  background: linear-gradient(145deg, #EAF8F1 0%, #DFF3E9 100%) !important;
  border: 1px solid #B7E4CE !important;
  min-height: 0 !important;
}

.ak-hp-upz-viewport {
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.ak-hp-upz-track {
  display: grid;
  grid-template-columns: repeat(9, minmax(140px, 1fr));
  gap: 12px;
}

.ak-hp-upz-card {
  background: #FFFFFF;
  border: 1px solid rgba(7, 91, 64, 0.14);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(7, 91, 64, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ak-hp-upz-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(7, 91, 64, 0.12);
  border-color: #075B40;
}

.ak-hp-upz-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none !important;
  color: inherit !important;
}

.ak-hp-upz-media {
  position: relative;
  width: 100%;
  height: 106px;
  overflow: hidden;
  background: #D1EADF;
}

.ak-hp-upz-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.ak-hp-upz-card:hover .ak-hp-upz-media img {
  transform: scale(1.06);
}

.ak-hp-upz-union-pill {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(16, 61, 44, 0.80);
  color: #FFFFFF;
  font-size: 9.8px;
  font-weight: 600;
}

.ak-hp-upz-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.ak-hp-upz-name {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 800;
  color: #172B24;
  text-align: center;
}

.ak-hp-upz-desc {
  margin: 0 0 7px;
  font-size: 11px;
  line-height: 1.35;
  color: #52665D;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ak-hp-upz-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11.2px;
  font-weight: 700;
  color: #075B40;
}

/* ==========================================================================
   SECTION 5 — TOURIST ATTRACTIONS ("খুলনার দর্শনীয় স্থান")
   Background: Warm cream / light golden (#FFFDF4 -> #FDF6E2)
   ========================================================================== */
.ak-hattr-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #FFFDF4 0%, #FDF6E2 100%);
  border: 1px solid #F3E3B8;
  border-radius: 22px;
  padding: 24px 22px 22px;
  margin-top: 0;
  margin-bottom: 26px;
  box-shadow: 0 8px 26px rgba(180, 130, 30, 0.06);
}

.ak-hattr-decor {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0) 70%);
  pointer-events: none;
}

.ak-hattr-header {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 16px;
}

.ak-hattr-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.ak-hattr-heading-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ak-hattr-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #FEF3C7;
  border: 1px solid rgba(217, 119, 6, 0.25);
  flex-shrink: 0;
}

.ak-hattr-title {
  margin: 0;
  font-size: clamp(20px, 2.25vw, 25px);
  font-weight: 800;
  line-height: 1.22;
  color: #172B24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-hattr-subtitle {
  margin: 4px 0 0 48px;
  font-size: 13.8px;
  font-weight: 500;
  line-height: 1.45;
  color: #5C5338;
}

.ak-hattr-viewall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 18px;
  border-radius: 999px;
  background: #075B40;
  color: #FFFFFF !important;
  font-size: 13.2px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(7, 91, 64, 0.20);
  transition: background 0.18s ease, transform 0.18s ease;
}

.ak-hattr-viewall-btn:hover {
  background: #103D2C;
  transform: translateY(-1px);
}

.ak-hattr-viewport {
  position: relative;
  z-index: 2;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px;
}

.ak-hattr-viewport::-webkit-scrollbar {
  display: none;
}

.ak-hattr-viewport.is-dragging {
  cursor: grabbing;
}

.ak-hattr-track {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: max-content;
}

/* Desktop: ~4.5 to 5 cards visible */
.ak-hattr-card {
  width: 244px;
  flex: 0 0 244px;
  background: #FFFFFF;
  border: 1px solid #EFE4C4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(120, 90, 20, 0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.ak-hattr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(7, 91, 64, 0.14);
  border-color: #075B40;
}

.ak-hattr-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none !important;
  color: inherit !important;
}

.ak-hattr-card-media {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: #EFE7D3;
}

.ak-hattr-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.ak-hattr-card:hover .ak-hattr-card-img {
  transform: scale(1.06);
}

.ak-hattr-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 32, 22, 0.18) 0%, rgba(6, 32, 22, 0) 45%, rgba(6, 32, 22, 0.28) 100%);
  pointer-events: none;
}

.ak-hattr-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(7, 91, 64, 0.90);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.ak-hattr-card-body {
  padding: 12px 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.ak-hattr-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.32;
  color: #172B24;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ak-hattr-card-meta-row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.ak-hattr-card-loc {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #64756C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-hattr-pin {
  display: inline-flex;
  align-items: center;
  color: #E11D48;
  flex-shrink: 0;
}

.ak-hattr-card-cta {
  font-size: 11.5px;
  font-weight: 700;
  color: #075B40;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
   SECTION 6 — LATEST KHULNA NEWS ("খুলনার সর্বশেষ খবর")
   Background: Soft sky-blue (#EFF7FF -> #E3F0FF)
   Desktop: 4 cards/row; Mobile: 2 compact cards/row
   ========================================================================== */
.ak-hp-news-sec {
  background: linear-gradient(145deg, #EFF7FF 0%, #E3F0FF 100%);
  border: 1px solid #BFDBFE;
}

.ak-hp-news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ak-hp-news-card {
  background: #FFFFFF;
  border: 1px solid rgba(29, 78, 216, 0.12);
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}

.ak-hp-news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(29, 78, 216, 0.10);
}

.ak-hp-news-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none !important;
  color: inherit !important;
}

.ak-hp-news-media {
  position: relative;
  height: 140px;
  overflow: hidden;
  background: #DBEAFE;
}

.ak-hp-news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-hp-news-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(29, 78, 216, 0.90);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
}

.ak-hp-news-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

.ak-hp-news-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.38;
  color: #172B24;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ak-hp-news-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.8px;
  color: #64756C;
  font-weight: 600;
}

.ak-hp-news-read {
  color: #1D4ED8;
  font-weight: 700;
}

.ak-hp-empty-box {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  border: 1px dashed #93C5FD;
}

.ak-hp-empty-box p {
  margin: 0 0 8px;
  font-size: 13.8px;
  color: #334155;
}

.ak-hp-inline-link {
  font-size: 13.5px;
  font-weight: 700;
  color: #1D4ED8;
  text-decoration: none;
}

/* ==========================================================================
   SECTION 7 — SHOPPING, MARKETS AND LOCAL BUSINESS ("খুলনার বাজার ও কেনাকাটা")
   Background: Soft peach (#FFF7F2 -> #FDECE2)
   ========================================================================== */
.ak-hp-markets-sec {
  background: linear-gradient(145deg, #FFF7F2 0%, #FDECE2 100%);
  border: 1px solid #FED7AA;
}

.ak-hp-markets-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ak-hp-market-card {
  background: #FFFFFF;
  border: 1px solid rgba(234, 88, 12, 0.14);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}

.ak-hp-market-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(234, 88, 12, 0.10);
}

.ak-hp-market-media {
  position: relative;
  display: block;
  height: 142px;
  overflow: hidden;
  background: #FFEDD5;
}

.ak-hp-market-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.ak-hp-market-card:hover .ak-hp-market-media img {
  transform: scale(1.05);
}

.ak-hp-market-cat {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(194, 65, 12, 0.90);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
}

.ak-hp-market-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.ak-hp-market-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.32;
}

.ak-hp-market-title a {
  color: #172B24 !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ak-hp-market-loc {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.2px;
  font-weight: 600;
  color: #64756C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-hp-market-actions {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ak-hp-mbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  border-radius: 9px;
  font-size: 12.2px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.16s ease;
}

.ak-hp-mbtn.is-primary {
  flex: 1 1 auto;
  background: #075B40;
  color: #FFFFFF !important;
  padding: 5px 12px;
}

.ak-hp-mbtn.is-primary:hover {
  background: #103D2C;
}

.ak-hp-mbtn.is-icon {
  width: 34px;
  height: 34px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  color: #C2410C !important;
  flex-shrink: 0;
}

.ak-hp-mbtn.is-icon svg {
  width: 15px;
  height: 15px;
}

/* ==========================================================================
   SECTION 8 — EDUCATION AND HEALTHCARE ("শিক্ষা ও স্বাস্থ্যসেবা")
   Background: Very light lavender/blue (#F4F5FF -> #EAEBFF)
   ========================================================================== */
.ak-hp-eduhealth-sec {
  background: linear-gradient(145deg, #F4F5FF 0%, #EAEBFF 100%);
  border: 1px solid #C7D2FE;
}

.ak-hp-eh-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ak-hp-eh-card {
  background: #FFFFFF;
  border: 1px solid rgba(67, 56, 202, 0.12);
  border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-width: 0;
}

.ak-hp-eh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(67, 56, 202, 0.10);
  border-color: #4338CA;
}

.ak-hp-eh-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 18px;
  text-decoration: none !important;
  color: inherit !important;
}

.ak-hp-eh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ak-hp-eh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #EEF2FF;
  color: #4338CA;
}

.ak-hp-eh-icon svg {
  width: 22px;
  height: 22px;
}

.ak-hp-eh-card.is-blue .ak-hp-eh-icon    { background: #DBEAFE; color: #1D4ED8; }
.ak-hp-eh-card.is-teal .ak-hp-eh-icon    { background: #CCFBF1; color: #0F766E; }
.ak-hp-eh-card.is-indigo .ak-hp-eh-icon  { background: #E0E7FF; color: #4338CA; }
.ak-hp-eh-card.is-purple .ak-hp-eh-icon  { background: #F3E8FF; color: #7C3AED; }
.ak-hp-eh-card.is-emerald .ak-hp-eh-icon { background: #D1FAE5; color: #059669; }
.ak-hp-eh-card.is-amber .ak-hp-eh-icon   { background: #FEF3C7; color: #D97706; }

.ak-hp-eh-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}

.ak-hp-eh-title {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 800;
  color: #172B24;
}

.ak-hp-eh-desc {
  margin: 0 0 12px;
  font-size: 12.8px;
  line-height: 1.5;
  color: #52665D;
}

.ak-hp-eh-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.8px;
  font-weight: 700;
  color: #075B40;
}

/* ==========================================================================
   SECTION 9 — JOBS AND OPPORTUNITIES ("খুলনার চাকরি ও সুযোগসমূহ")
   Background: Soft neutral mint (#F0FAF5 -> #E4F5EC)
   Mobile: 2 cards per row at supported widths
   ========================================================================== */
.ak-hp-jobs-sec {
  background: linear-gradient(145deg, #F0FAF5 0%, #E4F5EC 100%);
  border: 1px solid #A7F3D0;
}

.ak-hp-jobs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ak-hp-job-card {
  background: #FFFFFF;
  border: 1px solid rgba(7, 91, 64, 0.14);
  border-radius: 16px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}

.ak-hp-job-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(7, 91, 64, 0.10);
}

.ak-hp-job-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.ak-hp-job-type-badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: #DCFCE7;
  color: #075B40;
  font-size: 10.8px;
  font-weight: 700;
}

.ak-hp-job-deadline {
  font-size: 11px;
  font-weight: 600;
  color: #B91C1C;
}

.ak-hp-job-title {
  margin: 0;
  font-size: 15.2px;
  font-weight: 800;
  line-height: 1.32;
}

.ak-hp-job-title a {
  color: #172B24 !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ak-hp-job-org {
  margin: 0;
  font-size: 12.8px;
  font-weight: 700;
  color: #075B40;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-hp-job-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #52665D;
}

.ak-hp-job-salary {
  color: #0F766E;
  font-weight: 700;
}

.ak-hp-job-actions {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ak-hp-jbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
}

.ak-hp-jbtn.is-details {
  flex: 1 1 auto;
  background: #075B40;
  color: #FFFFFF !important;
  padding: 5px 10px;
}

.ak-hp-jbtn.is-call {
  padding: 5px 10px;
  background: #EAF8F1;
  border: 1px solid #A7F3D0;
  color: #075B40 !important;
}

.ak-hp-jbtn.is-call svg {
  width: 13px;
  height: 13px;
}

/* ==========================================================================
   SECTION 10 — COMMUNITY PARTICIPATION ("আপনার তথ্যেই সমৃদ্ধ হবে আমার খুলনা")
   Background: Soft teal-green (#E6F7F3 -> #D5F1EA)
   ========================================================================== */
.ak-hp-community-sec {
  background: linear-gradient(135deg, #E6F7F3 0%, #D5F1EA 100%);
  border: 1px solid #99E2D0;
  margin-bottom: 12px;
}

.ak-hp-comm-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: center;
}

.ak-hp-comm-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(7, 91, 64, 0.12);
  color: #075B40;
  font-size: 12.2px;
  font-weight: 800;
  margin-bottom: 10px;
}

.ak-hp-comm-title {
  margin: 0 0 8px;
  font-size: clamp(21px, 2.5vw, 28px);
  font-weight: 800;
  color: #103D2C;
}

.ak-hp-comm-desc {
  margin: 0 0 18px;
  font-size: 14.2px;
  line-height: 1.6;
  color: #264A3C;
}

.ak-hp-comm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ak-hp-comm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 13.8px;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.ak-hp-comm-btn:hover {
  transform: translateY(-2px);
}

.ak-hp-comm-btn svg {
  width: 16px;
  height: 16px;
}

.ak-hp-comm-btn.is-primary {
  background: #075B40;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(7, 91, 64, 0.25);
}

.ak-hp-comm-btn.is-secondary {
  background: #FFFFFF;
  color: #075B40 !important;
  border: 1.5px solid #075B40;
}

.ak-hp-comm-btn.is-outline {
  background: rgba(255, 255, 255, 0.65);
  color: #103D2C !important;
  border: 1px solid rgba(16, 61, 44, 0.25);
}

.ak-hp-comm-stat-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 20px;
  border: 1px solid rgba(7, 91, 64, 0.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 20px rgba(7, 91, 64, 0.06);
}

.ak-hp-comm-stat-card strong {
  font-size: 20px;
  font-weight: 800;
  color: #075B40;
}

.ak-hp-comm-stat-card span {
  font-size: 13.2px;
  color: #52665D;
  line-height: 1.45;
}

.ak-hp-comm-stat-card a {
  margin-top: 6px;
  font-size: 13.2px;
  font-weight: 700;
  color: #075B40;
  text-decoration: none;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (1280px, 1024px, 768px, 414px, 390px, 375px, 360px, 320px)
   ========================================================================== */
@media (max-width: 1199px) {
  .ak-hp-imp-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ak-hp-upz-track {
    grid-template-columns: repeat(9, 148px);
  }
}

@media (max-width: 991px) {
  .ak-top-infobar {
    display: none;
  }
  .ak-hp-hero-pride {
    display: none;
  }
  /* Tablet: 4 service cards per row */
  .ak-hp-imp-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ak-hp-news-grid,
  .ak-hp-markets-grid,
  .ak-hp-jobs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ak-hp-eh-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ak-hp-comm-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  /* Hero Mobile Optimization */
  .ak-hp-hero {
    padding: 24px 0 32px;
  }
  .ak-hp-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(16, 61, 44, 0.82) 0%,
      rgba(16, 61, 44, 0.72) 100%
    );
  }
  .ak-hp-hero-eyebrow {
    font-size: 14px;
    color: #D1FAE5;
  }
  .ak-hp-hero-title {
    font-size: 30px;
  }
  .ak-hp-title-green {
    color: #FFFFFF;
  }
  .ak-hp-title-red {
    color: #FDA4AF;
  }
  .ak-hp-hero-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 14px;
  }
  .ak-hp-cat-select-wrap,
  .ak-hp-loc-select-wrap {
    display: none;
  }
  .ak-hp-search-pill {
    padding: 4px 5px 4px 12px;
  }
  .ak-hp-search-pill input[type="search"] {
    font-size: 13.5px;
    padding: 7px 4px;
  }
  .ak-hp-search-btn {
    min-height: 38px;
    padding: 6px 15px;
    font-size: 13px;
  }
  .ak-hp-pop-label {
    display: none;
  }
  .ak-hp-popular-row {
    margin-top: 10px;
  }
  .ak-hp-pop-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
    padding-bottom: 2px;
  }
  .ak-hp-pop-pills::-webkit-scrollbar {
    display: none;
  }
  .ak-hp-pop-pill {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 4px 12px;
    font-size: 11.8px;
  }

  /* Main Container & Section Blocks on Mobile */
  .ak-hp-main-container {
    padding-top: 14px;
    padding-bottom: 88px;
  }
  .ak-hp-sec-block,
  .ak-hattr-section {
    padding: 16px 13px !important;
    border-radius: 18px !important;
    margin-bottom: 18px !important;
  }

  /* Section Header on Mobile: Title Left + Button Right on Same Row */
  .ak-hp-sec-top-row,
  .ak-hattr-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .ak-hp-sec-emblem,
  .ak-hattr-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .ak-hp-sec-title,
  .ak-hattr-title {
    font-size: 17px;
  }
  .ak-hp-sec-subtitle,
  .ak-hattr-subtitle {
    margin: 5px 0 0 0;
    font-size: 12px;
  }
  .ak-hp-sec-btn,
  .ak-hattr-viewall-btn {
    min-height: 32px;
    padding: 5px 11px;
    font-size: 11.5px;
    gap: 4px;
  }

  /* Section 3: Important Services — Strictly 4 Compact Cards Per Row on Mobile */
  .ak-hp-imp-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .ak-hp-imp-card {
    padding: 10px 4px;
    border-radius: 13px;
  }
  .ak-hp-imp-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    margin-bottom: 6px;
  }
  .ak-hp-imp-icon svg {
    width: 20px;
    height: 20px;
  }
  .ak-hp-imp-label {
    font-size: 11.4px;
    line-height: 1.2;
    margin-bottom: 0;
    word-break: keep-all;
  }
  .ak-hp-imp-sub,
  .ak-hp-imp-blood-pill {
    display: none;
  }

  /* Section 4: 9 Upazilas Horizontal Swipe on Mobile */
  .ak-hp-upz-track {
    grid-template-columns: repeat(9, 134px);
    gap: 10px;
  }
  .ak-hp-upz-media {
    height: 90px;
  }
  .ak-hp-upz-name {
    font-size: 13.5px;
  }

  /* Section 5: Tourist Attractions Mobile (1.5–2 cards visible) */
  .ak-hattr-track {
    gap: 12px;
  }
  .ak-hattr-card {
    width: clamp(190px, 56vw, 222px);
    flex: 0 0 clamp(190px, 56vw, 222px);
    border-radius: 14px;
  }
  .ak-hattr-card-media {
    height: 122px;
  }
  .ak-hattr-card-body {
    padding: 10px 11px 11px;
  }
  .ak-hattr-card-title {
    font-size: 13.8px;
  }
  .ak-hattr-card-cta {
    display: none;
  }

  /* Section 6 (News), Section 7 (Markets), Section 8 (Edu/Health), Section 9 (Jobs): 2 Compact Cards Per Row on Mobile */
  .ak-hp-news-grid,
  .ak-hp-markets-grid,
  .ak-hp-eh-grid,
  .ak-hp-jobs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .ak-hp-news-media,
  .ak-hp-market-media {
    height: 102px;
  }
  .ak-hp-news-body,
  .ak-hp-market-body,
  .ak-hp-eh-card-link,
  .ak-hp-job-card {
    padding: 10px;
  }
  .ak-hp-news-title,
  .ak-hp-market-title,
  .ak-hp-eh-title,
  .ak-hp-job-title {
    font-size: 13.2px;
  }
  .ak-hp-eh-desc {
    font-size: 11.4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
  }
  .ak-hp-eh-badge {
    display: none;
  }
}

/* Ultra-Narrow 320px - 359px Safeguards */
@media (max-width: 359px) {
  .ak-hp-sec-title,
  .ak-hattr-title {
    font-size: 15.2px;
  }
  .ak-hp-sec-btn,
  .ak-hattr-viewall-btn {
    padding: 4px 9px;
    font-size: 10.8px;
    min-height: 28px;
  }
  .ak-hp-imp-grid {
    gap: 6px;
  }
  .ak-hp-imp-card {
    padding: 8px 3px;
  }
  .ak-hp-imp-icon {
    width: 33px;
    height: 33px;
  }
  .ak-hp-imp-label {
    font-size: 10.2px;
  }
  .ak-hattr-card {
    width: 178px;
    flex: 0 0 178px;
  }
  .ak-hp-news-grid,
  .ak-hp-markets-grid,
  .ak-hp-eh-grid,
  .ak-hp-jobs-grid {
    gap: 8px;
  }
}


/* ==========================================================================
   AMAR KHULNA v5.4.0 — UNIFIED SERVICE DIRECTORY & SEARCH RESULTS (.ak-sdir-*)
   Root Cause Permanently Resolved:
   -Consolidated v5.0/v5.1/v5.2 into a single, conflict-free stylesheet block.
   - Eliminated the un-scoped .ak-sdir-layout { grid-template-columns: 270px minmax(0, 1fr); }
     rule that previously appeared AFTER @media (max-width: 991px) and stole 290px
     on mobile screens.
   - Desktop (1200px+): 270px Left Filter Sidebar + Right Results (3–4 cards per row).
   - Tablet (768px–991px): 1-Column Full-Width Layout + Slide-up Filter Drawer + 3 cards per row.
   - Mobile (320px–767px): 1-Column Full-Width Layout + Slide-up Filter Drawer + Strictly 2 cards per row.
   ========================================================================== */

html,
body {
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  overflow-x: clip !important;
  box-sizing: border-box;
  touch-action: pan-x pan-y;
}

.ak-header,
#main-content,
.ak-global-back-bar,
.ak-sdir-page,
.ak-sdir-hero,
.ak-footer {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.ak-sdir-page {
  background-color: #F4F9F6;
  color: #172B24;
  padding-bottom: 56px;
  overflow-x: clip;
}

/* 1. Hero Section (Centered Container on Desktop, Full-Width on Mobile) */
.ak-sdir-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 0 32px;
  background-color: #DFF2E8;
  background-image: var(--ak-sdir-hero-bg);
  background-size: cover;
  background-position: right center;
  border-bottom: 1px solid rgba(7, 91, 64, 0.12);
}

.ak-sdir-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(232, 246, 239, 0.96) 0%,
    rgba(232, 246, 239, 0.90) 52%,
    rgba(232, 246, 239, 0.45) 100%
  );
  z-index: 0;
}

.ak-hp-hero .ak-container,
.ak-sdir-hero .ak-container {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 64px));
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.ak-sdir-hero-inner,
.ak-hp-hero-inner {
  text-align: left;
}

.ak-sdir-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #365648;
  margin-bottom: 10px;
}

.ak-sdir-bc-home {
  display: inline-flex;
  align-items: center;
  color: #075B40;
  text-decoration: none;
}

.ak-sdir-bc-home svg {
  width: 15px;
  height: 15px;
}

.ak-sdir-bc-sep {
  opacity: 0.55;
}

.ak-sdir-hero-title {
  margin: 0 0 6px;
  max-width: 780px;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.22;
  color: #102A20;
}

.ak-sdir-hero-subtitle {
  margin: 0 0 18px;
  max-width: 780px;
  font-size: clamp(13.5px, 1.4vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  color: #385548;
}

.ak-sdir-hero-search {
  width: 100%;
  max-width: 720px;
}

.ak-sdir-search-box {
  display: flex;
  align-items: center;
  width: 100%;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 5px 6px 5px 16px;
  border: 1.5px solid rgba(7, 91, 64, 0.18);
  box-shadow: 0 10px 26px rgba(7, 91, 64, 0.10);
  gap: 8px;
  box-sizing: border-box;
}

.ak-sdir-search-ico {
  display: inline-flex;
  align-items: center;
  color: #64756C;
  flex-shrink: 0;
}

.ak-sdir-search-ico svg {
  width: 19px;
  height: 19px;
}

.ak-sdir-search-box input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  padding: 8px 4px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: #172B24;
  outline: none !important;
  box-shadow: none !important;
}

.ak-sdir-clear-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #EDF4F0;
  color: #49685A;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.ak-sdir-clear-q[hidden] {
  display: none !important;
}

.ak-sdir-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 7px 22px;
  border-radius: 999px;
  border: none;
  background: #075B40;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.16s ease, transform 0.16s ease;
}

.ak-sdir-search-submit svg {
  width: 15px;
  height: 15px;
}

.ak-sdir-search-submit:hover {
  background: #103D2C;
  transform: translateY(-1px);
}

.ak-sdir-popular-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  width: 100%;
  min-width: 0;
}

.ak-sdir-pop-label {
  font-size: 13px;
  font-weight: 800;
  color: #172B24;
}

.ak-sdir-pop-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.ak-sdir-pop-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(7, 91, 64, 0.18);
  color: #172B24 !important;
  font-size: 12.4px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: background 0.15s ease, color 0.15s ease;
}

.ak-sdir-pop-pill:hover {
  background: #075B40;
  color: #FFFFFF !important;
}

/* 2. Service Category Grid (Desktop: 9 cards/row, Mobile: 5 cards/row) */
.ak-sdir-container {
  padding-top: 22px;
}

.ak-sdir-cat-sec {
  margin-bottom: 22px;
  width: 100%;
  min-width: 0;
}

.ak-sdir-cat-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.ak-sdir-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 13px 8px;
  min-height: 88px;
  border-radius: 15px;
  background: #FFFFFF;
  border: 1px solid #E2EBE6;
  color: #172B24 !important;
  text-decoration: none !important;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(7, 91, 64, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.ak-sdir-cat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(7, 91, 64, 0.10);
  border-color: #075B40;
}

.ak-sdir-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  margin-bottom: 7px;
  background: #EAF8F1;
  color: #075B40;
  font-weight: 800;
  flex-shrink: 0;
}

.ak-sdir-cat-icon svg {
  width: 21px;
  height: 21px;
}

.ak-sdir-cat-lbl-full,
.ak-sdir-cat-lbl-short {
  font-size: 12.4px;
  font-weight: 700;
  line-height: 1.25;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}

.ak-sdir-cat-lbl-short {
  display: none;
}

.ak-sdir-cat-card.is-active,
.ak-sdir-cat-card.is-emerald-solid.is-active {
  background: #075B40 !important;
  border-color: #075B40 !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(7, 91, 64, 0.24);
}

.ak-sdir-cat-card.is-active .ak-sdir-cat-icon {
  background: rgba(255, 255, 255, 0.20) !important;
  color: #FFFFFF !important;
}

.ak-sdir-cat-card.is-blue    { background: #F5F9FF; border-color: #DBEAFE; }
.ak-sdir-cat-card.is-blue .ak-sdir-cat-icon    { background: #DBEAFE; color: #1D4ED8; }

.ak-sdir-cat-card.is-sky     { background: #F2FAFF; border-color: #BAE6FD; }
.ak-sdir-cat-card.is-sky .ak-sdir-cat-icon     { background: #E0F2FE; color: #0284C7; }

.ak-sdir-cat-card.is-rose    { background: #FFF5F6; border-color: #FECDD3; }
.ak-sdir-cat-card.is-rose .ak-sdir-cat-icon    { background: #FFE4E6; color: #E11D48; }
.ak-sdir-cat-card.is-rose .ak-sdir-cat-lbl-full,
.ak-sdir-cat-card.is-rose .ak-sdir-cat-lbl-short { color: #BE123C; }

.ak-sdir-cat-card.is-green   { background: #F2FBF6; border-color: #D1FAE5; }
.ak-sdir-cat-card.is-green .ak-sdir-cat-icon   { background: #D1FAE5; color: #059669; }

.ak-sdir-cat-card.is-orange  { background: #FFF8F1; border-color: #FED7AA; }
.ak-sdir-cat-card.is-orange .ak-sdir-cat-icon  { background: #FFEDD5; color: #EA580C; }

.ak-sdir-cat-card.is-purple  { background: #FAF5FF; border-color: #E9D5FF; }
.ak-sdir-cat-card.is-purple .ak-sdir-cat-icon  { background: #F3E8FF; color: #7C3AED; }

.ak-sdir-cat-card.is-amber   { background: #FFFDF2; border-color: #FDE68A; }
.ak-sdir-cat-card.is-amber .ak-sdir-cat-icon   { background: #FEF3C7; color: #D97706; }

.ak-sdir-cat-card.is-crimson { background: #FFF5F5; border-color: #FECACA; }
.ak-sdir-cat-card.is-crimson .ak-sdir-cat-icon { background: #FEE2E2; color: #DC2626; }

.ak-sdir-cat-card.is-teal    { background: #F0FDFA; border-color: #CCFBF1; }
.ak-sdir-cat-card.is-teal .ak-sdir-cat-icon    { background: #CCFBF1; color: #0F766E; }

.ak-sdir-cat-card.is-emerald { background: #F2FBF7; border-color: #A7F3D0; }
.ak-sdir-cat-card.is-emerald .ak-sdir-cat-icon { background: #DCFCE7; color: #075B40; }

.ak-sdir-cat-card.is-slate,
.ak-sdir-cat-card.is-more-tile { background: #F8FAFC; border-color: #E2E8F0; }
.ak-sdir-cat-card.is-slate .ak-sdir-cat-icon,
.ak-sdir-cat-card.is-more-tile .ak-sdir-cat-icon { background: #E2E8F0; color: #334155; }

/* Mobile Filter Trigger Bar (Hidden on Desktop) */
.ak-sdir-mobile-filter-bar {
  display: none;
  margin-bottom: 16px;
  width: 100%;
}

.ak-sdir-mobile-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  border: none;
  background: #075B40;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(7, 91, 64, 0.22);
}

/* 3. Main 2-Column Layout on Desktop (Left Sidebar 270px + Right Results 1fr) */
.ak-sdir-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.ak-sdir-sidebar,
.ak-sdir-results-col {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.ak-sdir-filter-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ak-sdir-filter-form {
  background: #FFFFFF !important;
  border: 1px solid #E2EBE6 !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 6px 20px rgba(7, 91, 64, 0.05) !important;
  margin: 0 !important;
}

.ak-sdir-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #EBF2EE;
}

.ak-sdir-filter-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  font-weight: 800;
  color: #172B24;
}

.ak-sdir-filter-ico {
  display: inline-flex;
  color: #075B40;
}

.ak-sdir-filter-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ak-sdir-reset-link {
  font-size: 13px;
  font-weight: 700;
  color: #075B40;
  text-decoration: none;
}

.ak-sdir-reset-link:hover {
  text-decoration: underline;
}

.ak-sdir-drawer-close {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #E2EBE6;
  background: #F8FAFC;
  color: #172B24;
  font-size: 16px;
  cursor: pointer;
}

.ak-sdir-filter-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ak-sdir-loc-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ak-sdir-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ak-sdir-field[hidden] {
  display: none !important;
}

.ak-sdir-field label {
  font-size: 13.2px;
  font-weight: 700;
  color: #172B24;
}

.ak-sdir-field select {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #D5E3DC;
  background-color: #F9FCFA;
  color: #172B24;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  outline: none;
}

.ak-sdir-field select:focus {
  border-color: #075B40;
  background-color: #FFFFFF;
}

.ak-sdir-apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 11px;
  border: none;
  background: #075B40;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14.2px;
  font-weight: 700;
  cursor: pointer;
}

.ak-sdir-apply-btn svg {
  width: 16px;
  height: 16px;
}

.ak-sdir-apply-btn:hover {
  background: #103D2C;
}

.ak-sdir-geo-card {
  background: #EBF5FF;
  border: 1px solid #BFDBFE;
  border-radius: 18px;
  padding: 16px;
}

.ak-sdir-geo-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ak-sdir-geo-copy h3 {
  margin: 0 0 3px;
  font-size: 14.8px;
  font-weight: 800;
  color: #172B24;
}

.ak-sdir-geo-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #475569;
}

.ak-sdir-geo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1.5px solid #075B40;
  background: #FFFFFF;
  color: #075B40;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ak-sdir-geo-btn svg {
  width: 15px;
  height: 15px;
}

.ak-sdir-geo-btn:hover {
  background: #075B40;
  color: #FFFFFF;
}

/* 4. Results Header Toolbar (Left: মোট ফলাফল, Right: সর্টিং অপশন) */
.ak-sdir-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.ak-sdir-toolbar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.ak-sdir-query-heading {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #172B24;
}

.ak-sdir-count {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #385548;
  white-space: nowrap;
}

.ak-sdir-toolbar-right {
  flex: 0 0 auto;
}

.ak-sdir-sort-select {
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #D5E3DC;
  background: #FFFFFF;
  color: #172B24;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
}

.ak-sdir-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid #E2EBE6;
  margin-bottom: 14px;
  font-weight: 700;
  color: #075B40;
}

.ak-sdir-loading[hidden] {
  display: none !important;
}

/* 5. Results Grid & Cards (Desktop: 3–4 Cols, Tablet: 2–3 Cols, Mobile: Strictly 2 Cols) */
.ak-service-results-grid,
.ak-sdir-results-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
}

@media (min-width: 1360px) {
  .ak-service-results-grid,
  .ak-sdir-results-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.ak-service-results-grid[hidden],
.ak-sdir-results-grid[hidden] {
  display: none !important;
}

.ak-service-results-grid > *,
.ak-sdir-results-grid > *,
.ak-service-result-card,
.ak-sdir-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.ak-sdir-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  gap: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E2EBE6 !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  height: 100% !important;
  box-shadow: 0 4px 14px rgba(7, 91, 64, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.ak-sdir-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(7, 91, 64, 0.11) !important;
  border-color: rgba(7, 91, 64, 0.30) !important;
}

.ak-sdir-card-media {
  position: relative !important;
  width: 100% !important;
  height: 146px !important;
  flex: 0 0 146px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #E2ECE7 !important;
}

.ak-sdir-media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.ak-sdir-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.ak-sdir-card:hover .ak-sdir-card-img {
  transform: scale(1.04);
}

.ak-sdir-247-badge,
.ak-sdir-dept-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #FFFFFF;
}

.ak-sdir-247-badge {
  background: #EF4444;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}

.ak-sdir-dept-badge {
  background: rgba(7, 91, 64, 0.88);
  backdrop-filter: blur(4px);
}

.ak-sdir-save-btn.is-overlay-save {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(7, 91, 64, 0.14) !important;
  color: #075B40 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  padding: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

.ak-sdir-save-btn.is-overlay-save:hover,
.ak-sdir-save-btn.is-overlay-save.is-saved {
  background: #FFF1F2 !important;
  border-color: #FDA4AF !important;
  color: #E11D48 !important;
}

.ak-sdir-card-body {
  padding: 13px 13px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.ak-sdir-card-head {
  display: block !important;
  min-width: 0 !important;
}

.ak-sdir-card-title {
  margin: 0 !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.32 !important;
  color: #172B24 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.ak-sdir-card-title a {
  color: #172B24 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.ak-sdir-card-title a:hover {
  color: #075B40 !important;
}

/* Doctor Card Specific Typography (Natural Bengali Word Wrapping) */
.ak-sdir-doc-degree {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.42 !important;
  color: #385548 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.ak-sdir-badge-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.ak-sdir-cat-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2.5px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  background: #E0F2FE;
  color: #0369A1;
  max-width: 100%;
}

.ak-sdir-cat-pill.is-teal   { background: #DCFCE7; color: #15803D; }
.ak-sdir-cat-pill.is-rose   { background: #FFE4E6; color: #BE123C; }
.ak-sdir-cat-pill.is-purple { background: #EDE9FE; color: #6D28D9; }
.ak-sdir-cat-pill.is-amber  { background: #FEF3C7; color: #B45309; }
.ak-sdir-cat-pill.is-orange { background: #FFEDD5; color: #C2410C; }

.ak-sdir-doc-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 2px !important;
  min-width: 0 !important;
}

.ak-sdir-doc-line {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
  color: #49685A !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.ak-sdir-doc-lbl {
  font-weight: 700 !important;
  color: #172B24 !important;
}

.ak-sdir-doc-line strong {
  font-weight: 700 !important;
  color: #075B40 !important;
}

/* Other Service Card Meta Lines */
.ak-sdir-meta-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.ak-sdir-meta-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12.2px !important;
  font-weight: 600 !important;
  color: #49685A !important;
  min-width: 0 !important;
}

.ak-sdir-meta-item.is-extra {
  color: #172B24 !important;
  font-weight: 700 !important;
}

.ak-sdir-meta-ico {
  display: inline-flex;
  align-items: center;
  color: #075B40;
  flex-shrink: 0;
}

.ak-sdir-meta-ico svg {
  width: 13px;
  height: 13px;
}

.ak-sdir-loc-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Aligned Two-Button Bottom Row: [বিস্তারিত] [কল করুন] */
.ak-sdir-card-actions {
  margin-top: auto !important;
  padding-top: 8px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.ak-sdir-card-actions.is-single-action {
  grid-template-columns: 1fr !important;
}

.ak-sdir-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 36px !important;
  padding: 6px 8px !important;
  border-radius: 9px !important;
  font-size: 12.2px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.ak-sdir-btn.is-details {
  background: #FFFFFF !important;
  border: 1.5px solid #075B40 !important;
  color: #075B40 !important;
}

.ak-sdir-btn.is-details:hover {
  background: #EAF8F1 !important;
}

.ak-sdir-btn.is-call {
  background: #075B40 !important;
  border: 1.5px solid #075B40 !important;
  color: #FFFFFF !important;
}

.ak-sdir-btn.is-call:hover {
  background: #103D2C !important;
}

.ak-sdir-btn-lbl-full {
  display: none !important;
}

.ak-sdir-btn-lbl-short {
  display: inline !important;
}

.ak-sdir-call-ico {
  display: inline-flex;
  align-items: center;
}

.ak-sdir-call-ico svg {
  width: 13px;
  height: 13px;
}

/* Pagination */
.ak-sdir-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.ak-sdir-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #D5E3DC;
  color: #172B24;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.ak-sdir-pagination .page-numbers.current,
.ak-sdir-pagination .page-numbers:hover {
  background: #075B40;
  border-color: #075B40;
  color: #FFFFFF;
}

/* Bottom CTA Banner ("আপনার প্রতিষ্ঠান যুক্ত করুন") */
.ak-sdir-cta-banner {
  margin-top: 28px;
  background: linear-gradient(135deg, #E2F5EB 0%, #CBEAD9 100%);
  border: 1px solid #A7E1C3;
  border-radius: 20px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ak-sdir-cta-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ak-sdir-cta-badge-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #075B40;
  color: #FFFFFF;
  flex-shrink: 0;
}

.ak-sdir-cta-badge-ico svg {
  width: 26px;
  height: 26px;
}

.ak-sdir-cta-copy h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  color: #102A20;
}

.ak-sdir-cta-copy p {
  margin: 0 0 12px;
  font-size: 13.8px;
  color: #2B4C3E;
}

.ak-sdir-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 18px;
  border-radius: 999px;
  background: #075B40;
  color: #FFFFFF !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none !important;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES (Strict Order: 1199px -> 991px -> 767px -> 359px)
   ========================================================================== */
@media (max-width: 1199px) {
  .ak-hp-hero .ak-container,
  .ak-sdir-hero .ak-container {
    width: calc(100% - 48px);
  }

  .ak-sdir-cat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ak-sdir-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
  }

  .ak-service-results-grid,
  .ak-sdir-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 991px) {
  /* Collapse 2-Column Sidebar Layout to 1-Column Full Width & Hide Sidebar Wrapper */
  .ak-sdir-layout {
    display: block !important;
    width: 100% !important;
  }

  .ak-sdir-sidebar {
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ak-sdir-mobile-filter-bar {
    display: block;
  }

  /* Filter Drawer Modal (Completely display:none when closed) */
  .ak-sdir-filter-shell {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    z-index: 99990 !important;
  }

  .ak-sdir-filter-shell.is-open {
    display: block !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  .ak-sdir-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 32, 23, 0.58);
    backdrop-filter: blur(3px);
  }

  .ak-sdir-filter-card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 86dvh;
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: 22px 22px 0 0;
    padding: 18px 16px 28px;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.22);
  }

  .ak-sdir-filter-form {
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .ak-sdir-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Tablet (768px - 991px): 3 Cards Per Row across full width */
  .ak-service-results-grid,
  .ak-sdir-results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* ==========================================================================
   MOBILE VIEWPORTS (320px to 767px) — FULL WIDTH & TWO CARDS PER ROW
   ========================================================================== */
@media (max-width: 767px) {
  .ak-container,
  .ak-hp-hero .ak-container,
  .ak-sdir-hero .ak-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .ak-header-inner {
    width: 100% !important;
    min-height: 58px !important;
    gap: 6px !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .ak-brand {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .ak-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
  }

  .ak-header-actions .ak-icon-button,
  .ak-easy-mode-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
  }

  .ak-sdir-page {
    padding-bottom: 86px;
  }

  .ak-sdir-hero {
    padding: 18px 0 22px;
  }

  .ak-sdir-hero-title {
    font-size: 23px;
  }

  .ak-sdir-hero-subtitle {
    font-size: 13px;
    margin-bottom: 14px;
  }

  .ak-sdir-search-box {
    padding: 4px 5px 4px 12px;
    gap: 5px;
  }

  .ak-sdir-search-box input[type="search"] {
    font-size: 13.5px;
    padding: 7px 3px;
  }

  .ak-sdir-search-submit {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 13px;
  }

  .ak-sdir-popular-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding-bottom: 2px;
    margin-top: 11px;
    gap: 6px !important;
  }

  .ak-sdir-pop-label {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .ak-sdir-pop-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
  }

  .ak-sdir-pop-pills::-webkit-scrollbar {
    display: none !important;
  }

  .ak-sdir-pop-pill {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 4px 11px;
    font-size: 11.8px;
  }

  /* 5 Compact Category Cards Per Row on Mobile */
  .ak-sdir-cat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .ak-sdir-cat-card.is-extra-mobile {
    display: none;
  }

  .ak-sdir-cat-grid.is-expanded-mobile .ak-sdir-cat-card.is-extra-mobile {
    display: flex;
  }

  .ak-sdir-cat-card {
    min-height: 68px;
    padding: 8px 4px;
    border-radius: 12px;
  }

  .ak-sdir-cat-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    margin-bottom: 5px;
  }

  .ak-sdir-cat-icon svg {
    width: 17px;
    height: 17px;
  }

  .ak-sdir-cat-lbl-full {
    display: none;
  }

  .ak-sdir-cat-lbl-short {
    display: -webkit-box;
    font-size: 10.6px;
    line-height: 1.2;
  }

  /* Mobile Results Header & Sort Toolbar: Left মোট ফলাফল, Right সর্টিং অপশন */
  .ak-sdir-toolbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .ak-sdir-toolbar-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .ak-sdir-query-heading {
    font-size: 15px !important;
  }

  .ak-sdir-count {
    font-size: 13px !important;
  }

  .ak-sdir-toolbar-right {
    flex: 0 0 auto !important;
  }

  .ak-sdir-sort-select {
    min-height: 34px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
  }

  /* MOBILE RESULTS GRID: STRICTLY TWO CARDS PER ROW */
  .ak-service-results-grid,
  .ak-sdir-results-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ak-service-result-card,
  .ak-sdir-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  .ak-sdir-card-media {
    height: 112px !important;
    flex: 0 0 112px !important;
  }

  .ak-sdir-dept-badge,
  .ak-sdir-247-badge {
    top: 7px !important;
    left: 7px !important;
    padding: 2px 7px !important;
    font-size: 9.5px !important;
  }

  .ak-sdir-save-btn.is-overlay-save {
    top: 7px !important;
    right: 7px !important;
    width: 28px !important;
    height: 28px !important;
  }

  .ak-sdir-card-body {
    padding: 10px 10px 11px !important;
    gap: 5px !important;
  }

  .ak-sdir-card-title {
    font-size: 14.2px !important;
    line-height: 1.3 !important;
  }

  .ak-sdir-doc-degree {
    font-size: 11.2px !important;
    line-height: 1.38 !important;
  }

  .ak-sdir-cat-pill {
    padding: 2px 8px !important;
    font-size: 10.5px !important;
  }

  .ak-sdir-doc-line,
  .ak-sdir-meta-item {
    font-size: 11.2px !important;
    line-height: 1.38 !important;
  }

  .ak-sdir-meta-item.is-hours {
    display: none !important;
  }

  .ak-sdir-card-actions {
    padding-top: 6px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .ak-sdir-card-actions.is-single-action {
    grid-template-columns: 1fr !important;
  }

  .ak-sdir-btn {
    min-height: 33px !important;
    padding: 5px 6px !important;
    border-radius: 8px !important;
    font-size: 11.2px !important;
    gap: 4px !important;
  }

  .ak-sdir-cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .ak-sdir-cta-art {
    display: none;
  }

  .ak-mobile-nav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .ak-fb-comm-widget {
    right: 12px !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* Narrow Mobile (320px - 359px) Two-Column Safeguards */
@media (max-width: 359px) {
  .ak-container,
  .ak-hp-hero .ak-container,
  .ak-sdir-hero .ak-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .ak-service-results-grid,
  .ak-sdir-results-grid {
    gap: 8px !important;
  }

  .ak-sdir-card-media {
    height: 96px !important;
    flex: 0 0 96px !important;
  }

  .ak-sdir-card-body {
    padding: 9px 8px 10px !important;
  }

  .ak-sdir-card-title {
    font-size: 13px !important;
  }

  .ak-sdir-doc-degree,
  .ak-sdir-doc-line,
  .ak-sdir-meta-item {
    font-size: 10.5px !important;
  }

  .ak-sdir-btn {
    min-height: 30px !important;
    padding: 4px 4px !important;
    font-size: 10.2px !important;
    gap: 3px !important;
  }
}


/* ==========================================================================
   AMAR KHULNA v5.6.0 — FINAL 9 UPAZILAS CAROUSEL REFINEMENT (#khulna-9-upazilas)
   - Very Light Premium Green Palette:
     * Section background: #F1FAF5 (gradient #F7FCF9 -> #EAF7EF)
     * Border: #D6EBDD
     * Heading: #173D30
     * Description: #61786D
     * Card background: #FFFFFF
     * Primary buttons ("সব উপজেলা দেখুন →" & card button): #075B40
   - Mobile (320px - 767px): Strictly 2 complete cards side by side (zero 3rd-card cutoff)
   - Tablet (768px - 991px): 3 complete cards
   - Desktop (992px - 1440px+): 4 to 5 complete cards
   - Hidden scrollbar + smooth slow-motion RTL auto-scroll + full finger-swipe & drag
   ========================================================================== */

#khulna-9-upazilas.ak-hp-upazilas-sec,
.ak-hp-upazilas-sec.ak-upazila-promo-banner {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 26px 0 !important;
  padding: 24px 22px 22px !important;
  border-radius: 22px !important;
  background-color: #F1FAF5 !important;
  background-image: linear-gradient(145deg, #F7FCF9 0%, #EAF7EF 100%) !important;
  border: 1px solid #D6EBDD !important;
  box-shadow: 0 8px 26px rgba(7, 91, 64, 0.06) !important;
  color: #173D30 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Remove any legacy dark-green pseudo-element overlays */
#khulna-9-upazilas.ak-upazila-promo-banner::before,
#khulna-9-upazilas.ak-upazila-promo-banner::after,
.ak-hp-upazilas-sec.ak-upazila-promo-banner::before,
.ak-hp-upazilas-sec.ak-upazila-promo-banner::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

#khulna-9-upazilas .ak-hp-upz-header {
  margin-bottom: 18px !important;
}

#khulna-9-upazilas .ak-hp-sec-emblem.is-upz-emblem {
  background: #DFF3E8 !important;
  border: 1px solid #C5E4D3 !important;
  box-shadow: 0 3px 10px rgba(7, 91, 64, 0.08) !important;
}

#khulna-9-upazilas .ak-hp-upz-sec-title,
#khulna-9-upazilas .ak-hp-sec-title {
  color: #173D30 !important;
  text-shadow: none !important;
}

#khulna-9-upazilas .ak-hp-upz-sec-subtitle,
#khulna-9-upazilas .ak-hp-sec-subtitle {
  color: #61786D !important;
  text-shadow: none !important;
}

#khulna-9-upazilas .ak-hp-upz-viewall-btn,
#khulna-9-upazilas .ak-hp-sec-btn {
  background: #075B40 !important;
  border: 1px solid #075B40 !important;
  color: #FFFFFF !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 12px rgba(7, 91, 64, 0.18) !important;
}

#khulna-9-upazilas .ak-hp-upz-viewall-btn:hover,
#khulna-9-upazilas .ak-hp-sec-btn:hover {
  background: #054731 !important;
  border-color: #054731 !important;
  color: #FFFFFF !important;
}

/* Carousel Viewport: Hide Native Scrollbar While Keeping Full Touch Swipe & Drag */
#khulna-9-upazilas .ak-hp-upz-viewport {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
  touch-action: pan-x pan-y pinch-zoom !important;
  padding: 2px 0 6px !important;
  box-sizing: border-box !important;
}

#khulna-9-upazilas .ak-hp-upz-viewport::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#khulna-9-upazilas .ak-hp-upz-viewport.is-dragging {
  cursor: grabbing !important;
}

/* Flex Track: width: 100% with nowrap lets percentage flex-basis resolve against viewport width */
#khulna-9-upazilas .ak-hp-upz-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: var(--ak-upz-gap, 16px) !important;
  width: max-content !important;
  box-sizing: border-box !important;
}

/* Desktop (1200px+): Exactly 5 Complete Cards Side by Side */
#khulna-9-upazilas .ak-hp-upz-card {
  width: var(--ak-upz-card-w, calc((100% - 64px) / 5)) !important;
  flex: 0 0 var(--ak-upz-card-w, calc((100% - 64px) / 5)) !important;
  max-width: var(--ak-upz-card-w, calc((100% - 64px) / 5)) !important;
  min-width: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #D6EBDD !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 5px 16px rgba(7, 91, 64, 0.07) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
  box-sizing: border-box !important;
}

#khulna-9-upazilas .ak-hp-upz-card:hover {
  transform: translateY(-3px) !important;
  border-color: #B5DEC5 !important;
  box-shadow: 0 10px 24px rgba(7, 91, 64, 0.13) !important;
}

#khulna-9-upazilas .ak-hp-upz-card-link {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

#khulna-9-upazilas .ak-hp-upz-media {
  position: relative !important;
  width: 100% !important;
  height: 132px !important;
  flex: 0 0 132px !important;
  overflow: hidden !important;
  background: #E2F3EA !important;
}

#khulna-9-upazilas .ak-hp-upz-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}

#khulna-9-upazilas .ak-hp-upz-card:hover .ak-hp-upz-media img {
  transform: scale(1.05) !important;
}

#khulna-9-upazilas .ak-hp-upz-union-pill {
  position: absolute !important;
  bottom: 7px !important;
  left: 7px !important;
  max-width: calc(100% - 14px) !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: rgba(7, 65, 45, 0.88) !important;
  backdrop-filter: blur(4px) !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#khulna-9-upazilas .ak-hp-upz-body {
  padding: 12px 12px 13px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  text-align: center !important;
  background: #FFFFFF !important;
}

#khulna-9-upazilas .ak-hp-upz-name {
  margin: 0 0 4px !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  color: #173D30 !important;
}

#khulna-9-upazilas .ak-hp-upz-desc {
  margin: 0 0 10px !important;
  font-size: 11.8px !important;
  line-height: 1.45 !important;
  color: #61786D !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#khulna-9-upazilas .ak-hp-upz-more {
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: #075B40 !important;
  color: #FFFFFF !important;
  font-size: 11.8px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  transition: background-color 0.2s ease !important;
  box-sizing: border-box !important;
}

#khulna-9-upazilas .ak-hp-upz-card:hover .ak-hp-upz-more {
  background: #054731 !important;
  color: #FFFFFF !important;
}

/* Medium Desktop (992px - 1199px): 4 Complete Cards */
@media (max-width: 1199px) {
  #khulna-9-upazilas .ak-hp-upz-track {
    gap: var(--ak-upz-gap, 14px) !important;
  }
  #khulna-9-upazilas .ak-hp-upz-card {
    width: var(--ak-upz-card-w, calc((100% - 42px) / 4)) !important;
    flex: 0 0 var(--ak-upz-card-w, calc((100% - 42px) / 4)) !important;
    max-width: var(--ak-upz-card-w, calc((100% - 42px) / 4)) !important;
  }
}

/* Tablet (768px - 991px): 3 Complete Cards */
@media (max-width: 991px) {
  #khulna-9-upazilas .ak-hp-upz-track {
    gap: var(--ak-upz-gap, 12px) !important;
  }
  #khulna-9-upazilas .ak-hp-upz-card {
    width: var(--ak-upz-card-w, calc((100% - 24px) / 3)) !important;
    flex: 0 0 var(--ak-upz-card-w, calc((100% - 24px) / 3)) !important;
    max-width: var(--ak-upz-card-w, calc((100% - 24px) / 3)) !important;
  }
}

/* Mobile Breakpoint (320px to 767px): STRICTLY TWO COMPLETE CARDS SIDE BY SIDE */
@media (max-width: 767px) {
  #khulna-9-upazilas.ak-hp-upazilas-sec,
  .ak-hp-upazilas-sec.ak-upazila-promo-banner {
    padding: 15px 12px 15px !important;
    border-radius: 18px !important;
    margin-bottom: 18px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-header {
    margin-bottom: 12px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-sec-title,
  #khulna-9-upazilas .ak-hp-sec-title {
    font-size: 18.5px !important;
    line-height: 1.25 !important;
  }

  #khulna-9-upazilas .ak-hp-upz-sec-subtitle,
  #khulna-9-upazilas .ak-hp-sec-subtitle {
    font-size: 12px !important;
    line-height: 1.42 !important;
  }

  #khulna-9-upazilas .ak-hp-upz-viewall-btn,
  #khulna-9-upazilas .ak-hp-sec-btn {
    padding: 6px 11px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }

  #khulna-9-upazilas .ak-hp-upz-viewport {
    padding: 2px 0 4px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-track {
    gap: var(--ak-upz-gap, 10px) !important;
  }

  /* Strictly 2 full cards side by side: (100% - 10px gap) / 2 */
  #khulna-9-upazilas .ak-hp-upz-card {
    width: var(--ak-upz-card-w, calc((100vw - 56px) / 2)) !important;
    flex: 0 0 var(--ak-upz-card-w, calc((100vw - 56px) / 2)) !important;
    max-width: var(--ak-upz-card-w, calc((100vw - 56px) / 2)) !important;
    border-radius: 13px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-media {
    height: 100px !important;
    flex: 0 0 100px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-union-pill {
    bottom: 6px !important;
    left: 6px !important;
    padding: 2px 7px !important;
    font-size: 9.2px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-body {
    padding: 9px 9px 10px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-name {
    font-size: 14px !important;
    margin-bottom: 3px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-desc {
    font-size: 10.8px !important;
    line-height: 1.38 !important;
    margin-bottom: 8px !important;
    -webkit-line-clamp: 2 !important;
  }

  #khulna-9-upazilas .ak-hp-upz-more {
    padding: 5px 8px !important;
    font-size: 10.8px !important;
  }
}

/* Compact Mobile (320px to 359px): Strictly 2 Complete Cards with 8px Gap */
@media (max-width: 359px) {
  #khulna-9-upazilas.ak-hp-upazilas-sec,
  .ak-hp-upazilas-sec.ak-upazila-promo-banner {
    padding: 13px 10px 13px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-track {
    gap: var(--ak-upz-gap, 8px) !important;
  }

  #khulna-9-upazilas .ak-hp-upz-card {
    width: var(--ak-upz-card-w, calc((100vw - 48px) / 2)) !important;
    flex: 0 0 var(--ak-upz-card-w, calc((100vw - 48px) / 2)) !important;
    max-width: var(--ak-upz-card-w, calc((100vw - 48px) / 2)) !important;
  }

  #khulna-9-upazilas .ak-hp-upz-media {
    height: 90px !important;
    flex: 0 0 90px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-body {
    padding: 8px 7px 9px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-name {
    font-size: 13px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-desc {
    font-size: 10.2px !important;
  }

  #khulna-9-upazilas .ak-hp-upz-more {
    padding: 4px 6px !important;
    font-size: 10.2px !important;
  }
}

/* ==========================================================================
   AMAR KHULNA v5.6.2 — TOURIST ATTRACTIONS CAROUSEL TOUCH SWIPE & DRAG FIX
   Preserves 100% of existing visual design while ensuring smooth 1:1 finger
   swipe & mouse drag with native vertical page scrolling (pan-y).
   ========================================================================== */
#khulna-attractions .ak-hattr-viewport,
.ak-hattr-section .ak-hattr-viewport {
  touch-action: pan-y pinch-zoom !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grab !important;
}

#khulna-attractions .ak-hattr-viewport.is-dragging,
.ak-hattr-section .ak-hattr-viewport.is-dragging,
#khulna-attractions .ak-hattr-viewport.is-dragging .ak-hattr-card-link,
.ak-hattr-section .ak-hattr-viewport.is-dragging .ak-hattr-card-link {
  cursor: grabbing !important;
}

#khulna-attractions .ak-hattr-card-link,
#khulna-attractions .ak-hattr-card-img,
.ak-hattr-section .ak-hattr-card-link,
.ak-hattr-section .ak-hattr-card-img {
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ==========================================================================
   AMAR KHULNA v5.7.0 — GOOGLE SIGN-IN & ONE-CLICK REGISTRATION BUTTON
   Full-width, touch-friendly, responsive (320px - 430px+ mobile & desktop),
   official multicolor Google G icon + subtle Bengali divider.
   ========================================================================== */
.ak-google-auth-block {
  width: 100%;
  margin: 4px 0 18px 0;
  box-sizing: border-box;
}

.ak-google-signin-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 12px 18px !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.14s ease !important;
  -webkit-tap-highlight-color: transparent;
}

.ak-google-signin-btn:hover {
  background: #F8FAFC !important;
  border-color: #075D3A !important;
  color: #075D3A !important;
  box-shadow: 0 6px 18px rgba(7, 93, 58, 0.12) !important;
  transform: translateY(-1px);
}

.ak-google-signin-btn:active {
  transform: translateY(0) scale(0.99);
  background: #F1F5F9 !important;
}

.ak-google-signin-btn:focus-visible {
  outline: 2.5px solid #075D3A !important;
  outline-offset: 2px !important;
}

.ak-google-signin-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

.ak-google-signin-icon svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
}

.ak-google-signin-text {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  text-align: center;
}

.ak-google-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 18px 0 6px 0 !important;
  box-sizing: border-box !important;
}

.ak-google-divider-line {
  flex: 1 1 0% !important;
  height: 1px !important;
  background: #DCE7E1 !important;
}

.ak-google-divider-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #566E62 !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

.ak-google-admin-warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 6px;
}

.ak-google-admin-warning-head {
  font-size: 12.5px;
  line-height: 1.5;
  color: #92400E;
  margin-bottom: 10px;
}

.ak-google-admin-warning-head strong {
  display: block;
  margin-bottom: 2px;
  color: #78350F;
}

@media (max-width: 480px) {
  .ak-google-signin-btn {
    min-height: 50px !important;
    padding: 11px 14px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    gap: 10px !important;
  }

  .ak-google-divider {
    gap: 9px !important;
    margin: 16px 0 4px 0 !important;
  }

  .ak-google-divider-label {
    font-size: 12.2px !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media (max-width: 359px) {
  .ak-google-signin-btn {
    min-height: 46px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  .ak-google-divider-label {
    font-size: 11.5px !important;
  }
}

/* ==========================================================================
   AMAR KHULNA v6.0.0 — CLEAN FRONTEND MANAGEMENT PANEL (/management/)
   - Removes WordPress Admin Toolbar (#wpadminbar) & top margin gap on all frontend pages
   - Removes duplicate website header, back bar & floating chat overlay on /management/
   - Compact Mobile Header + 2-Column Statistics + 2 Side-by-Side Primary Action Cards
   - Palette: #075B40, #087A58, #F5FAF7, #FFFFFF, #20382F, #DFEAE3
   ========================================================================== */

/* 1. Completely Remove WordPress Admin Toolbar & Top Blank Gap on All Frontend Pages */
html,
html[lang] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

* html body {
  margin-top: 0 !important;
}

body.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#wpadminbar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2. Remove Duplicate Website Header, Empty Top Bars & Floating Chat on /management/ */
body.ak-is-management-page .ak-top-infobar,
body.ak-is-management-page .ak-header,
body.ak-is-management-page .ak-global-back-bar,
body.ak-is-management-page .ak-page-hero,
body.ak-is-management-page #ak-fb-comm-widget,
body.ak-is-management-page .ak-fb-comm-widget {
  display: none !important;
}

body.ak-is-management-page #main-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.ak-fm-page-container {
  max-width: 1380px !important;
  width: 100% !important;
  padding: 10px 14px 40px !important;
  margin: 0 auto !important;
}

.ak-fm-shell {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto 32px;
  background: #F5FAF7;
  border: 1px solid #DFEAE3;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(7, 91, 64, 0.06);
  overflow: hidden;
  box-sizing: border-box;
  color: #20382F;
}

.ak-fm-shell *,
.ak-fm-shell *::before,
.ak-fm-shell *::after {
  box-sizing: border-box;
}

/* 3. Compact Branded Header ("আমার খুলনা — ম্যানেজমেন্ট প্যানেল") */
.ak-fm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #075B40 0%, #087A58 100%) !important;
  color: #FFFFFF !important;
}

.ak-fm-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ak-fm-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none !important;
  color: #FFFFFF !important;
  min-width: 0;
}

.ak-fm-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

.ak-fm-top-title {
  margin: 0 !important;
  font-size: clamp(15px, 1.8vw, 18.5px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #FFFFFF !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-fm-topbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ak-fm-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 12.2px;
}

.ak-fm-user-name {
  font-weight: 700;
  color: #FFFFFF !important;
}

.ak-fm-role-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #075B40;
  font-size: 10.8px;
  font-weight: 800;
}

.ak-fm-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ak-fm-btn-logout {
  background: rgba(254, 226, 226, 0.95) !important;
  border-color: #FCA5A5 !important;
  color: #991B1B !important;
}

.ak-fm-mobile-menu-btn {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #FFFFFF !important;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

/* Flash Alert Banner */
.ak-fm-alert {
  margin: 10px 16px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

.ak-fm-alert.is-success {
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  color: #14532D;
}

.ak-fm-alert.is-error {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #991B1B;
}

/* Main Dashboard Body */
.ak-fm-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 620px;
  position: relative;
}

/* Compact Sidebar */
.ak-fm-sidebar {
  background: #FFFFFF;
  border-right: 1px solid #DFEAE3;
  padding: 12px 10px 20px;
}

.ak-fm-sidebar-mobile-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid #DFEAE3;
  color: #075B40;
  font-size: 14px;
}

.ak-fm-drawer-close {
  background: #F5FAF7;
  border: 1px solid #DFEAE3;
  border-radius: 7px;
  width: 30px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
}

.ak-fm-nav-group {
  margin-bottom: 12px;
}

.ak-fm-nav-group-title {
  padding: 0 9px;
  margin-bottom: 4px;
  font-size: 10.8px;
  font-weight: 800;
  text-transform: uppercase;
  color: #5C746A;
}

.ak-fm-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: 2px;
}

.ak-fm-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #20382F !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.ak-fm-nav-link:hover {
  background: #ECFDF5;
  color: #075B40 !important;
}

.ak-fm-nav-link.is-active {
  background: #075B40 !important;
  color: #FFFFFF !important;
  font-weight: 700;
}

.ak-fm-nav-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.ak-fm-nav-label {
  flex: 1 1 auto;
  min-width: 0;
}

.ak-fm-nav-badge {
  padding: 1px 6px;
  border-radius: 999px;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
}

.ak-fm-secondary-details {
  border-top: 1px solid #DFEAE3;
  padding-top: 10px;
  margin-top: 8px;
}

.ak-fm-secondary-summary {
  padding: 6px 9px;
  font-size: 12.2px;
  font-weight: 800;
  color: #075B40;
  cursor: pointer;
  list-style: none;
}

.ak-fm-secondary-summary::-webkit-details-marker {
  display: none;
}

/* Main Content Area */
.ak-fm-main {
  padding: 16px 18px 24px;
  min-width: 0;
}

.ak-fm-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.ak-fm-section-title {
  margin: 0 0 2px !important;
  font-size: clamp(17px, 1.9vw, 20px) !important;
  font-weight: 800 !important;
  color: #075B40 !important;
}

.ak-fm-section-desc {
  margin: 0 !important;
  font-size: 12.5px !important;
  color: #526B5E !important;
}

/* SECTION 1 — QUICK SUMMARY (4 Compact Cards on Desktop, 2 per row on Mobile) */
.ak-fm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.ak-fm-kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid #DFEAE3;
  border-left: 4px solid #075B40;
  border-radius: 11px;
  padding: 11px 14px;
  text-decoration: none !important;
  color: #20382F !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.ak-fm-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(7, 91, 64, 0.08);
}

.ak-fm-kpi-card.is-amber { border-left-color: #D97706; }
.ak-fm-kpi-card.is-rose  { border-left-color: #E11D48; }
.ak-fm-kpi-card.is-teal  { border-left-color: #087A58; }

.ak-fm-kpi-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #526B5E;
  margin-bottom: 3px;
}

.ak-fm-kpi-val {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: #075B40;
}

.ak-fm-kpi-card.is-amber .ak-fm-kpi-val { color: #B45309; }
.ak-fm-kpi-card.is-rose .ak-fm-kpi-val  { color: #BE123C; }

/* SECTION 2 — TWO PRIMARY ACTIONS (2 Prominent Side-by-Side Cards on Mobile & Desktop) */
.ak-fm-primary-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ak-fm-primary-action-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  text-decoration: none !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.ak-fm-primary-action-card.is-review {
  background: #FFFFFF;
  border: 1.5px solid #075B40;
  color: #20382F !important;
}

.ak-fm-primary-action-card.is-create {
  background: linear-gradient(135deg, #075B40 0%, #087A58 100%);
  border: 1.5px solid #075B40;
  color: #FFFFFF !important;
}

.ak-fm-primary-action-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(7, 91, 64, 0.14);
}

.ak-fm-pac-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(7, 91, 64, 0.1);
  font-size: 18px;
  flex-shrink: 0;
}

.ak-fm-primary-action-card.is-create .ak-fm-pac-icon {
  background: rgba(255, 255, 255, 0.18);
}

.ak-fm-pac-body {
  min-width: 0;
  flex: 1 1 auto;
}

.ak-fm-pac-title {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.25;
}

.ak-fm-primary-action-card.is-review .ak-fm-pac-title {
  color: #075B40;
}

.ak-fm-primary-action-card.is-create .ak-fm-pac-title {
  color: #FFFFFF;
}

.ak-fm-pac-sub {
  display: block;
  font-size: 12px;
  margin-top: 2px;
  opacity: 0.88;
}

.ak-fm-label-mobile {
  display: none;
}

.ak-fm-pac-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 800;
}

/* Category Pills for "+ নতুন পোস্ট করুন" */
.ak-fm-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ak-fm-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: #F5FAF7;
  border: 1px solid #DFEAE3;
  color: #20382F !important;
  text-decoration: none !important;
  font-size: 12.8px;
  font-weight: 700;
}

.ak-fm-cat-pill:hover,
.ak-fm-cat-pill.is-active {
  background: #075B40 !important;
  border-color: #075B40 !important;
  color: #FFFFFF !important;
}

/* Collapsible Secondary Menu Card on Overview */
.ak-fm-collapsible-card {
  padding: 12px 16px !important;
}

.ak-fm-collapsible-summary {
  font-size: 14px;
  font-weight: 800;
  color: #075B40;
  cursor: pointer;
  list-style: none;
}

.ak-fm-collapsible-summary::-webkit-details-marker {
  display: none;
}

.ak-fm-secondary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.ak-fm-sec-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #F5FAF7;
  border: 1px solid #DFEAE3;
  color: #20382F !important;
  text-decoration: none !important;
  font-size: 12.8px;
  font-weight: 700;
}

.ak-fm-sec-link:hover {
  border-color: #075B40;
  background: #ECFDF5;
  color: #075B40 !important;
}

/* Cards, Tables & Forms */
.ak-fm-card {
  background: #FFFFFF;
  border: 1px solid #DFEAE3;
  border-radius: 13px;
  padding: 16px;
}

.ak-fm-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.ak-fm-card-title {
  margin: 0 0 10px !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: #075B40 !important;
}

.ak-fm-card-header-row .ak-fm-card-title {
  margin-bottom: 0 !important;
}

.ak-fm-mini-search {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ak-fm-two-col-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ak-fm-compact-list {
  display: grid;
  gap: 8px;
}

.ak-fm-compact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #F5FAF7;
  border: 1px solid #DFEAE3;
}

.ak-fm-review-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.ak-fm-meta-item {
  background: #F5FAF7;
  border: 1px solid #DFEAE3;
  border-radius: 9px;
  padding: 8px 11px;
}

.ak-fm-meta-item small {
  display: block;
  font-size: 11px;
  color: #5C746A;
}

.ak-fm-meta-item strong {
  font-size: 13px;
  color: #20382F;
}

.ak-fm-review-desc-box {
  background: #F8FCF9;
  border: 1px solid #DFEAE3;
  border-radius: 9px;
  padding: 11px 13px;
  margin-bottom: 12px;
  font-size: 13.2px;
}

.ak-fm-mod-action-box {
  background: #F5FAF7;
  border: 1px solid #C5E4D3;
  border-radius: 11px;
  padding: 12px;
}

/* Buttons */
.ak-fm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 12.8px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.ak-fm-btn-primary {
  background: #075B40 !important;
  border-color: #075B40 !important;
  color: #FFFFFF !important;
}

.ak-fm-btn-primary:hover {
  background: #087A58 !important;
  border-color: #087A58 !important;
}

.ak-fm-btn-amber {
  background: #FEF3C7 !important;
  border-color: #FCD34D !important;
  color: #92400E !important;
}

.ak-fm-btn-outline {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #20382F !important;
}

.ak-fm-btn-outline:hover {
  border-color: #075B40;
  color: #075B40 !important;
  background: #F5FAF7;
}

.ak-fm-topbar .ak-fm-btn-outline {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.32);
  color: #FFFFFF !important;
}

.ak-fm-btn-danger-soft {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B91C1C !important;
}

.ak-fm-btn-sm { padding: 5px 10px; font-size: 12px; }
.ak-fm-btn-xs { padding: 4px 8px; font-size: 11.5px; border-radius: 6px; }

/* Toolbars, Inputs & Tables */
.ak-fm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #DFEAE3;
}

.ak-fm-filter-form,
.ak-fm-inline-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-fm-input,
.ak-fm-select,
.ak-fm-form input[type="text"],
.ak-fm-form input[type="tel"],
.ak-fm-form input[type="email"],
.ak-fm-form input[type="url"],
.ak-fm-form input[type="password"],
.ak-fm-form input[type="number"],
.ak-fm-form select,
.ak-fm-form textarea {
  padding: 7px 10px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  background: #FFFFFF;
  color: #20382F;
  font-size: 13.5px;
  max-width: 100%;
}

.ak-fm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ak-fm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ak-fm-field.is-span-2 { grid-column: span 2; }
.ak-fm-field label { font-size: 12.5px; font-weight: 700; color: #20382F; }
.ak-fm-field .req { color: #DC2626; }
.ak-fm-check-label { display: flex !important; align-items: center; gap: 7px; cursor: pointer; }
.ak-fm-form-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.ak-fm-table-wrap { width: 100%; overflow-x: auto; }
.ak-fm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ak-fm-table th, .ak-fm-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #DFEAE3; vertical-align: middle; }
.ak-fm-table th { background: #F5FAF7; color: #075B40; font-weight: 800; font-size: 12px; white-space: nowrap; }
.ak-fm-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }

.ak-fm-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 800; }
.ak-fm-badge.is-verified { background: #DCFCE7; color: #075B40; }
.ak-fm-badge.is-blood { background: #FEE2E2; color: #B91C1C; }

.ak-fm-status-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ak-fm-status-pill.is-publish { background: #DCFCE7; color: #075B40; }
.ak-fm-status-pill.is-pending { background: #FEF3C7; color: #B45309; }
.ak-fm-status-pill.is-draft   { background: #F1F5F9; color: #475569; }

.ak-fm-mobile-record-list { display: none; gap: 8px; }
.ak-fm-mobile-record-card { background: #F5FAF7; border: 1px solid #DFEAE3; border-radius: 10px; padding: 10px 11px; }
.ak-fm-mrc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.ak-fm-mrc-title { margin: 0 !important; font-size: 13.8px !important; font-weight: 800 !important; color: #20382F !important; }
.ak-fm-mrc-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.2px; color: #526B5E; margin-bottom: 8px; }
.ak-fm-mrc-actions { display: flex; flex-wrap: wrap; gap: 5px; }

.ak-fm-empty, .ak-fm-empty-cell { text-align: center; padding: 18px !important; color: #5C746A; font-size: 13px; }
.ak-fm-pagination { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 12px; }
.ak-fm-page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 7px; border: 1px solid #DFEAE3; background: #FFFFFF; color: #20382F !important; text-decoration: none !important; font-weight: 700; font-size: 12px; }
.ak-fm-page-num.is-current { background: #075B40; border-color: #075B40; color: #FFFFFF !important; }

/* Header Account Dropdown for Logged-In Users */
.ak-header-account-dropdown { position: relative; display: inline-flex; align-items: center; }
.ak-header-account-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: #FFFFFF; border: 1px solid #DFEAE3; border-radius: 11px; box-shadow: 0 10px 26px rgba(7, 91, 64, 0.14); padding: 5px; z-index: 999; display: none; }
.ak-header-account-dropdown:hover .ak-header-account-menu,
.ak-header-account-dropdown:focus-within .ak-header-account-menu { display: grid; gap: 2px; }
.ak-header-account-menu a { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 7px; font-size: 12.8px; font-weight: 700; color: #20382F !important; text-decoration: none !important; }
.ak-header-account-menu a:hover { background: #ECFDF5; color: #075B40 !important; }
.ak-header-account-menu a.is-mgmt-item { background: #ECFDF5; color: #075B40 !important; border: 1px solid #C5E4D3; }

@media (max-width: 991px) {
  .ak-fm-body { grid-template-columns: 1fr; }
  .ak-fm-mobile-menu-btn { display: inline-flex; }
  .ak-fm-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(82vw, 280px);
    z-index: 9999; overflow-y: auto; transform: translateX(-104%);
    transition: transform 0.2s ease; box-shadow: 10px 0 28px rgba(15, 23, 42, 0.2);
  }
  .ak-fm-sidebar.is-open { transform: translateX(0); }
  .ak-fm-sidebar-mobile-head { display: flex; }
  .ak-fm-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.42); z-index: 9998; }
  .ak-fm-two-col-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PREMIUM COMPACT MOBILE DESIGN (320px - 767px)
   - Statistics: Strictly 2 compact cards per row
   - Primary Actions: 2 clear action cards side by side ("রিভিউ করুন" & "নতুন পোস্ট")
   - Submission List: Clean compact cards
   ========================================================================== */
@media (max-width: 767px) {
  .ak-fm-page-container {
    padding: 4px 6px 84px !important;
  }

  .ak-fm-shell {
    margin: 0;
    border-radius: 12px;
  }

  .ak-fm-topbar {
    padding: 9px 10px;
    gap: 6px;
  }

  .ak-fm-logo-mark {
    width: 26px;
    height: 26px;
  }

  .ak-fm-top-title {
    font-size: 13.8px !important;
  }

  .ak-fm-topbar-right {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }

  .ak-fm-user-pill {
    padding: 3px 8px;
    font-size: 11.2px;
  }

  .ak-fm-top-actions .ak-fm-btn {
    padding: 5px 8px;
    font-size: 11.2px;
  }

  .ak-fm-main {
    padding: 10px 9px 18px;
  }

  /* 1. Statistics: Strictly TWO compact statistic cards per row */
  .ak-fm-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-bottom: 10px;
  }

  .ak-fm-kpi-card {
    padding: 9px 10px !important;
    border-radius: 9px !important;
  }

  .ak-fm-kpi-label {
    font-size: 11px !important;
    margin-bottom: 1px !important;
  }

  .ak-fm-kpi-val {
    font-size: 18px !important;
  }

  /* 2. Primary Actions: Strictly TWO clear action cards side by side */
  .ak-fm-primary-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-bottom: 12px;
  }

  .ak-fm-primary-action-card {
    padding: 10px 9px !important;
    border-radius: 10px !important;
    gap: 8px !important;
  }

  .ak-fm-pac-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }

  .ak-fm-pac-title {
    font-size: 13px !important;
  }

  .ak-fm-label-desktop {
    display: none !important;
  }

  .ak-fm-label-mobile {
    display: inline !important;
  }

  .ak-fm-pac-sub {
    display: none !important;
  }

  /* 3. Switch from Desktop Table to Compact Mobile Submission Cards */
  .ak-fm-desktop-table {
    display: none !important;
  }

  .ak-fm-mobile-record-list {
    display: grid !important;
  }

  .ak-fm-card {
    padding: 11px 9px;
    border-radius: 10px;
  }

  .ak-fm-form-grid {
    grid-template-columns: 1fr;
  }

  .ak-fm-field.is-span-2 {
    grid-column: span 1;
  }

  .ak-fm-mini-search {
    width: 100%;
  }

  .ak-fm-mini-search .ak-fm-input {
    flex: 1 1 auto;
    font-size: 15px;
  }
}

/* ==========================================================================
   AMAR KHULNA v6.1.0 — PREMIUM COMPACT MOBILE NAVIGATION MENU & ACCOUNT PAGE
   ========================================================================== */

/* Desktop Nav Menu Item Icons: Keep subtle and compact on desktop (>= 992px) */
@media (min-width: 992px) {
  .primary-menu > li > a .ak-menu-item-icon {
    display: none;
  }
}

/* Mobile Navigation Drawer Redesign (< 992px) */
@media (max-width: 991px) {
  .ak-nav {
    top: calc(100% + 4px) !important;
    left: 10px !important;
    right: 10px !important;
    padding: 8px 10px 10px !important;
    background: #FFFFFF !important;
    border: 1px solid #DFEAE3 !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 32px rgba(19, 57, 43, 0.14) !important;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }

  .ak-nav .primary-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .ak-nav .primary-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #E6F0EA;
  }

  .ak-nav .primary-menu > li:last-child {
    border-bottom: 0;
  }

  .ak-nav .primary-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #13392B !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
  }

  .ak-nav .primary-menu > li > a .ak-menu-item-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 8px !important;
    background: #EEF7F2 !important;
    color: #075B40 !important;
  }

  .ak-nav .primary-menu > li > a .ak-menu-item-icon .ak-icon {
    width: 15px !important;
    height: 15px !important;
  }

  .ak-nav .primary-menu > li > a:hover,
  .ak-nav .primary-menu > li.current-menu-item > a,
  .ak-nav .primary-menu > li > a.current {
    background: #ECFDF5 !important;
    color: #075B40 !important;
  }

  .ak-nav .primary-menu > li.current-menu-item > a .ak-menu-item-icon,
  .ak-nav .primary-menu > li > a.current .ak-menu-item-icon {
    background: #075B40 !important;
    color: #FFFFFF !important;
  }

  /* Compact Mobile Drawer Bottom Actions */
  .ak-mobile-drawer-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin-top: 8px !important;
    padding-top: 9px !important;
    border-top: 1px solid #DFEAE3 !important;
  }

  .ak-mobile-mgmt-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 43px !important;
    padding: 9px 14px !important;
    background: #075B40 !important;
    color: #FFFFFF !important;
    border: 1px solid #064E32 !important;
    border-radius: 10px !important;
    font-size: 13.8px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(7, 91, 64, 0.16) !important;
  }

  .ak-mobile-drawer-action-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .ak-mobile-drawer-action-row > a {
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }

  .ak-mobile-drawer-logout {
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    margin-left: 0 !important;
  }
}

/* Remove Excessive Top Spacing on Logged-In Account Page */
.ak-page-content--account-compact {
  padding-top: 16px !important;
}

.ak-content--account-compact {
  padding: 20px 22px !important;
}

@media (max-width: 767px) {
  .ak-page-content--account-compact {
    padding-top: 8px !important;
    padding-bottom: 20px !important;
  }

  .ak-content--account-compact {
    padding: 12px 12px 16px !important;
    border-radius: 14px !important;
  }

  body.ak-is-account-page:not(.ak-is-account-logged-in) .ak-page-hero {
    padding: 14px 0 12px !important;
  }

  body.ak-is-account-page:not(.ak-is-account-logged-in) .ak-page-hero h1 {
    font-size: 1.25rem !important;
    margin: 0 !important;
  }

  body.ak-is-account-page:not(.ak-is-account-logged-in) .ak-page-content {
    padding-top: 10px !important;
  }

  body.ak-is-account-page:not(.ak-is-account-logged-in) .ak-content {
    padding: 12px 10px !important;
  }
}