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


/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(189, 142, 53, 0.6) transparent;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 0.2604166667cqw;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(189, 142, 53, 0.6);
  border-radius: 0.4340277778cqw;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(189, 142, 53, 0.9);
}

.chat-area::-webkit-scrollbar-thumb {
  background: rgba(189, 142, 53, 0.4);
}

.chat-area:hover::-webkit-scrollbar-thumb {
  background: rgba(189, 142, 53, 0.8);
}



.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: 0.4166666667cqw;
  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: 0.1041666667cqw;
  border-radius: 100%;
  width: 4.427083333cqw;
  height: 4.427083333cqw;
  flex: 0 0 4.427083333cqw;
}

.card-thumb-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100%;
}

.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: 0.1041666667cqw !important;
  border-radius: 0.4166666667cqw;
}

.modal-box-inner,
.card-box-gradient-inner {
  background: #000000;
  border-radius: 0.4166666667cqw;
}

.modal-header,
.card-box-gradient-header {
  background: linear-gradient(90deg, #6D4526 0%, #A2702C 100%);
  border-radius: 0.4166666667cqw 0.4166666667cqw 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: 0.1197916667cqw !important
}

.text-fill-current {
  -webkit-text-fill-color: currentColor !important;
}

.tag-box {
  background: linear-gradient(180deg, #CCA343 0%, #825326 100%);
  border-radius: 0.4166666667cqw;
  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;
}








/* kuldeep css */
.py-card-mid .py-card-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24%;
  text-align: center;
}

.py-card-mid .py-card-logo img {
  margin: auto;
}

.py-card-mid .py-card-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.5625cqw;
}

.text-gradient3 {
  background: linear-gradient(180deg, #D5B65E 50.81%, #FFEDC5 61.54%, #BD8E35 71.15%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}





.card-box-gradient {
  padding: 0cqw !important;
  /* background:
        linear-gradient(#111, #111) padding-box,
        linear-gradient(0deg, #bd8e35, #825326) border-box; */
  overflow: hidden;
  border-radius: 0.4166666667cqw;
  border: 0.1197916667cqw solid transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(180deg, #825326, #bd8e35) border-box;
}

.card-box-gradient .card-box-gradient-inner {
  border-radius: 0 !important;
}


.two-image-grid-bg .card-box-gradient {
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(180deg, #825326, #bd8e35) border-box;
}



/* kuldeep css */



.fx-emoji-btn {
  --s: 4.70cqw;
  --pad: 0.5208333333cqw;
  --lift: 0.08680555556cqw;
  --press: 0.1302083333cqw;
  --shadow: 0 0.6076388889cqw 0.6944444444cqw rgba(0, 0, 0, .55);
  --shadowHover: 0 0.78125cqw 0.78125cqw rgba(0, 0, 0, .60);
  --shadowDown: 0 0.4340277778cqw 0.5208333333cqw rgba(0, 0, 0, .55);

  width: var(--s);
  height: var(--s);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url("/images/coin-base.svg") center/100% 100% no-repeat;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;

  filter: drop-shadow(var(--shadow));
  transform: translateY(0);
  transition: transform .12s ease, filter .12s ease;
}

.fx-emoji-btn>img,
.fx-emoji-btn>svg {
  width: calc(var(--s) - var(--pad)*2);
  height: calc(var(--s) - var(--pad)*2);
  display: block;
  pointer-events: none;
  transform: translateY(-1px);
}

.fx-emoji-btn:hover {
  transform: translateY(calc(var(--lift) * -1));
  filter: drop-shadow(var(--shadowHover));
}

.fx-emoji-btn:active {
  transform: translateY(var(--press));
  filter: drop-shadow(var(--shadowDown));
}

.fx-emoji-btn::before,
.fx-emoji-btn::after {
  content: none !important;
}

video {
  max-width: none !important;
  width: 101% !important;
  max-height: none !important;
  height: 101% !important;
  position: relative;
  left: -0.5% !important;
  top: -0.5% !important;
}



.icon-box-bg li:nth-child(5),
.icon-box-bg li:nth-child(6),
.icon-box-bg li:nth-child(7),
.icon-box-bg li:nth-child(8) {
  align-items: flex-end;
}

img {
  user-select: none;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
}