:root {
      --primary: #000000;
      --secondary: #008c9e;
      --text-light: #f5f5f5;
      --bg-dark: #0e0e0e;
      --card-bg: #151515;
      --border: #1f1f1f;
    }

    body {
      margin: 0;
      font-family: 'Poppins', sans-serif;
      background: radial-gradient(circle at top, #000 0%, #0e0e0e 100%);
      color: var(--text-light);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 20px;
      min-height: 100vh;
    }

    header {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-bottom: 40px;
      flex-direction: column;
    }

    header img {
      width: 160px;
      height: auto;
      margin-bottom: 10px;
    }

    header h1 {
      font-size: 1.5rem;
      letter-spacing: 1px;
      font-weight: bold;
      color: #fff;
      text-transform: uppercase;
      text-align: center;
    }
    
    

    .form-container {
      background-color: var(--card-bg);
      width: 100%;
      max-width: 600px;
      border-radius: 14px;
      box-shadow: 0 0 25px rgba(0,0,0,0.6);
      padding: 35px 30px;
      border: 1px solid var(--border);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      border-top: solid 4px #008C9E;
    }

    .form-container:hover {
      box-shadow: 0 0 35px rgba(0, 140, 158, 0.3);
      transform: translateY(-3px);
    }

    h2 {
      text-align: center;
      color: var(--secondary);
      margin-bottom: 10px;
      font-weight: 600;
      letter-spacing: 1px;
    }

    p.subtitle {
      text-align: center;
      margin-bottom: 30px;
      color: #ccc;
      font-size: 15px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    label {
      display: block;
      font-weight: 500;
      margin-bottom: 6px;
      font-size: 15px;
    }

    input, select {
      width: 100%;
      padding: 12px 14px;
      background-color: #1e1e1e;
      border: 1px solid #333;
      border-radius: 8px;
      font-size: 15px;
      color: var(--text-light);
      outline: none;
      transition: all 0.3s ease;
      box-sizing: border-box;
      height: 45px;
    }

    input:focus, select:focus {
      border-color: var(--secondary);
      box-shadow: 0 0 5px var(--secondary);
    }

    /* Make select dropdown arrow white */
    select {
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 18px center;
      background-size: 10px;
    }

    /* ✅ Make date picker icon white */
    input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(1);
      cursor: pointer;
    }

    /* Coupon Boxes */
    .coupon-box {
      padding: 10px 12px;
      border: 1px solid var(--secondary);
      border-radius: 8px;
      background-color: transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 14px;
      color: var(--secondary);
      text-align: center;
      width: 44%;
    }

    .coupon-box:hover {
      background-color: var(--secondary);
      color: #fff;
      transform: scale(1.05);
    }

    #coupon-suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
      justify-content: space-between;
    }

    /* Result Box Styling */
    .result-box {
      background-color: #111;
      border-radius: 10px;
      padding: 20px;
      border: 1px solid #222;
      margin-top: 25px;
    }

    .result-line {
      display: flex;
      justify-content: space-between;
      font-size: 15px;
      margin-bottom: 8px;
    }

    .result-line span:first-child { color: #bbb; }

    .total {
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      color: var(--secondary);
      font-weight: 600;
      margin-top: 15px;
    }

    /* Submit Button */
    button {
      margin-top: 25px;
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: 8px;
      background: linear-gradient(90deg, var(--secondary), #00aabb);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 10px var(--secondary);
    }

    footer {
      margin-top: 50px;
      font-size: 14px;
      color: #999;
      text-align: center;
      padding: 20px 0;
      border-top: 1px solid #1a1a1a;
    }

    @media (max-width: 600px) {
      .coupon-box {
        width: 100%;
      }
    }
    
    /* Coupon input wrapper */
    .coupon-input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }
    
    .coupon-input-wrapper input {
      width: 100%;
      padding-right: 35px; /* space for X icon */
    }
    
    /* The X icon inside input */
    .remove-icon {
      position: absolute;
      right: 12px;
      font-size: 20px;
      color: #888;
      cursor: pointer;
      display: none; /* hidden by default */
      transition: color 0.2s ease;
    }
    
    .remove-icon:hover {
      color: #fff;
    }


/* ✅ Floating CX-3 image on the left side */
.cx3-floating {
  position: fixed;
  left: -4%;           /* Distance from the left side */
  top: 68%;           /* Vertically centered */
  transform: translateY(-50%);
  width: 500px;       /* ✅ You can change this value to resize the image */
  opacity: 0.7;      /* Light transparency to blend with background */
  z-index: 0;         /* Behind your content */
  pointer-events: none; /* Image won't block form clicks */
  transition: all 0.3s ease-in-out;
}

/* ✅ Keep your main content above it */
header, .form-container, footer {
  position: relative;
  z-index: 2;
}


 /* ✅ SEO Info Section */
    .seo-section {
      max-width: 1100px;
      margin: 60px auto 30px;
      text-align: center;
      background-color: rgba(21,21,21,0.7);
      padding: 30px 20px;
      border-radius: 12px;
      border: 1px solid #222;
    }
    .seo-section h2 {
      color: var(--secondary);
      font-size: 1.4rem;
      margin-bottom: 12px;
    }
    .seo-section p {
      color: #ccc;
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 8px;
      text-align: justify;
    }

    /* ✅ Footer Design */
    footer {
      width: 100%;
      background: #000;
      border-top: 1px solid #1a1a1a;
      padding: 50px 20px 20px;
      color: #bbb;
    }

    .footer-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 696px;
      max-width: 1100px;
      margin: 0 auto;
      text-align: left;
    }

    .footer-logo {
      flex: 1;
      min-width: 200px;
    }

    .footer-logo img {
      width: 130px;
      margin-bottom: 10px;
    }

    .footer-logo p {
      max-width: 260px;
      font-size: 14px;
      line-height: 1.6;
    }

    .footer-links {
      flex: 1;
      min-width: 200px;
    }

    .footer-links h4 {
      color: #fff;
      font-size: 16px;
      margin-bottom: 12px;
    }

    .footer-links ul {
      list-style: none;
      padding: 0;
      margin: 0;
      line-height: 1.9;
    }

    .footer-links a {
      color: #bbb;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.2s;
    }

    .footer-links a:hover {
      color: var(--secondary);
    }

    .footer-bottom {
      text-align: center;
      font-size: 13px;
      color: #777;
      margin-top: 40px;
    }

    @media (max-width: 600px) {
      .footer-container { flex-direction: column; text-align: center; gap: 40px; }
      .footer-logo p { margin: 0 auto; }
      .social-links { justify-content: center; }
    }

