/* Apply Noto Sans to the entire body */
body {
  font-family: "Noto Sans", sans-serif;
  /* Use CSS Variables for theme colors - Dark mode as default */
  --background-color: #2B2B2B;
  --text-color: #FFB300;
  --header-border-color: #2B2B2B;
  /* KEPT FOR REFERENCE, BUT NOT APPLIED TO HEADER */
  --modal-bg-color: rgba(0, 0, 0, 0.9);
  --modal-shadow-color: rgba(0, 0, 0, 0.5);
  --search-bg-color: #2B2B2B;
  --search-text-color: #FFB300;
  --search-placeholder-color: #d1d5db;
  --search-focus-ring-color: #3b82f6;
  /* Blue focus ring - consistent */
  --refresh-btn-bg: #FFB300;
  /* White pill */
  --refresh-btn-text: #111827;
  /* Dark text */
  --social-icon-color: #FFB300;
  --toggle-theme-icon-color: #FFB300; /* This variable is no longer strictly needed without the toggle */
  --load-more-bg: #FFB300;
  /* Default blue-600 */
  --load-more-hover-bg: #FFB300;
  /* Default blue-700 */
  --load-more-icon-color: white;
  /* Default white icon */
  --clear-search-icon-color: #d1d5db;
  /* Default gray for clear button */
  --clear-search-icon-hover-color: white;
  /* Default white on hover */
  /* Added header background variable */
  --header-bg-color: #2B2B2B;
  /* Dark mode default header background */
  /* Added header scrolled background variable */
  --header-scrolled-bg-color: rgba(43, 43, 43, 0.8);
  /* Semi-transparent dark for blur */
  /* Added RGB variables for fading effect - KEPT FOR REFERENCE BUT NOT USED BY ::AFTER */
   /* Added Back to Top button colors (using dark mode colors) */
  --back-to-top-bg: #FFB300;
  /* White button */
  --back-to-top-hover-bg: #FFB300;
  /* Lighter hover */
  --back-to-top-icon-color: #111827;
  /* Dark icon */
  /* Added Score background color (using dark mode colors) */
  --score-bg-color: rgba(255, 255, 255, 0.7);
  /* Light semi-transparent */
  --score-text-color: #111827;
  /* Dark text */
  /* Added Modal Navigation button colors (using dark mode colors) */
  --modal-nav-bg: rgba(255, 255, 255, 0.3);
  --modal-nav-hover-bg: rgba(255, 255, 255, 0.5);
  --modal-nav-icon: #111827;
  --modal-nav-disabled-icon: rgba(17, 24, 39, 0.3);

   /* Added Insta button colors (using dark mode colors) */
  --insta-text-color: #E1306C; /* Instagram pink/purple */
  --insta-hover-text-color: #FFB300; /* Slightly darker pink/purple */
  --insta-active-bg: #FFB300; /* Darker Instagram background when active */


  background-color: var(--background-color);
  color: var(--text-color);
}
/* Removed light-mode styles */
/* Removed body.dark styles - base body styles now use dark mode colors */

html {
  scroll-behavior: smooth;
}
/* Sticky Header Styling */
header {
  /* Tailwind classes sticky top-0 z-10 added in HTML */
  /* REMOVED shadow-md Tailwind class in HTML */
  /* Default header background (not scrolled) */
  background-color: var(--header-bg-color);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
  /* Add shadow here instead of Tailwind for more control if needed, or remove entirely as requested */
  box-shadow: none;
  /* Explicitly remove box-shadow */
  position: relative;
  /* Needed for pseudo-element positioning */
}
/* Header Scrolled State */
body.scrolled header { /* Apply styles when body has 'scrolled' class */
  background-color: var(--header-scrolled-bg-color);
  /* Use the semi-transparent variable */
  backdrop-filter: blur(8px);
  /* Apply blur effect */
  -webkit-backdrop-filter: blur(8px);
  /* Safari support */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Optional: Add a subtle shadow when scrolled */
  /* No justify-content here, controlled by child flex behavior */
}

/* Adjust flex item behavior when scrolled */
header > div:first-child { /* Left: Social Icons */
    /* Default (not scrolled) */
     flex-shrink: 0; /* Prevent shrinking */
}
body.scrolled header > div:first-child { /* Left: Social Icons - Scrolled state */
  flex-basis: auto;
  flex-grow: 0;
  margin-right: 1rem; /* Ensure a gap between social icons and the logo/site title div */
}

