/* =========================================================
   VISA DOCUMENT SUPPORT BD — THANK YOU PAGE STYLES
   Design system matched 1:1 to the Home Page.
   Header & Footer styles are carried over unchanged so those
   sections continue to render exactly as on the Home Page.
   Everything under .vds-thankyou-page is new, hand-written
   vanilla CSS (no framework) per the build spec.

   REV 3 — restructured for clarity: compact success hero with
   inline reference/status, summaries, remaining-due/next-action,
   what-happens-next, compact dashboard actions, support.
========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --cyan:      #0CC0DF;
  --cyan-50:   #EAFBFD;
  --cyan-100:  #CFF6FB;
  --cyan-300:  #7FE3F0;
  --cyan-400:  #39D8F5;
  --cyan-600:  #0AA0BB;
  --cyan-700:  #087A94;
  --navy:      #081D3A;
  --navy-50:   #0F2648;
  --navy-100:  #0A1930;
  --gold:      #E8B854;
  --green:     #0F9D58;
  --body-c:    #5D728C;
  --border-light: #E6F2F7;
  --bg-page:   #F8FDFF;

  --radius-sm: .75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;

  --shadow-sm: 0 10px 28px -14px rgba(8,29,58,.22);
  --shadow-md: 0 20px 45px -16px rgba(8,29,58,.28);
  --shadow-lg: 0 30px 65px -20px rgba(8,29,58,.32);
  --shadow-glow: 0 16px 40px -12px rgba(12,192,223,.45);

  --container: 1280px;
}

.vds-thankyou-page{
  font-family:'Hind Siliguri', sans-serif;
  background: var(--bg-page);
  color: var(--navy);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.vds-thankyou-page, .vds-thankyou-page *, .vds-thankyou-page *::before, .vds-thankyou-page *::after{ box-sizing: border-box; }
.vds-thankyou-page img, .vds-thankyou-page video, .vds-thankyou-page svg{ max-width:100%; }
.vds-thankyou-page a{ text-decoration:none; }
.vds-thankyou-page button{ font-family:inherit; cursor:pointer; }
.vds-thankyou-page ul{ list-style:none; margin:0; padding:0; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-thumb{ background:#0CC0DF55; border-radius:10px; }

@media (prefers-reduced-motion: reduce){
  .vds-thankyou-page, .vds-thankyou-page *{ animation:none !important; transition:none !important; }
}

/* ---------- Shared premium utilities (carried over from Home Page) ---------- */
.shadow-premium-sm{ box-shadow: var(--shadow-sm); }
.shadow-premium-md{ box-shadow: var(--shadow-md); }
.shadow-premium-lg{ box-shadow: var(--shadow-lg); }
.shadow-premium-glow{ box-shadow: var(--shadow-glow); }

.glass{ background: rgba(255,255,255,.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border:1px solid rgba(255,255,255,.6); }
.glass-dark{ background: rgba(11,30,61,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border:1px solid rgba(255,255,255,.08); }

.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,.8,.28,1), transform .7s cubic-bezier(.16,.8,.28,1); }
.reveal.show{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.1s; } .reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; } .reveal-delay-4{ transition-delay:.4s; }
.reveal[data-reveal="scale"]:not(.show){ opacity:0; transform: scale(.92); }

.lift{ transition: transform .4s cubic-bezier(.16,.8,.28,1), box-shadow .4s cubic-bezier(.16,.8,.28,1); }
.lift:hover{ transform: translateY(-6px); box-shadow: 0 26px 55px -20px rgba(11,30,61,.28); }

.ripple{ position:relative; overflow:hidden; }
.ripple span.circle{ position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); animation:ripple .6s linear; pointer-events:none; }
@keyframes ripple{ to{ transform:scale(3); opacity:0; } }

@keyframes softPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(12,192,223,.35);} 50%{ box-shadow:0 0 0 12px rgba(12,192,223,0);} }
.pulse-ring{ animation: softPulse 2.4s ease-in-out infinite; }

.dot-pattern{ background-image: radial-gradient(rgba(12,192,223,.35) 1px, transparent 1px); background-size: 22px 22px; }

.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.3; pointer-events:none; }
@keyframes floatSlow{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(16px,-22px) scale(1.05);} }
.blob-anim{ animation: floatSlow 12s ease-in-out infinite; }

