:root {
    --primary-color: #4a6baf;
    --secondary-color: #f39c12;
    --hover-color: #FFC368;
    --bg-color: #f9f9f9;
    --text-color: #fff;
    --font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --bg-color-translucent: rgba(10, 31, 68, 0.4);
    --border-radius-large: 20px;
    --box-shadow-light: 0 4px 15px rgba(0, 0, 0, 0.2);
    --border-color-light: rgba(255, 255, 255, 0.2);
    --text-color-light: rgba(255, 255, 255, 0.7);
    --accent-color-light: #a75eaa;
    --primary-color-rgb: 74, 107, 175;
    --error-color: #e74c3c;
}

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

/* @import statement removed - fonts now imported from base.html template */

body {
    font-family: 'Poppins', var(--font-family);
    /* Mobile-first approach: use mobile background by default */
    background-image: linear-gradient(to top, rgba(10, 31, 68, 0.7), rgba(17, 24, 39, 0.9)), url('../img/background_mobile.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #0a1f44; /* Fallback color */
    min-height: 100vh;
    color: white;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

/* Override body styles for the logged-out index page to prevent scrolling */
body:has(.index-logged-out-special) {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    height: calc(var(--vh, 1vh) * 100); /* JavaScript fallback for older browsers */
    max-height: 100vh;
    max-height: 100dvh; /* Dynamic viewport height for mobile browsers */
    max-height: calc(var(--vh, 1vh) * 100); /* JavaScript fallback for older browsers */
    overflow: hidden;
    /* Ensure safe areas are handled on mobile devices */
    padding-bottom: env(safe-area-inset-bottom);
}



/* Desktop background for larger screens */
@media (min-width: 769px) {
    body {
        background-image: linear-gradient(to top, rgba(10, 31, 68, 0.7), rgba(17, 24, 39, 0.9)), url('../img/background_desktop.png');
    }
}

/* Specific styles for the homepage */
.homepage-body {
    /* Mobile-first approach for homepage */
    background-image: linear-gradient(to top, rgba(10, 31, 68, 0.4), rgba(17, 24, 39, 0.7) 80%), url('../img/background_mobile.png');
}

/* Desktop background for homepage on larger screens */
@media (min-width: 769px) {
    .homepage-body {
        background-image: linear-gradient(to top, rgba(10, 31, 68, 0.4), rgba(17, 24, 39, 0.7) 80%), url('../img/background_desktop.png');
    }
}

.content-wrapper {
    flex: 1 0 auto; /* Allows content to grow and push footer down */
    /* Container is inside this, so no need for width/max-width here */
}

/* Override content-wrapper for the logged-out index page */
body:has(.index-logged-out-special) .content-wrapper {
    flex: none;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    max-height: 100vh;
    max-height: 100dvh; /* Dynamic viewport height for mobile browsers */
    overflow: hidden;
    /* Account for safe areas and browser UI */
    min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

.container {
    max-width: 1800px; /* Increased from 1200px */
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

header {
    text-align: left; /* Changed from center */
    margin-bottom: 0; /* Reset margin */
    padding: 8px 0; /* REDUCED BY 20%: from 10px to 8px vertical padding */
    position: relative; /* Kept for potential future use with dropdowns from hamburger */
    background-color: #111827; /* Dark background similar to target image (Tailwind gray-900) */
    /* Removed width constraints as it's now a full-width element */
}

/* Ensure .container within header behaves as expected (it should inherit general .container styles) */
header > .container {
    /* General .container styles (max-width, margin: auto, padding) will apply. */
    /* We might want to ensure header's specific container has no extra vertical padding if header tag itself has it */
    padding-top: 0;
    padding-bottom: 0;
}

header h1 {
    font-family: 'Poppins', sans-serif; /* Explicitly set Poppins */
    color: #fff;
    font-size: 2.2rem;
    margin: 0;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: -0.05em;
}

.header-logo-svg {
    height: 56px; /* Bigger on mobile */
    max-width: 280px;
    display: block;
}

.highlight-ai {
    color: var(--hover-color, #FFC368); /* Main color for 'ai' */
}

/* Style for the "ai" part in "bed taim" */
.highlight-ai {
    color: var(--hover-color, #FFC368);
}

/* Remove styles for the old .tagline as it was removed from HTML */
.tagline {
    display: none; /* Hide if it's rendered by any other means */
}

.header-container-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}

.header-logo-link {
    text-decoration: none;
    transition: transform 0.2s ease;
}

.header-logo-link:hover h1 {
    transform: scale(1.03);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.header-right-items {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Original .main-nav styling needs significant changes */
.main-nav { /* This now specifically styles the desktop nav for "My Stories", "Library" */
    justify-content: flex-start; /* Align to start within its flex container part */
    margin: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border-radius: 0;
    border: none;
    width: auto; /* Allow it to size based on content */
}

.main-nav ul.nav-links { /* Targeting the ul specifically */
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px; /* Adjust gap between "My Stories" and "Library" */
}

.main-nav a.nav-item { /* Style for new nav items */
    color: #fff; /* White text as per target */
    text-decoration: none;
    padding: 5px 10px; /* Adjust padding */
    border-radius: 3px; /* Optional: slight rounding for hover */
    transition: color 0.3s ease, background-color 0.3s ease;
    font-family: 'Poppins', var(--font-family); /* Kept Poppins */
    font-size: 1rem; /* Adjust font size if needed */
    font-weight: 500; /* Adjusted from 600 for a slightly lighter look */
    text-shadow: none; /* Target looks flat */
    white-space: nowrap;
}

.main-nav a.nav-item:hover {
    color: var(--hover-color, #FFC368);
    text-decoration: none; /* Avoid underline on hover if not desired */
    /* background-color: rgba(255, 255, 255, 0.1); */ /* Optional subtle background hover */
}

.main-nav a.nav-item.active {
    color: var(--hover-color, #FFC368);
    font-weight: 700; /* Bold for active */
    background-color: transparent; /* Ensure no old background style persists */
    text-shadow: none;
}

/* nav-toggle button (hamburger) styling adjustments */
.nav-toggle {
    display: flex; /* MODIFIED: Ensure it's visible by default for the new header */
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px; /* Add padding for a larger touch target */
    position: static; /* Changed from absolute */
    width: 40px; /* MODIFIED: Make it square */
    height: 40px; /* MODIFIED: Make it square */
    z-index: auto; /* Reset z-index or adjust as needed */
}

/* Ensure hamburger lines are white and visible */
.hamburger,
.hamburger::before,
.hamburger::after {
    background-color: #fff; /* Confirm white */
    height: 3px; /* MODIFIED: Thicker lines */
    width: 24px; /* MODIFIED: Proper width for the lines */
    border-radius: 2px;
    position: relative;
    transition: all 0.3s ease;
}

.hamburger {
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
}

.hamburger::before {
    transform: translateY(0px); /* MODIFIED: Reduced spacing for more compact look */
}

.hamburger::after {
    transform: translateY(0px); /* MODIFIED: Reduced spacing for more compact look */
}

/* X transformation when menu is active */
header.nav-active .nav-toggle .hamburger {
    background-color: transparent; /* Middle line disappears */
}

header.nav-active .nav-toggle .hamburger::before {
    transform: rotate(45deg); /* Form X - first line */
}

header.nav-active .nav-toggle .hamburger::after {
    transform: rotate(-45deg); /* Form X - second line */
}

/* Remove or override styles for .header-action-menu as it's no longer in the visible header */
.header-action-menu {
    display: none !important; /* Ensure it does not appear */
}

/* If there were specific media queries hiding .nav-toggle on desktop, they need to be overridden or removed. */
/* For example, if a @media (min-width: 1001px) { .nav-toggle { display: none; } } exists, remove it or counteract it. */
/* Assuming .nav-toggle is now always flex by default, this should be fine. */

/* The original centered .main-nav styling (with background, blur, etc.) is effectively overridden */
/* by the new .main-nav rules above which reset background, border, etc. */

/* Any global styles for 'nav ul' or 'nav a' should be checked for conflicts, */
/* but the more specific '.main-nav ul.nav-links' and '.main-nav a.nav-item' should take precedence. */

/* Flash messages */
.flash-messages {
    margin-bottom: 25px; /* Adjusted slightly if needed */
    /* Ensure container itself doesn't add excessive space */
    padding: 0; 
}

.flash-message {
    padding: 16px 24px;
    margin: 0 auto 20px auto; /* Centered with auto margins */
    border-radius: 12px;
    background-color: rgba(10, 31, 68, 0.9); /* Dark blue, less transparent */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff; /* Default text color white */
    position: relative;
    opacity: 1;
    transition: all 0.5s ease;
    max-width: 800px; /* Limit width */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex; /* Use flex for alignment */
    align-items: center;
    justify-content: space-between; /* Push close button to right */
    font-weight: 500;
    letter-spacing: 0.3px;
    backdrop-filter: blur(8px);
}

.flash-message.fade-out {
    opacity: 0;
}

.flash-close {
    position: relative; /* Change positioning */
    top: auto;
    right: auto;
    margin-left: 15px; /* Space between text and button */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8); /* White close button */
    font-size: 16px;
    cursor: pointer;
    opacity: 0.8;
    padding: 6px 8px;
    line-height: 1;
    transition: all 0.3s ease;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flash-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.flash-message.success {
    /* Use the default dark blue background, but keep a subtle green border */
    border-color: rgba(102, 187, 106, 0.6); /* Lighter Green Border */
    color: #fff;
}

.flash-message.error {
    background-color: rgba(183, 28, 28, 0.9); /* Even Darker Error Red */
    border-color: rgba(229, 115, 115, 0.5); /* Lighter Red Border */
    color: #fff;
}

.flash-message.info {
    background-color: rgba(13, 71, 161, 0.9); /* Even Darker Info Blue */
    border-color: rgba(100, 181, 246, 0.5); /* Lighter Blue Border */
    color: #fff;
}

.flash-message.warning {
    background: linear-gradient(135deg, rgba(30, 50, 80, 0.95), rgba(25, 40, 70, 0.95));
    border: 1px solid rgba(100, 149, 237, 0.4);
    color: #e3f2fd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

/* Hero Section with Slogan and Create Button */
.hero-section {
    display: flex;
    justify-content: center;
    padding: 60px 0 60px 0;
    margin-bottom: 5px;
}

.hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1800px;
    padding: 0 0px;
}

.hero-slogan {
    font-family: 'Poppins', sans-serif; /* Explicitly set Poppins */
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: #ffffff;
    max-width: 600px;
    padding-left: 0;
    margin-left: 0;
}

.create-new-story-button {
    display: inline-block;
    background-color: var(--hover-color, #FFC368); /* Always main color */
    color: #000; /* Black text */
    padding: 28px 60px; /* Much bigger padding */
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif; /* Explicitly set Poppins */
    font-size: 2rem; /* Much bigger font */
    font-weight: 500;
    box-shadow: var(--box-shadow-light, 0 4px 15px rgba(0, 0, 0, 0.2));
    transition: transform 0.2s ease-out;
    min-width: 320px; /* Make button wide */
    margin-right: 10%;
}

@media (max-width: 768px) {
    .create-new-story-button {
        font-size: 1.6rem;
        padding: 22px 40px;
        min-width: 220px;
        margin-right: 0%;
    }
}

@media (max-width: 415px) {
    .create-new-story-button {
        font-size: 1.3rem;
        padding: 18px 20px;
        min-width: 160px;
        margin-top: 20px;
        margin-bottom: 0px;
        display: block;
        width: auto;
        text-align: center;
        max-width: none;
    }
}

.create-new-story-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

@media (max-width: 979px) {
    
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .hero-section {
        justify-content: center;
        padding: 10px 0 20px 0;
        margin-bottom: 0px;
    }
    
    .hero-slogan {
        margin-left: 20%;
        margin-right: 20%;
        font-size: 15px;
        max-width: 100%;
        display: none !important;
    }
    
    .create-new-story-button {
        margin-right: 0%;
        font-size: 1.2rem;
        padding: 15px 30px;
    }
}

/* NEW: Home Page Create Button Section */
.home-create-section {
    text-align: center;
    padding: 5px 20px;
    margin-top:     5px; /* Reduced */
}

.create-magic-button {
    /* Change to flex and center horizontally within itself if needed, but treat as block */
    display: flex; 
    margin-left: auto; /* Center the button block */
    margin-right: auto;
    width: fit-content; /* Prevent stretching full width */
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px 50px; /* Make it large */
    font-size: 1.8rem; /* Large text */
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background-image: linear-gradient(135deg, #6a4caf 0%, #a75eaa 100%); /* Purple gradient */
    border-radius: 50px; /* Rounded */
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), /* Base shadow */
                0 0 30px rgba(167, 94, 170, 0.6); /* Color shadow */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    margin-bottom: 30px; /* Added bottom margin */
}

.create-magic-button .button-icon {
    font-size: 2.5rem; /* Larger icon */
}

.create-magic-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Start further off-screen */
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); /* Angled shimmer */
    opacity: 0;
    transition: left 1s ease-out;
}

.create-magic-button:hover {
    background: linear-gradient(135deg, var(--hover-color, #FFC368) 0%, #e67e22 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 195, 104, 0.4);
}

.create-magic-button:hover::before {
    background: linear-gradient(135deg, var(--hover-color, #FFC368) 0%, #e67e22 100%);
}

.create-magic-button .button-text {
    white-space: nowrap;
    font-size: 1.6rem; /* Adjusted from 1.8rem */
}

@keyframes magicPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 30px rgba(167, 94, 170, 0.6);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 40px rgba(167, 94, 170, 0.8);
    }
}

/* NEW: Styles for the Read from Library button (Use Deep Blue Tones) */
.read-library-button {
    /* Similar styling but smaller and different color */
    display: flex; /* Change to flex */
    width: fit-content; /* Content width */
    margin: 20px auto 10px auto; /* Add some margin */
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 35px; /* Increased padding */
    font-size: 1.4rem; /* Increased font size */
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    background-color: rgba(10, 31, 68, 0.7); /* Semi-transparent dark blue */
    border-radius: 40px; /* Rounded */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.read-library-button .button-icon {
    font-size: 1.4em; /* Slightly larger icon */
}

.read-library-button:hover {
    background: linear-gradient(135deg, var(--hover-color, #FFC368) 0%, #e67e22 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 195, 104, 0.4);
}

.read-library-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
    border-radius: var(--border-radius-large);
}

.read-library-button:hover::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.read-library-button .button-text {
    white-space: nowrap;
    font-size: 1.3rem; /* Adjusted from 1.4rem */
}

/* NEW: Styles for the Read Your Stories button (Use Deep Blue Tones) */
.read-stories-button {
    /* Identical styling to read-library-button */
    display: flex; /* Change to flex */
    width: fit-content; /* Content width */
    margin: 30px auto 30px auto; /* Adjusted top and bottom margin */
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 35px; /* Increased padding */
    font-size: 1.4rem; /* Increased font size */
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    background-color: rgba(10, 31, 68, 0.7); /* Semi-transparent dark blue */
    border-radius: 40px; /* Rounded */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.read-stories-button .button-icon {
    font-size: 1.4em; /* Slightly larger icon */
}

.read-stories-button:hover {
    background: linear-gradient(135deg, var(--hover-color, #FFC368) 0%, #e67e22 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 195, 104, 0.4);
}

.read-stories-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
    border-radius: var(--border-radius-large);
}

.read-stories-button:hover::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.read-stories-button .button-text {
    white-space: nowrap;
    font-size: 1.3rem; /* Adjusted from 1.4rem */
}

/* NEW: Styles for the View My Gallery button (Deep Blue Tones) */
.view-gallery-button {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    /* Change background */
    background-image: linear-gradient(135deg, #4a6baf 0%, #4c83c9 100%); /* Deep Blue gradient */
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Change shadow */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15),
                0 0 15px rgba(74, 107, 175, 0.5); /* Deep Blue shadow */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-top: 25px;
    position: relative;
    overflow: hidden;
}

.view-gallery-button .button-icon {
    font-size: 1.4rem;
}

.view-gallery-button:hover {
    background: linear-gradient(135deg, var(--hover-color, #FFC368) 0%, #e67e22 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 195, 104, 0.4);
}

.view-gallery-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
    border-radius: var(--border-radius-large);
}

.view-gallery-button:hover::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* Form styles */
.form-container, .auth-container, .profile-container {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
    margin: 20px auto 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 800px;
    text-align: center;
}

.form-group {
    margin-bottom: 32px;
    text-align: center;
}

label {
    display: block;
    margin-bottom: 15px;
    font-weight: 500;
    color: #fff;
    font-size: 1.2rem;
}

input, select, .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Poppins', inherit;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
}

input:focus, select:focus, .form-control:focus {
    outline: none;
    border-color: var(--hover-color, #FFC368);
    box-shadow: 0 0 10px rgba(255, 195, 104, 0.3);
}

/* Keyframes for Button Effects */
@keyframes pulse {
    0% {
        box-shadow: 0 0 15px rgba(255, 195, 104, 0.4), 0 0 8px rgba(255, 195, 104, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 195, 104, 0.7), 0 0 15px rgba(255, 195, 104, 0.5);
    }
    100% {
        box-shadow: 0 0 15px rgba(255, 195, 104, 0.4), 0 0 8px rgba(255, 195, 104, 0.3);
    }
}

@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

.btn-primary {
    /* Updated to use the consistent hover color #FFC368 */
    background-color: var(--hover-color, #FFC368);
    color: #000; /* Black text for better contrast */
    border: 1px solid var(--hover-color, #FFC368);
    padding: 15px 40px; /* Increased width: from 30px to 40px horizontal padding */
    border-radius: 15px; /* Less rounded: from 50px to 15px */
    cursor: pointer;
    font-size: 1.15rem; /* Slightly larger */
    font-family: 'Poppins', inherit;
    font-weight: 500;
    display: inline-flex; /* Use flex for icon alignment */
    align-items: center;
    justify-content: center;
    gap: 10px; /* Space between icon and text */
    text-decoration: none;
    transition: all 0.3s ease; /* Simpler transition */
    text-shadow: none; /* Remove text shadow */
    position: relative; /* Needed for pseudo-elements */
    overflow: hidden; /* Needed for shimmer effect */
    /* Remove glow effects as requested */
    
    /* Add these properties to make it full width */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* Ensures padding is included in width calculation */
}

/* Shimmer Effect Pseudo-element - simplified */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start off-screen */
    width: 100%;
    height: 100%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 80%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 195, 104, 0.3); /* Subtle shadow, no glow */
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 195, 104, 0.25);
    background: linear-gradient(135deg, var(--hover-color, #FFC368) 0%, #e67e22 100%);
    border-color: var(--hover-color, #FFC368);
    transform: none;
}

/* Enhanced loading state for buttons */
.btn-primary.btn-loading {
    background: linear-gradient(135deg, #ddd 0%, #bbb 100%) !important;
    border-color: #bbb !important;
    cursor: not-allowed !important;
    transform: none !important;
    opacity: 0.8 !important;
}

.btn-primary.btn-loading:hover {
    background: linear-gradient(135deg, #ddd 0%, #bbb 100%) !important;
    border-color: #bbb !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary.btn-loading .spinner-border {
    color: #666 !important;
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Poppins', var(--font-family);
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    border-color: var(--hover-color, #FFC368);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 195, 104, 0.4);
}

/* Authentication styles */
.auth-box {
    max-width: 500px;
    margin: 0 auto;
}

.auth-options {
    margin-bottom: 20px;
}

.auth-option {
    margin-bottom: 20px;
}

.social-login {
    text-align: center;
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background-color: white;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s;
}

.btn-google:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
}

.google-icon {
    margin-right: 10px;
}

.auth-divider {
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Make line lighter */
}

.auth-divider span {
    position: relative;
    /* Remove background override */
    background-color: transparent; 
    padding: 0 1.2em; /* Increase horizontal padding */
    color: var(--text-color-light); /* Explicitly set light text color */
    font-weight: 500; /* Make text slightly bolder */
    z-index: 1; 
    line-height: 1; 
}

/* --- Target only auth-links and its anchor --- */
.auth-links {
    text-align: center;
    margin-top: 20px; /* Reverted */
    padding-top: 20px; /* Reverted */
    border-top: 1px solid #eee; /* Reverted */
    /* Removed added font-size and color */
}

.auth-links a {
    color: #fff; /* White text for auth links including Back to Login */
    text-decoration: none;
    /* Removed added font-weight and transition */
}

.auth-links a:hover {
    color: var(--hover-color, #FFC368); /* Use hover color instead of white */
    text-decoration: underline;
}

.remember-me {
    display: flex;
    align-items: center;
    /* Removed added gap, margin-top, font-size, color */
}

.remember-me input { /* Reverted selector back from input[type="checkbox"] */
    width: auto; /* Reverted */
    margin-right: 8px; /* Reverted */
    /* Removed accent-color */
}

/* Target the remember-me label specifically */
.modal-content .remember-me label,
label[for="remember_me"] {
    font-size: 0.9rem; /* Make the text smaller */
    color: #555;
    margin-left: 5px; /* Add a little space between checkbox and text */
}

.error-message {
    display: block;
    color: #f44336;
    font-size: 0.9rem;
    margin-top: 5px;
}

.form-note {
    display: block;
    color: #666;
    font-size: 0.9rem;
    margin-top: 5px;
    font-style: italic;
}

/* Profile styles */

/* Remove old .profile-container styles that made it white */
/* .profile-container { ... } */ 

/* Use auth-container style for overall background/padding */
.profile-container {
    /* Inherit styles from .auth-container if desired, or define new ones */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px; /* Match stories container */
    padding: 35px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin: 0 auto 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 900px; /* Allow slightly wider profile */
    color: #fff; /* Ensure text is white */
}

/* Remove default box styling if not needed */
/* .profile-box { ... } */ 

.profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 35px; /* Increased spacing */
    padding-bottom: 25px; /* Add padding */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Subtle separator */
}

.profile-image {
    width: 80px; /* Slightly smaller */
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 25px;
    border: 2px solid rgba(255, 255, 255, 0.5); /* Add border */
    flex-shrink: 0; /* Prevent shrinking */
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info h3 {
    margin-bottom: 8px;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff; /* White name */
}

.profile-info p {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.8); /* Lighter text */
    font-size: 1rem;
}

.member-since {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6); /* Dimmer text */
    margin-top: 10px;
}

.profile-form {
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.profile-form h4, .account-info h4 {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
}

.account-info {
    margin-bottom: 20px;
    text-align: left;
}

.info-item {
    display: flex;
    justify-content: space-between; /* Align label and value */
    margin-bottom: 12px;
    font-size: 1rem;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    /* min-width: 150px; Remove fixed width */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 15px;
}

.info-value {
    color: #fff;
    text-align: right;
}

/* Style form elements within profile to match theme */
.profile-form .form-group label {
    text-align: left;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.profile-form .form-control {
    background-color: rgba(255, 255, 255, 0.1); /* Translucent background */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff; /* White text */
    padding: 12px 15px;
}

.profile-form .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.profile-form .form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.05); /* Dimmer for readonly */
    cursor: not-allowed;
    opacity: 0.7;
}

.profile-form .form-note {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-top: 8px;
    font-style: italic;
    text-align: left;
}

.profile-form .form-actions {
    text-align: right; /* Align button right */
    margin-top: 25px;
}

/* Responsive adjustments for profile */
@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
        padding-bottom: 20px;
        margin-bottom: 25px;
    }
}

/* Recent Stories section */
.recent-stories {
    margin-bottom: 40px;
}

.recent-stories h2 {
    font-family: 'Magic School One', cursive;
    text-align: center;
    margin-bottom: 30px;
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.story-card {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.15);
}

.story-card-title {
    font-family: 'Poppins', var(--font-family);
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.story-card-meta, .story-card-date {
    font-family: 'Poppins', var(--font-family);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 15px;
}

.view-all {
    text-align: center;
    margin-top: 30px;
}

.link-text {
    font-family: 'Poppins', var(--font-family);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.link-text:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Story List Page */
.page-header {
    text-align: center;
    margin-bottom: 30px;
}

.page-header h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.stories-container {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 40px;
}

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

.story-item {
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.story-item:last-child {
    border-bottom: none;
}

/* NEW: Style for the content container replacing the old label */
.story-item-content {
    display: flex;
    align-items: baseline; /* Align baselines */
    padding: 20px 0; /* Keep vertical padding */
    width: 100%;
    gap: 15px; /* Space between checkbox and main content */
}

/* Container for checkbox and its visual label */
.checkbox-container {
    flex-shrink: 0; /* Prevent checkbox from shrinking */
    position: relative; /* Allow fine-tuning position */
    top: 2px; /* Adjust this value to align checkbox with text baseline */
}

/* Hide the default checkbox */
.story-delete-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* NEW: Custom Checkbox Style (now a label) */
.custom-checkbox {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    transition: all 0.2s ease-out;
    flex-shrink: 0;
    cursor: pointer; /* Add pointer cursor to the label */
    vertical-align: middle; /* Align nicely if needed */
}

/* Style for the checkmark (using pseudo-element) */
.custom-checkbox::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Show checkmark when the hidden checkbox is checked - RE-ASSERT with more specificity */
.checkbox-container > input.story-delete-checkbox:checked + label.custom-checkbox::after {
    display: block;
    z-index: 1; /* Ensure it's visible */
}

/* Change background when checked */
.story-delete-checkbox:checked + .custom-checkbox {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Hover effect - now applies only to the custom-checkbox label */
/* .story-item-label:hover .custom-checkbox { */ /* Remove old rule */
.custom-checkbox:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* .story-delete-checkbox:checked + .custom-checkbox:hover { */ /* Keep this rule for checked hover */
.story-delete-checkbox:checked + .custom-checkbox:hover {
     background-color: #5a7bbf;
     border-color: #5a7bbf;
}

/* NEW: Wrapper for the main content (info + stars) */
.story-content-wrapper {
    display: flex;
    justify-content: space-between;
    /* Change alignment to flex-start to align tops */
    align-items: flex-start; 
    flex-grow: 1;
    gap: 15px;
}

.story-info {
    margin-right: 0;
}

.story-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    flex-wrap: wrap;
}

.story-item-title {
    font-size: 1.3rem;
    margin: 0;
    flex-shrink: 0;
}

.story-item-title a {
    color: #fff !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.story-item-title a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
}

/* Ensure visited links look the same */
.story-item-title a:visited {
    color: #fff !important;
    text-decoration: none !important;
}

.story-item-meta {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    white-space: nowrap;
}

.highlight {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
}

.empty-state p {
    margin-bottom: 20px;
    color: #666;
    font-size: 1.1rem;
}

/* How it works section */
.how-it-works {
    margin: 60px 0;
}

.how-it-works h2 {
    font-family: 'Magic School One', cursive;
    text-align: center;
    margin-bottom: 40px;
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.steps {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
}

.step {
    flex: 1;
    min-width: 250px;
    text-align: center;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.step:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.15);
}

.step-number {
    display: inline-block;
    background-color: rgba(74, 107, 175, 0.8);
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    font-family: 'Poppins', var(--font-family);
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 20px;
    box-shadow: 0 0 15px rgba(74, 107, 175, 0.4);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* Story page styles */
.story-container {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.back-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--primary-color);
    text-decoration: none;
}

.story-content {
    max-width: 800px;
    margin: 0 auto 30px;
    line-height: 1.8;
    width: 100%; /* Add this to ensure it takes the full width available */
    background-color: rgba(10, 31, 68, 0.4); /* Match the blue background shown in your screenshot */
    border-radius: 10px; /* Add rounded corners */
    padding: 20px; /* Add padding inside the container */
    box-sizing: border-box; /* Ensure padding doesn't add to width */
}

.story-title {
    font-size: 20px;
    margin-bottom: 5px;
    color: var(--primary-color);
}

.story-date {
    color: #888;
    margin-bottom: 25px;
    font-size: 0.9rem;
}

.story-text {
    font-size: 1.1rem;
    margin-bottom: 0px;
    margin-top: 0px;
}

.story-text p {
    margin-bottom: 15px;
}

.story-meta {
    color: #666;
    font-style: italic;
    margin-bottom: 20px;
}

.actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

/* --- Auth Prompt Section (Restoring Styles) --- */
.auth-prompt {
    margin: 40px auto;
    max-width: 600px;
    /* ADDED layout styles */
    padding: 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto; 
}

/* Leave the .auth-prompt .auth-container rule for now, hoping the above overrides */
/* .auth-prompt .auth-container { ... } */ 

.auth-prompt h2 {
    font-family: 'Magic School One', cursive;
    color: #fff;
    margin-bottom: 20px;
    font-size: 2.5rem;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    text-align: center; /* Ensure heading is centered */
}

.auth-prompt p {
    margin-bottom: 30px;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    text-align: center; /* Ensure paragraph is centered */
}

.auth-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    width: 100%; /* Ensure button container takes width */
}

.auth-buttons .btn-primary,
.auth-buttons .btn-secondary {
    min-width: 140px;
    padding: 12px 30px;
    font-size: 1.1rem;
}

/* --- End Auth Prompt Styles --- */

footer {
    text-align: center;
    padding: 20px;
    /* margin-top: 40px; */ /* Removed specific margin-top, flexbox will handle spacing */
    background: rgba(10, 31, 68, 0.8); /* Darker, slightly more opaque footer */
    color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%; /* Make footer full width */
    flex-shrink: 0; /* Prevent footer from shrinking */
}

.footer-nav {
    margin-bottom: 15px;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 25px;
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    font-size: 1rem;
}

.footer-nav a:hover {
    color: var(--hover-color, #FFC368); /* Changed to main color */
    /* Remove glow effect - text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); */
}

footer p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

@media (max-width: 1000px) {
    .container {
        padding: 15px;
    }
    
    header h1 {
        font-size: 2.5rem;
    }

    header .tagline {
        font-size: 0.9rem;
    }
    
    .hero h2 {
        font-size: 1.7rem;
    }
    
    .story-title {
        font-size: 16px;
    }
    
    .story-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .story-actions {
        margin-left: 0;
        margin-top: 15px;
    }
    
    .story-grid {
        grid-template-columns: 1fr;
    }
    
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-image {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .main-nav {
        /* Adjustments for mobile */
        position: relative; /* Needed for absolute positioning of toggle */
        width: auto; /* Allow it to shrink */
        background: none; /* Remove desktop background */
        backdrop-filter: none;
        border: none;
        margin: 0; /* Reset margin */
        padding: 0;
    }
    
    /* Show the toggle button on mobile - Increased Specificity */
    header .nav-toggle {
        display: flex; /* MODIFIED: Ensure it is flex for consistency, though base style should cover */
        /* position: absolute; REMOVED: No longer absolutely positioned */
        /* top: 30px; REMOVED */
        /* left: 5px; REMOVED */
        /* z-index: 1100; REMOVED */
        padding: 0px; /* This padding might be adjusted by the general .nav-toggle rule */
    }

    /* Style the mobile navigation list */
    .main-nav ul {
        /* display: none; Hide via transform */
        position: absolute;
        /* top: 55px; */ /* Previous value */
        top: 0px; /* Adjusted: Align top with toggle button, should cover tagline */
        left: 0; /* Open from Left */
        background: rgba(10, 31, 68, 0.9); /* Slightly less opaque background */
        backdrop-filter: blur(10px);
        border-radius: 8px;
        /* border-radius: 0 8px 8px 0; /* Optional: round only outer corners */
        width: 280px; /* Slightly wider */
        flex-direction: column;
        padding: 20px 0;
        gap: 0; /* Reset gap, use padding/margin on items */
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1000;
        transform: translateX(-105%); /* Start off-screen left */
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth slide transition */
        visibility: hidden; /* Hide when off-screen for accessibility */
        opacity: 0; /* Fade in */
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), 
                    opacity 0.3s ease-out, 
                    visibility 0s linear 0.4s; /* Hide after transition */
    }

    /* Show the list when nav is active */
    /* header.nav-active .main-nav ul { */ /* Old selector */
    .main-nav ul.active { /* New selector targeting .active class on the ul */
        /* display: flex; -- Already flex, just change transform/visibility */
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), 
                    opacity 0.3s ease-in 0.1s, /* Fade in slightly delayed */
                    visibility 0s linear 0s; /* Show immediately */
    }

    /* Style mobile navigation links */
    .main-nav a {
        padding: 12px 25px;
        font-size: 1.1rem;
        display: block; /* Make links take full width */
        border-radius: 0;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        text-shadow: none;
        color: rgba(255, 255, 255, 0.9);
    }
    
    .main-nav ul li:last-child a {
        border-bottom: none; /* Remove border from last item */
    }

    .main-nav a:hover,
    .main-nav a.active {
        background-color: rgba(255, 255, 255, 0.1); /* Subtle hover/active */
        color: #fff;
    }

    .actions {
        flex-direction: column;
        align-items: center;
    }
    
    .actions a, .actions button {
        width: 100%;
        text-align: center;
    }

    /* Adjust story list font sizes for mobile */
    .story-item-title {
        font-size: 1.1rem;
    }

    .story-item-meta {
        font-size: 0.85rem;
        white-space: normal;
        margin-top: 5px;
    }

    /* Stack story content (info+stars) vertically on mobile */
    .story-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Stack title and meta vertically on mobile */
    .story-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    /* Align stars left on mobile */
    .star-rating {
        font-size: 1.2rem;
        margin-left: 0;
    }

    /* NEW: Adjust font size and padding for smaller home buttons on mobile */
    .read-library-button,
    .read-stories-button,
    .view-gallery-button {
        font-size: 0.85rem; /* Even smaller font */
        padding: 25px 45px; /* Further reduced padding */
        gap: 6px; /* Slightly smaller gap */
    }

    /* Adjust icon size within smaller buttons */
    .read-library-button .button-icon,
    .read-stories-button .button-icon,
    .view-gallery-button .button-icon {
        font-size: 1.1rem; /* Adjust icon size accordingly */
    }

    .footer-nav a {
        font-size: 0.8rem; /* Reduced from 1rem */
    }

    footer p {
        font-size: 0.75rem; /* Reduced from 0.85rem */
    }
}

/* Print styles */
@media print {
    header, footer, .actions {
        display: none;
    }
    
    .story-container {
        box-shadow: none;
        padding: 0;
    }
    
    .story-content {
        max-width: 100%;
    }
}

/* Auth prompt section */
.auth-prompt {
    margin: 40px auto;
    max-width: 600px;
}

.auth-prompt .auth-container {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-prompt h2 {
    font-family: 'Magic School One', cursive;
    color: #fff;
    margin-bottom: 20px;
    font-size: 2.5rem;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.auth-prompt p {
    margin-bottom: 30px;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
}

.auth-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.auth-buttons .btn-primary,
.auth-buttons .btn-secondary {
    min-width: 140px;
    padding: 12px 30px;
    font-size: 1.1rem;
}

/* Main content wrapper */
.content-wrapper {
    position: relative;
    z-index: 1;
}

/* Background overlay */
.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(10, 31, 68, 0.2), rgba(10, 31, 68, 0.4));
    z-index: 0;
    pointer-events: none;
}

/* Age selection buttons */
.age-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
}

.age-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 45px;
    min-height: 45px;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.age-btn:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    transform: translateY(-2px);
}

.age-btn.selected {
    background-color: rgba(74, 107, 175, 0.8);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 20px rgba(74, 107, 175, 0.6),
        0 0 30px rgba(255, 255, 255, 0.3);
    transform: translateY(-3px) scale(1.1);
    font-weight: 600;
    color: #fff;
}

@media (max-width: 768px) {
    .age-selection {
        gap: 8px;
    }
    
    .age-btn {
        padding: 8px 12px;
        font-size: 1rem;
        min-width: 38px;
        min-height: 38px;
    }
}

/* Interest selection buttons */
.interests-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 20px 0;
}

.interest-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Poppins', var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.interest-btn:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    transform: translateY(-2px);
}

.interest-btn.selected {
    background-color: rgba(74, 107, 175, 0.8);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 20px rgba(74, 107, 175, 0.6),
        0 0 30px rgba(255, 255, 255, 0.3);
    transform: translateY(-3px) scale(1.05);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.custom-interest {
    margin-top: 15px;
    position: relative;
    width: 100%;
}

.custom-interest input {
    width: 100%;
    padding: 12px 20px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.custom-interest input:focus {
    outline: none;
    border-color: var(--hover-color, #FFC368);
    box-shadow: 0 0 8px rgba(255, 195, 104, 0.3);
}

.custom-interest input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    .interests-selection {
        gap: 6px;
    }
    
    .interest-btn {
        padding: 6px 12px;
        font-size: 0.9rem;
    }
}

/* Language selection buttons */
.language-selection {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
}

.language-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Poppins', var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    min-width: 100px;
}

.language-btn:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    transform: translateY(-2px);
}

.language-btn.selected {
    background-color: rgba(74, 107, 175, 0.8);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 20px rgba(74, 107, 175, 0.6),
        0 0 30px rgba(255, 255, 255, 0.3);
    transform: translateY(-3px) scale(1.05);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .language-selection {
        gap: 10px;
    }
    
    .language-btn {
        padding: 8px 16px;
        min-width: 90px;
        font-size: 0.9rem;
    }
}

.form-group input[type="text"]#childName {
    width: 100%;
    padding: 12px 20px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

/* Responsive font size for screens below 475px */
@media (max-width: 474px) {
    .form-group input[type="text"]#childName {
        font-size: 0.75rem;
    }
}

.form-group input[type="text"]#childName:focus {
    outline: none;
    border-color: var(--hover-color, #FFC368);
    box-shadow: 0 0 8px rgba(255, 195, 104, 0.3);
}

.form-group input[type="text"]#childName::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Values selection buttons */
.values-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 20px 0;
}

.value-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Poppins', var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.value-btn:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    transform: translateY(-2px);
}

.value-btn.selected {
    background-color: rgba(74, 107, 175, 0.8);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 20px rgba(74, 107, 175, 0.6),
        0 0 30px rgba(255, 255, 255, 0.3);
    transform: translateY(-3px) scale(1.05);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.custom-value {
    margin-top: 15px;
    position: relative;
    width: 100%;
}

.custom-value input {
    width: 100%;
    padding: 12px 20px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.custom-value input:focus {
    outline: none;
    border-color: var(--hover-color, #FFC368);
    box-shadow: 0 0 8px rgba(255, 195, 104, 0.3);
}

.custom-value input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    .values-selection {
        gap: 6px;
    }
    
    .value-btn {
        padding: 6px 12px;
        font-size: 0.9rem;
    }
}

/* Learning selection buttons */
.learning-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 20px 0;
}

.learning-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Poppins', var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.learning-btn:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    transform: translateY(-2px);
}

.learning-btn.selected {
    background-color: rgba(74, 107, 175, 0.8);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 20px rgba(74, 107, 175, 0.6),
        0 0 30px rgba(255, 255, 255, 0.3);
    transform: translateY(-3px) scale(1.05);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.custom-learning {
    margin-top: 15px;
    position: relative;
    width: 100%;
}

.custom-learning input {
    width: 100%;
    padding: 12px 20px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.custom-learning input:focus {
    outline: none;
    border-color: var(--hover-color, #FFC368);
    box-shadow: 0 0 8px rgba(255, 195, 104, 0.3);
}

.custom-learning input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    .learning-selection {
        gap: 6px;
    }
    
    .learning-btn {
        padding: 6px 12px;
        font-size: 0.9rem;
    }
}

/* Duration selection buttons */
.duration-selection {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

.duration-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 15px 25px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}

.duration-btn .duration-detail {
    font-size: 0.9rem;
    opacity: 0.8;
    font-weight: normal;
}

.duration-btn:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    transform: translateY(-2px);
}

.duration-btn.selected {
    background-color: rgba(74, 107, 175, 0.8);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 20px rgba(74, 107, 175, 0.6),
        0 0 30px rgba(255, 255, 255, 0.3);
    transform: translateY(-3px) scale(1.05);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .duration-selection {
        gap: 10px;
    }
    
    .duration-btn {
        padding: 12px 20px;
        font-size: 1rem;
        min-width: 150px;
    }
    
    .duration-btn .duration-detail {
        font-size: 0.85rem;
    }
}

/* Styles for the new length selection container (optional, if needed) */
.length-selection {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* NEW: Add pronoun selection container style */
.pronoun-selection {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Shared button styles for form selections */
.age-btn, 
.language-btn, 
.interest-btn, 
.value-btn, 
.learning-btn, 
.length-btn,
.pronoun-btn { /* Add pronoun button */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Poppins', var(--font-family);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    backdrop-filter: blur(5px);
}

/* Shared hover styles - UPDATED */
.pronoun-btn:hover,
.length-btn:hover,
.language-btn:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    transform: translateY(-2px);
}

/* Shared selected styles - UPDATED */
.pronoun-btn.selected,
.length-btn.selected,
.language-btn.selected {
    background-color: rgba(var(--primary-color-rgb), 0.75);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 18px rgba(var(--primary-color-rgb), 0.55),
                0 0 25px rgba(255, 255, 255, 0.3);
    transform: translateY(-3px) scale(1.05);
    font-weight: bold;
}

/* Container layout styles (can be shared if layout is identical) */
.age-selection,
.language-selection,
.interests-selection,
.values-selection,
.learning-selection,
.length-selection,
.pronoun-selection { /* Add pronoun selection container */
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Remove old .duration-btn styles */
/*
.duration-selection { ... }
.duration-btn { ... }
.duration-btn .duration-detail { ... }
.duration-btn:hover { ... }
.duration-btn.selected { ... }
@media (max-width: 768px) { ... }
*/

@media (max-width: 768px) {
    .age-selection {
        gap: 8px;
    }
    
    .age-btn {
        padding: 8px 12px;
        font-size: 1rem;
        min-width: 38px;
        min-height: 38px;
    }
}

/* Storybook Navigation Container (Restored) */
.book-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 30px 0 20px 0;
    padding: 10px; /* Restored padding */
    background: rgba(255, 255, 255, 0.05); /* Restored */
    backdrop-filter: blur(10px); /* Restored */
    border-radius: 30px; /* Restored */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Restored */
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Style both button and anchor tags within book-navigation (Transparent Button) */
.book-navigation .nav-button {
    /* Background and Appearance (Transparent) */
    background: none; /* Explicitly none */
    border: none; /* Explicitly none */
    backdrop-filter: none; /* Remove filter from button */
    margin: 0; /* ADDED: Ensure no default button margin */
    
    /* Text and Font */
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem; /* Match main-nav a */
    font-weight: 500;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    text-decoration: none;

    /* Box Model and Layout */
    padding: 8px 20px;
    border-radius: 20px; /* Smaller radius for the hover effect */
    display: inline-flex; /* Use inline-flex for better alignment */
    align-items: center;  /* ADDED: Vertically center content */
    justify-content: center; /* ADDED: Horizontally center content */
    line-height: normal; 
    cursor: pointer;

    /* Transition */
    transition: all 0.3s ease;
}

.book-navigation .nav-button:hover {
    /* Apply main color background on hover instead of white */
    background-color: var(--hover-color, #FFC368);
    color: #000; /* Black text for contrast */
    border: none; /* Ensure no border appears on hover */
}

/* Apply disabled styles using a class instead of :disabled attribute */
.book-navigation .nav-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: transparent !important; /* Ensure no background when disabled, even on hover */
    color: rgba(255, 255, 255, 0.4);
    text-shadow: none;
    border: none;
    backdrop-filter: none;
    /* Prevent hover effects when disabled */
    pointer-events: none; 
}

/* Star Rating Styles */
.star-rating {
    display: inline-flex; /* Use flex for alignment */
    align-items: center;
    gap: 4px; /* Space between stars */
    cursor: pointer;
    flex-shrink: 0;
}

.star-rating .star {
    display: inline-block;
    /* Remove padding if gap is used */
    /* padding: 0 2px; */ 
    transition: transform 0.1s ease-in-out; 
    line-height: 1; /* Ensure SVGs align nicely */
}

.star-rating .star-icon {
    width: 1.4em; /* Control size relative to font-size */
    height: 1.4em;
    display: block; /* Or inline-block, adjust as needed */
    transition: fill 0.2s ease-in-out;
}

.star-icon-filled {
    fill: #ffc107; /* Filled star color (gold) */
}

.star-icon-empty {
    fill: #ccc; /* Empty star color (grey) */
    /* Alternative: Outline style */
    /* fill: none; */
    /* stroke: #ccc; */
    /* stroke-width: 1.5;  */ 
}

/* Remove Hover effect styles */
/*
.star-rating:hover .star-icon-empty {
    fill: #e6e6e6; 
}

.star-rating .star:hover .star-icon-filled,
.star-rating .star:hover .star-icon-empty {
     fill: #ffda6a; 
}

.star-rating .star:hover ~ .star .star-icon-filled,
.star-rating .star:hover ~ .star .star-icon-empty {
    fill: #ccc; 
}
*/

.star-rating .star:active {
    transform: scale(0.9); /* Keep Slight shrink on click */
}

/* Container for story page rating */
.star-rating-container {
    text-align: left;
    margin: 10px 0;
    padding: 0px;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 400px;
}

.star-rating-container h4 {
    margin-bottom: 15px;
    color: #000000;
    font-weight: 500;
}

/* Loading Overlay Styles */
#loading-overlay {
    position: fixed;
    inset: 0; /* top, left, bottom, right = 0 */
    background-color: rgba(10, 31, 68, 0.85); /* Dark blue overlay */
    backdrop-filter: blur(8px);
    display: flex; /* Use flexbox for centering */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Prevent interaction when hidden */
}

#loading-overlay.visible {
    opacity: 1;
    pointer-events: auto; /* Allow interaction when visible */
}

.loading-content {
    text-align: center;
    color: #fff;
    width: 90%; /* Give the content area a width */
    max-width: 500px; /* Prevent it from getting too wide */
}

/* Simple CSS Spinner (Optional) */
.loading-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#loading-message {
    font-family: 'Poppins', var(--font-family);
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 25px;
    min-height: 2em; /* Prevent layout shift */
}

/* NEW: Styles for delete button container */
.story-list-actions {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: right;
}

/* Optional: Specific styling for danger button */
.btn-danger {
    background-color: rgba(220, 53, 69, 0.7); /* Reddish danger color */
    border-color: rgba(220, 53, 69, 0.9);
    color: #fff;
}

.btn-danger:hover {
    background-color: rgba(220, 53, 69, 0.9);
    border-color: rgba(220, 53, 69, 1);
    color: #fff;
}

/* ==================
   Gallery Styles
   ================== */

.gallery-container {
    padding-top: 0; /* Removed top padding */
    padding-bottom: 40px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Increased size */
    gap: 40px; /* Increased spacing between grid items from 20px to 40px */
    margin-top: 10px;
}

.gallery-item {
    position: relative;
    border-radius: 8px; 
    /* overflow: hidden; */ /* Comment out just in case */
    overflow: visible !important; /* Try forcing overflow visible */
}

.gallery-item a {
    display: block;
    border-radius: 8px;
    /* overflow: hidden; */ /* Comment out just in case */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
    background-color: rgba(255, 255, 255, 0.1); /* Slight background tint */
    overflow: visible !important; /* Try forcing overflow visible */
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Keep transition */
}

.gallery-item a:hover {
    transform: none !important; /* Keep transform removal */
    /* box-shadow: 0 0 18px 7px rgba(255, 255, 200, 0.75); */ /* REMOVE shadow from link */
}

/* Add rule to apply shadow to the image specifically on link hover */
.gallery-item a:hover img {
    box-shadow: 0 0 8px 3px rgba(255, 195, 104, 0.6) !important; /* Smaller main color glow */
    /* transform: scale(1.02); */ /* Optional: Slight scale to emphasize */
}

/* Create Story Placeholder Card Styles */
.create-story-item a {
    /* Inherit general styles from gallery-item a */
    display: flex; /* Use flex to center content */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    aspect-ratio: 1 / 1; /* Maintain square shape */
    height: 100%; /* Ensure link fills the item */
    background-color: rgba(255, 255, 255, 0.05); /* Slightly different background */
}

.create-story-placeholder {
    font-size: 6rem; /* Large plus sign */
    color: rgba(255, 195, 104, 0.7); /* Main color with transparency */
    font-weight: 100; /* Thin plus sign */
    line-height: 1; /* Adjust line height for centering */
    transition: color 0.3s ease;
    /* Remove glow effect for minimalistic approach */
}

.create-story-item a:hover .create-story-placeholder {
    background-color: rgba(255, 195, 104, 0.3); /* Transparent main color on hover */
    color: var(--hover-color, #FFC368); /* Full main color text */
}

/* Mobile adjustments for gallery */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); /* Increased size */
        gap: 30px; /* Increased from 15px to 30px */
    }

    .gallery-item a {
        border-radius: 6px;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Increased size */
        gap: 20px; /* Increased from 10px to 20px */
    }
}

/* Navigation Toggle Button (Hamburger) */
.nav-toggle {
    display: flex; /* MODIFIED: Ensure it's visible by default for the new header */
    background: none;
    border: none;
    padding: 10px; /* This might be overridden by more specific .nav-toggle styles earlier */
    cursor: pointer;
    /* position: static; -- Ensured by earlier, more specific rule if needed */
    /* z-index: auto;   -- Ensured by earlier, more specific rule if needed */
}

.hamburger {
    display: block;
    position: relative;
    width: 24px;
    height: 2px;
    background-color: #fff;
    transition: transform 0.3s ease;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}

/* Active state for hamburger icon (transform into X) */
header.nav-active .nav-toggle .hamburger {
    background-color: transparent; /* Middle bar fades out */
}

header.nav-active .nav-toggle .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

header.nav-active .nav-toggle .hamburger::after {
    bottom: 0;
    transform: rotate(-45deg);
} 

/* === Page Transition Animations === */

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Class to apply for outgoing animation */
.page-transition-out main {
    animation: fadeOutUp 0.5s ease-out forwards;
}

/* Class to apply for incoming animation */
.page-transition-in main {
    opacity: 0; /* Start hidden */
    animation: fadeInDown 0.6s ease-out 0.2s forwards; /* Delay slightly */
}

/* Apply fadeOut to footer as well */
.page-transition-out footer {
    animation: fadeOut 0.4s ease-out forwards; /* Slightly faster fade for footer */
}

/* === End Page Transition Animations === */

/* ADDED: Keyframe for simple fade out */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Class to apply for outgoing animation */
.page-transition-out main {
    animation: fadeOutUp 0.5s ease-out forwards;
}

/* Auto-hide animation */
@keyframes fadeOutAndShrink {
    from {
        opacity: 1;
        transform: scaleY(1);
        margin-bottom: 20px; /* Keep original margin during animation */
        padding-top: 12px;
        padding-bottom: 12px;
        max-height: 100px; /* Adjust if messages can be taller */
    }
    to {
        opacity: 0;
        transform: scaleY(0);
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        max-height: 0;
        border-width: 0; /* Fade border too */
    }
}

/* Class to trigger auto-hide */
.flash-auto-hide {
    animation: fadeOutAndShrink 0.6s ease-out 4s forwards; /* Start after 4s delay */
    overflow: hidden; /* Prevent content spill during shrink */
}

/* Class to apply for outgoing animation */
.page-transition-out main {
    animation: fadeOutUp 0.5s ease-out forwards;
}

/* --- Authentication Pages --- */

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px); /* Adjust based on header/footer height */
    padding: 2rem 1rem; 
    flex-direction: column; 
    gap: 1.5rem; 
}

.auth-box {
    /* REMOVED visual styles */
     width: 100%; /* Allow content to take width */
     max-width: 450px; /* Limit width of the form area */
}

.auth-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-color-light);
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color-light);
}

.auth-divider:not(:empty)::before {
    margin-right: .5em;
}

.auth-divider:not(:empty)::after {
    margin-left: .5em;
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

.btn-google:hover {
    background-color: #f8f8f8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.google-icon {
    width: 18px;
    height: 18px;
}

.auth-links {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--text-color-light); /* Light text for the paragraph */
}

.auth-links a {
    color: #fff; /* White text for auth links instead of purple accent */
    text-decoration: none;
    font-weight: 500;
}

.auth-links a:hover {
    color: #fff; /* White on hover */
    text-decoration: underline;
}

/* Remember Me Checkbox */
.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-color-light);
}

.remember-me input[type="checkbox"] {
    accent-color: var(--primary-color);
}

/* Profile Page Specific Styles */

.profile-container {
    /* Inherit styles from .auth-container if desired, or define new ones */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px; /* Match stories container */
    padding: 35px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin: 0 auto 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 900px; /* Allow slightly wider profile */
    color: #fff; /* Ensure text is white */
}

/* Remove default box styling if not needed */
/* .profile-box { ... } */ 

.profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 35px; /* Increased spacing */
    padding-bottom: 25px; /* Add padding */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Subtle separator */
}

.profile-image {
    width: 80px; /* Slightly smaller */
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 25px;
    border: 2px solid rgba(255, 255, 255, 0.5); /* Add border */
    flex-shrink: 0; /* Prevent shrinking */
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info h3 {
    margin-bottom: 8px;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff; /* White name */
}

.profile-info p {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.8); /* Lighter text */
    font-size: 1rem;
}

.member-since {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6); /* Dimmer text */
    margin-top: 10px;
}

.profile-form {
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.profile-form h4, .account-info h4 {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
}

.account-info {
    margin-bottom: 20px;
    text-align: left;
}

.info-item {
    display: flex;
    justify-content: space-between; /* Align label and value */
    margin-bottom: 12px;
    font-size: 1rem;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    /* min-width: 150px; Remove fixed width */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 15px;
}

.info-value {
    color: #fff;
    text-align: right;
}

/* Style form elements within profile to match theme */
.profile-form .form-group label {
    text-align: left;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.profile-form .form-control {
    background-color: rgba(255, 255, 255, 0.1); /* Translucent background */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff; /* White text */
    padding: 12px 15px;
}

.profile-form .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.profile-form .form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.05); /* Dimmer for readonly */
    cursor: not-allowed;
    opacity: 0.7;
}

.profile-form .form-note {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-top: 8px;
    font-style: italic;
    text-align: left;
}

.profile-form .form-actions {
    text-align: right; /* Align button right */
    margin-top: 25px;
}

/* Responsive adjustments for profile */
@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
        padding-bottom: 20px;
        margin-bottom: 25px;
    }
}

