<style>
/* General Body Styles */
body {
    font-family: 'rubik', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fefbf2; /* Updated background color */
}

/* Header Styles */
header {
    background-color: #ffd471;
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 24px;
    position: relative;
    height: 30px; /* Ensure the header height remains consistent */
}

/* Filter Button in Header */
header #filter-button {
    position: absolute;
    left: 10px;
    top: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

/* Menu Button in Header */
header #menu-button {
    position: absolute;
    right: 10px;
    top: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

/* Container for Main Content */
.container {
    max-width: 768px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* Card Container Styles */
.card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* Main Card Styles */
#main-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 392px; /* Increased by another 40% from 280px */
    perspective: 1000px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.3s ease-out;
    border: 0px solid #e0e0e0; /* Added subtle border */
}

/* Front and Back of the Card */
#main-card .card-front,
#main-card .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    background-color: #f7f7f7;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    font-size: 21.6px; /* Increased by 20% from 18px */
    line-height: 1.5; /* Increased by 50% from the default of 1 */
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333; /* Default font color */
}

/* Back of the Card - Flipped State */
#main-card .card-back {
    transform: rotateY(180deg);
    background-color: #84ece8; /* Updated background color for the back */
    color: #4a4a4a; /* Updated font color for the back */
}

/* Existing Flip CSS */
.card {
    position: absolute;
    will-change: transform;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* CSS for swipe animation */
.card.swipe-left {
    transform: translateX(-100%) rotate(-5deg);
}

.card.swipe-right {
    transform: translateX(100%) rotate(5deg);
}

/* Existing Flip CSS - Keep this */
#main-card .card-front,
#main-card .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    background-color: #f7f7f7;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    font-size: 18px;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333; /* Default font color */
}

#main-card .card-back {
    transform: rotateY(180deg);
    background-color: #84ece8; /* Updated background color for the back */
    color: #4a4a4a; /* Updated font color for the back */
}

#main-card.flipped .card-front {
    transform: rotateY(180deg);
}

#main-card.flipped .card-back {
    transform: rotateY(0deg);
}


/* Navigation Buttons for Cards */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
}

/* Back and Next Buttons */
.nav-buttons .nav-button {
    background-color: #ffd471; /* Updated color for the back and next buttons */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hover Effect for Back and Next Buttons */
.nav-buttons .nav-button:hover {
    background-color: #f4b4fe; /* Slightly darker for hover effect */
}

/* Like, Info Buttons in Navigation */
.nav-buttons .card-actions {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.nav-buttons .card-actions .action-button {
    background-color: #84ece8;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    flex: 1;
    margin: 0 10px;
    text-align: center;
}

.nav-buttons .card-actions .action-button#like-button {
    background-color: #dc1364; /* Updated color for the like button */
}

.nav-buttons .card-actions .action-button#like-button:hover {
    background-color: #f4b4fe; /* Slightly darker for hover effect */
}

.nav-buttons .card-actions .action-button:hover {
    background-color: #f4b4fe;
}
/* Footer Styles */
footer {
    text-align: center;
    padding: 10px;
    background-color: #f8f8f8;
    border-top: 1px solid #ccc;
}

/* Card Counter in Footer */
#footer {
    text-align: center;
    padding: 10px;
    background-color: #f8f8f8;
    border-top: 1px solid #ccc;
}

#card-counter {
    font-size: 14px;
    color: #333;
}

/* Filter Sidebar */
#filter-sidebar {
    position: fixed;
    top: 0;
    left: -350px;
    width: 300px;
    height: 100%;
    background-color: #f8f8f8;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-out;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
    transform: translateX(0);
    pointer-events: auto;
}

#filter-sidebar.open {
    transform: translateX(350px);
}

#filter-sidebar h3 {
    margin-top: 0;
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
}

.filter-section {
    margin-bottom: 20px;
}

/* Collapsible styles */
.collapsible {
    background-color: #f1f1f1;
    color: #333;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collapsible:hover {
    background-color: #e9e9e9;
}

.collapsible .toggle-icon {
    transition: transform 0.3s ease;
}

.collapsible.active .toggle-icon {
    transform: rotate(180deg);
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f8f8f8;
}

/* Pill button styles */
.pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.pill-btn {
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    outline: none;
    transition: all 0.3s ease;
}

.pill-btn:hover {
    border-color: #61BDBD;
}

.pill-btn.selected {
    border: 2px solid #61BDBD;
    background-color: #e7f5f5;
    color: #4a4a4a;
}

/* Filter action buttons */
.filter-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.filter-action-button {
    background-color: #61BDBD;
    color: white;
    border: none;
    padding: 10px 15px;
    width: 48%;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.filter-action-button:hover {
    background-color: #54A3A3;
}

/* Scrollbar Styling (Optional) */
#filter-sidebar::-webkit-scrollbar,
#settings-sidebar::-webkit-scrollbar {
    width: 8px;
}

#filter-sidebar::-webkit-scrollbar-track,
#settings-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#filter-sidebar::-webkit-scrollbar-thumb,
#settings-sidebar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

#filter-sidebar::-webkit-scrollbar-thumb:hover,
#settings-sidebar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Settings Sidebar */
#menu-sidebar {
    position: fixed;
    top: 0;
    right: -350px;
    width: 300px;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-out;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
    transform: translateX(0); /* Add this line */
}

#menu-sidebar.open {
    transform: translateX(-350px);
}

#menu-sidebar h3 {
    margin-top: 0;
    font-size: 18px;
    margin-bottom: 10px;
}

.menu-button {
    background-color: #61BDBD;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}

.menu-button:hover {
    background-color: #54A3A3; /* Slightly darker for hover effect */
}

/* Social Buttons */
.social-buttons {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.social-buttons a {
    color: #ffd471; /* Button color */
    font-size: 24px; /* Icon size */
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    background-color: #f5efed; /* Match background color */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.social-buttons a:hover {
    background-color: #61BDBD; /* Hover effect */
    color: white; /* Change icon color on hover */
}

#menu-sidebar .social-buttons a i {
    display: block;
    text-align: center;
}

/* Scrollbar styling (optional) */
#menu-sidebar::-webkit-scrollbar {
    width: 8px;
}

#menu-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#menu-sidebar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

#menu-sidebar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Collapsible Section Styles */
.filter-section h4.collapsible {
    cursor: pointer;
    user-select: none;
    padding: 10px;
    background-color: #84ece8; /* Updated to #84ece8 */
    color: white;
    border-radius: 5px;
    margin-bottom: 5px;
}

.filter-section h4.collapsible .toggle-icon {
    float: right;
    transition: transform 0.3s ease;
}

.filter-section h4.collapsible.active .toggle-icon {
    transform: rotate(180deg);
}

.filter-options {
    display: none;
    padding-left: 10px;
}

.filter-options.active {
    display: grid;
}

/* Add these styles for the filter sidebar */
#filter-sidebar .filter-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

#filter-sidebar .filter-action-button {
    background-color: #84ece8;
    color: #4a4a4a;
    border: none;
    padding: 10px 15px;
    width: 48%; /* This ensures both buttons take up equal width */
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
}

#filter-sidebar .filter-action-button:hover {
    background-color: #006666;
}

/* Remove or comment out the #apply-filters-button styles if they exist */

.close-sidebar {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    color: #888;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.close-sidebar:hover {
    color: #555;
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.modal-button {
    background-color: #61BDBD;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
}

.modal-button:hover {
    background-color: #54A3A3;
}
</style>