/* ✅ Track Order Box (same look as form-container) */
.track-order-box {
  background-color: var(--card-bg);
  width: 100%;
  max-width: 600px;
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  padding: 35px 30px;
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  margin-top: 40px;
  border-top: solid 4px #008C9E;
}

.track-order-box:hover {
  box-shadow: 0 0 35px rgba(0, 140, 158, 0.3);
  transform: translateY(-3px);
}

.track-order-box h2 {
  text-align: center;
  color: var(--secondary);
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: 1px;
}

.track-order-box .subtitle {
  text-align: center;
  margin-bottom: 25px;
  color: #ccc;
  font-size: 15px;
}

.track-input-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.track-input-wrapper input {
  flex: 1;
  min-width: 230px;
  max-width: 100%;
  padding: 12px 14px;
  background-color: #1e1e1e;
  border: 1px solid #333;
  border-radius: 8px;
  font-size: 15px;
  color: var(--text-light);
  outline: none;
  transition: all 0.3s ease;
  height: 45px;
}

.track-input-wrapper input:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 5px var(--secondary);
}

.track-input-wrapper button {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--secondary), #00aabb);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 45px;
}

.track-input-wrapper button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px var(--secondary);
}

@media (max-width: 600px) {
  .track-input-wrapper {
    flex-direction: column;
  }
  .track-input-wrapper input,
  .track-input-wrapper button {
    width: 100%;
  }
}


/* --- Coupon Row Layout --- */
.coupon-row {
  display: flex;
  align-items: stretch; /* ensures perfect vertical alignment */
  gap: 10px;
}

.coupon-row input {
  flex: 1;
  height: 45px;
  padding: 0 14px;
  background-color: #1e1e1e;
  border: 1px solid #333;
  border-radius: 8px;
  color: var(--text-light);
  font-size: 15px;
  outline: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
  line-height: 45px;         /* ✅ makes text vertically centered */
  -webkit-appearance: none;  /* ✅ removes iOS default styling */
  appearance: none;
}

