:root {
    --ios-blue: #007aff;
    --ios-blue-pressed: #0062cc;
    --ios-bg: rgba(255, 255, 255, 0.72);
    --ios-surface: rgba(255, 255, 255, 0.85);
    --ios-text-primary: #1c1c1e;
    --ios-text-secondary: #6e6e73;
    --ios-gray-fill: rgba(120, 120, 128, 0.12);
    --ios-gray-fill-strong: rgba(120, 120, 128, 0.20);
    --ios-separator: rgba(60, 60, 67, 0.18);
}
.recent-cities-wrapper {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.recent-cities-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #6c757d;
}
.btn-clear-history {
    font-size: 0.8rem;
    color: #dc3545;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.btn-clear-history:hover {
    text-decoration: underline;
}
.recent-cities-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.recent-city-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    gap: 4px;
    cursor: pointer;
}
.recent-city-item:hover {
    background: #e2e6ea;
    border-color: #ced4da;
}
.recent-city-link {
    color: #333;
    text-decoration: none;
    margin-left: 8px;
}
.btn-delete-item {
    color: #c50000;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    text-decoration: none;
    vertical-align: middle;
}
.btn-delete-item:hover {
    color: #dc3545;
}
[dir="ltr"] .page-heading-flex .sort_div{
    margin-left: auto;
    margin-right: 0;
}



.btn-ios {
    --ios-blue: #007aff;
    --ios-blue-hover: #0a84ff;
    --ios-blue-active: #0062cc;

    background: linear-gradient(180deg, #0a84ff 0%, #007aff 100%);
    color: #fff !important;
    border: none;
    border-radius: 16px;
    padding: 0.6rem 1.4rem;
    font-weight: 500;
    letter-spacing: 0.2px;

    box-shadow:
            0 6px 20px rgba(0, 122, 255, 0.25),
            inset 0 1px 0 rgba(255,255,255,0.25) !important;

    transition: all 0.2s ease;
}

/* Hover */
.btn-ios:hover {
    /*background: linear-gradient(180deg, #2b95ff 0%, #0a84ff 100%);*/
    box-shadow:
            0 8px 24px rgba(0, 122, 255, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.3) !important;
    transform: translateY(-1px) !important;
}

/* Active */
.btn-ios:active {
    background: linear-gradient(180deg, #006edc 0%, #0062cc 100%) !important;
    box-shadow:
            0 4px 12px rgba(0, 122, 255, 0.25),
            inset 0 2px 6px rgba(0,0,0,0.2) !important;
    transform: translateY(0) !important;
}

/* Focus (accessible) */
.btn-ios:focus {
    box-shadow:
            0 0 0 4px rgba(0, 122, 255, 0.25);
}

/* Disabled */
.btn-ios:disabled,
.btn-ios.disabled {
    background: #c7c7cc;
    box-shadow: none;
    opacity: 0.7;
}

/* iOS Green Button */

.btn-ios-green {
    --ios-green: #34c759;
    --ios-green-hover: #30b653;
    --ios-green-active: #28a745;

    background: linear-gradient(180deg, #4cd964 0%, #34c759 100%);
    color: #fff !important;
    border: none;
    border-radius: 16px;
    padding: 0.6rem 1.4rem;
    font-weight: 500;
    letter-spacing: 0.2px;

    box-shadow:
            0 6px 20px rgba(52, 199, 89, 0.25),
            inset 0 1px 0 rgba(255,255,255,0.25);

    transition: all 0.2s ease;
}

/* Hover */
.btn-ios-green:hover {
    background: linear-gradient(180deg, #5ee07a 0%, #30b653 100%);
    box-shadow:
            0 8px 24px rgba(52, 199, 89, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

/* Active */
.btn-ios-green:active {
    background: linear-gradient(180deg, #2ebd52 0%, #28a745 100%);
    box-shadow:
            0 4px 12px rgba(52, 199, 89, 0.25),
            inset 0 2px 6px rgba(0,0,0,0.2);
    transform: translateY(0);
}

/* Focus */
.btn-ios-green:focus {
    box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.25);
}

/* Disabled */
.btn-ios-green:disabled,
.btn-ios-green.disabled {
    background: #c7c7cc;
    box-shadow: none;
    opacity: 0.7;
}

/* iOS Dark Mode Primary Button */

.btn-ios-dark {
    --ios-dark-blue: #0a84ff;
    --ios-dark-blue-hover: #3399ff;
    --ios-dark-blue-active: #0066cc;

    background: linear-gradient(180deg, #1c1c1e 0%, #2c2c2e 100%);
    color: #0a84ff !important;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 0.6rem 1.4rem;
    font-weight: 500;
    letter-spacing: 0.2px;

    box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.05),
            0 6px 20px rgba(0,0,0,0.5);

    transition: all 0.2s ease;
}

/* Hover */
.btn-ios-dark:hover {
    background: linear-gradient(180deg, #2c2c2e 0%, #3a3a3c 100%);
    color: #3399ff !important;
    transform: translateY(-1px);
}

/* Active */
.btn-ios-dark:active {
    background: linear-gradient(180deg, #1a1a1c 0%, #2a2a2c 100%);
    color: #0066cc !important;
    box-shadow:
            inset 0 2px 6px rgba(0,0,0,0.6);
    transform: translateY(0);
}

/* Focus ring */
.btn-ios-dark:focus {
    box-shadow:
            0 0 0 4px rgba(10,132,255,0.3);
}

/* Disabled */
.btn-ios-dark:disabled,
.btn-ios-dark.disabled {
    background: #2c2c2e;
    color: #636366 !important;
    box-shadow: none;
    opacity: 0.6;
}
/* iOS Aurora Premium Button */

.btn-ios-aurora {
    background:
            radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.25), transparent 40%),
            linear-gradient(135deg, #5e5ce6 0%, #7d5fff 35%, #bf5af2 70%, #ff375f 100%);

    color: #ffffff !important;
    border: none;
    border-radius: 16px;
    padding: 0.65rem 1.6rem;
    font-weight: 600;
    letter-spacing: 0.3px;

    box-shadow:
            0 10px 30px rgba(125, 95, 255, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.35);

    backdrop-filter: saturate(140%);
    -webkit-backdrop-filter: saturate(140%);
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
}

/* Hover */
.btn-ios-aurora:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
            0 14px 40px rgba(125, 95, 255, 0.45),
            inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Active */
.btn-ios-aurora:active {
    transform: translateY(0) scale(0.98);
    box-shadow:
            0 6px 18px rgba(125, 95, 255, 0.35),
            inset 0 3px 8px rgba(0,0,0,0.3);
}

/* Focus */
.btn-ios-aurora:focus {
    box-shadow:
            0 0 0 4px rgba(191, 90, 242, 0.35);
}

/* Disabled */
.btn-ios-aurora:disabled,
.btn-ios-aurora.disabled {
    opacity: 0.6;
    box-shadow: none;
}


/* iOS Liquid Glass Button */

.btn-ios-glass {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 0.65rem 1.6rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #111 !important;

    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255,255,255,0.35);

    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);

    box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.6),
            inset 0 -1px 0 rgba(255,255,255,0.2),
            0 10px 30px rgba(0,0,0,0.15);

    transition: all .25s cubic-bezier(.4,0,.2,1);
}

/* Top light reflection */
.btn-ios-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
            180deg,
            rgba(255,255,255,0.7) 0%,
            rgba(255,255,255,0.25) 40%,
            rgba(255,255,255,0.05) 100%
    );
    pointer-events: none;
    mix-blend-mode: overlay;
}

.btn-ios-glass:hover {
    transform: translateY(-2px);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.7),
            0 14px 40px rgba(0,0,0,0.18);
}

.btn-ios-glass:active {
    transform: scale(0.98);
}


/* iOS Metallic Animated Button */

.btn-ios-metal {
    position: relative;
    overflow: hidden;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff !important;

    background: linear-gradient(
            135deg,
            #3a3a3c 0%,
            #2c2c2e 25%,
            #48484a 50%,
            #2c2c2e 75%,
            #3a3a3c 100%
    );

    /*border: 1px solid rgba(255,255,255,0.88);*/

    box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.06) !important;

    transition: all .3s ease;
}
/* Moving shine */
.btn-ios-metal::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
            120deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.4) 50%,
            rgba(255,255,255,0) 100%
    );
    transform: rotate(25deg);
    animation: metalShine 3s infinite;
}

