/* RESET & CONFIGURARI DE BAZA */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Outfit", sans-serif;
  background-color: #0d0d0d;
  color: #ffffff;
  line-height: 1.6;
}

/* AUTH MODALS & VALIDATION */
.error-msg {
  color: red;
  font-size: 0.8rem;
  margin-top: 5px;
  display: block;
}

.strength-meter {
  display: flex;
  gap: 5px;
  margin-top: 5px;
  height: 5px;
}

.bar {
  flex: 1;
  background: #e0e0e0;
  border-radius: 2px;
  transition: background 0.3s;
}

.strength-text {
  font-size: 0.8rem;
  margin-top: 5px;
  display: block;
  font-weight: bold;
}

/* Strength Colors */
.weak .bar:nth-child(1) {
  background: red;
}
.medium .bar:nth-child(1),
.medium .bar:nth-child(2) {
  background: orange;
}
.strong .bar:nth-child(1),
.strong .bar:nth-child(2),
.strong .bar:nth-child(3) {
  background: #4caf50;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex; /* Hidden by default, toggled via JS class 'active' */
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-box {
  background: #212121; /* Dark Grey Premium */
  color: white; /* White text for dark mode */
  padding: 2rem;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal-box {
  transform: translateY(0);
}

.close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
  color: white; /* White close button */
}

/* --- PREMIUM INPUT FIELDS (Uiverse) --- */
.input-group {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
}

.input {
  border: solid 1.5px #9e9e9e;
  border-radius: 1rem;
  background: none;
  padding: 1rem;
  font-size: 1rem;
  color: #f5f5f5; /* White Input Text */
  transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  box-sizing: border-box;
}

.user-label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #e8e8e8;
  pointer-events: none;
  transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  background: #212121; /* Matches Modal BG to mask line */
  padding: 0 0.2em;
}

.input:focus,
.input:valid {
  outline: none;
  border: 1.5px solid #cc0000; /* Red Focus */
}

.input:focus ~ .user-label,
.input:valid ~ .user-label {
  transform: translateY(-260%) scale(0.8); /* Moved higher up */
  top: 50%;
  color: #cc0000; /* Red Label */
}

.modal-box h2 {
  text-align: center;
  color: #cc0000;
  margin-bottom: 2rem;
  font-size: 1.8rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

.password-wrapper {
  position: relative;
}

.toggle-pass {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2rem;
}

.btn-submit {
  width: 100%;
  padding: 12px;
  background: #cc0000;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(204, 0, 0, 0.3);
}

.btn-submit:hover {
  background: #990000;
  box-shadow: 0 6px 20px rgba(204, 0, 0, 0.5);
  transform: translateY(-2px);
}

/* Auth Buttons in Header */
.auth-links {
  display: flex;
  gap: 15px;
  align-items: center;
}

.btn-auth {
  background: transparent;
  border: 2px solid white;
  color: white;
  padding: 5px 15px;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Premium base shadow */
}

.btn-auth:hover {
  background: white;
  color: #cc0000;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* Glow effect */
  transform: translateY(-2px);
}

/* .btn-auth.login uses default styles */

/* .btn-auth.register uses default styles now */

/* --- FIXED HEADER WRAPPER --- */
#fixed-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* --- NOUL HEADER --- */

/* 1. Top Bar (Rosu) */
.top-bar {
  background-color: #1a1a1a; /* Gri Inchis (Match Nav) */
  color: white;
  font-size: 0.8rem;
  padding: 8px 0;
}

/* UPDATED BY USER REQUEST - TOP BAR FIX (Cart Right, No Wrap) */
.container.top-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  box-sizing: border-box;
}

@media (max-width: 430px) {
  .container.top-bar-content {
    flex-wrap: nowrap;
  }

  .auth-links {
    display: flex;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
  }

  .top-icons {
    display: flex;
    align-items: center;
    margin-left: auto; /* Pushes cart to the right */
    flex: 0 0 auto;
  }

  #cart-btn {
    order: 99; /* Ensures it's visually last if needed */
  }

  /* Compact Buttons for Mobile */
  .auth-links a,
  .auth-links button {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 999px;
    min-width: auto;
    white-space: nowrap;
  }

  /* ABOUT MODAL IMAGE FIX (User Request: Object-Fit Container) */
  /* ABOUT MODAL IMAGE FIX (FINAL ROBUST VERSION) */
  #about-modal .about-image {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 280px !important; /* Force Height on Container */
    min-height: 280px !important;
    margin: 1px auto 16px auto !important; /* Reverted to 1px (User Request) */
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #000 !important; /* Fallback background */
    flex: 0 0 280px !important; /* Prevent Flex Shrink */
  }

  #about-modal .about-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important; /* Match container */
    object-fit: cover !important;
    object-position: center 5% !important; /* Adjusted to 5% as requested */
    /* Removed visibility/opacity overrides to prevent blocking clicks when modal is closed */
  }
}

.top-icons span {
  cursor: pointer;
  margin: 0 5px;
}

/* 2. Main Header (Negru) */
.main-header {
  background-color: black;
  padding: 20px 0;
  transition: background-color 0.3s ease;
}

/* Removed transparency on scroll */

.main-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-phone {
  color: white;
  font-size: 1.1rem;
  font-weight: 500;
}

.contact-phone a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.contact-phone a:hover {
  color: #ff4d4d;
}

.logo-center {
  text-align: center;
}

.main-logo-img {
  height: 90px;
  width: auto;
  display: block; /* Ensures margin auto works */
  margin: 0 auto; /* Centers the block element */
}

/* Removed logo transparency on scroll */

/* --- CONTACT BUTTONS (Neumorphic) --- */
.btn-get-in-touch {
  background-color: #333; /* Dark Base */
  color: white;
  border: none;
  padding: 10px 25px; /* Default Pill Shape */
  text-decoration: none;
  font-weight: 700;
  border-radius: 50px; /* Fully rounded */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.9rem;
  font-family: "Outfit", sans-serif;
  transition: all 0.3s ease;
  /* Neumorphic Shadows */
  box-shadow: -4px -4px 10px #444, 4px 4px 10px #222;
}

/* Specific Pill Size for Icons */
.btn-get-in-touch.contact-pill {
  padding: 0 !important;
  width: 65px !important;
  height: 42px !important;
  min-width: 65px !important;
  border-radius: 50px !important;
  gap: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.btn-get-in-touch:hover {
  background-color: #25d366; /* Green on Hover */
  color: white;
  transform: translateY(-2px);
  /* Green Glow Shadows */
  box-shadow: -4px -4px 10px #4ade80, 4px 4px 10px #14532d;
}

/* Cart Icon Hover Effect */
.cart-wrapper:hover svg {
  stroke: #cc0000; /* Turns red on hover */
  transform: scale(1.1); /* Slight zoom */
  transition: all 0.2s ease;
}

/* 3. Main Nav (Gri Inchis) */
.main-nav {
  background-color: #1a1a1a;
  border-top: 1px solid #333;
  transition: background-color 0.3s ease;
}

/* Removed transparency on scroll */

.nav-links {
  display: flex;
  justify-content: space-evenly;
  padding: 15px 0;
  flex-wrap: wrap;
}

.nav-links a {
  color: #cccccc;
  text-decoration: none;
  margin: 0 20px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
  color: #ff4d4d;
}

/* Container Utility (pentru centrare continut) */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* HERO SECTION */
/* HERO SECTION - MOBILE FIRST */
.hero {
  min-height: 60svh; /* Mobile Base */
  display: flex;
  flex-direction: column-reverse; /* Mobile Layout */
  align-items: center;
  justify-content: center;
  padding: 120px 20px 40px 20px; /* Top padding for header */
  text-align: center;
  position: relative; /* Needed for pseudo-element positioning */
  overflow: hidden; /* Ensures the zoomed image doesn't overflow */
}

/* Background Image via Pseudo-element for Zoom Effect */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/hero.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1;
  will-change: transform; /* Hint for browser optimization */
  animation: heroZoom 10s infinite alternate; /* Visual breathing effect */
}

/* Animation Keyframes */
@keyframes heroZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* Increased to 15% zoom */
  }
}

