/* Add @font-face rule near the top */
@font-face {
  font-family: 'PastelAlpha Regular';
  src: url('../fonts/PastelAlpha-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Reset all previous styles - clean slate */
:root {
  --pastel-primary: #ff85e4; /* Pink */
  --pastel-secondary: #a696ff; /* Purple */
  --pastel-accent: #ffcc5c;
  --pastel-background-start: #E6A1C5; /* Pink */
  --pastel-background-end: #8080B7;   /* Purple */
  --pastel-light-text: #e0e0e0; /* Light text color */
  --pastel-dark: #3a3a5a; /* Dark background for cards */
  --pastel-border: rgba(255, 255, 255, 0.1); /* Subtle border */
  /* --- New Complementary Colors --- */
  --complementary-green: #90ee90; /* Light Green */
  --complementary-teal: #20b2aa; /* Light Sea Green */
}

/* Base styles */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  color: white;
  min-height: 100vh;
}

/* Background styling - clean and simple */
body {
  background: linear-gradient(180deg, #E6A1C5 0%, #8080B7 100%) !important;
  background-image: url('../images/bkOnly.webp') !important;
  background-repeat: no-repeat !important;
  background-position: bottom center !important;
  background-size: 100% auto !important;
  background-attachment: fixed !important;
  color: white !important;
  overflow-x: hidden !important;
  min-height: 100vh !important;
  height: 100% !important;
}

/* Main container */
.main-container {
  position: relative;
  z-index: 1;
  padding-bottom: 0 !important; /* Remove extra padding */
}

/* Card styling */
.card,
.bg-gray-800,
.bg-gray-900,
form#payment-form,
.plan-option,
.rounded-xl,
#discord-status > div, 
#dashboard-content > div {
  background-color: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: white !important;
  border-radius: 16px !important;
  padding: 24px !important;
}

/* Input fields */
input, select, textarea {
  background-color: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

/* Text colors */
h1, h2, h3, h4, h5, h6, p, span, div, li, td, th {
  color: white !important;
}

/* Update button styling with a more on-brand gradient */
.btn-primary,
.bg-gradient-to-r,
a[href="/"],
a[href="/"]:hover,
button.bg-gradient-to-r,
#purchase-button,
.rounded-lg[href="/"] {
  background: linear-gradient(to right, #E6A1C5, #c27db7, #a55fb0, #8080B7) !important;
  color: white !important;
  border: none !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.btn-primary:hover,
.bg-gradient-to-r:hover,
a[href="/"]:hover,
button.bg-gradient-to-r:hover,
#purchase-button:hover,
.rounded-lg[href="/"]:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Specific styling for Connect with Discord button */
#connect-discord {
  background: #5865F2 !important; /* Keep Discord's brand color */
}

#connect-discord:hover {
  background: #4752C4 !important;
}

/* Payment buttons */
[id^="pay-with-"] {
  background: linear-gradient(to right, #E6A1C5, #c27db7, #a55fb0, #8080B7) !important;
  color: white !important;
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

[id^="pay-with-"]:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
}

/* Table styling */
table {
  background-color: transparent !important;
  border-radius: 8px;
  overflow: hidden;
}

table th {
  background-color: rgba(0, 0, 0, 0.4) !important;
  color: white !important;
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
}

table td {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
}

/* Override any dark backgrounds */
.bg-gray-700, .bg-gray-800, .bg-gray-900, .bg-black {
  background-color: transparent !important;
}

/* Main theme colors */
:root {
  --pastel-text: #f0f0f0;
}

/* Adjust footer text color */
footer, footer p, footer a {
  color: var(--pastel-dark) !important;
}

/* Glass card effect */
.glass-card {
  background-color: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 24px;
  margin-bottom: 24px;
  color: white;
}

/* Remove the media queries that were causing the image to scrunch */
@media (min-height: 900px) {
  body {
    background-size: 100% auto !important;
    background-position: bottom;
  }
}

@media (max-height: 899px) {
  body {
    background-size: 100% auto !important;
    background-position: bottom;
  }
}

/* Add a specific class for pages that need the darker background */
.pastel-theme {
  background: linear-gradient(180deg, #E6A1C5 0%, #8080B7 100%) !important;
  background-image: url('../images/bkOnly.webp') !important;
  background-repeat: no-repeat !important;
  background-position: bottom center !important;
  background-size: 100% auto !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

/* Add an additional style for html element */
html {
  background: linear-gradient(180deg, #E6A1C5 0%, #8080B7 100%) !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

/* Referral fields styling */
.referral-field {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: white;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.referral-field-label {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 6px;
  display: block;
  color: white;
}

.referral-value {
  font-family: 'Inter', monospace;
  font-weight: 500;
  word-break: break-all;
}

.copy-button {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  margin-left: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Update status indicator styling with darker background */
.status-indicator {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-right: 16px;
  letter-spacing: 0.025em;
  background-color: rgba(0, 0, 0, 0.35); /* Dark background matching cards */
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white !important; /* White text for better readability */
}

/* Adjust circle color for active status while keeping background dark */
.status-active::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #C7F0BD; /* Keep the circle pastel green */
  margin-right: 6px;
}

/* Adjust circle color for inactive status while keeping background dark */
.status-inactive::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #E6A1C5; /* Change to match pink from gradient */
  margin-right: 6px;
}

/* Remove the colored backgrounds and borders */
.status-active {
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white !important;
}

.status-inactive {
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white !important;
}

/*
  NOTE: Extensive use of !important was necessary to override conflicting styles
  during development. Consider refactoring for better maintainability if time permits,
  by increasing specificity or reorganizing CSS rules.
*/

/* Force background to use direct colors instead of variables */
body {
  background: linear-gradient(180deg, #E6A1C5 0%, #8080B7 100%) !important;
  /* ... rest of body styles ... */
}

/* ... rest of the styles ... */

/* Homepage Heading Styles */
/* Target the logo text specifically */
#main-header .logo-text {
  /* Apply the custom font */
  font-family: 'PastelAlpha Regular', sans-serif !important;
  /* Make text uppercase */
  text-transform: uppercase !important;

  /* --- Gradient Fill --- */
  /* Define the gradient background */
  background: linear-gradient(90deg, var(--pastel-primary), var(--pastel-secondary)) !important;
  /* Clip the background to the text */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  /* Make the actual text color transparent to show the gradient */
  -webkit-text-fill-color: transparent !important;
  /* Fallback color (optional, but good practice) */
  color: var(--pastel-primary) !important; /* Use primary color as fallback */
  /* --- End Gradient Fill --- */

  /* Add text shadow for contrast/depth */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;

  /* Set font size and weight */
  font-size: 3.75rem !important; /* Doubled size */
  font-weight: 700 !important; /* Keep bold */

  /* Ensure no other background interferes */
  background-color: transparent !important;
}

/* Target common section headings (adjust classes/IDs if different in your HTML) */
#benefits h2, /* Assuming section has id="benefits" */
#how-it-works h2, /* Assuming section has id="how-it-works" */
#plans h2, /* Assuming section has id="plans" */
#connect h2 { /* Assuming section has id="connect" */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* General rule for better text readability on the gradient */
body, p, li, label, span, th, td {
    /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
}

/* Status indicator styling with darker background */
/* ... rest of the styles ... */

/* --- Specific styles for the logo image --- */
.header-logo-img {
    display: block !important; /* Ensure it's treated as a block */
    width: 100% !important;    /* Force it to fill container width */
    height: 100% !important;   /* Force it to fill container height */
    object-fit: cover;       /* Cover the area, might crop */
    /* object-fit: contain; */ /* Alternative: Fit entirely, might leave space */
    max-width: none !important; /* Override Tailwind max-width if needed */
    opacity: 1 !important;      /* Ensure not transparent */
    visibility: visible !important; /* Ensure not hidden */
}

/* Ensure the logo container div displays correctly */
/* Targets the div containing the logo based on HTML structure */
#main-header .w-12.h-12,
header .w-10.h-10 {
    overflow: hidden; /* Keep this to maintain rounded shape */
    display: flex !important; /* Use flex to help center */
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(255, 255, 255, 0.1); /* Slight background in case image fails */
}

/* Ensure header text (like 'Pastel Alpha') is white */
header h1 {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
}

/* Homepage Heading Styles (Keep these as they were for other text) */
#main-header .logo-text {
  /* This rule targets the TEXT "Pastel Alpha", not the image */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

#benefits h2,
#how-it-works h2,
#plans h2,
#connect h2 {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ... rest of the styles ... */

/* --- Style the actual spinner element --- */
/* Target the spinner div based on common Tailwind animation classes */
#payment-loading .animate-spin {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.2) !important; /* Light border for the track */
    border-top-color: var(--pastel-primary) !important; /* Or --pastel-secondary */
    border-width: 4px !important;
}

/* ... rest of the styles ... */

/* Homepage Heading Styles */
#main-header .logo-text {
  /* ... logo text styles ... */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Ensure this rule targets the headings inside the new cards */
#benefits h2,
#how-it-works h2,
#plans h2, /* This targets "Select Your Plan" */
#connect h2 { /* This targets "Connect Your Discord" */
  background: none !important; /* Removes gradient */
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important; /* Sets color to white */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); /* Adds shadow */
  /* Ensure margin/padding is appropriate within the card */
  margin-bottom: 1.5rem; /* Tailwind's mb-6 */
}

/* ... rest of the styles ... */

/* --- Plan Option Specific Styling --- */
.plan-option {
  /* Ensure a base border style is present if not covered by .card */
  border-width: 1px !important;
  border-style: solid !important;
  transition: border-color 0.2s ease-in-out; /* Smooth transition */
}

/* Style for the default/unselected plan option border */
.plan-option.border-gray-700 {
  border-color: rgba(255, 255, 255, 0.15) !important; /* Match default card border */
}

/* Style for the selected plan option border */
.plan-option.border-pastel-primary {
  border-color: var(--pastel-primary) !important; /* Use the theme's primary pastel color */
  /* Optionally add a subtle box-shadow for more emphasis */
  /* box-shadow: 0 0 10px rgba(var(--pastel-primary-rgb), 0.5); */
}

/* ... rest of the styles ... */

/* Homepage Heading Styles */
/* ... heading styles ... */

/* Spinner Styles */
/* ... spinner styles ... */

/* Header Styling */
#main-header {
  /* Existing header styles if any */
}

#main-header .logo-text {
  /* Existing logo text styles */
}

/* --- Style for Header Buttons --- */
#dashboard-button,
#buy-now-button {
  /* Remove the border */
  /* border: 1px solid rgba(255, 255, 255, 0.3) !important; */

  /* Add a subtle shadow */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important; /* Darker shadow for contrast */
  /* Or try a lighter shadow if preferred: */
  /* box-shadow: 0 2px 5px rgba(255, 255, 255, 0.15) !important; */

  /* Ensure padding is sufficient */
  padding: 0.5rem 1.5rem !important; /* Tailwind py-2 px-6 */
  /* Ensure text color is white */
  color: white !important;
  /* Update transition to include box-shadow */
  transition: opacity 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Optional: Slightly change shadow and lift on hover */
#dashboard-button:hover,
#buy-now-button:hover {
  /* Remove border-color change */
  /* border-color: rgba(255, 255, 255, 0.6) !important; */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important; /* Intensify shadow */
  transform: translateY(-1px); /* Add a slight lift effect */
}

/* Card styling */
.card,
/* ... other selectors ... */ {
  /* ... existing card styles ... */
}

/* Plan Option Specific Styling */
/* ... plan option styles ... */

/* ... rest of the styles ... */

/* --- Body Flex for Sticky Footer --- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Keep this */
}

