:root {
    --background-color-light: #f4f4f4;
    --text-color-light: #333;
    --card-background-light: #fff;
    --card-border-light: #ddd;
    --header-background-light: #e5e6e6;
    --header-text-light: #2b6fa7; /* Brierly Hill heading text */
    --nav-link-light: #559fbf;
    --button-background-light: #5cb85c;
    --button-text-light: white;
    --button-hover-light: #93be97;
    --input-border-light: #ddd;
    --link-color-light: #007bff;
    --link-hover-light: #0056b3;
    --icon-button-color-light: #555;
    --icon-button-hover-light: #333;
    --message-error-bg-light: #ffebeb;
    --message-error-text-light: red;
    --message-success-bg-light: #e6ffe6;
    --message-success-text-light: green;
    --comment-bg-light: #f9f9f9;
    --hr-color-light: #eee;
    --background-color-dark: #121212;
    --text-color-dark: #e0e0e0;
    --card-background-dark: #1e1e1e;
    --card-border-dark: #333;
    --header-background-dark: #18181a; /* Darker header */
    --header-text-dark: #70a9d1; /* Lighter blue for dark mode */
    --nav-link-dark: #8ab4f8;
    --button-background-dark: #3a7a3a; /* Darker green */
    --button-text-dark: #e0e0e0;
    --button-hover-dark: #2e602e;
    --input-border-dark: #444;
    --link-color-dark: #8ab4f8;
    --link-hover-dark: #a3c9f8;
    --icon-button-color-dark: #bbb;
    --icon-button-hover-dark: #ddd;
    --message-error-bg-dark: #5c2b29;
    --message-error-text-dark: #ffcdd2;
    --message-success-bg-dark: #2e4b32;
    --message-success-text-dark: #c8e6c9;
    --comment-bg-dark: #2a2a2a;
    --hr-color-dark: #333;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--background-color-light);
  color: var(--text-color-light);
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

body.dark-mode {
    background-color: var(--background-color-dark);
    color: var(--text-color-dark);
}

#page-content-container {
    padding-top: 80px; /* Aligns content below the new fixed header */
    width: 90%;
    max-width: 900px;
    margin: auto;
}

#main-header {
    background: var(--header-background-light);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    height: 70px;
    box-sizing: border-box;
}
body.dark-mode #main-header {
    background: var(--header-background-dark);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.logo-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    height: 56px;
    width: auto;
}

.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}
.logo-nav a {
    text-decoration: none;
}

.group-name-overlay {
    font-size: 17px;
    font-weight: bold;
    color: #3d8ab4; /* A blue color sampled from the image */
    margin-top: -24px; /* Pull the text up under the main logo */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    letter-spacing: -1.5px; /* Brings letters closer together */
}

body.dark-mode .group-name-overlay {
    color: #d78649;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

#post-stream-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

#posts-view-title {
    margin: 0;
    font-size: 1.2em;
}

.container {
  width: 80%;
  max-width: 900px;
  margin: auto;
  overflow: hidden;
  padding: 20px;
}

header {
  background: var(--header-background-light);
  /* color: #ffffff; */ /* Text color will be inherited or set by specific elements */
  /* padding: 1rem 0; */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: anchor-center;
  transition: background-color 0.3s;
}
body.dark-mode header {
    background: var(--header-background-dark);
}

header h1 { /* This style might not be used if .heading-text is primary */
  margin: 0;
  color: var(--header-text-light);
}
body.dark-mode header h1 {
    color: var(--header-text-dark);
}

header nav a {
    color: var(--nav-link-light);
    text-decoration: none;
    margin: 0 10px;
}
body.dark-mode header nav a {
    color: var(--nav-link-dark);
}

header nav a:hover {
    text-decoration: underline;
}

header nav a.nav-icon-link {
    display: inline-flex; /* Helps align SVG and hidden text if it were visible */
    align-items: center;
    text-decoration: none; /* Remove underline from icon link if not desired */
}

header nav a.nav-icon-link:hover svg {
    stroke: var(--link-hover-light); /* Example hover effect: change icon stroke color */
}
body.dark-mode header nav a.nav-icon-link:hover svg {
    stroke: var(--link-hover-dark);
}

header nav .nav-icon {
    /* SVG inherits stroke color from 'currentColor' which is link color */
    /* Adjust size if needed, though 24x24 from SVG attributes is often good */
    vertical-align: middle; /* Helps with alignment if there were adjacent text */
}

