/* ============================================================
   User Settings - HelloTalk Style
   Colored Icon List + Modern Social Network Look
   Version: 4.0.0
   ============================================================ */

/* ---------- ریست کامل داخل .us-app ---------- */
.us-app,
.us-app *,
.us-app *::before,
.us-app *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    list-style: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Vazirmatn', 'IRANSans', Tahoma, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: inherit !important;
    border-radius: 0 !important;
    float: none !important;
    position: static !important;
    transform: none !important;
    transition: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ---------- متغیرها ---------- */
.us-app {
    --us-bg: #ffffff;
    --us-bg-soft: #f8f9fd;
    --us-bg-hover: #fafafa;
    --us-border: #eeeeee;
    --us-border-strong: #e5e5e5;
    --us-text: #1c1c1e;
    --us-text-muted: #8e8e93;
    --us-primary: #6C5CE7;
    --us-primary-hover: #5A4BD1;
    --us-danger: #ef4444;
    --us-success-bg: #e7f6ec;
    --us-success-text: #1a7f37;
    --us-error-bg: #ffe4e4;
    --us-error-text: #ef4444;

    display: block !important;
    max-width: 480px !important;
    margin: 20px auto !important;
    padding: 0 !important;
    background: var(--us-bg) !important;
    color: var(--us-text) !important;
    direction: rtl !important;
    position: relative !important;
    border-radius: 16px !important;
    border: 1px solid var(--us-border) !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ---------- اسکرین‌ها ---------- */
.us-app .us-screen {
    display: none !important;
    padding: 0 0 16px 0 !important;
    animation: us-fade 0.22s ease !important;
}

.us-app .us-screen--active {
    display: block !important;
}

@keyframes us-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- هدر ---------- */
.us-app .us-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 20px !important;
    background: var(--us-bg) !important;
    border-bottom: 1px solid var(--us-border) !important;
    position: relative !important;
    min-height: 52px !important;
}

.us-app .us-header--with-back {
    justify-content: flex-start !important;
}

.us-app .us-header__title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--us-text) !important;
    text-align: center !important;
    flex: 1 !important;
}

.us-app .us-header--with-back .us-header__title {
    text-align: right !important;
    padding-right: 8px !important;
}

.us-app .us-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border-radius: 50% !important;
    font-size: 26px !important;
    color: var(--us-text) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background 0.15s !important;
    transform: rotate(180deg) !important;
    flex-shrink: 0 !important;
}

.us-app .us-back:hover {
    background: #f0f0f0 !important;
}

/* ============================================================
   کارت پروفایل - HelloTalk Style
   ============================================================ */
.us-app .us-profile-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 16px !important;
    padding: 20px !important;
    background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%) !important;
    border-radius: 18px !important;
    border-bottom: none !important;
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.18) !important;
    position: relative !important;
    overflow: hidden !important;
}

.us-app .us-profile-card::before {
    content: '' !important;
    position: absolute !important;
    top: -30px !important;
    left: -30px !important;
    width: 100px !important;
    height: 100px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
    display: block !important;
}

.us-app .us-profile-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: -40px !important;
    right: -20px !important;
    width: 120px !important;
    height: 120px !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 50% !important;
    display: block !important;
}

.us-app .us-avatar {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.2) !important;
    border: 3px solid rgba(255,255,255,0.5) !important;
    position: relative !important;
    z-index: 2 !important;
}

.us-app .us-avatar__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
}

.us-app .us-avatar__letter {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    user-select: none !important;
}

