/* ==========================================================================
   EV Clinic — the RepairBuddy skin.

   The plugin renders its own booking wizard with its own stylesheet. This
   file sits on top of it and supplies the theme's typography, glass, buttons
   and fields.

   It is a SKIN, not a fork. Nothing here copies the plugin's templates into
   the theme — doing that would make this theme responsible for the security
   of forms that handle customer addresses and job records, forever. The
   trade is that a plugin update can rename a class and break a rule in here.
   That is a visible, cheap failure; running an eighteen-month-old copy of
   someone else's intake form is not.

   Everything is scoped under .evc-rb so it can only reach markup the theme
   deliberately wrapped, and selectors are kept shallow so a renamed inner
   class breaks one rule rather than the whole file.
   ========================================================================== */

.evc-rb{
  --rb-radius:var(--radius);
  font-family:var(--body);
  color:var(--ink);
}

/* ------------------------------------------------------------ the shell -- */

.evc-rb-shell{
  padding:clamp(20px,3vw,38px);
}
.evc-rb-shell > :first-child{margin-top:0}

/* ------------------------------------------------------------ headings -- */

.evc-rb h2,.evc-rb h3,.evc-rb h4,
.evc-rb legend{
  font-family:var(--display);
  letter-spacing:-.01em;
  color:var(--ink);
}
.evc-rb h2{font-size:clamp(21px,2.2vw,28px);font-weight:700}
.evc-rb h3{font-size:19px;font-weight:600}

.evc-rb label{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:6px;
}

/* -------------------------------------------------------------- fields --

   Opaque, not glass. A translucent input over a moving mosaic is a
   legibility problem rather than an effect, and this is a form where someone
   types a registration number and a postal address. */

.evc-rb input[type=text],
.evc-rb input[type=email],
.evc-rb input[type=tel],
.evc-rb input[type=url],
.evc-rb input[type=number],
.evc-rb input[type=search],
.evc-rb input[type=date],
.evc-rb select,
.evc-rb textarea{
  width:100%;
  padding:11px 14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--rb-radius);
  font-size:15px;
  color:var(--ink);
  box-shadow:none;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.evc-rb input:focus,
.evc-rb select:focus,
.evc-rb textarea:focus{
  outline:2px solid var(--cold);
  outline-offset:1px;
  border-color:transparent;
}
.evc-rb input::placeholder,
.evc-rb textarea::placeholder{color:var(--faint)}

.evc-rb textarea{min-height:120px;resize:vertical}

/* ------------------------------------------------------------- buttons -- */

.evc-rb button,
.evc-rb input[type=submit],
.evc-rb .button,
.evc-rb .btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.06em;
  padding:12px 22px;
  border-radius:var(--rb-radius);
  border:1px solid transparent;
  background:var(--amber);
  color:#0A0704;
  cursor:pointer;
  text-decoration:none;
  transition:background .22s var(--ease-out),border-color .22s var(--ease-out);
}
.evc-rb button:hover,
.evc-rb input[type=submit]:hover,
.evc-rb .button:hover{background:#F0A312}

/* A secondary action inside the wizard — "back", "change device". */
.evc-rb .button-secondary,
.evc-rb button[type=button]{
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}
.evc-rb .button-secondary:hover,
.evc-rb button[type=button]:hover{
  background:transparent;
  border-color:var(--cold);
  color:var(--cold);
}

/* ------------------------------------------------------- device tiles --

   The wizard's device and service pickers are grids of picker tiles. The plugin
   gives them a flat box; this gives them the theme's card. */

.evc-rb .wcrb-item,
.evc-rb .wc-device,
.evc-rb .wc-service{
  background:linear-gradient(180deg,
    rgba(var(--white-rgb),.86),
    rgba(var(--white-rgb),.66));
  border:1px solid var(--glass-edge);
  border-radius:var(--rb-radius);
  box-shadow:inset 0 1px 0 var(--glass-sheen);
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.evc-rb .wcrb-item:hover,
.evc-rb .wc-device:hover,
.evc-rb .wc-service:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 var(--glass-sheen), 0 10px 26px rgba(var(--ink-rgb),.08);
}

/* ------------------------------------------------------------- tables --

   Job status returns a table of what happened to the repair and when. Wide
   by nature, so it scrolls inside its own container rather than pushing the
   page sideways. */

.evc-rb table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
  display:block;
  overflow-x:auto;
}
.evc-rb th,.evc-rb td{
  text-align:left;
  padding:10px 16px 10px 0;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
.evc-rb th{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
  border-bottom-color:var(--line);
  white-space:nowrap;
}

/* --------------------------------------------------------------- steps --

   The wizard's progress indicator. Mono numerals and a hairline, matching
   the readouts elsewhere in the theme. */

.evc-rb .wcrb-steps,
.evc-rb .wc-steps{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  padding:0 0 16px;
  margin:0 0 20px;
  border-bottom:1px solid var(--line);
  list-style:none;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
}
.evc-rb .wcrb-steps .active,
.evc-rb .wc-steps .active{color:var(--ink)}

/* --------------------------------------------------------- notices ----- */

.evc-rb .woocommerce-message,
.evc-rb .wcrb-notice{
  padding:14px 18px;
  border-left:2px solid var(--mint);
  background:rgba(var(--mint-rgb),.07);
  border-radius:0 var(--rb-radius) var(--rb-radius) 0;
  font-size:15px;
}
.evc-rb .woocommerce-error,
.evc-rb .wcrb-error{
  border-left-color:var(--amber);
  background:rgba(var(--amber-rgb),.09);
}

@media (prefers-reduced-motion:reduce){
  .evc-rb *{transition:none!important}
}