/* ==========================================================================
   ROBO RUPEE — v2 site fixes (shared by all outer pages)
   Load AFTER style.css and header-glass.css (see src/index.html)
   - smooth scrolling fixes (stars background, blur removal, sticky header)
   - home: partner AMC name marquee, testimonials 5 + 5, "Ready to start" section
   ========================================================================== */

/* 0. No sideways scroll on phones (hidden side menu sits off-screen to the right).
      "clip" is used instead of "hidden" so the sticky header keeps working */
html, body { overflow-x: clip; }

/* 1. Stars background: move it with transform (GPU) instead of animating
      background-position, which repainted the whole screen on every frame */
.website-bg {
  inset: auto;
  top: -600px;
  left: 0;
  width: calc(100% + 600px);
  height: calc(100% + 600px);
  animation: rrStars 40s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
@keyframes rrStars {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-600px, 600px, 0); }
}

/* 2. Hero cards: inner box is solid black, so the blur behind it was never
      visible but was recalculated every frame (cards also float) */
.gcard-inner {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 3. Testimonial cards (9 cards): 24px blur on each one = heaviest part of the page.
      Same look with a slightly denser glass fill, no live blur */
.testimonial-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015)) rgba(18, 18, 22, .72);
}
.testimonial-wrapper .testimonial-card:not(.section-title) {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--s, 1));
  transition: transform .25s ease-out, box-shadow .4s ease;
  will-change: transform;
}
.testimonial-wrapper .testimonial-card:not(.section-title):hover {
  --s: 1.03;
  z-index: 1000;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(110, 90, 255, .15);
}

/* 4. Header: stays sticky all the time, so the page no longer jumps up when
      script.js adds the "sticky" class (that used to switch it to position:fixed).
      In Angular the <header> sits inside <app-header>, so the custom element itself is made sticky */
app-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 9999;
}
/* while a popup is open, the header goes under the dark backdrop like the rest of the page */
body.modal-open app-header { z-index: 1040; }
.header-main,
.header-main.sticky {
  position: relative;
  top: auto;
  width: 100%;
  padding: 14px 0;
}
@media (max-width: 767px) {
  .header-main, .header-main.sticky { padding: 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .website-bg, .floaty, .trust-logos { animation: none; }
}

/* ===== Testimonials: 5 boxes on top, 5 boxes at the bottom, heading in the middle =====
   Bottom row mirrors the top row (small · large · small · large · small) */
.testimonial-section, .testimonial-wrapper { min-height: 1180px; }
.testimonial-card.section-title { top: 50%; transform: translate(-50%, -50%) !important; }

/* top row (same as before) */
.card-1 { left: 30px;   top: 60px;  bottom: auto; right: auto; width: 340px; }
.card-2 { left: 140px;  top: 200px; bottom: auto; right: auto; }
.card-3 { left: calc(50% - 175px); top: 30px; bottom: auto; right: auto; width: 350px; }
.card-4 { right: 120px; top: 180px; bottom: auto; left: auto; }
.card-5 { right: 20px;  top: 0;     bottom: auto; left: auto; width: 340px; }

/* bottom row (mirror of the top row) */
.card-9  { left: 30px;   bottom: 60px;  top: auto; right: auto; width: 340px; }
.card-6  { left: 140px;  bottom: 200px; top: auto; right: auto; }
.card-7  { left: calc(50% - 175px); bottom: 30px; top: auto; right: auto; width: 350px; }
.card-8  { right: 120px; bottom: 180px; top: auto; left: auto; }
.card-10 { right: 20px;  bottom: 0;     top: auto; left: auto; width: 340px; }

/* new card-10 uses the small-card text sizes */
.card-10 p { font-size: .75rem; line-height: 1.3; }
.card-10 .user img { width: 24px; height: 24px; }
.card-10 .user span { font-size: .85rem; color: var(--white); }
.card-10 .quote { font-size: 90px; line-height: 40px; }

/* laptops 993–1350px: slightly smaller boxes so the rows don't pile up */
@media (min-width: 993px) and (max-width: 1350px) {
  .card-2, .card-4, .card-6, .card-8 { width: 360px; }
  .card-1, .card-5, .card-9, .card-10 { width: 290px; }
  .card-3, .card-7 { width: 300px; left: calc(50% - 150px); }
  .card-2, .card-6 { left: 90px; }
  .card-4, .card-8 { right: 70px; }
}

/* ===== Partner AMC names marquee (hero) ===== */
.amc-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.amc-marquee .trust-logos {
  gap: 0;                                  /* spacing is on each item so -50% loops exactly */
  animation: marquee 22s linear infinite;
  will-change: transform;
}
.amc-marquee:hover .trust-logos { animation-play-state: paused; }
.amc-name {
  display: inline-flex;
  align-items: center;
  padding: 0 26px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, #FFFFFF 0%, #A7B3C5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: .85;
  transition: opacity .3s ease;
  position: relative;
}
.amc-name:hover { opacity: 1; }
.amc-name::after {                         /* small violet dot between names */
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3500F4, #BD49D1);
  box-shadow: 0 0 10px rgba(110, 90, 255, .6);
}
body.light-theme .amc-name { background: linear-gradient(180deg, #111827 0%, #4B5563 100%); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 767px) {
  .amc-name { font-size: 1rem; padding: 0 18px; }
  .amc-marquee .trust-logos { animation-duration: 16s; }
}
@media (prefers-reduced-motion: reduce) {
  .amc-marquee .trust-logos { animation: none; }
}
/* ===== "Ready to start" section: full width, website black + light glass (was blue gradient) ===== */
.newsletter-section {
  position: relative;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(53, 0, 244, .14) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .015) 100%),
    #050508;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.newsletter-section .common-input-box::placeholder { color: rgba(209, 213, 219, .55); }
.newsletter-section .common-input-box:focus { border-color: rgba(150, 130, 255, .5); }
/* Subscribe button: same glass button, blue tone toned down to soft white/violet */
.newsletter-section .newsletter-btn {
  background: rgba(255, 255, 255, .07) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -10px 18px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .45) !important;
}
.newsletter-section .newsletter-btn .glass-border {
  background: linear-gradient(90deg, rgba(255, 255, 255, .40) 0%, rgba(150, 130, 255, .35) 100%) !important;
}
.newsletter-section .newsletter-btn:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 10px 28px rgba(0, 0, 0, .5), 0 0 18px rgba(150, 130, 255, .25) !important;
}
body.light-theme .newsletter-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(241, 243, 250, .9));
  border-top-color: rgba(148, 163, 184, .25);
  border-bottom-color: rgba(148, 163, 184, .2);
}