header > div:nth-child(2) { /* Middle: Header Logo */
  /* Default (not scrolled) */
  flex-grow: 1;
  justify-content: center; /* Center content in the middle div */
  flex-shrink: 0;
  display: flex; /* Ensure flex properties apply to its content */
  align-items: center;
}
body.scrolled header > div:nth-child(2) { /* Middle: Header Logo - Scrolled state */
  flex-basis: auto;
  flex-grow: 0; /* Prevent the middle div from growing */
  justify-content: flex-start; /* Keep internal content left-aligned */
  margin-left: 0.5rem; /* Added a small gap between social and logo/site title */
}

header > div:last-child { /* Right: Tabs, Search, Refresh */
  /* Default (not scrolled) */
  flex-shrink: 0;
  /* No justify-content needed here, Tailwind gap handles spacing */
}
body.scrolled header > div:last-child { /* Right: Tabs, Search, Refresh - Scrolled state */
  flex-basis: auto;
  flex-grow: 1; /* Allow the right section to take up remaining space */
  justify-content: flex-end; /* Keep items aligned to the end on the right */
  margin-left: auto; /* Push this div to the far right */
}

/* Styling for the site title */
.site-title {
  font-family: "Caveat", cursive;
  font-weight: 700;
  color: var(--background-color); /* Set color to site background color */
  /* Removed transition opacity/visibility */
  /* Removed scroll-dependent hiding rule */
}
/* Removed rule: body.scrolled .site-title { ... } */

/* Masonry Layout */
#gallery {
  column-count: 7;
  /* Adjust based on desired number of columns */
  column-gap: 1rem;
  padding: 1rem;
}
/* Gallery Images */
.gallery-image {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  display: block;
  position: relative;
  /* Initially blurred and slightly less visible */
  filter: blur(8px); /* Apply blur */
  opacity: 0.7; /* Reduce opacity */
  transition: filter 0.5s ease-out, opacity 0.3s ease, transform 0.3s ease; /* Transition filter and opacity */
  will-change: transform, opacity, filter;
}

.gallery-image.loaded {
  opacity: 1; /* Fully visible */
  filter: blur(0); /* Clear blur */
}

