/*================
    تست تغییرات 
 Template Name: AppCo App Landing Page Template - MODERN SNAP EDITION
 Description: Modern redesign with Snap style, glass morphism, and smooth animations
 Version: 2.0
 Author: Enhanced Version
=======================*/

/*TABLE OF CONTENTS*/
/*=====================
01. RESET CSS & CSS VARIABLES
02. BASE TYPOGRAPHY
03. PRE DEFINE CLASS CSS
04. HEADER CSS (Modern)
05. HERO SECTION CSS
06. PROMO SECTION CSS
07. ABOUT US CSS
08. FEATURE SECTION CSS (Modern)
09. VIDEO PROMO CSS
10. COUNTER CSS
11. PRICING CSS (Modern)
12. TESTIMONIAL CSS
13. CONTACT FORM CSS
14. FOOTER CSS
15. MODERN COMPONENTS (Snap Style)
16. BLOG SECTION CSS
17. NEW ADDITIONS (All original styles preserved)
=======================*/

/* ============================================
   CSS VARIABLES - MODERN DESIGN SYSTEM
   ============================================ */
:root {
    --snap-primary: #6C5CE7;
    --snap-primary-dark: #5B4BC4;
    --snap-primary-light: #8B7CF0;
    --snap-secondary: #A855F7;
    --snap-success: #10B981;
    --snap-danger: #EF4444;
    --snap-warning: #F59E0B;
    --snap-info: #3B82F6;
    --snap-dark: #1F2937;
    --snap-gray: #6B7280;
    --snap-light: #F9FAFB;
    --snap-white: #FFFFFF;
    --snap-black: #111827;
    --snap-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --snap-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --snap-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --snap-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --snap-shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --snap-radius-sm: 8px;
    --snap-radius: 12px;
    --snap-radius-md: 16px;
    --snap-radius-lg: 24px;
    --snap-radius-xl: 32px;
    --snap-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --snap-transition-smooth: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* -----------------------------------------
			   01. RESET CSS
-------------------------------------------- */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    overflow-y: scroll;
    font-size: 15px;
}

/* -----------------------------------------
           02. BASE TYPOGRAPHY (Modern)
-------------------------------------------- */

body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn, .btn-simple, a, .td-name, td {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

body {
    direction: rtl;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    font-family: 'Vazir', 'Open Sans', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    color: var(--snap-dark);
    font-weight: 400;
    line-height: 1.6;
}

p {
    margin-bottom: 1.25em;
}

h1, h2, h3, h4, h5 {
    margin: 0 0 1rem;
    font-family: 'Vazir', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    color: var(--snap-black);
    letter-spacing: -0.02em;
}

h1 {
    margin-top: 0;
    font-size: 3.052em;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

h2 {
    font-size: 2.441em;
}

h3 {
    font-size: 1.953em;
}

h4 {
    font-size: 1.563em;
}

h5 {
    font-size: 1.25em;
}

small, .text_small {
    font-size: 0.8em;
}

a {
    text-decoration: none !important;
    background-color: transparent;
    transition: var(--snap-transition);
}

strong, b {
    font-weight: 600;
    font-family: 'Vazir', 'Tahoma', sans-serif;
}

.badge {
    display: inline;
    padding: .25rem .5rem;
    font-size: 80%;
    font-weight: 700;
    font-family: 'Vazir', 'Tahoma', sans-serif;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 100px;
    transition: var(--snap-transition);
}

.badge-pill {
    padding-right: .875em;
    padding-left: .875em;
    border-radius: 50rem;
}

/*========================================
        03. PRE DEFINE CLASS CSS (Modern)
==========================================*/
.ptb-100 {
    padding: 100px 0;
}

.pt-100 {
    padding-top: 100px;
}

.pt-150 {
    padding-top: 150px;
}

.pb-100 {
    padding-bottom: 100px;
}

.mt--120 {
    margin-top: -120px;
}

.gray-light-bg {
    background: var(--snap-light);
}

.primary-bg {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
}

.secondary-bg {
    background: var(--snap-secondary);
}

.color-primary {
    color: var(--snap-primary);
}

.color-secondary {
    color: var(--snap-secondary);
}

.white-bg {
    background: var(--snap-white);
}

.bg-color-1 {
    background: #399fb6;
}

.bg-color-2 {
    background: #0ba077;
}

.bg-color-3 {
    background: #6582ed;
}

.bg-color-4 {
    background: #399fb6;
}

.icon-color-1 {
    background: #efdff7;
    color: #b17cc6;
}

.icon-color-2 {
    background-color: #c6e6fd;
    color: #63b0e3;
}

.icon-color-3 {
    background-color: #efe3e3;
    color: #ed7265;
}

.icon-color-4 {
    background-color: #ddedea;
    color: #45d7ba;
}

.icon-color-5 {
    background-color: #ffe0e3;
    color: #bd2130;
}

.icon-color-6 {
    background-color: #e2e8ff;
    color: #6582ed;
}

/* Modern Buttons - Snap Style */
.outline-btn, .solid-btn, .primary-solid-btn {
    padding: 12px 28px;
    font-family: 'Inter', 'Open Sans', sans-serif;
    font-weight: 600;
    border-radius: 100px;
    transition: var(--snap-transition);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.primary-solid-btn {
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: var(--snap-white);
    border: none;
    box-shadow: var(--snap-shadow-md);
}

    .primary-solid-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--snap-shadow-lg);
        background: linear-gradient(135deg, var(--snap-primary-dark), var(--snap-primary));
    }

.solid-btn {
    color: var(--snap-white);
    box-shadow: var(--snap-shadow-md);
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    border: none;
    border-radius: 100px;
}

    .solid-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--snap-shadow-lg);
        background: linear-gradient(135deg, var(--snap-primary-dark), var(--snap-primary));
    }

.outline-btn {
    border-radius: 100px;
    color: var(--snap-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--snap-primary);
    background: transparent;
}

    .outline-btn:hover {
        color: var(--snap-white);
        background: var(--snap-primary);
        transform: translateY(-2px);
        box-shadow: var(--snap-shadow-md);
    }

.primary-bg h1, .primary-bg p {
    color: #fff;
}

.white-bg h1, .white-bg p {
    color: inherit;
}

.google-play-btn, .app-store-btn {
    padding: 12px 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    border-radius: 100px;
    transition: var(--snap-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.google-play-btn {
    background: var(--snap-white);
    color: var(--snap-primary);
    border: 2px solid var(--snap-white);
}

    .google-play-btn:hover {
        background: transparent;
        color: var(--snap-white);
        transform: translateY(-2px);
    }

.app-store-btn {
    border-radius: 100px;
    color: var(--snap-white);
    border: 2px solid var(--snap-white);
    background: transparent;
}

    .app-store-btn:hover {
        background: var(--snap-white);
        color: var(--snap-primary);
        transform: translateY(-2px);
    }

/* Modern Form Controls */
.form-control {
    border: 2px solid #E5E7EB;
    border-radius: var(--snap-radius);
    padding: 14px 18px;
    font-size: 14px;
    transition: var(--snap-transition);
    width: 100%;
    background: var(--snap-white);
}

    .form-control:focus {
        outline: none;
        border-color: var(--snap-primary);
        box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.1);
    }

input[type]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder,
select.form-control.has-value {
    color: #9CA3AF !important;
    font-size: 13px;
}

input[type]:-moz-placeholder,
textarea:-moz-placeholder,
select:-moz-placeholder,
select.form-control.has-value {
    color: #9CA3AF;
    font-size: 13px;
}

input[type]::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder,
select.form-control.has-value {
    color: #9CA3AF;
    font-size: 13px;
}

input[type]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder,
select.form-control.has-value {
    color: #9CA3AF;
    font-size: 13px;
}

.section-heading h2 span {
    font-weight: 400;
    font-size: 2rem;
}


/*=========================================
            04. HEADER CSS (Modern)
============================================*/
.main-menu {
    position: inherit;
    top: inherit;
    left: inherit;
    right: inherit;
    width: auto;
    height: auto;
    transition: var(--snap-transition);
}

    .main-menu ul {
        text-align: left;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 4px;
    }

        .main-menu ul li {
            padding: 15px 0;
        }

            .main-menu ul li a span.badge.custom-nav-badge {
                position: absolute;
                top: 0;
                right: -15px;
            }

        .main-menu ul > li a {
            margin: 0;
            font-size: 14px;
            color: var(--snap-dark);
            display: block;
            font-weight: 500;
            background-color: transparent;
            border-radius: 100px;
            padding: 8px 20px;
            transition: var(--snap-transition);
        }

            .main-menu ul > li a:hover {
                background: rgba(108, 92, 231, 0.1);
                color: var(--snap-primary);
            }

        .main-menu ul > li .submenu {
            width: 250px;
            background-color: var(--snap-white);
            border: 1px solid #E5E7EB;
            border-radius: var(--snap-radius);
            position: absolute;
            top: 55px;
            right: -4.2em;
            left: 0;
            visibility: hidden;
            opacity: 0;
            transition: var(--snap-transition);
            transform: rotateX(-90deg) rotateY(0);
            transform-origin: 0 0;
            box-shadow: var(--snap-shadow-lg);
        }

            .main-menu ul > li .submenu.dropdown-menu {
                margin: 0;
                padding: 8px;
            }

        .main-menu ul > li:hover .submenu {
            visibility: visible;
            opacity: 1;
            transform: rotateX(0) rotateY(0);
        }

.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown > .dropdown-toggle:active {
    pointer-events: none;
}

.main-menu ul > li .submenu > a {
    display: block;
    padding: 10px 16px;
    margin: 0;
    color: var(--snap-dark);
    border-radius: var(--snap-radius-sm);
    transition: var(--snap-transition);
}

    .main-menu ul > li .submenu > a:hover {
        background: rgba(108, 92, 231, 0.1);
        color: var(--snap-primary);
    }

    .main-menu ul > li .submenu > a:active {
        background: inherit;
    }

.main-menu ul > li .submenu:before,
.main-menu ul > li .submenu:after {
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: 12px solid transparent;
    border-bottom: 12px solid var(--snap-white);
    top: -25px;
    left: calc(50% - 12px);
}

.main-menu ul li.dropdown .dropdown-toggle::after {
    position: relative;
    top: 2px;
}

.navbar-brand {
    font-size: inherit;
    height: auto;
    padding: 0;
    margin-bottom: -8px;
}

.navbar-toggler {
    background: transparent;
    padding: .5rem .75rem;
    font-size: inherit;
    transition: var(--snap-transition);
    border: none;
    border-radius: var(--snap-radius-sm);
}

.navbar-toggler3 {
    background: transparent;
    padding: .1rem .75rem;
    font-size: inherit;
    transition: var(--snap-transition);
}

.navbar-toggler span {
    color: var(--snap-white);
    opacity: 0.8;
    font-size: 17px;
}

.navbar-toggler:focus, .navbar-toggler:hover {
    outline: none;
    opacity: 1;
    background: rgba(255,255,255,0.1);
}

.custom-nav ul li a {
    color: #fafafa;
    opacity: 0.8;
}

.affix {
    background-color: var(--snap-primary-dark);
    transition: padding 0.2s ease-out;
}

.white-bg.affix, .custom-nav.affix {
    background: var(--snap-white);
    border-bottom: 1px solid #E5E7EB;
    box-shadow: var(--snap-shadow);
}

    .white-bg.affix ul li a {
        color: var(--snap-dark) !important;
        opacity: 0.8;
    }

.white-bg.custom-nav ul li a:hover {
    opacity: 1;
}

.bg-transparent ul li a {
    color: var(--snap-white);
    opacity: 0.8;
}

    .bg-transparent ul li a:hover, .white-bg.affix ul li a:hover {
        opacity: 1;
    }

.bg-transparent.affix {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%) !important;
}

.navbar {
    transition: var(--snap-transition);
    padding: 16px 0;
}

@media (min-width: 320px) and (max-width: 992px) {
    .navbar {
        background: var(--snap-primary) !important;
        padding: .95rem 1rem;
    }

        .white-bg.affix, .custom-nav.affix, .navbar.white-bg {
            background: var(--snap-white) !important;
            border-bottom: 1px solid #E5E7EB;
        }

    .white-bg.custom-nav ul li a, .custom-nav ul li a {
        color: var(--snap-dark) !important;
    }

    .white-bg.navbar .navbar-toggler span {
        color: var(--snap-primary);
    }

    .main-menu ul > li .submenu {
        left: 0;
        top: 10px;
        position: relative;
    }

    .main-menu ul {
        flex-direction: column;
    }

        .main-menu ul li {
            padding: 15px 0 0;
        }

        .main-menu ul > li a {
            margin: 0;
            padding: 10px 16px;
        }

        .main-menu ul > li .submenu:before, .main-menu ul > li .submenu:after {
            left: 15px;
        }

    .ptb-100 {
        padding: 55px 0;
    }

    .pt-100 {
        padding-top: 55px;
    }

    .pb-100 {
        padding-bottom: 55px;
    }
}

@media (min-width: 992px) {
    .navbar {
        border-bottom: 1px solid rgba(0, 0, 0, 0);
        background: transparent;
        transition: var(--snap-transition);
        -webkit-backface-visibility: hidden;
    }
}

/*=========================================
            05. HERO SECTION CSS (Modern)
============================================*/
.hero-animation-img, .hero-content-left {
    position: relative;
    z-index: 2;
}


    .hero-content-left h1 {
        font-weight: 600;
        font-size: 48px;
        line-height: 1.3;
    }

        .hero-content-left h1 span {
            font-weight: 800;
            background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

@media (min-width: 992px) {
    .hero-animation-img {
        position: relative;
        display: block;
        width: 100%;
    }

    .animation-one {
        -webkit-animation: move-one 7s ease-in-out infinite;
        animation: move-one 7s ease-in-out infinite;
    }

    @keyframes move-one {
        0% {
            -webkit-transform: translateX(0) translateY(5px);
            transform: translateX(0) translateY(5px)
        }

        50% {
            -webkit-transform: translateX(0) translateY(-5px);
            transform: translateX(0) translateY(-5px)
        }

        100% {
            -webkit-transform: translateX(0) translateY(5px);
            transform: translateX(0) translateY(5px)
        }
    }

    @-webkit-keyframes move-one {
        0% {
            -webkit-transform: translateX(0) translateY(5px);
            transform: translateX(0) translateY(5px)
        }

        50% {
            -webkit-transform: translateX(0) translateY(-5px);
            transform: translateX(0) translateY(-5px)
        }

        100% {
            -webkit-transform: translateX(0) translateY(5px);
            transform: translateX(0) translateY(5px)
        }
    }

    .animation-two {
        position: absolute;
        bottom: -10px;
        -webkit-animation: move-two 8s ease-in-out infinite;
        animation: move-two 8s ease-in-out infinite;
    }

    @-webkit-keyframes move-two {
        0% {
            -webkit-transform: translateX(-25px) translateY(-225px);
            transform: translateX(-25px) translateY(-225px)
        }

        50% {
            -webkit-transform: translateX(-25px) translateY(-205px);
            transform: translateX(-25px) translateY(-205px)
        }

        100% {
            -webkit-transform: translateX(-25px) translateY(-225px);
            transform: translateX(-25px) translateY(-225px)
        }
    }

    @keyframes move-two {
        0% {
            -webkit-transform: translateX(-25px) translateY(-225px);
            transform: translateX(-25px) translateY(-225px)
        }

        50% {
            -webkit-transform: translateX(-25px) translateY(-205px);
            transform: translateX(-25px) translateY(-205px)
        }

        100% {
            -webkit-transform: translateX(-25px) translateY(-225px);
            transform: translateX(-25px) translateY(-225px)
        }
    }

    .animation-three {
        position: absolute;
        -webkit-animation: move-three 9s ease-in-out infinite;
        animation: move-three 9s ease-in-out infinite
    }

    @-webkit-keyframes move-three {
        0% {
            -webkit-transform: translateX(-45px) translateY(-225px);
            transform: translateX(-45px) translateY(-225px)
        }

        50% {
            -webkit-transform: translateX(-45px) translateY(-205px);
            transform: translateX(-45px) translateY(-205px)
        }

        100% {
            -webkit-transform: translateX(-45px) translateY(-225px);
            transform: translateX(-45px) translateY(-225px)
        }
    }

    @keyframes move-three {
        0% {
            -webkit-transform: translateX(-45px) translateY(-225px);
            transform: translateX(-45px) translateY(-225px)
        }

        50% {
            -webkit-transform: translateX(-45px) translateY(-205px);
            transform: translateX(-45px) translateY(-205px)
        }

        100% {
            -webkit-transform: translateX(-45px) translateY(-225px);
            transform: translateX(-45px) translateY(-225px)
        }
    }

    .animation-four {
        position: absolute;
        -webkit-animation: move-four 6s ease-in-out infinite;
        animation: move-four 6s ease-in-out infinite;
        left: 0;
    }

    .animation-new {
        position: absolute;
        bottom: 10px;
    }

    @-webkit-keyframes move-four {
        0% {
            -webkit-transform: translateX(330px) translateY(-215px);
            transform: translateX(330px) translateY(-215px)
        }

        50% {
            -webkit-transform: translateX(330px) translateY(-240px);
            transform: translateX(330px) translateY(-240px)
        }

        100% {
            -webkit-transform: translateX(330px) translateY(-215px);
            transform: translateX(330px) translateY(-215px)
        }
    }

    @keyframes move-four {
        0% {
            -webkit-transform: translateX(330px) translateY(-215px);
            transform: translateX(330px) translateY(-215px)
        }

        50% {
            -webkit-transform: translateX(330px) translateY(-240px);
            transform: translateX(330px) translateY(-240px)
        }

        100% {
            -webkit-transform: translateX(330px) translateY(-215px);
            transform: translateX(330px) translateY(-215px)
        }
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .animation-four, .animation-new {
        display: none !important;
    }
}

.hero-content-left, .sign-up-form-wrap {
    z-index: 2;
}

.bottom-img {
    position: relative;
    bottom: -10px;
    width: 100%;
}

    .bottom-img img, .bottom-img-absolute img {
        width: 100%;
    }

.bottom-img-absolute {
    bottom: -40px;
    width: 100%;
    position: absolute;
}

.shape-bg {
    bottom: -8px;
}

.section-shape {
    bottom: -8px;
    left: 0;
    right: 0;
}

    .section-shape img {
        width: 100%;
    }

.hero-7 {
    width: 100%;
    position: relative;
}

    .hero-7:after {
        content: ' ';
        background-image: url("../img/hero-bg-2.jpg");
        background-size: cover;
        background-position: center center;
        position: absolute;
        width: 100%;
        border-radius: 0;
        transform: skewY(-5deg);
        top: -180px;
        right: 0;
        bottom: 140px;
        z-index: -1;
    }

    .hero-7:before {
        position: absolute;
        content: '';
        background: linear-gradient(135deg, rgba(108, 92, 231, 0.9), rgba(139, 92, 246, 0.85));
        width: 100%;
        height: 100%;
        left: 0;
        transform: skewY(-5deg);
        top: -140px;
        right: 0;
        bottom: -50px;
    }

/*hero subscribe form - Modern */
.subscribe-form {
    position: relative;
    display: block;
    width: 65%;
}

    .subscribe-form #email {
        background: var(--snap-white);
        font-family: inherit;
        color: var(--snap-dark);
        letter-spacing: 1px;
        text-indent: 5%;
        border-radius: 100px;
    }

    .subscribe-form input.form-control {
        border-radius: 100px;
        padding: 14px 20px;
    }

    .subscribe-form input.button {
        position: absolute;
        left: 4px;
        border-radius: 100px;
        padding: initial;
        top: 4px;
        bottom: 4px;
        width: 30%;
        background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
        color: var(--snap-white);
        border: none;
        font-weight: 600;
    }
/*subscribe form footer*/

.subscribe-form-footer {
    position: absolute;
    top: 8px;
    width: 100%;
}

    .subscribe-form-footer input.form-control {
        padding: 1.275rem 0.95rem;
        border-radius: 100px;
    }

    .subscribe-form-footer input.button {
        border-radius: 100px;
    }

.shape-img {
    position: relative;
    z-index: 2;
    width: 100%;
}

    .shape-img img {
        width: 100%;
        position: absolute;
        max-width: none;
        height: auto;
        top: -2px;
    }

/*animation shape - preserved */
@-webkit-keyframes p1 {
    0% {
        left: 0px;
        top: 0px
    }

    50% {
        left: 0;
        top: 800px
    }

    100% {
        left: 0px;
        top: 0px
    }
}

@keyframes p1 {
    0% {
        left: 800px;
        top: 0px
    }

    50% {
        left: 0px;
        top: 800px
    }

    100% {
        left: 800px;
        top: 0px
    }
}

@-webkit-keyframes p2 {
    0% {
        left: 0;
        top: 100px
    }

    50% {
        left: 0;
        top: 800px
    }

    100% {
        left: 0;
        top: 100px
    }
}

@keyframes p2 {
    0% {
        left: 0;
        top: 100px
    }

    50% {
        left: 0px;
        top: 800px
    }

    100% {
        left: 0;
        top: 100px
    }
}

@-webkit-keyframes p3 {
    0% {
        left: 300px;
        top: 900px
    }

    50% {
        left: 500px;
        top: 0px
    }

    100% {
        left: 300px;
        top: 900px
    }
}

@keyframes p3 {
    0% {
        left: 300px;
        top: 900px
    }

    50% {
        left: 500px;
        top: 0px
    }

    100% {
        left: 300px;
        top: 900px
    }
}

@-webkit-keyframes p4 {
    0% {
        left: 1000px;
        top: 500px
    }

    50% {
        left: 00px;
        top: 500px
    }

    100% {
        left: 1000px;
        top: 500px
    }
}

@keyframes p4 {
    0% {
        left: 1000px;
        top: 500px
    }

    50% {
        left: 0px;
        top: 500px
    }

    100% {
        left: 1000px;
        top: 500px
    }
}

@-webkit-keyframes p5 {
    0% {
        left: 500px;
        top: 1000px
    }

    50% {
        left: 50%;
        top: 0px
    }

    100% {
        left: 500px;
        top: 1000px
    }
}

@keyframes p5 {
    0% {
        left: 500px;
        top: 1000px
    }

    50% {
        left: 50%;
        top: 0px
    }

    100% {
        left: 500px;
        top: 1000px
    }
}

@-webkit-keyframes p6 {
    0% {
        left: 500px;
        top: 200px
    }

    50% {
        left: 50%;
        top: 70%
    }

    100% {
        left: 500px;
        top: 200px
    }
}

@keyframes p6 {
    0% {
        left: 500px;
        top: 200px
    }

    50% {
        left: 50%;
        top: 70%
    }

    100% {
        left: 500px;
        top: 200px
    }
}

@-webkit-keyframes p7 {
    0% {
        left: 50px;
        top: 10%
    }

    50% {
        left: 50%;
        top: 10%
    }

    100% {
        left: 50px;
        top: 10%
    }
}

@keyframes p7 {
    0% {
        left: 50px;
        top: 10%
    }

    50% {
        left: 50%;
        top: 10%
    }

    100% {
        left: 50px;
        top: 10%
    }
}

@-webkit-keyframes p8 {
    0% {
        left: 0;
        top: 20%
    }

    50% {
        left: 50%;
        top: 20%
    }

    100% {
        left: 0;
        top: 20%
    }
}

@keyframes p8 {
    0% {
        left: 0;
        top: 20%
    }

    50% {
        left: 50%;
        top: 20%
    }

    100% {
        left: 0;
        top: 20%
    }
}

@-webkit-keyframes p9 {
    0% {
        left: 1000px;
        top: 100px
    }

    50% {
        left: 500px;
        top: 950px
    }

    100% {
        left: 1000px;
        top: 100px
    }
}

@keyframes p9 {
    0% {
        left: 1000px;
        top: 100px
    }

    50% {
        left: 500px;
        top: 950px
    }

    100% {
        left: 1000px;
        top: 100px
    }
}



.circles {
    overflow: hidden;
    width: 100%;
    position: absolute;
    height: 1200px;
}

.point {
    border-radius: 50%;
    z-index: 999;
    position: absolute;
}

.animated-point-1 {
    background-color: #EF4444;
    height: 12px;
    width: 12px;
    position: relative;
    -webkit-animation-name: p1;
    -webkit-animation-duration: 80s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p1;
    animation-duration: 80s;
    animation-iteration-count: infinite;
}

.animated-point-2 {
    background-color: #10B981;
    height: 15px;
    width: 15px;
    position: relative;
    -webkit-animation-name: p2;
    -webkit-animation-duration: 90s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p2;
    animation-duration: 90s;
    animation-iteration-count: infinite
}

.animated-point-3 {
    background-color: #F59E0B;
    height: 8px;
    width: 8px;
    position: relative;
    -webkit-animation-name: p3;
    -webkit-animation-duration: 80s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p3;
    animation-duration: 80s;
    animation-iteration-count: infinite
}

.animated-point-4 {
    background-color: #EC4899;
    height: 10px;
    width: 10px;
    position: relative;
    -webkit-animation-name: p4;
    -webkit-animation-duration: 80s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p4;
    animation-duration: 80s;
    animation-iteration-count: infinite
}

.animated-point-5 {
    background-color: #ffc64c;
    height: 12px;
    width: 12px;
    position: relative;
    -webkit-animation-name: p5;
    -webkit-animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p5;
    animation-duration: 50s;
    animation-iteration-count: infinite
}

.animated-point-6 {
    background-color: #ffc64c;
    height: 10px;
    width: 10px;
    position: relative;
    -webkit-animation-name: p6;
    -webkit-animation-duration: 70s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p6;
    animation-duration: 70s;
    animation-iteration-count: infinite
}

.animated-point-7 {
    background-color: #F59E0B;
    height: 14px;
    width: 14px;
    position: relative;
    -webkit-animation-name: p7;
    -webkit-animation-duration: 70s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p7;
    animation-duration: 70s;
    animation-iteration-count: infinite
}

.animated-point-8 {
    background-color: #A855F7;
    height: 8px;
    width: 8px;
    position: relative;
    -webkit-animation-name: p8;
    -webkit-animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p8;
    animation-duration: 50s;
    animation-iteration-count: infinite
}

.animated-point-9 {
    background-color: #A855F7;
    height: 12px;
    width: 12px;
    position: relative;
    -webkit-animation-name: p9;
    -webkit-animation-duration: 100s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p9;
    animation-duration: 100s;
    animation-iteration-count: infinite
}

/*hero 2 css*/
.hero-section-2, .hero-section-3 {
    position: relative;
    overflow: hidden;
}

    .hero-section-2:before {
        content: "";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 175%;
        bottom: 0;
        background-image: url(../img/hero-bg-shape-3.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }

.shape-image {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 76px;
    z-index: 0;
    right: 268px;
    overflow: hidden;
    background-size: cover;
    left: 0;
}

@media (min-width: 320px) and (max-width: 767px) {
    .shape-image {
        display: none;
    }
}


/*hero background video css*/

.video-section-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

    .video-section-wrap .background-video-overly {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient(135deg, rgba(108, 92, 231, 0.85), rgba(139, 92, 246, 0.8));
    }


/*=========================================
            06. PROMO SECTION CSS (Modern)
============================================*/
.single-promo span {
    font-size: 70px;
    line-height: inherit;
    margin-bottom: 20px;
}

.single-promo-1 {
    box-shadow: var(--snap-shadow-md);
    border-radius: var(--snap-radius-lg) !important;
    transition: var(--snap-transition-smooth);
}

    .single-promo-1:hover {
        transform: translateY(-10px);
        box-shadow: var(--snap-shadow-xl);
    }

    .single-promo-1 span {
        font-size: 35px;
        background-image: url("../img/promo-icon-bg.svg");
        background-size: 150px;
        padding: 35px;
        background-repeat: no-repeat;
        background-position: 45% 20%;
    }

.single-promo img {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
}

.single-promo .img-full-box {
    width: auto !important;
    height: auto !important;
}

.single-promo-hover {
    transition: all .2s ease-out;
    will-change: transform;
}

    .single-promo-hover:hover {
        transform: translateY(-10px);
        box-shadow: var(--snap-shadow-lg) !important;
    }

/*promo section new style - Modern */

.single-promo-card {
    transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--snap-shadow-md);
    border-radius: var(--snap-radius);
    overflow: hidden;
}

.card.single-promo-card {
    border: 1px solid #E5E7EB;
    border-radius: var(--snap-radius);
    transition: var(--snap-transition-smooth);
}

    .card.single-promo-card:hover {
        background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
        color: var(--snap-white);
        transform: translateY(-8px);
        box-shadow: var(--snap-shadow-xl);
    }

        .card.single-promo-card:hover span, .card.single-promo-card:hover h5, .card.single-promo-card:hover p.text-muted {
            color: var(--snap-white) !important;
        }

.single-promo-card .card-body {
    padding: 1.5rem;
}



/*client section css - Modern */
.client-section-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

    .client-section-wrap ul li {
        padding: 0;
        margin: 5px 0;
    }

        .client-section-wrap ul li img {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            filter: grayscale(0.2);
            opacity: 0.7;
        }

            .client-section-wrap ul li img:hover {
                transform: scale(1.15);
                filter: grayscale(0);
                opacity: 1;
            }

        .client-section-wrap ul li:last-child {
            padding-right: 0;
        }

.single-client {
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-grid-column-align: center;
    justify-items: center;
    width: 60%;
    height: auto;
    transition: transform 0.5s ease;
    margin: 8px auto;
}

    .single-client img {
        max-width: 100%;
        max-height: 100%;
        filter: opacity(85%);
        width: 100%;
        transition: var(--snap-transition);
    }

    .single-client:hover {
        transform: scale(1.15);
    }

        .single-client:hover .client-img {
            filter: none;
            opacity: 1;
        }

/*=========================================
            07. ABOUT US CSS (Modern)
============================================*/
.switchable {
    position: relative;
}

.imageblock-section {
    position: relative;
    padding: 0;
}

    .imageblock-section .imageblock-section-img {
        position: absolute;
        height: 100%;
        top: 0;
        z-index: 2;
        padding: 0;
    }

.switchable.switchable-content div[class*='col-']:first-child {
    float: left;
    left: 0;
    right: auto;
}

.switchable > div[class*='col-'] {
    padding: 0;
}

.background-image-holder {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover !important;
    background-position: 50% 50% !important;
    z-index: 0;
    transition: opacity .3s linear;
    -webkit-transition: opacity .3s linear;
    opacity: 0;
    background: #252525;
}

    .background-image-holder:not([class*='col-']) {
        width: 100%;
    }

.switchable div[class*='col-']:first-child {
    float: left;
    right: auto;
}

@media (max-width: 767px) {
    .switchable .imageblock-section-img[class*='col-'] {
        float: none !important;
    }
}

.switchable > div[class*='col-'] {
    padding: 0;
}

@media (max-width: 767px) {
    .imageblock-section .imageblock-section-img {
        position: relative;
        min-height: 18.57142857em;
    }
}

@media (min-width: 768px) {
    .switchable .container > .row {
        flex-flow: row-reverse;
    }

    .switchable.switchable-content .container > .row {
        flex-flow: row;
    }
}

.single-card {
    width: calc(50% - 25px);
    margin-left: 25px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: var(--snap-transition);
    box-sizing: border-box;
    box-shadow: var(--snap-shadow);
    padding: 35px 15px;
    border-radius: var(--snap-radius);
    float: left;
    text-align: center;
    background: var(--snap-white);
}

    .single-card:nth-child(2n) {
        position: relative;
        top: 40px;
    }

    .single-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--snap-shadow-xl);
    }

    .single-card h3 {
        font-size: 34px;
        color: inherit !important;
        margin: 0;
        line-height: 34px;
        font-weight: 700;
        position: relative;
    }

    .single-card span {
        font-size: 2.95714286em;
        line-height: 1.75125468em;
    }

