/* Ford M/V radio code generator */
.frc-generator-section{
  position:relative;
  background:
    radial-gradient(520px 300px at 100% 0,rgba(var(--cf4-blue-rgb),.1),transparent 72%),
    var(--nv-bg);
}

.frc-generator-layout{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:clamp(34px,6vw,78px);
  align-items:center;
}

.frc-generator-copy .nv-sub strong{color:var(--nv-ink);}

.frc-benefits{
  display:grid;
  gap:11px;
  margin:25px 0 0;
  padding:0;
  list-style:none;
  color:var(--nv-ink);
  font-size:15px;
  font-weight:700;
}

.frc-benefits li{display:flex;align-items:center;gap:10px;}
.frc-benefits span{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  flex:0 0 25px;
  border-radius:50%;
  background:rgba(var(--cf4-blue-rgb),.1);
  color:var(--nv-blue);
  font-size:14px;
}

.frc-card{
  position:relative;
  padding:clamp(24px,4vw,38px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.75);
  border-radius:26px;
  background:#fff;
  box-shadow:0 30px 70px -42px rgba(7,18,48,.66);
}

.frc-card::before{
  content:"";
  position:absolute;
  top:-90px;
  right:-90px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(var(--cf4-orange-rgb),.08);
  pointer-events:none;
}

.frc-form{position:relative;}
.frc-series{margin:0;padding:0;border:0;}
.frc-series legend,
.frc-field > label{
  display:block;
  margin:0 0 10px;
  color:var(--nv-ink);
  font-size:14px;
  font-weight:800;
}

.frc-series-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.frc-series-option{position:relative;cursor:pointer;}
.frc-series-option input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.frc-series-option span{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:66px;
  padding:11px 16px;
  border:2px solid var(--nv-line);
  border-radius:15px;
  background:#fff;
  transition:border-color .18s,background .18s,box-shadow .18s,transform .18s;
}

.frc-series-option span::before{
  content:"";
  position:absolute;
  top:12px;
  right:12px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--nv-line);
  transition:background .18s,box-shadow .18s;
}

.frc-series-option strong{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:11px;
  background:var(--nv-bg);
  color:var(--nv-ink);
  font-size:23px;
  line-height:1;
  transition:background .18s,color .18s;
}

.frc-series-option small{color:var(--nv-muted);font-size:13px;font-weight:700;}
.frc-series-option:hover span{transform:translateY(-2px);border-color:#c8d4e5;}
.frc-series-option input:focus-visible + span{outline:3px solid rgba(var(--cf4-blue-rgb),.22);outline-offset:2px;}
.frc-series-option input:checked + span{
  border-color:var(--nv-blue);
  background:rgba(var(--cf4-blue-rgb),.045);
  box-shadow:0 10px 24px -18px rgba(var(--cf4-blue-rgb),.8);
}
.frc-series-option input:checked + span::before{background:var(--nv-blue);box-shadow:0 0 0 4px rgba(var(--cf4-blue-rgb),.12);}
.frc-series-option input:checked + span strong{background:var(--nv-blue);color:#fff;}

.frc-field{margin-top:23px;}
.frc-serial-control{
  display:flex;
  align-items:stretch;
  min-height:64px;
  overflow:hidden;
  border:2px solid var(--nv-line);
  border-radius:15px;
  background:#fff;
  transition:border-color .18s,box-shadow .18s;
}

.frc-serial-control:focus-within{
  border-color:var(--nv-blue);
  box-shadow:0 0 0 4px rgba(var(--cf4-blue-rgb),.1);
}

.frc-prefix{
  display:grid;
  place-items:center;
  width:62px;
  flex:0 0 62px;
  background:var(--nv-navy);
  color:#fff;
  font-size:25px;
  font-weight:850;
}

.frc-serial-control input{
  width:100%;
  min-width:0;
  padding:10px 17px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--nv-ink);
  font:800 27px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
}

.frc-serial-control input::placeholder{color:#b4bcc7;opacity:1;}
.frc-hint{margin:8px 0 0;color:var(--nv-muted);font-size:12.5px;line-height:1.45;}
.frc-submit{justify-content:center;width:100%;margin-top:22px;min-height:55px;border:0;}
.frc-submit[disabled]{cursor:wait;opacity:.7;transform:none;box-shadow:none;}

.frc-status{
  min-height:20px;
  margin:10px 0 0;
  color:#b3261e;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  text-align:center;
}

.frc-result{
  position:relative;
  margin-top:20px;
  padding:23px;
  border-radius:18px;
  background:
    radial-gradient(220px 130px at 100% 0,rgba(var(--cf4-blue-rgb),.34),transparent 70%),
    linear-gradient(145deg,var(--nv-navy),var(--nv-navy2));
  color:#fff;
  text-align:center;
}

.frc-result[hidden]{display:none;}
.frc-result-label{display:block;color:rgba(255,255,255,.7);font-size:13px;}
.frc-result-label strong{color:#fff;letter-spacing:.06em;}
.frc-code{
  display:block;
  margin:9px 0 12px;
  color:#fff;
  font:850 clamp(46px,8vw,68px)/1 Arial,Helvetica,sans-serif;
  letter-spacing:.2em;
  text-indent:.2em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 8px 30px rgba(0,0,0,.32);
}

.frc-copy{
  padding:9px 15px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:10px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font:700 13px Arial,Helvetica,sans-serif;
  cursor:pointer;
  transition:background .18s,border-color .18s;
}
.frc-copy:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45);}
.frc-copy:focus-visible{outline:3px solid rgba(255,255,255,.35);outline-offset:2px;}
.frc-result p{margin:13px 0 0;color:rgba(255,255,255,.62);font-size:12px;line-height:1.45;}
.frc-noscript{margin:16px 0 0;padding:12px;border-radius:10px;background:#fff3cd;color:#6c5200;font-size:13px;}

.frc-about-section{background:#fff;}
.frc-instruction .nv-sub{max-width:760px;}
.frc-faq{background:#fff;}
.frc-faq-list{display:grid;gap:12px;max-width:930px;margin:30px 0 0;}
.frc-faq-item{
  border:1px solid var(--nv-line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 34px -32px rgba(13,36,85,.6);
}
.frc-faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:19px 21px;
  color:var(--nv-ink);
  font-size:15px;
  font-weight:800;
  line-height:1.4;
  cursor:pointer;
  list-style:none;
}
.frc-faq-item summary::-webkit-details-marker{display:none;}
.frc-faq-item summary span{
  color:var(--nv-blue);
  font-size:24px;
  font-weight:400;
  line-height:1;
  transition:transform .2s;
}
.frc-faq-item[open] summary span{transform:rotate(45deg);}
.frc-faq-item p{margin:0;padding:0 21px 20px;color:var(--nv-muted);font-size:14.5px;line-height:1.65;}

@media (max-width:900px){
  .frc-generator-layout{grid-template-columns:1fr;}
  .frc-generator-copy{max-width:680px;}
  .frc-card{max-width:680px;width:100%;margin:0 auto;box-sizing:border-box;}
}

@media (max-width:560px){
  .frc-series-options{gap:8px;}
  .frc-series-option span{padding:9px 11px;}
  .frc-series-option strong{width:38px;height:38px;font-size:21px;}
  .frc-prefix{width:54px;flex-basis:54px;}
  .frc-serial-control input{padding-right:10px;font-size:24px;letter-spacing:.12em;}
  .frc-code{font-size:52px;}
  .frc-faq-item summary{padding:17px;font-size:14px;}
  .frc-faq-item p{padding:0 17px 18px;font-size:14px;}
}