/* =========================================================
   THANK YOU PAGE — content between the global theme header & footer
========================================================= */
.vds-thankyou-page{ padding-top:0; overflow-x:hidden; }

.vds-container{ max-width: var(--container); margin:0 auto; padding: 0 1.5rem; }
@media (min-width:768px){ .vds-container{ padding:0 2.5rem; } }

.vds-section{ position:relative; padding: 3rem 0; }
@media (max-width:767px){ .vds-section{ padding: 2.25rem 0; } }
.vds-section-tight{ padding: 2.25rem 0; }

.vds-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1rem; border-radius:999px;
  background: rgba(12,192,223,.1); border:1px solid rgba(12,192,223,.22); color: var(--cyan-700);
  font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; margin-bottom:.9rem;
}
.vds-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--cyan); }

.vds-section-head{ text-align:center; max-width:32rem; margin:0 auto 2rem; }
.vds-section-head h2{ font-size: clamp(1.3rem,2.6vw,1.7rem); font-weight:800; color: var(--navy); margin-bottom:.5rem; }
.vds-section-head p{ color: var(--body-c); line-height:1.7; font-size:.92rem; }

/* ---------- 1. COMPACT SUCCESS HERO ---------- */
.vds-success{
  position:relative; background: var(--navy); overflow:hidden; padding: 6.75rem 0 2.5rem;
  text-align:center; color:#fff;
}
@media (max-width:767px){ .vds-success{ padding: 5.75rem 0 2rem; } }
.vds-success .dot-pattern{ position:absolute; inset:0; opacity:.05; }
.vds-success .blob{ z-index:0; }

.vds-success-inner{ position:relative; z-index:5; max-width:34rem; margin:0 auto; }