/* Hover effect on the container scales the image */
.gallery-item-container {
  position: relative;
  /* Needed for absolute positioning of title and score */
  cursor: pointer;
  /* Indicate it's clickable */
  margin-bottom: 1rem;
  /* Match margin-bottom of masonry items */
  border-radius: 0.5rem;
  /* Match border-radius */
  overflow: hidden;
  /* Hide anything overflowing the rounded corners */
  break-inside: avoid;
  /* Ensure the container breaks inside the column */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Add shadow to the container */
  display: block;
  /* Ensure it behaves as a block element in the column */
}
.gallery-item-container:hover .gallery-image {
  transform: scale(1.05);
}
/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--modal-bg-color);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  /* Initially hidden, controlled by script */
  display: none;
  /* Default state */
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}
/* Sync with index.html: Use .hidden class to control display */
.modal.hidden {
  display: none;
}
.modal:not(.hidden) {
  display: flex;
}
.modal img {
  max-height: 90vh;
  max-width: 90vw;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto;
  display: block;
  border-radius: 1rem;
  box-shadow: 0 8px 16px var(--modal-shadow-color);
}
/* Ultra HD Link */
#ultraHdLink {
  /* Updated to match Back to Top button colors */
  background-color: var(--back-to-top-bg);
  color: var(--back-to-top-icon-color);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 1rem;
  text-decoration: none;
  display: inline-block; /* Ensure padding/margin apply correctly */
}
#ultraHdLink:hover {
  /* Updated to match Back to Top button hover color */
  background-color: var(--back-to-top-hover-bg);
}
#ultraHdLink.disabled {
  background-color: #a1a1a1;
  cursor: not-allowed;
  color: #616161; /* Adjust disabled text color for visibility on gray */
}
/* Loading State for Gallery Container */
.gallery-loading {
  /* filter: blur(2px) brightness(0.8); Remove or adjust if blurring individual images */
  pointer-events: none; /* Still prevent clicks while loading */
}
/* Disabled Buttons */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Responsive Layout */
@media (max-width: 1200px) {
  #gallery {
    column-count: 3;
    /* Adjust column count for smaller screens */
  }
}
@media (max-width: 800px) {
  #gallery {
    column-count: 2;
    /* Adjust column count for smaller screens */
    column-gap: 0.5rem;
    padding: 0.5rem;
  }
  .gallery-item-container {
    margin-bottom: 0.5rem;
    /* Adjust margin for smaller screens */
    touch-action: manipulation;
  }
  /* Modal Tweaks */
  .modal img {
    max-width: 95vw;
    max-height: 80vh;
  }
  #ultraHdLink {
    padding: 14px 28px;
    font-size: 1.1rem;
  }
  /* Adjust modal navigation button positioning for smaller screens */
  .modal-nav-button {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    /* Adjust horizontal positioning */
    left: 1rem;
    right: 1rem;
  }
  #prevModalBtn {
    left: 1rem;
  }
  #nextModalBtn {
    right: 1.5rem;
  }
}
@media (max-width: 500px) {
  #gallery {
    column-count: 1;
    /* Single column on very small screens */
  }
  #loadMoreBtn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  #backToTopBtn {
    bottom: 0.75rem;
    right: 0.75rem;
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }
  /* Further adjust modal navigation button size for very small screens */
  .modal-nav-button {
    width: 35px;
    height: 35px;
    font-size: 1.3rem;
    /* Adjust horizontal positioning */
    left: 0.5rem;
    right: 0.5rem;
  }
  #prevModalBtn {
    left: 0.5rem;
  }
  #nextModalBtn {
    right: 0.5rem;
  }
}
/* Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Error state for images */
.gallery-image.error {
  background-color: #f8f9fa;
  border: 1px dashed #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #6c72757d;
  font-size: 0.8rem;
  aspect-ratio: 1 / 1;
  /* Give error state a default aspect ratio */
  filter: none; /* Remove blur on error state */
  opacity: 1; /* Ensure error state is visible */
}
.gallery-image.error::after {
  content: "Image failed to load";
}
/* Prevent zoom on touch */
.gallery-item-container {
  touch-action: manipulation;
}
/* Refresh Button Styling: White Pill Button */
#refreshBtn {
  /* Override default padding and border-radius from Tailwind */
  padding: 0.5rem 1rem!important;
  border-radius: 9999px!important;
  background-color: var(--refresh-btn-bg);
  border: none;
  /* Ensure no default border */
  color: var(--refresh-btn-text);
  display: flex;
  /* Arrange icon and text */
  align-items: center;
  gap: 0.5rem;
  /* Space between icon and text */
  transition: all 0.3s ease;
  cursor: pointer;
  /* Indicate it's clickable */
}
#refreshBtn:hover {
  /* Tailwind hover effect will be overridden here if needed */
  opacity: 0.8;
}
#refreshBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  /* Keep background and icon color the same when disabled */
}
/* Styling for the Load More button - Now Circular with Icon */
#loadMoreBtn {
  width: 50px;
  /* Set a fixed width */
  height: 50px;
  /* Set a fixed height */
  border-radius: 50%;
  /* Make it circular */
  /* Updated to match Back to Top button colors */
  background-color: var(--back-to-top-bg);
  color: var(--back-to-top-icon-color);
  /* Color for the icon */
  display: flex;
  /* Use flexbox to center the icon */
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  font-size: 1.5rem;
  /* Adjust icon size */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Optional: add a subtle shadow */
}
#loadMoreBtn:hover {
  /* Updated to match Back to Top button hover color */
  background-color: var(--back-to-top-hover-bg);
  opacity: 1;
  /* Ensure opacity is not reduced on hover if in loading state */
}
#loadMoreBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  /* Keep background and icon color the same when disabled */
}
/* Styling for image container and hover title */
.gallery-item-container {
  position: relative;
  /* Needed for absolute positioning of title and score */
  cursor: pointer;
  /* Indicate it's clickable */
  margin-bottom: 1rem;
  /* Match margin-bottom of masonry items */
  border-radius: 0.5rem;
  /* Match border-radius */
  overflow: hidden;
  /* Hide anything overflowing the rounded corners */
  break-inside: avoid;
  /* Ensure the container breaks inside the column */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Add shadow to the container */
  display: block;
  /* Ensure it behaves as a block element in the column */
}
.image-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  /* Semi-transparent dark background */
  color: white;
  padding: 0.5rem;
  font-size: 0.8rem;
  /* Keep font size reasonable */
  text-align: center;
  opacity: 0;
  /* Hidden by default */
  transition: opacity 0.3s ease;
  pointer-events: none;
  /* Allows clicks to pass through to the container */
  word-break: break-word;
  /* Break long words */
  z-index: 1;
  /* Ensure title is above the image */
}
.gallery-item-container:hover .image-title {
  opacity: 1;
  /* Visible on container hover */
}
/* Styling for the image score element */
.image-score {
  position: absolute;
  top: 0.5rem;
  /* Small padding from the top */
  left: 0.5rem;
  /* Small padding from the left */
  background-color: var(--score-bg-color);
  /* Use CSS variable for background */
  color: var(--score-text-color);
  /* Use CSS variable for text color */
  padding: 0.25rem 0.5rem;
  /* Padding around text and icon */
  border-radius: 0.25rem;
  /* Small border radius */
  font-size: 0.9rem;
  /* Font size for the score */
  display: flex;
  /* Align icon and text */
  align-items: center;
  justify-content: center; /* Center content within score */
  gap: 0.25rem;
  /* Space between icon and text */
  opacity: 0;
  /* Hidden by default */
  transition: opacity 0.3s ease;
  pointer-events: none;
  /* Allows clicks to pass through */
  z-index: 1;
  /* Ensure score is above the image */
}
/* Show score on container hover */
.gallery-item-container:hover .image-score {
  opacity: 1;
}

