:root {
    /* رنگ‌های حالت روشن */
    --bg: #FAFAFA;
    --text: #111827;
    --muted: #6b7280;
    --card-bg: #ffffff;
    --hero-bg: #23262b;   /* پس‌زمینه سکشن قهرمان */
    --btn-primary: #4CAF50;   /* رنگ دکمه‌ها */
    --btn-peyman: #4CAF50;   /* رنگ دکمه‌ها */
    --btn-peyman-hover: #3a933d;   /* رنگ هاور دکمه‌ها */
    --ring: rgba(34,197,94,.35);
    --body-padding-top: 70px;
    --hero-margin-top: -70px;
    --border-color: #828282;
    --text-color: #424242;
}
/* حالت تیره (خودکار) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b0b0f;
        --text: #e5e7eb;
        --muted: #9ca3af;
        --card-bg: #15171c;
        --hero-bg: #333333;
        --btn-primary: #22c55e;
        --btn-peyman: #22c55e;
        --btn-peyman-hover: #1baf51;
        --ring: rgba(34,197,94,.35);
    }
}

@media (min-width: 768px) {
    /* بزرگتر از موبایل */
    :root {
        --body-padding-top: 90px;
        --hero-margin-top: -90px;
    }
}

/* اجبار دستی با data-theme روی html */
html[data-theme="light"] {
    --bg: #f5f7fa;
    --text:#111827;
    --form-text:#424242;
    --muted:#6b7280;
    --card-bg:#ffffff;
    --btn-primary: #4CAF50;   /* رنگ دکمه‌ها */
    --btn-peyman: #4CAF50;   /* رنگ دکمه‌ها */
    --btn-peyman-hover: #3a933d;   /* رنگ هاور دکمه‌ها */
    --ring: rgba(34,197,94,.35);
    --border-color: #828282;
    --text-color: #424242;
}
html[data-theme="dark"] {
    --bg: #0b0b0f;
    --text:#e5e7eb;
    --form-text: #b2b2b2;
    --muted:#9ca3af;
    --card-bg:#15171c;
    --primary:#22c55e;
    --ring: rgba(34,197,94,.35);
    --border-color: #828282;
    --text-color: #c7c7c7;
}

/* پایه‌ها */
* { box-sizing: border-box; }
body {
    direction: rtl;
    font-family: Vazirmatn, serif;
    background: var(--bg);
    color: var(--text);
    /* برای این‌که محتوا زیر ناچ/استتوس‌بار نرود */
    /*padding-top: calc(env(safe-area-inset-top) + var(--body-padding-top));*/
    padding-bottom: 80px
}
body, section, .container{
    scroll-behavior: smooth;
}
a, .btn-link {
    color: var(--text);
    text-decoration: none !important;
}
.btn-peyman {
    background: var(--btn-peyman);
    border-color: var(--btn-peyman);
    color: white !important;
    white-space: nowrap;
}
.btn-peyman:focus, .btn-peyman:hover {
    filter: brightness(0.95);
    background: var(--btn-peyman-hover);
    box-shadow: 0 0 0 .2rem var(--ring);
    color: white !important;
}
.part-content{
    color: var(--text-color);
}

.full-page-content{
    height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 15px;
}

.full-page-content > .part-section{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.text-ltr{
    direction: ltr;
}

@media screen and (min-width: 768px){
    /* ScrollBar Style */

    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.3);
        /*border-radius: 5px;*/
        display: none;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: rgba(128, 128, 128, 0.3);
        border-radius: 5px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(128, 128, 128, 0.5);
        padding: 30px;
    }
}
.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.rounded-2xl { border-radius: 1rem; }

/* سوییچر تم (اختیاری) */
.theme-switcher {
    position: fixed;
    inset-inline-end: 1rem;
    inset-block-start: 1rem;
    z-index: 9995;
    /*background: var(--card-bg);*/
    /*border: 1px solid rgba(0,0,0,.08);*/
    /*padding: .35rem .6rem;*/
    /*border-radius: .75rem;*/
    font-size: .85rem;
}

