/* ===========================================================================
   dg26-acasa.css  —  prima pagina (page-home-2026v3.php)
   ---------------------------------------------------------------------------
   Scos din sablon pe 6 octombrie 2026. Identic, litera cu litera.

   AL DOILEA BLOC DE CSS A RAMAS IN SABLON, dinadins: cele cinci randuri cu
   pozele de fundal din hero sunt calculate de PHP la fiecare incarcare, in
   trei marimi. Intr-un fisier static nu pot sta.

   Se incarca prin campul `extra` din tabelul conductei. Pe prima pagina,
   fisierul NU blocheaza afisarea — vezi filtrul `style_loader_tag` din
   module/assets.php, care trateaza `dg26-extra` la fel ca pachetul.
   =========================================================================== */

.dg26-hero{position:relative;height:clamp(160px,22vh,195px);overflow:hidden;background:#0c0c0c}
.dg26-hero-bg{position:absolute;inset:0;background-size:cover;background-position:50% 38%;animation:dg26-kenburns-mobile 11s ease-in-out infinite alternate}
@keyframes dg26-kenburns-mobile{from{transform:scale(1)}to{transform:scale(1.16)}}
@keyframes dg26-kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.dg26-hero-overlay{position:absolute;left:0;top:0;bottom:0;z-index:5;padding:17px 13px 36px;width:100%;max-width:74%;display:flex;flex-direction:column}
.dg26-hero-slide{display:none}
.dg26-hero-slide.dg26-active{display:flex;flex-direction:column;justify-content:space-between;flex:1;min-height:0}
.dg26-hero-overlay .dg26-hero-title{margin:0;line-height:1.15;color:#1a1a1a;font-weight:800;letter-spacing:-0.2px;text-shadow:0 0 1px rgba(201,164,92,0.9),0 0 6px rgba(201,164,92,0.6),0 0 14px rgba(201,164,92,0.35),0 1px 2px rgba(255,255,255,0.15)}
.dg26-hero-overlay .dg26-hero-title{font-size:24px}
.dg26-hero-overlay p.dg26-hero-title{font-size:19px}
.dg26-hero-overlay p{margin:0;font-size:14px;line-height:1.35;color:#fff;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,0.65),0 2px 9px rgba(0,0,0,0.75)}
.dg26-hero-overlay p:not(.dg26-hero-title){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dg26-hero-cta{display:inline-flex;align-items:center;gap:5px;background:#c9a45c;color:#1a1408;font-weight:600;padding:7px 13px;border-radius:7px;text-decoration:none;font-size:12.5px;align-self:flex-start}
.dg26-hero-dots{display:flex;gap:6px;margin-top:8px}
.dg26-hero-dots span{width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,0.4);cursor:pointer}
.dg26-hero-dots span.dg26-active{background:#c9a45c}
/* Sclipirea aurie din hero — animată prin `transform`, nu prin `left`.
   5 septembrie 2026: PageSpeed a arătat că ÎNTREG scorul CLS al paginii
   (0,231) venea din elementul ăsta, în cinci salturi succesive. Cauza:
   animam `left`, iar `left` e o proprietate de aşezare — la fiecare cadru
   browserul recalcula poziţia întregii pagini. De aici veneau şi
   „Forced reflow" şi „Avoid non-composited animations — 1 animated element".
   `transform` rulează pe placa video şi nu atinge aşezarea deloc.
   Matematica traseului: elementul porneşte de la left:-100% şi are lăţimea
   40% din hero. Trebuie să ajungă la 150%, adică să parcurgă 250% din
   lăţimea hero-ului. Procentele din `translateX` se raportează la lăţimea
   ELEMENTULUI, nu a părintelui: 250 / 40 = 6,25, deci 625%.
   Vizual: identic. Aceeaşi dungă, aceeaşi viteză, acelaşi traseu. */
@keyframes dg26shimmer{0%{transform:translateX(0);opacity:0}8%{opacity:1}90%{transform:translateX(625%);opacity:1}100%{transform:translateX(625%);opacity:0}}
.dg26-hero-shimmer{position:absolute;top:0;left:-100%;width:40%;height:100%;background:linear-gradient(105deg,transparent 25%,rgba(212,175,55,0.38) 50%,transparent 75%);pointer-events:none;z-index:3;opacity:0;will-change:transform}
.dg26-hero-shimmer.dg26-shimmer-active{animation:dg26shimmer 5s cubic-bezier(0.25,0.1,0.25,1) forwards}
.dg26-hero.dg26-shimmer-active::after{}
@media (min-width:1024px){
	.dg26-hero{height:clamp(340px,55vh,480px)}
	.dg26-hero-overlay{position:relative;top:auto;left:auto;bottom:auto;height:100%;justify-content:center;max-width:50%;padding:0 0 34px}
	.dg26-hero-slide.dg26-active{display:block;flex:none;justify-content:flex-start;background:linear-gradient(105deg, rgba(8,8,8,0.45) 0%, rgba(8,8,8,0.15) 65%, rgba(8,8,8,0) 100%);padding:32px 44px;border-radius:0 14px 14px 0}
	.dg26-hero-overlay .dg26-hero-title{font-weight:700;letter-spacing:normal;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.55);margin:0 0 8px}
	.dg26-hero-overlay .dg26-hero-title{font-size:50px}
	.dg26-hero-overlay p.dg26-hero-title{font-size:40px}
	.dg26-hero-overlay p{font-size:18px;max-width:560px;text-shadow:0 1px 8px rgba(0,0,0,0.6);margin:0 0 16px}
	.dg26-hero-cta{padding:14px 26px;font-size:16px;border-radius:10px;font-weight:700;margin-top:0;box-shadow:0 6px 18px rgba(201,164,92,0.35)}
	.dg26-hero-bg{background-position:center;animation:dg26-kenburns 14s ease-in-out infinite alternate}
}

/* ══════════════ BARA DE FAPTE ══════════════
   Stă ÎN imaginea din hero, lipită de marginea de jos, într-o ramă cu contur
   auriu peste o bandă fumurie — aceeaşi logică vizuală ca panoul de pe desktop.

   De ce aici şi nu dedesubt, ca prima oară:
   · dedesubt era o fâşie în plus care împingea pozele modelelor mai jos pe
     telefon. Aşa, banda stă PESTE poză: înălţimea hero-ului nu se schimbă cu
     niciun pixel, iar cardurile se întorc exact unde erau înainte.
   · pe fundal negru plat nu se vedea. Peste fotografie, cu contur auriu şi
     sticlă închisă dedesubt, ochiul o prinde din prima.

   Nu e în carusel: rămâne acolo permanent, la toate cele trei slide-uri.
   pointer-events:none — banda n-are linkuri şi nu trebuie să fure clickul de
   pe buton sau de pe bulinele caruselului. */
.dg26-facts{position:absolute;left:0;right:0;bottom:0;z-index:6;pointer-events:none;
	display:flex;justify-content:center;padding:22px 8px 7px;
	background:linear-gradient(to top,rgba(6,6,6,.92) 0%,rgba(6,6,6,.74) 38%,rgba(6,6,6,.30) 72%,rgba(6,6,6,0) 100%)}
.dg26-facts-inner{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;
	max-width:100%;padding:3px 10px;border-radius:8px;
	background:rgba(8,8,8,.55);border:1px solid rgba(201,164,92,.42);
	box-shadow:0 5px 18px rgba(0,0,0,.45)}
.dg26-fact{display:inline-flex;align-items:baseline;gap:5px;font-family:"Open Sans",Arial,sans-serif;
	font-size:11.5px;color:#e2d9c2;white-space:nowrap;line-height:1.4;
	text-shadow:0 1px 3px rgba(0,0,0,.7)}
.dg26-fact b{color:#f3ecd9;font-weight:700;font-variant-numeric:tabular-nums}
.dg26-facts-sep{width:3px;height:3px;border-radius:50%;background:#c9a45c;margin:0 7px;flex-shrink:0;opacity:.85}
.dg26-fact-long{display:none}
@media (max-width:359px){
	.dg26-fact{font-size:10.5px}
	.dg26-facts-inner{padding:3px 8px}
	.dg26-facts-sep{margin:0 5px}
}
@media (min-width:768px) and (max-width:1023px){
	/* Tabletă: hero-ul e tot mic, dar avem lăţime. Bandă bounded ca să nu
	   suprascrie regulile de desktop, care sunt scrise MAI SUS în fişier. */
	.dg26-hero-overlay{max-width:62%;padding:21px 16px 42px}
}
@media (min-width:768px){
	.dg26-hero-overlay p:not(.dg26-hero-title){display:block;overflow:visible}
	.dg26-facts{padding:34px 14px 11px}
	.dg26-facts-inner{padding:6px 18px;border-radius:11px}
	.dg26-fact{font-size:14px}
	.dg26-facts-sep{margin:0 13px}
	.dg26-fact-long{display:inline}
	.dg26-fact-short{display:none}
}
@media (min-width:1024px){
	.dg26-facts{padding:64px 16px 18px}
	.dg26-facts-inner{padding:9px 26px;border-radius:12px}
	.dg26-fact{font-size:16.5px}
}

/* Respectăm setarea de sistem „reduce motion". Oamenii cu rău de mişcare,
   migrene sau tulburări vestibulare o pornesc din sistemul de operare, iar
   browserul o transmite paginii. Aveam patru animaţii care nu se opreau
   niciodată: Ken Burns pe fotografia din hero, sclipirea aurie, caruselul de
   hero la 5 secunde şi cel de blog la 4. Conţinutul rămâne exact acelaşi —
   doar nu se mai mişcă singur. */
@media (prefers-reduced-motion: reduce){
	.dg26-hero-bg{animation:none !important}
	.dg26-hero-shimmer{display:none !important}
	.dg26-blog-track{transition:none !important}
	*,*::before,*::after{scroll-behavior:auto !important}
}

.dg26-wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.dg26-wrap-wide{max-width:1640px}
@media (min-width:1024px){.dg26-wrap{padding:0 32px}}

.dg26-section{padding:14px 0}
.dg26-section:first-of-type{padding-top:6px}
.dg26-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:10px}
.dg26-section-head h2{font-family:"Playfair Display",serif;font-style:italic;font-size:21px;font-weight:600;margin:0;color:#d4af37;line-height:1.25}
@media (min-width:768px){.dg26-section-head h2{font-size:30px;color:#e8d5a8}}
.dg26-section-head .count{font-size:15px;color:#999;font-weight:400}
.dg26-section-title{font-size:21px;color:#f3ecd9;margin:0 0 14px;line-height:1.3}

.dg26-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:768px){.dg26-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
@media (min-width:1024px){.dg26-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}}

.dg26-card{background:rgba(212,175,55,0.12);border:1px solid #2a2a2a;border-radius:18px;overflow:hidden;text-decoration:none;display:block;transition:border-color .2s cubic-bezier(.4,0,.2,1)}
.dg26-card.dg26-hide{display:none !important}
.dg26-card:hover{border-color:#444}
.dg26-card-img{position:relative;aspect-ratio:57/100;background:#222;overflow:hidden}
@media (min-width:768px){.dg26-card-img{aspect-ratio:3/4}}
.dg26-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.dg26-badge{position:absolute;top:12px;left:12px;z-index:2;background:#c9a45c;color:#1a1408;font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px}
.dg26-card-name-overlay{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));pointer-events:none}
.dg26-card-name-overlay .name{font-size:19px;font-weight:700;color:#f3ecd9;margin:0;line-height:1.2}
@media (min-width:1280px){.dg26-card-name-overlay .name{font-size:21px}}

.dg26-stats{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;row-gap:2px;gap:0;padding:7px 8px 6px;background:linear-gradient(to bottom, rgba(212,175,55,0.85) 0%, rgba(212,175,55,0.5) 35%, rgba(212,175,55,0.2) 75%, rgba(212,175,55,0) 100%);border-top:1px solid rgba(212,175,55,0.85)}
@media (min-width:768px){.dg26-stats{padding:10px 14px 9px}}
.dg26-stat{display:flex;align-items:baseline;gap:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dg26-stat .v{font-size:12px;font-weight:700;color:#fff;letter-spacing:0.1px;text-shadow:0 1px 3px rgba(0,0,0,0.55)}
@media (min-width:768px){.dg26-stat .v{font-size:13.5px}}
.dg26-stat .u{font-size:9.5px;font-weight:600;color:#f0dca0;text-transform:uppercase;letter-spacing:0.3px;text-shadow:0 1px 3px rgba(0,0,0,0.5)}
@media (min-width:768px){.dg26-stat .u{font-size:10.5px;letter-spacing:0.4px}}
.dg26-stat-sep{width:3px;height:3px;border-radius:50%;background:rgb(212,175,55);margin:0 7px;flex-shrink:0;opacity:0.8}
@media (min-width:768px){.dg26-stat-sep{margin:0 9px}}

.dg26-btn-outline{display:block;text-align:center;width:100%;border:1.5px solid #555;color:#f3ecd9;background:transparent;padding:15px;border-radius:11px;text-decoration:none;font-size:16px;font-weight:700;margin-top:16px;cursor:pointer}

.dg26-cities-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (min-width:768px){.dg26-cities-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.dg26-city-card{background:#161616;border:1px solid #2a2a2a;border-radius:14px;padding:20px 20px 18px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:border-color .2s cubic-bezier(.4,0,.2,1)}
@media (hover:hover){.dg26-city-card:hover{border-color:#c9a45c}}
.dg26-city-card .cname{font-size:17px;font-weight:700;color:#f3ecd9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:768px){.dg26-city-card .cname{font-size:19px}}
.dg26-city-card .ccount{font-size:13px;color:#888;font-variant-numeric:tabular-nums}
.dg26-cities-more{display:none;flex-wrap:wrap;gap:8px;margin-top:4px}
.dg26-cities-more.dg26-open{display:flex}
.dg26-city-chip{font-size:13px;color:#c9a45c;text-decoration:none;font-weight:600;padding:5px 13px;border:1px solid rgba(201,164,92,0.25);border-radius:999px;transition:border-color .18s ease}
.dg26-city-chip:hover{border-color:rgba(201,164,92,0.6)}
.dg26-cities-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:transparent;border:1.5px solid #333;color:#f3ecd9;font-size:14px;font-weight:600;padding:11px 22px;border-radius:999px;cursor:pointer;transition:border-color .2s ease}
.dg26-cities-toggle:hover{border-color:#c9a45c}
.dg26-cities-toggle i,.dg26-cities-toggle .dg26-ic{color:#c9a45c;font-size:12px;transition:transform .2s ease}
.dg26-cities-toggle.dg26-open i,.dg26-cities-toggle.dg26-open .dg26-ic{transform:rotate(180deg)}

.dg26-textblock{font-size:16px;line-height:1.7;color:#ccc;max-height:88px;overflow:hidden;position:relative}
.dg26-textblock.dg26-open{max-height:none}
.dg26-textblock::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(to bottom, rgba(0,0,0,0), #0c0c0c)}
.dg26-textblock.dg26-open::after{display:none}
.dg26-readmore{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:transparent;border:1.5px solid #333;color:#f3ecd9;font-size:14px;font-weight:600;padding:11px 22px;border-radius:999px;cursor:pointer;transition:border-color .2s ease}
.dg26-readmore:hover{border-color:#c9a45c}
.dg26-readmore i,.dg26-readmore .dg26-ic{color:#c9a45c;font-size:12px;transition:transform .2s ease}
.dg26-readmore.dg26-open i,.dg26-readmore.dg26-open .dg26-ic{transform:rotate(180deg)}

/* Accordion zona 1 — închis by default */
.dg26-accordion-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:16px 0;border-bottom:1px solid #2a2a2a;user-select:none}
.dg26-accordion-head h2{font-family:"Playfair Display",serif;font-style:italic;font-size:21px;font-weight:600;margin:0;color:#d4af37;line-height:1.25}
@media (min-width:768px){.dg26-accordion-head h2{font-size:28px;color:#e8d5a8}}
.dg26-accordion-head .dg26-acc-icon{color:#c9a45c;font-size:14px;transition:transform .25s ease;flex-shrink:0}
.dg26-accordion-head.dg26-open .dg26-acc-icon{transform:rotate(180deg)}
.dg26-accordion-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.dg26-accordion-body.dg26-open{max-height:2000px}
.dg26-accordion-body-inner{padding:20px 0 8px;font-size:16px;line-height:1.7;color:#bbb}

/* Subtitlurile dinăuntrul zonelor de text.
   Erau <h4> puse direct sub <h2>, sărind peste <h3> — semnalat de Lighthouse
   ca „Heading elements are not in a sequentially-descending order", cu două
   exemple: „Outcall Escort Damen" şi „Diskretion ist die goldene Regel".
   Şablonul le converteşte acum în <h3> la afişare (funcţia dg26_h4_h3 din
   capul fişierului), iar regula de mai jos le dă exact înfăţişarea pe care o
   aveau ca <h4>: aceeaşi mărime, aceeaşi grosime, aceleaşi margini, culoarea
   moştenită din bloc.

   ISTORIC, ca să nu se refacă drumul:
   · varianta 1 (5 sept) nu preciza culoarea. Regula globală din „Additional
     CSS" — `h1, h2, h3 { color:#f5f5f5; text-shadow:... }`, care nu prinde
     h4 — le-a făcut albe şi cu umbră.
   · varianta 2 (6 sept) a pus `color:inherit`, ca să arate exact ca înainte,
     adică `#ccc`, ca paragrafele. A funcţionat — şi tocmai de aia era greşită:
     un subtitlu care are exact culoarea textului din jur nu se citeşte ca
     subtitlu, ci ca un rând scris bold.
   · varianta 3, cea de faţă: arată ca un titlu, pentru că este unul.

   Cum se aşază în ierarhie:
     H2 din zona de text   Playfair, 17px / 20px pe desktop, #c9a45c
     H3 (aici)             Playfair, 16.5px / 18px pe desktop, #c9a45c
     paragraf              Open Sans, 16px, #ccc

   Acelaşi auriu şi acelaşi serif ca H2 — deci ochiul le grupează imediat ca
   titluri. Mărimea puţin mai mică şi spaţiul mai mare deasupra decât dedesubt
   arată că sunt cu un nivel mai jos. Faţă de paragraf diferă prin trei lucruri
   deodată: alt font, altă culoare, altă grosime. Nu se mai confundă.

   `text-shadow:none` rămâne: umbra vine din regula globală de mai sus şi n-are
   ce căuta pe un text auriu, mic, pe fundal negru — îl face doar tulbure. */
.dg26-textblock h3,.dg26-accordion-body-inner h3{font-family:"Playfair Display",serif;font-size:16.5px;font-weight:700;color:#c9a45c;margin:1.8em 0 .6em;line-height:1.3;text-shadow:none}
@media (min-width:768px){.dg26-textblock h3,.dg26-accordion-body-inner h3{font-size:18px}}

/* H3 pentru subsecțiuni text */
.dg26-text-section h2{font-family:"Playfair Display",serif;font-style:normal;font-size:17px;font-weight:700;color:#c9a45c;margin:0 0 12px;line-height:1.3;text-transform:none;letter-spacing:0}
@media (min-width:768px){.dg26-text-section h2{font-size:20px}}

/* Blog carduri redesign */
/* Blog slider */
.dg26-blog-slider{position:relative;overflow:hidden}
.dg26-blog-track{display:flex;transition:transform .35s cubic-bezier(.4,0,.2,1);will-change:transform}
.dg26-blog-card{flex:0 0 100%;background:#161616;border:1px solid #2a2a2a;border-radius:14px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:border-color .2s ease;box-sizing:border-box}
.dg26-blog-card:hover{border-color:#444}
@media (min-width:768px){
	.dg26-blog-card{flex:0 0 calc(33.333% - 14px);margin-right:20px}
	.dg26-blog-card:last-child{margin-right:0}
}
.dg26-blog-card-img{aspect-ratio:16/9;background:#222;overflow:hidden}
.dg26-blog-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.dg26-blog-card-img .dg26-blog-noimg{width:100%;height:100%;background:url('https://www.dusseldorf-girls.de/wp-content/uploads/2026/07/blog-placeholder.webp') center/cover no-repeat}
.dg26-blog-card-body{padding:10px 14px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
/* #666 pe fundalul #161616 dădea contrast 3,0:1, sub minimul de 4,5:1 cerut
   pentru text normal. #888 dă 5,15:1 — rămâne discretă, dar se citeşte. */
.dg26-blog-card-date{font-size:12px;color:#888;font-variant-numeric:tabular-nums}
.dg26-blog-card-title{font-size:15px;font-weight:700;color:#f3ecd9;margin:0;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dg26-blog-card-link{font-size:13px;color:#c9a45c;font-weight:600;margin-top:6px}
/* Săgeți slider */
.dg26-blog-nav{display:flex;gap:10px;margin-top:16px;justify-content:flex-end}
@media (min-width:768px){.dg26-blog-nav{position:absolute;top:0;right:0;margin-top:0}}
.dg26-blog-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.05);border:1.5px solid #333;color:#f3ecd9;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,background .2s ease;flex-shrink:0}
.dg26-blog-btn:hover{border-color:#c9a45c;background:rgba(201,164,92,0.08)}
.dg26-blog-btn i,.dg26-blog-btn .dg26-ic{font-size:13px;color:#c9a45c}
.dg26-blog-btn:disabled{opacity:0.3;cursor:default}
/* Dots pe mobil */
.dg26-blog-dots{display:none}
.dg26-blog-dot{width:6px;height:6px;border-radius:50%;background:#333;cursor:pointer;transition:background .2s ease}
.dg26-blog-dot.dg26-active{background:#c9a45c}

.dg26-faq-item{border-bottom:1px solid #2a2a2a}
.dg26-faq-q{display:flex;justify-content:space-between;align-items:center;padding:17px 0;cursor:pointer;font-size:16px;color:#f3ecd9;font-weight:600;gap:10px}
.dg26-faq-q .chev{transition:transform .2s ease;color:#999;flex-shrink:0}
.dg26-faq-item.dg26-open .dg26-faq-q .chev{transform:rotate(180deg)}
.dg26-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:15px;color:#aaa;line-height:1.65}
.dg26-faq-item.dg26-open .dg26-faq-a{padding-bottom:16px}

/* blog CSS mutat sus */

.dg26-footer-spacer{display:none}

/* Filter panel */

.dg26-active-chip{display:inline-flex;align-items:center;gap:6px;background:#2a2210;color:#e8c878;border:1px solid #c9a45c;border-radius:14px;padding:6px 8px 6px 12px;font-size:16px}
.dg26-active-chip button{background:none;border:none;color:#c9a45c;cursor:pointer;font-size:17px;line-height:1;padding:2px}
.dg26-active-chips-clear{font-size:16px;color:#999;text-decoration:underline;background:none;border:none;cursor:pointer;padding:6px 0}

.dg26-toggle{display:flex;align-items:center;gap:8px;cursor:pointer}
.dg26-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.dg26-toggle-track{width:34px;height:19px;border-radius:10px;background:#333;position:relative;transition:background .2s;flex-shrink:0}
.dg26-toggle-track::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#ccc;transition:transform .2s}
.dg26-toggle input:checked + .dg26-toggle-track{background:#c9a45c}
.dg26-toggle input:checked + .dg26-toggle-track::after{transform:translateX(15px);background:#1a1408}
.dg26-toggle-label{font-size:17px;color:#ddd}

.dg26-age-slider{position:relative;height:24px;margin:8px 4px 4px}
.dg26-age-slider-track{position:absolute;top:50%;left:0;right:0;height:3px;background:#333;border-radius:2px;transform:translateY(-50%)}
.dg26-age-slider-range{position:absolute;top:50%;height:3px;background:#c9a45c;border-radius:2px;transform:translateY(-50%)}
.dg26-age-handle{position:absolute;top:0;left:0;width:100%;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.dg26-age-handle::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#c9a45c;border:2px solid #0c0c0c;cursor:pointer;pointer-events:auto;margin-top:-7.5px}
.dg26-age-handle::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#c9a45c;border:2px solid #0c0c0c;cursor:pointer;pointer-events:auto}
.dg26-age-handle::-webkit-slider-runnable-track{background:transparent}
.dg26-age-readout{text-align:center;font-size:16px;color:#999;margin-top:6px}

/* ---------- Custom elegant multiselect dropdown ---------- */
.dg26-msel{position:relative}
.dg26-msel-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1a1a1a;color:#e8e0cf;border:1px solid #333;border-radius:10px;padding:12px 14px;font-size:18px;font-weight:500;cursor:pointer;text-align:left;transition:border-color .2s cubic-bezier(.4,0,.2,1),background .2s cubic-bezier(.4,0,.2,1)}
.dg26-msel-trigger:hover{border-color:#555}
.dg26-msel.dg26-msel-open .dg26-msel-trigger{border-color:#c9a45c;background:#201a0f}
.dg26-msel-trigger i,.dg26-msel-trigger .dg26-ic{font-size:13px;color:#999;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.dg26-msel.dg26-msel-open .dg26-msel-trigger i,.dg26-msel.dg26-msel-open .dg26-msel-trigger .dg26-ic{transform:rotate(180deg);color:#c9a45c}
.dg26-msel-trigger-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg26-msel-trigger.dg26-msel-has-value{color:#f3ecd9}

.dg26-msel-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#161616;border:1px solid #333;border-radius:12px;padding:8px;box-shadow:0 12px 28px rgba(0,0,0,0.55);z-index:50;opacity:0;visibility:hidden;transform:scale(.96) translateY(-4px);transform-origin:top center;transition:opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .18s;max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c9a45c #1a1a1a}
.dg26-msel.dg26-msel-up .dg26-msel-panel{top:auto;bottom:calc(100% + 6px);transform-origin:bottom center;transform:scale(.96) translateY(4px)}
.dg26-msel.dg26-msel-open .dg26-msel-panel{opacity:1;visibility:visible;transform:scale(1) translateY(0)}
.dg26-msel-panel::-webkit-scrollbar{width:6px}
.dg26-msel-panel::-webkit-scrollbar-track{background:#1a1a1a;border-radius:3px}
.dg26-msel-panel::-webkit-scrollbar-thumb{background:#c9a45c;border-radius:3px}

.dg26-msel-option{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;transition:background .15s cubic-bezier(.4,0,.2,1)}
.dg26-msel-option:hover{background:#1f1f1f}
.dg26-msel-option input{position:absolute;opacity:0;width:1px;height:1px}
.dg26-msel-check{width:18px;height:18px;border-radius:6px;border:1.5px solid #444;background:#0c0c0c;flex-shrink:0;position:relative;transition:border-color .15s,background .15s}
.dg26-msel-check::after{content:"";position:absolute;top:3px;left:6px;width:4px;height:8px;border:solid #1a1408;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s cubic-bezier(.34,1.56,.64,1)}
.dg26-msel-option input:checked + .dg26-msel-check{background:#c9a45c;border-color:#c9a45c}
.dg26-msel-option input:checked + .dg26-msel-check::after{transform:rotate(45deg) scale(1)}
.dg26-msel-text{font-size:17px;color:#ddd}
.dg26-msel-option input:checked ~ .dg26-msel-text{color:#f3ecd9;font-weight:600}

.dg26-msel-check-round{border-radius:50%}
.dg26-msel-check-round::after{top:4px;left:4px;width:8px;height:8px;border:none;border-radius:50%;background:#1a1408;transform:scale(0);transition:transform .15s cubic-bezier(.34,1.56,.64,1)}
.dg26-msel-option input:checked + .dg26-msel-check-round::after{transform:scale(1)}

@media (min-width:1024px){
	.dg26-active-chip{font-size:13px}
	.dg26-active-chip button{font-size:14px}
	.dg26-active-chips-clear{font-size:13px}
	.dg26-toggle-label{font-size:14px}
	.dg26-age-readout{font-size:13px}
	.dg26-msel-trigger{font-size:15px}
	.dg26-msel-trigger i,.dg26-msel-trigger .dg26-ic{font-size:11px}
	.dg26-msel-text{font-size:14.5px}
}