.counter-card {
    float: none;
    display: block;
    overflow: hidden;
    width: auto;
    margin: auto;
}

.box-animation-1 {
    animation: animation-1 5s ease-out infinite;
}

.box-animation-2 {
    animation: animation-2 4s ease-out infinite;
}

.box-animation-3 {
    animation: animation-3 5s ease-out infinite;
}

.box-animation-4 {
    animation: animation-4 4s ease-out infinite;
}


@keyframes animation-1 {
    50% {
        transform: translate(0, 20px);
    }
}

@keyframes animation-2 {
    50% {
        transform: translate(0, 35px);
    }
}

@keyframes animation-3 {
    50% {
        transform: translate(0, 25px);
    }
}

@keyframes animation-4 {
    50% {
        transform: translate(0, 40px);
    }
}

@keyframes shrink {
    0% {
        width: 90%;
        margin: 0 5%;
    }

    50% {
        width: 60%;
        margin: 0 18%;
    }

    100% {
        width: 90%;
        margin: 0 5%;
    }
}

/*about us app*/
.overflow-hidden {
    overflow: hidden;
}

.background-shape-img {
    position: relative;
}

    .background-shape-img:before {
        content: "";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        background-image: url("../img/about-bg-shape.svg");
        background-repeat: no-repeat;
        background-size: cover;
    }



/*=========================================
            08. FEATURE SECTION CSS (Modern)
============================================*/
.icon-md {
    font-size: 32px;
    line-height: 35px;
}

.icon-lg {
    font-size: 70px;
    line-height: 75px;
}

.single-feature .icon {
    font-size: 22px;
    line-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.icon-box-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 40px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.icon-box {
    height: 65px;
    width: 65px;
    color: var(--snap-secondary);
    text-align: center;
    box-shadow: var(--snap-shadow-md);
    border-radius: var(--snap-radius-sm);
    transition: var(--snap-transition);
    margin-bottom: 0;
    margin-left: 30px;
    background: var(--snap-white);
    padding: 15px;
}

    .icon-box:hover {
        transform: translateY(-5px);
        box-shadow: var(--snap-shadow-lg);
    }

    .icon-box img {
        vertical-align: middle;
        border-style: none;
    }

    .icon-box.gray-light-bg {
        background: var(--snap-light);
    }

.icon-box-wrap p {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}


.single-feature-hover {
    z-index: 0;
    position: relative;
    background: var(--snap-white);
    box-shadow: 0 0 0 1px #E5E7EB;
    padding: 20px;
    box-sizing: border-box;
    transition: var(--snap-transition-smooth);
    border-radius: var(--snap-radius);
}

    .single-feature-hover:hover {
        z-index: 1;
        box-shadow: var(--snap-shadow-xl);
        transform: scale(1.02);
        border-radius: var(--snap-radius);
    }

.border {
    border-color: #E5E7EB;
}

.single-services span {
    margin-bottom: 15px;
    display: block;
}

.feature-list li {
    position: relative;
    padding: 0 0 10px 22px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

    .feature-list li:before {
        content: "\e6af";
        position: absolute;
        top: 1px;
        left: 0;
        font-family: 'Vazir', 'Tahoma', sans-serif;
        font-weight: 400;
        color: var(--snap-secondary);
    }

/*feature new style - Modern */

.icon-shape {
    display: inline-block;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--snap-radius-sm);
}

.icon {
    width: 50px;
    height: 50px;
}

    .icon span {
        line-height: 50px;
        font-size: 22px;
    }
/*feature tab style - Modern */
.feature-tab.nav-tabs {
    border-bottom: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.feature-tab li a.nav-link {
    border: 1px solid #E5E7EB;
    box-shadow: var(--snap-shadow-sm);
    text-align: center;
    padding: 16px 20px;
    border-radius: var(--snap-radius);
    min-width: 120px;
    transition: var(--snap-transition);
    background: var(--snap-white);
}

    .feature-tab li a.nav-link.active, .feature-tab li a.nav-link:hover {
        border-color: var(--snap-primary);
        background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
        color: var(--snap-white);
        transform: translateY(-3px);
        box-shadow: var(--snap-shadow-md);
    }

    .feature-tab li a.nav-link.active {
        background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
        color: var(--snap-white);
    }

        .feature-tab li a.nav-link.active span, .feature-tab li a.nav-link:hover span {
            color: var(--snap-white);
        }

.feature-tab li a.h6 {
    font-size: 14px;
    line-height: 16px;
    color: #6B7280;
}

.feature-tab li {
    margin-left: 0;
}

    .feature-tab li:last-child {
        margin-right: 0;
    }

    .feature-tab li a span {
        display: block;
        font-size: 28px;
        margin-bottom: 10px;
        color: var(--snap-secondary);
    }

.feature-tab-content {
    margin-top: 30px;
    min-height: 260px;
    background: var(--snap-white);
    border-radius: var(--snap-radius);
    padding: 30px;
    box-shadow: var(--snap-shadow);
}
/*=========================================
            09. VIDEO PROMO CSS (Modern)
============================================*/
.background-img {
    position: relative;
    width: 100%;
    display: block;
}

    .background-img:before {
        position: absolute;
        content: '';
        background: linear-gradient(135deg, rgba(108, 92, 231, 0.9), rgba(139, 92, 246, 0.85));
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

.video-promo-content {
    transition: all 800ms ease-in-out;
}

    .video-promo-content a img {
        transition: all 800ms ease-in-out;
    }

        .video-promo-content a img:hover {
            transform: rotate(15deg) scale(1.1);
        }

    .video-promo-content h5 {
        color: var(--snap-white);
    }

.video-play-icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    position: relative;
    z-index: 4;
    display: inline-block;
    border: 2px solid var(--snap-white);
    cursor: pointer;
    background: var(--snap-white);
    transition: var(--snap-transition);
}

    .video-play-icon span {
        position: absolute;
        text-align: center;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 28px;
        color: var(--snap-primary);
    }

.video-promo-content a.video-play-icon-without-bip:hover span {
    color: var(--snap-white);
}

.video-promo-content a.video-play-icon {
    border-radius: 50%;
    display: block;
    animation: ripple-white 1.5s linear infinite;
    transition: .5s
}

.video-promo-content a.video-play-icon-without-bip {
    animation: none;
}

    .video-promo-content a.video-play-icon-without-bip:hover {
        animation: ripple-white 1.5s linear infinite;
        transition: .5s;
        background: var(--snap-secondary);
    }

        .video-promo-content a.video-play-icon-without-bip:hover span {
            color: var(--snap-white);
        }

@-webkit-keyframes ripple-white {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.05);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.05)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.05), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.05), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-white {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.05);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.05)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.05), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.05), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}
/*=========================================
            10. COUNTER CSS (Modern)
============================================*/
.counter-wrap {
    background: var(--snap-white);
    width: 100%;
    display: block;
    position: relative;
    bottom: -60px;
    padding: 40px 0;
    border-radius: var(--snap-radius);
    box-shadow: var(--snap-shadow-xl);
}

.counter-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    grid-auto-flow: dense;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

    .counter-wrap li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        overflow: hidden;
        text-align: center;
        border-right: 1px solid #E5E7EB;
        margin: 10px 0 !important;
        transition: var(--snap-transition);
    }

        .counter-wrap li:last-child {
            border-right: none;
            margin-right: 0 !important;
        }

.single-counter span {
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    color: var(--snap-primary);
    font-size: 28px;
    line-height: 32px;
}

/*=========================================
            11. PRICING CSS (Modern)
============================================*/
.card.single-pricing-pack {
    transition: var(--snap-transition-smooth);
    box-shadow: var(--snap-shadow);
    border: none;
    border-top: 4px solid transparent;
    border-radius: var(--snap-radius);
    overflow: hidden;
}

    .card.single-pricing-pack:hover {
        z-index: 2;
        border-radius: var(--snap-radius) !important;
    }

.single-pricing-pack:hover {
    box-shadow: var(--snap-shadow-xl) !important;
    transform: translate(0, -8px);
    border-top: 4px solid var(--snap-secondary);
}

.single-pricing-pack .card-body {
    color: #6B7280;
    flex: 1 1 auto;
    padding: 1.5rem;
}

.pricing-header {
    position: relative;
    background: transparent;
}

.pricing-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    line-height: 120px;
    margin: 0 auto;
}

.font-weight-bolder {
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

.pricing-header::after {
    content: "";
    display: block;
    width: 80%;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -40%;
    height: 1px;
    background: radial-gradient(at center center, #E5E7EB 0px, rgba(255, 255, 255, 0) 75%);
}

.pricing-feature-list li {
    font-size: 15px;
    line-height: 28px;
}

/*price new style - Modern */
.popular-price {
    box-shadow: var(--snap-shadow-xl) !important;
    transform: translate(0, -8px);
    border-top: 4px solid var(--snap-secondary) !important;
}


/*pricing faq - Modern */
.accordion-faq .card {
    margin-bottom: 1.5rem;
    border-radius: var(--snap-radius) !important;
    box-shadow: var(--snap-shadow);
    background: var(--snap-white);
    border: 1px solid #E5E7EB;
    overflow: hidden;
}

.accordion-faq.accordion > .card {
    overflow: hidden;
    border-color: #E5E7EB;
    border-width: 1px;
}

    .accordion-faq.accordion > .card .collapse.show {
        border-bottom: 1px solid #E5E7EB;
    }

.accordion-faq.accordion .card-header {
    position: relative;
    cursor: pointer;
    background: var(--snap-white);
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 0;
    padding: 18px 24px;
}

    .accordion-faq.accordion .card-header:first-child {
        border-radius: calc(var(--snap-radius) - 1px) calc(var(--snap-radius) - 1px) 0 0;
    }

.accordion-faq.accordion > .card .card-header h6 {
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

.accordion-faq.accordion .card-header[aria-expanded=false]:after {
    content: "+";
}

.accordion-faq.accordion .card-header[aria-expanded=true]:after {
    content: "-";
}

.accordion-faq.accordion .card-header:after {
    content: "+";
    position: absolute;
    left: 1.5rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--snap-primary);
}

/*sccreenshot css*/
.screen-slider-content {
    position: relative
}

.screenshot-frame {
    background-image: url(../img/phone-frame2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 285px;
    height: 518px;
    position: absolute;
    top: -10px;
    left: calc(50% + 0.5px);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;
    border-radius: 40px;
}

@media (min-width: 320px) and (max-width: 1200px) {
    .screenshot-frame {
        display: none;
    }
}

.screen-carousel .owl-item img {
    -webkit-transform: scale(.85);
    transform: scale(.85);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid #E5E7EB;
    border-radius: var(--snap-radius)
}

.screen-carousel .owl-item.active.center img {
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: var(--snap-shadow-xl);
}




/*=========================================
            12. TESTIMONIAL CSS (Modern)
============================================*/
.testimonial-wrap {
    padding: 30px;
    background: var(--snap-white);
    border-radius: var(--snap-radius);
    transition: var(--snap-transition);
}

    .testimonial-wrap:hover {
        transform: translateY(-5px);
        box-shadow: var(--snap-shadow-lg);
    }

    .testimonial-wrap span.icon {
        font-size: 35px;
        color: var(--snap-primary);
    }

    .testimonial-wrap blockquote {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        height: 127px;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        margin-bottom: 0;
    }

.client-say {
    position: relative;
    display: inline-block;
}

    .client-say p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        height: 115px;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        margin-bottom: 0;
        float: left;
    }

    .client-say img {
        position: relative;
        width: 6% !important;
        display: initial !important;
        top: 5px;
        margin-right: 10px;
    }

.author-info {
    display: flex;
    align-items: center;
}

.author-img {
    width: 4.425rem;
    height: 4.425rem;
    line-height: 4.425rem;
}

.dot-indicator.owl-theme button.owl-dot span {
    display: inline-block;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    background: #CBD5E1;
    border-radius: 50%;
    transform: scale(0.8);
    transition: 0.3s;
}

.dot-indicator.owl-theme button.owl-dot:focus {
    border: none;
    outline: none;
}

.dot-indicator.owl-theme button.owl-dot.active span {
    background: var(--snap-secondary);
    transform: scale(1);
}

.screen-carousel.dot-indicator.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 20px;
}

.arrow-indicator.owl-theme .owl-nav {
    position: absolute;
    left: 0;
    margin-top: 4px;
}

    .arrow-indicator.owl-theme .owl-nav [class*=owl-] {
        width: 44px;
        height: 44px;
        margin: 2px;
        box-shadow: var(--snap-shadow);
        background: var(--snap-white);
        border-radius: 50%;
        transition: var(--snap-transition);
    }

        .arrow-indicator.owl-theme .owl-nav [class*=owl-]:focus {
            outline: none;
        }

        .arrow-indicator.owl-theme .owl-nav [class*=owl-] span {
            font-size: 22px;
            line-height: 22px;
            color: var(--snap-primary);
        }

        .arrow-indicator.owl-theme .owl-nav [class*=owl-]:hover {
            background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary)) !important;
        }

            .arrow-indicator.owl-theme .owl-nav [class*=owl-]:hover span {
                color: var(--snap-white) !important;
            }


.background-shape-right {
    position: relative;
}

    .background-shape-right:before {
        content: "";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 50%;
        background-image: url(../img/shape-bg-right.svg);
        background-repeat: no-repeat;
    }

/*=========================================
            13. CONTACT FORM CSS (Modern)
============================================*/
.sign-up-form-wrap {
    display: block;
    box-shadow: var(--snap-shadow);
    border-radius: var(--snap-radius);
    background: var(--snap-white);
    padding: 40px;
}

.shadow-lg {
    box-shadow: var(--snap-shadow-xl) !important;
}

.list-creative > li + li {
    border-top: 1px solid #E5E7EB;
}

@media (min-width: 992px) {
    .list-creative > li {
        padding: 30px 0;
    }
}

.list-terms-medium {
    position: relative;
    padding-left: 30px;
}

    .list-terms-medium::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 0;
        bottom: 2px;
        width: 4px;
        border-radius: 4px;
    }

    .list-terms-medium dt {
        letter-spacing: .1em;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 14px;
        color: #565656;
    }

.list-creative .address::before {
    background: var(--snap-secondary);
}

.list-creative .phone::before {
    background: var(--snap-primary);
}

.list-creative .email::before {
    background: var(--snap-info);
}

.list-terms-medium a, .list-terms-medium p, .list-terms-medium a:active, .list-terms-medium a:focus {
    color: #9CA3AF;
    text-decoration: none;
}

    .list-terms-medium a:hover {
        color: var(--snap-primary);
    }

.google-map {
    height: 100%;
    margin-bottom: -8px;
}

    .google-map iframe {
        width: 100%;
        border: 0;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(99%);
        -webkit-backface-visibility: hidden;
    }

/*our team css - Modern */
.single-team-member .team-info {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.9), rgba(139, 92, 246, 0.85));
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    border-radius: var(--snap-radius);
}

.team-image img {
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: var(--snap-radius);
}

.team-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--snap-radius);
}

    .team-info h5 {
        transition-delay: 0.2s;
        color: inherit;
    }

    .team-info h6 {
        transition-delay: 0.1s;
    }

    .team-info h5, .team-info h6, .team-info .team-social {
        transform: translateY(25px);
        opacity: 0;
        transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1);
    }

.single-team-member:hover .team-info {
    opacity: 1;
    visibility: visible;
}

    .single-team-member:hover .team-info h6 {
        opacity: 1;
    }

    .single-team-member:hover .team-info h5, .single-team-member:hover .team-info h6, .single-team-member:hover .team-info .team-social {
        opacity: 1;
        transform: translateY(0);
    }

.team-social li a {
    text-decoration: none;
    color: inherit;
    opacity: 0.8;
}

    .team-social li a:hover {
        opacity: 1;
    }

    .team-social li a span {
        padding: 6px;
    }

.visible-info {
    width: 100%;
}

/*team single*/
.team-social-list li a {
    padding: 5px;
}

    .team-social-list li a:hover {
        text-decoration: none;
    }

.team-social-list li span {
    font-size: 18px;
    line-height: inherit;
    vertical-align: middle;
}
/*skill progressbar - Modern */
.progress {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    height: 10px;
    overflow: hidden;
    font-size: .75rem;
    background-color: #E5E7EB;
    border-radius: 100px;
}

.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    transition: width .6s ease;
    border-radius: 100px;
}

.progress-item + .progress-item {
    margin-top: 24px;
}

.progress-item {
    margin-bottom: 20px;
}

.progress-title > h6 {
    font-size: .95375rem;
    margin-bottom: 8px;
    font-weight: 500;
}

/*progressbar animation*/


.progress span {
    display: block;
    height: 100%;
}

.progress-line {
    background-color: var(--snap-info);
    animation: progressBar 3s ease-in-out;
    animation-fill-mode: both;
}

@-webkit-keyframes progressBar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@-moz-keyframes progressBar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}


/*=========================================
            15. FOOTER CSS (Modern)
============================================*/

.background-img-2 {
    position: relative;
    display: block;
    width: 100%;
}

    .background-img-2:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(135deg, rgba(108, 92, 231, 0.05), rgba(139, 92, 246, 0.08));
    }



.page-footer {
    background: var(--snap-white);
    padding: 60px 0 30px;
    border-top: 1px solid #E5E7EB;
}

.social-list-wrap ul li span {
    font-size: 15px;
    line-height: inherit;
    vertical-align: middle;
}

.footer-nav-wrap ul li strong {
    font-size: 18px;
    line-height: 19px;
    font-weight: bold;
}

.footer-nav-wrap ul li a {
    font-size: 14px;
    line-height: 19px;
    color: inherit;
    opacity: 0.7;
    transition: var(--snap-transition);
}

.support-list li span {
    font-size: 20px;
    line-height: 25px;
}

.footer-nav-wrap ul li a:hover, .copyright-text a:hover, .social-list li a:hover {
    opacity: 1;
    color: var(--snap-primary);
    text-decoration: none;
}

.copyright-text {
    font-size: 14px;
}

.social-list li span {
    padding: 6px;
}

.social-list li a, .copyright-text a {
    color: var(--snap-primary);
    opacity: 0.8;
}


/*new css new update*/
.full-screen {
    min-height: 100vh;
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.countdown-wrap h2, .countdown-wrap h5 {
    color: #fff !important;
}


/*404 page*/
.error-content .notfound-404 {
    position: relative;
    height: 280px;
    z-index: 2;
    margin-bottom: 30px;
}

    .error-content .notfound-404 h1 {
        font-size: 230px;
        font-weight: 700;
        margin: 0;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        background-size: cover;
        background-position: center;
    }


@media (min-width: 320px) and (max-width: 767px) {
    .error-content .notfound-404 {
        height: auto;
        display: block;
        position: relative;
    }

        .error-content .notfound-404 h1 {
            font-size: 80px;
            position: relative;
        }
}

/*login css - Modern */
.login-signup-content {
    height: 100%;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-signup-wrap h1 {
    font-size: 35px;
}

.vh-100 {
    height: 100vh !important;
}

.bg-cover {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}

.ml-n3, .mx-n3 {
    margin-left: -.98rem !important;
}

.small, small {
    font-size: 90%;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    margin-bottom: 0;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: #95aac9;
    text-align: center;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #d2ddec;
    border-radius: var(--snap-radius-sm);
}

.form-control:focus {
    border-color: var(--snap-primary);
}

.btn.border-radius {
    border-radius: var(--snap-radius-sm);
}

.login-signup-form .form-group {
    position: relative;
}

    .login-signup-form .form-group label {
        font-family: 'Vazir', 'Tahoma', sans-serif;
        font-weight: 500;
        font-size: 88%;
    }

    .login-signup-form .form-group .input-group.input-group-merge > .form-control {
        text-indent: 35px;
        border-top-left-radius: var(--snap-radius-sm);
        border-bottom-left-radius: var(--snap-radius-sm);
        height: calc(2.65em + .75rem + 2px);
    }

        .login-signup-form .form-group .input-group.input-group-merge > .form-control:focus {
            z-index: inherit;
        }

.input-icon {
    height: calc(3.4rem + 2px);
    position: absolute;
    z-index: 2;
    display: block;
    width: 40px;
    top: 0;
    bottom: 0;
    right: 0;
}

    .input-icon span {
        padding: 18px 15px;
        border-right: 2px solid var(--snap-primary);
        position: absolute;
        font-size: 18px;
        height: calc(3.4rem + 2px);
        border-radius: var(--snap-radius-sm);
    }


/*login signup new style*/
.login-signup-card {
    position: relative;
    z-index: 2;
    background: var(--snap-white);
    border-radius: var(--snap-radius-lg);
    padding: 40px;
    box-shadow: var(--snap-shadow-xl);
}

.custom-control-label {
    line-height: 1.5;
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}


/*=========================================
           24. SINGLE PAGE HEADER CSS
============================================*/
@media (min-width: 320px) and (max-width: 576px) {
    .page-header-content {
        padding-top: 3rem !important;
    }
}

.custom-breadcrumb ol {
    margin-bottom: 0;
}

    .custom-breadcrumb ol li a, .custom-breadcrumb ol li.breadcrumb-item.active {
        color: var(--snap-white);
        opacity: 0.7;
    }

        .custom-breadcrumb ol li a:hover {
            opacity: 1;
        }

    .custom-breadcrumb ol li.breadcrumb-item {
        padding-left: 0;
    }

.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    font-family: themify;
    content: "\e649";
    font-size: 10px;
    color: var(--snap-white);
    opacity: 0.7;
}


/*=========================================
            25. BLOG SECTION CSS (Modern)
============================================*/
.single-blog-card {
    margin-bottom: 25px;
    border-radius: var(--snap-radius);
    overflow: hidden;
    transition: var(--snap-transition);
    box-shadow: var(--snap-shadow);
}

    .single-blog-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--snap-shadow-xl);
    }

    .single-blog-card span.category {
        z-index: 2;
        top: 10px;
        right: 10px;
        background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
        color: var(--snap-white);
        padding: 6px 14px;
        border-radius: 100px;
        font-size: 12px;
    }

    .single-blog-card .card-body {
        padding: 1.75rem;
    }

.meta-list {
    opacity: 0.8;
    font-size: 95%;
}

    .meta-list li.list-inline-item:not(:last-child) {
        margin-right: 0.7rem;
    }

.single-blog-card a {
    font-family: 'Montserrat', sans-serif;
}

    .single-blog-card a, .single-blog-card a:hover {
        text-decoration: none;
        color: inherit;
    }

a.detail-link {
    display: inline-block;
    text-decoration: none;
    color: #495057;
    font-weight: 600;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
}


    a.detail-link span {
        font-size: 12px;
        vertical-align: middle;
        transition-duration: .3s;
        color: var(--snap-primary);
    }


    a.detail-link:hover {
        color: var(--snap-primary);
    }

        a.detail-link:hover span {
            transform: translateX(3px);
            margin-left: 8px;
        }

/*blog single page css*/

.row-post-thumbnail .post {
    border: 0;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.post {
    border-bottom: 1px solid #f0f0f0;
    padding: 0 0 35px;
    margin: 0 0 45px;
}


article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

.post-preview {
    padding-bottom: 5px;
    border-radius: var(--snap-radius-sm);
    transition: var(--snap-transition);
}

    .post-preview img {
        border-radius: var(--snap-radius-sm);
        width: 100%;
        display: block;
    }

.post-header {
    margin: 15px 0 20px;
}

    .post-header .post-title {
        font-size: 1.5625rem;
        margin-bottom: 0;
        color: #333333;
    }

        .post-header .post-title a {
            color: #5d5d5d;
        }

            .post-header .post-title a:hover {
                color: var(--snap-primary);
            }

.post-meta {
    list-style: none;
    font-size: .8125rem;
    padding: 0;
    margin: 0;
}

    .post-meta a, .post-meta li {
        color: #495057;
        opacity: 0.8;
    }

        .post-meta a:hover {
            color: var(--snap-primary);
            opacity: 1;
        }

    .post-meta > li {
        position: relative;
        display: inline-block;
        padding: 0 0 0 14px;
        margin: 0 0 0 14px;
    }

        .post-meta > li:not(:last-child):after {
            position: absolute;
            content: '/';
            left: -5px;
            top: 0;
        }

.post-content p {
    margin-bottom: 5px;
}

.post-more a span {
    vertical-align: middle;
}

.post-footer {
    margin-top: 15px;
}

/*blog single css*/
.post-content blockquote {
    border-right: 3px solid #E5E7EB;
    padding: 10px 40px 10px 0;
    margin: 40px 0;
    transition: var(--snap-transition);
}

    .post-content blockquote:hover {
        border-color: var(--snap-primary);
    }

.blockquote {
    font-weight: 500;
    color: #222;
}

.post-content ol {
    list-style-type: decimal;
}

.post-content ul, .post-content ol {
    margin: 15px 40px 15px 0;
}

/*comments css*/
.comment, .comment-shop {
    border-bottom: 1px solid #f0f0f0;
    padding: 30px 0 0;
}

.comment-author, .comment-author-shop {
    margin: 5px 0 0;
    height: 64px;
    width: 64px;
    float: left;
}

.comment-body, .comment-body-shop {
    position: relative;
    padding: 0 0 30px;
    margin: 0 0 0 85px;
}

.comment-meta, .comment-meta-shop {
    margin: 0 0 15px;
}

.comment-meta-date {
    font-size: 13px;
}

.children > .comment, .children > .comment-shop {
    border: 0;
    border-top: 1px solid #f0f0f0;
    margin-left: 85px;
}

.comment-meta-author a, .comment-meta-author-shop a {
    font-weight: 500;
    color: #222;
}

.comment-meta-date a, .comment-meta-date-shop a {
    color: #788487;
    opacity: .6;
}

    .comment-meta-date a:hover, .comment-meta-date a:focus, .comment-meta-date-shop a:hover, .comment-meta-date-shop a:focus {
        color: var(--snap-primary);
        opacity: 1;
    }

.comment-reply, .comment-reply-shop {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13px;
}

    .comment-reply > a, .comment-reply-shop > a {
        background: #f4f4f4;
        border-radius: var(--snap-radius-sm);
        padding: 5px 15px;
        display: block;
        color: #222;
    }

        .comment-reply > a:hover, .comment-reply > a:focus, .comment-reply-shop > a:hover, .comment-reply-shop > a:focus {
            background: var(--snap-primary);
            color: #fff;
        }

.comment-list + .comment-respond, .comment-list-shop + .comment-respond {
    margin-top: 30px;
}


/*pagination - Modern */
.custom-pagination-nav ul {
    display: flex;
    gap: 8px;
    justify-content: center;
}

    .custom-pagination-nav ul li {
        text-align: center;
        margin-right: 0;
    }

        .custom-pagination-nav ul li:focus, .custom-pagination-nav ul li a:focus {
            border: none;
            outline: none;
            box-shadow: none;
        }

        .custom-pagination-nav ul li a.page-link {
            width: 40px;
            height: 40px;
            line-height: 38px;
            border-radius: 50%;
            padding: 0;
            font-family: 'Vazir', 'Tahoma', sans-serif;
            font-weight: 600;
            color: var(--snap-dark);
            border: 1px solid #E5E7EB;
            transition: var(--snap-transition);
        }

            .custom-pagination-nav ul li a.page-link:hover {
                background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
                color: var(--snap-white);
                border-color: transparent;
                transform: translateY(-2px);
            }

        .custom-pagination-nav ul li.page-item.active .page-link {
            background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
            color: var(--snap-white);
            border-color: transparent;
        }

        .custom-pagination-nav ul li.page-item:first-child .page-link,
        .custom-pagination-nav ul li.page-item:last-child .page-link {
            background: transparent;
            font-size: 18px;
        }
/*blog sidebar - Modern */

.widget-search {
    padding: 0;
    border: 0;
}

.widget {
    margin-bottom: 50px;
    background: var(--snap-white);
    border-radius: var(--snap-radius);
    padding: 24px;
    box-shadow: var(--snap-shadow);
}

.widget-search form {
    position: relative;
}

.widget-search .search-button {
    background-color: transparent;
    border: none;
    position: absolute;
    top: 50%;
    height: 100%;
    left: .875rem;
    transform: translateY(-50%);
    transition: all .3s ease-out;
    color: #CBD5E1;
}

    .widget-search .search-button span {
        font-size: 20px;
        line-height: 32px;
    }

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}

