/* ==========================================================================
   TUPCITY - UI/UX redesign  (theme.css)
   Loaded AFTER bootstrap.css and style.css, so it is the final word on looks.
   The HTML structure and all JavaScript hooks are unchanged; this file only
   changes how the directory looks. Brand green is kept and modernised, with
   a warm marigold accent for actions and highlights.
   ========================================================================== */

:root{
  /* v19: colours taken from the TIRUPUR CITY logo. The names --green* are kept so
     that every rule keeps working; they now hold the logo's navy blue. */
  /* Brand colour built into a scale */
  --green:        #073b70;   /* the brand colour: the navy of the logo   */
  --green-600:    #06325f;
  --green-700:    #05294e;   /* headers, hovers                          */
  --green-800:    #041f3c;
  --green-tint:   #e9f0f8;   /* soft surface                             */
  --green-tint-2: #d3e1f0;
  /* Warm accent (market / textile city) - used sparingly for action */
  --steel:        #4a7d93;   /* the lighter blue of the logo's skyline    */
  --amber:        #f2a516;
  --amber-600:    #d98e06;
  --amber-tint:   #fdf3dc;
  /* Ink & neutrals (green-leaning, not tinted black) */
  --ink:          #0f1b2a;
  --ink-2:        #3a4656;
  --muted:        #667386;
  --line:         #e2e7ee;
  --line-2:       #edf1f5;
  --surface:      #ffffff;
  --page:         #f5f7fa;
  /* Shape & depth */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(15,27,42,.06), 0 1px 3px rgba(15,27,42,.05);
  --sh-2: 0 6px 18px rgba(15,27,42,.08);
  --sh-3: 0 18px 44px rgba(15,27,42,.14);
  --ring: 0 0 0 4px rgba(7,59,112,.18);
  --maxw: 1200px;
  --head-h: 68px;
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Tamil", sans-serif;
  --f-disp: "Sora", var(--f-sans);
}

/* ---------- base ---------------------------------------------------------- */
html{ -webkit-text-size-adjust:100%; }
body, body.homepage{
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--page);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .005em;
}
.page-wrapper{ overflow-x: clip; }
h1,h2,h3,h4,h5,.section-title h2,.section-title h3{
  font-family: var(--f-disp);
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.15;
  font-weight: 700;
}
a{ color: var(--green-700); transition: color .15s ease; }
a:hover,a:focus{ color: var(--green-800); text-decoration: none; }
img{ max-width:100%; height:auto; }
::selection{ background: var(--green-tint-2); color: var(--ink); }
:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 6px; }
hr{ border-color: var(--line); }
.container{ max-width: var(--maxw); }

/* ---------- buttons ------------------------------------------------------- */
.btn{
  font-family: var(--f-sans);
  font-weight: 600;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  padding: 11px 22px;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  letter-spacing: 0;
}
.btn:active{ transform: translateY(1px); }
.btn-primary,.btn-primary.darker,.btn-primary.sa{
  background: var(--green); border-color: var(--green);
  color:#fff; box-shadow: var(--sh-1);
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.btn-primary.darker:hover{ background: var(--green-700); border-color: var(--green-700); color:#fff; }
.btn-light-frame,.btn-framed{
  background: transparent; border:1px solid var(--line);
  color: var(--ink);
}
.btn-light-frame:hover,.btn-framed:hover{ border-color: var(--green); color: var(--green-700); background: var(--green-tint); }
/* marigold call-to-action: Add listing */
.btn.add-listing, a.add-listing{
  background: var(--amber); border-color: var(--amber); color:#3a2a05;
  box-shadow: 0 2px 10px rgba(242,165,22,.35);
}
.btn.add-listing:hover, a.add-listing:hover{ background: var(--amber-600); border-color: var(--amber-600); color:#2a1f04; }
.btn-small{ padding: 8px 16px; font-size: 14px; }
.btn-rounded{ border-radius: var(--r-pill); }
.btn .fa, .btn i{ margin-left: 8px; }

/* ---------- forms --------------------------------------------------------- */
.form-control{
  border:1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: none;
  color: var(--ink);
  background: var(--surface);
  height: auto;
  padding: 11px 14px;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus{ border-color: var(--green); box-shadow: var(--ring); }
textarea.form-control{ min-height: 120px; }
label{ font-weight:600; color: var(--ink-2); font-size: 14px; }
/* bootstrap-select */
.bootstrap-select>.dropdown-toggle,
.bootstrap-select .btn{
  background:var(--surface)!important; color:var(--ink)!important;
  border:1px solid var(--line)!important; border-radius:var(--r-sm)!important;
  box-shadow:none!important; padding:11px 14px!important; font-weight:500!important;
}
.bootstrap-select .dropdown-menu{ border-radius:var(--r); box-shadow:var(--sh-2); border:1px solid var(--line); }
.bootstrap-select .dropdown-menu li a:hover{ background:var(--green-tint); color:var(--green-800); }

/* ---------- header / nav -------------------------------------------------- */
#page-header{
  position: sticky; top:0; z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(15,27,42,.02);
}
#page-header nav{
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  min-height: var(--head-h);
  display: flex; align-items: center; gap: 18px;
}
#page-header .left{ display:flex; align-items:center; }
#page-header .brand img{ width: 150px!important; height:auto; display:block; }
#page-header .right{ margin-left:auto; display:flex; align-items:center; gap: 10px; }
.primary-nav .navigation{ display:flex; align-items:center; gap: 2px; margin:0; padding:0; list-style:none; }
.primary-nav .navigation>li>a{
  display:block; padding: 10px 14px; border-radius: var(--r-pill);
  color: var(--ink-2); font-weight: 600; font-size: 15px;
}
.primary-nav .navigation>li>a:hover{ color: var(--green-800); background: var(--green-tint); }
.primary-nav .navigation>li.active>a{ color: var(--ink); }
/* mega / dropdown */
.has-child .wrapper{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-2); padding: 8px;
}
.has-child .nav-wrapper ul{ list-style:none; margin:0; padding:0; }
.has-child .nav-wrapper ul li a{ display:block; padding:9px 12px; border-radius:var(--r-sm); color:var(--ink-2); white-space:nowrap; }
.has-child .nav-wrapper ul li a:hover{ background: var(--green-tint); color: var(--green-800); }
.secondary-nav{ display:flex; align-items:center; gap: 6px; }
.secondary-nav>a, .secondary-nav .navigation>li>a{
  padding: 9px 14px; border-radius: var(--r-pill); font-weight:600; color: var(--ink-2); font-size:15px;
}
.secondary-nav .promoted{ color: var(--green-700); }
.secondary-nav .image .bg-transfer,.secondary-nav .image{ width:34px; height:34px; border-radius:var(--r-pill); overflow:hidden; }
.nav-btn{ display:none; width:44px; height:44px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); flex-direction:column; justify-content:center; align-items:center; gap:4px; cursor:pointer; }
.nav-btn i{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; }

/* ---------- section titles ----------------------------------------------- */
.section-title{ margin: 0 0 22px; }
.section-title h2{ font-size: clamp(22px, 2.4vw, 30px); margin:0 0 6px; }
.section-title h3{ font-size: 20px; }
.section-title p{ color: var(--muted); margin:0; font-size:15px; }
#page-content{ padding-top: 8px; }
#page-content>.container{ padding-top: 40px; padding-bottom: 40px; }

