:root {
    --accent: #32CDB3;
    --accent2: #FB6182;
    --accent3: #FFD700;
    --black: #0f0f0f;
    --medium: #181818;
    --dark: #131313;
    --light: #969696;
    --white: #F8F8FF;
    --telegram: #0088cc;


    --shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}

* {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* width */
::-webkit-scrollbar {
    width: 0px;
    border-radius: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--dark);
    border-radius: 4px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--medium);
    border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--medium);
    border-radius: 4px;
}

body {
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    background-color: var(--black);
    height: 100dvh;
    width: 100dvw;
}

.app_mockup {
    position: fixed;
    /* Keeps the button fixed to the viewport */
    bottom: 0px;
    /* Adjusts the vertical position */
    left: 50%;
    /* Centers the button horizontally */
    transform: translateX(-50%);
    /* Ensures it's exactly centered */
    z-index: -1;
    /* Makes sure the button is on top of all other content */
    height: 100vh;
    width: calc(100lvh / 16 * 9 - 40px);
}

.app_container {
    /* height: calc(100vh - 40px); */
    width: 100%;
    /*max-width: 410px; 450px by Default */
    max-width: 500px;
}

.app_header {
    height: 60px;
    display: flex;
    padding-left: 20px;
    align-items: center;
}

.app_body {
    width: 100%;
    height: calc(100dvh - 60px);
    /* border-radius: 0 0 56px 56px; */
    /* background-color: var(--black); */
}

/* Golden badge for nav icon */
.wallet_offer_badge {
    display: none; /* hidden until active */
    position: absolute;
    top: -6px;
    right: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFD700, #FFC107, #FFB300);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.9), 0 0 14px rgba(255, 200, 0, 0.7);
    animation: navBadgePulse 2s infinite ease-in-out;
  }
  
  @keyframes navBadgePulse {
    0%   { transform: scale(1);   box-shadow: 0 0 6px rgba(255, 215, 0, .6); }
    50%  { transform: scale(1.2); box-shadow: 0 0 14px rgba(255, 215, 0, 1); }
    100% { transform: scale(1);   box-shadow: 0 0 6px rgba(255, 215, 0, .6); }
  }
  
  /* make sure nav icons are relative containers */
  .app_nav .tab_button {
    position: relative;
  }

.app_nav {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    /* Because TON wallet modal is 1000 */
    z-index: 999;
    color: var(--dark);
    background-color: var(--dark);
    padding: 16px 30px;
    border-radius: 60px;
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    box-shadow: var(--shadow);
}

.app_nav ion-icon {
    font-size: 24px;
    color: var(--light);
    transition: ease-in-out 0.3s;
    cursor: pointer;
    opacity: 0.2;
}

.app_nav ion-icon:hover {
    color: var(--accent);
}

.app_header_left {
    width: calc(100% - 40px);
}

.wallet_mini {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.wallet_mini_info_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* .wallet_mini div:last-child {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
} */

.wallet_mini_title {
    color: var(--light);
    font-size: 13px;
    font-weight: 500;
}

.wallet_mini_balance_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.wallet_mini_balance_wrapper {
    color: var(--white);
    font-weight: 550;
}

.wallet_mini_balance_wrapper div {
    font-size: 20px;
}

.wallet_mini_balance_wrapper ion-icon {
    font-size: 24px;
    cursor: pointer;
    transition: ease-in-out 0.3s;
    color: var(--accent);
    border-radius: 50%;
}

.wallet_mini_balance_wrapper ion-icon:hover {
    color: var(--accent);
}

.app_tab {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 10px;
}

.app_container_lg:last-child {
    margin-bottom: 80px;
}

.app_container_lg {
    position: relative;
    border-radius: 14px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.support_textarea {
    background-color: var(--dark);
    border: none;
    resize: none;
    border-radius: 6px;
    padding: 12px;
    max-height: calc(100svh - 300px);
    height: calc(100svh - 300px);
    min-height: 200px;
    color: white;
    outline: var(--accent);
}

.app_section_title_wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: white;
    border-radius: 10px;
    /* background-color: var(--dark); */
    padding-bottom: 10px;
}

.app_section_title_wrapper_center {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
    border-radius: 10px;
    background-color: var(--dark);
    height: 54px;
}

.app_section_title_wrapper_center div#bet_details_time_left {
    font-weight: 600;
    font-size: clamp(20px, 4vw, 22px);
}