.widget .widget-title {
    margin-bottom: 24px;
}

    .widget .widget-title > h6 {
        text-transform: uppercase;
        font-family: 'Vazir', 'Tahoma', sans-serif;
        letter-spacing: 1px;
        font-weight: 600;
        font-size: 12px;
        margin: 0;
        color: #6B7280;
    }

.widget ul {
    margin-bottom: 0;
}

.widget-categories ul li:first-child, .widget-recent-entries ul li:first-child, .widget-recent-entries-custom ul li:first-child {
    padding-top: 0;
}

.widget-categories ul li, .widget-recent-entries ul li, .widget-recent-entries-custom ul li {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 0;
    margin: 0;
}

.widget a {
    color: #6B7280;
    display: block;
    font-size: 14px;
    transition: var(--snap-transition);
}

    .widget a:hover {
        color: var(--snap-primary);
        transform: translateX(5px);
    }

.widget-recent-entries-custom .wi {
    float: left;
    width: 80px;
}

.widget-recent-entries-custom .wb {
    padding-left: 16px;
    width: 100%;
}

.widget-recent-entries-custom .wi, .widget-recent-entries-custom .wb {
    vertical-align: middle;
    display: table-cell;
}

.post-date {
    font-size: 13px;
    color: #a3a6a8;
    display: block;
    margin: 0;
}

.tag-cloud > a, .post-tags > a {
    background: #f4f4f4;
    border-radius: 100px;
    position: relative;
    display: inline-block;
    padding: 6px 15px;
    margin: 5px 8px 5px 0;
    text-transform: uppercase;
    font-size: 10px !important;
    color: #6B7280;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    transition: var(--snap-transition);
}

    .tag-cloud > a:hover, .post-tags > a:hover {
        background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
        color: #fff;
        opacity: 1;
        transform: translateY(-2px);
    }
/*new demo css*/
.big-text {
    position: relative;
    font-size: 100px;
    line-height: 120px;
    font-weight: 700;
}

    .big-text span {
        position: absolute;
        font-size: 16px;
        top: -50px;
    }

@media (min-width: 320px) and (max-width: 575px) {
    .big-text {
        font-size: 60px !important;
        line-height: 80px !important;
    }

        .big-text span {
            top: -35px;
        }
}

.offer-tag-wrap img {
    position: relative;
    display: block;
    width: 100%;
}

.offer-tag {
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    padding: 30px;
    border-radius: 60px 10px;
    position: absolute;
    right: 0;
    top: 35%;
    box-shadow: var(--snap-shadow-lg);
    color: var(--snap-white);
}

.offer-price {
    margin-top: 35px;
    font-size: 70px;
    line-height: 70px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

    .offer-price small, .offer-price span {
        font-size: 25px;
        line-height: initial;
    }

    .offer-price span {
        position: relative;
        top: -40px;
    }

.ribbon-2 {
    position: absolute;
    width: 180px;
    height: 35px;
    background: #ff5919;
    right: -8px;
    top: 20px;
}

    .ribbon-2 span {
        font-size: 20px;
        font-family: 'Vazir', 'Tahoma', sans-serif;
        font-weight: 500;
        padding: 0 0 0 40px;
    }

[class^="ribbon-"]:before, [class^="ribbon-"]:after {
    content: "";
    position: absolute;
}

.ribbon-2:after {
    height: 0;
    width: 0;
    border-bottom: 15px solid transparent;
    border-top: 20px solid transparent;
    border-right: 15px solid #ff5919;
    left: -15px;
}

.ribbon-2:before {
    height: 0;
    width: 0;
    border-bottom: 8px solid #ff5919;
    border-right: 8px solid transparent;
    top: -8px;
}


/* ============================================
   NEW ADDITIONS - All original styles preserved below
   ============================================ */

/*newitem safari - preserved */
.otp-container {
    background: white;
    padding: 20px;
    border-radius: var(--snap-radius);
    box-shadow: var(--snap-shadow);
    text-align: center;
}

.otp-input {
    width: 40px;
    height: 40px;
    font-size: 24px;
    text-align: center;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: var(--snap-radius-sm);
    transition: var(--snap-transition);
}

    .otp-input:focus {
        border-color: var(--snap-primary);
        outline: none;
        box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2);
    }

.otp-button {
    margin-top: 20px;
    padding: 10px 15px;
    font-size: 16px;
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
    border: none;
    border-radius: var(--snap-radius-sm);
    cursor: pointer;
    transition: var(--snap-transition);
}

    .otp-button:hover {
        transform: translateY(-2px);
        box-shadow: var(--snap-shadow);
    }


/* ==================== منوی پایین موبایل - شیشه‌ای با بوردر برجسته ==================== */

.bottom-menu {
    display: none;
}

/* Media Query برای نمایش در موبایل و تبلت */
@media (max-width: 1077px) {
    .modern-bottom-nav {
        position: fixed;
        bottom: 15px;
        left: 15px;
        right: 15px;
        width: auto;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(25px) saturate(180%);
        -webkit-backdrop-filter: blur(25px) saturate(180%);
        border-radius: 32px;
        /* 🔥 بوردر اصلی - برجسته با رنگ بنفش */
        border: 2px solid rgba(139, 92, 246, 0.3);
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.08), 0 8px 32px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 8px 12px;
        z-index: 1000;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

        .modern-bottom-nav:hover {
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 0 25px rgba(139, 92, 246, 0.15), 0 12px 40px rgba(0, 0, 0, 0.12);
            border-color: rgba(139, 92, 246, 0.5);
        }

    /* آیتم منو - پایه */
    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 8px 12px;
        border-radius: 20px;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        flex: 1;
        max-width: 80px;
        min-width: 60px;
        cursor: pointer;
        background: transparent;
    }

    /* ========== رنگ‌های اختصاصی برای هر دکمه ========== */

    .nav-item-home {
        --nav-color: #3b82f6;
        --nav-color-light: rgba(59, 130, 246, 0.12);
        --nav-color-hover: rgba(59, 130, 246, 0.2);
    }

    .nav-item-mydasi {
        --nav-color: #8b5cf6;
        --nav-color-light: rgba(139, 92, 246, 0.12);
        --nav-color-hover: rgba(139, 92, 246, 0.2);
    }

    .nav-item-history {
        --nav-color: #f59e0b;
        --nav-color-light: rgba(245, 158, 11, 0.12);
        --nav-color-hover: rgba(245, 158, 11, 0.2);
    }

    .nav-item-promo {
        --nav-color: #ec4899;
        --nav-color-light: rgba(236, 72, 153, 0.12);
        --nav-color-hover: rgba(236, 72, 153, 0.2);
    }

    .nav-item-wallet {
        --nav-color: #10b981;
        --nav-color-light: rgba(16, 185, 129, 0.12);
        --nav-color-hover: rgba(16, 185, 129, 0.2);
    }

    .nav-item-login {
        --nav-color: #ef4444;
        --nav-color-light: rgba(239, 68, 68, 0.12);
        --nav-color-hover: rgba(239, 68, 68, 0.2);
    }

    /* ========== استایل آیکون باکس ========== */
    .nav-icon {
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--nav-color-light);
        border-radius: 18px;
        margin-bottom: 6px;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

        .nav-icon i,
        .nav-icon svg {
            font-size: 1.4rem;
            color: var(--nav-color);
            transition: all 0.3s ease;
            width: 24px;
            height: 24px;
        }

        .nav-icon svg {
            fill: var(--nav-color);
            stroke: none;
        }

    /* ========== حالت hover هر دکمه ========== */
    .nav-item:hover .nav-icon {
        background: var(--nav-color-hover);
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    }

        .nav-item:hover .nav-icon i,
        .nav-item:hover .nav-icon svg {
            transform: scale(1.08);
        }

    /* ========== حالت active هر دکمه ========== */
    .nav-item.active .nav-icon {
        background: linear-gradient(135deg, var(--nav-color), color-mix(in srgb, var(--nav-color) 70%, white 30%));
        box-shadow: 0 8px 20px color-mix(in srgb, var(--nav-color) 40%, transparent);
        transform: translateY(-5px);
        border-color: rgba(255, 255, 255, 0.4);
    }

        .nav-item.active .nav-icon i,
        .nav-item.active .nav-icon svg {
            color: white;
            transform: scale(1.1);
        }

        .nav-item.active .nav-icon svg {
            fill: white;
        }

    /* متن زیر آیکون */
    .nav-label {
        font-size: 0.7rem;
        font-weight: 600;
        transition: all 0.3s ease;
        text-align: center;
        color: #6c757d;
        letter-spacing: 0.3px;
    }

    .nav-item.active .nav-label {
        color: var(--nav-color);
        font-weight: 700;
    }

    /* ========== خط زیرین ========== */
    .nav-item.active::before {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 3px;
        background: var(--nav-color);
        border-radius: 3px;
        filter: blur(2px);
        opacity: 0.8;
    }

    /* ========== نقطه پالس ========== */
    .nav-pulse {
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        background: var(--nav-color);
        border-radius: 50%;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .nav-item.active .nav-pulse {
        opacity: 1;
        animation: pulseDot 1.5s ease-in-out infinite;
    }

    @keyframes pulseDot {
        0%, 100% {
            opacity: 0.6;
            transform: translateX(-50%) scale(1);
        }

        50% {
            opacity: 1;
            transform: translateX(-50%) scale(1.3);
        }
    }

    /* ========== بج اعلان ========== */
    .cart-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        background: linear-gradient(135deg, #ff6b6b, #ff4757);
        color: white;
        font-size: 0.65rem;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        border: 2px solid white;
        box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
        z-index: 2;
    }

    /* ========== ریسپانسیو ========== */
    @media (max-width: 600px) {
        .modern-bottom-nav {
            bottom: 12px;
            left: 12px;
            right: 12px;
            padding: 6px 10px;
            border-radius: 28px;
        }

        .nav-icon {
            width: 46px;
            height: 46px;
        }

            .nav-icon i,
            .nav-icon svg {
                font-size: 1.25rem;
                width: 20px;
                height: 20px;
            }

        .nav-label {
            font-size: 0.65rem;
        }

        .nav-item {
            padding: 6px 8px;
            max-width: 70px;
            min-width: 55px;
        }
    }

    @media (max-width: 450px) {
        .modern-bottom-nav {
            bottom: 10px;
            left: 10px;
            right: 10px;
            padding: 5px 8px;
            border-radius: 24px;
        }

        .nav-icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
        }

            .nav-icon i,
            .nav-icon svg {
                font-size: 1.1rem;
                width: 18px;
                height: 18px;
            }

        .nav-label {
            font-size: 0.6rem;
        }

        .nav-item {
            padding: 5px 6px;
            max-width: 65px;
            min-width: 50px;
        }

            .nav-item.active::before {
                width: 24px;
                height: 2.5px;
            }
    }

    @media (max-width: 380px) {
        .nav-label {
            font-size: 0.55rem;
        }

        .nav-icon {
            width: 38px;
            height: 38px;
        }

            .nav-icon i,
            .nav-icon svg {
                font-size: 1rem;
                width: 16px;
                height: 16px;
            }
    }
}

/* مخفی کردن در دسکتاپ */
@media (min-width: 1078px) {
    .modern-bottom-nav {
        display: none !important;
    }
}

/* انیمیشن ورود منو از پایین */
@keyframes bottomNavAppear {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-bottom-nav {
    animation: bottomNavAppear 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}




/*ابتدای نمای جدید سرویس ها - Modern */
.service-modern-container {
    max-width: 1300px;
    margin: 0 auto;
}

.service-modern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.service-modern-card {
    background: linear-gradient(145deg, var(--snap-white), #f8fafc);
    border-radius: var(--snap-radius-lg);
    overflow: hidden;
    box-shadow: var(--snap-shadow-lg);
    transition: var(--snap-transition-smooth);
    position: relative;
    border: none;
    backdrop-filter: blur(10px);
}

    .service-modern-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    }

    .service-modern-card:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: var(--snap-shadow-xl);
    }

.service-modern-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
}

.service-modern-header {
    padding: 30px 25px 20px;
    text-align: center;
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

    .service-modern-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        transform: rotate(30deg);
    }

.service-modern-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

    .service-modern-icon img {
        width: 40px;
        height: 40px;
        filter: brightness(0) invert(1);
    }

.service-modern-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.service-modern-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    font-weight: 500;
}

.service-modern-body {
    padding: 25px;
}

.service-modern-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

.service-modern-feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: var(--snap-dark);
    padding: 10px 0;
    border-bottom: 1px dashed #f0f0f0;
}

    .service-modern-feature:last-child {
        border-bottom: none;
    }

    .service-modern-feature i {
        margin-left: 12px;
        color: var(--snap-primary);
        font-size: 1.1rem;
        margin-top: 2px;
        flex-shrink: 0;
    }

.service-modern-price-original {
    text-decoration: line-through;
    color: #95a5a6;
    margin-left: 8px;
    font-size: 0.9rem;
}

.service-modern-price-discount {
    color: var(--snap-success);
    font-weight: 700;
    margin-right: 5px;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
}

.service-modern-price-final {
    color: #e74c3c;
    font-weight: 800;
    font-size: 1.1rem;
}

.service-modern-free {
    color: var(--snap-success);
    font-weight: 800;
    background: rgba(16, 185, 129, 0.15);
    padding: 4px 12px;
    border-radius: 15px;
    display: inline-block;
}

.service-modern-time {
    display: inline-flex;
    align-items: center;
    background: rgba(59, 130, 246, 0.1);
    padding: 6px 12px;
    border-radius: 15px;
    color: var(--snap-info);
    font-weight: 600;
    margin-top: 5px;
}

    .service-modern-time i {
        margin-left: 5px;
    }

.service-modern-button {
    display: block;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: white;
    padding: 14px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--snap-transition);
    border: none;
    cursor: pointer;
    text-align: center;
    width: 100%;
    font-size: 1rem;
    box-shadow: var(--snap-shadow-md);
    position: relative;
    overflow: hidden;
}

    .service-modern-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: 0.5s;
    }

    .service-modern-button:hover {
        background: linear-gradient(135deg, var(--snap-primary-dark), var(--snap-primary));
        box-shadow: var(--snap-shadow-lg);
        transform: translateY(-2px);
        color: white;
        text-decoration: none;
    }

        .service-modern-button:hover::before {
            left: 100%;
        }

.service-modern-consultation {
    display: block;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 14px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--snap-transition);
    border: none;
    cursor: pointer;
    text-align: center;
    width: 100%;
    font-size: 1rem;
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.4);
    margin-top: 10px;
}

    .service-modern-consultation:hover {
        background: linear-gradient(135deg, #e67e22, #f39c12);
        box-shadow: 0 8px 20px rgba(243, 156, 18, 0.6);
        transform: translateY(-2px);
        color: white;
        text-decoration: none;
    }

.service-modern-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
}

.service-modern-empty-icon {
    font-size: 4rem;
    color: var(--snap-primary);
    margin-bottom: 20px;
}

.service-modern-empty-text {
    font-size: 1.3rem;
    color: #555;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .service-modern-grid {
        grid-template-columns: 1fr;
    }

    .service-modern-card {
        margin-bottom: 20px;
    }
}
/*انتها نمای جدید سرویس ها */


/*ابتدای سرچ باکس سرویس - Modern */
.modern-search-container {
    max-width: 800px;
    margin: 0 auto 40px;
    position: relative;
}

.modern-search-form {
    position: relative;
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    padding: 30px;
    border-radius: var(--snap-radius-lg);
    box-shadow: var(--snap-shadow-xl);
    overflow: hidden;
}

    .modern-search-form::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
        transform: rotate(45deg);
        animation: searchShine 6s infinite linear;
    }

@keyframes searchShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.modern-search-title {
    text-align: center;
    color: white;
    margin-bottom: 25px;
    font-size: 1.4rem;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    position: relative;
}

    .modern-search-title i {
        margin-left: 10px;
        color: #ffd700;
    }

.modern-search-group {
    display: flex;
    background: white;
    border-radius: 50px;
    padding: 5px;
    box-shadow: var(--snap-shadow-md);
    position: relative;
    z-index: 2;
}

.modern-search-input {
    flex: 1;
    border: none;
    padding: 18px 25px;
    border-radius: 50px;
    font-size: 1.1rem;
    outline: none;
    background: transparent;
    color: var(--snap-dark);
}

    .modern-search-input::placeholder {
        color: #9CA3AF;
        font-weight: 500;
    }

.modern-search-button {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    border: none;
    padding: 15px 35px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--snap-transition);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

    .modern-search-button:hover {
        background: linear-gradient(135deg, #ff5252, #ff7979);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6);
    }

    .modern-search-button:active {
        transform: translateY(0);
    }

.modern-search-features {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.modern-search-feature {
    display: flex;
    align-items: center;
    color: white;
    font-size: 0.9rem;
    opacity: 0.9;
}

    .modern-search-feature i {
        margin-left: 8px;
        color: #ffd700;
    }

@media (max-width: 768px) {
    .modern-search-form {
        padding: 20px;
    }

    .modern-search-group {
        flex-direction: column;
        border-radius: var(--snap-radius);
        gap: 10px;
    }

    .modern-search-input {
        border-radius: var(--snap-radius);
        text-align: center;
    }

    .modern-search-button {
        border-radius: var(--snap-radius);
        justify-content: center;
    }

    .modern-search-features {
        gap: 15px;
    }
}
/*انتهای سرچ باکس سرویس */


/*ابتدای سرویس های مین پیج و فاکتور خرید - Modern */
.samples-modern-container {
    position: relative;
    padding: 20px 0;
}

.samples-modern-slider {
    position: relative;
    padding: 30px 0;
}

.samples-modern-card {
    background: linear-gradient(145deg, var(--snap-white), #f8f9fa);
    border-radius: var(--snap-radius-lg);
    padding: 25px;
    margin: 15px;
    box-shadow: var(--snap-shadow-lg);
    transition: var(--snap-transition-smooth);
    border: none;
    position: relative;
    overflow: hidden;
    height: 100%;
}

    .samples-modern-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    }

    .samples-modern-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: var(--snap-shadow-xl);
    }

.samples-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.samples-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px dashed #f0f0f0;
}

.samples-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.3);
}



.samples-title {
    font-size: 1.3rem;
    color: var(--snap-dark);
    font-weight: 700;
    margin-bottom: 5px;
}

.samples-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

.samples-feature {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #555;
    padding: 8px 0;
    border-bottom: 1px solid #f8f9fa;
}

    .samples-feature i {
        margin-left: 10px;
        color: var(--snap-primary);
        font-size: 1rem;
        width: 20px;
        text-align: center;
    }

.samples-price-original {
    text-decoration: line-through;
    color: #95a5a6;
    margin-left: 8px;
    font-size: 0.85rem;
}

.samples-price-final {
    color: #e74c3c;
    font-weight: 800;
    font-size: 1.1rem;
}

.samples-free {
    color: var(--snap-success);
    font-weight: 800;
    background: rgba(16, 185, 129, 0.15);
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
}

.samples-time {
    display: inline-flex;
    align-items: center;
    background: rgba(59, 130, 246, 0.1);
    padding: 6px 15px;
    border-radius: 20px;
    color: var(--snap-info);
    font-weight: 600;
    margin-top: 5px;
}

.samples-button {
    display: block;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: white;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--snap-transition);
    border: none;
    cursor: pointer;
    text-align: center;
    width: 100%;
    font-size: 0.95rem;
    box-shadow: var(--snap-shadow-md);
}

    .samples-button:hover {
        background: linear-gradient(135deg, var(--snap-primary-dark), var(--snap-primary));
        box-shadow: var(--snap-shadow-lg);
        transform: translateY(-2px);
        color: white;
        text-decoration: none;
    }

/* استایل Owl Carousel - Modern */
.samples-slider .owl-stage {
    padding: 20px 0;
}

.samples-slider .owl-item {
    padding: 10px;
}

.samples-slider .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.samples-slider .owl-prev,
.samples-slider .owl-next {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    color: var(--snap-primary) !important;
    font-size: 1.5rem !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: var(--snap-shadow-md);
    pointer-events: all;
    transition: var(--snap-transition);
}

    .samples-slider .owl-prev:hover,
    .samples-slider .owl-next:hover {
        background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary)) !important;
        color: white !important;
        transform: scale(1.1);
    }

.samples-slider .owl-dots {
    text-align: center;
    margin-top: 30px;
}

.samples-slider .owl-dot {
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 50%;
    margin: 0 5px;
    transition: var(--snap-transition);
}

    .samples-slider .owl-dot.active {
        background: var(--snap-primary) !important;
        transform: scale(1.3);
    }

.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.divider-line {
    width: 60px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
}

.divider-icon {
    margin: 0 15px;
    color: #ffd700;
    font-size: 1.2rem;
}


.modern-invoice-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 0;
}

.modern-invoice-card {
    background: linear-gradient(145deg, var(--snap-white), #f8f9fa);
    border-radius: var(--snap-radius-lg);
    box-shadow: var(--snap-shadow-xl);
    overflow: hidden;
    margin-bottom: 30px;
}

.modern-invoice-header {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    color: white;
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .modern-invoice-header::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
        transform: rotate(45deg);
    }

.modern-service-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.modern-service-badge {
    background: rgba(255,255,255,0.2);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    display: inline-block;
    margin-top: 10px;
    backdrop-filter: blur(10px);
}

.modern-tabs-container {
    padding: 0;
}

.modern-tabs-nav {
    display: flex;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    padding: 0 30px;
}

.modern-tab-link {
    padding: 20px 30px;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border-bottom: 3px solid transparent;
}

    .modern-tab-link.active {
        color: var(--snap-primary);
        border-bottom-color: var(--snap-primary);
    }

    .modern-tab-link:hover {
        color: var(--snap-primary);
        background: rgba(108, 92, 231, 0.05);
    }

.modern-tab-content {
    padding: 40px;
}

.modern-tab-pane {
    display: none;
}

    .modern-tab-pane.active {
        display: block;
        animation: fadeIn 0.5s ease;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-description-box {
    background: white;
    border-radius: var(--snap-radius);
    padding: 30px;
    box-shadow: var(--snap-shadow);
    border-left: 4px solid var(--snap-primary);
}

.modern-description-text {
    line-height: 2;
    color: #555;
    font-size: 1.1rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    background: #f8f9fa;
    border-radius: var(--snap-radius);
    border: 1px solid #e9ecef;
}

.modern-upload-section {
    background: white;
    border-radius: var(--snap-radius);
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: var(--snap-shadow);
    border-left: 4px solid var(--snap-success);
}

.modern-section-title {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    color: var(--snap-dark);
    font-size: 1.3rem;
    font-weight: 600;
}

    .modern-section-title i {
        margin-left: 12px;
        color: var(--snap-primary);
        font-size: 1.5rem;
    }

.modern-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.modern-upload-item {
    background: linear-gradient(145deg, #f8f9fa, var(--snap-white));
    border: 2px dashed #dee2e6;
    border-radius: var(--snap-radius);
    padding: 20px;
    text-align: center;
    transition: var(--snap-transition);
    cursor: pointer;
}

    .modern-upload-item:hover {
        border-color: var(--snap-primary);
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(108, 92, 231, 0.2);
    }

.modern-upload-btn {
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    transition: var(--snap-transition);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .modern-upload-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
    }

.modern-input-group {
    background: white;
    border-radius: var(--snap-radius);
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: var(--snap-shadow);
    border-left: 4px solid #ffc107;
}

.modern-form-input {
    border: 2px solid #e9ecef;
    border-radius: var(--snap-radius);
    padding: 15px 20px;
    font-size: 1rem;
    transition: var(--snap-transition);
    width: 100%;
}

    .modern-form-input:focus {
        border-color: var(--snap-primary);
        box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
    }

.modern-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.modern-radio-group {
    display: flex;
    gap: 30px;
    margin-top: 15px;
}

.modern-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.modern-radio-input {
    width: 20px;
    height: 20px;
    accent-color: var(--snap-primary);
}

.modern-sidebar {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    border-radius: var(--snap-radius-lg);
    padding: 40px 30px;
    color: white;
    box-shadow: var(--snap-shadow-xl);
    position: sticky;
    top: 30px;
}

.modern-invoice-summary {
    background: rgba(255,255,255,0.1);
    border-radius: var(--snap-radius);
    padding: 25px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
}

.modern-summary-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    color: white;
}

.modern-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

    .modern-summary-item:last-child {
        border-bottom: none;
    }

.modern-price-original {
    text-decoration: line-through;
    opacity: 0.7;
    font-size: 0.9rem;
}

.modern-price-discount {
    color: #4cd964;
    font-weight: 600;
}

.modern-price-final {
    font-weight: 700;
    font-size: 1.1rem;
}

.modern-total-price {
    background: rgba(255,255,255,0.2);
    border-radius: var(--snap-radius);
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.modern-action-buttons {
    display: grid;
    gap: 15px;
    margin-top: 25px;
}

.modern-pay-btn {
    background: linear-gradient(135deg, #4cd964, #2ecc71);
    color: white;
    border: none;
    padding: 18px 30px;
    border-radius: var(--snap-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--snap-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .modern-pay-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(76, 217, 100, 0.4);
    }

.modern-auth-btn {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
    padding: 15px 20px;
    border-radius: var(--snap-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--snap-transition);
    text-align: center;
    text-decoration: none;
    backdrop-filter: blur(10px);
}

    .modern-auth-btn:hover {
        background: rgba(255,255,255,0.3);
        transform: translateY(-2px);
        color: white;
        text-decoration: none;
    }

.modern-alert {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--snap-radius);
    padding: 20px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.modern-loading-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 18px 30px;
    border-radius: var(--snap-radius);
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .modern-tabs-nav {
        flex-direction: column;
        padding: 0;
    }

    .modern-tab-link {
        padding: 15px 20px;
        border-bottom: 1px solid #e9ecef;
        border-left: 3px solid transparent;
    }

        .modern-tab-link.active {
            border-left-color: var(--snap-primary);
            border-bottom-color: #e9ecef;
        }

    .modern-upload-grid {
        grid-template-columns: 1fr;
    }

    .modern-radio-group {
        flex-direction: column;
        gap: 15px;
    }
}



/*انتها سرویس های مین و فاکتور */




/*ابتدا لاگین - Modern */
.modern-login-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.modern-login-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
}

.modern-login-section .container {
    position: relative;
    z-index: 2;
}

.modern-hero-content {
    padding: 40px 0;
}

.modern-hero-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 12px 25px;
    border-radius: 25px;
    display: inline-block;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    .modern-hero-badge i {
        margin-left: 8px;
        color: #ffd700;
    }

.modern-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.gradient-text {
    background: linear-gradient(45deg, #ffd700, #ffed4e, var(--snap-white));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modern-hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 40px;
    opacity: 0.9;
    line-height: 1.8;
}

.modern-features-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modern-feature-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px 25px;
    border-radius: var(--snap-radius);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: var(--snap-transition);
}

    .modern-feature-item:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateX(10px);
    }

    .modern-feature-item i {
        margin-left: 15px;
        font-size: 1.3rem;
        color: #ffd700;
        width: 25px;
        text-align: center;
    }

.modern-login-card {
    background: rgba(255, 255, 255, 0.98);
    border-radius: var(--snap-radius-lg);
    box-shadow: var(--snap-shadow-xl);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: var(--snap-transition);
}

    .modern-login-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 35px 100px rgba(0, 0, 0, 0.3);
    }

.modern-card-body {
    padding: 50px 40px;
}

.modern-login-header {
    text-align: center;
    margin-bottom: 40px;
}

.modern-login-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.4);
}

    .modern-login-icon i {
        font-size: 2rem;
        color: white;
    }

