.card,body {
    background-color: #fff
}

.no-scrollbar,html {
    overflow: overlay;
    scrollbar-width: none
}

.habibi-loader,.habibi-loading-indicator {
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none
}

:root {
    --nextui-box-shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.12);
    --habibi: #334155;
    --habibi-dark: #435266;
    --habibi-pink: #ff1856;
    --habibi-gray-50: #f8fafc;
    --habibi-purple: #8b5cf6;
    --habibi-purple-dark: #7e3af2;
    --bg-color-muted: #f6f8fa;
    --bg-color-muted-dark: #2e3033;
    --bg-color-muted-darker: #242526;
    --bg-color-muted-darkest: #1a1b1c;
    --bg-color-muted-darkest-dark: #121314;
    --bg-color-muted-darkest-darker: #0e0f10;
    --bg-color-muted-darkest-darkest: #0a0b0c;
    --bg-color-muted-darkest-darkest-dark: #070809;
    --nextui-background: 0 0% 100%;
    --nextui-foreground-50: 0 0% 98%;
    --nextui-foreground-100: 240 5% 96%;
    --nextui-foreground-200: 240 6% 90%;
    --nextui-foreground-300: 240 5% 84%;
    --nextui-foreground-400: 240 5% 65%;
    --nextui-foreground-500: 240 4% 46%;
    --nextui-foreground-600: 240 5% 34%;
    --nextui-foreground-700: 240 5% 26%;
    --nextui-foreground-800: 240 4% 16%;
    --nextui-foreground-900: 240 6% 10%;
    --nextui-foreground: 202 24% 9%;
    --nextui-divider: 0 0% 7%;
    --nextui-divider-opacity: .15;
    --nextui-focus: 212 100% 47%;
    --nextui-overlay: 0 0% 0%;
    --nextui-content1: 0 0% 100%;
    --nextui-content1-foreground: 202 24% 9%;
    --nextui-content2: 240 5% 96%;
    --nextui-content2-foreground: 240 4% 16%;
    --nextui-content3: 240 6% 90%;
    --nextui-content3-foreground: 240 5% 26%;
    --nextui-content4: 240 5% 84%;
    --nextui-content4-foreground: 240 5% 34%;
    --nextui-default-50: 0 0% 98%;
    --nextui-default-100: 240 5% 96%;
    --nextui-default-200: 240 6% 90%;
    --nextui-default-300: 240 5% 84%;
    --nextui-default-400: 240 5% 65%;
    --nextui-default-500: 240 4% 46%;
    --nextui-default-600: 240 5% 34%;
    --nextui-default-700: 240 5% 26%;
    --nextui-default-800: 240 4% 16%;
    --nextui-default-900: 240 6% 10%;
    --nextui-default-foreground: 0 0% 0%;
    --nextui-default: 240 5% 84%;
    --nextui-primary-50: 213 92% 95%;
    --nextui-primary-100: 212 92% 90%;
    --nextui-primary-200: 212 92% 79%;
    --nextui-primary-300: 212 92% 69%;
    --nextui-primary-400: 212 92% 58%;
    --nextui-primary-500: 212 100% 47%;
    --nextui-primary-600: 212 100% 38%;
    --nextui-primary-700: 212 100% 29%;
    --nextui-primary-800: 212 100% 19%;
    --nextui-primary-900: 212 100% 10%;
    --nextui-primary-foreground: 0 0% 100%;
    --nextui-primary: 212 100% 47%;
    --nextui-secondary-50: 270 62% 95%;
    --nextui-secondary-100: 270 59% 89%;
    --nextui-secondary-200: 270 59% 79%;
    --nextui-secondary-300: 270 59% 68%;
    --nextui-secondary-400: 270 59% 58%;
    --nextui-secondary-500: 270 67% 47%;
    --nextui-secondary-600: 270 67% 38%;
    --nextui-secondary-700: 270 67% 28%;
    --nextui-secondary-800: 270 67% 19%;
    --nextui-secondary-900: 270 67% 9%;
    --nextui-secondary-foreground: 0 0% 100%;
    --nextui-secondary: 270 67% 47%;
    --nextui-success-50: 147 64% 95%;
    --nextui-success-100: 146 61% 89%;
    --nextui-success-200: 146 62% 77%;
    --nextui-success-300: 146 63% 66%;
    --nextui-success-400: 146 62% 55%;
    --nextui-success-500: 146 79% 44%;
    --nextui-success-600: 146 80% 35%;
    --nextui-success-700: 146 79% 26%;
    --nextui-success-800: 146 80% 17%;
    --nextui-success-900: 146 78% 9%;
    --nextui-success-foreground: 0 0% 0%;
    --nextui-success: 146 79% 44%;
    --nextui-warning-50: 55 92% 95%;
    --nextui-warning-100: 37 91% 91%;
    --nextui-warning-200: 37 91% 82%;
    --nextui-warning-300: 37 91% 73%;
    --nextui-warning-400: 37 91% 64%;
    --nextui-warning-500: 37 91% 55%;
    --nextui-warning-600: 37 74% 44%;
    --nextui-warning-700: 37 74% 33%;
    --nextui-warning-800: 37 75% 22%;
    --nextui-warning-900: 37 75% 11%;
    --nextui-warning-foreground: 0 0% 0%;
    --nextui-warning: 37 91% 55%;
    --nextui-danger-50: 339 92% 95%;
    --nextui-danger-100: 340 92% 90%;
    --nextui-danger-200: 339 90% 80%;
    --nextui-danger-300: 339 91% 71%;
    --nextui-danger-400: 339 90% 61%;
    --nextui-danger-500: 339 90% 51%;
    --nextui-danger-600: 339 87% 41%;
    --nextui-danger-700: 339 86% 31%;
    --nextui-danger-800: 339 87% 20%;
    --nextui-danger-900: 340 85% 10%;
    --nextui-danger-foreground: 0 0% 100%;
    --nextui-danger: 339 90% 51%;
    --nextui-spacing-unit: 4px;
    --nextui-spacing-unit-0: 0px;
    --nextui-spacing-unit-1: 4px;
    --nextui-spacing-unit-2: 8px;
    --nextui-spacing-unit-3: 12px;
    --nextui-spacing-unit-4: 16px;
    --nextui-spacing-unit-5: 20px;
    --nextui-spacing-unit-6: 24px;
    --nextui-spacing-unit-7: 28px;
    --nextui-spacing-unit-8: 32px;
    --nextui-spacing-unit-9: 36px;
    --nextui-spacing-unit-10: 40px;
    --nextui-spacing-unit-11: 44px;
    --nextui-spacing-unit-12: 48px;
    --nextui-spacing-unit-13: 52px;
    --nextui-spacing-unit-14: 56px;
    --nextui-spacing-unit-15: 60px;
    --nextui-spacing-unit-16: 64px;
    --nextui-spacing-unit-17: 68px;
    --nextui-spacing-unit-18: 72px;
    --nextui-spacing-unit-20: 80px;
    --nextui-spacing-unit-24: 96px;
    --nextui-spacing-unit-28: 112px;
    --nextui-spacing-unit-32: 128px;
    --nextui-spacing-unit-36: 144px;
    --nextui-spacing-unit-40: 160px;
    --nextui-spacing-unit-44: 176px;
    --nextui-spacing-unit-48: 192px;
    --nextui-spacing-unit-52: 208px;
    --nextui-spacing-unit-56: 224px;
    --nextui-spacing-unit-60: 240px;
    --nextui-spacing-unit-64: 256px;
    --nextui-spacing-unit-72: 288px;
    --nextui-spacing-unit-80: 320px;
    --nextui-spacing-unit-96: 384px;
    --nextui-spacing-unit-xs: 8px;
    --nextui-spacing-unit-sm: 12px;
    --nextui-spacing-unit-md: 16px;
    --nextui-spacing-unit-lg: 22px;
    --nextui-spacing-unit-xl: 36px;
    --nextui-spacing-unit-2xl: 48px;
    --nextui-spacing-unit-3xl: 80px;
    --nextui-spacing-unit-4xl: 120px;
    --nextui-spacing-unit-5xl: 224px;
    --nextui-spacing-unit-6xl: 288px;
    --nextui-spacing-unit-7xl: 384px;
    --nextui-spacing-unit-8xl: 512px;
    --nextui-spacing-unit-9xl: 640px;
    --nextui-spacing-unit-3_5: 14px;
    --nextui-disabled-opacity: .5;
    --nextui-divider-weight: 1px;
    --nextui-font-size-tiny: .75rem;
    --nextui-font-size-small: .875rem;
    --nextui-font-size-medium: 1rem;
    --nextui-font-size-large: 1.125rem;
    --nextui-line-height-tiny: 1rem;
    --nextui-line-height-small: 1.25rem;
    --nextui-line-height-medium: 1.5rem;
    --nextui-line-height-large: 1.75rem;
    --nextui-radius-small: 8px;
    --nextui-radius-medium: 12px;
    --nextui-radius-large: 14px;
    --nextui-border-width-small: 1px;
    --nextui-border-width-medium: 2px;
    --nextui-border-width-large: 3px;
    --nextui-box-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / .02),0px 2px 10px 0px rgb(0 0 0 / .06),0px 0px 1px 0px rgb(0 0 0 / .3);
    --nextui-box-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / .03),0px 2px 30px 0px rgb(0 0 0 / .08),0px 0px 1px 0px rgb(0 0 0 / .3);
    --nextui-box-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / .04),0px 30px 60px 0px rgb(0 0 0 / .12),0px 0px 1px 0px rgb(0 0 0 / .3)
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html.dark {
    color-scheme: dark;
    --scrollbar-bg: #2e2e2e;
    --scrollbar-thumb-bg: #4e4e4e
}

