/* ============================================================
   evoucher.css — eVoucher Services styles
   Inherits CSS custom properties from styles.css
   ============================================================ */

/* ----------------------------------------------------------
   eVoucher tile on the main dashboard (index.html)
   ---------------------------------------------------------- */

/* Make the anchor behave exactly like a .dash-tile button */
a.dash-tile--evoucher {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

.dash-tile__art--evoucher {
  background: var(--bg-elevated);
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------------------------
   eVoucher pages — shared layout wrapper
   ---------------------------------------------------------- */

.ev-wrap {
  max-width: var(--max-w, 520px);
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

/* ----------------------------------------------------------
   Hero banner (evoucher.html landing page)
   ---------------------------------------------------------- */

.ev-hero {
  background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
  padding: 2.5rem 1rem 2rem;
  text-align: center;
  color: #fff;
}

.ev-hero__inner {
  max-width: var(--max-w, 520px);
  margin: 0 auto;
}

.ev-hero__icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.ev-hero__title {
  margin: 0 0 0.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.ev-hero__sub {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

/* ----------------------------------------------------------
   "Live now" notice bar
   ---------------------------------------------------------- */

.ev-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: var(--max-w, 520px);
  margin: 1rem auto 0;
  padding: 0.6rem 1rem;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #22c55e;
  /* keep within the horizontal padding of .ev-wrap */
  box-sizing: border-box;
  width: calc(100% - 2rem);
  /* center it like ev-wrap */
  margin-left: auto;
  margin-right: auto;
}

.ev-notice__icon {
  flex-shrink: 0;
  font-size: 1rem;
}

/* ----------------------------------------------------------
   Section heading
   ---------------------------------------------------------- */

.ev-section-title {
  margin: 1.75rem 0 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ----------------------------------------------------------
   Service card grid (evoucher.html)
   ---------------------------------------------------------- */

.ev-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.ev-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1rem 1rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  cursor: pointer;
}

.ev-card:hover {
  border-color: #475569;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.ev-card:focus-visible {
  outline: 2px solid var(--tile-active-ring);
  outline-offset: 2px;
}

/* Coloured icon circle */
.ev-card__icon-wrap {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-card__icon-wrap--uni { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.ev-card__icon-wrap--col { background: linear-gradient(135deg, #065f46, #10b981); }
.ev-card__icon-wrap--nur { background: linear-gradient(135deg, #9f1239, #f43f5e); }
.ev-card__icon-wrap--nov { background: linear-gradient(135deg, #92400e, #f59e0b); }

.ev-card__icon {
  font-size: 1.55rem;
  line-height: 1;
}

.ev-card__body {
  flex: 1;
  min-width: 0;
}

.ev-card__title {
  margin: 0 0 0.2rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev-card__desc {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.ev-card__badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ev-card__badge--green {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.ev-card__badge--yellow {
  background: rgba(250, 204, 21, 0.15);
  color: var(--nav-yellow, #facc15);
  border: 1px solid rgba(250, 204, 21, 0.3);
}

.ev-card__arrow {
  flex-shrink: 0;
  font-size: 1.5rem;
  color: var(--text-muted);
  line-height: 1;
  padding-right: 0.15rem;
}

/* ----------------------------------------------------------
   How it works steps
   ---------------------------------------------------------- */

.ev-how {
  margin-top: 0.5rem;
}

.ev-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ev-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.ev-step__num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--nav-yellow);
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-step__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.88rem;
}

.ev-step__text strong {
  color: var(--text);
  font-weight: 600;
}

.ev-step__text span {
  color: var(--text-muted);
  line-height: 1.4;
}

/* ----------------------------------------------------------
   Service pages — hero banner variants
   ---------------------------------------------------------- */

.ev-service-hero {
  padding: 2.2rem 1rem 1.8rem;
  text-align: center;
  color: #fff;
}

.ev-service-hero--uni { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
.ev-service-hero--col { background: linear-gradient(135deg, #064e3b 0%, #10b981 100%); }
.ev-service-hero--nur { background: linear-gradient(135deg, #881337 0%, #f43f5e 100%); }
.ev-service-hero--nov { background: linear-gradient(135deg, #78350f 0%, #f59e0b 100%); }

.ev-service-hero__icon {
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.ev-service-hero__title {
  margin: 0 0 0.3rem;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.ev-service-hero__sub {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

/* ----------------------------------------------------------
   Info card (service details row)
   ---------------------------------------------------------- */

.ev-info-card {
  margin-top: 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.ev-info-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}

.ev-info-card__row:last-child {
  border-bottom: none;
}

.ev-info-card__label {
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.ev-info-card__value {
  color: var(--text);
  font-weight: 600;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* green dot indicator */
.ev-badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ev-badge-dot--green { background: #22c55e; }
.ev-badge-dot--yellow { background: #facc15; }

/* ----------------------------------------------------------
   Purchase form card / coming-soon state
   ---------------------------------------------------------- */

.ev-form-card {
  margin-top: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.25rem 1rem;
}

.ev-form-card__title {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.ev-coming-soon {
  text-align: center;
  padding: 1rem 0 0.5rem;
}

.ev-coming-soon__icon {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 0.65rem;
}

.ev-coming-soon__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.ev-coming-soon__text {
  margin: 0 0 0.65rem;
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* WhatsApp CTA button */
.ev-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.7rem 1.4rem;
  background: #25d366;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s, transform 0.12s;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

.ev-whatsapp-btn:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
}

.ev-whatsapp-btn:focus-visible {
  outline: 2px solid var(--tile-active-ring);
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   Checklist card (what you need)
   ---------------------------------------------------------- */

.ev-checklist-card {
  margin-top: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.1rem 1rem;
}

.ev-checklist-card__title {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.ev-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ev-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.87rem;
  color: var(--text);
  line-height: 1.45;
}

.ev-checklist__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #22c55e;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
}

/* ----------------------------------------------------------
   Institution pills grid
   ---------------------------------------------------------- */

.ev-inst-card {
  margin-top: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.1rem 1rem;
}

.ev-inst-card__title {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.ev-inst-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ev-inst-pill {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.ev-inst-note {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ----------------------------------------------------------
   Explainer card (NOVDEC "What is NOVDEC?" block)
   ---------------------------------------------------------- */

.ev-explainer-card {
  margin-top: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.1rem 1rem;
}

.ev-explainer-card__title {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.ev-explainer-card__text {
  margin: 0;
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ----------------------------------------------------------
   Light theme overrides
   ---------------------------------------------------------- */

.light-theme .ev-card:hover {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
}

.light-theme .ev-whatsapp-btn {
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
}

/* ----------------------------------------------------------
   Responsive tweaks
   ---------------------------------------------------------- */

@media (max-width: 360px) {
  .ev-hero__title,
  .ev-service-hero__title {
    font-size: 1.25rem;
  }

  .ev-card__title {
    white-space: normal;
  }

  .ev-card__icon-wrap {
    width: 44px;
    height: 44px;
  }

  .ev-card__icon {
    font-size: 1.3rem;
  }
}

/* ----------------------------------------------------------
   Purchase form — fields, price summary, pay button
   ---------------------------------------------------------- */

.ev-field-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.ev-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ev-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.ev-label span.req {
  color: #f87171;
  margin-left: 0.15rem;
}

.ev-input,
.ev-select {
  font: inherit;
  font-size: 0.92rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.ev-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
}

.ev-input:focus,
.ev-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.ev-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

/* qty row */
.ev-qty-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.ev-qty-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}

.ev-qty-btn:hover { border-color: #3b82f6; background: rgba(59,130,246,0.08); }

.ev-qty-input {
  width: 56px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.5rem 0.5rem;
}

/* price summary box */
.ev-price-box {
  margin: 0.25rem 0 1.1rem;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.ev-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.9rem;
  font-size: 0.87rem;
  border-bottom: 1px solid var(--border);
}

.ev-price-row:last-child { border-bottom: none; }

.ev-price-row__label { color: var(--text-muted); }
.ev-price-row__value { font-weight: 700; color: var(--text); }
.ev-price-row--total .ev-price-row__value { color: #facc15; font-size: 1.05rem; }

/* pay button */
.ev-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: #facc15;
  color: #0f172a;
  font: inherit;
  font-size: 0.97rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(250, 204, 21, 0.3);
}

.ev-pay-btn:hover:not(:disabled) {
  background: #fde047;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(250, 204, 21, 0.4);
}

.ev-pay-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* error / alert strip */
.ev-alert {
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 0.9rem;
  display: none;
}

.ev-alert--err  { border: 1px solid #ef4444; color: #fca5a5; background: rgba(239,68,68,0.08); }
.ev-alert--ok   { border: 1px solid #22c55e; color: #86efac; background: rgba(34,197,94,0.08); }
.ev-alert.ev-alert--visible { display: block; }

/* form note */
.ev-form-note {
  margin: 0.75rem 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

/* light theme tweaks */
.light-theme .ev-pay-btn { box-shadow: 0 4px 14px rgba(250, 204, 21, 0.2); }