/* Veton Charger Configurator — /details/ page styling.
   Step indicator + help line styling come from inquiry.css (shared wizard
   chrome). This file styles the form layout + a stacked-label text field
   component (.vcc-mdf), portable into the broader WP theme — drop the
   .vcc-mdf rules into any stylesheet. */

/* ====================== Layout ====================== */
.vcc-details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .vcc-details-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

.vcc-details-card {
  padding: 30px;
  border: 1px solid #dbdadb;
  background: #fff;
}

.vcc-details-page .vcc-inquiry-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 40px;
}

/* Two-column field row (e.g. first/last name). Stacked on narrow viewports. */
.vcc-field-row { display: contents; }
.vcc-field-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 30px;
}
@media (min-width: 576px) {
  .vcc-field-row-2 { grid-template-columns: 1fr 1fr; }
}

/* ====================== .vcc-mdf — Material-style floating label ============
   Portable component:
     <div class="vcc-mdf">
       <input type="text" id="x" name="x" placeholder=" ">
       <label for="x">My field<span class="vcc-required">*</span></label>
     </div>

   The empty placeholder=" " is the trick that lets :placeholder-shown
   detect whether the field has content — don't remove it.

   States:
     - idle (empty, blurred):     label centered on input row, line = $border
     - focus (empty or filled):   label floated up, line = $primary
     - filled (has value, blur):  label stays floated, line back to $border

   The label animates between two positions via top + font-size transitions.
   No JS — pure CSS via :focus and :placeholder-shown. */
.vcc-mdf {
  position: relative;
  padding-top: 15px;
  margin-bottom: 16px;
}
.vcc-mdf input,
.vcc-mdf select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 45px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #dbdadb;
  box-shadow: 0 1px 0 0 transparent;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 400;
  /* Tight line-height so the text-selection highlight sits around the
     glyphs, not the entire 45px input box. The browser auto-centers
     <input> text vertically regardless of line-height. */
  line-height: 1.4;
  color: #2A2A2A;
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-mdf input::placeholder { color: transparent; opacity: 0; }
.vcc-mdf label {
  position: absolute;
  left: 0;
  top: 15px; /* aligned with the input's text baseline */
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 45px;
  color: #8C8C8C;
  pointer-events: none;
  transform-origin: left top;
  transition: top 0.2s ease-out, font-size 0.2s ease-out, line-height 0.2s ease-out, color 0.2s ease-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-required {
  color: #E74C3C;
  margin-left: 1px;
  font-weight: 400;
}

/* Floated-label state: focus, or input has a value, or it's a select
   (selects always have a value so the label is permanently floated). */
.vcc-mdf input:focus + label,
.vcc-mdf input:not(:placeholder-shown) + label,
.vcc-mdf--select label {
  top: 0;
  font-size: 0.85rem;
  line-height: 18px;
}
.vcc-mdf input:focus + label,
.vcc-mdf--select select:focus + label {
  color: #C49E60;
}

.vcc-mdf input:focus,
.vcc-mdf select:focus {
  border-bottom-color: #C49E60;
  box-shadow: 0 1px 0 0 #C49E60;
}

/* Submit-time validation: details.js adds .is-invalid to every empty
 * required field on submit attempt. Mirrors the red underline used on
 * /installation/ for the site select — same width, same color, so the
 * cross-page treatment reads as one system. */
.vcc-mdf input.is-invalid,
.vcc-mdf select.is-invalid {
  border-bottom: 2px solid #D26161;
  box-shadow: none;
}
.vcc-mdf input.is-invalid:focus,
.vcc-mdf select.is-invalid:focus {
  box-shadow: 0 1px 0 0 #D26161;
}

/* Native select chevron — reset and use the theme's icon-arrow-down. */
.vcc-mdf select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  cursor: pointer;
}

/* ============== Custom <select> dropdown (vcc-select.js) ==================
   When enhanced, the native select is hidden and a div "display" facade
   stands in its place. Click opens a popup styled identically to the
   Google Places suggestions list — single source of truth for any
   dropdown inside the configurator. */
