@import url('https://fonts.cdnfonts.com/css/gang-of-three');

:root {
    --blue-color: #27F0F1;
    --yellow-color: #FFD605;
    --pink-color: #DA069E;
    --dark-blue-color: #2D84F2;
    --cyan-color: #1BD8DA;
    --background-color: #0F0317;
    --text-color: #fff;
    --gray-color: #7f8c8d;
    --green-color: #34EF06;
    --red-color: #FF365F;
    --shadow-color-48: rgba(255, 214, 5, 1);
    --shadow-color-49: rgba(218, 6, 158, 1);
    --shadow-color-50: rgba(45, 132, 242, 1);
    --shadow-color-51: rgba(27, 216, 218, 1);
    --shadow-color-55: rgba(52, 239, 6, 1);
    --shadow-color-54: rgba(255, 54, 95, 1);

    --color-background: #0F0317;
    --color-text: #FFFFFF;
    --color-primary: #1BD8DA;
    --color-secondary: #EF07AD;
    --color-nav-border: #173D52;
    --color-nav-bg: #191D37;
    --font-size-base: 16px;
    --line-height-base: 30px;
    /*--transition-default: all 0.2s ease-in-out;*/
    --glow-effect: 0 0 100px -5px var(--color-primary);
}

html, body {
    background: var(--background-color);
}

h1, h2, h3, .gang {
    font-family: 'Gang of Three', sans-serif;
}

.time {
    font-size: 26px;
}

.persons, .gray {
    font-size: 12px;
    font-weight: 300;
    color: var(--gray-color);
}

.place-name {
    color: var(--text-color);
    font-size: 48px;
}

.hover-lines {
    position: relative;
    display: block;
    padding: 40px;
}

.hover-lines .content {
    color: var(--text-color);
    text-decoration: none;
    position: absolute;
    bottom: 80px;
    left: 80px;
    z-index: 199;
}

.persons-input {
    border: 1px solid #fff;
}

.hover-lines img {
    position: relative;
    z-index: 100;
    transition: opacity 0.1s ease, box-shadow 0.1s ease;
    box-shadow: 0 0 0 rgba(39, 240, 241, 0.5);
}

.hover-lines:hover img {
    box-shadow: 0 0 75px var(--blue-color);
}

.hover-lines .hidden-line {
    opacity: 0;
    display: block;
    position: absolute;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    outline: 3px solid var(--blue-color);
}

.hover-lines:hover .hidden-line {
    opacity: 1;
}

.modal.color-48 h1,
.modal.color-48 h2,
.modal.color-48 h3,
.modal.color-48 h4,
.modal.color-48 h5,
.modal.color-48 p,
.modal.color-48 a,
.modal.color-48 span,
.modal.color-48 label,
.modal.color-48 button,
.modal.color-48 div,
.modal.color-48 input,
.modal.color-48 input[type="submit"],
.modal.color-48 input::placeholder,
.modal.color-48 .gang
{
    color: #000 !important;
}

.hidden-line.first {
    top: 50px;
    left: 50px;
}

.hidden-line.second {
    top: 60px;
    left: 60px;
}

h1 {
    font-size: 100px;
}

.slot {
    position: relative;
    text-align: center;
    /*border-radius: 1px;*/
    color: var(--text-color);
    padding: 30px 40px !important;
    box-shadow: 0 0 39px 0 rgba(255, 214, 5, 0.2);
}

@media screen and (min-width: 768px) {
    .place-row {
        height: 175px;
    }
}

.cursor-pointer {
    cursor: pointer;
}

.place-48 .slot, .place-61 .slot {
    outline: 3px solid var(--yellow-color);
    /*box-shadow: 0 0 39px 0 var(--shadow-color-48) !important;*/
    transition: box-shadow 0.2s ease-in-out;
}

.place-48 .slot:hover, .place-61 .slot:hover {
    /*background-color: rgba(255, 214, 5, 0.5) !important;*/
    background: rgb(191, 161, 20);  /* A deeper golden yellow */
    box-shadow: 0 0 39px 0 var(--shadow-color-48) !important;
}

.place-49 .slot, .place-62 .slot {
    outline: 3px solid var(--pink-color);
    /*box-shadow: 0 0 39px 0 var(--shadow-color-49) !important;*/
    transition: box-shadow 0.2s ease-in-out;
}

.place-49 .slot:hover, .place-62 .slot:hover {
    /*background: rgba(218, 6, 158, 0.5);*/
    background: rgb(138, 28, 107);  /* A deep, rich magenta/pink */

    box-shadow: 0 0 39px 0 var(--shadow-color-49) !important;
}