/*
.nav-icon-label {
    // Visually hide the label, but keep it accessible
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; // Added for better hiding
    border: 0;
}
*/

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 10px;
  /* margin-bottom: 10px; */
  border: 1px solid var(--input-border-light);
  border-radius: 5px;
  box-sizing: border-box;
  background-color: var(--card-background-light); /* Match card bg for inputs */
  color: var(--text-color-light);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode textarea {
    border-color: var(--input-border-dark);
    background-color: var(--card-background-dark);
    color: var(--text-color-dark);
}

button, input[type="submit"] {
  background: #3aa9db;
  color: var(--button-text-light);
  padding: 5px 6px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s;
}
body.dark-mode button, body.dark-mode input[type="submit"] {
    /* background: var(--button-background-dark); */
    color: #ffffff;
}

.post-actions button {
    margin-right: 10px;
    background-color: var(--background-color-light); /* Lighter than main bg */
    color: var(--text-color-light);
    font-size: 0.9em;
}
body.dark-mode .post-actions button {
    background-color: var(--card-background-dark); /* Slightly different from card for contrast */
    color: var(--text-color-dark);
}

.post-actions button:hover {
    background-color: #e0e0e0; /* Keep specific or use a variable */
}
body.dark-mode .post-actions button:hover {
    background-color: #383838;
}

.post-actions{
    display: flex;
    align-items: center;
}

button:hover, input[type="submit"]:hover {
  background: var(--button-hover-light);
}
body.dark-mode button:hover, body.dark-mode input[type="submit"]:hover {
    /* background: var(--button-hover-dark); */
}

.error-message {
  color: var(--message-error-text-light);
  background-color: var(--message-error-bg-light);
  border: 1px solid var(--message-error-text-light);
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
}
body.dark-mode .error-message {
    color: var(--message-error-text-dark);
    background-color: var(--message-error-bg-dark);
    border-color: var(--message-error-text-dark);
}

.success-message {
  color: var(--message-success-text-light);
  background-color: var(--message-success-bg-light);
  border: 1px solid var(--message-success-text-light);
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
}
body.dark-mode .success-message {
    color: var(--message-success-text-dark);
    background-color: var(--message-success-bg-dark);
    border-color: var(--message-success-text-dark);
}

/* Basic Card Styling (will be enhanced in cards.css) */
.post-card {
  background: var(--card-background-light);
  border: 1px solid var(--card-border-light);
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.3s, border-color 0.3s;
}
body.dark-mode .post-card {
    background: var(--card-background-dark);
    border-color: var(--card-border-dark);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Darker shadow for dark mode */
}

.post-card .author {
  font-weight: bold;
  color: var(--text-color-light); /* Use main text color */
  margin-bottom: 5px;
}
body.dark-mode .post-card .author {
    color: var(--text-color-dark);
}

.post-card .author a.author-link {
    color: var(--link-color-light); /* Standard link color */
    text-decoration: none;
}
body.dark-mode .post-card .author a.author-link {
    color: var(--link-color-dark);
}

.post-card .author a.author-link:hover {
    text-decoration: underline;
}
.post-card .author .account-type-badge {
    font-size: 0.8em;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 5px;
    background-color: #eee; /* Keep specific or make variable */
    color: #333;
}
body.dark-mode .post-card .author .account-type-badge {
    background-color: #444;
    color: #ccc;
}

.post-card .author .company {
    background-color: #e0f7fa; /* Light blue for company */
    color: #00796b;
}
body.dark-mode .post-card .author .company {
    background-color: var(--button-background-dark);
}

.post-card .timestamp {
  font-size: 0.8em;
  color: #888; /* Keep specific or make variable */
  margin-bottom: 10px;
}
body.dark-mode .post-card .timestamp {
    color: #aaa;
}

.post-card .content {
  margin-bottom: 10px;
}
.post-card img.post-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-top: 10px;
}
.post-card .youtube-embed {
    margin-top: 10px;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}
.post-card .youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.post-actions button {
    margin-right: 10px;
    background-color: #f0f0f0; /* Specific light mode color */
    color: #333;
    font-size: 0.9em;
}
body.dark-mode .post-actions button {
    background-color: #2c2c2c; /* Specific dark mode color */
    color: #ccc;
}

.post-actions button:hover {
    background-color: #e0e0e0;
}
body.dark-mode .post-actions button:hover {
    background-color: #383838;
}

