/*
  TONMR – Public UI stylesheet (Step 2)
  Məqsəd: oxunaqlı, responsiv, şəkil/video ölçüləri stabil, “qırılmayan” dizayn.
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap');

:root{
  --font-body:"IBM Plex Sans","Manrope","Segoe UI",Arial,sans-serif;
  --font-display:"IBM Plex Sans","Manrope","Segoe UI",Arial,sans-serif;
  --bg:#fcf7ef;
  --bg-soft:#f8eddc;
  --bg-strong:#f1dfc3;
  --card:#fffaf2;
  --text:#1e1b16;
  --text-strong:#140f0b;
  --muted:#6f6254;
  --border:#eadfcd;
  --brand:#d08300;
  --brand2:#b76b00;
  --accent:#fff1d6;
  --danger:#dc2626;
  --success:#16a34a;
  --warning:#f59e0b;
  --radius:14px;
  --radius-md:12px;
  --radius-lg:18px;
  --shadow:0 10px 26px rgba(16,24,40,.08);
  --shadow-soft:0 6px 18px rgba(16,24,40,.08);
  --shadow-strong:0 14px 40px rgba(16,24,40,.14);
  --ease:cubic-bezier(.2,.8,.2,1);
  --focus:0 0 0 3px rgba(208,131,0,.22);
  --btn-grad:linear-gradient(135deg,#ffbf59,#ff8a1d);
  --btn-grad-hover:linear-gradient(135deg,#ffab3a,#ff7414);
  --btn-shadow:0 10px 22px rgba(255,138,29,.28);
  --container-max:1760px;
  --container-pad:clamp(16px, 2vw, 30px);
  --home-bg-from:#fcf7ef;
  --home-bg-mid:#f7ead7;
  --home-bg-to:#f1dfc3;
  --bg-glow-1:transparent;
  --bg-glow-2:transparent;
  --home-glow-1:transparent;
  --home-glow-2:transparent;
  --home-glow-3:transparent;
  --section-gap:clamp(10px, 1.4vw, 18px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}
@media (max-width: 640px){
  :root{ --container-pad:14px; }
}

/* Dark mode (body.dark) */
body.dark{
  --bg:#0f1115;
  --bg-soft:#141820;
  --bg-strong:#1a1f2a;
  --card:#151a22;
  --text:#e5e7eb;
  --text-strong:#f3f4f6;
  --muted:#9ca3af;
  --border:#242a35;
  --brand:#4f8dfd;
  --brand2:#2f6df0;
  --accent:#1b2c4f;
  --btn-grad:var(--brand);
  --btn-grad-hover:var(--brand2);
  --btn-shadow:none;
  --shadow:0 16px 44px rgba(0,0,0,.45);
  --shadow-soft:0 12px 36px rgba(0,0,0,.45);
  --home-bg-from:#0f1115;
  --home-bg-mid:#0f1115;
  --home-bg-to:#0f1115;
  --bg-glow-1:transparent;
  --bg-glow-2:transparent;
  --home-glow-1:transparent;
  --home-glow-2:transparent;
  --home-glow-3:transparent;
  background:var(--bg);
}

img,video{max-width:100%;height:auto;display:block}
iframe{max-width:100%}

/* Media blocks */
.video-wrapper{position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;background:#000}
.video-wrapper iframe{position:absolute;inset:0;width:100%;height:100%}

.listing-gallery .gallery-main{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.listing-main-image{width:100%;max-height:520px;object-fit:cover}
.gallery-thumbs{display:flex;gap:10px;margin-top:10px;overflow:auto;padding-bottom:4px}
.gallery-thumbs .thumb{flex:0 0 auto;width:88px;height:66px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.gallery-thumbs img{max-width:100%;height:auto;display:block}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4,.title,.section__head h2{font-family:var(--font-display);letter-spacing:-.02em}

input,select,textarea{
  font-family:var(--font-body);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:var(--card);
  color:var(--text);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:0;
  border-color:var(--brand);
  box-shadow:var(--focus);
}

/* Utilities */
.mt-10{margin-top:10px}
.mt-12{margin-top:12px}
.mt-15{margin-top:15px}
.mt-20{margin-top:20px}
.mt-30{margin-top:30px}
.mt-40{margin-top:40px}
.mb-10{margin-bottom:10px}
.mb-12{margin-bottom:12px}
.mb-15{margin-bottom:15px}
.mb-20{margin-bottom:20px}
.mb-30{margin-bottom:30px}
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.align-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.gap-8{gap:8px}
.gap-10{gap:10px}
.gap-12{gap:12px}
.gap-15{gap:15px}
.gap-20{gap:20px}
.max-600{max-width:600px}

/* Layout */
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}

@media (min-width: 1900px){
  :root{ --container-max: 1880px; }
}

@media (min-width: 2200px){
  :root{ --container-max: 2040px; }
}

body[data-route="home/index"] .layout-main-with-sidebar{
  max-width: 94vw;
  padding-left: 0;
  padding-right: 0;
}

body[data-route="home/index"] .layout-main-column{
  width: 100%;
}
.section{padding:28px 0}
.section--soft{background:rgba(255,255,255,.55);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section__head{display:flex;align-items:baseline;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.section__head h2{margin:0;font-size:22px}
.section-desc{margin:0;color:var(--muted)}
.link{font-weight:600}

.categories-hero{
  padding-top:40px;
  padding-bottom:40px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
}
.categories-hero__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px;
  align-items:start;
}
.hero-copy h1{
  margin:8px 0;
  font-size:3rem;
  line-height:1.2;
}
.hero-copy__desc{
  max-width:560px;
  color:rgba(255,255,255,.9);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.hero-actions .button{box-shadow:0 20px 40px rgba(0,0,0,.25)}
.hero-actions .button-outline{
  border:1px solid rgba(255,255,255,.6);
  background:transparent;
  color:#fff;
}
.hero-stats{
  background:rgba(0,0,0,.15);
  padding:20px;
  border-radius:20px;
  display:grid;
  gap:12px;
  box-shadow:0 10px 38px rgba(0,0,0,.3);
}
.stat-card{
  background:rgba(255,255,255,.1);
  padding:18px;
  border-radius:16px;
  text-align:center;
  min-height:90px;
}
.stat-card span{
  display:block;
  font-size:2rem;
  font-weight:700;
  color:#fff;
}
.hero-trust{
  margin-top:20px;
  color:rgba(255,255,255,.85);
}
.hero-trust ul{
  margin:12px 0 0;
  padding-left:20px;
}
.categories-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.category-card{
  background:var(--card);
  border-radius:20px;
  padding:20px;
  border:1px solid rgba(148,163,184,.25);
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:420px;
  box-shadow:var(--shadow-soft);
}
.category-card__link{
  color:inherit;
  text-decoration:none;
  flex:1;
}
.category-card__header{
  display:flex;
  gap:14px;
  align-items:center;
}
.category-card__header h3{
  margin:0;
  font-size:1.3rem;
}
.category-card__meta{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
}
.cat-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:flex;
  align-items:center;
  justify-content:center;
}
.category-card__description{
  color:var(--muted);
}
.category-card__description-hidden{
  display:none;
}
.category-card__description-hidden.is-visible{
  display:block;
}
.category-card__toggle{
  margin-top:10px;
  border:none;
  background:none;
  color:var(--brand);
  font-weight:600;
  cursor:pointer;
  padding:0;
}
.category-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid rgba(148,163,184,.35);
  padding-top:12px;
}
.category-card__description-empty{
  color:var(--muted);
}
.related-posts{
  background:rgba(20,20,20,.9);
  color:#fff;
}
.related-posts .posts-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}
.post-card{
  background:rgba(255,255,255,.05);
  border-radius:16px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  min-height:220px;
}
.post-card h3{
  margin-top:0;
}
.post-card__meta{
  margin-top:16px;
  font-size:13px;
  color:rgba(255,255,255,.7);
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:12px;
}

/* Site banner */
.site-banner{
  width:100%;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.site-banner img{
  width:100%;
  max-height:220px;
  object-fit:cover;
  display:block;
}

/* Header / menu */
header, .topbar{
  background:var(--card);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 18px rgba(16,24,40,.05);
}
header .wrap, .topbar .wrap{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:12px var(--container-pad);
}
nav, .nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--text)}
.brand img{width:34px;height:34px;object-fit:contain}
.logo img{height:42px;width:auto}
.site-logo-img{max-height:50px;width:auto}
.main-nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.nav-search{display:flex;align-items:center;gap:6px}
.nav-search input{max-width:260px}
.nav-search button{padding:8px 12px;border-radius:8px}
.lang-switcher{display:flex;gap:6px}
.lang-switcher a{padding:4px 8px;border-radius:8px;font-weight:700;border:1px solid var(--border);background:var(--card)}
.lang-switcher a.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.theme-toggle{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:6px 10px}
@media (max-width: 720px){
  .nav-search input{max-width:160px}
}

/* Buttons */
.btn, button, .button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 14px;border-radius:10px;border:1px solid transparent;
  background:var(--btn-grad);color:#fff;font-weight:800;cursor:pointer;
  box-shadow:var(--btn-shadow);
  transition:transform .12s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease), background .2s var(--ease);
}
.btn:hover, button:hover, .button:hover{background:var(--btn-grad-hover);text-decoration:none;transform:translateY(-1px)}
.btn:active, button:active, .button:active{transform:translateY(0)}
.btn--primary{background:var(--btn-grad)}
.btn--secondary{background:#111827}
.btn--ghost{background:transparent;color:var(--brand);border-color:var(--border)}
.btn--dark{background:#111827}
.btn-small{padding:8px 10px;border-radius:10px;font-size:13px}
.btn-sm{padding:8px 10px;border-radius:10px;font-size:13px}
.btn-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--btn-grad);color:#fff;font-weight:800;box-shadow:var(--btn-shadow)}
.btn-pill:hover{text-decoration:none;background:var(--btn-grad-hover)}
.btn-primary{background:var(--btn-grad);color:#fff}
.btn-primary:hover{text-decoration:none;background:var(--btn-grad-hover)}
.btn-secondary{background:#111827;color:#fff}
.btn-secondary:hover{text-decoration:none;background:#0b1220}
.button.ghost{background:transparent;color:var(--brand);border-color:var(--border)}
.button.secondary{background:var(--card);color:var(--text);border-color:var(--border)}
.button.small{padding:8px 10px;border-radius:10px;font-size:13px}

/* Cards / grids */
.card, .box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.card{padding:14px}
.box{padding:16px}

.category-hero{
  display:flex;
  gap:18px;
  align-items:flex-start;
  background:var(--card);
  border-radius:22px;
  padding:20px;
  box-shadow:var(--shadow-soft);
  margin:18px 0;
}
.category-hero__content{flex:1}
.category-hero h1{margin:0 0 10px;font-size:clamp(26px,3.6vw,34px)}
.category-description p{margin:0 8px 8px;color:var(--muted)}
.category-description__hidden{display:none}
.category-description__hidden.is-open{display:block}
.category-hero__media img{width:220px;border-radius:16px;object-fit:cover;display:block}
.related-blog-callout{margin-top:18px;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--bg-soft)}
.related-blog-row{display:flex;flex-wrap:wrap;gap:12px}
.related-blog-card{padding:10px;flex:1 1 180px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.9);color:var(--text);text-decoration:none;box-shadow:var(--shadow-soft);transition:transform .2s}
.related-blog-card strong{display:block;margin-bottom:6px}
.related-blog-card span{font-size:12px;color:var(--muted)}
.related-blog-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.grid{display:grid;gap:14px}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid--cats{grid-template-columns:repeat(4, minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}

@media (max-width: 980px){
  .grid-3{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid--cats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .grid-3{grid-template-columns:1fr}
  .grid--cats{grid-template-columns:1fr}
}

/* Categories grid (home + categories page) */
.categories-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}

/* Hero */
.hero{padding:28px 0}
.hero__inner{display:grid;grid-template-columns:1.3fr .7fr;gap:16px;align-items:stretch}
.hero__copy{padding:18px}
.hero__copy h1{margin:0 0 6px;font-size:34px;letter-spacing:-.5px}
.hero-subtitle{margin:0 0 14px;color:var(--muted)}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.hero__art{display:grid;gap:12px}
.hero__card{padding:14px}
.hero__cardTitle{font-weight:800;margin:8px 0 4px}
.hero__cardText{color:var(--muted);font-size:14px;margin:0}

@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
}

/* Searchbar */
.searchbar__wrapper{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.searchbar__input{flex:1;border:0;outline:0;background:transparent;font-size:15px}
.searchbar__button{border-radius:8px}
.searchbar__button-text{display:inline}
@media (max-width: 520px){
  .searchbar__button-text{display:none}
}

/* Tags / badges */
.muted{color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-weight:800;font-size:12px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text)}
.tag--vip{background:rgba(59,91,255,.1);border-color:rgba(59,91,255,.25);color:var(--brand)}
.tag--sponsored{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25);color:#92400e}
.badge-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-weight:700;color:var(--muted)}

/* Category cards */
.cat{display:flex;gap:12px;align-items:center;padding:12px}
.cat{transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)}
.cat:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);border-color:rgba(26,115,232,.25)}
.cat__icon{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center;background:linear-gradient(135deg, var(--accent), #fff)}
.cat__icon .cat-ico--svg{color:var(--brand);transition:transform .2s var(--ease)}
.cat:hover .cat__icon .cat-ico--svg{transform:scale(1.05)}
.cat-ico{font-size:20px;color:var(--text)}
.cat-ico--svg{width:22px;height:22px}
.cat__name{font-weight:900}
.cat__count{font-size:12px;color:var(--muted)}

/* Sliders */
/*
  Mobile Chrome sometimes shows clipped “pill” artifacts when the first card's
  border-radius/shadow gets cut by the overflow container edge.
  We add safe padding + scroll-snap so cards don't start half-clipped.
*/
.slider{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding:0 14px;
  scroll-padding-left:14px;
  scroll-padding-right:14px;
}
.slider__track{display:flex;gap:12px;padding:6px 0 10px;min-width:max-content}
.slider__track > *{scroll-snap-align:start}

/* Listing card */
.listing{min-width:240px;max-width:240px}
.listing__media{border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--bg-soft);margin-bottom:10px}
.listing__media img{width:100%;height:160px;object-fit:cover}
.listing__top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.listing__title{font-weight:900;color:var(--text);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.listing__price{font-weight:900}

/* Listing cards (legacy pages) */
.cards{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px;margin-top:14px}
.cards .card h3{margin:8px 0 6px;font-size:16px}
.price{font-weight:900;color:var(--brand)}
.views{font-size:12px;color:var(--muted)}
.vip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-weight:800;font-size:11px;background:var(--accent);color:var(--brand)}
@media (max-width: 980px){
  .cards{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 520px){
  .cards{grid-template-columns:1fr}
}

/* Blog card */
.blog-card{min-width:300px;max-width:300px}
.blog-card h3{margin:8px 0 6px;font-size:18px}
.blog-card p{margin:0;color:var(--muted)}
.blog-cover{border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--bg-soft);margin-bottom:10px}
.blog-cover img{width:100%;height:160px;object-fit:cover}
.blog-meta{font-size:12px;color:var(--muted);font-weight:700}

/* Forms */
input, select, textarea{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:#fff;outline:none;font-size:15px;color:var(--text);
}
textarea{min-height:90px;resize:vertical}
label{font-weight:800;font-size:13px;color:var(--muted)}
form{margin:0}
.form{display:flex;flex-direction:column;gap:12px}
.profile-avatar-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.profile-avatar-preview{width:80px;height:80px;border-radius:999px;border:1px solid var(--border);display:grid;place-items:center;overflow:hidden;background:#f8fafc}
.avatar-img{width:100%;height:100%;object-fit:cover}

/* Auth */
.social-login{margin-top:16px}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}
.social-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn-social{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;font-weight:700}
.btn-google{color:#111}
.btn-facebook{color:#111}
.filter-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  margin:12px 0 18px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}
.filter-grid label{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:-6px}
.filter-grid button{align-self:end}
@media (max-width: 980px){
  .filter-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 720px){
  .filter-grid{grid-template-columns:1fr}
  .filter-grid button{grid-column:1/-1}
}

/* Tables */
.table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
.table th{background:#f8fafc;font-weight:800}
.table tr:last-child td{border-bottom:none}
.table-striped tr:nth-child(even){background:#fbfdff}

/* Preloader skeleton */
#page-skeleton{position:fixed;inset:0;background:var(--card);display:flex;align-items:center;justify-content:center;z-index:9999;gap:12px;transition:opacity .3s ease,visibility .3s ease}
#page-skeleton.fade-out{opacity:0;visibility:hidden}
.skeleton-grid{width:90%;max-width:900px;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.skeleton-block{height:140px;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,0.6) 0%,rgba(248,250,252,0.2) 40%,rgba(255,255,255,0.6) 100%);position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(148,163,184,.15)}
.skeleton-block::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.7),transparent);animation:skeleton-move 1.2s linear infinite}
@keyframes skeleton-move{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Page headers & empty */
.page-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 14px}
.empty-state{background:var(--card);border:1px dashed var(--border);border-radius:12px;padding:24px;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:12px;align-items:center}
.empty-state h3{margin:0;font-size:20px;color:var(--text)}
.empty-state p{margin:0;font-size:15px}
.empty-state-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.empty-state-actions .button{padding:10px 16px;border-radius:12px;border:1px solid var(--border);background:var(--card)}