/* Desktop Override */
@media (min-width: 901px) {
  .hero {
    min-height: 80vh;
    flex-direction: row; /* Desktop Layout */
    justify-content: center;
    text-align: left;
    padding: 0;
    /* removed background properties from here as they are now in ::before */
  }
}

.hero-content {
  max-width: 800px;
  color: white;
  padding: 30px 20px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  width: 100%;
  position: relative; /* Ensure it sits above the ::before background */
  z-index: 1;

  margin: 0 auto;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); /* Fluid typography */
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.hero p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin-bottom: 40px;
  color: inherit;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Reset image styles if they exist */
.hero-image img {
  max-height: 50vh;
  margin-bottom: 30px;
  display: block;
}

@media (min-width: 901px) {
  .hero-content {
    text-align: center; /* Actually center text for desktop too if desired, or keep as applied */
    padding: 40px 30px;
  }
  .hero-image img {
    margin-bottom: 0;
  }
}

/* Buton Hero Rosu */
.cta-button {
  background-color: #ff4d4d;
  color: white;
  padding: 15px 40px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: 4px; /* Mai patratos */
  display: inline-block;
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 15px rgba(255, 77, 77, 0.4); /* Red Glow */
}

.cta-button:hover {
  background-color: #e60000;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 77, 77, 0.6); /* Stronger Red Glow */
}

/* SERVICII */
.services {
  padding: 100px 5%;
  text-align: center;
  background: transparent; /* Transparent section */
}

.services h2 {
  font-size: 2.5rem;
  margin-bottom: 60px;
}

.cards-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.card {
  background-color: rgba(26, 26, 26, 0.8);
  backdrop-filter: blur(10px);
  padding: 30px; /* Reduced mobile padding */
  border-radius: 15px;
  width: 100%; /* Mobile Base: Fluid */
  max-width: 380px; /* Cap width */
  text-align: left;
  transition: transform 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .card {
    padding: 40px; /* Desktop Padding */
  }
}

.card:hover {
  transform: translateY(-10px);
}

.card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #3b82f6;
}

.card p {
  color: #999;
  margin-bottom: 25px;
}

.card button {
  background: transparent;
  border: none;
  color: white;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 5px;
}

/* --- SHOPPING CART MODAL --- */
.cart-box {
  width: 90%;
  max-width: 500px;
}

.cart-items {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f9f9f9;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-details h4 {
  margin: 0;
  font-size: 1rem;
  color: #333;
}

.item-details p {
  margin: 0;
  color: #cc0000;
  font-weight: bold;
}

.remove-item {
  cursor: pointer;
  color: #999;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.remove-item:hover {
  color: red;
}

.cart-total {
  text-align: right;
  margin-bottom: 20px;
}

.cart-total h3 {
  font-size: 1.3rem;
  color: #333;
}

.cart-total span {
  color: #cc0000;
}

.cart-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.btn-continue,
.btn-checkout {
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  border: none;
  flex: 1;
  transition: all 0.3s;
}

.btn-continue {
  background: #f0f0f0;
  color: #333;
}

.btn-continue:hover {
  background: #e0e0e0;
}

.btn-checkout {
  background: #cc0000;
  color: white;
}

.btn-checkout:hover {
  background: #990000;
}
/* --- REDESIGNED SIDEBAR CART --- */
#cart-modal {
  justify-content: flex-end;
  align-items: stretch;
}
.cart-box {
  width: 100%;
  max-width: 450px;
  height: 100%;
  border-radius: 0;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin: 0;
  display: flex;
  flex-direction: column;
}
.modal-overlay.active .cart-box {
  transform: translateX(0);
}
.cart-items {
  flex-grow: 1;
  overflow-y: auto;
}

/* --- CART ICON & BADGE --- */
.cart-wrapper {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.cart-count {
  position: absolute;
  top: -5px;
  right: -8px;
  background-color: #cc0000;
  width: 18px;
  height: 18px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 1px solid white;
}

.cart-wrapper svg {
  cursor: pointer;
}

/* --- PRICING CARDS --- */
/* Old block removed - see Reset block at bottom */
.pricing-card .price {
  font-size: 2rem;
  color: #cc0000;
  font-weight: bold;
  margin: 10px 0 20px;
}
.pricing-card .price span {
  font-size: 1rem;
  color: #888;
  font-weight: normal;
}
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
  text-align: left;
}
.pricing-card ul li {
  padding: 8px 0;
  border-bottom: 1px solid #333;
  color: #ccc;
}
.pricing-card ul li:last-child {
  border-bottom: none;
}
.pricing-card button {
  background: transparent;
  color: white;
  border: 2px solid white;
  padding: 10px 25px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  border-bottom: 2px solid white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.pricing-card button:hover {
  background: white;
  color: #cc0000;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}
.popular {
  border: 2px solid #cc0000;
  transform: scale(1.05);
  z-index: 1;
  box-shadow: 0 0 20px rgba(204, 0, 0, 0.2);
}
.badge-popular {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #cc0000;
  color: white;
  padding: 5px 15px;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 20px;
  text-transform: uppercase;
}

/* --- ABOUT MODAL --- */
.about-box {
  max-width: 900px !important;
  width: 95% !important;
  padding: 0 !important;
  display: flex;
  overflow: hidden;
}
.about-content {
  display: flex;
  width: 100%;
  flex-direction: column; /* Mobile Base: Column */
}

.about-image {
  width: 80% !important; /* Mobile Base */
  max-width: 100% !important;
  height: auto !important;
  max-height: 250px;
  margin: 20px auto 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-text {
  flex: 1;
  padding: 15px 10px; /* Mobile Base */
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}

.about-text h2 {
  color: #cc0000;
  font-size: 1.5rem; /* Mobile */
  margin-bottom: 20px;
  text-transform: uppercase;
  border-bottom: 2px solid #cc0000;
  display: inline-block;
  padding-bottom: 10px;
  text-align: center; /* Center title on mobile usually looks better */
  align-self: center;
}

.about-text p {
  color: #555;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 15px;
}

@media (min-width: 769px) {
  /* Desktop Override */
  .about-content {
    flex-direction: row;
  }
  .about-image {
    flex: 1;
    width: auto !important;
    max-width: 50% !important;
    max-height: none;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .about-text {
    padding: 40px;
  }
  .about-text h2 {
    font-size: 2rem;
    align-self: flex-start; /* Align left */
    text-align: left;
  }
}

/* Close Button Mobile Optimization */
@media (max-width: 768px) {
  #about-modal .close-modal {
    color: white;
    background: black;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 10px;
    right: 10px;
    opacity: 1;
    z-index: 10;
  }
}

/* --- PACKAGE TABS SYSTEM --- */
.package-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.tab-btn {
  background: transparent;
  color: white;
  border: 2px solid white;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
  transition: all 0.3s;
  text-transform: uppercase;
  font-size: 0.9rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.tab-btn.active,
.tab-btn:hover {
  background: white;
  color: #cc0000;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}
/* Tab Content Styling */
.tab-content {
  display: none;
  animation: fadeIn 0.5s ease;
  width: 100%;
}

/* Tab Content Styling - Reset */
.tab-content {
  display: none; /* Hidden by default */
  width: 100%;
  animation: fadeIn 0.5s ease;
}

/* Active State - Centered Flex Layout */
.tab-content.active {
  display: flex !important; /* Force overrides */
  flex-wrap: wrap; /* Allow wrapping */
  justify-content: center; /* Center horizontally */
  gap: 30px;
  padding-bottom: 20px;
}

/* --- PRICING CARDS RESET --- */
.pricing-card {
  text-align: center;
  position: relative;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 30px;
  transition: transform 0.3s ease, border-color 0.3s ease;

  /* Dimensions */
  width: 100%; /* Default for mobile */
  max-width: 350px; /* Max width for desktop */
  flex: 1 1 300px; /* Flex basis with grow/shrink */
  box-sizing: border-box;
}

/* Add-on Card Style */

/* Fix for Competition Badge overlap */
#competition .pricing-card {
  margin-top: 30px;
}

/* --- CHECKOUT PAGE --- */
.checkout-wrapper {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.checkout-form-section {
  flex: 2;
  min-width: 300px;
}
.checkout-summary-section {
  flex: 1;
  min-width: 280px;
}
.section-title {
  font-size: 1.5rem;
  color: #cc0000;
  margin-bottom: 25px;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
}
.form-row {
  display: flex;
  gap: 20px;
}
.form-row .form-group {
  flex: 1;
}
.section-subtitle {
  color: white;
  margin: 30px 0 15px;
}
.payment-option {
  display: flex;
  align-items: center;
  background: #1a1a1a;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #333;
  border-radius: 5px;
  cursor: pointer;
  color: white;
  transition: border-color 0.3s;
}
.payment-option:hover {
  border-color: #cc0000;
}
.payment-option input {
  margin-right: 15px;
  accent-color: #cc0000;
}
.btn-place-order {
  width: 100%;
  margin-top: 20px;
  font-size: 1.1rem;
  padding: 15px;
}
.terms-text {
  font-size: 0.8rem;
  color: #666;
  margin-top: 15px;
  text-align: center;
}
.terms-text a {
  color: #888;
  text-decoration: underline;
}
.summary-box {
  background: #1a1a1a;
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #333;
  position: sticky;
  top: 100px;
}
.order-item-display {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #ccc;
}
.order-item-title {
  font-weight: bold;
  color: white;
}
.summary-divider {
  height: 1px;
  background: #333;
  margin: 20px 0;
}
.summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  font-weight: bold;
  color: #cc0000;
}

/* --- EXPRESS CHECKOUT BUTTONS --- */
.express-checkout-container {
  width: 100%;
}
.express-buttons {
  margin-bottom: 20px;
}
.btn-express {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 5px;
  border: none;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  font-family: "Outfit", sans-serif;
}
.btn-express:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}
.btn-apple {
  background-color: #000;
  border: 1px solid #333;
}
.btn-google {
  background-color: #1f1f1f;
  border: 1px solid #5f6368;
}
.btn-express svg {
  margin-right: 8px;
}

/* --- AUTH MODAL DIVIDER --- */
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  color: #666;
  font-size: 0.9rem;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #333;
}
.auth-divider::before {
  margin-right: 10px;
}
.auth-divider::after {
  margin-left: 10px;
}

/* --- GALLERY --- */
.gallery-section {
  padding: 80px 20px;
  text-align: center;
}

.gallery-section h2 {
  font-size: 2.5rem;
  margin-bottom: 50px;
  color: #fff;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Mobile Base: 2 columns */
  gap: 10px;
}

@media (min-width: 769px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Desktop */
    gap: 15px;
  }
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 1 / 1; /* Square images */
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.btn-load-more {
  display: block;
  margin: 40px auto 0;
  padding: 12px 30px;
  background-color: transparent;
  border: 2px solid #cc0000;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.btn-load-more:hover {
  background-color: #cc0000;
  color: white;
}

/* --- LIGHTBOX (MODAL) --- */
#lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#lightbox-modal.active {
  display: flex;
  opacity: 1;
}

#lightbox-modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

#lightbox-modal.active img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 30px;
  right: 30px;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  z-index: 10001;
  transition: color 0.3s ease;
}