/* Add style for the burning orange flame icon within the score */
.image-score i.fas.fa-fire {
    color: #ff7f00; /* Set flame icon color to burning orange */
}


/* Styling for the Back to Top button */
#backToTopBtn {
  display: flex;
  /* Use flex to center content */
  align-items: center;
  justify-content: center;
  position: fixed;
  /* Fixed position on the screen */
  bottom: 1.5rem;
  /* 1.5rem from the bottom */
  right: 1.5rem;
  /* 1.5rem from the right */
  width: 40px;
  /* Fixed width */
  height: 40px;
  /* Fixed height */
  border-radius: 50%;
  /* Make it circular */
  background-color: var(--back-to-top-bg);
  /* Use CSS variable for background */
  color: var(--back-to-top-icon-color);
  /* Use CSS variable for icon color */
  border: none;
  cursor: pointer;
  opacity: 0;
  /* Hidden by default */
  visibility: hidden;
  /* Hidden by default */
  transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
  /* Smooth transition */
  z-index: 1000;
  /* Ensure it's above most content, but below modal */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Optional shadow */
  font-size: 1.2rem;
  /* Icon size */
}
#backToTopBtn:hover {
  background-color: var(--back-to-top-hover-bg);
  /* Use CSS variable for hover background */
}
/* Class to show the button - managed by JavaScript */
#backToTopBtn.show {
  opacity: 1;
  visibility: visible;
}
/* Styling for Modal Navigation Buttons */
.modal-nav-button {
  position: absolute;
  top: 50%;
  /* Vertically center */
  transform: translateY(-50%);
  /* Adjust to true center */
  width: 50px;
  /* Button size */
  height: 50px;
  border-radius: 50%;
  /* Circular shape */
  background-color: var(--modal-nav-bg);
  /* Semi-transparent background */
  color: var(--modal-nav-icon);
  /* Icon color */
  border: none;
  cursor: pointer;
  display: flex;
  /* Center icon */
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  /* Icon size */
  z-index: 1001;
  /* Above image and score, below close button */
  transition: background-color 0.2s ease, opacity 0.2s ease;
  /* Left/Right positioning is handled by specific IDs */
}
/* Specific positioning for Previous/Next buttons */
#prevModalBtn {
  left: 1.5rem;
  /* Distance from left edge */
}
#nextModalBtn {
  right: 1.5rem;
  /* Distance from right edge */
}
/* Hover effect */
.modal-nav-button:hover {
  background-color: var(--modal-nav-hover-bg);
}
/* Disabled state */
.modal-nav-button:disabled {
  opacity: 0.3;
  /* Fade out when disabled */
  cursor: not-allowed;
  color: var(--modal-nav-disabled-icon);
  /* Lighter icon in disabled state */
}