.ad-slot{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:12px;margin:12px 0;position:relative}
.ad-slot-label{position:absolute;top:-10px;right:12px;background:var(--card);padding:4px 10px;border-radius:999px;font-size:11px;border:1px solid var(--border);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ad-slot-top,.ad-slot-bottom{display:flex;flex-direction:column;gap:6px}


/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-weight:800;font-size:12px;border:1px solid var(--border);background:var(--bg-soft)}

/* Pagination */
.pagination{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.pagination a{padding:6px 10px;border-radius:10px;border:1px solid var(--border);background:var(--card);font-weight:700}
.pagination a.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Search */
.search-form{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 16px}
.search-input{flex:1;min-width:220px}
.search-type{min-width:180px}
.btn-search{background:var(--btn-grad);color:#fff;border-radius:10px;padding:10px 14px;border:0;box-shadow:var(--btn-shadow)}
.search-results .results-count{color:var(--muted);margin:0 0 10px}
.search-section{margin:14px 0}
.listings-grid,.services-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px}
.listing-card,.service-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  box-shadow:var(--shadow-soft);
}
.listing-card img,.service-card img{width:100%;height:160px;object-fit:cover;border-radius:10px}
.listing-card .listing-content,.service-card .service-content{padding-top:8px}
.vip-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-weight:800;font-size:11px;background:var(--accent);color:var(--brand)}
.premium-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-weight:900;font-size:11px;background:linear-gradient(135deg,#fcd34d,#fb923c);color:#1f2937;border:1px solid rgba(251,146,60,.4)}
.blog-list{display:flex;flex-direction:column;gap:10px}
.blog-item{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--card)}
.search-tips{border:1px dashed var(--border);border-radius:12px;padding:12px;background:var(--bg-soft)}
@media (max-width: 980px){
  .listings-grid,.services-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 520px){
  .search-form{flex-direction:column;align-items:stretch}
  .listings-grid,.services-grid{grid-template-columns:1fr}
}

