@import './common.css';

:root {
  --main-gradient-from: rgba(39, 20, 116, 1);
  --main-gradient-via: rgba(69, 39, 176, 1);
  --main-gradient-to: rgba(28, 97, 160, 1);
  --main-gradient: linear-gradient(
    180deg,
    var(--main-gradient-from) 16%,
    var(--main-gradient-via) 63%,
    var(--main-gradient-to)
  );

  --primary-400: rgba(98, 50, 202, 1);
  --primary-500: rgba(141, 101, 200, 1);
  --primary-600: rgba(33, 31, 46, 1);

  --primary: var(--main-gradient);
  --primary-hover: linear-gradient(
    180deg,
    rgba(47, 24, 139, 1) 16%,
    rgba(80, 45, 205, 1) 63%,
    rgba(30, 105, 174, 1)
  );
  --primary-border: linear-gradient(
      16deg,
      rgba(var(--hex-border), 0.1) 0%,
      rgba(var(--hex-border), 0.05) 12%,
      rgba(var(--hex-border), 0) 24%,
      rgba(var(--hex-border), 0) 78%,
      rgba(var(--hex-border), 0.05) 89%,
      rgba(var(--hex-border), 0.1) 100%
    )
    border-box;

  --secondary: linear-gradient(
    180deg,
    rgba(74, 75, 79, 0.6) 0%,
    rgba(17, 17, 17, 0.1) 20%,
    rgba(74, 75, 79, 0.6) 100%
  );
  --secondary-hover:
    linear-gradient(
      180deg,
      rgba(74, 75, 79, 0.6) 0%,
      rgba(17, 17, 17, 0.1) 20%,
      rgba(74, 75, 79, 0.6) 100%
    ),
    linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
  --secondary-border: rgba(var(--hex-border), 0.05) border-box;

  --hex-pin-hover: 211, 242, 255;

  --color-tertier: var(--tertier);

  --register:
    radial-gradient(54.14% 47.66% at 49.47% -12%, #C1F5FF 0%, rgba(35, 212, 223, 0) 100%),
    radial-gradient(40.44% 124.85% at 88.89% 79.17%, rgba(2, 235, 250, 0.5) 0%, rgba(44, 110, 208, 0) 100%),
    radial-gradient(119.71% 210.28% at 90.22% -110.28%, #E7FFFE 0%, rgba(4, 45, 33, 0) 87.03%),
    radial-gradient(43.92% 36.54% at 49.21% 100%, #7718F4 8.19%, #2F2571 100%),
    linear-gradient(0deg, #312673, #312673);
  --register-hover:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.1) 100%
    ),
    var(--register);
  --register-prop: url('/images/lx/5/register-prop.png');
  --register-mask:
    url('/images/lx/5/register-mask.png') border-box,
    linear-gradient(var(--color-natural-white)) border-box;
  --register-border: rgba(255, 255, 255, 0.24);

  --login: linear-gradient(
    229deg,
    rgba(58, 60, 161, 0.75) 18.45%,
    rgba(118, 30, 235, 0.75) 45.34%
  );
  --login-hover: linear-gradient(
    229deg,
    rgba(65, 67, 180, 0.75) 18.45%,
    rgba(135, 58, 238, 0.75) 45.34%
  );
  --login-border-hex: rgba(255, 255, 255, 0.6) 0%, rgba(10, 10, 10, 0) 30%;
  --login-border:
    linear-gradient(-138deg, var(--login-border-hex)) border-box,
    linear-gradient(54deg, var(--login-border-hex)) border-box;

  --hex-border: 255, 255, 255;
  --hex-natural-white: 255, 255, 255;
  --hex-natural-black: 0, 0, 0;
  --hex-danger: 223, 32, 32;
  --hex-success: 29, 175, 38;
  --hex-warning: 255, 168, 0;
  --hex-market-open: 218, 255, 37;
  --hex-market-close: 245, 93, 59;

  --color-natural-black: rgb(var(--hex-natural-black));
  --color-natural-white: rgb(var(--hex-natural-white));

  --color-danger: rgb(var(--hex-danger));
  --color-success: rgb(var(--hex-success));
  --color-warning: rgb(var(--hex-warning));
  --color-market-open: rgb(var(--hex-market-open));
  --color-market-close: rgb(var(--hex-market-close));

  --warning-light: rgba(238, 184, 80, 1);

  --footer-seo-text: rgba(var(--hex-natural-white), 0.5);

  --background-base: rgba(18, 19, 23, 1);
  --background-400: rgba(13, 13, 18, 1);
  --background-500: rgba(23, 23, 28, 1);
  --background-600: rgba(28, 28, 34, 1);

  --foreground: rgb(var(--hex-natural-white));
  --muted-foreground: rgba(var(--hex-natural-white), 0.5);

  --border: rgba(var(--hex-border), 0.1);
  --input: rgba(0, 0, 0, 0.4);
  --popover: var(--input);
  --popover-border: transparent;

  --accent: var(--primary);
  --accent-foreground: var(--foreground);

  --container: var(--background2);
  --container-border: var(--border);
  --container-payment: var(--background-600);

  --shadow-menu-navbar: #ffe0a8;

  --hex-footer-gradient-container-light: rgba(36, 36, 66, 1);
  --hex-footer-gradient-container-dark: rgba(17, 14, 26, 1);

  --switch-border: rgba(var(--hex-border), 0.05);
  --switch-unchecked-bg: rgba(var(--hex-natural-white), 0.1);

  --badge-fail-bg: rgba(var(--hex-danger), 0.2);
  --badge-fail-text: var(--color-danger);
  --badge-warning-bg: rgba(var(--hex-warning), 0.2);
  --badge-warning-text: var(--color-warning);
  --badge-success-bg: rgba(var(--hex-success), 0.2);

  --badge-success-text: var(--color-success);
  --badge-canceled-bg: rgba(var(--hex-natural-white), 0.1);
  --badge-canceled-text: var(--color-natural-white);
  --badge-market-open-bg: var(--color-market-open);
  --badge-market-open-text: var(--color-natural-black);
  --badge-market-close-bg: var(--color-market-close);
  --badge-market-close-text: var(--color-natural-black);
  --badge-rtp-bg: rgba(var(--hex-natural-white), 0.1);
  --badge-rtp-text: var(--color-natural-white);

  --accordion-container-bg: var(--background-500);
  --accordion-trigger-bg: rgba(var(--hex-natural-white), 0.05);
  --accordion-trigger-text: var(--color-natural-white);
  --accordion-content-text: rgba(var(--hex-natural-white), 0.5);

  --footer-gradient-mid-color: rgba(5, 29, 47, 0.2);
  --footer-seo-open-close: rgb(var(--hex-natural-white));
  --footer-gradient: linear-gradient(to bottom, #2a2145, #0e0c15);

  --calendar-bg: var(--background-500);
  --calendar-range: var(--primary-600);
  --calendar-text: var(--color-natural-white);
  --calendar-week: var(--primary-500);
  --calendar-outside: rgba(var(--hex-natural-white), 0.5);

  --textarea: rgba(var(--hex-natural-black), 0.4);
  --textarea-border: rgba(var(--hex-border), 0.1);

  --select: var(--background-600);
  --select-border: rgba(var(--hex-border), 0.05);

  --progress-bar: rgba(var(--hex-natural-black), 0.3);
  --progress-bar-border: rgba(var(--hex-border), 0.1);
  --progress-ongoing: rgba(var(--hex-warning), 0.2);
  --progress-ongoing-text: rgb(var(--hex-warning));
  --progress-done: rgba(var(--hex-success), 0.2);
  --progress-done-text: rgb(var(--hex-success));

  --select: var(--background-600);
  --radio-checkbox-group-filter: var(--background-600);

  --popover-quick-depo: var(--background-600);
  --popover-default-border: rgba(var(--hex-border), 0.05);
  --popover-apk-link-alternatif:
    radial-gradient(
      69.79% 113.82% at 92.84% 86.18%,
      #7c5f3d 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      93deg,
      #c4a16c -4.35%,
      #302d29 17.62%,
      #0e0e0e 35.28%,
      #0b0b0a 68.96%,
      #968c74 100%
    );
  --popover-apk-link-alternatif-border: linear-gradient(
    to right,
    rgba(233, 211, 153, 1) 0%,
    rgba(101, 101, 101, 1) 40%,
    rgba(55, 55, 55, 1) 66%,
    rgba(164, 142, 120, 1) 100%
  );
  --popover-apk-link-alternatif-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.65);
  --popover-header: linear-gradient(51.85deg, #1C172A -6.67%, #18152F 48.53%, #141322 94.75%);

  --category-games-menu-bg-active:
    linear-gradient(179.61deg, rgba(115, 99, 239, 0) 0.34%, rgba(133, 88, 239, 0.18) 64.44%, #9D73FF 91.18%, #1D1897 100.47%),
    linear-gradient(105.55deg, #5D3DDB 0.5%, rgba(38, 36, 134, 0.8) 41.68%, rgba(38, 36, 134, 0.04) 66.99%, #623D9E 100.19%);
  --category-games-menu-border-bottom: linear-gradient(
    to bottom,
    var(--main-gradient-from),
    var(--main-gradient-via),
    var(--main-gradient-to)
  );

  --card-togel-hot-bg: rgba(53, 9, 97, 1);
  --card-togel-hot-border: linear-gradient(119.48deg, #6935CA 24.89%, #8729E0 68.06%);
  --card-togel-default-bg: radial-gradient(
    100.82% 263.5% at -1.89% -6.56%,
    #2F1E7A 0%,
    #2F2075 49.48%,
    rgb(var(--hex-natural-black)) 66%,
    #261A63 92.71%);
  --card-togel-default-border: linear-gradient(126deg, #4B418D 28.96%, #4A4E72 53.44%, #171628 79.02%, #6356B5 99.12%);

  --card-togel-default-border-hover: linear-gradient(
    80deg,
    var(--main-gradient-from) 16%,
    var(--main-gradient-via) 63%,
    var(--main-gradient-to)
  );
  --card-togel-real-market-text: rgba(249, 211, 110, 1);
  --togel-number-default-bg: linear-gradient(
    rgba(94, 80, 54, 0.27) 0%,
    rgba(111, 87, 44, 0.8) 70%,
    #917d35 100%
  );
  --togel-number-featured-bg: var(--main-gradient);
  --card-togel-star: rgb(var(--hex-warning));

  --riwayat-togel-card-bg: var(--background-500);
  --riwayat-togel-card-border: rgba(var(--hex-natural-white), 0.05);

  --pin-bg: var(--background-600);
  --pin-bg-active: var(--secondary);
  --pin-border-active: rgba(var(--hex-natural-white), 0.05);
  --pin-hover: rgba(var(--hex-pin-hover), 0.1);

  --ticket-tg-darker-gradient: rgb(38, 42, 49);
  --ticket-tg-lighter-gradient: rgb(83, 91, 101);
  --ticket-tg: radial-gradient(
    151.51% 252.96% at 38.93% -40.76%,
    var(--ticket-tg-lighter-gradient) 0%,
    var(--ticket-tg-darker-gradient) 94.46%
  );
  --ticket-wallet: var(--background-600);
  --ticket-devider: rgba(var(--hex-natural-white), 0.1);
  --ticket-wallet-border: rgba(var(--hex-natural-white), 0.05);

  --marquee-from: rgba(31, 86, 227, 0.5);
  --marquee-to: rgba(22, 22, 61, 0);
  --marquee-stroke-from: rgb(43, 158, 151);
  --marquee-stroke-to: (109, 123, 171, 0);
  --marquee-text: rgba(178, 193, 246, 1);
  --marquee-align-right: linear-gradient(
    90deg,
    rgb(43, 158, 151) -5.75%,
    rgba(109, 123, 171, 0) 40.49%
  );
  --marquee-inner: radial-gradient(
    97.36% 10926.6% at 0% 78.12%,
    rgba(31, 86, 227, 0.5) 0%,
    rgba(22, 22, 61, 0) 100%
  );

  --unread-notification: rgb(244, 63, 3);

  --bet-card-base-default: var(--background-500);
  --bet-card-base-lighter: var(--background-600);
  --bet-card-base-border: rgba(var(--hex-natural-white), 0.05);

  --timer-segment: rgba(var(--hex-natural-white), 0.1);

  --prize-info-modal-bg: var(--background-500);

  --container-mobile-navbar: linear-gradient(
    to bottom,
    rgba(42, 33, 69, 1),
    rgba(14, 12, 21, 1)
  );

  --modal-filter: var(--background-500);

  --promo-card: var(--background-600);

  --dialog-content: var(--background-500);

  --shio-icon: var(--primary-500);

  --register-login-heading: var(--primary-500);
  --register-login-bg: var(--background-500);
  --register-payment-information-bg: var(--background-600);
  --register-payment-category-bg: rgba(var(--hex-natural-black), 0.4);

  --banner-info-link-border: linear-gradient(
    90deg,
    #55688e -5.75%,
    rgba(109, 130, 171, 0) 40.49%
  );
  --banner-info-link: radial-gradient(
    97.36% 10926.6% at 0% 78.12%,
    #292d35 0%,
    #0c0c0e 100%
  );

  --header: var(--background-500);

  --quick-depo-border: var(--primary-500);

  --profile: linear-gradient(180deg, #c8d3e8 63.18%, #8592a9 91.81%);
  --profile-icon: rgba(35, 35, 35, 1);

  --wallet-page-bg: radial-gradient(
    113.09% 119.76% at 38.93% -19.23%,
    rgba(75, 81, 88, 0.5) 0%,
    rgba(41, 44, 49, 0.4) 100%
  );

  --deposit-withdraw-ticket-cutout: var(--background-400);
  --deposit-promo-bg: var(--background-500);
  --selected-deposit-promo: var(--primary-500);

  --bonus-popover-content: var(--background-500);
  --bonus-popover-card: var(--background-600);
  --bonus-popover-nominal: linear-gradient(
    rgba(255, 252, 243, 1),
    rgba(239, 210, 154, 1),
    rgba(250, 226, 199, 1),
    rgba(222, 171, 122, 1)
  );

  --tab-list: rgba(var(--hex-natural-white), 0.05);

  --download-apk-background:
    radial-gradient(69.79% 113.82% at 92.84% 86.18%,rgba(37,100,184,.5) 0%,transparent 100%),
    linear-gradient(93deg,rgba(105,93,245,.5) -4.35%,rgba(28,31,72,.5) 17.62%,rgba(25,25,28,.5) 35.28%,rgba(18,18,20,.5) 68.96%,rgba(23,117,179,.5));
  --download-apk-shadow:
    inset 1px 0px 1px #8ba4d2,inset -1px 0 1px #292929,inset 0px 1px 0px #373737,inset 0px -1px 0px #4375a4,0px 4px 8px 0px rgba(0,0,0,.65);

  --deposit-button-main-color: #fff;
  --deposit-button-main-box-shadow:
    0 -1px 2px 0 rgba(229, 219, 255, 0.75) inset,
    0 0 4px 0 rgba(143, 102, 255, 0.75) inset;
  --deposit-button-main-background:
    radial-gradient(
      63.39% 25.17% at 50% 78.04%,
      #7b4cfe 0%,
      rgba(126, 126, 254, 0) 100%
    ),
    linear-gradient(180deg, #4100f5 23.17%, #6d49fd 99.64%);
  --deposit-button-main-background-hover:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.1) 100%
    ),
    radial-gradient(
      63.39% 25.17% at 50% 78.04%,
      #7b4cfe 0%,
      rgba(126, 126, 254, 0) 100%
    ),
    linear-gradient(180deg, #4100f5 23.17%, #6d49fd 99.64%);
  --deposit-button-plus-color: #fff;
  --deposit-button-plus-filter-id: url(#filter0_d_29539_290912);
  --deposit-button-bottom-background: linear-gradient(
    90deg,
    #5539bc 0%,
    #6e56c6 19.97%,
    #3918b2 34.93%,
    #3918b2 65.4%,
    #6e56c6 78.59%,
    #5539bc 100%
  );
  --deposit-button-bottom-box-shadow: 0 2px 8px 0 #352767;
  --deposit-button-bottom-box-shadow-hover: 0 -1px 10px 2px
    rgba(166, 142, 232, 0.24);
  --deposit-button-bottom-box-shadow-active: 0 -3px 0 3px
    rgba(104, 49, 255, 0.3);

  --banner-button: radial-gradient(10926.6% 97.36% at 0% 78.12%, #0A29AA 0%, transparent 100%);
  --banner-border-stop: #2B439E;
}

body {
  background-color: var(--background-400);
}

.register-button {
  outline: none !important;
  background-image: none !important;
}

.register-button span{
  z-index: 3;
}

.register-button::before {
  display: block;
  outline: 1px solid var(--register-border);
  outline-offset: -1px;
  mask: var(--register-mask);
  mask-repeat: no-repeat;
  mask-composite: exclude;
  mix-blend-mode: overlay;
  mask-size: 18px, 100%;
  mask-position: 0% 0%;
  z-index: 2;
  background: var(--register);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.register-button:hover::before {
  background: var(--register-hover);
}

.register-button::before {
  content: '' !important;
  border-radius: inherit;
  backdrop-filter: blur(2px);
}

.register-button::after {
  content: '' !important;
  width: calc(100% - 5px);
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: inherit;
  z-index: 0;
  background-image: var(--register);
  box-shadow: inset -1px -1px 0px 0px rgba(255, 255, 255, 0.24), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.24);
}

.register-button .decoration {
  position: absolute;
  background-image: var(--register-prop);
  background-repeat: no-repeat;
  background-size: contain;
  height: 20px;
  width: 20px;
  z-index: 3;
  left: 0;
  top: 0;
  border-radius: 0;
}

.register-button .decoration::after,
.register-button .decoration::before {
  content: '';
  position: absolute;
}

.register-button .decoration::before {
  width: 8px;
  height: 10px;
  background: transparent;
  bottom: -1px;
  left: 6px;
  box-shadow: inset -1px -1px 0px 0px rgba(255, 255, 255, 0.24);
  z-index: 2;
}
.register-button .decoration::after {
  width: 7px;
  height: 11px;
  background: transparent;
  top: 1px;
  left: 14px;
  box-shadow: inset -1px -1px 0px 0px rgba(255, 255, 255, 0.24);
  z-index: 1;
}

.wrapper-label-input {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-sm);

  label {
    color: var(--muted-foreground);
  }
}

.radio-indicator {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: 1px solid var(--background-600);
  background: var(--color-natural-white);
}

.collapsible-content-wrapper {
  position: relative;
}

.footer-seo-gradient::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: var(--footer-gradient);
  z-index: 1;
  pointer-events: none;
}

.calendar-dropdown option {
  background-color: var(--background-600);
}

.popover-apk-link-alternatif-border {
  padding: 1px;
  border-radius: 10px;
  box-shadow: var(--popover-apk-link-alternatif-shadow);
  background: var(--popover-apk-link-alternatif-border);
}

.popover-apk-link-alternatif {
  border-radius: 10px;
  background: var(--popover-apk-link-alternatif);
}

.footer-gradient-container {
  box-shadow: 0 -4px 8px 0 rgba(var(--hex-natural-black), 0.12);
  background: linear-gradient(
    180deg,
    var(--hex-footer-gradient-container-light) 0%,
    var(--hex-footer-gradient-container-dark) 100%
  );
}