/* General Content Container */
.content-container {
    max-width: 600px; /* Adjust as needed */
    margin: 2rem auto; /* Center the container with top/bottom margin */
    padding: 0 1rem; /* Add horizontal padding */
}

/* Specific adjustments for auth pages if needed */
.auth-page .auth-options,
.auth-page .auth-option,
.auth-page .auth-links {
    width: 100%; /* Ensure elements take full width of the container */
}

.auth-page .form-control {
    width: 100%; /* Make form inputs take full width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.auth-page .btn-primary,
.auth-page .btn-google {
    width: 100%;
    text-align: center;
}

/* Add any other necessary overrides here */

html {
  overflow-y: scroll;
}

@media (max-width: 768px) {
    .container {
        padding: 5px;
    }
    
    header h1 {
        font-size: 2.5rem;
    }

    /* NEW: Reduce spacing on mobile home */
    header {
        margin-bottom: 0px; /* Reduced from 25px */
        padding-bottom: 0px; /* Reduced from 25px */
    }
    .home-create-section {
        padding-top: 10px;  /* Reduced from 60px */
        margin-top: 15px;  /* Reduced from 25px */
        padding-bottom: 30px; /* Also reduce bottom padding from 60px */
    }

    /* Adjustments for smaller buttons (Keep for now, even if reverted partially) */
    .read-library-button,
    .read-stories-button,
    .view-gallery-button { /* Note: view-gallery-button is removed from HTML but style might remain */
        font-size: 1.0rem; /* Was 1.2rem */
        padding: 15px 20px; /* Was 15px 25px, harmonized with create button */
        gap: 8px; 
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .read-library-button .button-icon,
    .read-stories-button .button-icon,
    .view-gallery-button .button-icon { /* Note: view-gallery-button is removed from HTML */
        font-size: 1.3rem; /* Adjust icon size relative to new font size */
    }

    /* NEW: Adjust main Create button for mobile */
    .create-magic-button {
        font-size: 1.0rem; /* Was 0.9rem, reverted to match other buttons */
        padding: 20px 40px; /* Was 18px 30px, harmonized */
        gap: 8px; 
        margin-bottom: 10px;
    }

    .create-magic-button .button-icon {
        font-size: 1.3rem; /* Was 1.2rem, reverted to match other buttons */
    }
    
    .create-magic-button .button-text {
        font-size: 1.3rem; /* Specific request for mobile text size */
    }
    
    .hero h2 {
        font-size: 1.7rem;
    }
}

/* Mobile view (e.g., screens less than 768px wide) */
@media (max-width: 767px) {
    /* Hide the story meta line on mobile in the story list */
    /* Increase specificity by adding parent class */
    .story-item .story-item-meta {
        display: none;
    }

    /* Reduce star rating size */
    .star-rating {
        font-size: 0.8rem; /* Reduce font size to scale em-based icons */
        gap: 2px;          /* Reduce gap between stars */
    }

    /* Ensure story titles are single line with ellipsis on overflow */
    .story-item-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block; /* Make sure it behaves like a block */
        width: 100%;    /* Take full width of its container */
    }

    /* Allow the container of the title to shrink */
    .story-info {
         min-width: 0; /* Fix for flex item overflow */
    }

    /* Stack story content vertically on mobile */
    .story-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        /* Ensure this container can shrink too */
        min-width: 0;
    }

    /* Stack title and header elements vertically */
    .story-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%; /* Make header take full width */
    }

    /* ... other rules ... */

    /* Ensure story titles are single line with ellipsis on overflow */
    /* Apply nowrap/hidden to parent H3 to contain the link */
    .story-item-title {
        /* display: block; */ /* Let the child link handle block display */
        /* width: 100%; */   /* Let the child link handle width */
        overflow: hidden; /* Keep this on the container */
        white-space: nowrap; /* Keep this on the container */
        /* text-overflow: ellipsis; */ /* Move ellipsis to the link */
    }

    /* Apply overflow/ellipsis directly to the link inside the title */
    .story-item-title a {
        display: block; /* Make link block-level */
        width: 100%;    /* Allow link to take width */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ... other rules ... */

    /* Ensure story titles are single line with ellipsis */
    .story-item-title {
        white-space: nowrap;   /* Prevent wrapping */
        overflow: hidden;      /* Hide overflow */
        text-overflow: ellipsis; /* Show ellipsis */
        flex: 1;               /* Allow shrinking, minimal basis */
        min-width: 0;          /* Crucial for allowing shrinkage */
        /* Remove width: 100% if flex: 1 is used */
        /* width: 100%; */
        /* Remove block display if flex is used */
        /* display: block; */
    }

    /* Remove the rule for the link inside, let the H3 handle it */
    /* .story-item-title a { ... } */

    /* Ensure the parent flex containers can also shrink */
    .story-info {
         min-width: 0; 
    }
    .story-content-wrapper {
        min-width: 0;
        /* flex-direction, align-items, gap already set */
    }
    .story-header {
        /* width: 100%; */ /* Let flex control width */
        /* flex-direction, align-items, gap already set */
        /* Add display flex if not already set, though it seems to be */
        display: flex; 
        align-items: baseline; /* Align title and potential siblings */
        min-width: 0; /* Allow header itself to shrink if needed */
    }

    /* ... other rules ... */

    /* Show truncated title, hide full title on mobile */
    .title-full {
        display: none;
    }
    .title-truncated {
        display: inline; /* Or block */
        /* Ensure truncated title still handles potential visual overflow */
        /* (Though backend truncation should prevent this now) */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Remove previous complex rules for .story-item-title and its link, */
    /* as layout is simpler now with span toggling */
    .story-item-title {
       /* Remove flex: 1, min-width: 0, overflow, text-overflow etc. */
       /* Keep basic styling if any */
       margin: 0; /* Example reset */
    }
    /* Remove .story-item-title a { ... } rule entirely */

    /* Keep rules for .story-info, .story-content-wrapper, .story-header */
    /* ... */
}

/* --- Story List Title Display --- */

/* Default (Desktop) view: Show full title, hide truncated */
.story-item-title .title-truncated {
    display: none;
}
.story-item-title .title-full {
    display: inline; /* Or block if needed */
    white-space: normal; 
    overflow: visible;
    text-overflow: clip;
}

/* --- End Story List Title Display --- */

/* === Floating Action Button === */

/* Wrapper for horizontal positioning */
.fab-container {
    width: 100%;
    text-align: right; /* Align FAB to the right */
    height: 0; /* Prevent wrapper from taking up vertical space */
    /* Position relative might be needed if FAB uses absolute inside, but not for sticky */
}

/* FAB itself */
.fab {
    position: sticky; 
    top: 190px; /* Stick further down, below estimated header */
    display: inline-block; 
    vertical-align: top; 
    margin-right: 20px; 
    /* margin-top: 5px; */ /* Removed initial top margin */
    /* margin-bottom: 10px; */ /* Removed bottom margin */
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(5px); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    color: #fff;
    border-radius: 50%;
    display: inline-flex; /* Use inline-flex for centering content */
    align-items: center;
    justify-content: center;
    padding: 0; 
    font-size: 2.8rem; 
    font-weight: 300; 
    line-height: 1; 
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); 
    transition: all 0.3s ease;
    z-index: 999; 
}

