/* --- Base Styles --- */
:root {
    /* Define Neon Colors */
    --neon-green: #7cff65;
    --neon-cyan: #00e5ff;
    --neon-orange: #ffbe44;
    --neon-purple: #c189ff;
    --neon-teal: #49ffdc;
    --neon-red: #ff4444;
    /* Added */
    --zerodha-blue: #387ed1;
    /* Added */
    --zerodha-red: #f04040;
    /* Added */


    /* Dark Theme Colors (User Provided) */
    /* Dark Theme Colors (User Provided + Sky) */
    --sky-top: #0d1a2f;
    /* Deep blue for sky top */
    --sky-bottom: #040a18;
    /* Darker near-black for bottom */
    --star-color-faint: rgba(210, 225, 255, 0.4);
    /* Fainter stars */
    --star-color-medium: rgba(230, 240, 255, 0.6);
    /* Medium stars */
    --star-color-bright: rgba(255, 255, 255, 0.8);
    /* Brighter close stars */

    --dark-bg-primary: #0a0a14;
    --dark-bg-secondary: #12131f;
    --dark-bg-tertiary: #1a1c2d;

    --text-primary: #e0e0e0;
    --text-secondary: #a0a0b0;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --tooltip-bg: #2a2c3a;
}

/* Apply box-sizing and reset margins/padding */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- Rate Limit Modal Styles --- */

.rate-limit-modal {
    /* Positioning & Overlay */
    position: fixed;
    inset: 0; /* Equivalent to top: 0; right: 0; bottom: 0; left: 0; */
    z-index: 50;
    background-color: rgba(0, 0, 0, 0.6); /* Black overlay with 60% opacity */
    backdrop-filter: blur(4px); /* Optional: Adds a blur effect to background */

    /* Layout */
    display: none; /* Start hidden */
    align-items: center;
    justify-content: center;
    padding: 15px; /* Add padding for small screens */

    /* Animation - Fade In/Out */
    opacity: 0;
    transition: opacity 0.3s ease-out;
  }

  .rate-limit-modal-content {
    /* Appearance */
    background: linear-gradient(to bottom right, #2d3748, #1a202c); /* Dark gray gradient */
    color: #e2e8f0; /* Light text color */
    border-radius: 0.75rem; /* Rounded corners */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Shadow */
    padding: 1.5rem 2rem; /* Padding (adjust as needed) */
    width: 91.666667%; /* Equivalent to w-11/12 */
    max-width: 28rem; /* Equivalent to max-w-md */
    margin-left: auto;
    margin-right: auto;
    position: relative; /* Needed for absolute positioning of close button */

    /* Animation - Scale Up/Down */
    transform: scale(0.95);
    transition: transform 0.3s ease-out;
  }

  /* Styles when modal is visible */
  .rate-limit-modal.modal-visible {
    display: flex; /* Show the modal */
    opacity: 1; /* Fade it in */
  }

  .rate-limit-modal.modal-visible .rate-limit-modal-content {
    transform: scale(1); /* Scale it up */
  }

  /* Close Button */
  .rate-limit-modal-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #a0aec0; /* Gray color */
    transition: color 0.15s ease-in-out;
  }

  .rate-limit-modal-close-btn:hover {
    color: #ffffff; /* White on hover */
  }

  .rate-limit-modal-close-btn svg {
    display: block; /* Prevents extra space below SVG */
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
  }

  /* Modal Body Content Alignment */
  .rate-limit-modal-body {
    text-align: center;
  }

  /* Icon Wrapper */
  .rate-limit-modal-icon-wrapper {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    height: 3rem; /* 48px */
    width: 3rem; /* 48px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* Fully rounded */
    background: linear-gradient(to right, #f59e0b, #f97316); /* Yellow-orange gradient */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .rate-limit-modal-icon-wrapper svg {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    color: #ffffff; /* White icon */
  }

  /* Text Styles */
  .rate-limit-modal-title {
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
    font-weight: 600; /* Semibold */
    color: #ffffff;
    margin-bottom: 0.5rem;
  }

  .rate-limit-modal-text {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    color: #cbd5e0; /* Lighter gray */
    margin-bottom: 1.5rem;
  }

      /* --- Success Notification Styles (Top Right) --- */
.success-notification {
    position: fixed; /* Keep it in view */
    top: 20px;       /* Position near top */
    right: 20px;      /* Position near right */
    /* Remove bottom/left/transform used for centering */
    /* bottom: 20px; */
    /* left: 50%; */
    /* transform: translateX(-50%); */

    display: flex; /* Use flex to align icon and text */
    align-items: center;
    gap: 10px; /* Space between text and icon */

    background-color: var(--dark-bg-secondary); /* Use theme dark blue/grey */
    color: var(--text-primary); /* Light text */
    padding: 10px 20px; /* Adjust padding */
    border-radius: 8px;
    border: 1px solid var(--neon-cyan); /* Add theme border */
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.2); /* Neon cyan glow */
    font-weight: 500; /* Adjusted weight */
    font-size: 0.9rem; /* Adjusted size */
    z-index: 2000;

    /* Hide by default, prepare for transition */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%); /* Start off-screen to the right */
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out, transform 0.4s ease-out;
}

