/* main.css */

body {
    font-family: 'DM Sans', sans-serif;
    margin: 0;
    padding: 0;
    /* Apply global theme variables for body */
    background-color: var(--body-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for theme change */
}

h1 {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
  color: var(--text-color);
}

h2 {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 0.5em;
  color: var(--text-color);
}

h3 {
  font-size: 1.5em;
  font-weight: 400;
  margin-bottom: 0.5em;
  color: var(--text-color);
}


#overlay {
    position: fixed !important; /* Ensure it stays fixed regardless of parent */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important; /* Dark, transparent background */
    z-index: 999 !important; /* IMPORTANT: Lower than sidebar (1001) but above main content */
    opacity: 0 !important; /* Initially hidden */
    visibility: hidden !important; /* Ensures it doesn't block clicks when hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease !important; /* Smooth fade effect */
}

/* Floating Sidebar for main.html */
#main-menu {
  position: fixed !important;
  top: 0 !important;
  left: -250px !important; /* Hidden off-screen initially */
  width: 250px !important;
  height: 100% !important;
  background-color: white !important;
  z-index: 1001 !important;
  transition: left 0.3s ease-in-out !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2) !important;
}

/* When sidebar is open */
#main-menu.active {
  left: 0 !important;
}

/* Cropping Modal Styles */
        .cropping-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: none; /* Hidden by default */
            align-items: center;
            justify-content: center;
            z-index: 1000; /* High z-index to be on top */
        }

        .cropping-content {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            text-align: center;
            max-width: 90vw; /* Responsive width */
            max-height: 90vh; /* Responsive height */
            overflow: auto; /* Enable scrolling if content exceeds size */
        }

        .cropping-content img {
            max-width: 100%;
            max-height: 50vh; /* Limit image height within modal */
            display: block; /* Remove extra space below image */
            margin: 0 auto 20px auto; /* Center image */
        }

        .cropping-modal .buttons {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .cropping-modal .buttons button {
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .cropping-modal .buttons .crop-button {
            background-color: #0078d7;
            color: white;
            border: none;
        }

        .cropping-modal .buttons .crop-button:hover {
            background-color: #005bb5;
        }

        .cropping-modal .buttons .cancel-crop-button {
            background-color: #ccc;
            color: #333;
            border: none;
        }

        .cropping-modal .buttons .cancel-crop-button:hover {
            background-color: #bbb;
        }
        
/* Overlay background */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  background: rgba(0, 0, 0, 0.6); /* black transparent */
  z-index: 1000;
}

/* When overlay is active */
#overlay.active {
  display: block;
}



#mobile-sidebar-toggle {
    display: none; /* Hidden on desktop/landscape by default */
    position: fixed;
    top: 50%; /* Vertically center */
    right: 10px; /* Small distance from right edge */
    transform: translateY(-50%); /* Adjust for perfect vertical centering */
    width: 45px; /* Small square size */
    height: 45px; /* Small square size */
    background-color: var(--sidebar-bg); /* Inherit sidebar theme */
    color: var(--sidebar-link-color); /* Inherit icon color */
    border-radius: 8px; /* Rounded corners */
    display: flex; /* Use flex to center the icon */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000; /* Above main content, below open sidebar */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for floating effect */
    transition: background-color 0.3s ease, color 0.3s ease, right 0.3s ease; /* Smooth transition */
}

#mobile-sidebar-toggle i {
    font-size: 1.5em; /* Icon size */
}


button {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
}

.discover-poems-section {
    display: block;
}

.poem-card-link {
    text-decoration: none;
    color: inherit; /* Inherit color from parent */
    display: block;
}

.navbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* Apply theme variables */
    background-color: var(--navbar-bg);
    color: var(--navbar-text);
    padding: 10px 20px;
    height: 80px;
    position: relative;
    top: 0;
    left: 0;
    right: 80px; /* Stop before the sidebar */
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

body.sidebar-collapsed .navbar {
    right: 50px; /* Adjust for collapsed sidebar width */
}

/* UPDATED: Menu Icon Styles */
.menu-icon {
    height: 35px; /* Set fixed height */
    width: 35px; /* Set fixed width (can be adjusted) */
    margin-right: 40px;
    cursor: pointer;
    background-image: var(--menu-icon-src); /* Use theme-dependent background image */
    background-size: contain; /* Ensure image fits within bounds */
    background-repeat: no-repeat;
    background-position: center;
    filter: none; /* Remove filter, as image source is changing */
    transition: background-image 0.3s ease; /* Smooth transition for image change */
}

.sidebar {
    width: 80px;
    position: fixed;
    top: 0;
    right: 0;
    /* Apply theme variable */
    background-color: var(--sidebar-bg);
    height: 100vh;
    display: flex !important; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 58px !important;
    padding-top: 20px;
   z-index: 1;
    padding-bottom: 20px;
  transition: background-color 0.3s ease, right 0.3s ease, width 0.3s ease; /* Smooth transition */
}

.tab-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Apply theme variable */
    color: var(--sidebar-link-color);
    padding: 0px;
    text-decoration: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 0.8em;
    width: 100%;
    transition: color 0.3s ease; /* Smooth color transition */
}

.tab-link i {
    font-size: 1.2em;
    margin-bottom: 5px;
}

.tab-link.active {
    /* Apply theme variable */
    color: var(--sidebar-link-active-color);
}

/* UPDATED: Logo Styles */
.logo {
    height: 600px; /* Set fixed height */
    width:  187.5px; /* Set fixed width (can be adjusted) */
    background-image: var(--logo-image-src); /* Use theme-dependent background image */
    background-size: contain; /* Ensure image fits within bounds */
    background-repeat: no-repeat;
    background-position: center left;
    filter: none; /* Remove filter, as image source is changing */
    transition: background-image 0.3s ease; /* Smooth transition for image change */
}

.profile-button {
    /* Apply theme variables */
    background-color: var(--profile-button-bg);
    color: var(--profile-button-text);
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: 10px;
    margin-right: 90px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.upgrade-button {
    /* Apply theme variables */
    background-color: var(--upgrade-button-bg);
    color: var(--upgrade-button-text);
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: bold; /* Changed from 2000 to bold for standard CSS */
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}


#Poet-Centre { /* Use the exact ID from your HTML */
    padding: 20px; /* Default padding for desktop */
    color: var(--text-color);
}

/* Main greeting card */
.poet-centre-main-card {
    height: 120px;
    background-color: var(--card-bg);
    margin-bottom: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    font-size: 1.5em;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    color: var(--text-color); /* Ensure text color is from theme */
    /* Dynamic greeting specific gradient, needs to be handled in JS or a separate class */
    /* background: linear-gradient(to bottom left, #0082ff, #ff00e0, #8300ff); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    /* background-clip: text; */
}