/* ---------- HERO + search ------------------------------------------------- */
.hero-section{
  position: relative;
  background:
    radial-gradient(1200px 480px at 80% -10%, rgba(242,165,22,.12), transparent 60%),
    linear-gradient(180deg, var(--green-800), var(--green-700) 55%, var(--green-600));
  padding: 0;
}
.hero-section.full-screen{ min-height: auto; }
.hero-section .map-wrapper{ position:relative; }
.hero-section .map,#map-homepage{
  height: 440px; width:100%;
  filter: saturate(1.02);
}
/* headline injected before the search form */
.hero-intro{ max-width: var(--maxw); margin:0 auto; padding: 46px 20px 0; color:#fff; }
.hero-intro h1{ color:#fff; font-size: clamp(30px, 4.6vw, 52px); margin:0 0 12px; letter-spacing:-.03em; }
.hero-intro p{ color: rgba(255,255,255,.86); font-size: clamp(16px,1.6vw,19px); max-width: 60ch; margin:0; }
/* search card floats over the gradient */
.hero-section .search-form,
.hero-section .form.search-form{
  position: relative; background: transparent; padding: 22px 0 46px;
}
.hero-section .search-form .container{ max-width: var(--maxw); }
.hero-section .search-form form{
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 16px;
  border: 1px solid rgba(255,255,255,.4);
}
.hero-section .search-form .form-group{ margin-bottom: 0; }
.hero-section .search-form .wrapper{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 10px; align-items:center; }
.hero-section .search-form .btn-primary{ width:100%; white-space:nowrap; }
.hero-section .geo-location{ position:absolute; z-index:5; right:14px; top:14px; background:var(--surface); width:42px; height:42px; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); color:var(--green-700); }
.hero-section .geo-location .fa{ margin:0; }
/* live results / sidebar panels that slide in over the map */
.results-wrapper .results,.results-wrapper .sidebar-detail{ background: var(--surface); border-left:1px solid var(--line); box-shadow: var(--sh-3); }
.results-wrapper .section-title{ padding: 18px 18px 0; }

/* ---------- listing cards (shared .item/.block/.element/.box) ------------- */
.item,.list-item,.block.listing,.box.listing,.gallery-wrapper.listing{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.item:hover,.list-item:hover{ box-shadow: var(--sh-2); border-color: var(--green-tint-2); }
/* thumbnail (bg-transfer image pattern) */
.item .image,.list-item .image,.gallery-wrapper .image,.quick-detail .image{ position:relative; }
.item .image .bg-transfer,.list-item .image .bg-transfer{ border-radius: 0; }
.image .bg-transfer img,.bg-transfer img{ object-fit: cover; }
/* ribbon / featured / labels */
.ribbon,.featured .ribbon{
  background: var(--amber); color:#3a2a05; font-weight:700;
  border-radius: var(--r-pill); padding: 4px 12px; font-size:12px; letter-spacing:.02em;
  box-shadow: 0 2px 8px rgba(242,165,22,.4);
}
.label,.label-default{
  background: var(--green-tint); color: var(--green-800);
  border-radius: var(--r-pill); font-weight:600; padding: 5px 11px; font-size:12px;
}
.quick-detail{ padding: 14px 16px; }
.quick-detail .title,.item .title,.list-item .title,
.quick-detail h3,.item h3{ font-family:var(--f-disp); font-size:18px; margin:0 0 4px; color:var(--ink); }
.additional-info,.quick-detail .description,.item .description{ color: var(--muted); font-size:14px; }
.price{ color: var(--green-700); font-weight:700; }

/* ---------- ratings / stars ---------------------------------------------- */
.stars,.star-rating,.rating-passive{ color: var(--amber); }
.rating-passive .stars{ color: var(--amber); }
.reviews{ color: var(--muted); font-size: 13px; }
.visitor-rating .star-rating{ color: var(--amber); }

/* ---------- circle icons / quick contact --------------------------------- */
.circle,.circle-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--r-pill);
  background: var(--green-tint); color: var(--green-700);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.circle:hover,.circle-icon:hover{ background: var(--green); color:#fff; transform: translateY(-2px); }

/* ---------- detail page --------------------------------------------------- */
.detail .box,.box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.detail .box{ padding: 22px; margin-bottom: 22px; }
.comment-title,.detail h2{ font-family:var(--f-disp); }
.detail .gallery img{ border-radius: var(--r); }
.visitor-rating input,.visitor-rating .form-control{ border-radius: var(--r-sm); }
.circle-icon.fa-phone,.detail .fa-phone{ color: var(--green-700); }

/* ---------- pricing boxes ------------------------------------------------- */
.pricing,.pricing.box{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 26px;
}
.pricing h2{ font-family:var(--f-disp); }
.pricing figure{ background: var(--green); color:#fff; border-radius: var(--r-pill); padding:6px 16px; font-weight:700; }
.pricing .available i{ color: var(--green); }
.pricing .not-available i{ color: #c6cdc8; }

/* ---------- breadcrumb / pagination -------------------------------------- */
.breadcrumb{ background: transparent; padding: 18px 0; margin:0; font-size:14px; color:var(--muted); }
.breadcrumb>li+li:before{ content:"\203A"; color: var(--muted); padding:0 8px; }
.breadcrumb a{ color: var(--muted); }
.breadcrumb .active{ color: var(--ink); }
.pagination>li>a,.pagination>li>span{ color:var(--green-700); border-color:var(--line); }
.pagination>.active>a,.pagination>.active>span{ background:var(--green); border-color:var(--green); }

/* ---------- modals -------------------------------------------------------- */
.modal-content{ border:none; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.modal-header{ border-bottom:1px solid var(--line-2); padding: 18px 22px; }
.modal-body{ padding: 22px; }
.modal-header .section-title h2{ font-size:22px; }

/* ---------- subscribe / partners / misc sections -------------------------- */
.background-color,.background-color-black{ border-radius: var(--r-xl); }
.subscribe,.subscribe-section{ background: var(--green-tint); border-radius: var(--r-xl); }

/* ---------- footer -------------------------------------------------------- */
#page-footer{ background: var(--green-800); color: rgba(255,255,255,.82); margin-top: 48px; }
#page-footer .footer-wrapper{ max-width: var(--maxw); margin:0 auto; padding: 8px 20px; }
#page-footer a{ color: rgba(255,255,255,.82); }
#page-footer a:hover{ color:#fff; }
#page-footer .block{ padding: 34px 0 10px; }
#page-footer .circle-icon{ background: rgba(255,255,255,.1); color:#fff; }
#page-footer .circle-icon:hover{ background: var(--amber); color:#2a1f04; }
#page-footer .footer-navigation{ border-top:1px solid rgba(255,255,255,.12); padding: 18px 0; }
#page-footer .footer-navigation a{ margin-left:18px; font-weight:600; }
#page-footer .background-wrapper .bg-transfer{ opacity:.06; }

/* ---------- to-top -------------------------------------------------------- */
.to-top{
  background: var(--green); color:#fff; width:46px; height:46px; border-radius:var(--r-pill);
  box-shadow: var(--sh-2); display:flex; align-items:center; justify-content:center;
}
.to-top:hover{ background: var(--green-700); color:#fff; }

/* ---------- loader -------------------------------------------------------- */
.loader,#loader{ background: var(--page); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px){
  .hero-section .search-form .wrapper{ grid-template-columns: 1fr 1fr; }
  .hero-section .search-form .wrapper .form-group:last-child{ grid-column: 1 / -1; }
}
@media (max-width: 767px){
  :root{ --head-h: 60px; }
  .nav-btn{ display:flex; }
  .primary-nav{ display:none; }
  .primary-nav.show{
    display:block; position:absolute; left:12px; right:12px; top: calc(var(--head-h) + 6px);
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--sh-3); padding:10px;
  }
  .primary-nav.show .navigation{ flex-direction:column; align-items:stretch; gap:2px; }
  .primary-nav.show .navigation>li>a{ border-radius:var(--r-sm); }
  .has-child .wrapper{ position:static!important; box-shadow:none; border:none; padding:0 0 0 12px; }
  #page-header .right .secondary-nav a span,
  #page-header .add-listing span{ display:inline; }
  .hero-intro{ padding-top: 30px; }
  .hero-section .map,#map-homepage{ height: 300px; }
  .hero-section .search-form .wrapper{ grid-template-columns: 1fr; }
  #page-content>.container{ padding: 24px 0; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none!important; animation: none!important; }
}

/* ---------- detail gallery: contain the banner carousel ------------------ */
.detail .owl-carousel,.detail .gallery,.gallery-wrapper.detail{
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1);
}
.detail .owl-carousel .owl-item img,
.detail .gallery img,.detail .item img{
  height: 380px; width:100%; object-fit: cover; border-radius: 0;
}
.detail .owl-nav button,.detail .owl-nav .owl-prev,.detail .owl-nav .owl-next{
  background: var(--surface)!important; color: var(--green-700)!important;
  width:40px; height:40px; border-radius: var(--r-pill)!important; box-shadow: var(--sh-2);
}
@media (max-width:767px){ .detail .owl-carousel .owl-item img,.detail .gallery img{ height: 240px; } }

/* empty embed placeholders (map/video) shouldn't look broken before they load */
.detail .box:empty, .map:empty{ min-height: 220px; background:
  repeating-linear-gradient(45deg,var(--green-tint),var(--green-tint) 12px,var(--line-2) 12px,var(--line-2) 24px);
  border-radius: var(--r-lg); opacity:.5; }

/* ---------- home-maps-3 title hero (active variant) ---------------------- */
.hero-section.has-background{ background:
  linear-gradient(180deg, rgba(4,31,60,.86), rgba(5,41,78,.82)),
  url('../img/background-04.jpg') center/cover no-repeat; }
.hero-section.has-background .page-title{ text-align:center; padding: 64px 20px 10px; }
.hero-section.has-background .page-title h1{ color:#fff; font-size: clamp(30px,4.6vw,52px); margin:0 0 10px; letter-spacing:-.03em; }
.hero-section.has-background .page-title h2{ color: rgba(255,255,255,.88); font-family:var(--f-sans); font-weight:500; font-size: clamp(16px,1.6vw,19px); margin:0; }
.hero-section.has-background .search-form.horizontal{ padding: 24px 0 64px; }
.hero-section.has-background .search-form form{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:16px; }
.hero-section.has-background .search-form .row{ display:flex; flex-wrap:wrap; align-items:center; margin:0; gap:10px; }
.hero-section.has-background .search-form .row>[class*="col-"]{ flex:1 1 180px; width:auto; padding:0; }
.hero-section.has-background .search-form .form-group{ margin:0; }

/* leading search icon spacing in hero button */
.hero-section .search-form .btn-primary .fa-search{ margin-left:0; margin-right:8px; }
.hero-section .search-form .btn-primary{ font-weight:600; }
/* brighten hero subtitle a touch */
.hero-section.has-background .page-title h2{ color: rgba(255,255,255,.92); }

/* ---------- mobile header fit ------------------------------------------- */
@media (max-width: 767px){
  #page-header nav{ gap: 8px; padding: 0 14px; }
  #page-header .brand img{ width: 118px!important; }
  #page-header .right{ gap: 4px; }
  /* sign in / register become icon-only so the menu button always fits */
  .secondary-nav > a span,
  .secondary-nav .navigation > li > a span{ display:none; }
  .secondary-nav > a,
  .secondary-nav .navigation > li > a{ padding: 9px 10px; }
  /* the big Add listing is reachable from the menu / hero on phones */
  #page-header .right .btn.add-listing{ display:none!important; }
  .nav-btn{ display:flex!important; }
}

/* ---------- hamburger: make the three lines clearly visible ------------- */
.nav-btn{
  background:#fff!important; border:1px solid var(--line)!important;
  border-radius: var(--r-sm)!important; padding:0!important;
  width:44px!important; height:44px!important;
}
.nav-btn i{
  display:block!important; width:20px!important; height:2px!important;
  background: var(--green-700)!important; border-radius:2px!important;
  margin:2px auto!important; opacity:1!important;
}

/* ==========================================================================
   Home page improvements
   ========================================================================== */

/* 1) selectpicker dropdowns must scroll, never inflate the page.
      (The Category list has 1,000+ options.) */
.bootstrap-select .dropdown-menu{ max-height: 360px!important; overflow: hidden!important; }
.bootstrap-select .dropdown-menu .inner,
.bootstrap-select .dropdown-menu ul.inner,
.bootstrap-select .dropdown-menu > ul{ max-height: 320px!important; overflow-y: auto!important; }

/* 2) equal-height cards in the "Browse Our Listings" grid */
.block .row:has(> [class*="col-"] > .list-item){ display:flex; flex-wrap:wrap; }
.block .row:has(> [class*="col-"] > .list-item) > [class*="col-"]{ display:flex; margin-bottom: 20px; }
.block .row > [class*="col-"] > .list-item{ width:100%; display:flex; flex-direction:column; }
.list-item .list-item-content,.list-item ul{ flex:1; }

/* 3) stats band under the hero */
.stats-band{ background: var(--surface); border-bottom:1px solid var(--line); }
.stats-band .inner{ max-width: var(--maxw); margin:0 auto; padding: 22px 20px;
  display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.stats-band .stat{ display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: 10px; border-radius: var(--r); }
.stats-band .stat .num{ font-family: var(--f-disp); font-weight:800; font-size: clamp(26px,3vw,36px);
  color: var(--green-700); line-height:1; letter-spacing:-.02em; }
.stats-band .stat .lbl{ color: var(--muted); font-size: 14px; margin-top: 6px; }
.stats-band .stat + .stat{ border-left: 1px solid var(--line-2); }
@media (max-width:600px){ .stats-band .inner{ grid-template-columns: 1fr 1fr; gap:8px; }
  .stats-band .stat + .stat{ border-left:none; } }

/* ==========================================================================
   "Browse Our Listings" category cards - refined
   ========================================================================== */
.categories-list .list-item{ padding: 0; overflow: hidden; }
/* card header: icon + name, clickable, with a divider */
.categories-list .list-item .title{ margin: 0; padding: 15px 18px 13px; border-bottom: 1px solid var(--line-2); background: #fff; }
.categories-list .list-item .title a{ display: flex; align-items: center; gap: 12px; }
.categories-list .list-item .title .icon{
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
  background: var(--green-tint); color: var(--green-700);
  display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease;
}
.categories-list .list-item .title .icon i{ font-size: 18px; line-height: 1; }
.categories-list .list-item .title h3{ margin: 0; font-family: var(--f-disp); font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.categories-list .list-item .title a:hover .icon{ background: var(--green); color: #fff; }
.categories-list .list-item .title a:hover h3{ color: var(--green-700); }
/* sub-category rows (each sub-item is its own <ul><li>) */
.categories-list .list-item ul{ margin: 0; padding: 0; list-style: none; }
.categories-list .list-item li{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 18px; border-top: 1px solid var(--line-2); transition: background .12s ease;
}
.categories-list .list-item ul:first-of-type li{ border-top: none; }
.categories-list .list-item li a{
  flex: 1 1 auto; min-width: 0; color: var(--ink-2); font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.categories-list .list-item li:hover{ background: var(--green-tint); }
.categories-list .list-item li:hover a{ color: var(--green-800); }
/* count as a small pill */
.categories-list .list-item .count{
  margin: 0; flex: 0 0 auto; min-width: 24px; text-align: center;
  font-size: 12px; font-weight: 700; line-height: 1; color: var(--green-800);
  background: var(--green-tint-2); border-radius: var(--r-pill); padding: 4px 9px;
}
.categories-list .list-item li:hover .count{ background: var(--green); color: #fff; }
/* the repeated advert banners: tidy them */
.categories-list .center img,.block .center img{ border-radius: var(--r); box-shadow: var(--sh-1); }
/* muted pill for sub-categories with no listings yet */
.categories-list .list-item .count.zero{ background: var(--line-2); color: var(--muted); }
.categories-list .list-item li:hover .count.zero{ background: #d9ded9; color: var(--ink-2); }

/* ==========================================================================
   "Promoted Locations" carousel (home) - refined
   ========================================================================== */
section.background-is-dark .background-color-default{
  border-radius: 0;
  background: linear-gradient(180deg, var(--green-700) 0%, var(--green-800) 100%);
}
section.background-is-dark .section-title{ margin-bottom: 26px; align-items: flex-end; }
section.background-is-dark .section-title h2{ color: #fff; margin-bottom: 6px; }
.promo-sub{ color: rgba(255,255,255,.78); margin: 0; font-size: 15px; }
.promo-actions{ display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.btn.promo-cta,
.background-is-dark a.btn.promo-cta{
  background: #fff; color: var(--green-800); border-color: #fff; font-size: 14px;
  padding: 10px 20px; box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.btn.promo-cta:hover,
.background-is-dark a.btn.promo-cta:hover{ background: var(--amber); border-color: var(--amber); color: #2a1f04; }
section.background-is-dark #gallery-nav{ width: auto; height: auto; margin-left: 0; display: flex; gap: 8px; }

/* line the first card up with the page content */
.gallery.featured{ padding-left: max(5px, calc((100vw - var(--maxw)) / 2 + 5px)); }

/* the card */
.gallery.featured .item{
  width: 280px; margin-left: 16px; border: none; border-radius: var(--r-lg);
  box-shadow: 0 10px 28px rgba(0,0,0,.22); background: #fff; overflow: hidden;
}
.gallery.featured .item:hover{ box-shadow: 0 16px 36px rgba(0,0,0,.28); border-color: transparent; }
.gallery.featured .item > a{ height: 230px; }
/* stronger shade at the bottom so white text reads on light photos too */
.gallery.featured .item > a .image:after{
  opacity: 1; background-color: transparent;
  background: linear-gradient(180deg, rgba(6,16,30,0) 25%, rgba(6,16,30,.55) 58%, rgba(6,16,30,.92) 100%);
}
.gallery.featured .item > a .description{ left: 18px; right: 18px; bottom: 16px; }
.gallery.featured .item > a .description h3{
  font-family: var(--f-disp); font-size: 18px; line-height: 1.25; margin: 8px 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.gallery.featured .item > a .description h4{
  font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.86);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.gallery.featured .item.featured .label{
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.55); color: #fff;
  backdrop-filter: blur(4px); font-size: 11px; padding: 4px 10px;
}
/* price level pill (₹ to ₹₹₹₹) */
.gallery.featured .item .price.promo-price{
  top: 14px; right: 14px; padding: 4px 11px; border-radius: var(--r-pill);
  background: #fff; color: var(--green-800); font-size: 13px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.gallery.featured .item .price.promo-price:after{ display: none; }
/* footer: white, so the stars and review count are readable */
.gallery.featured .item.featured .additional-info{
  background: #fff; color: var(--ink-2); padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.gallery.featured .item.featured .additional-info:after{ display: none; }
.gallery.featured .item .additional-info .circle{ display: none; } /* every card here is featured */
.gallery.featured .item .rating-passive .reviews{ color: var(--muted); }
.gallery.featured .item .controls-more{ position: static; }
.gallery.featured .item .controls:after,
.gallery.featured .item .controls-more:after{ color: var(--muted)!important; opacity: 1!important; }

@media (max-width: 767px){
  section.background-is-dark .section-title{ display: block; }
  section.background-is-dark .section-title .element{ display: block; width: 100%; text-align: left; }
  .promo-actions{ justify-content: space-between; margin-top: 16px; }
  .gallery.featured{ padding-left: 4px; }
  .gallery.featured .item{ width: 78vw; max-width: 300px; }
}

/* --- promoted: fixes after review ------------------------------------- */
/* subtitle readable on the green band */
section.background-is-dark .section-title p.promo-sub{ color: rgba(255,255,255,.82); }
/* header: title left, button + arrows on one line right */
section.background-is-dark .section-title.vertical-aligned-elements{
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
}
section.background-is-dark .section-title.vertical-aligned-elements > .element{ display: block; width: auto; }
section.background-is-dark .section-title .element.promo-actions{ display: flex; align-items: center; gap: 14px; }
/* softer card shadow so the edge of the carousel stays clean */
.gallery.featured .item{ box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.gallery.featured .item:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.24); }
/* ribbon goes top-left as an amber pill, clear of the price pill */
.gallery.featured .item .ribbon{
  top: 14px; right: auto; left: 14px; margin: 0!important;
  background: var(--amber); color: #3a2a05; border-radius: var(--r-pill);
  padding: 4px 11px; font-size: 11px; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.gallery.featured .item .ribbon:before,
.gallery.featured .item .ribbon:after{ display: none; }

/* rating stars everywhere: amber when given, light grey when not */
.rating-passive .stars figure{ opacity: 1; color: #cfd6d0; font-size: 12px; }
.rating-passive .stars figure.active{ color: var(--amber); }
.item.featured .additional-info .rating-passive .stars figure{ color: #cfd6d0; }
.item.featured .additional-info .rating-passive .stars figure.active{ color: var(--amber); }
.rating-passive .reviews{ opacity: 1; color: var(--muted); }

@media (max-width: 767px){
  section.background-is-dark .section-title.vertical-aligned-elements{ display: block; }
  section.background-is-dark .section-title .element.promo-actions{ justify-content: space-between; margin-top: 16px; }
}
/* carousel arrows: normal round buttons beside the call-to-action */
section.background-is-dark #gallery-nav{ position: static; display: flex; gap: 8px; width: auto; height: auto; margin: 0; }
section.background-is-dark #gallery-nav .owl-prev,
section.background-is-dark #gallery-nav .owl-next{
  position: static!important; margin: 0; width: 42px; height: 42px; border-radius: var(--r-pill);
  border: 2px solid rgba(255,255,255,.75); display: inline-flex!important; align-items: center; justify-content: center;
  color: #fff; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
section.background-is-dark #gallery-nav .owl-prev:after,
section.background-is-dark #gallery-nav .owl-next:after{ border: none; padding: 0; font-size: 22px; }
section.background-is-dark #gallery-nav .owl-prev:hover,
section.background-is-dark #gallery-nav .owl-next:hover{ background: #fff; border-color: #fff; color: var(--green-800); }
/* line cards up with the heading, and keep the looped neighbour out of view */
.gallery.featured{ padding-left: max(15px, calc((100vw - var(--maxw)) / 2 + 15px)); }
.gallery.featured .item{ margin-left: 0; margin-right: 16px; }
section.background-is-dark .section-title h2{ opacity: 1; color: #fff; }
@media (max-width: 767px){ .gallery.featured{ padding-left: 15px; } }
/* keep the green Promoted band apart from the green footer */
section.block.background-is-dark{ margin-bottom: 64px; }

/* ==========================================================================
   Phone comfort pass
   ========================================================================== */
@media (max-width: 767px){
  /* page content keeps a side margin (an earlier rule removed it) */
  #page-content > .container{ padding: 20px 16px; }
  .container{ padding-left: 16px; padding-right: 16px; }

  /* "Browse Our Listings": a compact 2-column grid of category tiles.
     Each tile opens the category page, which lists its sub-categories
     with counts - so the home page no longer needs 36 long cards. */
  .categories-list .row{ display: grid!important; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; }
  .categories-list .row::before,.categories-list .row::after{ display: none; }
  .categories-list .row > [class*="col-"]{ width: auto!important; padding: 0!important; margin: 0!important; float: none; display: block!important; }
  .categories-list .list-item{ height: 100%; margin: 0; }
  .categories-list .list-item ul{ display: none; }
  .categories-list .list-item .title{ border-bottom: none; padding: 14px 12px; height: 100%; }
  .categories-list .list-item .title a{ flex-direction: column; align-items: flex-start; gap: 10px; min-height: 76px; }
  .categories-list .list-item .title h3{ font-size: 14px; line-height: 1.25; }
  .categories-list .list-item .title .icon{ width: 38px; height: 38px; }
  .categories-list .center img{ width: 100%!important; max-width: 365px; }
  .block .section-title{ margin-bottom: 18px; }

  /* stats band: three compact columns */
  .stats-band .inner{ grid-template-columns: repeat(3,1fr); gap: 6px; padding: 16px 10px; }
  .stats-band .stat{ padding: 6px 2px; }
  .stats-band .stat .num{ font-size: 22px; }
  .stats-band .stat .lbl{ font-size: 12px; line-height: 1.3; }
  .stats-band .stat + .stat{ border-left: 1px solid var(--line-2); }
  #page-content > .container > hr, #page-content > .container:has(> hr:only-child){ display: none; }

  /* comfortable tap targets (at least ~40px) */
  .secondary-nav > a, .secondary-nav .navigation > li > a{ min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .breadcrumb{ padding: 12px 0; }
  .breadcrumb a{ display: inline-block; padding: 8px 0; }
  #page-footer .footer-navigation a{ display: inline-block; padding: 10px 6px; margin-left: 6px; }
  #page-footer .footer-navigation .element{ display: block; width: 100%; text-align: left!important; margin-bottom: 6px; }
  #page-footer .vertical-aligned-elements{ display: block; }
  #page-footer .vertical-aligned-elements .element{ display: block; width: 100%; text-align: left!important; margin-bottom: 12px; }
  .form-control, .bootstrap-select > .dropdown-toggle{ min-height: 46px; font-size: 16px; } /* 16px stops iOS zooming into fields */
  .btn{ min-height: 44px; }
}

/* ==========================================================================
   Search / category results page (category.php)
   ========================================================================== */
.results-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin: 4px 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.results-head h1{ font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 4px; color: var(--ink); overflow-wrap:anywhere; }
.results-head .results-count{ margin: 0; color: var(--muted); font-size: 15px; }
.results-head .clear-filters{ flex: 0 0 auto; padding: 8px 16px; font-size: 14px; }
.results-col #page{ display:flex; flex-wrap:wrap; }
.results-col #page .list-group{ margin:0; display: contents; }
.results-col #page .list-group > [class*="col-"]{ margin-bottom: 24px; }

/* result card: same treatment as the Promoted cards */
.item.result-card,
.sidebar .featured-side .item{ border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; background:#fff; box-shadow: var(--sh-1); margin-bottom: 0; }
.item.result-card:hover{ box-shadow: var(--sh-2); }
.item.result-card > a,
.sidebar .featured-side .item > a{ height: 200px; }
.item.result-card > a .image:after,
.sidebar .featured-side .item > a .image:after{
  opacity:1; background-color: transparent;
  background: linear-gradient(180deg, rgba(6,16,30,0) 25%, rgba(6,16,30,.55) 58%, rgba(6,16,30,.92) 100%);
}
.item.result-card > a .description,
.sidebar .featured-side .item > a .description{ left:16px; right:16px; bottom:14px; }
.item.result-card > a .description h3,
.sidebar .featured-side .item > a .description h3{
  font-family: var(--f-disp); font-size: 17px; line-height:1.25; margin: 8px 0 4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
}
.item.result-card > a .description h4,
.sidebar .featured-side .item > a .description h4{
  font-size: 13px; line-height:1.4; color: rgba(255,255,255,.86);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
}
.item.result-card .label,
.sidebar .featured-side .item .label{ background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.55); color:#fff; font-size:11px; padding:4px 10px; }
.item.result-card .price,
.sidebar .featured-side .item .price{
  top:12px; right:12px; padding:4px 11px; border-radius: var(--r-pill);
  background:#fff; color: var(--green-800); font-size:13px; font-weight:800; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.item.result-card .price:after,
.sidebar .featured-side .item .price:after{ display:none; }
.item.result-card .ribbon,
.sidebar .featured-side .item .ribbon{
  top:12px; left:12px; right:auto; margin:0; border-radius: var(--r-pill); padding:4px 11px; font-size:11px;
  background: var(--amber); color:#3a2a05; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.item.result-card .ribbon:before,.item.result-card .ribbon:after,
.sidebar .featured-side .item .ribbon:before,.sidebar .featured-side .item .ribbon:after{ display:none; }
.item.result-card .additional-info{ background:#fff; padding: 11px 16px; display:flex; align-items:center; justify-content:space-between; border-top: 1px solid var(--line-2); }
.item.result-card .controls-more{ position: static; }
.sidebar .featured-side .item{ margin-bottom: 14px; }
.sidebar .featured-side .item > a{ height: 160px; }

/* sidebar filter */
.sidebar > section:first-child{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-1); margin-bottom: 26px; }
.sidebar h2{ font-family: var(--f-disp); font-size: 20px; margin: 0 0 14px; color: var(--ink); }
.sidebar .form-group label{ font-size: 13px; color: var(--ink-2); text-transform: none; font-weight: 600; }
.sidebar .btn-block{ display:flex; align-items:center; justify-content:center; gap:8px; }
.sidebar .btn-block .fa{ margin:0; }

/* empty state */
.empty-results{ width:100%; text-align:center; background:#fff; border:1px dashed var(--green-tint-2); border-radius: var(--r-lg); padding: 44px 20px; margin: 0 15px 24px; }
.empty-results h2{ font-size: 22px; margin: 0 0 8px; }
.empty-results p{ color: var(--muted); margin: 0 auto 18px; max-width: 46ch; }

/* page links */
.results-pages{ display:flex; justify-content:center; margin: 8px 0 10px; }
.results-pages .pagination{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.results-pages .pagination > li > a,
.results-pages .pagination > li > span{
  float:none; display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding: 0 12px;
  border:1px solid var(--line); border-radius: var(--r-pill)!important; margin:0; color: var(--green-800); background:#fff; font-weight:600;
}
.results-pages .pagination > li > a:hover{ background: var(--green-tint); border-color: var(--green-tint-2); }
.results-pages .pagination > li.active > span{ background: var(--green); border-color: var(--green); color:#fff; }
.results-pages .pagination > li.gap > span{ border:none; background:transparent; min-width:24px; color: var(--muted); }

@media (max-width: 767px){
  .results-head{ flex-direction: column; align-items: flex-start; }
  .results-col #page .list-group > [class*="col-"]{ width:100%; }
  .sidebar .featured-side{ display:none; }        /* results first on phones */
  .sidebar > section:first-child{ padding: 16px; margin-bottom: 18px; }
  .results-pages .pagination > li > a[rel]{ padding: 0 14px; }
}
@media (min-width:768px) and (max-width: 991px){
  .results-col #page .list-group > [class*="col-"]{ width:50%; }
}
/* sidebar headings: the old rule made them thin and grey */
aside.sidebar h2, .sidebar section h2{ font-family: var(--f-disp); font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: -.01em; }
/* filter box: always open on desktop, tap to open on phones */
.filter-box > summary{ list-style: none; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.filter-box > summary::-webkit-details-marker{ display:none; }
.filter-box > summary h2{ margin: 0 0 14px; }
.filter-toggle-hint{ display:none; }
@media (min-width: 768px){ .filter-box > summary{ pointer-events:none; } }
@media (max-width: 767px){
  .filter-box > summary{ cursor:pointer; min-height: 44px; }
  .filter-box > summary h2{ margin:0; font-size: 18px; }
  .filter-toggle-hint{ display:inline-flex; align-items:center; gap:6px; padding: 8px 14px; border-radius: var(--r-pill);
    background: var(--green-tint); color: var(--green-800); font-weight:600; font-size:14px; }
  .filter-toggle-hint::before{ content:"Show"; }
  .filter-box[open] .filter-toggle-hint::before{ content:"Hide"; }
  .filter-box[open] > summary{ margin-bottom: 14px; }
}

/* ==========================================================================
   District maps page (district_maps.php)
   ========================================================================== */
.dm-head{ margin: 0 0 24px; }
.dm-head h1{ font-size: clamp(26px, 3vw, 36px); margin: 0 0 6px; }
.dm-head p{ margin: 0; color: var(--muted); font-size: 16px; }
.dm-layout{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.dm-home{
  display:flex; align-items:center; gap:14px; padding: 16px 18px; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--green-700), var(--green)); color:#fff; border-radius: var(--r-lg);
  box-shadow: var(--sh-2); transition: transform .15s ease, box-shadow .15s ease;
}
.dm-home:hover,.dm-home:focus{ color:#fff; transform: translateY(-2px); box-shadow: var(--sh-3); }
.dm-home-icon{ width:46px; height:46px; border-radius: 12px; background: rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size: 22px; flex:0 0 auto; }
.dm-home strong{ display:block; font-family: var(--f-disp); font-size: 20px; line-height:1.2; }
.dm-home small{ display:block; color: rgba(255,255,255,.85); font-size: 14px; }
.dm-home .dm-go{ margin-left:auto; font-size: 26px; opacity:.9; }
.dm-find{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius: var(--r-pill);
  padding: 0 16px; margin: 0 0 16px; font-weight: 400; box-shadow: var(--sh-1); }
.dm-find:focus-within{ border-color: var(--green); box-shadow: var(--ring); }
.dm-find .fa{ color: var(--muted); }
.dm-find input{ border:0; outline:0; background:transparent; flex:1; min-width:0; height: 46px; font-size: 16px; color: var(--ink); }
.dm-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.dm-grid li[hidden]{ display:none; }
.dm-grid a{
  display:flex; align-items:center; gap:10px; min-height: 48px; padding: 10px 14px;
  background:#fff; border:1px solid var(--line); border-radius: var(--r); color: var(--ink-2); font-weight: 600; font-size: 15px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.dm-grid a .fa{ color: var(--green); font-size: 15px; flex: 0 0 auto; }
.dm-grid a:hover,.dm-grid a:focus{ background: var(--green-tint); border-color: var(--green-tint-2); color: var(--green-800); }
.dm-none{ margin: 14px 2px 0; color: var(--muted); }
.dm-state{ position: sticky; top: calc(var(--head-h) + 16px); }
.dm-state-link{ display:block; position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--sh-1); }
.dm-state-link img{ display:block; width:100%; height:auto; }
.dm-zoom{ position:absolute; right:12px; bottom:12px; background: rgba(15,27,42,.82); color:#fff; padding: 8px 14px; border-radius: var(--r-pill); font-size: 14px; font-weight:600; }
.dm-state-link:hover .dm-zoom{ background: var(--green-700); }
@media (max-width: 991px){
  .dm-layout{ grid-template-columns: 1fr; }
  .dm-state{ position: static; }
}
@media (max-width: 767px){
  .dm-grid{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .dm-grid a{ font-size: 14px; padding: 10px 12px; }
  .dm-home strong{ font-size: 18px; }
}
/* phones: footer blocks use the full width (a .width-50 rule kept them at
   half width, so the footer text ran down a narrow column on every page) */
@media (max-width: 767px){
  #page-footer .element.width-50,
  #page-footer .vertical-aligned-elements .element{ width: 100%!important; display: block!important; text-align: left!important; }
  #page-footer .footer-navigation .element a:first-child{ margin-left: 0; padding-left: 0; }
}
/* district search box: no second border inside the pill */
.dm-find input, .dm-find input:focus{ border: 0!important; box-shadow: none!important; padding: 0!important; background: transparent!important; height: 46px; }

/* ==========================================================================
   Single district map page (maps.php)
   ========================================================================== */
.mp-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; margin: 0 0 20px; flex-wrap: wrap; }
.mp-head h1{ font-size: clamp(26px, 3vw, 36px); margin: 0 0 6px; }
.mp-head p{ margin:0; color: var(--muted); font-size: 16px; }
.mp-switch{ min-width: 240px; }
.mp-switch label{ display:block; margin: 0 0 6px; font-size: 13px; }
.mp-switch select{ width:100%; height: 46px; border:1px solid var(--line); border-radius: var(--r-sm); background:#fff; padding: 0 12px; font-size: 16px; color: var(--ink); }
.mp-switch select:focus{ border-color: var(--green); box-shadow: var(--ring); outline: none; }
.mp-switch-row{ display:flex; gap: 8px; }
.mp-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
.mp-tools{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.mp-tools .btn{ display:inline-flex; align-items:center; gap: 8px; }
.mp-tools .btn .fa{ margin:0; }
.mp-tip{ color: var(--muted); font-size: 14px; margin-left: auto; }
.mp-figure{ display:block; max-width: 760px; margin: 0 auto; border-radius: var(--r); overflow:hidden; cursor: zoom-in; }
.mp-figure img{ display:block; width:100%; height:auto; }
.mp-pager{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 12px; margin: 22px 0 10px; }
.mp-pager a{ display:inline-flex; align-items:center; gap: 10px; min-height: 48px; padding: 8px 16px; background:#fff; border:1px solid var(--line);
  border-radius: var(--r-pill); color: var(--ink-2); font-weight: 600; }
.mp-pager a:hover{ background: var(--green-tint); border-color: var(--green-tint-2); color: var(--green-800); }
.mp-pager a small{ display:block; font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.1; }
.mp-pager .fa{ font-size: 22px; color: var(--green); }
.mp-pager .mp-prev{ justify-self: start; }
.mp-pager .mp-next{ justify-self: end; text-align: right; }
.mp-pager .mp-all .fa{ font-size: 16px; }
.mp-cta{ display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: wrap; margin: 18px 0 8px; padding: 18px 22px;
  background: var(--green-tint); border: 1px solid var(--green-tint-2); border-radius: var(--r-lg); color: var(--ink-2); }
.mp-cta strong{ color: var(--ink); margin-right: 4px; }
.mp-cta-go{ display:inline-flex; align-items:center; gap:8px; background: var(--green); color:#fff; border-radius: var(--r-pill); padding: 10px 18px; font-weight:600; }
.mp-cta:hover .mp-cta-go{ background: var(--green-700); }
.mp-missing{ margin: 10px 0 30px; }
.mp-missing h1{ font-size: 24px; margin: 0 0 8px; }
@media (max-width: 767px){
  .mp-head{ align-items: stretch; }
  .mp-switch{ width: 100%; }
  .mp-card{ padding: 12px; }
  .mp-tip{ margin-left: 0; width: 100%; }
  .mp-tools .btn{ flex: 1 1 auto; justify-content: center; }
  .mp-pager{ grid-template-columns: 1fr 1fr; }
  .mp-pager .mp-all{ grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .mp-pager a{ padding: 8px 12px; }
}

/* ---------- district information (district_info.php) ------------------- */
.di-head{ margin: 0 0 14px; }
.di-head h1{ font-size: clamp(26px, 3vw, 36px); margin: 0 0 6px; }
.di-head p{ margin: 0; color: var(--muted); font-size: 16px; max-width: 760px; }
.di-note{ display:flex; gap:10px; align-items:flex-start; margin: 0 0 18px; padding: 12px 16px; background: var(--amber-tint);
  border: 1px solid #f6dfa6; border-radius: var(--r); color: var(--ink-2); font-size: 14px; }
.di-note .fa{ color: var(--amber-600); font-size: 17px; margin-top: 1px; }
.di-jump{ position: sticky; top: var(--head-h); z-index: 5; display:flex; gap: 8px; overflow-x: auto; padding: 10px 0; margin: 0 0 8px;
  background: var(--page); scrollbar-width: none; }
.di-jump::-webkit-scrollbar{ display:none; }
.di-jump a{ flex: 0 0 auto; padding: 8px 14px; background:#fff; border:1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.di-jump a:hover,.di-jump a:focus{ background: var(--green-tint); border-color: var(--green-tint-2); color: var(--green-800); text-decoration:none; }
.di-section{ padding: 22px 0 8px; scroll-margin-top: calc(var(--head-h) + 64px); }
.di-section h2{ font-size: clamp(21px, 2.2vw, 26px); margin: 0 0 14px; }
.di-section h3{ font-size: 17px; margin: 22px 0 10px; }
.di-card > h3:first-child{ margin-top: 0; }
.di-sub{ color: var(--muted); margin: -6px 0 14px; }
.di-stats{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0 0 16px; }
.di-stats-2{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 640px; }
.di-stat{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--sh-1); }
.di-stat span{ display:block; color: var(--muted); font-size: 13px; font-weight: 600; text-transform: none; }
.di-stat strong{ display:block; font-family: var(--f-disp); font-size: 24px; color: var(--green-700); line-height: 1.25; margin: 4px 0 2px;
  font-variant-numeric: tabular-nums; }
.di-stat small{ display:block; color: var(--ink-2); font-size: 13px; }
.di-grid2{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: start; }
.di-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sh-1); }
.di-about p{ color: var(--ink-2); line-height: 1.65; }
.di-about p:last-child{ margin-bottom: 0; }
.di-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; border:1px solid var(--line); border-radius: var(--r); background:#fff; }
.di-card .di-table-wrap{ border-radius: var(--r-sm); }
.di-tall{ max-height: 640px; overflow-y: auto; }
.di-tall thead th{ position: sticky; top: 0; z-index: 1; }
.di-table{ width:100%; border-collapse: collapse; font-size: 15px; text-transform: none; }
.di-table th,.di-table td{ padding: 10px 14px; border-bottom: 1px solid var(--line-2); text-align:left; vertical-align: top; }
.di-table thead th{ background: var(--green-tint); color: var(--green-800); font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--green-tint-2); white-space: nowrap; }
.di-table tbody tr:last-child td,.di-table tbody tr:last-child th{ border-bottom: 0; }
.di-table tbody tr:hover td{ background: #fafbf9; }
.di-table .num{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.di-table tfoot th,.di-table tfoot td{ border-top: 2px solid var(--line); border-bottom: 0; font-weight: 700; color: var(--ink); background: #fafbf9; }
.di-compact th,.di-compact td{ padding: 8px 12px; font-size: 14px; }
.di-table tr.di-me td{ background: var(--green-tint); font-weight: 600; color: var(--green-800); }
.di-revenue .di-div{ background: #fafbf9; color: var(--ink); font-weight: 700; border-right: 1px solid var(--line-2); }
.di-revenue .di-tal{ font-weight: 600; color: var(--ink); border-right: 1px solid var(--line-2); }
.di-revenue tr.di-group td{ border-top: 1px solid var(--line); }
.di-na{ color: var(--muted); }
.di-nowrap{ white-space: nowrap; font-variant-numeric: tabular-nums; }
.di-tag{ display:inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--line-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.di-mayor{ display:flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.di-mayor .di-label{ flex-basis: 100%; color: var(--muted); font-size: 13px; font-weight: 600; }
.di-mayor strong{ font-family: var(--f-disp); font-size: 19px; color: var(--ink); }
.di-party{ padding: 2px 10px; border-radius: var(--r-pill); background: var(--green-tint); color: var(--green-800); font-size: 12px; font-weight: 700; }
.di-phone{ margin-left: auto; color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.di-phone .fa{ color: var(--green); margin-right: 4px; }
.di-chips{ list-style: none; margin: 0; padding: 0; display:flex; flex-wrap: wrap; gap: 8px; counter-reset: di; }
.di-chips li{ counter-increment: di; padding: 8px 14px; background:#fff; border:1px solid var(--line); border-radius: var(--r-pill); font-size: 14px; color: var(--ink-2); }
.di-chips li:before{ content: counter(di) ". "; color: var(--muted); }
.di-facts{ margin: 0; }
.di-facts > div{ display:flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.di-facts > div:last-child{ border-bottom: 0; }
.di-facts dt{ font-weight: 500; color: var(--ink-2); }
.di-facts dd{ margin: 0; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.di-facts .di-subfact{ padding-left: 18px; }
.di-facts .di-subfact dt,.di-facts .di-subfact dd{ font-weight: 500; color: var(--muted); font-size: 14px; }
.di-cta{ margin-top: 28px; margin-bottom: 36px; }
@media (max-width: 991px){
  .di-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .di-grid2{ grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 767px){
  .di-jump{ margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; }
  .di-stats{ gap: 10px; }
  .di-stat{ padding: 12px 14px; }
  .di-stat strong{ font-size: 20px; }
  .di-card{ padding: 14px; }
  .di-table th,.di-table td{ padding: 9px 10px; font-size: 14px; }
  .di-phone{ margin-left: 0; flex-basis: 100%; }

}
.di-revenue .di-tal small{ display:block; color: var(--muted); font-weight: 500; font-size: 13px; }
.di-revenue tbody td,.di-revenue tbody th{ border-bottom: 1px solid var(--line); }
.di-firkas{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.di-firkas li{ padding: 4px 4px 4px 10px; background: var(--line-2); border-radius: var(--r-pill); font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.di-firkas li b{ display:inline-block; min-width: 24px; margin-left: 4px; padding: 0 6px; border-radius: var(--r-pill); background:#fff; color: var(--green-800); font-size: 12px; text-align:center; font-variant-numeric: tabular-nums; }
.di-revenue td:nth-child(3), .di-revenue tr td:nth-last-child(2){ min-width: 260px; }
.di-tall{ max-height: none; overflow-y: visible; }
.di-table th.num:first-child,.di-table td.num:first-child{ width: 48px; }
@media (max-width: 767px){
  /* revenue table: stack each taluk as a block */
  .di-revenue, .di-revenue tbody, .di-revenue tr, .di-revenue th, .di-revenue td, .di-revenue tfoot{ display:block; width:100%; }
  .di-revenue thead{ display:none; }
  .di-revenue td:nth-child(3), .di-revenue tr td:nth-last-child(2){ min-width: 0; }
  .di-revenue tbody tr{ padding: 10px 12px 12px; border-bottom: 1px solid var(--line); }
  .di-revenue tbody th, .di-revenue tbody td{ border: 0 !important; padding: 0; background: transparent; }
  .di-revenue .di-div{ font-family: var(--f-disp); font-size: 13px; color: var(--muted); text-transform: none; margin: 2px 0 6px; }
  .di-revenue .di-div:before{ content: "Revenue division: "; font-weight: 500; }
  .di-revenue .di-tal{ font-size: 16px; display:flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
  .di-revenue .di-tal small{ display:inline; }
  .di-revenue .di-vill{ text-align:left; margin-top: 8px; color: var(--ink-2); font-size: 14px; }
  .di-revenue .di-vill:before{ content: "Villages: "; color: var(--muted); }
  .di-revenue tfoot tr{ display:flex; justify-content: space-between; padding: 10px 12px; background:#fafbf9; }
  .di-revenue tfoot th,.di-revenue tfoot td{ width:auto; padding:0; border:0; background:transparent; }
  .di-revenue tfoot td.num:before{ content: "Villages: "; font-weight: 500; color: var(--muted); }
  /* tables inside cards use the card's full width */
  .di-card .di-table-wrap{ margin: 0 -14px -14px; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
  .di-compact th,.di-compact td{ padding: 8px 6px; font-size: 13px; }
  #corporations .di-table th:first-child, #corporations .di-table td:first-child{ display:none; }
}

/* ---------- revenue villages (revenue_info.php) ------------------------ */
.di-more{ margin: 12px 0 0; }
.di-more a{ font-weight: 600; color: var(--green-700); }
.ri-stats{ margin-top: 18px; }
.ri-stats .di-stat strong{ font-size: 28px; }
.ri-tools{ display:flex; align-items:center; gap: 16px; flex-wrap: wrap; margin: 4px 0 6px; }
.ri-find{ flex: 1 1 320px; max-width: 520px; margin: 0; }
.ri-count{ margin: 0; color: var(--green-800); font-weight: 600; font-size: 14px; min-height: 20px; }
.ri-jump a b{ margin-left: 4px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--green-tint); color: var(--green-800); font-size: 12px; }
.ri-none{ margin: 18px 2px 30px; }
.ri-division{ padding: 14px 0 0; }
.ri-division[hidden], .ri-taluk[hidden], .ri-firka[hidden], .ri-firka li[hidden]{ display: none; }
.ri-division > h2{ font-size: clamp(21px, 2.2vw, 26px); margin: 10px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--green-tint-2); }
.ri-division > h2 span{ display:block; font-family: var(--f-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin-bottom: 2px; }
.ri-taluk{ margin: 0 0 26px; scroll-margin-top: calc(var(--head-h) + 64px); }
.ri-taluk-head{ display:flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.ri-taluk-head h3{ font-size: 19px; margin: 0; }
.ri-taluk-head span{ color: var(--muted); font-size: 14px; }
.ri-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; align-items: start; }
.ri-firka{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px 12px; box-shadow: var(--sh-1); }
.ri-firka h4{ display:flex; align-items:center; justify-content: space-between; gap: 10px; font-size: 15px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.ri-firka h4 b{ flex: 0 0 auto; min-width: 28px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--green-tint); color: var(--green-800); font-family: var(--f-sans); font-size: 12px; text-align:center; }
.ri-firka ul{ list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 16px; }
.ri-firka li{ break-inside: avoid; padding: 3px 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); text-transform: none; overflow-wrap: anywhere; }
.ri-firka mark{ background: var(--amber-tint); color: var(--ink); padding: 0 1px; border-radius: 3px; font-weight: 600; }
.ri-cta-links{ display:flex; gap: 10px; flex-wrap: wrap; }
.mp-cta-go.ri-ghost{ background:#fff; color: var(--green-700); border: 1px solid var(--green-tint-2); }
.mp-cta:hover .mp-cta-go.ri-ghost{ background:#fff; }
@media (max-width: 991px){ .ri-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767px){
  .ri-grid{ grid-template-columns: minmax(0,1fr); gap: 10px; }
  .ri-stats{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
  .ri-stats .di-stat{ padding: 10px 8px; text-align:center; }
  .ri-stats .di-stat span{ font-size: 11px; }
  .ri-stats .di-stat strong{ font-size: 20px; }
  .ri-find{ max-width: none; flex-basis: 100%; }
}
.ri-count:empty{ display:none; }

/* ---------- blog list (blog.php) --------------------------------------- */
.bl-head{ margin-bottom: 22px; }
.bl-pageno{ color: var(--ink-2); font-weight: 600; }
.bl-list{ display:flex; flex-direction: column; gap: 18px; margin: 0 0 24px; }
.bl-card{ display:grid; grid-template-columns: 240px minmax(0,1fr); background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  overflow:hidden; box-shadow: var(--sh-1); transition: box-shadow .2s ease, transform .2s ease; }
.bl-card:hover{ box-shadow: var(--sh-2); transform: translateY(-2px); }
.bl-thumb{ display:block; background: var(--line-2); aspect-ratio: 1 / 1; overflow:hidden; }
.bl-thumb img{ display:block; width:100%; height:100%; object-fit: cover; }
.bl-body{ display:flex; flex-direction: column; padding: 20px 24px; min-width: 0; }
.bl-meta{ display:flex; flex-wrap:wrap; gap: 4px 0; margin: 0 0 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.bl-meta span:before{ content: "\00b7"; margin: 0 8px; }
.bl-body h2{ font-family: var(--f-disp); font-size: clamp(19px, 2vw, 23px); font-weight: 700; line-height: 1.3; margin: 0 0 10px; text-transform: none; overflow-wrap: anywhere; }
.bl-body h2 a{ color: var(--ink); }
.bl-body h2 a:hover,.bl-body h2 a:focus{ color: var(--green-700); text-decoration: none; }
.bl-excerpt{ color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-tags{ list-style:none; display:flex; flex-wrap:wrap; gap: 6px; margin: 0 0 16px; padding: 0; }
.bl-tags li{ padding: 3px 10px; border-radius: var(--r-pill); background: var(--line-2); color: var(--ink-2); font-size: 12.5px; font-weight: 500; text-transform: none; }
.bl-tags .bl-more{ background: transparent; color: var(--muted); padding-left: 2px; }
.bl-read{ margin-top: auto; align-self: flex-start; display:inline-flex; align-items:center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--green-700); }
.bl-read .fa{ transition: transform .2s ease; }
.bl-read:hover{ color: var(--green-800); text-decoration: none; }
.bl-read:hover .fa{ transform: translateX(3px); }
.bl-empty{ background:#fff; border:1px dashed var(--line); border-radius: var(--r-lg); padding: 36px 24px; text-align:center; }
.bl-empty h2{ font-size: 22px; margin: 0 0 8px; }
.bl-empty p{ color: var(--muted); margin: 0 0 18px; }
.bl-side .featured-side h2{ font-size: 18px; margin: 0 0 14px; }
.bl-side .featured-side .item{ margin-bottom: 14px; }
@media (max-width: 991px){ .bl-side{ display:none; } }
@media (max-width: 767px){
  .bl-card{ grid-template-columns: minmax(0,1fr); }
  .bl-thumb{ aspect-ratio: 16 / 10; }
  .bl-thumb img{ object-position: center 30%; }
  .bl-body{ padding: 16px; }
}
@media (prefers-reduced-motion: reduce){ .bl-card, .bl-read .fa{ transition: none; } .bl-card:hover{ transform:none; } }
@media (min-width: 768px){
  .bl-thumb{ aspect-ratio: auto; position: relative; min-height: 240px; }
  .bl-thumb img{ position:absolute; inset:0; }
}
@media (max-width: 767px){ .bl-thumb{ aspect-ratio: 1 / 1; } .bl-thumb img{ object-position: center; } }

/* ---------- contact page (contact.php) --------------------------------- */
.ct-head{ margin-bottom: 22px; }
.ct-layout{ display:grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ct-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; box-shadow: var(--sh-1); }
.ct-card h2{ font-size: 20px; margin: 0 0 18px; text-transform: none; }
.ct-row{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.ct-field{ margin: 0 0 16px; }
.ct-field label{ display:flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 14px; font-weight: 600;
  color: var(--ink); text-transform: none; letter-spacing: 0; }
.ct-form input[type=text], .ct-form input[type=email], .ct-form textarea{ display:block; width:100%; min-height: 46px; padding: 10px 14px; background:#fff;
  border: 1px solid #c9d1cb; border-radius: var(--r); color: var(--ink); font-size: 16px; line-height: 1.5; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ct-form textarea{ resize: vertical; min-height: 150px; }
.ct-form input:focus, .ct-form textarea:focus{ outline: 0; border-color: var(--green); box-shadow: var(--ring); }
.ct-form [aria-invalid=true]{ border-color: #c0392b; }
.ct-form [aria-invalid=true]:focus{ box-shadow: 0 0 0 4px rgba(192,57,43,.16); }
.ct-error{ margin: 6px 0 0; color: #a93226; font-size: 14px; font-weight: 500; }
.ct-error[hidden], .ct-form[hidden], .ct-done[hidden]{ display:none; }
.ct-count{ color: var(--muted); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; }
.ct-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ct-actions{ display:flex; align-items:center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.ct-actions .btn{ min-height: 48px; padding: 12px 28px; font-size: 15px; }
.ct-actions .btn[disabled]{ opacity: .6; cursor: progress; }
.ct-status{ margin: 0; color: var(--muted); font-size: 14px; font-weight: 500; }
.ct-status.ct-bad{ color: #a93226; }
.ct-done{ text-align:center; padding: 28px 10px 14px; outline: 0; }
.ct-done .fa{ font-size: 52px; color: var(--green); }
.ct-done h3{ font-size: 22px; margin: 12px 0 8px; }
.ct-done p{ color: var(--ink-2); margin: 0 0 20px; overflow-wrap: anywhere; }
.ct-list{ list-style:none; margin:0; padding:0; }
.ct-list li{ display:flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.ct-list li:first-child{ padding-top: 0; }
.ct-list li:last-child{ border-bottom: 0; }
.ct-ico{ flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--green-tint); color: var(--green-700); display:flex; align-items:center; justify-content:center; font-size: 17px; }
.ct-list strong{ display:block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.ct-list div{ min-width: 0; }
.ct-list div > a, .ct-list div > span{ display:block; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.ct-list div > a:hover{ color: var(--green-700); }
.ct-list .ct-dir{ display:inline-flex; align-items:center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--green-700); }
.ct-social{ margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.ct-social strong{ display:block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.ct-social ul{ list-style:none; margin:0; padding:0; display:flex; gap: 10px; }
.ct-social a{ width: 44px; height: 44px; border-radius: 50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color: var(--ink-2); font-size: 17px; }
.ct-social a:hover,.ct-social a:focus{ background: var(--green); border-color: var(--green); color:#fff; }
.ct-map{ margin: 20px 0 40px; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; background: var(--line-2); box-shadow: var(--sh-1); }
.ct-map iframe{ display:block; width:100%; height: 380px; border:0; }
@media (max-width: 991px){ .ct-layout{ grid-template-columns: minmax(0,1fr); } }
@media (max-width: 767px){
  .ct-card{ padding: 18px 16px; }
  .ct-row{ grid-template-columns: minmax(0,1fr); gap: 0; }
  .ct-actions .btn{ width: 100%; }
  .ct-map iframe{ height: 300px; }
}
.ct-card h2{ font-family: var(--f-disp); font-weight: 700; color: var(--ink); line-height: 1.3; }
.ct-layout > .ct-card{ margin: 0; }
.ct-done h3{ font-family: var(--f-disp); font-weight: 700; color: var(--ink); }
.ct-form [aria-invalid=true], .ct-form [aria-invalid=true]:focus{ border-color: #c0392b; }

/* ---------- add listing (header button, pop-up, result message) -------- */
.add-listing .add-badge{ font-style: normal; font-size: 11px; font-weight: 700; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(42,31,4,.14); text-transform: none; letter-spacing: 0; }
#page-header li.nav-add-listing{ display:none!important; }
@media (max-width: 767px){
  #page-header li.nav-add-listing{ display:block!important; padding: 8px 14px 14px; }
  #page-header li.nav-add-listing > a{ display:flex!important; align-items:center; justify-content:center; gap: 8px; min-height: 48px; background: var(--amber); color:#2a1f04!important;
    border-radius: var(--r-pill); font-weight: 700; text-transform: none; border: 0; }
}
.sb-allow{ margin: 10px 0 0; padding: 10px 14px; background: var(--green-tint); border: 1px solid var(--green-tint-2); border-radius: var(--r); color: var(--green-800); font-size: 14px; text-align:left; }
.sb-allow .fa{ margin-right: 4px; }
.sb-req{ color: #c0392b; font-weight: 700; }
.sb-req-note{ color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.sb-form section > h3{ display:flex; align-items:center; flex-wrap: wrap; gap: 10px; font-family: var(--f-disp); font-size: 18px; font-weight: 700; color: var(--ink); margin: 6px 0 16px; padding-top: 18px; border-top: 1px solid var(--line-2); text-transform: none; }
.sb-form section:first-of-type > h3{ border-top: 0; padding-top: 0; }
.sb-form section > h3 .note{ font-family: var(--f-sans); font-size: 13px; font-weight: 500; color: var(--muted); }
.sb-step{ flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color:#fff; font-family: var(--f-sans); font-size: 14px; font-weight: 700; display:inline-flex; align-items:center; justify-content:center; }
.sb-hint{ margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.sb-form .sb-tight{ margin-top: -10px; }
.sb-more{ margin: 4px 0 10px; }
.sb-more summary{ cursor: pointer; color: var(--green-700); font-weight: 600; font-size: 14px; padding: 10px 0; min-height: 44px; }
.sb-more[open] summary{ margin-bottom: 8px; }
.sb-locked{ display:flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 10px 14px; background: var(--amber-tint); border: 1px solid #f6dfa6; border-radius: var(--r); color: var(--ink-2); font-size: 14px; margin: 0 0 16px; }
.sb-locked a{ font-weight: 700; color: var(--green-700); }
.sb-form .file-upload{ border: 2px dashed var(--green-tint-2); border-radius: var(--r); background: #fbfdfb; }
.sb-submit{ padding-top: 18px; border-top: 1px solid var(--line-2); }
.sb-submit .btn{ min-height: 50px; padding: 13px 34px; font-size: 16px; }
.sb-submit .btn[disabled]{ opacity: .65; cursor: progress; }
.sb-error{ color: #a93226; font-weight: 600; margin: 0 0 12px; }
.sb-error[hidden]{ display:none; }
.sb-gate{ text-align:center; padding-bottom: 28px; }
.sb-gate-ico{ display:inline-flex; width: 64px; height: 64px; border-radius: 50%; background: var(--green-tint); color: var(--green-700); align-items:center; justify-content:center; font-size: 28px; }
.sb-gate h3{ font-family: var(--f-disp); font-size: 20px; font-weight: 700; color: var(--ink); margin: 16px 0 8px; text-transform: none; }
.sb-gate p{ color: var(--ink-2); margin: 0 0 20px; line-height: 1.6; }
.sb-gate .btn{ min-height: 48px; padding: 12px 28px; }
.sb-gate-alt{ display:block; margin-top: 14px; font-weight: 600; color: var(--green-700); }
.sb-signin-note{ padding: 10px 14px; background: var(--green-tint); border: 1px solid var(--green-tint-2); border-radius: var(--r); color: var(--green-800); font-size: 14px; margin: 0 0 18px; }
.sb-signin-note a{ font-weight: 700; text-decoration: underline; }
.tc-flash{ display:flex; align-items:center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--r); margin: 0 0 20px; font-size: 15px; }
.tc-flash .fa{ font-size: 20px; }
.tc-flash span{ flex: 1 1 240px; }
.tc-flash a{ font-weight: 700; text-decoration: underline; }
.tc-flash-ok{ background: var(--green-tint); border: 1px solid var(--green-tint-2); color: var(--green-800); }
.tc-flash-ok a{ color: var(--green-800); }
.tc-flash-bad{ background: #fdecea; border: 1px solid #f5c6c0; color: #8e2a20; }

/* ---------- admin panel: menu + dashboard (control.php) ---------------- */
.adm-menu > summary{ display:none; }
.adm-side .accordion .link[style*="bfbfbf"], .adm-side .accordion .submenu a[style*="bfbfbf"]{ background: var(--green)!important; color:#fff!important; border-radius: var(--r-sm); }
.adm-side .accordion .link[style*="bfbfbf"] i{ color:#fff!important; }
.adm-side .accordion .link{ color: var(--ink-2); }
.adm-side .accordion .link i{ color: var(--muted); }
.adm-side .accordion .link p{ background: var(--amber)!important; color:#2a1f04!important; font-weight: 700; font-size: 12px; text-align:center; padding: 3px 0 0!important; }
.adm-head{ display:flex; align-items:flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.adm-head h1{ font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 2px; }
.adm-head p{ margin:0; color: var(--muted); font-size: 15px; }
.adm-actions{ display:flex; gap: 8px; flex-wrap: wrap; }
.adm-actions .btn{ min-height: 42px; padding: 9px 16px; font-size: 14px; display:inline-flex; align-items:center; gap: 8px; text-transform: none; }
.adm-actions .btn .fa{ margin: 0; }
.adm-todo{ display:flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.adm-todo a{ display:flex; align-items:center; gap: 12px; padding: 12px 16px; background: var(--amber-tint); border:1px solid #f6dfa6; border-radius: var(--r); color: var(--ink); font-weight: 600; }
.adm-todo a .fa{ color: var(--amber-600); font-size: 18px; }
.adm-todo a span{ flex: 1; }
.adm-todo a b{ color: var(--green-700); white-space: nowrap; }
.adm-todo a:hover{ border-color: var(--amber); text-decoration: none; }
.adm-clear{ display:flex; gap: 10px; align-items: baseline; margin: 0 0 18px; padding: 12px 16px; background: var(--green-tint); border:1px solid var(--green-tint-2); border-radius: var(--r); color: var(--green-800); font-size: 15px; }
.adm-stats{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0 0 16px; }
.adm-stat{ position: relative; display:block; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--sh-1); color: var(--ink); }
a.adm-stat:hover, a.adm-stat:focus{ box-shadow: var(--sh-2); border-color: var(--green-tint-2); text-decoration: none; color: var(--ink); }
.adm-ico{ position:absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 12px; background: var(--green-tint); color: var(--green-700); display:flex; align-items:center; justify-content:center; font-size: 17px; }
.adm-key{ display:block; color: var(--muted); font-size: 13px; font-weight: 600; }
.adm-stat strong{ display:block; font-family: var(--f-disp); font-size: 30px; line-height: 1.2; color: var(--ink); margin: 6px 0 6px; font-variant-numeric: tabular-nums; }
.adm-up, .adm-flat{ display:block; font-size: 12.5px; line-height: 1.35; }
.adm-up{ color: var(--green-700); font-weight: 600; }
.adm-flat{ color: var(--muted); }
.adm-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: start; }
.adm-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sh-1); margin: 0; }
.adm-wide{ grid-column: 1 / -1; }
.adm-card h2{ display:flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--f-disp); font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 12px; text-transform: none; }
.adm-card h2 a{ font-family: var(--f-sans); font-size: 13px; font-weight: 600; color: var(--green-700); }
.adm-rows, .adm-feed{ list-style:none; margin:0; padding:0; }
.adm-rows li{ border-bottom: 1px solid var(--line-2); }
.adm-rows li:last-child{ border-bottom: 0; }
.adm-rows li > a, .adm-quality li{ display:flex; align-items: baseline; gap: 12px; padding: 10px 0; color: var(--ink-2); min-height: 44px; }
.adm-rows li > a:hover{ color: var(--green-700); text-decoration:none; }
.adm-rows span{ flex: 1; }
.adm-rows b{ font-family: var(--f-disp); font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.adm-rows b.adm-warn{ color: var(--amber-600); }
.adm-quality small{ flex: 0 0 116px; text-align: right; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.adm-note{ margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.adm-feed li{ border-bottom: 1px solid var(--line-2); }
.adm-feed li:last-child{ border-bottom: 0; }
.adm-feed a{ display:flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; color: var(--ink); min-height: 44px; }
.adm-feed a:hover span{ color: var(--green-700); }
.adm-feed a:hover{ text-decoration: none; }
.adm-feed span{ min-width: 0; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-feed small{ display:block; font-weight: 400; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-feed time{ flex: 0 0 auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.adm-dot{ display:inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-right: 8px; vertical-align: middle; }
.adm-feed-cols{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 28px; }
.adm-feed-cols li:nth-last-child(2):nth-child(odd){ border-bottom: 0; }
@media (max-width: 1199px){ .adm-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767px){
  .adm-menu > summary{ display:flex; align-items:center; gap: 10px; min-height: 48px; padding: 0 4px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
  .adm-menu > summary::-webkit-details-marker{ display:none; }
  .adm-menu > summary:after{ content: "Show"; margin-left: auto; color: var(--green-700); font-size: 14px; font-weight: 600; }
  .adm-menu[open] > summary:after{ content: "Hide"; }
  .adm-menu[open] > summary{ margin-bottom: 8px; }
  .adm-grid{ grid-template-columns: minmax(0,1fr); }
  .adm-feed-cols{ grid-template-columns: minmax(0,1fr); }
  .adm-feed-cols li:nth-last-child(2):nth-child(odd){ border-bottom: 1px solid var(--line-2); }
  .adm-stat{ padding: 14px; }
  .adm-stat strong{ font-size: 24px; }
  .adm-ico{ width: 32px; height: 32px; font-size: 14px; top: 12px; right: 12px; }
  .adm-actions{ width: 100%; }
  .adm-actions .btn{ flex: 1 1 auto; justify-content: center; }
  .adm-card{ padding: 16px; }
}
.adm-grid > .adm-card{ margin: 0!important; }
@media (max-width: 767px){
  /* signed-in header: the account menu is a drop-down under the picture, closed until tapped */
  #page-header .secondary-nav .navigation > li.has-child{ position: relative; display:flex; align-items:center; }
  #page-header .secondary-nav .navigation > li.has-child > .image{ cursor: pointer; width: 40px; height: 40px; display:flex; align-items:center; justify-content:center; }
  #page-header .secondary-nav .navigation > li.has-child > .wrapper{ display:none!important; position:absolute!important; top: calc(100% + 10px); right: -40px; left: auto; width: 230px; height:auto!important;
    background:#fff; border:1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-3); padding: 6px; z-index: 60; opacity:1!important; visibility: visible!important; transform:none!important; }
  #page-header .secondary-nav .navigation > li.has-child.tc-open > .wrapper{ display:block!important; }
  #page-header .secondary-nav .navigation > li.has-child > .wrapper .nav-wrapper{ background: transparent; box-shadow:none; padding:0; display:block!important; height:auto!important; }
  #page-header .secondary-nav .navigation > li.has-child > .wrapper ul{ margin:0; padding:0; list-style:none; }
  #page-header .secondary-nav .navigation > li.has-child > .wrapper li{ display:block; width:100%; }
  #page-header .secondary-nav .navigation > li.has-child > .wrapper li a{ display:flex!important; align-items:center; gap: 10px; min-height: 44px; padding: 8px 12px; color: var(--ink)!important; background: transparent!important;
    border-radius: var(--r-sm); font-size: 15px; font-weight: 500; text-transform: none; justify-content:flex-start; }
  #page-header .secondary-nav .navigation > li.has-child > .wrapper li a .fa{ width: 18px; color: var(--green-700); text-align:center; }
  #page-header .secondary-nav .navigation > li.has-child > .wrapper li a:hover{ background: var(--green-tint)!important; }
}
@media (max-width: 767px){
  /* account picture: always something to tap, even when the photo is missing */
  #page-header .secondary-nav .navigation > li.has-child > .image{ position: relative; background: var(--green-tint); border: 1px solid var(--green-tint-2); border-radius: 50%; overflow: hidden; }
  #page-header .secondary-nav .navigation > li.has-child > .image:before{ content: "\f007"; font-family: FontAwesome; color: var(--green-700); font-size: 17px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  #page-header .secondary-nav .navigation > li.has-child > .image .bg-transfer{ position: relative; z-index: 1; width: 100%; height: 100%; }
}

/* ---------- admin panel: list screens (tabs, tables, empty states) ------ */
.adm-pill{ display:inline-block; margin-left: 4px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--amber); color:#2a1f04; font-size: 12px; font-weight: 700; }
.adm-tabs{ border-bottom: 1px solid var(--line); margin: 0 0 14px; display:flex; gap: 4px; }
.adm-tabs > li{ float:none; margin: 0 0 -1px; }
.adm-tabs > li > a{ display:flex; align-items:center; gap: 8px; min-height: 46px; padding: 10px 16px; border: 0!important; border-bottom: 3px solid transparent!important; border-radius: 0; background: transparent!important;
  color: var(--muted); font-weight: 600; font-size: 15px; text-transform: none; }
.adm-tabs > li > a:hover{ color: var(--ink); }
.adm-tabs > li.active > a, .adm-tabs > li.active > a:hover, .adm-tabs > li.active > a:focus{ color: var(--green-800); border-bottom-color: var(--green)!important; }
.adm-tabs > li > a b{ padding: 1px 8px; border-radius: var(--r-pill); background: var(--line-2); color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.adm-tabs > li.active > a b{ background: var(--green-tint); color: var(--green-800); }
.adm-screen .tab-content, .adm-screen .tab-pane{ background: transparent; padding: 0; border: 0; box-shadow: none; }
.adm-tabnote{ color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.adm-table-wrap{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow-x: auto; }
.adm-table{ width:100%; border-collapse: collapse; font-size: 15px; color: var(--ink-2); text-transform: none; }
.adm-table th, .adm-table td{ padding: 12px 16px; text-align:left; vertical-align: middle; border-bottom: 1px solid var(--line-2); }
.adm-table thead th{ background: #fafbf9; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; border-bottom: 1px solid var(--line); }
.adm-table tbody tr:last-child td{ border-bottom: 0; }
.adm-table tbody tr:hover td{ background: #fafbf9; }
.adm-table .num{ text-align:right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-table strong{ color: var(--ink); font-weight: 600; }
.adm-table small{ display:block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.adm-table small.adm-soon{ color: var(--amber-600); font-weight: 700; }
.adm-table a{ color: var(--green-700); font-weight: 600; }
.adm-table time{ white-space: nowrap; }
.adm-muted{ color: var(--muted); }
.adm-who{ display:flex; align-items:center; gap: 10px; color: var(--ink); font-weight: 600; min-width: 0; }
.adm-av{ position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--green-tint); color: var(--green-700); display:flex; align-items:center; justify-content:center; overflow:hidden; font-size: 15px; }
.adm-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.adm-empty{ background:#fff; border:1px dashed var(--line); border-radius: var(--r-lg); padding: 36px 20px; text-align:center; }
.adm-empty > .fa{ font-size: 34px; color: var(--green-tint-2); }
.adm-empty h2{ font-family: var(--f-disp); font-size: 19px; font-weight: 700; color: var(--ink); margin: 12px 0 6px; text-transform: none; }
.adm-empty p{ color: var(--muted); margin: 0 0 4px; }
.adm-empty .btn{ margin-top: 14px; }
@media (max-width: 767px){
  .adm-tabs{ overflow-x: auto; flex-wrap: nowrap; }
  .adm-tabs > li > a{ white-space: nowrap; padding: 10px 12px; }
  /* tables become one card per row, each value with its label */
  .adm-table-wrap{ background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .adm-table, .adm-table tbody, .adm-table tr, .adm-table td{ display:block; width:100%; }
  .adm-table thead{ display:none; }
  .adm-table tbody tr{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 6px 14px; margin: 0 0 12px; }
  .adm-table tbody td{ display:flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; text-align: right; border-bottom: 1px solid var(--line-2)!important; background: transparent!important; }
  .adm-table tbody td:last-child{ border-bottom: 0!important; }
  .adm-table tbody td:before{ content: attr(data-label); flex: 0 0 auto; color: var(--muted); font-size: 13px; font-weight: 600; text-align:left; }
  .adm-table tbody td:first-child{ display:block; text-align:left; padding: 12px 0; }
  .adm-table tbody td:first-child:before{ display:none; }
  .adm-table .num{ text-align:right; }
  .adm-table td > strong, .adm-table td > a, .adm-table td > time{ text-align:right; }
}
@media (max-width: 767px){
  .adm-table tbody td{ flex-wrap: wrap; }
  .adm-table tbody td > small{ flex: 0 0 100%; text-align: right; }
}
.adm-stack{ display:block; }
.adm-stack > a{ display:block; overflow-wrap: anywhere; }
.adm-stack > a + a{ font-weight: 500; font-size: 13.5px; }
@media (max-width: 767px){
  .adm-table tbody td{ gap: 2px 14px; }
  .adm-table tbody td > .adm-stack{ text-align: right; min-width: 0; }
}

/* ---------- admin panel: shared pieces for every screen (v12) ----------- */
.adm-screen{ margin: 0; }
.adm-screen > .adm-card, .adm-screen > form.adm-card{ margin: 0 0 16px!important; }
.adm-split{ display:grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-split > form.adm-card{ position: sticky; top: calc(var(--head-h) + 14px); }
.adm-form h2{ font-family: var(--f-disp); font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 14px; text-transform: none; display:block; }
.adm-form h2 + .tc-flash{ margin-top: -4px; }
.adm-subhead{ font-family: var(--f-disp); font-size: 15px; font-weight: 700; color: var(--ink); margin: 22px 0 10px; padding-top: 18px; border-top: 1px solid var(--line-2); text-transform: none; }
.adm-field{ margin: 0 0 16px; min-width: 0; }
.adm-field label, .adm-label{ display:flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
.adm-form .form-control, .adm-filter .form-control{ display:block; width:100%; min-height: 44px; height: auto; padding: 9px 12px; background:#fff; border: 1px solid #c9d1cb; border-radius: var(--r);
  color: var(--ink); font-size: 15px; line-height: 1.5; box-shadow: none; }
.adm-form textarea.form-control{ resize: vertical; min-height: 90px; }
.adm-form .form-control:focus, .adm-filter .form-control:focus{ outline: 0; border-color: var(--green); box-shadow: var(--ring); }
.adm-form .bootstrap-select{ width: 100%!important; }
.adm-form .bootstrap-select > .btn{ min-height: 44px; border: 1px solid #c9d1cb; border-radius: var(--r); background:#fff; box-shadow:none; text-transform:none; font-size: 15px; font-weight: 400; color: var(--ink); padding: 9px 12px; }
.adm-form .adm-short{ max-width: 110px; }
.adm-form .adm-code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; }
.adm-hint{ margin: 6px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.adm-hint code{ background: var(--line-2); color: var(--ink-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.adm-hint a{ color: var(--green-700); font-weight: 600; }
.adm-fieldrow{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 16px; }
.adm-fieldrow-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.adm-fieldrow-seo{ grid-template-columns: minmax(0,1fr) 90px minmax(0,1fr); }
.adm-form > .btn, .adm-form .btn-primary{ min-height: 44px; padding: 10px 22px; text-transform: none; font-size: 15px; }
.adm-form > .alert{ margin: 14px 0 0; border-radius: var(--r); }
.adm-form .map{ border-radius: var(--r); overflow:hidden; margin: 0 0 4px; background: var(--line-2); }
.adm-nomap{ display:flex; align-items:center; justify-content:center; text-align:center; padding: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.adm-file{ display:block; width:100%; font-size: 14px; padding: 9px; border: 1px dashed #c9d1cb; border-radius: var(--r); background: #fbfdfb; }
.adm-form .file-upload{ border: 2px dashed var(--green-tint-2); border-radius: var(--r); background: #fbfdfb; }
.adm-checks{ border: 0; padding: 0; margin: 4px 0 18px; }
.adm-checks legend{ font-size: 13.5px; font-weight: 600; color: var(--ink); border: 0; margin: 0 0 8px; padding: 0; }
.adm-checks label{ display:flex; align-items:center; gap: 10px; min-height: 40px; font-size: 15px; font-weight: 400; color: var(--ink-2); text-transform: none; margin: 0; cursor: pointer; }
.adm-current{ display:flex; gap: 12px; align-items: flex-start; }
.adm-current img{ width: 96px; height: 96px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); flex: 0 0 auto; }
.adm-current > div{ flex: 1; min-width: 0; }
.adm-preview{ display:block; max-width: 100%; width: 260px; border: 1px solid var(--line); border-radius: var(--r); }
.adm-slides{ list-style:none; margin: 0; padding: 0; display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.adm-slides li{ border: 1px solid var(--line); border-radius: var(--r); overflow:hidden; background:#fff; }
.adm-slides img{ display:block; width:100%; aspect-ratio: 12 / 7; object-fit: cover; }
.adm-slides .adm-act{ width: 100%; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; justify-content: center; }
.adm-logo{ display:inline-flex; align-items:center; justify-content:center; min-width: 96px; height: 44px; padding: 4px 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); }
.adm-logo img{ max-width: 110px; max-height: 34px; display:block; }
.adm-logo-lg{ height: 72px; min-width: 200px; background: #fafbf9; }
.adm-logo-lg img{ max-width: 240px; max-height: 56px; }
.adm-banner{ display:flex; gap: 10px; align-items: baseline; margin: 0 0 16px; padding: 12px 16px; background: var(--amber-tint); border:1px solid #f6dfa6; border-radius: var(--r); color: var(--ink-2); font-size: 14px; }
.adm-banner .fa{ color: var(--amber-600); }
/* actions */
.adm-table th.adm-actcol, .adm-table td.adm-actcol{ text-align: right; width: 1%; white-space: nowrap; }
.adm-acts{ display:inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.adm-act{ display:inline-flex; align-items:center; gap: 6px; min-height: 36px; padding: 6px 12px; background:#fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink-2)!important; font-size: 13px; font-weight: 600!important; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none!important; }
.adm-act .fa{ font-size: 14px; color: var(--muted); }
.adm-act:hover, .adm-act:focus{ background: var(--green-tint); border-color: var(--green-tint-2); color: var(--green-800)!important; }
.adm-act:hover .fa{ color: var(--green-700); }
.adm-act-go{ background: var(--green); border-color: var(--green); color:#fff!important; }
.adm-act-go .fa{ color:#fff; }
.adm-act-go:hover, .adm-act-go:focus{ background: var(--green-700); border-color: var(--green-700); color:#fff!important; }
.adm-act-go:hover .fa{ color:#fff; }
.adm-act-new{ background: var(--amber-tint); border-color: #f6dfa6; }
.adm-act-new .fa{ color: var(--amber-600); }
.adm-act-quiet{ color: var(--muted)!important; font-weight: 500!important; }
.adm-act-danger:hover, .adm-act-danger:focus{ background: #fdecea; border-color: #f5c6c0; color: #a93226!important; }
.adm-act-danger:hover .fa{ color: #a93226; }
.adm-act-ico span{ position:absolute; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); }
.adm-act-ico{ padding: 6px 10px; }
/* lists */
.adm-filter{ display:flex; gap: 8px; flex-wrap: wrap; align-items:center; margin: 0 0 10px; }
.adm-filter select.form-control{ flex: 0 1 220px; width: auto; }
.adm-filter input.form-control{ flex: 1 1 180px; width: auto; }
.adm-filter .btn{ min-height: 44px; padding: 10px 18px; text-transform: none; }
.adm-clearlink{ font-weight: 600; color: var(--green-700); padding: 8px 4px; }
.adm-count{ color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.adm-find{ max-width: 460px; margin: 0 0 12px; }
.adm-table tr[hidden]{ display:none; }
.adm-table td.adm-excerpt{ max-width: 420px; }
.adm-table td.adm-excerpt, .adm-table td.adm-excerpt small{ overflow-wrap: anywhere; }
.adm-table tr.adm-unread td{ background: #fffdf5; }
.adm-inico{ color: var(--muted); width: 18px; text-align:center; }
.adm-break{ overflow-wrap: anywhere; }
.adm-yes{ color: var(--green-700); font-weight: 600; white-space: nowrap; }
.adm-no{ color: var(--muted); }
.adm-post{ display:flex; gap: 12px; align-items:center; min-width: 0; }
.adm-post img{ width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); flex: 0 0 auto; border: 1px solid var(--line); }
.adm-post > span{ min-width: 0; }
.adm-tiles{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.adm-tiles li{ background:#fff; border:1px solid var(--line); border-radius: var(--r); overflow:hidden; box-shadow: var(--sh-1); }
.adm-tile-img{ display:block; background: var(--line-2); }
.adm-tile-img img{ display:block; width:100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.adm-tile-foot{ display:flex; align-items:center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; }
.adm-tile-foot strong{ font-size: 14px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 991px){
  .adm-split{ grid-template-columns: minmax(0,1fr); }
  .adm-split > form.adm-card{ position: static; }
}
@media (max-width: 767px){
  .adm-fieldrow, .adm-fieldrow-3{ grid-template-columns: minmax(0,1fr); }
  .adm-fieldrow-seo{ grid-template-columns: minmax(0,1fr) 80px; }
  .adm-fieldrow-seo > .adm-field:last-child{ grid-column: 1 / -1; }
  .adm-form .form-control, .adm-filter .form-control{ font-size: 16px; }
  .adm-form > .btn, .adm-form .btn-primary{ width: 100%; min-height: 48px; }
  .adm-table td.adm-actcol{ width: 100%; text-align: left; white-space: normal; }
  .adm-table tbody td.adm-actcol:before{ display:none; }
  .adm-acts{ display:flex; justify-content: flex-start; width: 100%; }
  .adm-act{ min-height: 44px; padding: 8px 14px; flex: 1 1 auto; justify-content: center; }
  .adm-act-ico{ flex: 0 0 auto; }
  .adm-table td.adm-excerpt{ max-width: none; display:block; text-align:left; }
  .adm-table td.adm-excerpt:before{ display:block; margin-bottom: 4px; }
  .adm-table td.adm-excerpt > small{ text-align:left; }
  .adm-filter select.form-control, .adm-filter input.form-control{ flex: 1 1 100%; }
  .adm-tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .adm-current img{ width: 72px; height: 72px; }
}
@media (min-width: 768px){
  .adm-acts{ flex-wrap: nowrap; }
  .adm-split .adm-table th, .adm-split .adm-table td{ padding: 10px 10px; }
  .adm-split .adm-table th:first-child, .adm-split .adm-table td:first-child{ padding-left: 14px; }
  .adm-split .adm-table td{ white-space: nowrap; }
  .adm-split .adm-table td:first-child, .adm-split .adm-table td.adm-excerpt{ white-space: normal; }
  .adm-split .adm-act{ padding: 6px 10px; }
}
@media (min-width: 768px){
  /* beside an "add" form there is less room: the row buttons show their icon only (the name is in the tooltip) */
  .adm-split .adm-act > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); }
  .adm-split .adm-act{ padding: 6px 11px; }
}

/* ---------- pricing page + online payment (v13) ------------------------ */
.pr-head{ margin-bottom: 18px; }
.pr-status{ display:flex; align-items:center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin: 0 0 18px; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.pr-status > .fa{ font-size: 24px; color: var(--muted); flex: 0 0 auto; }
.pr-status > div{ flex: 1 1 260px; min-width: 0; }
.pr-status strong{ display:block; color: var(--ink); font-size: 16px; }
.pr-status span{ color: var(--ink-2); font-size: 14.5px; }
.pr-status-on{ background: var(--green-tint); border-color: var(--green-tint-2); }
.pr-status-on > .fa{ color: var(--green-700); }
.pr-status-wait{ background: var(--amber-tint); border-color: #f6dfa6; }
.pr-status-wait > .fa{ color: var(--amber-600); }
.pr-status .btn{ min-height: 44px; padding: 10px 20px; text-transform: none; }
.pr-status-btns{ display:flex; gap: 8px; flex-wrap: wrap; }
.pay-msg{ margin: 0 0 16px; padding: 12px 16px; border-radius: var(--r); font-size: 15px; font-weight: 500; background: var(--line-2); color: var(--ink-2); }
.pay-msg[hidden]{ display:none; }
.pay-msg-bad{ background: #fdecea; border: 1px solid #f5c6c0; color: #8e2a20; }
.pay-msg-wait{ background: var(--green-tint); border: 1px solid var(--green-tint-2); color: var(--green-800); }
.pr-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: stretch; margin: 0 0 12px; }
.pr-grid-1{ grid-template-columns: minmax(0, 380px); }
.pr-grid-2{ grid-template-columns: repeat(2, minmax(0, 380px)); }
.pr-grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.pr-plan{ position: relative; display:flex; flex-direction: column; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 24px 22px 22px; box-shadow: var(--sh-1); }
.pr-plan-mine{ border-color: var(--green); box-shadow: 0 0 0 1px var(--green), var(--sh-2); }
.pr-flag{ position:absolute; top: -11px; left: 20px; padding: 3px 12px; border-radius: var(--r-pill); background: var(--green); color:#fff; font-size: 12px; font-weight: 700; }
.pr-plan h2{ font-family: var(--f-disp); font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 8px; text-transform: none; }
.pr-price{ font-family: var(--f-disp); font-size: 34px; font-weight: 700; color: var(--green-700); line-height: 1.1; margin: 0 0 16px; font-variant-numeric: tabular-nums; }
.pr-price small{ display:block; margin-top: 6px; font-family: var(--f-sans); font-size: 13px; font-weight: 500; color: var(--muted); }
.pr-feat{ list-style:none; margin: 0 0 20px; padding: 16px 0 0; border-top: 1px solid var(--line-2); flex: 1; }
.pr-feat li{ display:flex; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 15px; color: var(--ink-2); text-transform: none; }
.pr-feat li .fa{ flex: 0 0 16px; text-align:center; }
.pr-feat li.yes .fa{ color: var(--green); }
.pr-feat li.no{ color: var(--muted); }
.pr-feat li.no .fa{ color: #c3cbc6; }
.pr-feat strong{ color: var(--ink); }
.pr-buy{ display:flex; flex-direction: column; gap: 8px; }
.pr-buy .btn{ width: 100%; min-height: 48px; padding: 12px 18px; font-size: 16px; text-transform: none; }
.pr-buy .btn.is-busy, .pr-adpay.is-busy{ opacity: .7; cursor: progress; }
.pr-small{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; text-align:center; }
.pr-small a{ color: var(--green-700); font-weight: 600; }
.pr-wait{ color: var(--amber-600); font-weight: 600; }
.pr-alt{ display:block; text-align:center; min-height: 40px; padding: 9px 0; background: none; border: 0; width: 100%; color: var(--green-700); font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.pr-note{ display:flex; gap: 10px; align-items: baseline; color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.pr-how{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 28px 0; padding: 22px; background: var(--green-tint); border: 1px solid var(--green-tint-2); border-radius: var(--r-lg); }
.pr-how > div{ position: relative; padding-left: 44px; }
.pr-how span{ position:absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color:#fff; font-weight: 700; display:flex; align-items:center; justify-content:center; }
.pr-how strong{ display:block; color: var(--ink); font-size: 16px; margin-bottom: 2px; }
.pr-how p{ margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.pr-ads, .pr-hist, .pr-text{ margin: 0 0 30px; }
.pr-ads h2, .pr-hist h2{ font-family: var(--f-disp); font-size: 21px; font-weight: 700; color: var(--ink); margin: 0 0 10px; text-transform: none; }
.pr-adlist{ list-style:none; margin: 0 0 10px; padding: 0; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.pr-adlist li{ display:flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 16px; background:#fff; border:1px solid var(--line); border-radius: var(--r); }
.pr-adlist strong{ color: var(--ink); }
.pr-adlist span{ color: var(--muted); font-size: 14px; }
.pr-adlist b{ margin-left: auto; font-family: var(--f-disp); color: var(--green-700); font-variant-numeric: tabular-nums; }
.pr-ads .pr-small{ text-align:left; font-size: 14px; }
.pr-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.pr-text{ padding-top: 24px; border-top: 1px solid var(--line); }
/* feature-a-listing pop-up */
.pr-adpick{ border: 0; padding: 0; margin: 0 0 18px; }
.pr-adpick legend{ font-size: 14px; font-weight: 600; color: var(--ink); border: 0; margin: 0 0 8px; }
.pr-adpick label{ display:flex; align-items:center; gap: 12px; padding: 12px 14px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; text-transform: none; font-weight: 400; }
.pr-adpick label:hover{ border-color: var(--green-tint-2); background: #fbfdfb; }
.pr-adpick input{ flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.pr-adpick label > span{ flex: 1; }
.pr-adpick strong{ display:block; color: var(--ink); font-size: 15px; }
.pr-adpick small{ color: var(--muted); font-size: 13px; }
.pr-adpick b{ font-family: var(--f-disp); color: var(--green-700); font-size: 17px; white-space: nowrap; }
.pr-adpay{ min-height: 48px; padding: 12px 26px; font-size: 16px; text-transform: none; margin-bottom: 8px; }
.pr-adbank{ margin-top: 12px; }
/* admin: online payments */
.adm-steps{ margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.adm-steps li{ margin: 0 0 10px; }
.adm-steps code, .adm-copy code{ background: var(--line-2); padding: 1px 6px; border-radius: 4px; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.adm-copy{ display:flex; align-items:center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.adm-h2{ font-family: var(--f-disp); font-size: 19px; font-weight: 700; color: var(--ink); margin: 26px 0 12px; text-transform: none; }
.adm-h2 small{ font-family: var(--f-sans); font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 8px; }
.adm-bad{ color: #a93226!important; }
#rzp-msg{ margin: 14px 0 0; }
#rzp-msg[hidden]{ display:none; }
@media (max-width: 991px){
  .pr-grid, .pr-grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px){
  .pr-grid, .pr-grid-2, .pr-grid-4{ grid-template-columns: minmax(0,1fr); gap: 14px; }
  .pr-how{ grid-template-columns: minmax(0,1fr); padding: 18px; }
  .pr-adlist{ grid-template-columns: minmax(0,1fr); }
  .pr-status .btn, .pr-status-btns{ width: 100%; }
  .pr-status-btns .btn{ flex: 1; }
  .pr-price{ font-size: 30px; }
}

/* ---------- WhatsApp OTP: sign-in and register pop-ups, admin screen (v14) ---------- */
.otp-tabs{ display:flex; gap: 4px; padding: 4px; margin: 0 0 20px; background: #f1f3f1; border-radius: 999px; }
.otp-tabs button{ flex: 1 1 0; border: 0; background: transparent; padding: 9px 10px; border-radius: 999px; font: 600 14px/1.2 Inter, sans-serif; color: var(--ink-2); cursor: pointer; }
.otp-tabs button.on{ background: #fff; color: var(--green); box-shadow: var(--sh-1); }
.otp-tabs button:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }
.otp-phone{ display:flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.otp-phone:focus-within{ border-color: var(--green); box-shadow: 0 0 0 3px rgba(7,59,112,.15); }
.otp-phone span{ display:flex; align-items:center; padding: 0 12px; background: #f6f7f6; border-right: 1px solid var(--line); font-weight: 600; color: var(--ink-2); }
.otp-phone input.form-control{ border: 0!important; box-shadow: none!important; font-size: 18px; letter-spacing: .04em; padding: 10px 12px; height: 46px; background: transparent; }
.otp-hint{ margin: 6px 0 0; font-size: 13px; color: #6b746d; line-height: 1.45; }
.otp-sent{ margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
.otp-sent a{ color: var(--green); text-decoration: underline; }
.otp-done{ padding: 9px 12px; background: var(--green-tint); border: 1px solid var(--green-tint-2); border-radius: var(--r); color: var(--green-800); }
input.form-control.otp-code{ font-size: 26px; letter-spacing: .45em; text-align: center; height: 54px; font-variant-numeric: tabular-nums; border: 1px solid var(--line)!important; border-radius: var(--r); }
input.form-control.otp-code:focus{ border-color: var(--green)!important; box-shadow: 0 0 0 3px rgba(7,59,112,.15); }
.otp-again{ display:block; width: 100%; margin: 10px 0 0; padding: 8px; border: 0; background: transparent; color: var(--green); font-weight: 600; font-size: 14px; cursor: pointer; }
.otp-again[disabled]{ color: #8a918c; cursor: default; }
.otp-msg{ margin: 14px 0 0; padding: 10px 14px; border-radius: var(--r); font-size: 14px; line-height: 1.45; }
.otp-msg.otp-ok{ background: var(--green-tint); border: 1px solid var(--green-tint-2); color: var(--green-800); }
.otp-msg.otp-bad{ background: #fdecec; border: 1px solid #f5c6c6; color: #8f1d1d; }
.otp-goto{ margin: 10px 0 0; text-align: center; font-weight: 700; }
.otp-goto a{ color: var(--green); text-decoration: underline; }
.otp-foot{ margin: 14px 0 0; text-align: center; font-size: 14px; }
.otp-dots{ display:flex; gap: 6px; margin: 0 0 18px; }
.otp-dots i{ flex: 1 1 0; height: 4px; border-radius: 4px; background: var(--line); }
.otp-dots i.on{ background: var(--green); }
.otp-box [hidden], [data-otp-pane][hidden]{ display: none!important; }
.adm-check{ display:flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.adm-check input{ width: 18px; height: 18px; margin: 0; }
.otp-vars{ margin: 14px 0 6px; }
.otp-vars td{ padding: 7px 10px; font-size: 14px; }
.otp-vars small{ display:block; color: #6b746d; }
.otp-answer{ margin: 12px 0 0; padding: 10px 12px; background: #f6f7f6; border: 1px solid var(--line); border-radius: var(--r); font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
.otp-rules{ list-style: disc; }
.adm-grid > div > .adm-card{ margin: 0 0 16px!important; }
.adm-form .adm-check{ justify-content: flex-start; }
.adm-form .adm-check input{ flex: 0 0 18px; }
.adm-fieldrow.otp-row{ display:grid; grid-template-columns: 110px minmax(0,1fr); gap: 14px; }
.otp-tabs button{ white-space: nowrap; } @media (max-width: 420px){ .otp-tabs button{ font-size: 13px; padding: 9px 6px; } }

/* ---------- WhatsApp OTP: template settings (v15) ---------- */
.adm-form .otp-h, .adm-card .otp-h{ margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 16px; }
.adm-fieldrow.otp-row2{ display:grid; grid-template-columns: minmax(0,1fr) 130px; gap: 14px; }
[data-otp-mode="custom"] .adm-fieldrow.otp-row2{ grid-template-columns: 130px minmax(0,1fr); }
.adm-hint.otp-up{ margin-top: -6px; margin-bottom: 14px; }
[data-otp-mode][hidden]{ display:none!important; }
.otp-preview{ margin: 0 0 16px; }
.otp-preview summary{ cursor: pointer; color: var(--green); font-weight: 600; font-size: 14px; }
.adm-field.otp-cc{ max-width: 130px; }
.adm-hint.otp-switch{ margin-top: 8px; padding: 8px 12px; background: var(--amber-tint); border: 1px solid #f6dfa6; border-radius: var(--r); color: var(--ink-2); }

/* ---------- logo colours (v19) ---------- */
/* the Search button sits on a navy bar: it takes the accent so that it stands out */
.hero-section .search-form .btn-primary{ background: var(--amber)!important; border-color: var(--amber)!important; color: #2a1f04!important; }
.hero-section .search-form .btn-primary:hover{ background: var(--amber-600)!important; border-color: var(--amber-600)!important; }

/* ---------- registration by mobile number only (v20) ---------- */
.otp-lead{ margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.otp-next{ list-style: none; margin: 22px 0 0; padding: 14px 16px; background: var(--green-tint); border: 1px solid var(--green-tint-2); border-radius: var(--r); }
.otp-next li{ display:flex; align-items:center; gap: 10px; padding: 4px 0; font-size: 14px; color: var(--ink-2); }
.otp-next span{ flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--green); color:#fff; font-size: 12px; font-weight: 700; display:flex; align-items:center; justify-content:center; }
.otp-foot a{ color: var(--green); text-decoration: underline; }

/* ---------- activity log (v21) ---------- */
.log-ev{ display:inline-flex; align-items: baseline; gap: 7px; font-weight: 600; white-space: nowrap; }
.log-ev .fa{ width: 16px; text-align:center; color: var(--muted); }
.log-ok, .log-ev.log-ok .fa{ color: #1c7c3c; }
.log-bad, .log-ev.log-bad .fa{ color: #b3261e; }
.log-ev.log-ok, .log-ev.log-bad{ color: var(--ink); }
.log-table td small{ display:block; color: var(--muted); font-size: 12px; }
.log-table td[data-label="Details"]{ max-width: 320px; word-break: break-word; }
a.log-who{ color: inherit; display:inline-block; }
a.log-who:hover{ text-decoration: none; }
a.log-who:hover .adm-who > span:last-child{ color: var(--green); text-decoration: underline; }
.log-pager{ display:flex; align-items:center; justify-content: space-between; gap: 12px; margin: 14px 0 0; }
.log-pager span{ color: var(--muted); font-size: 14px; }
.log-today{ display:flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 0 0 6px; padding: 0 0 10px; border-bottom: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); }
.log-today b{ font-family: var(--f-disp); font-size: 20px; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.log-today small{ color: var(--muted); margin-left: auto; }
.log-feed li a > span{ min-width: 0; }
.log-feed li small{ display:block; color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62ch; }
.log-feed .fa{ width: 18px; text-align: center; color: var(--muted); }
.log-feed .fa.log-ok{ color: #1c7c3c; } .log-feed .fa.log-bad{ color: #b3261e; }
.log-table th small{ font-weight: 400; color: var(--muted); }
@media (min-width: 992px){ .log-table td[data-label="Details"]{ min-width: 230px; } .log-table td[data-label="When"]{ white-space: nowrap; } }

/* ---------- home page: one search box (v22) ---------- */
.hero-section.has-background .search-form form.hs-form{ background: transparent; box-shadow: none; padding: 0; max-width: 820px; margin: 0 auto; }
.hs-box{ position: relative; display:flex; align-items:center; gap: 8px; background:#fff; border-radius: var(--r-pill); box-shadow: var(--sh-3); padding: 7px 7px 7px 22px; }
.hs-box > .fa-search{ color: var(--muted); font-size: 18px; }
.hs-box input.form-control{ flex: 1 1 auto; min-width: 0; height: 52px; border: 0!important; box-shadow: none!important; background: transparent; font-size: 17px; color: var(--ink); padding: 0 6px; }
.hs-box input.form-control::placeholder{ color: #7b8696; }
.hs-box input[type="search"]::-webkit-search-cancel-button{ cursor: pointer; }
.hs-box:focus-within{ box-shadow: var(--sh-3), 0 0 0 4px rgba(242,165,22,.45); }
.hero-section .search-form .hs-box .btn-primary{ width: auto; flex: 0 0 auto; min-height: 52px; padding: 0 28px; border-radius: var(--r-pill)!important; font-size: 15px; }
.hs-list{ position:absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 8px; text-align: left; max-height: 62vh; overflow-y: auto; }
.hs-list[hidden]{ display:none; }
.hs-list a{ display:flex; align-items:center; gap: 12px; padding: 10px 12px; border-radius: var(--r); color: var(--ink); min-height: 48px; text-decoration: none; }
.hs-list a:hover, .hs-list a.on{ background: var(--green-tint); }
.hs-list a .fa{ flex: 0 0 22px; text-align:center; color: var(--muted); font-size: 16px; }
.hs-list a.hs-cat .fa{ color: var(--amber-600); }
.hs-list a span{ min-width: 0; font-weight: 600; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-list a small{ display:block; font-weight: 400; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.hs-list a.hs-all{ justify-content: center; color: var(--green); font-weight: 700; border-top: 1px solid var(--line-2); border-radius: 0 0 var(--r) var(--r); margin-top: 4px; }
.hs-none{ margin: 0; padding: 14px 12px; color: var(--muted); font-size: 14px; }
.hs-try{ margin: 14px 0 0; text-align: center; color: rgba(255,255,255,.85); font-size: 14px; }
.hs-try a{ display:inline-block; margin: 0 3px; padding: 4px 12px; border: 1px solid rgba(255,255,255,.45); border-radius: var(--r-pill); color:#fff; }
.hs-try a:hover{ background: rgba(255,255,255,.16); text-decoration: none; }
.hs-try span{ margin-left: 4px; }
.results-scope{ margin: 4px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 600px){
  .hs-box{ flex-wrap: wrap; border-radius: var(--r-lg); padding: 6px 8px 8px 14px; }
  .hs-box input.form-control{ flex: 1 1 60%; font-size: 16px; height: 48px; }
  .hero-section .search-form .hs-box .btn-primary{ flex: 1 1 100%; width: 100%; min-height: 48px; }
  .hs-try span{ display:block; margin: 6px 0 0; }
}
.hero-section .search-form.hs-wrap, .hero-section .search-form.hs-wrap .container{ background: transparent!important; border: 0!important; box-shadow: none!important; backdrop-filter: none!important; }
.hs-box input.form-control, .hs-box input.form-control:focus{ background: #fff!important; }
.hero-section .search-form form.hs-form, .hero-section.has-background .search-form form.hs-form{ background: transparent!important; border: 0!important; box-shadow: none!important; backdrop-filter: none!important; -webkit-backdrop-filter: none!important; padding: 0!important; }
.hero-section.has-background .form.horizontal form.hs-form:after{ display: none!important; }

/* ---------- WhatsApp notifications (v24) ---------- */
.adm-fieldrow.wa-testrow{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.wa-field[hidden], #wa-one-box[hidden]{ display:none!important; }
.wa-progress{ height: 6px; background: var(--line); border-radius: 6px; overflow: hidden; margin: 12px 0 0; }
.wa-progress[hidden]{ display:none; }
.wa-progress i{ display:block; height: 100%; width: 0; background: var(--green); transition: width .3s; }
.wa-samples{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin: 0 0 8px; }
.wa-sample{ margin: 0!important; }
.wa-sample header{ display:flex; align-items:center; justify-content: space-between; gap: 10px; margin: 0 0 4px; }
.wa-sample h3{ margin: 0; font: 600 15px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); word-break: break-all; }
.wa-cat{ flex: 0 0 auto; padding: 2px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: var(--green-tint); color: var(--green-800); }
.wa-cat.wa-marketing{ background: var(--amber-tint); color: #7a4d00; }
.wa-cat.wa-authentication{ background: #eee9fb; color: #46308f; }
.wa-sample pre{ margin: 10px 0; padding: 12px 14px; background: #f1f8f1; border: 1px solid #d5e8d5; border-radius: 4px 14px 14px 14px; font: 400 14px/1.55 Inter, system-ui, sans-serif; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.wa-vars{ list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; color: var(--ink-2); }
.wa-vars li{ padding: 2px 0; }
.wa-vars small{ color: var(--muted); }
.adm-h2 small{ font: 400 14px/1.3 Inter, sans-serif; color: var(--muted); margin-left: 8px; }
@media (max-width: 991px){ .wa-samples{ grid-template-columns: minmax(0,1fr); } .adm-fieldrow.wa-testrow{ grid-template-columns: minmax(0,1fr); } }

/* ---------- WhatsApp alerts to the administrator (v25) ---------- */
.wa-admin{ margin: 16px 0 8px!important; }
.wa-admin h2 .fa{ color: var(--amber-600); margin-right: 6px; }
.wa-admin-grid{ display:grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 22px; margin-top: 10px; }
.wa-admin-events{ border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px 6px; margin: 0; }
.wa-admin-events legend{ width: auto; border: 0; padding: 0 6px; margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.wa-admin-events .adm-check{ font-weight: 500; margin: 0 0 12px; }
.wa-admin-events small{ color: var(--muted); font-weight: 400; }
.wa-admin-actions{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (max-width: 991px){ .wa-admin-grid{ grid-template-columns: minmax(0,1fr); } }