.success-notification.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0); /* Slide in from the right */
    /* Remove bottom animation */
    /* bottom: 40px; */
}

/* Style for the icon span */
.success-notification .notification-icon {
    display: inline-flex; /* Align SVG nicely */
    align-items: center;
    color: var(--neon-green); /* Success green for the tick */
}

.success-notification .notification-icon svg {
    width: 18px; /* Control icon size */
    height: 18px;
}
/* --- End Success Notification Styles --- */

.user-status .login-label {
    display: block; /* Put "Logged in:" on its own line */
    font-size: 0.8em; /* Smaller text */
    color: var(--text-secondary);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-status .user-name {
    display: block; /* Put name on its own line */
    font-size: 0.95em; /* Slightly larger than label */
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px; /* Space before logout button */
    word-break: break-word; /* Allow long names to wrap */
}

  /* Google Sign-In Button Container in Modal */
  #google-signin-button-modal-container {
    margin-top: 1rem; /* Add some space above the button */
    display: flex;    /* Center the button if needed */
    justify-content: center;
  }

  /* --- Feature Card Icon Styles --- */

.feature-icon {
    display: block;         /* Center using margin auto */
    margin: 0 auto 20px auto; /* Top/Bottom margin 0/20px, Left/Right auto */
    width: 55px;            /* Adjust desired icon width */
    height: 55px;           /* Adjust desired icon height */
    object-fit: contain;    /* Scale image nicely if needed */
    /* filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2)); /* Optional faint base white glow */
    transition: filter 0.3s ease, transform 0.3s ease; /* Add transform transition */
}

/* Specific Glow Effects using CSS Drop Shadows */
/* Using multiple shadows creates a softer glow */

.feature-card.green .feature-icon {
    width: 50px;            /* Adjust desired icon width */
    height: 55px;
    filter:
        /* drop-shadow(0 0 2px var(--neon-green)) Inner sharp glow */
        drop-shadow(0 0 15px var(--neon-green))
        drop-shadow(0 0 20px rgba(124, 255, 101, 0.5)); /* Outer soft glow */
}

.feature-card.orange .feature-icon {
    width: 59px;            /* Adjust desired icon width */
    height: 55px;
    filter:
        /* drop-shadow(0 0 2px var(--neon-orange))  */
        drop-shadow(0 0 15px var(--neon-orange))
        drop-shadow(0 0 20px rgba(255, 190, 68, 0.5));
}

.feature-card.purple .feature-icon {
    width: 61px;            /* Adjust desired icon width */
    height: 50px;           /* Adjust desired icon height */
    filter:
        /* drop-shadow(0 0 2px var(--neon-purple))  */
        drop-shadow(0 0 15px var(--neon-purple))
        drop-shadow(0 0 20px rgba(193, 137, 255, 0.5));
}

.feature-card.teal .feature-icon {
    width: 50px;            /* Adjust desired icon width */
    height: 50px;
    filter:
        /* drop-shadow(0 0 2px var(--neon-teal))  */
        drop-shadow(0 0 15px var(--neon-teal))
        drop-shadow(0 0 20px rgba(73, 255, 220, 0.5));
}

/* Optional: Enhance glow/effect on card hover */
.feature-card:hover .feature-icon {
     /* You could make the filter glow stronger/brighter */
     /* filter: ... new stronger values ... */

     /* Or add a slight scale */
     transform: scale(1.05);
}

/* --- Input Form Tooltip Styles --- */

/* Container for Label + Icon */
.label-with-tooltip {
    display: flex;
    align-items: center; /* Crucial for vertical centering */
    gap: 6px;
    margin-bottom: 8px;
}

.label-with-tooltip label {
    margin-bottom: 0;
    /* Inherit other styles like color, font-size, weight from .input-form label */
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Info Icon Styling */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative; /* Keep for positioning context & z-index */
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    color: var(--dark-bg-tertiary);
    vertical-align: middle;
    top: -3px; /* Keep vertical adjustment */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    z-index: 5; /* Give all icons a base stacking level */
}

.info-icon svg {
    width: 75%; /* Controls size of the 'i' inside the circle */
    height: 75%;
    fill: currentColor; /* Make the 'i' paths use the color set on .info-icon */
    overflow: visible; /* Helps prevent minor clipping issues */
}