.lightbox-close:hover {
  color: #cc0000;
}

/* --- FOOTER --- */
footer {
  text-align: left; /* Aligns text to the left corner */
  padding: 20px;
  background-color: #000;
  color: #666;
  font-size: 0.8rem;
  margin-top: 50px;
  border-top: 1px solid #1a1a1a;
}

/* =========================================
   MOBILE OPTIMIZATION (Max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
  /* --- GLOBAL ADJUSTMENTS --- */
  html,
  body {
    overflow-x: hidden; /* Prevent horizontal scroll */
  }

  /* --- HEADER --- */
  body .main-header {
    padding: 10px 0 !important;
  }

  body .main-header-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 15px !important;
  }

  body .logo-center {
    width: 100% !important;
    order: -1 !important;
    margin-bottom: 5px !important;
  }

  body .main-logo-img {
    height: 70px !important;
  }

  /* Place Phone and WhatsApp side-by-side */
  body .contact-phone,
  body .btn-get-in-touch {
    font-size: 0.9rem !important;
    width: auto !important;
    flex: 0 1 auto !important;
    display: inline-block !important;
  }

  body .cart-wrapper {
    font-size: 0.9rem !important;
  }

  /* --- PACKAGE TABS (3x2 Grid) --- */
  body .package-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    overflow-x: visible !important; /* Disable scroll */
    padding-bottom: 0 !important;
    justify-content: center !important;
    /* User Requested Updates */
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  body .tab-btn {
    width: 100% !important;
    white-space: normal !important; /* Allow internal wrapping if needed */
    padding: 8px 2px !important; /* Tight padding */
    font-size: 0.75rem !important; /* Smaller text for 3-col */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    /* User Requested Updates */
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- PRICING & CARDS (Vertical Stack) --- */
  /* --- PRICING & CARDS (Vertical Stack) --- */
  body .tab-content {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    overflow: visible !important; /* Allow shadows/badges to spill out without scrollbars */
    align-items: center !important;
    gap: 30px !important;
    padding-bottom: 20px !important;
    padding-left: 0 !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
  }

  body .card {
    width: 92% !important; /* Leave room for shadows/edges */
    min-width: unset !important;
    max-width: 380px !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; /* Ensure shadow is consistent */
  }

  body .card.popular {
    margin-top: 35px !important; /* Extra space for badge */
    overflow: visible !important;
  }

  /* Navigation - Stacked & Tighter */
  body .nav-links {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 10px 0 !important;
  }

  body .nav-links a {
    margin: 0 !important;
    font-size: 0.9rem !important;
    padding: 5px !important;
  }

  /* --- HERO SECTION (Fix Visibility) --- */
  .hero {
    min-height: 60vh; /* Reduce height on mobile */
    background-attachment: scroll !important; /* FIX: 'fixed' often creates blank/zoom issues on mobile */
    background-position: center top !important;
    padding-top: 100px; /* Space for fixed header */
  }

  .hero-content {
    padding: 30px 20px;
    margin: 0 15px;
    width: auto;
  }

  .hero h1 {
    font-size: 2rem !important; /* Force resize */
    line-height: 1.2;
  }

  .hero p {
    font-size: 1rem;
    margin-bottom: 25px;
  }

  /* --- BUTTONS --- */
  .cta-button {
    padding: 12px 30px;
    font-size: 1rem;
    width: 100%; /* Full width for easier tapping */
    max-width: 300px;
  }

  .btn-load-more {
    width: 90%;
    padding: 15px;
  }

  /* --- GALLERY (2 Columns) --- */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* Force 2 columns */
    gap: 10px;
  }

  .gallery-section h2 {
    font-size: 2rem;
  }

  /* --- MODALS (Touch Friendly) --- */
  .lightbox-close {
    font-size: 2.5rem;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.5); /* Background for visibility */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-box {
    width: 95%;
    padding: 1.5rem;
  }

  /* --- PRICING & CARDS --- */
  .cards-container {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 100%;
    max-width: 350px;
  }
}

/* =========================================
   NARROW MOBILE OPTIMIZATION (iPhone 390px / Android 360px)
   ========================================= */
@media (max-width: 430px) {
  /* Enforce 2 columns strictly on small screens */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Adjust container padding for narrow screens */
  .container {
    padding: 0 15px !important;
  }

  /* Fine-tune Hero Text for 360px width */
  .hero h1 {
    font-size: 1.8rem !important;
  }

  .hero p {
    font-size: 0.95rem !important;
  }

  /* Compact header elements */
  .main-logo-img {
    height: 60px !important;
  }

  /* User Requested Updates for 430px */
  body .package-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .tab-btn {
    padding: 8px 6px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }
}

/* --- UTILITY: SCROLL LOCK --- */
html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
}

/* --- DARK INSET FORM STYLES (Praashoo7) --- */
.custom-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 1em;
  background-color: #171717;
  border-radius: 25px;
  transition: 0.4s ease-in-out;
  width: 100%;
}

.custom-form:hover {
  transform: scale(1.02);
  border: 1px solid black;
}

.custom-form-heading {
  text-align: center;
  margin: 1em 0;
  color: rgb(255, 255, 255);
  font-size: 1.5em;
  font-weight: bold;
}

.field {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 25px;
  background-color: #171717;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
  margin-bottom: 15px; /* Spacing between fields */
  height: 45px; /* Explicit height helps alignment */
}