.coupon-row input:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 5px var(--secondary);
}

.coupon-row input[readonly] {
  background-color: #181818;
  opacity: 0.8;
  cursor: not-allowed;
}

.coupon-row button {
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--secondary), #00aabb);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0 18px;
  min-width: 110px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 25%;
}

.coupon-row button:hover {
  transform: translateY(-2px);
}



  
  
  
/* ✅ Coupon Modal Styles */
#couponModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#couponModal.active {
  display: flex;
}
.coupon-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}
.coupon-modal-box {
  position: relative;
  background: #151515;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 25px 20px;
  width: 90%;
  max-width: 360px;
  text-align: center;
  z-index: 10;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  animation: fadeIn 0.3s ease;
}
.coupon-modal-box h3 {
  color: var(--secondary);
  font-size: 18px;
  margin-bottom: 10px;
}
.coupon-modal-box p {
  color: #ddd;
  font-size: 15px;
  margin-bottom: 20px;
}
.coupon-modal-box button {
  background: linear-gradient(90deg, var(--secondary), #00aabb);
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 10px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.coupon-modal-box button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px var(--secondary);
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}



/* ✅ TESTIMONIALS SECTION */
.testimonials-section {
  max-width: 1100px;
  margin: 80px auto;
  padding: 60px 25px;
  background: rgba(21,21,21,0.75);
  border-radius: 16px;
  border: 1px solid #222;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
  text-align: center;
}

.testimonial-header h2 {
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 8px;
}

.testimonial-header .subtitle {
  color: #bbb;
  margin-bottom: 35px;
}

.testimonial-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.testimonial-stats h3 {
  color: var(--secondary);
  font-size: 1.6rem;
  margin: 0;
}

.testimonial-stats p {
  color: #aaa;
  font-size: 14px;
  margin-top: 5px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.testimonial-card {
  background: #111;
  border-radius: 12px;
  padding: 30px 25px;
  border: 1px solid #222;
  text-align: left;
  transition: 0.3s ease;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(0,140,158,0.35);
}

.stars {
  color: #ffc107;
  font-size: 16px;
  margin-bottom: 15px;
  letter-spacing: 2px;
}

.quote {
  font-size: 15px;
  line-height: 1.7;
  color: #ddd;
  margin-bottom: 25px;
  font-style: italic;
}

.author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.author img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--secondary);
}

.author h4 {
  margin: 0;
  color: #fff;
  font-size: 15px;
}

.author span {
  font-size: 13px;
  color: #aaa;
}

.verified {
  font-size: 12px;
  color: #00e6ff;
  margin-top: 4px;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.social-links {
  margin-top: 15px;
  display: flex;
  gap: 15px;
  align-items: center;
}
.social-links a img {
  width: 22px;
  height: 22px;
  filter: invert(1);
  opacity: 0.8;
  transition: opacity 0.2s, transform 0.2s;
}
.social-links a:hover img {
  opacity: 1;
  transform: scale(1.15);
}




/* ✅ FAQ SECTION STYLES (Improved Alignment & Shadow Consistency) */
.faq-section {
  max-width: 1100px;
  margin: 70px auto;
  padding: 50px 25px;
  background: rgba(21, 21, 21, 0.7);
  border-radius: 14px;
  border: 1px solid #222;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.faq-section h2 {
  color: var(--secondary);
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.faq-section .subtitle {
  color: #ccc;
  font-size: 15px;
  margin-bottom: 40px;
}

.faq-container {
  text-align: left;
}

.faq-item {
  background: #111;
  border: 1px solid #222;
  border-radius: 10px;
  margin-bottom: 18px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  will-change: transform, box-shadow;
}

.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0, 140, 158, 0.25);
}

.faq-item.active {
  box-shadow: 0 0 22px rgba(0, 140, 158, 0.4);
  border-color: #008c9e;
}

.faq-question {
  width: 100%;
  background: transparent;
  color: #fff;
  border: none;
  outline: none;
  padding: 18px 22px;
  font-size: 15.5px;
  text-align: left;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: color 0.3s ease;
  margin: 0;
}

.faq-question:hover {
  color: var(--secondary);
}