.info-icon:hover {
    background-color: var(--neon-cyan);
    color: var(--dark-bg-primary);
    transform: scale(1.1);
    z-index: 50; /* Lift the hovered icon AND its tooltip above siblings */
}

/* Tooltip Text Box */
.info-icon::after {
    content: attr(data-tooltip);
    /* --- Appearance --- */
    background-color: var(--dark-bg-tertiary, #1a1c2d);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.6;
    padding: 12px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    width: max-content;
    max-width: 400px; /* Adjusted max width */
    white-space: pre-line;
    /* --- Positioning --- */
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 8px; /* Space from icon */
    transform: translateY(-50%) translateX(-8px); /* Start slightly left */
    /* --- Base transition styles --- */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 1; /* Stacking controlled by parent hover */
}

/* Tooltip Hover State */
.info-icon:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0); /* Move to final position */
}

/* Hide Arrow */
.info-icon::before {
    display: none;
}

/* --- Authentication Status Styles --- */
.user-status {
    color: var(--text-primary);
}

#user-info {
    color: var(--text-secondary); /* Lighter color for user email/name */
    word-break: break-all; /* Prevent long emails overflowing */
}

.logout-button {
    background: none;
    border: 1px solid var(--neon-red);
    color: var(--neon-red);
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-top: 5px;
}

.logout-button:hover {
    background-color: var(--neon-red);
    color: var(--dark-bg-primary);
}

/* Optional: Style for the divider */
.menu-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 8px 0; /* Adjust spacing */
}