.post-actions .upvoted {
    background-color: #d4edda; /* Light green for upvoted */
    color: #155724;
}
body.dark-mode .post-actions .upvoted {
    background-color: #2a4a34; /* Darker green for upvoted in dark mode */
    color: #a5d6a7;
}

.post-actions .icon-action-button {
    display: inline-flex; /* Align icon and count horizontally */
    align-items: center;  /* Vertically center icon and count */
    gap: 5px;             /* Space between icon and count */
    /* Inherits other styles like padding, font-size from .post-actions button */
}

/* Optional: if you need to specifically style the icon itself */
/*
.post-actions .icon-action-button .action-icon {
    // Styles for the SVG icon if needed
}
*/

.comments-section {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--hr-color-light);
}
body.dark-mode .comments-section {
    border-top-color: var(--hr-color-dark);
}

.comment {
    background-color: var(--comment-bg-light);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    transition: background-color 0.3s;
}
body.dark-mode .comment {
    background-color: var(--comment-bg-dark);
}

.comment .author {
    font-size: 0.9em;
    color: var(--text-color-light);
}
body.dark-mode .comment .author {
    color: var(--text-color-dark);
}

.comment .timestamp {
    font-size: 0.8em;
    color: #888; /* Keep specific or make variable */
}
body.dark-mode .comment .timestamp {
    color: #aaa;
}

.comment .content {
    margin-bottom: 5px;
    color: var(--text-color-light);
}
body.dark-mode .comment .content {
    color: var(--text-color-dark);
}

hr {
    border: none;
    border-top: 1px solid var(--hr-color-light);
    margin: 20px 0;
}
body.dark-mode hr {
    border-top-color: var(--hr-color-dark);
}

/* Authentication Form Specifics */
.auth-container {
    background-color: var(--card-background-light);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 40px auto;
    transition: background-color 0.3s;
}
body.dark-mode .auth-container {
    background-color: var(--card-background-dark);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.auth-form h2 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-color-light);
}
body.dark-mode .auth-form h2 {
    color: var(--text-color-dark);
}

.auth-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-color-light);
}
body.dark-mode .auth-form label {
    color: var(--text-color-dark);
}

.auth-form p {
    text-align: center;
    margin-top: 15px;
}
.auth-form p a {
    color: var(--link-color-light);
    text-decoration: none;
}
body.dark-mode .auth-form p a {
    color: var(--link-color-dark);
}

#company-fields {
    display: none; /* Hidden by default */
}

.file-input-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.file-input-container label { /* This rule is no longer used for image upload but kept for YouTube URL */
    margin-right: 10px;
    /* Adjust as needed */
}

#image-preview {
    border: 1px solid #ddd;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    border-radius: 4px; /* Optional: rounded corners for preview */
}

.icon-button {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    display: inline-flex; /* Aligns SVG nicely */
    align-items: center;
    justify-content: center;
    color: var(--icon-button-color-light); /* Icon color */
    transition: color 0.3s;
}
body.dark-mode .icon-button {
    color: var(--icon-button-color-dark);
}

.icon-button:hover {
    color: var(--icon-button-hover-light); /* Icon color on hover */
}
body.dark-mode .icon-button:hover {
    color: var(--icon-button-hover-dark);
}

.icon-button svg {
    width: 24px; /* Control icon size */
    height: 24px;
}

/* Adjustments for create post form elements */
#create-post-form .file-input-container,
#create-post-form div:has(> #post-youtube-url) {
    margin-bottom: 15px; /* Add some space below these inputs */
}

#create-post-form textarea {
    /* margin-bottom: 10px; */ /* Ensure space below textarea */
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.post-options-toolbar {
    display: flex;
    align-items: center;
    gap: 10px; /* Adds space between icons and preview */
    margin-bottom: 10px;
}

#create-post-form #youtube-input-wrapper {
    margin-bottom: 15px;
}

.post-submission-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-media-options {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between icons and preview image */
}

.submit-post-button {
    /* Inherits general button styles. Add specific overrides if needed. */
    /* For example, if you want to ensure it doesn't grow: flex-shrink: 0; */
}

/* Search Bar Styling */

#search-section input[type="search"] {
    flex-grow: 1; /* Allows the search input to take up available space */
    margin-bottom: 0; /* Override default margin-bottom for inputs */
    line-height: 31px;
    width: 170px;
}

#search-section select {
    margin-bottom: 0; /* Override default margin-bottom for inputs */
    /* You might want to set a specific width or allow it to size by content */
    padding: 9px; /* Match padding of input for consistent height if needed */
}

