/* =========================================================
   WebsDocs Voice Dashboard UI
   Path: /product-ai/css/voice-dashboard.css
   Theme follows voice-agent-generator.css orange/purple language.
========================================================= */

:root {
  --voice-ink: #2a0146;
  --voice-ink-2: #160038;
  --voice-panel: rgba(255,255,255,.88);
  --voice-panel-solid: #fff;
  --voice-muted: #6d6478;
  --voice-text: #30213f;
  --voice-orange: #ff8a00;
  --voice-orange-2: #ffb000;
  --voice-orange-soft: rgba(255,138,0,.12);
  --voice-purple: #5a13c7;
  --voice-cyan: #06b6d4;
  --voice-green: #b7df52;
  --voice-border: rgba(90,19,199,.14);
  --voice-border-strong: rgba(255,138,0,.34);
  --voice-shadow: 0 28px 80px rgba(42,1,70,.14);
  --voice-shadow-soft: 0 16px 44px rgba(42,1,70,.08);
}

* { box-sizing: border-box; }

body.vdb-body {
  margin: 0;
  color: var(--voice-text);
  background:
    radial-gradient(circle at 10% 4%, rgba(255,138,0,.16), transparent 28%),
    radial-gradient(circle at 90% 9%, rgba(90,19,199,.14), transparent 32%),
    radial-gradient(circle at 74% 72%, rgba(6,182,212,.06), transparent 28%),
    linear-gradient(180deg, #fffaf4 0%, #fbf6ff 42%, #fff 100%);
}

.vdb-page {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

.vdb-shell {
  width: min(1500px, calc(100% - 44px));
  margin: 0 auto;
}

.vdb-shell-wide {
  width: min(1860px, calc(100% - 44px));
}

.vdb-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,138,0,.28);
  background: rgba(255,255,255,.78);
  color: #9a4f00;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(42,1,70,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.vdb-hero { padding: 70px 0 28px; }

.vdb-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .85fr);
  gap: 26px;
  align-items: end;
  padding: 30px;
  border: 1px solid rgba(255,138,0,.26);
  border-radius: 36px;
  background:
    radial-gradient(circle at top right, rgba(255,138,0,.15), transparent 34%),
    linear-gradient(145deg, rgba(42,1,70,.96), rgba(22,0,56,.96));
  color: #fff;
  box-shadow: var(--voice-shadow);
  overflow: hidden;
}

.vdb-hero-copy h1 {
  margin: 18px 0 0;
  max-width: 15ch;
  color: #fff;
  font-size: clamp(2.8rem, 5vw, 5.8rem);
  line-height: .91;
  letter-spacing: -.07em;
  font-weight: 950;
}

.vdb-hero-copy p:not(.vdb-kicker) {
  max-width: 76ch;
  margin: 18px 0 0;
  color: rgba(255,250,244,.76);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.7;
}

