/* =========================================================================
   NamaTSP — enhancements layer
   Loaded AFTER the original theme files, so light mode stays byte-for-byte
   identical to namatsp.ir while dark mode and the extra polish live here.
   ========================================================================= */

:root {
    --nama-primary: #656fe0;
    --nama-primary-light: #869dff;
    --nama-grad: linear-gradient(180deg, #656fe0 0%, #869dff 100%);
    --nama-radius: 14px;
    --nama-shadow: 0 12px 40px rgba(101, 111, 224, .12);
    --nama-transition: .28s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- global polish (applies to both themes) ---------------------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sec-hd .sec-title {
    letter-spacing: -.2px;
}

/* nicer, more "designed" cards */
.features .features-box,
.step-item,
.accordion-item,
.team .name-box {
    transition: transform var(--nama-transition), box-shadow var(--nama-transition),
                background-color var(--nama-transition), border-color var(--nama-transition);
}

.features .features-box:hover {
    transform: translateY(-6px);
}

/* sticky navbar: translucent + blurred so the hero text behind it stays readable
   (the original paints a solid white bar that hides the first lines of the hero) */
.navbar-custom.sticky,
.nav-sticky {
    background-color: rgba(255, 255, 255, .82) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    transition: background-color var(--nama-transition), box-shadow var(--nama-transition);
}

.navbar-custom.sticky.scrolled,
.nav-sticky.scrolled {
    background-color: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 4px 24px -12px rgba(16, 24, 40, .35);
}

body[data-layout-mode="dark"] .navbar-custom.sticky,
body[data-layout-mode="dark"] .nav-sticky {
    background-color: rgba(23, 31, 38, .85) !important;
}

body[data-layout-mode="dark"] .navbar-custom.sticky.scrolled,
body[data-layout-mode="dark"] .nav-sticky.scrolled {
    background-color: rgba(23, 31, 38, .96) !important;
}

/* the fixed navbar must never sit on top of the hero copy */
.home-4 {
    padding-top: 172px;
}

/* mode toggle button — keep the theme look but make it clearly clickable */
#mode {
    transition: transform var(--nama-transition), background-color var(--nama-transition);
}

#mode:hover {
    transform: scale(1.08);
}

/* buttons: slightly springier */
.btn.bg-gradiant,
.btn.btn-primary {
    transition: transform var(--nama-transition), box-shadow var(--nama-transition), filter var(--nama-transition);
}

.btn.bg-gradiant:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(101, 111, 224, .75);
}

/* FAQ accordion — cleaner */
.accordion-item {
    border: 1px solid rgba(101, 111, 224, .14);
    border-radius: var(--nama-radius) !important;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}

.accordion-button {
    font-weight: 500;
    background: #fff;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    color: var(--nama-primary);
    background: rgba(101, 111, 224, .06);
}

.accordion-body {
    line-height: 2;
    font-size: 14.5px;
}

/* steps */
.step-item {
    border-radius: var(--nama-radius);
    padding: 28px 20px;
    background: #fff;
    height: 100%;
    box-shadow: 0 6px 24px -14px rgba(16, 24, 40, .28);
}

.step-item:hover {
    box-shadow: var(--nama-shadow);
}

/* the CTA block sits at the left end of the navbar: the two buttons stacked,
   with the day/night toggle to their left — same as namatsp.ir */
.navbar-custom .navbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.navbar-custom .navbar-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.navbar-custom .navbar-cta .btn {
    white-space: nowrap;
    text-align: center;
    margin: 0;
    padding: 9px 18px;
    font-size: 13px;
    line-height: 1.4;
}

/* the main menu stays on one line, and the type scales with the viewport so it
   stays comfortably readable on a wide screen */
.navbar-custom .navbar-nav .nav-link {
    font-size: clamp(13.5px, 0.62vw + 6.5px, 17px) !important;
    padding: 24px clamp(9px, 0.4vw, 15px) !important;
    white-space: nowrap;
}

.navbar-custom .navbar-nav .dropdown-toggle {
    padding-inline-end: clamp(14px, 0.5vw, 20px) !important;
}

/* dropdown entries inherit Bootstrap's `text-align: left` from .dropdown-menu,
   which looks wrong in an RTL layout */