/* Optional: Ensure Google button container fits well */
#google-signin-button-container > div {
    display: inline-block; /* Prevents taking full width if needed */
}

    /* --- Menu Icon --- */
    .menu-toggle-btn {
        position: fixed; /* Keep it fixed in the viewport */
        top: 25px;
        right: 30px;
        width: 40px; /* Keep size */
        height: 30px; /* Keep size */
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1050; /* High z-index */
        padding: 0;
        /* Remove flex if spans are positioned absolutely */
        /* display: flex; */
        /* flex-direction: column; */
        /* justify-content: space-around; */
    }

    .menu-toggle-btn span {
        display: block;
        position: absolute; /* Position spans for transform origin */
        left: 0;
        width: 100%;
        height: 3px; /* Thickness of lines */
        background-color: var(--text-primary); /* White color */
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
        transform-origin: center; /* Rotate around center */
    }

    /* Position the 3 lines */
    .menu-toggle-btn span:nth-child(1) {
        top: 6px; /* Adjust vertical position */
    }

    .menu-toggle-btn span:nth-child(2) {
        top: 50%;
        transform: translateY(-50%); /* Center middle line */
    }

    .menu-toggle-btn span:nth-child(3) {
        bottom: 6px; /* Adjust vertical position */
    }

    /* --- Add Animation for icon click (Cross Transformation) --- */
    /* Triggered by adding .active class via JS */
    .menu-toggle-btn.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg); /* Move down and rotate */
        /* Adjust translateY based on height/top values */
    }
    .menu-toggle-btn.active span:nth-child(2) {
        opacity: 0; /* Fade out middle line */
    }
    .menu-toggle-btn.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg); /* Move up and rotate */
         /* Adjust translateY based on height/bottom values */
    }


    /* --- Menu Dropdown (Prepare for JS control) --- */
    .menu-dropdown {
        display: block; /* Keep it block for layout */
        position: fixed;
        top: 65px; /* Position below the icon */
        right: 25px;
        background-color: var(--dark-bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 10px 0;
        box-shadow: 0 5px 15px rgba(77, 77, 77, 0.3);
        z-index: 1040;
        min-width: 120px;

        /* Hide by default using opacity and visibility */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px); /* Optional: slight move up */
        pointer-events: none; /* Prevent interaction when hidden */
        transition: opacity 0.25s ease-out, visibility 0.25s ease-out, transform 0.25s ease-out;
    }

    .menu-dropdown a {
        display: block;
        padding: 8px 20px;
        color: var(--text-primary);
        text-decoration: none;
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .menu-dropdown a:hover {
        background-color: var(--dark-bg-tertiary);
        color: var(--neon-cyan);
    }

    /* Show dropdown when .active class is added via JS */
    .menu-dropdown.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto; /* Allow interaction when visible */
    }

    /* --- Add hover styles for the button itself if desired --- */
    .menu-toggle-btn:hover span {
       background-color: var(--neon-cyan); /* Example: Highlight lines on hover */
    }




  /* --- About Us Modal Styles --- */
  .modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(70, 70, 72, 0.7); /* Dark semi-transparent */
    backdrop-filter: blur(5px); /* Blur background */
    -webkit-backdrop-filter: blur(5px); /* Safari support */
    z-index: 1000; /* Below popup but above content */
    opacity: 0; /* Start invisible for transition */
    transition: opacity 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;

    /* For centering the popup */
    align-items: center;
    justify-content: center;
    padding: 15px; /* Add padding for small screens */
  }

  .modal-overlay.active {
    display: flex; /* Show and enable flex centering */
    opacity: 1; /* Fade in */
  }

  .modal-popup {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--shadow-color);
    max-width: 650px; /* Max width */
    width: 100%; /* Use 100% width up to max-width */
    max-height: 85vh; /* Max height relative to viewport */
    position: relative;
    overflow: hidden; /* Container hides overflow */
    display: flex;
    flex-direction: column; /* Stack content and footer */
    transform: scale(0.95); /* Start slightly smaller for transition */
    opacity: 0; /* Start invisible */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    margin: auto; /* Helps centering within flex container */
  }

  .modal-overlay.active .modal-popup {
    transform: scale(1); /* Scale up to normal size */
    opacity: 1; /* Fade in */
  }

  .close-modal-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    z-index: 1010; /* Ensure it's above modal content */
  }
  .close-modal-btn:hover {
    color: var(--neon-red);
  }

  .modal-content {
    padding: 30px 35px;
    overflow-y: auto; /* Enable scrolling for content */
    flex-grow: 1; /* Allow content to take available space */
    /* Improve scrollbar appearance */
    scrollbar-width: thin;
    scrollbar-color: #888888 rgba(255, 255, 255, 0.1);
  }
  .modal-content::-webkit-scrollbar {
    width: 8px;
  }
  .modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }
  .modal-content::-webkit-scrollbar-thumb {
    background-color: #888888;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .modal-content::-webkit-scrollbar-thumb:hover {
    background-color: #aaaaaa;
  }


  .modal-content h2 {
    color: var(--neon-teal);
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-size: 1.4rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
  }
  .modal-content h2:first-of-type {
      margin-top: 0;
  }

  .modal-content p,
  .modal-content ul {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1em;
  }
  .modal-content ul {
      list-style: none; /* Remove default bullets */
      padding-left: 0;
  }
  .modal-content li {
      margin-bottom: 0.5em;
      padding-left: 1.5em; /* Space for emoji/icon */
      position: relative; /* For positioning emoji */
  }
  /* Style emoji like bullet points (optional) */
  .modal-content li::before {
      content: attr(data-emoji); /* You'd add data-emoji="🔇" to the li tag */
      position: absolute;
      left: 0;
      /* If using direct emojis in text, adjust padding-left on li and remove this */
  }


  .modal-content a.email-link {
    color: var(--neon-teal);
    text-decoration: none;
    font-weight: 500;
  }
  .modal-content a.email-link:hover {
    text-decoration: underline;
  }

  .modal-footer {
    padding: 15px 20px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0; /* Prevent footer from shrinking */
  }

  /* --- Form Input Styles --- */

  .form-row-split {
    display: flex;           /* Enable Flexbox */
    align-items: flex-start; /* Align items to the top (good for labels) */
    gap: 20px;             /* Space between the two columns (adjust as needed) */
    margin-bottom: 20px;   /* Add margin below the combined row */
  }

  .form-column {
    flex: 1;             /* Make each column take up equal available space */
    min-width: 0;        /* Prevents columns from overflowing if content is wide */
  }

  /* Ensure inputs within the columns still take full width of their column */
  .form-column input[type="number"],
  .form-column .input-with-buttons {
     width: 100%; /* Make inputs/groups fill their column */
     /* Reset margin-bottom if previously set on these specific inputs */
     /* margin-bottom: 0;  <-- Handled by removing it from .lots-input-group and applying to .form-row-split */
  }

  /* Styles for the Max Lots Input Group */
/* Styles for the Max Lots Input Group Container */
.input-with-buttons {
    display: flex;
    align-items: center; /* Vertically center items within the container */
    border: 1px solid #444;
    border-radius: 6px;
    background: var(--dark-bg-tertiary);
    width: 100%;
    box-sizing: border-box;
    height: 44px; /* Example: Common height, adjust as needed */
    overflow: hidden; /* Prevent internals from breaking bounds */
}