#search-section button {
    margin-bottom: 0; /* Override default margin-bottom for buttons */
    /* flex-shrink: 0; /* Prevent button from shrinking if space is tight */
}

/* Style for link-like buttons */
.link-button {
    background: none;
    border: none;
    color: var(--link-color-light); 
    text-decoration: underline;
    cursor: pointer;
    padding: 0 5px; /* Adjust padding as needed */
    font-size: inherit; /* Inherit font size from parent */
    margin-left: 5px; /* Space from the "Go" button */
}
body.dark-mode .link-button {
    color: var(--link-color-dark);
}

.link-button:hover {
    color: var(--link-hover-light);
}
body.dark-mode .link-button:hover {
    color: var(--link-hover-dark);
}

/* Ensure the "Post" and "Go" buttons align their right edges.
   This relies on their parent containers (.post-submission-controls and #search-section)
   being full-width within their shared parent (.container) and the flex properties
   pushing these buttons to the right. This rule explicitly removes any right margin
   from the buttons themselves, which could cause misalignment. */
.submit-post-button,
#search-btn {
    margin-right: 0; /* Explicitly ensure no right margin */
}

/* General style for icon action buttons (used for both posts and comments) */
.icon-action-button {
    display: inline-flex;
    align-items: center;
    gap: 4px; /* Adjusted gap slightly */
    /* Base button styles (background, color, padding) will come from more specific rules
       like .post-actions button or .comment-actions button */
}

/* Styling for buttons within comment actions */
.comment-actions {
    margin-top: 5px;
    display: flex; /* Optional: if you want multiple comment actions in a row */
    align-items: center;
}

.comment-actions button {
    margin-right: 8px;
    background-color: #f0f0f0; /* Specific light mode */
    color: #333;
    font-size: 0.8em; /* Slightly smaller for comments */
    padding: 3px 7px; /* Adjusted padding */
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
body.dark-mode .comment-actions button {
    background-color: #2c2c2c; /* Specific dark mode */
    color: #ccc;
}

.comment-actions button:hover {
    background-color: #e0e0e0;
}
body.dark-mode .comment-actions button:hover {
    background-color: #383838;
}

/* General upvoted state for any button with this class */
button.upvoted { /* Increased specificity */
    background-color: #d4edda !important; /* Using !important to ensure override if needed */
    color: #155724 !important;
}
body.dark-mode button.upvoted {
    background-color: #2a4a34 !important;
    color: #a5d6a7 !important;
}

/* Ensure SVG icon within an upvoted button also changes color */
button.upvoted svg {
    stroke: #155724 !important; /* SVG uses currentColor, this makes it explicit */
}
body.dark-mode button.upvoted svg {
    stroke: #a5d6a7 !important;
}

.search-section {
    display: block;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.logo-container {

    width: 100%;
    height: 69px;
    margin: 0;
}
#nav-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    width: 100%;
}


.heading-container {
    display: flex;
    align-items: center;
    /* gap: 10px; */
    width: 100%;
    margin: 0;
    flex-direction: column;
}
.heading-text {
    font-size: 36px;
    font-weight: bold;
    color: var(--header-text-light);
    letter-spacing: -0.1rem;
    /* transform: translateY(-83px); */
    margin: 0;
    position: absolute;
    top: 80px;
    transition: color 0.3s;
}
body.dark-mode .heading-text {
    color: var(--header-text-dark);
}

/* Card Swiper Styles */
#card-swiper-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
}

.post-stream {
    display: flex;
    transition: transform 0.3s ease-in-out;
    /* `gap` could be used, but margin on cards is safer for this transform-based approach */
}

.post-card {
    flex: 0 0 100%; /* Each card takes up 100% of the container width */
    box-sizing: border-box;
    height: fit-content; /* Allow card to size to its content */
    max-height: calc(100vh - 180px); /* But limit its height to the viewport minus headers/search */
    overflow-y: auto; /* Allow vertical scrolling within the card if content overflows max-height */
    margin: 0; /* Remove default margins that could interfere with alignment */
    /* Add padding back if it was removed by margin:0 */
    padding: 15px;
}

#main-content-area {
    position: relative;
}

#timeline-nav-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-bottom: 10px;
}

