/*
 * Dareecha premium design layer (Growth > Settings > Design)
 * Neutral, Apple-inspired palette, one typeface (Inter / system UI), soft radii and glass header.
 * Loaded after the theme CSS; turning the setting off restores the original theme.
 */

@font-face { font-family: 'Growth Inter'; src: url('../fonts/inter/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Growth Inter'; src: url('../fonts/inter/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Growth Inter'; src: url('../fonts/inter/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Growth Inter'; src: url('../fonts/inter/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root, [data-bs-theme=light] {
    --g-bg: #ffffff;
    --g-surface: #f5f5f7;
    --g-surface-2: #fbfbfd;
    --g-ink: #1d1d1f;
    --g-ink-2: #6e6e73;
    --g-ink-3: #86868b;
    --g-line: #d2d2d7;
    --g-line-soft: #e8e8ed;
    --g-accent: var(--g-accent-custom, #0071e3);
    --g-accent-hover: color-mix(in srgb, var(--g-accent) 88%, #fff);
    --g-accent-soft: color-mix(in srgb, var(--g-accent) 10%, transparent);
    --g-glass: rgba(255, 255, 255, .78);
    --g-shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .06);
    --g-radius: 18px;
    --g-radius-sm: 12px;
    --g-font: 'Growth Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --g-font-display: 'Growth Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Theme variables */
    --vr-theme-color: var(--g-accent);
    --vr-block-color: var(--g-ink);
    --vr-mega-menu-color: var(--g-ink);
    --vr-footer-bg: var(--g-surface);
    --vr-font-primary: var(--g-font-display);
    --vr-font-secondary: var(--g-font);
    --vr-font-content: var(--g-font);
    --swiper-theme-color: var(--g-accent);
    --growth-accent: var(--g-accent);

    /* Neutral grey scale (replaces the theme's zinc greys) */
    --vr-gray-25: #fbfbfd; --vr-gray-50: #f9f9fb; --vr-gray-75: #f7f7f9; --vr-gray-100: #f5f5f7; --vr-gray-125: #f0f0f3;
    --vr-gray-150: #ebebef; --vr-gray-175: #e8e8ed; --vr-gray-200: #e3e3e8; --vr-gray-225: #dedee3; --vr-gray-250: #d9d9de;
    --vr-gray-275: #d5d5da; --vr-gray-300: #d2d2d7; --vr-gray-325: #c7c7cc; --vr-gray-350: #b8b8bd; --vr-gray-375: #aeaeb2;
    --vr-gray-400: #a1a1a6; --vr-gray-425: #98989d; --vr-gray-450: #8e8e93; --vr-gray-475: #86868b; --vr-gray-500: #6e6e73;
    --vr-gray-525: #67676c; --vr-gray-550: #616166; --vr-gray-575: #5a5a5f; --vr-gray-600: #515154; --vr-gray-625: #4a4a4e;
    --vr-gray-650: #464649; --vr-gray-675: #424245; --vr-gray-700: #3a3a3c; --vr-gray-725: #363638; --vr-gray-750: #333336;
    --vr-gray-775: #2c2c2e; --vr-gray-800: #28282a; --vr-gray-825: #252527; --vr-gray-850: #222224; --vr-gray-875: #202022;
    --vr-gray-900: #1d1d1f; --vr-gray-925: #161617; --vr-gray-950: #0b0b0c; --vr-gray-975: #050505;
}

[data-bs-theme=dark] {
    --g-bg: #000000;
    --g-surface: #161617;
    --g-surface-2: #1d1d1f;
    --g-ink: #f5f5f7;
    --g-ink-2: #a1a1a6;
    --g-ink-3: #86868b;
    --g-line: #424245;
    --g-line-soft: #2c2c2e;
    --g-accent: var(--g-accent-custom-dark, #2997ff);
    --g-glass: rgba(22, 22, 23, .78);
    --g-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
    --vr-block-color: var(--g-ink);
    --vr-footer-bg: #161617;
}

/* ---------- Base typography ---------- */
body {
    font-family: var(--g-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.003em;
}
h1, h2, h3, h4, h5, h6, .title, .post-title, .page-title {
    font-family: var(--g-font-display);
    letter-spacing: -0.018em;
}
h1, .post-title, .page-title { font-weight: 700; letter-spacing: -0.028em; }
::selection { background: var(--g-accent-soft); }
a { transition: color .15s ease; }

/* Article reading experience */
.post-content .post-title { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); line-height: 1.1; margin-bottom: .75rem; }
.post-content .post-summary { font-family: var(--g-font); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); font-weight: 400; line-height: 1.5; color: var(--g-ink-2); letter-spacing: -0.01em; }
.entry-content { font-size: 1.0625rem; line-height: 1.72; }
.entry-content h2 { font-size: 1.6rem; font-weight: 700; margin-top: 2.2rem; }
.entry-content h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.6rem; }
.entry-content a:not(.btn) { color: var(--g-accent); text-decoration: none; }
.entry-content a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { border-radius: var(--g-radius-sm); }
.entry-content blockquote { border-left: 3px solid var(--g-accent) !important; color: var(--g-ink-2); }
.entry-content table { border-radius: var(--g-radius-sm); overflow: hidden; }

/* ---------- Header ---------- */
.topbar { --tb-bg: var(--g-surface); --tb-text: var(--g-ink-2); font-size: 12px; letter-spacing: 0; border-bottom: 1px solid var(--g-line-soft); }
.topbar a, .topbar .nav-link { color: var(--g-ink-2) !important; }
.topbar a:hover { color: var(--g-ink) !important; }
.header-brand { padding-top: 14px !important; padding-bottom: 14px !important; }

#sticky-menu-wrapper, .mega-menu-wrapper { background: transparent; }
.mega-menu-wrapper {
    background-color: var(--g-glass) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 0 !important;
    box-shadow: 0 1px 0 var(--g-line-soft) !important;
}
.mega-menu-wrapper .navbar .nav-link { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--g-ink); }
.mega-menu-wrapper .navbar .nav-item.active > .nav-link, .mega-menu-wrapper .navbar .nav-link:hover { color: var(--g-accent); }
.mega-menu-wrapper .navbar-brand .logo { max-height: 36px; width: auto; }
.mega-menu-wrapper .dropdown-menu, .mega-menu .mega-menu-content, .header-search-dropdown {
    border: 1px solid var(--g-line-soft) !important;
    border-radius: var(--g-radius) !important;
    box-shadow: var(--g-shadow) !important;
    overflow: hidden;
}
.search-icon-btn { color: var(--g-ink); }
.growth-header-ad { padding: 12px 0; display: flex; justify-content: center; }

/* ---------- Buttons, forms, badges ---------- */
.btn-custom, .btn-primary, .btn-nav-subscribe {
    border-radius: 980px !important;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
    box-shadow: none !important;
}
.btn-custom:hover, .btn-primary:hover { filter: brightness(1.06); }
.btn-outline-secondary { border-radius: 980px; border-color: var(--g-line); color: var(--g-ink); }
.btn-outline-secondary:hover { background: var(--g-surface); color: var(--g-ink); border-color: var(--g-line); }
.form-control, .form-select { border-radius: var(--g-radius-sm); border-color: var(--g-line); }
.form-control:focus, .form-select:focus { border-color: var(--g-accent); box-shadow: 0 0 0 4px var(--g-accent-soft); }

.badge-category {
    border-radius: 980px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    text-shadow: none !important;
    background-color: rgba(29, 29, 31, .72) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 0 11px !important;
}

/* ---------- Cards & lists ---------- */
.post-item .image, .post-item-mid .image, .post-item-small .image, .post-item-horizontal .image,
.section-featured .image, .slider-item, .post-image-preview, .post-image-preview img,
.featured-slider .item, .featured-item, .item-featured, .main-slider .item {
    border-radius: var(--g-radius-sm);
    overflow: hidden;
}
.post-item .title a, .post-item-mid .title a, .post-item-small .title a, .post-item-horizontal .title a { letter-spacing: -0.012em; }
.post-item .title a:hover, .post-item-mid .title a:hover, .post-item-small .title a:hover, .post-item-horizontal .title a:hover { color: var(--g-accent); }
.item-meta, .post-meta { color: var(--g-ink-3); }

.section-title { border-bottom: 1px solid var(--g-line) !important; }
.section-title .title { font-weight: 700; letter-spacing: -0.02em; }
.section-title .title::after, .section-title::after { background-color: var(--g-ink) !important; }

.widget-head {
    background: transparent !important;
    color: var(--g-ink) !important;
    height: auto !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--g-line);
}
.widget-head .title { font-weight: 700 !important; letter-spacing: -0.015em; text-transform: none !important; font-size: 1.05rem !important; }

.pagination .page-item .page-link { border-radius: 980px !important; border-color: var(--g-line); color: var(--g-ink); }
.pagination .page-item.active .page-link { background: var(--g-ink); border-color: var(--g-ink); color: var(--g-bg); }

.btn-scroll-up { background: var(--g-glass) !important; color: var(--g-ink) !important; border: 1px solid var(--g-line) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

/* ---------- Footer (premium markup) ---------- */
.growth-footer { background: var(--g-surface); color: var(--g-ink-2); font-size: 12.5px; line-height: 1.6; margin-top: 90px; padding: 48px 0 24px; border-top: 1px solid var(--g-line-soft); }
.growth-footer a { color: var(--g-ink-2); text-decoration: none; }
.growth-footer a:hover { color: var(--g-ink); text-decoration: underline; text-underline-offset: 3px; }
.growth-footer-brand { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--g-line); }
.growth-footer-brand .logo { max-height: 38px; width: auto; }
.growth-footer-about { max-width: 520px; margin: 10px 0 0; font-size: 13px; }
.growth-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px; }
.growth-footer-col h4 { font-family: var(--g-font); font-size: 12.5px; font-weight: 600; color: var(--g-ink); letter-spacing: 0; margin: 0 0 10px; }
.growth-footer-col ul { list-style: none; padding: 0; margin: 0; }
.growth-footer-col li { margin: 0 0 7px; }
.growth-footer .newsletter-inputs { display: flex; gap: 6px; }
.growth-footer .newsletter-input { border-radius: 980px; font-size: 13px; background: var(--g-bg); }
.growth-footer .newsletter-button { border-radius: 980px; white-space: nowrap; }
.growth-footer form input[name="url"] { position: absolute; left: -9999px; }
.growth-footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--g-line); }
.growth-footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0; }
.growth-footer .footer-social-links svg { opacity: .8; }

/* ---------- Growth components pick up the palette ---------- */
.growth-toc, .growth-signup, .growth-affiliate, .growth-facts div, .growth-tool-card, .growth-country-card, .growth-block-card,
.growth-prompt, .growth-product-card, .growth-office, .growth-service, .growth-side-box, .growth-calc, .growth-order-form, .growth-hub-card {
    border-radius: var(--g-radius) !important;
    border-color: var(--g-line-soft) !important;
}
.growth-tools-nav a, .growth-chip-row a { font-weight: 500; }
.growth-chat-toggle { box-shadow: var(--g-shadow); }

/* ---------- Urdu / RTL ---------- */
[dir=rtl] body, [dir=rtl] .entry-content, [dir=rtl] .post-title, [dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3, [dir=rtl] .title {
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', var(--g-font);
    letter-spacing: 0;
}
[dir=rtl] .entry-content { line-height: 2.2; font-size: 1.05rem; }
[dir=rtl] .post-content .post-title { line-height: 1.8; }

@media (max-width: 767px) {
    .entry-content { font-size: 1.02rem; }
    .growth-footer { margin-top: 60px; }
}