/* =========================================================
   101 EAST DIVE BAR
   FINAL STYLE.CSS
   BILINGUAL + MOVABLE CONTROLS + 6-BUTTON BOTTOM NAV
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    background: #050000;

    color: white;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   MAIN SITE
========================================================= */

.bar-site {
    position: relative;

    width: 100%;
    margin: 0 auto;

    overflow: hidden;

    background: #050000;
}

.site-background {
    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}


/* =========================================================
   INVISIBLE HOTSPOTS
========================================================= */

.hotspot {
    position: absolute;

    display: block;

    border: none;
    outline: none;

    background: transparent;

    cursor: pointer;

    z-index: 50;

    pointer-events: auto;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;
}

.hotspot:hover {
    background:
        rgba(255, 40, 40, 0.08);
}


/* =========================================================
   HOTSPOT POSITIONS
========================================================= */

.about-hotspot {
    top: 10.5%;
    left: 4%;

    width: 43%;
    height: 8%;
}

.hours-hotspot {
    top: 10.5%;
    left: 52%;

    width: 44%;
    height: 8%;
}

.cocktails-hotspot {
    top: 20%;
    left: 3%;

    width: 46%;
    height: 15%;
}

.beers-hotspot {
    top: 20%;
    left: 51%;

    width: 46%;
    height: 15%;
}

.shots-hotspot {
    top: 36%;
    left: 3%;

    width: 94%;
    height: 8%;
}

.games-hotspot {
    top: 45%;
    left: 3%;

    width: 94%;
    height: 12%;
}

.events-hotspot {
    top: 58%;
    left: 3%;

    width: 46%;
    height: 10%;
}

.weekly-one-hotspot {
    top: 58%;
    left: 51%;

    width: 46%;
    height: 10%;
}

.weekly-two-hotspot {
    top: 69%;
    left: 3%;

    width: 46%;
    height: 10%;
}

.location-hotspot {
    top: 81%;
    left: 3%;

    width: 46%;
    height: 8%;
}

.instagram-hotspot {
    top: 81%;
    left: 51%;

    width: 46%;
    height: 8%;
}


/* =========================================================
   MOVABLE LANGUAGE SWITCH
========================================================= */

.floating-language {
    position: fixed;

    top: 8px;
    right: 8px;

    display: inline-flex;

    align-items: center;

    gap: 3px;

    width: max-content;

    padding: 3px;

    border:
        1px solid
        rgba(255, 190, 60, 0.72);

    border-radius: 999px;

    background:
        rgba(8, 0, 0, 0.95);

    box-shadow:
        0 0 10px
        rgba(255, 30, 30, 0.42);

    z-index: 10000;
}

.language-button {
    min-width: 31px;

    padding: 6px 7px;

    border: none;

    border-radius: 999px;

    background: transparent;

    color: white;

    font-size: 9px;

    font-weight: 900;

    cursor: pointer;
}

.language-button.active {
    color: #160000;

    background:
        linear-gradient(
            135deg,
            #ffd65f,
            #ff3c25
        );
}

.drag-handle {
    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(255, 70, 50, 0.55);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.04);

    color: #ffd25a;

    font-size: 12px;

    cursor: grab;

    touch-action: none;

    user-select: none;
}

.drag-handle:active {
    cursor: grabbing;
}


/* =========================================================
   MOVABLE DELIVERY BUTTON
========================================================= */

.floating-delivery {
    position: fixed;

    right: 8px;
    bottom: 72px;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    width: max-content;

    max-width: 190px;

    padding: 4px;

    border:
        1px solid
        rgba(255, 196, 65, 0.68);

    border-radius: 12px;

    background:
        rgba(35, 0, 0, 0.96);

    box-shadow:
        0 0 12px
        rgba(255, 20, 20, 0.50);

    z-index: 9000;
}

.floating-delivery-link {
    display: flex;

    align-items: center;

    gap: 5px;

    padding:
        5px 7px;

    color: white;

    text-decoration: none;

    border-radius: 8px;
}

.floating-delivery-link span {
    font-size: 14px;
}

.floating-delivery-link strong {
    color: #ffd25a;

    font-size: 8px;

    line-height: 1.15;

    letter-spacing: 0.35px;
}

.delivery-drag-handle {
    width: 24px;
    height: 24px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(255, 80, 50, 0.55);

    border-radius: 50%;

    background: transparent;

    color: #ffd25a;

    font-size: 11px;

    cursor: grab;

    touch-action: none;

    user-select: none;
}

