/* Import the Overpass font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap');

/* Define CSS Variables for Colors */
:root {
  /* Primary Colors */
  --color-orange-500: hsl(25, 97%, 53%); /* For interactive elements, highlights */

  /* Neutral Colors */
  --color-white: hsl(0, 100%, 100%);
  --color-grey-500: hsl(217, 12%, 63%); /* For paragraphs, subtle text */
  --color-grey-900: hsl(213, 19%, 18%); /* For background of cards, darker elements */
  --color-grey-950: hsl(216, 12%, 8%);  /* For very dark backgrounds, body background */
  --color-dark-blue: hsl(215, 20%, 16%); /* A slightly darker shade for star icon background, if needed */
}

/* Universal Box-Sizing Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HTML element styling - added outline: none here */
html {
    outline: none; /* Remove outline from the root HTML element */
}

/* Body Styling for Centering and Font */
body {
    font-family: 'Overpass', sans-serif;
    background-color: var(--color-grey-950);
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center;    /* Centers content vertically */
    min-height: 100vh;      /* Ensures body takes up full viewport height */
    overflow: hidden; /* Prevent scrollbars if content slightly overflows */
    outline: none; /* Remove outline from body */
}

/* Main Container Styling (ensures content is centered if multiple items in body) */
main {
    display: flex; /* Make main a flex container */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center its children horizontally */
    align-items: center; /* Center its children vertically */
    width: 100%; /* Ensure it spans full width */
    outline: none; /* Remove outline from main */
    /* min-height: 100vh; - Not needed here if body already has it and main is its only child */
}

/* Add focus styles for main to remove outline */
main:focus,
main:focus-within {
    outline: none;
}


/* Rating Card Container */
.rating-card {
    border-radius: 1.5rem; /* More rounded corners */
    gap: 1.5rem; /* Space between flex items */
    display: flex;
    flex-direction: column;
    padding: 2rem; /* Increased padding for better spacing */
    width: 90%; /* Responsive width */
    max-width: 25rem; /* Max width for larger screens */
    background-color: var(--color-grey-900); /* Darker grey for card background */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    outline: none; /* Remove the default outline on direct focus */
}

/* Ensure no outline on the card when any of its children are focused */
.rating-card:focus,
.rating-card:focus-within {
    outline: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Reapply box-shadow if it disappears with outline */
}

/* Star Icon Styling */
.star-icon {
    height: 3rem; /* Larger circle for the star */
    width: 3rem;  /* Larger circle for the star */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--color-dark-blue); /* A slightly darker blue for the star circle */
    /* Adjust img size inside if needed, assuming icon-star.svg is small */
}

.star-icon img {
    width: 1rem; /* Adjust star image size */
    height: 1rem;
}

/* Rating Legend (Heading and Paragraph) */
.rating-legend {
    /* No 'gap' here as it's not a flex/grid container */
}

.rating-legend h1 {
    color: var(--color-white); /* White heading text */
    font-size: 1.75rem; /* Heading font size */
    margin-bottom: 0.75rem; /* Space below heading */
}

.rating-legend p {
    color: var(--color-grey-500); /* Grey paragraph text */
    line-height: 1.5; /* Improve readability */
    font-size: 0.9375rem; /* Paragraph font size */
}

/* Rating Buttons Container */
.rating-buttons {
    display: flex;
    justify-content: space-between; /* Distribute buttons evenly */
    /* Removed gap: 0.8rem; as it was causing too much space */
    flex-wrap: wrap; /* Allow wrapping on smaller screens if needed */
}

/* Hidden Radio Input (for accessibility) */
.radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none; /* Prevents clicks on the tiny hidden input */
}

/* Styling for the Labels (which look like buttons) */
.rating-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.5rem; /* Size of the rating circles */
    height: 3.5rem; /* Size of the rating circles */
    border-radius: 50%; /* Makes them circular */
    background-color: var(--color-dark-blue); /* Darker background for inactive buttons */
    color: var(--color-grey-500); /* Grey text for inactive numbers */
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Smooth transitions */
    font-size: 1rem; /* Font size for numbers */
}

/* Hover state for rating buttons */
.rating-btn:hover {
    background-color: var(--color-orange-500); /* Orange on hover */
    color: var(--color-white); /* White text on hover */
}

/* Active/selected state for rating buttons (for tap feedback on mobile) */
.rating-btn:active {
    background-color: var(--color-orange-500); /* Same as hover for tap feedback */
    color: var(--color-white);
}


/* Active/selected state for the label when its associated radio is checked */
.radio-input:checked + .rating-btn {
    background-color: var(--color-grey-500); /* Grey background for selected */
    color: var(--color-white); /* White text for selected */
}

/* Focus state for accessibility (when navigating with keyboard) */
.radio-input:focus + .rating-btn {
    outline: 2px solid var(--color-orange-500); /* Orange outline */
    outline-offset: 2px; /* Offset from the element */
}