.vdb-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.vdb-hero-metrics div,
.vdb-stat,
.vdb-card,
.vdb-rail-card,
.vdb-login-card,
.vdb-toolbar {
  border: 1px solid var(--voice-border);
  background: var(--voice-panel);
  box-shadow: var(--voice-shadow-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.vdb-hero-metrics div {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}

.vdb-hero-metrics span,
.vdb-stat span,
.vdb-detail-item span,
.vdb-mini span,
.vdb-list-meta em,
.vdb-field span,
.vdb-code-field span,
.vdb-rail-label {
  display: block;
  color: var(--voice-muted);
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.vdb-hero-metrics span { color: rgba(255,215,166,.86); }
.vdb-hero-metrics strong { display: block; margin-top: 7px; color: #fff; font-size: 1.35rem; font-weight: 950; overflow-wrap: anywhere; }

.vdb-login-wrap { padding: 22px 0 56px; }

.vdb-login-card {
  display: grid;
  grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr);
  gap: 26px;
  align-items: start;
  padding: 26px;
  border-radius: 34px;
  background:
    radial-gradient(circle at top right, rgba(255,138,0,.09), transparent 34%),
    rgba(255,255,255,.88);
}

.vdb-login-card h2,
.vdb-toolbar h2,
.vdb-view-head h3 {
  margin: 16px 0 0;
  color: var(--voice-ink);
  font-size: clamp(1.9rem, 3.6vw, 3.8rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 950;
}

.vdb-login-card p:not(.vdb-kicker),
.vdb-toolbar p,
.vdb-view-head p:not(.vdb-kicker) {
  margin: 13px 0 0;
  color: var(--voice-muted);
  font-size: .98rem;
  line-height: 1.7;
}

.vdb-login-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.vdb-field,
.vdb-code-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.vdb-field input,
.vdb-code-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid rgba(90,19,199,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  color: var(--voice-ink);
  font: inherit;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}

.vdb-field input:focus,
.vdb-code-field textarea:focus {
  border-color: rgba(255,138,0,.58);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,138,0,.12), inset 0 1px 0 rgba(255,255,255,.9);
}

.vdb-code-field { margin-top: 16px; }
.vdb-code-field textarea { min-height: 260px; font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size: .78rem; line-height: 1.55; }

.vdb-login-actions,
.vdb-toolbar-actions,
.vdb-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.vdb-login-actions { grid-column: 1 / -1; }

.vdb-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: .9rem;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.vdb-btn:hover,
.vdb-btn:focus-visible { transform: translateY(-2px); outline: none; }

.vdb-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--voice-orange), #e85d04 48%, var(--voice-purple));
  box-shadow: 0 16px 34px rgba(232,93,4,.25);
}

.vdb-btn-soft {
  color: var(--voice-ink);
  background: #fff;
  border-color: rgba(90,19,199,.14);
  box-shadow: 0 10px 22px rgba(42,1,70,.06);
}

.vdb-btn-full { width: 100%; }

.vdb-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--voice-muted);
  font-size: .86rem;
  font-weight: 760;
  line-height: 1.5;
}
.vdb-status.is-ok { color: #166534; }
.vdb-status.is-error { color: #991b1b; }
.vdb-main-status { margin: 16px 0 0; }

.vdb-dashboard { padding: 24px 0 78px; }
.is-hidden { display: none !important; }

.vdb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
  border-radius: 32px;
}

.vdb-toolbar h2 { font-size: clamp(2rem, 3vw, 3.1rem); }

.vdb-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}

.vdb-stat {
  padding: 18px;
  border-radius: 24px;
  background: #fff;
}

.vdb-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--voice-ink);
  font-size: 1.3rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.vdb-stat small {
  display: block;
  margin-top: 8px;
  color: var(--voice-muted);
  font-size: .78rem;
}

.vdb-app-shell {
  display: grid;
  grid-template-columns: 310px minmax(0,1fr);
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}

.vdb-rail {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 104px;
}

.vdb-rail-card {
  padding: 16px;
  border-radius: 28px;
}

.vdb-rail-label {
  margin: 0 0 12px;
  color: #9a4f00;
}

.vdb-pipe-btn {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(90,19,199,.12);
  border-radius: 17px;
  color: var(--voice-muted);
  background: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 950;
  cursor: pointer;
  text-align: left;
}

.vdb-pipe-btn span {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--voice-muted);
  background: #f4effb;
  font-size: .72rem;
}

.vdb-pipe-btn.is-active {
  color: var(--voice-ink);
  border-color: rgba(255,138,0,.38);
  background: #fff7ed;
}

.vdb-pipe-btn.is-active span {
  color: #fff;
  background: linear-gradient(135deg, var(--voice-orange), var(--voice-purple));
}

.vdb-content { min-width: 0; }
.vdb-view { display: none; }
.vdb-view.is-active { display: block; }

.vdb-view-head {
  padding: 24px;
  border: 1px solid var(--voice-border);
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(255,138,0,.09), transparent 34%),
    rgba(255,255,255,.82);
  box-shadow: var(--voice-shadow-soft);
}

.vdb-view-head h3 { font-size: clamp(1.8rem, 2.6vw, 3rem); }

.vdb-card-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.vdb-grid-two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.vdb-grid-three { grid-template-columns: repeat(3, minmax(0,1fr)); }

.vdb-card {
  padding: 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(255,138,0,.06), transparent 34%),
    rgba(255,255,255,.88);
}

.vdb-card h4 {
  margin: 0 0 14px;
  color: var(--voice-ink);
  font-size: 1.25rem;
  letter-spacing: -.02em;
}

.vdb-detail-grid,
.vdb-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.vdb-detail-item,
.vdb-mini,
.vdb-note,
.vdb-empty,
.vdb-list-item {
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(90,19,199,.10);
}