.day-shift-btn {
    background: none;
    border: 1px solid var(--input-border-light);
    color: var(--text-color-light);
    padding: 5px 15px;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 5px;
    transition: background-color 0.2s;
}
body.dark-mode .day-shift-btn {
    border-color: var(--input-border-dark);
}
.day-shift-btn:hover:not(:disabled) {
    background-color: var(--input-border-light);
}
body.dark-mode .day-shift-btn:hover:not(:disabled) {
    background-color: var(--input-border-dark);
}
.day-shift-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#timeline-container {
    flex-grow: 1;
    height: 50px;
    margin: 0 20px;
    position: relative;
    display: flex;
    align-items: center;
}

#timeline-bar {
    width: 100%;
    height: 10px;
    border-radius: 10px;
    /* night -> sunrise -> day -> sunset -> night */
    background: linear-gradient(to right, #000428, #004e92, #74b9ff, #fbc2eb, #f47c7c, #c33764, #1b262c);
}

#timeline-marker {
    position: absolute;
    left: 50%; /* Initial position, will be updated by JS */
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: left 0.3s ease-in-out;
}

#timeline-marker::before { /* The vertical line */
    content: '';
    position: absolute;
    bottom: 19px; /* Position below the marker */
    height: 5px;
    width: 2px;
    background-color: var(--text-color-light);
    z-index: -1; /* Behind the icon */
}
body.dark-mode #timeline-marker::before {
    background-color: var(--text-color-dark);
}

#timeline-icon {
    width: 34px;
    height: 34px;
    background-color: var(--background-color-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    border: 2px solid var(--text-color-light);
}
body.dark-mode #timeline-icon {
    background-color: var(--background-color-dark);
    border-color: var(--text-color-dark);
}

#timeline-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--text-color-light);
}
body.dark-mode #timeline-icon svg {
    fill: var(--text-color-dark);
}

#timeline-time {
    font-size: 0.9em;
    font-weight: bold;
}

/* Modal Styles */
#create-post-modal,
#create-event-modal,
#search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001; /* Higher than header */
}

.form-modal-section {
    background: var(--card-background-light);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 500px;
    position: relative; /* For positioning the close button */
}

body.dark-mode .form-modal-section {
    background: var(--card-background-dark);
}

#search-section-modal {
    background: var(--card-background-light);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

body.dark-mode #search-section-modal {
    background: var(--card-background-dark);
}

#search-section-modal h3 {
    margin-top: 0;
    text-align: center;
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--text-color-light);
    cursor: pointer;
}
body.dark-mode .modal-close-btn {
    color: var(--text-color-dark);
}

.post-card .timestamp {
    color: #666;
    font-size: 0.8em;
}

body.dark-mode .swipe-arrow:hover.right::before {
    border-left-color: var(--text-color-dark);
}

body.dark-mode .swipe-arrow {
    background: transparent;
}



.swipe-arrow {
    display: none; /* Hidden by default for mobile-first approach */
}

/* Show and style arrows only on larger screens */
@media (min-width: 768px) {
    .swipe-arrow {
        display: block; /* Make them visible on desktop */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 80%;
        width: 147px;
        background: transparent;
        border: none;
        font-size: 0;
        cursor: pointer;
        z-index: 20;
        outline: none; /* Ensure no focus rectangle */
    }

    .swipe-arrow:hover {
        background: transparent; /* Override generic button hover styles */
    }

    .swipe-arrow::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        transition: border-color 0.2s;
    }

    .swipe-arrow.left::before {
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-right: 20px solid var(--input-border-light);
        transform: translate(-150%, -50%);
    }

    .swipe-arrow.right::before {
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 20px solid var(--input-border-light);
        transform: translate(-50%, -50%);
    }
    body.dark-mode .swipe-arrow.left::before {
        border-right-color: var(--input-border-dark);
    }
    body.dark-mode .swipe-arrow.right::before {
        border-left-color: var(--input-border-dark);
    }

    .swipe-arrow:hover.left::before {
        border-right-color: var(--text-color-light);
    }
    .swipe-arrow:hover.right::before {
        border-left-color: var(--text-color-light);
    }

    body.dark-mode .swipe-arrow:hover.left::before {
        border-right-color: var(--text-color-dark);
    }
    body.dark-mode .swipe-arrow:hover.right::before {
        border-left-color: var(--text-color-dark);
    }
    
    body.dark-mode .swipe-arrow {
        background: transparent;
    }

    .swipe-arrow.left {
        left: -70px; /* Position outside the card swiper */
    }
    .swipe-arrow.right {
        right: -70px; /* Position outside the card swiper */
    }
}

