/* General Container */
body {
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* Progress Bar Container */
.progress-bar-container {
    width: 90%; /* Reduced width for better mobile fitting */
    max-width: 600px; /* Center for larger screens */
    margin: 20px auto; /* Center horizontally */
    background-color: #333;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}

/* Progress Bar */
.progress-bar {
    height: 100%;
    background-color: #00bfff;
    width: 0;
    transition: width 0.3s ease;
}

/* Questions */
.question {
    display: none;
}

.question.active {
    display: block;
}

.options {
    display: flex;
    flex-direction: column; /* Stack options vertically */
    align-items: center;
    gap: 20px;
    margin: 20px 0;
}

.option-card input[type="radio"] {
    position: absolute;
    opacity: 0; /* Make them invisible */
    pointer-events: none; /* Disable direct interaction */
}

.option-card {
    background-color: #333;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease;
    width: 180px; /* Fixed width for better alignment */
    display: flex;
    flex-direction: column; /* Stack child elements vertically */
    align-items: center; /* Center child elements horizontally */
}

.option-card img {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.option-card span {
    font-size: 16px; /* Font size for labels */
    color: #fff;
    /*margin-top: 8px; /* Add space above the text */
    text-align: center; /* Ensure text is centered */
    display: block; /* Ensure span behaves like a block for alignment */
}

.option-card:hover,
.option-card.active {
    border-color: #00bfff;
    transform: scale(1.01);
}

/* Navigation Buttons */
.navigation-buttons {
    margin-top: 15px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: center;
    gap: 10px; /* Add spacing between buttons */
}

.navigation-buttons button,
.navigation-buttons .btn-home {
    background-color: #00bfff;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px; /* Adjusted for equal spacing */
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Remove underline for links */
    text-align: center;
    width: 150px; /* Fixed width for both buttons */
    box-sizing: border-box; /* Ensure padding doesn't affect button size */
}

.navigation-buttons button:hover,
.navigation-buttons .btn-home:hover {
    background-color: #004099;
}

.description {
    font-size: 0.7rem; /* Smaller font size for the description */
    color: #aaa; /* Lighter color for the description text */
    margin-top: 5px; /* Space between the span and description */
    text-align: center; /* Center-align the text */
}

.dynamic-options {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Add consistent spacing between option cards */
    margin-top: 20px; /* Space from the question title */
    visibility: visible; /* Ensure visibility */
    margin-bottom: 20px; /* Space from other sections */
}

.dynamic-options-3 {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Add consistent spacing between option cards */
    margin-top: 20px; /* Space from the question title */
    visibility: visible; /* Ensure visibility */
    margin-bottom: 20px; /* Space from other sections */
}

#dynamic-options-7 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    visibility: visible;
}

/* BODY FAT CALCULATOR STARTS */


#body-fat-calculator {
    margin-top: 20px;
    padding: 10px 15px; /* Reduced padding */
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #1a1a1a;
    text-align: center; /* Center-align the entire section */
    width: 80%; /* Match the width of the progress bar */
    max-width: 350px; /* Limit the width for larger screens */
    margin: 10px auto; /* Center horizontally */
    box-sizing: border-box;
}

#body-fat-calculator h3 {
    color: #fff;
    margin-bottom: 10px; /* Reduced margin */
    text-align: center;
    font-size: 18px;
}

#body-fat-calculator label {
    display: flex;
    justify-content: flex-start; /* Align labels and inputs to the left */
    align-items: right;
    margin-bottom: 8px; /* Slightly reduced spacing between rows */
    color: #ddd;
    font-size: 14px;
}

#body-fat-calculator label span {
    flex: 0 0 45%; /* Allow labels to take up 50% of the row */
    text-align: left; /* Align labels to the left */
    margin-right: 5px; /* Add small space between label and input */
}

#body-fat-calculator input {
    flex: 0 0 50%; /* Allow inputs to take up 50% of the row */
    margin-left: auto; /* Align input to the right side */
    padding: 5px; /* Inner padding inside input */
    font-size: 14px; /* Input text size */
    border: 1px solid #ccc; /* Input border style */
    border-radius: 4px; /* Rounded corners for the input */
    background-color: #2b2b2b; /* Input background color */
    color: #fff; /* Input text color */
    max-width: 100px; /* Restrict input width */
}