.field .input-field {
  width: 100%;
  padding-left: 45px; /* Space for left icon */
  padding-right: 45px; /* Space for right toggle */
  background: none;
  border: none;
  outline: none;
  color: #d3d3d3;
  font-size: 1rem;
  height: 100%;
}

.field .input-icon {
  position: absolute;
  left: 15px;
  color: #888;
  pointer-events: none;
  height: 18px;
  width: 18px;
}

.field .toggle-pass {
  position: absolute;
  right: 15px;
  cursor: pointer;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  height: 100%;
  padding: 0 5px; /* Click target buffer */
}

.field .toggle-pass:hover {
  color: white;
}

.field .toggle-pass:hover {
  color: white;
}

.custom-form .btn-container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin-top: 1.5em;
  gap: 10px;
}

.button1 {
  padding: 0.5em 1.5em;
  border-radius: 5px;
  border: none;
  outline: none;
  transition: 0.4s ease-in-out;
  background-color: #252525;
  color: white;
  cursor: pointer;
  font-weight: bold;
}

.button1:hover {
  background-color: black;
  color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.button2 {
  padding: 0.5em 1.5em;
  border-radius: 5px;
  border: none;
  outline: none;
  transition: 0.4s ease-in-out;
  background-color: #252525;
  color: white;
  cursor: pointer;
}

.button2:hover {
  background-color: black;
  color: white;
}

.button3 {
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 0.5em;
  border-radius: 5px;
  border: none;
  outline: none;
  transition: 0.4s ease-in-out;
  background-color: transparent;
  color: #888;
  cursor: pointer;
  width: 100%;
}

.button3:hover {
  background-color: #252525;
  color: white;
}

/* --- UIVERSE NEON BUTTON (User Request) --- */
/* From Uiverse.io by satyamchaudharydev */
/* --- NEUMORPHIC BUTTON (User Request) --- */
/* From Uiverse.io by adamgiebl */
.neu-button {
  background-color: #2b2f36; /* grey metalic */
  border-radius: 50px;
  border: 1px solid #1f2329;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.6),
    inset -4px -4px 8px rgba(255, 255, 255, 0.06);
  color: #e6e6e6;
  cursor: pointer;
  font-size: 16px; /* Adjusted slightly for header */
  padding: 10px 25px; /* Adjusted padding for header fit */
  transition: all 0.2s ease-in-out;
  font-family: "Outfit", sans-serif; /* Site Font */
  font-weight: 600;
  margin: 0 10px;
  text-transform: uppercase;
}

.neu-button:hover {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.7),
    inset -2px -2px 4px rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.6);
  color: #fff;
}

.neu-button:active {
  box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.8),
    inset -2px -2px 6px rgba(255, 255, 255, 0.05);
}

.neu-button:focus {
  outline: none;
}

.uiverse-btn:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  box-shadow: inset 0 3px 12px var(--c-shadow-inset-top),
    inset 0 -3px 4px var(--c-shadow-inset-bottom);
}

.uiverse-btn .wrapper {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  overflow: hidden;
  border-radius: 24px;
  min-width: 132px;
  padding: 12px 0;
  width: 100%;
  position: relative; /* Ensure absolute children position relative to this */
}

.uiverse-btn .wrapper span {
  display: inline-block;
  position: relative;
  z-index: 10; /* Text above particles */
}

.uiverse-btn:hover {
  --duration: 1400ms;
}

.uiverse-btn .wrapper .circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  filter: blur(var(--blur, 8px));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse-btn .wrapper .circle.circle-1,
.uiverse-btn .wrapper .circle.circle-9,
.uiverse-btn .wrapper .circle.circle-10 {
  --background: var(--c-color-4);
}

.uiverse-btn .wrapper .circle.circle-3,
.uiverse-btn .wrapper .circle.circle-4 {
  --background: var(--c-color-2);
  --blur: 14px;
}

.uiverse-btn .wrapper .circle.circle-5,
.uiverse-btn .wrapper .circle.circle-6 {
  --background: var(--c-color-3);
  --blur: 16px;
}

.uiverse-btn .wrapper .circle.circle-2,
.uiverse-btn .wrapper .circle.circle-7,
.uiverse-btn .wrapper .circle.circle-8,
.uiverse-btn .wrapper .circle.circle-11,
.uiverse-btn .wrapper .circle.circle-12 {
  --background: var(--c-color-1);
  --blur: 12px;
}

.uiverse-btn .wrapper .circle.circle-1 {
  --x: 0;
  --y: -40px;
  --animation: circle-1;
}

.uiverse-btn .wrapper .circle.circle-2 {
  --x: 92px;
  --y: 8px;
  --animation: circle-2;
}

.uiverse-btn .wrapper .circle.circle-3 {
  --x: -12px;
  --y: -12px;
  --animation: circle-3;
}

.uiverse-btn .wrapper .circle.circle-4 {
  --x: 80px;
  --y: -12px;
  --animation: circle-4;
}

.uiverse-btn .wrapper .circle.circle-5 {
  --x: 12px;
  --y: -4px;
  --animation: circle-5;
}

.uiverse-btn .wrapper .circle.circle-6 {
  --x: 56px;
  --y: 16px;
  --animation: circle-6;
}

.uiverse-btn .wrapper .circle.circle-7 {
  --x: 8px;
  --y: 28px;
  --animation: circle-7;
}

.uiverse-btn .wrapper .circle.circle-8 {
  --x: 28px;
  --y: -4px;
  --animation: circle-8;
}

.uiverse-btn .wrapper .circle.circle-9 {
  --x: 20px;
  --y: -12px;
  --animation: circle-9;
}

.uiverse-btn .wrapper .circle.circle-10 {
  --x: 64px;
  --y: 16px;
  --animation: circle-10;
}

.uiverse-btn .wrapper .circle.circle-11 {
  --x: 4px;
  --y: 4px;
  --animation: circle-11;
}

.uiverse-btn .wrapper .circle.circle-12 {
  --blur: 14px;
  --x: 52px;
  --y: 4px;
  --animation: circle-12;
}

@keyframes circle-1 {
  33% {
    transform: translate(0px, 16px) translateZ(0);
  }
  66% {
    transform: translate(12px, 64px) translateZ(0);
  }
}

@keyframes circle-2 {
  33% {
    transform: translate(80px, -10px) translateZ(0);
  }
  66% {
    transform: translate(72px, -48px) translateZ(0);
  }
}

@keyframes circle-3 {
  33% {
    transform: translate(20px, 12px) translateZ(0);
  }
  66% {
    transform: translate(12px, 4px) translateZ(0);
  }
}

@keyframes circle-4 {
  33% {
    transform: translate(76px, -12px) translateZ(0);
  }
  66% {
    transform: translate(112px, -8px) translateZ(0);
  }
}

@keyframes circle-5 {
  33% {
    transform: translate(84px, 28px) translateZ(0);
  }
  66% {
    transform: translate(40px, -32px) translateZ(0);
  }
}

@keyframes circle-6 {
  33% {
    transform: translate(28px, -16px) translateZ(0);
  }
  66% {
    transform: translate(76px, -56px) translateZ(0);
  }
}

@keyframes circle-7 {
  33% {
    transform: translate(8px, 28px) translateZ(0);
  }
  66% {
    transform: translate(20px, -60px) translateZ(0);
  }
}

@keyframes circle-8 {
  33% {
    transform: translate(32px, -4px) translateZ(0);
  }
  66% {
    transform: translate(56px, -20px) translateZ(0);
  }
}

@keyframes circle-9 {
  33% {
    transform: translate(20px, -12px) translateZ(0);
  }
  66% {
    transform: translate(80px, -8px) translateZ(0);
  }
}

@keyframes circle-10 {
  33% {
    transform: translate(68px, 20px) translateZ(0);
  }
  66% {
    transform: translate(100px, 28px) translateZ(0);
  }
}

@keyframes circle-11 {
  33% {
    transform: translate(4px, 4px) translateZ(0);
  }
  66% {
    transform: translate(68px, 20px) translateZ(0);
  }
}

@keyframes circle-12 {
  33% {
    transform: translate(56px, 0px) translateZ(0);
  }
  66% {
    transform: translate(60px, -32px) translateZ(0);
  }
}