.app_section_title_wrapper_center div {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}

.app_section_title_wrapper ion-icon {
    color: var(--accent);
    padding: 6px;
    font-size: 20px;
    background-color: var(--dark);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app_section_title_wrapper div {
    font-size: 15px;
    font-weight: 550;
}

.app_bet_details_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    background-color: var(--dark);
    border-radius: 6px;
    width: 100%;
    height: 83px;
}

.app_container_lg_inner {
    background-color: var(--dark);
    border-radius: 10px;
    padding: 10px;
    width: calc(100% - 20px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.asset_selection_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.asset_info_row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.interval_dropdown_style {
    background-color: var(--medium);
    border: none;
    border-radius: 6px;
    height: 36px;
    color: white;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
}

.asset_wrapper_button {
    color: var(--light);
    font-size: 20px;
}

.asset_logo {
    background-color: #f79621;
    border-radius: 6px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
}

.asset_logo ion-icon {
    font-size: 24px;
    color: white;
}

.asset_info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.asset_name {
    font-weight: 500;
    font-size: 16px;
    color: var(--white);
}

.asset_price_wrapper {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.bet_reward_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    background-color: var(--medium);
    padding: 4px 12px;
    border-radius: 6px;
    gap: 2px;
    min-width: 52px;
}

.bet_reward_title {
    color: var(--light);
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
}

.bet_reward_value_bad {
    font-size: 20px;
    font-weight: 550;
    color: var(--accent2);
}

.bet_reward_value_good {
    font-size: 20px;
    font-weight: 550;
    color: var(--accent);
    white-space: nowrap;
}

.asset_end_price {
    color: var(--light);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}


.bet_button_wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.bet_button_wrapper_single {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 50%;
}

.button_undertext {
    font-size: 10px;
    color: var(--white);
    font-weight: 600;
}

.button_undertext_lower {
    font-size: 10px;
    color: var(--accent2);
    font-weight: 600;
}

.button_undertext_higher {
    font-size: 10px;
    color: var(--accent);
    font-weight: 600;
}

/* Ensure we can absolutely position inside the button */
.bet_button_higher { position: relative; }

/* Countdown pill badge */
.offer_badge {
    display: none; /* hidden until timer starts */
    position: absolute;
    top: -9px;
    right: 50%;
    transform: translateX(50%);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFD700 0%, #FFC107 40%, #FFB300 70%, #FFD700 100%);
    color: #fffbea;
    border: 1px solid rgba(255, 223, 0, 0.7);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 16px rgba(255, 200, 0, 0.6);
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
    animation: badgePulseGold 2.4s ease-in-out infinite;
  }

  .offer_badge.expired {
    display: none; /* hide badge when expired */
  }

@keyframes badgePulse {
  0%   { transform: scale(1);   box-shadow: 0 0 8px 0 rgba(50,205,179,.35); }
  50%  { transform: scale(1.06); box-shadow: 0 0 14px 2px rgba(50,205,179,.6); }
  100% { transform: scale(1);   box-shadow: 0 0 8px 0 rgba(50,205,179,.35); }
}

@keyframes badgePulseGold {
    0%   { box-shadow: 0 0 4px rgba(255, 215, 0, 0.6), 0 0 7px rgba(255, 200, 0, 0.4); }
    50%  { box-shadow: 0 0 2px rgba(255, 215, 0, 1), 0 0 8px rgba(255, 200, 0, 0.9); }
    100% { box-shadow: 0 0 4px rgba(255, 215, 0, 0.6), 0 0 7px rgba(255, 200, 0, 0.4); }
  }

/* Golden offer style */
.deposit_button_boosted {
    background: linear-gradient(135deg, #FFD700 0%, #FFC107 40%, #FFB300 70%, #FFD700 100%);
    color: #fffbea;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8), 0 0 24px rgba(255, 200, 0, 0.6);
    animation: goldenPulse 2.5s infinite ease-in-out;
    transition: all 0.3s ease-in-out;
    position: relative;     /* needed for ::after */
    overflow: visible;
    cursor: pointer;
    width: 80%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
  
/* Pulse glow */
@keyframes goldenPulse {
    0%   { box-shadow: 0 0 6px rgba(255, 215, 0, 0.6), 0 0 10px rgba(255, 200, 0, 0.4); }
    50%  { box-shadow: 0 0 2px rgba(255, 215, 0, 1), 0 0 8px rgba(255, 200, 0, 0.9); }
    100% { box-shadow: 0 0 6px rgba(255, 215, 0, 0.6), 0 0 10px rgba(255, 200, 0, 0.4); }
}
  
/* Shine sweep inside badge */
.offer_badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.8) 50%, transparent 60%);
    background-size: 250% 250%;
    background-position: -150% 0%;
    animation: badgeShine 3s infinite;
    mix-blend-mode: screen;
}

@keyframes badgeShine {
    to { background-position: 150% 0%; }
}

  /* Shine sweep effect */
  .deposit_button_boosted::after {
    content: "";
    position: absolute;
    inset: 0;                         /* fill button box */
    border-radius: inherit;           /* clip to same radius */
    pointer-events: none;
    /* a narrow diagonal highlight */
    background: linear-gradient(
      120deg,
      transparent 40%,
      rgba(255,255,255,0.65) 50%,
      transparent 60%
    );
    background-size: 250% 250%;
    background-position: -150% 0%;    /* start off left */
    animation: shineSweep 3s infinite; /* move within box */
    mix-blend-mode: screen;            /* nicer highlight on gold */
    will-change: background-position;
  }
  
  @keyframes shineSweep {
    to { background-position: 150% 0%; }
  }

  #deposit_button {
    position: relative;   /* needed for absolute positioning of badge */
    overflow: visible;    /* let the badge stick out instead of being clipped */
  }