.modern-login-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--snap-dark);
    margin-bottom: 10px;
}

.modern-login-subtitle {
    color: #6c757d;
    font-size: 1rem;
}

.modern-form-group {
    margin-bottom: 25px;
}

.modern-form-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--snap-dark);
    margin-bottom: 10px;
    font-size: 0.95rem;
}

    .modern-form-label i {
        margin-left: 8px;
        color: var(--snap-primary);
        font-size: 1rem;
    }

.modern-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.modern-forgot-link {
    color: var(--snap-primary);
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--snap-transition);
}

    .modern-forgot-link:hover {
        color: var(--snap-secondary);
        text-decoration: underline;
    }

.modern-input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: var(--snap-radius);
    transition: var(--snap-transition);
}

    .modern-input-group:focus-within {
        border-color: var(--snap-primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
    }

.modern-input-prefix {
    padding: 0 15px;
    color: #6c757d;
    font-weight: 600;
    border-left: 2px solid #e9ecef;
    display: flex;
    align-items: center;
    height: 100%;
}

.modern-input-suffix {
    padding: 0 15px;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 100%;
}

.modern-form-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 15px;
    font-size: 1rem;
    outline: none;
    color: var(--snap-dark);
}

    .modern-form-input::placeholder {
        color: #9aa0a6;
    }

.modern-error-message {
    display: flex;
    align-items: center;
    color: var(--snap-danger);
    font-size: 0.85rem;
    margin-top: 8px;
}

    .modern-error-message i {
        margin-left: 5px;
    }

.modern-login-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: white;
    border: none;
    padding: 18px 30px;
    border-radius: var(--snap-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--snap-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

    .modern-login-btn:hover:not(.disabled) {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(108, 92, 231, 0.4);
    }

    .modern-login-btn.disabled {
        background: #6c757d;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.modern-login-footer {
    margin-top: 30px;
    text-align: center;
}

.modern-divider {
    position: relative;
    margin: 25px 0;
    text-align: center;
}

    .modern-divider::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        height: 1px;
        background: #e9ecef;
    }

    .modern-divider span {
        background: white;
        padding: 0 15px;
        color: #6c757d;
        font-size: 0.9rem;
    }

.modern-register-text {
    color: #6c757d;
    margin: 0;
}

.modern-register-link {
    color: var(--snap-primary);
    font-weight: 600;
    text-decoration: none;
    transition: var(--snap-transition);
}

    .modern-register-link:hover {
        color: var(--snap-secondary);
        text-decoration: underline;
    }

@media (max-width: 768px) {
    .modern-hero-title {
        font-size: 2.5rem;
    }

    .modern-card-body {
        padding: 30px 25px;
    }

    .modern-login-icon {
        width: 60px;
        height: 60px;
    }

        .modern-login-icon i {
            font-size: 1.5rem;
        }
}
/*انتها لاگین */



/*ابتدا رجیستر - Modern */
.modern-register-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.modern-register-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
}

.modern-register-section .container {
    position: relative;
    z-index: 2;
}

.modern-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.modern-benefit-item {
    display: flex;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: var(--snap-radius);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: var(--snap-transition);
}

    .modern-benefit-item:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateX(10px);
    }

.benefit-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--snap-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    flex-shrink: 0;
}

    .benefit-icon i {
        font-size: 1.3rem;
        color: #ffd700;
    }

.benefit-content h5 {
    color: white;
    margin-bottom: 5px;
    font-weight: 600;
}

.benefit-content p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.modern-register-card {
    background: rgba(255, 255, 255, 0.98);
    border-radius: var(--snap-radius-lg);
    box-shadow: var(--snap-shadow-xl);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: var(--snap-transition);
}

    .modern-register-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 35px 100px rgba(0, 0, 0, 0.3);
    }

.modern-card-body {
    padding: 50px 40px;
}

.modern-register-header {
    text-align: center;
    margin-bottom: 40px;
}

.modern-register-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.4);
}

    .modern-register-icon i {
        font-size: 2rem;
        color: white;
    }

.modern-register-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--snap-dark);
    margin-bottom: 10px;
}

.modern-register-subtitle {
    color: #6c757d;
    font-size: 1rem;
}

.modern-form-group {
    margin-bottom: 25px;
}

.modern-form-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--snap-dark);
    margin-bottom: 10px;
    font-size: 0.95rem;
}

    .modern-form-label i {
        margin-left: 8px;
        color: var(--snap-primary);
        font-size: 1rem;
    }

.modern-input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: var(--snap-radius);
    transition: var(--snap-transition);
}

    .modern-input-group:focus-within {
        border-color: var(--snap-primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
    }

.modern-input-prefix {
    padding: 0 15px;
    color: #6c757d;
    font-weight: 600;
    border-left: 2px solid #e9ecef;
    display: flex;
    align-items: center;
    height: 100%;
}

.modern-input-suffix {
    padding: 0 15px;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 100%;
}

.modern-form-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 15px;
    font-size: 1rem;
    outline: none;
    color: var(--snap-dark);
}

    .modern-form-input::placeholder {
        color: #9aa0a6;
    }

.modern-error-message {
    display: flex;
    align-items: center;
    color: var(--snap-danger);
    font-size: 0.85rem;
    margin-top: 8px;
}

    .modern-error-message i {
        margin-left: 5px;
    }

.modern-inline-link {
    color: var(--snap-primary);
    text-decoration: none;
    margin: 0 5px;
}

    .modern-inline-link:hover {
        text-decoration: underline;
    }

.modern-password-strength {
    margin-top: 10px;
}

.strength-bar {
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}

.strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: all 0.3s ease;
}

    .strength-fill.weak {
        width: 33%;
        background: var(--snap-danger);
    }

    .strength-fill.medium {
        width: 66%;
        background: var(--snap-warning);
    }

    .strength-fill.strong {
        width: 100%;
        background: var(--snap-success);
    }

.strength-text {
    font-size: 0.8rem;
    color: #6c757d;
}

.modern-password-match {
    display: none;
    align-items: center;
    color: var(--snap-success);
    font-size: 0.85rem;
    margin-top: 8px;
}

    .modern-password-match i {
        margin-left: 5px;
    }

    .modern-password-match.show {
        display: flex;
    }

.modern-register-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: white;
    border: none;
    padding: 18px 30px;
    border-radius: var(--snap-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--snap-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

    .modern-register-btn:hover:not(.disabled) {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(108, 92, 231, 0.4);
    }

    .modern-register-btn.disabled {
        background: #6c757d;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.modern-loading-btn {
    width: 100%;
    background: #6c757d;
    color: white;
    border: none;
    padding: 18px 30px;
    border-radius: var(--snap-radius);
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    cursor: not-allowed;
}

.modern-register-footer {
    margin-top: 30px;
    text-align: center;
}

.modern-divider {
    position: relative;
    margin: 25px 0;
    text-align: center;
}

    .modern-divider::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        height: 1px;
        background: #e9ecef;
    }

    .modern-divider span {
        background: white;
        padding: 0 15px;
        color: #6c757d;
        font-size: 0.9rem;
    }

.modern-login-text {
    color: #6c757d;
    margin: 0;
}

.modern-login-link {
    color: var(--snap-primary);
    font-weight: 600;
    text-decoration: none;
    transition: var(--snap-transition);
}

    .modern-login-link:hover {
        color: var(--snap-secondary);
        text-decoration: underline;
    }

@media (max-width: 768px) {
    .modern-card-body {
        padding: 30px 25px;
    }

    .modern-register-icon {
        width: 60px;
        height: 60px;
    }

        .modern-register-icon i {
            font-size: 1.5rem;
        }

    .modern-benefit-item {
        padding: 15px;
    }

    .benefit-icon {
        width: 40px;
        height: 40px;
        margin-left: 10px;
    }

        .benefit-icon i {
            font-size: 1.1rem;
        }
}



.phone-input {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

    /* حذف فلش‌های بالا/پایین در input number */
    .phone-input::-webkit-outer-spin-button,
    .phone-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .phone-input[type=number] {
        -moz-appearance: textfield;
    }

.modern-input-prefix {
    background: #f8f9fa;
    border-right: 2px solid #e9ecef;
    color: #495057;
    font-weight: 600;
    min-width: 50px;
    justify-content: center;
}

.modern-features-section {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    position: relative;
    overflow: hidden;
}

    .modern-features-section::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    }

.modern-section-heading {
    position: relative;
    z-index: 2;
}

.modern-section-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px 25px;
    border-radius: 25px;
    display: inline-block;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    .modern-section-badge i {
        margin-left: 8px;
    }

.modern-section-title {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.modern-section-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    line-height: 1.6;
}

/* کارت‌های ویژگی‌های اصلی - Modern */
.modern-feature-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--snap-radius-lg);
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: var(--snap-transition-smooth);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 100%;
}

    .modern-feature-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--snap-shadow-xl);
    }

.feature-icon-wrapper {
    margin-bottom: 25px;
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.3);
}

    .feature-icon i {
        font-size: 2rem;
        color: white;
    }

.feature-title {
    color: var(--snap-dark);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.feature-description {
    color: #6c757d;
    line-height: 1.8;
    margin-bottom: 0;
}

.feature-wave {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
}

/*انتها رجیستر */


/* بخش خدمات هوش مصنوعی - Modern */
.ai-services-header {
    position: relative;
    z-index: 2;
}

.ai-title {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.ai-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

/* کارت‌های خدمات هوش مصنوعی - Modern */
.ai-service-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--snap-radius-lg);
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    transition: var(--snap-transition);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 5;
    height: 100%;
}

    .ai-service-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--snap-shadow-xl);
    }

.ai-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.ai-icon {
    width: 70px;
    height: 70px;
    border-radius: var(--snap-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.translation-service .ai-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.content-service .ai-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.ai-badge {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 6px 15px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.ai-service-title {
    color: var(--snap-dark);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.ai-service-description {
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 25px;
}

.ai-features {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.ai-feature {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #495057;
}

    .ai-feature i {
        margin-left: 5px;
        color: var(--snap-success);
        font-size: 0.8rem;
    }

.ai-action {
    text-align: center;
}

.ai-service-btn {
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--snap-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .ai-service-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(108, 92, 231, 0.4);
        color: white;
        text-decoration: none;
    }

.ai-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(108, 92, 231, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-service-card:hover .ai-glow {
    opacity: 1;
}

/* بخش آمار - Modern */
.modern-stats-section {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--snap-radius-lg);
    padding: 40px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--snap-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-content h3 {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.stat-content p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .modern-section-title {
        font-size: 2rem;
    }

    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-features {
        flex-direction: column;
        gap: 10px;
    }

    .modern-feature-card,
    .ai-service-card {
        padding: 30px 20px;
    }
}
/*انتها خدمات هوش مصنوعی */


/*ابتدا سرچ مین پیج - Modern */
.ai-search-wrapper {
    position: fixed;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 90%;
    max-width: 500px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .ai-search-wrapper.hidden {
        opacity: 0;
        transform: translateX(-50%) translateY(-100px);
        pointer-events: none;
    }

    .ai-search-wrapper.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

.ai-search-box {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 40px;
    box-shadow: var(--snap-shadow-xl);
    position: relative;
    transition: var(--snap-transition);
}

    .ai-search-box:hover {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

.search-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.ai-icon {
    color: var(--snap-primary);
    font-size: 1.2rem;
    margin-right: 5px;
    animation: aiPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes aiPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.ai-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 1rem;
    color: var(--snap-dark);
    outline: none;
    font-weight: 500;
}

    .ai-search-input::placeholder {
        color: #9aa0a6;
        font-weight: 400;
    }

.ai-search-btn {
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: var(--snap-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
}

    .ai-search-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
    }

.ai-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
    display: flex;
    align-items: center;
    gap: 4px;
    animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-3px);
    }
}

/* انیمیشن ورود */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.ai-search-wrapper {
    animation: slideInDown 0.6s ease;
}

/* واکنش‌گرا */
@media (max-width: 768px) {
    .ai-search-wrapper {
        top: 95px;
        width: 95%;
    }

    .ai-search-box {
        border-radius: 25px;
        padding: 6px;
    }

    .ai-search-input {
        font-size: 0.9rem;
        padding: 10px 0;
    }

        .ai-search-input::placeholder {
            font-size: 0.85rem;
        }

    .ai-badge {
        font-size: 0.65rem;
        padding: 3px 10px;
    }
}

@media (max-width: 480px) {
    .ai-search-input::placeholder {
        content: "از هوش مصنوعی بپرس...";
    }
}

/*انتها سرچ مین پیج */


/*ابتدا صفحه انجام کار ترجمه - Modern */
.modern-wallet-section {
    background: #f8f9fa;
    position: relative;
}

/* کارت کیف پول - Modern */
.modern-wallet-card {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    border-radius: var(--snap-radius-lg);
    padding: 40px;
    color: white;
    box-shadow: 0 20px 60px rgba(108, 92, 231, 0.3);
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

    .modern-wallet-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    }

.wallet-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.wallet-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--snap-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    font-size: 1.5rem;
}

.wallet-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.wallet-subtitle {
    opacity: 0.8;
    margin: 0;
}

.wallet-balance {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.balance-amount {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

    .balance-amount span {
        font-size: 1.5rem;
        font-weight: 600;
    }

.withdraw-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--snap-transition);
    backdrop-filter: blur(10px);
}

    .withdraw-btn:hover:not(.disabled) {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
    }

    .withdraw-btn.disabled {
        background: rgba(255, 255, 255, 0.1);
        cursor: not-allowed;
        opacity: 0.7;
    }

.wallet-notice {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: var(--snap-radius);
    text-align: center;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
}

    .wallet-notice i {
        margin-left: 8px;
        color: #ffd700;
    }

/* بخش امتیازات - Modern */
.modern-points-section {
    background: white;
    border-radius: var(--snap-radius-lg);
    padding: 30px;
    box-shadow: var(--snap-shadow-xl);
    margin-bottom: 30px;
}

.points-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

    .points-header h4 {
        color: var(--snap-dark);
        font-weight: 700;
        margin: 0;
    }

.total-points {
    text-align: center;
}

    .total-points span {
        display: block;
        font-size: 2rem;
        font-weight: 800;
        color: var(--snap-primary);
    }

.points-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.point-item {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: var(--snap-radius);
    transition: var(--snap-transition);
    border: 2px solid #f0f0f0;
}

    .point-item.completed {
        border-color: var(--snap-success);
        background: rgba(16, 185, 129, 0.05);
    }

    .point-item.active {
        border-color: var(--snap-primary);
        background: rgba(108, 92, 231, 0.05);
    }

.point-icon {
    width: 50px;
    height: 50px;
    background: var(--snap-primary);
    border-radius: var(--snap-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    color: white;
    font-size: 1.2rem;
}

.point-item.completed .point-icon {
    background: var(--snap-success);
}

.point-content {
    flex: 1;
}

    .point-content h5 {
        color: var(--snap-dark);
        margin-bottom: 5px;
        font-weight: 600;
    }

    .point-content p {
        color: #6c757d;
        margin-bottom: 8px;
        font-size: 0.9rem;
    }

.progress-bar {
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.point-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.point-item.completed .point-badge {
    background: var(--snap-success);
    color: white;
}

.point-item.active .point-badge {
    background: var(--snap-primary);
    color: white;
}

.referral-section {
    margin-top: 25px;
    text-align: center;
}

.referral-btn {
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--snap-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .referral-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(108, 92, 231, 0.4);
    }

.copy-message {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--snap-success);
    font-weight: 600;
    margin-top: 10px;
}

/* بخش خدمات هوش مصنوعی - Modern */
.ai-service-container {
    background: white;
    border-radius: var(--snap-radius-lg);
    padding: 40px;
    box-shadow: var(--snap-shadow-xl);
    height: 100%;
}

.ai-service-header {
    text-align: center;
    margin-bottom: 30px;
}

    .ai-service-header h3 {
        color: var(--snap-dark);
        font-weight: 700;
        margin-bottom: 10px;
    }

    .ai-service-header p {
        color: #6c757d;
    }

.input-type-selector {
    margin-bottom: 25px;
}

.type-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

    .type-options input[type="radio"] {
        display: none;
    }

.type-option {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: var(--snap-radius);
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: var(--snap-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

    .type-option i {
        font-size: 1.5rem;
        color: var(--snap-primary);
    }

.type-options input[type="radio"]:checked + .type-option {
    background: var(--snap-primary);
    color: white;
    border-color: var(--snap-primary);
}

    .type-options input[type="radio"]:checked + .type-option i {
        color: white;
    }

.input-section {
    display: none;
    margin-bottom: 25px;
}

    .input-section.active {
        display: block;
        animation: fadeIn 0.3s ease;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-textarea {
    border: 2px solid #e9ecef;
    border-radius: var(--snap-radius);
    padding: 15px;
    font-size: 1rem;
    resize: vertical;
    transition: var(--snap-transition);
}

    .modern-textarea:focus {
        border-color: var(--snap-primary);
        box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
    }

.file-upload-area,
.image-upload-area {
    border: 2px dashed #dee2e6;
    border-radius: var(--snap-radius);
    padding: 40px 20px;
    text-align: center;
    transition: var(--snap-transition);
    cursor: pointer;
}

    .file-upload-area:hover,
    .image-upload-area:hover {
        border-color: var(--snap-primary);
        background: rgba(108, 92, 231, 0.05);
    }

    .file-upload-area i,
    .image-upload-area i {
        font-size: 3rem;
        color: #6c757d;
        margin-bottom: 15px;
    }

    .file-upload-area h5,
    .image-upload-area h5 {
        color: var(--snap-dark);
        margin-bottom: 10px;
    }

    .file-upload-area p,
    .image-upload-area p {
        color: #6c757d;
        margin-bottom: 15px;
    }

.browse-btn {
    background: var(--snap-primary);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--snap-transition);
}

    .browse-btn:hover {
        background: var(--snap-primary-dark);
        transform: translateY(-2px);
    }

.modern-select {
    border: 2px solid #e9ecef;
    border-radius: var(--snap-radius);
    padding: 12px 15px;
    font-size: 1rem;
    transition: var(--snap-transition);
}

    .modern-select:focus {
        border-color: var(--snap-primary);
        box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
    }

.translate-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: var(--snap-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--snap-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .translate-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(108, 92, 231, 0.4);
    }

/* بخش کسب امتیاز بیشتر - Modern */
.earn-more-section {
    background: white;
    border-radius: var(--snap-radius-lg);
    padding: 40px;
    box-shadow: var(--snap-shadow-xl);
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

    .section-header h3 {
        color: var(--snap-dark);
        font-weight: 700;
        margin-bottom: 10px;
    }

    .section-header p {
        color: #6c757d;
        font-size: 1.1rem;
    }

.activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.activity-card {
    background: #f8f9fa;
    border-radius: var(--snap-radius-lg);
    padding: 30px;
    text-align: center;
    transition: var(--snap-transition);
    border: 2px solid transparent;
}

    .activity-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--snap-shadow-xl);
        border-color: var(--snap-primary);
    }

.activity-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    border-radius: var(--snap-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: white;
}

.activity-content h4 {
    color: var(--snap-dark);
    font-weight: 700;
    margin-bottom: 15px;
}

.activity-content p {
    color: #6c757d;
    margin-bottom: 20px;
    line-height: 1.6;
}

.activity-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

    .activity-meta span {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #6c757d;
        font-size: 0.9rem;
    }

    .activity-meta i {
        color: var(--snap-primary);
    }

.activity-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 20px;
    cursor: not-allowed;
    transition: var(--snap-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .activity-btn.coming-soon:hover {
        background: #5a6268;
        transform: none;
    }

@media (max-width: 768px) {
    .modern-wallet-card {
        padding: 30px 20px;
    }

    .balance-amount {
        font-size: 2.5rem;
    }

    .type-options {
        grid-template-columns: 1fr;
    }

    .activities-grid {
        grid-template-columns: 1fr;
    }

    .ai-service-container {
        padding: 30px 20px;
    }
}


/*انتها صفحه انجام کار ترجمه */



/*ابتدا صفحه لود ترجمه - Compact AI Loading - Modern Style */
.compact-ai-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    border-radius: var(--snap-radius-lg);
    padding: 30px;
    box-shadow: var(--snap-shadow-xl);
    display: none;
    z-index: 10000;
    min-width: 380px;
    max-width: 450px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    .compact-ai-loading.active {
        display: block;
        animation: compactSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

.compact-ai-content {
    text-align: center;
    color: white;
}

.compact-ai-loader {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    position: relative;
}

.compact-ai-core {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #00ff88, #00ccff);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: corePulse 2s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
}

.compact-ai-orbit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: orbitRotate 3s linear infinite;
}

    .compact-ai-orbit::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        width: 12px;
        height: 12px;
        background: #ff6b6b;
        border-radius: 50%;
        transform: translateX(-50%);
        box-shadow: 0 0 15px #ff6b6b;
    }

.compact-ai-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.compact-ai-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #00ff88;
    border-radius: 50%;
    animation: particleFloat 3s ease-in-out infinite;
    box-shadow: 0 0 10px #00ff88;
}

    .compact-ai-particle:nth-child(1) {
        top: 15%;
        left: 15%;
        animation-delay: 0s;
        background: #00ccff;
    }

    .compact-ai-particle:nth-child(2) {
        top: 15%;
        left: 85%;
        animation-delay: 0.5s;
        background: #ff6b6b;
    }

    .compact-ai-particle:nth-child(3) {
        top: 85%;
        left: 15%;
        animation-delay: 1s;
        background: #00ff88;
    }

    .compact-ai-particle:nth-child(4) {
        top: 85%;
        left: 85%;
        animation-delay: 1.5s;
        background: #ffd93d;
    }

.compact-ai-text {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    background: linear-gradient(45deg, #ffffff, #e0f7fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.compact-ai-subtext {
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 25px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.compact-ai-progress-container {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
}

.compact-ai-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00ff88, #00ccff, #ff6b6b);
    width: 0%;
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    position: relative;
    overflow: hidden;
}

    .compact-ai-progress-bar::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        animation: progressShine 2s ease-in-out infinite;
    }

.compact-ai-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--snap-radius);
    backdrop-filter: blur(10px);
}

.compact-ai-stat {
    text-align: center;
    flex: 1;
}

.compact-ai-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #00ff88;
    margin-bottom: 4px;
}

.compact-ai-stat-label {
    font-size: 11px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.compact-ai-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--snap-transition);
}

    .compact-ai-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
    }

/* Animations */
@keyframes compactSlideIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7) rotate(-10deg);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

@keyframes corePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 0 50px rgba(0, 255, 136, 0.8);
    }
}

@keyframes orbitRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(-10px) scale(1.2);
        opacity: 0.7;
    }
}

@keyframes progressShine {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Responsive */
@media (max-width: 480px) {
    .compact-ai-loading {
        min-width: 320px;
        max-width: 90vw;
        padding: 25px 20px;
    }

    .compact-ai-loader {
        width: 80px;
        height: 80px;
    }

    .compact-ai-core {
        width: 50px;
        height: 50px;
    }

    .compact-ai-text {
        font-size: 20px;
    }

    .compact-ai-subtext {
        font-size: 14px;
    }
}

/* Dark overlay background (optional) */
.compact-ai-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: none;
    z-index: 9999;
}

    .compact-ai-backdrop.active {
        display: block;
        animation: backdropFadeIn 0.3s ease;
    }

@keyframes backdropFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#charCount {
    font-size: 12px;
    margin-top: 5px;
    text-align: left;
    direction: ltr;
}

#myTextarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: var(--snap-radius-sm);
    resize: vertical;
    font-family: inherit;
}

    #myTextarea:focus {
        border-color: var(--snap-success);
        outline: none;
    }


/*انتها صفحه لود ترجمه */





/*ابتدا چت هوش مصنوعی - Modern */

/* استایل کلی چت - Modern */
.chat-container {
    display: flex;
    height: 80vh;
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    border-radius: var(--snap-radius-lg);
    box-shadow: var(--snap-shadow-xl);
    overflow: hidden;
    margin: 20px auto;
    max-width: 1400px;
}

/* سایدبار - Modern */
.sidebar {
    width: 300px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    padding: 25px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.new-chat-btn {
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: white;
    border: none;
    padding: 15px 20px;
    border-radius: var(--snap-radius);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--snap-transition);
    margin-bottom: 25px;
    box-shadow: var(--snap-shadow-md);
}

    .new-chat-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--snap-shadow-lg);
    }

.model-selector-sidebar {
    margin-bottom: 25px;
}

.model-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(108, 92, 231, 0.2);
    border-radius: var(--snap-radius);
    padding: 12px 15px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--snap-transition);
}

    .model-select:focus {
        border-color: var(--snap-primary);
        box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
    }

.chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.chat-history-item {
    padding: 15px;
    margin: 8px 0;
    border-radius: var(--snap-radius);
    cursor: pointer;
    transition: var(--snap-transition);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    .chat-history-item:hover {
        background: rgba(255, 255, 255, 0.8);
        transform: translateX(5px);
    }

    .chat-history-item.active {
        background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
        color: white;
        box-shadow: var(--snap-shadow-md);
    }

.sidebar-footer {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--snap-radius);
    cursor: pointer;
    transition: var(--snap-transition);
    background: rgba(255, 255, 255, 0.6);
}

    .user-profile:hover {
        background: rgba(255, 255, 255, 0.8);
    }

.user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: white;
    box-shadow: var(--snap-shadow-sm);
}

/* بخش اصلی چت - Modern */
.chat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
}

.chat-header {
    padding: 20px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.8);
}

.current-model {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    padding: 10px 20px;
    border-radius: 25px;
    color: white;
    font-weight: 600;
    box-shadow: var(--snap-shadow-sm);
}

.model-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    backdrop-filter: blur(10px);
}

.chat-actions {
    display: flex;
    gap: 10px;
}

.chat-action-btn {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--snap-primary);
    padding: 10px 15px;
    border-radius: var(--snap-radius);
    cursor: pointer;
    transition: var(--snap-transition);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .chat-action-btn:hover {
        background: rgba(255, 255, 255, 0.8);
        transform: translateY(-2px);
    }

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    background: rgba(248, 249, 250, 0.5);
}

.message {
    display: flex;
    gap: 20px;
    max-width: 85%;
    animation: messageSlide 0.4s ease;
}

    .message.user {
        align-self: flex-end;
        flex-direction: row-reverse;
    }

.message-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: var(--snap-shadow-sm);
}

.message.user .message-avatar {
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: white;
}

.message.assistant .message-avatar {
    background: linear-gradient(135deg, #00b09b, #96c93d);
    color: white;
}

.message-content {
    flex: 1;
    padding: 20px;
    border-radius: var(--snap-radius-lg);
    line-height: 1.6;
    box-shadow: var(--snap-shadow);
    position: relative;
}

.message.user .message-content {
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: white;
    border-bottom-right-radius: 5px;
}

.message.assistant .message-content {
    background: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 5px;
}

.message-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 1rem;
}

.message-meta {
    margin-top: 12px;
    font-size: 0.8rem;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 12px;
}

.model-tag {
    background: rgba(108, 92, 231, 0.1);
    padding: 4px 10px;
    border-radius: var(--snap-radius);
    font-weight: 600;
    color: var(--snap-primary);
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 15px 0;
}

.typing-dot {
    width: 10px;
    height: 10px;
    background: var(--snap-primary);
    border-radius: 50%;
    animation: typingPulse 1.5s infinite ease-in-out;
}

    .typing-dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .typing-dot:nth-child(3) {
        animation-delay: 0.4s;
    }

