/* ======================================================
DirectoryWeb — MODERN THEME
Unique redesign inspired by gambling/traffic-arbitrage
directory & review competitors (dark UI, accent CTAs,
rating badges, sticky ad slots, card-grid layout).
This file is additive: it overrides custom.css/ssg.css
without touching DLE tags/placeholders anywhere.
====================================================== */

:root{
--mw-bg: #0b0e14;
--mw-bg-soft: #10141d;
--mw-surface: #141927;
--mw-surface-2: #1a2032;
--mw-border: #262c3d;
--mw-text: #e9ecf5;
--mw-text-dim: #9aa3b8;
--mw-text-faint: #6b7389;
--mw-accent: #f5b942;
--mw-accent-2: #6c5ce7;
--mw-accent-3: #22d3b0;
--mw-danger: #ff5c7a;
--mw-success: #22c55e;
--mw-radius-sm: 8px;
--mw-radius: 14px;
--mw-radius-lg: 22px;
--mw-shadow: 0 10px 30px rgba(0,0,0,.35);
--mw-shadow-sm: 0 4px 14px rgba(0,0,0,.25);
--mw-grad-accent: linear-gradient(135deg,#f5b942 0%,#ff8a3d 100%);
--mw-grad-hero: radial-gradient(1200px 500px at 15% -10%, rgba(108,92,231,.35), transparent 60%),
radial-gradient(900px 500px at 90% 0%, rgba(245,185,66,.18), transparent 55%),
linear-gradient(180deg,#0b0e14 0%, #0d111a 100%);
--mw-font: 'Rubik', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body{
background: var(--mw-bg) !important;
color: var(--mw-text) !important;
font-family: var(--mw-font) !important;
}

a{ color: var(--mw-text); }
a:hover{ color: var(--mw-accent); }

.container.tb{
background: transparent !important;
}

.mw-navbar{
position: sticky;
top: 0;
z-index: 1030;
display:flex;
align-items:center;
justify-content:space-between;
gap: 16px;
padding: 14px 22px;
background: rgba(11,14,20,.85);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--mw-border);
}
.mw-logo{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
font-size:20px;
letter-spacing:.2px;
color:var(--mw-text) !important;
}
.mw-logo span{
background: var(--mw-grad-accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mw-navbar nav a{
color: var(--mw-text-dim);
font-weight:500;
font-size:14.5px;
margin: 0 10px;
transition:.15s color;
}
.mw-navbar nav a:hover{ color: var(--mw-text); }

.mw-hero{
background: var(--mw-grad-hero);
border-radius: 0 0 28px 28px;
padding: 46px 24px 34px;
margin-bottom: 18px;
text-align:center;
border-bottom: 1px solid var(--mw-border);
}
.mw-hero h1{
font-size: clamp(26px, 4vw, 40px);
font-weight: 800;
color: var(--mw-text);
margin: 0 0 10px;
}
.mw-hero h1 span{
background: var(--mw-grad-accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mw-hero p{
color: var(--mw-text-dim);
max-width: 640px;
margin: 0 auto 20px;
font-size: 15.5px;
}
.mw-hero-stats{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
}
.mw-chip{
background: var(--mw-surface);
border: 1px solid var(--mw-border);
color: var(--mw-text-dim);
padding: 8px 16px;
border-radius: 999px;
font-size: 13.5px;
font-weight:600;
}
.mw-chip b{ color: var(--mw-accent); font-weight:700; }

.banner-panel{
display:grid !important;
grid-template-columns: repeat(2,1fr) !important;
gap: 12px !important;
background: transparent !important;
}
.banner{
background: repeating-linear-gradient(135deg, #141927, #141927 10px, #171d2c 10px, #171d2c 20px) !important;
border: 1px dashed #333c54 !important;
border-radius: var(--mw-radius-sm) !important;
color: var(--mw-text-faint) !important;
box-shadow: none !important;
display:flex !important;
align-items:center;
justify-content:center;
transition:.15s border-color;
}
.banner:hover{ border-color: var(--mw-accent) !important; }

.mw-section-title{
display:flex;
align-items:center;
gap:10px;
margin: 28px 0 14px;
color: var(--mw-text);
font-size: 20px;
font-weight:700;
}
.mw-section-title:before{
content:"";
width:4px;
height:20px;
border-radius:4px;
background: var(--mw-grad-accent);
display:inline-block;
}

.mw-card{
background: var(--mw-surface);
border: 1px solid var(--mw-border);
border-radius: var(--mw-radius);
overflow:hidden;
transition: .2s transform, .2s border-color, .2s box-shadow;
height:100%;
display:flex;
flex-direction:column;
}
.mw-card:hover{
transform: translateY(-4px);
border-color: rgba(245,185,66,.45);
box-shadow: var(--mw-shadow);
}
.mw-card .mw-card-img{
position:relative;
aspect-ratio: 16/9;
overflow:hidden;
background:#0e1320;
}
.mw-card .mw-card-img img{
width:100%; height:100%; object-fit:cover;
transition:.3s transform;
}
.mw-card:hover .mw-card-img img{ transform: scale(1.06); }
.mw-card-badge{
position:absolute; top:10px; left:10px;
background: var(--mw-grad-accent);
color:#1a1200;
font-size:11.5px;
font-weight:800;
padding:4px 10px;
border-radius:999px;
letter-spacing:.3px;
}

.mw-card-body{
padding: 14px 16px 16px;
display:flex;
flex-direction:column;
gap:8px;
flex:1;
}
.mw-card-title{
font-size:16px;
font-weight:700;
color: var(--mw-text);
line-height:1.3;
}
.mw-card-title a{ color: var(--mw-text); }
.mw-card-title a:hover{ color: var(--mw-accent); }
.mw-card-excerpt{
color: var(--mw-text-dim);
font-size:13.5px;
line-height:1.5;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.mw-card-meta{
margin-top:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding-top:10px;
border-top: 1px solid var(--mw-border);
font-size:12.5px;
color: var(--mw-text-faint);
}
.mw-rating{
display:flex;
align-items:center;
gap:4px;
color: var(--mw-accent);
font-weight:700;
}
.mw-rating .star{ color:#3a4258; }
.mw-rating .star.on{ color: var(--mw-accent); }
.mw-cta{
display:inline-flex;
align-items:center;
gap:6px;
background: var(--mw-grad-accent);
color:#1a1200 !important;
font-weight:700;
font-size:13px;
padding:7px 14px;
border-radius:999px;
transition:.15s filter;
}
.mw-cta:hover{ filter:brightness(1.08); color:#1a1200 !important; }

.sidebar .card,
.sidebar .side-block-add{
background: var(--mw-surface) !important;
border: 1px solid var(--mw-border) !important;
border-radius: var(--mw-radius) !important;
box-shadow:none !important;
}
.sidebar h5, .sidebar .card-title{ color: var(--mw-text) !important; }

.footer{
background: var(--mw-surface) !important;
border-top: 1px solid var(--mw-border);
margin-top: 40px;
border-radius: 22px 22px 0 0;
}
.footer .media-body h5{
color: var(--mw-text) !important;
font-weight:700;
}
.footer a.text-dark, .footer .text-dark{
color: var(--mw-text-dim) !important;
}
.footer a.text-dark:hover{ color: var(--mw-accent) !important; }
.footer .ficn{ color: var(--mw-accent) !important; }

.text-dark{ color: var(--mw-text) !important; }
.wrap, .comments{ color: var(--mw-text); }
.comments h3{ color: var(--mw-text); }

@media (max-width: 768px){
.mw-hero{ padding: 34px 16px 26px; border-radius:0 0 20px 20px; }
.mw-section-title{ font-size:18px; }
}

#nst.navbar{
background: rgba(11,14,20,.9) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--mw-border);
padding: 10px 18px;
}
#nst .site-name{
font-weight:800;
font-size:19px;
letter-spacing:.2px;
background: var(--mw-grad-accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
}
#nst .nav-link{
color: var(--mw-text-dim) !important;
font-weight:500;
font-size:14.5px;
}
#nst .nav-link:hover{ color: var(--mw-text) !important; }
#nst .dropdown-menu{
background: var(--mw-surface);
border: 1px solid var(--mw-border);
border-radius: var(--mw-radius-sm);
}
#nst .dropdown-menu a{ color: var(--mw-text-dim) !important; }
#nst .dropdown-menu a:hover{ color: var(--mw-accent) !important; background:transparent; }
#nst .form-control{
background: var(--mw-surface-2);
border: 1px solid var(--mw-border);
color: var(--mw-text);
}
#nst .form-control::placeholder{ color: var(--mw-text-faint); }
#nst .btn-secondary{
background: var(--mw-grad-accent);
border: none;
color:#1a1200;
}
#nst .navbar-toggler{ border-color: var(--mw-border); }
#nst .navbar-toggler-icon{ filter: invert(1); }

.mw-hero-wrap{ padding: 0 0 4px; }

.mw-blogcard{
background: var(--mw-surface) !important;
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 18px !important;
overflow: hidden;
box-shadow: 0 10px 30px -18px rgba(0,0,0,.6);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mw-blogcard:hover{
transform: translateY(-4px);
border-color: rgba(245,185,66,.35) !important;
box-shadow: 0 18px 40px -16px rgba(0,0,0,.75);
}
.mw-blogcard .card-body{background: transparent !important;}
.mw-blogcard .img-fluid{
border-radius: 14px !important;
object-fit: cover;
aspect-ratio: 16/10;
}
.mw-blogcard .shtitle a,
.mw-blogcard .shtitle a.text-dark{
color: #f4f6fb !important;
font-weight: 600;
}
.mw-blogcard .shtitle a:hover{color: var(--mw-accent) !important;}
.mw-blogcard .auth{color: #8891a8 !important;}
.mw-blogcard .noimg{color: #aab0c4 !important;}
.mw-blogcard .badge-warning{
background: var(--mw-accent) !important;
color: #0b0e14 !important;
border: none;
}
.mw-blogcard .tags{margin-top: .6rem;}
.mw-blogcard .tags a{
display: inline-block;
background: rgba(255,255,255,.06);
color: #c8cde0 !important;
padding: 3px 12px;
border-radius: 20px;
font-size: .78rem;
margin: 2px 6px 2px 0;
text-decoration: none;
}
.mw-blogcard .tags a:hover{background: var(--mw-accent) !important; color: #0b0e14 !important;}
.mw-blogcard .card-footer{
background: rgba(255,255,255,.02) !important;
border-top: 1px solid rgba(255,255,255,.07) !important;
color: #9aa1b8;
}
.mw-blogcard .card-footer .btn-light{
background: rgba(255,255,255,.08) !important;
border-color: transparent !important;
color: #eee !important;
}
.mw-blogcard .card-footer .btn-light:hover{background: rgba(255,255,255,.16) !important;}

.dropdown-menu{
background: var(--mw-surface) !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
.dropdown-menu .dropdown-item{color: #d7dbe8 !important;}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
background: rgba(255,255,255,.08) !important;
color: #fff !important;
}



/* FIX: .banner-panel must collapse to 1 column on mobile; overrides the non-responsive !important rule above (this file loads last in the cascade) */
@media (max-width: 768px) {
  .banner-panel {
    grid-template-columns: 1fr !important;
  }
}