.navbar-custom .dropdown-menu {
    text-align: right;
}

.navbar-custom .dropdown-menu .dropdown-item,
.navbar-custom .dropdown-menu .nav-link {
    text-align: right;
    direction: rtl;
}

/* narrower screens: keep it readable, allow a second line if it really has to */
@media (max-width: 1199.98px) {
    .navbar-custom .navbar-nav .nav-link {
        font-size: 13px !important;
        padding: 22px 8px !important;
    }
}

/* ---------- day / night toggle -------------------------------------------
   The upstream theme ships `.mode-btn` but the original markup never applied
   it, so on namatsp.ir the control is invisible. We place it inside the main
   menu (top-left, next to the login button) with a sun / moon icon.
   ------------------------------------------------------------------------ */
.navbar-custom .me-auto {
    display: flex;
    align-items: center;
}

#mode.mode-btn {
    position: static;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nama-grad);
    color: #fff !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px -9px rgba(101, 111, 224, .9);
    transition: transform var(--nama-transition), box-shadow var(--nama-transition), filter var(--nama-transition);
}

#mode.mode-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

#mode.mode-btn i {
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* light theme -> offer the moon; dark theme -> offer the sun */
body:not([data-layout-mode="dark"]) #mode.mode-btn .mode-dark,
body[data-layout-mode="dark"] #mode.mode-btn .mode-light {
    display: flex;
}

@media (max-width: 991.98px) {
    #mode.mode-btn {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
}

/* ---------- navigation highlighting --------------------------------------
   Bootstrap paints `.dropdown-item.active` with its default blue background.
   Because the upstream scrollspy also watches dropdown entries, that produced
   the "wrong menu item stays highlighted" behaviour. We now drive the active
   state ourselves (see buildNavSpy in theme.js) and restyle the state so it
   matches the brand instead of Bootstrap blue.
   ------------------------------------------------------------------------ */
.navbar .navbar-nav .nav-link.active {
    color: var(--nama-primary) !important;
}

.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:hover {
    background-color: rgba(101, 111, 224, .1) !important;
    color: var(--nama-primary) !important;
}

/* dropdown toggles should never look "selected" just because the menu is open */
.navbar .navbar-nav .dropdown-toggle.active,
.navbar .navbar-nav .dropdown-toggle.show {
    color: inherit;
}

body[data-layout-mode="dark"] .navbar .dropdown-menu .dropdown-item.active,
body[data-layout-mode="dark"] .navbar .dropdown-menu .dropdown-item:active,
body[data-layout-mode="dark"] .navbar .dropdown-menu .dropdown-item:focus,
body[data-layout-mode="dark"] .navbar .dropdown-menu .dropdown-item:hover {
    background-color: rgba(101, 111, 224, .2) !important;
    color: var(--nama-primary-light) !important;
}

/* ---------- scroll-to-top ------------------------------------------------ */
.nama-scroll-top {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 999;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nama-grad);
    color: #fff !important;
    font-size: 24px;
    box-shadow: 0 10px 26px -10px rgba(101, 111, 224, .9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity var(--nama-transition), transform var(--nama-transition), visibility var(--nama-transition);
}

.nama-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nama-scroll-top:hover {
    filter: brightness(1.06);
}

/* team portraits — one uniform frame at the original site's size.
   The live page's inline style intends `height: 250px; object-fit: cover`, but a
   later duplicate rule overrides it with `height: auto`, so the real page ends up
   with uneven frames. We keep the frame at the size the portrait photos get on the
   original site (803×1024 → 350×446) and let `cover` crop whatever does not fit,
   so every card is identical. */
.team .tab-container .wrapper .tab .box-tab .effect {
    aspect-ratio: 803 / 1024;
    width: 100%;
    max-width: 350px;
    height: auto;
    display: block;
    background-color: #f1f1f1;
}

.team .tab-container .wrapper .tab .box-tab .effect img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    min-height: 0;
}

body[data-layout-mode="dark"] .team .tab-container .wrapper .tab .box-tab .effect {
    background-color: #212a33;
}

.team .tab-container .wrapper .tab .box-tab .name-box {
    max-width: 350px;
    margin-inline: auto;
}