/* بخش ورودی - Modern */
.input-container {
    padding: 25px 30px;
    background: rgba(255, 255, 255, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.input-box {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.input-textarea {
    width: 100%;
    background: white;
    border: 2px solid rgba(108, 92, 231, 0.2);
    border-radius: var(--snap-radius-lg);
    padding: 18px 60px 18px 20px;
    color: var(--snap-dark);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    resize: none;
    outline: none;
    max-height: 150px;
    min-height: 60px;
    box-shadow: var(--snap-shadow);
    transition: var(--snap-transition);
}

    .input-textarea:focus {
        border-color: var(--snap-primary);
        box-shadow: var(--snap-shadow-lg);
    }

.send-button {
    position: absolute;
    left: 15px;
    bottom: 15px;
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--snap-transition);
    box-shadow: var(--snap-shadow-sm);
}

    .send-button:hover:not(:disabled) {
        transform: scale(1.1);
        box-shadow: var(--snap-shadow-md);
    }

    .send-button:disabled {
        background: #bdc3c7;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.input-footer {
    text-align: center;
    margin-top: 15px;
    font-size: 0.8rem;
    color: #7f8c8d;
}

/* انیمیشن‌ها */
@keyframes messageSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes typingPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* اسکرول بار - Modern */
.messages-container::-webkit-scrollbar {
    width: 8px;
}

.messages-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.messages-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    border-radius: 4px;
}

/* واکنش‌گرا */
@media (max-width: 1024px) {
    .chat-container {
        flex-direction: column;
        height: 90vh;
    }

    .sidebar {
        width: 100%;
        height: 200px;
    }

    .message {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .chat-container {
        margin: 10px;
        height: 95vh;
    }

    .messages-container {
        padding: 15px;
    }

    .message-content {
        padding: 15px;
    }

    .chat-header {
        padding: 15px 20px;
        flex-direction: column;
        gap: 10px;
    }

    .input-container {
        padding: 15px 20px;
    }
}

/*انتها چت هوش مصنوعی */


/* سرچ باکس اصلی - Modern */

/* استایل دایره کوچک همیشه در وسط سمت چپ - Modern */
.ai-circle-toggle {
    position: fixed;
    top: 50%;
    left: 40px;
    transform: translateY(-50%) scale(1);
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #00ff88, #00ccff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.7), 0 0 60px rgba(0, 204, 255, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.3);
    transition: var(--snap-transition-smooth);
    animation: floatAnimation 6s ease-in-out infinite;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* انیمیشن شناور برای دایره */
@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(-50%) scale(1) translateX(0);
    }

    25% {
        transform: translateY(-52%) scale(1.05) translateX(-5px);
    }

    50% {
        transform: translateY(-48%) scale(1.03) translateX(5px);
    }

    75% {
        transform: translateY(-51%) scale(1.07) translateX(-3px);
    }
}

/* حالت فعال دایره */
.ai-circle-toggle.active {
    animation: activePulse 2s ease-in-out infinite;
    box-shadow: 0 0 50px rgba(0, 255, 136, 0.9), 0 0 100px rgba(0, 204, 255, 0.7), 0 0 150px rgba(255, 107, 107, 0.5), inset 0 0 30px rgba(255, 255, 255, 0.5);
}

@keyframes activePulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 50px rgba(0, 255, 136, 0.9), 0 0 100px rgba(0, 204, 255, 0.7), inset 0 0 30px rgba(255, 255, 255, 0.5);
    }

    50% {
        transform: translateY(-50%) scale(1.15);
        box-shadow: 0 0 70px rgba(0, 255, 136, 1), 0 0 140px rgba(0, 204, 255, 0.9), 0 0 200px rgba(255, 107, 107, 0.7), inset 0 0 40px rgba(255, 255, 255, 0.7);
    }
}

.ai-circle-toggle i {
    font-size: 1.8rem;
    color: white;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease;
    z-index: 2;
}

.ai-circle-toggle:hover {
    transform: translateY(-50%) scale(1.2);
    box-shadow: 0 0 60px rgba(0, 255, 136, 0.9), 0 0 120px rgba(0, 204, 255, 0.8), 0 0 180px rgba(255, 107, 107, 0.6), inset 0 0 40px rgba(255, 255, 255, 0.6);
}

    .ai-circle-toggle:hover i {
        transform: rotate(25deg) scale(1.2);
    }

/* افکت نور درونی دایره */
.ai-circle-toggle::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: conic-gradient( from 0deg, #00ff88, #00ccff, var(--snap-primary), var(--snap-secondary), #ff6b6b, #ff8e8e, #00ff88 );
    border-radius: 50%;
    background-size: 400% 400%;
    z-index: -1;
    filter: blur(25px);
    opacity: 0;
    animation: rotateGradient 8s linear infinite;
    transition: opacity 0.5s ease;
}

.ai-circle-toggle.active::before {
    opacity: 0.8;
}

@keyframes rotateGradient {
    0% {
        background-position: 0% 50%;
        transform: rotate(0deg);
    }

    100% {
        background-position: 400% 50%;
        transform: rotate(360deg);
    }
}

/* استایل سرچ باکس اصلی (در بالای وسط صفحه) - Modern */
.ai-search-container {
    position: fixed;
    top: 110px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    z-index: 9999;
    width: 90%;
    max-width: 700px;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

    .ai-search-container.active {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        pointer-events: all;
        visibility: visible;
    }

/* استایل باکس جستجو - Modern */
.ai-search-box {
    background: rgba(20, 20, 30, 0.95);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--snap-radius-lg);
    padding: 25px;
    margin-top: 20px;
    box-shadow: var(--snap-shadow-xl);
    position: relative;
    overflow: hidden;
    border-top: 3px solid #00ff88;
}

    .ai-search-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(0, 255, 136, 0.08) 0%, rgba(0, 204, 255, 0.06) 30%, rgba(108, 92, 231, 0.04) 60%, transparent 100%);
        border-radius: var(--snap-radius-lg);
    }

.search-input-group {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.ai-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 18px 0;
    font-size: 1.2rem;
    color: white;
    outline: none;
    font-weight: 500;
    direction: rtl;
    letter-spacing: 0.5px;
}

    .ai-search-input::placeholder {
        color: rgba(255, 255, 255, 0.6);
        font-weight: 400;
        font-size: 1.1rem;
    }

.ai-search-btn {
    background: linear-gradient(135deg, #00ff88, #00ccff);
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 5px 25px rgba(0, 255, 136, 0.5), 0 0 20px rgba(0, 204, 255, 0.3);
    position: relative;
    overflow: hidden;
}

    .ai-search-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
        transition: 0.6s;
    }

    .ai-search-btn:hover::before {
        left: 100%;
    }

    .ai-search-btn:hover {
        transform: scale(1.15) rotate(15deg);
        box-shadow: 0 8px 35px rgba(0, 255, 136, 0.7), 0 0 40px rgba(0, 204, 255, 0.5), 0 0 60px rgba(108, 92, 231, 0.3);
    }

/* بادج هوش مصنوعی - Modern */
.ai-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 10px 25px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 6px 25px rgba(255, 107, 107, 0.5), 0 0 15px rgba(255, 107, 107, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: badgeFloat 5s ease-in-out infinite;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: 1px;
}

@keyframes badgeFloat {
    0%, 100% {
        transform: translateX(-50%) translateY(0) rotate(0deg);
    }

    25% {
        transform: translateX(-50%) translateY(-8px) rotate(3deg);
    }

    50% {
        transform: translateX(-50%) translateY(4px) rotate(-2deg);
    }

    75% {
        transform: translateX(-50%) translateY(-6px) rotate(2deg);
    }
}

/* افکت‌های نور - Modern */
.glow-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: var(--snap-radius-lg);
    background: radial-gradient( circle at 30% 20%, rgba(0, 255, 136, 0.2) 0%, rgba(0, 204, 255, 0.15) 25%, rgba(108, 92, 231, 0.1) 50%, transparent 80% );
    animation: glowPulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.4;
        filter: blur(20px);
    }

    50% {
        opacity: 0.7;
        filter: blur(25px);
    }
}

/* ذرات شناور - Modern */
.floating-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(0, 255, 136, 0.9);
    border-radius: 50%;
    animation: floatParticle 10s linear infinite;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.8), 0 0 40px rgba(0, 255, 136, 0.4);
    filter: blur(1px);
}

    .particle:nth-child(1) {
        top: 15%;
        left: 10%;
        animation-delay: 0s;
        background: rgba(0, 204, 255, 0.9);
    }

    .particle:nth-child(2) {
        top: 65%;
        left: 85%;
        animation-delay: 1.5s;
        background: rgba(255, 107, 107, 0.9);
    }

    .particle:nth-child(3) {
        top: 85%;
        left: 25%;
        animation-delay: 3s;
        background: rgba(147, 51, 234, 0.9);
    }

    .particle:nth-child(4) {
        top: 35%;
        left: 70%;
        animation-delay: 4.5s;
        background: rgba(255, 159, 28, 0.9);
    }

@keyframes floatParticle {
    0% {
        transform: translateY(0) translateX(0) scale(1) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-150px) translateX(80px) scale(0) rotate(180deg);
        opacity: 0;
    }
}

/* دکمه بستن - Modern */
.ai-close-btn {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 5px 20px rgba(255, 107, 107, 0.5), 0 0 15px rgba(255, 107, 107, 0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: none;
    font-size: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

    .ai-close-btn:hover {
        transform: scale(1.25) rotate(90deg);
        box-shadow: 0 8px 25px rgba(255, 107, 107, 0.7), 0 0 30px rgba(255, 107, 107, 0.5);
    }

/* ریسپانسیو */
@media (max-width: 768px) {
    .ai-circle-toggle {
        left: 20px;
        width: 60px;
        height: 60px;
    }

        .ai-circle-toggle i {
            font-size: 1.5rem;
        }

    .ai-search-container {
        width: 95%;
        top: 65px;
    }

    .ai-search-box {
        padding: 20px;
        border-radius: var(--snap-radius);
    }

    .search-input-group {
        gap: 15px;
    }

    .ai-search-input {
        font-size: 1.1rem;
        padding: 15px 0;
    }

    .ai-search-btn {
        width: 50px;
        height: 50px;
    }

    .ai-badge {
        font-size: 0.75rem;
        padding: 8px 20px;
    }

    .ai-close-btn {
        top: -15px;
        right: -15px;
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 480px) {
    .ai-circle-toggle {
        width: 55px;
        height: 55px;
        left: 15px;
    }

    .ai-search-input::placeholder {
        font-size: 1rem;
    }

    .ai-icon {
        font-size: 1.4rem;
    }

    .ai-search-input {
        font-size: 1rem;
    }

    .ai-badge {
        font-size: 0.7rem;
        padding: 7px 15px;
    }
}

/* انیمیشن ورود باکس */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-50px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.ai-search-container.active {
    animation: slideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}




/*الرت صفری - Minimal New */
.minimal-new-container {
    width: 100%;
    max-width: 900px;
    text-align: center;
}

.minimal-new-title {
    font-size: 2.8rem;
    margin-bottom: 10px;
    color: #0f172a;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.minimal-new-subtitle {
    font-size: 1.2rem;
    color: #64748b;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.minimal-new-alert-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

/* استایل پایه آلرت مینیمال جدید - Modern */
.minimal-new-alert {
    padding: 22px 25px;
    border-radius: var(--snap-radius);
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--snap-shadow);
    transition: var(--snap-transition);
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

    .minimal-new-alert:hover {
        transform: translateY(-5px);
        box-shadow: var(--snap-shadow-lg);
    }

/* آلرت موفقیت مینیمال جدید */
.minimal-new-alert-success {
    border-right: 4px solid var(--snap-success);
    background-color: rgba(16, 185, 129, 0.05);
}

/* آلرت خطای مینیمال جدید */
.minimal-new-alert-error {
    border-right: 4px solid var(--snap-danger);
    background-color: rgba(239, 68, 68, 0.05);
}

.minimal-new-alert-icon {
    font-size: 1.8rem;
    margin-left: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.minimal-new-alert-success .minimal-new-alert-icon {
    background-color: rgba(16, 185, 129, 0.1);
    color: #16a34a;
}

.minimal-new-alert-error .minimal-new-alert-icon {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.minimal-new-alert-content {
    text-align: right;
    flex-grow: 1;
}

.minimal-new-alert-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #0f172a;
}

.minimal-new-alert-message {
    font-size: 1rem;
    line-height: 1.6;
    color: #475569;
}

/* دکمه‌های نمایش مینیمال جدید - Modern */
.minimal-new-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.minimal-new-btn {
    padding: 15px 32px;
    font-size: 1.1rem;
    border: none;
    border-radius: var(--snap-radius);
    cursor: pointer;
    font-weight: 600;
    transition: var(--snap-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 220px;
    letter-spacing: 0.3px;
}

.minimal-new-btn-success {
    background-color: var(--snap-success);
    color: white;
}

    .minimal-new-btn-success:hover {
        background-color: #059669;
        box-shadow: var(--snap-shadow-md);
        transform: translateY(-2px);
    }

.minimal-new-btn-error {
    background-color: var(--snap-danger);
    color: white;
}

    .minimal-new-btn-error:hover {
        background-color: #dc2626;
        box-shadow: var(--snap-shadow-md);
        transform: translateY(-2px);
    }

.minimal-new-btn-outline {
    background-color: transparent;
    color: #475569;
    border: 2px solid #cbd5e1;
}

    .minimal-new-btn-outline:hover {
        background-color: #f8fafc;
        border-color: #94a3b8;
        transform: translateY(-2px);
    }

/* بخش کد قابل کپی - Modern */
.minimal-new-code-section {
    background-color: #0f172a;
    border-radius: var(--snap-radius);
    padding: 25px;
    margin-top: 50px;
    text-align: left;
    width: 100%;
}

.minimal-new-code-title {
    color: #e2e8f0;
    font-size: 1.3rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.minimal-new-code {
    background-color: #1e293b;
    padding: 20px;
    border-radius: var(--snap-radius);
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #cbd5e1;
}

.minimal-new-code-tag {
    color: #60a5fa;
}

.minimal-new-code-class {
    color: #fbbf24;
}

.minimal-new-code-comment {
    color: #64748b;
    font-style: italic;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .minimal-new-title {
        font-size: 2.2rem;
    }

    .minimal-new-alert-section {
        flex-direction: column;
        align-items: center;
    }

    .minimal-new-buttons {
        flex-direction: column;
        align-items: center;
    }

    .minimal-new-btn {
        width: 100%;
        max-width: 300px;
    }
}

/* انیمیشن‌ها */
@keyframes minimalNewFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.minimal-new-alert {
    animation: minimalNewFadeIn 0.4s ease-out;
}

    .minimal-new-alert:nth-child(2) {
        animation-delay: 0.1s;
    }







/* فاکتور رسمی - Modern */


.invoice-download-btn-container {
    margin-bottom: 20px;
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: flex-end;
}

.invoice-download-btn {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--snap-shadow-md);
    transition: var(--snap-transition);
    border: 2px solid white;
}

    .invoice-download-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--snap-shadow-lg);
    }

    .invoice-download-btn:active {
        transform: translateY(0);
    }

    .invoice-download-btn i {
        font-size: 20px;
    }

/* کارت اصلی فاکتور - Modern */
.invoice-card {
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(249, 250, 251));
    border-radius: var(--snap-radius-lg);
    box-shadow: var(--snap-shadow-xl);
    width: 90%;
    overflow: hidden;
    transition: var(--snap-transition);
    animation: invoiceSlideIn 0.5s ease-out;
    font-family: iranyekan !important;
}

    .invoice-card:hover {
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    }

/* هدر با گرادیانت - Modern */
.invoice-header-gradient {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    padding: 25px 30px;
    color: white;
}

.invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.invoice-logo-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.invoice-logo-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--snap-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    backdrop-filter: blur(5px);
}

.invoice-company-name {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
}

.invoice-company-details {
    font-size: 14px;
    opacity: 0.9;
    margin-top: 5px;
}

.invoice-title {
    text-align: left;
}

    .invoice-title h1 {
        font-size: 36px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 3px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .invoice-title p {
        font-size: 16px;
        opacity: 0.9;
    }

/* محتوای اصلی - Modern */
.invoice-content {
    padding: 30px;
}

/* اطلاعات فاکتور - Modern */
.invoice-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(249, 250, 251));
    padding: 20px;
    border-radius: var(--snap-radius);
    box-shadow: var(--snap-shadow);
}

.invoice-info-item {
    display: flex;
    flex-direction: column;
}

.invoice-info-label {
    font-size: 13px;
    color: rgb(107, 114, 128);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invoice-info-value {
    font-size: 16px;
    font-weight: 600;
    color: rgb(17, 24, 39);
}

    .invoice-info-value.large {
        font-size: 18px;
        color: var(--snap-primary);
    }

/* جداکننده - Modern */
.invoice-divider {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--snap-primary), var(--snap-secondary), transparent);
    margin: 20px 0;
}

.invoice-divider-light {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(108, 92, 231, 0.3), transparent);
    margin: 15px 0;
}

/* مشخصات طرفین - Modern */
.invoice-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.invoice-party-box {
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecf2 100%);
    padding: 20px;
    border-radius: var(--snap-radius);
    border-right: 4px solid var(--snap-primary);
}

    .invoice-party-box.seller {
        border-right-color: var(--snap-success);
    }

.invoice-party-title {
    font-size: 18px;
    font-weight: bold;
    color: rgb(55, 65, 81);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.invoice-party-detail {
    margin-bottom: 8px;
    color: rgb(75, 85, 99);
    font-size: 14px;
}

    .invoice-party-detail strong {
        color: rgb(31, 41, 55);
        min-width: 70px;
        display: inline-block;
    }

/* جدول اقلام - Modern */
.invoice-table-container {
    overflow-x: auto;
    margin-bottom: 30px;
    border-radius: var(--snap-radius);
    box-shadow: var(--snap-shadow);
}

.invoice-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

    .invoice-table th {
        background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
        color: white;
        padding: 15px;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
    }

    .invoice-table td {
        padding: 12px 15px;
        border-bottom: 1px solid rgb(229, 231, 235);
        text-align: center;
        color: rgb(55, 65, 81);
    }

    .invoice-table tbody tr:hover {
        background: linear-gradient(to right, rgb(255, 255, 255), rgb(249, 250, 251));
        transition: background 0.3s ease;
    }

    .invoice-table tfoot td {
        background: linear-gradient(to right, rgb(249, 250, 251), rgb(243, 244, 246));
        font-weight: 600;
        padding: 12px 15px;
    }

.invoice-text-left {
    text-align: right;
}

/* جمع‌ها - Modern */
.invoice-totals {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
}

.invoice-totals-box {
    width: 350px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecf2 100%);
    padding: 20px;
    border-radius: var(--snap-radius);
}

.invoice-total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(108, 92, 231, 0.3);
}

    .invoice-total-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.invoice-total-label {
    color: rgb(75, 85, 99);
    font-weight: 500;
}

.invoice-total-value {
    font-weight: 700;
    color: rgb(31, 41, 55);
}

.invoice-grand-total {
    font-size: 18px;
    color: var(--snap-primary);
    font-weight: 900;
}

/* وضعیت پرداخت - Modern */
.invoice-payment-status {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--snap-success) 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

    .invoice-payment-status.pending {
        background: linear-gradient(135deg, var(--snap-warning) 0%, #d97706 100%);
    }

/* پانوشت - Modern */
.invoice-footer-note {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px dashed var(--snap-primary);
}

.invoice-signature {
    text-align: center;
}

.invoice-signature-line {
    width: 200px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--snap-primary), transparent);
    margin: 10px 0;
}

.invoice-stamp {
    font-size: 48px;
    opacity: 0.3;
    transform: rotate(-15deg);
    color: var(--snap-primary);
    font-weight: 900;
}

/* انیمیشن */
@keyframes invoiceSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .invoice-header {
        flex-direction: column;
        text-align: center;
    }

    .invoice-logo-section {
        justify-content: center;
    }

    .invoice-title {
        text-align: center;
    }

    .invoice-parties {
        grid-template-columns: 1fr;
    }

    .invoice-totals {
        justify-content: center;
    }

    .invoice-footer-note {
        flex-direction: column;
        gap: 20px;
    }

    .invoice-download-btn-container {
        justify-content: center;
    }
}





/* ==================== میکرو کارت شیشه‌ای با عکس پشت زمینه ==================== */

.micro-glass {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0.7rem 0.7rem;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* ========== عکس در سمت چپ (کامل و بدون برش) ========== */
.micro-glass-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* اضافه کردن پس‌زمینه برای جاهایی که عکس کامل فضا را پر نمی‌کند */
    /*    background: linear-gradient(135deg, #667eea20, #764ba220);*/
}

    .micro-glass-bg img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* تغییر از cover به contain برای نمایش کامل عکس */
        object-position: center;
        opacity: 0.35;
        transition: all 0.5s ease;
        /* اطمینان از نمایش کامل عکس */
        display: block;
    }

    /* افکت شیشه‌ای روی عکس */
    .micro-glass-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1;
        pointer-events: none;
    }

    /* خط جداکننده بین عکس و قسمت شفاف */
    .micro-glass-bg::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 100%;
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.8), transparent);
        z-index: 2;
        pointer-events: none;
    }

/* نیمه راست کارت - شیشه‌ای */
.micro-glass::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 0;
    pointer-events: none;
    border-radius: 0 20px 20px 0;
}

/* هاور روی کارت */
.micro-glass:hover .micro-glass-bg img {
    opacity: 0.55;
    transform: scale(1.01);
}

.micro-glass:hover {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* ========== بخش عکس کوچک در سمت چپ بالا ========== */
.micro-avatar {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    cursor: pointer;
    z-index: 3;
}

    .micro-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .micro-avatar:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.25);
    }

/* لوگو */
.micro-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 0.7rem;
    padding-right: 36px;
    position: relative;
    z-index: 3;
}

    .micro-brand span {
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

/* گروه آیکون‌ها */
.icon-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    align-items: center;
    direction: rtl;
    position: relative;
    z-index: 3;
}

/* ========== دکمه‌ها ========== */
.micro-item {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    cursor: pointer;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    width: 80px;
    height: 80px;
    padding: 0;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(4px);
    z-index: 3;
}

/* دکمه 1 - بنفش */
.micro-item-panel {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08);
    border-radius: 16px;
}

    .micro-item-panel .micro-icon svg {
        fill: none;
        stroke: #8b5cf6;
        stroke-width: 1.8;
    }

        .micro-item-panel .micro-icon svg path {
            fill: #8b5cf6;
            stroke: #8b5cf6;
        }

    .micro-item-panel .micro-label {
        color: #8b5cf6;
    }

    .micro-item-panel:hover {
        background: rgba(139, 92, 246, 0.3);
        border-color: rgba(139, 92, 246, 0.6);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2);
    }

        .micro-item-panel:hover .micro-icon svg {
            transform: scale(1.05);
        }

            .micro-item-panel:hover .micro-icon svg path {
                fill: #a855f7;
                stroke: #a855f7;
            }

    .micro-item-panel:active {
        transform: translateY(1px) scale(0.98);
    }

/* دکمه 2 - صورتی */
.micro-item-promo {
    background: rgba(236, 72, 153, 0.2);
    border: 1px solid rgba(236, 72, 153, 0.3);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.08);
    border-radius: 16px;
}

    .micro-item-promo .micro-icon svg {
        fill: none;
        stroke: #ec4899;
        stroke-width: 1.8;
    }

        .micro-item-promo .micro-icon svg path {
            fill: #ec4899;
            stroke: #ec4899;
        }

    .micro-item-promo .micro-label {
        color: #ec4899;
    }

    .micro-item-promo:hover {
        background: rgba(236, 72, 153, 0.3);
        border-color: rgba(236, 72, 153, 0.6);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(236, 72, 153, 0.2);
    }

        .micro-item-promo:hover .micro-icon svg {
            transform: scale(1.05);
        }

            .micro-item-promo:hover .micro-icon svg path {
                fill: #f472b6;
                stroke: #f472b6;
            }

    .micro-item-promo:active {
        transform: translateY(1px) scale(0.98);
    }

/* دکمه 3 - سبز */
.micro-item-request {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
    border-radius: 16px;
}

    .micro-item-request .micro-icon svg {
        fill: none;
        stroke: #10b981;
        stroke-width: 1.8;
    }

        .micro-item-request .micro-icon svg path {
            fill: #10b981;
            stroke: #10b981;
        }

    .micro-item-request .micro-label {
        color: #10b981;
    }

    .micro-item-request:hover {
        background: rgba(16, 185, 129, 0.3);
        border-color: rgba(16, 185, 129, 0.6);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2);
    }

        .micro-item-request:hover .micro-icon svg {
            transform: scale(1.05);
        }

            .micro-item-request:hover .micro-icon svg path {
                fill: #34d399;
                stroke: #34d399;
            }

    .micro-item-request:active {
        transform: translateY(1px) scale(0.98);
    }

/* آیکون */
.micro-icon {
    width: auto;
    height: auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .micro-icon svg {
        width: 28px;
        height: 28px;
        transition: all 0.3s ease;
    }

    .micro-icon i {
        font-size: 1.5rem;
    }

/* متن زیر آیکون */
.micro-label {
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: all 0.25s ease;
    line-height: 1.3;
    text-align: center;
    max-width: 76px;
}

/* ========== ریسپانسیو ========== */

/* تبلت */
@media (min-width: 768px) and (max-width: 1024px) {
    .micro-item {
        width: 85px;
        height: 85px;
        border-radius: 18px;
    }

    .micro-icon svg {
        width: 30px;
        height: 30px;
    }

    .micro-label {
        font-size: 0.55rem;
    }
}

/* موبایل بزرگ */
@media (max-width: 600px) {
    .micro-item {
        width: 74px;
        height: 74px;
        border-radius: 15px;
    }

    .micro-icon svg {
        width: 26px;
        height: 26px;
    }

    .micro-label {
        font-size: 0.5rem;
    }

    .icon-group {
        gap: 0.5rem;
    }
}

/* موبایل متوسط */
@media (max-width: 480px) {
    .micro-item {
        width: 68px;
        height: 68px;
        border-radius: 14px;
        gap: 0.4rem;
    }

    .micro-icon svg {
        width: 24px;
        height: 24px;
    }

    .micro-label {
        font-size: 0.48rem;
    }

    .micro-avatar {
        width: 40px;
        height: 40px;
        top: 8px;
        left: 8px;
    }

    .micro-brand {
        padding-right: 32px;
        margin-bottom: 0.6rem;
    }
}

/* موبایل خیلی کوچک - عرض عکس کاهش می‌یابد اما کامل نمایش داده می‌شود */
@media (max-width: 400px) {
    .micro-glass-bg {
        width: 45%;
    }

    .micro-glass::before {
        width: 55%;
    }

    .micro-item {
        width: 62px;
        height: 62px;
    }

    .micro-icon svg {
        width: 22px;
        height: 22px;
    }

    .micro-label {
        font-size: 0.46rem;
    }
}

/* برای موبایل‌های خیلی باریک */
@media (max-width: 360px) {
    .micro-glass-bg {
        width: 42%;
    }

    .micro-glass::before {
        width: 58%;
    }

    .micro-item {
        width: 56px;
        height: 56px;
    }

    .micro-icon svg {
        width: 20px;
        height: 20px;
    }

    .micro-label {
        font-size: 0.42rem;
    }
}

/* انیمیشن */
@keyframes microGlassAppear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.micro-glass {
    animation: microGlassAppear 0.3s ease;
}

/* افکت ریپل */
.micro-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.06), transparent);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: width 0.4s ease, height 0.4s ease;
    pointer-events: none;
}

.micro-item:active::after {
    width: 160%;
    height: 160%;
}
/* استایل‌های پیشرفته برای نقشه - Modern */
.leaflet-popup-content-wrapper {
    border-radius: var(--snap-radius);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: var(--snap-shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    direction: rtl;
    padding: 0;
}

.leaflet-popup-content {
    margin: 0;
    padding: 16px;
    font-family: 'Vazir', sans-serif;
}

.cafe-popup {
    min-width: 250px;
}

.popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.popup-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--snap-radius);
    background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    box-shadow: 0 8px 16px rgba(108, 92, 231, 0.3);
}

.popup-title h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
}

.popup-title p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #666;
}

.popup-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.info-item {
    background: #f8f9fa;
    padding: 8px;
    border-radius: var(--snap-radius);
    text-align: center;
}

    .info-item .icon {
        font-size: 18px;
        display: block;
        margin-bottom: 4px;
    }

    .info-item .value {
        font-size: 14px;
        font-weight: 500;
        color: #1a1a2e;
    }

.popup-actions {
    display: flex;
    gap: 8px;
}

.popup-btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: var(--snap-radius);
    background: #f0f2f5;
    color: #1a1a2e;
    font-size: 12px;
    cursor: pointer;
    transition: var(--snap-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .popup-btn:hover {
        background: var(--snap-primary);
        color: white;
        transform: translateY(-2px);
    }

/* استایل لیست کافی‌نت‌ها - Modern */
.cafes-list {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--snap-radius-lg);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .header-content h3 {
        font-size: 18px;
        font-weight: 600;
        color: #1a1a2e;
        margin: 0;
    }

.count-badge {
    background: var(--snap-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
}

.view-toggle {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--snap-radius);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: var(--snap-transition);
}

    .view-toggle:hover {
        background: var(--snap-primary);
        color: white;
        transform: rotate(90deg);
    }

.list-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

.cafe-item {
    background: white;
    border-radius: var(--snap-radius-lg);
    padding: 16px;
    display: flex;
    gap: 16px;
    transition: var(--snap-transition);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

    .cafe-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, var(--snap-primary), var(--snap-secondary));
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .cafe-item:hover {
        transform: translateY(-4px);
        box-shadow: var(--snap-shadow-xl);
        border-color: var(--snap-primary);
    }

        .cafe-item:hover::before {
            transform: translateX(0);
        }

.cafe-avatar {
    position: relative;
}

.avatar-bg {
    width: 64px;
    height: 64px;
    border-radius: var(--snap-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
    box-shadow: var(--snap-shadow);
}

.status-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid white;
}

    .status-badge.online {
        background: var(--snap-success);
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
    }

.cafe-details {
    flex: 1;
}

.cafe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

    .cafe-header h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #1a1a2e;
    }

.rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stars {
    color: #fbbf24;
    font-size: 14px;
}

.rating-value {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a2e;
}

.cafe-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #666;
}

.cafe-actions {
    display: flex;
    gap: 8px;
}

.btn-focus, .btn-info {
    padding: 8px 16px;
    border: none;
    border-radius: var(--snap-radius);
    font-size: 12px;
    cursor: pointer;
    transition: var(--snap-transition);
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.btn-focus {
    background: var(--snap-primary);
    color: white;
}

    .btn-focus:hover {
        background: var(--snap-primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(108, 92, 231, 0.3);
    }

.btn-info {
    background: #f0f2f5;
    color: #1a1a2e;
}

    .btn-info:hover {
        background: #e2e8f0;
        transform: translateY(-2px);
    }

.empty-state {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--snap-radius-lg);
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h4 {
    margin: 0 0 8px;
    color: #1a1a2e;
}

.empty-state p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* مودال - Modern */
.cafe-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: var(--snap-radius-xl);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease;
    margin: 15px;
    padding: 10px;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3 {
        margin: 0;
        color: #1a1a2e;
    }

.close-modal {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--snap-radius);
    background: #f0f2f5;
    cursor: pointer;
    transition: var(--snap-transition);
}

    .close-modal:hover {
        background: var(--snap-primary);
        color: white;
    }

.modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

/* اسکرول‌بار زیبا - Modern */
.list-items::-webkit-scrollbar {
    width: 6px;
}

.list-items::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.list-items::-webkit-scrollbar-thumb {
    background: var(--snap-primary);
    border-radius: 10px;
}


.pulse-dot {
    width: 20px;
    height: 20px;
    background: #3b82f6;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.marker-wrapper {
    position: relative;
    width: 50px;
    height: 50px;
}

.marker-bg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: var(--snap-shadow);
    border: 3px solid white;
    position: relative;
    z-index: 2;
    transition: var(--snap-transition);
}

    .marker-bg:hover {
        transform: scale(1.1);
    }

.marker-pulse {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    background: inherit;
    border-radius: 50%;
    opacity: 0.4;
    z-index: 1;
    animation: markerPulse 2s infinite;
}

@keyframes markerPulse {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }

    70% {
        transform: scale(1.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.marker-pin {
    font-size: 24px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
    animation: bounce 0.5s ease;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.selected-marker {
    z-index: 1000;
}

.location-status {
    margin-top: 10px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 100px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--snap-warning);
    animation: blink 1s infinite;
}

    .status-indicator.success {
        background: var(--snap-success);
        animation: none;
    }

    .status-indicator.error {
        background: var(--snap-danger);
        animation: none;
    }

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.grid-view {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

    .grid-view .cafe-item {
        flex-direction: column;
    }

    .grid-view .cafe-avatar {
        align-self: center;
    }

    .grid-view .cafe-meta {
        flex-wrap: wrap;
    }





/* استایل مودال - Modern */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.modal-container {
    background: white;
    border-radius: var(--snap-radius-lg);
    padding: 32px;
    max-width: 400px;
    width: 95%;
    box-shadow: var(--snap-shadow-xl);
    animation: slideUp 0.4s ease;
    position: relative;
    overflow: hidden;
}

    /* استایل مخصوص مودال هشدار */
    .modal-container.warning {
        border-top: 4px solid #f6ad55;
    }

        .modal-container.warning::before {
            background: radial-gradient(circle, rgba(246, 173, 85, 0.1) 0%, transparent 70%);
        }

    /* افکت پس‌زمینه برای مودال موفقیت */
    .modal-container.success::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(72, 187, 120, 0.1) 0%, transparent 70%);
        animation: rotate 10s linear infinite;
    }

/* آیکون موفقیت - Modern */
.success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 10px 30px rgba(72, 187, 120, 0.4);
    animation: pulse 2s infinite;
    position: relative;
    z-index: 1;
}

    .success-icon svg {
        width: 40px;
        height: 40px;
        fill: none;
        stroke: white;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        animation: checkmark 0.6s ease-in-out 0.2s both;
    }

/* آیکون هشدار - Modern */
.warning-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 10px 30px rgba(246, 173, 85, 0.4);
    animation: pulse 2s infinite;
    position: relative;
    z-index: 1;
}

    .warning-icon svg {
        width: 40px;
        height: 40px;
        fill: none;
        stroke: white;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        animation: shake 0.5s ease-in-out;
    }

/* محتوای مودال - Modern */
.modal-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px;
}

.warning .modal-title {
    color: #c05621;
}

.modal-message {
    font-size: 16px;
    color: #718096;
    line-height: 1.6;
    margin-bottom: 28px;
    padding: 0 10px;
}

/* دکمه‌ها - Modern */
.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    padding: 12px 28px;
    border: none;
    border-radius: 50px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--snap-transition);
    position: relative;
    overflow: hidden;
    min-width: 130px;
}

.btn-primary.success-btn {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
}

.btn-primary.warning-btn {
    background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(246, 173, 85, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(72, 187, 120, 0.4);
}

.btn-primary.warning-btn:hover {
    box-shadow: 0 8px 25px rgba(246, 173, 85, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: #edf2f7;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

    .btn-secondary:hover {
        background: #e2e8f0;
        transform: translateY(-2px);
    }

/* دکمه بستن - Modern */
.close-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f7fafc;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0aec0;
    transition: var(--snap-transition);
    z-index: 2;
}

    .close-btn:hover {
        background: #fed7d7;
        color: #f56565;
        transform: rotate(90deg);
    }

    .close-btn svg {
        width: 18px;
        height: 18px;
    }

/* انیمیشن‌ها */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes checkmark {
    0% {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
    }

    100% {
        stroke-dasharray: 100;
        stroke-dashoffset: 0;
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* دکمه‌های نمایش مودال - Modern */
.buttons-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.show-modal-btn {
    background: white;
    color: #4a5568;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--snap-shadow-lg);
    transition: var(--snap-transition);
    min-width: 200px;
}

    .show-modal-btn.success {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        color: white;
    }

    .show-modal-btn.warning {
        background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
        color: white;
    }

    .show-modal-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    }

/* نسخه موبایل */
@media (max-width: 480px) {
    .modal-container {
        padding: 24px;
    }

    .modal-title {
        font-size: 20px;
    }

    .modal-message {
        font-size: 14px;
    }

    .btn {
        padding: 10px 20px;
        min-width: 110px;
        font-size: 14px;
    }

    .show-modal-btn {
        padding: 12px 30px;
        min-width: 160px;
        font-size: 14px;
    }
}





.elegant-request {
    min-height: 100vh;
    background: var(--snap-white);
    font-family: 'Vazirmatn', sans-serif;
    padding: 16px;
    position: relative;
    direction: rtl;
}

.soft-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(135deg, var(--snap-white) 0%, #faf5ff 100%);
    pointer-events: none;
}

.purple-mist {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

    .purple-mist.top {
        top: -200px;
        right: -200px;
    }

    .purple-mist.bottom {
        bottom: -200px;
        left: -200px;
    }

.minimal-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f0ff;
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 15px;
    color: #6d28d9;
    font-size: 13px;
}

.badge-icon {
    color: #8b5cf6;
}

.title {
    font-size: 28px;
    font-weight: 600;
    color: #1e1e2f;
    margin-bottom: 8px;
}

.purple-text {
    color: #8b5cf6;
}

.subtitle {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 25px;
}

.simple-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.step-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--snap-transition);
}

.step-item.active .step-indicator {
    background: #8b5cf6;
}

.step-number {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

.step-item.active .step-number {
    color: white;
}

.step-label {
    font-size: 13px;
    color: #64748b;
}

.step-item.active .step-label {
    color: #8b5cf6;
    font-weight: 500;
}

.step-line {
    width: 40px;
    height: 2px;
    background: #e2e8f0;
}

.white-card {
    background: white;
    border-radius: var(--snap-radius-lg);
    padding: 24px;
    box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.1);
    border: 1px solid #f1f5f9;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.card-icon {
    width: 40px;
    height: 40px;
    background: #f3f0ff;
    border-radius: var(--snap-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #8b5cf6;
}

.card-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1e1e2f;
}

/* استایل‌های حرفه‌ای جستجو */
.search-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

/*.search-icon {
    position: absolute;
    right: 15px;
    font-size: 18px;
    color: #9ca3af;
    z-index: 1;
}*/

.search-input {
    width: 100%;
    padding: 14px 45px 14px 45px;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
    background: white;
    direction: rtl;
}

    .search-input:focus {
        outline: none;
        border-color: #8b5cf6;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }

.clear-search {
    position: absolute;
    left: 15px;
    background: none;
    border: none;
    font-size: 18px;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .clear-search:hover {
        background: #f3f4f6;
        color: #4b5563;
    }

.search-loading {
    position: absolute;
    left: 15px;
}

.loading-spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f4f6;
    border-top: 2px solid #8b5cf6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    border: 1px solid #e5e7eb;
}

.result-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .result-item:last-child {
        border-bottom: none;
    }

    .result-item:hover {
        background: #f9fafb;
    }

.result-icon {
    font-size: 20px;
    min-width: 24px;
    margin-top: 2px;
}

.result-content {
    flex: 1;
}

.result-title {
    font-weight: 600;
    color: #1f2937;
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.result-subtitle {
    font-size: 12px;
    color: #6b7280;
    display: block;
    line-height: 1.4;
}

.result-distance {
    font-size: 11px;
    color: #8b5cf6;
    margin-top: 4px;
    display: inline-block;
}

.search-results::-webkit-scrollbar {
    width: 6px;
}

.search-results::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.search-results::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

    .search-results::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* نوتیفیکیشن توست */
.custom-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #1f2937;
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    font-size: 14px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

    .custom-toast.show {
        transform: translateX(0);
    }

    .custom-toast.success {
        background: #10b981;
    }

    .custom-toast.error {
        background: #ef4444;
    }

    .custom-toast.warning {
        background: #f59e0b;
    }

    .custom-toast.info {
        background: #3b82f6;
    }

.toast-icon {
    font-size: 18px;
}

.toast-message {
    font-size: 13px;
}

.map-wrapper {
    position: relative;
    width: 100%;
    height: 250px;
    margin-bottom: 16px;
    border-radius: var(--snap-radius);
    overflow: hidden;
}

.map-container {
    width: 100%;
    height: 100%;
    border-radius: var(--snap-radius);
    overflow: hidden;
    border: 2px solid #f1f5f9;
    position: relative;
    z-index: 1;
}

.map {
    width: 100%;
    height: 100%;
}

.map-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}

.map-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--snap-radius);
    background: white;
    border: 2px solid #f1f5f9;
    color: #8b5cf6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--snap-transition);
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    .map-btn:hover {
        background: #8b5cf6;
        border-color: #8b5cf6;
        color: white;
    }

.location-status {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: white;
    padding: 8px 16px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #475569;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border: 2px solid #f1f5f9;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8b5cf6;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.location-info {
    background: #f8fafc;
    border-radius: var(--snap-radius);
    padding: 16px;
    margin-bottom: 20px;
}

.coord-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.coord-item {
    flex: 1;
}

.coord-label {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.coord-value {
    display: block;
    font-size: 13px;
    color: #1e1e2f;
    font-family: monospace;
    background: white;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.address-row {
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
}

.address-label {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.address-value {
    display: block;
    font-size: 13px;
    color: #1e1e2f;
    line-height: 1.5;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.field {
    position: relative;
}

.field-input, .field-textarea, .field-select {
    width: 100%;
    padding: 16px 16px 8px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--snap-radius);
    font-size: 14px;
    transition: var(--snap-transition);
    font-family: 'Vazirmatn', sans-serif;
}

.field-textarea {
    resize: none;
    padding-top: 22px;
}

.field-select {
    padding: 16px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 16px center;
}

    .field-input:focus, .field-textarea:focus, .field-select:focus {
        outline: none;
        border-color: #8b5cf6;
        background: white;
    }

.field-label {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
    transition: var(--snap-transition);
    pointer-events: none;
}

.field-textarea + .field-label {
    top: 18px;
    transform: none;
}

.field-input:focus + .field-label,
.field-input:not(:placeholder-shown) + .field-label,
.field-textarea:focus + .field-label,
.field-textarea:not(:placeholder-shown) + .field-label {
    top: 8px;
    font-size: 10px;
    color: #8b5cf6;
}

.field-counter {
    position: absolute;
    left: 12px;
    bottom: 8px;
    font-size: 10px;
    color: #94a3b8;
}

.half {
    width: calc(50% - 6px);
}


.quick-suggestions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.suggestion {
    padding: 8px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 30px;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
    transition: var(--snap-transition);
}

    .suggestion:hover {
        background: #8b5cf6;
        border-color: #8b5cf6;
        color: white;
    }

.services {
    margin-top: 8px;
}

.services-title {
    display: block;
    font-size: 13px;
    color: #475569;
    margin-bottom: 12px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.service {
    cursor: pointer;
}

    .service input {
        display: none;
    }

.service-content {
    display: block;
    padding: 12px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--snap-radius);
    text-align: center;
    font-size: 13px;
    color: #475569;
    transition: var(--snap-transition);
}

.service input:checked + .service-content {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
}

.next-btn, .prev-btn, .submit-btn {
    padding: 14px 24px;
    border: none;
    border-radius: var(--snap-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--snap-transition);
    font-family: 'Vazirmatn', sans-serif;
}

.next-btn {
    width: 100%;
    background: #8b5cf6;
    color: white;
}

    .next-btn:disabled {
        background: #cbd5e1;
        cursor: not-allowed;
        opacity: 0.5;
    }

.prev-btn {
    background: #f1f5f9;
    color: #475569;
    border: 2px solid #e2e8f0;
}

.submit-btn {
    width: 100%;
    background: #8b5cf6;
    color: white;
    padding: 16px;
    font-size: 16px;
    margin-bottom: 12px;
}

.button-row {
    display: flex;
    gap: 12px;
}

    .button-row .next-btn,
    .button-row .prev-btn {
        flex: 1;
    }

.btn-arrow {
    font-size: 18px;
}

.next-btn:hover:not(:disabled) {
    background: #7c3aed;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(139, 92, 246, 0.3);
}

.prev-btn:hover {
    background: #e2e8f0;
}

.submit-btn:hover {
    background: #7c3aed;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(139, 92, 246, 0.3);
}

.prev-btn.center {
    width: 100%;
}

.summary {
    background: #f8fafc;
    border-radius: var(--snap-radius);
    padding: 16px;
    margin-bottom: 20px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

    .summary-item:last-child {
        border-bottom: none;
    }

.summary-icon {
    width: 36px;
    height: 36px;
    background: #f3f0ff;
    border-radius: var(--snap-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #8b5cf6;
}

.summary-content {
    flex: 1;
}

.summary-label {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.summary-value {
    display: block;
    font-size: 13px;
    color: #1e1e2f;
    font-weight: 500;
}

.time-popup {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 320px;
    z-index: 2000;
    display: none;
    cursor: default;
}

    .time-popup.show {
        display: block;
    }

.popup-card {
    background: white;
    border-radius: var(--snap-radius-lg);
    padding: 20px;
    box-shadow: 0 20px 40px -10px rgba(139, 92, 246, 0.2);
    border: 2px solid #f3f0ff;
}

.popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    cursor: grab;
    user-select: none;
    padding: 5px;
    border-radius: var(--snap-radius);
    transition: background 0.2s ease;
}

    .popup-header:active {
        cursor: grabbing;
        background: rgba(139, 92, 246, 0.05);
    }

.popup-icon {
    width: 40px;
    height: 40px;
    background: #f3f0ff;
    border-radius: var(--snap-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #8b5cf6;
    pointer-events: none;
}

.popup-title {
    flex: 1;
    pointer-events: none;
}

    .popup-title h4 {
        font-size: 14px;
        font-weight: 600;
        color: #1e1e2f;
        margin-bottom: 2px;
    }

    .popup-title p {
        font-size: 11px;
        color: #94a3b8;
    }

.popup-minimize {
    width: 32px;
    height: 32px;
    border-radius: var(--snap-radius);
    background: #f1f5f9;
    border: none;
    color: #475569;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

    .popup-minimize:hover {
        background: #8b5cf6;
        color: white;
    }

.popup-body {
    text-align: center;
    margin-bottom: 16px;
}

.timer {
    margin-bottom: 12px;
}

.timer-value {
    font-size: 42px;
    font-weight: 700;
    color: #8b5cf6;
    line-height: 1;
}

.timer-unit {
    font-size: 14px;
    color: #94a3b8;
    margin-right: 4px;
}

.progress-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #8b5cf6, #c084fc);
    border-radius: 6px;
    transition: width 1s linear;
}

.popup-cancel {
    width: 100%;
    padding: 12px;
    background: none;
    border: 2px solid #f1f5f9;
    border-radius: var(--snap-radius);
    color: #ef4444;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--snap-transition);
}

    .popup-cancel:hover {
        background: #fef2f2;
        border-color: #ef4444;
    }

.minimized-popup {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2000;
    display: none;
    cursor: grab;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    .minimized-popup.show {
        display: block;
    }

    .minimized-popup:active {
        cursor: grabbing;
    }

.minimized-content {
    background: white;
    border-radius: 60px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px -5px rgba(139, 92, 246, 0.2);
    border: 2px solid #f3f0ff;
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease;
    touch-action: none;
}

    .minimized-content:active {
        transform: scale(0.98);
    }

.minimized-icon {
    width: 36px;
    height: 36px;
    background: #f3f0ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #8b5cf6;
    pointer-events: none;
}

.minimized-text {
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.minimized-label {
    font-size: 10px;
    color: #94a3b8;
}

.minimized-time {
    font-size: 14px;
    font-weight: 600;
    color: #1e1e2f;
}

.minimized-badge {
    background: #8b5cf6;
    color: white;
    padding: 4px 8px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    min-width: 32px;
    text-align: center;
    pointer-events: none;
}

.minimized-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
    z-index: 10;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

    .minimized-close:hover {
        background: #ef4444;
        color: white;
        transform: scale(1.1);
    }

    .minimized-close:active {
        background: #ef4444;
        color: white;
        transform: scale(0.95);
    }

.minimized-glow {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 65px;
    background: #8b5cf6;
    opacity: 0.2;
    filter: blur(10px);
    z-index: 1;
    animation: glow 2s infinite;
    pointer-events: none;
}

@keyframes glow {
    0%, 100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.4;
    }
}

/* مودال‌های جدید - Modern */
.success-modal, .error-modal, .loading-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-card {
    background: white;
    border-radius: var(--snap-radius-xl);
    padding: 32px 24px;
    text-align: center;
    max-width: 340px;
    width: 100%;
    box-shadow: var(--snap-shadow-xl);
    animation: modalAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .modal-card.success {
        border-top: 4px solid var(--snap-success);
    }

    .modal-card.error {
        border-top: 4px solid var(--snap-danger);
    }

    .modal-card.loading {
        border-top: 4px solid #8b5cf6;
    }

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-icon {
    font-size: 48px;
    margin-bottom: 20px;
    animation: iconPop 0.5s ease;
}

@keyframes iconPop {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.modal-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1e1e2f;
    margin-bottom: 12px;
}

.modal-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--snap-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--snap-transition);
    font-family: 'Vazirmatn', sans-serif;
    flex: 1;
}

    .modal-btn.primary {
        background: #8b5cf6;
        color: white;
    }

        .modal-btn.primary:hover {
            background: #7c3aed;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px -5px rgba(139, 92, 246, 0.3);
        }

    .modal-btn.secondary {
        background: #f1f5f9;
        color: #475569;
        border: 2px solid #e2e8f0;
    }

        .modal-btn.secondary:hover {
            background: #e2e8f0;
        }

/* لودر - Modern */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f0ff;
    border-top: 4px solid #8b5cf6;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.step {
    display: none;
}

    .step.active {
        display: block;
    }

@media (max-width: 480px) {
    .elegant-request {
        padding: 12px;
    }



    .simple-steps {
        gap: 5px;
    }

    .step-line {
        width: 20px;
    }

    .map-wrapper {
        height: 220px;
    }

    .map-controls {
        top: 8px;
        right: 8px;
    }

    .map-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .minimized-popup {
        left: 10px;
        bottom: 10px;
        max-width: 260px;
    }

    .minimized-content {
        padding: 10px 14px;
    }

    .minimized-time {
        font-size: 13px;
    }

    .minimized-close {
        width: 32px;
        height: 32px;
    }

    .modal-actions {
        flex-direction: column;
    }
}



/* استایل Toast - Modern */
.custom-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: white;
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: var(--snap-shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5000;
    transition: var(--snap-transition);
    opacity: 0;
    border: 2px solid;
}

    .custom-toast.show {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    .custom-toast.success {
        border-color: var(--snap-success);
    }

    .custom-toast.error {
        border-color: var(--snap-danger);
    }

    .custom-toast.info {
        border-color: #8b5cf6;
    }

.toast-icon {
    font-size: 20px;
}

.toast-message {
    font-size: 14px;
    color: #1e1e2f;
}


/* استایل مودال تایید - Modern */
.confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 4000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-card.confirm {
    border-top: 4px solid var(--snap-warning);
}

.modal-btn.danger {
    background: var(--snap-danger);
    color: white;
}

    .modal-btn.danger:hover {
        background: #dc2626;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px -5px rgba(239, 68, 68, 0.3);
    }




/* استایل سکشن اصلی شما - Modern */
.package-section {
    background-color: var(--snap-white) !important;
    border-radius: 40px;
    box-shadow: var(--snap-shadow-xl);
    position: relative;
    overflow: hidden;
}

/* شکل‌های پس‌زمینه آبی و بنفش */
.background-shape-right {
    position: relative;
}

    .background-shape-right::before {
        content: '';
        position: absolute;
        top: -150px;
        right: -100px;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(79, 70, 229, 0.12) 0%, rgba(139, 92, 246, 0.08) 50%, transparent 80%);
        border-radius: 50%;
        z-index: 1;
        pointer-events: none;
    }

    .background-shape-right::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -50px;
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, rgba(168, 85, 247, 0.1) 70%, transparent 100%);
        border-radius: 50%;
        z-index: 1;
        pointer-events: none;
    }








.Azmon-exam-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.Azmon-main-content {
    transition: all 0.5s ease;
}

    .Azmon-main-content.Azmon-blur {
        filter: blur(8px);
        opacity: 0.3;
        pointer-events: none;
    }

.Azmon-course-card {
    background: rgba(255, 255, 255, 0.98);
    border-radius: var(--snap-radius-lg);
    box-shadow: var(--snap-shadow-xl);
    overflow: hidden;
}

.Azmon-course-header {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    padding: 20px;
    color: white;
}

.Azmon-course-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12px;
    margin-bottom: 10px;
}

.Azmon-course-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
}

.Azmon-course-body {
    padding: 20px;
}

.Azmon-certificates-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 20px 0;
}

.Azmon-certificate-card {
    background: white;
    border-radius: var(--snap-radius-lg);
    overflow: hidden;
    box-shadow: var(--snap-shadow-lg);
    text-align: center;
    padding: 15px;
    transition: var(--snap-transition);
}

    .Azmon-certificate-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--snap-shadow-xl);
    }

.Azmon-certificate-icon {
    font-size: 40px;
    color: #ffd700;
    margin-bottom: 8px;
}

.Azmon-certificate-level {
    display: inline-block;
    background: #ffc107;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: bold;
    margin: 8px 0;
}

.Azmon-certificate-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--snap-success);
    margin: 8px 0;
}

.Azmon-certificate-preview img {
    max-width: 100%;
    border-radius: var(--snap-radius);
    margin-top: 8px;
}

.Azmon-btn-start-exam {
    background: linear-gradient(135deg, var(--snap-success) 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 50px;
    width: 100%;
    cursor: pointer;
    margin-top: 15px;
    transition: var(--snap-transition);
}

    .Azmon-btn-start-exam:hover {
        transform: translateY(-2px);
        box-shadow: var(--snap-shadow-lg);
    }

/* مودال تایمر اولیه - Modern */
.Azmon-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    z-index: 999;
    display: none;
}

    .Azmon-overlay.Azmon-active {
        display: block;
    }

.Azmon-exam-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    background: white;
    border-radius: var(--snap-radius-lg);
    z-index: 1000;
    display: none;
}

    .Azmon-exam-modal.Azmon-active {
        display: block;
    }

.Azmon-modal-header {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    padding: 20px;
    border-radius: var(--snap-radius-lg) var(--snap-radius-lg) 0 0;
    color: white;
    text-align: center;
}

.Azmon-modal-body {
    padding: 25px;
    text-align: center;
}

.Azmon-global-timer {
    background: #2d3748;
    padding: 15px;
    border-radius: var(--snap-radius);
    font-family: monospace;
    font-size: 32px;
    font-weight: bold;
    color: white;
    margin: 15px 0;
}

.Azmon-modal-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center;
}

.Azmon-btn-start-test {
    background: linear-gradient(135deg, var(--snap-success) 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 15px;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--snap-transition);
}

    .Azmon-btn-start-test:hover {
        transform: translateY(-2px);
        box-shadow: var(--snap-shadow-md);
    }

/* مودال شیشه‌ای سوالات - Modern */
.Azmon-glass-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

    .Azmon-glass-modal.Azmon-active {
        opacity: 1;
        visibility: visible;
    }

.Azmon-glass-header {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    padding: 15px;
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.Azmon-glass-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .Azmon-glass-header-top h3 {
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

.Azmon-glass-timers {
    display: flex;
    gap: 10px;
}

.Azmon-glass-timer {
    background: rgba(255,255,255,0.2);
    padding: 4px 10px;
    border-radius: var(--snap-radius);
    text-align: center;
}

.Azmon-glass-timer-label {
    font-size: 9px;
    opacity: 0.8;
}

.Azmon-glass-timer-value {
    font-size: 16px;
    font-weight: bold;
    font-family: monospace;
}

.Azmon-glass-body {
    padding: 20px;
    flex: 1;
}

.Azmon-glass-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    flex-wrap: wrap;
    gap: 10px;
}

.Azmon-glass-question-number {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.Azmon-glass-question-timer {
    background: #ff6b6b;
    color: white;
    padding: 4px 12px;
    border-radius: 50px;
    font-family: monospace;
    font-size: 14px;
    font-weight: bold;
}

.Azmon-glass-question-text {
    font-size: 16px;
    font-weight: 500;
    margin: 15px 0;
    line-height: 1.6;
}

.Azmon-glass-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 15px 0;
}

.Azmon-glass-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(248, 249, 250, 0.9);
    border-radius: var(--snap-radius);
    cursor: pointer;
    transition: var(--snap-transition);
    border: 2px solid transparent;
}

    .Azmon-glass-option:active {
        background: #e9ecef;
        transform: scale(0.98);
    }

    .Azmon-glass-option.Azmon-selected {
        background: #e3f2fd;
        border-color: var(--snap-info);
    }

    .Azmon-glass-option input {
        width: 18px;
        height: 18px;
        accent-color: var(--snap-primary);
        cursor: pointer;
    }

    .Azmon-glass-option span {
        flex: 1;
        font-size: 14px;
    }

.Azmon-glass-footer {
    padding: 15px;
    border-top: 1px solid rgba(0,0,0,0.1);
    background: white;
    position: sticky;
    bottom: 0;
}

.Azmon-glass-btn {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    width: 100%;
    transition: var(--snap-transition);
}

    .Azmon-glass-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .Azmon-glass-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: var(--snap-shadow-md);
    }

/* ========== دکمه پایان با افکت نورانی دور - Modern ========== */
.finish-btn-container {
    position: relative;
    width: 100%;
}

.finish-btn {
    background: linear-gradient(135deg, var(--snap-info), #1976d2);
    color: white;
    border: none;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    width: 100%;
    position: relative;
    z-index: 2;
    transition: var(--snap-transition);
}

    .finish-btn:active {
        transform: scale(0.98);
    }

/* افکت border متحرک دور دکمه */
.finish-btn-container.active-animation {
    position: relative;
}

    .finish-btn-container.active-animation::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        background: conic-gradient( from 0deg, transparent 0deg, #ffd700 30deg, #ffaa00 60deg, transparent 90deg, transparent 360deg );
        border-radius: 60px;
        z-index: 1;
        animation: borderMove 5s linear forwards;
    }

@keyframes borderMove {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}

/* افکت دوم - نور از سمت راست */
.finish-btn-container.active-animation-glow {
    position: relative;
    overflow: hidden;
}

    .finish-btn-container.active-animation-glow::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.6) 50%, transparent 100%);
        border-radius: 50px;
        z-index: 1;
        animation: glowMove 5s linear forwards;
        pointer-events: none;
    }

