html {
    scroll-behavior: smooth;
}

:root {
    --primary: #F53855;
    /* Red/Pink brand color */
    --primary-light: #FFF0F3;
    --secondary: #1F2937;
    /* Dark text */
    --text-light: #6B7280;
    /* Grey text */
    --bg-light: #F9FAFB;
    --dark-bg: #111827;
    /* For dark sections */
    --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 10px -2px rgba(0, 0, 0, 0.03);
    --card-shadow-hover: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
    --font-heading: 'Merriweather', serif;
    --font-body: 'Inter', sans-serif;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-up {
    animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--secondary);
    background-color: #fff;
    line-height: 1.5;
    overflow-x: hidden;
    /* Prevent horizontal scroll from full-width elements */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

/* Global Responsive Elements */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    display: table;
    overflow-x: auto;
}

/* Post Content Styling */
.post-body-content img,
.content img {
    border-radius: 12px;
    margin: 2.5rem 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.post-body-content table,
.content table {
    font-size: 0.95rem;
    margin: 2.5rem 0;
    border: 1px solid #E5E7EB;
}

.post-body-content table th,
.post-body-content table td,
.content table th,
.content table td {
    padding: 0.75rem 1rem;
    border: 1px solid #E5E7EB;
    text-align: left;
}

.post-body-content table th,
.content table th {
    background: #F9FAFB;
    font-weight: 700;
}

/* Related Posts Section */
.related-posts-section {
    margin-top: 5rem;
    padding-top: 4rem;
    border-top: 1px solid #E5E7EB;
}

.related-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
    text-align: center;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.related-card {
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.related-card-img-wrapper {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.related-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
    /* Override content img margins */
    border-radius: 0 !important;
    transition: transform 0.5s ease;
}

.related-card:hover .related-card-img-wrapper img {
    transform: scale(1.05);
}

.related-card-info h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.related-card:hover .related-card-info h4 {
    color: var(--primary);
}

.related-card-meta {
    font-size: 0.8rem;
    color: #9CA3AF;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .related-title {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }
}

/* Page Badge */
.page-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #FFF1F2;
    color: #F43F5E;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2rem;
}

.view-recipe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.view-recipe-overlay span {
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    background: #F43F5E;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    transform: translateY(10px);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.recipe-card:hover .view-recipe-overlay {
    opacity: 1;
}
.recipe-card:hover .view-recipe-overlay span {
    transform: translateY(0);
}
.recipe-card:hover .recipe-image img {
    transform: scale(1.05);
}

/* ==========================================================================
   SaaS Scroll Reveal Animations (Intersection Observer compatible)
   ========================================================================== */

/* Base transition setup */
.reveal {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* Visible trigger states */
.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .reveal-up {
        transform: translateY(16px);
    }
    .reveal-left {
        transform: translateX(-20px);
    }
    .reveal-right {
        transform: translateX(20px);
    }
}

/* Accessibility: respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-up,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Sticky Header Wrapper */
.site-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: background-color 0.3s;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}


.logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(245, 56, 85, 0.3);
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--secondary);
}

.brand-sub {
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--primary);
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 2px;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: #4B5563;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--primary);
}

/* Only rotate the dropdown arrow, not the menu icon */
.nav-links a .fa-angle-down {
    transition: transform 0.3s ease;
}

.nav-links li:hover>a>.fa-angle-down {
    transform: rotate(180deg);
}


.nav-links li {
    position: relative;
    padding: 0;
    /* Increase clickable area for hover stability */
}


/* Dropdown Level 2 */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    background: white;
    min-width: 240px;
    /* Sligthly narrower */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    /* Rounded corners */
    padding: 1rem 0;
    /* Vertical padding container */
    z-index: 50;
    border: 1px solid #f3f4f6;
}

.dropdown>li>a {
    padding: 0.4rem 1rem;
    display: block;
    font-size: 0.85rem;
    color: #4B5563;
    /* Gray text */
    font-weight: 500;
    text-transform: capitalize;
}

.dropdown>li>a:hover {
    background: #FFF1F2;
    color: var(--primary);
    /* Pink/Red on hover */
}

.dropdown-divider {
    height: 1px;
    background: #E5E7EB;
    margin: 0.5rem 0;
}

.dropdown .view-all {
    color: var(--primary);
    font-weight: 600;
    padding-top: 0.25rem;
}

/* Show Dropdown on Hover */
.nav-item:hover>.dropdown {
    display: block;
}

/* Ensure parent link stays active color when hovering dropdown */
.nav-item:hover>a {
    color: var(--primary);
}