.bet_button_lower {
    color: var(--white);
    background-color: var(--accent2);
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 46px;
    cursor: pointer;
    transition: ease-in-out 0.3s;
    box-shadow: 0 0 2px 0px var(--accent2);
}

.bet_button_lower:hover {
    box-shadow: 0 0 6px 0px var(--accent2);
}

.bet_button_lower div {
    font-weight: 500;
}

.bet_button_lower ion-icon {
    font-size: 20px;
}

#button_offer_active {
    color: #fffbea;
    background: linear-gradient(135deg, #FFD700 0%, #FFC107 40%, #FFB300 70%, #FFD700 100%);
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 46px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 200, 0, 0.6);
    position: relative;
    overflow: hidden;
    animation: goldenPulse 2.5s infinite ease-in-out;
}

/* Shine sweep effect */
#button_offer_active::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.7), transparent);
    transform: skewX(-20deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0%   { left: -75%; }
    100% { left: 125%; }
}

.bet_button_higher {
    color: var(--white);
    background-color: var(--accent);
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 46px;
    cursor: pointer;
    transition: ease-in-out 0.3s;
    box-shadow: 0 0 2px 0px var(--accent);
}

.bet_button_higher:hover {
    box-shadow: 0 0 6px 0px var(--accent);
}

.bet_button_higher div {
    font-weight: 500;
}

.bet_button_higher ion-icon {
    font-size: 20px;
}

.app_bet_disclaimer {
    font-size: 10px;
    font-weight: 500;
    color: var(--light);
    text-align: center;
}

.app_reward_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.app_reward_wrapper_left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.app_reward_icon {
    background-color: var(--medium);
    border-radius: 6px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
}

.app_reward_icon ion-icon {
    color: var(--white);
    font-size: 24px;
}

.app_reward_subtitle {
    color: var(--light);
    font-size: 12px;
    font-weight: 500;
}

.app_reward_title {
    font-weight: 500;
    font-size: 16px;
    color: var(--white);
    text-align: center;
}