/* --- ACTION BUTTONS (Neumorphic Default) --- */
/* From Uiverse.io by lenfear23 */
.button1,
.button2,
.btn-checkout {
  margin: 12px;
  height: 50px;
  width: auto;
  min-width: 120px;
  padding: 0 20px;
  border-radius: 10px;
  background: #333;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #444,
    inset -5px -5px 10px #222;
  font-family: "Outfit", sans-serif;
  cursor: pointer;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: rgb(161, 161, 161);
  transition: 500ms;
}

.button1:hover,
.button2:hover,
.btn-checkout:hover {
  box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #222,
    inset -5px -5px 10px #444;
  color: #d6d6d6;
  transition: 500ms;
}

.btn-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- CONTINUE SHOPPING (Light Neumorphic) --- */
/* --- CONTINUE SHOPPING (Inset Neumorphic) --- */
.btn-continue {
  margin: 12px;
  height: 50px;
  width: auto;
  min-width: 120px;
  padding: 0 20px;
  border-radius: 10px;
  background: #333; /* Dark to match other buttons */
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  /* INSET SHADOW = "Pressed In" look */
  box-shadow: inset 5px 5px 10px #222, inset -5px -5px 10px #444;
  font-family: "Outfit", sans-serif;
  cursor: pointer;
  border: none !important;
  font-size: 14px;
  font-weight: 700;
  color: #888; /* Muted text for secondary action */
  transition: 500ms;
}

.btn-continue:hover {
  background: #cc0000;
  color: white;
  /* On hover, pop OUT (Convex) like the others */
  box-shadow: -5px -5px 15px #ff6666, 5px 5px 15px #990000;
  transition: 500ms;
}

/* --- SPARKLE BUTTON (Hero CTA) --- */
.cta-button {
  --black-700: #333;
  --red-neon: rgba(255, 0, 50, 1); /* Bright Red */
  --border_radius: 9999px;
  --transtion: 0.3s ease-in-out;
  --offset: 2px;

  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transform-origin: center;
  padding: 1rem 2rem;
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--border_radius);
  transform: scale(calc(1 + (var(--active, 0) * 0.1)));
  transition: transform var(--transtion);
  text-decoration: none;
}

.cta-button,
.cta-button:hover {
  color: white;
}

.cta-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /* BASE: RED (Inverted from Black) */
  background-color: var(--red-neon);
  border-radius: var(--border_radius);
  box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
    0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
    /* DARK RING ON HOVER (Inverted from Red) */ 0 0 0
      calc(var(--active, 0) * 0.375rem) rgba(0, 0, 0, 0.75);
  transition: all var(--transtion);
  z-index: 0;
}

.cta-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /* DARK OVERLAY ON HOVER */
  background-color: #000;
  background-image: radial-gradient(
      at 51% 89%,
      rgba(50, 50, 50, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 100% 100%, rgba(0, 0, 0, 1) 0px, transparent 50%),
    radial-gradient(at 22% 91%, rgba(0, 0, 0, 1) 0px, transparent 50%);
  background-position: top;
  opacity: var(--active, 0);
  border-radius: var(--border_radius);
  transition: opacity var(--transtion);
  z-index: 2;
}

.cta-button:is(:hover, :focus-visible) {
  --active: 1;
}

.cta-button:active {
  transform: scale(1);
}

.cta-button .dots_border {
  --size_border: calc(100% + 2px);
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--size_border);
  height: var(--size_border);
  background-color: transparent;
  border-radius: var(--border_radius);
  z-index: -10;
}

.cta-button .dots_border::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left;
  transform: rotate(0deg);
  width: 100%;
  height: 2rem;
  background-color: white;
  mask: linear-gradient(transparent 0%, white 120%);
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.cta-button .sparkle {
  position: relative;
  z-index: 10;
  width: 1.75rem;
}

.cta-button .sparkle .path {
  fill: currentColor;
  stroke: currentColor;
  transform-origin: center;
  color: hsl(0, 0%, 100%); /* White sparkles */
}

.cta-button:is(:hover, :focus) .sparkle .path {
  animation: path 1.5s linear 0.5s infinite;
}

.cta-button .sparkle .path:nth-child(1) {
  --scale_path_1: 1.2;
}
.cta-button .sparkle .path:nth-child(2) {
  --scale_path_2: 1.2;
}
.cta-button .sparkle .path:nth-child(3) {
  --scale_path_3: 1.2;
}

@keyframes path {
  0%,
  34%,
  71%,
  100% {
    transform: scale(1);
  }
  17% {
    transform: scale(var(--scale_path_1, 1));
  }
  49% {
    transform: scale(var(--scale_path_2, 1));
  }
  83% {
    transform: scale(var(--scale_path_3, 1));
  }
}

.cta-button .text_button {
  position: relative;
  z-index: 10;
  background-image: linear-gradient(
    90deg,
    hsla(0 0% 100% / 1) 0%,
    hsla(0 0% 100% / var(--active, 0)) 120%
  );
  background-clip: text;
  font-size: 1rem;
  color: transparent;
  -webkit-background-clip: text; /* Needed for some browsers */
}

/* --- CYBER CARD (3D Interactive Pricing) --- */
.cyber-container {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  height: auto;
  aspect-ratio: 3/4;
  transition: 200ms;
  perspective: 800px; /* Moved from canvas */
  transform-style: preserve-3d; /* Enable 3D space */
}

.cyber-card {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 20px;
  transition: 700ms;
  background: linear-gradient(45deg, #1a1a1a, #262626);
  border: 2px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.2);
  padding: 20px;
  color: white;
  transform-style: preserve-3d; /* Pass 3D context to children */
}

/* ... (skipping content/prompt/title styles - unchanged) ... */

/* Button Adaptation */
.cyber-btn {
  margin-top: auto;
  background: transparent;
  border: 1px solid #00ffaa;
  color: #00ffaa;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
  z-index: 100;
  position: relative;
  transform: translateZ(60px); /* PROJECT BUTTON OUTWARDS */
}
/* ... */
.cyber-canvas {
  /* Perspective moved to container */
  inset: 0;
  z-index: 200;
  position: absolute;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.cyber-card-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Space title, features, button */
  align-items: center;
  z-index: 10; /* Ensure content is clickable above layers */
}

.cyber-prompt {
  /* Used for small tag or "Plata Unica" */
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  margin-top: 5px;
}

.cyber-title {
  /* Main Package Name */
  opacity: 1; /* Keep visible unlike snippet */
  font-size: 20px; /* Scaled down slightly */
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
  width: 100%;
  padding-top: 10px;
  background: linear-gradient(45deg, #00ffaa, #00a2ff);
  background-clip: text; /* Standard property */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 15px rgba(0, 255, 170, 0.3));
  text-shadow: 0 0 10px rgba(92, 103, 255, 0.5),
    0 0 20px rgba(92, 103, 255, 0.3);
}

.cyber-subtitle {
  /* Used for Price */
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 10px;
}

.cyber-highlight {
  color: #00ffaa;
  margin-left: 5px;
  background: linear-gradient(90deg, #5c67ff, #ad51ff);
  background-clip: text; /* Standard property */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

/* Feature List Adaptation */
.cyber-features {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  z-index: 20;
}
.cyber-features li {
  margin: 5px 0;
}

/* Button Adaptation */
.cyber-btn {
  margin-top: auto;
  background: transparent;
  border: 1px solid #00ffaa;
  color: #00ffaa;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
  z-index: 100; /* Ensure clickable */
  position: relative;
}
.cyber-btn:hover {
  background: #00ffaa;
  color: black;
  box-shadow: 0 0 15px #00ffaa;
}

/* --- DECORATIVE LAYERS --- */
.cyber-glowing-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cyber-glow-1,
.cyber-glow-2,
.cyber-glow-3 {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(0, 255, 170, 0.3) 0%,
    rgba(0, 255, 170, 0) 70%
  );
  filter: blur(15px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cyber-glow-1 {
  top: -20px;
  left: -20px;
}
.cyber-glow-2 {
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
}
.cyber-glow-3 {
  bottom: -20px;
  left: 30%;
}

.cyber-card-particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #00ffaa;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Hover effects using .cyber-tracker */
.cyber-tracker:hover ~ .cyber-card .cyber-glowing-elements div {
  opacity: 1;
}
.cyber-tracker:hover ~ .cyber-card .cyber-card-particles span {
  animation: cyberParticleFloat 2s infinite;
}

@keyframes cyberParticleFloat {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--x, 0) * 30px), calc(var(--y, 0) * 30px));
    opacity: 0;
  }
}