/* From Uiverse.io by Pradeepsaranbishnoi - Applied to Tabs */
.tabs {
  display: flex;
  position: relative;
  background-color: #FFB300; /* Keep white background from example */
  box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
  padding: 0.75rem;
  border-radius: 99px; /* Keep pill shape */
}

.tabs * {
  z-index: 2;
}

.tabs-container input[type="radio"] {
  display: none; /* Hide the actual radio button */
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px; /* Keep reduced height */
  width: 50px; /* Revert to original width */
  font-size: .8rem; /* Font size remains the same */
  color: black; /* Keep black text from example */
  font-weight: 500;
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.15s ease-in;
  text-transform: uppercase; /* Added uppercase text */
}

/* Notification styles - keeping them in case needed later */
.notification {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .8rem;
  height: .8rem;
  position: absolute;
   /* Adjust positioning relative to the tab if used */
  font-size: 10px;
  border-radius: 50%;
  margin: 0px;
  background-color: #e6eef9; /* Light background */
  transition: 0.15s ease-in;
}

/* Styles when a radio button is checked - applies to the label */
.tabs-container input[type="radio"]:checked + label {
  color: black; /* Blue text for active tab */
}

/* Styles for the notification badge when the corresponding tab is active */
/* Keeping this rule in case notifications are added later */
.tabs-container input[type="radio"]:checked + label > .notification {
  background-color: #185ee0; /* Blue background for active notification */
  color: #fff; /* White text for active notification */
  margin: 0px;
}

/* Glider positioning based on checked radio button */
.glider {
  position: absolute;
  display: flex;
  height: 18px; /* Keep reduced height */
  width: 50px; /* Revert to original width */
  background-color: #e6eef9; /* Light background from example */
  z-index: 1;
  border-radius: 99px;
  transition: 0.25s ease-out;
}

/* Glider positions - adjust translateX based on tab width (50px) and number of tabs (3) */
.tabs-container input[id="radio-all"]:checked ~ .glider {
  transform: translateX(0); /* Position under the first tab */
}

.tabs-container input[id="radio-nsfw"]:checked ~ .glider {
  transform: translateX(100%); /* Position under the second tab (50px * 1) */
}

/* Hide the Instagram tab */
#radio-insta,
label[for="radio-insta"] {
  display: none !important;
}

/* Adjust glider positions for 2 tabs instead of 3 */
.tabs-container input[id="radio-all"]:checked ~ .glider {
  transform: translateX(0); /* Position under the first tab */
}

.tabs-container input[id="radio-nsfw"]:checked ~ .glider {
  transform: translateX(100%); /* Position under the second tab (50px * 1) */
}


@media (max-width: 700px) {
  .tabs {
    transform: scale(0.6); /* Scale down the tabs container */
  }
  /* Adjust padding or layout of header items if tabs are scaled */
  header .flex.gap-4.items-center > .tabs-container {
      /* Adjust margin to help center or position scaled tabs */
      margin: 0 auto; /* Example: try centering the tabs on smaller screens */
  }
    header .flex.gap-4.items-center {
        /* Ensure this flex container allows items to wrap or adjust */
        flex-wrap: wrap;
        justify-content: center; /* Center items when wrapped */
        gap: 0.5rem; /* Adjust gap when wrapped */
    }
    header .flex.gap-4.items-center > div {
         /* Prevent individual items from taking full width when wrapped */
        flex-basis: auto;
    }
}


/* Styles for social media icons based on uiverse.io example-2 */
ul {
  list-style: none; /* Ensure no list bullets if ul is used */
}