@keyframes metalShine {
    0% { right: -75%; }
    100% { right: 125%; }
}

.btn-ios-interactive {
    --x: 50%;
    --y: 50%;

    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 0.6rem 1.4rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: #fff !important;

    background: linear-gradient(
            135deg,
            #2c2c2e 0%,
            #1c1c1e 100%
    );

    border: 1px solid rgba(255,255,255,0.08);

    box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.06);

    transition: all .2s ease;
}

.btn-ios-interactive::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    background: radial-gradient(
            160px circle at var(--x) var(--y),
            rgba(255,255,255,0.25),
            transparent 60%
    );

    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.btn-ios-interactive:hover::before {
    opacity: 1;
}

.btn-ios-interactive:hover {
    border-color: rgba(255,255,255,0.15);
}



.btn-light{
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #e5e5ea;
    --bs-btn-color: #1c1c1e;

    --bs-btn-hover-bg: rgba(0, 122, 255, 0.08);
    --bs-btn-hover-border-color: rgba(0, 122, 255, 0.25);

    --bs-btn-active-bg: rgba(0, 122, 255, 0.16);
    --bs-btn-active-border-color: rgba(0, 122, 255, 0.35);
    --bs-btn-active-color: #1c1c1e;

    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    transition: all .15s ease;
}
.btn:active,
.btn.active,
.show > .btn.dropdown-toggle {
    box-shadow: none;
    transform: scale(0.98);
}


