/* START MULTIBOUTIQUE  */
 
#woodiz-redirect-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: none; 
}

div#woodiz-redirect-modal .modal-content {
    padding: 15px;
    border: none;
}
#woodiz-redirect-modal.show {
    opacity: 1;
    display: block; 
}


.modal-overlay.show {
    opacity: 1;
    display: block; /* Show overlay when .show is added */
}

 
.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #a87540;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

span.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}
   .modalzip {
    background-color: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 90%; 
    width: 620px;
    position: fixed; /* Position it fixed for the popup effect */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Ensure the modal is on top */
    display: none; /* Initially hidden */
        }

        .tab-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
            margin-top: -40px; /* Adjusted to position tabs over modal */
            margin-bottom: 20px;
        }

        .tab {
            background-color: #f5f5f5;
            padding: 10px 15px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            border-radius: 5px 5px 0 0; /* Rounded corners */
            width: auto; /* Adjust as needed */
            text-align: center;
            z-index: 1; /* Ensure tabs are on top */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
            margin-bottom: 10px; /* Space between tabs on smaller screens */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tab img {
            margin-right: 5px; /* Space between icon and text */
        }

        .tab.active {
            background-color: #916536;
                color: #fff;
        }

        .tab-content {
            display: none;
        }
.tab-content p {
    word-wrap: break-word; 
    word-break: break-word; 
}
        .tab-content.active {
            display: block;
        }

        .tab-content h2 {
            margin-top: 0;
            font: 500 24px/30px "oswald",helvetica,sans-serif;
        }

        .tab-content h2 img {
            margin-right: 10px;
            vertical-align: middle;
        }

        .tab-content input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
            font-weight: 600;
        }

            .tab-content button {
            background-color: #8a673e;
            color: #fff;
            padding: 8px 40px;
            border: none;
            border-radius: 36px; /* Rounded corners for the button */
            cursor: pointer;
            transition: background-color 0.3s ease;
            display: block; /* Make the button take up the full width */
            margin: 0 auto; /* Center the button horizontally */
            font-weight: 600;
        }

            .tab-content button:hover {
                background-color: #d9953f;
            }
        .tab span {
            font-size: 13px;
            font-weight: 600;
        }
        .bottom-links {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            font-size: 13px;
            font-weight: 600;
        }

        .bottom-links a {
            color: #555;
            text-decoration: none;
            font-size: 14px;
        }

        .bottom-links a:hover {
            text-decoration: none;
                color: #906536;
        }

        /* Media query for smaller screens (e.g., tablets) */
        @media (max-width: 768px) {
            .tab-container {
                flex-direction: initial; /* Stack tabs vertically */
            }

            .tab {
                width: 85%;  /* Make tabs full width */
                margin-bottom: 10px; /* Space between tabs */
            }
        }

        /* Media query for even smaller screens (e.g., mobile phones) */
        @media (max-width: 480px) {
            .modalzip {
                max-width: 95%; /* Adjust for mobile phone width */
            }
        }

 .modal-overlay {
    position: fixed; /* Cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Slightly darker background */
    z-index: 999; /* Place it below the modal */
    display: none; /* Initially hidden */
}


.dropdown-container {
     position: absolute;
    top: auto; /* We'll use 'bottom' instead */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Offset to align the left edge with the center */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100; /* Ensure dropdown is above other content */
    max-height: 200px; /* Limit dropdown height */
    overflow-y: auto; /* Add vertical scrollbar if needed */
    width: 93%; /* Make dropdown full width */
}

.suggestions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}

.restaurant-name {
    font-weight: bold;
    color: #8f6536;
}

.restaurant-address {
    font-size: 0.9em;
    color: #666;
}

.restaurant-distance {
    float: right;
    font-size: 0.8em;
    color: #999;
    margin-top: -18px;
    color: #95602b;
    font-weight: 700;
}



/* END MULTIBOUTIQUE  */