/* ===== AI chatbot icon (embed.js): only on after-login pages =====
   app/services/chatbot.service.ts tags the widget with data-rr-chatbot
   and adds "rr-chatbot-off" to <body> on every outer page */
body.rr-chatbot-off [data-rr-chatbot] { display: none !important; }

/* ===== Language popup: English / Hindi are real buttons now (tap = apply + close) ===== */
button.lang-choice {
  background: transparent;
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--text);
}
button.lang-choice.selected { color: #fff; }
button.lang-choice:disabled { opacity: .6; cursor: wait; transform: none; }

/* ===== Google Translate: no top bar ("Translated into… / Show original") in any language =====
   Google adds a bar at the top and pushes the page down 40px (body top) — both removed.
   The hidden dropdown that changes the language keeps working. */
body > .skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO {
  display: none !important;
  visibility: hidden !important;
}
html, body { top: 0 !important; }
/* no yellow highlight / tooltip when hovering translated text */
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { background: transparent !important; box-shadow: none !important; }

/* ===== Login popup: validation messages ===== */
.login-error { min-height: 22px; margin-top: 8px; font-size: .85rem; color: #ff6b6b; }
.phone-input-group.is-invalid, .otp-box.is-invalid { border-color: rgba(255, 107, 107, .85) !important; box-shadow: 0 0 0 3px rgba(255, 107, 107, .15); }
.login-change { cursor: pointer; color: #8f85ff; text-decoration: none; font-size: .9rem; }
.login-change:hover { color: #fff; }
.login-change.is-busy { pointer-events: none; opacity: .6; }
#exampleModal2 .glass-btn:disabled { opacity: .7; cursor: wait; }

/* ===== Newsletter form: messages ===== */
.newsletter-section .newsletter-msg { min-height: 24px; margin-top: 12px; font-size: .92rem; text-align: center; }
.newsletter-section .newsletter-msg.is-ok { color: #4ade80; }
.newsletter-section .newsletter-msg.is-info { color: #a5b4fc; }
.newsletter-section .newsletter-msg.is-err { color: #ff6b6b; }
.newsletter-section .common-input-box.is-invalid { border-color: rgba(255, 107, 107, .8) !important; }
.newsletter-section .common-input-box:disabled { opacity: .7; }
.newsletter-section .newsletter-btn:disabled { opacity: .75; cursor: wait; }

/* ===== Liveness camera open: page behind does not scroll ===== */
body.rr-live-open { overflow: hidden; }