/* =====================================================================
   Service Brand Logos – Inline SVG Data URIs
   Official brand colors and wordmarks for BusinessFlex service cards.
   These are clean SVG wordmark representations with official colors.
   ===================================================================== */

:root {
  /* WAEC */
  --svc-img-waec: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='16' fill='%23006838'/%3E%3Ctext x='60' y='45' font-family='Arial,Helvetica,sans-serif' font-size='20' font-weight='900' fill='%23fff' text-anchor='middle'%3EWAEC%3C/text%3E%3Ctext x='60' y='68' font-family='Arial,Helvetica,sans-serif' font-size='10' font-weight='700' fill='%23A8D5BA' text-anchor='middle'%3ERESULT CHECKER%3C/text%3E%3Ccircle cx='60' cy='92' r='10' fill='%23C4A000' stroke='%23fff' stroke-width='1'/%3E%3Ctext x='60' y='96' font-family='Arial,sans-serif' font-size='8' font-weight='900' fill='%23006838' text-anchor='middle'%3EPIN%3C/text%3E%3C/svg%3E");

  /* JAMB */
  --svc-img-jamb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='16' fill='%23003366'/%3E%3Ctext x='60' y='42' font-family='Arial,Helvetica,sans-serif' font-size='22' font-weight='900' fill='%23FFD700' text-anchor='middle'%3EJAMB%3C/text%3E%3Ctext x='60' y='62' font-family='Arial,Helvetica,sans-serif' font-size='9' font-weight='700' fill='%23B0C4DE' text-anchor='middle'%3EUTME / DE%3C/text%3E%3Ctext x='60' y='78' font-family='Arial,Helvetica,sans-serif' font-size='10' font-weight='800' fill='%23FFD700' text-anchor='middle'%3Ee-PIN%3C/text%3E%3Crect x='30' y='88' width='60' height='14' rx='7' fill='%23FFD700'/%3E%3Ctext x='60' y='98' font-family='Arial,sans-serif' font-size='7' font-weight='900' fill='%23003366' text-anchor='middle'%3EREGISTRATION%3C/text%3E%3C/svg%3E");

  /* MTN Nigeria */
  --svc-img-mtn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='16' fill='%23FFCB05'/%3E%3Ctext x='60' y='65' font-family='Arial,Helvetica,sans-serif' font-size='32' font-weight='900' fill='%23003478' text-anchor='middle'%3EMTN%3C/text%3E%3Ctext x='60' y='85' font-family='Arial,sans-serif' font-size='10' font-weight='700' fill='%23003478' text-anchor='middle'%3EEverywhere you go%3C/text%3E%3C/svg%3E");

  /* Airtel */
  --svc-img-airtel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='16' fill='%23ED1C24'/%3E%3Ctext x='60' y='62' font-family='Arial,Helvetica,sans-serif' font-size='22' font-weight='900' fill='%23fff' text-anchor='middle'%3Eairtel%3C/text%3E%3Cpath d='M50 80 C55 72, 65 72, 70 80' stroke='%23fff' stroke-width='3' fill='none'/%3E%3Cpath d='M44 86 C52 74, 68 74, 76 86' stroke='%23fff' stroke-width='2.5' fill='none' opacity='0.6'/%3E%3C/svg%3E");

  /* Glo */
  --svc-img-glo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='16' fill='%23009639'/%3E%3Ccircle cx='60' cy='55' r='25' fill='none' stroke='%23fff' stroke-width='5'/%3E%3Ccircle cx='60' cy='55' r='8' fill='%23fff'/%3E%3Ctext x='60' y='100' font-family='Arial,Helvetica,sans-serif' font-size='16' font-weight='900' fill='%23fff' text-anchor='middle'%3EGlo%3C/text%3E%3C/svg%3E");

  /* 9mobile */
  --svc-img-9mobile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='16' fill='%23006B51'/%3E%3Ctext x='42' y='68' font-family='Arial,Helvetica,sans-serif' font-size='40' font-weight='900' fill='%23fff' text-anchor='middle'%3E9%3C/text%3E%3Ctext x='82' y='62' font-family='Arial,Helvetica,sans-serif' font-size='12' font-weight='800' fill='%23ADCE3E' text-anchor='middle'%3Emobile%3C/text%3E%3Cpath d='M65 68 Q72 60, 80 68 Q88 76, 80 84' stroke='%23ADCE3E' stroke-width='2' fill='none'/%3E%3C/svg%3E");

  /* DStv */
  --svc-img-dstv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='16' fill='%23003B7B'/%3E%3Ctext x='60' y='52' font-family='Arial,Helvetica,sans-serif' font-size='12' font-weight='900' fill='%2300AEEF' text-anchor='middle'%3EDS%3C/text%3E%3Ctext x='60' y='52' font-family='Arial,Helvetica,sans-serif' font-size='12' font-weight='900' fill='%23fff' text-anchor='middle' dx='11'%3Etv%3C/text%3E%3Crect x='25' y='60' width='70' height='40' rx='4' fill='none' stroke='%2300AEEF' stroke-width='2'/%3E%3Cline x1='25' y1='60' x2='95' y2='100' stroke='%2300AEEF' stroke-width='0.5' opacity='0.3'/%3E%3Ctext x='60' y='84' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%2300AEEF' text-anchor='middle'%3ECABLE TV%3C/text%3E%3C/svg%3E");

  /* Electricity / Power */
  --svc-img-power: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='16' fill='%23F59E0B'/%3E%3Cpolygon points='65,20 45,60 55,60 50,100 80,52 67,52 75,20' fill='%23fff'/%3E%3Ctext x='60' y='115' font-family='Arial,sans-serif' font-size='8' font-weight='700' fill='%23fff' text-anchor='middle' opacity='0.8'%3EMETERING%3C/text%3E%3C/svg%3E");

  /* Bank Transfer */
  --svc-img-transfer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='16' fill='%237C3AED'/%3E%3Crect x='25' y='35' width='70' height='50' rx='8' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3Cline x1='25' y1='50' x2='95' y2='50' stroke='%23fff' stroke-width='2'/%3E%3Ctext x='60' y='75' font-family='Arial,sans-serif' font-size='14' font-weight='900' fill='%23fff' text-anchor='middle'%3E₦ → ₦%3C/text%3E%3Ctext x='60' y='100' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23C4B5FD' text-anchor='middle'%3EBANK TRANSFER%3C/text%3E%3C/svg%3E");

  /* Virtual Card */
  --svc-img-vcard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='16' fill='%234338CA'/%3E%3Crect x='20' y='30' width='80' height='50' rx='8' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Crect x='28' y='42' width='16' height='12' rx='2' fill='%23FFD700'/%3E%3Ctext x='75' y='50' font-family='Arial,sans-serif' font-size='8' font-weight='900' fill='%23fff' text-anchor='middle'%3EVIRTUAL%3C/text%3E%3Ctext x='60' y='72' font-family='monospace' font-size='7' fill='%23CBD5E1' text-anchor='middle'%3E•••• •••• •••• 4738%3C/text%3E%3Ctext x='60' y='100' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23A5B4FC' text-anchor='middle'%3EUSD CORPORATE%3C/text%3E%3C/svg%3E");
}

/* Service Image Display Classes */
.svc-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.svc-logo-lg {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.svc-logo-waec { background-image: var(--svc-img-waec); }
.svc-logo-jamb { background-image: var(--svc-img-jamb); }
.svc-logo-mtn { background-image: var(--svc-img-mtn); }
.svc-logo-airtel { background-image: var(--svc-img-airtel); }
.svc-logo-glo { background-image: var(--svc-img-glo); }
.svc-logo-9mobile { background-image: var(--svc-img-9mobile); }
.svc-logo-dstv { background-image: var(--svc-img-dstv); }
.svc-logo-power { background-image: var(--svc-img-power); }
.svc-logo-transfer { background-image: var(--svc-img-transfer); }
.svc-logo-vcard { background-image: var(--svc-img-vcard); }

/* Network Selector Cards with Logos */
.network-card {
  border: 2.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
}
.network-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.network-card input[type="radio"]:checked + .network-inner {
  /* parent label needs styling */
}
.network-card.selected {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.network-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background-size: cover;
  margin: 0 auto 0.35rem auto;
}