/* General Page Styles */


html, body {
  will-change: scroll-position;
  overscroll-behavior: auto !important; /* allow stretch */
  -webkit-overflow-scrolling: touch; /* enable momentum scrolling on iOS */
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}



body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: white;
  background-color: #000; /* solid black for scrolling */
  text-align: center;
}


.background-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .reviews-glass,
  .modal-content,
  .link-buttons a {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.7); /* darker to compensate */
  }
}

/* Main content elements */
h1, p, .footer, .featured, .title-wrapper, #payment-request-button, .link-buttons {
  position: relative;
  z-index: 2;
}

.title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 40px;
  
}

.logo {
  width: 40px;
  height: 40px;
}

h1 {
  font-size: 2.5em;
  margin-bottom: 0.5em;
}

p {
  font-size: 1.2em;
  max-width: 600px;
  margin-bottom: 1.5em;
  padding: 20px;
}

/* Stripe button container */
#payment-request-button {
  width: 100%;
  max-width: 400px;
  height: 50px;
  margin: 20px auto;
  display: block;
}

/* Featured logos section */
.featured {
  margin-top: 2em; 
  margin-left: 20px;
  margin-right: 20px;
    text-align: center;
 
}
.featured-heading {
  text-align: center !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 0 1em 0 !important;
  display: block;
}


.featured-logos {
  background: #ffffff;
  padding: 10px 20px;
  border-radius: 8px;
  display: inline-block;
}

.featured-logos img {
  width: 100px;
  margin: 0 10px;
  vertical-align: middle;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.featured-logos img:hover {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  h1 {
    font-size: 1.8em;
  }

  p {
    font-size: 1em;
  }

  .featured-logos img {
    width: 70px;
    margin: 5px;
  }

  .logo {
    width: 32px;
    height: 32px;
  }
}

/* Glass effect buttons with bubble */
.link-buttons {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.link-buttons a {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 1em;
  text-decoration: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.link-buttons a:hover {
  background: rgba(255, 255, 255, 0.18);
}

.bubble {
  position: absolute;
  top: -8px;
  right: -12px;
  background: #0a84ff;
  color: white;
  font-size: 0.7em;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 20px;
  line-height: 1;
}

/* Footer styling */
.footer {

  bottom: 20px;
  color: #ccc;
  text-align: center;
  width: 100%;
}

.footer-links {
  margin-top: 10px;
  padding-bottom: 10px;
}

.footer-links a {
  color: #aaa;
  margin: 0 10px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Modal popup styling */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0.0;
  transform: scale(1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.modal-content {
    will-change: transform;
  transform: translateZ(0);
  background: #2a2726;
  /*background: rgba(255, 255, 255, 0.1);*/
  border: 1px solid rgba(255, 255, 255, 0.2);
  /*backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);*/
  padding: 30px;
  border-radius: 12px;
  max-width: 90%;
  max-height: 80vh; /* ensures visible scrolling */
  overflow-y: auto; /* enables scrolling */
  color: white;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  position: relative;
  opacity: 0.0;
  /*transition: opacity 0.4s ease, visibility 0s linear 0.4s;*/
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.modal-content.show {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.0s, 0.0s;
}

.modal.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition-delay: 0s;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 1.5em;
  cursor: pointer;
  color: white;
}

/* Reviews container styling */
.reviews-container {
  text-align: left;
}

/* Scrollbar styling for reviews modal */
.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}



.hero-background {
  background: url('background.jpg') no-repeat top center;
  background-size: cover;
  background-attachment: scroll; /* force normal scroll */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}


.main-content {
  background-color: #000;
  padding: 0 20px;
  margin: 0;
  color: white;
}




 .reviews-glass {
   
   /*
  margin: 40px auto 80px auto;
  max-width: 800px;
  padding: 30px;
  border-radius: 16px;
  background: #2a2726;
   
   */
  /*background: rgba(255, 255, 255, 0.08);*/
 /* backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);*/
   
   /*
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  text-align: left;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   
   */
}

.reviews-glass h2 {
  
  /*
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.8em;
  
   */
}

.reviews-glass .reviews-container p {
  
  /*
  margin-bottom: 1em;
  line-height: 1.6;
  font-size: 1em;
  color: #fff;
  
   */
}


/* Reviews new */

.reviews-glass {
  /*padding: 3rem 1.5rem;*/
  /*backdrop-filter: blur(20px); */
  padding-top: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.1);
  color: white;
  margin: 2rem auto 4rem auto;
  max-width: 1200px;
}

.reviews-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 2rem;
}

.review-card {
  display: block;
  gap: 1.25rem;
 /* align-items: flex-start; */
  background: rgba(255, 255, 255, 0.03);
  padding: 1.5rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.05);
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
}

.review-content {
  display: block;
}

.review-header {
  padding-top: 1.5rem;
  display: flex;
  align-items: center;        /* ensures vertical alignment */
  justify-content: center;    /* centers the group */
  gap: 0.5rem;                /* space between name and stars */
  font-size: 0.95rem;
  font-weight: bold;
  color: #fff;
  opacity: 0.85;
}


.stars {
    color: #FFD700;
  font-size: 1rem;
  line-height: 1;             /* tight line-height */
  vertical-align: middle;     /* aligns with baseline of name */
  display: inline-block;
}

.review-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #eee;
  padding: 0 !important;
}


