@import './common.css';

:root {
  --main-gradient-from: rgba(8, 109, 65, 1);
  --main-gradient-via: rgba(59, 167, 114, 1);
  --main-gradient-to: rgba(41, 195, 82, 1);
  --main-gradient: linear-gradient(
    180deg,
    var(--main-gradient-from) 16%,
    var(--main-gradient-via) 63%,
    var(--main-gradient-to)
  );

  --primary-400: rgb(33 212 125);
  --primary-500: rgb(71 179 114);
  --primary-600: rgb(35 47 40);

  --primary: var(--main-gradient);
  --primary-hover: linear-gradient(
    180deg,
    #0e7146 16%,
    #37805c 63%,
    #338559 100%
  );
  --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;

  --register:
    radial-gradient(
      54.72% 45.15% at 50% -6.11%,
      #aaffc9 0%,
      rgba(35, 223, 38, 0) 100%
    ),
    radial-gradient(
      175.52% 200.37% at 91.18% -99.21%,
      #1c210d 0%,
      rgba(76, 76, 27, 0) 87.03%
    ),
    radial-gradient(
      164.67% 80.57% at 0% -22.96%,
      #32ffa0 8.19%,
      rgba(0, 169, 70, 0) 100%
    ),
    radial-gradient(
      83.59% 100.75% at 88.85% 100%,
      rgba(76, 255, 189, 0.5) 0%,
      rgba(52, 208, 44, 0) 100%
    ),
    linear-gradient(#005b28);
  --register-hover:
    radial-gradient(
      54.72% 45.15% at 50% -6.11%,
      #bdffd5 0%,
      rgba(59, 227, 62, 0) 100%
    ),
    radial-gradient(
      175.52% 200.37% at 91.18% -99.21%,
      #19210d 0%,
      rgba(90, 89, 32, 0) 87.03%
    ),
    radial-gradient(
      164.67% 80.57% at 0% -22.96%,
      #57ff97 8.19%,
      rgba(0, 209, 73, 0) 100%
    ),
    radial-gradient(
      83.59% 100.75% at 88.85% 100%,
      rgba(122, 255, 184, 0.5) 0%,
      rgba(89, 218, 83, 0) 100%
    ),
    linear-gradient(#007031);
  --register-border: rgba(var(--hex-border), 0.24);

  --login: linear-gradient(229deg, #2f9d66 -21.36%, #113225 103.96%);
  --login-hover: linear-gradient(229deg, #35a05c -21.36%, #224638 103.96%);
  --login-border-gradient-stops:
    rgba(255, 255, 255, 0.6) 0%, rgba(10, 10, 10, 0) 30%;
  --login-border:
    linear-gradient(-138deg, var(--login-border-gradient-stops)) border-box,
    linear-gradient(54deg, var(--login-border-gradient-stops)) 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));

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

  --background-base: rgba(18, 19, 23, 1);
  --background-400: rgb(12 12 8);
  --background-500: rgb(21 25 23);
  --background-600: rgb(28 34 32);

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

  --border: rgba(var(--hex-border), 0.1);

  --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);

  --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 top,
    var(--background-500),
    var(--footer-gradient-mid-color) 70%,
    transparent
  );

  --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);

  --table-seperator: rgba(var(--hex-natural-white), 0.1);

  --select: var(--background-600);

  --table-seperator: rgba(var(--hex-natural-white), 0.1);

  --marquee-from: rgba(0, 153, 28, 1);
  --marquee-to: rgba(12, 14, 12, 1);
  --marquee-stroke-from: rgba(107, 214, 116, 1);
  --marquee-stroke-to: rgba(77, 208, 82, 0);
  --marquee-text: rgba(237, 227, 183, 1);

  --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(28, 74, 55, 1),
    rgba(11, 15, 12, 1)
  );

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

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

  --deposit-button-main-color: #fff;
  --deposit-button-main-box-shadow:
    0 -1px 2px 0 rgba(229, 255, 244, 0.75) inset,
    0 0 4px 0 rgba(82, 255, 180, 0.75) inset;
  --deposit-button-main-background:
    radial-gradient(
      63.39% 25.17% at 50% 78.04%,
      #08e887 0%,
      rgba(8, 222, 118, 0) 100%
    ),
    linear-gradient(180deg, #117e4f 23.17%, #0bcb78 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%,
      #08e887 0%,
      rgba(8, 222, 118, 0) 100%
    ),
    linear-gradient(180deg, #117e4f 23.17%, #0bcb78 99.64%);
  --deposit-button-plus-color: #fff;
  --deposit-button-plus-filter-id: url(#filter0_d_31859_164507);
  --deposit-button-bottom-background: linear-gradient(
    90deg,
    #39bc83 0%,
    #56c695 19.97%,
    #2c9e6d 34.93%,
    #2c9e6d 65.4%,
    #56c695 78.59%,
    #39bc83 100%
  );
  --deposit-button-bottom-box-shadow: 0 2px 8px 0 #27674b;
  --deposit-button-bottom-box-shadow-hover: 0 -1px 10px 2px
    rgba(142, 232, 193, 0.24);
  --deposit-button-bottom-box-shadow-active:
    0 -1px 2px 0 rgba(229, 255, 244, 0.75) inset,
    0 0 4px 0 rgba(82, 255, 180, 0.75) inset;

  --footer-gradient: linear-gradient(180deg, #1C4A37 0%, #0B0F0C 100%);

  --download-apk-background: radial-gradient(69.79% 113.82% at 92.84% 86.18%,rgba(77,212,154,.5) 0%,transparent 100%),linear-gradient(93deg,rgba(75,200,140,.5) -4.35%,rgba(30,87,61,.5) 17.62%,rgba(26,47,39,.5) 35.28%,rgba(18,29,25,.5) 68.96%,rgba(41,199,136,.5));
  --download-apk-shadow: inset 1px 0px 1px #86bdb0,inset -1px 0 1px #273630,inset 0px 1px 0px #12251c,inset 0px -1px 0px #38bf82,0px 4px 8px 0px rgba(0,0,0,.65);

  --shadow-menu-navbar: var(--primary-500);

  --category-games-menu-bg-active: linear-gradient(180deg, rgba(108, 245, 188, 0.00) 0.34%, rgba(104, 250, 201, 0.18) 64.44%, #17C096 91.18%, #14C489 100.47%), linear-gradient(106deg, #64FF80 0.5%, rgba(33, 73, 51, 0.80) 41.68%, rgba(24, 53, 41, 0.04) 66.99%, #0F9056 100.19%);

  --card-togel-hot-bg: linear-gradient(90deg, #112706 0%, #0C120C 100%);;
  --card-togel-hot-border: linear-gradient(90deg, rgba(160, 196, 153, 1) 0%, rgba(164, 210, 104, 1) 100%);
  --card-togel-default-bg: radial-gradient(196.81% 413.46% at -35.4% -126.92%, #1C8D69 33%, #0D2816 55%, #0B0E0D 65%, #0C5239 80%);
  --card-togel-default-border: linear-gradient(126deg, rgba(75, 114, 66, 1) 21%, rgba(13, 40, 22, 1) 42%, rgba(11, 14, 13, 1) 81%, rgba(12, 82, 57, 1) 100%);

  --popover-header: linear-gradient(52deg, #2C4225 -6.67%, #141F17 48.53%, #0D130C 94.75%);
  --popover-default-border: rgba(var(--hex-border), 0.05);

  --hex-footer-gradient-container-light: rgba(31, 61, 46, 1);
  --hex-footer-gradient-container-dark: rgba(24, 27, 24, 1);

  --ticket-wallet: rgba(217, 217, 217, 1);
  --ticket-devider: rgba(var(--hex-natural-white), 0.1);
  --ticket-wallet-border: rgba(0, 0, 0, 1);
}

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

.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);
}