.fab:hover {
    background-color: rgba(255, 255, 255, 0.3); 
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.08); 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); 
}
/* === End Floating Action Button === */

.text-right {
    text-align: right;
}

/* === Gallery Action Button === */
.gallery-actions {
    width: 100%; 
    margin-bottom: 15px; /* Space below button */
    margin-top: 5px; /* Space above button */
}

.button-add-story {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 10;
    overflow: hidden;
}

/* Style the image inside the button */
.button-add-story img {
    display: block;
    width: 40px; /* Fixed size rather than percentage */
    height: 40px;
    object-fit: contain;
}

.button-add-story:hover {
    /* Remove transform effects for minimalistic approach */
}
/* === End Gallery Action Button === */

/* ... rest of the CSS ... */

/* --------------- */
/* Modal Styles */
/* --------------- */

.modal {
    display: flex; /* Use flex for centering by default */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    /* Initially hidden, JS will toggle visibility */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.modal.modal-open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

/* Remove conflicting/redundant rule for inline style targeting */
/* .modal[style*="display: flex"] { ... } */

.modal-content {
    background-color: #fefefe;
    padding: 30px 40px;
    border: 1px solid #888;
    width: 90%;
    max-width: 450px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    text-align: center;
    margin: auto; /* Allows content to shrink/grow and stay centered in flex container */
    /* Remove absolute positioning as flex handles centering */
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-family: 'Magic School One', cursive; /* Use brand font if desired */
    color: #333;
    font-size: 1.5rem; /* Adjust as needed */
    text-shadow: none !important;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Tab Styles */
.modal-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
}

.tab-link {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    color: #000; /* Black text for tab links */
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* Overlap border-bottom */
    transition: color 0.3s ease, border-color 0.3s ease;
    text-shadow: none !important;
}

.tab-link.active {
    color: #000; /* Keep black text for active tab */
    border-bottom-color: var(--hover-color, #FFC368); /* Use hover color for active border */
}

.tab-link:hover:not(.active) {
    color: #333; /* Darker black on hover */
}

.tab-content {
    display: none; /* Hide inactive tabs */
}

.tab-content.active {
    display: block; /* Show active tab */
}

/* Styles for Forms loaded into Modal */
.modal-content .auth-form {
    margin-top: 20px;
}

.modal-content .form-label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #555;
}

.modal-content .form-control {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px; /* Space between fields */
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    font-size: 1rem;
}

.modal-content .form-control:focus {
    border-color: var(--hover-color, #FFC368);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 195, 104, 0.2);
}

.modal-content .form-group {
    margin-bottom: 20px; /* Consistent spacing */
}

.modal-content .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 0.9rem;
}

.modal-content .remember-me {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 0; /* Ensure no extra top margin */
}

.modal-content .remember-me label {
    margin-left: 0; /* Remove the left margin if it exists */
    margin-bottom: 0; /* Keep this to prevent bottom margin */
    color: #555;
}

.modal-content .checkbox {
    width: auto; /* Keep this to prevent the checkbox from stretching */
    margin-right: 0; /* Remove right margin if it exists */
}

.modal-content .forgot-password-link {
    color: #000; /* Black text for forgot password link */
    text-decoration: none;
}
.modal-content .forgot-password-link:hover {
    color: #333; /* Darker black on hover */
    text-decoration: underline;
}

.modal-content .btn-submit {
    width: 100%;
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 8px;
    background-color: var(--hover-color, #FFC368);
    color: #000;
    border: 1px solid var(--hover-color, #FFC368);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.modal-content .btn-submit:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255, 195, 104, 0.3);
}

.modal-content .modal-social-login .btn-google {
    display: flex; /* Align items horizontally */
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #555;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.modal-content .modal-social-login .btn-google:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    border-color: var(--hover-color, #FFC368);
}

.modal-content .modal-social-login .google-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.modal-content .modal-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 25px 0;
}

.modal-content .modal-divider::before,
.modal-content .modal-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #eee;
}

.modal-content .modal-divider span {
    padding: 0 15px;
    color: #333;
    font-weight: bold;
    font-size: 0.9rem;
}

.modal-content .error-messages {
    color: var(--error-color);
    font-size: 0.85rem;
    text-align: left;
    margin-top: -10px; /* Reduce space after field */
    margin-bottom: 10px;
}

.modal-content .error-messages span {
    display: block;
}

.modal-content .modal-links {
    margin-top: 20px;
    font-size: 0.9rem;
}
.modal-content .modal-links a {
    color: #fff; /* White text for modal links like 'Back to Login' */
    font-weight: bold;
    text-decoration: none;
}
.modal-content .modal-links a:hover {
    color: var(--hover-color, #FFC368); /* Use required hover color */
    text-decoration: underline;
}


/* Responsive Adjustments for Modal */
@media (max-width: 768px) {
    .modal-content {
        padding: 20px;
        width: 95%;
    }

    .modal-content h2 {
        font-size: 1.8rem; /* Slightly smaller for mobile */
        text-shadow: none !important;
    }

    .tab-link {
        font-size: 0.9rem;
        padding: 10px 15px;
        text-shadow: none !important;
    }

    .tab-link {
        padding: 8px 15px;
        font-size: 0.95rem;
    }
}

/* Ensure variables are defined if not already */
:root {
    --primary-color: #8e44ad; /* Example purple */
    --primary-color-rgb: 142, 68, 173;
    --error-color: #e74c3c; /* Example red */
    /* Define other colors if needed */
}

/* Make form group relative for icon positioning */
.modal-content .form-group.password-group {
    position: relative;
}

.modal-content .form-label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #555;
}

/* Adjust password input padding to make space for icon */
.modal-content .password-group .form-control {
    padding-right: 40px; /* Add space on the right */
}

.modal-content .form-control {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px; /* Space between fields */
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    font-size: 1rem;
}

.modal-content .form-control:focus {
    border-color: var(--hover-color, #FFC368);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 195, 104, 0.2);
}

/* Style the toggle icon */
.toggle-password {
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    height: 20px; /* Match the SVG height */
    display: flex;
    align-items: center;
    color: #888;
}

.toggle-password svg {
    display: block; /* Remove potential extra space below SVG */
    width: 20px; /* Control icon size */
    height: 20px;
    stroke: #888; /* Use stroke for SVG line color */
    fill: none; /* Ensure icons aren't filled unless intended */
}

.toggle-password:hover svg,
.toggle-password:focus svg {
    stroke: #333;
}

/* Remove old hover rule */
/* 
.toggle-password:hover {
    color: #333;
}
*/

.modal-content .form-group {
    margin-bottom: 10px; /* Consistent spacing */
}

/* Reduce space between password field and remember me checkbox */
.modal-content .form-group:last-of-type {
    margin-bottom: 5px; /* Make this even smaller for the last form group */
}

/* Remove relative positioning from password-group */
.modal-content .form-group.password-group {
    /* position: relative; */ /* Removed */
}

/* Add relative positioning to the input wrapper */
.modal-content .input-wrapper {
    position: relative;
}

.modal-content .form-label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #555;
}

/* Adjust password input padding to make space for icon */
.modal-content .password-group .form-control {
    padding-right: 40px; /* Add space on the right */
}

.modal-content .form-control {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 5px; /* Space between fields */
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    font-size: 1rem;
}

.modal-content .form-control:focus {
    border-color: var(--hover-color, #FFC368);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 195, 104, 0.2);
}

/* Style the toggle icon */
.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
}

/* Adjust top position slightly because the input has vertical padding/border */
.modal-content .input-wrapper .toggle-password {
    /* Fine-tune the top position relative to the input wrapper */
    /* 'top: 50%' positions the top edge of the button at 50% height of the wrapper */
    /* 'transform: translateY(-50%)' moves it up by 50% of its own height */
    /* This should center it well, but small adjustments might be needed based on input box-sizing/padding */
     top: calc(50% - 7px); /* Adjust '-7px' slightly if needed (half of input padding/border roughly) */
    /* If the above doesn't work well, revert to simple top: 50% and transform */
    /* top: 50%; */
    /* transform: translateY(-50%); */
}

.toggle-password svg {
    display: block; /* Remove potential extra space below SVG */
    width: 20px; /* Control icon size */
    height: 20px;
    stroke: #888; /* Use stroke for SVG line color */
    fill: none; /* Ensure icons aren't filled unless intended */
}

/* Special styles for logged-out index page */
.index-logged-out-special {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: 2rem 1rem;
    padding-bottom: max(2rem, env(safe-area-inset-bottom)); /* Account for safe area */
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
    max-height: 100vh;
    max-height: 100dvh; /* Dynamic viewport height for mobile browsers */
    margin-top: -1rem; /* Adjust for no header */
    overflow: hidden;
    /* Ensure content fits within available viewport */
    height: 100vh;
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); /* Account for browser UI */
}