.search-section {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    position: relative;
}

#mobile-swipe-nav {
    display: none; /* Hidden by default */
}

/* Mobile swipe navigation styling */
.mobile-swipe-nav {
    display: none; /* Hidden by default */
}

@media (max-width: 768px) {
    .mobile-swipe-nav {
        display: flex;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px;
        background-color: rgba(255, 255, 255, 0.9);
        z-index: 1001;
    }

    body.dark-mode .mobile-swipe-nav {
        background-color: rgba(43, 43, 43, 0.9);
    }

    .mobile-swipe-nav .swipe-arrow {
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        font-size: 0; /* Hide the text content */
    }

    .mobile-swipe-nav .swipe-arrow::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        transform: translate(-50%, -50%);
        transition: border-color 0.2s;
    }

    .mobile-swipe-nav .swipe-arrow.left::before {
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-right: 10px solid #666;
    }

    .mobile-swipe-nav .swipe-arrow.right::before {
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 10px solid #666;
    }

    body.dark-mode .mobile-swipe-nav .swipe-arrow.left::before {
        border-right-color: #ccc;
    }

    body.dark-mode .mobile-swipe-nav .swipe-arrow.right::before {
        border-left-color: #ccc;
    }

    .mobile-swipe-nav .swipe-arrow:hover.left::before {
        border-right-color: #333;
    }

    .mobile-swipe-nav .swipe-arrow:hover.right::before {
        border-left-color: #333;
    }

    body.dark-mode .mobile-swipe-nav .swipe-arrow:hover.left::before {
        border-right-color: #fff;
    }

    body.dark-mode .mobile-swipe-nav .swipe-arrow:hover.right::before {
        border-left-color: #fff;
    }

    /* Hide mobile navigation when comments are open */
    .comments-section[style*="display: block"] ~ .mobile-swipe-nav {
        display: none !important;
    }

    /* Hide mobile navigation when comments are open */
    body.comments-open .mobile-swipe-nav {
        display: none !important;
    }
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
    #main-content-area .swipe-arrow {
        display: none !important; /* Hide side arrows on mobile */
    }

    #mobile-swipe-nav {
        display: flex;
        justify-content: center;
        position: fixed;
        gap: 34px;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px;
        background-color: rgba(255, 255, 255, 0.9);
        z-index: 1001;
    }

    body.dark-mode #mobile-swipe-nav {
        background-color: rgba(43, 43, 43, 0.9);
    }
}

/* New Feature Star */
.icon-button-container {
    position: relative;
    display: inline-flex; /* Use inline-flex to align items properly */
    align-items: center;
}

.new-feature-star {
    position: absolute;
    top: -2px;
    right: -4px;
    font-size: 14px;
    color: gold;
    text-shadow: 0 0 3px rgba(0,0,0,0.7);
    pointer-events: none; /* Make sure the star doesn't interfere with clicks */
}

/* Video Modal */
#video-modal {
    position: fixed;
    z-index: 1002; /* Higher than other content */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Darker overlay */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
}

#video-modal .modal-content {
    position: relative;
    background-color: #1e1e1e; /* Dark background for the player */
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    max-width: 1280px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

#video-modal .modal-close-btn {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 40px;
    font-weight: bold;
    background-color: #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 35px;
    text-align: center;
    transition: color 0.3s, background-color 0.3s;
    cursor: pointer;
    z-index: 1003; /* Ensure it's on top of the video */
}

#video-modal .modal-close-btn:hover,
#video-modal .modal-close-btn:focus {
    color: #fff;
    background-color: #f44336; /* Red on hover */
    text-decoration: none;
}

#video-player-container {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    position: relative;
    background: #000;
}

#video-player-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Compound Icon Button for Audio Player */
.icon-button-compound {
    position: relative;
    overflow: visible;
}

.icon-button-compound .icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-button-compound .icon-overlay svg {
    display: block;
    width: 12px;
    height: 12px;
}

/* Play Icon styling */
#play-audio-btn .play-icon svg {
    fill: #4CAF50;
    stroke: #4CAF50;
}

/* Pause Icon styling */
#play-audio-btn .pause-icon svg {
    fill: #f44336;
    stroke: #f44336;
}

/* Toggle visibility based on .playing class */
#play-audio-btn .pause-icon {
    display: none;
}

#play-audio-btn.playing .play-icon {
    display: none;
}

#play-audio-btn.playing .pause-icon {
    display: inline-block;
}