/* Blog */
.blog-page{display:grid;grid-template-columns:1fr 320px;gap:16px}
.blog-main{min-width:0}
.blog-sidebar{position:sticky;top:12px;align-self:start}
.blog-featured .featured-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
.featured-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.featured-image img{width:100%;height:200px;object-fit:cover}
.featured-content{padding:12px}
.featured-excerpt{color:var(--muted)}
.blog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.blog-filters a{padding:6px 10px;border-radius:8px;border:1px solid var(--border);font-weight:700}
.blog-filters a.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.posts-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px}
.post-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.post-image img{width:100%;height:180px;object-fit:cover}
.post-content{padding:12px}
.post-excerpt{color:var(--muted)}
.featured-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-weight:800;font-size:12px;background:rgba(245,158,11,.15);color:#92400e}
.post-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{padding:4px 8px;border-radius:999px;border:1px solid var(--border);font-weight:700;font-size:12px;background:#f8fafc}
.sidebar-widget{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:12px;margin-bottom:12px}
.sidebar-search{display:flex;gap:6px}
.tags-cloud{display:flex;gap:6px;flex-wrap:wrap}
.tag-link{padding:4px 8px;border-radius:999px;border:1px solid var(--border);font-weight:700;font-size:12px;background:#f8fafc}
@media (max-width: 980px){
  .blog-page{grid-template-columns:1fr}
  .blog-sidebar{position:static}
  .posts-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 520px){
  .featured-grid,.posts-grid{grid-template-columns:1fr}
  .sidebar-search{flex-direction:column}
}

/* Blog post */
.blog-post{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px}
.post-cover-image img{width:100%;height:260px;object-fit:cover;border-radius:12px}
.post-header h1{margin:10px 0}
.post-meta-header{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.post-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}
.btn-like{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#fff;font-weight:700}
.btn-like.liked{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.3)}
.post-tags-header{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.post-content{margin:12px 0;line-height:1.8;font-size:17px;max-width:820px}
.post-content p{margin:0 0 12px}
.post-content h2,.post-content h3{margin:16px 0 8px}
.post-content ul,.post-content ol{margin:0 0 12px 18px}
.post-content img{max-width:100%;height:auto;border-radius:10px}
.post-gallery{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.post-gallery__item img{width:96px;height:96px;object-fit:cover;border-radius:8px}
.blog-video-box{margin-top:14px}
.post-share{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.related-posts-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px}
.related-post-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.related-post-image img{width:100%;height:160px;object-fit:cover}
.related-post-content{padding:10px}
.ad-slot-auto{margin:14px 0;padding:10px;border:1px dashed var(--border);border-radius:12px;background:var(--card)}

/* Blog reviews */
.blog-reviews-section{margin-top:40px;padding-top:30px;border-top:2px solid var(--border)}
.review-form{margin-bottom:30px;padding:20px;background:#f8fafc;border-radius:12px;border:1px solid var(--border)}
.review-form__row{margin-bottom:12px}
.review-form textarea{width:100%}
.review-empty{color:var(--muted);font-style:italic}
.review-item{padding:15px;margin-bottom:12px;background:#fff;border-radius:12px;border:1px solid var(--border)}
.review-item__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.review-item small{color:var(--muted)}
@media (max-width: 980px){
  .related-posts-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 520px){
  .related-posts-grid{grid-template-columns:1fr}
  .post-content{font-size:16px}
}

/* Listing/show layout */
.left-right{display:grid;grid-template-columns:1.4fr .6fr;gap:14px}
@media (max-width: 980px){
  .left-right{grid-template-columns:1fr}
}

.listing-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 14px;flex-wrap:wrap}
.listing-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-favorite,.btn-share{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);font-weight:700;cursor:pointer}
.btn-favorite.active{background:rgba(59,91,255,.12);border-color:rgba(59,91,255,.3)}
.btn-share{background:#fff}
.btn-active{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.3);color:#14532d}

.listing-detail{display:grid;grid-template-columns:1.2fr .5fr;gap:16px;align-items:start}
.listing-detail .left{min-width:0}
.listing-detail .right{position:sticky;top:12px}
@media (max-width: 980px){
  .listing-detail{grid-template-columns:1fr}
  .listing-detail .right{position:static}
}

.badge-featured,.badge-boosted{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-weight:800;font-size:12px;border:1px solid var(--border);background:#f8fafc}
.vip-upgrade{border:1px solid rgba(59,91,255,.25);background:rgba(59,91,255,.08)}
.hero-note{color:var(--muted)}
.review{padding:10px;border:1px solid var(--border);border-radius:12px;margin-bottom:8px;background:#fff}
.qa-section .questions-list{display:flex;flex-direction:column;gap:10px}
.question-item{border:1px solid var(--border);border-radius:12px;padding:10px;background:#fff}
.question-asker{display:flex;align-items:center;gap:10px}
.asker-avatar{width:36px;height:36px;border-radius:999px;object-fit:cover;border:1px solid var(--border)}
.asker-avatar.placeholder{display:grid;place-items:center;background:#eef2ff;font-weight:900;color:#111827}
.question-date,.answer-date{font-size:11px;color:var(--muted);margin-left:6px}

/* Services */
.service-cover{margin-top:10px}
.service-cover img{max-width:100%;border-radius:12px}
.service-gallery{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.service-gallery img{width:96px;height:96px;object-fit:cover;border-radius:8px}
.service-video-box{margin-top:14px}
.service-rating{margin-top:20px;padding:15px;background:#f8fafc;border-radius:12px;border:1px solid var(--border)}
.service-rating--compact{margin-top:8px;padding:6px 8px;font-size:12px;border-radius:999px;display:inline-flex;gap:6px;align-items:center}
.service-packages{margin-top:30px}
.packages-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:16px;margin-top:12px}
.package-card{padding:18px;border:1px solid var(--border);border-radius:12px;background:#fff}
.package-card--popular{border-color:var(--brand)}
.package-popular-badge{background:var(--brand);color:#fff;padding:4px 10px;border-radius:6px;display:inline-block;margin-bottom:10px;font-weight:800;font-size:12px}
.package-price{font-size:22px;font-weight:900;color:var(--brand)}
.service-booking{margin-top:30px;padding:20px;background:#f8fafc;border-radius:12px;border:1px solid var(--border)}
.service-form{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.service-form__row{display:flex;flex-direction:column;gap:6px}
.service-form--card{margin-top:16px;padding:15px;background:#f8fafc;border-radius:12px;border:1px solid var(--border)}
.service-questions{margin-top:30px}
.service-questions .questions-list{margin-top:12px}
.service-questions .question-item{padding:15px;margin-bottom:10px;background:#fff;border-left:3px solid var(--brand);border-radius:8px;border:1px solid var(--border)}
.service-questions .question-item__head{margin-bottom:8px;display:flex;gap:10px;align-items:center}
.service-questions .question-item small{color:var(--muted)}
.service-questions .answer{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.service-reviews{margin-top:30px}
.service-reviews .reviews-list{margin-top:12px}
.service-reviews .review-item{padding:15px;margin-bottom:10px;background:#fff;border-radius:12px;border:1px solid var(--border)}
.service-reviews .review-item__head{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.service-reviews .review-item small{color:var(--muted)}
.service-auth-hint{margin-top:12px}

/* Newsletter */
.newsletter-form{padding:20px;background:#f8fafc;border-radius:12px;border:1px solid var(--border);margin:20px 0}
.newsletter-title{margin:0 0 12px 0;font-size:18px}
.newsletter-desc{margin:0 0 12px 0;color:var(--muted);font-size:14px}
.newsletter-form-row{display:flex;gap:10px;flex-wrap:wrap}
.newsletter-input{flex:1;min-width:150px;padding:10px;border:1px solid var(--border);border-radius:8px}
.newsletter-btn{padding:10px 20px;white-space:nowrap}
.newsletter-message{margin-top:10px;font-size:14px;display:none}

/* Social share */
.social-share{display:flex;gap:10px;margin:20px 0;flex-wrap:wrap}
.social-share__btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;color:#fff;text-decoration:none;border-radius:8px;font-size:14px;font-weight:700;border:0;cursor:pointer}
.social-share__btn--facebook{background:#1877f2}
.social-share__btn--twitter{background:#1da1f2}
.social-share__btn--whatsapp{background:#25d366}
.social-share__btn--telegram{background:#0088cc}
.social-share__btn--copy{background:#64748b}

/* Icons */
.icon{width:1em;height:1em;display:inline-block;flex-shrink:0;vertical-align:-0.12em}
.icon--sm{width:16px;height:16px}
.icon--md{width:20px;height:20px}
.icon--lg{width:24px;height:24px}
.icon--xl{width:32px;height:32px}

/* Cookie consent */
.cookie-consent{position:fixed;bottom:0;left:0;right:0;background:#1e293b;color:#fff;padding:20px;z-index:10000;box-shadow:0 -4px 12px rgba(0,0,0,0.15)}
.cookie-consent__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px}
.cookie-consent__text{flex:1;min-width:250px}
.cookie-consent__desc{margin:0;font-size:14px}
.cookie-consent__link{color:#60a5fa;text-decoration:underline}
.cookie-consent__actions{display:flex;gap:10px}
.cookie-consent__btn{padding:10px 20px;border-radius:8px;font-weight:700;cursor:pointer}
.cookie-consent__btn--accept{background:#3b82f6;color:#fff;border:0}
.cookie-consent__btn--decline{background:transparent;color:#fff;border:1px solid #64748b}

/* Account */
.inline-check{display:flex;align-items:center;gap:10px;margin-top:16px}
.verify-card{margin-top:20px;padding:16px;background:#f8fafc;border-radius:10px;border:1px solid var(--border)}
.verify-card h3{margin-top:0}
.verify-list{display:flex;flex-direction:column;gap:8px}
.verify-ok{color:#10b981;font-weight:700}
.verify-bad{color:#ef4444;font-weight:700}
.verify-link{margin-left:10px}

/* Wallet */
.wallet-balance__card{text-align:center;padding:30px}
.wallet-balance__amount{font-size:48px;font-weight:800;color:var(--brand);margin-bottom:8px}
.wallet-balance__label{color:var(--muted)}
.amount-positive{color:#10b981;font-weight:700}
.amount-negative{color:#ef4444;font-weight:700}
.pagination{display:flex;gap:8px}
.pagination-center{justify-content:center}

/* User profile */
.profile-more{text-align:center;margin-top:20px}

/* FAQ */
.faq-search{margin:30px 0}
.faq-search-row{display:flex;gap:10px;flex-wrap:wrap}
.faq-search-input{flex:1;min-width:200px;padding:12px;border:1px solid var(--border);border-radius:8px}
.faq-filters{margin-bottom:30px;display:flex;gap:10px;flex-wrap:wrap}
.faq-filter{padding:8px 16px;border-radius:8px;border:1px solid var(--border);background:#e2e8f0;color:var(--muted);font-weight:700;text-decoration:none}
.faq-filter.active{background:#3b82f6;color:#fff;border-color:#3b82f6}
.faq-list{margin-top:30px}
.faq-item{margin-bottom:20px;padding:20px;background:#f8fafc;border-radius:12px;border-left:4px solid #3b82f6}
.faq-item__title{margin:0 0 10px 0;color:#1e293b;font-size:18px}
.faq-category{display:inline-block;padding:4px 10px;background:#e2e8f0;color:var(--muted);border-radius:6px;font-size:12px;margin-bottom:10px}
.faq-answer{margin-top:10px;color:#334155;line-height:1.8}
.faq-empty{padding:40px;text-align:center;color:var(--muted)}
.faq-help{margin-top:40px;padding:20px;background:#f1f5f9;border-radius:10px;border:1px solid var(--border)}

/* Contact */
.contact-form{max-width:600px;margin-top:30px}
.contact-info{margin-top:40px;padding:20px;background:#f8fafc;border-radius:12px;border:1px solid var(--border)}

/* Report */
.report-box{
  margin-top:12px;
  padding:14px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,.45);
  background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));
  box-shadow:var(--shadow-soft);
}
.report-box summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
}
.report-box summary::-webkit-details-marker{display:none}
.report-subtitle{
  color:var(--muted);
  font-size:13px;
  margin:6px 0 8px;
}
.report-form{
  display:grid;
  gap:10px;
}
.report-form select,
.report-form input,
.report-form textarea{
  width:100%;
}
.report-box--inline{
  margin-bottom:12px;
}

/* Pages */
.page-breadcrumb{margin-bottom:20px;font-size:14px;color:var(--muted)}
.page-article{line-height:1.8;color:#334155}
.page-callout{margin-top:40px;padding:20px;background:#f8fafc;border-radius:10px;border-left:4px solid #3b82f6}
.page-callout__text{margin:0;font-size:14px;color:var(--muted)}

/* Sitemap */
.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:30px;margin-top:30px}
.sitemap-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.sitemap-callout{margin-top:40px;padding:20px;background:#f8fafc;border-radius:10px;border:1px solid var(--border)}

/* VIP */
.vip-pay-card{margin-top:20px;padding:16px;background:#f8fafc;border-radius:12px;border:1px solid var(--border)}
.vip-pay-label{display:block;margin-bottom:12px;font-weight:800}
.vip-pay-options{display:flex;gap:12px;flex-wrap:wrap}
.vip-pay-option{display:flex;align-items:center;gap:8px;cursor:pointer}
.vip-pay-actions{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.vip-pay-note{margin-top:10px}

/* VIP success */
.vip-success{text-align:center;padding:40px 20px}
.vip-success__icon{font-size:64px;margin-bottom:20px}
.vip-success__title{margin-bottom:16px}
.vip-success__title--ok{color:#10b981}
.vip-success__text{color:var(--muted);font-size:18px;margin-bottom:30px}
.vip-success__actions{margin:30px 0}
.vip-success__details{margin-top:40px;padding:20px;background:#f8fafc;border-radius:12px;max-width:500px;margin-left:auto;margin-right:auto;border:1px solid var(--border);text-align:left}
.vip-success__details h3{margin-bottom:12px}
.vip-success__details-list{color:#475569;display:flex;flex-direction:column;gap:8px}
.vip-success__status{color:#10b981;font-weight:800}
.vip-success__footer{margin-top:40px}
.vip-success__footer a{color:var(--muted);text-decoration:none}
.question-text{margin-top:8px}
.answer-item{margin-top:10px;padding:10px;border-radius:10px;background:#f8fafc;border:1px solid var(--border)}
.answer-text{margin-top:6px}
.ask-question-form{margin-top:12px}

/* Service detail */
.service-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 14px;flex-wrap:wrap}
.service-meta{color:var(--muted);font-size:14px;margin-bottom:10px}
.service-gallery a img{border-radius:8px}
.alert{padding:10px 12px;border-radius:10px;border:1px solid var(--border);font-weight:700}
.alert.warning{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:#92400e}

/* Layout with sidebar */
.layout-main-with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.layout-main--full{grid-template-columns:1fr}
.layout-main-column{min-width:0}
.layout-sidebar-column{position:sticky;top:12px}
.ad-slot-top,.ad-slot-bottom{margin:10px 0}
.ads-block{margin:10px 0}
@media (min-width: 1200px){
  .layout-main-with-sidebar{
    grid-template-columns:minmax(0,1fr) clamp(260px, 22vw, 360px);
    gap:clamp(16px, 2vw, 28px);
  }
}
@media (max-width: 980px){
  .layout-main-with-sidebar{grid-template-columns:1fr}
  .layout-sidebar-column{position:static}
}

/* Flash messages */
.flash{border-radius:12px;padding:10px 12px;margin:10px 0;border:1px solid var(--border);font-weight:700}
.flash.ok{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.3);color:#14532d}
.flash.err{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.3);color:#7f1d1d}

/* Footer */
.footer{margin-top:20px;padding:20px 0;background:var(--card);border-top:1px solid var(--border);text-align:center}
.footer a{margin:0 6px;font-weight:700}
.footer-links{font-weight:700}
.footer-meta{max-width:var(--container-max);margin:0 auto 20px;padding:0 var(--container-pad);display:flex;flex-direction:column;align-items:center;gap:6px}

/* Social follow */
.social-follow{max-width:var(--container-max);margin:18px auto;padding:16px var(--container-pad);border:1px solid var(--border);border-radius:16px;background:linear-gradient(135deg, rgba(59,91,255,.10), rgba(245,158,11,.08));display:flex;align-items:center;justify-content:space-between;gap:16px}
.social-follow__hint{margin-top:6px;font-size:12px;color:var(--muted)}
.social-follow__link.is-disabled{opacity:.55;pointer-events:none;filter:grayscale(.2)}
.social-follow__copy{display:flex;flex-direction:column;gap:4px;text-align:left}
.social-follow__title{font-family:var(--font-display);font-weight:700}
.social-follow__text{color:var(--muted);font-size:13px}
.social-follow__list{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.social-follow__link{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.9);color:var(--text);font-weight:700;font-size:13px;text-decoration:none;transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.social-follow__link:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft);text-decoration:none}
.social-follow__link .icon{width:16px;height:16px}
.social-follow__link--facebook{color:#1877f2}
.social-follow__link--instagram{color:#e1306c}
.social-follow__link--twitter{color:#0f172a}
.social-follow__link--youtube{color:#ff0000}
.social-follow__link--tiktok{color:#111827}
.social-follow__link--linkedin{color:#0a66c2}
.social-follow__link--telegram{color:#229ed9}
.social-follow__link--whatsapp{color:#25d366}
.social-follow--home{box-shadow:var(--shadow-soft)}
.social-follow--footer{margin:10px auto;padding:0 20px;border:none;background:transparent}
.social-follow--footer .social-follow__list{justify-content:center}
.social-follow--footer .social-follow__copy{text-align:center}
.social-follow--footer .social-follow__link{background:var(--card)}
@media (max-width: 720px){
  .social-follow{flex-direction:column;align-items:flex-start}
  .social-follow__list{justify-content:flex-start}
  .social-follow--footer{align-items:center}
  .social-follow--footer .social-follow__copy{text-align:center}
}
body.dark .social-follow{background:linear-gradient(135deg, rgba(59,91,255,.18), rgba(245,158,11,.12))}
body.dark .social-follow__link{background:rgba(15,23,42,.85);border-color:rgba(148,163,184,.2)}

.thumb{width:100%;height:180px;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:#f8fafc}
.thumb.placeholder{display:grid;place-items:center;color:var(--muted);font-weight:800}

/* Video embed */
.video-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--bg-soft)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%}

/* Chat */
.chat-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.btn-back{font-weight:800}
.chat-user-info{display:flex;align-items:center;gap:10px}
.chat-avatar{width:40px;height:40px;border-radius:999px;object-fit:cover;border:1px solid var(--border)}
.chat-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;max-height:60vh;overflow:auto}
.message-item{display:flex;gap:10px;margin:10px 0}
.message-item.me,
.message-item.sent{flex-direction:row-reverse}
.msg-avatar img{width:34px;height:34px;border-radius:999px;object-fit:cover;border:1px solid var(--border)}

.conversations-list{display:flex;flex-direction:column;gap:10px}
.conversation-item{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px}
.conversation-item:hover{border-color:rgba(59,91,255,.35)}
.conversation-avatar{position:relative}
.conversation-avatar img{width:44px;height:44px;border-radius:999px;object-fit:cover;border:1px solid var(--border)}
.avatar-placeholder{width:44px;height:44px;border-radius:999px;background:#eef2ff;color:#111827;display:grid;place-items:center;font-weight:800}
.unread-badge{position:absolute;right:-4px;top:-4px;background:var(--danger);color:#fff;font-size:11px;border-radius:999px;padding:2px 6px}
.conversation-content h3{margin:0 0 4px;font-size:16px}
.last-message{margin:0;color:var(--muted);font-size:13px}
.conversation-time{font-size:11px;color:var(--muted)}

/* Profile */
.profile-header{display:grid;grid-template-columns:140px 1fr;gap:16px}
.profile-avatar-large{width:120px;height:120px;border-radius:999px;object-fit:cover;border:1px solid var(--border)}
.profile-avatar-large.placeholder{width:120px;height:120px;border-radius:999px;background:#eef2ff;display:grid;place-items:center;font-size:32px;font-weight:900;color:#111827}
.profile-info h1{margin:0 0 6px}
.profile-stats{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:10px;margin-top:10px}
.stat-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center}
.stat-value{font-weight:900;font-size:18px}
.stat-label{font-size:12px;color:var(--muted)}
.profile-section{margin-top:16px}
.listings-grid,.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.listing-card,.service-card{display:block;border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--card)}
.listing-card img{width:100%;height:160px;object-fit:cover;border-radius:10px}
.reviews-list{display:flex;flex-direction:column;gap:10px}
@media (max-width: 980px){
  .profile-header{grid-template-columns:1fr}
  .profile-stats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .listings-grid,.services-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 520px){
  .listings-grid,.services-grid{grid-template-columns:1fr}
}
.avatar-placeholder{width:34px;height:34px;border-radius:999px;background:#f1f5f9;border:1px solid var(--border);display:grid;place-items:center;font-weight:900;color:var(--muted)}
.msg-content{max-width:75%}
.msg-text{background:#f1f5f9;border:1px solid var(--border);border-radius:14px;padding:10px 12px}
.message-item.me .msg-text{background:rgba(59,91,255,.12);border-color:rgba(59,91,255,.25)}
.msg-time{font-size:11px;color:var(--muted);margin-top:4px}
.chat-form{margin-top:10px}
.chat-input-wrapper{display:flex;gap:10px}
.chat-input-wrapper textarea{min-height:48px}
.btn-send{min-width:110px;background:var(--brand);color:#fff;border-radius:10px;padding:10px 12px;border:0}
.btn-send:hover{background:var(--brand2)}
.btn-upload{border:1px solid var(--border);background:var(--card);border-radius:10px;width:42px;height:42px;display:grid;place-items:center;font-size:18px}
.btn-upload:hover{background:#eef2ff;border-color:rgba(59,91,255,.35)}
.chat-attachment-image{max-width:240px;max-height:240px;object-fit:cover;border-radius:10px;border:1px solid var(--border);margin-top:6px}
.chat-attachment-file{display:inline-flex;gap:6px;align-items:center;margin-top:6px;font-weight:700}
.typing-indicator{margin-top:8px;font-size:12px;color:var(--muted)}

.conversations-list{display:flex;flex-direction:column;gap:10px}
.conversation-item{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--card);transition:.2s}
.conversation-item:hover{border-color:rgba(59,91,255,.35);box-shadow:0 6px 18px rgba(15,23,42,.06)}
.conversation-avatar{position:relative;width:46px;height:46px}
.conversation-avatar img{width:46px;height:46px;border-radius:999px;object-fit:cover;border:1px solid var(--border)}
.conversation-content h3{margin:0 0 4px;font-size:15px}
.conversation-content .last-message{margin:0;color:var(--muted);font-size:13px}
.conversation-time{font-size:11px;color:var(--muted)}
.unread-badge{position:absolute;right:-6px;top:-6px;background:#ef4444;color:#fff;border-radius:999px;font-size:11px;padding:2px 6px;font-weight:800}

/* Account */
.account-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}
.account-header h1{margin:0 0 4px}
.account-header .actions{display:flex;gap:8px;flex-wrap:wrap}
.listing-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px}
.listing-card,.service-card{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:10px}
.service-card img{width:100%;height:160px;object-fit:cover;border-radius:10px;margin-bottom:8px}
.price-tag{font-weight:900;color:var(--brand);margin-top:6px}
.listing-title,.service-title{font-weight:900;margin-bottom:4px}
.listing-meta,.service-meta{font-size:13px;color:var(--muted)}
@media (max-width: 980px){
  .listing-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 720px){
  .account-header{flex-direction:column;align-items:flex-start}
  .listing-grid{grid-template-columns:1fr}
}

/* Small helpers */
.empty{padding:14px;border:1px dashed var(--border);border-radius:var(--radius);background:rgba(255,255,255,.6)}
.vip-border{border-color:rgba(59,91,255,.35)}
.vip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-weight:800;font-size:11px;background:rgba(59,91,255,.12);color:var(--brand)}

/* Sponsor card */
.sponsor-card{padding:14px;border:1px solid rgba(245,158,11,.25);background:rgba(245,158,11,.08);border-radius:var(--radius);margin:12px 0;}
.sponsor-badge{display:inline-flex;padding:4px 8px;border-radius:999px;font-weight:900;font-size:12px;background:rgba(245,158,11,.2)}
.sponsor-row{display:flex;gap:12px;margin-top:10px;align-items:flex-start}
.sponsor-logo{width:60px;height:60px;object-fit:contain;border-radius:12px;border:1px solid var(--border);background:#fff}
.sponsor-title{font-weight:900}
.sponsor-text{color:var(--muted);margin-top:4px}
.sponsor-cta{display:inline-flex;margin-top:8px;font-weight:900}

/* Footer */
footer{margin-top:28px;padding:18px 0;border-top:1px solid var(--border);color:var(--muted)}
.footer-newsletter-wrap{max-width:var(--container-max);margin:0 auto;padding:20px var(--container-pad)}
.footer-links{margin:10px 0}

/* Auth */
.auth-note{margin-top:12px;color:var(--muted)}
.auth-note--sm{margin-top:10px}

/* Form helpers */
.form-help{color:#64748b;display:block;margin-top:6px}

/* Hero icons */
.hero-btn-icon{width:20px;height:20px;margin-right:8px}
.searchbar__buttonIcon{width:18px;height:18px}
.badge-pill__icon{width:14px;height:14px;margin-right:4px}
.hero-card-icon{width:32px;height:32px}
.onboarding-icon__icon{width:40px;height:40px}
.brand-banner__img{width:100%;max-height:300px;object-fit:cover;border-radius:8px}
.tag--offset{margin-left:8px}

/* Error pages */
.error-page{text-align:center;padding:60px 20px}
.error-page__code{font-size:72px;margin:0}
.error-page__code--500{color:#dc2626}
.error-page__code--404{color:#3b82f6}
.error-page__title{margin-top:20px}
.error-page__text{color:#64748b;font-size:18px;margin:20px 0 40px}
.error-page__actions{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}
.error-page__btn{padding:12px 24px;text-decoration:none}
.error-page__help{margin-top:60px;padding:30px;background:#f8fafc;border-radius:12px;max-width:600px;margin-left:auto;margin-right:auto}

/* Misc */
.pre-wrap{white-space:pre-wrap}
.rating-input{display:flex;gap:5px;flex-direction:row-reverse}
.rating-input input[type="radio"]{display:none}
.rating-input label{font-size:24px;cursor:pointer;color:#ddd;transition:color .2s}
.rating-input label:hover,.rating-input label:hover~label,.rating-input input[type="radio"]:checked~label{color:#ffc107}

/* Leaderboard */
.leaderboard-filters--spaced{margin-bottom:20px}
.leaderboard-user{display:flex;align-items:center;gap:12px}


/* image helpers */
.img-cover{width:100%;height:100%;object-fit:cover;}
.listing__img{width:100%;height:180px;object-fit:cover;border-radius:14px;margin:8px 0 10px;}
.service-card img.thumb{width:100%;height:180px;object-fit:cover;border-radius:12px;margin:8px 0 10px;}


/* AI_SAFE_IMG_RULES_V3 */
img{max-width:100%;height:auto;}

/* Prevent accidental horizontal overflow on mobile (common source of weird white artifacts) */
html,body{overflow-x:hidden}


/* ===== Responsive Fix Pack (2026-01-11) ===== */
img{max-width:100%;height:auto}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
@media (max-width: 768px){
  .admin-filters form.filter-inline{display:block}
  .tabs{overflow:auto;white-space:nowrap}
  table{display:block;overflow-x:auto}
  .featured-grid,.grid{grid-template-columns:1fr !important}
}
@media (min-width: 769px) and (max-width: 1100px){
  .featured-grid{grid-template-columns:repeat(2,1fr) !important}
}

/* V7.0 Mobile-first fixes */
@media (max-width: 640px){
  /* Make horizontal tracks feel like a carousel without JS (keep safe edge padding to avoid clipped shadows) */
  .slider{padding-left:14px;padding-right:14px}
  .slider__track{gap:10px}
  /* Wider cards on phones */
  .listing{min-width:78vw;max-width:78vw}
  /* Service cards are also using .listing class on home; ensure image is not too tall */
  .listing__media img{height:170px}
  /* Keep track flex on mobile */
  .slider__track{display:flex}
}

/* Empty state polish for AdSense/crawl */
.empty{border:1px dashed var(--border);border-radius:14px;padding:14px;background:#fff}
.empty p{margin:0 0 10px;color:var(--muted)}

/* =====================================
   BLOG UI + PROSE (Adsense-ready polish)
   - readable typography
   - responsive grids
   - consistent media/iframes
===================================== */

.blog-page{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
@media (max-width: 980px){.blog-page{grid-template-columns:1fr}.blog-sidebar{order:2}}

.blog-featured .section-title{margin:0 0 12px}
.featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width: 980px){.featured-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.featured-grid{grid-template-columns:1fr}}

.featured-card,.post-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(15,23,42,.06)}
.featured-image,.post-image{display:block;position:relative}
.featured-image img,.post-image img{width:100%;height:190px;object-fit:cover;display:block;background:#f1f5f9}
@media (max-width: 640px){.featured-image img,.post-image img{height:180px}}
.featured-content,.post-content{padding:14px}
.featured-content h3,.post-content h3{margin:0 0 8px;font-size:18px;line-height:1.25}
.featured-content h3 a,.post-content h3 a{color:inherit;text-decoration:none}
.featured-content h3 a:hover,.post-content h3 a:hover{text-decoration:underline}
.featured-excerpt,.post-excerpt{margin:0 0 10px;color:var(--muted);line-height:1.55}

/* =====================================
   HOME MODERN (2026)
   - compact hero
   - top showcase slider (VIP / Latest / Services / Blog)
   - clean typography (no clutter)
===================================== */

.home-hero{
  padding:18px 0 8px;
}
.home-hero .hero{padding:0}
.home-hero .hero__copy{padding:0;background:transparent;border:none;box-shadow:none}
.home-hero .hero__inner{grid-template-columns:1.35fr .65fr}
.home-hero .hero__copy h1{font-size:34px;line-height:1.1}
.home-hero .hero-subtitle{font-size:16px;line-height:1.55;max-width:58ch}
.home-hero .hero__art .hero__card{border-radius:18px}

@media (max-width: 980px){
  .home-hero .hero__inner{grid-template-columns:1fr}
  .home-hero .hero__art{display:none}
}

.showcase{
  margin:10px 0 18px;
  background:linear-gradient(180deg, rgba(59,91,255,.07), rgba(14,165,233,.04) 55%, rgba(255,255,255,0));
  border:1px solid rgba(226,232,240,.9);
  border-radius:22px;
  overflow:hidden;
}
.showcase__head{padding:14px 14px 8px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.showcase__title{margin:0;font-size:18px;letter-spacing:-.2px}
.showcase__desc{margin:0;color:var(--muted);font-weight:700;font-size:13px}

.showcase__dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.showcase__dot{width:34px;height:8px;border-radius:999px;border:1px solid var(--border);background:#fff;opacity:.65;cursor:pointer}
.showcase__dot.is-active{background:var(--brand);border-color:rgba(59,91,255,.4);opacity:1}

.showcase__viewport{overflow:hidden}
.showcase__track{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;-webkit-overflow-scrolling:touch}
.showcase__panel{scroll-snap-align:start;min-width:100%;padding:8px 0 14px}
.showcase__panel .section__head{padding:0 14px;margin:0}
.showcase__panel .section__head h2{font-size:16px;margin:0}
.showcase__panel .section__head .link{font-weight:900}
.showcase__panel .section-desc{display:none}

/* Give cards room; avoid clipped shadows/pills */
.showcase .slider{padding:0 14px}
.showcase .slider__track{padding:10px 0 4px}

/* Modern card polish */
.listing, .blog-card{border-radius:18px}
.listing__media, .blog-cover{border-radius:16px}
.listing__price{font-size:18px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.section-head .muted{font-size:13px}

@media (max-width: 640px){
  .showcase__head{padding:12px 12px 6px}
  .showcase__dot{width:28px}
  .listing__price{font-size:17px}
}
.featured-meta,.post-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px}

.blog-header{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
.blog-header h1{margin:0}
.blog-filters{display:flex;gap:8px;flex-wrap:wrap}
.blog-filters a{padding:6px 10px;border-radius:999px;border:1px solid var(--border);text-decoration:none;color:inherit;font-weight:600;font-size:13px;background:#fff}
.blog-filters a.active{background:rgba(59,91,255,.12);border-color:rgba(59,91,255,.25)}
.blog-inline-search{display:flex;gap:8px;margin:8px 0 14px}
.blog-inline-search input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fff}
.blog-inline-search button{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0f172a;color:#fff;cursor:pointer}
.blog-filter-row{display:grid;grid-template-columns:auto 1fr auto 1fr 1fr auto;gap:8px;align-items:center;margin:0 0 16px}
.blog-filter-row label{font-size:12px;font-weight:800;color:var(--muted)}
.blog-filter-row select,.blog-filter-row input{padding:10px 12px;border-radius:12px;border:1px solid var(--border)}
.blog-filter-row button{padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#0f172a;color:#fff;cursor:pointer}
@media (max-width: 980px){
  .blog-filter-row{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .blog-filter-row{display:flex;flex-wrap:wrap;gap:6px}
  .blog-filter-row label{
    background:rgba(15,23,42,.06);
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
  }
  .blog-filter-row select,
  .blog-filter-row input,
  .blog-filter-row button{
    border-radius:999px;
    padding:8px 12px;
    font-size:12px;
  }
  .blog-filter-row select,
  .blog-filter-row input{
    flex:1 1 calc(50% - 6px);
  }
  .blog-filter-row button{
    flex:1 1 100%;
  }
}

.posts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width: 980px){.posts-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.posts-grid{grid-template-columns:1fr}}

.featured-badge{position:absolute;top:10px;left:10px;background:rgba(15,23,42,.85);color:#fff;padding:4px 8px;border-radius:999px;font-size:12px}

.blog-sidebar .sidebar-widget{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:14px}
.blog-sidebar h3{margin:0 0 10px;font-size:15px}
.sidebar-search{display:flex;gap:8px}
.sidebar-search input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1px solid var(--border)}
.sidebar-search button{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0f172a;color:#fff;cursor:pointer}

.tags-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-link,.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:#fff;text-decoration:none;color:inherit;font-size:12px}
.tag-count{color:var(--muted)}

.recent-posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.recent-posts a{text-decoration:none;color:inherit;font-weight:600}
.recent-date{display:block;color:var(--muted);font-size:12px;margin-top:4px}

/* Blog single */
.blog-post{max-width:980px;margin:0 auto}
.post-cover-image img{width:100%;height:auto;border-radius:16px;border:1px solid var(--border)}
.post-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0}
@media (max-width: 980px){.post-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width: 640px){.post-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post-gallery__item img{width:100%;height:96px;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:#f1f5f9}

.post-header{margin:14px 0}
.post-meta-header{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:13px;margin-top:8px}

/* Prose typography (HTML content) */
.prose{line-height:1.75;font-size:16px;color:var(--text)}
.prose p{margin:0 0 14px}
.prose h2{margin:22px 0 10px;font-size:22px;line-height:1.25}
.prose h3{margin:18px 0 10px;font-size:18px;line-height:1.25}
.prose ul,.prose ol{margin:0 0 14px 20px}
.prose li{margin:6px 0}
.prose a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.prose blockquote{margin:16px 0;padding:12px 14px;border-left:4px solid rgba(59,91,255,.55);background:rgba(59,91,255,.06);border-radius:12px}
.prose img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.prose th,.prose td{border:1px solid var(--border);padding:10px;vertical-align:top}
.prose iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;overflow:hidden;background:#000}

.related-posts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width: 980px){.related-posts-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.related-posts-grid{grid-template-columns:1fr}}
.related-post-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.related-post-image img{width:100%;height:140px;object-fit:cover;display:block;background:#f1f5f9}
.related-post-content{padding:12px}

/* =====================================
   HOME (2026 refresh) - modern landing
   - compact sections
   - showcase carousel (VIP / Latest / Services / Blog)
===================================== */

.hero{padding:24px 0}
.hero__copy{border-radius:22px;background:linear-gradient(135deg, rgba(59,91,255,.10), rgba(14,165,233,.08));border:1px solid var(--border)}
.hero__copy h1{font-size:34px}
.hero-subtitle{font-size:16px;line-height:1.6}

.home-intro{margin-top:6px;color:var(--muted);font-weight:700}

.showcase{margin-top:12px;border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.06);overflow:hidden}
.showcase__top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:14px 14px 8px}
.showcase__title{margin:0;font-size:18px;letter-spacing:-.2px}
.showcase__dots{display:flex;gap:8px;align-items:center;position:relative;z-index:5;pointer-events:auto}
.showcase__dot{width:9px;height:9px;border-radius:999px;border:1px solid var(--border);background:#fff;opacity:.75;pointer-events:auto}
.showcase__dot.is-active{background:var(--brand);border-color:rgba(59,91,255,.4);opacity:1;transform:scale(1.05)}

.showcase__viewport{overflow:hidden}
.showcase__track{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:none;touch-action:pan-x}
.showcase__track::-webkit-scrollbar{display:none}
.showcase__panel{scroll-snap-align:start;min-width:100%;padding:0 0 14px}
.showcase__panelHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px}
.showcase__panelHead h3{margin:0;font-size:16px}
.showcase__panelHead .link{font-weight:900}

.showcase .slider{padding:0 14px}
.showcase .slider__track{padding:10px 0 2px}

/* Compact sections on home */
.home-sections .section{padding:16px 0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.section__head p{margin:6px 0 0}

@media (max-width: 640px){
  .hero__inner{grid-template-columns:1fr}
  .hero__art{display:none}
  .showcase__top{padding:12px}
  .showcase .slider{padding:0 12px}
  .slider{padding-left:14px;padding-right:14px}
}



/* =========================================================
   Home 2026 (Full-width)
   ========================================================= */
.home2026{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--home-bg-from) 0%, var(--home-bg-mid) 45%, var(--home-bg-to) 100%);
}
.home2026__bg{position:absolute;inset:-200px -200px -200px -200px;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 500px at 15% 20%, var(--home-glow-1), rgba(59,91,255,0) 60%),
    radial-gradient(800px 420px at 85% 10%, var(--home-glow-2), rgba(16,185,129,0) 58%),
    radial-gradient(700px 420px at 70% 80%, var(--home-glow-3), rgba(236,72,153,0) 55%),
    linear-gradient(180deg, var(--home-bg-from) 0%, var(--home-bg-mid) 40%, var(--home-bg-to) 100%);
  filter:saturate(1.1);
}

.home2026__hero{position:relative;z-index:1;padding:42px 0 18px;}
.home2026__heroInner{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad);display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch;}
@media (max-width: 920px){.home2026__heroInner{grid-template-columns:1fr;}}

.home2026__heroCopy{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:22px 18px 18px;backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.35);}
.home2026__title{margin:0 0 8px;font-size:clamp(28px,4.2vw,46px);line-height:1.06;color:#f8fafc;letter-spacing:-.02em;}
.home2026__subtitle{margin:0 0 16px;color:rgba(226,232,240,.88);font-size:15px;line-height:1.55;max-width:54ch;}

.home2026__search{margin:0 0 14px;}
.home2026__searchRow{display:flex;align-items:center;gap:10px;background:rgba(15,23,42,.65);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:10px 10px;}
.home2026__searchIcon{color:rgba(226,232,240,.75);margin-left:6px;}
.home2026__searchInput{flex:1;background:transparent;border:0;outline:0;color:#f8fafc;font-size:15px;min-width:0;padding:6px 4px;}
.home2026__searchInput::placeholder{color:rgba(226,232,240,.60);}
.home2026__searchBtn{border:0;cursor:pointer;background:linear-gradient(135deg,#3b5bff,#22c55e);color:#06121f;font-weight:700;border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.home2026__searchBtn:active{transform:translateY(1px);}

.home2026__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.home2026__btn{display:inline-flex;align-items:center;gap:10px;border-radius:14px;padding:10px 12px;border:1px solid rgba(255,255,255,.16);background:rgba(2,6,23,.35);color:#e2e8f0;text-decoration:none;font-weight:700;}
.home2026__btn .icon{opacity:.95;}
.home2026__btn:hover{background:rgba(2,6,23,.55);}
.home2026__btn--primary{background:linear-gradient(135deg, rgba(59,91,255,.92), rgba(34,197,94,.88));border-color:rgba(255,255,255,.08);color:#08111f;}
.home2026__btn--primary:hover{filter:saturate(1.05);}

.home2026__heroSide{display:block;}
.home2026__statGrid{height:100%;display:grid;grid-template-rows:1fr 1fr;gap:12px;}
.home2026__statCard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:18px 16px;backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.28);}
.home2026__statIcon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(59,91,255,.20);border:1px solid rgba(59,91,255,.30);color:#c7d2fe;margin-bottom:10px;}
.home2026__statTitle{color:#f1f5f9;font-weight:800;margin-bottom:6px;}
.home2026__statText{color:rgba(226,232,240,.82);font-size:13px;line-height:1.55;}
@media (max-width: 920px){.home2026__heroSide{display:none;}}

.home2026__live{position:relative;z-index:1;max-width:var(--container-max);margin:10px auto 0;padding:0 var(--container-pad) 6px;}
.home2026__liveHead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:10px;}
.home2026__h2{margin:0;color:#f8fafc;font-size:22px;letter-spacing:-.01em;}
.home2026__muted{margin:4px 0 0;color:rgba(226,232,240,.70);font-size:13px;}
.home2026__liveControls{display:flex;gap:10px;}
.home2026__navBtn{width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(2,6,23,.35);color:#e2e8f0;cursor:pointer;}
.home2026__navBtn:hover{background:rgba(2,6,23,.55);}

.home2026__dots{display:flex;gap:10px;align-items:center;margin:8px 0 12px;}
.home2026__dot{width:44px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(148,163,184,.18);cursor:pointer;}
.home2026__dot.is-active{background:linear-gradient(90deg,#3b5bff,#22c55e);border-color:rgba(255,255,255,.10);}

.home2026__viewport{border-radius:24px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);backdrop-filter:blur(14px);overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.32);}
.home2026__track{display:flex;will-change:transform;transition:transform 420ms cubic-bezier(.2,.9,.2,1);}
.home2026__slide{min-width:100%;padding:14px 14px 18px;}

.home2026__slideHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.home2026__h3{margin:0;color:#f8fafc;font-size:16px;}
.home2026__link{color:#a5b4fc;text-decoration:none;font-weight:700;}
.home2026__link:hover{text-decoration:underline;}

.home2026__empty{padding:14px;border-radius:18px;background:rgba(2,6,23,.30);border:1px solid rgba(255,255,255,.10);color:rgba(226,232,240,.85);}

.home2026__cards{
  display:flex;
  gap:var(--section-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 10px;
}
.home2026__cards::-webkit-scrollbar{height:8px}
.home2026__cards::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18);border-radius:999px}
body.dark .home2026__cards::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}

.home2026__card{scroll-snap-align:start; flex:0 0 280px;}
@media (max-width: 1020px){.home2026__card{flex-basis:260px}}
@media (max-width: 760px){.home2026__card{flex-basis:78vw}}
@media (max-width: 420px){.home2026__card{flex-basis:86vw}}

.home2026__card{display:block;text-decoration:none;color:inherit;border-radius:18px;overflow:hidden;background:rgba(2,6,23,.32);border:1px solid rgba(255,255,255,.10);transition:transform .15s ease, border-color .15s ease, background .15s ease;}
.home2026__card:hover{transform:translateY(-2px);border-color:rgba(165,180,252,.35);background:rgba(2,6,23,.42);}

.home2026__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:rgba(15,23,42,.60);}
.home2026__media img{width:100%;height:100%;object-fit:cover;display:block;}
.home2026__pill{position:absolute;left:10px;top:10px;background:rgba(2,6,23,.70);color:#e2e8f0;border:1px solid rgba(255,255,255,.14);padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;}
.home2026__pill--premium{background:linear-gradient(135deg,#f59e0b,#f97316);color:#0b1220;border-color:rgba(255,255,255,.2);}

.home2026__cardBody{padding:10px 10px 12px;}
.home2026__row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.home2026__cardTitle{font-weight:900;color:#f1f5f9;font-size:13px;line-height:1.25;max-height:2.5em;overflow:hidden;}
.home2026__price{color:#a7f3d0;font-weight:900;white-space:nowrap;}
.home2026__meta{margin-top:6px;color:rgba(226,232,240,.72);font-size:12px;}
.home2026__excerpt{margin-top:6px;color:rgba(226,232,240,.78);font-size:12px;line-height:1.45;max-height:4.4em;overflow:hidden;}

.home2026__cats{position:relative;z-index:1;max-width:var(--container-max);margin:18px auto 34px;padding:0 var(--container-pad);}
.home2026__catsInner{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:24px;padding:16px 14px 12px;backdrop-filter:blur(12px);}
.home2026__catsHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}

/* Mobile polish: avoid any horizontal artefacts */
html, body{overflow-x:hidden;}

/* =========================================================
   2026 Premium Polish (Global)
   - modern cards, filters, forms, typography
   - upgrades look & feel without changing backend
   ========================================================= */

/* Better focus ring */
:focus-visible{outline:3px solid rgba(59,91,255,.35); outline-offset:2px; border-radius:12px}

/* Headings */
.page-title, h1{font-size:34px;line-height:1.15;margin:0 0 10px;letter-spacing:-0.03em}
@media (max-width:720px){.page-title,h1{font-size:28px}}

h2{font-size:22px;line-height:1.25;letter-spacing:-0.02em;margin:0 0 10px}

/* Buttons */
.btn, button, .button{
  box-shadow:0 10px 30px rgba(59,91,255,.22);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover, button:hover, .button:hover{transform:translateY(-1px);filter:brightness(1.02);box-shadow:0 14px 40px rgba(59,91,255,.25)}
.btn:active, button:active, .button:active{transform:translateY(0)}

.btn.secondary, .btn--secondary{
  background:rgba(59,91,255,.12);
  color:var(--brand);
  border-color:rgba(59,91,255,.18);
  box-shadow:none;
}

/* Inputs */
input, select, textarea{
  font-family:inherit;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 12px;
  background:rgba(255,255,255,.9);
  color:var(--text);
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
body.dark input, body.dark select, body.dark textarea{background:rgba(15,23,42,.65);border-color:rgba(255,255,255,.10)}
input:focus, select:focus, textarea:focus{outline:none;border-color:rgba(59,91,255,.55);box-shadow:0 0 0 6px rgba(59,91,255,.12)}

/* Filter grid (listings/services/blog search) */
.filter-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:10px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  margin:10px 0 16px;
}
.filter-grid label{font-size:12px;font-weight:800;color:var(--muted);align-self:end}
.filter-grid button{grid-column:span 2;align-self:end}
@media (max-width: 920px){
  .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-grid button{grid-column:span 2}
}
.saved-search-form{
  display:grid;
  grid-template-columns:2fr 1fr 1fr auto;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:16px;
  border:1px dashed var(--border);
  background:rgba(255,255,255,.75);
  margin:0 0 18px;
}
.saved-search-form{color:var(--text)}
body.dark .saved-search-form{background:rgba(15,23,42,.55);border-color:rgba(255,255,255,.12)}
.saved-search-title{font-size:12px;font-weight:800;color:var(--muted);grid-column:1/-1}
.saved-search-form input{grid-column:1/3}
.saved-search-form button{justify-self:start}
.saved-search-hint{font-size:12px;margin:0 0 16px}
@media (max-width: 920px){
  .saved-search-form{grid-template-columns:1fr}
  .saved-search-form input{grid-column:auto}
  .saved-search-form button{justify-self:stretch}
}
.saved-searches{display:flex;flex-direction:column;gap:12px;margin:12px 0 24px}
.saved-search-item{border:1px solid var(--border);border-radius:16px;padding:14px;background:rgba(255,255,255,.85);box-shadow:var(--shadow)}
body.dark .saved-search-item{background:rgba(15,23,42,.6);border-color:rgba(255,255,255,.1)}
.saved-search-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.saved-search-meta{color:var(--muted);font-size:12px}
.saved-search-filters{color:var(--muted);font-size:12px;margin-top:6px}
.saved-search-dates{color:var(--muted);font-size:12px;margin-top:6px}
.saved-search-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.inline-form{display:inline-block}

/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width: 1020px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width: 760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 420px){.cards{grid-template-columns:1fr}}

.card{
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
  border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(15,23,42,.08);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
body.dark .card{background:linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.75));border-color:rgba(255,255,255,.08);box-shadow:0 22px 60px rgba(0,0,0,.35)}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 60px rgba(15,23,42,.12);border-color:rgba(59,91,255,.18)}

.card a{display:block;color:inherit;text-decoration:none}
.card .thumb{aspect-ratio:16/10;object-fit:cover;width:100%;display:block;background:#0b1220}
.card h3{margin:10px 12px 0;font-size:14px;line-height:1.25;font-weight:900;min-height:2.5em;overflow:hidden}
.card .price{margin:6px 12px 0;font-weight:900;color:var(--brand)}
.card .views{margin:6px 12px 12px;color:var(--muted);font-size:12px}
.card .vip{position:absolute;left:12px;top:12px;background:rgba(15,23,42,.75);color:#fff;padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;border:1px solid rgba(255,255,255,.12)}
.card{position:relative}
.vip-border{border-color:rgba(59,91,255,.45)}

/* Boxes */
.box, .panel{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
}
body.dark .box, body.dark .panel{background:rgba(15,23,42,.65);border-color:rgba(255,255,255,.08)}

/* Pagination */
.pagination{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin:18px 0}
.pagination a, .pagination span{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.9);
  font-weight:800;
}
.pagination a:hover{border-color:rgba(59,91,255,.22)}
.pagination .active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Footer polish */
footer{
  margin-top:30px;
  padding:22px 0;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(10px);
}
body.dark footer{background:rgba(15,23,42,.55)}


/* =========================================================
   PRO UI KIT (2026) – consistency layer for legacy pages
   ========================================================= */
:root{
  --glass: rgba(255,255,255,.7);
  --glass2: rgba(255,255,255,.55);
  --ring: rgba(59,91,255,.35);
  --radius2: 18px;
}

body.dark{
  --glass: rgba(15,23,42,.70);
  --glass2: rgba(15,23,42,.55);
  --ring: rgba(59,91,255,.35);
}

/* Universal card/panel look */
.card, .panel, .box, .widget, .tile, .well{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
}

/* Inputs (covers bootstrap-ish + plain) */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"],
input[type="search"], input[type="date"], input[type="time"], input[type="file"], select, textarea,
.form-control, .input, .select, .textarea{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  outline:none;
}
textarea{min-height:120px;resize:vertical}
input:focus, select:focus, textarea:focus, .form-control:focus{
  border-color:rgba(59,91,255,.45);
  box-shadow:0 0 0 4px var(--ring);
}

/* Buttons */
.btn, button, .button, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning{
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover, button:hover, .button:hover{filter:brightness(1.03)}
.btn:active, button:active, .button:active{transform:translateY(1px)}

/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0}
table th, table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
table th{font-weight:800;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
table tr:last-child td{border-bottom:0}
.table, .table-responsive{overflow:auto;border-radius:var(--radius2);border:1px solid var(--border);background:var(--card)}

/* Alerts */
.alert, .notice, .flash{padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--glass)}
.alert-success{border-color:rgba(22,163,74,.25);background:rgba(22,163,74,.10)}
.alert-danger, .alert-error{border-color:rgba(220,38,38,.25);background:rgba(220,38,38,.10)}
.alert-warning{border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.12)}

/* Pagination (fallback) */
.pagination{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin:18px 0}
.pagination a, .pagination span{
  padding:8px 12px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);font-weight:800;color:var(--text);text-decoration:none
}
.pagination a:hover{border-color:rgba(59,91,255,.35)}
.pagination .active, .pagination span.current{background:rgba(59,91,255,.10);border-color:rgba(59,91,255,.35);color:var(--brand)}

/* Listing grid responsiveness */
.cards{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 980px){ .cards{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 640px){ .cards{grid-template-columns:1fr} }

/* Category icon: modern SVG */
.cat__icon{background:linear-gradient(180deg, rgba(59,91,255,.10), rgba(59,91,255,.06));border-color:rgba(59,91,255,.20)}
.cat__icon .cat-ico--svg{width:22px;height:22px;color:var(--brand)}
.cat:hover .cat__icon{border-color:rgba(59,91,255,.35);box-shadow:0 10px 22px rgba(59,91,255,.12)}

/* Ensure legacy sections don't look “1990s” */
h1,h2,h3{letter-spacing:-.3px}
hr{border:0;border-top:1px solid var(--border);margin:18px 0}

/* ===============================
   Addictive UI v1 (2026)
   =============================== */
:root{ --mbn-h:64px; }

/* Mobile bottom nav */
.mobile-bottom-nav{ display:none; }
@media (max-width: 920px){
  body{ padding-bottom: calc(var(--mbn-h) + 12px); }
  .mobile-bottom-nav{
    display:flex;
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    height:var(--mbn-h);
    z-index: 9999;
    border-radius: 22px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 18px 55px rgba(0,0,0,.18);
    padding: 8px;
    gap: 6px;
    align-items:stretch;
    transition: transform .22s ease, opacity .22s ease;
  }
  [data-theme="dark"] .mobile-bottom-nav{
    background: rgba(18,18,22,.72);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 18px 55px rgba(0,0,0,.35);
  }
  .mobile-bottom-nav.is-hidden{ transform: translate3d(0, 110%, 0); opacity: .0; }
  .mbn__item{
    position:relative;
    flex: 1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color: var(--text, #111827);
    font-weight: 700;
    border-radius: 16px;
    gap: 4px;
    transition: transform .12s ease, background .18s ease, color .18s ease;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
  }
  [data-theme="dark"] .mbn__item{ color: rgba(255,255,255,.92); }
  .mbn__icon{ font-size: 18px; line-height: 1; }
  .mbn__label{ font-size: 11px; line-height: 1; opacity: .86; }
  .mbn__item:active{ transform: scale(.98); }
  .mbn__item.is-active{
    background: rgba(17,24,39,.10);
  }
  [data-theme="dark"] .mbn__item.is-active{ background: rgba(255,255,255,.10); }

  .mbn__item--primary{
    background: linear-gradient(135deg, rgba(59,91,255,.95), rgba(16,185,129,.92));
    color: white;
  }
  .mbn__item--primary .mbn__label{ opacity: 1; }
  .mbn__badge{
    position:absolute;
    top: 8px;
    right: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color:#fff;
    font-size: 11px;
    font-weight: 800;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 8px 18px rgba(239,68,68,.35);
  }
}

/* Quick actions (card overlays) */
.quick-actions{
  position:absolute;
  top: 10px;
  right: 10px;
  display:flex;
  gap: 8px;
  z-index: 2;
}
.quick-btn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .quick-btn{
  background: rgba(18,18,22,.65);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}
.quick-btn:active{ transform: scale(.97); }
.quick-btn.is-copied{ transform: scale(.97); border-color: rgba(16,185,129,.6); }

/* Image fade in */
img[loading="lazy"], img[data-fadein]{
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .35s ease, transform .45s ease;
}
img.is-loaded{ opacity: 1; transform: translate3d(0,0,0); }

/* Auto carousel polish */
.is-auto-carousel{ scroll-snap-type: x proximity; }
.is-auto-carousel > *{ scroll-snap-align: start; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .mobile-bottom-nav, .mbn__item, .quick-btn, img[loading="lazy"], img[data-fadein]{
    transition: none !important;
  }
}

/* =========================================================
   Step 2: Premium Home + Header polish (2026)
   ========================================================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1200;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.topbar .wrap{
  padding: 14px 0;
}
.main-nav a{
  font-weight: 700;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 10px;
}
.main-nav a:hover{
  background: rgba(59,91,255,.08);
  text-decoration: none;
}
.nav-search{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px;
}
.nav-search input{
  border: 0;
  background: transparent;
  padding: 6px 8px;
}
.nav-search button{
  background: var(--brand);
  color: #fff;
  border: 0;
}

body.dark[data-route="home/index"] .topbar{
  background: rgba(8,12,22,.55);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(2,6,23,.35);
}
body.dark[data-route="home/index"] .main-nav a{
  color: rgba(226,232,240,.92);
}
body.dark[data-route="home/index"] .main-nav a:hover{
  background: rgba(255,255,255,.08);
  color: #fff;
}
body.dark[data-route="home/index"] .lang-switcher a{
  background: rgba(255,255,255,.08);
  color: rgba(226,232,240,.95);
  border-color: rgba(255,255,255,.12);
}
body.dark[data-route="home/index"] .lang-switcher a.active{
  background: linear-gradient(135deg,#3b5bff,#22c55e);
  color: #08111f;
}
body.dark[data-route="home/index"] .theme-toggle{
  background: rgba(255,255,255,.08);
  color: rgba(226,232,240,.9);
  border-color: rgba(255,255,255,.12);
}
body.dark[data-route="home/index"] .nav-search{
  background: rgba(2,6,23,.35);
  border-color: rgba(255,255,255,.12);
}
body.dark[data-route="home/index"] .nav-search input{
  color: #f8fafc;
}
body:not(.dark)[data-route="home/index"] .topbar{
  background: rgba(255,248,238,.85);
  border-bottom-color: rgba(88,63,37,.16);
  box-shadow: 0 12px 28px rgba(88,63,37,.12);
}
body:not(.dark)[data-route="home/index"] .main-nav a{
  color: var(--text);
}
body:not(.dark)[data-route="home/index"] .main-nav a:hover{
  background: rgba(183,121,31,.12);
  color: var(--text);
}
body:not(.dark)[data-route="home/index"] .lang-switcher a{
  background: rgba(255,255,255,.8);
  color: var(--text);
  border-color: rgba(88,63,37,.14);
}
body:not(.dark)[data-route="home/index"] .lang-switcher a.active{
  background: linear-gradient(135deg,#f6c453,#b7791f);
  color: #2b1a07;
}
body:not(.dark)[data-route="home/index"] .theme-toggle{
  background: rgba(255,255,255,.8);
  color: var(--text);
  border-color: rgba(88,63,37,.14);
}
body:not(.dark)[data-route="home/index"] .nav-search{
  background: rgba(255,255,255,.92);
  border-color: rgba(88,63,37,.14);
}
body:not(.dark)[data-route="home/index"] .nav-search input{
  color: #1a1206;
}

.home2026__hero{
  padding: 56px 0 20px;
}
.home2026__heroCopy{
  position: relative;
  padding: 26px 22px 22px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(15,23,42,.82), rgba(15,23,42,.68));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 28px 80px rgba(2,6,23,.45);
}
.home2026__heroCopy::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  padding:1px;
  background: linear-gradient(135deg, rgba(59,91,255,.65), rgba(34,197,94,.45), rgba(236,72,153,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.home2026__title{
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.04;
}
.home2026__title::after{
  content:"";
  display:block;
  width: 92px;
  height: 6px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg,#3b5bff,#22c55e);
}
.home2026__subtitle{
  font-size: 16px;
  color: rgba(226,232,240,.86);
}
.home2026__searchRow{
  background: rgba(2,6,23,.52);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 14px 36px rgba(2,6,23,.35);
}
.home2026__searchBtn{
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: 0 12px 30px rgba(34,197,94,.25);
}
.home2026__cta .home2026__btn{
  border-radius: 999px;
  padding: 10px 16px;
  backdrop-filter: blur(14px);
}
.home2026__btn--primary{
  box-shadow: 0 16px 40px rgba(59,91,255,.35);
}
.home2026__statCard{
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(15,23,42,.86), rgba(15,23,42,.65));
}
.home2026__statIcon{
  background: rgba(59,91,255,.25);
  box-shadow: inset 0 0 0 1px rgba(59,91,255,.35);
}

@media (max-width: 980px){
  .topbar .wrap{padding: 10px 0;}
  .main-nav{width:100%;order:3;gap:8px}
  .nav-search{width:100%}
  .nav-search input{max-width:none;flex:1}
}
@media (max-width: 720px){
  .home2026__hero{padding: 46px 0 18px;}
  .home2026__heroCopy{padding: 20px 16px;}
  .home2026__searchRow{flex-wrap:wrap}
  .home2026__searchBtn{width:100%;justify-content:center}
  .home2026__cta{gap:8px}
  .home2026__btn{width:100%;justify-content:center}
}

/*
  Step 3: Listing + Service cards and grid polish (2026)
*/
.cards,
.listing-grid,
.listings-grid,
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px;
  align-items:stretch;
}
.cards{margin-top:18px;}

.cards .card,
.listing-card,
.service-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px 16px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(148,163,184,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
body.dark .cards .card,
body.dark .listing-card,
body.dark .service-card{
  background:rgba(15,23,42,.82);
  border-color:rgba(148,163,184,.18);
  box-shadow:0 18px 40px rgba(2,6,23,.45);
}
.cards .card:hover,
.listing-card:hover,
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-strong);
  border-color:rgba(59,91,255,.42);
}
.cards .card:focus-within,
.listing-card:focus-within,
.service-card:focus-within{
  border-color:rgba(59,91,255,.6);
  box-shadow:0 0 0 2px rgba(59,91,255,.3), var(--shadow-strong);
}

.cards .card > a,
.listing-card > a,
.service-card > a,
a.listing-card,
a.service-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  color:inherit;
  text-decoration:none;
  min-height:100%;
}

.cards .card .thumb,
.listing-card img,
.service-card img,
.listing-card .thumb,
.service-card .thumb{
  display:block;
  width:calc(100% + 32px);
  margin:-14px -16px 12px;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:calc(var(--radius-lg) - 2px);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.05);
}
body.dark .cards .card .thumb,
body.dark .listing-card img,
body.dark .service-card img,
body.dark .listing-card .thumb,
body.dark .service-card .thumb{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

.listing-content,
.service-content{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.cards .card h3,
.listing-card h3,
.service-card h3,
.listing-title,
.service-title{
  margin:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
}
.listing-card h3 a,
.service-card h3 a{
  color:inherit;
  text-decoration:none;
}

.cards .card .price,
.listing-card .price,
.service-card .price,
.price-tag{
  font-weight:700;
  color:#0f172a;
}
body.dark .cards .card .price,
body.dark .listing-card .price,
body.dark .service-card .price,
body.dark .price-tag{
  color:#e2e8f0;
}

.service-meta,
.listing-meta,
.cards .card .views{
  font-size:12px;
  color:var(--muted);
}
.listing-card p,
.service-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.cards .card .vip{
  position:absolute;
  top:12px;
  left:12px;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:linear-gradient(120deg, rgba(59,91,255,.95), rgba(34,197,94,.9));
  color:#0b1220;
  box-shadow:0 10px 24px rgba(59,91,255,.35);
  border:1px solid rgba(255,255,255,.35);
}
.vip-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:11px;
  background:rgba(59,91,255,.14);
  color:#2a48d9;
  border:1px solid rgba(59,91,255,.25);
}
body.dark .vip-badge{
  color:#c7d2fe;
  background:rgba(59,91,255,.2);
  border-color:rgba(59,91,255,.45);
}
.vip-border{
  border-color:rgba(59,91,255,.5);
  box-shadow:0 20px 44px rgba(59,91,255,.2);
}
body.dark .vip-border{
  border-color:rgba(129,140,248,.6);
}

.filter-grid{
  display:grid;
  grid-template-columns:140px minmax(180px, 1fr) 140px minmax(180px, 1fr);
  gap:14px 18px;
  padding:14px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(148,163,184,.28);
  background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.88));
  box-shadow:var(--shadow-soft);
  align-items:end;
}
body.dark .filter-grid{
  background:rgba(15,23,42,.7);
  border-color:rgba(148,163,184,.2);
}
.filter-grid label{
  text-transform:uppercase;
  letter-spacing:.6px;
}
.filter-grid button{
  grid-column:1 / -1;
}

.sponsor-card{
  border-radius:var(--radius-lg);
  border:1px solid rgba(245,158,11,.3);
  background:linear-gradient(135deg, rgba(253,230,138,.35), rgba(251,191,36,.14));
  box-shadow:0 16px 36px rgba(217,119,6,.18);
}
body.dark .sponsor-card{
  background:rgba(69,26,3,.45);
  border-color:rgba(245,158,11,.35);
}
.sponsor-badge{
  background:rgba(245,158,11,.25);
  color:#92400e;
}
body.dark .sponsor-badge{
  color:#fef3c7;
}
.sponsor-cta{
  text-decoration:none;
}

@media (max-width: 900px){
  .cards,
  .listing-grid,
  .listings-grid,
  .services-grid{
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  }
  .filter-grid{
    grid-template-columns:140px minmax(200px, 1fr);
  }
}
@media (max-width: 640px){
  .cards,
  .listing-grid,
  .listings-grid,
  .services-grid{
    grid-template-columns:1fr;
  }
  .filter-grid{
    padding:12px;
    grid-template-columns:1fr;
  }
}

/*
  Step 5: Auth + Account + Profile + Chat polish (2026)
*/
body[data-route^="auth/"]{
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(59,91,255,.18), transparent 60%),
    radial-gradient(700px 420px at 90% 0%, rgba(34,197,94,.16), transparent 55%),
    var(--bg-soft);
}
body[data-route^="auth/"] main.container{
  max-width:520px;
  margin:36px auto 60px;
  padding:24px 22px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  border:1px solid rgba(148,163,184,.28);
  box-shadow:var(--shadow-strong);
}
body[data-route^="auth/"] h2{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:26px;
}
body[data-route^="auth/"] form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
body[data-route^="auth/"] form button{
  border:0;
  border-radius:999px;
  padding:12px 16px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg, rgba(59,91,255,.95), rgba(34,197,94,.88));
  box-shadow:0 14px 32px rgba(59,91,255,.25);
  cursor:pointer;
}
body[data-route^="auth/"] .social-login{
  margin-top:18px;
  padding-top:14px;
  border-top:1px dashed rgba(148,163,184,.35);
}
body[data-route^="auth/"] .btn-social{
  border-radius:999px;
  padding:10px 14px;
  background:#fff;
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}

body[data-route^="account/"] .account-header{
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,250,252,.92));
  border:1px solid rgba(148,163,184,.25);
  box-shadow:var(--shadow-soft);
}
body[data-route^="account/"] .account-header .actions .button{
  border-radius:999px;
  padding:8px 14px;
}
body[data-route^="account/"] .account-section{
  margin-top:18px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
body[data-route^="account/"] .form{
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
body[data-route^="account/"] .inline-check{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(148,163,184,.12);
}
body[data-route^="account/"] .verify-card{
  border-radius:16px;
  background:linear-gradient(180deg, rgba(248,250,252,.92), rgba(255,255,255,.96));
  border:1px solid rgba(148,163,184,.25);
  box-shadow:var(--shadow-soft);
}
body[data-route="account/statistics"] .stats-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
  margin:14px 0 20px;
}
body[data-route="account/statistics"] .stats-summary .stat-card{
  display:flex;
  gap:12px;
  align-items:center;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
body[data-route="account/statistics"] .stat-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(59,91,255,.12);
  font-size:20px;
}
body[data-route="account/statistics"] .status-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:rgba(148,163,184,.12);
}
body[data-route="account/wallet"] .wallet-balance{
  border-radius:18px;
  background:linear-gradient(135deg, rgba(15,23,42,.04), rgba(59,91,255,.08));
}
body[data-route="account/wallet"] .pagination-center{
  margin-top:16px;
}
body[data-route="account/manual_payments"] .hero-note{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(59,91,255,.12);
  border:1px solid rgba(59,91,255,.28);
}

body[data-route="account/notifications"] .notifications-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
body[data-route="account/notifications"] .notification-item{
  display:flex;
  gap:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
body[data-route="account/notifications"] .notification-item.unread{
  border-color:rgba(59,91,255,.35);
  box-shadow:0 12px 30px rgba(59,91,255,.18);
}
body[data-route="account/notifications"] .notification-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(59,91,255,.12);
  font-size:20px;
}
body[data-route="account/notifications"] .notification-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-size:12px;
  color:var(--muted);
}
body[data-route="account/notifications"] .btn-notification-link,
body[data-route="account/notifications"] .btn-delete-notification,
body[data-route="account/notifications"] .btn-mark-all-read{
  border:1px solid rgba(148,163,184,.35);
  background:#fff;
  border-radius:999px;
  padding:6px 12px;
  font-weight:700;
}
body[data-route="account/notifications"] .btn-delete-notification{
  color:var(--danger);
  border-color:rgba(220,38,38,.25);
}

body[data-route^="favorite/"] .filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:8px;
  border-radius:999px;
  background:rgba(148,163,184,.12);
  border:1px solid rgba(148,163,184,.25);
  margin-bottom:16px;
}
body[data-route^="favorite/"] .filters a{
  padding:6px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  color:var(--muted);
  border:1px solid transparent;
}
body[data-route^="favorite/"] .filters a.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
body[data-route="favorite/index"] .favorites-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}
body[data-route="favorite/index"] .favorite-item{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
body[data-route="favorite/index"] .favorite-item img{
  width:100%;
  height:160px;
  object-fit:cover;
}
body[data-route="favorite/index"] .favorite-content{
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
body[data-route="favorite/index"] .item-type{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  text-transform:uppercase;
}
body[data-route="favorite/index"] .btn-remove-favorite{
  align-self:flex-start;
  border:1px solid rgba(220,38,38,.25);
  color:var(--danger);
  background:#fff;
  border-radius:999px;
  padding:6px 12px;
  font-weight:700;
  cursor:pointer;
}

body[data-route="favorite/alerts"] .alerts-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
body[data-route="favorite/alerts"] .alert-item{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
body[data-route="favorite/alerts"] .alert-image img,
body[data-route="favorite/alerts"] .alert-image .no-image{
  width:100%;
  height:120px;
  border-radius:12px;
  object-fit:cover;
  display:grid;
  place-items:center;
  background:rgba(148,163,184,.12);
}
body[data-route="favorite/alerts"] .alert-actions .btn{
  border-radius:999px;
}
body[data-route="favorite/alerts"] .price-drop{
  color:#10b981;
  font-weight:800;
}

body[data-route^="chat/"] .chat-header{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
body[data-route^="chat/"] .chat-box{
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.9));
}
body[data-route^="chat/"] .msg-text{
  background:rgba(15,23,42,.04);
  border-radius:14px;
}
body[data-route^="chat/"] .message-item.me .msg-text{
  background:linear-gradient(135deg, rgba(59,91,255,.18), rgba(34,197,94,.18));
  border-color:rgba(59,91,255,.25);
}
body[data-route^="chat/"] .btn-send{
  border-radius:999px;
  font-weight:800;
  box-shadow:0 12px 28px rgba(59,91,255,.25);
}

body[data-route="user/profile"] .user-profile-page{
  display:flex;
  flex-direction:column;
  gap:18px;
}
body[data-route="user/profile"] .profile-header{
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  border:1px solid rgba(148,163,184,.25);
  box-shadow:var(--shadow-soft);
}
body[data-route="user/profile"] .verification-badges{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
body[data-route="user/profile"] .verification-badges .badge{
  background:rgba(16,185,129,.14);
  border-color:rgba(16,185,129,.35);
  color:#065f46;
}
body[data-route="user/profile"] .review-item{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
body[data-route="user/profile"] .reviewer-avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(148,163,184,.35);
}

@media (max-width: 720px){
  body[data-route^="auth/"] main.container{
    margin:24px auto 40px;
    padding:20px 16px;
  }
  body[data-route="favorite/alerts"] .alert-item{
    grid-template-columns:1fr;
  }
}

/*
  Step 6: Listing + Service details and forms (2026)
*/
body[data-route="listings/show"] .listing-header,
body[data-route="services/show"] .service-header{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  box-shadow:var(--shadow-soft);
}
body[data-route="listings/show"] .listing-header h1,
body[data-route="services/show"] .service-header h1{
  margin:0;
  font-size:clamp(22px, 2.6vw, 32px);
}
body[data-route="listings/show"] .listing-actions,
body[data-route="services/show"] .service-header{
  gap:10px;
}
body[data-route="listings/show"] .btn-favorite,
body[data-route="listings/show"] .btn-share,
body[data-route="services/show"] .btn-favorite{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  padding:8px 14px;
  background:#fff;
  font-weight:800;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
body[data-route="listings/show"] .btn-favorite.active,
body[data-route="services/show"] .btn-favorite.active{
  background:linear-gradient(135deg, rgba(59,91,255,.18), rgba(34,197,94,.18));
  border-color:rgba(59,91,255,.4);
}
body[data-route="listings/show"] .listing-detail{
  grid-template-columns:minmax(0,1fr) 320px;
  gap:20px;
}
body[data-route="listings/show"] .listing-detail .left .box,
body[data-route="listings/show"] .listing-detail .left .listing-gallery{
  margin-bottom:16px;
}
body[data-route="listings/show"] .listing-detail .right .box{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.28);
  box-shadow:var(--shadow-soft);
}
body[data-route="listings/show"] .listing-gallery .gallery-main{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.25);
  box-shadow:var(--shadow-soft);
}
body[data-route="listings/show"] .listing-main-image{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}
body[data-route="listings/show"] .gallery-thumbs{
  gap:8px;
}
body[data-route="listings/show"] .gallery-thumbs .thumb{
  width:96px;
  height:72px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
}
body[data-route="listings/show"] .badge-featured,
body[data-route="listings/show"] .badge-boosted{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}
body[data-route="listings/show"] .badge-featured{
  background:rgba(245,158,11,.18);
  border:1px solid rgba(245,158,11,.35);
  color:#92400e;
}
body[data-route="listings/show"] .badge-boosted{
  background:rgba(59,130,246,.16);
  border:1px solid rgba(59,130,246,.35);
  color:#1d4ed8;
}
body[data-route="listings/show"] .btn-active{
  background:linear-gradient(135deg, rgba(59,91,255,.18), rgba(34,197,94,.18));
  border-color:rgba(59,91,255,.4);
}
body[data-route="listings/show"] .review{
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  margin-top:10px;
}
body[data-route="listings/show"] .qa-section .question-item{
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  margin-top:10px;
}
body[data-route="listings/show"] .qa-section .answer-item{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(148,163,184,.35);
}
body[data-route="listings/show"] .qa-section .asker-avatar{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  display:grid;
  place-items:center;
  font-weight:800;
}
body[data-route="listings/show"] .related-listings{
  margin-top:18px;
}
body[data-route="listings/show"] .related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
}
body[data-route="listings/show"] .related-card{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  overflow:hidden;
  background:var(--card);
  box-shadow:var(--shadow-soft);
  text-decoration:none;
  color:inherit;
}
body[data-route="listings/show"] .related-card .thumb{
  border-radius:0;
  border:0;
  height:160px;
  overflow:hidden;
}
body[data-route="listings/show"] .related-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
body[data-route="listings/show"] .related-card .info{
  padding:12px;
}
body[data-route="listings/show"] .vip-upgrade{
  background:linear-gradient(135deg, rgba(59,91,255,.12), rgba(34,197,94,.12));
  border-color:rgba(59,91,255,.35);
}
body[data-route="listings/show"] .boost-upgrade{
  background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(14,165,233,.12));
  border-color:rgba(59,130,246,.35);
}

body[data-route="listings/create"] form.box,
body[data-route="services/create"] form{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  box-shadow:var(--shadow-soft);
}
body[data-route="listings/create"] .form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}
body[data-route="listings/create"] .form-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed rgba(148,163,184,.35);
  background:rgba(148,163,184,.12);
  font-size:13px;
  color:var(--muted);
}
body[data-route="listings/create"] .form-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
body[data-route="listings/create"] .form-actions .button,
body[data-route="services/create"] button{
  border-radius:999px;
  padding:10px 18px;
  border:0;
  color:#fff;
  background:linear-gradient(135deg, rgba(59,91,255,.95), rgba(34,197,94,.88));
  box-shadow:0 12px 28px rgba(59,91,255,.25);
  cursor:pointer;
  font-weight:800;
}
body[data-route="listings/create"] .form-actions .form-progress,
.form-actions .form-progress{
  margin-left:16px;
  min-width:200px;
  font-size:13px;
  line-height:1.4;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}
.form-progress::before{
  content:'';
  width:10px;
  height:10px;
  border-radius:50%;
  border:2px solid rgba(59,91,255,.4);
  border-top-color:rgba(59,91,255,1);
  animation:spin-fast 1s linear infinite;
  display:inline-block;
  opacity:0;
  transition:opacity .2s ease;
}
.form-progress[data-active='1']::before{
  opacity:1;
}
.button.is-progressing{
  position:relative;
  overflow:hidden;
  pointer-events:none;
}
.button.is-progressing::after{
  content:'';
  position:absolute;
  inset:inherit;
  top:50%;
  left:50%;
  width:26px;
  height:26px;
  margin:-13px 0 0 -13px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:spin-fast 1s linear infinite;
}

@keyframes spin-fast{
  to{transform:rotate(360deg);}
}
body[data-route="listings/add_images"] .gallery-preview{
  margin-top:18px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
body[data-route="listings/add_images"] .gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:12px;
  margin-top:12px;
}
body[data-route="listings/add_images"] .gallery-item{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.25);
  background:#fff;
}
body[data-route="listings/add_images"] .gallery-item img{
  width:100%;
  height:120px;
  object-fit:cover;
}
body[data-route="listings/add_images"] .gallery-label{
  position:absolute;
  left:8px;
  bottom:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.75);
  color:#fff;
  font-size:11px;
  font-weight:800;
}

body[data-route="services/show"] .service-meta{
  font-size:13px;
  color:var(--muted);
}
body[data-route="services/show"] .service-cover img{
  width:100%;
  height:auto;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  box-shadow:var(--shadow-soft);
}
body[data-route="services/show"] .service-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));
  gap:10px;
}
body[data-route="services/show"] .service-gallery img{
  width:100%;
  height:90px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
}
body[data-route="services/show"] .service-rating{
  border-radius:14px;
  border:1px solid rgba(34,197,94,.3);
  background:rgba(34,197,94,.08);
}
body[data-route="services/show"] .packages-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin-top:12px;
}
body[data-route="services/show"] .package-card{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  padding:14px;
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
body[data-route="services/show"] .package-card--popular{
  border-color:rgba(59,91,255,.4);
  box-shadow:0 16px 36px rgba(59,91,255,.18);
}
body[data-route="services/show"] .package-popular-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:linear-gradient(135deg, rgba(59,91,255,.85), rgba(34,197,94,.8));
  color:#0b1220;
}
body[data-route="services/show"] .service-booking,
body[data-route="services/show"] .service-form--card{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
body[data-route="services/show"] .service-form{
  gap:12px;
}
body[data-route="services/show"] .questions-list .question-item,
body[data-route="services/show"] .service-reviews .review-item{
  border-radius:14px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
}
body[data-route="services/show"] .service-auth-hint{
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed rgba(148,163,184,.35);
  background:rgba(148,163,184,.12);
}

@media (max-width: 980px){
  body[data-route="listings/show"] .listing-detail{
    grid-template-columns:1fr;
  }
  body[data-route="listings/create"] .form-grid{
    grid-template-columns:1fr;
  }
}

/*
  Step 7: Blog, Search, Static pages (2026)
*/
body[data-route="blog/index"] .blog-page{
  gap:24px;
}
body[data-route="blog/index"] .blog-filters a{
  border-radius:999px;
  padding:6px 12px;
  background:#fff;
  border:1px solid rgba(148,163,184,.3);
}
body[data-route="blog/index"] .featured-card,
body[data-route="blog/index"] .post-card{
  border-radius:18px;
  border:1px solid rgba(148,163,184,.25);
  box-shadow:var(--shadow-soft);
}
body[data-route="blog/index"] .featured-image img,
body[data-route="blog/index"] .post-image img{
  height:200px;
}
body[data-route="blog/index"] .featured-badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.75);
  color:#fff;
  font-size:11px;
  font-weight:800;
}
body[data-route="blog/index"] .sidebar-widget{
  border-radius:16px;
  box-shadow:var(--shadow-soft);
}
body[data-route="blog/index"] .sidebar-search button{
  border-radius:12px;
}
body[data-route="blog/show"] .blog-post{
  border-radius:20px;
  border:1px solid rgba(148,163,184,.25);
  box-shadow:var(--shadow-soft);
  padding:18px;
}
body[data-route="blog/show"] .post-header h1{
  margin:0 0 8px;
  font-size:clamp(26px, 3vw, 36px);
}
body[data-route="blog/show"] .post-actions .btn-like,
body[data-route="blog/show"] .post-actions .btn-share{
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  border:1px solid rgba(148,163,184,.35);
  font-weight:700;
}
body[data-route="blog/show"] .post-share a{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.3);
  text-decoration:none;
}
body[data-route="blog/show"] .related-posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
}
body[data-route="blog/show"] .related-post-card{
  border-radius:16px;
  box-shadow:var(--shadow-soft);
}

body[data-route="search/index"] .search-form{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  box-shadow:var(--shadow-soft);
}
body[data-route="search/index"] .search-input,
body[data-route="search/index"] .search-type{
  border-radius:999px;
}
body[data-route="search/index"] .btn-search{
  border-radius:999px;
}
body[data-route="search/index"] .search-tips{
  border-radius:16px;
  background:rgba(148,163,184,.1);
}

body[data-route="faq/index"] .box,
body[data-route="contact/index"] .box,
body[data-route^="pages/"] .page-box{
  border-radius:18px;
  box-shadow:var(--shadow-soft);
}
body[data-route="faq/index"] .faq-item{
  border-radius:16px;
  background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));
}
body[data-route="faq/index"] .faq-filter{
  border-radius:999px;
}
body[data-route="contact/index"] .contact-form{
  max-width:680px;
}
body[data-route="contact/index"] .contact-info{
  border-radius:16px;
  background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));
}
body[data-route="contact/index"] .contact-box{
  padding:24px;
}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(260px, 360px);
  gap:24px;
  align-items:start;
}
.contact-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-card{
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));
  padding:16px;
  box-shadow:var(--shadow-soft);
}
.contact-form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}
.contact-form-actions .muted{
  font-size:13px;
}

@media (max-width: 900px){
  .contact-grid{
    grid-template-columns:1fr;
  }
}
body[data-route^="pages/"] .page-callout{
  border-radius:16px;
  border-left:4px solid rgba(59,91,255,.6);
}

@media (max-width: 720px){
  body[data-route="blog/index"] .featured-image img,
  body[data-route="blog/index"] .post-image img{
    height:180px;
  }
}

/*
  Step 10: Home clarity + premium icons (2026)
*/
.home2026__latest{
  position:relative;
  z-index:1;
  max-width:var(--container-max);
  margin:0 auto 8px;
  padding:0 var(--container-pad) 6px;
}
.home2026__latestHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.home2026__stats{
  position:relative;
  z-index:1;
  max-width:var(--container-max);
  margin:0 auto 8px;
  padding:0 var(--container-pad) 6px;
}
.home2026__statsGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}
.home2026__statItem{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(2,6,23,.35);
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.home2026__statGlyph{
  width:32px;
  height:32px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(59,91,255,.25);
  border:1px solid rgba(59,91,255,.35);
  color:#e2e8f0;
}
.home2026__statGlyph .icon{
  width:16px;
  height:16px;
}
.home2026__statNum{
  font-size:20px;
  font-weight:900;
  color:#f8fafc;
  letter-spacing:-.01em;
}
.home2026__statLabel{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.3px;
  color:rgba(226,232,240,.78);
}
.home2026__sections{
  position:relative;
  z-index:1;
  max-width:var(--container-max);
  margin:10px auto 0;
  padding:0 var(--container-pad) 6px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.home2026__sectionsHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.home2026__section{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
  padding:clamp(12px, 1.8vw, 18px);
  box-shadow:0 22px 70px rgba(0,0,0,.28);
}
.home2026__sectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.home2026__section .home2026__cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  overflow:visible;
  scroll-snap-type:none;
  gap:var(--section-gap);
}
.home2026__section .home2026__card{
  flex:initial;
}
.home2026__latest .home2026__cards{
  padding-bottom:12px;
}
.home2026__latest .home2026__card{
  background:rgba(2,6,23,.42);
  border-color:rgba(255,255,255,.12);
}
.home2026__trust{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.home2026__trustItem{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(2,6,23,.35);
  color:rgba(226,232,240,.92);
  font-weight:700;
  font-size:12px;
}
.home2026__trustIcon{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(59,91,255,.28);
  border:1px solid rgba(59,91,255,.35);
  color:#e2e8f0;
}
.home2026__trustIcon .icon{
  width:14px;
  height:14px;
}
.home2026__statIcon{
  background:linear-gradient(135deg, rgba(59,91,255,.32), rgba(34,197,94,.22));
  border-color:rgba(59,91,255,.42);
  color:#eef2ff;
}
.home2026__actions{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:8px;
  z-index:2;
}
.home2026__actions .quick-btn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(15,23,42,.65);
  color:#f8fafc;
}
.home2026__actions .favorite-icon{
  font-size:16px;
  color:#fca5a5;
}
.home2026__actions .icon{
  width:14px;
  height:14px;
}

/* Premium day-mode overrides (avoid half dark / half light) */
body:not(.dark) .home2026__heroCopy{
  background:rgba(255,255,255,.82);
  border-color:rgba(15,23,42,.10);
  box-shadow:var(--shadow-strong);
}
body:not(.dark) .home2026__heroCopy::before{
  background: linear-gradient(135deg, rgba(246,196,83,.75), rgba(183,121,31,.55), rgba(249,168,75,.35));
}
body:not(.dark) .home2026__title{color:#0b1220}
body:not(.dark) .home2026__title::after{
  background: linear-gradient(90deg,#f6c453,#b7791f);
}
body:not(.dark) .home2026__subtitle{color:#4b3418}
body:not(.dark) .home2026__searchRow{
  background:rgba(255,255,255,.92);
  border-color:rgba(15,23,42,.10);
}
body:not(.dark) .home2026__searchIcon{color:#64748b}
body:not(.dark) .home2026__searchInput{color:#0b1220}
body:not(.dark) .home2026__searchBtn{
  background: var(--btn-grad);
  color:#2b1a07;
}
body:not(.dark) .home2026__btn{
  background:rgba(255,255,255,.8);
  color:#0b1220;
  border-color:rgba(15,23,42,.10);
}
body:not(.dark) .home2026__btn:hover{background:rgba(255,255,255,.95)}
body:not(.dark) .home2026__btn--primary{
  background: var(--btn-grad);
  color:#2b1a07;
  border-color:rgba(88,63,37,.18);
}
body:not(.dark) .home2026__h2,
body:not(.dark) .home2026__h3{
  color:#1a1206;
}
body:not(.dark) .home2026__muted{color:#6b5a42}
body:not(.dark) .home2026__link{
  color:#8a5a12;
}
body:not(.dark) .home2026__link:hover{
  color:#6f450c;
  text-decoration:underline;
}
body:not(.dark) .home2026__trustItem{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,243,224,.92));
  border-color:rgba(183,121,31,.18);
  color:#2b1a07;
  box-shadow:0 10px 26px rgba(88,63,37,.12);
}
body:not(.dark) .home2026__trustIcon{
  background:rgba(183,121,31,.18);
  border-color:rgba(183,121,31,.28);
  color:#3b2a12;
}
body:not(.dark) .home2026__statItem{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,240,214,.92));
  border-color:rgba(183,121,31,.16);
  box-shadow:0 14px 34px rgba(88,63,37,.14);
}
body:not(.dark) .home2026__statGlyph{
  background: rgba(183,121,31,.16);
  border-color: rgba(183,121,31,.24);
  color: #3b2a12;
}
body:not(.dark) .home2026__statNum{color:#0b1220}
body:not(.dark) .home2026__statLabel{color:#475569}
body:not(.dark) .home2026__section{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,238,210,.92));
  border-color:rgba(183,121,31,.16);
  box-shadow:0 16px 40px rgba(88,63,37,.16);
}
body:not(.dark) .home2026__card{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,244,226,.95));
  border-color:rgba(183,121,31,.16);
  box-shadow:0 10px 26px rgba(88,63,37,.12);
}
body:not(.dark) .home2026__latest .home2026__card{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,244,226,.95));
  border-color:rgba(183,121,31,.16);
}
body:not(.dark) .home2026__card:hover{
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,236,200,.95));
  border-color:rgba(183,121,31,.28);
  box-shadow:0 18px 44px rgba(88,63,37,.18);
}
body:not(.dark) .home2026__cardTitle{color:#0b1220}
body:not(.dark) .home2026__price{color:#166534}
body:not(.dark) .home2026__meta{color:#4b2f12}
body:not(.dark) .home2026__excerpt{color:#3f2a14}
body:not(.dark) .home2026__actions .quick-btn{
  background:rgba(255,255,255,.88);
  color:#0b1220;
  border-color:rgba(15,23,42,.12);
}
body:not(.dark) .home2026__empty{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,235,202,.92));
  border-color:rgba(183,121,31,.2);
  color:#4b3418;
}
body:not(.dark) .home2026__viewport{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,235,202,.92));
  border-color:rgba(183,121,31,.16);
}
body:not(.dark) .home2026__navBtn{
  background:rgba(255,255,255,.92);
  border-color:rgba(183,121,31,.2);
  color:#2b1a07;
}
body:not(.dark) .home2026__dot{
  background:rgba(183,121,31,.18);
  border-color:rgba(183,121,31,.25);
}
body:not(.dark) .home2026__dot.is-active{
  background:linear-gradient(90deg,#ffbf59,#ff8a1d);
  border-color:rgba(183,121,31,.4);
}
body:not(.dark) .home2026__pill{
  background:rgba(183,121,31,.12);
  color:#3b2a12;
  border-color:rgba(183,121,31,.25);
}

/* Premium night-mode boost (more vivid + readable) */
body.dark .home2026__heroCopy{
  background:linear-gradient(180deg, rgba(6,12,24,.88), rgba(9,16,30,.82));
  border-color:rgba(255,255,255,.18);
  box-shadow:0 32px 90px rgba(0,0,0,.58);
}
body.dark .home2026__heroCopy::before{
  background:linear-gradient(135deg, rgba(58,214,255,.85), rgba(255,77,210,.55), rgba(34,211,238,.35));
}
body.dark .home2026__title{color:#f8fbff}
body.dark .home2026__title::after{
  background:linear-gradient(90deg,#4fd1ff,#ff4dd2);
}
body.dark .home2026__subtitle{color:rgba(226,232,240,.92)}
body.dark .home2026__searchRow{
  background:rgba(6,12,24,.72);
  border-color:rgba(255,255,255,.18);
}
body.dark .home2026__searchBtn{
  background:linear-gradient(135deg,#4fd1ff,#ff4dd2);
  color:#04121d;
}
body.dark .home2026__btn--primary{
  background:linear-gradient(135deg,#4fd1ff,#ff4dd2);
  color:#04121d;
  border-color:rgba(255,255,255,.12);
}
body.dark .home2026__link{color:#8be7ff}
body.dark .home2026__link:hover{color:#ffd1f3}
body.dark .home2026__trustItem{
  background:rgba(6,12,24,.62);
  border-color:rgba(255,255,255,.18);
  color:rgba(226,232,240,.95);
}
body.dark .home2026__trustIcon{
  background:rgba(58,214,255,.22);
  border-color:rgba(58,214,255,.40);
  color:#e8f7ff;
}
body.dark .home2026__statItem{
  background:rgba(6,12,24,.72);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 22px 70px rgba(0,0,0,.45);
}
body.dark .home2026__statGlyph{
  background:rgba(58,214,255,.22);
  border-color:rgba(58,214,255,.40);
  color:#e8f7ff;
}
body.dark .home2026__section{
  background:rgba(6,12,24,.72);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 22px 70px rgba(0,0,0,.45);
}
body.dark .home2026__card,
body.dark .home2026__latest .home2026__card{
  background:rgba(10,16,30,.78);
  border-color:rgba(255,255,255,.14);
}
body.dark .home2026__card:hover{
  background:rgba(12,20,38,.88);
  border-color:rgba(79,209,255,.45);
  box-shadow:0 20px 70px rgba(0,0,0,.55);
}
body.dark .home2026__cardTitle{color:#f8fbff}
body.dark .home2026__meta{color:rgba(226,232,240,.86)}
body.dark .home2026__empty{
  background:rgba(6,12,24,.7);
  border-color:rgba(255,255,255,.16);
  color:rgba(226,232,240,.92);
}
.share-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(2,6,23,.6);
}
.share-modal-content{
  width:min(460px, 100%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  padding:16px;
}
.share-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.share-modal-header h3{margin:0;font-size:18px}
.share-modal-close{
  border:0;
  background:transparent;
  font-size:22px;
  cursor:pointer;
  color:var(--text);
}
.share-modal-body{margin-top:10px}
.share-url{
  display:flex;
  gap:8px;
  align-items:center;
  margin:10px 0 12px;
}
.share-url input{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
}
.share-url button{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  cursor:pointer;
  font-weight:700;
}
.share-buttons{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:8px;
}
.share-btn{
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  text-align:center;
  font-weight:700;
  color:var(--text);
}
.share-btn:hover{transform:translateY(-1px)}
.share-facebook{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.35)}
.share-twitter{background:rgba(14,165,233,.15);border-color:rgba(14,165,233,.35)}
.share-whatsapp{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.35)}
.share-telegram{background:rgba(2,132,199,.18);border-color:rgba(2,132,199,.35)}
.btn-favorite .favorite-icon{
  font-size:16px;
  color:#ef4444;
}
.btn-favorite.active .favorite-icon{
  color:#dc2626;
}

@media (max-width: 720px){
  .home2026__latest{
    margin-top:6px;
  }
  .home2026__trust{
    gap:6px;
  }
  .home2026__trustItem{
    font-size:11px;
  }
}
@media (max-width: 980px){
  .home2026__statsGrid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 900px){
  .home2026__section .home2026__cards{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
  }
  .home2026__section .home2026__card{
    flex:0 0 260px;
  }
}
@media (max-width: 760px){
  .home2026__section .home2026__card{
    flex-basis:78vw;
  }
}
@media (max-width: 420px){
  .home2026__section .home2026__card{
    flex-basis:86vw;
  }
}
@media (max-width: 520px){
  .home2026__statsGrid{
    grid-template-columns:1fr;
  }
}

/*
  Step 8: VIP + Boost + Categories (2026)
*/
.flash.info,
.alert.info{
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.25);
  color:#1d4ed8;
}
.alert.success,
.alert.error{
  border-color:var(--border);
}
.alert.success{
  background:rgba(22,163,74,.12);
  border-color:rgba(22,163,74,.3);
  color:#14532d;
}
.alert.error{
  background:rgba(220,38,38,.12);
  border-color:rgba(220,38,38,.3);
  color:#7f1d1d;
}

body[data-route^="vip/"] .box,
body[data-route^="premium/"] .box{
  border-radius:20px;
  border:1px solid rgba(148,163,184,.25);
  box-shadow:var(--shadow-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
}
body[data-route^="vip/"] .grid--cards,
body[data-route^="premium/"] .grid--cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}
body[data-route^="vip/"] .vip-pack,
body[data-route^="premium/"] .vip-pack{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:#fff;
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
body[data-route^="vip/"] .vip-pack:hover,
body[data-route^="premium/"] .vip-pack:hover{
  transform:translateY(-2px);
  border-color:rgba(59,91,255,.4);
  box-shadow:var(--shadow-soft);
}
body[data-route^="vip/"] .vip-pack input[type="radio"],
body[data-route^="premium/"] .vip-pack input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
body[data-route^="vip/"] .vip-pack input[type="radio"]:checked ~ .vip-pack__head,
body[data-route^="premium/"] .vip-pack input[type="radio"]:checked ~ .vip-pack__head{
  color:#1d4ed8;
}
body[data-route^="vip/"] .vip-pack input[type="radio"]:checked ~ .vip-pack__meta .badge-pill,
body[data-route^="premium/"] .vip-pack input[type="radio"]:checked ~ .vip-pack__meta .badge-pill{
  background:linear-gradient(135deg, rgba(59,91,255,.9), rgba(34,197,94,.85));
  color:#0b1220;
  border-color:transparent;
}
body[data-route^="vip/"] .vip-pack__head,
body[data-route^="premium/"] .vip-pack__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
body[data-route^="vip/"] .vip-pack__name,
body[data-route^="premium/"] .vip-pack__name{
  font-weight:800;
  font-size:16px;
}
body[data-route^="vip/"] .vip-pack__price,
body[data-route^="premium/"] .vip-pack__price{
  font-weight:900;
  color:var(--brand);
}
body[data-route^="vip/"] .badge-pill,
body[data-route^="premium/"] .badge-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  font-size:12px;
  font-weight:800;
  background:#fff;
}
body[data-route^="vip/"] .vip-coupon,
body[data-route^="premium/"] .vip-coupon{
  margin-top:16px;
  padding:12px;
  border-radius:14px;
  border:1px dashed rgba(148,163,184,.35);
  background:rgba(148,163,184,.12);
}
body[data-route^="vip/"] .vip-pay-card,
body[data-route^="premium/"] .vip-pay-card{
  border-radius:16px;
  background:linear-gradient(135deg, rgba(15,23,42,.04), rgba(59,91,255,.08));
}
body[data-route^="vip/"] .vip-pay-option,
body[data-route^="premium/"] .vip-pay-option{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.3);
  background:#fff;
}
body[data-route^="vip/"] .vip-pay-actions .btn,
body[data-route^="premium/"] .vip-pay-actions .btn{
  border-radius:999px;
}
body[data-route^="vip/"] .vip-success,
body[data-route^="premium/"] .vip-success{
  border-radius:20px;
  border:1px solid rgba(148,163,184,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:var(--shadow-soft);
}
body[data-route^="vip/"] .vip-success__details,
body[data-route^="premium/"] .vip-success__details{
  border-radius:16px;
  background:#fff;
}

body[data-route="boost/index"] .subtitle{
  color:var(--muted);
  margin:4px 0 16px;
}
body[data-route="boost/index"] .listing-preview{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
body[data-route="boost/index"] .boost-packages{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  margin:16px 0;
}
body[data-route="boost/index"] .boost-package{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.25);
  background:#fff;
  box-shadow:var(--shadow-soft);
}
body[data-route="boost/index"] .boost-package.featured-package{
  border-color:rgba(59,91,255,.45);
  box-shadow:0 18px 36px rgba(59,91,255,.18);
}
body[data-route="boost/index"] .package-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
body[data-route="boost/index"] .badge-popular{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:linear-gradient(135deg, rgba(59,91,255,.9), rgba(34,197,94,.85));
  color:#0b1220;
}
body[data-route="boost/index"] .package-price{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:10px 0;
}
body[data-route="boost/index"] .package-price .amount{
  font-size:22px;
  font-weight:900;
  color:var(--brand);
}
body[data-route="boost/index"] .package-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
body[data-route="boost/index"] .boost-info{
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
body[data-route="boost/index"] .boost-info ul{
  margin:0;
  padding-left:18px;
}

body[data-route="categories/index"] .categories-grid{
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap:12px !important;
}
body[data-route="categories/index"] .cat{
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.25);
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  box-shadow:var(--shadow-soft);
  text-decoration:none;
  color:inherit;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
body[data-route="categories/index"] .cat:hover{
  transform:translateY(-2px);
  border-color:rgba(59,91,255,.4);
  box-shadow:var(--shadow-strong);
}
body[data-route="categories/index"] .cat__icon{
  width:40px;
  height:40px;
  border-radius:12px;
}
body[data-route="categories/index"] .cat__count{
  margin-left:auto;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  background:#fff;
}
body[data-route="categories/index"] .cat__name{
  font-size:14px;
  line-height:1.2;
}

/* Tap.az-style home overrides */
.home2026{
  background:var(--bg);
}
.home2026__bg{display:none}
.home2026__hero{padding:30px 0 16px}
.home2026__heroInner{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.home2026__heroCopy{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 16px;
  box-shadow:var(--shadow);
}
.home2026__title{color:var(--text);font-size:clamp(26px,3.2vw,40px)}
.home2026__subtitle{color:var(--muted)}
.home2026__searchRow{
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:10px;
}
.home2026__searchIcon{color:var(--muted)}
.home2026__searchInput{color:var(--text)}
.home2026__searchInput::placeholder{color:var(--muted)}
.home2026__searchBtn{
  background:var(--brand);
  color:#fff;
  border-radius:8px;
}
.home2026__btn{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 12px;
}
.home2026__btn--primary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
.home2026__trust{gap:8px}
.home2026__trustItem{
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  color:var(--text);
}
.home2026__trustIcon{color:var(--brand)}

.home2026__live{
  padding:0 var(--container-pad) 10px;
}
.home2026__liveHead{margin-bottom:8px}
.home2026__h2{color:var(--text)}
.home2026__muted{color:var(--muted)}
.home2026__navBtn{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
}
.home2026__viewport{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-soft);
}
.home2026__card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.home2026__card:hover{
  transform:translateY(-2px);
  border-color:rgba(26,115,232,.28);
  box-shadow:var(--shadow-soft);
}
.home2026__cardTitle{color:var(--text)}
.home2026__price{color:#1e7f2f}
.home2026__meta{color:var(--muted)}
.home2026__excerpt{color:var(--muted)}
.home2026__pill{background:var(--bg-soft);color:var(--text);border:1px solid var(--border)}
.home2026__pill--premium{background:linear-gradient(135deg,#ffd54f,#ffb74d);color:#1f2937;border-color:rgba(255,183,77,.6)}
.home2026__actions .quick-btn{background:#fff;border:1px solid var(--border);color:var(--text)}
.home2026__actions .quick-btn:hover{border-color:rgba(26,115,232,.35)}

.home2026__stats{padding:0 var(--container-pad)}
.home2026__statsGrid{gap:12px}
.home2026__statItem{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  box-shadow:var(--shadow-soft);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.home2026__statItem:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.home2026__statGlyph{background:var(--accent);color:var(--brand)}
.home2026__statNum{color:var(--text)}
.home2026__statLabel{color:var(--muted)}

.home2026__cats{
  padding:0 var(--container-pad);
}
.home2026__catsInner{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  box-shadow:var(--shadow-soft);
}
.home2026__link{color:var(--brand)}
.home2026__link:hover{text-decoration:underline}

/* Dark mode refinements */
body.dark .home2026__heroCopy,
body.dark .home2026__viewport,
body.dark .home2026__catsInner{
  background:var(--card);
  border-color:var(--border);
}
body.dark .home2026__card{background:var(--card);border-color:var(--border)}
body.dark .home2026__cardTitle{color:var(--text)}
body.dark .home2026__price{color:#7ee787}
body.dark .home2026__pill{background:#1f2937;color:#e5e7eb}
body.dark .home2026__actions .quick-btn{background:var(--card);border-color:var(--border);color:var(--text)}

/* Subtle motion for lively feel */
@keyframes float-soft {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.home2026__trustItem{animation: float-soft 6s ease-in-out infinite;}

@media (max-width: 720px){
  body[data-route="boost/index"] .boost-packages{
    grid-template-columns:1fr;
  }
}

/*
  Step 9: Remaining pages polish (2026)
*/
.error-page{
  text-align:center;
  padding:28px 22px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:var(--shadow-soft);
}
.error-page__code{
  font-size:72px;
  margin:0;
  letter-spacing:.12em;
  color:#0f172a;
}
.error-page__code--404{color:#3b5bff;}
.error-page__code--500{color:#ef4444;}
.error-page__title{
  margin:6px 0 10px;
  font-size:22px;
}
.error-page__text{
  color:var(--muted);
  margin:0 auto 16px;
  max-width:520px;
}
.error-page__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.error-page__btn{
  border-radius:999px;
  padding:8px 14px;
}
.error-page__help{
  margin-top:18px;
  padding-top:12px;
  border-top:1px dashed rgba(148,163,184,.35);
}

body[data-route="sitemap/html"] .sitemap-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  margin-top:14px;
}
body[data-route="sitemap/html"] .sitemap-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
body[data-route="sitemap/html"] .sitemap-list a{
  text-decoration:none;
  color:inherit;
  font-weight:600;
}
body[data-route="sitemap/html"] .sitemap-callout{
  margin-top:18px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(59,91,255,.3);
  background:rgba(59,91,255,.1);
}

body[data-route="gamification/badges"] .gamification-stats,
body[data-route="gamification/leaderboard"] .box{
  border-radius:18px;
  box-shadow:var(--shadow-soft);
}
body[data-route="gamification/badges"] .badges-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
  margin-top:12px;
}
body[data-route="gamification/badges"] .badge-card{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  padding:14px;
  background:#fff;
  box-shadow:var(--shadow-soft);
  text-align:center;
}
body[data-route="gamification/badges"] .badge-card.earned{
  border-color:rgba(16,185,129,.35);
  background:rgba(16,185,129,.08);
}
body[data-route="gamification/badges"] .badge-card.locked{
  opacity:.75;
}
body[data-route="gamification/badges"] .badge-icon{
  font-size:28px;
}
body[data-route="gamification/badges"] .badge-name{
  font-weight:800;
  margin-top:6px;
}
body[data-route="gamification/badges"] .badge-status{
  display:inline-flex;
  margin-top:8px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  font-size:12px;
  font-weight:800;
}

body[data-route="gamification/leaderboard"] .leaderboard-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
body[data-route="gamification/leaderboard"] .leaderboard-user{
  display:flex;
  align-items:center;
  gap:8px;
}
body[data-route="gamification/leaderboard"] .leaderboard-avatar{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  object-fit:cover;
}
body[data-route="gamification/leaderboard"] .rank-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  background:rgba(59,91,255,.12);
}
body[data-route="gamification/leaderboard"] .level-badge{
  display:inline-flex;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(148,163,184,.12);
  border:1px solid rgba(148,163,184,.35);
  font-weight:700;
  font-size:12px;
}
body[data-route="gamification/leaderboard"] .leaderboard-table tr.current-user{
  background:rgba(59,91,255,.08);
}

body[data-route^="manualPayment/"] .box{
  border-radius:18px;
  box-shadow:var(--shadow-soft);
}
body[data-route^="manualPayment/"] form{
  margin-top:12px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  box-shadow:var(--shadow-soft);
}
body[data-route^="manualPayment/"] form button{
  border-radius:999px;
  padding:10px 16px;
  border:0;
  background:linear-gradient(135deg, rgba(59,91,255,.95), rgba(34,197,94,.88));
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
body[data-route^="manualPayment/"] .pre-wrap{
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.3);
  background:#fff;
}

body[data-route="account/statistics"] .stats-table table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.25);
}
body[data-route="account/statistics"] .stats-table th,
body[data-route="account/statistics"] .stats-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(148,163,184,.2);
  font-size:13px;
}
body[data-route="account/statistics"] .stats-table th{
  background:#f1f5f9;
  text-transform:uppercase;
  letter-spacing:.4px;
  font-size:11px;
  color:var(--muted);
}

body[data-route^="chat/"] .chat-empty{
  padding:14px;
  border-radius:12px;
  border:1px dashed rgba(148,163,184,.35);
  background:rgba(148,163,184,.12);
  color:var(--muted);
}
body[data-route^="chat/"] .read-indicator,
body[data-route^="chat/"] .sent-indicator{
  font-weight:800;
  color:#3b5bff;
  margin-left:6px;
}
.related-block{margin-top:24px;padding:18px;border-radius:18px;border:1px solid var(--border);background:var(--card)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px}
.related-card{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--bg);display:flex;flex-direction:column;gap:8px;height:100%;box-shadow:var(--shadow-soft);transition:transform .2s,var(--shadow) .2s ease}
.related-card img{width:100%;height:150px;object-fit:cover}
.related-card__body{padding:12px;flex-grow:1;display:flex;flex-direction:column;gap:6px}
.related-card h4{margin:0;font-size:16px;font-weight:700}
.related-card p{margin:0;color:var(--muted);font-size:14px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text)}
.badge--vip{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.4);color:#b45309}
.related-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
/* ===== TONMR Universal Responsive Master Patch ===== */

/* 0) Baza: daşmaların əsas düşməni */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ overflow-x:hidden !important; }

/* 1) Media elementlər ekranı yarıb çıxmasın */
img,video,iframe,canvas,svg{ max-width:100% !important; height:auto !important; }

/* 2) Uzun söz/link/telefon nömrəsi qırılsın (admin cədvəldə çox olur) */
p,li,a,span,div,h1,h2,h3,h4,td,th{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* 3) Flex/grid uşaqlarında daşma problemi (çox kritik!) */
.flex > *, .row > *, [style*="display:flex"] > *{
  min-width:0; /* bu olmadan mobil çox vaxt daşır */
}

/* 4) Mobil/tablet: bütün TABLE-lar öz içində scroll olsun (admin üçün həyat qurtarır) */
@media (max-width: 992px){
  table{
    display:block !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  th,td{ white-space:nowrap !important; }

  /* table üzündən gizlənən action button-lar görünəcək */
  td:last-child, th:last-child{
    position: sticky;
    right: 0;
    background: inherit;
  }
}

/* 5) Formlar: input/select/button mobilə tam uyğun (admin filterlər üçün) */
@media (max-width: 992px){
  input,textarea,select,button{
    max-width:100% !important;
    font:inherit;
  }
  input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select{
    width:100% !important;
  }

  /* Yan-yana controls varsa alt-alta düşsün (filter/bulk/action bar) */
  .row,.filters,.actions,.toolbar,.top-actions,.bulk-actions,[class*="filter"],[class*="action"]{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    align-items:stretch !important;
  }

  button,.btn,[class*="btn"],input[type="submit"]{
    width:100% !important;
  }
}

/* 6) Container-lar mobilə sığsın (bəzən geniş max-width sıxıb daşır) */
.container,.content,.page-content,main,[class*="container"],[class*="content"]{
  max-width:100%;
}