/* https://chatgpt.com/share/68116b5e-e054-8006-a2d4-7165f1e02787 */

#floor-plan {
    display: grid;
    grid-template-columns: repeat(5, 100px);
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}
.booth {
    width: 100px;
    height: 100px;
    background: #257361;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    border-radius: 8px;
    transition: .3s all;
}
.booth:hover {
    background: #9a6a12;
}

.booth.reserved {
    background: #ccc;
    pointer-events: none;
    color: #666;
}

.modal {
display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; max-width: 400px;
}
.close {
    float: right;
    font-size: 24px;
    cursor: pointer;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Basic styling for the floor plan, reservation modal, and cancel form */
#cancel-external-container {
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

#cancel-toggle-btn {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
}

#cancel-toggle-btn:hover {
    background-color: #e53935;
}

#cancel-form-wrapper {
    margin-top: 10px;
}

#cancel-form label {
    font-size: 14px;
}

#cancel-form input[type="number"],
#cancel-form input[type="email"] {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    font-size: 14px;
}

#cancel-form input[type="submit"] {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

#cancel-form input[type="submit"]:hover {
    background-color: #e53935;
}

#reservation-gate {
    margin: 20px 0;
    padding: 15px;
    background: #f8f8f8;
    border: 1px solid #ccc;
    text-align: center;
}
#reservation-gate input {
    padding: 10px;
    margin-right: 10px;
}


.floorplan-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: auto;
}

.floorplan-container img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 800px;
    margin: auto;
}

.clickable-area {
position: absolute;
    background-color: rgb(136 179 225 / 0%);
    font-weight: bold;
    text-align: center;
   display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 0px solid #4ab8b5;
    font-size: calc(1vw + 1vh + 1rem);
    text-decoration: none !important;
    color: #2f2f2f !important;
    transition: .3s all;
    /*padding-top: 4%;*/
}
.clickable-area:hover {
    background: #38a3a485;
    color: #fff !important;
}
.clickable-area.reserved {
    background-color: #9d9d9d59;
    background-image: url(https://wahny.org/wp-content/uploads/2025/05/stripes.png);
    background-size: cover;
    cursor: not-allowed;
}
.clickable-area:hover.reserved{
    color: #2f2f2f !important;
}

#reservation-content {
    display: none;
}

.floorplan-container {
    position: relative;
    display: none;
}

.floor-key {
    text-align: center;
}

#reservation-content.show .floorplan-container {
    display: block;
}

/* Buttons */
#access-code-submit {
    margin-top: 10px;
    border: 2px solid #146b6c;
    border-radius: 40px;
    background: #146b6c99;
    color: #fff;
    font-weight: 500;
}
#access-code-submit:hover{
    border-color: #2bb4b0;
    background: #2bb4b099;
}

#reservation-form input[type="submit"] {
    border: 2px solid #146b6c;
    border-radius: 40px;
    background: #146b6c99;
    color: #fff;
    font-weight: 500;
}

#reservation-form input[type="submit"]:hover{
    border-color: #2bb4b0;
    background: #2bb4b099;
}


.modal-message {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-weight: bold;
    max-width: 600px;
    text-align: center;
}

.modal-message.success {
    margin: auto;
    background-color: #e6ffec;
    color: #227d1f;
    border: 1px solid #b3e6c0;    
    max-width: 800px;
}

.modal-message.error {
    background-color: #ffe6e6;
    color: #d8000c;
    border: 1px solid #f5c6cb;
}