body {
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    tab-size: 4;
    font-size: 16px;
    max-width: 100vw;
    padding-top: 86px!important
}

@media (max-width: 768px) {
    #habibi-sidebar {
        background-color:var(--habibi-gray-50)
    }
}

.shadow-medium {
    --tw-shadow: var(--nextui-box-shadow-medium);
    --tw-shadow-colored: var(--nextui-box-shadow-medium);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}

.card {
    border-radius: 14px;
    border: 1px solid #e0e0e0;
    padding: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,.1)
}

.no-scrollbar {
    -ms-overflow-style: none
}

.no-scrollbar::-webkit-scrollbar {
    display: none
}

.bg-habibi {
    background-color: var(--habibi);
    color: #fff
}

.text-habibi {
    color: var(--habibi)
}

.border-habibi {
    border-color: var(--habibi)
}

.btn-habibi-danger {
    background-color: hsl(var(--nextui-danger) / var(--nextui-danger-opacity,var(--tw-bg-opacity)));
    border-radius: var(--nextui-radius-medium)
}

.habibi-ripple {
    position: absolute;
    background-color: currentColor;
    border-radius: 9999px;
    transform-origin: center center;
    pointer-events: none;
    z-index: 10;
    opacity: .25
}

input:focus,select:focus,textarea:focus {
    outline: 0;
    border-style: dashed!important;
    border-color: #969696!important;
    box-shadow: none!important;
    transition: border-color .2s,border-style .2s
}

