@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@100..900&display=swap");

:root {
  --afil-navy: #001378;
  --afil-ink: #0e133a;
  --afil-teal: #54c1bd;
  --afil-soft: #f2fafc;
  --afil-bg: #eef7fa;
  --afil-line: #c6dde2;
  --afil-danger: #e2511c;
  --afil-warning: #e8b11b;
  --afil-shadow: 0 24px 70px rgba(14, 19, 58, 0.12);
  --afil-shadow-soft: 0 12px 30px rgba(0, 19, 120, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.wrap {
  background: #eef7fa;
  min-height: 640px;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card {
  background: #fff;
  border-radius: 22px;
  border: 0.5px solid #c6dde2;
  padding: 2rem 2rem 1.75rem;
  width: 100%;
  max-width: 700px;
}
.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
  max-width: 350px;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.logo-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.logo-name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #0e133a;
}
.logo-sub {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #0e133a;
  opacity: 0.45;
  margin-top: 2px;
}
.progress {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1.75rem;
}
.pd {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c6dde2;
  flex-shrink: 0;
  transition: background 0.2s;
}
.pd.active {
  background: #001378;
}
.pd.done {
  background: #6dd539;
}
.pl {
  flex: 1;
  height: 1.5px;
  background: #c6dde2;
}
.pl.done {
  background: #6dd539;
}
.eyebrow {
  font-size: 11px;
  color: #001378;
  opacity: 0.55;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.title {
  font-size: 21px;
  font-weight: 500;
  color: #0e133a;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}
.subtitle {
  font-size: 13px;
  color: #0e133a;
  opacity: 0.55;
  margin-bottom: 1.25rem;
  line-height: 1.55;
}
.fr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.fld {
  margin-bottom: 14px;
}
.lbl {
  font-size: 16px;
  color: #0e133a;
  font-weight: 500;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 0.5px solid #c6dde2;
  border-radius: 11px;
  font-size: 13.5px;
  color: #0e133a;
  background: #fff;
  outline: none;
  transition: border 0.15s;
  font-family: inherit;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #001378;
}
.err {
  font-size: 14px;
  color: #e2511c;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 1.5rem;
}
.cc {
  border: 1.5px solid #c6dde2;
  border-radius: 16px;
  padding: 1.5rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.18s;
  background: #fff;
}
.cc:hover {
  border-color: #001378;
  background: #f2fafc;
}
.cc.sel {
  border-color: #001378;
  background: #f2fafc;
}
.clabel {
  font-size: 16px;
  font-weight: 500;
  color: #0e133a;
}
.chk-ring {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #c6dde2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.chk-ring.on {
  background: #001378;
  border-color: #001378;
}
.guide-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 0.5px solid #eef7fa;
}
.guide-item:last-child {
  border-bottom: none;
}
.g-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f2fafc;
  border: 0.5px solid #c6dde2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.g-text {
  font-size: 16px;
  color: #0e133a;
  line-height: 1.55;
  padding-top: 2px;
}
.registrationGuidelines{
  font-size:13px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#001378;
  margin-bottom:1.25rem;
  font-weight:500;
}
.radio-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  padding: 11px 14px;
  border: 1px solid #c6dde2;
  border-radius: 11px;
  transition: all 0.15s;
  margin-bottom: 8px;
}
.radio-opt:hover {
  background: #f2fafc;
}
.radio-opt.sel {
  border-color: #001378;
  background: #f2fafc;
}
.rdot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #c6dde2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rdot.on {
  border-color: #001378;
}
.rdot.on::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #001378;
  display: block;
}
.rlabel {
  font-size: 16px;
  color: #0e133a;
  font-weight: 500;
  flex: 1;
}
.source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.sopt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid #c6dde2;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.sopt:hover {
  background: #f2fafc;
}
.sopt.sel {
  border-color: #001378;
  background: #f2fafc;
}
.sdot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #c6dde2;
  flex-shrink: 0;
  transition: all 0.15s;
}
.sdot.on {
  border-color: #001378;
  background: #001378;
}
.slabel {
  font-size: 16px;
  color: #0e133a;
}
.addr-box {
  background: #f2fafc;
  border-radius: 11px;
  border: 0.5px solid #c6dde2;
  padding: 12px 14px;
  font-size: 13px;
  color: #0e133a;
  line-height: 1.65;
  margin-bottom: 14px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.notice {
  background: #fffbeb;
  border: 0.5px solid #e8b11b;
  border-radius: 9px;
  padding: 9px 13px;
  font-size: 12px;
  color: #7a4f00;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.goals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-bottom: 1.5rem;
}
.gc {
  border: 1px solid #c6dde2;
  border-radius: 11px;
  padding: 8px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}
.gc:hover {
  background: #f2fafc;
  border-color: #54c1bd;
}
.gc.sel {
  border-color: #001378;
  background: #f2fafc;
}
.gc span {
  font-size: 14px;
  color: #0e133a;
  text-align: center;
  line-height: 1.3;
}
.gc span.material-symbols-rounded {
  font-size: 25px;
}
.symptom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 1.5rem;
}
.sg {
  border: 1px solid #c6dde2;
  border-radius: 11px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}