@keyframes glowMove {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@media (min-width: 768px) {


    .Azmon-glass-header {
        padding: 20px 25px;
    }

    .Azmon-glass-body {
        padding: 25px;
    }

    .Azmon-glass-question-text {
        font-size: 18px;
    }
}



/* پروفایل برای سرتیفیکیت| استایل‌های مودال بزرگ - Modern */
.azmon-modal-@item.PaymentCertificateId .modal-dialog {
    max-width: 95%;
    width: 1600px;
    margin: 1.75rem auto;
}

.azmon-modal-@item.PaymentCertificateId .modal-content {
    border-radius: var(--snap-radius-lg);
    overflow: hidden;
    min-height: 80vh;
}

.azmon-modal-@item.PaymentCertificateId .modal-header {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    padding: 20px 30px;
}

.azmon-modal-@item.PaymentCertificateId .modal-body {
    padding: 30px;
    background: #f8f9fa;
    max-height: 70vh;
    overflow-y: auto;
}

.azmon-modal-@item.PaymentCertificateId .stat-card {
    background: white;
    border-radius: var(--snap-radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--snap-shadow);
    transition: var(--snap-transition);
}

    .azmon-modal-@item.PaymentCertificateId .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--snap-shadow-lg);
    }

.azmon-modal-@item.PaymentCertificateId .stat-icon {
    font-size: 35px;
    margin-bottom: 10px;
}

.azmon-modal-@item.PaymentCertificateId .stat-value {
    font-size: 40px;
    font-weight: bold;
    margin: 5px 0;
}

.azmon-modal-@item.PaymentCertificateId .stat-label {
    color: #6c757d;
    font-size: 15px;
    font-weight: 500;
}

.azmon-modal-@item.PaymentCertificateId .custom-table {
    background: white;
    border-radius: var(--snap-radius);
    overflow: hidden;
    box-shadow: var(--snap-shadow);
    width: 100%;
}

    .azmon-modal-@item.PaymentCertificateId .custom-table thead {
        background: #e9ecef;
    }

    .azmon-modal-@item.PaymentCertificateId .custom-table th {
        padding: 18px 15px;
        font-weight: 600;
        font-size: 15px;
        border: none;
    }

    .azmon-modal-@item.PaymentCertificateId .custom-table td {
        padding: 15px;
        vertical-align: middle;
        font-size: 14px;
    }

.azmon-modal-@item.PaymentCertificateId .answer-correct {
    background: #d4edda;
    border-radius: var(--snap-radius);
    padding: 10px 15px;
    display: inline-block;
    width: 100%;
}

.azmon-modal-@item.PaymentCertificateId .answer-wrong {
    background: #f8d7da;
    border-radius: var(--snap-radius);
    padding: 10px 15px;
    display: inline-block;
    width: 100%;
}

.azmon-modal-@item.PaymentCertificateId .answer-empty {
    background: #fff3cd;
    border-radius: var(--snap-radius);
    padding: 10px 15px;
    display: inline-block;
    width: 100%;
}

.azmon-modal-@item.PaymentCertificateId .badge-custom {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 8px;
}

.azmon-modal-@item.PaymentCertificateId .progress {
    height: 10px;
    border-radius: 10px;
}

.azmon-modal-@item.PaymentCertificateId .btn-custom-primary {
    background: linear-gradient(135deg, var(--snap-primary) 0%, var(--snap-secondary) 100%);
    border: none;
    color: white;
    padding: 12px 35px;
    border-radius: var(--snap-radius);
    font-weight: 500;
    transition: var(--snap-transition);
}

    .azmon-modal-@item.PaymentCertificateId .btn-custom-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);
    }

.azmon-modal-@item.PaymentCertificateId .btn-custom-secondary {
    background: #6c757d;
    border: none;
    color: white;
    padding: 12px 35px;
    border-radius: var(--snap-radius);
    font-weight: 500;
    transition: var(--snap-transition);
}

    .azmon-modal-@item.PaymentCertificateId .btn-custom-secondary:hover {
        background: #5a6268;
    }

@media (min-width: 1920px) {
    .azmon-modal-@item.PaymentCertificateId .modal-dialog {
        max-width: 85%;
        width: 1800px;
    }
}

@media (max-width: 1200px) {
    .azmon-modal-@item.PaymentCertificateId .modal-dialog {
        max-width: 98%;
        width: 98%;
    }

    .azmon-modal-@item.PaymentCertificateId .stat-value {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .azmon-modal-@item.PaymentCertificateId .modal-dialog {
        max-width: 98%;
        width: 100%;
        margin: 10px auto;
    }

    .azmon-modal-@item.PaymentCertificateId .stat-value {
        font-size: 24px;
    }

    .azmon-modal-@item.PaymentCertificateId .custom-table {
        font-size: 13px;
    }

        .azmon-modal-@item.PaymentCertificateId .custom-table td {
            padding: 10px;
        }
}




.snapp-rating-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(12px);
    }
}


/* استایل جدید برای بخش اطلاعات درخواست در کارت امتیازدهی */
.rating-request-info {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border-radius: 16px;
    padding: 12px 16px;
    margin: 10px 0 20px 0;
    direction: rtl;
    text-align: right;
}

.rating-request-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #cbd5e1;
}

.rating-request-icon {
    font-size: 18px;
}

.rating-customer-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #6b7280;
}

.rating-customer-icon {
    font-size: 16px;
}


@keyframes ratingSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}




.snapp-rating-container {
    width: 100%;
    max-width: 380px;
    padding: 30px 25px;
    color: white;
    text-align: center;
    background: rgba(30, 30, 45, 0.85);
    border-radius: var(--snap-radius-xl);
    backdrop-filter: blur(20px);
    box-shadow: var(--snap-shadow-xl);
}

.snapp-rating-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #fff, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.snapp-rating-icon {
    font-size: 32px;
    color: #fbbf24;
}

.snapp-rating-stars-display {
    font-size: 56px;
    letter-spacing: 10px;
    color: #FFD700;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

.snapp-rating-slider-container {
    padding: 10px 0;
    margin-bottom: 20px;
}

.snapp-rating-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, var(--snap-danger), var(--snap-warning), #fbbf24, #34d399, var(--snap-success));
    border-radius: 10px;
    outline: none;
    margin-bottom: 15px;
}

    .snapp-rating-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 28px;
        height: 28px;
        background: white;
        border-radius: 50%;
        box-shadow: var(--snap-shadow);
        border: 3px solid #8B5CF6;
        cursor: pointer;
        transition: var(--snap-transition);
    }

        .snapp-rating-slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }

.snapp-rating-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.snapp-rating-value {
    margin: 20px 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    font-size: 15px;
}

.snapp-rating-number {
    font-size: 24px;
    font-weight: bold;
    background: #8B5CF6;
    padding: 4px 14px;
    border-radius: 30px;
    margin-left: 10px;
}

.snapp-submit-rating-btn {
    width: 100%;
    background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    color: white;
    border: none;
    border-radius: 40px;
    padding: 15px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--snap-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

    .snapp-submit-rating-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
        background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    }




/* ==================== کارت شیشه‌ای متعادل (Balanced Glass) ==================== */

.myda-glass-card {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 80px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

    .myda-glass-card:hover {
        background: rgba(255, 255, 255, 0.65);
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 20px rgba(102, 126, 234, 0.15);
        transform: translateX(-50%) translateY(-2px);
    }

.myda-glass-inner {
    padding: 8px 12px 8px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
}

/* ========== بخش پروفایل ========== */
.myda-glass-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.myda-glass-avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    background-size: 200% 200%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
    transition: all 0.3s ease;
    animation: avatarGradient 4s ease infinite;
    position: relative;
}

@keyframes avatarGradient {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.myda-glass-avatar::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.myda-glass-profile:hover .myda-glass-avatar::after {
    opacity: 0.4;
    animation: ringPulse 1.5s ease-in-out infinite;
}

@keyframes ringPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.myda-glass-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.35);
}

.myda-glass-userinfo {
    color: #1a1a2e;
    direction: rtl;
}

.myda-glass-name {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a2e;
    letter-spacing: 0.3px;
}

.myda-glass-status {
    font-size: 0.68rem;
    opacity: 0.65;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4a5568;
}

.status-dot {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
    animation: statusPulse 1.8s ease-in-out infinite;
    box-shadow: 0 0 4px #10b981;
}

@keyframes statusPulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.myda-glass-divider {
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1), rgba(102, 126, 234, 0.3), rgba(0, 0, 0, 0.1), transparent);
}

/* ==================== دکمه‌های استایل اسنپ با رنگ‌های متنوع ==================== */

.myda-glass-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* دکمه پایه */
.myda-glass-btn {
    padding: 8px 20px;
    border-radius: 40px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    letter-spacing: 0.3px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .myda-glass-btn i {
        font-size: 1rem;
        transition: all 0.25s ease;
    }

    .myda-glass-btn:active {
        transform: translateY(1px);
    }

/* ========== رنگ‌های اختصاصی دکمه‌ها ========== */

/* 1. دکمه تراکنش‌ها - رنگ بنفش (Purple) */
.myda-glass-btn-wallet {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

    .myda-glass-btn-wallet i {
        color: white;
    }

    .myda-glass-btn-wallet::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent);
        transform: translate(-50%, -50%);
        border-radius: 50%;
        transition: width 0.5s ease, height 0.5s ease;
    }

    .myda-glass-btn-wallet:hover::before {
        width: 200%;
        height: 200%;
    }

    .myda-glass-btn-wallet:hover {
        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(139, 92, 246, 0.45);
    }

/* 2. دکمه تاریخچه - رنگ نارنجی (Orange) */
.myda-glass-btn-history {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

    .myda-glass-btn-history i {
        color: white;
    }

    .myda-glass-btn-history::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent);
        transform: translate(-50%, -50%);
        border-radius: 50%;
        transition: width 0.5s ease, height 0.5s ease;
    }

    .myda-glass-btn-history:hover::before {
        width: 200%;
        height: 200%;
    }

    .myda-glass-btn-history:hover {
        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
    }

/* 3. دکمه خروج - رنگ قرمز (Red) */
.myda-glass-btn-logout {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

    .myda-glass-btn-logout i {
        color: white;
    }

    .myda-glass-btn-logout::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent);
        transform: translate(-50%, -50%);
        border-radius: 50%;
        transition: width 0.5s ease, height 0.5s ease;
    }

    .myda-glass-btn-logout:hover::before {
        width: 200%;
        height: 200%;
    }

    .myda-glass-btn-logout:hover {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
    }

/* 4. دکمه ورود/ثبت‌نام - رنگ سبز (Green) */
.myda-glass-btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

    .myda-glass-btn-primary i {
        color: white;
    }

    .myda-glass-btn-primary::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent);
        transform: translate(-50%, -50%);
        border-radius: 50%;
        transition: width 0.5s ease, height 0.5s ease;
    }

    .myda-glass-btn-primary:hover::before {
        width: 200%;
        height: 200%;
    }

    .myda-glass-btn-primary:hover {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
    }

/* ========== افکت نور ملایم ========== */
.myda-glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 80px;
    background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.3), transparent 70%);
    pointer-events: none;
    opacity: 0.4;
    animation: softLight 8s ease-in-out infinite;
}

@keyframes softLight {
    0%, 100% {
        opacity: 0.3;
        transform: translateX(0) translateY(0);
    }

    50% {
        opacity: 0.5;
        transform: translateX(3%) translateY(-2%);
    }
}

/* ========== ریسپانسیو ========== */
@media (max-width: 650px) {
    .myda-glass-card {
        top: 10px;
        width: calc(100% - 20px);
        border-radius: 60px;
    }

    .myda-glass-inner {
        justify-content: space-between;
        padding: 6px 12px;
        gap: 12px;
    }

    .myda-glass-avatar {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }

    .myda-glass-name {
        font-size: 0.75rem;
    }

    .myda-glass-btn {
        padding: 5px 14px;
        font-size: 0.7rem;
    }

        .myda-glass-btn i {
            font-size: 0.75rem;
        }

    .myda-glass-divider {
        display: none;
    }

    .myda-glass-userinfo {
        display: none;
    }
}

@media (min-width: 651px) and (max-width: 1000px) {
    .myda-glass-card {
        width: auto;
        max-width: 90%;
    }
}

@media (min-width: 1001px) {
    .myda-glass-card {
        width: auto;
        max-width: 800px;
    }
}

/* انیمیشن ورود */
@keyframes glassAppear {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
        backdrop-filter: blur(0px);
        background: rgba(255, 255, 255, 0);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        backdrop-filter: blur(16px);
        background: rgba(255, 255, 255, 0.55);
    }
}

.myda-glass-card {
    animation: glassAppear 0.45s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* ============================================ */
/* دکمه‌های دایره‌ای فوق مدرن - NewButtonPanel */
/* فقط در کامپیوتر نمایش داده می‌شوند */
/* ============================================ */

/* مخفی کردن در موبایل و تبلت (عرض کمتر از 768px) */
@media (max-width: 768px) {
    .NewButtonPanel-wrapper {
        display: none !important;
    }
}

/* نمایش فقط در کامپیوتر (عرض بیشتر از 768px) */
@media (min-width: 769px) {
    .NewButtonPanel-wrapper {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 20px;
        z-index: 9999;
    }

    /* سمت راست */
    .NewButtonPanel-wrapper-right {
        right: 25px;
    }

    /* سمت چپ */
    .NewButtonPanel-wrapper-left {
        left: 25px;
    }

    /* دکمه اصلی */
    .NewButtonPanel-btn {
        position: relative;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(18, 18, 30, 0.85);
        backdrop-filter: blur(12px);
        border: 1.5px solid rgba(255, 255, 255, 0.15);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

        /* حلقه بیرونی نورانی */
        .NewButtonPanel-btn::before {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            background: linear-gradient(135deg, #8b5cf6, #6366f1, #a855f7);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: -1;
        }

    .NewButtonPanel-btn-cafe::before {
        background: linear-gradient(135deg, #8b5cf6, #6366f1, #a855f7);
    }

    .NewButtonPanel-btn-customer::before {
        background: linear-gradient(135deg, var(--snap-success), #059669, #34d399);
    }

    .NewButtonPanel-btn:hover::before {
        opacity: 1;
    }

    .NewButtonPanel-btn-cafe.NewButtonPanel-btn:hover {
        border-color: transparent;
        box-shadow: 0 0 25px rgba(139, 92, 246, 0.4);
    }

    .NewButtonPanel-btn-customer.NewButtonPanel-btn:hover {
        border-color: transparent;
        box-shadow: 0 0 25px rgba(16, 185, 129, 0.4);
    }

    /* آیکون داخل دکمه */
    .NewButtonPanel-icon {
        font-size: 24px;
        transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    .NewButtonPanel-btn-cafe .NewButtonPanel-icon {
        color: #a78bfa;
    }

    .NewButtonPanel-btn-customer .NewButtonPanel-icon {
        color: #34d399;
    }

    .NewButtonPanel-btn:hover .NewButtonPanel-icon {
        transform: scale(1.1) translateY(-2px);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    }

    .NewButtonPanel-btn-cafe:hover .NewButtonPanel-icon {
        color: #c4b5fd;
        text-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
    }

    .NewButtonPanel-btn-customer:hover .NewButtonPanel-icon {
        color: #6ee7b7;
        text-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
    }

    /* Active افکت */
    .NewButtonPanel-btn:active {
        transform: scale(0.93);
        transition: transform 0.1s ease;
    }

        .NewButtonPanel-btn:active .NewButtonPanel-icon {
            transform: scale(0.95);
        }

    /* Tooltip مدرن */
    .NewButtonPanel-tooltip {
        position: absolute;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(8px);
        color: white;
        font-size: 12px;
        font-weight: 500;
        padding: 6px 14px;
        border-radius: 30px;
        white-space: nowrap;
        font-family: 'Vazir', 'Tahoma', sans-serif;
        letter-spacing: 0.3px;
        pointer-events: none;
        opacity: 0;
        transform: translateX(0) scale(0.9);
        transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: var(--snap-shadow);
    }

    .NewButtonPanel-wrapper-right .NewButtonPanel-tooltip {
        right: 62px;
        top: 50%;
        transform: translateY(-50%) translateX(10px) scale(0.9);
    }

    .NewButtonPanel-wrapper-left .NewButtonPanel-tooltip {
        left: 62px;
        top: 50%;
        transform: translateY(-50%) translateX(-10px) scale(0.9);
    }

    .NewButtonPanel-btn:hover .NewButtonPanel-tooltip {
        opacity: 1;
        transform: translateY(-50%) translateX(0) scale(1);
    }

    /* Badge اعلان مدرن */
    .NewButtonPanel-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        background: linear-gradient(135deg, var(--snap-danger), #dc2626);
        color: white;
        font-size: 10px;
        font-weight: bold;
        min-width: 18px;
        height: 18px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Vazir', 'Tahoma', sans-serif;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
        padding: 0 5px;
        border: 1.5px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(2px);
        animation: NewButtonPanel-badgePop 0.3s ease-out;
    }

    @keyframes NewButtonPanel-badgePop {
        0% {
            transform: scale(0);
            opacity: 0;
        }

        70% {
            transform: scale(1.2);
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Ripple effect روی کلیک */
    .NewButtonPanel-ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: scale(0);
        animation: NewButtonPanel-rippleAnim 0.5s linear;
        pointer-events: none;
    }

    @keyframes NewButtonPanel-rippleAnim {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
}

/* نمایش در تبلت‌های بزرگ (اختیاری) */
@media (min-width: 769px) and (max-width: 1024px) {
    .NewButtonPanel-btn {
        width: 48px;
        height: 48px;
    }

    .NewButtonPanel-icon {
        font-size: 22px;
    }
}


/* مخفی کردن کپی‌رایت و پرچم نقشه */
.leaflet-control-attribution {
    display: none !important;
}

.leaflet-bottom {
    display: none !important;
}



/* ============================================
   دکمه نصب برنامه - کاملاً مستقل - Modern
   ============================================ */

/* دایره اصلی */
.myda-install-circle {
    position: fixed;
    bottom: 140px;
    left: 20px;
    width: 56px;
    height: 56px;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    transform: scale(0);
    animation: mydaInstallAppear 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.2s forwards;
}

@keyframes mydaInstallAppear {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.myda-install-circle .inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--snap-primary-dark), var(--snap-primary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--snap-shadow-md);
    transition: var(--snap-transition);
    border: 2px solid rgba(66, 165, 245, 0.5);
}

.myda-install-circle:hover .inner {
    transform: scale(1.08);
    box-shadow: var(--snap-shadow-lg);
}

.myda-install-circle .inner i {
    font-size: 24px;
    color: white;
}

.myda-install-circle .pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(26, 35, 126, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: mydaPulseRing 1.5s ease-out infinite;
    pointer-events: none;
}

@keyframes mydaPulseRing {
    0% {
        width: 100%;
        height: 100%;
        opacity: 0.6;
    }

    100% {
        width: 160%;
        height: 160%;
        opacity: 0;
    }
}

.myda-install-circle .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--snap-danger);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 20px;
    animation: mydaBadgePulse 1s ease-in-out infinite;
}

@keyframes mydaBadgePulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.myda-install-circle .tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--snap-transition);
}

.myda-install-circle:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(-10px);
}

.myda-install-circle .tooltip span {
    color: white;
    font-size: 13px;
}

.myda-install-circle .tooltip i {
    color: #42a5f5;
}

/* مودال - Modern */
.myda-install-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

    .myda-install-modal.show {
        display: flex;
    }

    .myda-install-modal .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(8px);
    }

    .myda-install-modal .container {
        position: relative;
        max-width: 360px;
        width: 90%;
        background: #1e1e2f;
        border-radius: 28px;
        padding: 24px;
        text-align: center;
        z-index: 1;
        transform: scale(0.95);
        transition: transform 0.3s ease;
    }

    .myda-install-modal.show .container {
        transform: scale(1);
    }

    .myda-install-modal .close {
        position: absolute;
        top: 16px;
        right: 20px;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        color: #8b949e;
        transition: var(--snap-transition);
    }

        .myda-install-modal .close:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: rotate(90deg);
        }

    .myda-install-modal .header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
        text-align: right;
    }

    .myda-install-modal .app-icon {
        width: 64px;
        height: 64px;
        background: linear-gradient(135deg, var(--snap-primary-dark), var(--snap-primary));
        border-radius: var(--snap-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

        .myda-install-modal .app-icon img {
            width: 100%;
        }

    .myda-install-modal .app-name {
        font-size: 20px;
        font-weight: bold;
        color: white;
        margin-bottom: 4px;
    }

    .myda-install-modal .app-package {
        font-size: 11px;
        color: #8b949e;
        margin-bottom: 6px;
    }

    .myda-install-modal .rating {
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .myda-install-modal .rating i {
            font-size: 11px;
            color: #ffc107;
        }

        .myda-install-modal .rating span {
            font-size: 11px;
            color: #8b949e;
        }

    .myda-install-modal .progress-area {
        background: #2d2d44;
        border-radius: var(--snap-radius);
        padding: 16px;
        margin-bottom: 20px;
    }

    .myda-install-modal .progress-bar {
        height: 4px;
        background: #3d3d5e;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 8px;
    }

    .myda-install-modal .progress-fill {
        width: 0%;
        height: 100%;
        background: linear-gradient(90deg, #42a5f5, var(--snap-primary-dark));
        transition: width 0.3s ease;
    }

    .myda-install-modal .progress-text {
        font-size: 12px;
        color: #8b949e;
        text-align: center;
    }

    .myda-install-modal .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }

    .myda-install-modal .info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.03);
        padding: 10px 12px;
        border-radius: var(--snap-radius);
    }

        .myda-install-modal .info-row i {
            font-size: 14px;
            color: #42a5f5;
        }

        .myda-install-modal .info-row span {
            font-size: 12px;
            color: #e6edf3;
        }

    .myda-install-modal .buttons {
        display: flex;
        gap: 12px;
        margin-bottom: 16px;
    }

    .myda-install-modal .btn {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 40px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--snap-transition);
    }

    .myda-install-modal .btn-primary {
        background: linear-gradient(135deg, var(--snap-primary-dark), var(--snap-primary));
        color: white;
    }

        .myda-install-modal .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--snap-shadow-md);
        }

    .myda-install-modal .btn-secondary {
        background: transparent;
        color: #8b949e;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

        .myda-install-modal .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.05);
        }

    .myda-install-modal .security {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

        .myda-install-modal .security i {
            font-size: 12px;
            color: #42a5f5;
        }

        .myda-install-modal .security span {
            font-size: 10px;
            color: #6c757d;
        }

/* نوتیفیکیشن - Modern */
.myda-install-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1e1e2f;
    border-radius: var(--snap-radius);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10001;
    opacity: 0;
    transition: var(--snap-transition);
}

    .myda-install-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .myda-install-toast .icon i {
        font-size: 22px;
        color: #4caf50;
    }

    .myda-install-toast .title {
        font-weight: 600;
        color: white;
        font-size: 13px;
    }

    .myda-install-toast .message {
        font-size: 11px;
        color: #8b949e;
    }

/* دایره اصلی - نسخه دوم */
.myda-install-circle .multi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
}

    .myda-install-circle .multi-icon i {
        font-size: 20px;
        color: white;
        transition: var(--snap-transition);
    }

        .myda-install-circle .multi-icon i:first-child {
            font-size: 18px;
            transform: translateX(3px);
        }

        .myda-install-circle .multi-icon i:last-child {
            font-size: 20px;
            transform: translateX(-3px);
        }

.myda-install-circle:hover .multi-icon i:first-child {
    transform: translateX(2px) translateY(-2px);
}

.myda-install-circle:hover .multi-icon i:last-child {
    transform: translateX(-2px) translateY(-2px);
}



/* ==================== اسلایدر مینیمال شیشه‌ای (اصلاح شده) ==================== */

.myda-slider {
    width: calc(100% - 60px);
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: grab;
    user-select: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

    .myda-slider:active {
        cursor: grabbing;
    }

.myda-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.myda-slider-track {
    display: flex;
    flex-direction: row-reverse; /* 🔥 این خط مشکل رو حل می‌کنه */
    transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    will-change: transform;
}

.myda-slider-slide {
    flex: 0 0 100%;
    position: relative;
    pointer-events: none;
}

    .myda-slider-slide img {
        width: 100%;
        height: 300px;
        /*object-fit: cover;*/
        display: block;
        pointer-events: none;
    }

    /* اوورلی خیلی ملایم */
    .myda-slider-slide::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 30%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
        pointer-events: none;
    }

/* اندیکاتورها */
.myda-slider-dots {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 10;
}

.myda-slider-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .myda-slider-dot.active {
        width: 18px;
        border-radius: 9px;
        background: white;
    }

/* ========== ریسپانسیو ========== */

@media (max-width: 1024px) {
    .myda-slider {
        width: calc(100% - 50px);
        border-radius: 18px;
    }

    .myda-slider-slide img {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .myda-slider {
        width: calc(100% - 40px);
        border-radius: 16px;
    }

    .myda-slider-slide img {
        height: 200px;
    }

    .myda-slider-dots {
        bottom: 10px;
    }
}

@media (max-width: 576px) {
    .myda-slider {
        width: calc(100% - 30px);
        border-radius: 14px;
    }

    .myda-slider-slide img {
        height: 150px;
    }

    .myda-slider-dot {
        width: 5px;
        height: 5px;
    }

        .myda-slider-dot.active {
            width: 14px;
        }
}

@media (max-width: 480px) {
    .myda-slider {
        width: calc(100% - 24px);
        border-radius: 12px;
    }

    .myda-slider-slide img {
        height: 130px;
    }

    .myda-slider-dots {
        bottom: 6px;
    }
}

@media (max-width: 380px) {
    .myda-slider {
        width: calc(100% - 20px);
        border-radius: 12px;
    }

    .myda-slider-slide img {
        height: 110px;
    }

    .myda-slider-dot {
        width: 4px;
        height: 4px;
    }

        .myda-slider-dot.active {
            width: 12px;
        }
}
/* ==================== کارت‌های شیشه‌ای ملایم ==================== */

.features-section {
    padding: 60px 0;
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* کارت شیشه‌ای پایه */
.feature-card {
    border-radius: 28px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

    .feature-card:hover {
        transform: translateY(-8px);
    }

    /* افکت شیشه‌ای روی کارت‌ها */
    .feature-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-radius: 28px;
        z-index: 0;
    }

    .feature-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        pointer-events: none;
        z-index: 1;
    }

    .feature-card > * {
        position: relative;
        z-index: 2;
    }

/* آیکون کارت */
.feature-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    font-size: 32px;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.05);
}

/* عنوان کارت */
.feature-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 12px;
}

/* متن کارت */
.feature-description {
    font-size: 0.85rem;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 0;
}

/* ========== رنگ‌های ملایم و مدرن هر کارت ========== */

/* کارت 1 - بنفش ملایم (Lavender) */
.feature-card-1 {
    background: rgba(139, 92, 246, 0.15);
}

    .feature-card-1::before {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.08));
    }

    .feature-card-1 .feature-icon {
        background: linear-gradient(135deg, #8b5cf6, #a855f7);
        color: white;
        box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
    }

    .feature-card-1 .feature-title {
        color: #7c3aed;
    }

    .feature-card-1:hover {
        background: rgba(139, 92, 246, 0.25);
        box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15);
    }

/* کارت 2 - صورتی ملایم (Rose) */
.feature-card-2 {
    background: rgba(244, 114, 182, 0.15);
}

    .feature-card-2::before {
        background: linear-gradient(135deg, rgba(244, 114, 182, 0.2), rgba(244, 114, 182, 0.08));
    }

    .feature-card-2 .feature-icon {
        background: linear-gradient(135deg, #ec4899, #f472b6);
        color: white;
        box-shadow: 0 10px 25px rgba(236, 72, 153, 0.3);
    }

    .feature-card-2 .feature-title {
        color: #db2777;
    }

    .feature-card-2:hover {
        background: rgba(244, 114, 182, 0.25);
        box-shadow: 0 20px 40px rgba(236, 72, 153, 0.15);
    }

/* کارت 3 - سبز ملایم (Mint) */
.feature-card-3 {
    background: rgba(16, 185, 129, 0.12);
}

    .feature-card-3::before {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.06));
    }

    .feature-card-3 .feature-icon {
        background: linear-gradient(135deg, #10b981, #34d399);
        color: white;
        box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
    }

    .feature-card-3 .feature-title {
        color: #059669;
    }

    .feature-card-3:hover {
        background: rgba(16, 185, 129, 0.2);
        box-shadow: 0 20px 40px rgba(16, 185, 129, 0.12);
    }

/* کارت 4 - آبی ملایم (Ocean) */
.feature-card-4 {
    background: rgba(59, 130, 246, 0.12);
}

    .feature-card-4::before {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.06));
    }

    .feature-card-4 .feature-icon {
        background: linear-gradient(135deg, #3b82f6, #60a5fa);
        color: white;
        box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
    }

    .feature-card-4 .feature-title {
        color: #2563eb;
    }

    .feature-card-4:hover {
        background: rgba(59, 130, 246, 0.2);
        box-shadow: 0 20px 40px rgba(59, 130, 246, 0.12);
    }

/* ========== ریسپانسیو ========== */

@media (max-width: 1024px) {
    .features-grid {
        gap: 20px;
    }

    .feature-card {
        padding: 24px 20px;
        border-radius: 24px;
    }

    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
        border-radius: 20px;
    }

    .feature-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 500px) {
    .features-section {
        padding: 40px 0;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .feature-card {
        padding: 20px 18px;
        border-radius: 22px;
    }

    .feature-icon {
        width: 52px;
        height: 52px;
        font-size: 24px;
        border-radius: 18px;
        margin-bottom: 16px;
    }

    .feature-title {
        font-size: 1.1rem;
    }

    .feature-description {
        font-size: 0.8rem;
    }
}

/* انیمیشن ورود کارت‌ها */
@keyframes cardFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feature-card {
    animation: cardFadeInUp 0.5s ease forwards;
    opacity: 0;
}

    .feature-card:nth-child(1) {
        animation-delay: 0.1s;
    }

    .feature-card:nth-child(2) {
        animation-delay: 0.2s;
    }

    .feature-card:nth-child(3) {
        animation-delay: 0.3s;
    }

    .feature-card:nth-child(4) {
        animation-delay: 0.4s;
    }


/* ==================== کارت‌های دونفره مینیمال با حاشیه رنگی ==================== */

.double-cards-section {
    padding: 50px 0;
}

.double-cards-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.double-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

/* کارت پایه */
.double-card {
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    cursor: pointer;
    position: relative;
    background: white;
}

    .double-card:hover {
        transform: translateY(-6px);
    }

/* لینک داخل کارت */
.double-card-link {
    text-decoration: none;
    display: block;
    height: 100%;
}

/* کانتینر عکس - عکس کامل نشان داده می‌شود */
.double-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    background: #f0f0f0;
}

    .double-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        transition: transform 0.5s ease;
    }