/* Styles for the Number Input WITHIN the group */
.input-with-buttons input[type="number"] {
    flex-grow: 1;
    text-align: center;
    border: none;
    background: none;
    margin: 0;
    color: var(--text-primary);
    padding: 10px 5px;
    /* padding: 0 5px; Minimal horizontal padding, NO vertical padding needed */
    min-width: 40px; /* Adjust if needed */
    -moz-appearance: textfield;
    font-size: 1rem;   /* Match standard input */
    line-height: normal; /* <<< USE 'normal' or match your site's default (e.g., 1.6) */
    box-sizing: border-box; /* Include padding/border (though none here) in size */
    width: 100%; /* Needed along with flex-grow */
}
/* Hide Webkit Spinners */
.input-with-buttons input[type="number"]::-webkit-outer-spin-button,
.input-with-buttons input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Styles for Stepper Buttons */
.stepper-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;       /* <<< Use 1 for single-line button text */
    font-weight: bold;
    cursor: pointer;
    padding: 0 15px;      /* <<< REMOVE vertical padding */
    height: 100%;         /* <<< Make button fill container height */
    transition: color 0.2s ease;
    flex-shrink: 0;
    /* Add flex alignment for the button's own content (the +/- sign) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.stepper-btn:hover {
    color: var(--neon-cyan);
}

/* Ensure no borders are lingering */
.stepper-btn.minus { /* No border needed */ }
.stepper-btn.plus { /* No border needed */ }

/* Focus style for the whole group */
.input-with-buttons:focus-within {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.3);
}

/* Styles for Quantity Display (Unaffected but ensure margin is correct) */
.quantity-display {
    display: block;
    margin-top: 1px;
    margin-left: 2px;
    font-size: 0.85em;
    color: var(--text-secondary);
    height: 1em;
}

/* Focus style for the whole group */
.input-with-buttons:focus-within {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.3);
}

  /* Prevent body scroll when modal is open */
  body.modal-open {
    overflow: hidden;
  }


/* --- Enhanced Background --- */
body {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;

    /* Layered Background: Base Gradient + Shine + Stars */
    background-color: var(--sky-bottom);
    background-image:
    /* Layer 3: Brighter, larger, sparser stars */
    radial-gradient(3px circle at 300px 300px, var(--star-color-bright), transparent),
    /* Layer 2: Medium size, medium density stars */
    radial-gradient(2px circle at 200px 200px, var(--star-color-medium), transparent),
    /* Layer 1: Faintest, smallest, densest stars */
    radial-gradient(1px circle at 100px 100px, var(--star-color-faint), transparent),
    /* Base Sky Gradient (Bottom Layer) */
    linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
  /* Define size for each layer - MUST match number of image layers above */
  background-size:
    300px 300px, /* Layer 3 - Large size = sparse */
    500px 500px, /* Layer 2 - Medium size = medium density */
    500px 500px, /* Layer 1 - Small size = dense */
    100% 100%;   /* Gradient */
  /* Define repeat for each layer - MUST match number of image layers */
  background-repeat:
    repeat,      /* Layer 3 */
    repeat,      /* Layer 2 */
    repeat,      /* Layer 1 */
    no-repeat;   /* Gradient */
  /* Apply animations - MUST match number of star layers */
  /* Removed 'twinkle' as it wasn't fully implemented */
  animation:
    move-stars-3 150s linear infinite, /* Animates 1st image (Layer 3) */
    move-stars-2 250s linear infinite, /* Animates 2nd image (Layer 2) */
    move-stars-1 400s linear infinite; /* Animates 3rd image (Layer 1) */
}
/* --- Keyframes for Animations --- */
/* Star Movement (Different speeds AND directions for parallax) */
/* Targets correspond to the background-image order */
@keyframes move-stars-1 { /* Slowest - Layer 1 (3rd image) - Moves Down-Right */
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    /* Target 3rd position value */
    to   { background-position: 0 0, 0 0, 5000px 2500px, 0 0; }
}
@keyframes move-stars-2 { /* Medium Speed - Layer 2 (2nd image) - Moves Up-Right */
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
     /* Target 2nd position value */
    to   { background-position: 0 0, 7500px -3750px, 0 0, 0 0; }
}
@keyframes move-stars-3 { /* Fastest - Layer 3 (1st image) - Moves Down-Left */
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
     /* Target 1st position value */
    to   { background-position: -10000px 5000px, 0 0, 0 0, 0 0; }
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 25px;
    position: relative;
    /* Ensure content sits above background */
    z-index: 1;
}

h1,
h2,
h3,
h4 {
    line-height: 1.3;
    margin-bottom: 0.75em;
}

p {
    margin-bottom: 1em;
    color: var(--text-secondary);
}

a,
button {
    transition: all 0.3s ease;
    cursor: pointer;
}

/* --- Hero Section --- */
.hero {
    /* Use Flexbox for layout */
    display: flex;
    justify-content: space-between;
    /* Pushes items apart */
    align-items: center;
    /* Vertically align items IN ROW layout */
    gap: 40px;
    /* Space between text and placeholder */
    margin-bottom: 40px;
    /* User's spacing */
    padding: 40px 0;
    min-height: 300px;
    /* Ensure some height */
}

.hero-content {
    flex: 1 1 40%;
    /* User's flex-basis */
    text-align: left;
    /* Align text to the left */
    margin-left: 10px;
    /* User's margin */
    max-width: 550px;
    /* Optional: Max width for text block */
}