/* Submit Button Styling */
.submit-btn {
    background-color: var(--color-orange-500); /* Orange background */
    color: var(--color-white); /* White text */
    border: none;
    padding: 1rem 0; /* Vertical padding */
    width: 100%; /* Full width */
    border-radius: 2rem; /* More rounded */
    font-weight: 700;
    letter-spacing: 0.15rem; /* Spacing between letters */
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Smooth transitions */
    font-size: 1rem; /* Font size */
}

/* Submit Button Hover State */
.submit-btn:hover {
    background-color: var(--color-white); /* White background on hover */
    color: var(--color-orange-500); /* Orange text on hover */
}

/* Submit Button Active State (for tap feedback on mobile) */
.submit-btn:active {
    background-color: var(--color-white); /* Same as hover for tap feedback */
    color: var(--color-orange-500);
}


/* Thank You Card Styling (initially hidden) */
.thank-you-card {
    border-radius: 1.5rem; /* Match rating card */
    gap: 1.5rem; /* Space between flex items */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem; /* Match rating card */
    width: 90%;
    max-width: 25rem; /* Match rating card */
    background-color: var(--color-grey-900);
    text-align: center; /* Center text content */
    /* This class is controlled by JavaScript to toggle visibility */
}

.thank-you-card img {
    margin-bottom: 1.5rem; /* Space below image */
}

/* Selection Badge Styling (e.g., "You selected 5 out of 5") */
.selection-badge {
    background-color: var(--color-dark-blue); /* Darker background for the badge */
    color: var(--color-orange-500); /* Orange text for the badge */
    padding: 0.5rem 1.25rem; /* Padding for the badge */
    border-radius: 2rem; /* Rounded badge */
    font-size: 0.9375rem;
    margin-top: 1.5rem; /* Space above badge */
    margin-bottom: 1.5rem; /* Space below badge */
}

.thank-you-card h2 {
    color: var(--color-white);
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.thank-you-card p {
    color: var(--color-grey-500);
    line-height: 1.5;
    font-size: 0.9375rem;
}

/* Utility class to hide elements */
.hidden {
    display: none !important; /* Use !important to ensure it overrides other display properties */
}

/* Attribution Styling (footer) */
.attribution {
    /* No longer absolute, as it's inside main and should flow */
    margin-top: 2rem; /* Add some space above it */
    width: 100%; /* Full width */
    text-align: center; /* Center the text */
    font-size: 0.75rem; /* Smaller font size */
    color: var(--color-grey-500); /* Grey color */
    outline: none; /* Remove outline from attribution div itself */
}

.attribution a {
    color: var(--color-orange-500); /* Orange link color */
    text-decoration: none; /* No underline by default */
    outline: none; /* Remove outline from individual links */
}

.attribution a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Re-added focus style for accessibility for the submit button */
.submit-btn:focus {
    outline: 2px solid var(--color-orange-500);
    outline-offset: 2px;
}

/* --- Responsive Design (Media Queries) --- */

/* For screens larger than 480px (e.g., small tablets, landscape phones) */
@media (min-width: 480px) {
    .rating-card, .thank-you-card {
        padding: 2.5rem; /* Slightly more padding */
        max-width: 28rem; /* Allow card to be a bit wider */
    }

    .star-icon {
        height: 3.5rem;
        width: 3.5rem;
    }

    .star-icon img {
        width: 1.2rem;
        height: 1.2rem;
    }

    .rating-legend h1 {
        font-size: 2rem; /* Larger heading */
    }

    .rating-legend p,
    .thank-you-card p {
        font-size: 1rem; /* Slightly larger paragraph text */
    }

    .rating-btn {
        width: 3.75rem; /* Slightly larger rating circles */
        height: 3.75rem;
        font-size: 1.1rem;
    }

    .submit-btn {
        padding: 1.1rem 0; /* Slightly more padding for button */
        font-size: 1.05rem;
    }

    .selection-badge {
        font-size: 1rem;
    }
}

/* For screens larger than 768px (e.g., tablets, small desktops) */
@media (min-width: 768px) {
    .rating-card, .thank-you-card {
        padding: 3rem; /* Even more padding */
        max-width: 30rem; /* Max width for larger screens */
    }

    .star-icon {
        height: 4rem;
        width: 4rem;
    }

    .star-icon img {
        width: 1.4rem;
        height: 1.4rem;
    }

    .rating-legend h1 {
        font-size: 2.2rem; /* Larger heading */
    }

    .rating-legend p,
    .thank-you-card p {
        font-size: 1.05rem; /* Slightly larger paragraph text */
    }

    .rating-btn {
        width: 4rem; /* Larger rating circles */
        height: 4rem;
        font-size: 1.2rem;
    }

    .submit-btn {
        padding: 1.2rem 0;
        font-size: 1.1rem;
    }

    .selection-badge {
        font-size: 1.05rem;
    }
}