.transition-hover { transition: transform 0.2s; }
.transition-hover:hover { transform: translateY(-2px); }

/* Custom Scrollbar for Notification */
.list-group-flush::-webkit-scrollbar {
    width: 5px;
}
.list-group-flush::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}

/* iOS Specific Styles */
.ios-modal {
    background: var(--ios-surface);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 28px;

    border: 1px solid rgba(255,255,255,0.35);

    box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.08),
            0 2px 8px rgba(0, 0, 0, 0.04);

    transition: transform 0.35s cubic-bezier(.36,.66,.04,1),
    opacity 0.25s ease;
}
.ios-input {
    background: var(--ios-gray-fill);
    border: 1px solid transparent;
    border-radius: 14px;
    height: 54px;
    padding: 0 16px;

    font-size: 17px;
    font-weight: 400;

    color: var(--ios-text-primary);

    transition:
            background 0.2s ease,
            box-shadow 0.2s ease,
            border-color 0.2s ease;
}

.ios-input::placeholder {
    color: var(--ios-text-secondary);
}

.ios-input:focus {
    outline: none;
    background: #fff;
    border-color: rgba(0, 122, 255, 0.4);

    box-shadow:
            0 0 0 4px rgba(0, 122, 255, 0.12);
}
.focus-ring:focus-within {
    border-radius: 18px;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.10);
}
.letter-spacing-lg {
    letter-spacing: 8px;
    font-weight: 500;
}

.ios-divider {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 13px;
    color: #8e8e93;
}

.ios-divider::before,
.ios-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(60,60,67,0.2);
}

.ios-divider:not(:empty)::before {
    margin-right: 12px;
}

.ios-divider:not(:empty)::after {
    margin-left: 12px;
}

.ios-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 10px;
    align-items: center;
}

.ios-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 15px;
    font-weight: 500;
    color: #007aff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.ios-link:active {
    opacity: 0.6;
}

.ios-check {
    font-size: 13px;
    color: #6e6e73;
}

.ios-check input {
    transform: scale(1.1);
    margin-top: 0.2rem;
}

.ios-check a {
    font-weight: 500;
    color: #007aff;
    text-decoration: none;
}

.ios-close {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 32px;
    height: 32px;

    border-radius: 50%;
    border: none;

    background: rgba(120,120,128,0.12);
    backdrop-filter: blur(10px);

    font-size: 14px;
    color: #1c1c1e;

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

    transition: background 0.2s ease;
}

.ios-close:active {
    background: rgba(120,120,128,0.25);
}

.ios-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(120,120,128,0.12);
    backdrop-filter: blur(10px);
    color: #1c1c1e;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 10;
}
.ios-close:hover { background: rgba(120,120,128,0.20); }
.ios-close:active { background: rgba(120,120,128,0.25); }
/* تنظیم جهت برای RTL */
[dir="rtl"] .ios-close { right: auto; left: 18px; }

.ios-divider {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 13px;
    color: #8e8e93;
    margin: 24px 0;
}
.ios-divider::before, .ios-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(60,60,67,0.2);
}
.ios-divider:not(:empty)::before { margin-left: 12px; } /* تنظیم برای RTL */
.ios-divider:not(:empty)::after { margin-right: 12px; }

.ios-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
.ios-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: #007aff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.ios-link:active { opacity: 0.6; }
.ios-link.text-muted { color: var(--ios-text-secondary) !important; }

.ios-check { font-size: 13px; color: #6e6e73; }
.ios-check input {
    transform: scale(1.1);
    margin: 0;
    cursor: pointer;
    accent-color: #007aff;
}
.ios-check a { font-weight: 500; color: #007aff; text-decoration: none; }

.letter-spacing-lg { letter-spacing: 12px; font-weight: 600; }
.fs-7 { font-size: 0.85rem; }
.x-small { font-size: 0.75rem; }

.ios-context-menu {
    transform-origin: top left;
    animation: iosScaleFadeIn 0.25s cubic-bezier(0.1, 0.8, 0.2, 1) forwards !important;
    border-radius: 16px !important;
    padding: 8px !important;
    min-width: 230px !important;
    margin-top: 8px !important;
}

.ios-context-menu .dropdown-item {
    border-radius: 10px !important;
    padding: 8px 12px !important;
    transition: background 0.15s ease !important;
    transform: none !important;
}

.ios-context-menu .dropdown-item:hover,
.ios-context-menu .dropdown-item:active {
    background: rgba(0, 122, 255, 0.08);
    transform: none !important;
}

@keyframes iosScaleFadeIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.settings-btn-ios {
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.settings-btn-ios:active {
    transform: scale(0.92);
    opacity: 0.8;
}

.btn-check:checked + .btn {
    background-color: #ffffff;
    color: var(--ios-text-primary) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.form-check-input:checked {
    background-color: var(--ios-blue);
    border-color: var(--ios-blue);
}
.btn-check:checked + .btn {
    color: var(--ios-text-primary) !important;
}