#calculate-body-fat {
    width: auto; /* Adjust button width dynamically */
    padding: 10px 20px; /* Adjust padding */
    margin-top: 15px; /* Spacing from the inputs */
    font-size: 14px;
    background-color: #00bfff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    display: inline-block; /* Allow button to center align */
}

#calculate-body-fat:hover {
    background-color: #004099;
}

#body-fat-result {
    margin-top: 10px; /* Reduced margin */
    font-size: 16px;
    color: #00ff00;
    text-align: center;
}

#hip-field label {
    display: flex;
    justify-content: flex-start; /* Align labels and inputs to the left */
    align-items: right;
    margin-bottom: 8px; /* Slightly reduced spacing between rows */
    color: #ddd;
    font-size: 14px;
}

#hip-field label span {
    flex: 0 0 45%; /* Allow labels to take up 50% of the row */
    text-align: left; /* Align labels to the left */
    margin-left: 50px; /* Add small space between label and input */
}

#hip-field input {
    flex: 0 0 50%; /* Allow inputs to take up 50% of the row */
    margin-left: auto; /* Align input to the right side */
    padding: 5px; /* Inner padding inside input */
    font-size: 14px; /* Input text size */
    border: 1px solid #ccc; /* Input border style */
    border-radius: 4px; /* Rounded corners for the input */
    background-color: #2b2b2b; /* Input background color */
    color: #fff; /* Input text color */
    max-width: 100px; /* Restrict input width */
}



/* BODY FAT CALCULATOR END */

/* BODY PART CHOOSING START */

/* Grid layout for multi-select options */
.grid-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 items per row */
    gap: 10px; /* Small gap between images */
    justify-content: center; /* Center the entire grid */
    align-items: center; /* Center items vertically */
    max-width: 300px; /* Adjust maximum width to fit the progress bar */
    margin: 0 auto; /* Center grid horizontally on the page */
    padding: 0; /* Remove extra padding */
}

.grid-options .option-card {
    max-width: 80px;
    height: 80px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: transform 0.3s ease, border-color 0.3s ease;
    background-color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0; /* Remove extra margin */
}

.grid-options .option-card img {
    width: 64px;
    height: 64px;
    margin: 0 auto 5px auto; /* Center the images */
}

.grid-options .option-card span {
    display: block;
    font-size: 12px;
    color: #fff;
}

/* Remove checkbox icons */
.option-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none; /* Make the checkbox invisible and non-interactable */
}

.option-card.active {
    border-color: #00bfff; /* Highlight selected cards */
}

/* Add animation for question transitions */
/* Style for Bilgi buttons to match other navigation buttons */
.info-btn {
    background-color: #00bfff;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px; /* Adjust padding to make it smaller */
    font-size: 14px; /* Smaller font size */
    cursor: pointer;
    margin-top: 10px;
    display: inline-block; /* Keeps the button inline with the layout */
}

.info-btn:hover {
    background-color: #0099cc; /* Darker blue for hover effect */
}

.info-btn:active {
    background-color: #007acc; /* Even darker blue for active effect */
    transform: scale(0.95);    /* Slight shrink effect when clicked */
}

/* Target only the aesthetic-options container */
.aesthetic-options .option-card {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ensures text on left and image on right */
    background-color: #1a1a1a; /* Background for the card */
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 15px; /* Adds spacing between cards */
}

.aesthetic-options .option-card:hover {
    border-color: #00bfff;
    transform: scale(1.01);/
}

.aesthetic-options .card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* Ensures full width alignment */
}

.option-card.active {
    border-color: #00bfff; /* Highlight selected cards */
}

.aesthetic-options .card-text {
    color: #fff;
    font-size: 18px;
    text-align: left;
    flex: 1; /* Pushes text to the left */
}

.aesthetic-options .body-shape-image {
    width: 80px; /* Controls the size of the image */
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    margin-left: 15px; /* Adds spacing between text and image */
}


/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
    .grid-options {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row for tablets */
    }
}