.vds-success-icon-wrap{ position:relative; width:4.6rem; height:4.6rem; margin:0 auto 1.1rem; }
.vds-success-icon{
  position:absolute; inset:0; border-radius:50%;
  background: linear-gradient(135deg, var(--cyan-300), var(--cyan) 55%, var(--cyan-700));
  box-shadow: 0 16px 40px -12px rgba(12,192,223,.85), inset 0 1px 0 rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
}
.vds-success-icon svg{ width:50%; height:50%; }
.vds-success-icon svg path{
  fill:none; stroke:#081D3A; stroke-width:9; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:120; stroke-dashoffset:120; animation: vdsCheck 0.6s .25s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes vdsCheck{ to{ stroke-dashoffset:0; } }
.vds-success-glow{ position:absolute; inset:-10px; border-radius:50%; background: radial-gradient(circle, rgba(12,192,223,.35), transparent 70%); filter: blur(14px); z-index:-1; }

.vds-success h1{
  font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight:800; letter-spacing:-.01em; line-height:1.2; margin-bottom:.65rem;
}
.vds-success-msg{ color:#B8C7DC; font-size:.95rem; line-height:1.75; margin-bottom:1.6rem; }

.vds-hero-infobar{
  display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:0;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius: var(--radius-md);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow:hidden;
}
.vds-hero-infobar-item{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  padding:1.1rem 1.4rem; min-width:11rem; border-right:1px solid rgba(255,255,255,.12);
}
.vds-hero-infobar-item:last-child{ border-right:0; }
@media (max-width:639px){
  .vds-hero-infobar{ flex-direction:column; }
  .vds-hero-infobar-item{ border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  .vds-hero-infobar-item:last-child{ border-bottom:0; }
}
.vds-hero-label{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color: rgba(255,255,255,.45); }
.vds-hero-ref-row{ display:flex; align-items:center; gap:.65rem; }
.vds-hero-ref-value{ font-size:1.05rem; font-weight:800; color:#fff; letter-spacing:.02em; }
.vds-copy-btn{
  display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem; border-radius:.5rem;
  background: rgba(12,192,223,.16); border:1px solid rgba(12,192,223,.35); color: var(--cyan-300); font-size:.74rem; font-weight:700;
  transition: background-color .25s ease, transform .25s ease;
}
.vds-copy-btn:hover{ background: var(--cyan); color: var(--navy); transform: translateY(-2px); }
.vds-copy-btn i{ font-size:.7rem; }

.vds-status-badge{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .85rem; border-radius:999px;
  font-size:.8rem; font-weight:700; white-space:nowrap;
}
.vds-status-badge .b-dot{ width:6px; height:6px; border-radius:50%; }
.vds-status-badge.is-paid{ background:#E7FBEF; color:#0F9D58; }
.vds-status-badge.is-paid .b-dot{ background:#0F9D58; }
.vds-status-badge.is-partial{ background:#FFF6E5; color:#B7791F; }
.vds-status-badge.is-partial .b-dot{ background:#DE9B24; }
.vds-status-badge.is-pending{ background:#FDEDEE; color:#D64550; }
.vds-status-badge.is-pending .b-dot{ background:#D64550; }
.vds-status-badge.is-review{ background: var(--cyan-50); color: var(--cyan-700); }
.vds-status-badge.is-review .b-dot{ background: var(--cyan); }

/* On the dark hero, badges get an inverted, glassy treatment */
.vds-hero-infobar .vds-status-badge{ background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); }
.vds-hero-infobar .vds-status-badge.is-paid{ color:#6EEBA8; } .vds-hero-infobar .vds-status-badge.is-paid .b-dot{ background:#6EEBA8; }
.vds-hero-infobar .vds-status-badge.is-partial{ color:#F5C36B; } .vds-hero-infobar .vds-status-badge.is-partial .b-dot{ background:#F5C36B; }
.vds-hero-infobar .vds-status-badge.is-pending{ color:#F79AA3; } .vds-hero-infobar .vds-status-badge.is-pending .b-dot{ background:#F79AA3; }
.vds-hero-infobar .vds-status-badge.is-review{ color: var(--cyan-300); } .vds-hero-infobar .vds-status-badge.is-review .b-dot{ background: var(--cyan-300); }

/* ---------- 2. APPLICATION + PAYMENT SUMMARY ---------- */
.vds-summaries{ background: var(--bg-page); padding-top: 2.5rem; }
.vds-summary-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:1024px){ .vds-summary-grid{ grid-template-columns:1fr 1fr; gap:2rem; } }

.vds-card{
  background:#fff; border-radius: var(--radius-lg); border:1px solid var(--border-light);
  box-shadow: var(--shadow-sm); padding:1.85rem; position:relative; overflow:hidden;
}
@media (max-width:639px){ .vds-card{ padding:1.4rem; } }
.vds-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--cyan-300), var(--cyan), var(--cyan-700));
}
.vds-card-head{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.2rem; }
.vds-card-ico{
  width:2.75rem; height:2.75rem; border-radius:.85rem; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(12,192,223,.12); color: var(--cyan-700); font-size:1.05rem;
}
.vds-card-head h2{ font-size:1.15rem; font-weight:800; color: var(--navy); }

.vds-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px dashed var(--border-light); }
.vds-row:last-child{ border-bottom:0; padding-bottom:0; }
.vds-row:first-child{ padding-top:0; }
.vds-row-label{ display:flex; align-items:center; gap:.6rem; color: var(--body-c); font-size:.89rem; font-weight:500; }
.vds-row-label i{ color: var(--cyan-600); width:1rem; text-align:center; font-size:.85rem; }
.vds-row-value{ font-weight:700; color: var(--navy); font-size:.93rem; text-align:right; }

.vds-payment-highlight{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.85rem; padding:.9rem 1rem;
  background: var(--cyan-50); border-radius: var(--radius-sm);
}
.vds-payment-highlight .lbl{ font-weight:700; color: var(--cyan-700); font-size:.86rem; }

/* ---------- 3. REMAINING DUE / NEXT ACTION (dynamic states) ---------- */
.vds-action-section{ background:#fff; }
.vds-due-state{ max-width:42rem; margin:0 auto; }

.vds-action-card{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding:1.85rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; justify-content:space-between;
  position:relative; overflow:hidden;
}
@media (max-width:639px){ .vds-action-card{ padding:1.4rem; flex-direction:column; align-items:stretch; text-align:center; } }

.vds-action-card.is-due{ border:1.5px dashed rgba(232,184,84,.6); }
.vds-action-card.is-due::before{ content:''; position:absolute; top:-40%; right:-10%; width:60%; height:180%; background: radial-gradient(circle, rgba(232,184,84,.12), transparent 70%); pointer-events:none; }
.vds-action-card.is-unpaid{ border:1.5px dashed rgba(214,69,80,.45); }
.vds-action-card.is-unpaid::before{ content:''; position:absolute; top:-40%; right:-10%; width:60%; height:180%; background: radial-gradient(circle, rgba(214,69,80,.1), transparent 70%); pointer-events:none; }
.vds-action-card.is-complete{ border:1px solid rgba(15,157,88,.25); justify-content:center; text-align:center; background: linear-gradient(180deg,#F3FDF7,#fff); }

.vds-action-info{ display:flex; align-items:center; gap:1rem; position:relative; }
@media (max-width:639px){ .vds-action-info{ flex-direction:column; text-align:center; } }
.vds-action-ico{
  width:3rem; height:3rem; border-radius:.9rem; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.is-due .vds-action-ico{ background: rgba(232,184,84,.15); color: var(--gold); }
.is-unpaid .vds-action-ico{ background: rgba(214,69,80,.12); color:#D64550; }
.is-complete .vds-action-ico{ background: rgba(15,157,88,.14); color: var(--green); width:3.4rem; height:3.4rem; font-size:1.3rem; }

.vds-action-info h3{ font-weight:800; color: var(--navy); font-size:1.08rem; margin-bottom:.25rem; }
.vds-action-info p{ color: var(--body-c); font-size:.86rem; line-height:1.6; max-width:20rem; }

.vds-action-amount-block{ text-align:right; position:relative; }
@media (max-width:639px){ .vds-action-amount-block{ text-align:center; } }
.vds-action-amount-label{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: var(--body-c); }
.vds-action-amount{ font-size:1.4rem; font-weight:800; margin:.2rem 0 .75rem; }
.is-due .vds-action-amount{ color:#B7791F; }
.is-unpaid .vds-action-amount{ color:#D64550; }

.vds-thankyou-page .vds-action-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.78rem 1.5rem; border-radius:.8rem;
  color:#fff; font-weight:700; font-size:.87rem; border:0;
  transition: transform .35s ease, background-color .3s ease;
}
.is-due .vds-action-btn{ background: var(--navy); }
.is-due .vds-action-btn:hover{ background: var(--cyan-700); transform: translateY(-3px); }
.is-unpaid .vds-action-btn{ background:#D64550; }
.is-unpaid .vds-action-btn:hover{ background:#B93641; transform: translateY(-3px); }

.vds-action-complete-inner{ display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.vds-action-complete-inner h3{ display:flex; align-items:center; gap:.5rem; color: var(--green); font-weight:800; font-size:1.1rem; }
.vds-action-complete-inner p{ color: var(--body-c); font-size:.88rem; }

/* ---------- Compact helper note (below summary cards) ---------- */
.vds-helper-note{
  display:flex; align-items:flex-start; gap:.55rem; max-width:44rem; margin:1.5rem auto 0;
  color: var(--body-c); font-size:.85rem; line-height:1.7; text-align:center; justify-content:center;
}
.vds-helper-note i{ color: var(--cyan-600); font-size:.85rem; flex:none; margin-top:.2rem; }
@media (max-width:639px){ .vds-helper-note{ text-align:left; } }

/* ---------- 5. DASHBOARD ACTIONS (compact) ---------- */
.vds-dash{ background:#fff; }
.vds-dash-card{
  max-width:44rem; margin:0 auto; background: var(--navy); border-radius: var(--radius-lg);
  padding:2rem 2.25rem; text-align:center; position:relative; overflow:hidden;
}
@media (max-width:639px){ .vds-dash-card{ padding:1.75rem 1.25rem; } }
.vds-dash-card .dot-pattern{ position:absolute; inset:0; opacity:.06; }
.vds-dash-card-inner{ position:relative; z-index:5; }
.vds-dash-card h2{ color:#fff; font-size:1.3rem; font-weight:800; margin-bottom:.5rem; }
.vds-dash-card p{ color:#B8C7DC; font-size:.92rem; line-height:1.7; max-width:30rem; margin:0 auto 1.5rem; }

.vds-dash-buttons{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.9rem; }
.vds-thankyou-page .vds-btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.85rem 1.6rem; border-radius:.85rem;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.30); color:#fff; font-weight:700; font-size:.9rem;
  transition: transform .35s ease, border-color .3s ease, background-color .3s ease; flex:1 1 auto;
}
.vds-btn-outline:hover{ border-color: rgba(12,192,223,.6); background: rgba(12,192,223,.12); transform: translateY(-3px); }
.vds-thankyou-page .vds-btn-solid{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.85rem 1.6rem; border-radius:.85rem;
  background: var(--cyan); color: var(--navy); font-weight:700; font-size:.9rem;
  transition: transform .35s ease, background-color .3s ease; flex:1 1 auto;
}
.vds-btn-solid:hover{ background: var(--cyan-400); transform: translateY(-3px); }
@media (max-width:479px){ .vds-btn-outline, .vds-btn-solid{ width:100%; } }

.vds-dash-auth{ margin-top:1.25rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.25rem; }
.vds-dash-auth-item{ color:#B8C7DC; font-size:.85rem; }
.vds-dash-auth-item a{ color: var(--cyan-300); font-weight:700; margin-left:.35rem; position:relative; }
.vds-dash-auth-item a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background: var(--cyan-300); transition: width .3s ease; }
.vds-dash-auth-item a:hover::after{ width:100%; }

/* ---------- 6. NEED HELP ---------- */
.vds-support{ background: var(--bg-page); }
.vds-support-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:768px){ .vds-support-grid{ grid-template-columns: repeat(3,1fr); } }

.vds-support-card{
  background:#fff; border-radius: var(--radius-md); border:1px solid var(--border-light); box-shadow: var(--shadow-sm);
  padding:1.5rem; text-align:center; transition: transform .35s cubic-bezier(.16,.8,.28,1), box-shadow .35s ease, border-color .35s ease;
}
.vds-support-card:hover{ transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(12,192,223,.35), 0 20px 44px -18px rgba(12,192,223,.5); border-color: transparent; }
.vds-support-ico{
  width:2.75rem; height:2.75rem; margin:0 auto .9rem; border-radius:.9rem; display:flex; align-items:center; justify-content:center;
  background: rgba(12,192,223,.12); color: var(--cyan-700); font-size:1.1rem;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, color .3s ease;
}
.vds-support-card:hover .vds-support-ico{ background: var(--cyan); color:#fff; transform: rotate(-8deg) scale(1.1); }
.vds-support-card h3{ font-weight:800; color: var(--navy); font-size:.98rem; margin-bottom:.35rem; }
.vds-support-card p{ color: var(--body-c); font-size:.82rem; margin-bottom:.9rem; line-height:1.5; }
.vds-support-link{ display:inline-flex; align-items:center; gap:.4rem; color: var(--cyan-700); font-weight:700; font-size:.85rem; }
.vds-support-card:hover .vds-support-link{ color: var(--cyan-600); }

/* ---------- Toast (copy feedback) ---------- */
.vds-toast{
  position:fixed; left:50%; bottom:2rem; transform: translateX(-50%) translateY(20px); z-index:200;
  background: var(--navy); color:#fff; padding:.85rem 1.4rem; border-radius:.85rem; font-size:.88rem; font-weight:600;
  box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:.6rem; opacity:0; pointer-events:none;
  transition: opacity .35s ease, transform .35s ease;
}
.vds-toast.is-visible{ opacity:1; transform: translateX(-50%) translateY(0); }
.vds-toast i{ color: var(--cyan-400); }

/* Integration fixes: explicit button contrast inside WordPress theme */
.vds-thankyou-page .is-due .vds-action-btn{ background:#081D3A; color:#fff !important; box-shadow:0 10px 24px -12px rgba(8,29,58,.55); }
.vds-thankyou-page .is-unpaid .vds-action-btn{ color:#fff !important; }
.vds-thankyou-page .vds-btn-outline{ color:#fff !important; }
.vds-thankyou-page .vds-btn-solid{ color:#081D3A !important; }

/* VDS Core 0.8.9 — full-payment pending-verification state. */
.vds-action-card.is-pending-full{
  border:1px dashed rgba(217,157,42,.55);
  background:linear-gradient(135deg,#fffdf6 0%,#fffaf0 100%);
}
.vds-action-card.is-pending-full .vds-action-ico{
  background:#fff3d4;
  color:#b7791f;
}
.vds-action-card.is-pending-full .vds-action-amount{
  color:#b7791f;
}