.vcc-select-enhanced > select {
  display: none !important;
}
.vcc-mdf.vcc-select-enhanced .vcc-select-display {
  display: block;
  width: 100%;
  height: 45px;
  padding: 0 28px 0 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 45px;
  color: #2A2A2A;
  cursor: pointer;
  border-bottom: 1px solid #dbdadb;
  box-shadow: 0 1px 0 0 transparent;
  outline: none;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-mdf.vcc-select-enhanced.is-open .vcc-select-display,
.vcc-mdf.vcc-select-enhanced .vcc-select-display:focus {
  border-bottom-color: #C49E60;
  box-shadow: 0 1px 0 0 #C49E60;
}

.vcc-select-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  font-size: 1.1rem;
}
.vcc-select-popup li {
  padding: 12px 20px;
  color: #2A2A2A;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 500;
  transition: background 0.18s ease-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-select-popup li:hover {
  background: #f1f1f1;
}
.vcc-select-popup li.is-selected {
  font-weight: 700;
}

/* Search row shown when the dropdown has many options. Magnifying-glass
   icon is absolutely positioned so the underlying input can span the full
   width — the underline runs uninterrupted under both icon and text. */
.vcc-select-popup .vcc-select-search {
  display: block;
  position: relative;
  padding: 12px 20px;
  cursor: default;
  background: transparent;
}
.vcc-select-popup .vcc-select-search:hover { background: transparent; }
.vcc-select-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #2A2A2A;
  pointer-events: none;
}
/* Higher-specificity selector so `.vcc-mdf input { padding: 0 }` (which is
   0,1,1) doesn't win over the search-input's left padding. */