/* Particle positions */
.cyber-card-particles span:nth-child(1) {
  --x: 1;
  --y: -1;
  top: 40%;
  left: 20%;
}
.cyber-card-particles span:nth-child(2) {
  --x: -1;
  --y: -1;
  top: 60%;
  right: 20%;
}
.cyber-card-particles span:nth-child(3) {
  --x: 0.5;
  --y: 1;
  top: 20%;
  left: 40%;
}
.cyber-card-particles span:nth-child(4) {
  --x: -0.5;
  --y: 1;
  top: 80%;
  right: 40%;
}
.cyber-card-particles span:nth-child(5) {
  --x: 1;
  --y: 0.5;
  top: 30%;
  left: 60%;
}
.cyber-card-particles span:nth-child(6) {
  --x: -1;
  --y: 0.5;
  top: 70%;
  right: 60%;
}

.cyber-card::before {
  content: "";
  background: radial-gradient(
    circle at center,
    rgba(0, 255, 170, 0.1) 0%,
    rgba(0, 162, 255, 0.05) 50%,
    transparent 100%
  );
  filter: blur(20px);
  opacity: 0;
  width: 150%;
  height: 150%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}
.cyber-tracker:hover ~ .cyber-card::before {
  opacity: 1;
}

.cyber-tracker {
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: auto; /* Catch hovers */
}

.cyber-tracker:hover ~ .cyber-card {
  transition: 300ms;
  filter: brightness(1.1);
}
.cyber-container:hover .cyber-card::before {
  transition: 200ms;
  content: "";
  opacity: 80%;
}

.cyber-canvas {
  /* Removed perspective: 800px; - handled by .cyber-container */
  inset: 0;
  z-index: 200;
  position: absolute;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  pointer-events: none; /* Let clicks pass through empty areas/container */
}

/* Grid Areas & Transforms */
.tr-1 {
  grid-area: 1 / 1 / 2 / 2;
}
.tr-2 {
  grid-area: 1 / 2 / 2 / 3;
}
/* CSS UPDATED BY USER REQUEST */

.cyber-card-content {
  position: relative;
}

/* tot ce e decorativ nu are voie să prindă click */
.cyber-card-glare,
.cyber-lines,
.cyber-corner-elements,
.cyber-scan-line,
.cyber-card-particles,
.cyber-glowing-elements {
  pointer-events: none !important;
}

/* tracker-ele sunt pentru hover, nu pentru click */
.cyber-tracker {
  pointer-events: none !important;
}

/* butonul stă deasupra sigur */
.cyber-btn {
  position: relative;
  z-index: 9999;
  pointer-events: auto;
}
.tr-6 {
  grid-area: 2 / 1 / 3 / 2;
}
.tr-7 {
  grid-area: 2 / 2 / 3 / 3;
}
.tr-8 {
  grid-area: 2 / 3 / 3 / 4;
}
.tr-9 {
  grid-area: 2 / 4 / 3 / 5;
}
.tr-10 {
  grid-area: 2 / 5 / 3 / 6;
}
/* CSS UPDATED */
.cyber-btn {
  /* Reduced projection for better click stability */
  transform: translateZ(30px);
  z-index: 9999;
  cursor: pointer;
  pointer-events: auto;
}

/* Reduced tilt angles for better UX */
.tr-1:hover ~ .cyber-card {
  transform: rotateX(10deg) rotateY(-5deg);
}
.tr-2:hover ~ .cyber-card {
  transform: rotateX(10deg) rotateY(-2deg);
}
.tr-3:hover ~ .cyber-card {
  transform: rotateX(10deg) rotateY(0deg);
}
.tr-4:hover ~ .cyber-card {
  transform: rotateX(10deg) rotateY(2deg);
}
.tr-5:hover ~ .cyber-card {
  transform: rotateX(10deg) rotateY(5deg);
}

.tr-6:hover ~ .cyber-card {
  transform: rotateX(5deg) rotateY(-5deg);
}
.tr-7:hover ~ .cyber-card {
  transform: rotateX(5deg) rotateY(-2deg);
}
.tr-8:hover ~ .cyber-card {
  transform: rotateX(5deg) rotateY(0deg);
}
.tr-9:hover ~ .cyber-card {
  transform: rotateX(5deg) rotateY(2deg);
}
.tr-10:hover ~ .cyber-card {
  transform: rotateX(5deg) rotateY(5deg);
}

.tr-11:hover ~ .cyber-card {
  transform: rotateX(0deg) rotateY(-5deg);
}
.tr-12:hover ~ .cyber-card {
  transform: rotateX(0deg) rotateY(-2deg);
}
.tr-13:hover ~ .cyber-card {
  transform: rotateX(0deg) rotateY(0deg);
}
.tr-14:hover ~ .cyber-card {
  transform: rotateX(0deg) rotateY(2deg);
}
.tr-15:hover ~ .cyber-card {
  transform: rotateX(0deg) rotateY(5deg);
}

.tr-16:hover ~ .cyber-card {
  transform: rotateX(-5deg) rotateY(-5deg);
}
.tr-17:hover ~ .cyber-card {
  transform: rotateX(-5deg) rotateY(-2deg);
}
.tr-18:hover ~ .cyber-card {
  transform: rotateX(-5deg) rotateY(0deg);
}
.tr-19:hover ~ .cyber-card {
  transform: rotateX(-5deg) rotateY(2deg);
}
.tr-20:hover ~ .cyber-card {
  transform: rotateX(-5deg) rotateY(5deg);
}

.tr-21:hover ~ .cyber-card {
  transform: rotateX(-10deg) rotateY(-5deg);
}
.tr-22:hover ~ .cyber-card {
  transform: rotateX(-10deg) rotateY(-2deg);
}
.tr-23:hover ~ .cyber-card {
  transform: rotateX(-10deg) rotateY(0deg);
}
.tr-24:hover ~ .cyber-card {
  transform: rotateX(-10deg) rotateY(2deg);
}
.tr-25:hover ~ .cyber-card {
  transform: rotateX(-10deg) rotateY(5deg);
}

/* Fill gaps with generic logic if needed, or stick to corners for now to save space?
   I'll add the 25 trackers in HTML, but maybe map them to fewer CSS rules or just copy major ones.
   I'll keep it simple: Top-Left, Top-Right, Bot-Left, Bot-Right, Center areas.
*/

.cyber-card-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transition: opacity 300ms;
}
.cyber-card:hover .cyber-card-glare {
  opacity: 1;
}

.cyber-lines span {
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(92, 103, 255, 0.2),
    transparent
  );
}
.cyber-lines span:nth-child(1) {
  top: 20%;
  left: 0;
  width: 100%;
  height: 1px;
  animation: cyberLineGrow 3s linear infinite;
}
.cyber-lines span:nth-child(2) {
  top: 60%;
  left: 0;
  width: 100%;
  height: 1px;
  animation: cyberLineGrow 3s linear infinite 2s;
}

.cyber-corner-elements span {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(92, 103, 255, 0.3);
  transition: all 0.3s ease;
}
.cyber-corner-elements span:nth-child(1) {
  top: 10px;
  left: 10px;
  border-right: 0;
  border-bottom: 0;
}
.cyber-corner-elements span:nth-child(2) {
  top: 10px;
  right: 10px;
  border-left: 0;
  border-bottom: 0;
}
.cyber-corner-elements span:nth-child(3) {
  bottom: 10px;
  left: 10px;
  border-right: 0;
  border-top: 0;
}
.cyber-corner-elements span:nth-child(4) {
  bottom: 10px;
  right: 10px;
  border-left: 0;
  border-top: 0;
}
.cyber-card:hover .cyber-corner-elements span {
  border-color: rgba(92, 103, 255, 0.8);
  box-shadow: 0 0 10px rgba(92, 103, 255, 0.5);
}