.index-logged-out-special .index-main-title {
    font-family: 'Poppins', sans-serif; /* Changed to Poppins */
    font-size: 5rem;
    margin-bottom: 1rem;
    color: #fff;
    font-weight: 700; /* Make it bold for better impact */
    letter-spacing: -0.08em; /* Make letters almost touch */
}

.index-logged-out-special .index-tagline {
    font-family: 'Poppins', sans-serif; /* Explicitly set Poppins */
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
}

.index-logged-out-special .auth-buttons {
    margin-top: 1rem;
}

.index-logged-out-special .btn-get-started {
    padding: 1rem 2.5rem;
    font-size: 1.25rem;
}

@media (max-width: 768px) {
    .index-logged-out-special {
        padding: 3rem 1rem;
    }
    .index-logged-out-special .index-main-title {
        font-size: 3.5rem;
        letter-spacing: -0.08em; /* Make letters almost touch on mobile too */
    }
    .index-logged-out-special .index-tagline {
        font-size: 1.25rem;
    }
    .index-logged-out-special .btn-get-started {
        padding: 0.75rem 2rem;
        font-size: 1.1rem;
    }
}

/* Ensure the main nav is truly hidden when page_header_content is empty */
/* This might not be strictly necessary if the block override works perfectly */
/* but can be a safeguard */
body:has(.index-logged-out-special) header nav.main-nav {
    /* display: none; */ /* Consider if needed, block override should suffice */
}