.us-app .us-profile-card__avatar {
    flex-shrink: 0 !important;
    line-height: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.us-app .us-profile-card__info {
    flex: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.us-app .us-profile-card__name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 4px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.us-app .us-profile-card__username {
    font-size: 13px !important;
    color: rgba(255,255,255,0.85) !important;
    direction: ltr !important;
    text-align: right !important;
}

/* ============================================================
   منو - HelloTalk Style (کارت‌های گرد با آیکون رنگی)
   ============================================================ */

.us-app .us-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 16px 16px !important;
    margin: 0 !important;
    background: var(--us-bg) !important;
    border-top: none !important;
}

.us-app .us-menu__item {
    position: relative !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;

    box-sizing: border-box !important;

    padding: 8px 14px 8px 40px !important;

    margin: 0 !important;

    background: #ffffff !important;

    border: 1px solid #f0f0f0 !important;
    border-radius: 14px !important;

    overflow: hidden !important;

    direction: rtl !important;

    cursor: pointer !important;
    font-family: inherit !important;
    text-align: right !important;

    box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease !important;
}

.us-app .us-menu__item::before {
    display: none !important;
}

.us-app .us-menu__item:hover,
.us-app .us-menu__item:focus {
    background: #fafafa !important;
    border-color: #ebebeb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
    color: var(--us-text) !important;
}

/* ---------- آیکون ---------- */
.us-app .us-menu__icon {
    order: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;

    margin: 0 0 0 12px !important;

    padding: 0 !important;

    border-radius: 12px !important;

    box-sizing: border-box !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;

    font-size: 18px !important;

    animation: softIconFloat 3s ease-in-out infinite !important;
    will-change: transform !important;
}

.us-app .us-menu__item:hover .us-menu__icon {
    animation-play-state: paused !important;
    transform: scale(1.08) !important;
}

@keyframes softIconFloat {
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-2px) scale(1.03); }
    100% { transform: translateY(0) scale(1); }
}

/* ---------- متن ---------- */
.us-app .us-menu__label {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    text-align: right !important;
    direction: rtl !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    color: #1c1c1e !important;
}

/* ---------- فلش سمت چپ ---------- */
.us-app .us-menu__item::after {
    content: "‹" !important;

    position: absolute !important;

    left: 14px !important;
    right: auto !important;

    top: 50% !important;

    width: 14px !important;
    height: 22px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #c7c7cc !important;

    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1 !important;

    direction: ltr !important;
    pointer-events: none !important;
}

.us-app .us-menu__arrow {
    display: none !important;
}

/* ============================================================
   رنگ آیکون‌ها - HelloTalk Palette
   ============================================================ */