.example-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.example-2 .icon-content {
  margin: 0 5px; /* Reduced space between icons */
  position: relative;
}
.example-2 .icon-content .tooltip {
  position: absolute;
  top: 40px; /* Adjusted position based on reduced icon size */
  left: 50%;
  transform: translateX(-50%);
  color: #FFB300;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden; /* Hidden by default */
  font-size: 14px;
  transition: all 0.3s ease;
  /* Ensure tooltip is on top */
  z-index: 10; /* Higher z-index than other elements */
}
.example-2 .icon-content:hover .tooltip {
  opacity: 1; /* Show on hover */
  visibility: visible;
  top: 45px; /* Adjusted position based on reduced icon size */
}
.example-2 .icon-content a { /* Targeting the a tag used for the icon wrapper */
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px; /* Reduced size by 40% (from 50px) */
  height: 30px; /* Reduced size by 40% (from 50px) */
  border-radius: 50%;
  /* Circular shape */
  color: #2B2B2B;
  /* Default icon color */
  background-color: #FFB300;
  /* Yellow background */
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  /* Remove underline from links */
}
.example-2 .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
  /* Subtle shadow on hover */
}
.example-2 .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 30px;
  /* Icon size */
  height: 30px;
  /* Icon size */
}
/* Using Font Awesome icons instead of SVG, target i element */
.example-2 .icon-content a i {
    position: relative;
    z-index: 1;
    font-size: 18px; /* Adjusted Font Awesome icon size (40% reduction from 30px) */
     transition: color 0.3s ease-in-out; /* Add transition to icon color */
}


.example-2 .icon-content a:hover i {
  color: white; /* Change icon color to white on hover for better contrast */
}


.example-2 .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000; /* Default filled color */
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
  height: 100%; /* Fill up on hover */
}

/* Specific colors for social media icons */
.example-2 .icon-content a[data-social="facebook"] .filled,
.example-2 .icon-content a[data-social="facebook"] ~ .tooltip {
  background-color: #3b5998; /* Facebook blue */
}

.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
  background: linear-gradient(
    45deg,
    #405de6,
    #5b51db,
    #b33ab4,
    #c135b4,
    #e1306c,
    #fd1f1f
  ); /* Instagram gradient */
}

.example-2 .icon-content a[data-social="twitter"] .filled,
.example-2 .icon-content a[data-social="twitter"] ~ .tooltip {
  background-color: #1DA1F2; /* Twitter blue */
}

.example-2 .icon-content a[data-social="telegram"] .filled,
.example-2 .icon-content a[data-social="telegram"] ~ .tooltip {
  background-color: #0088cc; /* Telegram blue */
}

/* Keeping other social styles from example in case they are added later */
.example-2 .icon-content a[data-social="whatsapp"] .filled,
.example-2 .icon-content a[data-social="whatsapp"] ~ .tooltip {
 background-color: #128c7e; /* Whatsapp green */
}
.example-2 .icon-content a[data-social="youtube"] .filled,
.example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
 background-color: #ff0000; /* Youtube red */
}


/* Add specific styling for hero section images to control their size and apply creative alignment */
.hero-images-staggered img {
    flex: 1 1 24%; /* Allow images to grow and shrink, starting from ~24% basis */
    height: 250px; /* Set a fixed height - Adjust this value as needed */
    object-fit: cover; /* Cover the space while maintaining aspect ratio */
    /* Keep existing visual styles */
    border-radius: 0.5rem; /* Example from gallery */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Example from gallery */
    transition: opacity 0.3s ease, transform 0.3s ease, top 0.3s ease, left 0.3s ease; /* Added top and left to transition */
    opacity: 1; /* Ensure images are visible */
    display: block;
    position: relative; /* Needed for top/left positioning */
    will-change: transform, opacity, top, left; /* Added top and left to will-change */
    min-width: 0; /* Allows images to shrink below content size if necessary */
}

/* Apply staggered positioning and rotation to individual images */
.hero-images-staggered img:nth-child(1) {
    top: 20px; /* Shift down more */
    left: 10px; /* Shift right more */
    transform: rotate(-3deg); /* More rotation */
    z-index: 4; /* Ensure it's on top if overlapping */
}

/* Apply staggered positioning and rotation to individual images */
.hero-images-staggered img:nth-child(2) {
    top: -20px; /* Shift up more */
    left: -10px; /* Shift left more */
    transform: rotate(3deg); /* More rotation */
    z-index: 3;
}

/* Apply staggered positioning and rotation to individual images */
.hero-images-staggered img:nth-child(3) {
    top: 15px; /* Shift down */
    left: 20px; /* Shift right more */
    transform: rotate(4deg); /* More rotation */
    z-index: 2;
}

/* Apply staggered positioning and rotation to individual images */
.hero-images-staggered img:nth-child(4) {
    top: -15px; /* Shift up */
    left: -20px; /* Shift left more */
    transform: rotate(-4deg); /* More rotation */
    z-index: 1;
}