/* New styles for the dropdown sections container */
.dropdown-sections-container {
    position: relative; /* Needed for absolute positioning of the randomize button */
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    /* background-color: rgba(255, 255, 255, 0.03); */
}

.btn-randomize {
    position: absolute;
    top: 10px; /* Adjust as needed */
    right: 15px; /* Adjust as needed */
    padding: 6px 12px;
    font-size: 0.85rem;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10; /* Ensure it's above other elements in the container if any overlap */
}

.btn-randomize:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

/* Keyframes for Button Effects */
@keyframes pulse {
    0% {
        box-shadow: 0 0 15px rgba(255, 195, 104, 0.4), 0 0 8px rgba(255, 195, 104, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 195, 104, 0.7), 0 0 15px rgba(255, 195, 104, 0.5);
    }
    100% {
        box-shadow: 0 0 15px rgba(255, 195, 104, 0.4), 0 0 8px rgba(255, 195, 104, 0.3);
    }
}

/* Media Query for mobile adjustments to randomize button */
@media (max-width: 768px) {
    .dropdown-sections-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center children, including the button */
        padding-top: 20px; /* Add some padding at the top if button is first */
    }

    .btn-randomize {
        position: static; /* Override absolute positioning */
        /* top, right, z-index are not needed or overridden by static */
        margin-bottom: 20px; /* Space below the button, before the first label */
        width: fit-content; /* Button width as per its content */
        order: -1; /* Ensures button is visually at the top if HTML order changes */
    }

    /* Reduce font size for labels within the dropdown sections container on mobile */
    .dropdown-sections-container .form-group label {
        font-size: 0.85rem; /* Further adjusted from 1rem */
        /* white-space: nowrap; /* Optional: if text still wraps, but might cause overflow */
        /* text-align: center; /* Optional: if labels should also be centered */
    }

    /* Reduce font size for the dropdowns themselves within the container on mobile */
    .dropdown-sections-container .form-control {
        font-size: 0.85rem; /* Adjust as needed */
        padding-top: 8px; /* Adjust padding to keep them looking okay */
        padding-bottom: 8px;
    }
}

/* NEW: Age Card Selection Styles */
.age-selector-2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px; /* Maintained from user suggestion */
    max-width: 800px; /* Maintained from user suggestion */
    margin: 20px auto; /* Maintained from user suggestion */
}

.age-selector-2 .age-card {
    background-color: var(--bg-color-translucent, rgba(255, 255, 255, 0.1)); /* Use translucent background */
    border: 1px solid var(--border-color-light, rgba(255, 255, 255, 0.3)); /* Use light border */
    border-radius: var(--border-radius-large, 15px); /* Use existing large border radius */
    padding: 15px; /* UPDATED from 20px */
    width: 150px; /* UPDATED from 170px */
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px); /* Add blur effect consistent with other elements */
    color: var(--text-color, #fff); /* Ensure text is white */
}

