@import url('developer.css');
@import url('all-variable-classes.css');
@import url('color.css');
@import url('fonts.css');
@import url('style.css');



.toggle-switch {
width: 44px;
height: 24px;
border-radius: 9999px;
position: relative;
transition: all 0.3s ease;
}
.toggle-thumb {
width: 20px;
height: 20px;
border-radius: 9999px;
position: absolute;
top: 2px;
left: 2px;
transition: all 0.3s ease;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
.toggle-on .toggle-thumb {
transform: translateX(20px);
}


.site-wrapper{min-height: calc(100vh - 370px);}


.swiper-button-next:after, .swiper-button-prev:after{font-size: 26px;}
.cam2cam-area-section .swiper-button-next:after, .cam2cam-area-section .swiper-button-prev:after{font-size: 18px;}

.swiper-pagination{padding:2px 5px !important; gap: 10px; background: rgba(255, 255, 255, 0.24); backdrop-filter: blur(24.85px); border-radius: 40px;}
.swiper-pagination-bullet{width: 12px; height: 12px; background: rgba(255, 255, 255, 41%);}
.swiper-pagination-bullet-active{width: 12px; height: 12px; background: rgba(255, 255, 255, 100%);}

.top-modal-section{background: url(/images/bg1.png) no-repeat center top; background-size: cover;}
.home-mid-section{background: url(/images/card-bg.png) no-repeat center top; background-size: contain;}

.left-sidebar{background: linear-gradient(0deg, #5E3A25 0%, #D5B65E 30%, #CCA343 50%, #5E3A25 71.63%, #A2702C 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(40px); border-radius: 16px;}

.top-10-month-button button{width: 155px; height: 37px; background: url(/images/btn.png) no-repeat center center; display: flex; align-items: center; justify-content: center;}
.top-10-month-button button span{background: linear-gradient(180deg, #D5B65E 29.41%, #FFE3A2 52.94%, #BD8E35 76.47%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.top-month-list ul li a{background: url(/images/card1.svg) no-repeat top center; min-height: 80px; border-radius: 8px; display: flex; flex-direction: column; gap: 5px; justify-content:space-between; align-items: center; min-width: 150px;}
.nummber-card h6{background: url(/images/number-bg.svg) no-repeat center center; width: 20px; height: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.user-image{background: url(/images/pic-border.svg) no-repeat center center; width: 40px; height: 40px; padding: 2px;}
.top-month-list ul li.month-box-1 a{background: url(/images/card2.svg) no-repeat top center;}
.top-month-list ul li.month-box-1 .nummber-card h6{background: url(/images/number-bg2.svg) no-repeat center center;}
.top-month-list ul li.month-box-1 .user-image{background: url(/images/pic-border2.svg) no-repeat center center;}
.top-month-list ul li.month-box-2 a{background: url(/images/card3.svg) no-repeat top center;}
.top-month-list ul li.month-box-2 .nummber-card h6{background: url(/images/number-bg3.svg) no-repeat center center;}
.top-month-list ul li.month-box-2 .user-image{background: url(/images/pic-border3.svg) no-repeat center center;}
.top-month-list ul li.month-box-3 a{background: url(/images/card4.svg) no-repeat top center;}
.top-month-list ul li.month-box-3 .nummber-card h6{background: url(/images/number-bg4.svg) no-repeat center center;}
.top-month-list ul li.month-box-3 .user-image{background: url(/images/pic-border4.svg) no-repeat center center;}
.card-box-inner{background: linear-gradient(to bottom,  #825326 0%,#bd8e35 100%); padding: 2px; border-radius: 16px; aspect-ratio: 16/11;}
.card-des-box{background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 100%); filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));}
.card-thumb-image{background: linear-gradient(to bottom,  #825326 0%,#bd8e35 100%); padding: 2px; border-radius: 50px; width: 45px; height: 45px; flex:0 0 45px;}
.card-thumb-image img{width: 100%; height: 100%; object-fit: cover;}
.card-title-des h6{background: linear-gradient(180deg, #CCA343 25%, #A2702C 77.78%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
 .heading-section h2{background: url(/images/heading-border.png) no-repeat center bottom; width: 100%; text-align: center; padding-bottom: 40px;}
.heading-section h2 span{background: linear-gradient(90deg, #BD8E35 0%, #E7D7A1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.cam2cam-area-section{background: url(/images/msc-live.png) no-repeat center top; background-size: cover;}
.card-des-box button{font-family: "Libre Baskerville", serif;}
.lock-card-box .card-box-inner{background: linear-gradient(to bottom,  #7A7A7A 0%,#C2C2C2 100%);}
.lock-card-box .card-des-box{top:2px;  background: linear-gradient(180deg,rgba(166, 118, 44, 0.8) 0%,rgba(232, 191, 102, 0.8) 100%),linear-gradient(180deg,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0.6) 100%); background-blend-mode: overlay, multiply;}
footer{background: linear-gradient(180deg, #000000 0%, #18181D 100%);}

.notification-btn{padding:0; margin:0; background:none;}
.notification-btn:hover{background: none;}
.view-all-btn span{background: linear-gradient(90deg, #BD8E35 0%, #E7D7A1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.page-head-section span{background: linear-gradient(90deg, #BD8E35 0%, #E7D7A1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}

.card-bg-red{background: #460303;}

.modal{background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8.65px);}
.modal-box,.card-box-gradient{background: linear-gradient(to bottom,  #825326 0%,#bd8e35 100%); padding: 2px !important; border-radius: 8px;}
.modal-box-inner,.card-box-gradient-inner{background: #000000; border-radius: 8px;}
.modal-header,.card-box-gradient-header{background: linear-gradient(90deg, #6D4526 0%, #A2702C 100%); border-radius: 8px 8px 0px 0px;}

.current-balance-box span,.current-balance-box h6{background: linear-gradient(90deg, #BD8E35 0%, #E7D7A1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.text-gradient{ background: linear-gradient(to right, #BD8E35 0%, #E7D7A1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}

.terms-list li{font-family: "Libre Baskerville", serif; font-size: 13px; position: relative;}
.terms-list li::before{content: ""; width: 5px; height: 5px;display: inline-block; border-radius: 50px; background: #BD8E35; position: absolute; left: -15px; top: 8px;}

.text-gradient2{background: linear-gradient(90deg, #E7AD00 0%, #EBBD00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.card-box-gradient{background: linear-gradient(to bottom, #825326 0%,#bd8e35 100%); padding: 2px !important;}
.text-fill-current{-webkit-text-fill-color: currentColor !important;}
.tag-box{background: linear-gradient(180deg, #CCA343 0%, #825326 100%); border-radius: 8px; min-width: 36px; min-height: 36px; padding: 5px; display: flex; align-items: center; justify-content: center;}

.card-box-gradient-content{background: #410404; width: 100%; height: 100%;}


/* Custom Accordion CSS for smooth transition */
.accordion-content {
    /* We set a large, safe max-height (1000px) in JS when opening
        and '0' when closing, allowing the 0.3s transition to work smoothly. */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    will-change: max-height;
}

.accordion-content.active {
    padding: 1rem 1.5rem 1.5rem;
}

.accordion-header svg {
    /* Smooth rotation for the plus/minus icon */
    transition: transform 0.3s ease-in-out;
}

/* Toast z-index fix - ensure toasts appear above modals */
.Vue3Toastify__toast-container {
    z-index: 99999 !important;
}

.Vue3Toastify__toast {
    z-index: 99999 !important;
}

/* Ensure dialog modals have lower z-index than toasts */
dialog.modal {
    z-index: 1000;
}

dialog.modal[open] {
    z-index: 1000;
}