.faq-icon {
  font-size: 20px;
  transition: transform 0.3s ease, color 0.3s ease;
  color: var(--secondary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: #151515;
  transition: max-height 0.4s ease;
  padding: 0 22px;
}

.faq-answer p {
  color: #ccc;
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
  padding: 15px 0;
}

.faq-item.active .faq-answer {
  max-height: 500px; /* allows multiple lines smoothly */
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
  color: #00aabb;
}

@media (max-width: 600px) {
  .faq-section {
    padding: 40px 15px;
  }
  .faq-question {
    font-size: 14.5px;
    padding: 16px 18px;
  }
  .faq-answer p {
    font-size: 14px;
  }
}





.payment-method-box {
  background-color: #151515;
  border: 1px solid #222;
  padding: 18px 16px;
  border-radius: 10px;
  margin-top: 8px;
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

.payment-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--secondary);
  letter-spacing: 0.3px;
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #111;
  border-radius: 8px;
  border: 1px solid #222;
  cursor: pointer;
  transition: all 0.25s ease;
}

.payment-option:hover {
  background: #1a1a1a;
  transform: translateY(-2px);
  border-color: var(--secondary);
  box-shadow: 0 0 10px rgba(0,140,158,0.25);
}

.payment-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--secondary); /* teal radio */
  cursor: pointer;
  margin: 0;
}

.payment-option span {
  font-size: 14.5px;
  color: #ddd;
  font-weight: 400;
}

/* Highlight selected option */
.payment-option input[type="radio"]:checked + span {
  color: var(--secondary);
  font-weight: 600;
}

/* Mobile Optimization */
@media (max-width: 600px) {
  .payment-method-box {
    padding: 16px 14px;
  }
  .payment-option {
    padding: 10px;
  }
  .payment-option span {
    font-size: 14px;
  }
}

/* ADD-ON BOX (same look as payment box) */
.addon-box {
  background-color: #151515;
  border: 1px solid #222;
  padding: 18px 16px;
  border-radius: 10px;
  margin-top: 8px;
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

.addon-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--secondary);
  letter-spacing: 0.3px;
}

/* Add-ons list layout */
#addonContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each add-on row */
.addon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #111;
  border-radius: 8px;
  border: 1px solid #222;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Hover effect */
.addon-item:hover {
  background: #1a1a1a;
  transform: translateY(-2px);
  border-color: var(--secondary);
  box-shadow: 0 0 10px rgba(0,140,158,0.25);
}

/* Checkbox */
.addon-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--secondary);
  cursor: pointer;
}

/* Text */
.addon-item span {
  font-size: 14.5px;
  color: #ddd;
  font-weight: 400;
}

/* Highlight when checked */
.addon-item input:checked + span {
  color: var(--secondary);
  font-weight: 600;
}

/* Mobile friendly */
@media (max-width: 600px) {
  #addonContainer {
    gap: 8px;
  }
}

.apply-red {
  background: #d9534f !important;       /* Red background */
  /*box-shadow: 0 4px 10px rgba(217,83,79,0.4) !important;*/
  color: #fff !important;
}




.bulk-order-box {
  background-color: #151515;
  border: 1px solid #222;
  border-radius: 14px;
  padding: 30px 25px;
  margin-top: 40px;
  max-width: 600px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 25px rgba(0,0,0,0.6);
  border-top: solid 4px #008C9E;
  transition: 0.3s ease;
}
.bulk-order-box:hover {
  box-shadow: 0 0 35px rgba(0, 140, 158, 0.3);
  transform: translateY(-3px);
}

.bulk-order-box h2 {
  color: var(--secondary);
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.bulk-order-box .bulk-subtitle {
  color: #ccc;
  font-size: 15px;
  margin-bottom: 25px;
  line-height: 1.6;
}

.bulk-order-btn {
  width: 100%;
  background: linear-gradient(90deg, var(--secondary), #00aabb);
  padding: 14px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: 0.3s ease;
}

.bulk-order-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(0,140,158,0.4);
}



/* ⭐ Highlight Pay Now & Pay on Delivery rows */
.result-line.pay-highlight {
  background: linear-gradient(90deg, rgba(0,140,158,0.15), rgba(0,170,187,0.08));
  border: 1px solid rgba(0,140,158,0.35);
  padding: 10px 12px;
  border-radius: 8px;
  margin: 10px 0;
  box-shadow: 0 0 12px rgba(0,140,158,0.25);
  transition: 0.3s ease;
}

.result-line.pay-highlight span:first-child {
  color: #00e6ff;
  font-weight: 600;
}

.result-line.pay-highlight span:last-child {
  color: #00f0ff;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Hover effect for feel */
.result-line.pay-highlight:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0,199,230,0.35);
}