.btn {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.btn-icon {
    box-shadow: none !important;
    transform: none !important;
    background: transparent !important;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-outline {
    border: 1px solid #e5e7eb;
    background: transparent;
}

.btn-gold {
    background-color: #FFD700;
    color: var(--secondary);
    font-weight: bold;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 4rem 0;
    background: linear-gradient(to bottom, #FFF5F5, #fff);
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.hero h1 span.highlight {
    color: var(--primary);
    font-style: italic;
    text-decoration: underline wavy var(--primary);
}

.hero-subtitle {
    color: var(--text-light);
    margin-bottom: 3rem;
}

.hero-content {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Weekly Winner Card */
/* Weekly Winner Card */
.weekly-winner-card {
    background: white;
    border: 3px solid #FFD700;
    border-radius: 1.5rem;
    padding: 2.5rem 1.5rem 1.5rem;
    position: relative;
    text-align: center;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 320px;
    transform: rotate(1deg);
    /* Reduced rotation for cleaner look */
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.1s;
}

.weekly-winner-card:hover {
    transform: translateY(-8px) rotate(0deg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border-color: #FBBF24;
}

/* ... (skipping intervening styles for brevity in matching, but I must match exact target content or use multiple replacements if they are far apart) ... */
/* Wait, they are far apart. 265 and 412. I should use multi_replace. */

.winner-badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFD700;
    /* Gold background */
    color: #1F2937;
    padding: 0.5rem 1.5rem;
    border-radius: 99px;
    font-weight: 800;
    font-size: 0.9rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.winner-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

.winner-avatar-container {
    width: 80px;
    height: 80px;
    padding: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: -0.5rem;
    /* Overlap with pill */
    z-index: 2;
    position: relative;
}

.winner-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.winner-badge-pill {
    background: #FEF3C7;
    color: #D97706;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.3rem 0.8rem;
    border-radius: 99px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
    position: relative;
    border: 2px solid white;
    /* Separation border */
}

.winner-name {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.3rem;
    margin-bottom: 0;
    color: #1F2937;
    line-height: 1.2;
}

.winner-handle {
    color: #F43F5E;
    font-size: 0.85rem;
    font-weight: 600;
}

.winner-recipe {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
    height: 278px;
}

.winner-recipe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.winner-recipe-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    color: white;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    padding: 1rem;
    text-align: left;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.winner-stats {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.8rem;
    background: #F9FAFB;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    gap: 0.25rem;
    font-weight: 800;
}

/* Settings Alerts */
.settings-alert {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.settings-alert-success {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.settings-alert-error {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.winner-footer {
    font-size: 0.7rem;
    color: #9CA3AF;
    font-style: italic;
    font-weight: 500;
}

.promo-card {
    background: linear-gradient(135deg, #4A1999 0%, #2D0E66 100%);
    color: white;
    padding: 2.5rem 2rem;
    /* Increased padding */
    border-radius: 1.5rem;
    flex: 1.2;
    /* Slightly wider than winner card */
    min-width: 320px;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px -15px rgba(74, 25, 153, 0.4);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.promo-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -12px rgba(74, 25, 153, 0.5);
    background: linear-gradient(135deg, #531FB0 0%, #341175 100%);
}

.promo-tag {
    background: #FFD700;
    color: #4A1D96;
    padding: 0.35rem 0.75rem;
    border-radius: 99px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    animation: tagBounce 2s infinite;
}

@keyframes tagBounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-6px);
    }

    60% {
        transform: translateY(-3px);
    }
}

.promo-timer {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.35rem 0.75rem;
    border-radius: 99px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #E9D5FF;
    text-transform: uppercase;
}

.promo-title {
    font-family: var(--font-heading);
    /* Matching the serif style */
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.promo-subtitle {
    font-size: 0.85rem;
    color: #E9D5FF;
    margin-bottom: 1.5rem;
}

/* Secret Ingredient Box */
.secret-box {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(5px);
}

.secret-icon {
    width: 40px;
    height: 40px;
    background: #F59E0B;
    /* Orange/Yellow circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 2px solid #FCD34D;
}

.secret-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: #C4B5FD;
    letter-spacing: 0.5px;
    margin-bottom: 0.1rem;
}

.secret-value {
    font-size: 1.1rem;
    font-weight: bold;
}

/* Top Entries */
.entries-section {
    margin-bottom: 1.5rem;
}

.entries-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #C4B5FD;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.entry-row {
    background: rgba(0, 0, 0, 0.2);
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.entry-likes {
    color: #E9D5FF;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.entry-likes i {
    color: #FDA4AF;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(to right, #F43F5E, #E11D48);
    color: white;
    padding: 0.75rem;
    border-radius: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    box-shadow: 0 4px 6px rgba(225, 29, 72, 0.3);
    transition: transform 0.2s;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(225, 29, 72, 0.4);
}

/* Global Grid System */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (max-width: 992px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Members Section / Community Roadmap */
.members-section {
    background-color: #0F172A;
    /* Slate 900 */
    color: white;
    padding: 5rem 0;
}

.roadmap-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    color: #F59E0B;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.btn-outline-light {
    border: 1px solid #334155;
    background: #1E293B;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 99px;
    font-size: 0.9rem;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-outline-light:hover {
    border-color: #94A3B8;
    background: #334155;
}

.roadmap-card {
    background: #1E293B;
    /* Slate 800 */
    border: 1px solid #334155;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform 0.2s;
}

.roadmap-card:hover {
    transform: translateY(-5px);
    border-color: #475569;
}

.roadmap-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.user-snippet-sm {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
}

.user-name {
    font-weight: bold;
    font-size: 0.85rem;
    color: white;
}

.req-type {
    font-size: 0.7rem;
    color: #94A3B8;
}

.req-id {
    background: #0F172A;
    color: #94A3B8;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

.roadmap-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.roadmap-desc {
    color: #94A3B8;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.roadmap-stats {
    margin-bottom: 1.5rem;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #94A3B8;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.progress-bar {
    height: 6px;
    background: #334155;
    border-radius: 99px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #94A3B8;
    border-radius: 99px;
}

.btn-back-idea {
    width: 100%;
    background: white;
    color: #0F172A;
    border: none;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.btn-back-idea:hover {
    background: #F1F5F9;
}

/* Trending Section */
/* Trending Section */
.trending-section {
    padding: 5rem 0;
    background: #FFF1F2;
    /* Light pink background */
}

.trending-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #F43F5E;
    margin-bottom: 0.5rem;
}

.recipe-card {
    background: white;
    border-radius: 1.5rem;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.recipe-image {
    position: relative;
    height: 220px;
}

.recipe-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1.5rem 1.5rem 0 0;
}

.recipe-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: white;
    color: #F43F5E;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.heart-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #1F2937;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.heart-btn:hover {
    transform: scale(1.1);
    color: #F43F5E;
}

.heart-btn.active {
    color: #F43F5E;
}

.heart-btn.active i,
.heart-btn i.fa-solid {
    font-weight: 900;
}

.heart-btn-sm.active {
    color: #F43F5E;
}

.recipe-content {
    padding: 1rem;
}

.recipe-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    color: #1F2937;
}

.recipe-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #6B7280;
    margin-bottom: 0rem;
    font-weight: 500;
}

.recipe-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.view-recipe-link {
    color: #F43F5E;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.view-recipe-link:hover {
    gap: 0.5rem;
    /* Slide arrow effect */
    transition: gap 0.2s;
}

.view-count {
    color: #9CA3AF;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
}

/* Categories */
.categories-section {
    padding: 3rem 0;
    text-align: center;
    background-color: #FFF0F3 !important;
    border-top: 1px solid #f3f4f6;
}

.category-list {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.category-icon {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}


/* Celebrity Section */
.celebrity-section {
    padding: 4rem 0;
    background: #fff;
    border-top: 1px solid #f3f4f6;
}

/* Hall of Fame */
.fame-section {
    padding: 4rem 0;
    background: #fff;
}

.leaderboard-table {
    max-width: 800px;
    margin: 0 auto;
}

.leaderboard-table tr {
    background: white;
    /* border-bottom: 1px solid #f3f4f6; */
}

.footer-cta {
    background: #991B1B;
    /* Dark red */
    color: white;
    text-align: center;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}


.promo-card {
    background: #4B0082;
    /* Deep purple */
    color: white;
    padding: 2rem;
    border-radius: 1.5rem;
    width: 400px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.promo-tag {
    background: #FFD700;
    color: black;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 1rem;
}

/* Members Section */
.members-section {
    background-color: var(--dark-bg);
    color: white;
    padding: 4rem 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.section-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


.dark-card {
    background: #1F2937;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #374151;
}

.user-snippet {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #374151;
}

/* Trending Section */
.trending-section {
    padding: 4rem 0;
    background: #FFF1F2;
}

.recipe-card {
    border-radius: 1.5rem;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.recipe-card:hover {
    transform: translateY(-5px);
}

.recipe-image {
    position: relative;
    height: 200px;
}

.recipe-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5rem 1.5rem 0 0;
}

.recipe-meta {
    padding: 0.5rem 0;
}

.recipe-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.recipe-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Celebrity Section */
.celebrity-section {
    padding: 5rem 0;
    background: #fff;
    border-top: 1px solid #f3f4f6;
}

.celebrity-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.celebrity-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #1F2937;
    margin-bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.celebrity-title i {
    font-size: 1.5rem;
    color: #1F2937;
}

.celebrity-underline {
    width: 200px;
    height: 4px;
    background: #FCD34D;
    /* Yellow underline */
}

.celebrity-card {
    background: white;
    border-radius: 0.5rem;
    /* Slightly rounded */
    overflow: hidden;
    transition: transform 0.2s;
}

.celebrity-card:hover {
    transform: translateY(-5px);
}

.celebrity-image {
    position: relative;
    height: 250px;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

.celebrity-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.celebrity-card:hover .celebrity-image img {
    transform: scale(1.05);
}

.heart-btn-sm {
    position: absolute;
    top: 10px;
    right: 10px;
    background: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #1F2937;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.celebrity-content {
    padding-top: 0.5rem;
}

.celebrity-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #EA580C;
    /* Orange */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.celebrity-card-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.3;
}

/* Hall of Fame */
.fame-section {
    padding: 5rem 0;
    background: #fff;
    border-top: 1px solid #f3f4f6;
}

.fame-toggle {
    background: #F3F4F6;
    padding: 0.25rem;
    border-radius: 99px;
    display: inline-flex;
    margin-top: 1rem;
}

.fame-btn {
    padding: 0.4rem 1.5rem;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #6B7280;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.fame-btn.active {
    background: white;
    color: #F43F5E;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.leaderboard-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid #F3F4F6;
}

.leaderboard-header {
    display: flex;
    padding: 1rem 2rem;
    background: #FAFAFA;
    border-bottom: 1px solid #F3F4F6;
    font-size: 0.7rem;
    font-weight: 800;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lb-col {
    display: flex;
    align-items: center;
}

.lb-rank {
    width: 10%;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}

.lb-chef {
    width: 45%;
}

.lb-level {
    width: 25%;
}

.lb-score {
    width: 20%;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
}

.leaderboard-row {
    display: flex;
    padding: 1.5rem 2rem;
    align-items: center;
    border-bottom: 1px solid #F3F4F6;
    transition: background 0.2s;
}

.leaderboard-row:hover {
    background: #FAFAFA;
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.top-rank {
    background: #FFF1F2;
}

.rank-medal {
    font-size: 1.5rem;
}

.rank-num {
    font-weight: 800;
    color: #6B7280;
    font-size: 1.1rem;
}

.trend-up {
    color: #10B981;
    font-size: 0.7rem;
}

.trend-down {
    color: #F43F5E;
    font-size: 0.7rem;
}

.trend-flat {
    color: #9CA3AF;
    font-size: 0.7rem;
    font-weight: bold;
    line-height: 0.5;
}

.chef-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.chef-avatar {
    position: relative;
    width: 48px;
    height: 48px;
}

.chef-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.chef-crown {
    position: absolute;
    top: -4px;
    right: -4px;
    color: #F59E0B;
    background: white;
    border-radius: 50%;
    padding: 2px;
    font-size: 0.7rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chef-info {
    display: flex;
    flex-direction: column;
}

.chef-name {
    font-weight: 800;
    color: #1F2937;
    font-size: 0.95rem;
}

.chef-handle {
    font-size: 0.8rem;
    color: #9CA3AF;
}

.level-badge {
    padding: 0.3rem 1rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
}

.level-badge.legend {
    background: #F3E8FF;
    color: #9333EA;
}

.level-badge.master {
    background: #E0E7FF;
    color: #4338CA;
}

.level-badge.sous {
    background: #F3F4F6;
    color: #4B5563;
}

.level-badge.explorer {
    background: #F3F4F6;
    color: #4B5563;
}

.score-val {
    font-weight: 800;
    color: #E11D48;
    font-size: 1.1rem;
}

.score-trend {
    font-size: 0.7rem;
    color: #10B981;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.leaderboard-footer {
    background: #F9FAFB;
    padding: 1.5rem;
    text-align: center;
    border-top: 1px solid #F3F4F6;
}

.lb-footer-text {
    font-size: 0.9rem;
    color: #6B7280;
    margin-bottom: 0.5rem;
}

.lb-link {
    font-size: 0.8rem;
    font-weight: 800;
    color: #F43F5E;
    text-decoration: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.lb-link:hover {
    text-decoration: underline;
}

.hidden-tab {
    display: none !important;
}

.footer-cta {
    background: #881337;
    /* Deep Rose 900-ish */
    color: white;
    text-align: center;
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Background Pattern Overlay */
.footer-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    pointer-events: none;
    background-image: radial-gradient(#ffffff 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5));
}

/* Diagonal Ray Effect */
.footer-cta::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.05) 50%, transparent 55%);
    pointer-events: none;
    transform: rotate(-15deg);
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.cta-icon-wrapper {
    width: 64px;
    height: 64px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    font-size: 1.8rem;
    background: rgba(0, 0, 0, 0.1);
}

.cta-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

.cta-desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.inline-badge {
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    color: white;
    margin: 0 4px;
    white-space: nowrap;
}

.meals-funded-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #4C0519;
    /* Even darker rose */
    padding: 0.75rem 1.5rem;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.meals-funded-pill:hover {
    transform: scale(1.05);
}

.meals-funded-pill i {
    color: #F43F5E;
}


.footer-top-bar {
    height: 20px;
    background: #FFF1F2;
    /* Soft Pink / Cream */
    width: 100%;
}

/* Footer Menu Section */
.footer-menu-section {
    background: #FDFDFD;
    padding: 5rem 0;
    border-top: 1px solid #F3F4F6;
}

.footer-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}

.footer-menu-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1.75rem;
    position: relative;
    display: inline-block;
}

.footer-menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu-links li {
    margin-bottom: 0.85rem;
}

.footer-menu-links a {
    text-decoration: none;
    color: #6B7280;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.footer-menu-links a:hover {
    color: #F43F5E;
    padding-left: 5px;
}

.footer-col-desc {
    font-size: 0.95rem;
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.footer-subscribe-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.footer-subscribe-form input {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    flex: 1;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s;
}

.footer-subscribe-form input:focus {
    border-color: #F43F5E;
}

.btn-subscribe-footer {
    background: #111827;
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-subscribe-footer:hover {
    background: #F43F5E;
}

.footer-badges {
    display: flex;
    gap: 0.75rem;
}

.store-badge {
    height: 35px;
    cursor: pointer;
    transition: transform 0.3s;
}

.store-badge:hover {
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .footer-menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem 2rem;
    }
}

@media (max-width: 640px) {
    .footer-menu-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .footer-menu-section {
        padding: 4rem 0;
    }
}

.main-footer {
    background: white;
    padding: 1rem 0;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

/* Brand Logo Component (Shared) */
.header-logo,
.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.header-logo img {
    max-height: 40px;
    width: auto;
    object-fit: contain;
}

.footer-logo-img {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

.logo-icon-circle {
    width: 40px;
    height: 40px;
    background: #FF415B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(255, 65, 91, 0.2);
}

.logo-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-main-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    color: #111827;
}

.logo-sub-text {
    font-size: 0.7rem;
    font-weight: 800;
    color: #FF415B;
    letter-spacing: 2px;
    margin-top: 2px;
}

.footer-social {
    display: flex;
    gap: 1.5rem;
}

.social-link {
    color: #9CA3AF;
    font-size: 1.2rem;
    transition: color 0.2s;
}

.social-link:hover {
    color: #F43F5E;
}

.footer-bottom {
    text-align: center;
    padding-top: 1rem;
}

.footer-bottom p {
    color: #9CA3AF;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Mobile Menu Styles */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--secondary);
    cursor: pointer;
    margin-right: 1rem;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 1000;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    /* Hidden by default */
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

.mobile-menu-overlay.active {
    transform: translateX(0);
}

.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.status-pill {
    background: #FEF9C3;
    color: #854D0E;
    padding: 0.4rem 1rem;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--secondary);
    cursor: pointer;
}

.mobile-search-container {
    position: relative;
    margin-bottom: 1.5rem;
}

.mobile-search-container i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #F53855;
    font-size: 1.2rem;
}

/* Profile Photo Design Update */
.profile-photo-group {
    margin-bottom: 2rem;
}

.profile-photo-group label.group-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: #111827;
}

.photo-uploader-flex {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.photo-preview-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: #008073;
    /* Reference Teal */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.photo-preview-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.initial-fallback {
    color: white;
    font-size: 3rem;
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

.photo-controls label {
    display: inline-block;
    padding: 0.6rem 1.75rem;
    background: #E5E7EB;
    /* Light Grey from reference */
    border: none;
    border-radius: 12px;
    /* Rounded pill-like */
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #000;
    transition: background 0.2s;
}

.photo-controls label:hover {
    background: #D1D5DB;
}

.photo-hint {
    display: none;
    /* Hide per reference design */
}

/* Settings Alerts */
.settings-alert {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.settings-alert-success {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.settings-alert-error {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.mobile-search-container input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 3rem;
    border: 1px solid #FECaca;
    border-radius: 0.5rem;
    outline: none;
    background: #FFF5F5;
    color: var(--secondary);
    font-size: 1rem;
}

.mobile-action-btn {
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: bold;
}

.mobile-nav-list {
    list-style: none;
    margin-bottom: 5rem;
    /* Space for bottom nav */
}

.mobile-nav-item {
    border-bottom: 1px solid #f3f4f6;
}

.mobile-nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

.mobile-sub-menu {
    display: none;
    list-style: none;
    padding-left: 1rem;
    padding-bottom: 1rem;
}

.mobile-nav-item.open .mobile-sub-menu {
    display: block;
}

.mobile-sub-menu li a {
    display: block;
    padding: 0.5rem 0;
    color: #6B7280;
    text-decoration: none;
    font-size: 0.9rem;
}

.mobile-bottom-nav {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    padding: 1rem 0;
    z-index: 1001;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    color: #9CA3AF;
    font-size: 0.8rem;
    cursor: pointer;
}

.bottom-nav-item .icon-wrapper {
    width: 40px;
    height: 40px;
    background: #F3F4F6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Media Queries */
@media (max-width: 1280px) {

    /* Hide Desktop Elements */
    .nav-links,
    .top-menu-bar {
        /* Top bar hiding attempt */
        display: none !important;
    }

    /* Show Mobile Elements */
    .hamburger-btn {
        display: block !important;
    }

    .hero h1 {
        font-size: 2rem;
    }

    /* Popular Categories Responsive */
    .category-list {
        gap: 1.5rem;
        padding: 0 1rem;
    }

    .category-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .category-item span {
        font-size: 0.85rem;
    }

    /* Footer Responsive */
    .footer-main {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-top-bar {
        height: 40px;
    }
}

/* Community Section New Styles */
.community-card {
    background: white;
    border: 1px solid #F3F4F6;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.com-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: flex-start;
}

.com-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.com-action {
    font-size: 0.9rem;
    color: #4B5563;
    line-height: 1.4;
}

.com-user {
    font-weight: 800;
    color: #F43F5E;
}

.com-target {
    font-weight: 700;
    color: #F43F5E;
}

.com-rating {
    margin-bottom: 1rem;
    color: #FBBF24;
    font-size: 0.9rem;
    margin-left: 0.2rem;
}

.com-content {
    font-size: 0.95rem;
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.com-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid transparent;
    padding-top: 0.5rem;
}

.com-time {
    font-size: 0.75rem;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
}

.com-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.com-reply {
    font-size: 0.75rem;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    cursor: pointer;
}

.com-heart {
    color: #9CA3AF;
    font-size: 1.1rem;
    cursor: pointer;
}

.com-heart:hover {
    color: #F43F5E;
}

/* Category Results Page */
.results-page {
    padding: 4rem 0;
    min-height: 80vh;
    background-color: #FFF1F2;
    /* Soft cream/pinkish bg from image */
}

.results-header {
    text-align: center;
    margin-bottom: 4rem;
}

.results-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    color: #1F2937;
    margin-bottom: 0.75rem;
}

.results-count {
    color: #6B7280;
    font-size: 1.1rem;
}

@media (max-width: 1280px) {
    .results-title {
        font-size: 2rem;
        padding: 0 1rem;
    }
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 4rem;
}

.page-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: white;
    color: var(--secondary);
    text-decoration: none;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #E5E7EB;
    transition: all 0.2s;
}

.page-btn:hover:not(.disabled) {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(245, 56, 85, 0.1);
}

.page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f9fafb;
}

.page-numbers {
    display: flex;
    gap: 0.5rem;
}

.page-num {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: var(--secondary);
    text-decoration: none;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #E5E7EB;
    transition: all 0.2s;
}

.page-num.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.page-num:hover:not(.active) {
    border-color: var(--primary);
    color: var(--primary);
}

.page-dots {
    display: flex;
    align-items: center;
    color: #9CA3AF;
    padding: 0 0.25rem;
}

@media (max-width: 768px) {
    .pagination {
        flex-direction: column;
        gap: 1.5rem;
    }

    .page-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Recipe Detail Page Styles */
.recipe-detail-nav {
    background-color: #FFD700;
    padding: 0.75rem 0;
    margin-bottom: 2rem;
}

.recipe-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recipe-nav-link {
    text-decoration: none;
    color: #1F2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recipe-breadcrumbs {
    color: #6B7280;
}

.recipe-breadcrumbs a {
    text-decoration: none;
    color: #6B7280;
}

.recipe-breadcrumbs span {
    color: #1F2937;
}

.recipe-header {
    text-align: center;
    margin-bottom: 2rem;
}

.recipe-main-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 900;
    color: #1F2937;
    margin-bottom: 1rem;
}

.recipe-stats-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.recipe-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #FBBF24;
}

.recipe-review-count {
    color: #3B82F6;
    text-decoration: none;
}

.recipe-views {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6B7280;
}

.community-pick-badge {
    background: #FFF1F2;
    color: #F43F5E;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.recipe-intro {
    background: #FFF0F3;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    text-align: center;
    color: #4B5563;
    line-height: 1.6;
    font-size: 1rem;
    border: 1px dashed #FCA5A5;
}

.recipe-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.author-snippet {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFD700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    color: #1F2937;
}

.author-info {
    font-size: 0.8rem;
}

.author-info span {
    color: #1F2937;
    font-weight: 700;
}

.author-info cite {
    font-style: normal;
    color: #3B82F6;
    cursor: pointer;
}

.action-buttons {
    display: flex;
    gap: 1rem;
}

.btn-made-this {
    background: #FFD700;
    color: #1F2937;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.btn-like-recipe {
    background: white;
    color: #1F2937;
    border: 1px solid #E5E7EB;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.recipe-utility-icons {
    display: flex;
    gap: 1rem;
    color: #9CA3AF;
    font-size: 1.1rem;
}

.recipe-main-image-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 2rem;
}

.recipe-main-image-wrapper img {
    width: 100%;
    display: block;
}

.image-view-overlay {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recipe-toc-container {
    background: #F9FAFB;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 3rem;
}

.toc-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.125rem;
    margin-bottom: 1rem;
    color: #1F2937;
}

.toc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.toc-link {
    color: #F43F5E;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.recipe-story-section {
    margin-bottom: 3rem;
}

.recipe-story-section h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: #1F2937;
}

.recipe-story-section h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #1F2937;
}

.recipe-story-section p {
    color: #4B5563;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.recipe-layout-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 4rem;
}

.sidebar-title {
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: #1F2937;
}

.sidebar-recipe-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
}

.sidebar-recipe-img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
}

.sidebar-recipe-info h4 {
    font-size: 0.9rem;
    color: #1F2937;
    margin-bottom: 0.25rem;
}

.sidebar-recipe-info span {
    font-size: 0.75rem;
    color: #9CA3AF;
}

.premium-cta-card {
    background: #6D142F;
    color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    text-align: center;
    margin-top: 3rem;
}

.premium-cta-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.premium-cta-card p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
}

.btn-learn-more {
    background: white;
    color: #1F2937;
    border: none;
    padding: 0.5rem 2rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
    width: 100%;
}

@media (max-width: 1024px) {
    .recipe-layout-grid {
        grid-template-columns: 1fr;
    }

    .recipe-main-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .recipe-breadcrumbs {
        display: none;
    }

    .recipe-nav-container {
        font-size: 0.75rem;
        justify-content: space-between;
        gap: 1rem;
    }

    .recipe-nav-link {
        flex: 1;
        justify-content: center;
        text-align: center;
        background: rgba(0, 0, 0, 0.05);
        padding: 0.5rem;
        border-radius: 4px;
    }
}


/* Recipe Detail Page Styles */
.recipe-detail-nav {
    background-color: #FFD700;
    padding: 0.75rem 0;
    margin-bottom: 2rem;
}

.recipe-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recipe-nav-link {
    text-decoration: none;
    color: #1F2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recipe-breadcrumbs {
    color: #6B7280;
}

.recipe-breadcrumbs a {
    text-decoration: none;
    color: #6B7280;
}

.recipe-breadcrumbs span {
    color: #1F2937;
}

.recipe-header {
    text-align: center;
    margin-bottom: 2rem;
}

.recipe-main-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 900;
    color: #1F2937;
    margin-bottom: 1rem;
}

.recipe-stats-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.recipe-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #FBBF24;
}

.recipe-review-count {
    color: #3B82F6;
    text-decoration: none;
}

.recipe-views {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6B7280;
}

.community-pick-badge {
    background: #FFF1F2;
    color: #F43F5E;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.recipe-intro {
    background: #FFF0F3;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    text-align: center;
    color: #4B5563;
    line-height: 1.6;
    font-size: 1rem;
    border: 1px dashed #FCA5A5;
}

.recipe-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.author-snippet {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFD700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    color: #1F2937;
    overflow: hidden;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-info {
    font-size: 0.8rem;
}

.author-info span {
    color: #1F2937;
    font-weight: 700;
}

.author-info cite {
    font-style: normal;
    color: #3B82F6;
    cursor: pointer;
}

.action-buttons {
    display: flex;
    gap: 1rem;
}

.btn-made-this {
    background: #FFD700;
    color: #1F2937;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.btn-like-recipe {
    background: white;
    color: #1F2937;
    border: 1px solid #E5E7EB;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.recipe-utility-icons {
    display: flex;
    gap: 1rem;
    color: #9CA3AF;
    font-size: 1.1rem;
}

.recipe-main-image-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 2rem;
}

.recipe-main-image-wrapper img {
    width: 100%;
    display: block;
}

.image-view-overlay {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recipe-toc-container {
    background: #F9FAFB;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 3rem;
}

.toc-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.125rem;
    margin-bottom: 1rem;
    color: #1F2937;
}

.toc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.toc-link {
    color: #F43F5E;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.recipe-story-section {
    margin-bottom: 3rem;
}

.recipe-story-section h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: #1F2937;
}

.recipe-story-section h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #1F2937;
}

.recipe-story-section p {
    color: #4B5563;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.recipe-layout-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 4rem;
}

.recipe-sidebar {
    position: sticky;
    top: 10rem;
    align-self: start;
}

.sidebar-title {
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: #1F2937;
}

.sidebar-recipe-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
}

.sidebar-recipe-img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
}

.sidebar-recipe-info h4 {
    font-size: 0.9rem;
    color: #1F2937;
    margin-bottom: 0.25rem;
}

.sidebar-recipe-info span {
    font-size: 0.75rem;
    color: #9CA3AF;
}

.premium-cta-card {
    background: #6D142F;
    color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    text-align: center;
    margin-top: 3rem;
}

.premium-cta-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.premium-cta-card p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
}

.btn-learn-more {
    background: white;
    color: #1F2937;
    border: none;
    padding: 0.5rem 2rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
    width: 100%;
}

@media (max-width: 1024px) {
    .recipe-layout-grid {
        grid-template-columns: 1fr;
    }

    .recipe-main-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .recipe-breadcrumbs {
        display: none;
    }

    .recipe-nav-container {
        font-size: 0.75rem;
        justify-content: space-between;
        gap: 1rem;
    }

    .recipe-nav-link {
        flex: 1;
        justify-content: center;
        text-align: center;
        background: rgba(0, 0, 0, 0.05);
        padding: 0.5rem;
        border-radius: 4px;
    }
}

/* Recipe Card (Ingredients & Directions) */
.recipe-card-main {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 3rem;
    margin: 4rem 0;
    border: 1px solid #F3F4F6;
}

.recipe-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.recipe-card-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: #1F2937;
    margin-bottom: 1rem;
}

.recipe-card-meta-tags {
    display: flex;
    gap: 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #F43F5E;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.meta-tag span {
    color: #6B7280;
    margin-left: 0.25rem;
}

.recipe-card-thumb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.recipe-card-info-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #F3F4F6;
    border-bottom: 1px solid #F3F4F6;
    padding: 1.5rem 0;
    margin-bottom: 3rem;
    text-align: center;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: #9CA3AF;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1F2937;
}