/* ۱ - حساب کاربری - بنفش */
.us-app .us-menu__item:nth-child(1) .us-menu__icon {
    background: linear-gradient(135deg, #f0ddff 0%, #e6ccff 100%) !important;
    color: #a855f7 !important;
}

/* ۲ - بررسی آگهی - یاسی */
.us-app .us-menu__item:nth-child(2) .us-menu__icon {
    background: linear-gradient(135deg, #eee7ff 0%, #ddd0ff 100%) !important;
    color: #8b5cf6 !important;
}

/* ۳ - ذخیره‌ها - بنفش آبی */
.us-app .us-menu__item:nth-child(3) .us-menu__icon {
    background: linear-gradient(135deg, #e9e9ff 0%, #d6d6ff 100%) !important;
    color: #6366f1 !important;
}

/* ۴ - نوتیفیکیشن - آبی */
.us-app .us-menu__item:nth-child(4) .us-menu__icon {
    background: linear-gradient(135deg, #e2efff 0%, #cce0ff 100%) !important;
    color: #3b82f6 !important;
}

/* ۵ - دستگاه‌های فعال - آبی روشن */
.us-app .us-menu__item:nth-child(5) .us-menu__icon {
    background: linear-gradient(135deg, #e3f2ff 0%, #cce8ff 100%) !important;
    color: #2196e8 !important;
}

/* ۶ - تنظیمات - آبی نفتی */
.us-app .us-menu__item:nth-child(6) .us-menu__icon {
    background: linear-gradient(135deg, #def7f7 0%, #c2efef 100%) !important;
    color: #10b9b9 !important;
}

/* ۷ - قوانین - سبز فیروزه‌ای */
.us-app .us-menu__item:nth-child(7) .us-menu__icon {
    background: linear-gradient(135deg, #def8f3 0%, #c2f0e6 100%) !important;
    color: #14b8a6 !important;
}

/* ۸ - خروج - قرمز */
.us-app .us-menu__item:nth-child(8) .us-menu__icon {
    background: linear-gradient(135deg, #ffe4e4 0%, #ffd0d0 100%) !important;
    color: #ef4444 !important;
}

.us-app .us-menu__item:nth-child(8) .us-menu__label {
    color: #ef4444 !important;
}

/* ============================================================
   فرم
   ============================================================ */

.us-app .us-form {
    display: block !important;
    padding: 20px !important;
    background: var(--us-bg) !important;
}

.us-app .us-field {
    display: block !important;
    margin-bottom: 16px !important;
}

.us-app .us-field__label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--us-text-muted) !important;
    margin-bottom: 6px !important;
}

.us-app .us-field__input {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    background: var(--us-bg-soft) !important;
    border: 1px solid var(--us-border) !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    color: var(--us-text) !important;
    transition: border-color 0.15s, background 0.15s !important;
    font-family: inherit !important;
}

.us-app .us-field__input:focus {
    outline: none !important;
    border-color: var(--us-primary) !important;
    background: var(--us-bg) !important;
}

.us-app .us-field__input:disabled {
    background: #f0f0f0 !important;
    color: var(--us-text-muted) !important;
    cursor: not-allowed !important;
}

/* ============================================================
   دکمه
   ============================================================ */

.us-app .us-btn {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: opacity 0.15s, background 0.15s !important;
    font-family: inherit !important;
    text-align: center !important;
}

.us-app .us-btn--primary {
    background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%) !important;
    color: #ffffff !important;
    margin-top: 8px !important;
    box-shadow: 0 4px 14px rgba(108, 92, 231, 0.3) !important;
}

.us-app .us-btn--primary:hover {
    background: linear-gradient(135deg, #5A4BD1 0%, #6C5CE7 100%) !important;
    color: #ffffff !important;
}

.us-app .us-btn--primary:active {
    opacity: 0.85 !important;
}

/* ============================================================
   تب‌ها
   ============================================================ */

.us-app .us-tabs {
    display: flex !important;
    overflow-x: auto !important;
    background: var(--us-bg) !important;
    border-bottom: 1px solid var(--us-border) !important;
    scrollbar-width: none !important;
    padding: 0 16px !important;
    gap: 4px !important;
}

.us-app .us-tabs::-webkit-scrollbar {
    display: none !important;
}

.us-app .us-tab {
    flex: 0 0 auto !important;
    padding: 13px 16px !important;
    background: transparent !important;
    border-bottom: 2px solid transparent !important;
    color: var(--us-text-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: color 0.15s, border-color 0.15s !important;
    font-family: inherit !important;
}

.us-app .us-tab:hover {
    color: var(--us-text) !important;
}

.us-app .us-tab--active {
    color: var(--us-primary) !important;
    border-bottom-color: var(--us-primary) !important;
    font-weight: 700 !important;
}

.us-app .us-tab-pane {
    display: none !important;
}

.us-app .us-tab-pane--active {
    display: block !important;
}

/* ============================================================
   لیست آگهی‌ها
   ============================================================ */

.us-app .us-ads-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px !important;
}

.us-app .us-ads-item {
    display: block !important;
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.us-app .us-ads-item:hover {
    background: #fafafa !important;
    border-color: #ebebeb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    transform: translateY(-1px) !important;
}

.us-app .us-ads-item__link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    color: var(--us-text) !important;
    font-size: 13px !important;
}

.us-app .us-ads-item__title {
    flex: 1 !important;
    font-weight: 500 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #1c1c1e !important;
}

.us-app .us-ads-item__date {
    color: #8e8e93 !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   پیام‌ها
   ============================================================ */

.us-app .us-alert {
    display: block !important;
    padding: 12px 16px !important;
    margin: 12px 16px 0 !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.us-app .us-alert--success {
    background: var(--us-success-bg) !important;
    color: var(--us-success-text) !important;
}

.us-app .us-alert--error {
    background: var(--us-error-bg) !important;
    color: var(--us-error-text) !important;
}

/* ============================================================
   Placeholder / Empty
   ============================================================ */

.us-app .us-empty,
.us-app .us-placeholder {
    display: block !important;
    padding: 40px 20px !important;
    text-align: center !important;
    color: var(--us-text-muted) !important;
    font-size: 13px !important;
}

.us-app .us-placeholder code {
    background: var(--us-bg-soft) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    color: var(--us-text) !important;
}

.us-app .us-notice {
    display: block !important;
    padding: 24px 20px !important;
    text-align: center !important;
    color: var(--us-text) !important;
    font-size: 14px !important;
    background: var(--us-bg) !important;
}

.us-app .us-notice a {
    color: var(--us-primary) !important;
    font-weight: 600 !important;
}

/* ============================================================
   Sessions - استایل شورت‌کد [active_sessions]
   ============================================================ */

.us-app .us-sessions {
    padding: 16px !important;
    background: var(--us-bg) !important;
    direction: rtl !important;
    font-size: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.us-app .us-sessions pre,
.us-app .us-sessions code,
.us-app .us-sessions > script {
    display: none !important;
}

.us-app .us-sessions > div:not(.us-placeholder):not(.us-empty),
.us-app .us-sessions .pwa-device-card,
.us-app .us-sessions .device-card,
.us-app .us-sessions .session-card {
    display: block !important;
    position: relative !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.2s !important;
    direction: rtl !important;
    text-align: right !important;
    overflow: hidden !important;
}

.us-app .us-sessions > div:not(.us-placeholder):not(.us-empty):hover,
.us-app .us-sessions .pwa-device-card:hover,
.us-app .us-sessions .device-card:hover,
.us-app .us-sessions .session-card:hover {
    border-color: #ebebeb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    transform: translateY(-1px) !important;
}

.us-app .us-sessions h3,
.us-app .us-sessions h4,
.us-app .us-sessions strong,
.us-app .us-sessions .device-name,
.us-app .us-sessions .pwa-device-name {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1c1c1e !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.5 !important;
}

.us-app .us-sessions p,
.us-app .us-sessions small,
.us-app .us-sessions span,
.us-app .us-sessions .meta,
.us-app .us-sessions .device-meta {
    display: block !important;
    font-size: 12px !important;
    color: #8e8e93 !important;
    margin: 4px 0 0 0 !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
}

.us-app .us-sessions button,
.us-app .us-sessions .pwa-delete-session,
.us-app .us-sessions .delete-session,
.us-app .us-sessions a.button,
.us-app .us-sessions .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    margin-top: 10px !important;
    background: #ffe4e4 !important;
    border: 1px solid #ffd0d0 !important;
    border-radius: 10px !important;
    color: #ef4444 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s, transform 0.15s !important;
    font-family: inherit !important;
    text-decoration: none !important;
    width: auto !important;
}

.us-app .us-sessions button:hover,
.us-app .us-sessions .pwa-delete-session:hover,
.us-app .us-sessions .delete-session:hover,
.us-app .us-sessions a.button:hover,
.us-app .us-sessions .button:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.03) !important;
}

.us-app .us-sessions .current-device,
.us-app .us-sessions .current,
.us-app .us-sessions .badge {
    display: inline-block !important;
    padding: 4px 10px !important;
    background: #def8f3 !important;
    color: #14b8a6 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    margin-right: 8px !important;
    width: auto !important;
}

.us-app .us-sessions .no-sessions,
.us-app .us-sessions .empty {
    display: block !important;
    padding: 40px 20px !important;
    text-align: center !important;
    color: #8e8e93 !important;
    font-size: 13px !important;
}

.us-app .us-sessions svg,
.us-app .us-sessions .device-icon {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
}

/* ============================================================
   موبایل
   ============================================================ */

@media (max-width: 600px) {
    .us-app {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        min-height: 100vh !important;
        background: var(--us-bg-soft) !important;
    }
    .us-app .us-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    .us-app .us-menu__item {
        background: #ffffff !important;
    }
    .us-app .us-profile-card {
        margin: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .us-app .us-menu__icon {
        animation: none !important;
    }
}

/* ============================================================
   Terms - Simple Iframe
   ============================================================ */

.us-app .us-screen[data-screen="terms"] {
    padding: 0 !important;
    display: none !important;
}

.us-app .us-screen[data-screen="terms"].us-screen--active {
    display: block !important;
}

.us-app .us-screen[data-screen="terms"] .us-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #fff !important;
    border-bottom: 1px solid #eeeeee !important;
}

.us-app #usTermsIframe {
    display: block !important;
    width: 100% !important;
    height: calc(100vh - 56px) !important;
    min-height: 500px !important;
    border: 0 !important;
    background: #ffffff !important;
}
/* ============================================================
   Settings Options - گزینه‌های صفحه تنظیمات
   ============================================================ */

.us-app .us-settings-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 16px !important;
    direction: rtl !important;
}

.us-app .us-settings-option {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 16px !important;
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
    cursor: pointer !important;
    text-align: right !important;
    font-family: inherit !important;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
}

.us-app .us-settings-option:hover {
    background: #fafafa !important;
    border-color: #ebebeb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    transform: translateY(-1px) !important;
}

.us-app .us-settings-option__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    background: linear-gradient(135deg, #f0ddff 0%, #e6ccff 100%) !important;
    border-radius: 12px !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

.us-app .us-settings-option--dark-mode .us-settings-option__icon {
    background: linear-gradient(135deg, #e9e9ff 0%, #d6d6ff 100%) !important;
}

.us-app .us-settings-option__content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.us-app .us-settings-option__title {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1c1e !important;
    line-height: 1.4 !important;
}

.us-app .us-settings-option__desc {
    display: block !important;
    font-size: 12px !important;
    color: #8e8e93 !important;
    line-height: 1.5 !important;
}

.us-app .us-settings-option__arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: #c7c7cc !important;
    line-height: 1 !important;
    font-family: Arial, sans-serif !important;
    flex-shrink: 0 !important;
}

/* استایل شورت‌کد dark_mode_toggle داخل گزینه */
.us-app .us-settings-option--dark-mode .us-settings-option__content > * {
    display: block !important;
    width: 100% !important;
}

/* صفحه Preferred Cities */
.us-app .us-preferred-cities-container {
    display: block !important;
    padding: 16px !important;
    background: #ffffff !important;
    direction: rtl !important;
    min-height: 200px !important;
}

.us-app .us-preferred-cities-container .donyar-preferred-cities {
    width: 100% !important;
}
/* ============================================================
   فرم JetEngine مخفی (فقط برای داده‌ها)
   ============================================================ */

.us-app .us-hidden-jetform {
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.us-app .us-hidden-jetform form,
.us-app .us-hidden-jetform .jet-form {
    display: block !important;
    visibility: hidden !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ============================================================
   Preferred Cities - HelloTalk Style
   ============================================================ */

.us-app .us-preferred-cities-container {
    display: block !important;
    padding: 16px !important;
    background: #ffffff !important;
    direction: rtl !important;
    min-height: 400px !important;
}

.us-app .donyar-preferred-cities {
    width: 100% !important;
    direction: rtl !important;
    font-family: inherit !important;
}

/* ---------- Search ---------- */
.us-app .donyar-preferred-search {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #e4e4e7 !important;
    background: #fafafa !important;
    border-radius: 14px !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
    outline: none !important;
    transition: .2s ease !important;
    margin-bottom: 14px !important;
    color: #1c1c1e !important;
    font-family: inherit !important;
}

.us-app .donyar-preferred-search:focus {
    border-color: #c7c7cc !important;
    background: #fff !important;
}

/* ---------- Province Box ---------- */
.us-app .donyar-preferred-province {
    border: 1px solid #e8e8eb !important;
    border-radius: 16px !important;
    background: #fff !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    display: block !important;
}

/* ---------- Province Header ---------- */
.us-app .donyar-preferred-province-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background .2s ease !important;
    background: #fff !important;
}

.us-app .donyar-preferred-province-head:hover {
    background: #fafafa !important;
}

/* ---------- Province Info ---------- */
.us-app .donyar-preferred-province-info {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-width: 0 !important;
}

/* ---------- Province Avatar ---------- */
.us-app .donyar-preferred-province-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.us-app .donyar-preferred-province-avatar-inner {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #333 !important;
}

/* ---------- Province Text ---------- */
.us-app .donyar-preferred-province-text {
    min-width: 0 !important;
}

.us-app .donyar-preferred-province-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #222 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.us-app .donyar-preferred-province-count {
    font-size: 11px !important;
    color: #8a8a8f !important;
    margin-top: 2px !important;
}

/* ---------- Arrow ---------- */
.us-app .donyar-preferred-arrow {
    width: 9px !important;
    height: 9px !important;
    border-left: 2px solid #777 !important;
    border-bottom: 2px solid #777 !important;
    transform: rotate(-45deg) !important;
    transition: transform .22s ease !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

.us-app .donyar-preferred-province.open .donyar-preferred-arrow {
    transform: rotate(135deg) !important;
}

/* ---------- City List ---------- */
.us-app .donyar-preferred-cities-list {
    display: none !important;
    border-top: 1px solid #f0f0f2 !important;
    background: #fcfcfc !important;
}

.us-app .donyar-preferred-province.open .donyar-preferred-cities-list {
    display: block !important;
}

/* ---------- City Row ---------- */
.us-app .donyar-preferred-city {
    min-height: 53px !important;
    padding: 0 15px 0 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #f1f1f3 !important;
    background: transparent !important;
}

.us-app .donyar-preferred-city:last-child {
    border-bottom: 0 !important;
}

/* ---------- City Info ---------- */
.us-app .donyar-preferred-city-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

/* ---------- City Avatar ---------- */
.us-app .donyar-preferred-city-avatar {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    border-radius: 50% !important;
    background: #f1f1f3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #666 !important;
    flex-shrink: 0 !important;
}

/* ---------- City Name ---------- */
.us-app .donyar-preferred-city-name {
    font-size: 14px !important;
    color: #333 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ============================================================
   Instagram Style Switch
   ============================================================ */

.us-app .dpc-switch {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 44px !important;
    height: 25px !important;
    flex: 0 0 44px !important;
    cursor: pointer !important;
}

.us-app .dpc-slider {
    position: relative !important;
    display: block !important;
    width: 44px !important;
    height: 25px !important;
    border-radius: 999px !important;
    background: #d9d9de !important;
    transition: .22s ease !important;
}

.us-app .dpc-slider::after {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    width: 19px !important;
    height: 19px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.18) !important;
    transition: .22s ease !important;
}

.us-app .dpc-switch.is-on .dpc-slider {
    background: #111 !important;
}

.us-app .dpc-switch.is-on .dpc-slider::after {
    right: 22px !important;
}

/* ---------- Save Status ---------- */
.us-app .donyar-preferred-save-status {
    display: none !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #888 !important;
    padding: 10px 0 2px !important;
}

.us-app .donyar-preferred-save-status.show {
    display: block !important;
}

.us-app .donyar-preferred-save-status.success {
    color: #36a269 !important;
}

/* ---------- Message ---------- */
.us-app .donyar-preferred-message {
    text-align: center !important;
    padding: 25px 10px !important;
    color: #888 !important;
    font-size: 13px !important;
}

/* ---------- فرم JetEngine مخفی ---------- */
.us-app .us-hidden-jetform {
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* ============================================================
   Instagram/WhatsApp Style Loader
   ============================================================ */

.us-app .us-loader {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 40px 20px !important;
    min-height: 160px !important;
    width: 100% !important;
    text-align: center !important;
    direction: rtl !important;
}

.us-app .us-loader__spinner {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    border: 2.5px solid rgba(108, 92, 231, 0.15) !important;
    border-top-color: #6C5CE7 !important;
    border-radius: 50% !important;
    animation: us-spinner-rotate 0.7s linear infinite !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

@keyframes us-spinner-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.us-app .us-loader__text {
    display: block !important;
    font-size: 12.5px !important;
    color: #8e8e93 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.2px !important;
}

/* اگه داخل صفحه‌های دیگه هم خواستی، این کلاس رو بذار */
.us-app .us-page-loader {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 200px !important;
    width: 100% !important;
    padding: 40px 20px !important;
}

/* انیمیشن fade-in */
.us-app .us-loader--fade {
    animation: us-loader-fade-in 0.2s ease !important;
}

@keyframes us-loader-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* وقتی داخل اسکرین با پس‌زمینه سفید باشه */
.us-app .us-screen .us-loader {
    background: transparent !important;
}