/* BroadbandSwitch.uk postcode component v2 (bsw-pc2)
   One component, every placement: hero box, header pill, bottom bar, 404, video prompt, drawer.
   Rules it keeps everywhere:
   - the instruction is a real label that stays visible; the placeholder is only an example
   - the field is never narrower than the example text; the button never clips the field
   - field text is 16px or larger below 768px so iPhones do not zoom on focus
   - the message line has its height reserved so nothing jumps when it appears
   Every selector is namespaced bsw-pc2.  Nothing else on the site is affected. */

.bsw-pc2{--pc-pink:#E50571;--pc-pink-deep:#B8045B;--pc-pink-hover:#C40462;--pc-ink:#120A14;--pc-muted:#9A8F94;--pc-line:#EFDCE6;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0;min-width:0;max-width:100%;box-sizing:border-box;font-family:inherit}
.bsw-pc2 *{box-sizing:border-box}
.bsw-pc2__wrap{container-type:inline-size;min-width:0;max-width:100%;padding-bottom:24px} /* room reserved for the message line */

/* field group: pin + input, with the label above the input inside the same box */
.bsw-pc2__field{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:0;cursor:text}
.bsw-pc2__label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pc-pink-deep);line-height:1.2}
.bsw-pc2__row{display:flex;align-items:center;gap:8px;min-width:0}
.bsw-pc2__pin{flex:none;width:18px;height:18px;color:var(--pc-pink);opacity:.8;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bsw-pc2__input{flex:1 1 auto;min-width:7ch;width:100%;font:inherit;font-size:18px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border:0;outline:0;background:transparent;color:var(--pc-ink);padding:4px 0 6px;margin:0;appearance:none}
.bsw-pc2__input::placeholder{text-transform:none;letter-spacing:0;font-weight:500;color:var(--pc-muted);opacity:1}
.bsw-pc2__input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px #fff inset;-webkit-text-fill-color:var(--pc-ink)}
.bsw-pc2__btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:16px;font-weight:700;line-height:1;
  color:#fff;background:var(--pc-pink);border:0;border-radius:14px;padding:14px 20px;cursor:pointer;white-space:nowrap;transition:background .15s ease}
.bsw-pc2__btn:hover{background:var(--pc-pink-hover)}
.bsw-pc2__btn:active{background:#A80354}
.bsw-pc2__btn:focus-visible,.bsw-pc2__input:focus-visible{outline:3px solid rgba(229,5,113,.45);outline-offset:2px}
.bsw-pc2__btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bsw-pc2__msg{flex:1 0 100%;min-height:18px;font-size:13px;line-height:18px;color:var(--pc-pink-deep);margin:0}
.bsw-pc2__msg:empty{visibility:hidden}

/* ---------- hero: the big white box ---------- */
.bsw-pc2--hero{background:#fff;border:2px solid var(--pc-pink);border-radius:20px;padding:10px;max-width:560px;
  box-shadow:0 14px 30px -18px rgba(229,5,113,.45);transition:box-shadow .15s ease,border-color .15s ease}
.bsw-pc2--hero:focus-within{border-color:#FF2F90;box-shadow:0 0 0 4px rgba(229,5,113,.22),0 14px 30px -18px rgba(229,5,113,.45)}
.bsw-pc2--hero .bsw-pc2__field{padding:6px 10px 4px 12px}
.bsw-pc2--hero{position:relative}
.bsw-pc2--hero .bsw-pc2__msg{position:absolute;top:calc(100% + 6px);left:12px;right:12px;flex:none;min-height:0;padding:0;line-height:1.3}
/* stack the button under the field when the box is narrow, whatever the page width */
@container (max-width: 470px){
  .bsw-pc2--hero{align-items:stretch}
  .bsw-pc2--hero .bsw-pc2__field{flex-basis:100%}
  .bsw-pc2--hero .bsw-pc2__btn{flex:1 0 100%}
}
@supports not (container-type: inline-size){
  @media (max-width: 560px){
    .bsw-pc2--hero{align-items:stretch}
    .bsw-pc2--hero .bsw-pc2__field{flex-basis:100%}
    .bsw-pc2--hero .bsw-pc2__btn{flex:1 0 100%}
  }
}

/* ---------- pill: header, nav row, video prompt ---------- */
.bsw-pc2--pill{flex-wrap:nowrap;gap:0;background:#fff;border:2px solid var(--pc-pink);border-radius:999px;padding:3px 3px 3px 12px;
  box-shadow:0 1px 3px rgba(0,0,0,.18)}
.bsw-pc2--pill:focus-within{box-shadow:0 0 0 3px rgba(229,5,113,.32),0 1px 3px rgba(0,0,0,.18)}
.bsw-pc2--pill .bsw-pc2__field{flex:1 1 auto;flex-direction:row;align-items:center;gap:8px;padding:0}
.bsw-pc2--pill .bsw-pc2__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* read by screen readers, the placeholder carries it visually */
.bsw-pc2--pill .bsw-pc2__pin{width:15px;height:15px}
.bsw-pc2--pill .bsw-pc2__input{font-size:13px;font-weight:700;padding:7px 0;min-width:9.5rem;width:9.5rem}
.bsw-pc2--pill .bsw-pc2__btn{font-size:13px;padding:9px 16px;border-radius:999px;margin-left:8px}
.bsw-pc2--pill .bsw-pc2__msg{position:absolute;top:calc(100% + 8px);right:0;flex:none;min-height:0;background:#9B1C1C;color:#fff;font-size:12.5px;font-weight:600;
  padding:5px 10px;border-radius:7px;white-space:nowrap;z-index:60;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.bsw-pc2--pill .bsw-pc2__msg::before{content:"";position:absolute;bottom:100%;right:1.6rem;border:5px solid transparent;border-bottom-color:#9B1C1C}
.bsw-pc2--pill{position:relative}
/* saved postcode: the pill shows it and the button becomes one tap */
.bsw-pc2--pill.is-saved .bsw-pc2__input{display:none}
.bsw-pc2__have{display:none;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--pc-ink);white-space:nowrap;padding:7px 0}
.bsw-pc2__have button{font:inherit;font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--pc-pink-deep);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.bsw-pc2--pill.is-saved .bsw-pc2__have{display:inline-flex}

/* ---------- bar: the phone bottom bar ---------- */
.bsw-pc2--bar{flex-wrap:nowrap;gap:6px;background:#fff;border:2px solid var(--pc-pink);border-radius:999px;padding:4px;
  box-shadow:0 12px 28px -12px rgba(18,10,20,.45)}
.bsw-pc2--bar .bsw-pc2__field{flex:1 1 auto;flex-direction:row;align-items:center;padding:0 0 0 6px}
.bsw-pc2--bar .bsw-pc2__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bsw-pc2--bar .bsw-pc2__pin{display:none}
.bsw-pc2--bar .bsw-pc2__input{font-size:16px;font-weight:600;padding:9px 2px;min-width:6ch}
.bsw-pc2--bar .bsw-pc2__btn{font-size:14px;padding:11px 16px;border-radius:999px}
.bsw-pc2--bar .bsw-pc2__slot{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%} /* the AA launcher docks here */
.bsw-pc2--bar .bsw-pc2__msg{position:absolute;bottom:calc(100% + 6px);left:12px;right:12px;flex:none;min-height:0;background:#9B1C1C;color:#fff;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:7px}
.bsw-pc2--bar{position:relative}

/* ---------- phones: never below 16px in a text field ---------- */
@media (max-width: 767px){
  .bsw-pc2__input{font-size:16px}
  .bsw-pc2--hero .bsw-pc2__input{font-size:18px}
  /* pills on phones: take the width they are given and let the field give way before the button does */
  .bsw-pc2--pill{width:100%;max-width:100%}
  .bsw-pc2--pill .bsw-pc2__field{flex:1 1 0;min-width:0}
  .bsw-pc2--pill .bsw-pc2__input{font-size:16px;min-width:0;width:auto;flex:1 1 4ch}
  .bsw-pc2--pill .bsw-pc2__btn{padding:9px 13px;font-size:14px}
}
@media (prefers-reduced-motion: reduce){.bsw-pc2,.bsw-pc2 *{transition:none}}