/* Add a subtle hover effect to hero images */
.hero-images-staggered img:hover {
    transform: scale(1.08) rotate(0deg) !important; /* Scale up slightly and straighten on hover */
    z-index: 5; /* Bring hovered image to front */
}


/* Ensure the hero images container handles overflow and has correct display */
.hero-images-staggered {
    overflow: hidden;
    display: flex;
    gap: 1rem; /* This is the gap BETWEEN the images themselves */
    align-items: center;
    justify-content: flex-start !important; /* Force alignment to the left */
    padding-left: 0 !important;             /* Force left padding to 0 */

    /* Keep other paddings if you still want them, otherwise, they'll be 0 from the pl-0 in HTML or need explicit setting here */
    padding-top: 1rem;    /* Example: keeping top padding */
    padding-right: 1rem;  /* Example: keeping right padding */
    padding-bottom: 1rem; /* Example: keeping bottom padding */
}


/* Styling for the hero section logo */
.hero-logo {
  max-width: 30%; /* Set max-width for the logo in the hero */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 1rem; /* Add some space below the logo */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Add transition for morph effect */
}

/* Styling for the header logo */
.header-logo {
    height: 2rem; /* Smaller size for the header */
    width: auto; /* Maintain aspect ratio */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Add transition for morph effect */
    transform: scale(0.8); /* Start slightly smaller than final size */
}

/* Styles applied to logos when the body is scrolled */
body.scrolled .hero-logo {
    opacity: 0; /* Fade out the hero logo */
    transform: scale(0.8); /* Shrink the hero logo slightly */
}

body.scrolled .header-logo {
    opacity: 1; /* Fade in the header logo */
    transform: scale(1); /* Scale up to its final size */
}

/* Add the new Uiverse-inspired styles for the search input */
.uiverse-search-input {
  border: none;
  outline: none;
  border-radius: 15px;
  padding: 0 1em; /* Removed vertical padding */
  height: 35px; /* Set height to 25px as requested */
  line-height: 25px; /* Set line height equal to height for vertical centering */
  background-color: var(--search-bg-color); /* Use CSS variable */
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.5); /* Adapted inset shadow for dark theme */
  transition: 300ms ease-in-out;
  /* Add styles for text color and placeholder color */
  color: var(--search-text-color); /* Use CSS variable for text color */
}

.uiverse-search-input::placeholder {
    color: var(--search-placeholder-color); /* Use CSS variable for placeholder color */
}

.uiverse-search-input:focus {
  background-color: #4A5568; /* Slightly lighter dark gray for focus background */
  transform: scale(1.05);
  box-shadow: 13px 13px 100px rgba(0,0,0,0.7), -13px -13px 100px rgba(74, 85, 104, 0.3); /* Adapted shadow colors for dark theme */
}

/* Add styles for gallery placeholders */
.gallery-placeholder {
  background-color: #374151; /* Use a dark gray color */
  border-radius: 0.5rem; /* Match image border-radius */
  margin-bottom: 1rem; /* Match image margin-bottom */
  width: 100%; /* Fill column width */
  padding-top: 100%; /* 1:1 Aspect Ratio (adjust as needed) */
  position: relative; /* Needed for absolute positioning of potential loading indicator */
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.3;
  }
}

#searchContainer.hidden {
  display: none;
}

/* Modal Button Styling */
.modal-button {
  display: inline-block;
  min-width: 120px;         /* Same baseline width for both buttons */
  text-align: center;
  padding: 0.5rem 1rem;
  background-color: var(--button-bg, #FFB300); /* Consistent blue background */
  color: var(--button-text, #000000);             /* Consistent black text */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1rem;
  line-height: 1.2;
  box-sizing: border-box;
  height: 42px; /* Ensures both buttons have the same height */
  vertical-align: middle;
}

.modal-button:hover {
  background-color: var(--button-hover-bg, #FFB300);
}

/* Modal Buttons Row Styling */
.modal-buttons-row {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* Accessibility: Focus styles for buttons and modal navigation */
button:focus, .modal-nav-button:focus, #ultraHdLink:focus {
  outline: 2px solid var(--search-focus-ring-color, #3b82f6);
  outline-offset: 2px;
}