.place-50 .slot, .place-63 .slot {
    outline: 3px solid var(--dark-blue-color);
    /*box-shadow: 0 0 39px 0 var(--shadow-color-50);*/
    transition: box-shadow 0.2s ease-in-out;
}

.place-50 .slot:hover, .place-63 .slot:hover {
    /*background: rgba(45, 132, 242, 0.5);*/
    background: rgb(41, 65, 140);  /* A solid deep navy blue color */

    box-shadow: 0 0 39px 0 var(--shadow-color-50) !important;
}

.place-51 .slot, .place-64 .slot {
    outline: 3px solid var(--cyan-color);
    /*box-shadow: 0 0 39px 0 var(--shadow-color-51);*/
    transition: box-shadow 0.2s ease-in-out;
}

.place-51 .slot:hover, .place-64 .slot:hover {
    /*background: rgba(27, 216, 218, 0.5);*/
    background: rgb(20, 142, 143);  /* A deep cyan/teal */
    box-shadow: 0 0 39px 0 var(--shadow-color-51) !important;
}

.place-54 .slot, .place-65 .slot {
    outline: 3px solid var(--red-color);
    /*box-shadow: 0 0 39px 0 var(--shadow-color-54);*/
    transition: box-shadow 0.2s ease-in-out;
}

.place-54 .slot:hover, .place-65 .slot:hover {
    /*background: rgba(255, 54, 95, 0.5);*/
    background: rgb(179, 45, 70);  /* A deeper solid red */

    box-shadow: 0 0 39px 0 var(--shadow-color-54) !important;
}

.place-55 .slot {
    outline: 3px solid var(--green-color);
    /*box-shadow: 0 0 39px 0 var(--shadow-color-55);*/
    transition: box-shadow 0.2s ease-in-out;
}

.place-55 .slot:hover {
    /*background: rgba(52, 239, 6, 0.5);*/
    background: rgb(45, 156, 20);  /* A deeper solid green */

    box-shadow: 0 0 39px 0 var(--shadow-color-55) !important;
}

.slot {
    position: relative;
}

.slot::after {
    content: '';
    position: absolute;
    inset: -3px;  /* Match the original outline width */
    border: 3px solid transparent;
    z-index: -1;
    transform: translate(10px, 10px);  /* Offset the second border */
    /*transition: border-color 0.2s ease-in-out;*/
    pointer-events: none;
}

.place-48 .slot:hover::after, .place-61 .slot:hover::after {
    border-color: var(--yellow-color);
}

.place-49 .slot:hover::after, .place-62 .slot:hover::after {
    border-color: var(--pink-color);
}

.place-50 .slot:hover::after, .place-63 .slot:hover::after {
    border-color: var(--dark-blue-color);
}

.place-51 .slot:hover::after, .place-64 .slot:hover::after {
    border-color: var(--cyan-color);
}

.place-54 .slot:hover::after, .place-65 .slot:hover::after {
    border-color: var(--red-color);
}

.place-55 .slot:hover::after {
    border-color: var(--green-color);
}

.modal-fw {
    width: 100%;
    max-width: 100%;
    padding-right: 0 !important;
}

.modal-fw .modal-dialog {
    max-width: 100% !important;
    margin: 0;
}

.modal-fw .modal-content {
    border-radius: 0;
    height: 100vh;
}

.modal-content {
    background: none;
}

.color-48 .big-shadow, .color-61 .big-shadow {
    background-color: var(--yellow-color);
    box-shadow: 0 0 100px var(--shadow-color-48);
}

.color-49 .big-shadow, .color-62 .big-shadow {
    background-color: var(--pink-color);
    box-shadow: 0 0 100px var(--shadow-color-49);
}

.color-50 .big-shadow, .color-63 .big-shadow {
    background-color: var(--dark-blue-color);
    box-shadow: 0 0 100px var(--shadow-color-50);
}

.color-51 .big-shadow, .color-64 .big-shadow {
    background-color: var(--cyan-color);
    box-shadow: 0 0 100px var(--shadow-color-51);
}

.color-54 .big-shadow {
    background-color: var(--red-color);
    box-shadow: 0 0 100px var(--shadow-color-54);
}

.color-55 .big-shadow {
    background-color: var(--green-color);
    box-shadow: 0 0 100px var(--shadow-color-55);
}

.finalCheckBtn .finalCheck {
    position: relative;
    z-index: 999;
    background: var(--yellow-color) !important;
}

.color-48 .finalCheckBtn .finalCheck,
.color-61 .finalCheckBtn .finalCheck {
    background: var(--yellow-color) !important;
}

