/* Tailwind Directives (optional, if you want @apply) */
/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */

/* Original styles */
html {
    scroll-behavior: smooth;
  }

  .prompt-card {
      transition: all 0.3s ease;
  }
  .prompt-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .category-prompt-count {
    background: rgba(0, 0, 0, 0.308) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);   
    color: white !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  .category-active {
      background-color: #FCD34D; /* Tailwind yellow-400 */
      color: #000;
  }
  .tab-active {
      background-color: #111827; /* Tailwind gray-900 */
      color: white;
  }
  .tab-inactive {
      background-color: #374151; /* Tailwind gray-700 */
      color: #D1D5DB; /* Tailwind gray-300 */
  }
  .copy-btn {
      transition: all 0.2s ease;
  }
  .copy-btn:active {
      transform: scale(0.95);
  }
  .copy-btn.copied { /* Style for when copied */
      background-color: #EE9D00 !important; /* Custom orange */
      color: white !important;
  }


  /* Header Styles */
  #main-header {
      /* START: Added Translucent Background */
      background-color: rgba(255, 255, 255, 0.8); /* White with 80% opacity */
      backdrop-filter: blur(10px); /* Optional: adds a blur effect */
      -webkit-backdrop-filter: blur(10px); /* For Safari */
      border-bottom: 1px solid rgba(200, 200, 200, 0.3); /* Optional: subtle border */
      /* END: Added Translucent Background */
      position: sticky;
      top: 0;
      z-index: 50; /* Ensure header is above other content */
  }
  /* Ensure header links have enough contrast */
  #main-header nav a {
      color: #374151; /* Tailwind gray-700 */
  }
   #main-header nav a:hover {
      color: #000000; /* Black */
  }
   #main-header #mobile-menu-button {
       color: #374151; /* Tailwind gray-700 */
   }
   #main-header #mobile-menu nav a {
        color: #374151; /* Tailwind gray-700 */
   }
   #main-header #mobile-menu nav a:hover {
       color: #000000; /* Black */
   }


  /* === ENHANCED HERO SECTION STYLES START === */
  #new-hero-section {
      position: relative; /* Needed for absolute positioning of children */
      overflow: hidden; /* Prevent illustrations from overflowing */
  }

  .hero-background-image {
      position: absolute;
      inset: 0; /* Cover the entire section */
      z-index: 0; /* Behind content */
      background-image: url('placeholder-background.webp'); /* !!! REPLACE WITH YOUR IMAGE PATH !!! */
      background-size: contain;
      background-position: center;
      opacity: 0.3; /* Adjust transparency (30% visible) */
  }

  /* Make text bolder and adjust line height if needed */
  .hero-title {
      /* font-black is applied via Tailwind */
      line-height: 1.1; /* Tighter line height for large text */
  }

  .hero-subtitle {
       color: #374151; /* Slightly darker gray (Tailwind gray-700) */
  }

  /* Base button style */
  .hero-button {
      @apply inline-flex items-center justify-center px-6 py-3 rounded-md font-semibold text-base shadow-md transition duration-300 ease-in-out transform focus:outline-none focus:ring-2 focus:ring-offset-2;
      /* Applied common styles using @apply */
  }

  /* Primary Button Style (Dark, like reference) */
  .hero-button.primary {
       @apply bg-gray-900 text-white hover:bg-gray-700 focus:ring-gray-800;
       /* Dark background, white text */
  }
  .hero-button.primary:hover {
      transform: translateY(-2px); /* Slight lift on hover */
  }

  /* Secondary Button Style (Lighter/Outline, adjust as needed) */
  .hero-button.secondary {
       @apply bg-transparent text-gray-700 font-medium hover:text-gray-900 focus:ring-yellow-500;
       /* Transparent background, dark text */
       border: 2px solid transparent; /* Add border space */
  }
  .hero-button.secondary:hover {
       /* Optional: Add subtle background or underline */
       /* background-color: rgba(252, 211, 77, 0.1); */ /* Light yellow bg */
       text-decoration: underline;
  }

  /* Illustration Positioning (Adjust offsets as needed) */
  .hero-illustration.left {
      left: 2rem; /* Adjust distance from edge */
  }
  .hero-illustration.right {
      right: 2rem; /* Adjust distance from edge */
  }
  /* === ENHANCED HERO SECTION STYLES END === */

  /* START: Newsletter Popup Styles */
  #newsletter-popup-overlay {
      /* Tailwind classes handle most styling */
      transition: opacity 0.3s ease-in-out;
  }

  #newsletter-popup {
       /* Tailwind classes handle background opacity and blur */
       transition: transform 0.3s ease-in-out;
       transform: scale(0.95);
       opacity: 0;
  }

  #newsletter-popup-overlay:not(.hidden) #newsletter-popup {
       transform: scale(1);
       opacity: 1;
  }
  /* END: Newsletter Popup Styles */

  /* --- START: NAVBAR LINK STYLING --- */