.title-h-left {
    position: relative;
    padding-bottom: 8px
}

.title-h-left:before {
    transition: .4s;
    transform-origin: left;
    position: absolute;
    content: "";
    width: 40px;
    height: 3px;
    background: var(--habibi-pink);
    left: 0;
    bottom: 3px;
    border-radius: 5px;
    box-shadow: 1px 1px 3px -1px var(--habibi-pink)
}

.title-h-left:hover:before {
    transform: scaleX(1.5)
}

body.lock-body {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

.habibi-loader {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: fixed;
    z-index: 123456789;
    height: 100%;
    background-color: rgb(192 192 192 / 23%);
    display: flex;
    justify-content: center;
    align-items: center
}

.habibi-loader img {
    width: 32px;
    height: 32px
}

#x-habibi-modal {
    transition: opacity .3s
}

#x-habibi-modal.hb-modal-closing {
    opacity: 0
}

#x-habibi-modal .hb-modal-content {
    transition: transform .3s,opacity .3s;
    transform: scale(.9) translateY(20px);
    opacity: 0
}

#x-habibi-modal.hb-modal-opening .hb-modal-content {
    transform: scale(1) translateY(0);
    opacity: 1
}

#x-habibi-modal.hb-modal-closing .hb-modal-content {
    transform: scale(.9) translateY(20px);
    opacity: 0
}

#x-habibi-modal.hb-modal-no-click,#x-habibi-modal.hb-modal-no-click>div {
    pointer-events: auto
}

.habibi-header-logo {
    position: relative;
    display: inline-block;
    overflow: hidden
}

.habibi-header-logo:before {
    content: "";
    position: absolute;
    left: -200px;
    top: 50%;
    width: 200px;
    height: 15px;
    background-color: rgba(255,255,255,.5);
    transform: rotate(-45deg);
    animation: 2s ease-in-out infinite highlightEffect
}