#create-poem-button-desktop {
    /* Your existing desktop styles */
    font-size: 24px;
    position: absolute;
    right: 250px;
    top: 120px;
    align-self: flex-end;
    background-color: var(--create-poem-button-bg);
    color: var(--create-poem-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
    display: block; /* Ensure it's visible by default on desktop */
}

#create-poem-button-mobile {
    display: none; /* CRITICAL: Hide mobile button by default on desktop */
}

#dynamic-greeting { /* Explicitly target the greeting span if it needs gradient */
    background: linear-gradient(to bottom left, #0082ff, #ff00e0, #8300ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap; /* Prevent wrapping on desktop by default */
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* Make it a block to apply overflow properties */
}


/* Section cards (Analytics, Prompts, Monetization) */
.poet-centre-section-card {
    height: 80px;
    background-color: var(--poet-centre-card-bg);
    margin-bottom: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 15px;
    width: 60%; /* Default desktop width */
    max-width: 600px; /* Optional: max width for larger screens */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    color: var(--text-color); /* Ensure text color is from theme */
}

.poet-centre-section-card .card-icon {
    font-size: 30px;
    color: var(--text-color); /* Inherit color from theme */
}

.poet-centre-section-card .card-title {
    font-size: 1.1em;
    color: var(--text-color); /* Inherit color from theme */
    margin: 0; /* Remove default h3 margin */
    flex-grow: 1; /* Allow title to grow and take space on desktop */
    white-space: nowrap; /* Prevent wrapping on desktop */
    overflow: hidden;
    text-overflow: ellipsis;
}

.poet-centre-section-card .card-arrow-container {
    margin-left: auto; /* Pushes the arrow container to the right */
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent from shrinking on desktop */
}

.poet-centre-section-card .card-arrow-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--poet-centre-arrow-circle-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.poet-centre-section-card .card-arrow-icon {
    color: var(--poet-centre-arrow-color);
    font-size: 20px;
    transition: color 0.3s ease;
}