.price-tag {
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  display: inline-block;
  z-index: 2;
}

.price {
  font-size: 60px;
}

.compatible-models {
  
  color: #0a84ff;

}


.button {
padding: 12px 25px;
font-size: 1.1em;
background-color: #e63946;
color: white;
border: none;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease;
}


.skeleton-button {
  width: 100%;
  max-width: 400px;
  height: 45px;
  max-height: 64px;
  min-height: 32px;
  margin: 20px auto;
  border-radius: 4px;
 background: linear-gradient(90deg, #e0e0e0 25%, #ffffff 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  z-index: 2;
}


.payment-button-wrapper {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 45px;
  margin: 20px auto;
}

.skeleton-button,
#payment-request-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}


.ba-container {
  max-width: 800px;
  margin: 2rem auto 0 auto; 
  padding: 0;
 
}

.ba-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: ew-resize;
   border-radius: 24px;
}

.ba-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  user-select: none;
  pointer-events: none;
    z-index: 1;
}

.ba-after {
  z-index: 2;
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.2s ease-out;
}

.ba-slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background-color: #ffffff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25), 0 0 2px rgba(0, 0, 0, 0.2);
  z-index: 2;
  transition: left 0.2s ease-out;
   cursor: ew-resize;
    display: flex;
  justify-content: center;
  align-items: center; /* ✅ This centers the knob vertically */
}

.ba-label {
  position: absolute;
  top: 10px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: medium;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 24px;
  z-index: 1;
  pointer-events: none;
}

.ba-label.before {
  left: 10px;
}

.ba-label.after {
  right: 10px;
}



.ba-label.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.ba-knob {
  /*width: 20px;*/
  /*height: 20px;*/
 /* border-radius: 50%;*/
 /* background: #007bff;*/
 /* box-shadow: 0 0 8px rgba(0, 0, 0, 0.25), 0 0 2px rgba(0, 0, 0, 0.2);*/
 /* pointer-events: all;*/
  /*cursor: grab;*/
 /* transition: background 0.2s ease;*/
 /*  flex-shrink: 0;   */  /*  prevents shrinking */
/*  flex-grow: 0;    */   /* prevents growing */
}

.ba-knob:active {
  cursor: grabbing;
  background: #eee;
}

.ba-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 16px;
  pointer-events: none;
  z-index: 3;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.ba-chevron-left {
  left: -20px;
}

.ba-chevron-right {
  right: -20px;
}

.ba-wrapper,
.ba-image,
.ba-slider,
.ba-knob,
.ba-container {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  pointer-events: auto;
}