.double-card:hover .double-card-image img {
    transform: scale(1.03);
}

/* محتوای کارت (شیشه‌ای) */
.double-card-content {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 20px 18px;
    text-align: center;
}

/* عنوان کارت */
.double-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
}

/* متن کارت */
.double-card-description {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #4a5568;
    margin-bottom: 0;
}

/* دکمه داخل کارت */
.double-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 7px 18px;
    background: transparent;
    border: 1.5px solid;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .double-card-btn svg {
        width: 14px;
        height: 14px;
        transition: transform 0.3s ease;
    }

.double-card:hover .double-card-btn svg {
    transform: translateX(4px);
}

/* ========== حاشیه 2px با رنگ‌های متفاوت ========== */

/* کارت 1 - بنفش */
.double-card-purple {
    border: 2px solid rgba(139, 92, 246, 0.4);
}

    .double-card-purple .double-card-title {
        color: #7c3aed;
    }

    .double-card-purple .double-card-btn {
        color: #7c3aed;
        border-color: #7c3aed;
    }

        .double-card-purple .double-card-btn:hover {
            background: #7c3aed;
            color: white;
        }

    .double-card-purple:hover {
        border-color: #8b5cf6;
        box-shadow: 0 15px 30px rgba(139, 92, 246, 0.15);
    }

/* کارت 2 - صورتی */
.double-card-pink {
    border: 2px solid rgba(236, 72, 153, 0.4);
}

    .double-card-pink .double-card-title {
        color: #db2777;
    }

    .double-card-pink .double-card-btn {
        color: #db2777;
        border-color: #db2777;
    }

        .double-card-pink .double-card-btn:hover {
            background: #db2777;
            color: white;
        }

    .double-card-pink:hover {
        border-color: #ec4899;
        box-shadow: 0 15px 30px rgba(236, 72, 153, 0.15);
    }

/* ========== ریسپانسیو ========== */

@media (max-width: 900px) {
    .double-cards-grid {
        gap: 24px;
    }

    .double-card-image {
        height: 180px;
    }

    .double-card-content {
        padding: 18px 16px;
    }

    .double-card-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .double-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .double-card-image {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .double-cards-section {
        padding: 40px 0;
    }

    .double-cards-container {
        padding: 0 16px;
    }

    .double-card-image {
        height: 170px;
    }

    .double-card-content {
        padding: 16px 14px;
    }

    .double-card-title {
        font-size: 1.1rem;
    }

    .double-card-description {
        font-size: 0.8rem;
    }

    .double-card-btn {
        padding: 6px 14px;
        font-size: 0.75rem;
    }

    .double-card {
        border-radius: 20px;
    }
}

/* انیمیشن ورود */
@keyframes doubleCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.double-card {
    animation: doubleCardFadeIn 0.5s ease forwards;
    opacity: 0;
}

    .double-card:first-child {
        animation-delay: 0.1s;
    }

    .double-card:last-child {
        animation-delay: 0.2s;
    }




/* ============================================
   کارت وضعیت نئومورفیک مدرن - نسخه شارپ و شاد
   ============================================ */

/* انیمیشن‌های اصلی */
@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(139, 92, 246, 0.4), 0 0 10px rgba(16, 185, 129, 0.2);
    }

    50% {
        box-shadow: 0 0 15px rgba(139, 92, 246, 0.6), 0 0 20px rgba(16, 185, 129, 0.4);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(120px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes iconBounce {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* کارت اصلی */
.minimal-status-card {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10000;
    cursor: pointer;
    animation: slideIn 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
    transition: all 0.25s ease;
}

    .minimal-status-card:active {
        transform: scale(0.98);
    }

/* محتوای کارت - نئومورفیک مدرن */
.minimal-card-content {
    background: linear-gradient(135deg, rgba(25, 25, 35, 0.92), rgba(35, 35, 45, 0.96));
    backdrop-filter: blur(16px);
    border-radius: 28px;
    padding: 10px 18px 10px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 12px 35px -10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.minimal-status-card:hover .minimal-card-content {
    background: linear-gradient(135deg, rgba(30, 30, 42, 0.96), rgba(40, 40, 52, 0.98));
    border-color: rgba(139, 92, 246, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* آیکون داینامیک */
.minimal-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #8B5CF6, #10B981);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.35);
}

.card-icon-inner {
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: iconBounce 2s ease infinite;
}

/* وضعیت‌های مختلف آیکون با رنگ‌های شاد */
.minimal-status-card.waiting .minimal-card-icon {
    background: linear-gradient(135deg, #F59E0B, #F97316);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.minimal-status-card.accepted .minimal-card-icon {
    background: linear-gradient(135deg, #10B981, #06D6A0);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    animation: glowPulse 2s infinite;
}

.minimal-status-card.completed .minimal-card-icon {
    background: linear-gradient(135deg, #3B82F6, #06B6D4);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.minimal-status-card.rating .minimal-card-icon {
    background: linear-gradient(135deg, #EC4899, #F43F5E);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
    animation: iconBounce 1s ease infinite;
}

/* اطلاعات */
.minimal-card-info {
    flex: 1;
    min-width: 160px;
}

.minimal-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}

.minimal-card-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 3px;
    line-height: 1.35;
}

.minimal-card-time {
    font-size: 10px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #10B981, #06D6A0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* بج وضعیت */
.minimal-card-status .status-badge {
    padding: 4px 10px;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    backdrop-filter: blur(4px);
}

.status-badge.waiting {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.status-badge.accepted {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.status-badge.completed {
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.status-badge.rating {
    background: rgba(236, 72, 153, 0.2);
    color: #F472B6;
    border: 1px solid rgba(236, 72, 153, 0.4);
    animation: glowPulse 1.5s infinite;
}

.status-badge.expired {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.status-badge.cancelled {
    background: rgba(107, 114, 128, 0.2);
    color: #9CA3AF;
    border: 1px solid rgba(107, 114, 128, 0.4);
}

/* دکمه بستن */
.minimal-card-close {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: rgba(255, 255, 255, 0.4);
    width: 28px;
    height: 28px;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

    .minimal-card-close:hover {
        background: rgba(239, 68, 68, 0.3);
        color: #F87171;
        transform: scale(1.05);
    }

/* گلو افکت مدرن */
.minimal-card-glow {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: radial-gradient(circle at 30% 50%, rgba(139, 92, 246, 0.2), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.minimal-status-card:hover .minimal-card-glow {
    opacity: 1;
}

/* responsive موبایل */
@media (max-width: 768px) {
    .minimal-status-card {
        bottom: 20px;
        right: 20px;
        left: auto;
        max-width: calc(100vw - 40px);
    }

    .minimal-card-content {
        padding: 8px 14px 8px 10px;
        gap: 10px;
        border-radius: 22px;
    }

    .minimal-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }

    .card-icon-inner {
        font-size: 20px;
    }

    .minimal-card-info {
        min-width: 140px;
    }

    .minimal-card-title {
        font-size: 12px;
    }

    .minimal-card-subtitle {
        font-size: 10px;
    }

    .minimal-card-time {
        font-size: 9px;
    }

    .status-badge {
        padding: 3px 8px;
        font-size: 9px;
    }
}

/* برای صفحه‌های خیلی کوچک */
@media (max-width: 480px) {
    .minimal-card-info {
        min-width: 120px;
    }

    .minimal-card-content {
        padding: 6px 12px 6px 8px;
    }
}






/* ============================================
   بخش پنل کافی نت ها - استایل‌های مدرن و شیشه‌ای
   ============================================ */

/* --------------------------------------------
   استایل‌های پایه نقشه و کانتینر اصلی
--------------------------------------------- */
.snapp-map-section {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: 'Vazir', 'Tahoma', sans-serif;
}

.snapp-fullscreen-map {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* --------------------------------------------
   هدر بالای نقشه (نوار وضعیت و آیکون‌ها)
--------------------------------------------- */
.snapp-map-header {
    position: absolute;
    top: 70px;
    left: 20px;
    right: 20px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 40px;
    box-shadow: var(--snap-shadow);
    border: 1px solid rgba(139,92,246,0.15);
    max-width: 460px;
    margin: 0 auto;
}

/* دکمه‌های آنلاین/آفلاین */
.snapp-status-tabs {
    background: #f1f5f9;
    padding: 3px;
    border-radius: 40px;
    display: inline-flex;
}

.snapp-tab-btn {
    padding: 6px 20px;
    border: none;
    background: transparent;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #64748b;
    transition: var(--snap-transition);
}

    .snapp-tab-btn.snapp-online.snapp-active {
        background: var(--snap-success);
        color: white;
    }

    .snapp-tab-btn.snapp-offline.snapp-active {
        background: #94A3B8;
        color: white;
    }

/* آیکون‌های هدر */
.snapp-header-icons {
    display: flex;
    gap: 12px;
}

.snapp-icon {
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
    transition: var(--snap-transition);
}

    .snapp-icon:hover {
        opacity: 1;
    }

/* --------------------------------------------
   دکمه‌های کنترلی نقشه
--------------------------------------------- */
.snapp-location-btn,
.snapp-zoom-route-btn,
.snapp-open-route-btn {
    position: absolute;
    bottom: 120px;
    right: 20px;
    z-index: 15;
    width: 48px;
    height: 48px;
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: var(--snap-shadow);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    transition: var(--snap-transition);
}

.snapp-zoom-route-btn {
    left: 80px;
    right: auto;
}

.snapp-open-route-btn {
    left: 20px;
    right: auto;
    width: auto;
    border-radius: 40px;
    padding: 12px 20px;
    font-size: 14px;
    gap: 8px;
    background: #8B5CF6;
    color: white;
}

.snapp-location-btn:hover,
.snapp-zoom-route-btn:hover {
    background: #8B5CF6;
    color: white;
    transform: scale(1.1);
}

/* --------------------------------------------
   کارت اصلی نمایش درخواست
--------------------------------------------- */
.snapp-main-request-card {
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 380px;
    background: white;
    border-radius: 28px;
    box-shadow: var(--snap-shadow-xl);
    z-index: 20;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.snapp-drag-handle {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    color: white;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    cursor: grab;
}

    .snapp-drag-handle:active {
        cursor: grabbing;
    }

.snapp-request-timer-bar {
    height: 4px;
    background: #e5e7eb;
    width: 100%;
}

.snapp-timer-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--snap-success), #059669);
    transition: width 1s linear;
}

.snapp-request-content {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.snapp-request-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 12px;
}

.snapp-request-distance,
.snapp-request-time {
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 30px;
    color: #475569;
}

.snapp-request-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    word-wrap: break-word;
}

.snapp-request-description {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 15px;
    background: #f8fafc;
    padding: 12px;
    border-radius: var(--snap-radius);
    border-right: 3px solid #8B5CF6;
    max-height: 120px;
    overflow-y: auto;
    word-wrap: break-word;
    white-space: normal;
}

.snapp-request-price {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    color: white;
    padding: 10px 15px;
    border-radius: 30px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
}

.snapp-customer-info {
    background: #f0f9ff;
    border-radius: var(--snap-radius);
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #bae6fd;
}

.snapp-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 6px 0;
}

.snapp-route-info {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: white;
    border-radius: var(--snap-radius);
    padding: 15px;
    margin-bottom: 15px;
}

.snapp-route-details {
    display: flex;
    justify-content: space-around;
    font-size: 13px;
}

/* --------------------------------------------
   تایمرهای تایید، لغو و اتمام کار
--------------------------------------------- */
.snapp-confirm-timer,
.snapp-cancel-timer,
.snapp-complete-timer {
    position: fixed;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    border-radius: 50px;
    padding: 12px 20px;
    z-index: 1000;
    box-shadow: var(--snap-shadow-xl);
    animation: slideUp 0.3s ease;
}

.snapp-confirm-timer {
    background: linear-gradient(135deg, var(--snap-success), #059669);
}

.snapp-cancel-timer {
    background: linear-gradient(135deg, var(--snap-danger), #DC2626);
}

.snapp-complete-timer {
    background: linear-gradient(135deg, var(--snap-info), #2563EB);
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100px);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.snapp-timer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
    font-weight: bold;
    margin-bottom: 8px;
}

    .snapp-timer-content span:first-child {
        font-size: 20px;
    }

    .snapp-timer-content span:nth-child(2) {
        font-size: 24px;
        font-weight: bold;
        background: rgba(255,255,255,0.3);
        padding: 0 12px;
        border-radius: 30px;
    }

.snapp-cancel-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--snap-transition);
}

    .snapp-cancel-btn:hover {
        background: rgba(255,255,255,0.4);
        transform: scale(1.1);
    }

.snapp-timer-bar {
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
    overflow: hidden;
}

.snapp-timer-bar-progress {
    height: 100%;
    background: white;
    width: 100%;
    transition: width 1s linear;
    border-radius: 4px;
}

/* --------------------------------------------
   دکمه‌های پایین کارت درخواست
--------------------------------------------- */
.snapp-request-footer {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.snapp-accept-btn {
    flex: 2;
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    border: none;
    border-radius: 40px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: var(--snap-transition);
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .snapp-accept-btn:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 15px rgba(139,92,246,0.4);
    }

.snapp-ignore-btn {
    flex: 1;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 40px;
    padding: 12px 0;
    font-size: 14px;
    color: #64748b;
    cursor: pointer;
    transition: var(--snap-transition);
    height: 48px;
}

    .snapp-ignore-btn:hover {
        background: #fee2e2;
        border-color: var(--snap-danger);
        color: var(--snap-danger);
    }

.snapp-complete-btn,
.snapp-cancel-request-btn {
    flex: 1;
    border-radius: var(--snap-radius);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--snap-transition);
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: white;
}

.snapp-complete-btn {
    background: linear-gradient(135deg, var(--snap-success), #059669);
}

.snapp-cancel-request-btn {
    background: linear-gradient(135deg, var(--snap-danger), #DC2626);
}

    .snapp-complete-btn:hover,
    .snapp-cancel-request-btn:hover {
        transform: scale(1.02);
    }

/* --------------------------------------------
   کارت‌های کناری (درخواست‌های قبلی و بعدی)
--------------------------------------------- */
.snapp-side-card {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 140px;
    max-height: 70vh;
    z-index: 15;
    overflow-y: auto;
}

    .snapp-side-card.snapp-left {
        left: 10px;
    }

    .snapp-side-card.snapp-right {
        right: 10px;
    }

.snapp-side-cards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px;
}

.snapp-side-card-item {
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(5px);
    border-radius: var(--snap-radius);
    padding: 12px;
    cursor: pointer;
    transition: var(--snap-transition);
    box-shadow: var(--snap-shadow);
    position: relative;
    overflow: hidden;
}

    .snapp-side-card-item:hover {
        transform: scale(1.02);
        background: white;
        box-shadow: var(--snap-shadow-lg);
    }

.snapp-side-content {
    position: relative;
    z-index: 2;
}

.snapp-side-distance {
    font-size: 10px;
    color: #64748b;
    display: block;
    margin-bottom: 4px;
}

.snapp-side-title {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.snapp-side-price {
    font-size: 13px;
    font-weight: 700;
    color: #8B5CF6;
    display: block;
    margin-bottom: 6px;
}

.snapp-side-time {
    font-size: 10px;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid #f3f4f6;
}

.snapp-side-timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #e5e7eb;
}

.snapp-side-timer-progress {
    height: 100%;
    background: linear-gradient(90deg, #8B5CF6, #6B21A8);
    width: 100%;
    transition: width 1s linear;
}

/* --------------------------------------------
   کارت‌های اضافی (درخواست‌های بیشتر)
--------------------------------------------- */
.snapp-extra-cards {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 12;
    padding: 0 15px;
    flex-wrap: wrap;
}

.snapp-extra-card {
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(5px);
    padding: 8px 14px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--snap-shadow);
    font-size: 12px;
    cursor: pointer;
    transition: var(--snap-transition);
}

    .snapp-extra-card:hover {
        transform: translateY(-3px);
        background: white;
        border-color: #8B5CF6;
        box-shadow: var(--snap-shadow-md);
    }

.snapp-extra-price {
    font-weight: 700;
    color: #8B5CF6;
}

.snapp-extra-time {
    font-size: 10px;
    color: #6B7280;
    margin-right: 4px;
}

/* --------------------------------------------
   نوتیفیکیشن (پیام‌های موقت)
--------------------------------------------- */
.snapp-notification {
    position: fixed;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 40px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    z-index: 1000;
    display: none;
    text-align: center;
    animation: slideDown 0.3s ease;
}

    .snapp-notification.success {
        background: linear-gradient(135deg, var(--snap-success), #059669);
    }

    .snapp-notification.error {
        background: linear-gradient(135deg, var(--snap-danger), #DC2626);
    }

    .snapp-notification.warning {
        background: linear-gradient(135deg, var(--snap-warning), #D97706);
    }

    .snapp-notification.info {
        background: linear-gradient(135deg, var(--snap-info), #2563EB);
    }

/* --------------------------------------------
   پیام‌های وضعیت (درخواستی وجود ندارد / آفلاین)
   ⚠️ IMPORTANT: برای نمایش صحیح، حتماً دکمه retry-btn در HTML اضافه شود
--------------------------------------------- */
/* ============================================
   پیام "درخواستی وجود ندارد" - استایل اختصاصی
   ============================================ */
.snapp-no-request {
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    min-width: 320px;
    max-width: 400px;
    width: 90%;
    padding: 32px 24px;
    text-align: center;
    border-radius: 32px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
    animation: slideInMessage 0.5s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* رنگ مخصوص درخواستی وجود ندارد - بنفش ملایم */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.9) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

    .snapp-no-request span:first-child {
        font-size: 64px;
        display: block;
        margin-bottom: 16px;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
        animation: floatIcon 3s ease-in-out infinite;
    }

    .snapp-no-request h3 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 10px;
        background: linear-gradient(135deg, #1e293b, #475569);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        display: block;
        width: 100%;
        text-align: center;
    }

    .snapp-no-request p {
        font-size: 14px;
        color: #64748b;
        margin-bottom: 0;
        line-height: 1.6;
        display: block;
        width: 100%;
        text-align: center;
    }

/* ============================================
   پیام "آفلاین هستید" - استایل اختصاصی
   ============================================ */
.snapp-offline-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    min-width: 320px;
    max-width: 400px;
    width: 90%;
    padding: 32px 24px;
    text-align: center;
    border-radius: 32px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
    animation: slideInMessage 0.5s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* رنگ مخصوص آفلاین - قرمز شیشه‌ای */
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.85) 0%, rgba(220, 38, 38, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

    .snapp-offline-message span:first-child {
        font-size: 64px;
        display: block;
        margin-bottom: 16px;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
        animation: shakeIcon 2s ease-in-out infinite;
    }

    .snapp-offline-message h3 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 10px;
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        display: block;
        width: 100%;
        text-align: center;
    }

    .snapp-offline-message p {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 0;
        line-height: 1.6;
        display: block;
        width: 100%;
        text-align: center;
    }

    /* دکمه تلاش مجدد - فقط در حالت آفلاین */
    .snapp-offline-message .retry-btn {
        display: inline-block;
        margin-top: 20px;
        padding: 10px 24px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 40px;
        font-size: 13px;
        font-weight: 600;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        font-family: inherit;
    }

        .snapp-offline-message .retry-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.02);
        }

    /* حلقه نورانی - فقط برای آفلاین */
    .snapp-offline-message::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-radius: 35px;
        background: linear-gradient(135deg, #ef4444, #dc2626, #f87171, #ef4444);
        background-size: 300% 300%;
        z-index: -1;
        opacity: 0.6;
        animation: glowRotate 3s ease infinite;
    }

/* ============================================
   انیمیشن‌های مشترک
   ============================================ */
@keyframes slideInMessage {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
        backdrop-filter: blur(0px);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        backdrop-filter: blur(20px);
    }
}

@keyframes floatIcon {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes shakeIcon {
    0%, 100% {
        transform: rotate(0deg);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: rotate(-5deg);
    }

    20%, 40%, 60%, 80% {
        transform: rotate(5deg);
    }
}

@keyframes glowRotate {
    0% {
        background-position: 0% 50%;
        opacity: 0.4;
    }

    50% {
        background-position: 100% 50%;
        opacity: 0.7;
    }

    100% {
        background-position: 0% 50%;
        opacity: 0.4;
    }
}

/* ============================================
   واکنش‌گرا برای موبایل
   ============================================ */
@media (max-width: 480px) {
    .snapp-no-request,
    .snapp-offline-message {
        min-width: 280px;
        padding: 24px 20px;
        border-radius: 28px;
    }

        .snapp-no-request span:first-child,
        .snapp-offline-message span:first-child {
            font-size: 52px;
        }

        .snapp-no-request h3,
        .snapp-offline-message h3 {
            font-size: 18px;
        }

        .snapp-no-request p,
        .snapp-offline-message p {
            font-size: 13px;
        }

        .snapp-offline-message .retry-btn {
            padding: 8px 20px;
            font-size: 12px;
            margin-top: 16px;
        }
}


.snapp-retry-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 28px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-family: inherit;
    letter-spacing: 0.5px;
}

    .snapp-retry-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .snapp-retry-btn:active {
        transform: translateY(1px);
    }
/* --------------------------------------------
   استایل کاربر (نشانگر روی نقشه)
--------------------------------------------- */
.snapp-user-pulse {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(139,92,246,0.3);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.snapp-user-icon {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #8B5CF6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    top: 5px;
    left: 5px;
    border: 2px solid white;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* --------------------------------------------
   محتوای مارکرهای نقشه
--------------------------------------------- */
.snapp-marker-content {
    padding: 6px 12px;
    border-radius: 30px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    box-shadow: var(--snap-shadow);
    border: 2px solid white;
    white-space: nowrap;
    text-align: center;
    min-width: 80px;
}

/* مخفی کردن مسیریابی پیش‌فرض لیف‌لت */
.leaflet-routing-container {
    display: none;
}

/* --------------------------------------------
   ریسپانسیو موبایل
--------------------------------------------- */
@media (max-width: 768px) {
    .snapp-side-card {
        display: none !important;
    }

    .snapp-main-request-card {
        width: 95%;
        bottom: 10px;
    }

    .snapp-extra-cards {
        bottom: 80px;
    }
}

/* --------------------------------------------
   استایل‌های مارکر پیشرفته
--------------------------------------------- */
.snapp-user-marker {
    background: transparent;
    border: none;
}

.snapp-user-pulse {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.4);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

.snapp-user-icon {
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--snap-info);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    top: 5px;
    left: 5px;
}

.snapp-request-marker {
    background: transparent;
    border: none;
}

.snapp-marker-content {
    padding: 4px 12px;
    border-radius: 20px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: var(--snap-shadow);
}

.snapp-offline-message .retry-btn {
    margin-top: 20px;
    padding: 10px 24px;
    background: rgba(255,255,255,0.2);
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.3);
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(108,92,231,0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 25px rgba(108,92,231,0.8);
    }
}

#notifBtn:hover {
    transform: scale(1.1);
}




.notification-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
    z-index: 100000;
    display: none;
    justify-content: center;
    align-items: center;
    font-family: 'Vazir', 'Tahoma', sans-serif;
}

    .notification-modal.show {
        display: flex;
    }

.notification-modal-content {
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    border-radius: 32px;
    width: 90%;
    max-width: 400px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    animation: slideUp 0.4s ease;
    direction: rtl;
}

.notification-modal-icon {
    width: 85px;
    height: 85px;
    background: linear-gradient(145deg, #6c5ce7, #a29bfe);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 10px 25px rgba(108,92,231,0.4);
    animation: pulse 2s infinite;
}

    .notification-modal-icon i {
        font-size: 42px;
        color: white;
    }

.notification-modal-title {
    font-size: 22px;
    font-weight: bold;
    color: white;
    margin-bottom: 12px;
}

.notification-modal-text {
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
    margin-bottom: 25px;
    font-size: 14px;
}

.notification-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 15px;
}

.notification-modal-btn {
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    flex: 1;
}

.notification-modal-btn-primary {
    background: linear-gradient(145deg, #6c5ce7, #a29bfe);
    color: white;
}

    .notification-modal-btn-primary:hover {
        transform: scale(1.02);
        box-shadow: 0 5px 20px rgba(108,92,231,0.4);
    }

.notification-modal-btn-secondary {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}

    .notification-modal-btn-secondary:hover {
        background: rgba(255,255,255,0.2);
    }

.notification-modal-later {
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    display: inline-block;
    margin-top: 5px;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* MYDA: Responsive rating modal - PanelCafinet */
.snapp-rating-fullscreen {
    box-sizing: border-box;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.snapp-rating-container {
    box-sizing: border-box;
    width: min(100%, 440px);
    max-width: 440px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(16px, 4vw, 28px) clamp(14px, 4vw, 24px);
    margin: auto;
    border-radius: clamp(16px, 4vw, 26px);
}

.snapp-rating-header {
    gap: 10px;
    font-size: clamp(17px, 4.5vw, 22px);
    line-height: 1.4;
}

.snapp-rating-icon {
    font-size: clamp(24px, 7vw, 32px);
    flex: 0 0 auto;
}

.snapp-rating-stars-display {
    font-size: clamp(34px, 10vw, 52px);
    letter-spacing: clamp(2px, 2vw, 8px);
    line-height: 1.3;
}

.snapp-rating-labels {
    gap: 4px;
    font-size: clamp(10px, 2.8vw, 12px);
}

    .snapp-rating-labels span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

.snapp-submit-rating-btn {
    max-width: 100%;
}

@media (max-width: 480px) {
    .snapp-rating-fullscreen {
        align-items: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    .snapp-rating-container {
        width: 100%;
        max-width: 440px;
    }

    .rating-request-info {
        padding: 10px 12px;
        margin-bottom: 14px;
    }

    .rating-request-title, .rating-customer-name {
        overflow-wrap: anywhere;
    }
}

@media (max-height: 560px) {
    .snapp-rating-fullscreen {
        align-items: flex-start;
    }

    .snapp-rating-container {
        margin-top: 4px;
        margin-bottom: 4px;
        max-height: calc(100vh - 8px);
        max-height: calc(100dvh - 8px);
    }

    .snapp-rating-header {
        margin-bottom: 12px;
    }

    .snapp-rating-stars-display {
        margin-bottom: 10px;
    }

    .snapp-rating-slider-container {
        margin-bottom: 10px;
    }
}

/* =========================================================
   MYDA - Service Cards (slightly larger, responsive layout)
   Added as the single service-card style block.
   ========================================================= */
.myda-stories-viewport {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.myda-stories-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 18px;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

.myda-story-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: 190px;
    padding: 22px 14px;
    box-sizing: border-box;
    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    overflow-wrap: anywhere;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .myda-story-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09);
    }

.myda-story-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.myda-story-content {
    display: block;
    width: 100%;
    min-width: 0;
}

.myda-story-name {
    display: block;
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.myda-story-price {
    display: block;
    width: 100%;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
    .myda-stories-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 16px;
    }

    .myda-story-card {
        min-height: 185px;
    }
}

@media (max-width: 600px) {
    .myda-stories-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10px;
        row-gap: 12px;
    }

    .myda-story-card {
        min-height: 175px;
        padding: 18px 10px;
        border-radius: 18px;
    }

    .myda-story-icon {
        font-size: 26px;
        margin-bottom: 8px;
    }

    .myda-story-name {
        font-size: 14px;
        line-height: 1.8;
    }

    .myda-story-price {
        margin-top: 12px;
        font-size: 13px;
    }
}