body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f7f7f7;
    color: #222;
}


.container {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
}


.section {
    margin-bottom: 25px;
}


.site-header {
    background: #fff;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-row {
    margin-top: 10px;
    display: flex;
    gap: 15px;
}


.brand a {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}


a {
    color: #2a7ae2;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

h2 {
    font-size: 20px;
    margin-bottom: 10px;
}


.card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
}


.grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.tags {
    margin-top: 10px;
}

.tags span {
    background: #eee;
    padding: 4px 8px;
    margin-right: 5px;
    border-radius: 5px;
    font-size: 12px;
}


/* Search form — sits inside .container so it inherits the max-width.
   The label is hidden visually but kept for accessibility. */
.search-block {
    margin-bottom: 24px;
}

.search-block label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.search-block input[type="search"] {
    width: 100%;
    padding: 9px 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 6px 0 0 6px;
    box-sizing: border-box;
    outline: none;
}

.search-block input[type="search"]:focus {
    border-color: #2a7ae2;
}

.search-block button {
    padding: 9px 16px;
    font-size: 15px;
    background: #2a7ae2;
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
}

.search-block button:hover {
    background: #1a5fbf;
}

.search-block form {
    display: flex;
    align-items: stretch;
}


/* Card grid — used on index, search, and profile pages.
   Two columns on wider screens, one column on mobile. */
.cards-area {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 16px;
}


/* Profile intro — photo and bio side by side with a natural gap. */
.profile-intro {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 28px;
}

.profile-intro .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}


/* Two-column layout for ingredients and steps on the recipe page. */
.recipe-columns {
    display: flex;
    gap: 30px;
    margin-top: 24px;
}

.recipe-columns > div {
    flex: 1;
}


.flex {
    display: flex;
    gap: 20px;
}

.flex-wrap {
    flex-wrap: wrap;
}


.columns {
    display: flex;
    gap: 30px;
}

.columns > * {
    flex: 1;
}


.avatar {
    width: 100px;
    border-radius: 50%;
}


@media (max-width: 600px) {

    .columns {
        flex-direction: column;
    }

    .flex {
        flex-direction: column;
    }

    .top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}


/* ===== Star Ratings ===== */

/*
 * The left border uses the same gold as the stars (#f5a623) so the panel's
 * color immediately signals "this is the rating area" without needing a heading.
 * The rest of the border stays light (#ddd) to avoid visual noise.
 */
.rating-section {
    margin: 20px 0;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-left: 4px solid #f5a623;
    border-radius: 8px;
}

/*
 * The avg-display sits above the user widget. A warm-tinted bottom border
 * (very light amber) acts as a divider so the eye reads them as two separate
 * things rather than one block of stars.
 */
.avg-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid #fdf0d8;
}

/*
 * 24px is slightly larger than the previous 22px — just enough to make the
 * average stars feel authoritative and easy to read at a glance.
 */
.avg-star {
    font-size: 24px;
    color: #e0e0e0;
    transition: color 0.15s;
}

.avg-star.filled {
    color: #f5a623;
}

/*
 * The avg label is secondary information — the stars do the talking.
 * Small, muted text keeps the focus on the visual rather than the number.
 */
#avg-label {
    font-size: 14px;
    color: #777;
}

/*
 * Stacking the label above the stars (flex-direction: column) fixes the
 * height mismatch between 14px text and 30px stars that made them look
 * misaligned when side-by-side. The label now clearly "belongs to" the stars.
 */
.user-rating-widget {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.rate-prompt {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/*
 * gap: 4px gives the interactive stars a little breathing room — at 30px each,
 * 2px was too tight and made them feel cramped.
 */
#star-widget {
    display: flex;
    gap: 4px;
}

.star-btn {
    font-size: 30px;
    color: #e0e0e0;
    cursor: pointer;
    transition: color 0.1s, transform 0.12s;
    user-select: none;
    line-height: 1;
}

.star-btn.selected {
    color: #f5a623;
}

/*
 * On hover preview, stars grow slightly (scale 1.12) and shift to a slightly
 * lighter gold so there's a visible difference between "previewing" and
 * "already selected" — the user can tell which state they're in.
 */
.star-btn.preview {
    color: #f9c15a;
    transform: scale(1.12);
}

/*
 * Green for success is a near-universal convention. Using the same blue as
 * links (#2a7ae2) made "Saved!" look like a clickable element, which is wrong.
 */
#rating-msg {
    font-size: 13px;
    color: #2e7d32;
    font-style: italic;
}

/* Card-level star display (recipe_card + search) */
.card-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 6px 0;
}

.card-stars {
    display: flex;
    gap: 1px;
}

/*
 * 16px instead of 15px — a small bump that makes the stars actually readable
 * on the card without dominating the layout.
 */
.card-star {
    font-size: 16px;
    color: #e0e0e0;
}

.card-star.filled {
    color: #f5a623;
}

.card-rating-label {
    font-size: 13px;
    color: #888;
}

.tag-pill {
    background: #eee;
    padding: 4px 8px;
    margin-right: 5px;
    border-radius: 5px;
    font-size: 12px;
}