/* Updated this file */
/* =========================================================
   common.css — Shared components used across all pages
   Uses the tokens from base CSS (:root).
   ========================================================= */

/* ---------- Icon chip common styles ---------- */
/* Every icon chip uses the brand orange (one colour across the site).
   Exceptions on purpose: green check ticks, white icons on gradient chips. */
.ico-3d {
  color: var(--text) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--bevel-edge);
  box-shadow: var(--bevel);
}

.ico-3d:hover {
  box-shadow: var(--bevel-hover);
}

.ico-3d::before {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: var(--gloss);
  border-radius: inherit;
  pointer-events: none;
}

.ico-3d.tone-green {
  box-shadow: inset 0 1px 0 var(--green-32), inset 0 -1px 0 var(--bevel-lo);
}

.ico-3d.tone-blue {
  box-shadow: inset 0 1px 0 var(--blue-32), inset 0 -1px 0 var(--bevel-lo);
}

.ico-3d.tone-pink {
  box-shadow: inset 0 1px 0 var(--brand-a-32), inset 0 -1px 0 var(--bevel-lo);
}

.ico-3d.tone-cyan {
  box-shadow: inset 0 1px 0 var(--cyan-32), inset 0 -1px 0 var(--bevel-lo);
}

.ico-3d .icon {
  font-size: 1rem;
}

.ico-3d-sm .icon {
  font-size: .8rem;
}

.ico-3d-md .icon {
  font-size: 1rem;
}

.ico-3d-lg .icon {
  font-size: 1.15rem;
}

.pf-heading .ico .icon,
.why-card .ico .icon {
  font-size: 1.15rem;
}

/* ---------- Broker Marquee + Broker Chip (Common across all pages) ----------
   Every broker is shown the same way: a chip with its round logo and name
   ([logo] Zerodha). Chips come from broker_chip() in config.php; logos load
   from BROKER_LOGO_URL (Angel One uses the custom "1" icon), and a logo that
   fails to load is swapped for the broker's initials (.broker-ini). */
.broker-showcase {
  margin-top: 28px;
  max-width: 980px;
}

.broker-showcase__label {
  text-align: center;
  font-size: .875rem;
  letter-spacing: .02em;
  color: var(--text-80);
  margin-bottom: 14px;
}

.broker-marquee {
  --broker-gap: 12px;
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.broker-track {
  display: flex;
  align-items: center;
  gap: var(--broker-gap);
  width: max-content;
  padding: 6px 0;
  animation: broker-scroll 60s linear infinite;
}

/* ADDED: the looping copy is added by common.js; without it, don't scroll */
.broker-track[data-marquee]:not(.is-looped),
.testi-row-track[data-marquee]:not(.is-looped) { animation-name: none !important; }

.broker-marquee:hover .broker-track {
  animation-play-state: paused;
}

.broker-card {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 50% 0%, var(--surface-light), transparent 70%),
    var(--surface-2);
  transition: transform .25s ease;
}

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

/* chip: [round logo] Name */
.broker-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--head);
  white-space: nowrap;
}

.broker-chip strong {
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -.01em;
}

.broker-ico,
.broker-ini {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
}

.broker-ini {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}

.broker-chip-lg {
  gap: 14px;
}

.broker-chip-lg .broker-ico,
.broker-chip-lg .broker-ini {
  width: 52px;
  height: 52px;
}

.broker-chip-lg strong {
  font-size: 1.3rem;
}

/* compact chips in the narrow home-hero column */
.broker-showcase .broker-card {
  padding: 9px 16px 9px 10px;
}

.broker-showcase .broker-ico,
.broker-showcase .broker-ini {
  width: 30px;
  height: 30px;
}

.broker-showcase .broker-chip strong {
  font-size: .92rem;
}