.sg:hover {
  background: #f2fafc;
  border-color: #54c1bd;
}
.sg.sel {
  border-color: #001378;
  background: #f2fafc;
}
.sg span {
  font-size: 16px;
  color: #0e133a;
  line-height: 1.3;
}
.sg span.material-symbols-rounded {
  font-size: 25px;
}
/**.sg-full {
  grid-column: 1/-1;
}**/
.sdot2 {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1.5px solid #c6dde2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.symptom-grid .sg .sdot2 {
  display: none;
}
.sdot2.on {
  border-color: #001378;
  background: #001378;
}
.chk-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 13px;
  cursor: pointer;
}
.checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid #c6dde2;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  margin-top: 1px;
}
.checkbox.on {
  background: #001378;
  border-color: #001378;
}
.checkbox.on::after {
  content: "";
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
}
.chk-text {
  font-size: 12.5px;
  color: #0e133a;
  line-height: 1.55;
}
.chk-text a {
  color: #001378;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.75rem;
}
.back-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #001378;
  opacity: 0.6;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  transition: opacity 0.15s;
}
.back-btn:hover {
  opacity: 1;
}
.next-btn {
  background: #001378;
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: 11px 24px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 7px;
}
.next-btn:hover {
  background: #0e133a;
}
.complete-btn {
  width: 100%;
  padding: 14px;
  background: #001378;
  color: #fff;
  border: none;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 1.5rem;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.complete-btn:hover {
  background: #0e133a;
}
.validate-btn {
  width: 100%;
  padding: 11px;
  border: 1px solid #c6dde2;
  border-radius: 11px;
  background: #f2fafc;
  color: #001378;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s;
  margin-top: 10px;
}
.validate-btn:hover {
  background: #c6dde2;
}
.validate-btn.ok {
  background: #e6f7f4;
  border-color: #54c1bd;
  color: #0a6b5e;
}
.privacy-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 1.25rem;
  font-size: 11.5px;
  color: #0e133a;
  opacity: 0.4;
}
.hint-box {
  margin-top: 1.25rem;
  padding: 12px 14px;
  background: #f2fafc;
  border-radius: 11px;
  border: 0.5px solid #c6dde2;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: #0e133a;
  opacity: 0.7;
  line-height: 1.55;
}
.code-hero {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #f2fafc;
  border: 0.5px solid #c6dde2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
.pet-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f2fafc;
  border: 0.5px solid #c6dde2;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  color: #001378;
  font-weight: 500;
  margin-bottom: 1rem;
}
.terms-block {
  background: #f2fafc;
  border-radius: 13px;
  border: 0.5px solid #c6dde2;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.terms-block-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #001378;
  margin-bottom: 10px;
}
.success-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0 0.5rem;
  gap: 1rem;
  text-align: center;
}
.success-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e6f7f4;
  border: 0.5px solid #54c1bd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #f2fafc;
  border-radius: 11px;
  border: 0.5px solid #c6dde2;
  width: 100%;
}
.confirm-pill span {
  font-size: 13px;
  color: #0e133a;
  opacity: 0.7;
}
.redirect-btn {
  width: 100%;
  padding: 13px;
  background: #001378;
  color: #fff;
  border: none;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.redirect-btn:hover {
  background: #0e133a;
}
.pet-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 1.25rem;
}
.ptc {
  border: 1.5px solid #c6dde2;
  border-radius: 16px;
  padding: 1.5rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.18s;
  background: #fff;
}
.ptc:hover {
  border-color: #001378;
  background: #f2fafc;
}
.ptc.sel {
  border-color: #001378;
  background: #f2fafc;
}
.ptlabel {
  font-size: 13px;
  font-weight: 500;
  color: #0e133a;
}