/* Extra bold for Pay Now */
.result-line.pay-highlight.pay-now {
  background: linear-gradient(90deg, rgba(0,199,230,0.25), rgba(0,140,158,0.2));
  border-color: rgba(0,199,230,0.45);
}

/* Softer for COD row */
.result-line.pay-highlight.pay-delivery {
  background: linear-gradient(90deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border-color: rgba(255,255,255,0.12);
}




/* ------------------ DELIVERY PARTNERS SECTION ------------------ */
.delivery-partners {
max-width: 1100px;
margin: 40px auto;
padding: 18px 25px;
background: rgba(21,21,21,0.65);
border-radius: 12px;
border: 1px solid #222;
text-align: center;
}


.delivery-partners h3 {
color: var(--secondary);
margin: 6px 0 12px;
font-size: 1.15rem;
}


.partners-grid {
display: flex;
gap: 20px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 8px 12px;
}


.partner {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #0f0f0f;
border: 1px solid #1d1d1d;
padding: 10px 14px;
border-radius: 10px;
width: 170px;
height: 64px;
box-shadow: 0 0 12px rgba(0,0,0,0.45);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}


.partner:hover { transform: translateY(-6px); box-shadow: 0 6px 22px rgba(0,140,158,0.12); }


.partner img { max-height: 36px; object-fit: contain; }
.partner span { color:#bbb; font-size:13px; display:none; }


@media (max-width: 720px) {
.partner { width: 36%; height: 50px; }
.partner img { max-height: 30px; }
} 

/* Make partner card clip any oversized logo and center it */
.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #1d1d1d;
  padding: 8px 12px;        /* reduce padding if needed */
  border-radius: 10px;
  width: 170px;
  height: 64px;
  box-shadow: 0 0 12px rgba(0,0,0,0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;         /* IMPORTANT — prevents the logo from escaping the card */
  position: relative;
}

/* Constrain raster + SVG logos while preserving aspect ratio */
.partner img,
.partner svg {
  max-width: 100%;
  max-height: 46px;        /* tweak this value to control visual size */
  width: auto;
  height: auto;
  display: block;          /* remove inline whitespace issues */
  object-fit: contain;     /* keeps aspect ratio for raster images */
}

/* Extra guard: if SVGs are inline or have fixed width attributes */
.partner svg[width],
.partner svg[height] {
  width: auto !important;
  height: auto !important;
  max-height: 46px !important;
}

/* Optional: slightly reduce size on smaller screens */
@media (max-width: 720px) {
  .partner { width: 36%; height: 50px; }
  .partner img,
  .partner svg { max-height: 36px; }
}



/* ✅ Limited stock alert pill */
.stock-alert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: radial-gradient(circle at left, rgba(0,199,230,0.18), rgba(0,0,0,0.7));
  border: 1px solid rgba(0,199,230,0.7);
  box-shadow: 0 0 16px rgba(0,199,230,0.35);
  font-size: 13px;
  color: #e9feff;
  letter-spacing: 0.3px;
}

.stock-alert-icon {
  font-size: 16px;
}

.stock-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4f;
  box-shadow: 0 0 10px rgba(255,77,79,0.8);
  animation: stockPulse 1.4s infinite ease-in-out;
}

@keyframes stockPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}


.terms-text {
  font-size: 13.5px;
  color: #bbb;
  line-height: 1.6;
}

.terms-text a {
  color: var(--secondary);
  font-weight: 500;
  text-decoration: underline;
}

.terms-text a:hover {
  color: #00e6ff;
}


/* ===============================
   🔔 STOCK UPDATE MODAL
================================ */
#stockModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

#stockModal.active {
  display: flex;
}