@keyframes highlightEffect {
    0% {
        left: -200px
    }

    100%,50% {
        left: 100%
    }
}

.habibi-loading-indicator {
    position: fixed;
    height: 3px;
    z-index: 100001;
    background: 0 0;
    display: none
}

#habibi-sidebar,.habibi-announcement-bar,header {
    position: fixed!important;
    left: 0!important
}

.habibi-loading-indicator.show {
    display: block
}

.habibi-loading-indicator .bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg,#1677ff 0,#55a6ff 100%);
    box-shadow: 0 0 10px rgba(22,119,255,.4);
    transition: width .2s
}

.habibi-loading-indicator.fail .bar {
    background: linear-gradient(90deg,#ef4444 0,#fb7185 100%);
    box-shadow: 0 0 10px rgba(239,68,68,.4)
}

.habibi-announcement-bar {
    background-image: url('/public/images/main/announcement-bar.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    top: 0!important;
    width: 100%!important;
    height: 42px!important;
    z-index: 100!important;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.2);
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    pointer-events: none
}

.habibi-announcement-bar .relative {
    width: 100%!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important
}

.habibi-announcement-bar .flex {
    width: 100%!important;
    justify-content: center!important
}

.habibi-announcement-bar .flex.items-center.gap-2 {
    justify-content: center!important;
    width: auto!important
}

.habibi-announcement-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    animation: 3s infinite shimmer
}

@keyframes shimmer {
    0% {
        left: -100%
    }

    100% {
        left: 100%
    }
}

header {
    top: 41px!important;
    width: 100%!important;
    z-index: 40!important
}

#habibi-sidebar {
    top: 41px!important;
    z-index: 999!important
}

main {
    margin-top: 0!important;
    padding-top: 0!important
}

.w-full.min-h-\[calc\(100vh-56px\)\] {
    min-height: calc(100vh - 86px)!important
}

@media (min-width: 640px) {
    header {
        left:288px!important;
        width: calc(100% - 288px)!important
    }
}

.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 992292999;
    transition: opacity .5s,transform .5s;
    opacity: 1;
    transform: scale(1)
}

.loader-wrapper.hide {
    opacity: 0;
    transform: scale(1.05);
    pointer-events: none
}

.loader-logo {
    margin-bottom: 40px
}

.loader {
    width: 33px;
    height: 33px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid var(--habibi);
    border-radius: 50%;
    animation: 1s linear infinite spin
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

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

.qrcode_border,.qrcode_scan {
    transform: translate(-50%,-50%);
    width: 270px;
    height: 270px;
    pointer-events: none;
    left: 50%;
    top: 50%
}

.border-radius-5 {
    border-radius: 5px!important
}

.border-radius-10 {
    border-radius: 10px!important
}

.border-radius-15 {
    border-radius: 15px!important
}

.border-radius-20 {
    border-radius: 20px!important
}

.border-radius-25 {
    border-radius: 25px!important
}

.border-radius-30 {
    border-radius: 30px!important
}

.fs-10 {
    font-size: 10px!important
}

#habibi-home-slider-next::after,#habibi-home-slider-prev::after,.fs-12 {
    font-size: 12px!important
}

.fs-14 {
    font-size: 14px!important
}

.fs-16 {
    font-size: 16px!important
}

.fs-17 {
    font-size: 17px!important
}

.fs-18 {
    font-size: 18px!important
}

.fs-20 {
    font-size: 20px!important
}

.fs-22 {
    font-size: 22px!important
}

.fs-24 {
    font-size: 24px!important
}

.fs-26 {
    font-size: 26px!important
}

.fs-28 {
    font-size: 28px!important
}

.fs-30 {
    font-size: 30px!important
}

.fs-32 {
    font-size: 32px!important
}

.fs-34 {
    font-size: 34px!important
}

.fs-36 {
    font-size: 36px!important
}

.checkout-qr-container>div:first-child {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.checkout-qr-container .w-48 {
    position: relative;
    max-width: 100%;
    width: 192px;
    height: 192px;
    z-index: 0
}

@media (max-width: 640px) {
    .checkout-qr-container .w-48 {
        width:160px;
        height: 160px
    }
}

.qr-wrap img {
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / .1)
}

.qrcode_border img,.qrcode_scan img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.qrcode_border {
    position: absolute;
    z-index: 2
}

