/* Styling for the PIN flow embedded in the clickbox page.
   Deliberately NOT the Traffic Company stylesheet: that one sets its own
   body background, fonts and colours and would fight the clickbox design.
   These rules cover the class names the Vue app actually renders, styled
   to match the clickbox look so the flow reads as one continuous page. */

[v-cloak] { display: none !important; }

.pin-section {
  display: none;
  width: 100%;
  max-width: 420px;
  margin: 8px auto 40px;
}
.pin-section.is-visible { display: block; }

/* loader shown only in the gap before Vue mounts (usually invisible,
   because the session is already warm by the time Continue is tapped) */
.pin-loader {
  display: flex;
  justify-content: center;
  padding: 28px 0;
}
.pin-loader span {
  width: 34px; height: 34px;
  border: 4px solid rgba(0,0,0,.15);
  border-top-color: #ffcc00;
  border-radius: 50%;
  animation: pinSpin .8s linear infinite;
}
@keyframes pinSpin { to { transform: rotate(360deg); } }

.pin-section .flow > * + * { margin-top: 14px; }

.pin-section .heading {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.pin-section .subheading,
.pin-section .text-small { font-size: 14px; line-height: 1.5; }

.pin-section .card {
  background: rgba(0,0,0,.05);
  border: 2px solid rgba(0,0,0,.1);
  border-radius: 18px;
  padding: 20px 16px;
  margin-top: 14px;
}
.pin-section .card__title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 2px;
}
.pin-section .field-note,
.pin-section .autofill-hint,
.pin-section .step-explainer,
.pin-section .disclaimer {
  color: rgba(0,0,0,.6);
  text-align: left;
}
.pin-section .disclaimer { font-size: 11.5px; color: rgba(0,0,0,.5); }

/* number / PIN field — the main event, so it's big and obvious */
.pin-section .form-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.25);
  border-radius: 12px;
  overflow: hidden;
  margin: 10px 0 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pin-section .form-group:focus-within {
  border-color: #ffcc00;
  box-shadow: 0 0 0 4px rgba(255,204,0,.35);
}
.pin-section .form-group__prepend {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 20px;
  font-weight: 700;
  color: #000;
  background: rgba(0,0,0,.06);
  border-right: 1px solid rgba(0,0,0,.15);
  white-space: nowrap;
}
.pin-section .form-group__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 17px 14px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #000;
}
.pin-section .form-group__input::placeholder {
  color: rgba(0,0,0,.3);
  font-weight: 400;
}

.pin-section .btn {
  margin-top: 18px;
  width: 100%;
  border-radius: 9999px;
  border: none;
  border-bottom: 3px solid #000;
  background-color: #ffcc00;
  padding: 14px 26px;
  font-weight: bold;
  font-size: 19px;
  color: #000;
  text-transform: uppercase;
  cursor: pointer;
}
.pin-section .btn:disabled { opacity: .5; cursor: not-allowed; }

.pin-section .error-message {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(220,38,38,.1);
  border: 1px solid rgba(220,38,38,.3);
  color: #b91c1c;
  font-size: 14px;
}

.pin-section .checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  text-align: left;
  margin-top: 12px;
}

.pin-section .tariff { margin-top: 10px; font-size: 12.5px; color: rgba(0,0,0,.55); }

.pin-section .vue-loader--centered { text-align: center; padding: 20px 0; }
.pin-section .vue-loader__ring:after {
  content: "";
  display: block;
  width: 34px; height: 34px;
  margin: 0 auto;
  border: 4px solid rgba(0,0,0,.15);
  border-top-color: #ffcc00;
  border-radius: 50%;
  animation: pinSpin .8s linear infinite;
}

@media (max-width: 400px) {
  .pin-section .form-group__input { font-size: 19px; padding: 15px 12px; }
  .pin-section .form-group__prepend { font-size: 18px; padding: 0 11px; }
  .pin-section .heading { font-size: 18px; }
}

/* terms link at the foot of the lander */
.terms-line{
  text-align: center;
  margin: 18px auto 26px;
  font-size: 12px;
}
.terms-line a{
  color: rgba(255,255,255,.75);
  text-decoration: underline;
}
@media (prefers-color-scheme: light){
  .terms-line a{ color: rgba(0,0,0,.6); }
}

/* the embedded pin section sits on the lander's own background */
.pin-section{ padding: 0 16px; }

.pin-section .pin-terms{
  margin-top: .5rem;
  text-align: left;
}
.pin-section .pin-terms a{
  color: rgba(0,0,0,.55);
  text-decoration: underline;
  font-size: 12px;
}