/* Back buttons for sub-sections */
.back-to-poet-centre-btn {
    background-color: var(--back-btn-bg);
    color: var(--back-btn-text);
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.back-to-poet-centre-btn:hover {
    background-color: var(--back-btn-hover-bg, #d0d0d0);
}

/* Sub-section titles within analytics/prompts/monetization */
.sub-section-title, .sub-section-inner-title {
    color: var(--h2-color);
    margin-bottom: 15px;
    font-size: 1.5em; /* Default size for desktop */
}

/* Analytics Section */
#analytics-section {
    margin-top: 30px;
}
.analytics-toggle-group {
    text-align: center;
    margin-bottom: 20px;
}
.analytics-toggle-button {
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.analytics-toggle-button.black-button {
    background-color: var(--black-button-bg);
    color: var(--black-button-text);
}
.analytics-toggle-button.secondary-button {
    background-color: var(--secondary-button-bg);
    color: var(--secondary-button-text);
}
.analytics-timeframe-section {
    width: 80%; /* Default desktop width */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.analytics-stat-card {
    background-color: var(--card-bg);
    padding: 15px;
    border-radius: 8px;
    box-shadow: var(--poem-card-shadow);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.stat-card-title {
    color: var(--h2-color);
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 10px;
}
.stat-card-value {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin-top: 5px;
    color: var(--text-color);
}
.stat-poem-details p {
    font-size: 0.9em;
    margin-bottom: 5px;
    color: var(--time-ago-color);
}
.stat-poem-details p span {
    font-weight: bold;
    color: var(--text-color);
}

/* Prompts & Tips Section */
#prompts-inspiration-section {
    margin-top: 30px;
}
.prompts-tips-container {
    width: 80%; /* Default desktop width */
    margin: 0 auto;
    margin-bottom: 30px;
}
.horizontal-scroll { /* Applied to prompts-horizontal-scroll and possibly others */
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0; /* Padding around items within the scrollable area */
    gap: 15px; /* Space between flex items */
}
.prompt-card {
    flex: 0 0 250px; /* Fixed width for desktop prompts */
    background-color: var(--card-bg);
    padding: 15px;
    border-radius: 8px;
    box-shadow: var(--poem-card-shadow);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.prompt-card-title {
    color: var(--h2-color);
    margin-top: 0;
    margin-bottom: 10px;
}
.prompt-card-content {
    font-size: 0.9em;
    color: var(--text-color);
}

/* Accordion styles */
.accordion-item {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    border-radius: 8px;
    margin-bottom: 10px;
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 8px; /* Default border-radius */
}
.accordion-header.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.accordion-header:hover {
    background-color: var(--hover-overlay-bg); /* Use a hover color */
}
.accordion-title {
    color: var(--h2-color);
    margin: 0; /* Remove default margin */
    font-size: 1.1em;
}
.accordion-icon {
    font-size: 1em;
    transition: transform 0.3s ease;
    color: var(--text-color);
}
.accordion-icon.rotate {
    transform: rotate(180deg);
}
.accordion-content {
    padding: 0 20px 15px;
    background-color: var(--card-bg);
    color: var(--text-color);
    display: none; /* Hidden by default */
    transition: height 0.3s ease-out, opacity 0.3s ease;
    overflow: hidden;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.accordion-content p {
    margin: 0; /* Remove default paragraph margin */
    font-size: 0.95em;
    line-height: 1.6;
}


/* Monetization Section */
#monetization-section {
    margin-top: 30px;
}
.monetization-progress-container {
    margin-bottom: 20px;
    text-align: center;
    width: 80%; /* Default desktop width */
    margin: 0 auto;
}
.progress-bar-wrapper {
    width: 100%;
    background-color: var(--secondary-button-bg);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}
.progress-bar {
    height: 20px;
    width: 0%; /* Initial state for JS */
    background-color: var(--primary-button-bg);
    text-align: center;
    line-height: 20px;
    color: var(--primary-button-text);
    transition: width 0.5s ease-in-out, background-color 0.3s ease, color 0.3s ease;
}
#follower-count-display {
    color: var(--text-color);
}
.apply-monetization-btn-container {
    text-align: center;
    margin-bottom: 30px;
}

/* --- Mobile/Portrait View Adjustments for Poet Centre --- */
@media (orientation: portrait), (max-width: 768px) {
    
    /* Overall Poet Centre Tab Padding */
    #Poet-Centre {
        padding: 15px; /* Reduced padding for mobile */
    }

    /* Main Greeting Card */
    .poet-centre-main-card {
        height: auto; /* Allow height to adjust */
        min-height: 80px; /* Minimum height */
        padding: 15px 20px; /* Adjust padding */
        font-size: 1.2em; /* Smaller font for mobile */
        text-align: center; /* Center text */
        justify-content: center; /* Center content in flex */
        width: 100%; /* Full width */
        box-sizing: border-box;
    }
    #dynamic-greeting {
        white-space: normal; /* IMPORTANT: Allow text to wrap naturally on mobile */
        overflow: visible; /* Ensure it's not hidden */
        text-overflow: clip; /* Prevent ellipsis on wrap */
    }

    /* Section cards (Analytics, Prompts, Monetization) */
    .poet-centre-section-card {
        height: auto; /* Allow height to adjust based on content */
        min-height: 70px; /* Minimum height */
        padding: 15px 20px; /* Adjust padding */
        width: 100%; /* IMPORTANT: Full width on mobile */
        box-sizing: border-box;
        flex-wrap: nowrap; /* Prevent icon/title/arrow from wrapping to next line */
        justify-content: space-between; /* Space out title/icon and arrow */
    }

    .poet-centre-section-card .card-icon {
        font-size: 25px; /* Slightly smaller icon */
        flex-shrink: 0;
    }
    .poet-centre-section-card .card-title {
        font-size: 1em; /* Smaller title */
        flex-grow: 1; /* Allow title to take space */
        margin-right: 10px; /* Space between title and arrow */
        text-align: left;
        white-space: normal; /* Allow title to wrap */
        overflow-wrap: break-word; /* Ensure long words break */
    }
    .poet-centre-section-card .card-arrow-container {
        flex-shrink: 0; /* Prevent arrow container from shrinking */
        margin-left: 0; /* Remove auto margin to keep it next to title if wraps */
    }
    .poet-centre-section-card .card-arrow-circle {
        width: 35px; /* Smaller circle */
        height: 35px; /* Smaller circle */
    }
    .poet-centre-section-card .card-arrow-icon {
        font-size: 18px; /* Smaller arrow icon */
    }

     #create-poem-button-desktop {
        display: none !important; /* CRITICAL: Hide desktop button on mobile */
    }

    /* Show the mobile create button on mobile */
    #create-poem-button-mobile {
        display: block !important; /* CRITICAL: Show mobile button on mobile */
        margin-left: auto; /* Push it to the right */
        padding: 8px 15px;
        font-size: 1em;
        border-radius: 50px;
        flex-shrink: 0;
        white-space: nowrap; /* Prevent button text from wrapping */
    }


    /* Analytics / Prompts / Monetization Sub-Sections */
    .poet-centre-sub-section {
        margin-top: 20px; /* Reduced margin */
        padding: 0 10px; /* Add some horizontal padding */
    }
    .back-to-poet-centre-btn {
        width: 100%; /* Make back button full width */
        box-sizing: border-box;
        text-align: center;
    }
    .sub-section-title, .sub-section-inner-title {
        font-size: 1.3em; /* Smaller sub-section titles */
        margin-bottom: 10px;
    }
    .analytics-timeframe-section,
    .prompts-tips-container,
    .monetization-progress-container,
    .monetization-faq-accordion {
        width: 100%; /* Full width for content areas */
        margin: 0 auto; /* Center them */
        padding: 0 5px; /* Small internal padding for consistency */
        box-sizing: border-box;
    }

    /* Analytics Stat Cards */
    .analytics-stat-card {
        padding: 10px; /* Reduced padding */
        text-align: center; /* Center content within stat cards */
    }
    .stat-card-title {
        font-size: 1em; /* Smaller stat title */
        margin-bottom: 5px;
    }
    .stat-card-value {
        font-size: 1.5em; /* Smaller stat value */
    }
    .stat-poem-details p {
        font-size: 0.85em; /* Smaller font for poem details */
    }

    /* Prompts Horizontal Scroll */
    #prompts-horizontal-scroll {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 10px; /* Smaller gap between prompt cards */
        padding: 10px 0; /* Adjust padding */
        width: 100%; /* Ensure it takes full width */
        box-sizing: border-box;
    }
    .prompt-card {
        flex: 0 0 200px; /* Smaller fixed width for mobile prompt cards */
        width: 200px;
        padding: 10px; /* Reduced padding */
        box-sizing: border-box;
    }
    .prompt-card-title {
        font-size: 1em;
    }
    .prompt-card-content {
        font-size: 0.85em;
        white-space: normal; /* Allow prompt content to wrap */
        overflow-wrap: break-word;
    }

    /* Accordion Items (Prompts & Tips, Monetization FAQ) */
    .accordion-header {
        padding: 12px 15px; /* Adjust padding */
    }
    .accordion-title {
        font-size: 1em; /* Smaller title */
    }
    .accordion-content {
        padding: 0 15px 12px; /* Adjust padding */
    }
    .accordion-content p {
        font-size: 0.9em; /* Smaller paragraph text */
    }

    /* Monetization Progress */
    #follower-count-display {
        font-size: 0.9em; /* Smaller font for count */
    }
    .apply-monetization-btn-container {
        margin-bottom: 20px; /* Reduced margin */
    }
}



.navbar .logo {
    margin-right: auto;
}

.navbar .upgrade-button,
.navbar .profile-button {
    margin-left: 30px;
}

.tab-content {
    margin-right: 80px;
    padding: 20px;
}

/* Style for the main poem card container */
.poem-card {
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 450px;
    /* Apply theme variables */
    border: var(--poem-card-border);
    border-radius: var(--poem-card-border-radius);
    background-color: var(--poem-card-bg);
    color: var(--poem-card-text); /* Content color is derived from here */
    padding: 16px;
    margin-right: 10px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Keep static shadow for now */
    cursor: pointer;
    align-self: flex-start;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; /* Smooth transition */
}

/* Style for the poem title (dynamic font controlled by appearance.js) */
.poem-title {
    font-family: var(--user-poem-title-font); /* Dynamic font */
    font-size: 1.5em;
    margin-bottom: 0px;
    align-self: flex-start;
    min-height: 1.5em;
    line-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Color handled by --poem-card-text in theme */
    color: var(--poem-card-text);
    transition: color 0.3s ease;
}

/* Container for the header (poet info and tags) */
.poem-card .card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
    width: 100%;
    flex-shrink: 0;
}

/* Container for poet avatar, name, and time */
.poem-card .poet-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 8px;
}

/* Style for the poet avatar */
.poem-card .poet-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    /* Apply theme variable */
    background-color: var(--poem-card-image-bg);
    border: 1px solid #ccc; /* Keep static border */
    flex-shrink: 0;
    margin-bottom: 0;
    transition: background-color 0.3s ease;
}