.recipe-card-body-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
}

.column-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #1F2937;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.column-title i {
    font-size: 1.2rem;
}

.column-tip {
    font-size: 0.75rem;
    font-style: italic;
    color: #9CA3AF;
    margin-bottom: 2rem;
}

/* Custom Checkbox for Ingredients */
.ingredients-list {
    list-style: none;
    padding: 0;
}

.ingredients-list li {
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #F9FAFB;
    padding-bottom: 0.75rem;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #4B5563;
    user-select: none;
    line-height: 1.4;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 22px;
    width: 22px;
    background-color: white;
    border: 2px solid #E5E7EB;
    border-radius: 50%;
    transition: all 0.2s;
}

.custom-checkbox:hover input~.checkmark {
    border-color: #F43F5E;
}

.custom-checkbox input:checked~.checkmark {
    background-color: #F43F5E;
    border-color: #F43F5E;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked+.checkmark+span {
    text-decoration: line-through;
    color: #9CA3AF;
}

/* Directions Steps */
.directions-steps {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.step-item {
    display: flex;
    gap: 1.5rem;
}

.step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #FFF1F2;
    color: #F43F5E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
}

.step-item p {
    font-size: 1rem;
    line-height: 1.7;
    color: #4B5563;
    margin: 0;
}

/* Nutrition Facts */
.nutrition-facts-section {
    margin: 4rem 0;
}

.nutrition-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

.nutrition-card {
    background: #F9FAFB;
    padding: 2.5rem;
    border-radius: 1rem;
    border: 1px solid #F3F4F6;
}

.nutrition-serving {
    font-size: 1rem;
    color: #1F2937;
    margin-bottom: 2rem;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 1rem;
}

.nutrition-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 2rem;
}

.nutrition-item {
    font-size: 0.85rem;
    color: #4B5563;
}

.nutrition-item strong {
    color: #1F2937;
}

@media (max-width: 768px) {
    .recipe-card-main {
        padding: 1.5rem;
    }

    .recipe-card-header {
        flex-direction: column-reverse;
        gap: 1.5rem;
    }

    .recipe-card-info-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .recipe-card-body-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .nutrition-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Recipe Card (Ingredients & Directions) */
.recipe-card-main {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    margin: 4rem 0;
    border: 1px solid #F3F4F6;
}

.recipe-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.recipe-card-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: #1F2937;
    margin-bottom: 1rem;
}

.recipe-card-meta-tags {
    display: flex;
    gap: 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #F43F5E;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.meta-tag span {
    color: #6B7280;
    margin-left: 0.25rem;
}

.recipe-card-thumb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.recipe-card-info-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #F3F4F6;
    border-bottom: 1px solid #F3F4F6;
    padding: 1.5rem 0;
    margin-bottom: 3rem;
    text-align: center;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: #9CA3AF;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1F2937;
}

.recipe-card-body-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
}

.column-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #1F2937;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.column-title i {
    font-size: 1.2rem;
}

.column-tip {
    font-size: 0.75rem;
    font-style: italic;
    color: #9CA3AF;
    margin-bottom: 2rem;
}

/* Custom Checkbox for Ingredients */
.ingredients-list {
    list-style: none;
    padding: 0;
}

.ingredients-list li {
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #F9FAFB;
    padding-bottom: 0.75rem;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #4B5563;
    user-select: none;
    line-height: 1.4;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 22px;
    width: 22px;
    background-color: white;
    border: 2px solid #E5E7EB;
    border-radius: 50%;
    transition: all 0.2s;
}

.custom-checkbox:hover input~.checkmark {
    border-color: #F43F5E;
}

.custom-checkbox input:checked~.checkmark {
    background-color: #F43F5E;
    border-color: #F43F5E;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked+.checkmark+span {
    text-decoration: line-through;
    color: #9CA3AF;
}

/* Directions Steps */
.directions-steps {
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

.step-item {
    display: flex;
    gap: 1.5rem;
}

.step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #FFF1F2;
    color: #F43F5E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
}

.step-item p {
    font-size: 1rem;
    line-height: 1.7;
    color: #4B5563;
    margin: 0;
}

/* Nutrition Facts */
.nutrition-facts-section {
    margin: 4rem 0;
}

.nutrition-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

.nutrition-card {
    background: #F9FAFB;
    padding: 2.5rem;
    border-radius: 1rem;
    border: 1px solid #F3F4F6;
}

.nutrition-serving {
    font-size: 1rem;
    color: #1F2937;
    margin-bottom: 2rem;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 1rem;
}

.nutrition-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 2rem;
}

.nutrition-item {
    font-size: 0.85rem;
    color: #4B5563;
}

.nutrition-item strong {
    color: #1F2937;
}

@media (max-width: 768px) {
    .recipe-card-main {
        padding: 1.5rem;
    }

    .recipe-card-header {
        flex-direction: column-reverse;
        gap: 1.5rem;
    }

    .recipe-card-info-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .recipe-card-body-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .nutrition-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Responsive Action Bar */
@media (max-width: 768px) {
    .recipe-action-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .action-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .btn-made-this,
    .btn-like-recipe {
        flex: 1;
        justify-content: center;
    }

    .recipe-utility-icons {
        width: 100%;
        justify-content: flex-start;
        border-top: 1px solid #F3F4F6;
        padding-top: 1rem;
    }
}


/* Responsive Action Bar */
@media (max-width: 768px) {
    .recipe-action-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .action-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .btn-made-this,
    .btn-like-recipe {
        flex: 1;
        justify-content: center;
    }

    .recipe-utility-icons {
        width: 100%;
        justify-content: flex-start;
        border-top: 1px solid #F3F4F6;
        padding-top: 1rem;
    }
}

/* FAQ Section */
.recipe-faq-section {
    margin: 4rem 0;
}

.faq-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--secondary);
}

.faq-title i {
    color: #F43F5E;
    font-size: 1.5rem;
}

.faq-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.faq-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s, box-shadow 0.2s;
}

.faq-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.faq-question {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--secondary);
    margin-bottom: 0.75rem;
    display: flex;
    gap: 0.5rem;
}

.q-label {
    color: #F43F5E;
    font-weight: 900;
}

.faq-answer {
    font-size: 0.95rem;
    color: #6B7280;
    line-height: 1.6;
    display: flex;
    gap: 0.5rem;
}

.a-label {
    color: #9CA3AF;
    font-weight: 700;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .faq-card {
        padding: 1.25rem 1.5rem;
    }

    .faq-question {
        font-size: 1rem;
    }

    .faq-answer {
        font-size: 0.9rem;
    }
}


/* Community Sections Shared Styles */
.community-section {
    margin: 4rem 0;
    border-top: 1px solid #F3F4F6;
    padding-top: 3rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--secondary);
    letter-spacing: 0.5px;
}

.section-title.border-title {
    margin-bottom: 2rem;
}

.sort-dropdown {
    font-size: 0.75rem;
    font-weight: 700;
    color: #4B5563;
    background: #F9FAFB;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
}

.sort-dropdown.grey {
    background: #F3F4F6;
}

/* Sort Dropdown Premium */
.sort-dropdown-modern {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    transition: all 0.2s;
    background: #F8FAFC !important;
    border-radius: 6px !important;
    padding: 0.6rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    border: 1.5px solid #F1F5F9 !important;
}

.sort-dropdown-modern:hover {
    border-color: #CBD5E1 !important;
    background: #F1F5F9 !important;
}

.sort-dropdown-modern i {
    font-size: 0.75rem;
    color: #64748B;
}

.sort-dropdown-modern select {
    border: none !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    cursor: pointer !important;
    outline: none !important;
    text-transform: uppercase !important;
    padding: 0 !important;
}

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Common Card Styles */
.tweak-card,
.question-card,
.review-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: white;
    border: 1px solid #ECEFF1;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.user-avatar,
.user-avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.user-avatar-placeholder {
    background: #E5E7EB;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.user-avatar-placeholder.blue {
    background: #DBEAFE;
    color: #3B82F6;
}

.tweak-content,
.review-content {
    flex: 1;
}

.tweak-content p,
.review-card p,
.question-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #4B5563;
    margin-bottom: 1.5rem;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.user-name {
    font-size: 0.75rem;
    font-weight: 800;
    color: #4B5563;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.footer-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: #9CA3AF;
}

.btn-reply {
    background: none;
    border: none;
    font-weight: 800;
    font-size: 0.75rem;
    color: #1F2937;
    cursor: pointer;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.2s;
}

.btn-reply:hover {
    color: #F43F5E;
}

.like-count {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Questions Specific */
.question-input-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.user-inline-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
}

.user-inline-avatar.yellow {
    background: #FBBF24;
}

.user-inline-avatar.pink {
    background: #F43F5E;
}

.user-inline-avatar.large {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
}

.input-wrapper {
    flex: 1;
    position: relative;
}

.input-wrapper input {
    width: 100%;
    padding: 0.75rem 1.5rem;
    border-radius: 99px;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    outline: none;
    font-size: 0.95rem;
}

.btn-signin {
    background: #6EE7B7;
    /* Mint/Aqua as per image */
    color: #111827;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Reviews Specific */
.header-buttons {
    display: flex;
    gap: 1rem;
}

.btn-write-review {
    background: #FBBF24;
    color: #111827;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-write-review span {
    background: rgba(255, 255, 255, 0.3);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
}

.review-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.star-rating {
    color: #F43F5E;
    display: flex;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.star-rating .empty {
    color: #E5E7EB;
}

.menu-dots {
    color: #D1D5DB;
    cursor: pointer;
}

@media (max-width: 768px) {

    .tweak-card,
    .question-card,
    .review-card {
        padding: 1.5rem;
        gap: 1rem;
    }

    .user-avatar,
    .user-avatar-placeholder {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .question-input-row {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-signin,
    .input-wrapper,
    .user-inline-avatar {
        width: 100%;
    }

    .user-inline-avatar {
        display: none;
        /* Hide in mobile input row for space */
    }
}


/* Cooking Progress Bar (Sticky Bottom) */
.cooking-progress-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 2000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.progress-track {
    height: 4px;
    background: #F3F4F6;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #F43F5E;
    transition: width 0.3s ease;
}

.progress-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
}

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

.progress-info {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.progress-title {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 800;
    color: #9CA3AF;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.progress-percentage {
    color: #F43F5E;
    font-weight: 900;
    font-size: 0.85rem;
}

.progress-tip {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #9CA3AF;
    font-style: italic;
}

@media (max-width: 768px) {
    .progress-tip {
        display: none;
    }

    .progress-container {
        padding: 0.6rem 1rem;
    }

    .progress-info {
        gap: 1rem;
    }
}


/* Refined Global Components */
.btn-made-this {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-made-this:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3);
}

.btn-write-review {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%) !important;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-write-review:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3);
}

.tweak-card,
.question-card,
.review-card,
.faq-card,
.recipe-card-main,
.nutrition-card {
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.tweak-card:hover,
.question-card:hover,
.review-card:hover,
.faq-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover) !important;
    border-color: rgba(245, 56, 85, 0.1) !important;
}