@keyframes broker-scroll {
  from {
    transform: translateX(0);
  }

  /* track holds the list twice; shift by one copy (half the track plus half a gap) */
  to {
    transform: translateX(calc(-50% - var(--broker-gap) / 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .broker-track {
    animation-duration: 180s;
  }
}

@media (max-width: 479px) {
  .broker-showcase {
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  .broker-marquee {
    max-width: 100%;
  }

  .broker-card {
    padding: 10px 16px 10px 10px;
  }
}

/* ---------- Hero Section Styles ---------- */

/* Hero section with left-content and right-image layout */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  overflow: hidden;
}

.hero-copy {
  min-width: 0;
}

.hero-visual {
  position: relative;
  min-width: 0;
}

/* Animated hero illustration (MEDIA[...]['hero'] GIFs), right column of .hero-grid */
.hero-gif {
  display: flex;
  justify-content: center;
}

.hero-gif img, .hero-gif video { /* ADDED: video = converted GIF animation */
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
}

@media (min-width: 1020px) {
  .hero-grid {
    grid-template-columns: 1.02fr 1fr;
    gap: 48px;
  }
}

/* ---------- Section Headings (STANDARD — every page) ----------
   .sec-head            centered title block: eyebrow + h2 + lead.
                        Used for overview / card-grid / FAQ sections.
   .sec-head.is-left    left-aligned variant for content-focused sections
                        (title sits beside or above long-form content).
   Width and the gap to the content below come from the layout tokens in
   base.css, so no page CSS should override max-width or margin here.   */
.sec-head {
  text-align: center;
  max-width: var(--sec-head-w);
  margin: 0 auto var(--sec-head-gap);
}

.sec-head> :last-child {
  margin-bottom: 0;
}

.sec-head .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.sec-head h2 {
  margin-bottom: .5em;
}

.sec-head .lead {
  margin-inline: auto;
}

.sec-head.is-left {
  text-align: left;
  margin-inline: 0;
}

.sec-head.is-left .lead {
  margin-inline: 0;
}

/* The title block owns the gap; content directly after it starts flush. */
.section .wrap>.sec-head+*,
.section>.wrap>.sec-head+* {
  margin-top: 0;
}

/* Narrow reading container for tables and prose (same on every page). */
.wrap.fx-narrow,
.fx-narrow {
  max-width: var(--wrap-narrow);
}

/* ---------- Panels (STANDARD — every CTA / highlight box) ----------
   One padding, radius and border for: .cta-panel (home/service/brokers),
   .pc-panel (product CTA), .ab-cta (about), .fq-help (pricing/faq),
   .trusted-panel (home), .pr-banner (pricing).                          */
.cta-panel,
.pc-panel,
.ab-cta,
.fq-help,
.trusted-panel {
  padding: var(--panel-pad-y) var(--panel-pad-x);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
}

/* ---------- Trust/Feature Row ---------- */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 24px;
  color: var(--muted);
  font-size: .9rem;
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-row .ico {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--green);
  margin-right: 8px;
}

.trust-row .ico .icon {
  font-size: .75rem;
}

.trust-row .ico-3d-custom::before {
  border-radius: 4px 4px 0 0;
}

@media (max-width: 639px) {
  .trust-row {
    font-size: .875rem;
    gap: 8px 12px;
  }
}

/* ---------- CTA Panel Common Styles ---------- */
.cta-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  background:
    radial-gradient(700px 380px at 0% 0%, var(--brand-a-16), transparent 60%),
    radial-gradient(700px 380px at 100% 100%, var(--brand-b-16), transparent 60%),
    var(--surface);
}

@media (min-width: 940px) {
  .cta-panel {
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
  }
}

.cta-copy {
  min-width: 0;
}

.cta-copy .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-b);
  margin-bottom: 18px;
}

.cta-copy .pill .icon {
  font-size: .85rem;
}

.cta-copy h2 {
  margin-bottom: .5em;
}

.cta-copy .lead {
  max-width: 56ch;
}

.cta-copy .btn-row {
  margin-top: 24px;
}

.cta-visual {
  position: relative;
  min-width: 0;
}

.cta-visual img, .cta-visual video { /* ADDED: video = converted GIF animation */
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  object-fit: contain;
  box-shadow: var(--shadow);
}