/* استایل پایه دکمه */
#theme-toggle {
    border: none;
    background: #101010;
    color: #333;
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

#theme-toggle:active {
    transform: scale(0.95);
}

/* استایل آیکون‌ها (اختیاری) */
#theme-toggle .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
}
#theme-toggle .sun { color: #f39c12; }  /* رنگ خورشید */
#theme-toggle .moon { color: #c0cad5; } /* رنگ ماه */

/* پنهان/نمایان‌سازی آیکون‌ها توسط کلاس */
#theme-toggle .sun { display: inline-flex; }
#theme-toggle .moon { display: none; }


.error-403, .error-404, .error-405, .error-500, .error-419{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    flex-direction: column;
    line-height: initial;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    user-select: none;
}

.title-403, .title-404, .title-405, .title-500, .title-419{
    font-size: 10vw;
}


#pwa-v2-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 20;
}

#pwa-v2-content{
    /*height: calc(100vh - 90px - env(safe-area-inset-top) - var(--body-padding-top));*/
}

#pwa-v2-content > .container {
    /*height: 100%;*/
    /*overflow: auto;*/
    /*overflow-x: hidden;*/
}

#pwa-v2-footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 10;
}

#pwa-v2-footer .container {
    height: 90px;
    background: white;
    border-top: 1px solid #C3C3C3;
    display: flex;
    justify-content: space-around;
}

.pwa-v2-footer-icon{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 90%;
    color: #424242 !important;
    margin-bottom: 5px;
    font-weight: 800;
    width: 100%;
}

.pwa-v2-footer-icon{
    opacity: 0.4;
}

.pwa-v2-footer-icon:hover{
    opacity: 0.7;
}

.pwa-v2-footer-icon.active{
    opacity: 1;
}

.footer-icon-image{
    width: 100%;
    margin-bottom: 5px;
    max-height: 25px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.footer-icon-image.icon-index{background-image: url("/image/pwa-v2/tab-bar-item-home.svg");}
.footer-icon-image.icon-schedule{background-image: url("/image/pwa-v2/tab-bar-item-schedule.svg");}
/*.footer-icon-image.icon-mag{background-image: url("/image/pwa-v2/tab-bar-item-peymanmag.svg");}*/
.footer-icon-image.icon-mag{background-image: url("/image/pwa-v2/tab-bar-item-peymanmag-inactive.svg?v.1.0.1");}
/*.footer-icon-image.icon-message{background-image: url("/image/pwa-v2/tab-bar-item-message.svg");}*/
.footer-icon-image.icon-message{background-image: url("/image/pwa-v2/tab-bar-item-message-inactive.svg?v.1.0.1");}
.footer-icon-image.icon-profile{background-image: url("/image/pwa-v2/tab-bar-item-profile.svg");}

.footer-icon-title{
    white-space: nowrap;
    font-size: 85%;
}

.mobile-size{
    max-width: 600px;
    margin: 0 auto;
}

#main-header{
    background-color: #474747;
    padding-top: 10px;
    padding-bottom: 10px;
}

#main-header .logo{
    width: 50px;
}

#header-slogan{
    font-weight: 600;
    font-size: 80%;
    color: #ffffff;
}

#page-title{
    font-weight: 600;
    color: #FFD700;
}

#diet-level-selector-v2{
    padding: 25px 15px;
    position: sticky;
    top: 70px;
    background: #f5f7fa;
    border-bottom: 1px solid #d6d6d6;
    z-index: 15;
}

#diet-level-selector-v2 .separator-line {
    background-color: #4CAF50;
    flex: 1;
    height: 3px;
}

#diet-level-selector-v2 .separator-line.inactive-line {
    background-color: #5B5B5B;
}

#diet-level-selector-v2 > a {
    background-color: #5B5B5B;
    padding: 3px;
    border-radius: 50%;
}

#diet-level-selector-v2 > a.active {
    background-color: #424242;
}