/* Style for the navigation links themselves */
nav a, nav button { /* <-- Adjust this selector if needed (e.g., .navbar a, #main-navigation li a) */
    font-weight: bold;       /* Makes text bolder */
    color: #141A16 !important;            /* Default text color */
    text-decoration: none;   /* Removes underline */
    padding: 10px 15px;      /* Adds space inside the link for the hover effect */
    margin: 0 5px;           /* Optional: Adds space between nav items */
    border-radius: 8px;      /* Rounds the corners (adjust px value as needed) */
    display: inline-block;   /* Allows padding and background color to form a box */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover */
    background-color: transparent; /* Ensure no background by default */
}

/* Style for the navigation links when hovered over */
nav a:hover {
    color: #FFC919 !important;
}

/* --- END: NAVBAR LINK STYLING --- */

/* --- START: Prompt Card Styling --- */

.prompt-description {
    white-space: pre-line; /* Preserves line breaks */
  }

  /* --- END: Prompt Card Styling --- */

  /* Add this rule anywhere in your styles.css file,
     perhaps near other prompt card styles if you have them. */

/* Add styles for the modal */
#prompt-modal-overlay {
    transition: opacity 0.3s ease-in-out;
}

#prompt-modal {
    transition: transform 0.3s ease-in-out;
    transform: scale(0.95);
    opacity: 0;
}

#prompt-modal-overlay:not(.hidden) #prompt-modal {
    transform: scale(1);
    opacity: 1;
}

/* Style for the code block inside the modal */
#modal-prompt-code {
    white-space: pre-wrap; /* Wrap long lines within the code block */
    word-wrap: break-word; /* Break long words */
}

/* Ensure buttons on card are aligned */
.prompt-card > div:last-child {
    /* Selects the div containing the buttons */
    /* Add alignment/spacing styles if needed */
 }

.premium-glow-btn {
    color: #141A16;
    position: relative; /* Needed for pseudo-element positioning */
    z-index: 1; /* Ensure button is above the glow */
    background-color:hsla(45,100%,70%,1);
    background-image:
    radial-gradient(at 9% 8%, hsla(36,100%,81%,1) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(30,100%,64%,1) 0px, transparent 50%);
    border: 2px solid #FFDC6B; /* Darker yellow border (Tailwind yellow-600) */
    transition: border-color 0.3s ease, transform 0.2s ease;
}

.premium-glow-btn::before {
    content: '';
    position: absolute;
    /* Increased negative offset to push glow OUTSIDE the border */
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    z-index: -1; /* Place the glow behind the button */
    /* Use a slightly larger border-radius for the glow element to look smooth */
    border-radius: 12px; /* button is rounded-lg (8px), this is larger */

    /* Glow gradient using color #EE9D00 */
    background: radial-gradient(ellipse at center, #EE9D00 0%, rgba(238, 157, 0, 0) 90%);
    filter: blur(15px); /* Adjust blur intensity for desired spread */
    opacity: 0.65; /* Default visible glow opacity */
    transition: opacity 0.3s ease, filter 0.3s ease;
    pointer-events: none; /* Prevent the glow catching mouse events */
}

.premium-glow-btn:hover {
    /* Change border to the glow color on hover */
    transform: scale(1.03); /* Slightly larger scale */
}

.premium-glow-btn:hover::before {
    opacity: 0.9; /* Intensify the glow opacity */
    filter: blur(18px); /* Intensify the glow blur */
}
/* --- END: Premium Button Glow Effect with Border (Updated) --- */