/* Container for just the poet name and time ago */
.poem-card .poet-details {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    flex-grow: 1;
    margin-bottom: 0;
}

/* Style for the poet's display name */
.poem-card .poet-name {
    font-weight: bold;
    /* Apply theme variable */
    color: var(--poet-name-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

/* Style for the time ago text */
.poem-card .time-ago {
    /* Apply theme variable */
    color: var(--time-ago-color);
    font-size: 0.8em;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

/* Container for tag buttons */
.poem-card .tag-buttons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 100%;
}

/* Style for the tag buttons within the poem card */
.poem-card .tag-button {
    padding: 4px 10px;
    /* Apply theme variables */
    border: var(--poem-card-border); /* Use poem-card border for tags */
    border-radius: 15px;
    background-color: var(--tag-button-bg);
    color: var(--tag-button-text);
    font-size: 0.8em;
    cursor: default;
    pointer-events: none;
    opacity: 1;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.poem-card-image {
    display: block;
    width: 280px;
    height: 120px;
    margin: 0 auto; /* Removed margin-bottom */
    object-fit: cover;
    border-radius: 8px;
    background-color: var(--poem-card-image-bg);
    transition: background-color 0.3s ease;
}

/* Add space below image when present */
.poem-card.has-image .card-header {
    margin-top: 10px; /* Space between image and header */
}

/* Ensure poem content takes remaining space and handles overflow */
.poem-card .poem-content {
    flex-grow: 1;
    overflow: hidden;
    white-space: pre-line;
    text-overflow: ellipsis;
    align-self: flex-start;
    /* Font handled by var(--user-poem-content-font) from global_theme_css, color by --poem-card-text */
    color: var(--poem-card-text);
    font-family: var(--user-poem-content-font); /* Dynamic font */
    transition: color 0.3s ease;
}

#followed-poems-grid {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    align-items: flex-start;
}

.poet-link {
    cursor: pointer;
    /* Apply theme variable */
    color: var(--read-poet-link-color); /* Use the read-page poet link color for consistency */
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.tag-button {
    pointer-events: none;
    opacity: 0.7;
    cursor: default;
}

.poem-id {
    display: none;
}

.black-button {
    /* Apply theme variables */
    background-color: var(--black-button-bg);
    color: var(--black-button-text);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 50px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.black-button:hover {
    /* Apply theme variable */
    background-color: var(--black-button-hover-bg);
}

.genre-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
}

.genre-button {
    padding: 10px 20px;
    font-size: 1em;
}

/* Style for the main poet card container (used in suggested poets) */
.poet-card {
    /* Apply theme variables */
    border: 1px solid var(--border-color); /* Use general border color */
    border-radius: 10px;
    padding: 15px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--poet-centre-card-bg); /* Use poet-centre-card-bg */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 200px;
    min-height: 180px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, background-color 0.3s ease, border 0.3s ease;
}

.poet-card:hover {
    transform: translateY(-3px);
}

/* Style for the poet avatar (in suggested poets) */
.poet-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-bottom: 10px;
    flex-shrink: 0;
    /* Apply theme variable */
    background-color: var(--poem-card-image-bg); /* Use poem card image bg for placeholder */
    border: 1px solid #ccc; /* Keep static border */
    margin-left: auto;
    margin-right: auto;
    transition: background-color 0.3s ease;
}

/* Style for the poet details container (name and username) */
.poet-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
}