.cyber-scan-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(92, 103, 255, 0.1),
    transparent
  );
  transform: translateY(-100%);
  animation: cyberScanMove 2s linear infinite;
}

@keyframes cyberLineGrow {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}
@keyframes cyberScanMove {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
.package-tabs {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 25px !important; /* Increased spacing */
  margin-bottom: 30px !important;
}

.tab-btn {
  /* CONTAINER STYLES */
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 30px !important;
  margin: 5px !important; /* Added margin for extra safety */
  border-width: 0 !important;
  border-radius: 1em !important;
  background-color: transparent !important; /* Visuals handled by ::after */
  transition: all 500ms ease;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  min-width: 120px;
  isolation: isolate; /* Create new stacking context */
}

/* GRADIENT BORDER (Bottom Layer) */
.tab-btn::before {
  position: absolute;
  content: "";
  inset: -2px; /* Sticks out to form border */
  border-radius: 1em;
  background-size: 100%;
  z-index: 1; /* Lowest */
}

/* DARK BACKGROUND (Middle Layer) */
.tab-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #19171c;
  border-radius: 1em;
  z-index: 2; /* Middle */
}

/* TEXT (Top Layer) */
.tab-btn .btn-text {
  position: relative;
  font-size: 16px !important;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  transition: 500ms ease;
  z-index: 3; /* Highest */
}

.tab-btn:hover {
  transform: scale(1.1);
  z-index: 10;
}
.tab-btn.active {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

/* --- GOLD STYLE --- */
.tab-btn.style-gold .btn-text {
  background-image: linear-gradient(
    90deg,
    rgba(137, 60, 21, 1) 0%,
    rgba(255, 222, 68, 1) 17%,
    rgba(177, 116, 30, 1) 24%,
    rgba(255, 231, 82, 1) 40%,
    rgba(224, 147, 38, 1) 50%,
    rgba(228, 150, 42, 1) 59%,
    rgba(176, 120, 27, 1) 70%,
    rgba(239, 179, 51, 1) 85%,
    rgba(135, 58, 26, 1) 100%
  );
}
.tab-btn.style-gold::before {
  background-image: linear-gradient(
    90deg,
    rgba(137, 60, 21, 1) 0%,
    rgba(255, 222, 68, 1) 17%,
    rgba(177, 116, 30, 1) 24%,
    rgba(255, 231, 82, 1) 40%,
    rgba(224, 147, 38, 1) 50%,
    rgba(228, 150, 42, 1) 59%,
    rgba(176, 120, 27, 1) 70%,
    rgba(239, 179, 51, 1) 85%,
    rgba(135, 58, 26, 1) 100%
  );
}

/* --- SILVER STYLE --- */
.tab-btn.style-silver .btn-text {
  background-image: linear-gradient(
    90deg,
    #555 0%,
    #ccc 17%,
    #999 24%,
    #fff 40%,
    #ddd 50%,
    #bbb 59%,
    #888 70%,
    #eee 85%,
    #555 100%
  );
}
.tab-btn.style-silver::before {
  background-image: linear-gradient(
    90deg,
    #555 0%,
    #ccc 17%,
    #999 24%,
    #fff 40%,
    #ddd 50%,
    #bbb 59%,
    #888 70%,
    #eee 85%,
    #555 100%
  );
}

/* ANIMATIONS */
.tab-btn:hover::before,
.tab-btn.active::before {
  animation: shimmer-bg 3s infinite alternate ease-in-out;
}
.tab-btn:hover .btn-text,
.tab-btn.active .btn-text {
  animation: shimmer-text 3s infinite alternate ease-in-out;
}

/* --- RAINBOW HOVER CARDS (Rest of Cards) --- */
.pricing-card {
  /* Layout & Base similar to snippet */
  position: relative;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5em 1em !important;
  color: #eceff1 !important;
  background-color: #2b2b2b !important;
  border: 1px solid #eceff133 !important;
  border-radius: 15px !important;
  transition: all ease-in-out 0.3s;
  /* Reset previous card styles if needed */
  box-shadow: none;
  min-height: 450px;
}

.pricing-card h3 {
  /* card__heading */
  font-size: 1.25em !important;
  font-weight: 600 !important;
  color: #eceff1;
  margin-bottom: 0.5em !important;
}

.pricing-card p {
  /* subtitle adjustment */
  font-size: 0.9em;
  color: #b0bec5;
  margin-bottom: 0.5em;
}

.pricing-card .price {
  /* card__price */
  font-size: 1.75em !important;
  font-weight: 700 !important;
  color: #fff;
  margin: 0.5em 0 !important;
}

.pricing-card ul {
  /* card_bullets */
  line-height: 1.4;
  text-align: left;
  margin: 1em 0;
  flex-grow: 1; /* Push button down */
}
.pricing-card ul li {
  margin-bottom: 0.5em;
}

.pricing-card button {
  /* cta */
  display: block;
  width: 100%;
  margin-top: auto;
  text-align: center;
  color: #fff !important;
  background-color: transparent !important;
  outline: 1px solid white !important;
  padding: 0.7em !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: 0.3s;
}

/* HOVER EFFECTS */
.pricing-card:hover {
  background: #ffffffe6 !important; /* Slightly opaque white */
  color: #000 !important;
  outline: 1px solid rgb(255, 255, 255);
  box-shadow: inset 0 0 80px whitesmoke,
    inset 20px 0 80px rgba(255, 0, 255, 0.747), inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f, inset -20px 0 300px #0ff, 0 0 50px #fff,
    -10px 0 80px #f0f, 10px 0 80px #0ff;
  transform: scale(1.02); /* Slight lift */
}

.pricing-card:hover h3,
.pricing-card:hover p,
.pricing-card:hover .price,
.pricing-card:hover ul,
.pricing-card:hover li {
  color: #000 !important; /* Force black text on white bg */
}

.pricing-card:hover button {
  outline: none !important;
  background-color: #0d0d0d !important;
  color: white !important;
}

/* Uiverse Card Design - Requested by User */
.card-container {
  width: 100%;
  max-width: 320px; /* Adapted from 260px for better fit */
  margin: 10px auto; /* Centering */
  background: linear-gradient(
    to top right,
    #975af4,
    #2f7cf8 40%,
    #78aafa 65%,
    #934cff 100%
  );
  padding: 4px;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.card-container .title-card {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  justify-content: space-between;
  color: #fff;
}
.card-container .title-card p {
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  text-shadow: 2px 2px 6px #2975ee;
  margin: 0;
}

.card-container .card-content {
  width: 100%;
  height: 100%;
  background-color: #161a20; /* Dark background */
  border-radius: 30px;
  color: #838383;
  font-size: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Ensuring text is readable */
  text-align: left;
}

.card-container .card-content .title {
  font-weight: 600;
  color: #bab9b9;
  font-size: 1.1rem;
  margin: 0;
  text-transform: uppercase;
}

.card-container .card-content .plain {
  margin: 5px 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.card-container .card-content .plain :nth-child(1) {
  font-size: 28px; /* Adjusted from 36px to fit RON */
  color: #fff;
  font-weight: 700;
}

.card-container .card-content .description {
  color: #999;
  margin: 0;
  line-height: 1.4;
}

/* Custom list styling for description inside card */
.card-container .card-content ul {
  padding-left: 20px;
  margin: 0;
}
.card-container .card-content li {
  margin-bottom: 5px;
}

.card-container .card-content .card-btn {
  background: linear-gradient(
    4deg,
    #975af4,
    #2f7cf8 40%,
    #78aafa 65%,
    #934cff 100%
  );
  padding: 12px;
  border: none;
  width: 100%;
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6);
  margin-top: auto; /* Push to bottom */
}
.card-container .card-content .card-btn:hover {
  color: #ffffff;
  text-shadow: 0 0 8px #fff;
  transform: scale(1.03);
}
.card-container .card-content .card-btn:active {
  transform: scale(1);
}
/* Uiverse Gallery Button - Red/Gold/Black/White Theme */
.uiverse {
  --duration: 7s;
  --easing: linear;
  --c-color-1: rgba(255, 215, 0, 0.7); /* Gold */
  --c-color-2: #212121; /* Dark Grey Premium */
  --c-color-3: #ffffff; /* White */
  --c-color-4: rgba(204, 0, 0, 0.7); /* Red */
  --c-shadow: rgba(204, 0, 0, 0.5);
  --c-shadow-inset-top: rgba(255, 50, 50, 0.9);
  --c-shadow-inset-bottom: rgba(100, 0, 0, 0.8);
  --c-radial-inner: #ff3333; /* Bright Red */
  --c-radial-outer: #990000; /* Dark Red */
  --c-color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: table;
  border-radius: 24px;
  padding: 0;
  margin: 20px auto; /* Centered */
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--c-color);
  background: radial-gradient(
    circle,
    var(--c-radial-inner),
    var(--c-radial-outer) 80%
  );
  box-shadow: 0 0 14px var(--c-shadow);
}

.uiverse:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  box-shadow: inset 0 3px 12px var(--c-shadow-inset-top),
    inset 0 -3px 4px var(--c-shadow-inset-bottom);
}

