@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    color: #FFFFFF;
    background-color: #0e0e0e;
    --bs-body-color: #FFFFFF;
    --bs-body-bg: #0e0e0e;
}

h3, .h3 {
    font-weight: 600;
}
.btn,
.form-control {
    border-radius: 0.2rem;
}
.form-control:not(.search-form .form-control),
.form-control:not(.search-form .form-control):focus {
    background-color: #FFF;
    color:#131313;
}

/** header **/
.navbar-dark .navbar-nav .nav-link {
    color: #FFFFFF;
    text-transform: uppercase;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.search-icon:hover, .search-icon:focus,
.search-form #button-search:hover, .search-form #button-search:focus {
    color: #1ec8df;
}

.navbar-toggler, .navbar-toggler:focus {
    border: none;
    box-shadow: none;
    color: #FFF;
}

@media (max-width: 450px) {
    .navbar .navbar-toggler {
        padding-left: 0 !important;
    }
    .navbar a.btn-danger {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important;
        padding-right: .5rem !important;
        padding-left: .5rem !important;
    }
}

/** footer **/
footer,
footer a,
footer small a {
    color: #FFF;
}

footer a:hover,
footer a:focus{
    color: #1ec8df;
    text-decoration: none;
}

/** colors **/
a:not(.btn, .navbar-dark *, footer *) {
    color: #e2dbcf;
    text-decoration: none;
}
a:not(.btn, .navbar-dark *, footer *):hover,
a:not(.btn, .navbar-dark *, footer *):focus {
    color: #45c9d5;
    text-decoration: underline;
}

.text-danger {
    color: #1ec8df !important;
}

.bg-dark {
    background-color: #131313 !important;
}
.bg-primary {
    background-color: #3bacb6 !important;
}

.btn-danger {
    background-color: #3bacb6;
    border-color: #3bacb6;
}
.btn-secondary {
    color: #FFFFFF !important;
    background-color: #45c9d5 !important;
    border-color: #45c9d5 !important;
}
.btn-outline-secondary {
    color: #FFFFFF !important;
    background-color: #0e0e0e;
    border-color: #FFFFFF;
}
.btn-outline-secondary:hover,
.btn-danger:hover {
    color: #FFFFFF !important;
    background-color: #45c9d5;
    border-color: #45c9d5;
}

/** content **/
i.vote {
    color: rgba(255,255,255,0.8);
}
i.vote:hover, i.vote-active {
    color: #1ec8df;
}
.crumbs .crumbs-last {
  color: rgba(255, 255, 255, 0.6);
}

/* pagination */
.pagination .page-link {
    border: 1px solid #FFFFFF;
    background: #0e0e0e;
    color: #FFFFFF;
    border-radius: 0.2rem !important;
    font-weight: normal;
}

.pagination .page-item.prev-next .page-link:not(:hover) {
    border: 1px solid transparent;
}

.pagination .page-item:not(.active) .page-link:hover,
.pagination .page-item:not(.active) .page-link:focus,
.pagination .page-item.prev-next:not(.active) .page-link:focus {
    border-color: #1ec8df;
    color: #FFF;
    background: #1ec8df;
}

.pagination .active > .page-link,
.pagination .page-link.active {
    background-color: #45c9d5;
    border-color: #45c9d5;
}

/** dropdowns is dark **/
.dropdown-menu {
  --bs-dropdown-color: #dee2e6;
  --bs-dropdown-bg: #343a40;
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-box-shadow: ;
  --bs-dropdown-link-color: #dee2e6;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #45c9d5;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-header-color: #adb5bd;
}

/** other **/
@media (min-width: 1200px) {
    .col-xl-5-1 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/*** tooltip ***/
.tooltip-inner {
    --bs-tooltip-color:#FFF;
    --bs-tooltip-bg: #343a40;
}

/*** index temp countdown ***/
#countdown-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#countdown-container {
    height: 460px;
    overflow-x: hidden;
}
#countdown-video {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%; /* Відео завжди займає всю висоту контейнера */
    width: auto; /* Ширина адаптується автоматично */
    transform: translate(-50%, -50%); /* Відцентровуємо відео по обидвом осям */
    z-index: 1;
}
.countdown-content {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 145px;
    z-index: 2;
}
.countdown-content .h4,
.countdown-content .countdown-field {
    text-transform: uppercase;
}
.countdown-field .fs-1 {
    font-size: 3rem !important;
    line-height: 3rem;
    font-weight: bold;
}
.countdown-start {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    margin-right: 0.5rem;
}
.countdown-end {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    margin-left: 0.5rem;
}
.countdown-start,
.countdown-end {
    height: 8px;
    width: 200px;
    margin-top: 1rem;
}

/*** age-check modal ***/
.age-modal {
    width: 80%;
    min-width: 350px;
    max-width: 600px;
    margin: auto;
}
.age-modal *{
    border-color: #67696b !important;
}

.age-modal .main-modal {
    color: #b8b9bb;
}

.age-modal .bottom-text {
    color: #7f8285;
}

.age-modal p,
.age-modal span{
    font-size: 13px;
}

.age-modal #agreement-text {
    max-height: 15lvh;
    overflow-y: auto;
}

/* Custom scrollbar for agreement text on desktop */
.age-modal #agreement-text {
    scrollbar-width: thin;
    scrollbar-color: #000000a4 rgba(255, 255, 255, 0.1);
}

.age-modal #agreement-text::-webkit-scrollbar {
    width: 8px;
}

.age-modal #agreement-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.age-modal #agreement-text::-webkit-scrollbar-thumb {
    background: #00000011;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.age-modal #agreement-text::-webkit-scrollbar-thumb:hover {
    background: #00000046;
}