.age-selector-2 .age-card:hover {
    border-color: var(--hover-color, #FFC368); /* Use main color */
    background-color: rgba(255, 195, 104, 0.1); /* Light main color background */
    /* Remove transform effects for minimalistic approach */
}

.age-selector-2 .age-card.selected {
    background-color: var(--hover-color, #FFC368); /* Main color background */
    border-color: var(--hover-color, #FFC368); /* Main color border */
    /* Remove glow and scale effects */
    font-weight: 600;
    color: #000; /* Black text for contrast on golden background */
}

.age-selector-2 .age-card.selected h3 {
    color: #000; /* Ensure heading is black when selected */
}

.age-selector-2 .age-card.selected p {
    color: #000; /* Ensure paragraph text is black when selected */
}

.age-selector-2 .emoji-container {
    font-size: 2.5rem; /* UPDATED from 2.8rem */
    margin-bottom: 10px; /* UPDATED from 12px */
}

.age-selector-2 .age-card h3 {
    margin: 0 0 6px 0; /* UPDATED from 8px bottom margin */
    color: #fff; /* Ensure heading is white */
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem; /* UPDATED from 1.2rem */
    font-weight: 500;
}

.age-selector-2 .age-card p {
    margin: 0;
    color: var(--text-color-light, rgba(255, 255, 255, 0.8)); /* Use light text color */
    font-size: 0.85rem; /* UPDATED from 0.9rem */
    font-family: 'Poppins', var(--font-family);
}

/* Responsive adjustments for age cards */
@media (max-width: 768px) {
    .age-selector-2 {
        gap: 10px; /* UPDATED from 15px */
    }
    .age-selector-2 .age-card {
        width: 115px; /* UPDATED from 140px */
        padding: 10px; /* UPDATED from 15px */
    }
    .age-selector-2 .emoji-container {
        font-size: 2rem; /* UPDATED from 2.5rem */
        margin-bottom: 8px; /* UPDATED to reduce space */
    }
    .age-selector-2 .age-card h3 {
        font-size: 0.95rem; /* UPDATED from 1.1rem */
        margin-bottom: 4px; /* UPDATED to reduce space */
        color: #fff;
    }
    .age-selector-2 .age-card p {
        font-size: 0.75rem; /* UPDATED from 0.85rem */
    }
}

@media (max-width: 480px) {
    .age-selector-2 .age-card {
        width: calc(50% - 5px); /* UPDATED from calc(50% - 10px) to pair with 10px gap */
        /* Other styles like padding and font sizes will be inherited from the 768px media query,
           resulting in smaller cards in a 2x2 layout. If further reduction is needed here, add it explicitly */
    }
}

/* NEW: Generic Card Selector Styles (for Pronouns, Length, Language) */
.card-selector-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px; /* Increased gap slightly for better separation if cards are wider */
    margin: 20px auto;
}

.selector-card { /* This is for Pronoun, Length, Language cards */
    background-color: var(--bg-color-translucent, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--border-color-light, rgba(255, 255, 255, 0.3));
    border-radius: var(--border-radius-large, 15px); /* Consistent with age-card */
    padding: 20px; /* More padding to feel like a card */
    width: 150px;  /* Making them similar width to age-cards */
    min-height: 80px; /* Ensuring a card-like height */
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    color: var(--text-color, #fff);
    display: flex; 
    flex-direction: column; /* Ensure h3 is centered properly if text wraps (it shouldn't here) */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.selector-card h3 {
    margin: 0;
    color: #fff;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem; /* Slightly larger to be more prominent in the card */
    font-weight: 500;
    line-height: 1.3;
}

.selector-card:hover {
    border-color: var(--hover-color, #FFC368); /* Use main color */
    background-color: rgba(255, 195, 104, 0.1); /* Light main color background */
    /* Remove transform effects for minimalistic approach */
    /* Remove glow effects */
}

.selector-card.selected {
    background-color: var(--hover-color, #FFC368); /* Main color background */
    border-color: var(--hover-color, #FFC368); /* Main color border */
    /* Remove glow and scale effects */
    color: #000; /* Black text for contrast on golden background */
}

.selector-card.selected h3 {
    font-weight: 600; /* Make text bolder when selected */
    color: #000; /* Ensure black text */
}


/* Responsive adjustments for generic selector cards */
@media (max-width: 768px) {
    .card-selector-row {
        gap: 10px;
    }
    .selector-card {
        padding: 15px;
        width: 120px; 
        min-height: 70px; 
    }
    .selector-card h3 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    /* For 2 items (Language, Length) allow them to be wider */
    .language-selector-cards .selector-card,
    .length-selector-cards .selector-card {
        width: calc(50% - 5px); /* 2 cards per row with 10px gap */
        padding: 12px;
        min-height: 60px;
    }
    .language-selector-cards .selector-card h3,
    .length-selector-cards .selector-card h3 {
        font-size: 0.9rem;
    }

    /* For 3 items (Pronouns), make them fit, might be tight */
    .pronoun-selector-cards .selector-card {
        width: calc(33.333% - 7px); /* Approx 3 cards with 10px gap (gap is 2*10/3 ~ 6.6px effective) */
        padding: 10px 5px; /* Reduce padding if very small */
        min-height: 50px;
    }
    .pronoun-selector-cards .selector-card h3 {
        font-size: 0.8rem;
    }
}

/* Style for the active language selector card on the create page */
.language-selector-cards .selector-card.active {
    border-color: var(--hover-color, #FFC368); /* Use main color */
    background-color: var(--hover-color, #FFC368); /* Main color background */
    color: #000; /* Black text for contrast */
}

/* General active state for other selector cards if not already defined elsewhere */
/* If you have a more generic .selector-card.active, ensure it doesn't conflict */
/* or make the language one more specific if needed. */

.badge.bg-secondary {
    color: white;
  }

/* Added Breadcrumb CSS */
.breadcrumb-nav {
    padding-bottom: 20px;
    margin-bottom: 0rem;
    position: relative;
    z-index: 2100; /* Higher than age-filter-float z-index (2000) to ensure clickability */
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0; 
    margin-left: 17px; 
    list-style: none;
}

.breadcrumb-item {
    display: flex; 
    align-items: center;
    /* Add emoji fonts to the end of the stack */
    font-family: 'Poppins', var(--font-family), 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7) !important; /* Faded white for inactive items */
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.breadcrumb-item a:hover {
    color: var(--hover-color, #FFC368) !important; /* Main color for hover */
    text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: rgba(255, 255, 255, 0.5); /* Lighter separator color */
    content: "•"; /* Use dot character */
    /* Remove emoji-specific sizing and alignment if not needed */
    /* font-size: 0.8em; */ 
    /* vertical-align: middle; */
}

.breadcrumb-item.active {
    color: #fff !important; /* Bold white for the active item (current page) */
    font-weight: 600; /* Make active item slightly bolder */
}

/* Responsive Breadcrumbs */
@media (max-width: 768px) { 
    .breadcrumb-item,
    .breadcrumb-item a,
    .breadcrumb-item.active {
        font-size: 0.85rem; /* Slightly smaller font */
    }

    .breadcrumb-item + .breadcrumb-item::before {
        padding-right: 0.3rem; /* Reduce separator padding */
        padding-left: 0.3rem;
        /* font-size: 0.7em; Remove emoji size */
    }
}

@media (max-width: 480px) { 
     .breadcrumb-item,
    .breadcrumb-item a,
    .breadcrumb-item.active {
        font-size: 0.75rem; /* Even smaller font */
    }
     .breadcrumb-item + .breadcrumb-item::before {
        padding-right: 0.25rem; /* Further reduce separator padding */
        padding-left: 0.25rem;
        /* font-size: 0.65em; Remove emoji size */
    }
}
/* End Added Breadcrumb CSS */

/* ... existing breadcrumb styles ... */

/* Default style: Hide icon, show text */
.breadcrumb-home-icon {
    display: none;
}
.breadcrumb-home-text {
    display: inline; /* Or inline-block */
}

/* Responsive Breadcrumbs */
@media (max-width: 768px) { 
    /* Hide text, show icon */
    .breadcrumb-home-text {
        display: none;
    }
    .breadcrumb-home-icon {
        display: inline-block; /* Show the icon */
        font-size: 1.3em; /* Make emoji slightly larger than surrounding text */
        margin-right: 0.1em; /* Optional: small space if needed */
        vertical-align: middle; /* Align icon better */
    }

    .breadcrumb-item,
    .breadcrumb-item a,
    .breadcrumb-item.active {
        font-size: 0.85rem; /* Slightly smaller font */
    }

    .breadcrumb-item + .breadcrumb-item::before {
        padding-right: 0.3rem; /* Reduce separator padding */
        padding-left: 0.3rem;
        /* font-size: 0.7em; Remove emoji size */
    }
}

@media (max-width: 480px) { 
     .breadcrumb-item,
    .breadcrumb-item a,
    .breadcrumb-item.active {
        font-size: 0.75rem; /* Even smaller font */
    }
     .breadcrumb-item + .breadcrumb-item::before {
        padding-right: 0.25rem; /* Further reduce separator padding */
        padding-left: 0.25rem;
        /* font-size: 0.65em; Remove emoji size */
    }
}

/* Header Action Logout Icon */
.header-action-logout {
    position: absolute;
    top: 20px; /* Adjust as needed for vertical alignment */
    right: 20px; /* Adjust as needed for horizontal alignment */
    color: #fff; /* White icon */
    font-size: 1.8rem; /* Adjust size to be visually appropriate */
    text-decoration: none;
    padding: 8px; /* Padding to make the clickable area larger */
    border-radius: 50%; /* Circular background */
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background to match nav style */
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 1050; /* Ensure it's above other header elements if necessary */
}

.header-action-logout:hover {
    background-color: rgba(255, 255, 255, 0.25); /* Slightly more visible on hover */
    color: #f39c12; /* Accent color on hover - secondary color */
}

/* Adjustments for smaller screens if the header layout changes significantly */
@media (max-width: 768px) {
    .header-action-logout {
        top: 15px; /* Adjust for potentially smaller header on mobile */
        right: 15px;
        font-size: 1.6rem;
        padding: 6px;
    }
}

/* User Avatar Icon & Dropdown Menu */
.header-action-menu {
    position: absolute;
    top: 35px; /* Adjust as needed */
    right: 20px; /* Adjust as needed */
    z-index: 1050;
}

.header-action-trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar-icon {
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    transition: border-color 0.3s ease;
}

.header-action-trigger:hover .user-avatar-icon,
.header-action-trigger:focus .user-avatar-icon {
    border-color: rgba(255, 255, 255, 0.7);
}

.profile-dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: calc(100% + 10px); /* Position below the icon with a small gap */
    right: 0;
    background-color: rgba(30, 50, 80, 0.95); /* Dark, slightly transparent background */
    backdrop-filter: blur(8px);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    min-width: 180px;
    z-index: 1051; /* Ensure it's above other header elements */
    overflow: hidden; /* Ensure border-radius is respected by children */
}

.profile-dropdown-menu.show {
    display: block;
}

.profile-dropdown-menu .dropdown-item {
    display: block;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.profile-dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Adjustments for smaller screens for the new menu */
@media (max-width: 768px) {
    .header-action-menu {
        top: 22px;
        right: 10px;
    }
    .user-avatar-icon {
        width: 24px;
        height: 24px;
    }
    .profile-dropdown-menu {
        min-width: 160px;
    }
    .profile-dropdown-menu .dropdown-item {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
}

/* --- Home Dashboard Carousel Styles --- */
.home-dashboard-container {
    padding-top: 10px; /* Add some space below header */
}

.story-carousel-section {
    margin-bottom: 10px; /* Space between carousels */
}

.carousel-section-title {
    font-size: 1.5rem; 
    font-weight: 550;
    margin-left: 16px;
    margin-bottom: 5px;
    /* Remove glow effect - text-shadow: 0 0 10px rgba(255, 255, 255, 0.4); */
}

.carousel-section-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.carousel-section-title a:hover {
    color: var(--hover-color, #FFC368); /* Changed to main color */
}

.story-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center; /* Vertically center arrows with container */
}

.story-carousel-container {
    flex-grow: 1; /* Take available space */
    overflow-x: auto; /* Changed from 'hidden' to 'auto' to allow visible scrollbar */
    margin: 0 5px; /* Small space between container and arrows */
    /* width: 1125px; */ /* REMOVED - Width for 4 cards + 3 gaps */
    max-width: 100%; /* Ensure it doesn't overflow its wrapper */
    /* scroll-behavior: smooth; */ /* REMOVED - This kills momentum scrolling */
    touch-action: auto; /* Allow both horizontal and vertical touch interactions */
    -webkit-overflow-scrolling: touch; /* Better momentum scrolling on iOS */
}

.story-carousel {
    display: flex;
    gap: 40px; /* Increased space between cards from 15px to 40px */
    padding: 4px 0; /* Vertical padding for visual spacing */
    /* scroll-behavior: smooth; */ /* REMOVED - Prevents momentum scrolling */
    /* Enable snapping (optional, might need browser prefixes) */
    /* scroll-snap-type: x mandatory; */ 
    /* overflow-x: auto; */ /* Use JS for scrolling, hide scrollbar */
}

.story-card-carousel {
    flex: 0 0 auto; /* Prevent cards from shrinking/growing */
    width: 380px; /* Increased width */
    aspect-ratio: 1 / 1; /* Make cards square */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    background-color: rgba(255, 255, 255, 0.05); /* Slight background for placeholders */
    /* scroll-snap-align: start; */ /* Optional for snapping */
}

.story-card-carousel a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-story-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.75    );
    color: white;
    /* padding: 8px 5px; /* REMOVED - Handled by flex children or direct padding */
    font-size: 0.8em;
    /* text-align: center; /* REMOVED - Text wrapper will handle alignment */
    box-sizing: border-box;
    opacity: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    
    /* Add these properties for text truncation - MOVED to wrapper */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */

    display: flex; /* ADDED */
    justify-content: space-between; /* ADDED */
    align-items: center; /* ADDED */
    padding: 8px 10px; /* ADDED: Universal padding for banner content */
}

/* NEW: Wrapper for the story title text to handle ellipsis */
.story-title-text-wrapper {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* Allow text to take available space */
    text-align: left; /* Align text to the left */
    margin-right: 8px; /* Space between text and heart */
}

/* NEW: Container for the favorite (heart) icon */
.carousel-story-favorite {
    flex-shrink: 0; /* Prevent heart from shrinking */
    cursor: pointer;
    display: flex;
    align-items: center;
}

.carousel-story-favorite .heart-icon {
    width: 18px; /* Adjust size as needed */
    height: 18px; /* Adjust size as needed */
    transition: transform 0.2s ease, fill 0.2s ease; /* Added fill transition */
}

.carousel-story-favorite:hover .heart-icon {
    transform: scale(1.15); /* Slightly larger hover effect */
}

/* Styles for empty and filled heart states */
.carousel-story-favorite .heart-icon-empty {
    stroke: white; /* Outline color */
    fill: none;
    display: block; /* Show by default */
}

.carousel-story-favorite .heart-icon-filled {
    fill: white; /* Default fill color (when not favorited but filled state is forced by JS perhaps) */
    display: none; /* Hide by default */
}

.carousel-story-favorite.is-favorited .heart-icon-empty {
    display: none; /* Hide empty heart when favorited */
}

.carousel-story-favorite.is-favorited .heart-icon-filled {
    display: block; /* Show filled heart when favorited */
    fill: #ff6b6b; /* Red color for favorited heart */
}

/* If your images have rounded corners at the top, you might want to match them */
.story-card-carousel img + .carousel-story-title {
    /* Assuming your images have a certain border-radius */
}

/* Ensure the placeholder also respects this styling if you want consistency */
.carousel-placeholder-image + .carousel-story-title {
}

.story-card-carousel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-card-carousel:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.carousel-placeholder-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: transparent; /* Changed from rgba(255, 255, 255, 0.1) */
    border: 2px solid var(--hover-color, #FFC368); /* Use main color for solid border */
    border-radius: 0.25rem;
    font-size: 3rem;
    color: var(--hover-color, #FFC368); /* Use main color */
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.carousel-nav-arrow {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Prevent arrows from shrinking */
    z-index: 5;
    line-height: 1; /* Ensure icon centers */
}

.carousel-nav-arrow:hover {
    background: rgba(255, 255, 255, 0.25);
}

.carousel-nav-arrow.prev {
    /* Position adjustment if needed, handled by flexbox */
}

.carousel-nav-arrow.next {
    /* Position adjustment if needed, handled by flexbox */
}

.carousel-empty-message {
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    padding: 20px;
    text-align: center;
    width: 100%; /* Take full width if carousel is empty */
}

.carousel-empty-message a {
    color: #fff; /* White text */
    text-decoration: underline;
    transition: color 0.3s ease;
}

.carousel-empty-message a:hover {
    color: var(--hover-color, #FFC368); /* Hover to main color */
}

.bottom-create-button {
    margin-top: 20px; /* Space above the bottom button */
    text-align: center; /* Center the button */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .story-card-carousel {
        width: 210px; /* Increased width */
    }
    .carousel-section-title {
        font-size: 1.8rem;
    }
    .carousel-nav-arrow {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }
    .story-carousel {
        gap: 10px; /* Reduce gap */
    }
}

@media (max-width: 415px) {
    .story-card-carousel {
        width: 160px; /* Existing style, kept */
    }
    .carousel-section-title {
        font-size: 1.0rem; /* Existing style, kept */
        text-align: left; /* Existing style, kept */
    }

    .hero-slogan {
        display: none; /* Existing style, kept */
    }

    .create-new-story-button {
        font-size: 1.5rem; /* My desired value */
        padding: 20px 25px; /* My desired value */
        margin-top: 20px;
        margin-bottom: 0px; /* Existing style, kept */
        display: block; /* Existing style, kept */
        width: auto; /* My desired value */
        text-align: center; /* Existing style, kept */
        max-width: none; /* My desired value: Remove max-width constraint */
    }

    .hero-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .hero-section {
        padding: 00px 0 5px 0;
    }
}

/* --- End Home Dashboard Carousel Styles --- */

/* Add styles for drag behavior */
.story-carousel-container.is-dragging {
    cursor: grabbing;
    user-select: none; /* Prevent text selection during drag */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    scroll-behavior: auto; /* Use instant scroll during drag */
}

.story-carousel-container {
    /* Default cursor */
    cursor: grab;
}

.carousel-empty-message a {
    color: #fff; /* White text */
    text-decoration: underline;
    transition: color 0.3s ease;
}

.carousel-empty-message a:hover {
    color: var(--hover-color, #FFC368); /* Hover to main color */
}

/* --- Horizontal Scrollbar Styling --- */
.story-carousel-container::-webkit-scrollbar {
    height: 6px; /* Thin scrollbar */
    background: transparent; /* Transparent background */
}

.story-carousel-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    border-radius: 6px; /* Rounded corners */
}

.story-carousel-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Slightly more visible on hover */
}

/* For Firefox */
.story-carousel-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Ensure scrollbar is always visible but subtle */
.story-carousel-container {
    -ms-overflow-style: -ms-autohiding-scrollbar; /* For Edge/IE */
}

/* Extra Small Screens (350-480px) */
@media (max-width: 480px) {
    .modal-content {
        padding: 15px;
        width: 90%;
        max-width: 330px; /* Limit maximum width on small screens */
        margin: auto; /* Ensure it stays centered in flex container */
        max-height: 90vh; /* Set maximum height */
        overflow-y: auto; /* Allow scrolling if content is too tall */
        /* Remove absolute positioning properties as flex handles centering */
        /* top: 50%; */
        /* left: 50%; */
        /* transform: translate(-50%, -50%); */
    }
    
    .modal-content h2 {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    
    .close-button {
        top: 5px;
        right: 10px;
        font-size: 24px;
    }
    
    .modal-tabs {
        margin-bottom: 15px;
    }
    
    .tab-link {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
    
    .modal-content .form-label {
        font-size: 0.8rem;
        margin-bottom: 3px;
    }
    
    .modal-content .form-control {
        padding: 8px 10px;
        margin-bottom: 10px;
        font-size: 0.9rem;
    }
    
    .modal-content .form-group {
        margin-bottom: 10px;
    }
    
    .modal-content .form-options {
        margin-bottom: 15px;
        font-size: 0.8rem;
    }
    
    .modal-content .remember-me label {
        font-size: 0.8rem;
    }
    
    .modal-content .forgot-password-link {
        font-size: 0.8rem;
    }
    
    .modal-content .btn-submit {
        padding: 8px 15px;
        font-size: 0.95rem;
    }
    
    .modal-content .modal-social-login .btn-google {
        padding: 8px;
        font-size: 0.9rem;
    }
    
    .modal-content .modal-social-login .google-icon {
        width: 18px;
        height: 18px;
    }
    
    .modal-content .modal-divider {
        margin: 15px 0;
    }
    
    .modal-content .modal-divider span {
        padding: 0 10px;
        font-size: 0.8rem;
    }
    
    .modal-content .error-messages {
        font-size: 0.75rem;
        margin-top: -8px;
        margin-bottom: 8px;
    }
    
    .modal-content .modal-links {
        margin-top: 15px;
        font-size: 0.8rem;
    }

    /* Ensure password toggle is properly positioned */
    .modal-content .input-wrapper .toggle-password {
        top: calc(50% - 5px);
    }
    
    .toggle-password svg {
        width: 16px;
        height: 16px;
    }
}

/* Any global styles for 'nav ul' or 'nav a' should be checked for conflicts, */
/* but the more specific '.main-nav ul.nav-links' and '.main-nav a.nav-item' should take precedence. */

/* Remove or disable old mobile navigation styles that slide from the left */
/* These were typically inside @media (max-width: 1000px) or similar */
/* For example, the old .main-nav ul (when it was a mobile menu) */
@media (max-width: 1000px) {
    /* The following rules targeted the old left-slide menu. We are replacing this functionality. */
    /* header .nav-toggle { display: none; } */ /* This was already changed to make it always visible */
    
    /* Old mobile nav list that slid from left - disable its transform/visibility/opacity based transitions */
    .main-nav ul.nav-links { /* This selector was used by desktop, but also for old mobile if #mainNavDesktop was #mainNav */
        /* If this selector still targets the desktop nav items container, ensure these mobile-specific overrides don't break desktop */
        /* Desktop .main-nav ul.nav-links should have 'display: flex', 'flex-direction: row' etc. from earlier styles */
        /* Forcing these values for mobile here might be problematic if selector is too broad */
    }

    nav#mainNavDesktop ul#navLinksDesktop {
        /* This is the specific desktop nav. No mobile-specific overrides should apply here. */
        /* It should remain display:flex, row, etc. as per its non-media-queried rules */
    }

    /* If there was a specific mobile menu container (e.g. #mainNav that wasn't #mainNavDesktop) */
    /* ensure its styles are fully disabled or overridden */
    nav#mainNav:not(#mainNavDesktop) ul, /* Example of targeting an old mobile-only nav if it had a different ID */
    header .main-nav ul:not(#navLinksDesktop) { /* Another way to target an old mobile menu if structure differed */
        display: none !important; /* Forcefully hide any old mobile menu structures */
        transform: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* New Slide-Out Menu from Right */
.slide-out-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px; /* Adjust width as needed */
    max-width: 80%; /* Max width for smaller screens */
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    background-color: #111827; /* Match header background exactly */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1200; /* Above header and other content */
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Allow scrolling if content is too long */
    /* Handle safe areas for mobile browsers */
    padding-bottom: env(safe-area-inset-bottom);
}

.slide-out-menu.active {
    transform: translateX(0);
}

.slide-out-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #111827; /* Match header background */
    color: #fff;
    font-weight: 500;
    font-size: 1.1rem;
    border-bottom: 1px solid #374151; /* Tailwind gray-700 for separator */
}

.slide-out-menu-header span {
    font-family: 'Poppins', var(--font-family);
}

.close-menu-btn {
    background: none;
    border: none;
    color: #9CA3AF; /* Tailwind gray-400 */
    font-size: 2rem;
    line-height: 1;
    padding: 5px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-menu-btn:hover {
    color: #fff;
}

.slide-out-menu-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Ensure content doesn't get cut off by browser UI */
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.slide-out-menu-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.slide-out-menu-nav li {
    border-bottom: 1px solid #374151; /* Tailwind gray-700 */
}

.slide-out-menu-nav li a {
    display: block;
    padding: 15px 20px;
    color: #D1D5DB; /* Tailwind gray-300 */
    text-decoration: none;
    font-size: 1rem;
    font-family: 'Poppins', var(--font-family);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.slide-out-menu-nav li a:hover {
    background-color: #374151; /* Tailwind gray-700 */
    color: #fff;
}

/* Spacer to push bottom items to the end */
.menu-spacer {
    flex: 1;
    min-height: 20px;
    background-color: transparent;
    border-bottom: none !important;
}

/* Bottom items styling */
.menu-bottom-item {
    border-top: 1px solid #374151; /* Add top border to create separation */
}

.menu-bottom-item:last-child {
    border-bottom: none;
}

/* Optional: Body class when menu is open to prevent scrolling or add overlay */
body.slide-menu-open {
    overflow: hidden; /* Prevent background scroll */
}

/* Overlay for when menu is open */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1199; /* Below menu, above content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* Responsive header adjustments for smaller screens */
@media (max-width: 768px) {
    header {
        padding: 12px 0; /* REDUCED BY 20%: from 15px to 12px vertical padding */
        min-height: 48px; /* REDUCED BY 20%: from 60px to 48px minimum height */
    }
    
    header > .container {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    header h1 {
        font-size: 1.6rem; /* REDUCED: made the font smaller for better proportion on mobile */
        margin: 0;
    }
    
    .header-logo-svg {
        height: 56px; /* Smaller on mobile */
        max-width: 280px;
    }
    
    .header-container-flex {
        position: relative;
        justify-content: center; /* Center the logo */
        min-height: 32px; /* REDUCED BY 20%: from 40px to 32px minimum height */
    }
    
    .header-logo-link {
        position: absolute;
        left: 50%;
        transform: translateX(-50%); /* Center horizontally */
    }
    
    .header-right-items {
        position: absolute;
        right: 0px; /* Keep menu on right with some padding */
    }
    
    .main-nav {
        display: none; /* Hide desktop navigation */
    }
}

@media (max-width: 415px) {
    .story-card-carousel {
        width: 160px; /* Existing style, kept */
    }
    .carousel-section-title {
        font-size: 1.0rem; /* Existing style, kept */
        text-align: left; /* Existing style, kept */
    }

    .hero-slogan {
        display: none; /* Existing style, kept */
    }

    .create-new-story-button {
        font-size: 1.5rem; /* My desired value */
        padding: 20px 25px; /* My desired value */
        margin: 20px 0px; /* Existing style, kept */
        display: block; /* Existing style, kept */
        width: auto; /* My desired value */
        text-align: center; /* Existing style, kept */
        max-width: none; /* My desired value: Remove max-width constraint */
    }

    .hero-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .hero-section {
        padding: 00px 0 5px 0;
    }
    .slide-out-menu-nav li a {
        font-size: 0.7rem;
    }
}

@media (min-width: 769px) and (max-width: 1165px) {
    .create-new-story-button {
        font-size: 1.5rem;
        padding: 10px 18px;
        min-width: 120px;
    }
}

/* Admin Delete Button Styles */
.button-delete-public-story {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background-color: rgba(220, 53, 69, 0.7); /* Reddish color for admin delete button */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 0;
    display: flex; 
    align-items: center;
    justify-content: center;
    z-index: 15; /* Ensure it's above banner */
    opacity: 0; /* Hidden by default, shown on hover */
    visibility: visible;
    transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

/* Enhance visibility on hover */
.story-card-carousel:hover .button-delete-public-story {
    opacity: 0.8; /* Show on hover */
}

.button-delete-public-story:hover {
    opacity: 1; /* Full opacity on direct hover */
    transform: translate(-50%, -50%) scale(1.05);
}

/* NEW Styles for Average Rating Display */
.average-rating-display {
    position: absolute;
    top: 8px; 
    left: 8px; 
    margin: 0; /* Ensure no external margins */
    padding: 3px 7px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #FFD700; /* Gold color */
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    z-index: 5; /* Same as age circles */
    line-height: 1; /* Ensure tight line height */
    display: inline-flex; /* Align star and number */
    align-items: center;
    box-sizing: border-box; /* Ensure padding doesn't offset */
    pointer-events: none; /* Allow clicks to pass through to the story card */
}

.average-rating-display span {
    /* Style star/emoji if needed */
    margin-right: 3px;
}

/* Duration label styling */
.story-duration-label {
    position: absolute;
    top: 16px;
    z-index: 5;
    margin: 0;
    padding: 9px 13px; /* Increased to 9px to match "Nuevo" label height exactly */
    background-color: rgba(51, 51, 51, 0.8); /* Same blue as favorite icon with opacity */
    color: white;
    border-radius: 16px;
    font-size: 0.7em;
    font-weight: 600;
    line-height: 1.1; /* Slightly increased from 1 to 1.1 for better vertical spacing */
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    pointer-events: none;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* Prevent text wrapping */
}

/* When "New" tag is present, position duration to its right */
.story-duration-label.with-new-tag {
    left: 82px; /* Middle position between "New" tag and favorite icon for proper spacing */
}

/* When "New" tag is not present, position duration in top-left corner */
.story-duration-label.without-new-tag {
    left: 12px; /* Same position as "New" tag would be */
}

.gallery-item-title-banner {
    position: absolute; 
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px; 
    font-size: 0.9em;
    /* text-align: center; /* Replaced by flex properties */
    opacity: 1;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* overflow: hidden; /* Removed to allow flex items to align */
    z-index: 2;
    display: flex; /* ADDED */
    justify-content: space-between; /* ADDED */
    align-items: center; /* ADDED */
}

.gallery-item-title-banner .banner-story-title {
    display: block; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* margin-bottom: 2px; /* Removed, flex handles spacing */
    /* width: 100%; /* Flex item will size itself */
    /* text-align: center; /* Flex item will size itself */
    text-align: left; /* Align title to the left */
    flex-grow: 1; /* Allow title to take available space */
    margin-right: 8px; /* Space between title and stars/heart */
}

.gallery-item-title-banner .banner-story-morale {
    display: block; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8em; 
    opacity: 0.85;    
    margin-top: 1px;  
    width: 100%;      
    text-align: center;
    color: #f0f0f0; 
}

.gallery-item-title-banner .public-story-rating {
    /* ... existing code ... */
}

.index-logged-out-special .btn-get-started {
    font-family: 'Poppins', sans-serif; /* Explicitly set Poppins */
    padding: 1rem 2.5rem;
    font-size: 1.25rem;
    max-width: 300px; /* Limit button width on desktop */
    width: auto; /* Allow button to size to content up to max-width */
}

.custom-value input:focus {
    outline: none;
    border-color: var(--hover-color, #FFC368);
    box-shadow: 0 0 8px rgba(255, 195, 104, 0.3);
}

.custom-learning input:focus {
    outline: none;
    border-color: var(--hover-color, #FFC368);
    box-shadow: 0 0 8px rgba(255, 195, 104, 0.3);
}

/* Add hover state for carousel placeholder to match gallery styling */
.story-card-carousel:hover .carousel-placeholder-image {
    background-color: rgba(255, 195, 104, 0.3); /* Transparent main color on hover */
    color: var(--hover-color, #FFC368); /* Full main color text */
}

/* SVG Logo Styles */
.hero-logo-svg {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin-bottom: 2rem;
    transition: transform 0.3s ease;
}

.index-logged-out-special .index-main-title {
    font-family: 'Poppins', sans-serif; /* Changed to Poppins */
    font-size: 5rem;
    margin-bottom: 1rem;
    color: #fff;
    font-weight: 700; /* Make it bold for better impact */
    letter-spacing: -0.08em; /* Make letters almost touch */
}

.index-logged-out-special .index-tagline {
    font-family: 'Poppins', sans-serif; /* Explicitly set Poppins */
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
}

.index-logged-out-special .auth-buttons {
    margin-top: 1rem;
}

.index-logged-out-special .btn-get-started {
    padding: 1rem 2.5rem;
    font-size: 1.25rem;
}

@media (max-width: 768px) {
    .index-logged-out-special {
        padding: 3rem 1rem;
    }
    
    .hero-logo-svg {
        max-width: 90%;
        margin-bottom: 1.5rem;
    }
    
    .index-logged-out-special .index-main-title {
        font-size: 3.5rem;
        letter-spacing: -0.08em; /* Make letters almost touch on mobile too */
    }
    .index-logged-out-special .index-tagline {
        font-size: 1.25rem;
    }
    .index-logged-out-special .btn-get-started {
        padding: 0.75rem 2rem;
        font-size: 1.1rem;
    }
}

/* SVG Logo Styles for index page */
.hero-logo-svg {
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: auto 0;
    transition: transform 0.3s ease;
    flex-grow: 1;
    flex-shrink: 1;
    object-fit: contain;
}

/* Hero slogan styles */
.hero-slogan {
    font-family: 'Poppins', sans-serif;
    font-size: 2.0rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 0;
    max-width: 600px;
    line-height: 1.4;
    flex-shrink: 0;
}

/* Auth buttons for index page */
.index-logged-out-special .auth-buttons {
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
}

.index-logged-out-special .btn-get-started {
    padding: 1rem 2.5rem;
    font-size: 1.25rem;
}

/* Updated styles for dropdown containers to match childName input */

.interests-dropdown-container,
.primary-theme-dropdown-container {
    width: 100%;
    padding: 12px 20px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: transparent;
    color: #fff;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.interests-dropdown-container:focus-within,
.primary-theme-dropdown-container:focus-within {
    outline: none;
    border-color: var(--hover-color, #FFC368);
    box-shadow: 0 0 8px rgba(255, 195, 104, 0.3);
}

/* Style the select elements inside the containers */
.interests-dropdown-container select,
.primary-theme-dropdown-container select {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem;
    outline: none;
    padding: 0;
    appearance: none; /* Remove default dropdown arrow */
    cursor: pointer;
}

/* Style the option elements */
.interests-dropdown-container select option,
.primary-theme-dropdown-container select option {
    background-color: rgba(10, 31, 68, 0.9);
    color: #fff;
    padding: 8px 12px;
}

/* Custom dropdown arrow */
.interests-dropdown-container::after,
.primary-theme-dropdown-container::after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    font-size: 0.8rem;
}

/* Make containers position relative for the arrow positioning */
.interests-dropdown-container,
.primary-theme-dropdown-container {
    position: relative;
}

/* Placeholder styling for when no option is selected */
.interests-dropdown-container select:invalid,
.primary-theme-dropdown-container select:invalid {
    color: rgba(255, 255, 255, 0.6);
}

/* Alternative approach if you want to use labels inside the containers */
.interests-dropdown-container label,
.primary-theme-dropdown-container label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 8px;
    display: block;
}

/* If you have multiple elements inside the containers, ensure proper spacing */
.interests-dropdown-container > *:not(:last-child),
.primary-theme-dropdown-container > *:not(:last-child) {
    margin-bottom: 8px;
}

/* Remove margin from the last element in containers */
.interests-dropdown-container > *:last-child,
.primary-theme-dropdown-container > *:last-child {
    margin-bottom: 0;
}

/* Favorites placeholder card styles */
.favorites-placeholder-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: default;
    transition: all 0.3s ease;
}

.favorites-placeholder-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
    transform: none; /* Override any hover transform from parent */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Keep subtle shadow */
}

.favorites-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    height: 100%;
    width: 100%;
}

.favorites-placeholder-icon {
    margin-bottom: 15px;
    opacity: 0.6;
}

.favorites-placeholder-icon .heart-icon {
    width: 32px;
    height: 32px;
    stroke: rgba(255, 255, 255, 0.6);
    fill: none;
    stroke-width: 1.5;
}

.favorites-placeholder-text {
    color: rgba(255, 255, 255, 0.8);
}

.favorites-placeholder-text .placeholder-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}

.favorites-placeholder-text .placeholder-subtitle {
    font-size: 0.85rem;
    opacity: 0.7;
    margin: 0;
    line-height: 1.2;
}

/* Responsive adjustments for favorites placeholder */
@media (max-width: 768px) {
    .favorites-placeholder-content {
        padding: 15px;
    }
    
    .favorites-placeholder-icon .heart-icon {
        width: 28px;
        height: 28px;
    }
    
    .favorites-placeholder-text .placeholder-title {
        font-size: 0.9rem;
    }
    
    .favorites-placeholder-text .placeholder-subtitle {
        font-size: 0.8rem;
    }
}

@media (max-width: 415px) {
    .favorites-placeholder-content {
        padding: 12px;
    }
    
    .favorites-placeholder-icon {
        margin-bottom: 10px;
    }
    
    .favorites-placeholder-icon .heart-icon {
        width: 24px;
        height: 24px;
    }
    
    .favorites-placeholder-text .placeholder-title {
        font-size: 0.85rem;
    }
    
    .favorites-placeholder-text .placeholder-subtitle {
        font-size: 0.75rem;
    }
}

.interests-dropdown-container,
.primary-theme-dropdown-container {
    width: 100%;
    padding: 12px 20px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: transparent;
    color: #fff;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.interests-dropdown-container:focus-within,
.primary-theme-dropdown-container:focus-within {
    outline: none;
    border-color: var(--hover-color, #FFC368);
    box-shadow: 0 0 8px rgba(255, 195, 104, 0.3);
}

/* Style the select elements inside the containers */
.interests-dropdown-container select,
.primary-theme-dropdown-container select {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Poppins', var(--font-family);
    font-size: 1.1rem;
    outline: none;
    padding: 0;
    appearance: none; /* Remove default dropdown arrow */
    cursor: pointer;
}

/* Style the option elements */
.interests-dropdown-container select option,
.primary-theme-dropdown-container select option {
    background-color: rgba(10, 31, 68, 0.9);
    color: #fff;
    padding: 8px 12px;
}

/* Custom dropdown arrow */
.interests-dropdown-container::after,
.primary-theme-dropdown-container::after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    font-size: 0.8rem;
}

/* Make containers position relative for the arrow positioning */
.interests-dropdown-container,
.primary-theme-dropdown-container {
    position: relative;
}

/* Placeholder styling for when no option is selected */
.interests-dropdown-container select:invalid,
.primary-theme-dropdown-container select:invalid {
    color: rgba(255, 255, 255, 0.6);
}

/* Alternative approach if you want to use labels inside the containers */
.interests-dropdown-container label,
.primary-theme-dropdown-container label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 8px;
    display: block;
}

/* If you have multiple elements inside the containers, ensure proper spacing */
.interests-dropdown-container > *:not(:last-child),
.primary-theme-dropdown-container > *:not(:last-child) {
    margin-bottom: 8px;
}

/* Remove margin from the last element in containers */
.interests-dropdown-container > *:last-child,
.primary-theme-dropdown-container > *:last-child {
    margin-bottom: 0;
}

/* My Stories placeholder card styles */
.my-stories-placeholder-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.my-stories-placeholder-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.my-stories-placeholder-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.my-stories-placeholder-link:hover {
    text-decoration: none;
    color: inherit;
}

.my-stories-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    height: 100%;
}

.my-stories-placeholder-icon {
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.my-stories-placeholder-card:hover .my-stories-placeholder-icon {
    transform: scale(1.1);
}

.my-stories-placeholder-icon .create-icon {
    width: 48px;
    height: 48px;
    stroke: var(--hover-color, #FFC368);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.my-stories-placeholder-card:hover .my-stories-placeholder-icon .create-icon {
    opacity: 1;
}

.my-stories-placeholder-text {
    color: white;
}

.my-stories-placeholder-text .placeholder-title {
    font-family: 'Poppins', var(--font-family);
}

.my-stories-placeholder-text .placeholder-subtitle {
    font-size: 14px;
    font-weight: 300;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Poppins', var(--font-family);
}

@media (max-width: 768px) {
    .my-stories-placeholder-content {
        padding: 16px;
    }
    
    .my-stories-placeholder-icon .create-icon {
        width: 40px;
        height: 40px;
    }
    
    .my-stories-placeholder-text .placeholder-title {
        font-size: 14px;
    }
    
    .my-stories-placeholder-text .placeholder-subtitle {
        font-size: 12px;
    }
}

@media (max-width: 415px) {
    .my-stories-placeholder-content {
        padding: 12px;
    }
    
    .my-stories-placeholder-icon {
        margin-bottom: 12px;
    }
    
    .my-stories-placeholder-icon .create-icon {
        width: 36px;
        height: 36px;
    }
    
    .my-stories-placeholder-text .placeholder-title {
        font-size: 13px;
    }
    
    .my-stories-placeholder-text .placeholder-subtitle {
        font-size: 11px;
    }
}

.my-stories-placeholder-text .placeholder-title {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px 0;
    color: white;
    font-family: 'Poppins', var(--font-family);
    transition: color 0.3s ease;
}

.my-stories-placeholder-text .placeholder-subtitle {
    font-size: 14px;
    font-weight: 300;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Poppins', var(--font-family);
    transition: color 0.3s ease;
}

.my-stories-placeholder-card:hover .my-stories-placeholder-text .placeholder-subtitle {
    color: var(--hover-color, #FFC368);
}

/* Fallback Modal Styles */
.fallback-modal-content {
    background-color: #fefefe;
    color: #333;
    max-width: 800px;
    border: 1px solid #888;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    padding: 30px 40px;
}

.fallback-modal-content h2 {
    color: #333;
    font-family: 'Magic School One', cursive;
    font-size: 1.5rem;
    margin-bottom: 10px;
    margin-top: 0;
    text-shadow: none;
}

.fallback-modal-header p {
    color: #666;
    font-size: 1rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

.fallback-stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.fallback-story-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e9ecef;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fallback-story-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.fallback-story-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
    border: 2px solid var(--hover-color, #FFC368);
}

.fallback-placeholder-image {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 12px;
    border: 2px solid var(--hover-color, #FFC368);
    font-size: 2.5rem;
    color: white;
}

.fallback-story-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fallback-story-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.fallback-age,
.fallback-length {
    background: var(--hover-color, #FFC368);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    color: #333;
    border: 1px solid var(--hover-color, #FFC368);
    white-space: nowrap;
}

.fallback-rating {
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
}

.fallback-separator {
    color: #ccc;
    font-size: 0.75rem;
}

.fallback-story-morale {
    color: #666;
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fallback-story-actions {
    margin-top: 15px;
}

.fallback-read-btn {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid var(--hover-color, #FFC368);
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-block;
    width: 100%;
}

.fallback-read-btn:hover {
    background-color: var(--hover-color, #FFC368);
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255, 195, 104, 0.3);
    text-decoration: none;
}

.fallback-close {
    color: #aaa;
    font-size: 28px;
    position: absolute;
    top: 10px;
    right: 20px;
    font-weight: bold;
    line-height: 1;
}

.fallback-close:hover {
    color: #000;
}

/* Mobile responsive adjustments for fallback modal */
@media (max-width: 768px) {
    .fallback-modal-content {
        width: 95%;
        padding: 25px;
        margin: 20px auto;
        max-width: 95%;
    }
    
    .fallback-stories-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .fallback-story-image,
    .fallback-placeholder-image {
        width: 60px;
        height: 60px;
        aspect-ratio: 1 / 1;
    }
    
    .fallback-story-title {
        font-size: 1rem;
    }
    
    .fallback-read-btn {
        font-size: 0.85rem;
        padding: 8px 12px;
    }
}

/* Bootstrap-style button spinners */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-animation 0.75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

@keyframes spinner-border-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Read Story Button - matching btn-primary btn-submit styling */
#readStoryButton {
    width: 100%;
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 8px;
    background-color: var(--hover-color, #FFC368) !important;
    color: #000 !important;
    border: 1px solid var(--hover-color, #FFC368) !important;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: 'Poppins', inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

#readStoryButton:hover {
    background-color: var(--hover-color, #FFC368) !important;
    color: #000 !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255, 195, 104, 0.3);
    text-decoration: none;
}

#readStoryButton:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 195, 104, 0.25);
    background: linear-gradient(135deg, var(--hover-color, #FFC368) 0%, #e67e22 100%) !important;
    border-color: var(--hover-color, #FFC368) !important;
    transform: none;
    outline: none;
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #111827;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: none; /* Hidden by default */
    padding: 4px 0 env(safe-area-inset-bottom, 4px);
    z-index: 1000;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.4);
    font-family: 'Poppins', sans-serif !important;
}

.mobile-bottom-nav .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-decoration: none;
    color: #ffffff;
    padding: 4px 4px;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0 4px;
    min-height: 40px;
    position: relative;
    font-family: 'Poppins', sans-serif !important;
}

.mobile-bottom-nav .bottom-nav-item:hover {
    color: #ffffff;
    background: transparent;
    text-decoration: none;
    transform: translateY(-1px);
    font-weight: bold;
}

.mobile-bottom-nav .bottom-nav-item.active {
    color: #ffffff;
    background: transparent;
    font-weight: bold;
}

.mobile-bottom-nav .bottom-nav-item i {
    font-size: 20px;
    margin-bottom: 3px;
    transition: all 0.3s ease;
}

.mobile-bottom-nav .bottom-nav-item span {
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
    letter-spacing: 0.3px;
    font-family: 'Poppins', sans-serif !important;
}

.mobile-bottom-nav .bottom-nav-item:hover i,
.mobile-bottom-nav .bottom-nav-item.active i {
    transform: scale(1.15);
}



/* Add bottom padding to body when mobile nav is present */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
    
    body.authenticated {
        padding-bottom: 55px; /* Space for the mobile bottom nav */
    }
    
    .content-wrapper {
        padding-bottom: 55px; /* Ensure content doesn't get hidden behind nav */
    }
    

    
    /* Hide the desktop create button since we have mobile bottom nav */
    .create-new-story-button {
        display: none !important;
    }
}

/* Handle safe area insets for devices with home indicator */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
        padding-bottom: calc(4px + env(safe-area-inset-bottom));
    }
    
    @media (max-width: 768px) {
        body.authenticated {
            padding-bottom: calc(55px + env(safe-area-inset-bottom));
        }
        
        .content-wrapper {
            padding-bottom: calc(55px + env(safe-area-inset-bottom));
        }
    }
}

/* Premium badge styling for mobile nav */
.mobile-bottom-nav .mobile-premium-badge {
    color: rgba(255, 195, 104, 0.8);
    position: relative;
}

.mobile-bottom-nav .mobile-premium-badge::after {
    content: '✨';
    position: absolute;
    top: -2px;
    right: -8px;
    font-size: 8px;
    opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .mobile-bottom-nav .bottom-nav-item {
        padding: 3px 2px;
        margin: 0 2px;
        min-height: 38px;
    }
    
    .mobile-bottom-nav .bottom-nav-item i {
        font-size: 16px;
    }
    
    .mobile-bottom-nav .bottom-nav-item .nav-icon {
        width: 24px;
        height: 24px;
    }
    
    .mobile-bottom-nav .bottom-nav-item span {
        font-size: 9px;
    }
    
    /* Ensure main create button maintains circular shape on small screens */
    .mobile-bottom-nav .main-create-button {
        width: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        padding: 0 !important;
        margin: 0 8px !important;
    }
}

@media (max-width: 360px) {
    .mobile-bottom-nav .bottom-nav-item {
        padding: 2px 1px;
        margin: 0 1px;
        min-height: 36px;
    }
    
    .mobile-bottom-nav .bottom-nav-item i {
        font-size: 15px;
    }
    
    .mobile-bottom-nav .bottom-nav-item .nav-icon {
        width: 22px;
        height: 22px;
    }
    
    .mobile-bottom-nav .bottom-nav-item span {
        font-size: 8px;
    }
    
    /* Ensure main create button maintains circular shape on very small screens */
    .mobile-bottom-nav .main-create-button {
        width: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        padding: 0 !important;
        margin: 0 8px !important;
    }
}

/* Main Create Button - Circular and Elevated */
.mobile-bottom-nav .main-create-button {
    position: relative;
    transform: translateY(-15px);
    background: linear-gradient(135deg, #FFC368, #FF9A56);
    border-radius: 50%;
    width: 64px !important;
    height: 64px !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    border: 3px solid #111827;
    margin: 0 8px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    padding: 0 !important;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    flex-grow: 0;
}

.mobile-bottom-nav .main-create-button:hover {
    transform: translateY(-18px) scale(1.05);
    background: linear-gradient(135deg, #FF9A56, #FFC368);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    color: #000;
    width: 64px !important;
    height: 64px !important;
    padding: 0 !important;
}

.mobile-bottom-nav .main-create-button.active {
    background: linear-gradient(135deg, #FF9A56, #FFC368);
    color: #000;
    transform: translateY(-15px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    width: 64px !important;
    height: 64px !important;
    padding: 0 !important;
}

.mobile-bottom-nav .main-create-button i {
    font-size: 24px;
    color: #000;
    margin-bottom: 0;
}

.mobile-bottom-nav .main-create-button span {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 600;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
    min-width: max-content;
}

.mobile-bottom-nav .main-create-button:hover span {
    color: #ffffff;
}

.mobile-bottom-nav .main-create-button:hover i,
.mobile-bottom-nav .main-create-button.active i {
    transform: scale(1.1);
    color: #000;
}

.mobile-bottom-nav .bottom-nav-item i {
    font-size: 20px;
    margin-bottom: 3px;
    transition: all 0.3s ease;
}

/* Navigation icon styles for image-based icons */
.mobile-bottom-nav .bottom-nav-item .nav-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 3px;
    transition: all 0.3s ease;
}

/* Show unselected icons by default, hide selected icons */
.mobile-bottom-nav .bottom-nav-item .nav-icon-selected {
    display: none;
}

.mobile-bottom-nav .bottom-nav-item .nav-icon-unselected {
    display: block;
}

/* Show selected icons when active or hovered, hide unselected icons */
.mobile-bottom-nav .bottom-nav-item:hover .nav-icon-selected,
.mobile-bottom-nav .bottom-nav-item.active .nav-icon-selected {
    display: block;
}

.mobile-bottom-nav .bottom-nav-item:hover .nav-icon-unselected,
.mobile-bottom-nav .bottom-nav-item.active .nav-icon-unselected {
    display: none;
}

.mobile-bottom-nav .bottom-nav-item span {
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
    letter-spacing: 0.3px;
    font-family: 'Poppins', sans-serif !important;
}

.mobile-bottom-nav .bottom-nav-item:hover i,
.mobile-bottom-nav .bottom-nav-item.active i {
    transform: scale(1.15);
}

.mobile-bottom-nav .bottom-nav-item:hover .nav-icon,
.mobile-bottom-nav .bottom-nav-item.active .nav-icon {
    transform: scale(1.15);
}

/* Locked navigation item styling */
.mobile-bottom-nav .bottom-nav-item.nav-item-locked {
    opacity: 0.6;
    cursor: pointer;
}

.mobile-bottom-nav .bottom-nav-item.nav-item-locked:hover {
    opacity: 0.8;
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile-bottom-nav .bottom-nav-item.nav-item-locked .nav-icon {
    filter: grayscale(0.3);
    width: 20px;
    height: 20px;
}

.mobile-bottom-nav .bottom-nav-item.nav-item-locked span {
    color: rgba(255, 255, 255, 0.7);
}