/* Style for the poet's display name */
.poet-name {
    font-weight: bold;
    /* Apply theme variable */
    color: var(--poet-name-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

/* Style for the poet's username */
.poet-username {
    /* Apply theme variable */
    color: var(--time-ago-color); /* Using time-ago color for general lighter text */
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

/* Style for the follow button (no specific theme overrides provided, keeping as is) */
.follow-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    width: 80%;
    flex-shrink: 0;
    font-size: 1em;
    transition: background-color 0.2s ease-in-out;
    text-align: center;
}

.follow-button:hover {
    background-color: #0056b3;
}

.follow-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* CSS for hiding the button when the card belongs to the current user */
.poet-card[data-is-current-user="true"] .follow-button {
    display: none;
}

/* Style for the horizontal scroll container (where the cards are placed) */
.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

/* Scrollbar styles (keep as is, generally not theme-dependent unless explicitly defined) */
.horizontal-scroll::-webkit-scrollbar {
    height: 8px;
}

.horizontal-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Overlay for the dialog */
#publish-limit-dialog-overlay {
    display: none; /* Initially hidden */
    position: fixed; /* Fixes it to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
    z-index: 1000; /* Ensure it's on top of other content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    /* Use 'flex' in JS to show it, 'none' to hide it */
}

/* The actual dialog box */
.poem-limit-dialog {
    background-color: var(--card-bg, white); /* Uses your theme's card background */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Softer shadow */
    width: 90%; /* Responsive width */
    max-width: 450px; /* Max width for larger screens */
    text-align: center;
    position: relative; /* For positioning the close button */
    color: var(--text-color, #333); /* Ensure text color respects theme */
    animation: fadeInScale 0.3s ease-out forwards; /* Add a simple animation */
}

/* Close button for the dialog */
.poem-limit-dialog .close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8em;
    cursor: pointer;
    color: var(--text-color, #888); /* Lighter color for close button */
    transition: color 0.2s ease;
}

.poem-limit-dialog .close-button:hover {
    color: var(--accent-color, #f44336); /* Accent color on hover */
}

/* Headings and paragraphs within the dialog */
.poem-limit-dialog h4 {
    font-size: 1.6em;
    margin-bottom: 15px;
    color: #f39c12; /* This was hardcoded in your original, kept here */
}

.poem-limit-dialog p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 25px;
    color: var(--add-to-fav-limit-dialog-text); /* Uses theme variable */
}

/* Upgrade button */
.poem-limit-dialog .upgrade-button {
    background-color: var(--add-to-fav-limit-dialog-upgrade-btn-bg);
    color: var(--add-to-fav-limit-dialog-upgrade-btn-text);
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.poem-limit-dialog .upgrade-button:hover {
    background-color: var(--add-to-fav-limit-dialog-upgrade-btn-hover-bg);
    transform: translateY(-2px);
}

/* Optional: Animation for the dialog */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#create {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align Become a Poet section */
}

#create-poem-button {
    font-size: 24px;
    position: absolute;
    right: 250px;
    top: 120px;
    align-self: flex-end;
    /* Apply theme variables */
    background-color: var(--create-poem-button-bg);
    color: var(--create-poem-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

#poet-greeting {
    /* This has a fixed gradient, keep as is */
    font-weight: bold;
    font-size: 36px;
    white-space: nowrap;
    background: linear-gradient(to bottom left, #0082ff, #ff00e0, #8300ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Start of Editor and Upload Specific Styles (Updated) --- */
.editor-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.editor-header button {
    background-color: var(--back-btn-bg);
    color: var(--back-btn-text);
    padding: 10px 20px;
    border: none;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.editor-header button:hover {
    background-color: #d0d0d0;
}

/* Updated #text-editor and #edit-text-editor for increased width */
#text-editor,
#edit-text-editor {
    width: 80%; /* Increased from 60% */
    max-width: 900px; /* Increased from 800px to give more room */
    margin: 50px auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--main-card-bg);
    color: var(--text-editor-text); /* Assuming this variable is defined, if not, use --text-color */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Updated .poem-image-upload-section to fit within the wider editor */
.poem-image-upload-section {
    width: 100%; /* Make it fill its parent's width */
    max-width: 520px; /* Cap its maximum width to maintain proportions */
    
    /* ASPECT RATIO HACK: Use padding-bottom to maintain 260x120 (2.1666:1) ratio */
    padding-bottom: 46.15%; /* (120 / 260) * 100% */
    height: 0; /* Important: set height to 0 for padding-bottom hack to work */
    overflow: hidden;

    position: relative; 
    
    border: 2px dashed; 
    border-radius: 0.5rem;
    
    margin: 2rem auto; /* Center horizontally and provide vertical margin */
    cursor: pointer;
    
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

/* New: Wrapper for content inside the aspect ratio div */
.poem-image-upload-section .poem-image-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* Apply padding here */
    box-sizing: border-box; /* Include padding in dimensions */
}


/* Styles for the image preview inside the upload section */
.poem-image-upload-section img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area, cropping if necessary */
    border-radius: inherit; /* Inherit border-radius from parent */
}

/* Styles for the Font Awesome icon inside the upload section */
.poem-image-upload-section .fas { /* Targets the cloud-upload icon */
    font-size: 3.125rem; /* Equivalent to text-5xl */
    margin-bottom: 0.75rem; /* Equivalent to mb-3 */
}

/* Styles for the text inside the upload section */
.poem-image-upload-section p {
    text-align: center; /* Tailwind text-center */
    /* Add your preferred font here, e.g., font-family: 'Inter', sans-serif; */
}

/* Bold text inside the upload section */
.poem-image-upload-section strong {
    font-weight: 700; /* Tailwind font-bold */
}

.button-center-container {
    text-align: center; /* This centers inline-block elements (like buttons by default) */
    margin-top: 15px;    /* Adds some space above the button */
    margin-bottom: 20px; /* Adds space below the button to separate it from other content */
  color:#f52f2f;
}
/* --- Theme-dependent styles for the upload section (Adjust variable names if different) --- */

/* Light Theme styles */
body[data-theme="light"] .poem-image-upload-section {
    border-color: var(--border-color, #bbb); /* Default light grey border */
    background-color: var(--card-bg, rgba(255, 255, 255, 0.2)); /* Slightly transparent white */
    color: var(--text-color, #333); /* Darker text */
}

/* Light Theme hover effect */
body[data-theme="light"] .poem-image-upload-section:hover {
    border-color: var(--primary-button-bg, #888); /* Example: darker border on hover */
    background-color: var(--hover-overlay-bg, rgba(255, 255, 255, 0.3)); /* Slightly less transparent white */
}

/* Dark Theme styles */
body[data-theme="dark"] .poem-image-upload-section,
body[data-theme="mixed"] .poem-image-upload-section { /* Also apply to 'mixed' theme if it's dark-based */
    border-color: var(--border-color, #444); /* Dark grey border */
    background-color: var(--card-bg, rgba(0, 0, 0, 0.2)); /* Slightly transparent black */
    color: var(--text-color, white); /* White text */
}

/* Dark Theme hover effect */
body[data-theme="dark"] .poem-image-upload-section:hover,
body[data-theme="mixed"] .poem-image-upload-section:hover {
    border-color: var(--primary-button-bg, #666); /* Example: lighter border on hover */
    background-color: var(--hover-overlay-bg, rgba(0, 0, 0, 0.3)); /* Slightly less transparent black */
}

/* --- Styles for the Cropping Modal --- */
#imageCropModal {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
    background-color: rgba(0, 0, 0, 0.75); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 50; 
    /* IMPORTANT: By default, this div should have style="display: none;" in your HTML */
}

#imageCropModal > div { 
    background-color: white; 
    padding: 1.5rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
    max-width: 32rem; 
    width: 100%; 
    position: relative; 
}

#imageCropModal h3 {
    font-size: 1.125rem; 
    font-weight: 600; 
    margin-bottom: 1rem; 
    text-align: center; 
    color: #333; 
}

#imageCropModal .image-container {
    margin-bottom: 1rem; 
    max-height: 24rem; 
    overflow: hidden; 
}

#imageCropModal #imageToCrop {
    max-width: 100%; 
    height: auto; 
    display: block; 
}

/* Cropper.js specific styling */
.cropper-view-box,
.cropper-face {
    border-radius: 0; 
}

/* Buttons inside the modal */
#imageCropModal button {
    padding: 0.5rem 1rem; 
    border-radius: 0.25rem; 
    font-weight: 700; 
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#cancelCropButton {
    background-color: #d1d5db; 
    color: #1f2937; 
}
#cancelCropButton:hover {
    background-color: #9ca3af; 
}

#cropAndUploadButton {
    background-color: #3b82f6; 
    color: white; 
}
#cropAndUploadButton:hover {
    background-color: #2563eb; 
}

/* Close button (top-right) */
#imageCropModal .absolute {
    position: absolute;
    top: 0.5rem; 
    right: 0.5rem; 
    font-size: 1.5rem; 
    color: #6b7280; 
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1; 
}
#imageCropModal .absolute:hover {
    color: #4b5563; 
}

/* --- Editor Content Fields (Re-arranged and modified for clarity and less redundancy) --- */
.editor-content input[type="text"],
.editor-content textarea,
.editor-content select { /* Apply general styles to all form fields */
    width: 100%;
    margin-bottom: 20px;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 16px;
    font-family: 'DM Sans', sans-serif;
    background-color: var(--editor-input-bg);
    color: var(--editor-input-text);
    border: var(--editor-input-border);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.editor-content textarea {
    min-height: 200px;
    resize: vertical;
}

/* --- IMPORTANT: These styles are for a generic file input.
     Since .poem-image-upload-section now handles the visual upload area,
     these rules for input[type="file"] might apply to the *hidden* input
     and cause unexpected visual effects. It's recommended to remove or comment
     these out if they are exclusively for the hidden image input.
     If you have other visible file inputs in your app, keep them but be aware of conflicts.
*/
/*
.editor-content input[type="file"] {
    width: 100%;
    margin-bottom: 20px;
    padding: 60px 0;
    box-sizing: border-box;
    border: 2px dashed #cccccc;
    border-radius: 5px;
    text-align: center;
    background-color: #f0f0f0;
    color: #777777;
    font-size: 24px;
    cursor: pointer;
    position: relative;
}

.editor-content input[type="file"]::before {
    content: "+";
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
    color: #999999;
}

.editor-content input[type="file"]::after {
    content: "Upload Header Image";
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20%);
    color: #777777;
}
*/
/* --- End of potentially conflicting input[type="file"] styles --- */


#text-editor .editor-header,
#edit-text-editor .editor-header {
    text-align: right;
    margin-bottom: 10px;
}