.delivery-drag-handle:active {
    cursor: grabbing;
}


/* =========================================================
   POPUP
========================================================= */

.info-modal {
    display: none;

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    padding: 15px;

    align-items: center;
    justify-content: center;

    z-index: 20000;
}

.info-modal.active {
    display: flex;
}

.modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.90);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);
}

.info-panel {
    position: relative;

    z-index: 2;

    width:
        min(
            94vw,
            520px
        );

    max-height: 88vh;

    overflow-y: auto;

    padding:
        36px 22px
        24px;

    border:
        1px solid
        rgba(255, 200, 70, 0.75);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #090303,
            #320505,
            #080202
        );

    box-shadow:
        0 0 30px
        rgba(255, 25, 25, 0.28);
}

.modal-brand {
    margin-bottom: 12px;

    color: #d8ad4f;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}

.modal-brand span {
    display: inline-flex;

    width: 30px;
    height: 30px;

    align-items: center;
    justify-content: center;

    margin-right: 6px;

    border:
        1px solid
        #d8ad4f;

    border-radius: 50%;

    color: #ffd55f;
}

.info-panel h2 {
    margin-bottom: 10px;

    color: #ffd15d;

    font-size:
        clamp(
            24px,
            7vw,
            38px
        );

    text-transform: uppercase;
}

.modal-description {
    margin-bottom: 17px;

    color: #e6d8ca;

    font-size: 14px;

    line-height: 1.6;
}

.modal-content {
    display: grid;

    gap: 9px;
}

.modal-item {
    padding:
        11px
        13px;

    border-left:
        3px solid
        #d52b28;

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.035);

    font-size: 13px;

    line-height: 1.45;
}

.modal-item strong {
    display: block;

    margin-bottom: 3px;

    color: #ffd25f;
}

.modal-close {
    position: absolute;

    top: 8px;
    right: 10px;

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: none;

    background: transparent;

    color: #ffd25f;

    font-size: 30px;

    cursor: pointer;

    z-index: 10;
}


/* =========================================================
   HIDE FLOATING BUTTONS WHILE POPUP IS OPEN
========================================================= */

body.modal-open .floating-language,
body.modal-open .floating-delivery {
    display: none !important;
}


/* =========================================================
   6-BUTTON BOTTOM NAV
========================================================= */

.quick-actions {
    position: fixed;

    left: 50%;
    bottom: 7px;

    transform: translateX(-50%);

    width:
        min(
            96vw,
            520px
        );

    display: grid;

    grid-template-columns:
        repeat(
            6,
            1fr
        );

    gap: 2px;

    padding: 4px;

    border:
        1px solid
        rgba(255, 200, 70, 0.40);

    border-radius: 15px;

    background:
        rgba(8, 0, 0, 0.95);

    box-shadow:
        0 0 14px
        rgba(255, 25, 25, 0.35);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    z-index: 8000;
}

.quick-action {
    min-width: 0;

    min-height: 48px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 2px;

    padding: 4px 1px;

    border: none;

    border-radius: 9px;

    background: transparent;

    color: #ffd15c;

    text-decoration: none;

    cursor: pointer;

    font-family: inherit;

    -webkit-tap-highlight-color: transparent;
}

.quick-action:hover,
.quick-action:active {
    background:
        rgba(180, 0, 0, 0.25);
}

.quick-action span {
    font-size: 16px;

    line-height: 1;
}

.quick-action small {
    max-width: 100%;

    overflow: hidden;

    color: #f6eadc;

    font-size: 6.5px;

    font-weight: 900;

    letter-spacing: 0.3px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .floating-language {
        top: 7px;
        right: 7px;
    }

    .floating-delivery {
        right: 7px;
        bottom: 67px;

        max-width: 175px;
    }

    .info-panel {
        width: 96vw;

        padding:
            34px
            17px
            22px;
    }

    .modal-description {
        font-size: 13px;
    }

    .modal-item {
        font-size: 12px;
    }

}


@media (max-width: 390px) {

    .quick-actions {
        width: 98vw;
    }

    .quick-action span {
        font-size: 14px;
    }

    .quick-action small {
        font-size: 5.8px;

        letter-spacing: 0;
    }

}


/* =========================================================
   DEBUG MODE
========================================================= */

/*

If we need to see where the invisible
hotspots are, uncomment this:

.hotspot {
    background: rgba(255, 0, 0, 0.25) !important;
    outline: 2px solid red !important;
}

*/