.uiverse .wrapper {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  overflow: hidden;
  border-radius: 24px;
  min-width: 132px;
  padding: 12px 20px; /* Added horizontal padding for text */
  display: block;
}

.uiverse .wrapper span {
  display: inline-block;
  position: relative;
  z-index: 10; /* Ensure text is above circles */
  color: #fff !important; /* Force white text */
  font-weight: bold;
}

.uiverse:hover {
  --duration: 1400ms;
}

.uiverse .wrapper .circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  filter: blur(var(--blur, 8px));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse .wrapper .circle.circle-1,
.uiverse .wrapper .circle.circle-9,
.uiverse .wrapper .circle.circle-10 {
  --background: var(--c-color-4);
}

.uiverse .wrapper .circle.circle-3,
.uiverse .wrapper .circle.circle-4 {
  --background: var(--c-color-2);
  --blur: 14px;
}

.uiverse .wrapper .circle.circle-5,
.uiverse .wrapper .circle.circle-6 {
  --background: var(--c-color-3);
  --blur: 16px;
}

.uiverse .wrapper .circle.circle-2,
.uiverse .wrapper .circle.circle-7,
.uiverse .wrapper .circle.circle-8,
.uiverse .wrapper .circle.circle-11,
.uiverse .wrapper .circle.circle-12 {
  --background: var(--c-color-1);
  --blur: 12px;
}

.uiverse .wrapper .circle.circle-1 {
  --x: 0;
  --y: -40px;
  --animation: circle-1;
}

.uiverse .wrapper .circle.circle-2 {
  --x: 92px;
  --y: 8px;
  --animation: circle-2;
}

.uiverse .wrapper .circle.circle-3 {
  --x: -12px;
  --y: -12px;
  --animation: circle-3;
}

.uiverse .wrapper .circle.circle-4 {
  --x: 80px;
  --y: -12px;
  --animation: circle-4;
}

.uiverse .wrapper .circle.circle-5 {
  --x: 12px;
  --y: -4px;
  --animation: circle-5;
}

.uiverse .wrapper .circle.circle-6 {
  --x: 56px;
  --y: 16px;
  --animation: circle-6;
}

.uiverse .wrapper .circle.circle-7 {
  --x: 8px;
  --y: 28px;
  --animation: circle-7;
}

.uiverse .wrapper .circle.circle-8 {
  --x: 28px;
  --y: -4px;
  --animation: circle-8;
}

.uiverse .wrapper .circle.circle-9 {
  --x: 20px;
  --y: -12px;
  --animation: circle-9;
}

.uiverse .wrapper .circle.circle-10 {
  --x: 64px;
  --y: 16px;
  --animation: circle-10;
}

.uiverse .wrapper .circle.circle-11 {
  --x: 4px;
  --y: 4px;
  --animation: circle-11;
}

.uiverse .wrapper .circle.circle-12 {
  --blur: 14px;
  --x: 52px;
  --y: 4px;
  --animation: circle-12;
}

@keyframes circle-1 {
  33% {
    transform: translate(0px, 16px) translateZ(0);
  }
  66% {
    transform: translate(12px, 64px) translateZ(0);
  }
}

@keyframes circle-2 {
  33% {
    transform: translate(80px, -10px) translateZ(0);
  }
  66% {
    transform: translate(72px, -48px) translateZ(0);
  }
}

@keyframes circle-3 {
  33% {
    transform: translate(20px, 12px) translateZ(0);
  }
  66% {
    transform: translate(12px, 4px) translateZ(0);
  }
}

@keyframes circle-4 {
  33% {
    transform: translate(76px, -12px) translateZ(0);
  }
  66% {
    transform: translate(112px, -8px) translateZ(0);
  }
}

@keyframes circle-5 {
  33% {
    transform: translate(84px, 28px) translateZ(0);
  }
  66% {
    transform: translate(40px, -32px) translateZ(0);
  }
}

@keyframes circle-6 {
  33% {
    transform: translate(28px, -16px) translateZ(0);
  }
  66% {
    transform: translate(76px, -56px) translateZ(0);
  }
}

@keyframes circle-7 {
  33% {
    transform: translate(8px, 28px) translateZ(0);
  }
  66% {
    transform: translate(20px, -60px) translateZ(0);
  }
}

@keyframes circle-8 {
  33% {
    transform: translate(32px, -4px) translateZ(0);
  }
  66% {
    transform: translate(56px, -20px) translateZ(0);
  }
}

@keyframes circle-9 {
  33% {
    transform: translate(20px, -12px) translateZ(0);
  }
  66% {
    transform: translate(80px, -8px) translateZ(0);
  }
}

@keyframes circle-10 {
  33% {
    transform: translate(68px, 20px) translateZ(0);
  }
  66% {
    transform: translate(100px, 28px) translateZ(0);
  }
}

@keyframes circle-11 {
  33% {
    transform: translate(4px, 4px) translateZ(0);
  }
  66% {
    transform: translate(68px, 20px) translateZ(0);
  }
}

@keyframes circle-12 {
  33% {
    transform: translate(56px, 0px) translateZ(0);
  }
  66% {
    transform: translate(60px, -32px) translateZ(0);
  }
}

/* --- CUSTOM STRIPE INPUTS (Uiverse Style) --- */
.custom-stripe-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.stripe-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #1f2937; /* bg-gray-800 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px; /* rounded-lg */
  padding: 5px 10px;
  height: 45px; /* h-9 approx + padding */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  transition: all 0.3s ease;
}

.stripe-input-wrapper:focus-within {
  border-color: #f97316; /* focus ring (orange) */
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

.stripe-element-div {
  flex-grow: 1;
  border: none;
  background: transparent;
  color: white;
  margin-right: 10px;
}

.card-brand-icon {
  width: 40px;
  height: 24px;
  background-color: #e5e7eb; /* bg-gray-200 */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-brand-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Expiry & CVC Row */
.stripe-row {
  display: flex;
  gap: 15px;
}

.stripe-row .stripe-input-wrapper {
  flex: 1;
}

/* =========================================
   DESKTOP ABOUT MODAL RESTORATION
   ========================================= */
@media (min-width: 769px) {
  #about-modal .modal-content,
  #about-modal .modal-container,
  #about-modal .about-modal-content,
  #about-modal .modal-box {
    width: min(1100px, 92vw) !important;
    max-height: 78vh !important;
    overflow: hidden !important; /* Grid needs to be contained */
    display: grid !important;
    grid-template-columns: 420px 1fr !important;
    gap: 0 !important;
    padding: 0 !important; /* Reset padding for grid */
  }

  #about-modal .about-image {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important; /* Square corners for split layout */
    background: none !important;
  }

  #about-modal .about-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    display: block !important;
    margin: 0 !important;
  }

  #about-modal .about-text,
  #about-modal .about-content,
  #about-modal .modal-body {
    overflow-y: auto !important; /* Vertical scroll for text only */
    max-height: 78vh !important;
    padding: 22px 24px !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
  }

  /* USER FIX: Remove Ghost Column & Fix Grid Width */
  #about-modal .modal-box.about-box {
    display: grid !important;
    grid-template-columns: 420px 1fr !important;
    width: min(1100px, 92vw) !important;
    max-width: 1100px !important;
    margin: auto !important;
    background: #1b1b1b !important;
    overflow: hidden !important;
  }

  #about-modal .modal-box.about-box::after {
    display: none !important;
    content: none !important;
  }
}