body {
  font-family: "Archivo", sans-serif;
  background: radial-gradient(
      circle at top left,
      rgba(84, 193, 189, 0.25),
      transparent 28%
    ),
    var(--afil-bg);
  color: var(--afil-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  background: linear-gradient(145deg, #eef7fa 0%, #f8fcfd 48%, #e9f7f8 100%);
  min-height: 100vh;
  justify-content: center;
}
.card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(198, 221, 226, 0.8);
  box-shadow: var(--afil-shadow);
}
.card:before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--afil-navy), var(--afil-teal));
}
.logo-row svg,
.g-badge svg,
.code-hero svg {
  filter: drop-shadow(0 4px 8px rgba(0, 19, 120, 0.08));
}
.logo-name {
  font-weight: 700;
}
.progress {
  gap: 6px;
}
.pd {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 3px rgba(198, 221, 226, 0.25);
}
.pd.active {
  box-shadow: 0 0 0 4px rgba(0, 19, 120, 0.12);
}
.pd.done {
  box-shadow: 0 0 0 4px rgba(84, 193, 189, 0.14);
}
.pl {
  height: 2px;
  border-radius: 999px;
}
.title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.eyebrow {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cc,
.ptc,
.gc,
.sg,
.sopt,
.radio-opt,
.terms-block,
.addr-box,
.hint-box,
.confirm-pill {
  box-shadow: 0 8px 22px rgba(14, 19, 58, 0.035);
}
.cc:hover,
.ptc:hover,
.gc:hover,
.sg:hover,
.sopt:hover,
.radio-opt:hover {
  transform: translateY(-1px);
  box-shadow: var(--afil-shadow-soft);
}
.cc.sel,
.ptc.sel,
.gc.sel,
.sg.sel,
.sopt.sel,
.radio-opt.sel {
  box-shadow: 0 10px 26px rgba(0, 19, 120, 0.1);
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  min-height: 44px;
  font-family: "Archivo", sans-serif;
  border: 1px solid var(--afil-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
textarea {
  padding-top: 12px;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--afil-navy);
  box-shadow: 0 0 0 4px rgba(0, 19, 120, 0.08);
}
.next-btn,
.complete-btn,
.redirect-btn {
  background: linear-gradient(135deg, var(--afil-navy), #0e133a);
  box-shadow: 0 12px 26px rgba(0, 19, 120, 0.22);
}
.next-btn:hover,
.complete-btn:hover,
.redirect-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(0, 19, 120, 0.28);
}
.back-btn,
.next-btn,
.complete-btn,
.validate-btn,
.redirect-btn {
  font-family: "Archivo", sans-serif;
}
.validate-btn {
  min-height: 44px;
}
.success-icon {
  box-shadow: 0 12px 30px rgba(84, 193, 189, 0.25);
}

@media (max-width: 520px) {
  .wrap {
    padding: 1rem;
    justify-content: flex-start;
  }
  .card {
    padding: 1.5rem 1.15rem;
    width: 100%;
    border-radius: 18px;
  }
  .title {
    font-size: 21px;
  }
  .fr,
  .choice-grid,
  .pet-type-grid,
  .source-grid{
    grid-template-columns: 1fr;
  }
  .goals-grid {
    grid-template-columns: 1fr 1fr;
  }
  .nav-row {
    gap: 1rem;
  }
  .next-btn {
    padding: 11px 18px;
  }
}

@media (max-width: 380px) {
  .goals-grid {
    grid-template-columns: 1fr;
  }
  .logo-sub {
    text-align: center;
    line-height: 1.4;
  }
}


/* =========================
   Material Design UI polish
   ========================= */
:root{
  --md-primary:#001378;
  --md-primary-hover:#0E133A;
  --md-secondary:#54C1BD;
  --md-surface:#FFFFFF;
  --md-surface-variant:#F6FAFC;
  --md-outline:#C6DDE2;
  --md-on-surface:#0E133A;
  --md-muted:#667085;
  --md-radius:14px;
}

body{
  font-family:"Archivo", Arial, sans-serif;
}

.material-symbols-rounded{
  font-family:"Material Symbols Rounded";
  font-weight:400;
  font-style:normal;
  font-size:20px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-feature-settings:"liga";
  -webkit-font-smoothing:antialiased;
  color:currentColor;
  vertical-align:middle;
}
.mi-lg{font-size:34px;color:var(--md-primary);}
.mi-white{color:#fff;}
.mi-error{color:var(--afil-danger);font-size:16px;}
.mi-success{color:#0a6b5e;}

.card{
  border-radius:28px;
  padding:34px;
  max-width:720px;
}

.title{
  font-family:"Archivo", Arial, sans-serif;
  font-size:28px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--md-on-surface);
}
.testCodeText {
  margin-bottom: 20px;
  line-height: 24px;
}
.title.testCode {
  margin-bottom: 5px;
}
.eyebrow,.registrationGuidelines{
  font-family:"Archivo", Arial, sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}

.lbl{
  font-family:"Archivo", Arial, sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--md-on-surface);
  gap:8px;
  margin-bottom:8px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea{
  min-height:48px;
  border:1px solid var(--md-outline);
  border-radius:var(--md-radius);
  padding:12px 16px;
  background:var(--md-surface);
  font-family:"Archivo", Arial, sans-serif;
  font-size:16px;
  color:var(--md-on-surface);
  box-shadow:0 1px 2px rgba(14,19,58,.04);
}

select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--md-muted) 50%),
    linear-gradient(135deg, var(--md-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 22px,
    calc(100% - 13px) 22px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:42px;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--md-primary);
  box-shadow:0 0 0 4px rgba(0,19,120,.10);
}

input::placeholder,
textarea::placeholder{color:#98A2B3;}

.material-date{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='22' viewBox='0 -960 960 960' width='22' fill='%23001378'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:calc(100% - 14px) 50%;
  padding-right:48px!important;
}

.choice-grid,.pet-type-grid{
  gap:18px;
}

.cc,.ptc,.gc,.sg,.sopt,.radio-opt{
  border-radius:18px;
  border:1px solid var(--md-outline);
  background:#fff;
  box-shadow:0 2px 8px rgba(14,19,58,.04);
}

.cc:hover,.ptc:hover,.gc:hover,.sg:hover,.sopt:hover,.radio-opt:hover{
  transform:translateY(-1px);
  border-color:rgba(0,19,120,.45);
  background:var(--md-surface-variant);
  box-shadow:0 10px 24px rgba(0,19,120,.08);
}

.cc.sel,.ptc.sel,.gc.sel,.sg.sel,.sopt.sel,.radio-opt.sel{
  border-color:var(--md-primary);
  background:#F4F8FF;
  box-shadow:0 0 0 3px rgba(0,19,120,.08);
}

.chk-ring,.rdot,.sdot,.sdot2,.checkbox{
  border-color:#98AFC0;
  background:#fff;
}

.chk-ring.on,.sdot.on,.sdot2.on,.checkbox.on{
  background:var(--md-primary);
  border-color:var(--md-primary);
}

.rdot.on{
  border-color:var(--md-primary);
  box-shadow:0 0 0 4px rgba(0,19,120,.10);
}
.rdot.on::after{background:var(--md-primary);}

.next-btn,.complete-btn,.redirect-btn{
  min-height:48px;
  border-radius:999px;
  padding:12px 26px;
  font-family:"Archivo", Arial, sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 10px 20px rgba(0,19,120,.18);
}
.next-btn:hover,.complete-btn:hover,.redirect-btn:hover{
  background:var(--md-primary-hover);
  box-shadow:0 14px 28px rgba(0,19,120,.22);
}

.back-btn{
  font-family:"Archivo", Arial, sans-serif;
  font-size:15px;
  font-weight:700;
}

.validate-btn{
  min-height:50px;
  border-radius:999px;
  font-family:"Archivo", Arial, sans-serif;
  font-size:15px;
  font-weight:700;
}

.g-badge,.code-hero,.success-icon{
  border-radius:16px;
  background:#F4F8FF;
}

.g-text,.rlabel,.slabel,.clabel,.ptlabel{
  font-family:"Archivo", Arial, sans-serif;
}

.chk-text{
  font-size:14px;
  color:var(--md-on-surface);
}

/* jQuery UI Datepicker - Material style */
.ui-datepicker{
  z-index:9999!important;
  width:300px;
  border:0!important;
  border-radius:20px!important;
  padding:12px!important;
  box-shadow:0 22px 60px rgba(14,19,58,.22)!important;
  font-family:"Archivo", Arial, sans-serif!important;
}
.ui-datepicker .ui-datepicker-header{
  border:0!important;
  border-radius:14px!important;
  background:#F4F8FF!important;
  color:var(--md-on-surface)!important;
  padding:10px 0!important;
}
.ui-datepicker .ui-datepicker-title select{
  min-height:36px;
  border-radius:10px;
  padding:6px 28px 6px 10px;
  font-size:13px;
  margin:0 3px!important;
}
.ui-datepicker table{font-size:13px!important;margin-top:10px!important;}
.ui-datepicker th{font-weight:700;color:#667085;}
.ui-datepicker td a{
  border:0!important;
  border-radius:50%!important;
  text-align:center!important;
  background:transparent!important;
  color:var(--md-on-surface)!important;
  padding:8px!important;
}
.ui-datepicker td a:hover{
  background:#EAF0FF!important;
  color:var(--md-primary)!important;
}
.ui-datepicker .ui-state-active{
  background:var(--md-primary)!important;
  color:#fff!important;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{
  top:10px!important;
  border-radius:50%!important;
  cursor:pointer;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover{
  border:0!important;
  background:#EAF0FF!important;
}


/* Purchase source logo cards */
.source-grid{
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.sopt.source-card{
  position:relative;
  min-height:120px;
  padding:14px 12px 12px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  border-radius:16px;
  background:#fff;
}

.source-card .source-radio{
  position:absolute;
  top:12px;
  left:12px;
  width:20px;
  height:20px;
  border:1.6px solid #98AFC0;
  border-radius:50%;
  background:#fff;
}

.source-card .source-radio.on{
  border-color:var(--md-primary);
  box-shadow:0 0 0 3px rgba(0,19,120,.10);
}

.source-card .source-radio.on::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--md-primary);
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.source-logo-wrap{
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:5px;
  width:100%;
}
.source-logo-wrap img{
  max-width: 150px;
  max-height: 75px;
}

.source-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  max-width:100%;
}

.logo-groupon{
  color:#4AA51C;
  font-weight:900;
  font-size:25px;
  letter-spacing:-1px;
}

.logo-living{
  font-size:18px;
  color:#555;
  gap:0;
  position:relative;
}
.logo-living b{font-weight:700;color:#555;}
.logo-living span{font-weight:400;}
.logo-living i{
  width:13px;
  height:13px;
  border-radius:50%;
  background:linear-gradient(135deg,#f7d117 0 32%,#f15b2a 32% 58%,#2eb5e5 58% 78%,#64bd45 78%);
  margin-left:5px;
}

.logo-amazon{
  font-size:30px;
  font-weight:800;
  color:#111;
  position:relative;
  letter-spacing:-1.5px;
  padding-bottom:13px;
}
.logo-amazon span{
  position:absolute;
  left:30px;
  right:12px;
  bottom:0;
  height:10px;
  border-bottom:4px solid #ff9900;
  border-radius:0 0 60% 60%;
}

.logo-social{
  gap:7px;
}
.logo-social .fb{
  width:34px;
  height:34px;
  border-radius:7px;
  background:#4267B2;
  color:#fff;
  font-weight:900;
  font-size:28px;
  font-family:Arial,sans-serif;
  transform:rotate(-10deg);
}
.logo-social .ig{
  width:34px;
  height:34px;
  border-radius:9px;
  background:linear-gradient(135deg,#405DE6,#833AB4,#E1306C,#FCAF45);
  color:#fff;
  font-weight:800;
  font-size:28px;
  font-family:Arial,sans-serif;
  transform:rotate(9deg);
}

.logo-afil{
  flex-direction:column;
  color:#315DAA;
  font-weight:900;
  font-size:12px;
  letter-spacing:4px;
}
.logo-afil small{
  display:block;
  margin-top:4px;
  color:#65758B;
  font-size:7px;
  letter-spacing:2px;
}

.logo-tiktok{
  width:65px;
  height:55px;
  background:#050505;
  color:#fff;
  border-radius:0;
  flex-direction:column;
  font-weight:900;
  font-size:30px;
  text-shadow:-2px 0 #25F4EE, 2px 0 #FE2C55;
}
.logo-tiktok small{
  font-size:14px;
  color:#fff;
  text-shadow:none;
  margin-top:-3px;
}

.logo-google{
  font-size:25px;
  font-weight:800;
  letter-spacing:-1px;
}
.logo-google span:nth-child(1){color:#4285F4;}
.logo-google span:nth-child(2){color:#DB4437;}
.logo-google span:nth-child(3){color:#F4B400;}
.logo-google span:nth-child(4){color:#4285F4;}
.logo-google span:nth-child(5){color:#0F9D58;}
.logo-google span:nth-child(6){color:#DB4437;}

.logo-walmart{
  width:70px;
  height:70px;
  background:#0755B8;
  color:#fff;
  font-weight:800;
  font-size:13px;
  flex-direction:row;
  gap:3px;
}
.logo-walmart span{
  color:#FFC220;
  font-size:18px;
}

.logo-gofun{
  font-size:30px;
  font-weight:900;
  letter-spacing:-1px;
  background:linear-gradient(90deg,#5568D9,#60D7F3,#84E6A6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.sopt.source-card .slabel{
  font-size:15px;
  line-height:1.25;
  font-weight:500;
}

.sopt.source-card.sel{
  border-color:var(--md-primary);
  background:#F4F8FF;
}
.pr-radio-grid {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.pr-radio-grid .radio-opt {
  width: 50%;
}
.kit-used-alert{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px;
  border:1px solid #C6DDE2;
  border-radius:16px;
  background:#F2FAFC;
  margin-top:10px;
  margin-bottom:20px;
  width: 100%;
}

.kit-used-icon{
  color:#001378;
  flex-shrink:0;
}

.kit-used-content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
  color:#0E133A;
}

.kit-used-content strong{
  font-size:18px;
  font-weight:700;
  margin-bottom:5px;
}

.kit-used-content span{
  font-size:14px;
  color:#667085;
}
.kit-used-content span .err{
  color:#e2511c;
  display: inline;
}

.kit-used-btn{
  background:#001378;
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  padding:10px 18px;
  font-weight:700;
  white-space:nowrap;
}
.terms-title{
  text-align:left;
  margin-bottom:8px;
}

.terms-title span,
.terms-required-star{
  color:#e00000;
}

.terms-subtitle{
  text-align:left;
  font-size:18px;
  margin-bottom:28px;
}

.terms-check-card,
.terms-final-check{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid #aeb4bb;
  border-radius:6px;
  padding:12px 15px;
  font-size:16px;
  margin-bottom:16px;
  cursor:pointer;
  background:#fff;
}

.terms-final-check{
  border:none;
  padding-left:0;
  margin-top: 20px;
  margin-bottom: 0;
}

.terms-scroll-box{
  max-height:330px;
  overflow-y:auto;
  border:1px solid #dde3ea;
  border-radius:6px;
  padding:28px;
  font-size:17px;
  line-height:1.65;
  color:#333;
}

.terms-scroll-box h3{
  margin-bottom:16px;
  font-size:18px;
}

.terms-scroll-box p{
  margin-bottom:18px;
  font-size:14px
}
.terms-check-card.has-error {
  margin-bottom: 8px;
}
.terms-check-card.has-error+.err ,
.terms-final-check.has-error+.err {
  margin-bottom: 15px;
}

@media (max-width: 640px){
  .source-grid,.symptom-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .sg-full {
    grid-column: 1/-1;
  }
  .card{
    padding: 34px 15px;
  }
  .terms-scroll-box {
    padding: 15px 15px;
  }
}

@media (max-width: 420px){
  .source-grid{
    grid-template-columns: 1fr;
  }
}


/* Code validation help media */
.code-help-media{
  margin-top:16px;
  padding:16px;
  border:1px solid var(--md-outline);
  border-radius:18px;
  background:#F8FBFD;
  box-shadow:0 8px 22px rgba(14,19,58,.05);
}

.code-help-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:"Archivo", Arial, sans-serif;
  font-size:15px;
  font-weight:700;
  color:var(--afil-ink);
  margin-bottom:6px;
}

.code-help-copy{
  font-size:14px;
  line-height:1.55;
  color:#667085;
  margin-bottom:12px;
}

.code-help-img{
  display:block;
  width:100%;
  max-height:360px;
  object-fit:contain;
  border-radius:14px;
  border:1px solid rgba(198,221,226,.8);
  background:#fff;
}

.video-frame{
  position:relative;
  width:100%;
  padding-top:56.25%;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(198,221,226,.8);
  background:#000;
}

.video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}