.hero-placeholder {
    flex: 1 1 60%;
    /* User's flex-basis */
    min-height: 250px;
    /* Give placeholder some height */
    /* Styles needed for animation container */
    display: flex;
    align-items: center;
    /* Vertical center content */
    justify-content: center;
    /* Horizontal center content */
    position: relative;
    /* Needed for positioning SVG container */
    pointer-events: none;
    /* Keep this to disable interaction */
}

/* Style the SVG container */
.hero-animation-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style individual scenes within the SVG */
.hero-animation-container svg {
    position: absolute;
    width: 100%;
    max-width: 450px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    pointer-events: none;
}

.hero-animation-container svg.active {
    opacity: 1;
    visibility: visible;
}


.hero h1 {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--neon-teal);
    margin-bottom: 15px;
}

.hero .subheading {
    font-size: 1.7rem;
    color: var(--neon-cyan);
    margin-bottom: 35px;
    font-weight: 500;
}

.cta-button {
    padding: 14px 30px;
    background: var(--neon-teal);
    /* User's color */
    color: #000;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px var(--neon-teal);
    /* User's color */
}

.cta-button:hover {
    background: #fff;
    color: var(--neon-teal);
    /* User's color */
    box-shadow: 0 6px 25px var(--neon-teal);
    /* User's color */
    transform: translateY(-3px) scale(1.02);
}

/* --- Features Section --- */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    /* User's gap */
    margin-bottom: 50px;
    /* User's margin */
}

.feature-card {
    background: var(--dark-bg-secondary);
    border-radius: 12px;
    padding: 30px 25px;
    border: 1px solid var(--border-color);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Base text glow */
.feature-card h3,
.feature-card p {
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}

/* Specific Neon Text Glows */
.feature-card.green h3 {
    color: var(--neon-green);
    text-shadow: 0 0 0px var(--neon-green);
}

/* User's glow */
.feature-card.orange h3 {
    color: var(--neon-orange);
    text-shadow: 0 0 0px var(--neon-orange);
}

/* User's glow */
.feature-card.purple h3 {
    color: var(--neon-purple);
    text-shadow: 0 0 0px var(--neon-purple);
}

/* User's glow */
.feature-card.teal h3 {
    color: var(--neon-teal);
    text-shadow: 0 0 0px var(--neon-teal);
}

/* User's glow */

/* Enhanced Hover Effect */
.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 12px 30px var(--shadow-color),
        0 0 15px rgba(var(--hover-glow-rgb, 57, 255, 20), 0.4);
}

/* Set hover glow color variable based on card class */
.feature-card.green:hover {
    --hover-glow-rgb: 57, 255, 20;
}

.feature-card.orange:hover {
    --hover-glow-rgb: 255, 165, 0;
}

.feature-card.purple:hover {
    --hover-glow-rgb: 193, 137, 255;
}

.feature-card.teal:hover {
    --hover-glow-rgb: 73, 255, 220;
}


.feature-card h3 {
    margin-bottom: 12px;
    font-size: 1.25rem;
    font-weight: 600;
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* --- How It Works + Form Section --- */
.main-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 80px;
}

.how-it-works h2 {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--neon-cyan);
    padding-bottom: 10px;
    display: inline-block;
}

.step {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 15px;
    font-size: 1rem;
    flex-shrink: 0;
    border: 2px solid;
    box-shadow: 0 0 5px currentColor;
}

.step:nth-of-type(1) .step-number {
    border-color: var(--neon-green);
    color: var(--neon-green);
}

.step:nth-of-type(2) .step-number {
    border-color: var(--neon-orange);
    color: var(--neon-orange);
}

.step:nth-of-type(3) .step-number {
    border-color: var(--neon-purple);
    color: var(--neon-purple);
}

.step div strong {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.step p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Input Form Styling */
.input-form {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--border-color);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 8px 25px var(--shadow-color);
}

.input-form h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.input-form label {
    /* display: block; <-- Handled by label-with-tooltip */
    /* margin-bottom: 8px; <-- Handled by label-with-tooltip */
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.input-form select,
.input-form input[type="number"],
.input-form input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid #444;
    background: var(--dark-bg-tertiary);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-form select {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23a0a0b0" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 40px;
}

.input-form input:focus,
.input-form select:focus {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.3);
}

.input-form .cta-button {
    width: 100%;
    margin-top: 15px;
}

/* --- Results Section --- */
.result-section {
    margin-top: 80px;
    padding: 40px 25px;
    background-color: var(--dark-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.options-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    justify-content: center;
}

.options-box {
    background-color: var(--dark-bg-tertiary);
    border-radius: 8px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Added for responsive scroll */
    overflow-x: auto;
    scrollbar-color: #888888 rgba(255, 255, 255, 0.1);
    scrollbar-width: thin;
    position: relative; /* Needed if using ::after gradient */
}
.options-box::-webkit-scrollbar {
    height: 10px;
    background-color: transparent;
}
.options-box::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    margin: 0 2px;
}
.options-box::-webkit-scrollbar-thumb {
    background-color: #888888;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.options-box::-webkit-scrollbar-thumb:hover {
    background-color: #aaaaaa;
}


