@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root {
    --main-orange: rgb(211, 106, 8);
    --container-background: rgba(28, 28, 28, 0.6);
    --container-background-hover: rgb(31, 31, 31, 0.75);
    --component-background: rgb(37, 37, 37, 0.7);
    --component-background-hover: rgb(48, 48, 48, 0.75);
    --button-background: rgba(39, 39, 39, 0.6);
    --text-color: white;
    --background: rgb(20, 20, 20);
    --button-active: rgb(211, 106, 8);

    --container-bg: rgba(28, 28, 28, 0.75);
    --container-hover-bg: rgba(30, 30, 30, 0.75);

    --component-bg: rgba(32, 32, 32, 0.75);
    --component-hover-bg: rgba(34, 34, 34, 0.75);

    --component-d-bg: rgba(22, 22, 22, 0.75);
    --component-d-hover-bg: rgba(24, 24, 24, 0.75);

    --input-bg: rgba(38, 38, 38, 0.9);
    --input-hover-bg: rgba(211, 106, 8, 0.9);



/*         --main-orange: rgb(211, 106, 8);
    --container-background: rgb(28, 28, 28);
    --container-background-hover: rgb(31, 31, 31);
    --component-background: rgb(37, 37, 37);
    --component-background-hover: rgb(48, 48, 48);
    --button-background: rgb(46, 46, 46);
    --text-color: white;
    --background: rgb(20, 20, 20);
    --button-active: rgb(211, 106, 8); */


/*     --container-background: rgb(222, 222, 222);
    --container-background-hover: rgb(227, 227, 227);
    --component-background: rgb(230, 230, 230);
    --component-background-hover: rgb(235, 235, 235);
    --button-background: rgb(240, 240, 240);
    --text-color: black;
    --background: rgb(248, 248, 248);
    --button-active: rgba(212, 115, 25, 0.568); */


}

.modalOpen{
    display: flex !important;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalPopUp {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.03);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}



body.no-scroll {
  overflow: hidden;
}





.WGLoader{
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid #C6A96E; 
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


*{
    font-family: "Rajdhani", sans-serif;
    font-optical-sizing: auto;
    margin:0;
    padding:0;
    user-select: none;
    transition: all 0.1s;
}



/* ===============================
   Firefox
   =============================== */
* {
    scrollbar-width: 20px;
    scrollbar-color: var(--main-orange) rgba(0,0,0,0.05);
}

/* ===============================
   WebKit (Chrome, Edge, Safari)
   =============================== */
*::-webkit-scrollbar {
    width: 25px;
    height: 25px;
}

*::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); /* průhledné pozadí */
}

*::-webkit-scrollbar-thumb {
    background: var(--main-orange);
    border-radius: 20px;
    border: 5px solid transparent; /* odsazení */
}

*::-webkit-scrollbar-thumb:hover {
    background: #ff9900; /* tmavší při hover */
}

/* Odstranění šipek na koncích scrollbaru */
*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

body{
    /* background: linear-gradient(135deg, #0f0f0f, #18130d, #0f0f0f, #18130d,#0f0f0f, #18130d); */
    min-height: 100vh;
    height: 100%;
    position: relative;
    color: var(--text-color) !important;
}

.bg {
    width: 100%;
    height: 100%;
    min-height: 100vh;

    background: linear-gradient(135deg,
        #18130d 0%,
        #0f0f0f 12.5%,
        #18130d 25%,
        #0f0f0f 37.5%,
        #18130d 50%,
        #0f0f0f 62.5%,
        #18130d 75%,
        #0f0f0f 87.5%,
        #18130d 100%
    );

    background-size: 250% 250%;
    transition: background-position 13.0s cubic-bezier(0.22, 1, 0.36, 1);
}



a{
    color: var(--text-color) !important;
}

input{
    color: var(--text-color) !important;
}

.button-active{
    background-color: var(--button-active) !important;
    font-weight: 800;
}

*:focus{
    outline: none !important;
}

input{
    border: none;
}

.schovej{ 
    display: none !important;
}



.loading{
    width:100%;
    /* background-color: var(--container-background); */
    padding: 50px 0;
    margin: 25px auto 25px auto;
    border-radius: 0.25rem;
  }
  
  .loading-kolecko{
    border: 8px solid var(--button-background); 
    border-top: 8px solid var(--main-orange); 
    border-radius: 50%; 
    width: 60px;
    height: 60px;
    margin: 0 auto;
    animation: spin 0.8s linear infinite; 
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .popup {
    position: fixed;
    top: 20px;
    right: 20px;
    color: white;
    font-weight: 600;
    font-size: 20px;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0; /* Neviditelné na začátku */
    visibility: hidden; /* Skryté na začátku */
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1000; /* Nad ostatními prvky */
  }
  
  .popup.show {
    opacity: 1; /* Viditelné */
    visibility: visible;
  }

  .green {
    background-color: #4caf50; /* Zelená barva pro úspěch */
  }

  .red{
    background-color: #af4c4c; /* Zelená barva pro úspěch */
  }

  .button-hover-main:hover{
    background-color: var(--main-orange);
  }