/* name / role box under each portrait.
   The live page carries this in an inline <style> block inside the #team section,
   so it never made it into the theme stylesheet — reproduced here verbatim. */
.team .name-box {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
    margin-top: 10px;
    border-radius: 5px;
    max-width: 350px;
    margin-inline: auto;
}

.team .name-box h2 {
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 600;
}

.team .name-box div {
    font-size: 14px;
    color: #777;
}

@media (max-width: 768px) {
    .team .name-box h2 {
        font-size: 14px;
    }

    .team .name-box div {
        font-size: 12px;
    }
}

body[data-layout-mode="dark"] .team .name-box {
    background-color: #212a33;
}

body[data-layout-mode="dark"] .team .name-box h2 {
    color: #f4f7fb;
}

body[data-layout-mode="dark"] .team .name-box div {
    color: #93a3b3;
}

/* =========================================================================
   DARK MODE
   The upstream theme ships `body[data-layout-mode="dark"]` rules; these layer
   a complete, consistent dark palette on top of them.
   ========================================================================= */
body[data-layout-mode="dark"] {
    background-color: #171f26 !important;
    color: #e7ecf3;
}

body[data-layout-mode="dark"] h1,
body[data-layout-mode="dark"] h2,
body[data-layout-mode="dark"] h3,
body[data-layout-mode="dark"] h4,
body[data-layout-mode="dark"] h5,
body[data-layout-mode="dark"] h6 {
    color: #f4f7fb !important;
}

body[data-layout-mode="dark"] .text-dark,
body[data-layout-mode="dark"] a.text-dark {
    color: #e7ecf3 !important;
}

body[data-layout-mode="dark"] .text-muted,
body[data-layout-mode="dark"] p,
body[data-layout-mode="dark"] .para-desc,
body[data-layout-mode="dark"] .step-description,
body[data-layout-mode="dark"] .f-14 {
    color: rgba(231, 236, 243, .68) !important;
}

/* section backgrounds */
body[data-layout-mode="dark"] .bg-light,
body[data-layout-mode="dark"] section.bg-light {
    background-color: #1b232b !important;
}

body[data-layout-mode="dark"] .section {
    background-color: transparent;
}

/* topbar */
body[data-layout-mode="dark"] .tagline {
    background-color: #10161c !important;
    border-bottom: 1px solid #232c35;
}

body[data-layout-mode="dark"] .tagline .phone,
body[data-layout-mode="dark"] .tagline .email a {
    color: rgba(231, 236, 243, .78) !important;
}

/* navbar */
body[data-layout-mode="dark"] .navbar,
body[data-layout-mode="dark"] .nav-sticky {
    background-color: rgba(23, 31, 38, .94) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) !important;
}

body[data-layout-mode="dark"] .navbar .navbar-nav .nav-link {
    color: rgba(231, 236, 243, .86) !important;
}

body[data-layout-mode="dark"] .navbar .navbar-nav .nav-link:hover,
body[data-layout-mode="dark"] .navbar .navbar-nav .nav-link.active {
    color: var(--nama-primary-light) !important;
}

body[data-layout-mode="dark"] .navbar .dropdown-menu {
    background-color: #212a33;
    border: 1px solid #2e3944;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .85);
}

body[data-layout-mode="dark"] .navbar .dropdown-item {
    color: rgba(231, 236, 243, .82) !important;
}

body[data-layout-mode="dark"] .navbar .dropdown-item:hover,
body[data-layout-mode="dark"] .navbar .dropdown-item:focus {
    background-color: rgba(101, 111, 224, .16);
    color: #fff !important;
}

body[data-layout-mode="dark"] .btn.bg-light {
    background-color: #232c35 !important;
    color: #e7ecf3 !important;
}

