/**
 * @file
 * WMD Solutions Base Theme - Form styles.
 * Modern, clean form elements using CSS variables.
 * Override variables in your subtheme CSS.
 */

:root {
  --form-input-bg: #ffffff;
  --form-input-border: #dddddd;
  --form-input-border-focus: var(--color-accent);
  --form-input-radius: 4px;
  --form-input-padding: 0.6rem 0.9rem;
  --form-input-font-size: 0.9rem;
  --form-input-color: var(--color-text);
  --form-label-color: var(--color-text);
  --form-label-font-size: 0.8rem;
  --form-label-font-weight: 600;
  --form-label-letter-spacing: 0.04em;
  --form-description-color: var(--color-secondary);
  --form-description-font-size: 0.8rem;
}

/* ======================================================
   LABELS
   ====================================================== */

label,
.form-item__label {
  display: block;
  color: var(--form-label-color);
  font-size: var(--form-label-font-size);
  font-weight: var(--form-label-font-weight);
  letter-spacing: var(--form-label-letter-spacing);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  font-family: var(--font-body);
}

/* ======================================================
   INPUTS, TEXTAREAS, SELECTS
   ====================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select,
.form-control,
.form-select {
  display: block;
  width: 100%;
  background-color: var(--form-input-bg);
  border: 1px solid var(--form-input-border);
  border-radius: var(--form-input-radius);
  padding: var(--form-input-padding);
  font-size: var(--form-input-font-size);
  font-family: var(--font-body);
  color: var(--form-input-color);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--form-input-border-focus);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

/* ======================================================
   SELECT ARROW
   ====================================================== */

select,
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}

/* ======================================================
   TEXTAREA
   ====================================================== */

textarea {
  min-height: 80px;
  resize: vertical;
}

/* ======================================================
   FLATPICKR OVERRIDES - uses our CSS variables
   ====================================================== */

.flatpickr-calendar {
  font-family: var(--font-body);
  font-size: 0.82rem;
  border-radius: var(--form-input-radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border: 1px solid var(--form-input-border);
}

.flatpickr-day {
  border-radius: var(--form-input-radius);
}

.flatpickr-months {
  padding: 0.25rem 0;
}

.flatpickr-current-month {
  font-size: 1rem;
  font-weight: 600;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #ffffff !important;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: rgba(192, 57, 43, 0.1);
  border-color: transparent;
}

.flatpickr-day.today {
  border-color: var(--color-accent) !important;
  color: var(--color-accent);
  font-weight: 700;
}

.flatpickr-day.today:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #ffffff !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--color-accent);
}

/* ======================================================
   FORM ITEM SPACING
   ====================================================== */

.form-item,
.js-form-item {
  margin-bottom: 1.25rem;
}

/* ======================================================
   FIELD DESCRIPTIONS
   ====================================================== */

.form-item__description,
.description {
  color: var(--form-description-color);
  font-size: var(--form-description-font-size);
  font-style: italic;
  margin-top: 0.3rem;
  line-height: 1.4;
}

/* ======================================================
   CHECKBOXES & RADIOS
   ====================================================== */

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-accent);
  width: 1rem;
  height: 1rem;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.form-item--type-checkbox label,
.form-item--type-radio label {
  display: inline;
  text-transform: none;
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0;
}

/* ======================================================
   SUBMIT BUTTON
   ====================================================== */

input[type="submit"],
button[type="submit"],
.form-submit {
  --bs-btn-bg: var(--btn-primary-bg);
  --bs-btn-border-color: var(--btn-primary-border);
  --bs-btn-hover-bg: var(--btn-primary-hover-bg);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: #ffffff;
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-family: var(--font-body);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: uppercase;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: inline-block;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.form-submit:hover {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-bg);
  color: #ffffff;
}

/* ======================================================
   FORM REQUIRED MARKER
   ====================================================== */

.form-required::after,
abbr[title="required"] {
  content: " *";
  color: var(--color-accent);
}

/* ======================================================
   COMMERCE FORM SPECIFICS
   ====================================================== */

/* Prevent wide text fields from breaking layout */
.product-sidebar-inner input[type="text"],
.product-sidebar-inner textarea,
.product-sidebar-inner select {
  max-width: 100%;
}

/* Quantity field */
.product-sidebar-inner .quantity-widget input[type="number"] {
  width: 80px;
  text-align: center;
}

/* ======================================================
   ERROR STATES
   ====================================================== */

.form-item--error input,
.form-item--error textarea,
.form-item--error select,
input.error,
textarea.error,
select.error {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.form-item--error .form-item__error-message,
.form-error {
  color: #c0392b;
  font-size: var(--form-description-font-size);
  margin-top: 0.3rem;
}