.options-box h4 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    text-shadow: 0 0 5px currentColor;
}

.options-box:first-child h4 {
    border-bottom-color: var(--neon-green);
    color: var(--neon-green);
}

.options-box:last-child h4 {
    border-bottom-color: var(--neon-orange);
    color: var(--neon-orange);
}


.options-box table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    /* Added for responsive scroll */
    min-width: 400px; /* Adjust as needed */
}

.options-box th,
.options-box td {
    padding: 12px 10px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.options-box tr:last-child td {
    border-bottom: none;
}

.options-box td:first-child {
    display: flex;         /* Use Flexbox layout */
    align-items: center;   /* Vertically align items (symbol text and button) */
    gap: 8px;            /* Add space between symbol and button (replaces margin) */
    /* white-space: nowrap; Optional: Also prevents wrapping within the cell if flex alone isn't enough */
  }

.options-box th {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.options-box td {
    color: var(--text-primary);
    position: relative;
}

.options-box .symbol {
    font-weight: 500;
    color: #fff;
    /* margin-right: 8px; */
    margin-right: 0;
    display: inline-block;
    vertical-align: middle;
}

.copy-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    flex-shrink: 0;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    vertical-align: middle;
    position: relative;
    pointer-events: auto;
    /* Ensure copy buttons ARE interactive */
}

.copy-btn:hover {
    color: var(--neon-cyan);
    background-color: rgba(0, 229, 255, 0.1);
}

/* --- Tooltip Styles (Copy Button) --- */
.copy-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background-color: var(--tooltip-bg);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
    transform-origin: bottom center;
}

.copy-btn::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 3px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--tooltip-bg) transparent transparent transparent;
    z-index: 11;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
    transform-origin: bottom center;
}

.copy-btn:hover::after,
.copy-btn:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

.copy-btn.copied::after {
    background-color: var(--neon-green);
    color: #000;
}

.copy-btn.copied::before {
    border-top-color: var(--neon-green);
}