.qrcode_scan {
    position: absolute;
    overflow: hidden;
    z-index: 1
}

.qrcode_scan img {
    position: relative;
    animation: 2.5s ease-in-out infinite qrscan
}

@keyframes qrscan {
    0% {
        top: -100%;
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        top: 100%;
        opacity: 0
    }
}

.nav-external-icon {
    margin-left: auto;
    font-size: 16px;
    opacity: .6
}

.crown,.crown2,.crown3 {
    position: relative;
    left: 0;
    width: 130%;
    height: auto
}

.crown3 {
    left: 50%!important;
    top: 50%!important;
    transform: translate(-50%,-50%) scale(1.1)!important
}

.admin-settings-tab.active {
    color: var(--habibi)!important;
    border-bottom-color: var(--habibi)!important
}

.admin-settings-tab-content {
    animation: .3s ease-in-out fadeIn
}

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

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

.admin-settings-icon-3d {
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06),inset 0 -2px 4px -1px rgba(0,0,0,.1);
    transition: .3s
}

.admin-settings-icon-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: .5rem;
    opacity: .3;
    background: linear-gradient(135deg,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%);
    pointer-events: none
}

.admin-settings-icon-3d:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(0,0,0,.15),0 4px 6px -1px rgba(0,0,0,.1),inset 0 -2px 4px -1px rgba(0,0,0,.1)
}

.admin-settings-icon-purple {
    background: linear-gradient(135deg,#332f35 0,#353538 100%);
    color: #fff
}

.admin-settings-icon-blue {
    background: linear-gradient(135deg,#553e8b 0,#2a0770 100%);
    color: #fff
}

.admin-settings-icon-emerald {
    background: linear-gradient(135deg,#10b981 0,#059669 100%);
    color: #fff
}

.admin-settings-icon-red {
    background: linear-gradient(135deg,#ef4444 0,#dc2626 100%);
    color: #fff
}

.admin-settings-checkbox-wrapper {
    position: relative
}

.admin-settings-checkbox {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d1d5db;
    border-radius: .375rem;
    position: relative;
    cursor: pointer;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    background: #fff;
    flex-shrink: 0
}

.admin-settings-checkbox:checked {
    background: var(--habibi);
    border-color: var(--habibi);
    transform: scale(1.1)
}

.admin-settings-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: .375rem;
    height: .625rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%,-60%) rotate(45deg);
    animation: .3s cubic-bezier(.4,0,.2,1) checkmark
}

.admin-settings-checkbox:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(255,112,67,.2),0 0 0 4px rgba(255,112,67,.1)
}

.admin-settings-checkbox:hover:not(:checked) {
    border-color: var(--habibi);
    box-shadow: 0 0 0 3px rgba(255,112,67,.1)
}

@keyframes checkmark {
    0% {
        opacity: 0;
        transform: translate(-50%,-60%) rotate(45deg) scale(0)
    }

    50% {
        transform: translate(-50%,-60%) rotate(45deg) scale(1.2)
    }

    100% {
        opacity: 1;
        transform: translate(-50%,-60%) rotate(45deg) scale(1)
    }
}

.admin-payment-bank-select-wrapper {
    position: relative;
    z-index: 1000
}

.admin-payment-bank-dropdown {
    position: fixed!important;
    z-index: 9999!important;
    isolation: isolate;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

.admin-payment-bank-item {
    position: relative;
    z-index: 10000
}

.bg-color-muted {
    background-color: var(--bg-color-muted)
}

.bg-color-muted-dark {
    background-color: var(--bg-color-muted-dark)
}

.bg-color-muted-darker {
    background-color: var(--bg-color-muted-darker)
}

.bg-color-muted-darkest {
    background-color: var(--bg-color-muted-darkest)
}

/* Media Modal Light */
#media-modal {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(6px)
}

#media-modal > div {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 20px 60px rgba(15,23,42,.16)
}

#media-modal .bg-neutral-50,
#media-modal .bg-neutral-50\/80 {
    background: rgba(248,250,252,.92)
}

#media-modal .border-neutral-200 {
    border-color: rgba(226,232,240,.8)
}

#media-modal .border-t {
    border-top-color: rgba(226,232,240,.8)
}

#media-modal #close-media-modal {
    background: #fff;
    border-color: rgba(226,232,240,.9);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease
}