@media screen and (max-width: 480px) {
    .grid-options {
        grid-template-columns: repeat(1, 1fr); /* 1 item per row for smaller screens */
    }
}


/* BODY PART CHOOSING END */


/* Mobile Styles */
@media screen and (max-width: 768px) {
    .progress-bar-container {
        height: 8px; /* Reduce height for mobile */
    }
    .grid-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 items per row for smaller screens */
        gap: 10px; /* Add spacing between items */
        justify-content: center;
    }

    .aesthetic-options .option-card {
        flex-direction: column; /* Stack content vertically */
        align-items: center; /* Center-align text and image */
        text-align: center; /* Center text alignment */
        padding: 10px; /* Adjust padding for mobile */
    }

    .aesthetic-options .card-content {
        flex-direction: column; /* Stack text and image */
        align-items: center; /* Center-align both text and image */
    }

    .aesthetic-options .card-text {
        margin-bottom: 10px; /* Add space between text and image */
        font-size: 16px; /* Slightly smaller font size for mobile */
    }

    .aesthetic-options .body-shape-image {
        width: 100px; /* Slightly larger image for better visibility */
        margin-left: 0; /* Remove left margin for stacked layout */
    }

    .option-card {
        flex: 0 0 calc(50% - 20px); /* 2 cards per row with gap */
        max-width: 160px; /* Limit maximum width */
        height: auto; /* Maintain proportional height */
        text-align: center; /* Center the content */
        padding: 10px;
        box-sizing: border-box;
        background-color: #333;
        border: 2px solid transparent;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .grid-options .option-card img {
        width: 50px;
        height: 50px;
    }

    .grid-options .option-card span {
        font-size: 10px; /* Smaller text size for mobile */
        color: #fff; /* White text color */
        text-align: center; /* Center-align text */
        line-height: 1.2; /* Adjust line spacing for readability */
    }

    .navigation-buttons button,
    .navigation-buttons .btn-home {
        width: 80%; /* Wider buttons for mobile */
        max-width: 180px; /* Limit button width */
        padding: 10px; /* Compact padding */
        font-size: 14px; /* Slightly smaller font size */
    }

    .grid-options {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row */
        gap: 8px; /* Adjust spacing */
    }
}

@media screen and (max-width: 480px) {
    .grid-options {
        grid-template-columns: repeat(3, 1fr); /* 3 items per row for very small screens */
    }

    .aesthetic-options .option-card {
        display: flex;
        flex-direction: row; /* Ensure text is on the left and image is on the right */
        align-items: center; /* Center-align text and image vertically */
        justify-content: space-between; /* Space text and image apart */
        padding: 10px; /* Adjust padding for mobile view */
        margin-bottom: 10px; /* Reduce spacing between cards */
    }

    .aesthetic-options .card-content {
        display: flex;
        flex-direction: row; /* Keep the row alignment for text and image */
        justify-content: space-between; /* Keep text left and image right */
        align-items: center; /* Vertically center-align content */
        width: 100%; /* Ensure content spans full width of the card */
    }

    .aesthetic-options .card-text {
        color: #fff;
        font-size: 14px; /* Adjust font size for smaller screens */
        text-align: left; /* Ensure text is aligned to the left */
        flex: 1; /* Pushes the text to take up available space */
    }

    .aesthetic-options .body-shape-image {
        width: 60px; /* Smaller image size for mobile view */
        height: auto;
        border-radius: 8px;
        object-fit: cover;
        margin-left: 10px; /* Add spacing between text and image */
    }

    .grid-options .option-card {
        width: 100px; /* Adjust size for smaller screens */
        height: 100px;
    }

    .grid-options .option-card img {
        width: 60px;
        height: 60px;
    }

    .grid-options .option-card span {
        font-size: 14px;
    }
}

/* Remove hover effects on mobile devices */
@media (hover: none) {
    .option-card:hover {
        background-color: initial !important; /* Reset hover background */
        box-shadow: none !important; /* Remove any hover styles */
    }
    .option-card:active {
        background-color: initial !important;
        box-shadow: none !important;
    }
}

.hidden {
    display: none; /* Hide elements dynamically */
}