/* --- Footer --- */
footer {
    text-align: center;
    margin-top: 80px;
    padding: 25px 0;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* --- Info Popup Styles (for Mobile Tooltips) --- */
.info-popup-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    inset: 0; /* Cover entire viewport */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1100; /* Higher than other elements */
    padding: 20px; /* Padding around the content */

    /* Centering */
    align-items: center;
    justify-content: center;

    /* Fade effect */
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.info-popup-overlay.active {
    display: flex; /* Show using flex */
    opacity: 1;
}

.info-popup-content {
    background-color: var(--dark-bg-secondary); /* Use theme background */
    color: var(--text-primary);
    padding: 25px 30px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    max-width: 90vw; /* Limit width based on viewport */
    max-height: 80vh; /* Limit height */
    overflow-y: auto; /* Allow vertical scroll if content is long */
    position: relative; /* For close button positioning */
    width: auto; /* Allow width to adapt to content up to max-width */

    /* Improve scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #888888 rgba(255, 255, 255, 0.1);
}
.info-popup-content::-webkit-scrollbar { width: 8px; }
.info-popup-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
.info-popup-content::-webkit-scrollbar-thumb { background-color: #888888; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.15); }
.info-popup-content::-webkit-scrollbar-thumb:hover { background-color: #aaaaaa; }


.info-popup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.8rem; /* Adjust size */
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
}
.info-popup-close:hover {
    color: var(--neon-red);
}

#info-popup-text {
    white-space: pre-line; /* Respect line breaks from data-tooltip */
    line-height: 1.6;
    font-size: 0.95rem; /* Match other mobile text */
}
/* --- End Info Popup Styles --- */


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {

    /* Main Section Stacking */
    .main-section {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .how-it-works,
    .input-form {
        max-width: 600px;
        margin: 0 auto;
    }

    /* Hero Section Stacking */
    .hero {
        flex-direction: column;
        text-align: center;
        align-items: stretch;
    }

    .hero-content {
        text-align: center;
        max-width: 100%;
        margin-bottom: 30px;
        margin-left: 0;
        flex-basis: auto;
    }

    .hero-placeholder {
        min-height: 300px; /* Adjusted from 300 */
        flex-basis: auto;
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .hero .subheading {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {

    /* Container Padding */
    .container {
        padding: 40px 20px;
    }

    /* Features Grid */
    .features {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    /* Hero Text Size */
    .hero h1 {
        font-size: 2.5rem;
    }

    .hero .subheading {
        font-size: 1.2rem;
    }

    /* Buttons */
    .cta-button {
        padding: 12px 25px;
        font-size: 1rem;
    }

    /* Options Table */
    .options-row {
        grid-template-columns: 1fr;
    }
    .options-box table {
        min-width: 450px; /* Ensure table has min width before scroll */
    }

    /* Hero Placeholder */
    .hero-placeholder {
        min-height: 250px; /* Adjusted height */
        width: 100%;
    }

    /* Menu Positioning */
    .menu-toggle-btn {
        top: 15px;
        right: 20px;
    }
    .menu-dropdown {
        top: 55px;
        right: 15px;
    }

    /* About Us Modal Size */
    .modal-popup {
        max-height: 90vh;
    }
    .modal-content {
        padding: 25px 20px;
    }
    .modal-content h2 {
        font-size: 1.3rem;
    }
    .modal-content p, .modal-content ul {
        font-size: 0.95rem;
    }

    /* --- Responsive Tooltip Positioning (Above & Aligned Left) --- */
    .info-icon::after,
    .info-icon::before {
        pointer-events: none; /* Prevent hover from triggering CSS tooltip */
        display: none !important; /* Force hide CSS tooltip/arrow */
    }

}


@media (max-width: 480px) {

    /* Body Font Size & Animation */
    body {
        font-size: 15px;
        animation: none; /* Disable background animation */
        background-image: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom)); /* Simpler background */
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    /* Container Padding */
    .container {
        padding: 30px 15px;
    }

    /* Hero Section */
    .hero {
        gap: 20px;
    }
    .hero h1 {
        font-size: 2rem;
    }
    .hero .subheading {
        font-size: 1.1rem;
    }
    .hero-placeholder {
        min-height: 200px; /* Reduce height further */
        width: 100%;
        padding: 10px;
    }
    .hero-animation-container svg {
        max-width: 100%;
    }

    /* Buttons */
    .cta-button {
        padding: 10px 20px;
        font-size: 0.95rem;
    }

    /* Features Cards */
    .feature-card {
        padding: 25px 20px;
    }
    .feature-icon {
        width: 45px; /* Slightly smaller icons */
        height: 45px;
        margin-bottom: 15px;
    }

    /* Form */
    .input-form {
        padding: 25px;
    }
    /* Keep columns side-by-side */
    .form-row-split {
        display: flex;
        gap: 15px; /* Maybe reduce gap slightly */
    }
    .form-column {
        flex: 1; /* Keep flex distribution */
        min-width: 0; /* Keep preventing overflow */
    }
    .stepper-btn {
        padding: 0 12px;
    }
    .info-icon {
      width: 14px; /* Slightly smaller info icon */
      height: 14px;
      top: -2px; /* Re-check vertical alignment */
    }
    /* Apply mobile tooltip positioning */
    .info-icon::after,
    .info-icon::before {
       pointer-events: none;
       display: none !important;
   }

    /* Adjust JS popup text size if needed */
   #info-popup-text {
       font-size: 0.9rem;
   }
   .info-popup-content {
       padding: 20px 25px;
   }

    /* Options Table */
    .options-box {
        padding: 20px; /* Reduce padding */
    }
    .options-box table {
        min-width: 380px; /* Adjust min width */
    }
    .options-box th,
    .options-box td {
        padding: 10px 8px;
        font-size: 0.9rem;
    }
    .options-box .symbol {
        font-size: 0.85rem;
    }
    .copy-btn {
        font-size: 0.9rem;
    }
    .copy-btn::after {
        font-size: 0.75rem;
    }

    /* Main Section */
    .main-section {
        gap: 40px;
    }

    /* Modals */
    .modal-overlay {
        padding: 10px; /* Reduce padding for very small screens */
    }
    .modal-content {
        padding: 20px 15px; /* Reduce padding */
    }
    .modal-content h2 {
        font-size: 1.2rem;
    }
    .modal-content p, .modal-content ul {
        font-size: 0.9rem;
    }
    .modal-footer {
        font-size: 0.85rem;
        padding: 10px 15px;
    }
    .close-modal-btn {
        font-size: 1.8rem;
        top: 5px;
        right: 10px;
    }

    /* Rate Limit Modal */
    .rate-limit-modal-content {
        padding: 1.2rem 1.5rem;
    }
    .rate-limit-modal-title {
        font-size: 1.1rem;
    }
    .rate-limit-modal-text {
        font-size: 0.8rem;
    }
    /* About Us Modal Size */
    .modal-popup {
        max-height: 80vh;
    }
    .modal-content {
        padding: 25px 20px;
    }
    .modal-content h2 {
        font-size: 1.3rem;
    }
    .modal-content p, .modal-content ul {
        font-size: 0.95rem;
    }

}