/**
 * Unique Academy — Phone Gate
 * Matches the v3 product page system (Poppins, #fc8615 orange, #630000 maroon).
 */

/* Renders inside .variations_form (the buy-box card), above the variation
   selects, so it lines up with them rather than floating outside the box. */
.ua-pg-wrap{
  margin:0 0 20px;
  padding:0 0 18px;
  border-bottom:1px solid #f2ece8;   /* separates the gate from the selects */
  font-family:Poppins,sans-serif;
  /* Belt and braces: if this ever lands inside a flex row again, take the
     whole line rather than competing with the buy buttons for width. */
  flex:0 0 100%;
  width:100%;
  max-width:100%;
}

/* ---- input ---- */
.ua-pg-label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:#1a1a1a;
  margin:0 0 6px;
  letter-spacing:.2px;
}
.ua-pg-req{color:#fc8615;margin-left:2px}

.ua-pg-input{
  display:flex;
  align-items:stretch;
  border:1.5px solid #f0e2d8;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease;
  /* 380px lines up with the variation selects above it rather than sitting at
     an arbitrary width inside a ~583px buy-box */
  max-width:380px;
  /* 46px matches the Add to cart / Buy now button height exactly */
  height:46px;
}
.ua-pg-input:focus-within{
  border-color:#fc8615;
  box-shadow:0 0 0 3px rgba(252,134,21,.13);
}
.ua-pg-cc{
  display:flex;align-items:center;
  padding:0 11px;
  background:#fdf6ef;
  border-right:1px solid #f0e2d8;
  font-size:13.5px;font-weight:600;color:#630000;
  white-space:nowrap;
}
.ua-pg-input input[type="tel"]{
  flex:1 1 auto;
  min-width:0;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent;
  padding:11px 12px;
  font-family:Poppins,sans-serif;
  font-size:14px;
  font-weight:500;
  color:#1a1a1a;
  letter-spacing:.3px;
  height:auto;
  margin:0;
}
.ua-pg-input input[type="tel"]::placeholder{
  color:#a09590;font-weight:400;letter-spacing:normal;
}

.ua-pg-note{
  margin:7px 0 0;
  font-size:11.5px;
  font-weight:500;
  color:#8a7267;
  line-height:1.45;
}
.ua-pg-error{
  margin:7px 0 0;
  font-size:12px;
  font-weight:600;
  color:#c62828;
  line-height:1.45;
}
.ua-pg-error[hidden]{display:none}

/* ---- saved state ---- */
.ua-pg-saved{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  height:46px;          /* same height as the input it replaces — no jump */
  background:#fdf6ef;
  border:1px solid #f0e2d8;
  border-radius:10px;
  max-width:380px;
}
.ua-pg-saved[hidden]{display:none}
.ua-pg-tick{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex:0 0 18px;
  border-radius:50%;
  background:#fc8615;color:#fff;
  font-size:11px;font-weight:700;line-height:1;
}
.ua-pg-num{
  font-size:13.5px;font-weight:600;color:#630000;letter-spacing:.3px;
  flex:1 1 auto;
}
.ua-pg-change{
  border:0;background:none;padding:0;
  font-family:Poppins,sans-serif;
  font-size:12px;font-weight:600;color:#fc8615;
  cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;
}
.ua-pg-change:hover{color:#e0730a}

/* ---- locked buy buttons ----
   Deliberately NOT `disabled`: a disabled button swallows the click, so the
   user gets no explanation. These stay clickable and the JS intercepts. */
.ua-pg-locked{
  opacity:.55!important;
  cursor:not-allowed!important;
}
.ua-pg-locked:hover{
  transform:none!important;
  box-shadow:none!important;
}

/* ---- mobile ---- */
@media(max-width:767px){
  .ua-pg-input,
  .ua-pg-saved{max-width:none}
  .ua-pg-input{height:48px}
  .ua-pg-saved{height:48px}
  .ua-pg-input input[type="tel"]{
    /* 16px avoids iOS Safari zooming the page on focus */
    font-size:16px;
    padding:12px;
  }
}