/* ============================================================
   Zoho VFD — green/black theme override.
   Loads AFTER css/payroll.css. Scoped to body.vfd-theme so it
   only recolors the VFD page (red -> green), reusing all the
   .pr-* structure from the EZ Payroll microsite.
   ============================================================ */

.vfd-theme .pr-tag { color: var(--green); }

/* Hero + dark backgrounds: swap red glow for green */
.vfd-theme .pr-hero {
  background:
    radial-gradient(circle at 86% 14%, rgba(39,174,96,0.34), transparent 50%),
    radial-gradient(circle at 10% 96%, rgba(232,180,0,0.14), transparent 46%),
    linear-gradient(120deg, #10241b 0%, #0a1712 100%);
}
.vfd-theme .pr-dark-stack {
  background:
    radial-gradient(circle at 88% 9%, rgba(39,174,96,0.32), transparent 42%),
    radial-gradient(circle at 8% 50%, rgba(232,180,0,0.12), transparent 40%),
    radial-gradient(circle at 80% 92%, rgba(39,174,96,0.28), transparent 46%),
    linear-gradient(160deg, #10241b 0%, #0a1712 100%);
}
.vfd-theme .pr-banner {
  background:
    radial-gradient(circle at 88% 16%, rgba(39,174,96,0.34), transparent 52%),
    radial-gradient(circle at 8% 92%, rgba(232,180,0,0.14), transparent 46%),
    linear-gradient(120deg, #10241b 0%, #0a1712 100%);
}
.vfd-theme .pr-cta-band {
  background:
    radial-gradient(circle at 82% 20%, rgba(39,174,96,0.30), transparent 52%),
    linear-gradient(120deg, #10241b 0%, #0a1712 100%);
}

/* Accent text + tags */
.vfd-theme .pr-hero h1 em,
.vfd-theme .pr-banner-text h2 em,
.vfd-theme .pr-head h2 em { color: var(--green); }
.vfd-theme .pr-head .tag { color: var(--green-dark); }
.vfd-theme .pr-head .tag::before { background: var(--green); }

/* Buttons */
.vfd-theme .pr-btn { background: var(--green); }
.vfd-theme .pr-btn:hover { background: var(--green-dark); }

/* Feature icon tiles */
.vfd-theme .pr-feat-ico { background: var(--green-light); color: var(--green-dark); }
.vfd-theme .pr-feat-grid.tint .pr-feat { background: #f0faf6; border-color: #d2ebe1; }
.vfd-theme .pr-feat-grid.tint .pr-feat:hover {
  box-shadow: 0 16px 44px rgba(39,174,96,0.14);
  border-color: #b9e2d3;
}

/* Coverage codes + step numbers */
.vfd-theme .pr-cover-item .code { color: var(--green-dark); }
.vfd-theme .pr-gs-list .n { background: var(--green); }

/* Burst behind the emblem tile */
.vfd-theme .pr-bundle::before {
  background:
    radial-gradient(circle, rgba(39,174,96,0.55) 0%, rgba(39,174,96,0.22) 34%, transparent 62%);
}
.vfd-theme .pr-bundle::after {
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(39,174,96,0.18) 0deg 7deg,
      transparent 7deg 22deg);
}
.vfd-theme .pr-bundle-link {
  background: var(--green);
  box-shadow: 0 8px 22px rgba(39,174,96,0.6);
  border-color: #0a1712;
}

/* Emblem tile holding an SVG icon instead of a logo image */
.vfd-theme .pr-bundle-tile .vfd-emblem {
  width: 66px;
  height: 66px;
  color: var(--green-dark);
}
.vfd-theme .pr-bundle-tile.wide { width: 200px; }

/* White heading + subtext (for use on a dark section) */
.vfd-theme h2.vfd-white,
.vfd-theme h2.vfd-white em,
.vfd-theme p.vfd-white { color: #fff; }

/* Dark green backing for the "Why Zoho VFD" section so white text reads */
.vfd-theme .vfd-dark-sec {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(39,174,96,0.30), transparent 46%),
    radial-gradient(circle at 8% 92%, rgba(232,180,0,0.12), transparent 42%),
    linear-gradient(120deg, #10241b 0%, #0a1712 100%);
}
.vfd-theme .vfd-dark-sec .pr-wrap { position: relative; z-index: 2; }
.vfd-theme .vfd-dark-sec .pr-head h2.vfd-white em { color: var(--green); }

/* Embedded VFD application form card on the dark CTA band */
.vfd-theme .vfd-form-card {
  position: relative;
  z-index: 2;
  max-width: 940px;
  margin: 8px auto 0;
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.vfd-theme .vfd-form-card iframe { display: block; border-radius: 10px; }

/* ---------- How it works: steps + video ---------- */
.vfd-hiw {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.vfd-hiw-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.vfd-hiw-steps .pr-step { text-align: left; }
.vfd-video-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(16,36,27,0.28);
  background: #0a1712;
  line-height: 0;
}
.vfd-video-card video { width: 100%; height: auto; display: block; border-radius: 18px; }
.vfd-video-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 15px 22px;
  border-radius: 100px;
  text-decoration: none;
  color: #fff;
  background:
    radial-gradient(circle at 12% 50%, rgba(232,180,0,0.28), transparent 60%),
    linear-gradient(120deg, var(--green-dark), var(--green));
  box-shadow: 0 12px 30px rgba(39,174,96,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.vfd-video-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(39,174,96,0.45);
}
.vfd-video-banner-play {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vfd-video-banner-play svg { width: 18px; height: 18px; margin-left: 2px; }
.vfd-video-banner-text {
  flex: 1;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
}
.vfd-video-banner-arrow { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 860px) {
  .vfd-hiw { grid-template-columns: 1fr; gap: 32px; }
}

/* Keep the hero bundle beside the text down to smaller widths */
@media (max-width: 980px) and (min-width: 720px) {
  .vfd-theme .pr-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 32px; }
  .vfd-theme .pr-hero-grid .ph-visual { order: 0; }
  .vfd-theme .pr-bundle { gap: 16px; }
  .vfd-theme .pr-bundle-tile { width: 120px; height: 120px; }
}