#text-editor .editor-header button,
#edit-text-editor .editor-header button {
    padding: 8px 15px;
    border: none;
    cursor: pointer;
}

#publish-btn,
#update-btn {
    background-color: var(--publish-btn-bg);
    color: var(--publish-btn-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}


#text-editor .editor-content label,
#edit-text-editor .editor-content label {
    display: block;
    margin-bottom: 5px;
    color: var(--tag-container-label-color);
    transition: color 0.3s ease;
}

#poem-list p {
    color: var(--poem-item-text);
    text-align: center;
    transition: color 0.3s ease;
}

#become-poet-section {
    text-align: center;
}

.poem-actions button {
    margin-left: 5px;
    padding: 5px 10px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    cursor: pointer;
}


.tag-container {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 5px;
}

.tag-container input[type="checkbox"] {
    vertical-align: middle;
}

.tag-container label {
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
}

#search {
    padding: 20px;
    background-color: var(--search-bg);
    transition: background-color 0.3s ease;
}

.search-container-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: var(--search-main-text-color);
    transition: color 0.3s ease;
}

.search-top-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.search-by-text {
    color: var(--search-by-text-color);
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.search-options {
    display: flex;
    gap: 5px;
}

.search-option {
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background-color: var(--search-option-bg);
    color: var(--search-option-text);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.search-option.active {
    background-color: var(--search-option-active-bg);
    color: var(--search-option-active-text);
    border-color: var(--search-option-active-bg);
}

.search-input-area {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 80%;
    max-width: 600px;
}

#searchInput {
    flex-grow: 1;
    padding: 10px;
    border-radius: 5px;
    font-size: 1em;
    border: var(--search-input-border);
    background-color: var(--search-input-bg);
    color: var(--search-input-text);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

#performSearch {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    background-color: var(--search-button-bg);
    color: var(--search-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

#performSearch:hover {
    background-color: var(--search-button-hover-bg);
}

.poem-grid-container {
    margin-top: 20px;
    width: 95%;
    max-width: 1200px;
}

.poem-grid.horizontal-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}


#poet-dashboard {
    padding: 20px;
}

#poet-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

#poem-list {
    border: 1px solid var(--border-color);
    background-color: var(--poem-list-bg);
    border-radius: 5px;
    padding: 10px;
    transition: border 0.3s ease, background-color 0.3s ease;
}

.poem-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--poem-item-text);
    transition: border-bottom 0.3s ease, color 0.3s ease;
}

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

.poem-title {
    flex-grow: 1;
    margin-right: 10px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--user-poem-title-font);
    color: var(--poem-item-text);
    transition: color 0.3s ease;
}


.poem-status {
    padding: 5px 10px;
    border-radius: 3px;
    font-weight: bold;
}

.draft {
    background-color: #f0f0f0;
    color: #333333;
}

.published {
    background-color: #e0f7e0;
    color: #2e7d32;
}

#loading-indicator {
    text-align: center;
    padding: 10px;
    color: var(--text-color);
    transition: color 0.3s ease;
}

#navigation-buttons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

#nav-up-button,
#nav-down-button {
    padding: 5px 10px;
    margin: 0 5px;
    cursor: pointer;
    background-color: var(--black-button-bg);
    color: var(--black-button-text);
    border: 1px solid var(--black-button-bg);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

#nav-up-button:hover,
#nav-down-button:hover {
    background-color: var(--black-button-hover-bg);
    color: var(--black-button-text);
    border-color: var(--black-button-hover-bg);
}

.suggested-poet-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-right: 10px;
    width: 200px;
    flex-shrink: 0;
    text-align: center;
    background-color: var(--poet-centre-card-bg);
    transition: background-color 0.3s ease, border 0.3s ease;
}

.suggested-poet-card .poet-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--poem-card-image-bg);
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
    transition: background-color 0.3s ease;
}

.suggested-poet-card .poet-name {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--poet-name-color);
    transition: color 0.3s ease;
}

.suggested-poet-card .poet-username {
    color: var(--time-ago-color);
    font-size: 0.9em;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.suggested-poet-card .follow-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.suggested-poet-card .follow-button:hover {
    background-color: #0056b3;
}

.poet-card[data-is-current-user="true"] .follow-button {
    display: none;
}

/* Overlay for the mobile sidebar, covering the main content */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Dark, transparent background */
    z-index: 999; /* Lower than sidebar (z-index: 1001) but above main content */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Ensures it doesn't block clicks when hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth fade effect */
}

.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

.horizontal-scroll::-webkit-scrollbar {
    height: 8px;
}

.horizontal-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#favourites-poems-grid,
#discover-poems-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

#discover-report-poem-container,
#discover-report-comment-container {
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px;
    max-width: calc(100% - 270px);
    box-sizing: border-box;
    background-color: var(--card-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

#load-more-discover-poems {
    display: block;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--black-button-bg);
    color: var(--black-button-text);
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#load-more-discover-poems:hover {
    background-color: var(--black-button-hover-bg);
}

#h3pyl {
    display: block;
    margin-bottom: 10px;
    color: var(--h2-color);
    transition: color 0.3s ease;
}

/* --- Styles for Poem Limit Dialog --- */
.poem-limit-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden; /* Hidden by default */
    opacity: 0; /* Fully transparent by default */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.poem-limit-dialog {
    background-color: var(--add-to-fav-limit-dialog-bg);
    color: var(--add-to-fav-limit-dialog-text);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 400px;
    width: 90%;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.poem-limit-dialog .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--time-ago-color);
    transition: color 0.2s ease;
}

.poem-limit-dialog .close-button:hover {
    color: var(--text-color);
}

.poem-limit-dialog h4 {
    font-size: 1.3em;
    color: #f39c12;
    margin-top: 0;
    margin-bottom: 15px;
}