.vdb-detail-item strong,
.vdb-mini strong {
  display: block;
  margin-top: 7px;
  color: var(--voice-ink);
  font-size: .98rem;
  overflow-wrap: anywhere;
}

.vdb-mini.vdb-tone-success { background: #f0fdf4; border-color: rgba(22,101,52,.18); }
.vdb-mini.vdb-tone-info { background: #f0f9ff; border-color: rgba(6,182,212,.20); }
.vdb-mini.vdb-tone-danger { background: #fef2f2; border-color: rgba(153,27,27,.18); }
.vdb-mini.vdb-tone-neutral { background: #f8fafc; }

.vdb-note strong,
.vdb-guide strong,
.vdb-empty strong {
  display: block;
  color: var(--voice-ink);
  font-weight: 950;
}
.vdb-note p,
.vdb-guide p,
.vdb-empty p {
  margin: 8px 0 0;
  color: var(--voice-muted);
  line-height: 1.6;
  font-size: .9rem;
}

.vdb-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.vdb-list-item {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(320px,1.1fr);
  gap: 14px;
  align-items: start;
}

.vdb-list-item strong {
  display: block;
  color: var(--voice-ink);
  font-size: .98rem;
  overflow-wrap: anywhere;
}

.vdb-list-item p {
  margin: 7px 0 0;
  color: var(--voice-muted);
  font-size: .86rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.vdb-list-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}

.vdb-list-meta span {
  display: block;
  padding: 10px;
  border-radius: 14px;
  background: #fff7ed;
  border: 1px solid rgba(255,138,0,.14);
  color: var(--voice-ink);
  font-size: .8rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.vdb-list-meta em {
  margin-bottom: 4px;
  color: #9a4f00;
  font-style: normal;
  font-size: .65rem;
}

.vdb-support-actions { margin-top: 16px; }



@media (max-width: 1320px) {
  .vdb-hero-card,
  .vdb-login-card,
  .vdb-app-shell { grid-template-columns: 1fr; }
  .vdb-rail { position: relative; top: auto; }
  .vdb-rail-card:first-child { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .vdb-rail-label { grid-column: 1 / -1; }
  .vdb-pipe-btn { margin-top: 0; }
  .vdb-stat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .vdb-shell,
  .vdb-shell-wide { width: min(100% - 28px, 1860px); }
  .vdb-hero { padding-top: 42px; }
  .vdb-hero-metrics,
  .vdb-login-form,
  .vdb-stat-grid,
  .vdb-grid-two,
  .vdb-grid-three,
  .vdb-detail-grid,
  .vdb-mini-grid,
  .vdb-list-item,
  .vdb-list-meta,
  .ai-footer-inner { grid-template-columns: 1fr; }
  .vdb-rail-card:first-child { grid-template-columns: 1fr; }
  .vdb-toolbar { align-items: flex-start; flex-direction: column; }
  .ai-footer-links { justify-content: flex-start; }
}


/* Dashboard conversation detail layout fix */
#conversationMetaDetails .vdb-list-item,
#conversationMetaDetails .vdb-empty,
#conversationMetaDetails .vdb-detail-item,
#conversationMetaDetails .vdb-list-meta,
#conversationMetaDetails .vdb-list-meta span {
  min-width: 0;
}

#conversationMetaDetails .vdb-list-item {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.4fr);
  gap: 14px;
  align-items: stretch;
}

#conversationMetaDetails .vdb-list-item > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

#conversationMetaDetails .vdb-list-item > div:first-child strong,
#conversationMetaDetails .vdb-list-item > div:first-child p {
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.45;
}

#conversationMetaDetails .vdb-list-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 10px;
  align-items: stretch;
}

#conversationMetaDetails .vdb-list-meta span {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

#conversationMetaDetails .vdb-list-meta em {
  display: block;
  margin-bottom: 4px;
  white-space: nowrap;
}

/* Follow-up cards: stop narrow columns from crushing text */
#followUpSignalList .vdb-list-item,
#handoffList .vdb-list-item {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1fr);
  gap: 14px;
}

#followUpSignalList .vdb-list-meta,
#handoffList .vdb-list-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 10px;
}

#followUpSignalList .vdb-list-meta span,
#handoffList .vdb-list-meta span {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Conversation timeline: cleaner rows */
#conversationTimeline .vdb-list-item,
#timelineList .vdb-list-item {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(300px, auto);
  gap: 14px;
}