#media-modal #close-media-modal:hover {
    background: rgba(247,249,252,.95);
    border-color: rgba(203,213,225,.9);
    box-shadow: 0 6px 20px rgba(15,23,42,.08)
}

/* Image Preview Modal Light */
#image-modal {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(6px)
}

#image-modal .bg-white {
    background: #fff;
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 20px 60px rgba(15,23,42,.14)
}

#image-modal .text-neutral-900,
#image-modal .text-neutral-800,
#image-modal .text-neutral-700 {
    color: #0f172a
}

#image-modal .text-neutral-500,
#image-modal .text-neutral-400 {
    color: #475569
}

#image-modal .border-neutral-200 {
    border-color: rgba(226,232,240,.9)
}

#image-modal .border-neutral-100 {
    border-color: rgba(241,245,249,.9)
}

#image-modal button:hover {
    background: rgba(247,249,252,.95)
}

/* Media Modal Light Text */
#media-modal .text-neutral-900,
#media-modal .text-neutral-800 {
    color: #0f172a
}

#media-modal .text-neutral-700 {
    color: #1f2937
}

/* Payment Modal Light */
#payment-modal {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(6px)
}

#payment-modal .bg-white {
    background: #fff;
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 20px 60px rgba(15,23,42,.14)
}

#payment-modal .border-neutral-200 {
    border-color: rgba(226,232,240,.9)
}

#payment-modal .border-neutral-100 {
    border-color: rgba(241,245,249,.9)
}

#payment-modal .text-neutral-900,
#payment-modal .text-neutral-800 {
    color: #0f172a
}

#payment-modal .text-neutral-700,
#payment-modal .text-neutral-600 {
    color: #1f2937
}

/* Error Modal Light */
#error-modal {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(6px)
}

#error-modal .bg-white {
    background: #fff;
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 20px 60px rgba(15,23,42,.14)
}

#error-modal .border-neutral-200 {
    border-color: rgba(226,232,240,.9)
}

#error-modal .border-neutral-100 {
    border-color: rgba(241,245,249,.9)
}

#error-modal .text-neutral-900,
#error-modal .text-neutral-800 {
    color: #0f172a
}

#error-modal .text-neutral-700,
#error-modal .text-neutral-600 {
    color: #1f2937
}

/* Checking Modal Light */
#checking-modal {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(6px)
}

#checking-modal .checking-card {
    background: #fff;
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 20px 60px rgba(15,23,42,.14);
    color: #0f172a
}

/* Error icon light tone */
#error-modal .text-rose-500,
#error-modal .text-rose-400 {
    color: #e11d48 !important
}

#close-error-modal:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #e2e8f0
}

/* Remove hover color change (light) */
#change-plan:hover {
    background: #fff;
    color: #1f2937;
    border-color: #e5e7eb;
    box-shadow: none
}


#habibi-home-slider-next,#habibi-home-slider-prev {
    width: 30px!important;
    height: 30px!important;
    background-color: rgba(255,255,255,.2);
    border-radius: 50%;
    color: #fff!important
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8
}

.priority {
    filter: sepia(0.3) saturate(0.2) hue-rotate(220deg) brightness(0.4) contrast(0.8);
}

#habibi-notice-banner.closing {
    opacity: 0
}

#habibi-notice-banner.closing>div {
    transform: scale(.95);
    opacity: 0
}


.w-50 {
    width: 50%
}

.w-70 {
    width: 70%
}

.w-100 {
    width: 100%
}

.position-fixed {
    position: fixed
}

.d-lg-none {
    display: none
}

@media (max-width: 991.98px) {
    .d-lg-none {
        display: block
    }
}

.p-2 {
    padding: .5rem
}

.fw-semibold {
    font-weight: 600
}

.rounded-4 {
    border-radius: 1rem
}

.d-flex {
    display: flex
}

.justify-content-between {
    justify-content: space-between
}

.align-items-center {
    align-items: center
}

.fs-5 {
    font-size: 1.25rem
}

.fs-3 {
    font-size: 1.75rem
}

.text-white {
    color: #fff!important
}
/* FAQ Accordion Styles */
.faq-item.bg-neutral-50 {
    background-color: #f9fafb;
    border-color: #e5e7eb;
}

.faq-question {
    cursor: pointer;
    user-select: none;
}

.faq-question:hover {
    background-color: #f9fafb;
}

.faq-question i.rotate-180 {
    transform: rotate(180deg);
}