#diet-level-selector-v2 > a .get-diet-progress{
    border-radius: 50%;
    background-color: #5B5B5B;
    width: 20px;
    height: 20px;
    border: 1px solid white;
    display: grid;
    align-items: center;
    justify-content: center;
    font-size: 90%;
    position: relative;
}

#diet-level-selector-v2 > a .get-diet-progress .step-no{
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#diet-level-selector-v2 > a .get-diet-progress .step-no svg {
    width: 80%;
    height: fit-content;
}

#diet-level-selector-v2 > a .get-diet-progress .step-title{
    color: #5B5B5B;
    position: absolute;
    top: 100%;
    margin-top: 5px;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    word-spacing: -2px;
    font-weight: 600;
}

#diet-level-selector-v2 > a.active .get-diet-progress .step-title{
    color: #424242;
}

#diet-level-selector-v2 > a.active .get-diet-progress{
    background-color: #424242;
}

#diet-level-selector-v2 > a.completed{
    background-color: var(--btn-primary);
    cursor: pointer;
}

#diet-level-selector-v2 > a.completed .get-diet-progress{
    background-color: var(--btn-primary);
}

#diet-level-selector-v2 > a.completed .get-diet-progress .step-title{
    color: var(--btn-primary);
}

.floating-button{
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
}

.floating-button-payment{
    left: 0;
    right: 0;
    transform: none;
    position: sticky;
    bottom: 90px;
    padding: 20px 0;
    margin-bottom: 0 !important;
}

.pwa-v2-form-control{
    width: 80%;
    max-width: 250px;
    margin: 0 auto;
    color: var(--form-text);
    border: 1px solid var(--border-color);
    background: 1px solid var(--card-bg);
    padding: 10px;
    border-radius: 30px;
    text-align: center;
    font-size: 80%;
}

.part-section{
    background-color: white;
    border-radius: 15px;
    padding: 10px;
}
.basic-title {
    font-size: 140%;
    font-weight: 600;
    color: var(--form-text);
}
.basic-notice {
    font-size: 70%;
    color: var(--form-text);
}
.basic-input{
    width: 180px;
    height: 40px;
    margin: 10px auto;
    border: 1px solid #828282;
    border-radius: 50px;
    overflow: hidden;
}
.basic-input input {
    background: transparent;
    border: 0;
    padding: 5px;
    width: 50%;
    text-align: center;
    color: #828282;
}
.basic-input input:focus-visible {
    outline: none;
}
.basic-input label {
    background: #828282;
    color: #ffffff;
    width: 50%;
    text-align: center;
    font-size: 75%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 48px;
}
.basic-select{
    width: 180px;
    height: 40px;
    margin: 10px auto;
}
.basic-select select {
    width: 30%;
    border: 1px solid #828282;
    border-radius: 50px;
    background: white;
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align: center;
}
.basic-check{
    padding: 5px;
}
.pwa-checkbox{
    position: relative;
    width: 130px;
    height: 25px;
    margin: 0 5px;
}

.pwa-checkbox-line{
    width: 35px;
    height: 20px;
    background: #e9e9e9;
    border-radius: 10px;
    position: absolute;
    left: 0;
}

.pwa-checkbox-circle{
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid darkgrey;
    position: absolute;
    top: -1px;
    left: -1px;
    transition: all linear 0.1s;
}

.pwa-checkbox-circle.active {
    left: 15px;
    border-color: var(--btn-primary);
}

.pwa-checkbox-line.active {
    background: var(--btn-primary);
}

.pwa-checkbox-text-positive{
    position: absolute;
    left: 45px;
}

.pwa-checkbox-text-negative{
    position: absolute;
    left: 45px;
    opacity: 0.5;
}

.btn-next-step{
    background-color: var(--btn-primary);
    border: 0;
}

/* پایه Toast */
.custom-toast {
    min-width: 250px;
    max-width: 350px;
    pointer-events: auto;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    opacity: 0; /* ابتدا مخفی است برای افکت fade-in */
    transform: translateY(10px); /* کمی پایین‌تر برای ورود */
    transition: opacity .25s ease, transform .25s ease;
}