/* BOOTH Positiong and Size */
.booth-1 { top: 6.1942%; left: 22.25%; width: 11.62%; height: 8.3%; }
.booth-2 { top: 14.5%; left: 22.25%; width: 11.625%; height: 8.41%; }
.booth-3 { top: 32.9%; left: 22.25%; width: 11.625%; height: 8.41%;}
.booth-4 {top: 41.35%; left: 22.25%; width: 11.375%; height: 8.41%; }
.booth-5 { top: 49.7%; left: 22.25%; width: 11.625%; height: 8.41%;}
.booth-6 { top:58.1%; left: 22.25%; width: 11.625%; height: 8.41%;}
.booth-7 {top: 92.2%; left: 29.0%; width: 18.875%; height: 4.95%;}
.booth-8 { top: 92.2%; left: 48.0%; width: 18.875%; height: 4.95%; }
.booth-9 { top: 71.46%; left: 40.875%; width: 18.875%; height: 5.1839%; }
.booth-10 { top: 66.4%; left: 40.875%; width: 18.875%; height: 4.95%;}
.booth-11 { top: 61.4%; left: 40.875%; width: 18.875%; height: 4.95%;}
.booth-12 { top: 56.4%; left: 40.875%; width: 18.875%; height: 4.95%;}
.booth-13 { top: 51.4%; left: 40.875%; width: 18.875%; height: 4.95%;}
.booth-14 { top: 46.42%; left: 40.875%; width: 18.875%; height: 4.95%;}
.booth-15 { top: 41.35%; left: 40.875%; width: 18.875%; height: 4.95%;}
.booth-16 { top: 36.35%; left: 40.875%; width: 18.875%; height: 4.95%;}
.booth-17 { top: 31.34%; left: 40.875%; width: 18.875%; height: 4.95%;}
.booth-18 { top: 26.24%; left: 40.875%; width: 18.875%; height: 4.95%;}
.booth-19 { top: 21.25%; left: 40.875%; width: 18.875%; height: 4.95%;}
.booth-20 { top: 16.2%; left: 40.875%; width: 18.875%; height: 4.95%;}
.booth-21 {  top: 11.2%;  left: 40.875%;  width: 18.875%;  height: 4.95%;}
.booth-22 {  top: 6.2%;  left: 40.875%;  width: 18.875%;  height: 4.95%;}
.booth-23 {  top: 6.2%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-24 {  top: 11.2%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-25 {  top: 16.2%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-26 {  top: 21.25%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-27 {  top: 26.24%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-28 {  top: 31.34%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-29 {  top: 36.35%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-30 {  top: 41.35%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-31 {  top: 46.42%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-32 {  top: 51.4%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-33 {  top: 56.4%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-34 {  top: 61.4%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-35 {  top: 66.4%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-36 {  top: 71.46%;  left: 59.875%;  width: 18.875%;  height: 4.95%;}
.booth-37 {  top: 86%;  left: 85.125%;  width: 11.625%;  height: 8.4176%; }
.booth-38 {  top: 77.7%;  left: 85.125%;  width: 11.625%;  height: 8.4176%;}
.booth-39 {  top: 69.2665%;  left: 85.125%;  width: 11.625%;  height: 8.4176%; }
.booth-40 {  top: 6.1942%;  left: 85.125%;  width: 11.625%;  height: 8.4176%;}

.key.two {color: #e8c08d;}
.key.three { color: #99c86b;}
.key.four { color: #8ca9c2;}
.key.five { color: #9d9d9d;}



@media (max-width: 430px) {
    .booth-1 { top: 6%;}
    .booth-3 { top: 32.5%;}
    .booth-4 { top: 40.5%;}
    .booth-5 { top: 48.9%;}
    .booth-6 { top: 57.1%;}
    .booth-7, .booth-8 { top: 90.6%; }  
    .booth-9, .booth-36 { top: 70.2%;}
    .booth-10, .booth-35 { top: 65.3%;}
    .booth-11, .booth-34 { top: 60.4%;}
    .booth-12, .booth-33 { top: 55.5%;}
    .booth-13, .booth-32 { top: 50.3%;}
    .booth-14, .booth-31 { top: 45.5%;}
    .booth-15, .booth-30 { top: 40.6%;}
    .booth-16, .booth-29 { top: 35.8%;}
    .booth-17, .booth-28 { top: 31%;}
    .booth-18, .booth-27 { top: 26%;}
    .booth-19, .booth-26 { top: 20.8%;}
    .booth-20, .booth-25 { top: 16.0%;}
    .booth-21, .booth-24 { top: 11.0%;}
    .booth-22, .booth-23 { top: 6%;}
    .booth-37 { top: 84.5%;}
    .booth-38 {top: 76.2%; }
    .booth-39 { top: 68.2%;}
    .booth-40 { top: 6%;}
    
    .floor-key {
    text-align: left;
    padding: 0 20px;}
    
    
    .clickable-area {font-size: 22px;}
}