/* Glassmorphism for Progress Bar */
.cooking-progress-sticky {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Staggered Animation Delays */
.recipe-hero {
    animation-delay: 0.1s;
}

.recipe-card-main {
    animation-delay: 0.2s;
}

.recipe-main-content>div {
    animation-delay: 0.3s;
}

.recipe-sidebar>.animate-up {
    animation-delay: 0.4s;
}


/* Sidebar Enhancement Overrides */
.sidebar-recipe-item {
    gap: 1.25rem !important;
    padding: 0.6rem !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-recipe-item:hover {
    background: #fdfdfd !important;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05) !important;
    transform: translateX(5px) !important;
}

.sidebar-recipe-img {
    width: 80px !important;
    height: 80px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
}

.sidebar-recipe-info h4 {
    font-size: 0.95rem !important;
    font-family: var(--font-heading) !important;
    color: var(--secondary) !important;
    margin-bottom: 0.25rem !important;
}

.sidebar-recipe-item:hover h4 {
    color: var(--primary) !important;
}

.premium-cta-card {
    background: linear-gradient(135deg, #6D142F 0%, #4A0E1F 100%) !important;
    border-radius: 1.25rem !important;
    padding: 2.25rem 1.5rem !important;
}

.btn-learn-more {
    border-radius: 50px !important;
    padding: 0.8rem 2rem !important;
    background: white !important;
    color: #6D142F !important;
    transition: all 0.3s !important;
}

.btn-learn-more:hover {
    transform: translateY(-2px) !important;
    background: #FFF0F3 !important;
}


/* Step Checkbox Refining */
.step-checkbox {
    padding-left: 45px !important;
    display: block !important;
}

.step-checkbox .step-number {
    position: absolute;
    left: 45px;
    top: -2px;
}

.step-checkbox p {
    padding-left: 45px;
}

.step-checkbox input:checked~p {
    text-decoration: line-through;
    color: #9CA3AF;
}

.step-checkbox input:checked~.step-number {
    background: #9CA3AF !important;
    color: white !important;
    opacity: 0.6;
}

/* Ensure checkmark is centered in step label */
.step-checkbox .checkmark {
    top: 50% !important;
}


/* Improved Step Checkbox Layout */
.step-checkbox {
    padding-left: 35px !important;
    position: relative;
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem;
}

.step-checkbox .checkmark {
    top: 5px !important;
    transform: none !important;
}

.step-checkbox .step-number {
    position: static !important;
    margin-top: 2px;
}

.step-checkbox p {
    padding-left: 0 !important;
    flex: 1;
}

.step-checkbox input:checked~p {
    text-decoration: line-through;
    color: #9CA3AF;
}

.step-checkbox input:checked~.step-number {
    background: #E5E7EB !important;
    color: #9CA3AF !important;
}

/* Design Mockup Match for Sidebar */
.sidebar-card {
    background: white !important;
    border: 1px solid #F3F4F6 !important;
    border-radius: 1.0rem !important;
    padding: 1.5rem !important;
}

.sidebar-recipes-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}

.sidebar-recipe-item {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.sidebar-recipe-item:hover {
    transform: translateX(5px) !important;
    background: transparent !important;
}

.sidebar-recipe-info h4 {
    font-size: 0.9rem !important;
    margin-bottom: 0.0rem !important;
    line-height: 20px;
}

.sidebar-recipe-info span {
    font-size: 0.7rem !important;
}

.premium-cta-card {
    margin-top: 0 !important;
    padding: 2.5rem 1.5rem !important;
}


.recipe-sidebar {
    margin-bottom: 0rem !important;
}

.sidebar-title {
    font-family: 'Merriweather', serif !important;
}

/* Refined Hero Inner Elements */
.winner-badge {
    background: linear-gradient(135deg, #FFD700 0%, #FBBF24 100%) !important;
    border: 2px solid white;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4) !important;
}

.winner-badge-pill {
    background: #FFFBEB !important;
    color: #B45309 !important;
    font-weight: 900 !important;
    border: 1.5px solid #FDE68A !important;
}

.winner-stats {
    background: #FDF2F8 !important;
    /* Extremely light pink */
    border: 1px solid #FCE7F3;
}

.secret-box {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}

.secret-icon {
    background: linear-gradient(135deg, #FBBF24 0%, #D97706 100%) !important;
    border: 2px solid #FEF3C7 !important;
}

.btn-submit {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Mobile Hero Alignment */
@media (max-width: 768px) {
    .hero {
        padding: 3rem 0;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .hero-content {
        gap: 2.5rem;
    }

    .weekly-winner-card,
    .promo-card {
        transform: rotate(0deg) !important;
        margin: 0 1rem;
    }
}


/* Premium Page Styles */
.premium-page {
    background-color: #FFF0F3;
    padding: 6rem 0;
    min-height: 100vh;
}

.premium-hero {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 5rem auto;
}

.premium-badge-pill {
    background: #FEF3C7;
    color: #D97706;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border: 1px solid #FDE68A;
}

.premium-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: #1F2937;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.premium-subtitle {
    font-size: 1.25rem;
    color: #4B5563;
    line-height: 1.6;
}

/* Pricing Grid */
.pricing-section {
    margin-bottom: 6rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 2.5rem;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    padding: 3rem 2rem;
    border-radius: 2rem;
    position: relative;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1);
}

.gold-tier {
    background: #111827;
    color: white;
    padding-top: 4rem;
    border: 2px solid #FBBF24;
    box-shadow: 0 25px 50px -12px rgba(251, 191, 36, 0.25);
}

.popular-tag {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: #FBBF24;
    color: #111827;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    font-weight: 900;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.card-header h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.card-header p {
    color: #6B7280;
    font-size: 0.95rem;
}

.gold-tier .card-header p {
    color: #9CA3AF;
}

.card-price {
    margin: 2rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.card-price .currency {
    font-size: 1.5rem;
    font-weight: 700;
}

.card-price .amount {
    font-size: 3.5rem;
    font-weight: 800;
}

.card-price .period {
    color: #6B7280;
    font-weight: 500;
}

.gold-tier .card-price .period {
    color: #9CA3AF;
}

.feature-list {
    list-style: none;
    margin-bottom: 2.5rem;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: #374151;
}

.feature-list li i {
    color: #10B981;
}

.gold-features li {
    color: #E5E7EB;
}

.gold-features li i {
    color: #FBBF24;
}

.chef-icon-wrap {
    width: 50px;
    height: 50px;
    background: #FBBF24;
    color: #111827;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

/* Gamification Box */
.sp-gamification-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    backdrop-filter: blur(10px);
}

.gamification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.sp-offer {
    color: #FBBF24;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.save-tag {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
}

.gamification-text {
    font-size: 0.85rem;
    color: #D1D5DB;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.highlight-text {
    color: #FBBF24;
    text-decoration: underline;
    font-weight: 700;
}

.sp-progress-container {
    margin-bottom: 0.75rem;
}

.sp-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #9CA3AF;
    margin-bottom: 0.5rem;
}

.sp-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.sp-progress-fill {
    height: 100%;
    background: linear-gradient(to right, #FBBF24, #F59E0B);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.earn-points-link {
    font-size: 0.75rem;
    color: #FBBF24;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.earn-points-link:hover {
    text-decoration: underline;
}

/* Buttons */
.disabled-btn {
    width: 100%;
    background: #F3F4F6 !important;
    color: #9CA3AF !important;
    border: 1px solid #E5E7EB !important;
    cursor: default;
    box-shadow: none !important;
}

.btn-premium-join {
    width: 100%;
    background: linear-gradient(to right, #F59E0B, #EA580C) !important;
    color: white !important;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 800;
    border: none;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.3) !important;
    transition: all 0.3s ease;
}

.btn-premium-join:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(234, 88, 12, 0.5) !important;
}

.card-footer-note {
    text-align: center;
    font-size: 0.75rem;
    color: #9CA3AF;
    margin-top: 1rem;
}

.card-footer-note a {
    color: #FBBF24;
    text-decoration: none;
    font-weight: 700;
}

/* Charity Section */
.charity-section {
    max-width: 1000px;
    margin: 0 auto;
}

.charity-card {
    background: #BE123C;
    /* Dark Rose */
    background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.1) 0%, transparent 40%);
    color: white;
    padding: 4rem 3rem;
    border-radius: 2.5rem;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px -10px rgba(190, 18, 60, 0.4);
}

.heart-icon-badge {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 2rem auto;
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.charity-card h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.charity-intro {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
    color: #FECDD3;
}

.stats-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 3rem;
    backdrop-filter: blur(10px);
}

.stat-item {
    flex: 1;
    padding: 0 1.5rem;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: #FDA4AF;
    letter-spacing: 1px;
}

.stat-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.charity-quote {
    font-style: italic;
    color: #FECDD3;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .premium-title {
        font-size: 2.5rem;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        flex-direction: column;
        gap: 2rem;
    }

    .stat-divider {
        width: 100%;
        height: 1px;
    }
}


/* Precision Refinements for Premium Page */
.premium-page {
    background: #FFF0F3 !important;
    /* The exact light pink from mockup */
}

.premium-title {
    font-family: var(--font-heading);
    color: #1F2937;
    margin-bottom: 0.75rem;
}

.premium-subtitle {
    font-size: 1.1rem;
    color: #6B7280;
    margin-bottom: 4rem;
}

.gold-tier {
    background: #0F172A !important;
    /* Slightly darker slate/black */
    border: none !important;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.4) !important;
}

.sp-gamification-box {
    background: #1E293B !important;
    /* Lighter than card bg */
    border-radius: 1rem !important;
}

.btn-premium-join {
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%) !important;
    /* Vibrant orange */
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* Charity Section Pattern & Refinement */
.charity-card {
    background-color: #F43F5E !important;
    /* The vibrant rose from mockup */
    background-image:
        radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 24px 24px;
    padding: 5rem 2rem !important;
}

.heart-icon-badge {
    background: white !important;
    color: #F43F5E !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.charity-card h2 {
    font-size: 2.2rem;
    font-weight: 800;
}

.stats-grid {
    background: rgba(0, 0, 0, 0.2) !important;
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
}

.stat-label {
    color: white !important;
    opacity: 0.9;
    font-size: 0.6rem;
}

.stat-divider {
    background: rgba(255, 255, 255, 0.2) !important;
}

.charity-quote {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}


/* =============================================
   PIXEL-PERFECT PREMIUM PAGE OVERRIDES
   Matching exact mockup colors and design
   ============================================= */

/* Overall Page Background */
.premium-page {
    background: #FFEEF2 !important;
    /* Exact mockup pink */
    padding-top: 4rem !important;
    padding-bottom: 6rem !important;
}

/* Hero Section */
.premium-hero {
    margin-bottom: 3.5rem !important;
}

.premium-badge-pill {
    background: #FEF3C7 !important;
    color: #92400E !important;
    font-size: 0.7rem !important;
    padding: 0.4rem 1rem !important;
    border: none !important;
}

.premium-badge-pill i {
    color: #D97706 !important;
}

.premium-title {
    font-size: 2.8rem !important;
    font-family: var(--font-heading) !important;
    margin-bottom: 0.5rem !important;
}

.premium-subtitle {
    color: #6B7280 !important;
    font-size: 1rem !important;
}

/* ===== FREE TIER CARD ===== */
.free-tier {
    background: white !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 1.25rem !important;
    padding: 2rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.free-tier .card-header h2 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.25rem !important;
}

.free-tier .card-header p {
    font-size: 0.85rem !important;
    color: #6B7280 !important;
}

.free-tier .card-price {
    margin: 1.5rem 0 !important;
}

.free-tier .card-price .amount {
    font-size: 2.5rem !important;
}

.free-tier .feature-list li {
    font-size: 0.85rem !important;
    color: #374151 !important;
}

.free-tier .feature-list li i {
    color: #F43F5E !important;
}

.disabled-btn {
    font-size: 0.9rem !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.75rem !important;
}

/* ===== GOLD TIER CARD ===== */
.gold-tier {
    background: #0F172A !important;
    border: none !important;
    padding: 2.5rem 2rem 2rem 2rem !important;
    border-radius: 1.5rem !important;
}

.popular-tag {
    background: #F43F5E !important;
    color: white !important;
    font-size: 0.65rem !important;
    padding: 0.35rem 0.8rem !important;
}

.chef-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    border-radius: 0.75rem !important;
    background: #FBBF24 !important;
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
}

.gold-tier .card-header h2 {
    font-size: 1.5rem !important;
    color: white !important;
}

.gold-tier .card-header p {
    color: #94A3B8 !important;
    font-size: 0.85rem !important;
}

.gold-tier .card-price {
    margin: 1.25rem 0 !important;
}

.gold-tier .card-price .amount {
    font-size: 2.5rem !important;
    color: white !important;
}

.gold-tier .card-price .period {
    color: #64748B !important;
}

/* Gamification Box */
.sp-gamification-box {
    background: #1E293B !important;
    border: 1px solid #334155 !important;
    border-radius: 0.75rem !important;
    padding: 1rem 1.25rem !important;
    margin: 1.5rem 0 !important;
}

.gamification-header {
    margin-bottom: 0.75rem !important;
}