/* --- Main Container Flex Grow --- */
.main-container {
  flex-grow: 1; /* Keep this */
}

/* --- Footer Card Text & Icon Styling --- */
footer.card {
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
}

/* Style for the text part */
.footer-text {
  color: white !important;
  font-size: 0.875rem; /* Tailwind text-sm */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Style for ALL icon link containers (<a> tags) */
.footer-icon-link {
  background-color: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  /* position: relative; /* Should be applied via Tailwind class on the <a> tag */
}

/* Style for the SVG icon itself (if still needed for X logo) */
.footer-icon {
  fill: white !important; /* Ensure icon is white */
  /* Removed transition as it's not needed for static fill */
}

/* Style for images within the icon links */
.footer-icon-link img {
  display: block; /* Remove extra space below image */
  /* width: 100%; */ /* Handled by Tailwind w-full */
  /* height: 100%; */ /* Handled by Tailwind h-full */
  /* object-fit: cover; */ /* Handled by Tailwind object-cover */
  /* border-radius: 50%; */ /* Ensure image itself is rounded if needed, though overflow-hidden on parent is better */
}

/* Hover effect for ALL icon link containers */
.footer-icon-link:hover {
  background: linear-gradient(to right, var(--complementary-green), var(--complementary-teal)) !important;
  transform: translateY(-4px) scale(1.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  z-index: 10;
}

/* --- Tooltip Styling --- */
.tooltip-name {
  display: inline-block;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(8px); /* Start slightly lower */
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0; /* Start hidden */
  visibility: hidden; /* Start hidden */
  pointer-events: none;
  z-index: 20;

  /* Define transitions: Apply a delay when HIDING */
  transition: opacity 0.2s ease-in-out, /* Standard fade duration */
              visibility 0s linear 0.2s, /* Hide instantly AFTER opacity fade-out finishes */
              transform 0.2s ease-in-out; /* Standard move duration */
}

/* Add the triangle/arrow */
.tooltip-name::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* Show tooltip on parent link hover */
.footer-icon-link:hover .tooltip-name {
  opacity: 1; /* Target opacity */
  visibility: visible; /* Target visibility */
  transform: translateX(-50%) translateY(0); /* Target position */

  /* Override transition for APPEARING: Add entry delay */
  transition: opacity 0.2s ease-in-out 0.05s, /* Fade in with 0.05s delay */
              visibility 0s linear 0.05s, /* Become visible instantly at 0.05s */
              transform 0.2s ease-in-out 0.05s; /* Move in with 0.05s delay */
}
/* --- End Tooltip Styling --- */

/* --- End Footer Card Text & Icon Styling --- */

/* ... rest of the styles ... */

/* --- Consolidated Header Logo Text Style --- */
/* ... logo text styles ... */

/* --- Other Heading Styles --- */
/* ... other heading styles ... */

/* ... rest of your styles ... */