.vcc-mdf .vcc-select-search-input {
  display: block;
  width: 100%;
  height: 45px;
  padding: 0 0 0 25px;
  border: 0;
  border-bottom: 1px solid #dbdadb;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  color: #2A2A2A;
  outline: none;
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vcc-mdf .vcc-select-search-input:focus { border-bottom-color: #C49E60; }
.vcc-mdf-chevron {
  position: absolute;
  right: 0;
  top: 15px;       /* start of the input area (matches container padding-top) */
  height: 45px;    /* matches the input's height */
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: #8C8C8C;
  pointer-events: none;
}

/* Clearable variant — adds a × button on the right that wipes the input
   (and, in the case of address, the parsed components). The button hides
   when the input is empty (no value to clear). */
.vcc-mdf--clearable input { padding-right: 30px; }
.vcc-mdf-clear {
  position: absolute;
  right: 0;
  top: 15px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #8C8C8C;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  transition: color 0.18s ease-out;
}
.vcc-mdf-clear:hover { color: #2A2A2A; }
.vcc-mdf-clear:focus { outline: none; }
.vcc-mdf--clearable input:placeholder-shown ~ .vcc-mdf-clear {
  visibility: hidden;
}

/* Structured-address container shown after a Google Places selection. */
.vcc-address-parts {
  margin-top: 4px;
}

/* Autofill: prevent browser yellow/blue/white forced bg, keep our
   underline. Applies to both inputs and selects (Chrome tints
   <select name="country"> blue when it thinks autofill applies). */
.vcc-mdf input:-webkit-autofill,
.vcc-mdf input:-webkit-autofill:hover,
.vcc-mdf input:-webkit-autofill:focus,
.vcc-mdf select:-webkit-autofill,
.vcc-mdf select:-webkit-autofill:hover,
.vcc-mdf select:-webkit-autofill:focus {
  -webkit-text-fill-color: #2A2A2A;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset, 0 1px 0 0 transparent;
  transition: background-color 5000s ease-in-out 0s;
}
.vcc-mdf input:-webkit-autofill:focus,
.vcc-mdf select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset, 0 1px 0 0 #C49E60;
}
/* Autofilled inputs need the label floated too (no :placeholder-shown
   trick after autofill). */
.vcc-mdf input:-webkit-autofill + label {
  top: 0;
  font-size: 0.85rem;
  line-height: 18px;
}

/* ====================== Toggle (checkbox) — mirrors configure ============== */
.vcc-toggle-row {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  margin: 0 0 20px;
  line-height: 20px;
}
/* Toggle that follows a stack of form fields (left card "Add company
   details") needs extra top breathing room — the install toggle on the
   right card sits at the top of an otherwise empty card and keeps the
   default flush-top margin. */
.vcc-toggle-row--after-fields { margin-top: 30px; }
.vcc-toggle-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vcc-toggle-row .vcc-check-box {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  border: 2px solid #dbdadb;
  border-radius: 3px;
  background: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease-out;
}
.vcc-toggle-row .vcc-check-box::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #C49E60;
  transform: scale(0);
  opacity: 0.08;
  pointer-events: none;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.vcc-toggle-row .vcc-check-box::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 0.18s cubic-bezier(0.35, 0.9, 0.4, 0.9);
}
.vcc-toggle-row:hover .vcc-check-box::before,
.vcc-toggle-row input:focus-visible + .vcc-check-box::before,
.vcc-toggle-row:active .vcc-check-box::before { transform: scale(3.2); }
.vcc-toggle-row input:focus-visible + .vcc-check-box { border-color: #C49E60; }
.vcc-toggle-row input:checked + .vcc-check-box {
  background: #C49E60;
  border-color: #C49E60;
}
.vcc-toggle-row input:checked + .vcc-check-box::before { opacity: 0; }
.vcc-toggle-row input:checked + .vcc-check-box::after { transform: rotate(45deg) scale(1); }
.vcc-toggle-row .vcc-check-text {
  font-size: 1.1rem;
  font-weight: 400;
  color: #2A2A2A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vcc-company-fields {
  margin-top: 16px;
}
.vcc-install-fields {
  margin-top: 30px;
}

/* ====================== Google Places autocomplete dropdown ===============
   .pac-container is injected into <body> by Google's JS with its own
   inline styles + a stylesheet that loads after ours. We use !important
   on the layout-defining properties so our look wins consistently.

   Each suggestion is a card-style row with a soft gray bg, the theme's
   icon-location glyph on the left, matched substring bolded in heading
   color, and context muted. The Google attribution footer is hidden —
   technically a TOS bend; we comply by ensuring no map is rendered for
   this autocomplete instance. If we ever surface a Google Map elsewhere
   on the page we can re-show the attribution. */
.pac-container {
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
  font-family: inherit !important;
  font-size: 1.1rem !important;
  margin-top: 4px !important;
  padding: 0 !important;
}
.pac-container::after { display: none !important; } /* hides "powered by Google" */
.pac-container .pac-item {
  position: relative;
  display: flex !important;
  align-items: center;
  padding: 12px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 1.1rem;
  color: #8C8C8C;
  cursor: pointer;
  transition: background 0.18s ease-out;
}
.pac-container .pac-item:hover,
.pac-container .pac-item-selected {
  background: #f1f1f1 !important;
}
/* Replace Google's default pin sprite with the theme's icon-location. */
.pac-container .pac-icon { display: none !important; }
.pac-container .pac-item::before {
  content: "\e912";
  font-family: "veton";
  font-style: normal;
  font-weight: normal;
  font-size: 1.1rem;
  color: #C49E60;
  margin-right: 5px;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Default text in the query span (unmatched portion) — light gray, normal
   weight. The .pac-matched span overrides for the matched substring with
   bold heading-color so it pops. */
.pac-container .pac-item-query {
  font-size: 1.1rem;
  font-weight: 400;
  color: #8C8C8C;
}
.pac-container .pac-matched {
  font-size: 1.1rem;
  color: #2A2A2A;
  font-weight: 700;
}
.pac-container .pac-item-context {
  font-size: 1.1rem;
  color: #8C8C8C;
  font-weight: 400;
}