/* ==================================================================
   "ANUNȚĂ-MĂ CÂND REVINE" - THE THREE-FIELD FORM

   Its own file, not ux.css: ux.css is render-blocking on every page of
   the site and this form appears on out-of-stock product pages only,
   which is roughly a tenth of them. AF_Restock::assets() enqueues it
   there and nowhere else, at priority 1002, so it lands after af-ux and
   can correct the rules ux.css still holds from the single-field
   version (.af-restock__row, and the --done rule that hid it).

   The theme's own product styles are !important throughout, so the
   sizes here have to be too - a plain rule loses to XStore's input
   styling on the same page.
   ================================================================== */

.af-restock{
  margin-top:4px;
  padding:18px;
  border:1px solid #e6e6ea;
  border-radius:14px;
  background:#fafafb;
}

.af-restock [hidden]{display:none!important}

/* The theme sets border-box globally, but a 100% input with 15px of padding
   inside an 18px-padded card is one missing rule away from hanging off the
   right edge of a 360px screen. Said here so the form cannot be broken by a
   change somewhere else. */
.af-restock,
.af-restock *{box-sizing:border-box}

.af-restock__lead{
  margin:0 0 16px!important;
  font-size:17px!important;
  line-height:1.45!important;
  color:#33333a;
}

.af-restock__field{margin:0 0 14px}
.af-restock__field:last-child{margin-bottom:0}

/* Two contact fields side by side above 760px and stacked below it: on a
   phone they are two full-width rows, which is the only shape that keeps
   the 56px targets and the rule under each label readable. */
.af-restock__pair{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin:0 0 12px;
}

@media (min-width:760px){
  .af-restock__pair{grid-template-columns:1fr 1fr}
  .af-restock__pair .af-restock__field{margin-bottom:0}
}

/* The label carries the rule.
   The condition is the thing people get wrong, so it is printed where
   they are looking when they decide whether to type - not held back for
   a red line after a refused submit. It sits on its own line under the
   field name rather than beside it: at 15px beside "Telefon" it wrapped
   mid-sentence on a 360px screen. */
.af-restock__label{
  display:block;
  margin-bottom:8px;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  color:#33333a;
}

.af-restock__when,
.af-restock__must{
  display:block;
  margin-top:3px;
  font-size:14px;
  font-weight:500;
  line-height:1.35;
  color:#5b5b62;   /* 6.6:1 on #fafafb - small text needs 4.5:1 */
}

/* "obligatoriu" is not an error, so it is not red: a red line under a field
   nobody has touched yet reads as a complaint about something already done
   wrong. All three fields state their rule in the same grey, in the same
   voice - the words do the work. */
.af-restock__must{font-weight:600}

.af-restock__input{
  display:block;
  width:100%!important;
  min-width:0;
  min-height:56px!important;   /* 48px is the floor; this audience is older */
  padding:0 15px!important;
  border:1px solid #c9c9d0!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#1e1e22!important;
  font-size:17px!important;    /* under 16px iOS zooms the page on focus */
  line-height:normal!important;
}

.af-restock__input::placeholder{color:#8b8b93;opacity:1}

.af-restock__input:focus{
  border-color:#1b5e20!important;
  outline:3px solid rgba(27,94,32,.28);
  outline-offset:1px;
}

/* A field the server or the browser refused. Never colour alone: the
   border thickens and a line of plain Romanian appears under it. */
.af-restock__input[aria-invalid="true"]{
  border:2px solid #8a2c2c!important;
  background:#fffafa!important;
}

.af-restock__bad{
  margin:7px 0 0!important;
  font-size:15px!important;
  line-height:1.4!important;
  font-weight:600;
  color:#8a2c2c;
}

/* "Can we reach you yet?" - answered while they type.
   Four sentences are printed by PHP and this switches which one shows,
   so the script never writes Romanian. The mark beside it changes shape
   as well as colour, for anyone who cannot tell the two greens apart. */
.af-restock__need{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0 0 16px!important;
  padding:11px 13px;
  border-radius:11px;
  border:1px solid #e3d9b9;
  background:#fdf8e8;
  font-size:15px!important;
  line-height:1.4!important;
  font-weight:600;
  color:#6b5411;
}

.af-restock__need-mark{flex:0 0 auto;width:22px;height:22px;margin-top:-1px}
.af-restock__need-mark svg{width:22px;height:22px;display:block}

.af-restock__need-say{display:none}
.af-restock__need-mark--ok{display:none}

.af-restock__need[data-state="none"] .af-restock__need-say[data-when="none"]{display:block}
.af-restock__need[data-state="email"] .af-restock__need-say[data-when="email"]{display:block}
.af-restock__need[data-state="phone"] .af-restock__need-say[data-when="phone"]{display:block}
.af-restock__need[data-state="both"] .af-restock__need-say[data-when="both"]{display:block}

.af-restock__need:not([data-state="none"]){
  border-color:#bcd9be;
  background:#eef7ee;
  color:#1b5e20;
}

.af-restock__need:not([data-state="none"]) .af-restock__need-mark--wait{display:none}
.af-restock__need:not([data-state="none"]) .af-restock__need-mark--ok{display:block}

.af-restock__go{
  display:block;
  width:100%;
  text-transform:none!important;   /* the theme shouts; this site does not */
  letter-spacing:0!important;
  min-height:56px!important;
  padding:0 22px!important;
  border:0!important;
  border-radius:12px!important;
  background:#2e7d32!important;
  color:#fff!important;
  font-size:18px!important;
  font-weight:700!important;
  cursor:pointer;
}

.af-restock__go:hover{background:#1b5e20!important}
.af-restock__go:focus-visible{outline:3px solid rgba(27,94,32,.4);outline-offset:2px}
.af-restock__go[disabled]{opacity:.6;cursor:default}

@media (min-width:760px){
  .af-restock__go{width:auto;min-width:220px}
}

.af-restock__note{
  margin:12px 0 0!important;
  font-size:15px!important;
  line-height:1.4!important;
  color:#5b5b62;
}

.af-restock--bad .af-restock__note{color:#8a2c2c;font-weight:700}

/* Once they are on the list the form has nothing left to ask for. */
.af-restock--done .af-restock__field,
.af-restock--done .af-restock__pair,
.af-restock--done .af-restock__need,
.af-restock--done .af-restock__go{display:none!important}

.af-restock--done .af-restock__note{
  margin-top:0!important;
  color:#1b5e20;
  font-size:17px!important;
  font-weight:700;
}

/* The field no person sees. */
.af-restock__trap{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
}