/* custom-styles.css */

/* CSS styles for the custom template */
body {
    font-family: 'Montserrat', sans-serif;
}

.custom-container {
    display: flex;
    position: relative; /* Ensure relative positioning for absolute positioning of the back button */
}

.left-sidebar {
    width: 20%;
    background-color: #DF0000; /* Red color */
}

.main-content {
    width: 60%;
    display: flex;
    flex-wrap: wrap; /* Wrap items to next row */
    justify-content: space-between; /* Distribute space between items */
    padding: 50px 50px; /* Add padding to the sides */
    position: relative; /* Ensure relative positioning for absolute positioning of the back button */
}

.product-card {
    background-color: #D9D9D9; /* Grey color */
    border-radius: 19px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add box shadow for depth */
    width: 267px;
    max-height: 160px;
    position: relative;
    display: inline-block; /* Ensure cards are displayed in a row */
    padding: 20px; /* Add padding inside the card */
    margin: 20px 10px; /* Adjust margin for equal spacing between cards and from container */
    text-align: center; /* Center align text */
}

.product-card h3 {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0.0015em;
    text-align: center;
    margin-top: 10px; /* Adjust top margin for spacing */
    margin-bottom: 10px; /* Add margin between title and image */
}

.product-card img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto; /* Center image horizontally */
}
.product-card.selected {
    border: 2px solid #000000; /* Black border */
}
/* CSS for selected product cards in the right sidebar */
.selected-product-cards .product-card {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px; /* Add margin between product cards */
	
}
.selected-subcategory-cards .subcategory-card {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px; /* Add margin between product cards */
	
}
.subcategory-card.selected {
    border: 2px solid #000000; /* Black border */
}
.loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #DF0000; /* Red */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite; /* Spin animation */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.subcategory-card {
    background-color: #D9D9D9; /* Grey color */
    border-radius: 19px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add box shadow for depth */
    width: 267px;
    max-height: 160px;
    position: relative;
    display: inline-block; /* Ensure cards are displayed in a row */
    padding: 20px; /* Add padding inside the card */
    margin: 20px 10px; /* Adjust margin for equal spacing between cards and from container */
    text-align: center; /* Center align text */
}

.subcategory-card h3 {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0.0015em;
    text-align: center;
    margin-top: 10px; /* Adjust top margin for spacing */
    margin-bottom: 10px; /* Add margin between title and image */
}

.subcategory-card p {
    font-size: 14px; /* Adjust font size */
    line-height: 20px; /* Adjust line height */
    margin: 0; /* Remove default margin */
    overflow: hidden; /* Hide overflowing content */
    text-overflow: ellipsis; /* Add ellipsis for overflowing content */
    white-space: nowrap; /* Prevent wrapping */
    max-height: 60px; /* Limit the height of the description area */
    overflow: hidden; /* Hide any content that overflows the specified height */
}

.product-card p {
    font-size: 14px; /* Adjust font size */
    line-height: 20px; /* Adjust line height */
    margin: 0; /* Remove default margin */
    overflow: hidden; /* Hide overflowing content */
    text-overflow: ellipsis; /* Add ellipsis for overflowing content */
    white-space: nowrap; /* Prevent wrapping */
    max-height: 60px; /* Limit the height of the description area */
    overflow: hidden; /* Hide any content that overflows the specified height */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Style for categories and subcategories */
.category-columns-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between; /* Justify content between columns */
}

.category-column {
    flex: 1;
}

.category-wrapper {
    margin: 10% 3%; /* 10% vertical margin, 3% horizontal margin */
    background-color: #f0f0f0; /* Grey background */
    border-radius: 19px; /* Rounded corners */
    padding: 20px; /* Add some padding */
    text-align: center; /* Center align text */
    position: relative; /* Position relative for absolute positioning of button */
}

.category-title {
    color: #FFFFFF; /* White color */
    font-size: 16px; /* Font size 16px */
    font-family: Noto Sans KR;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0.0015em;
    text-align: center;
    background-color: #DF0000; /* Red color */
    border: none; /* Remove button border */
    border-radius: 19px; /* Rounded corners */
    padding: 10px 20px; /* Add padding */
    position: absolute; /* Position absolute */
    top: 0; /* Position from top */
    left: 0; /* Position from left */
    right: 0; /* Position from right */
    width: 100%; /* Make the button span the entire width of the category section */
    cursor: pointer; /* Change cursor to pointer */
}