@media (max-width: 939px) {
  .cta-visual {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}

@media (max-width: 639px) {
  .cta-copy .pill {
    font-size: .875rem;
    padding: 7px 13px;
  }
}

/* ---------- Responsive Utilities ---------- */
@media (max-width: 479px) {
  .btn-row {
    flex-direction: column;
  }

  .btn-row .btn {
    width: 100%;
  }
}

@media (min-width: 480px) {
  .btn-row .btn {
    width: auto;
  }
}

/* ---------- Animation Utilities ---------- */
.reveal {
  transition: opacity .6s, transform .6s;
}

.js .reveal:not(.in) {
  opacity: 0;
  transform: translateY(16px);
  /* FIX (blank sections): pure-CSS safety net. If common.js is slow, blocked or throws, the
     element still fades in by itself after 1.8s instead of staying invisible forever. */
  animation: revealFailsafe .5s ease 1.8s forwards;
}

@keyframes revealFailsafe {
  to {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =====MANUAL CSS===== */
.page-container section[id] {
  scroll-margin-top: calc(var(--header-h, 72px) + 12px);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + var(--hero-pad-t)) 0 clamp(32px, 6vw, 72px);
  background:
    radial-gradient(900px 480px at 82% -10%, var(--brand-a-16), transparent 60%),
    radial-gradient(700px 420px at 0% 10%, var(--white-04), transparent 60%)
}

.hero>.wrap,
.hero-banner>.wrap {
  position: relative;
  z-index: 1;
}

/* ===== Ticker wall (hero background) ===== */
.tk-wall {
  --tk-row-h: 30px;
  --tk-gap: 56px;
  --tk-dim: .12;
  --tk-lit: .45;
  --tk-wall-op: 0.5;
  opacity: var(--tk-wall-op);
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  padding-top: 4px;
  -webkit-mask-image: none;
  mask-image: none;
}

[data-theme="light"] .tk-wall {
  --tk-dim: .5;
  --tk-lit: 1;
}

/* soft dark patch behind the hero text so it stays readable */
.tk-wall::after {
  content: "";
  position: absolute;
  inset: 0;

}

.tk-row {
  height: var(--tk-row-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.tk-track {
  display: flex;
  width: max-content;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.tk-row[data-dir="left"] .tk-track {
  animation-name: tk-left;
}

.tk-row[data-dir="right"] .tk-track {
  animation-name: tk-right;
}

.tk-wall.is-paused .tk-track {
  animation-play-state: paused;
}

@keyframes tk-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes tk-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.tk-item {
  margin-right: var(--tk-gap);
  /* margin (not gap) keeps the -50% loop seamless */
  font: 500 .8rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted);
  opacity: var(--tk-dim);
  transition: opacity .45s ease;
}

.tk-item b {
  font-weight: 600;
}

.tk-item i {
  font-style: normal;
  margin-left: .5em;
}

.tk-item .up {
  color: var(--green);
}

.tk-item .dn {
  color: var(--brand-a);
}

.tk-item.is-flash {
  opacity: var(--tk-lit);
}


.tk-item.is-flash .up {}

.tk-item.is-flash .dn {}

.hero-btns {
  margin-top: 24px;
}

.hero-btns .btn {
  width: 100%;
  justify-content: center;
}

@media (min-width: 480px) {
  .hero-btns .btn {
    width: auto;
  }
}

.start-trail {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* ---------- Broker Section "view all" link (used by brokers-section.php) ---------- */
.broker-more {
  text-align: center;
  margin-top: 12px;
  color: var(--muted);
  font-size: .92rem;
}

.broker-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-b);
  font-weight: 650;
  font-size: .9rem;
}

.broker-more-link:hover {
  text-decoration: underline;
}

.broker-desc {
  margin-top: 14px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.7;
}

.faq-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.error-404 .error-404-actions {
  justify-content: center;
  align-items: center;
}

.error-404-actions .btn {
  width: auto;
}

/* ---------- AJAX navigation (website_assets/js/navigation.js) ---------- */
/* Content fades in after an AJAX swap (no overlay / counter; the old page stays usable until the new one is ready) */
#page-content.is-entering {
  animation: pageEnter .35s ease-out both;
}

@keyframes pageEnter {
  from {
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-content.is-entering {
    animation: none;
  }
}

/* main is focused programmatically after navigation; no visible ring needed */
#page-content:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {

  .nav-progress.is-loading,
  .nav-progress.is-done {
    transition: none;
  }
}

/* Lead forms (website_assets/js/forms.js): invalid state + sending state */
.cn-field.is-invalid,
.cn-textarea.is-invalid,
.sv-field.is-invalid input,
.sv-field.is-invalid textarea {
  border-color: #ef4444;
}

.sv-terms.is-invalid {
  color: #ef4444;
}

form.is-submitting {
  cursor: progress;
}

form.is-submitting [type="submit"] {
  opacity: .7;
}

form.is-submitting input:disabled,
form.is-submitting textarea:disabled,
form.is-submitting select:disabled {
  opacity: .6;
  cursor: progress;
}

/* Whole field wrappers dim and ignore the mouse while a lead form is sending */
form.is-submitting .cn-field,
form.is-submitting .cn-textarea,
form.is-submitting .sv-field,
form.is-submitting .sv-terms {
  opacity: .5;
  pointer-events: none;
  user-select: none;
}

/* Form success message: clearly green on every lead form */
.ad-alert.ad-alert-ok,
.cn-alert.cn-alert-ok {
  border: 1px solid #22c55e;
  background: rgba(34, 197, 94, .14);
  color: #4ade80;
  font-weight: 600;
}

.ad-alert-ok .icon,
.cn-alert-ok .icon {
  color: #4ade80;
}

[data-form-alert].ad-alert-ok::before,
[data-form-alert].cn-alert-ok::before {
  content: "\2713";
  margin-right: 8px;
  font-weight: 700;
}

/* Form alerts: base + error style in common.css so every page with a lead form
   (service, white-label, algo-development, contact) renders them the same way */
.ad-alert,
.cn-alert {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: .88rem;
  line-height: 1.5;
}

.ad-alert.ad-alert-err,
.cn-alert.cn-alert-err {
  border: 1px solid #ef4444;
  background: rgba(239, 68, 68, .12);
  color: #fca5a5;
}

.ad-alert-err p,
.cn-alert-err p {
  margin: 0 0 6px;
  font-weight: 650;
}

.ad-alert-err ul,
.cn-alert-err ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}