.app_reward_wrapper_amount {
    height: 36px;
    text-align: center;
    font-size: 18px;
    outline: none;
    background-color: var(--medium);
    border-radius: 6px;
    font-weight: 600;
    color: var(--accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.number-input {
    display: flex;
    align-items: center;
}

.number-input button {
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    height: 38px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.number-input button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.number-input input {
    width: 50px;
    height: 36px;
    text-align: center;
    font-size: 18px;
    outline: none;
    background-color: var(--medium);
    border-radius: 6px;
    font-weight: 600;
    color: var(--white);
    border: none;
}

.tab_button {
    transition: background-color 0.3s, color 0.3s;
}

.tab_button.active {
    color: var(--accent);
    opacity: 1 !important;
}

.tab_content {
    display: none;
    opacity: 0;
    transition: ease-in-out 0.5s;
}

.tab_content.active {
    display: flex;
    opacity: 1;
}

.tab_content.exiting {
    opacity: 0;
    transition: ease-in-out 0.25s;
}

.tab_content.incoming {
    opacity: 0;
    transition: ease-in-out 0.25s;
}

.bet_won_icon {
    background-color: var(--black);
    border-radius: 6px;
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bet_won_icon ion-icon {
    color: var(--accent);
    font-size: 24px;
}

.bet_status_icon_good {
    background-color: var(--medium);
    border-radius: 6px;
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bet_status_icon_good ion-icon {
    color: var(--accent);
    font-size: 24px;
}

.bet_status_icon_good_big {
    background-color: var(--medium);
    border-radius: 100px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bet_status_icon_good_big ion-icon {
    color: var(--accent);
    font-size: 70px;
}

.bet_status_wrapper_subtitle_good {
    font-size: 12px;
    font-weight: 500;
    color: #32cdb3;
}


.bet_status_wrapper_title_good {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
}

.bet_status_wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--medium);
    border-radius: 6px;
}

.bet_status_svg_good {
    height: 17vh;
    margin-top: 20px;
}

.bet_status_icon_bad {
    background-color: var(--medium);
    border-radius: 6px;
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bet_status_icon_bad ion-icon {
    color: var(--accent2);
    font-size: 24px;
}

.bet_status_icon_bad_big {
    background-color: var(--medium);
    border-radius: 6px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bet_status_icon_bad_big ion-icon {
    color: var(--accent2);
    font-size: 70px;
}

.bet_status_icon_pending {
    background-color: var(--medium);
    border-radius: 6px;
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bet_status_icon_pending ion-icon {
    color: var(--white);
    font-size: 24px;
}

.withdraw_status_icon {
    background-color: var(--medium);
    border-radius: 6px;
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.withdraw_status_icon ion-icon {
    font-size: 24px;
    color: var(--accent2);
}

.withdraw_amount {
    font-size: 16px;
    font-weight: 500;
    color: var(--accent2);
    background-color: var(--medium);
    border-radius: 4px;
    padding: 4px 8px;
    white-space: nowrap;
}

.deposit_status_icon {
    background-color: var(--medium);
    border-radius: 6px;
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deposit_status_icon ion-icon {
    font-size: 24px;
    color: var(--accent);
}

.transaction_button_icon {
    font-size: 14px;
}

.transaction_verify_button {
    display: flex;
    gap: 3px;
    background-color: var(--medium);
    padding: 2px 8px 2px 4px;
    border-radius: 20px;
    color: var(--accent2);
    font-weight: 500;
    font-size: 11px;
    align-items: center;
    cursor: pointer;
    animation: pulse 1.2s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.transaction_pending_button {
    display: flex;
    gap: 3px;
    background-color: var(--medium);
    padding: 2px 8px 2px 4px;
    border-radius: 20px;
    color: var(--light);
    font-weight: 500;
    font-size: 11px;
    align-items: center;
}

.transaction_pending_button .transaction_button_icon {
    animation: rotate 1.2s infinite ease-in-out;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

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

.transaction_done_button {
    display: flex;
    gap: 3px;
    background-color: var(--medium);
    padding: 2px 8px 2px 4px;
    border-radius: 20px;
    color: var(--accent);
    font-weight: 500;
    font-size: 11px;
    align-items: center;
}

.transaction_rejected_button {
    display: flex;
    gap: 3px;
    background-color: var(--medium);
    padding: 2px 8px 2px 4px;
    border-radius: 20px;
    color: var(--accent2);
    font-weight: 500;
    font-size: 11px;
    align-items: center;
}


.deposit_amount {
    font-size: 16px;
    font-weight: 500;
    color: var(--accent);
    background-color: var(--medium);
    border-radius: 4px;
    padding: 4px 8px;
    white-space: nowrap;
}

.asset_end_price_change_good {
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
}

.asset_end_price_change_bad {
    color: var(--accent2);
    font-size: 13px;
    font-weight: 500;
}

.asset_end_price_change_pending {
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
}

.bet_reward_lost {
    font-size: 16px;
    font-weight: 500;
    color: var(--accent2);
    background-color: var(--medium);
    padding: 4px 8px;
    border-radius: 4px;
}

.bet_reward_won {
    font-size: 16px;
    font-weight: 500;
    color: var(--accent);
    background-color: var(--medium);
    padding: 4px 8px;
    border-radius: 4px;
}

.bet_reward_pending {
    font-size: 16px;
    font-weight: 500;
    color: var(--white);
    background-color: var(--medium);
    padding: 4px 8px;
    border-radius: 4px;
}


.bet_asset_top_wrapper {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.asset_start_price {
    font-size: 12px;
    font-weight: 500;
    color: var(--white);
}

.withdraw_title {
    font-size: 12px;
    font-weight: 500;
    color: var(--light);
}

.withdraw_account {
    font-size: 12px;
    font-weight: 500;
    color: var(--white);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.app_container_lg_title {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.app_container_lg_title_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.app_container_lg_title_icon ion-icon {
    color: var(--white);
    font-size: 24px;
}

.app_container_lg_title_text {
    font-weight: 500;
    color: var(--white);
}

.asset_reset_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    color: var(--light);
    margin-right: 5px;
}

.asset_reset_wrapper div {
    font-size: 12px;
    font-weight: 500;
}

.app_container_lg_title_left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}


/* .container {
    width: 100%;
    background-color: var(--black);
    border-radius: 8px;
    overflow: hidden;
    max-height: 0;
}

.container.expanded {
    max-height: calc(100lvh - 234px);
    overflow-y: auto;
    padding-right: 5px;
}

.container-content {
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.container.expanded .container-content {
    opacity: 1;
} */

.transaction_toggle_button {
    color: var(--light);
    font-size: 24px;
}

#transactions_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: calc(100dvh - 200px);
    overflow-y: auto;
}

.credit-card {
    width: calc(100% - 50px);
    height: 150px;
    background: linear-gradient(135deg, var(--dark), var(--black));
    color: white;
    border-radius: 10px;
    box-shadow: 0 0px 14px rgba(0, 0, 0, 0.5);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    border: 6px solid var(--dark);
}

.credit-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    filter: blur(60px);
}

.credit-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.credit-card .card-header .company-name {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.credit-card .card-header .issued-date {
    font-size: 12px;
    color: var(--light);
}

.credit-card .chip {
    width: 50px;
    height: 35px;
    background: linear-gradient(135deg, var(--dark), var(--medium));
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.credit-card .chip::before {
    content: "";
    width: 15px;
    height: 25px;
    background: #ffd700;
    border-radius: 2px;
}

.credit-card .card-details {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.credit-card .card-details .card-holder {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.credit-card .card-details .balance {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.8px;
    color: var(--accent);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

.card-footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.card-details {
    display: flex
}

.credit-card .card-footer div {
    font-size: 12px;
    text-align: right;
    font-style: italic;
    color: var(--light);
    display: flex;
    text-align: left;
}

.credit-card .card-footer::before {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 140px;
    height: 50px;
    background: rgba(0, 0, 0, 0.15);
    transform: rotate(-15deg);
    border-radius: 5px;
}

.card-header::before {
    content: "";
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 500px;
    height: 200px;
    background: rgba(0, 0, 0, 0.1);
    transform: rotate(-15deg);
    border-radius: 5px;
}

.card_balance_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.balance_refresh_icon {
    font-size: 20px;
    color: var(--accent);
    cursor: pointer;
}

.my_bets_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100dvh - 171px);
    overflow-y: auto;
}

.container_full {
    /* height: calc(100vh - 220px); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    /* padding-bottom: 60px; */
}

.container_full .app_container_lg_inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bet_info_wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid var(--medium);
    border-bottom: 1px solid var(--medium);
}

.bet_info_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: calc(100% - 20px);
    justify-content: space-between;
    padding: 10px;
    color: var(--white);
}

.bet_asset_title {
    font-size: 24px;
    font-weight: 600;
    color: var(--white);
    text-align: center;
}

.bet_asset_icon {
    background-color: var(--medium);
    height: 60px;
    width: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f79621;
}

.bet_asset_icon {
    font-size: 32px;
    color: var(--white);
}

.bet_info_title_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.bet_info_title_wrapper ion-icon {
    font-size: 20px;
    padding: 4px;
    border-radius: 6px;
    background-color: var(--medium);
    color: var(--white);
}

.bet_info_title {
    font-size: 13px;
    font-weight: 400;
    color: var(--light);
}

.bet_status_won_wrapper {
    width: calc(100% - 20px);
    padding: 30px 10px;
    border-radius: 6px;
    background-color: var(--accent2);
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bet_status_won_title {
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    text-align: center;
}

.bet_asset_start_date {
    color: var(--white);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}

.bet_asset_title_wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
}

.bet_pending_icon {
    color: var(--white);
    animation: rotateInfinite 2s linear infinite;
}

@keyframes rotateInfinite {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.bet_asset_start_date_wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 50%;
    background-color: var(--medium);
    padding: 6px;
    border-radius: 6px;
    gap: 10px;
}

.bet_details_stat_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
}

.bet_details_stat_container_big {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
}

.bet_details_stat_icon {
    background-color: var(--dark);
    color: var(--white);
    border-radius: 6px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bet_details_stat_icon ion-icon {
    font-size: 22px;
}

.bet_asset_start_date_title {
    font-weight: 500;
    font-size: 11px;
    color: var(--light);
}

.bet_asset_start_date_title_big {
    font-weight: 500;
    font-size: 15px;
    color: var(--light);
}

.bet_asset_start_date_big {
    color: var(--white);
    font-size: 20px;
    font-weight: 500;
    text-align: left;
}

.bet_resolution_wrapper_good {
    width: calc(100% - 28px);
    display: flex;
    flex-direction: row;
    padding: 14px;
    justify-content: space-between;
    background: linear-gradient(var(--accent), #6fd4c3);
    border-radius: 6px;
    box-shadow: 0 0 10px 0 var(--accent);
}

.bet_resolution_wrapper {
    width: calc(100% - 24px);
    display: flex;
    flex-direction: row;
    padding: 6px 18px 6px 6px;
    justify-content: flex-start;
    background-color: var(--medium);
    border-radius: 6px;
    gap: 10px;
}

.height_46px {
    height: 46px;
}

.bet_resolution_title {
    font-size: 14px;
    color: var(--white);
    font-weight: 500;
}

.bet_resolution_text {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
}

.bet_resolution_won {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
}

.user_avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: var(--medium);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--white);
}

#loading_screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999999999;
    flex-direction: column;
    gap: 20px;
}

#loading-spinner {
    border: 8px solid var(--white);
    border-top: 8px solid var(--accent);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 10px 2px var(--accent);
}

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

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

.pill_stake_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    height: 20px;
    border-radius: 3px;
    background-color: var(--medium);
    color: var(--white);
}

.pill_stake_amount {
    font-size: 11px;
    font-weight: 500;
}

.pill_stake_icon {
    font-size: 12px;
    color: var(--white);
}

.bet_resolved_at_pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
    padding: 0 6px;
    height: 20px;
    border-radius: 3px;
    background-color: var(--medium);
    font-size: 11px;
    font-weight: 550;
    gap: 4px;
}

.pill_direction_up {
    padding: 0 6px;
    height: 20px;
    border-radius: 3px;
    background-color: var(--medium);
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--accent);
    font-size: 11px;
    font-weight: 550;
}

.pill_direction_down {
    padding: 0 6px;
    height: 20px;
    border-radius: 3px;
    background-color: var(--medium);
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--accent2);
    font-size: 11px;
    font-weight: 550;
}

.tiny_pill_green {
    color: var(--accent);
    font-size: 11px;
}

.tiny_pill_red {
    color: var(--accent2);
    font-size: 11px;
}

.bet_history_card {
    cursor: pointer;
}

/* 2. Bouncing Dots */
#bouncing-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 10px;
    height: fit-content;
    width: 100px;
    border-radius: 50%;
}

.bouncing_dots_text {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent);
    animation: FadeInOutText 1.5s ease-in-out infinite;
    font-size: 14px;
    text-align: center;
}

@keyframes FadeInOutText {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.dot {
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    animation: bounce 1s infinite ease-in-out;
    box-shadow: 0 0 10px 2px var(--accent);
}

.dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

.loading_screen_version {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent);
    font-size: 12px;
    background-color: black;
    padding: 10px;
}

.bouncing_dots_text>.loading_screen_version {
    opacity: 1 !important;
    animation: none !important;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--medium);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    overflow: hidden;
}

.container img {
    height: 50vh;
    position: absolute;
    z-index: 0;
    opacity: 0.1;
    animation: zoom-in-out 3s ease-in-out infinite;
}

@keyframes zoom-in-out {
    0% {
        scale: 1;
    }

    50% {
        scale: 1.025;
    }

    100% {
        scale: 1;
    }
}

.content-wrapper {
    text-align: center;
    position: relative;
    width: calc(100% - 20px);
    height: 100%;
    background-color: var(--medium);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.text_lost {
    display: flex;
    flex-direction: column;
    z-index: 3;
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(90deg, #fb6182, #e35271, #c9526c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGlowRed 2s infinite;
    align-items: center;
    justify-content: center;
}

@keyframes textGlowRed {
    0% {
        text-shadow: 0 0 10px var(--accent2), 0 0 20px #ea00ff, 0 0 30px var(--accent2);
    }

    50% {
        text-shadow: 0 0 20px #dd247d, 0 0 40px #ff2fba, 0 0 50px #ac24dd;
    }

    100% {
        text-shadow: 0 0 10px var(--accent2), 0 0 20px #ea00ff, 0 0 30px var(--accent2);
    }
}

.text_resolution_subtitle {
    font-size: 16px;
    font-weight: 600;
}

.text_resolution_title {
    font-size: 28px;
    font-weight: 700;
}

.bet_cta_button {
    color: var(--white);
    background-color: var(--accent);
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: fit-content;
    height: 46px;
    padding-left: 50px;
    padding-right: 50px;
    cursor: pointer;
    font-weight: 500;
    transition: ease-in-out 0.3s;
    box-shadow: 0 0 2px 0px var(--accent);
    z-index: 1;
    outline: none;
    border: none;
    font-size: 16px;
    font-weight: 600;
}

.bet_cta_button:hover {
    box-shadow: 0 0 10px 0 var(--accent);
}

.thumbs_up {
    font-size: 50px;
    animation: bounce 1s infinite;
    background-color: transparent;
    padding: 10px;
    border-radius: 100px;
    z-index: 1;
    color: var(--accent);
    font-size: 64px;
}

.thumbs_down {
    font-size: 50px;
    animation: bounce 1s infinite;
    background-color: transparent;
    padding: 10px;
    border-radius: 100px;
    z-index: 1;
    color: var(--accent2);
    font-size: 64px;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.text_won {
    z-index: 3;
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(90deg, #2cea92, #00c676, #91ffcc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGlowGreen 2s infinite;
}

@keyframes textGlowGreen {
    0% {
        text-shadow: 0 0 10px #00acb7, 0 0 20px #0089ff, 0 0 30px #67ffd3;
    }

    50% {
        text-shadow: 0 0 20px #24ddd2, 0 0 40px #2fdbff, 0 0 50px #24ddb2;
    }

    100% {
        text-shadow: 0 0 10px #00acb7, 0 0 20px #0089ff, 0 0 30px #67ffd3;
    }
}

.subtext {
    font-size: 1.5rem;
    color: #aaaaaa;
    margin-top: 20px;
    animation: fadeIn 3s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    color: white;
}

.bet_overview_title_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.green {
    color: var(--accent);
}

.red {
    color: var(--accent2);
}

.container_pending {
    text-align: center;
}

.sand-clock {
    font-size: 50px;
    color: #32CDB3;
    text-shadow: 0 0 10px #32CDB3;
    display: inline-block;
    animation: rotateEmoji 2s linear infinite;
}

@keyframes rotateEmoji {
    0% {
        transform: rotate(0deg);
    }

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

.fade-text {
    margin-top: 20px;
    font-size: 24px;
    color: #32CDB3;
    font-weight: bold;
    text-shadow: 0 0 10px #32CDB3;
    animation: fadeInOut 2s infinite;
}

@keyframes fadeInOut {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

#bet_offer_tab .app_container_lg .app_section_title_wrapper_center div {
    font-weight: 600;
    font-size: clamp(20px, 4vw, 22px);
}

.coin {
    width: 200px;
    height: 300px;
    background: url(../img/coin_3.gif) no-repeat center center / contain;
    background-size: contain;
    z-index: 1;
}

.coin_lost {
    width: 200px;
    height: 300px;
    background: url(../img/coin_lost.gif) no-repeat center center / contain;
    background-size: contain;
    z-index: 1;
}

.bet_won_background {
    height: 100%;
    width: 100%;
    /* background: url(../img/confetti_coin.gif) no-repeat center center / cover, rgba(0, 0, 0, 0.5); */
    background-blend-mode: overlay;
}

.bet_won_text {
    font-size: 26px;
    font-weight: 600;
    color: var(--accent);
}

.bet_lost_text {
    font-size: 26px;
    font-weight: 600;
    color: var(--accent2);
}


.bet_container_main {
    text-align: center;
    border-radius: 6px;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(150, 150, 150, 0.2);
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.bet_icon_display {
    font-size: 36px;
    margin: 0 auto 15px auto;
    /* Centered with margin below */
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bet_win_container .bet_icon_display {
    color: #32CDB3;
    /* --accent */
}

.bet_lose_container .bet_icon_display {
    color: #FB6182;
    /* --accent2 */
}

h1 {
    color: #32CDB3;
    /* --accent for win */
    font-size: 36px;
    margin: 0 0 20px 0;
    position: relative;
    z-index: 2;
}

.bet_lose_container h1 {
    color: #FB6182;
    /* --accent2 for lose */
}

.bet_amount_text {
    color: #F8F8FF;
    font-size: 36px;
    font-weight: bold;
    position: relative;
    z-index: 2;
    margin: 10px 0 20px 0;
}

.bet_new_bet_button {
    background-color: #32CDB3;
    /* --accent */
    color: #0f0f0f;
    /* --black */
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s;
    position: relative;
    z-index: 2;
}

.bet_lose_container .bet_new_bet_button {
    background-color: #FB6182;
    /* --accent2 for lose */
}

.bet_new_bet_button:hover {
    background-color: #4BE8CE;
    /* Lighter accent variant */
    transform: scale(1.05);
}

.bet_lose_container .bet_new_bet_button:hover {
    background-color: #FF8A9F;
    /* Lighter accent2 variant */
}

.bet_celebration_layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.bet_win_background,
.bet_lose_background {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    opacity: 0.15;
}

.bet_win_background {
    background: radial-gradient(circle, #32CDB3 0%, transparent 70%);
}

.bet_lose_background {
    background: radial-gradient(circle, #FB6182 0%, transparent 70%);
}

.bet_won_title_text {
    font-size: 30px;
    color: var(--accent);
    position: relative;
    z-index: 2;
    font-weight: 600;
}

.bet_lost_title_text {
    font-size: 30px;
    color: var(--accent2);
    position: relative;
    z-index: 2;
    font-weight: 600;
}

.gift_animation {
    color: var(--accent);
    animation: iconbounce 1s infinite alternate ease-in-out;
}

.alert_animation {
    color: var(--accent2);
    animation: iconmoveRotate 2s infinite alternate ease-in-out;
}

@keyframes iconbounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

@keyframes iconmoveRotate {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    100% {
        transform: translateX(20px) rotate(15deg);
    }
}


/* ALERTS MODALS POP UP */
.swal2-container {
    height: 100vh;
    width: 100vw;
    max-height: 100vh;
    max-width: 100vw;
    z-index: 99999 !important;
}

.z-index-popup {
    z-index: 99999 !important;
    position: relative;
}

.swal2-image {
    width: 100%;
    height: 100%;
    max-height: 80vh;
    max-width: 100vw;
    object-fit: contain;
    cursor: pointer;
}