/* وقتی نمایش داده شود */
.custom-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* margin helper برای جایگذاری بهتر بر اساس موقعیت */
.toast-position-top { margin-top: 1rem; }
.toast-position-center { margin-top: 1rem; }
.toast-position-bottom { margin-bottom: 1rem; }

/* مخفی کردن با انیمیشن (Bootstrap-like) */
.toast {
    opacity: 0;
    transition: opacity .15s linear;
}
.toast.show {
    opacity: 1;
}

.custom-toast button.close {
    color: white;
    position: absolute;
    left: 3px;
    top: 3px;
    width: 15px;
    height: 15px;
    display: flex
;
    align-items: center;
    justify-content: center;
}

.custom-radio, .custom-checkbox {
    background: #E6E6E6;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    position: relative;
    transition: all ease-in-out 0.2s;
    margin-right: -10px;
}

.custom-radio:after, .custom-checkbox:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    transform: translate(-50%, -50%);
    display: block;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all cubic-bezier(1, 0.02, 0.31, 1.34) 0.3s;
}


.custom-radio.checked, .custom-checkbox.checked {
    background: #4CAF50;
}

.custom-radio.checked:after, .custom-checkbox.checked:after {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' aria-label='check'> <polyline points='4,12 10,18 20,6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/> </svg>");
}

.custom-radio {
    border-radius: 50%;
}
.custom-checkbox {
    border-radius: 4px;
}

.visual-checkbox {
    display: flex;
    padding: 0;
}

.visual-checkbox > div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45%;
    padding: 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.visual-checkbox > div.selected{
    background: #474747;
    color: white;
    width: 55%;
}

.visual-checkbox > div:before{
    content:"\f00c";
    display:inline-block;font:normal normal normal 14px/1 FontAwesome;
    color: white;
    margin-left: 5px;
    transition: all 0.5s ease;
    width: 0;
    overflow: hidden;
}

.visual-checkbox > div.selected:before{
    width: 14px;
}

.bottom-gap {
    height: 80px
}



@media (min-width: 768px) {
    /* بزرگتر از موبایل */
    .full-page-content{
        height: calc(100vh - 180px);
    }
    #main-header .logo{
        width: 70px;
    }
    .get-diet-progress {
        width: 30px;
        height: 30px;
        font-size: 130%;
    }
    #diet-level-selector-v2{
        top: 90px;
    }
    #diet-level-selector-v2 .separator-line {
        height: 5px;
    }
    #diet-level-selector-v2 > a .get-diet-progress .step-title{
        font-size: 12px;
    }

}

/* Dark Theme Colors */
html[data-theme='dark'] .landing-title{
    color: #cbcbcb;
}
html[data-theme='dark'] .feature-list {
    color: #cbcbcb;
}
html[data-theme='dark'] #theme-toggle {
    background: #f0f0f0;
}
html[data-theme='dark'] #pwa-v2-footer .container {
    background: black;
    border-top: 1px solid #464646;
}
html[data-theme='dark'] .pwa-v2-footer-icon{
    color: #bdbdbd !important;
}
html[data-theme='dark'] .footer-icon-image.icon-index{background-image: url("/image/pwa-v2/tab-bar-item-home-dark.svg");}
html[data-theme='dark'] .footer-icon-image.icon-schedule{background-image: url("/image/pwa-v2/tab-bar-item-schedule-dark.svg");}
html[data-theme='dark'] .footer-icon-image.icon-mag{background-image: url("/image/pwa-v2/tab-bar-item-peymanmag-dark.svg");}
html[data-theme='dark'] .footer-icon-image.icon-message{background-image: url("/image/pwa-v2/tab-bar-item-message-dark.svg");}
html[data-theme='dark'] .footer-icon-image.icon-profile{background-image: url("/image/pwa-v2/tab-bar-item-profile-dark.svg");}