.poem-limit-dialog p {
    font-size: 1em;
    color: var(--add-to-fav-limit-dialog-text);
    margin-bottom: 20px;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.poem-limit-dialog .upgrade-button {
    background-color: var(--add-to-fav-limit-dialog-upgrade-btn-bg);
    color: var(--add-to-fav-limit-dialog-upgrade-btn-text);
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: bold;
    padding: 12px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.poem-limit-dialog .upgrade-button:hover {
    background-color: var(--add-to-fav-limit-dialog-upgrade-btn-hover-bg);
}

/* Style to show the dialog */
.poem-limit-dialog-overlay.visible {
    visibility: visible;
    opacity: 1;
}

/* --- End of Poem Limit Dialog Styles --- */

/* REPLACE/ADD THESE RULES INSIDE YOUR @media (orientation: portrait), (max-width: 768px) { ... } BLOCK IN main.css */

@media (orientation: portrait), (max-width: 768px) {
  

    /* Show the mobile sidebar toggle button ONLY in portrait/mobile */
    #mobile-sidebar-toggle {
        display: flex; /* Show the floating toggle button */
    }

    /* Sidebar styles for mobile (initially hidden, slides in) */
    .sidebar {
        width: 100px; /* Define width when open */
        right: -250px; /* Initially hidden off-screen to the right (same as its width) */
        /* Keep display: flex for its internal layout */
        box-shadow: -5px 0 15px rgba(0,0,0,0.3); /* Shadow on the side of the sidebar when open */
        transition: right 0.3s ease; /* Smooth transition for slide effect */
        /* It is fixed and layers above content, as requested */
        position: fixed; /* Ensure it stays fixed */
        top: 0;
        height: 100vh;
        z-index: 1001; /* Ensure it's above everything else */
    }

    /* Class added by JS when sidebar is open */
    .sidebar.open {
        right: 0 !important; /* Slide into view */
    }
  
#overlay.visible {
    opacity: 0.5 !important;
    visibility: visible !important;
    /* TEMPORARY DEBUGGING AID: Add a bright, semi-transparent color for testing.
       If you see this color, it means the 'visible' class is being applied
       and the overlay is rendering. REMOVE THIS LINE ONCE IT WORKS. */
    background-color: black !important; /* Bright cyan, semi-transparent */
}
  
  .tab-content {
    margin-right: 0px;
    padding: 20px;
}
  
   .navbar {
        right: 0;
    }

    .upgrade-button {
        padding: 10px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex; /* IMPORTANT: Must be flex for icon centering */
        align-items: center; /* Vertically center children */
        justify-content: center; /* Horizontally center children */
        flex-shrink: 0;
        margin-left: auto;
        margin-right: 10px;
        /* Ensure background-color is set (e.g., gold from your theme) */
    }

    /* Target the crown icon directly for fine-tuning */
    .upgrade-button i {
        /* Reset any default margins/padding that might cause offset */
        margin: 0;
        padding: 0;
        display: block; /* Treat as block for more reliable transform */

        /* CRITICAL: Use transform to visually nudge the icon */
        transform: translateY(1px); /* Adjust this value! Positive moves down, negative moves up */
        
        font-size: 1.2em; /* Keep your desired icon size */
        color: black; /* Your desired icon color for contrast */
    }
    /* 4. Adjust the margins to position the buttons near the profile icon */
    .navbar .upgrade-button,
    .navbar .profile-button {
        margin-left: 10px;
    }
    
    /* 5. Remove the right margin from the profile button for mobile view */
    .profile-button {
        margin-right: 0;
    }

    /* 6. Ensure the menu icon stays away from the logo and doesn't shrink */
    .menu-icon {
        margin-right: 20px;
    }

  #create {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        align-items: flex-start;
    }

    /* Header for Create Tab (H2 + Mobile +Create Button) */
    .create-tab-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    /* Mobile + Create Button Positioning and Styling */
    #create-poem-button-mobile {
        display: block; /* Show this button on mobile */
        margin-left: auto; /* Push it to the right */
        padding: 8px 15px;
        font-size: 1em;
        border-radius: 50px;
        flex-shrink: 0;
        white-space: nowrap; /* Prevent button text from wrapping */
    }

    #create-poem-button-desktop {
        display: none; /* Hide the desktop button on mobile */
    }

    /* Poet Dashboard Header (#poet-header) */
    #poet-dashboard #poet-header {
        display: flex;
        flex-wrap: wrap; /* IMPORTANT: Allows greeting to wrap to the next line */
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    /* Poet Greeting (#poet-greeting) */
    #poet-greeting {
        font-size: 1.8em;
        white-space: normal; /* CRITICAL: Allows text to wrap naturally */
        overflow-wrap: break-word; /* Ensures long words break if needed */
        flex-grow: 1;
        flex-shrink: 1; /* Allows it to shrink and wrap */
        min-width: 0; /* Prevents overflow issues in flex container */
        margin-right: 10px; /* Space between greeting and button */
    }

    /* Poems List Container (#poem-list) - The ONLY horizontal scroll */
    #poet-dashboard #poem-list {
        display: flex; /* Arrange poem items horizontally */
        flex-direction: row; /* Explicitly set to a horizontal row */
        overflow-x: auto; /* Enable horizontal scrolling for this container */
        overflow-y: hidden; /* Prevent vertical scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        padding: 10px 0; /* Padding inside the scrollable area */
        gap: 15px; /* Space between each poem item */
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--border-color);
        background-color: var(--poem-list-bg);
        /* You may need to adjust this max-height for your specific layout */
        max-height: calc(100vh - 250px);
    }

    /* Individual Poem Items (.poem-item) */
    .poem-item {
        display: flex;
        flex-direction: column; /* Stack title, status, and buttons vertically */
        justify-content: space-between;
        align-items: flex-start;
        flex-shrink: 0; /* CRITICAL: Prevents poem items from shrinking horizontally */
        min-width: 250px; /* Set a minimum width for each card to be readable */
        width: 250px; /* Preferred width for a card */
        padding: 12px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background-color: var(--card-bg);
        color: var(--text-color);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
    }

    /* Poem Title within each .poem-item */
    .poem-item .poem-title {
        white-space: normal; /* CRITICAL: Allows title text to wrap to the next line */
        overflow-wrap: break-word; /* Ensures long words break */
        overflow: hidden; /* Hides any remaining overflow after wrapping */
        text-overflow: ellipsis; /* Adds ellipsis if content still overflows after wrapping */
        max-width: 100%; /* Ensures it takes full width of the parent container */
        margin-bottom: 8px;
        font-size: 1.1em;
        font-weight: bold;
        line-height: 1.4;
    }

    /* Poem Status and Action Buttons within each .poem-item */
    .poem-item .poem-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-top: 10px;
    }

    /* Navigation Buttons (Up/Down) below the scrollable list */
    #navigation-buttons {
        position: sticky; /* Stick to the bottom of the visible area */
        bottom: 0;
        background-color: var(--poem-list-bg);
        padding: 10px 0;
        width: 100%;
        box-sizing: border-box;
        z-index: 2; /* Ensure it's above the poem list scrollbar */
        border-top: 1px solid var(--border-color);
    }
  
    /* Editor Containers - Make them fully responsive on mobile */
    #text-editor,
    #edit-text-editor {
        width: 100%; /* Take full width of its parent */
        max-width: 100%; /* Ensure it doesn't exceed 100% */
        margin: 20px auto; /* Adjust vertical margin, center horizontally */
        padding: 10px; /* Reduced padding for mobile */
        box-sizing: border-box; /* Include padding in width */
    }

    /* Editor Content Area */
    .editor-content {
        padding: 10px; /* Ensure content itself has padding, not just the outer container */
        box-sizing: border-box;
    }

    /* Poem Header Image Upload Section - Fix for aspect ratio and responsiveness */
    #createPoemImageUploadSection,
    #editPoemImageUploadSection {
        width: 100% !important; /* Override inline Tailwind fixed width to be fully responsive */
        max-width: 100%; /* Ensure it doesn't exceed 100% of its parent */
        height: 0; /* Important: Set height to 0 for padding-top hack */
        padding-top: calc(100% / (520 / 240)); /* Calculate padding-top based on the 520x240 aspect ratio */
                                              /* (height / width) * 100% = (240 / 520) * 100% = 46.15% */
        position: relative; /* Needed for absolute positioning of children */
        overflow: hidden; /* Hide anything that goes outside its bounds */
        margin: 20px auto; /* Adjust vertical margin, center horizontally */
        /* You can add a temporary border here for debugging its dimensions */
        /* border: 2px solid red !important; */ 
    }

    /* Content wrapper inside the image upload section (icon, text) */
    .poem-image-upload-section .fas,
    .poem-image-upload-section p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%; /* Take full width of its parent */
        box-sizing: border-box;
        padding: 1rem; /* Adjust padding for inner content */
        text-align: center;
    }

    /* If you have an <img> tag inside for preview, ensure it scales too */
    .poem-image-upload-section img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Cover the area, cropping if necessary */
        border-radius: inherit;
    }


    /* Adjust input fields to be responsive */
    .editor-content input[type="text"],
    .editor-content textarea,
    .editor-content select {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 15px; /* Adjust spacing */
    }

    /* Adjust button container for centering */
    .button-center-container {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: 20px;
    }

    /* Adjust editor header buttons */
    .editor-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        padding: 0 10px; /* Add some horizontal padding */
        box-sizing: border-box;
    }

    .editor-header button {
        padding: 8px 12px;
        font-size: 0.9em;
    }
   /* Main greeting card */
    .poet-centre-main-card {
        height: 120px;
        padding: 0 30px;
        font-size: 1.5em;
        text-align: left;
        justify-content: flex-start;
        width: auto; /* Revert to default desktop width behavior */
    }
    #dynamic-greeting {
        white-space: nowrap; /* Prevent wrapping on desktop */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Section cards (Analytics, Prompts, Monetization) */
    .poet-centre-section-card {
        height: 80px;
        padding: 0 20px;
        width: 60%; /* Revert to desktop width */
        max-width: 600px; /* Keep max width for consistency */
        flex-wrap: nowrap; /* Prevent wrapping on desktop */
        justify-content: initial; /* Revert flex alignment */
    }
    .poet-centre-section-card .card-icon {
        font-size: 30px;
    }
    .poet-centre-section-card .card-title {
        font-size: 1.1em;
        margin-right: 0; /* No explicit margin needed if flex manages it */
        white-space: nowrap; /* Prevent wrapping on desktop */
        overflow: hidden;
        text-overflow: ellipsis;
        flex-grow: 1; /* Allow title to grow and take space on desktop */
    }
    .poet-centre-section-card .card-arrow-container {
        margin-left: auto; /* Push to right on desktop */
    }
    .poet-centre-section-card .card-arrow-circle {
        width: 40px;
        height: 40px;
    }
    .poet-centre-section-card .card-arrow-icon {
        font-size: 20px;
    }

    /* Analytics / Prompts / Monetization Sub-Sections */
    .poet-centre-sub-section {
        margin-top: 30px;
        padding: 0; /* Remove horizontal padding */
    }
    .back-to-poet-centre-btn {
        width: auto; /* Revert to auto width */
        text-align: left; /* Revert text alignment */
    }
    .sub-section-title, .sub-section-inner-title {
        font-size: 1.5em;
        margin-bottom: 15px;
    }
    .analytics-timeframe-section,
    .prompts-tips-container,
    .monetization-progress-container,
    .monetization-faq-accordion {
        width: 80%; /* Revert to desktop width */
        margin: 0 auto; /* Keep centered */
        padding: 0; /* Remove internal padding */
    }

    /* Analytics Stat Cards */
    .analytics-stat-card {
        padding: 15px;
        text-align: left; /* Revert to left align */
    }
    .stat-card-title {
        font-size: 1.1em;
        margin-bottom: 10px;
    }
    .stat-card-value {
        font-size: 2em;
    }
    .stat-poem-details p {
        font-size: 0.9em;
    }

    /* Prompts Horizontal Scroll */
    .horizontal-scroll { /* Applied to prompts-horizontal-scroll and possibly others */
        display: flex; /* Keep flex display */
        overflow-x: auto; /* Keep horizontal scroll for desktop if desired */
        gap: 15px; /* Revert gap */
        padding: 10px 0; /* Keep padding */
        width: auto; /* Revert width */
        box-sizing: content-box; /* Revert */
    }
    .prompt-card {
        flex: 0 0 250px; /* Revert to desktop fixed width */
        width: 250px;
        padding: 15px;
        box-sizing: content-box;
    }
    .prompt-card-title {
        font-size: 1.17em; /* Revert to H5 default or specific desktop size */
    }
    .prompt-card-content {
        font-size: 0.9em;
        white-space: normal; /* Keep normal if multi-line is desired on desktop */
        overflow-wrap: normal;
    }

    /* Accordion Items */
    .accordion-header {
        padding: 15px 20px;
    }
    .accordion-title {
        font-size: 1.1em;
    }
    .accordion-content {
        padding: 0 20px 15px;
    }
    .accordion-content p {
        font-size: 0.95em;
    }

    /* Monetization Progress */
    #follower-count-display {
        font-size: 1em;
    }
    .apply-monetization-btn-container {
        margin-bottom: 30px;
    }
}