.subcategory-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center subcategories horizontally */
    padding-top: 50px; /* Add padding to prevent overlap with category button */
    width: 100%;
}

.subcategory {
    margin-bottom: 10px;
    padding: 8px 20px; /* Increase button padding */
    background-color: #FFFFFF; /* White background */
    border: 1px solid transparent; /* Transparent border */
    border-radius: 19px; /* Rounded corners */
    cursor: pointer;
    font-size: 16px; /* Font size 16px */
    font-family: Noto Sans KR;
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0.0015em;
    text-align: center;
    width: calc(100% - 40px); /* Set width to same as category title (subtracting padding) */
}

.subcategory.selected-subcategory {
    border-color: #DF0000; /* Red border for selected subcategory */
}

.right-sidebar {
    position: relative;
    width: 20%;
    background-color: #D9D9D9; /* grey color */
    padding: 10px;
    text-align: center; /* Center align content horizontally */
}

.right-sidebar-heading p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 17px;
    letter-spacing: 0.0125em;
    text-align: center;
    margin-bottom: 20px; /* Add margin to create space between selected subcategory and other content */
}

/* CSS for continue button */
.continue-button {
    position: absolute;
    background-color: #DF0000; /* Red color */
    color: #FFFFFF; /* White color */
    width: 80%;
    height: 40px; /* Adjust height as needed */
    position: absolute;
    bottom: 15px; /* 15px margin from the bottom */
    right: 20px; /* Adjust right position as needed */
    display: none; /* Hide initially */
    text-align: center;
    line-height: 40px; /* Center text vertically */
    cursor: pointer;
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.0125em;
}

.continue-button .arrow {
    margin-left: 5px; /* Adjust space between text and arrow */
}
.continue-button2 {
    position: absolute;
    background-color: #DF0000; /* Red color */
    color: #FFFFFF; /* White color */
    width: 80%;
    height: 40px; /* Adjust height as needed */
    position: absolute;
    bottom: 15px; /* 15px margin from the bottom */
    right: 20px; /* Adjust right position as needed */
    display: none; /* Hide initially */
    text-align: center;
    line-height: 40px; /* Center text vertically */
    cursor: pointer;
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.0125em;
}

.continue-button2 .arrow {
    margin-left: 5px; /* Adjust space between text and arrow */
}
.continue-button3 {
    position: absolute;
    background-color: #DF0000; /* Red color */
    color: #FFFFFF; /* White color */
    width: 80%;
    height: 40px; /* Adjust height as needed */
    position: absolute;
    bottom: 15px; /* 15px margin from the bottom */
    right: 20px; /* Adjust right position as needed */
    display: none; /* Hide initially */
    text-align: center;
    line-height: 40px; /* Center text vertically */
    cursor: pointer;
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.0125em;
}

.continue-button3 .arrow {
    margin-left: 5px; /* Adjust space between text and arrow */
}
/* Adjustments for responsiveness */
@media only screen and (max-width: 768px) {
    .custom-container {
        flex-wrap: wrap;
    }

    .left-sidebar, .main-content, .right-sidebar {
        width: 100%;
    }

    .main-content {
        padding: 0;
    }

    .category-wrapper {
        margin: 5% 3%; /* Adjusted margins for smaller screens */
    }
}

/* Style for back button */
.back-button {
    position: absolute;
    background-color: #DF0000; /* Red color */
    color: #FFFFFF; /* White color */
    width: 150px;
    height: 40px; /* Adjust height as needed */
    position: absolute;
    top: 15px; /* 15px margin from the bottom */
    left: 20px; /* Adjust right position as needed */
    display: none; /* Hide initially */
    text-align: center;
    line-height: 40px; /* Center text vertically */
    cursor: pointer;
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.0125em;
}

.back-button::before {
    content: '\2190'; /* Unicode character for left arrow */
    font-size: 20px; /* Adjust arrow size */
    line-height: 40px; /* Center arrow vertically */
}

.back-button:hover {
    background-color: #B30000; /* Darker red color on hover */
}