.color-49 .finalCheckBtn .finalCheck,
.color-62 .finalCheckBtn .finalCheck {
    background: var(--pink-color) !important;
}

.color-50 .finalCheckBtn .finalCheck,
.color-63 .finalCheckBtn .finalCheck {
    background: var(--dark-blue-color) !important;
}

.color-51 .finalCheckBtn .finalCheck,
.color-64 .finalCheckBtn .finalCheck {
    background: var(--cyan-color) !important;
}

.color-54 .finalCheckBtn .finalCheck {
    background: var(--red-color) !important;
}

.color-55 .finalCheckBtn .finalCheck {
    background: var(--green-color) !important;
}

.finalCheck {
    border: 2px solid var(--text-color) !important;
    color: var(--text-color) !important;
    width: 100%;
    padding: 10px 0;
}

.finalCheckBtn .line {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--text-color);
    top: 5px;
    left: 5px;

    &:nth-child(2) {
        top: 10px;
        left: 10px;
    }
}

.special-form input {
    border-radius: 0;
    border: none;
    background: none !important;
    border-bottom: 2px solid var(--text-color);
    color: #fff !important;
}

.input-group-text {
    background: none;
    border: none;
    border-bottom: 2px solid var(--text-color);
    border-radius: 0;
    width: 100px;
}

.special-form input::placeholder {
    color: var(--text-color);
}

.distorted-bg {
    position: relative; /* Ensure relative positioning for the ::before pseudo-element */
    opacity: 1; /* Reset opacity to 1 for the background */
}


.distorted-bg img {
    position: relative;
    z-index: 1;
    opacity: 1;
}

.distorted-bg::after {
    content: ''; /* Required for pseudo-elements */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/noise.jpg); /* Background image */
    opacity: 0.5; /* Adjust the opacity as needed for the overlay */
}

.color-48 .distorted-bg::before, .bg-48,
.color-61 .distorted-bg::before, .bg-62 {
    background-color: var(--yellow-color); /* Adjust to the desired overlay color */
}

.color-48 .distorted-bg img,
.color-61 .distorted-bg img {
    box-shadow: 0 0 100px var(--yellow-color);
}

.color-49 .distorted-bg::before, .bg-49,
.color-62 .distorted-bg::before, .bg-62 {
    background-color: var(--pink-color); /* Adjust to the desired overlay color */
}

.color-49 .distorted-bg img,
.color-62 .distorted-bg img {
    box-shadow: 0 0 100px var(--pink-color);
}

.color-50 .distorted-bg::before, .bg-50,
.color-63 .distorted-bg::before, .bg-63 {
    background-color: var(--dark-blue-color); /* Adjust to the desired overlay color */
}

.color-50 .distorted-bg img,
.color-63 .distorted-bg img {
    box-shadow: 0 0 100px var(--dark-blue-color);
}

.color-51 .distorted-bg::before, .bg-51,
.color-64 .distorted-bg::before, .bg-64 {
    background-color: var(--cyan-color); /* Adjust to the desired overlay color */
}

.color-51 .distorted-bg img,
.color-64 .distorted-bg img {
    box-shadow: 0 0 100px var(--cyan-color);
}

.divider {
    height: 1px;
    background: var(--text-color);
    width: 100%;
}

.datepicker-baraoke {
    display: inline;
    background: none;
    border: none !important;
    outline: none;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    margin-left: -5px;
}

.clickableDate {
    padding: 5px 5px;
    display: inline-block;
    border: 1px solid #fff;
    text-decoration: none !important;
    text-align: center;
    max-width: 100px;
    margin-right: 10px;
    /*transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; !* Specify transition properties *!*/

}

.clickableDate:hover, .clickableDate.active {
    background: #ACFEF6;
    color: #333 !important;
    box-shadow: 0 0 50px var(--cyan-color);
    border: none;
}

.slot.closed {
    opacity: 0.5;
}

.slot.closed {
    cursor: default !important;
}

.slot.closed div {
    display: none;
}

.fullHolder {
    display: none;
}

.slot.closed div.fullHolder {
    display: block;
    text-align: center;
    padding: 23px 0;
}

.slot.closed {
    padding: 0 !important;
    box-shadow: none !important;
}

.clickableDate {
    padding: 5px 15px;
}