.stock-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.stock-modal-box {
  position: relative;
  background: #151515;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 28px 22px;
  width: 92%;
  max-width: 420px;
  text-align: center;
  z-index: 10;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  animation: stockFadeIn 0.35s ease;
  border-top: 4px solid #ff4d4f;
}

.stock-modal-box h3 {
  color: #ff6b6b;
  font-size: 20px;
  margin-bottom: 14px;
}

.stock-modal-box p {
  color: #ddd;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 22px;
}

.stock-modal-box button {
  background: linear-gradient(90deg, #ff4d4f, #ff7676);
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.stock-modal-box button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(255, 77, 79, 0.45);
}

@keyframes stockFadeIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}






/* ===============================
   📅 DATE LIMIT MODAL
================================ */
#dateLimitModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

#dateLimitModal.active {
  display: flex;
}

.date-limit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

.date-limit-box {
  position: relative;
  background: #151515;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 26px 22px;
  width: 92%;
  max-width: 380px;
  text-align: center;
  z-index: 10;
  box-shadow: 0 0 25px rgba(0,0,0,0.6);
  animation: fadeInScale 0.3s ease;
  border-top: 4px solid #008c9e;
}

.date-limit-box h3 {
  color: #00e6ff;
  font-size: 20px;
  margin-bottom: 12px;
}

.date-limit-box p {
  color: #ddd;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 22px;
}

.date-limit-box button {
  background: linear-gradient(90deg, #008c9e, #00aabb);
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.date-limit-box button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(0,140,158,0.45);
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}







/* ============================= */
/* 🚀 COMMUNITY SECTION */
/* ============================= */

.community-section {
  max-width: 1100px;
  width: 100%;
  margin: 80px auto;
  padding: 70px 25px;
  border-radius: 20px;
  border: 1px solid rgba(0, 199, 230, 0.15);
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at 15% 25%, rgba(0, 199, 230, 0.18), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(37, 211, 102, 0.15), transparent 40%),
    linear-gradient(135deg, #0d1117 0%, #111827 55%, #0a0a0a 100%);

  box-shadow:
    0 0 45px rgba(0, 199, 230, 0.12),
    inset 0 0 70px rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(12px);
}

/* Glow effect */
.community-section::before,
.community-section::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
  z-index: 0;
}

.community-section::before {
  background: #00e6ff;
  top: -100px;
  left: -100px;
}

.community-section::after {
  background: #25D366;
  bottom: -100px;
  right: -100px;
}

.community-section * {
  position: relative;
  z-index: 2;
}

/* Layout */
.community-box {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0 25px;
}

.community-content {
  max-width: 720px;
  width: 100%;
}

.community-content h2 {
  font-size: 30px;
  margin-bottom: 18px;
  font-weight: 700;

  background: linear-gradient(90deg, #00e6ff, #25D366);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.community-description {
  color: #ccc;
  font-size: 15px;
  line-height: 1.8;
  max-width: 640px;
  margin: 0 auto;
}

/* Benefits Grid */
.community-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 40px;
  list-style: none;
  padding: 0;
  margin: 35px 0;
}

.community-benefits li {
  font-size: 15px;
  color: #ddd;
  padding-left: 26px;
  position: relative;
  text-align: left;
}

.community-benefits li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #25D366;
  font-weight: bold;
}

/* Button Container */
.community-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* WhatsApp Button */
.btn-whatsapp {
  background: linear-gradient(90deg, #25D366, #00e676);
  color: #000;
  padding: 15px 36px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: 0.3s ease;
  box-shadow: 0 0 20px rgba(37,211,102,0.5);
}

.btn-whatsapp:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 35px rgba(37,211,102,0.8);
}

/* Telegram Button */
.btn-telegram {
  background: linear-gradient(90deg, #229ED9, #1c8adb);
  color: #fff;
  padding: 15px 36px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: 0.3s ease;
  box-shadow: 0 0 20px rgba(34,158,217,0.4);
}

.btn-telegram:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 35px rgba(34,158,217,0.7);
}

.community-note {
  margin-top: 18px;
  font-size: 13px;
  color: #aaa;
}

/* Mobile */
@media (max-width: 768px) {

  .community-section {
    padding: 50px 0px;
  }

  .community-benefits {
    grid-template-columns: 1fr;
  }

  .community-content h2 {
    font-size: 24px;
  }

}