/* hero */
body[data-layout-mode="dark"] .home-4 {
    background: linear-gradient(-10deg, #171f26 69%, #656fe0 100%) !important;
}

body[data-layout-mode="dark"] .home-4 a,
body[data-layout-mode="dark"] .home-4 .f-15 {
    color: var(--nama-primary-light) !important;
}

body[data-layout-mode="dark"] .home-4 .text-shadow-title {
    color: var(--nama-primary-light) !important;
}

/* section headings + step cards */
body[data-layout-mode="dark"] .sec-hd .sec-title,
body[data-layout-mode="dark"] .step-title,
body[data-layout-mode="dark"] .features-box h5 {
    color: #f4f7fb !important;
}

body[data-layout-mode="dark"] .sec-hd .heading {
    background-color: rgba(134, 157, 255, .45) !important;
}

body[data-layout-mode="dark"] .step-item {
    box-shadow: 0 6px 24px -14px rgba(0, 0, 0, .7);
}

body[data-layout-mode="dark"] .team .name-box,
body[data-layout-mode="dark"] .team .name-box div {
    color: rgba(231, 236, 243, .72);
}

/* links that the theme paints dark */
body[data-layout-mode="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: inherit;
}

body[data-layout-mode="dark"] #contact i.text-primary,
body[data-layout-mode="dark"] .text-primary {
    color: var(--nama-primary-light) !important;
}

body[data-layout-mode="dark"] .footer .footer-link a {
    color: rgba(231, 236, 243, .72) !important;
}

/* cards / steps / accordion */
body[data-layout-mode="dark"] .step-item,
body[data-layout-mode="dark"] .accordion-item,
body[data-layout-mode="dark"] .accordion-button,
body[data-layout-mode="dark"] .features .features-box {
    background-color: #212a33 !important;
    border-color: #2e3944 !important;
    color: #e7ecf3;
}

body[data-layout-mode="dark"] .accordion-button:not(.collapsed) {
    color: var(--nama-primary-light) !important;
    background-color: rgba(101, 111, 224, .14) !important;
}

body[data-layout-mode="dark"] .accordion-button::after {
    filter: invert(1) brightness(1.6);
}

body[data-layout-mode="dark"] .step-icon i,
body[data-layout-mode="dark"] .features-icon i {
    color: var(--nama-primary-light) !important;
}

/* team */
body[data-layout-mode="dark"] .team .name-box h2 {
    color: #f4f7fb;
}

/* footer */
body[data-layout-mode="dark"] .footer {
    background-color: #10161c !important;
}

body[data-layout-mode="dark"] .footer-link a {
    color: rgba(231, 236, 243, .7);
}

body[data-layout-mode="dark"] .footer-link a:hover {
    color: var(--nama-primary-light);
}

body[data-layout-mode="dark"] .navbar-brand .logo-light,
body[data-layout-mode="dark"] .footer .logo-light {
    display: inline-block !important;
}

body[data-layout-mode="dark"] .navbar-brand .logo-dark,
body[data-layout-mode="dark"] .footer .logo-dark {
    display: none !important;
}

body[data-layout-mode="dark"] .footer .logo-light,
body[data-layout-mode="dark"] .footer .logo-dark {
    filter: none;
}

/* images that are pure-white PNGs look wrong on dark — soften them */
body[data-layout-mode="dark"] .app-screenshot-item img,
body[data-layout-mode="dark"] .screenshot-img img {
    filter: brightness(.94) contrast(1.02);
}

/* =========================================================================
   RESPONSIVE POLISH
   ========================================================================= */
@media (max-width: 991.98px) {
    .navbar-custom .navbar-collapse {
        background: #fff;
        border-radius: 0 0 var(--nama-radius) var(--nama-radius);
        padding: 12px 16px;
        margin-top: 8px;
        box-shadow: 0 18px 40px -22px rgba(16, 24, 40, .45);
        max-height: 78vh;
        overflow-y: auto;
    }

    body[data-layout-mode="dark"] .navbar-custom .navbar-collapse {
        background: #212a33;
    }

    .navbar .me-auto {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        padding-top: 10px;
    }

    .home-4 {
        padding-top: 150px;
        padding-bottom: 48px;
    }

    .sec-title {
        font-size: 22px;
        line-height: 1.7;
    }
}

@media (max-width: 575.98px) {
    .step-item {
        padding: 22px 16px;
    }

    .btn.bg-gradiant.btn-lg {
        font-size: 14px;
        padding: 12px 18px;
        white-space: normal;
    }

    .contact-map .map {
        height: 300px !important;
    }
}

/* reduce motion for users who ask for it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}