@media screen and (max-width: 900px) {
    .swiper-wrapper {
        padding-top: 50px;
        height: 140px !important;
    }

    .swiper-slide {
        width: 200px !important;
        height: 150px;
        margin-right: 30px;
    }

    .swiper {
        padding: 0 40px !important;
    }

    .slot {
        width: 200px;
        padding: 15px !important;
    }

    .select-date-container {

    }

    .mobile-no-px {
        padding: 0 5px !important;
    }

    .slot.closed div.fullHolder {
        padding: 7px 0 !important;
    }

    .hidden-mobile  {
        display: none;
    }

    .datepicker-baraoke {
        width: 123px !important;
    }
}

@media screen and (min-width: 901px) {
    .swiper-wrapper {
        height: 300px !important;
        padding-top: 50px;
    }

    .swiper {
        padding: 0 50px !important;
    }

    .slot {
       padding: 40px;
    }

    .mt-md-75 {
        margin-top: 75px;
    }
}


/**

 */
.main-navigation ul {
    display: flex;
}

.main-navigation ul li {
    margin-top: 52px;
}

.main-navigation ul li:nth-child(1) { margin-top: 0; }
.main-navigation ul li:nth-child(2) {
    margin-top: 46px;
    margin-left: -2px;
}
.main-navigation ul li:nth-child(3) {
    margin-top: 92px;
    margin-left: -2px;
}

/* Wrapper to constrain borders */
.link-wrapper {
    position: relative;
    display: inline-block;
}

.link-wrapper a {
    color: #fff !important;
    text-decoration: none;
}

/* Main navigation item */
.main-navigation a {
    border: 2px solid var(--color-nav-border);
    padding: 10px 20px;
    display: inline-block;
    background: var(--color-nav-bg);
    transition: var(--transition-default);
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Stacked borders on wrapper */
.link-wrapper::before,
.link-wrapper::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 2px solid var(--color-primary);
    transition: var(--transition-default);
    opacity: 0;
    z-index: -1;
}

/* Hover effects */
.main-navigation a:hover,
.current_page_item a {
    border-color: var(--color-primary);
    box-shadow: var(--glow-effect);
    background: var(--color-nav-bg);
}

.link-wrapper:hover::before,
.current_page_item .link-wrapper::before {
    transform: translate(5px, 5px);
    opacity: 1;
    box-shadow: var(--glow-effect);
}

.link-wrapper:hover::after,
.current_page_item .link-wrapper::after {
    transform: translate(10px, 10px);
    opacity: 1;
    box-shadow: var(--glow-effect);
}

/* Force hover background colors for all variants */
.forceHover.bg-61 {
    background-color: rgba(255, 214, 5, 0.5) !important;  /* Yellow */
}

.forceHover.bg-62 {
    background-color: rgba(218, 6, 158, 0.5) !important;  /* Pink */
}

.forceHover.bg-63 {
    background-color: rgba(45, 132, 242, 0.5) !important;  /* Dark blue */
}

.forceHover.bg-64 {
    background-color: rgba(27, 216, 218, 0.5) !important;  /* Cyan */
}

.forceHover.bg-65 {
    background-color: rgba(255, 54, 95, 0.5) !important;  /* Red */
}

/* Additional force hover classes for original number series */
.forceHover.bg-48 {
    background-color: rgba(255, 214, 5, 0.5) !important;  /* Yellow */
}

.forceHover.bg-49 {
    background-color: rgba(218, 6, 158, 0.5) !important;  /* Pink */
}

.forceHover.bg-50 {
    background-color: rgba(45, 132, 242, 0.5) !important;  /* Dark blue */
}

.forceHover.bg-51 {
    background-color: rgba(27, 216, 218, 0.5) !important;  /* Cyan */
}

.forceHover.bg-54 {
    background-color: rgba(255, 54, 95, 0.5) !important;  /* Red */
}

.forceHover.bg-55 {
    background-color: rgba(52, 239, 6, 0.5) !important;  /* Green */
}


.location-block {
    color: #fff;
}

.relative {
    position: relative;
}

.location-selector {
    padding: 10px 20px;
    border: 2px solid #173D52;
    text-align: center;

    .current-item {
        text-align: center
    }

    .sub-nav {
        padding: 10px 20px;
        border: 2px solid #173D52;
        text-align: center;
        left: -2px;
        width: 103%;
        top: 44px;
        z-index: 999;
    }
}

.sub-nav:hover {
    background: #173D52;
}

.nice-button-a {
    border: 2px solid var(--color-nav-border);
    padding: 10px 20px;
    display: inline-block;
    background: var(--color-nav-bg);
    transition: var(--transition-default);
    text-align: center;
    position: relative;
    z-index: 2;
}

/*.price.persons {*/
/*    color:#fff;*/
/*}*/