#conversationTimeline .vdb-list-meta,
#timelineList .vdb-list-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 10px;
}

/* Mobile / narrow screens */
@media (max-width: 900px) {
  #conversationMetaDetails .vdb-list-item,
  #followUpSignalList .vdb-list-item,
  #handoffList .vdb-list-item,
  #conversationTimeline .vdb-list-item,
  #timelineList .vdb-list-item {
    grid-template-columns: 1fr;
  }

  #conversationMetaDetails .vdb-list-meta,
  #followUpSignalList .vdb-list-meta,
  #handoffList .vdb-list-meta,
  #conversationTimeline .vdb-list-meta,
  #timelineList .vdb-list-meta {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

/* Final selected conversation overflow fix */
#conversationMetaDetails {
  overflow: hidden;
}

#conversationMetaDetails .vdb-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#conversationMetaDetails .vdb-list-item > div:first-child {
  min-width: 0;
  max-width: 100%;
}

#conversationMetaDetails .vdb-list-item > div:first-child strong,
#conversationMetaDetails .vdb-list-item > div:first-child p {
  overflow-wrap: anywhere;
  word-break: normal;
}

#conversationMetaDetails .vdb-list-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 100%;
}

#conversationMetaDetails .vdb-list-meta span {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

#conversationMetaDetails .vdb-list-meta em {
  display: block;
  white-space: nowrap;
  margin-bottom: 4px;
}

@media (max-width: 700px) {
  #conversationMetaDetails .vdb-list-meta {
    grid-template-columns: 1fr;
  }
}



/* =========================
   Voice prepaid top-up cards
========================= */
.vdb-topup-email-box {
  margin: 18px 0 20px;
  padding: 18px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 138, 0, 0.08), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 247, 255, 0.96));
  box-shadow: 0 14px 34px rgba(42, 1, 70, 0.06);
}

.vdb-topup-email-box label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 9px;
  color: #2a0146;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vdb-topup-email-box label span {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.09);
  color: #6d28d9;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.vdb-topup-email-box input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 14px;
  padding: 0 14px;
  background: #ffffff;
  color: #180026;
  font: inherit;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.vdb-topup-email-box input::placeholder {
  color: #9ca3af;
}

.vdb-topup-email-box input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
  background: #ffffff;
}

.vdb-topup-email-box p {
  margin: 10px 0 0;
  color: #6b6478;
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .vdb-topup-email-box {
    padding: 15px;
    border-radius: 16px;
  }

  .vdb-topup-email-box label {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}



.vdb-topup-card {
  overflow: hidden;
}

.vdb-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.vdb-card-head h4 {
  margin: 0 0 8px;
}

.vdb-card-head p {
  margin: 0;
  color: var(--vdb-muted, #665d73);
  line-height: 1.6;
}

.vdb-grid-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vdb-topup-option {
  border: 1px solid rgba(255, 157, 64, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 248, 239, 0.96), rgba(255, 255, 255, 0.92));
  border-radius: 18px;
  padding: 18px 16px;
  min-height: 128px;
  cursor: pointer;
  text-align: left;
  color: #2a0146;
  box-shadow: 0 14px 32px rgba(42, 1, 70, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.vdb-topup-option span {
  font-size: 0.78rem;
  line-height: 1;
  color: #a14b00;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vdb-topup-option strong {
  font-size: 1.3rem;
  line-height: 1.2;
  color: #2a0146;
}

.vdb-topup-option small {
  color: #70657a;
  font-weight: 700;
}

.vdb-topup-option:hover,
.vdb-topup-option:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 132, 0, 0.72);
  box-shadow: 0 18px 42px rgba(42, 1, 70, 0.12);
  outline: none;
}

.vdb-topup-option.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.vdb-topup-option.is-selected {
  border-color: rgba(42, 1, 70, 0.65);
  background:
    linear-gradient(135deg, rgba(255, 242, 224, 1), rgba(250, 246, 255, 0.98));
}

#voiceTopupStatus {
  margin-top: 14px;
}

@media (max-width: 1180px) {
  .vdb-grid-five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .vdb-card-head {
    display: block;
  }

  .vdb-grid-five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .vdb-grid-five {
    grid-template-columns: 1fr;
  }

  .vdb-topup-option {
    min-height: 104px;
  }
}