/**
 * Verhix Journey Polish V1
 * --------------------------------
 * Safe visual polish for Pricing, Payment Success/Cancelled, and Status pages.
 * This file does NOT change payment logic, Apps Script calls, calculations, or form submission.
 */

:root{
  --vx-navy:#101827;
  --vx-ink:#0f172a;
  --vx-muted:#475569;
  --vx-teal:#0f766e;
  --vx-teal-2:#0d9488;
  --vx-soft:#f8fbfc;
  --vx-soft-teal:#ecfdf5;
  --vx-line:rgba(15,23,42,.11);
  --vx-teal-line:rgba(15,118,110,.22);
  --vx-white:#ffffff;
  --vx-shadow:0 24px 70px rgba(15,23,42,.11);
  --vx-shadow-soft:0 14px 40px rgba(15,23,42,.07);
  --vx-radius:24px;
}

body{
  color:var(--vx-ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(15,118,110,.09), transparent 32%),
    linear-gradient(180deg,#eef6f8 0%,#f8fbfc 44%,#f4f8fa 100%) !important;
}

/* Universal high-value surfaces */
.pricing-card,
.package-card,
.checkout-card,
.payment-card,
.success-card,
.cancelled-card,
.status-card,
.result-panel,
.timeline-card,
.next-step-card,
.trust-card,
.faq-card,
.vx-journey-card{
  background:#ffffff !important;
  border:1px solid var(--vx-line) !important;
  box-shadow:var(--vx-shadow-soft) !important;
  border-radius:var(--vx-radius) !important;
}

/* Keep hero and dark panels intentionally premium */
.hero,
.vx-hero,
.dark,
.dark-section,
[class*="hero"],
[class*="dark"]{
  box-shadow:none;
}

/* Pricing cards */
.pricing-card,
.package-card{
  position:relative;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pricing-card:hover,
.package-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--vx-shadow) !important;
  border-color:var(--vx-teal-line) !important;
}
.pricing-card:before,
.package-card:before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--vx-teal),#14b8a6);
  opacity:.88;
}

/* Make CTA sections clearer */
.vx-cta-strip,
.cta-strip,
.floating-cta,
.sticky-cta{
  backdrop-filter:blur(10px);
  border:1px solid rgba(15,118,110,.18) !important;
}

/* Form/popup fields */
input,
select,
textarea{
  background:#ffffff !important;
  border:1px solid #cbd5e1 !important;
  color:var(--vx-ink) !important;
}
input:focus,
select:focus,
textarea:focus{
  outline:none !important;
  border-color:var(--vx-teal) !important;
  box-shadow:0 0 0 4px rgba(15,118,110,.12) !important;
}

/* Success page */
.vx-success-hero,
.payment-success-hero,
.success-hero{
  background:linear-gradient(135deg,#ecfdf5,#ffffff) !important;
  border:1px solid rgba(16,185,129,.30) !important;
  color:#064e3b !important;
  box-shadow:0 24px 75px rgba(16,185,129,.13) !important;
}
.vx-success-hero h1,
.payment-success-hero h1,
.success-hero h1{
  color:#052e2b !important;
}
.vx-status-link,
a[href*="/status"]{
  font-weight:900;
}

/* Cancelled page */
.vx-cancelled-hero,
.payment-cancelled-hero,
.cancelled-hero{
  background:linear-gradient(135deg,#fff7ed,#ffffff) !important;
  border:1px solid rgba(249,115,22,.22) !important;
  color:#431407 !important;
}

/* Status page readability */
.status-result,
.result-panel{
  color:var(--vx-ink);
}
.progress-shell{
  background:#dbe7ec !important;
}
.progress-bar{
  background:linear-gradient(90deg,var(--vx-teal),#14b8a6) !important;
}

/* Timeline cards */
.vx-mini-journey{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:16px 0;
}
.vx-mini-journey div{
  background:#ffffff;
  border:1px solid rgba(15,118,110,.15);
  border-radius:16px;
  padding:12px;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}
.vx-mini-journey b{
  display:block;
  color:var(--vx-ink);
  margin-bottom:4px;
}
.vx-mini-journey span{
  display:block;
  color:var(--vx-muted);
  font-size:13px;
  line-height:1.35;
}

/* Trust badges */
.vx-trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}
.vx-trust-row span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#ffffff;
  border:1px solid rgba(15,118,110,.16);
  border-radius:999px;
  padding:9px 11px;
  color:#0f172a;
  font-size:13px;
  font-weight:900;
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}

/* Buttons */
button,
.btn,
.button,
a.btn,
a.button{
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
button:hover,
.btn:hover,
.button:hover,
a.btn:hover,
a.button:hover{
  transform:translateY(-1px);
}

@media(max-width:760px){
  .vx-mini-journey{grid-template-columns:1fr}
  .pricing-card,
  .package-card,
  .checkout-card,
  .payment-card,
  .success-card,
  .cancelled-card,
  .status-card,
  .result-panel{
    border-radius:18px !important;
  }
}