body {
    font-family: Arial, sans-serif;
}
.form-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Adjusts spacing between rows */
}

.search-row {
    display: flex;
    align-items: start;
    gap: 20px; /* Spacing between the location and custom request */
}

.horizontal-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Spacing between the label and input */
}

.custom-request-container {
    display: flex;
    align-items: start;
    gap: 10px; /* Spacing between the label and textarea */
}

.left-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.submit-button {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.submit-button img {
    display: none; /* Initially hide the loading icon */
}

textarea {
    resize: none;
}
.results {
    display: flex;
    flex-direction: row; /* Ensures that restaurants are displayed in columns */
    gap: 20px; /* Spacing between columns */
}
.restaurant-list {
    display: flex;
    flex-direction: column; /* Ensures that restaurants are displayed in rows */
    gap: 20px; /* Spacing between rows */
}

.restaurant-row {
    display: flex;
    /*justify-content: space-between; /* Space between restaurants in the same row */
    align-items: flex-center;
}

.restaurant-list-item {
    border: 1px solid #ddd;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(50% - 20px);
}
.restaurant-list-item img {
    max-width: 100px;
    margin-left: 10px;
}
.restaurant-list-item-buttons-bar {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.restaurant-list-item-buttons-bar button {
    padding: 5px 10px;
    cursor: pointer;
}
#restaurantSwiper {
    width: 100%;
    background-color: #333; /* Solid background color to prevent seeing through */
    padding: 20px;
    box-sizing: border-box;
}
/* Ensure the iframe takes full width of the container and is aligned properly */
#restaurantSwiperIframe iframe {
    width: 100%;
    height: 100%;
    border: none;
}
#restaurantDetailsIframe {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
#restaurantDetailsIframe iframe {
    width: 80%;
    height: 80%;
    border: none;
}
.restaurant {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.restaurant h3 {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.restaurant-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.restaurant-details {
    width: 60%;
}
.restaurant-photos {
    width: 35%;
    display: flex;
    flex-wrap: wrap;
}
.restaurant-photos img {
    max-width: 250px;
    margin: 5px;
}
.reviews, .photos {
    margin-top: 10px;
}
.rating, .price-level {
    font-size: 1.2em;
}
.rating::after {
    content: '⭐';
    display: inline-block;
}
.price-level::after {
    content: '$';
    display: inline-block;
}
.send-choices, #swipeButtons {
    margin-top: 20px;
}
.select-boxes {
    display: flex;
    align-items: center;
}
.select-boxes select {
    margin-right: 10px;
}
.buttons-bar {
    margin-top: 20px;
    justify-content: center;
    gap: 10px;
}
.buttons-bar button {
    padding: 10px;
    cursor: pointer;
}
.restaurantdetails-swipe-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.restaurantdetails-swipe-buttons button {
    padding: 10px;
    cursor: pointer;
}
.swipe-buttons {
    display: none;
    margin-top: 10px;
    gap: 10px;
}
.swipe-buttons button {
    padding: 10px;
    cursor: pointer;
}
#loadingIcon {
    display: none; /* Hidden initially */
    margin-left: 10px;
    vertical-align: middle;
}