.sp-offer {
    color: #FDE68A !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}

.sp-offer i {
    color: #FBBF24 !important;
}

.save-tag {
    background: #166534 !important;
    color: #86EFAC !important;
    font-size: 0.6rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 3px !important;
}

.gamification-text {
    font-size: 0.75rem !important;
    color: #94A3B8 !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
}

.gamification-text strong {
    color: #FBBF24 !important;
}

.highlight-text {
    color: #FBBF24 !important;
    text-decoration: underline !important;
}

.sp-progress-info {
    font-size: 0.65rem !important;
    color: #64748B !important;
}

.sp-progress-bar {
    height: 3px !important;
    background: #334155 !important;
}

.sp-progress-fill {
    background: #FBBF24 !important;
    box-shadow: none !important;
}

.earn-points-link {
    font-size: 0.7rem !important;
    color: #FBBF24 !important;
}

/* Gold Features List */
.gold-features li {
    font-size: 0.85rem !important;
    color: #E2E8F0 !important;
    margin-bottom: 0.75rem !important;
}

.gold-features li i {
    color: #FBBF24 !important;
}

/* Join Button */
.btn-premium-join {
    background: linear-gradient(to right, #EA580C, #C2410C) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 0.9rem 1.5rem !important;
    border-radius: 0.75rem !important;
    letter-spacing: 0.3px !important;
}

.btn-premium-join i {
    font-size: 0.9rem !important;
}

.card-footer-note {
    font-size: 0.7rem !important;
    color: #64748B !important;
}

.card-footer-note a {
    color: #FBBF24 !important;
    text-decoration: underline !important;
}

/* ===== CHARITY SECTION ===== */
.charity-section {
    margin-top: 5rem !important;
}

.charity-card {
    background: #E11D48 !important;
    border-radius: 2rem !important;
    padding: 4rem 2.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(225, 29, 72, 0.35) !important;
}

.heart-icon-badge {
    width: 50px !important;
    height: 50px !important;
    background: white !important;
    color: #E11D48 !important;
    font-size: 1.25rem !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.charity-card h2 {
    font-size: 2rem !important;
    font-family: var(--font-heading) !important;
    margin-bottom: 1rem !important;
}

.charity-intro {
    font-size: 1rem !important;
    color: #FEE2E2 !important;
    max-width: 550px !important;
    margin: 0 auto 2.5rem auto !important;
}

.charity-intro strong {
    color: white !important;
}

.stats-grid {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 1rem !important;
    padding: 1.5rem 1rem !important;
    max-width: 600px !important;
}

.stat-item {
    padding: 0 1rem !important;
}

.stat-number {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
}

.stat-label {
    font-size: 0.55rem !important;
    color: #FECACA !important;
    letter-spacing: 0.5px !important;
}

.stat-divider {
    width: 1px !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.charity-quote {
    font-size: 0.75rem !important;
    color: #FECACA !important;
    font-style: italic !important;
    margin-top: 2rem !important;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr !important;
        max-width: 450px !important;
    }
}

@media (max-width: 600px) {
    .premium-title {
        font-size: 2rem !important;
    }

    .stats-grid {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .stat-divider {
        width: 50% !important;
        height: 1px !important;
    }

    .charity-card {
        padding: 3rem 1.5rem !important;
    }
}

/* =============================================
   ACCOUNT PROFILE PAGE STYLES
   ============================================= */

.account-page {
    background: #F9FAFB;
    min-height: 100vh;
    padding: 2rem 0 4rem 0;
}

/* Profile Header */
.profile-header {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    align-items: flex-start;
}

.profile-left {
    display: flex;
    gap: 2rem;
    flex: 1;
    background: white;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.avatar-container {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 20%;
    object-fit: cover;
    border: 4px solid #fff;
}

.avatar-badge {
    position: absolute;
    bottom: 165px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
    color: white;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.4);
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 2rem;
    font-weight: 900;
    color: #1F2937;
    margin-bottom: 0.25rem;
    font-family: var(--font-heading);
}

.profile-handle {
    color: #6B7280;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.75rem;
}

.profile-bio {
    color: #4B5563;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.profile-bio a {
    color: #F43F5E;
    font-weight: 600;
}

.profile-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.btn-follow {
    background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
    color: white;
    padding: 0.6rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
    transition: all 0.3s ease;
}

.btn-follow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(244, 63, 94, 0.4);
}

.profile-stats {
    display: flex;
    gap: 0;
    /* Connected look if desired, or small gap */
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.stat-box {
    background: transparent;
    border: none;
    padding: 0.5rem 1.5rem;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-box:last-child {
    border-right: none;
}

.stat-box .stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    /* White text */
    display: block;
    line-height: 1;
    margin-bottom: 0.2rem;
}

.stat-box .stat-label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.status-progress-bar {
    background: transparent;
    /* Remove gradient box */
    padding: 0;
    margin-top: 2rem;
    color: white;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.progress-track-account {
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill-account {
    height: 100%;
    background: #FBBF24;
    border-radius: 10px;
}

.points-label {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

/* Perks Sidebar */
.perks-sidebar {
    width: 280px;
    background: rgba(255, 255, 255, 0.1);
    /* Semi-transparent white to lighten the deep red */
    border-radius: 1rem;
    overflow: hidden;
    color: white;
    box-shadow: none;
    /* Flat look on the gradient, or subtle */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.perks-header {
    background: transparent;
    padding: 1rem 1rem 0 1rem;
    font-weight: 800;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.perks-content {
    padding: 1rem;
}

.perk-item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.perk-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.perk-details strong {
    display: block;
    font-size: 0.85rem;
}

.perk-details span {
    font-size: 0.7rem;
    opacity: 0.8;
}

.perk-unlocked {
    background: rgba(0, 0, 0, 0.2);
    /* Darker inset */
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.unlocked-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1px;
    opacity: 0.8;
    display: block;
    margin-bottom: 0.5rem;
}

.unlocked-item {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.perk-next {
    font-size: 0.7rem;
    opacity: 0.9;
    line-height: 1.4;
}

.perk-next a {
    color: #FBBF24;
    font-weight: 700;
}

/* Content Layout */
.account-content-layout {
    display: flex;
    gap: 2rem;
}

/* Filters Sidebar */
.filters-sidebar {
    width: 200px;
    flex-shrink: 0;
}

/* Hide mobile toggle by default on desktop */
.mobile-filter-toggle {
    display: none;
}

.filters-title {
    font-size: 0.7rem;
    font-weight: 800;
    color: #9CA3AF;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.filter-list {
    list-style: none;
    /* Default display for desktop */
}

.filter-list li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    color: #4B5563;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.filter-list li a:hover {
    background: #FFF1F2;
    color: #F43F5E;
}

.filter-list li.active a {
    background: #F43F5E;
    color: white;
}

.filter-list li a i {
    width: 18px;
    text-align: center;
}

/* Activity Main */
.activity-main {
    flex: 1;
}



/* All Activity Section */
.all-activity-section h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1F2937;
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
}

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.activity-item {
    display: flex;
    gap: 1rem;
    background: white;
    padding: 1.25rem;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    border: 1px solid #F3F4F6;
}

.activity-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.activity-content {
    flex: 1;
}

.activity-text {
    font-size: 0.9rem;
    color: #374151;
    margin-bottom: 0.25rem;
}

.activity-user {
    color: #F43F5E;
    font-weight: 700;
}

.activity-text a {
    color: #F43F5E;
    text-decoration: none;
}

.activity-date {
    font-size: 0.7rem;
    color: #9CA3AF;
    display: block;
    margin-bottom: 0.75rem;
}

.activity-image-grid {
    position: relative;
    margin-bottom: 0.75rem;
}

.activity-image-grid img {
    width: 100%;
    max-width: 400px;
    border-radius: 0.75rem;
    object-fit: cover;
}

.save-photo-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: #6B7280;
    transition: all 0.2s ease;
}

.save-photo-btn:hover {
    color: #F43F5E;
    transform: scale(1.1);
}

.activity-actions {
    display: flex;
    gap: 1rem;
}

.btn-action {
    background: transparent;
    border: none;
    color: #6B7280;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.25rem 0;
}

.btn-action:hover {
    color: #F43F5E;
}

.profile-header-expand-btn {
    display: none;
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .profile-header {
        flex-direction: column;
        height: 240px;
        overflow: hidden;
        position: relative;
        transition: height 0.3s ease;
    }

    .profile-header.expanded {
        height: auto !important;
        overflow: visible !important;
    }

    .profile-header-expand-btn {

        display: flex !important;
        width: 100px;
        height: 30px;
        background: #C2183C !important;
        border: none;
        color: white;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 10px;
        margin: 0 auto;
        cursor: pointer;
        z-index: 10;
        font-size: 1.2rem;
        position: relative;
        top: -39px;
        border-radius: 0 0 10px 10px;
    }

    .profile-header.expanded .profile-header-expand-btn {
        position: static;
        background: transparent;
        height: 30px;
        padding-bottom: 0;
        margin-top: -10px;
    }

    .perks-sidebar {
        width: 100%;
    }

    .account-content-layout {
        flex-direction: column;
    }

    .filters-sidebar {
        width: 100%;
    }

    .filter-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .filter-list li a {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }


}

@media (max-width: 768px) {
    .profile-left {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-actions {
        flex-direction: column;
    }

    .on-fire-stats {
        grid-template-columns: 1fr;
    }
}


/* =============================================
   PIXEL-PERFECT ACCOUNT PAGE OVERRIDES
   Matching exact mockup design
   ============================================= */

/* Page Background */
.account-page {
    background: #F3F4F6 !important;
    padding: 0 0 4rem 0 !important;
}

/* Profile Header Card */
.profile-left {
    background: white !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #E5E7EB !important;
}

.profile-avatar {
    width: 100px !important;
    height: 100px !important;
    border: 3px solid #F43F5E !important;
}

.avatar-badge {
    background: #BE123C !important;
    font-size: 0.5rem !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 5px !important;
}

.profile-name {
    font-size: 1.75rem !important;
    margin-bottom: 0 !important;
}

.profile-handle {
    color: #9CA3AF !important;
    font-size: 0.8rem !important;
}

.profile-bio {
    font-size: 0.8rem !important;
    color: #6B7280 !important;
    margin-bottom: 1rem !important;
}

.btn-follow {
    background: #BE123C !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.4rem !important;
}

.stat-box {
    border: 1px solid #D1D5DB !important;
    padding: 0.4rem 0.75rem !important;
}

.stat-box .stat-value {
    font-size: 1rem !important;
}

.stat-box .stat-label {
    font-size: 0.55rem !important;
}

.status-progress-bar {
    background: linear-gradient(90deg, #BE123C 0%, #F43F5E 100%) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    margin-top: 1rem !important;
}

.progress-labels {
    font-size: 0.6rem !important;
}

.progress-track-account {
    height: 4px !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

.progress-fill-account {
    background: #FBBF24 !important;
}

.points-label {
    font-size: 0.6rem !important;
    margin-top: 0.15rem !important;
}

/* Perks Sidebar */
.perks-sidebar {
    width: 260px !important;
    background: #BE123C !important;
    border-radius: 0.75rem !important;
}

.perks-header {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.7rem !important;
}

.perks-content {
    padding: 0.75rem !important;
}

.perk-icon {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    font-size: 0.9rem !important;
}

.perk-details strong {
    font-size: 0.8rem !important;
}

.perk-details span {
    font-size: 0.65rem !important;
}

.perk-unlocked {
    background: rgba(0, 0, 0, 0.15) !important;
    padding: 0.6rem !important;
    border-radius: 0.4rem !important;
}

.unlocked-label {
    font-size: 0.55rem !important;
}

.unlocked-item {
    font-size: 0.8rem !important;
}

.perk-next {
    font-size: 0.65rem !important;
}

/* Filters Sidebar */
.filters-sidebar {
    width: 180px;
}

.filters-title {
    font-size: 0.65rem !important;
    color: #9CA3AF !important;
    margin-bottom: 0.75rem !important;
}

.filter-list li a {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.8rem !important;
    color: #4B5563 !important;
    border-radius: 0.4rem !important;
}

.filter-list li.active a {
    background: #F43F5E !important;
    color: white !important;
}

.filter-list li a i {
    width: 16px !important;
    font-size: 0.8rem !important;
}



/* Activity Section */
.all-activity-section h2 {
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
}

.activity-item {
    padding: 1rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid #E5E7EB !important;
}

.activity-avatar img {
    width: 36px !important;
    height: 36px !important;
}

.activity-text {
    font-size: 0.85rem !important;
}

.activity-user {
    color: #E11D48 !important;
}

.activity-date {
    font-size: 0.65rem !important;
}

.activity-image-grid img {
    max-width: 350px !important;
    border-radius: 0.5rem !important;
}

.save-photo-btn {
    width: 32px !important;
    height: 32px !important;
}

.btn-action {
    font-size: 0.75rem !important;
    color: #6B7280 !important;
}


/* =============================================
   EXACT MOCKUP COLOR MATCHING FOR ACCOUNT PAGE
   ============================================= */

/* Page Background - Light Pink like mockup */
.account-page {
    background: #FFF5F5 !important;
}

/* Profile Header - Exact mockup styling */
.profile-header {
    align-items: stretch !important;
}

.profile-left {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.profile-avatar {
    border-color: #fff !important;
}

.avatar-badge {
    background: #fff !important;
    color: #334155;
}

/* Status Progress Bar - Deep Rose Gradient */
.status-progress-bar {
    background: linear-gradient(90deg, #DC2626 0%, #EF4444 50%, #E11D48 100%) !important;
}

/* Perks Sidebar - Deep Rose/Red */
.perks-sidebar {
    background: #DC2626 !important;
}

.perks-header {
    background: rgba(0, 0, 0, 0.25) !important;
}

.perk-unlocked {
    background: rgba(0, 0, 0, 0.2) !important;
}

.perk-icon {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Filters Sidebar - Gray text with pink active */
.filter-list li a {
    color: #374151 !important;
}

.filter-list li a:hover {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

.filter-list li.active a {
    background: #E11D48 !important;
    color: white !important;
}



/* Activity Feed Cards */
.activity-item {
    background: #FFFFFF !important;
    border: 1px solid #F3F4F6 !important;
}

.activity-user {
    color: #DC2626 !important;
}

.activity-text a {
    color: #DC2626 !important;
}

/* Button Colors */
.btn-follow {
    background: white !important;
    color: #C2183C !important;
    font-weight: 700 !important;
    border: none !important;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem !important;
    border-radius: 99px !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-follow:hover {
    background: #F3F4F6 !important;
    transform: translateY(-1px);
}

.btn-action:hover {
    color: #DC2626 !important;
}


/* =============================================
   PROFILE HEADER ZONE - FULL WIDTH GRADIENT
   Matching exact mockup design
   ============================================= */

/* Full-width gradient header wrapper */
/* Full-width gradient header wrapper */
.profile-header {
    background: #C2183C !important;
    /* Authentic Deep Red from mockup */
    padding: 2.5rem !important;
    border-radius: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    padding-left: calc(50vw - 50% + 2rem) !important;
    padding-right: calc(50vw - 50% + 2rem) !important;
    margin-bottom: 2rem !important;
    gap: 2.5rem !important;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Profile left card - transparent on gradient */
.profile-left {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: white !important;
}

.profile-info {
    color: white !important;
}

.profile-name {
    color: white !important;
}

.profile-handle {
    color: rgba(255, 255, 255, 0.7) !important;
}

.profile-bio {
    color: rgba(255, 255, 255, 0.9) !important;
}

.profile-bio a {
    color: #FBBF24 !important;
}

/* Follow button - white with rose text */
.btn-follow {
    background: white !important;
    color: #BE123C !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.btn-follow:hover {
    background: #FEE2E2 !important;
    color: #9F1239 !important;
}

/* Stat boxes - white background */
.stat-box {
    border: none !important;
    color: #1F2937 !important;
}

.stat-box .stat-value {
    color: #fff !important;
}

.stat-box .stat-label {
    color: #fff !important;
}

/* Status progress bar - lighter gradient on dark bg */
.status-progress-bar {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 0.6rem 1rem !important;
    margin-top: 1.25rem !important;
}

.progress-labels {
    color: white !important;
}

.progress-track-account {
    background: rgba(255, 255, 255, 0.2) !important;
}

.progress-fill-account {
    background: #FBBF24 !important;
}

.points-label {
    color: white !important;
}

/* Perks Sidebar - Darker rose on gradient */
.perks-sidebar {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.perks-header {
    background: rgba(0, 0, 0, 0.3) !important;
}

.perk-next a {
    color: #FDE68A !important;
}





/* =============================================
   SHOP SECTION STYLES
   ============================================= */

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.shop-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1F2937;
    font-family: var(--font-heading);
}

.btn-manage-shop {
    background: #FEE2E2;
    color: #E11D48;
    border: 1px solid #FECDD3;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-manage-shop:hover {
    background: #FECDD3;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.product-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #F3F4F6;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.product-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.badge-best-seller {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #FCC100;
    color: #1F2937;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-info {
    padding: 1.25rem;
}

.product-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


/* =============================================
   RESPONSIVE OVERRIDES
   ============================================= */

@media (max-width: 1024px) {
    .account-content-layout {
        flex-direction: column;
    }

    /* Filters Sidebar Transformation for Mobile - DROPDOWN STYLE */
    .filters-sidebar {
        width: 100%;
        margin-bottom: 2rem;
        border-bottom: none;
        padding-bottom: 0;
        position: relative;
        /* Context for absolute dropdown */
        z-index: 50;
        /* Ensure it stays on top */
    }

    /* Hide the title on mobile */
    .filters-title {
        display: none;
    }

    /* Mobile Toggle Button */
    .mobile-filter-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background: white;
        padding: 0.75rem 1rem;
        border: 1px solid #E5E7EB;
        border-radius: 0.5rem;
        font-weight: 600;
        color: #1F2937;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        font-size: 0.95rem;
    }

    .mobile-filter-toggle:hover {
        background: #F9FAFB;
    }

    /* The Dropdown List (Hidden by default) */
    .filter-list {
        display: none;
        /* Hidden */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        /* Explicit width */
        z-index: 100;
        background: white;
        border: 1px solid #E5E7EB;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        margin-top: 0.5rem;
        padding: 0.5rem;
        flex-direction: column;
        max-height: 400px;
        overflow-y: auto;
    }

    /* Show class added via JS */
    .filter-list.show {
        display: flex;
        flex-direction: column !important;
        /* Force column layout */
        flex-wrap: nowrap !important;
        animation: fadeIn 0.2s ease-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .filter-list li {
        width: 100%;
        margin-bottom: 2px;
    }

    .filter-list li a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        color: #4B5563;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
        background: transparent;
        /* Reset from previous */
        border: none;
    }

    .filter-list li.active a {
        background: #FEE2E2;
        /* Light rose */
        color: #BE123C;
        font-weight: 600;
    }

    .filter-list li a:hover {
        background: #F3F4F6;
        color: #374151;
    }

    .filter-list li.active a:hover {
        background: #FECDD3;
    }
}



@media (max-width: 1024px) {
    .profile-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .perks-sidebar {
        width: 100% !important;
        margin-top: 1rem;
    }

    /* Adjust profile-left for mobile stacking if needed */
    .profile-left {
        flex-direction: column;
        text-align: center;
        padding: 0 !important;
        /* Reset padding override if needed */
        gap: 1.5rem;
    }

    .avatar-container {
        margin: 0 auto;
    }

    .profile-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .profile-stats {
        margin-top: 0.5rem;
    }
}


.product-header-row h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F2937;
    margin: 0;
    line-height: 1.3;
}

.rating {
    font-size: 0.85rem;
    font-weight: 700;
    color: #FBBF24;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    background: #FFFBEB;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

.product-desc {
    font-size: 0.9rem;
    color: #6B7280;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.product-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #F3F4F6;
    padding-bottom: 1rem;
}

.product-meta span {
    font-size: 0.8rem;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

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

.price {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1F2937;
}

.btn-buy-now {
    background: #111827;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-buy-now:hover {
    background: #000000;
}


/* =============================================
   ACTIVITY PAGE SPECIFIC STYLES
   ============================================= */

/* Activity Icons */
.activity-icon-container {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.icon-camera {
    background: #F43F5E;
    /* Pink/Rose for photos */
}

.icon-recipe {
    background: #FBBF24;
    /* Yellow/Gold for recipes */
}

/* Update Activity Item Layout for Icon */
.activity-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* Ensure images in activity feed look good */
.activity-image-grid img {
    border-radius: 0.75rem;
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* =============================================
   REPUTATION PAGE STYLES
   ============================================= */

/* Page Headers */
.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: #1F2937;
}

.community-badge {
    background: #FEF2F2;
    color: #F43F5E;
    border: 1px solid #FECDD3;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Reputation Grid (Trust & Impact) */
.reputation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.reputation-card {
    background: white;
    border: 1px solid #ECEFF1;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.card-header {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* Trust Card Specifics */
.trust-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trust-chart {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 1.5rem;
}

.circular-chart {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
}

.circle-bg {
    fill: none;
    stroke: #E5E7EB;
    stroke-width: 2.5;
}

.circle {
    fill: none;
    stroke-width: 2.5;
    stroke: #3B82F6;
    /* Blue for trust */
    stroke-linecap: round;
}

.chart-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.chart-text .score {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1F2937;
}

.chart-text .label {
    font-size: 0.55rem;
    color: #9CA3AF;
    font-weight: 700;
}

.trust-stats {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trust-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #4B5563;
}

.trust-row span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Impact List */
.impact-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.impact-item {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.impact-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.icon-heart {
    background: #FEE2E2;
    color: #F43F5E;
}

.icon-tweak {
    background: #FEF3C7;
    color: #F59E0B;
}

.icon-question {
    background: #F3E8FF;
    color: #9333EA;
}

.impact-info {
    display: flex;
    flex-direction: column;
}

.impact-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1F2937;
}

.impact-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #9CA3AF;
    letter-spacing: 0.5px;
}

/* Skill Endorsements */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.skill-card {
    background: white;
    border: 1px solid #ECEFF1;
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skill-info strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.skill-info span {
    font-size: 0.7rem;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.mini-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.btn-endorse {
    background: white;
    border: 1px solid #E5E7EB;
    color: #9CA3AF;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.4rem 0.75rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-endorse:hover {
    border-color: #3B82F6;
    color: #3B82F6;
}

.add-skill {
    border: 2px dashed #E5E7EB;
    background: transparent;
    justify-content: center;
    color: #9CA3AF;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
}

/* Dark Reputation Footer */
.reputation-footer-dark {
    background: #0F172A;
    border-radius: 1.5rem;
    padding: 2rem;
    color: white;
}

.rep-footer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2rem;
}

.rep-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 0.5rem;
}

.rep-title {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.star-xl {
    font-size: 2.5rem;
    color: #FBBF24;
}

.rep-name {
    font-size: 1.75rem;
    font-weight: 800;
    color: #FBBF24;
    display: block;
    line-height: 1.2;
}

.rep-score {
    font-size: 0.8rem;
    color: #94A3B8;
}

.rep-score .highlight {
    color: #FBBF24;
    font-weight: 700;
}

.next-milestone {
    width: 40%;
}

.milestone-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748B;
    margin-bottom: 0.5rem;
}

.milestone-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.milestone-fill {
    background: #6366F1;
    height: 100%;
}

.unlock-text {
    font-size: 0.65rem;
    color: #64748B;
    text-align: right;
    display: block;
}

/* Badges Grid Dark */
.badges-grid-dark {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.badge-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1.5rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.badge-card i {
    font-size: 1.5rem;
}

.badge-card.unlocked i {
    color: #FBBF24;
}

.badge-card.locked i {
    color: #475569;
}

.badge-name {
    font-size: 0.8rem;
    font-weight: 700;
}

.badge-status {
    font-size: 0.55rem;
    color: #475569;
    letter-spacing: 1px;
}

/* =============================================
   SAVES SECTION STYLES
   ============================================= */

.save-card {
    border-radius: 1.5rem;
    overflow: hidden;
    background: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.saves-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem;
    padding-top: 1.5rem;
}

@media (max-width: 1024px) {
    .saves-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .saves-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Discover Card (Dashed) */
.discover-card {
    border: 2px dashed #E5E7EB;
    /* Light gray dashed border */
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 280px;
    padding: 1.5rem;
    cursor: pointer;
    border-radius: 1.5rem;
}

.discover-card:hover {
    border-color: #BE123C;
    background: #FFF1F2;
}

.btn-add-recipe {
    display: flex;
    width: 60px;
    height: 60px;
    background: #881337;
    /* Dark rose */
    color: white;
    border-radius: 50%;
    border: none;
    font-size: 1.5rem;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.discover-card:hover .btn-add-recipe {
    transform: scale(1.1);
}

.discover-content h3 {
    color: #881337;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

.add-own-link {
    color: #BE123C;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Recipe Card Styles */
.recipe-card {
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.recipe-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.recipe-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.recipe-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Category Badge Hover Effect */
.category-badges-container {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    pointer-events: auto;
}

.badge-tag {
    background: white;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    width: fit-content;
}

.extra-category-badge {
    display: none;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.2s ease;
    background: #FFF1F2 !important;
    color: #F43F5E !important;
}

.category-badges-container:hover .extra-category-badge {
    display: block;
    opacity: 1;
    transform: translateY(0);
}



.tag-dinner {
    color: #BE123C;
}

.tag-fancy {
    color: #EA580C;
}

.btn-heart {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.btn-heart:hover {
    transform: scale(1.1);
}

.btn-heart.active {
    color: #1F2937;
    /* Black heart as per mockup */
}

.recipe-content {
    padding: 1.25rem;
}

.recipe-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-heading);
}

.recipe-meta {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.recipe-meta span i {
    color: #F43F5E;
    /* Brand color icons */
}

.recipe-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

.view-recipe {
    color: #E11D48;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.recipe-stats {
    color: #9CA3AF;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

@media (max-width: 768px) {
    .saves-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   BOARDS SECTION STYLES
   ============================================= */

.board-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.board-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.board-image {
    position: relative;
    height: 180px;
    overflow: hidden;
    border-radius: 1.5rem 1.5rem 0 0;
}

.board-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.board-card:hover .board-image img {
    transform: scale(1.05);
}

.board-content {
    padding: 1.25rem;
}

.board-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 0.25rem;
    font-family: var(--font-heading);
}

.board-meta span {
    font-size: 0.8rem;
    color: #F43F5E;
    /* Rose color for count as shown in image */
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* =============================================
   PHOTOS SECTION STYLES
   ============================================= */

.photo-card {
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.photo-image {
    position: relative;
    height: 250px;
    width: 100%;
}

.photo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.photo-card:hover .photo-image img {
    transform: scale(1.1);
}

.photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.photo-card:hover .photo-overlay {
    opacity: 1;
}

.photo-overlay span {
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.photo-overlay span i {
    color: white;
}

/* =============================================
   REVIEWS SECTION STYLES
   ============================================= */

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 1.5rem;
}

.tweak-card,
.review-card {
    background: white;
    border: 1px solid #ECEFF1;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    display: flex;
    gap: 1.25rem;
}

.review-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1F2937;
    font-family: var(--font-heading);
}

.review-icon {
    color: #F43F5E;
    /* Brand Rose Outline */
    font-size: 1.25rem;
    margin-right: -0.25rem;
    /* Tight gap as per icon spacing */
}

/* Adjust text container to group text properly */
.reviewed-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F2937;
    font-family: var(--font-heading);
    margin-left: 0.5rem;
}

.reviewed-text a {
    color: #F43F5E;
    text-decoration: none;
    font-weight: 700;
}

.reviewed-text a:hover {
    text-decoration: underline;
    color: #BE123C;
}

.review-rating {
    color: #FBBF24;
    /* Star Yellow */
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.2rem;
}

.review-body {
    color: #4B5563;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    /* Reduced margin */
    font-style: normal;
    /* Mockup shows regular text, quotes handled by content */
}

.review-date {
    display: block;
    font-size: 0.75rem;
    color: #9CA3AF;
    font-weight: 600;
}

/* =============================================
   RECIPE SPINNER MODAL STYLES
   ============================================= */

.spinner-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.spinner-modal.active {
    display: flex;
    animation: fadeInModal 0.3s ease-out;
}

.spinner-modal-content {
    background-color: #10B981;
    width: 90%;
    max-width: 500px;
    border-radius: 2rem;
    padding: 2.5rem;
    position: relative;
    text-align: center;
    color: white;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.close-spinner-modal {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    opacity: 0.7;
    line-height: 1;
}

.community-pick-badge {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.4rem 1rem;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-transform: uppercase;
}

.spinner-title {
    font-size: 3rem;
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.spinner-subtitle {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.spinner-center-layout {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.spinner-container {
    position: relative;
    width: 320px;
    height: 320px;
    overflow: hidden;
    /* Prevent overlay from spilling out */
    border-radius: 50%;
    /* Clip to circle */
}

.spinner-arrow {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    color: #F97316;
    font-size: 3.5rem;
    z-index: 100;
}

.spinner-wheel-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 10px solid rgba(255, 255, 255, 0.15);
    position: relative;
}

.spinner-wheel {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.05) 0deg 45deg,
            transparent 45deg 90deg);
}

.spinner-actions {
    margin-top: 2rem;
    position: relative;
    z-index: 20;
}

.wheel-slice {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    margin-top: -35px;
    margin-left: -35px;
    transform: rotate(calc(var(--i) * 45deg)) translateY(-105px) rotate(calc(var(--i) * -45deg));
}

.wheel-slice img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid white;
    object-fit: cover;
}

.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    background: white;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheel-center::after {
    content: '';
    width: 20px;
    height: 20px;
    background: #10B981;
    border-radius: 50%;
}

/* Responsive Spinner */
@media (max-width: 500px) {
    .spinner-modal-content {
        padding: 1.5rem;
        border-radius: 1.5rem;
        width: 95%;
    }

    .spinner-title {
        font-size: 2rem;
    }

    .spinner-subtitle {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }

    .spinner-container {
        width: 260px;
        height: 260px;
    }

    .wheel-slice {
        width: 55px;
        height: 55px;
        margin-top: -27.5px;
        margin-left: -27.5px;
        transform: rotate(calc(var(--i) * 45deg)) translateY(-85px) rotate(calc(var(--i) * -45deg));
    }

    .spinner-arrow {
        top: -24px;
        font-size: 2.5rem;
    }

    .btn-spin {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* Mode Switcher Tool Styles */
.spinner-mode-switcher {
    display: inline-flex;
    background: transparent;
    padding: 0;
    border-radius: 99px;
    margin: 1.5rem 0;
    border: 2px solid #00F4AA;
    overflow: hidden;
    position: relative;
    z-index: 100;
}

.mode-btn {
    padding: 0.75rem 2.5rem;
    border: none;
    background: transparent;
    color: #00F4AA;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 140px;
}

.mode-btn.active {
    background: #00F4AA;
    color: #10B981;
}

.mode-btn:hover:not(.active) {
    background: rgba(0, 244, 170, 0.1);
}

/* Mode Container Visibility */
.spinner-spin-mode,
.spinner-search-mode {
    display: none;
}

.spinner-modal[data-mode="spin"] .spinner-spin-mode {
    display: block;
    position: relative;
}

.spinner-modal[data-mode="search"] .spinner-search-mode {
    display: flex;
}

/* Search Mode UI Styles */
.spinner-search-mode {
    padding: 1rem 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fadeInModal 0.4s ease-out;
}

.spinner-search-content {
    width: 100%;
    max-width: 400px;
}

.spinner-search-mode h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    margin-bottom: 0.75rem;
    color: white;
}

.spinner-search-mode p {
    opacity: 0.9;
    margin-bottom: 2.5rem;
    font-size: 1rem;
}

.spinner-search-box {
    position: relative;
    width: 100%;
}

.spinner-search-box i {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #00F4AA;
    font-size: 1.3rem;
}

.spinner-search-box input {
    width: 100%;
    padding: 1.25rem 1.5rem 1.25rem 3.5rem;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 99px;
    color: white;
    font-size: 1.1rem;
    outline: none;
    transition: all 0.3s ease;
}

.spinner-search-box input:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: #00F4AA;
    box-shadow: 0 0 25px rgba(0, 244, 170, 0.25);
}

/* Hide Spin Button in Search Mode */
.spinner-modal[data-mode="search"] .spinner-actions {
    display: none;
}

/* Mobile Adjustments for Switcher */
@media (max-width: 500px) {
    .mode-btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
        min-width: 110px;
    }

    .spinner-search-mode h3 {
        font-size: 1.8rem;
    }
}




.btn-spin {
    background: linear-gradient(to bottom, #FF914D, #F97316);
    color: white;
    border: none;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 900;
    border-radius: 0.5rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.btn-spin:active {
    transform: scale(0.95);
}

.spinner-footer {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 2.5rem;
    font-weight: 500;
}

@keyframes fadeInModal {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Cooldown Overlay */
.spinner-cooldown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.95);
    /* Solid enough to hide wheel */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 60;
    transition: all 0.3s ease;
}

.spinner-cooldown.active {
    display: flex;
    animation: fadeInModal 0.3s ease-out;
}

.cooldown-content {
    text-align: center;
    color: white;
    padding: 1rem;
}

.cooldown-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: #FBBF24;
    display: block;
    border: 2px solid #FBBF24;
    width: 50px;
    height: 50px;
    line-height: 46px;
    /* Vertical center for icon */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin: 0 auto 0.5rem auto;
}

.cooldown-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    letter-spacing: 1px;
    font-weight: 700;
}

.cooldown-content p {
    font-size: 0.85rem;
    opacity: 0.95;
    max-width: 80%;
    margin: 0 auto;
    font-weight: 500;
}

.btn-cooldown {
    background: #6B7280 !important;
    cursor: not-allowed;
    box-shadow: none !important;
    opacity: 0.8;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Decoration Circles */
.spinner-deco-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.deco-top-left {
    top: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
}

.deco-bottom-right {
    bottom: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
}

.spinner-actions {
    margin-top: 1rem;
    position: relative;
    z-index: 20;
}

/* =============================================
   ACCOUNT SETTINGS PAGE STYLES
   ============================================= */

.settings-section .section-header {
    margin-bottom: 2rem;
}

.settings-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1F2937;
    font-family: var(--font-heading);
    margin-bottom: 0.25rem;
}

.settings-section p {
    font-size: 0.9rem;
    color: #6B7280;
}

.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.settings-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #E5E7EB;
}

.settings-card .card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #F3F4F6;
}

.settings-card .card-header i {
    color: #DC2626;
    font-size: 1.25rem;
}

.settings-card .card-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F2937;
    margin: 0;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group {
    flex-direction: column;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

.form-group input,
.form-group textarea {
    padding: 0.75rem 1rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.btn-save-settings {
    background: #DC2626;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    align-self: flex-start;
    transition: all 0.2s;
}

.btn-save-settings:hover {
    background: #B91C1C;
    transform: translateY(-1px);
}

.btn-outline-rose {
    background: transparent;
    color: #DC2626;
    border: 2px solid #DC2626;
}

.btn-outline-rose:hover {
    background: #FFF5F5;
    color: #B91C1C;
    border-color: #B91C1C;
}

/* Notification Items */
.notification-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.notif-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.notif-text strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 0.15rem;
}

.notif-text span {
    font-size: 0.85rem;
    color: #6B7280;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E5E7EB;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: #DC2626;
}

input:focus+.slider {
    box-shadow: 0 0 1px #DC2626;
}

input:checked+.slider:before {
    transform: translateX(24px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* =============================================
   AUTH & LOGIN PAGE STYLES
   ============================================= */

.login-page-body {
    background: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    font-family: 'Inter', sans-serif;
}

.auth-container {
    width: 100%;
    max-width: 450px;
    text-align: center;
}

.login-logo-large {
    width: 80px;
    height: 80px;
    background: #F53855;
    /* Culina Brand Rose */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 1.5rem auto;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}

.auth-container h1 {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    font-size: 0.95rem;
    color: #4B5563;
    line-height: 1.5;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.auth-form {
    margin-bottom: 2rem;
}

.auth-input-group {
    margin-bottom: 1.5rem;
}

.auth-input {
    width: 100%;
    padding: 1rem;
    border: 1px solid #9CA3AF;
    border-radius: 4px;
    font-size: 1rem;
    transition: all 0.2s;
}

.auth-input:focus {
    outline: none;
    border-color: #F53855;
    box-shadow: 0 0 0 3px rgba(245, 56, 85, 0.1);
}

.btn-auth-continue {
    width: 100%;
    background: #F53855;
    /* Culina Brand Rose */
    color: white;
    padding: 1rem;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

.btn-auth-continue:hover {
    background: #D92B46;
    transform: translateY(-1px);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    color: #9CA3AF;
    font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E5E7EB;
}

.social-auth-group {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.social-btn {
    flex: 1;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    padding: 0 0.75rem;
    text-decoration: none;
    white-space: nowrap;
}

.social-btn:hover {
    background: #F9FAFB;
}

.btn-facebook {
    background-color: #1877F2;
    color: white;
    border: none;
}

.btn-facebook:hover {
    background-color: #166FE5;
}

.btn-facebook i {
    font-size: 1.25rem;
}

.auth-footer-text {
    font-size: 0.8rem;
    color: #4B5563;
    line-height: 1.6;
}

.auth-footer-text a {
    color: #F53855;
    text-decoration: underline;
}

.auth-help-section {
    margin-top: 50px;
    width: 100%;
    max-width: 450px;
    text-align: center;
    font-size: 0.9rem;
    color: #111827;
}

.auth-bottom-logo {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}


/* =============================================
   RECIPE PREVIEW CARD (STEP 5)
   ============================================= */

.recipe-preview-card {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    max-width: 850px;
    margin: 0 auto 2.5rem auto;
    font-family: inherit;
}

.review-cover-container {
    position: relative;
    height: 320px;
    background: #F3F4F6;
    overflow: hidden;
}

.review-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.review-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 2rem 1.5rem 2rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
}

.review-title-overlay h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.review-content {
    padding: 2rem;
}

.review-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #F3F4F6;
}

.review-badges {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.review-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.badge-category {
    background: #FFF1F2;
    color: #F43F5E;
}

.badge-course {
    background: #F0FDFA;
    color: #0D9488;
}

.badge-difficulty {
    background: #EFF6FF;
    color: #2563EB;
}

.review-stats {
    display: flex;
    gap: 2rem;
    color: #4B5563;
    font-size: 0.95rem;
    font-weight: 500;
}

.review-stats span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.review-summary {
    font-size: 1.15rem;
    color: #374151;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 1.5rem;
    border-left: 5px solid #F43F5E;
    padding-left: 1.5rem;
}

.review-description {
    color: #4B5563;
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 2.5rem;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    background: #F9FAFB;
    border-radius: 16px;
    padding: 2rem;
}

.review-section-title {
    margin-top: 0;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    border-bottom: 3px solid #F43F5E;
    width: max-content;
}

/* Group Headers In Review */
.review-group-header {
    list-style: none;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 0.02em;
    margin-top: 2.5rem;
    border-radius: 10px;
    margin-bottom: 0.75rem;
}

.review-group-header.ing-group {
    color: #0D9488;
    background: #F0FDFA;
    border-left: 5px solid #10B981;
}

.review-group-header.inst-group {
    color: #B91C1C;
    background: #FEF2F2;
    border-left: 5px solid #EF4444;
}

.review-ing-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.review-ing-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-left: 0.5rem;
}

.review-ing-item i {
    color: #F43F5E;
    margin-top: 0.35rem;
    font-size: 0.9rem;
}


.review-inst-list {
    display: flex;
    flex-direction: column;
}

.review-inst-item {
    display: flex;
    gap: 1rem;
    padding-left: 0.5rem;
}

.review-step-num {
    background: #F43F5E;
    color: white;
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    flex-shrink: 0;
}

.review-inst-text {
    margin: 0;
    color: #4B5563;
    line-height: 1.6;
}

.review-other-photos {
    margin-top: 3rem;
}

.review-other-photos h4 {
    color: #111827;
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.review-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1.25rem;
}

.review-photo-item {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.review-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 640px) {
    .review-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .review-cover-container {
        height: 240px;
    }

    .review-title-overlay h2 {
        font-size: 1.5rem;
    }
}

/* Recipe Status Badge */
.status-badge {
    position: absolute;
    top: 16px;
    left: 10px;
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 20;
    background: #FFFBEB;
    color: #B45309;
    border: 1px solid #FDE68A;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-badge.rejected {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.status-badge.update-pending {
    background: #EEF2FF;
    color: #4338CA;
    border: 1px solid #C7D2FE;
}

.status-badge i {
    font-size: 0.8rem;
}

/* Heart Button Styles */
.btn-heart {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: white;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 20;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Authentication Styles (Modal & Page) */
.auth-modal {
    display: none;
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

.auth-modal-content {
    background: white;
    width: 95%;
    max-width: 440px;
    border-radius: 24px;
    padding: 2.5rem;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: authModalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authModalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.close-auth-modal {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: #F3F4F6;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #6B7280;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.close-auth-modal:hover {
    background: #E5E7EB;
    color: #111827;
    transform: rotate(90deg);
}

/* Auth Form UI */
.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo {
    width: 150px;
    height: 50px;
    color: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}

.auth-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    color: #6B7280;
    font-size: 0.95rem;
    line-height: 1.5;
}

.auth-form-view {
    display: none;
}

.auth-form-view.active {
    display: block;
}

.auth-input-group {
    margin-bottom: 1.25rem;
    position: relative;
}

.auth-input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s;
    outline: none;
}

.auth-input:focus {
    border-color: #F43F5E;
    box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.1);
}

.btn-auth-submit {
    width: 100%;
    padding: 0.85rem;
    background: #F43F5E;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5rem;
}

.btn-auth-submit:hover {
    background: #E11D48;
    transform: translateY(-1px);
}

.btn-auth-submit:active {
    transform: translateY(0);
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #9CA3AF;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 1.5rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #E5E7EB;
}

.auth-divider::before {
    margin-right: 1rem;
}

.auth-divider::after {
    margin-left: 1rem;
}

.social-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    background: white;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.social-btn:hover {
    background: #F9FAFB;
    border-color: #9CA3AF;
}

.social-btn i {
    font-size: 1.1rem;
}

.btn-facebook i {
    color: #1877F2;
}

.auth-switch {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #6B7280;
}

.auth-switch a {
    color: #F43F5E;
    font-weight: 700;
    text-decoration: none;
    margin-left: 0.25rem;
}

.auth-switch a:hover {
    text-decoration: underline;
}

.auth-error-msg {
    background: #FEF2F2;
    color: #DC2626;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    display: none;
    border: 1px solid #FEE2E2;
}

.btn-heart:hover {
    transform: scale(1.1);
    color: #F43F5E;
}

.btn-heart.active {
    color: #F43F5E;
}

.btn-heart.active i {
    font-weight: 900;
    /* fa-solid */
}

/* Review Photo Grid */
.review-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.review-photo-item {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
}

.review-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-other-photos {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px dashed #E5E7EB;
}

.review-other-photos h4 {
    font-size: 1.1rem;
    color: #1F2937;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Recipe Main Image Ratio - User Request */
.recipe-main-image-wrapper {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
    background: #f3f4f6;
    /* Placeholder gray */
}

.recipe-main-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Recipe Card Header Fix */
.recipe-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.recipe-card-title-group {
    flex: 1;
}

.recipe-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 0.5rem 0;
    line-height: 1.50;
}

.recipe-card-thumb {
    width: 80px;
    height: 80px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5rem;
}

.btn-auth-submit:hover {
    background: #E11D48;
    transform: translateY(-1px);
}

.btn-auth-submit:active {
    transform: translateY(0);
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #9CA3AF;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 1.5rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #E5E7EB;
}

.auth-divider::before {
    margin-right: 1rem;
}

.auth-divider::after {
    margin-left: 1rem;
}

.social-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    background: white;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.social-btn:hover {
    background: #F9FAFB;
    border-color: #9CA3AF;
}

.social-btn i {
    font-size: 1.1rem;
}

.btn-facebook i {
    color: #1877F2;
}

.auth-switch {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #6B7280;
}

.auth-switch a {
    color: #F43F5E;
    font-weight: 700;
    text-decoration: none;
    margin-left: 0.25rem;
}

.auth-switch a:hover {
    text-decoration: underline;
}

.auth-error-msg {
    background: #FEF2F2;
    color: #DC2626;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    display: none;
    border: 1px solid #FEE2E2;
}

.btn-heart:hover {
    transform: scale(1.1);
    color: #F43F5E;
}

.btn-heart.active {
    color: #F43F5E;
}

.btn-heart.active i {
    font-weight: 900;
    /* fa-solid */
}

/* Review Photo Grid */
.review-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.review-photo-item {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
}

.review-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-other-photos {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px dashed #E5E7EB;
}

.review-other-photos h4 {
    font-size: 1.1rem;
    color: #1F2937;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Recipe Main Image Ratio - User Request */
.recipe-main-image-wrapper {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
    background: #f3f4f6;
    /* Placeholder gray */
}

.recipe-main-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Recipe Card Header Fix */
.recipe-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.recipe-card-title-group {
    flex: 1;
}

.recipe-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 0.5rem 0;
    line-height: 1.50;
}

.recipe-card-thumb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid #FFF;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Save to Board Modal */
.save-modal,
.share-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

.save-modal-content,
.share-modal-content {
    background: white;
    width: 90%;
    max-width: 400px;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    position: relative;
    animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.save-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.save-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #111827;
}

.close-save-modal,
.close-share-modal {
    background: none;
    border: none;
    position: absolute;
    font-size: 1.5rem;
    top: 12px;
    right: 20px;
    color: #9CA3AF;
    cursor: pointer;
}

/* Share Modal Specifics */
.share-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    padding-top: 0.5rem;
}

.share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.share-option:hover {
    transform: translateY(-4px);
}

.share-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.share-icon-circle.facebook {
    background: #1877F2;
}

.share-icon-circle.pinterest {
    background: #E60023;
}

.share-icon-circle.twitter {
    background: #000000;
}

.share-icon-circle.whatsapp {
    background: #25D366;
}

.copy-link-section {
    background: #F3F4F6;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #E5E7EB;
}

.copy-link-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 0.85rem;
    color: #6B7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: inherit;
    outline: none;
}

.btn-copy-link {
    background: white;
    border: 1px solid #D1D5DB;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-copy-link:hover {
    background: #F9FAFB;
    border-color: #9CA3AF;
}

.board-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 1.5rem;
}

.board-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.board-item:hover {
    background: #F9FAFB;
}

.board-name {
    font-weight: 500;
    color: #374151;
}

.board-status-icon {
    color: #F43F5E;
    font-size: 1.1rem;
}

.btn-create-board-small {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.75rem;
    background: #F3F4F6;
    color: #374151;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.btn-create-board-small:hover {
    background: #E5E7EB;
}

.inline-create-form {
    display: none;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #F3F4F6;
}

.inline-create-form input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.inline-create-form .btn-group {
    display: flex;
    gap: 0.5rem;
}

.inline-create-form .btn-create-submit {
    flex: 1;
    background: #F43F5E;
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.inline-create-form .btn-create-cancel {
    padding: 0.75rem 1rem;
    background: #F3F4F6;
    color: #4B5563;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

@media print {

    .recipe-detail-nav,
    .recipe-action-bar,
    .recipe-gallery,
    .recipe-toc-container,
    .community-section,
    .recipe-sidebar,
    .cooking-progress-sticky,
    header,
    footer,
    .btn-made-this,
    .btn-like-recipe,
    .recipe-utility-icons,
    #create-board-trigger,
    .save-modal,
    .inline-create-form,
    .column-tip {
        display: none !important;
    }

    body {
        background: white !important;
        padding: 0 !important;
    }

    .container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .recipe-card-main {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .recipe-card-header {
        flex-direction: row !important;
        border-bottom: 2px solid #000 !important;
    }

    .recipe-main-title {
        font-size: 2rem !important;
        color: black !important;
    }

    .recipe-card-info-bar {
        background: #f9f9f9 !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        margin: 1.5rem 0 !important;
    }

    .recipe-card-body-grid {
        display: block !important;
    }

    .ingredients-column,
    .directions-column {
        width: 100% !important;
        margin-bottom: 2rem !important;
    }

    .custom-checkbox input {
        display: none !important;
    }

    .custom-checkbox .checkmark {
        display: inline-block !important;
        border: 1px solid #000 !important;
        margin-right: 10px !important;
    }
}

/* Author Snippet Hover */
.author-snippet a:hover .author-name,
.author-snippet a:hover span {
    color: #F43F5E;
    text-decoration: underline;
}

.author-snippet a:hover .author-avatar {
    transform: scale(1.05);
    background: #F43F5E;
    color: white;
}

.author-avatar {
    transition: all 0.3s ease;
}

/* ==========================================================================
   COMMUNITY & REVIEWS SECTION (PREMIUM REDESIGN)
   ========================================================================== */
.community-section {
    margin: 0 auto;
}

.reviews-summary {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #F8FAFC !important;
    padding: 2.5rem !important;
    border-radius: 24px !important;
    margin-bottom: 4rem !important;
    border: 1px solid #F1F5F9 !important;
}

.rating-vibe .avg-rating {
    font-size: 3.5rem !important;
    background: linear-gradient(135deg, #111827 0%, #4B5563 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900 !important;
    display: block;
}

.rating-vibe .total-reviews {
    font-size: 0.9rem;
    color: #64748B !important;
    font-weight: 600 !important;
    display: block;
}

.rating-vibe .star-rating {
    margin: 0.5rem 0;
}

/* Review / Community Cards */
.tweak-card {
    background: white !important;
    border: 1px solid #F1F5F9 !important;
    border-radius: 24px !important;
    padding: 2rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 2rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tweak-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04) !important;
    border-color: #E2E8F0 !important;
}

.tweak-content {
    flex: 1;
    width: 100%;
}

.review-text {
    font-size: 1.05rem !important;
    color: #334155 !important;
    line-height: 1.7 !important;
    margin-bottom: 1.5rem !important;
    font-weight: 400;
}

.tweak-card .card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid #F1F5F9 !important;
    margin-top: 0 !important;
    background: transparent !important;
}

.tweak-card .user-name {
    font-weight: 700 !important;
    color: #1E293B !important;
    font-size: 0.95rem !important;
}

.tweak-card .user-name span {
    font-weight: 500 !important;
    color: #94A3B8 !important;
    font-size: 0.8rem !important;
    margin-left: 0.75rem;
}

/* Buttons & Actions */
.btn-reply,
.btn-write-review-modern,
.btn-load-more {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-reply {
    background: #F1F5F9 !important;
    color: #475569 !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 99px !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.btn-reply:hover {
    background: #E2E8F0 !important;
    color: #1E293B !important;
}

.btn-report {
    background: transparent !important;
    color: #94A3B8 !important;
    font-weight: 600 !important;
}

.btn-report:hover {
    color: #F43F5E !important;
    background: #FFF1F2 !important;
}

/* Replies Indentation */
.replies-list {
    margin-top: 2rem !important;
    border-left: 2px solid #F1F5F9 !important;
    padding-left: 2.5rem !important;
}

.reply-card {
    padding: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    background: #F8FAFC !important;
}

/* Vote/Like Count Modernized */
.like-count {
    transition: all 0.2s;
    user-select: none;
    padding: 0.4rem 0.8rem;
    border-radius: 99px;
    background: #F8FAFC;
    color: #64748B !important;
}

.like-count:hover {
    background: #FFF1F2;
    color: #F43F5E !important;
}


/* Write Review Button Wow Factor */
.btn-write-review-modern {
    background: #FFC107 !important;
    color: #111827 !important;
    border: none !important;
    padding: 0.6rem 1.25rem !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    white-space: nowrap !important;
}

.btn-write-review-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(251, 191, 36, 0.4);
    background: #FBBF24 !important;
}

.badge-sp {
    background: rgba(0, 0, 0, 0.08);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
}

@media (max-width: 768px) {
    .reviews-summary {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 2.5rem !important;
    }

    .replies-list {
        padding-left: 1rem !important;
        margin-top: 1.5rem !important;
    }

    .tweak-card {
        padding: 1.25rem !important;
        gap: 1rem !important;
    }

    .tweak-card.reply-card {
        padding: 1rem !important;
    }

    .community-card-wrapper {
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    .tweak-card .card-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        padding-top: 1rem !important;
    }

    .tweak-card .footer-actions {
        width: 100%;
        justify-content: flex-start !important;
        display: flex;
        gap: 1.25rem !important;
        flex-wrap: wrap;
    }

    .tweak-card .user-name {
        font-size: 0.85rem !important;
    }

    .tweak-card .user-name span {
        margin-left: 0 !important;
        margin-top: 0.2rem;
        font-size: 0.75rem !important;
    }

    .replies-list {
        padding-left: 0.5rem !important;
        margin-top: 1rem !important;
    }

    .tweak-card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .btn-reply {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.7rem !important;
    }

    .like-count {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.7rem !important;
    }
}

.community-card-wrapper {
    display: flex;
    gap: 1.5rem;
    width: 100%;
}

/* Review Reply Form Styling */
.reply-form-container {
    margin-top: 1rem !important;
    padding: 1.25rem !important;
    background: #F9FAFB !important;
    border-radius: 12px !important;
    border: 1px solid #E5E7EB !important;
}

.reply-form-container textarea {
    width: 100% !important;
    height: 80px !important;
    padding: 0.75rem !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    resize: none !important;
    font-family: inherit !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
    font-size: 0.95rem !important;
    color: #1F2937 !important;
    background: white !important;
    transition: all 0.2s ease !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.reply-form-container textarea:focus {
    outline: none !important;
    border-color: #F43F5E !important;
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.reply-form-btns {
    display: flex !important;
    gap: 0.75rem !important;
    justify-content: flex-end !important;
}

.btn-reply-cancel {
    background: #F3F4F6 !important;
    color: #4B5563 !important;
    border: none !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.btn-reply-cancel:hover {
    background: #E5E7EB !important;
}

.btn-reply-post {
    background: #F43F5E !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.btn-reply-post:hover {
    background: #E11D48 !important;
    transform: translateY(-1px) !important;
}

.btn-reply-post:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

/* Hide points label in profile header */
.points-label {
    display: none !important;
}

/* What's Included Section */
.whats-included-section {
    margin-top: 5rem;
    padding: 3rem 0;
    text-align: center;
}
.whats-included-section .section-title {
    font-family: var(--font-heading);
    color: #1F2937;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}
.whats-included-section .section-subtitle {
    color: #6B7280;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 3rem auto;
    line-height: 1.5;
}
.whats-included-section .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.whats-included-section .feature-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(244, 63, 94, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.whats-included-section .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.2);
}
.whats-included-section .feature-icon {
    width: 64px;
    height: 64px;
    background: #FFF0F3;
    color: #F43F5E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(244, 63, 94, 0.05);
    transition: all 0.3s ease;
}
.whats-included-section .feature-card:hover .feature-icon {
    background: #F43F5E;
    color: white;
    box-shadow: 0 8px 20px rgba(244, 63, 94, 0.2);
}
.whats-included-section .feature-card h3 {
    font-size: 1.25rem;
    color: #1F2937;
    margin-bottom: 0.75rem;
    font-weight: 700;
}
.whats-included-section .feature-card p {
    color: #4B5563;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Digital Delivery Section */
.digital-delivery-section {
    margin-top: 5rem;
    margin-bottom: 3rem;
}
.delivery-container {
    background: white;
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(244, 63, 94, 0.08);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
}
.delivery-icon-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid #F3F4F6;
    padding-right: 3rem;
}
.delivery-main-icon {
    width: 90px;
    height: 90px;
    background: #FFF0F3;
    color: #F43F5E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 16px rgba(244, 63, 94, 0.06);
}
.support-info p {
    font-size: 0.85rem;
    color: #6B7280;
    line-height: 1.5;
    margin: 0;
}
.support-info a {
    color: #F43F5E;
    text-decoration: none;
    font-weight: 600;
}
.support-info a:hover {
    text-decoration: underline;
}
.delivery-content-col h2 {
    font-family: var(--font-heading);
    color: #1F2937;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.delivery-intro {
    color: #4B5563;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.delivery-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}
.delivery-bullets li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: #374151;
    font-weight: 500;
}
.delivery-bullets li i {
    color: #10B981;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .delivery-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }
    .delivery-icon-col {
        border-right: none;
        border-bottom: 1px solid #F3F4F6;
        padding-right: 0;
        padding-bottom: 2rem;
    }
}

/* Billing and Cancellation Section */
.billing-cancellation-section {
    margin-top: 4rem;
    margin-bottom: 5rem;
}
.billing-container {
    background: #F9FAFB;
    border-radius: 20px;
    padding: 2.5rem;
    border: 1px solid #E5E7EB;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.billing-icon-wrap {
    width: 60px;
    height: 60px;
    background: white;
    color: #4B5563;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #E5E7EB;
    flex-shrink: 0;
}
.billing-content {
    flex: 1;
}
.billing-content h2 {
    font-family: var(--font-heading);
    color: #1F2937;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    margin-top: 0;
}
.billing-content p {
    color: #4B5563;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.billing-content .text-link {
    color: #F43F5E;
    text-decoration: none;
    font-weight: 600;
}
.billing-content .text-link:hover {
    text-decoration: underline;
}
.billing-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.billing-btn {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4B5563;
    background: white;
    border: 1px solid #D1D5DB;
    text-decoration: none;
    transition: all 0.2s;
}
.billing-btn:hover {
    color: #F43F5E;
    border-color: #F43F5E;
    background: #FFF0F3;
}

@media (max-width: 768px) {
    .billing-container {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem;
    }
}

/* FAQ Accordion Section */
.premium-faq-section {
    margin-top: 5rem;
    margin-bottom: 5rem;
    text-align: center;
}
.premium-faq-section .section-title {
    font-family: var(--font-heading);
    color: #1F2937;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}
.premium-faq-section .section-subtitle {
    color: #6B7280;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 3rem auto;
    line-height: 1.5;
}
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.faq-item {
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(244, 63, 94, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: all 0.2s ease;
}
.faq-item.active {
    border-color: rgba(244, 63, 94, 0.2);
    box-shadow: 0 8px 25px rgba(244, 63, 94, 0.06);
}
.faq-question {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F2937;
    text-align: left;
    transition: color 0.2s;
    font-family: 'Inter', sans-serif;
}
.faq-question:hover {
    color: #F43F5E;
}
.faq-question i {
    font-size: 0.95rem;
    color: #9CA3AF;
    transition: transform 0.3s ease, color 0.2s;
}
.faq-item.active .faq-question {
    color: #F43F5E;
}
.faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: #F43F5E;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.faq-answer p {
    padding: 0 1.5rem 1.25rem 1.5rem;
    margin: 0;
    color: #4B5563;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Store Trust Note */
.store-trust-note {
    margin-top: 4rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    box-sizing: border-box;
}
@media (max-width: 576px) {
    .store-trust-note {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem;
    }
}

/* How Digital Delivery Works Section */
.delivery-steps-section {
    margin-top: 5rem;
    margin-bottom: 4rem;
    text-align: center;
}

.delivery-steps-section h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.5rem;
    font-family: 'Inter', sans-serif;
}

.delivery-steps-section .section-subtitle {
    color: #64748B;
    font-size: 1.05rem;
    max-width: 700px;
    margin: 0 auto 3.5rem auto;
    line-height: 1.5;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.step-card {
    background: white;
    border-radius: 1.25rem;
    border: 1px solid #E2E8F0;
    padding: 2.5rem 1.5rem 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(107, 33, 168, 0.05);
    border-color: #DDD6FE;
}

.step-number {
    position: absolute;
    top: -16px;
    background: #6B21A8;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(107, 33, 168, 0.25);
}

.step-icon {
    font-size: 1.5rem;
    color: #6B21A8;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    width: 52px;
    background: #F3E8FF;
    border-radius: 50%;
}

.step-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 0.75rem;
}

.step-card p {
    color: #64748B;
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}

.step-card p a {
    color: #6B21A8;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.step-card p a:hover {
    color: #5B1A90;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 2.5rem;
    }
}
@media (max-width: 576px) {
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* Store FAQ Section overrides */
.store-faq-section {
    margin-top: 5rem;
    margin-bottom: 5rem;
    text-align: center;
}

.store-faq-section .section-title {
    font-family: var(--font-heading);
    color: #1F2937;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.store-faq-section .section-subtitle {
    color: #6B7280;
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto 3rem auto;
    line-height: 1.5;
}

.store-faq-section .faq-item {
    border: 1px solid rgba(107, 33, 168, 0.08);
}

.store-faq-section .faq-item.active {
    border-color: rgba(107, 33, 168, 0.2);
    box-shadow: 0 8px 25px rgba(107, 33, 168, 0.06);
}

.store-faq-section .faq-question:hover {
    color: #6B21A8;
}

.store-faq-section .faq-item.active .faq-question {
    color: #6B21A8;
}

.store-faq-section .faq-item.active .faq-question i {
    color: #6B21A8;
}

.store-faq-section .faq-answer p a {
    color: #6B21A8;
    text-decoration: none;
    font-weight: 600;
}

.store-faq-section .faq-answer p a:hover {
    color: #5B1A90;
    text-decoration: underline;
}