/**
 * CUBX Theme — theme-forms.css
 *
 * Form inputs styling : harmonization of all native PrestaShop form fields
 * (.form-control) + form-related elements (labels, checkboxes, radios,
 * validation states) on the shared --cubx-input-* design tokens defined
 * in theme-core.css :root.
 *
 * Loaded right after theme-core.css (priority 217) so the global tokens are
 * available, but before module-specific CSS (h2jphone-front, h2j-datepicker)
 * which consume the same tokens.
 *
 * Coverage :
 *   1. Tokens consumption summary (read-only — source in theme-core.css)
 *   2. Inputs : text/email/tel/url/search/password/number/date/select/textarea
 *   3. Labels : .form-control-label / label
 *   4. Form layout : .form-group, .form-fields, .row
 *   5. Validation states : .has-error / .has-success / .is-invalid / .is-valid
 *   6. Checkboxes & radios : .custom-checkbox / .custom-radio (PS Classic)
 *   7. Hint / error messages : .form-control-comment, .help-block
 *
 * This file is the single source of truth for form input visuals across CUBX.
 * Module-level CSS (h2jphone-front.css, h2j-datepicker.css, h2jforms-front.css)
 * consume the same tokens so all input components have identical dimensions
 * and styling out of the box.
 *
 * @author    H2J Ecosystem <info@2klove.fr>
 * @copyright 2024-2026 H2J sas RCS 978391720
 *
 * @since     cubx-theme v2.5.211 (extracted from theme-core.css section 13)
 */

/* ══════════════════════════════════════════════════════════
   1. TOKENS REFERENCE — read-only (defined in theme-core.css :root)
   ══════════════════════════════════════════════════════════
   --cubx-input-height          44px       (min-height of every form input)
   --cubx-input-padding-y       10px       (vertical padding inside input)
   --cubx-input-padding-x       14px       (horizontal padding inside input)
   --cubx-input-border-width    1px        (border thickness)
   --cubx-input-border-color    #e5e7eb    (border color, falls back to --h2j-border)
   --cubx-input-border          shorthand of above
   --cubx-input-font-size       15px       (text size)
   --cubx-input-bg              #fff       (input background)
   --cubx-input-color           #1a1f2c    (text color)
   --cubx-input-placeholder     #6b7280    (placeholder color)
   --cubx-input-focus-ring      rgba(244, 63, 94, 0.12)  (focus shadow)

   Override path : Configuration BO > h2jforms > Appearance (planned Step 3).
   That module will emit a runtime <style> block in hookDisplayHeader to
   override these tokens on a per-shop basis.
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   2. INPUTS — .form-control + every type variant
   ══════════════════════════════════════════════════════════ */
/* Every Bootstrap-style input within CUBX consumes the design tokens.
   This guarantees that native PS fields (firstname, lastname, email, password
   on registration / identity / address / contact / password recovery pages)
   have exactly the same height + padding + border + font as the H2J-specific
   components (h2jphone-front, h2j-datepicker, h2jforms forms builder). */
.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="search"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="date"].form-control,
select.form-control,
textarea.form-control {
  min-height: var(--cubx-input-height, 44px);
  padding: var(--cubx-input-padding-y, 10px) var(--cubx-input-padding-x, 14px);
  border: var(--cubx-input-border, 1px solid var(--h2j-border, #e5e7eb));
  border-radius: var(--cubx-radius, 6px);
  background-color: var(--cubx-input-bg, var(--h2j-bg-card, #fff));
  color: var(--cubx-input-color, var(--h2j-text, #1a1f2c));
  font-size: var(--cubx-input-font-size, 15px);
  font-family: var(--cubx-font-primary, inherit);
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--cubx-input-placeholder, var(--h2j-text-light, #6b7280));
  opacity: 1;
}

.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--cubx-accent, var(--h2j-accent, #f43f5e));
  box-shadow: 0 0 0 3px var(--cubx-input-focus-ring, rgba(244, 63, 94, 0.12));
  outline: none;
}

.form-control:disabled,
input.form-control:disabled,
select.form-control:disabled,
textarea.form-control:disabled {
  background-color: var(--h2j-bg-light, #f8f7ff);
  color: var(--h2j-text-light, #6b7280);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Textarea : preserve the token min-height but allow vertical growth. */
textarea.form-control {
  height: auto;
  min-height: calc(var(--cubx-input-height, 44px) * 2);
  resize: vertical;
}

/* Select : reset native chevron + use a tokenized SVG matching the input border
   color (so the chevron stays subtle and inherits the design token). */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  padding-right: calc(var(--cubx-input-padding-x, 14px) + 24px);
}

/* ══════════════════════════════════════════════════════════
   3. LABELS
   ══════════════════════════════════════════════════════════ */
.form-control-label,
.form-fields label:not(.h2j-no-cubx-label) {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2j-text, #1a1f2c);
  font-family: var(--cubx-font-primary, inherit);
}

/* Required indicator : red asterisk after the label text. PS Classic
   sometimes inlines a <sup>*</sup> in the label — we style that consistently. */
.form-control-label .required,
label .required,
.form-fields label sup {
  color: var(--h2j-error, #ef4444);
  margin-left: 2px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════
   4. FORM LAYOUT (Bootstrap-compatible)
   ══════════════════════════════════════════════════════════ */
.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

/* PS Classic uses .form-fields wrapper around .form-group elements on
   registration / identity / address forms. We give it a vertical rhythm
   that matches the input height (16px between groups, 24px before submit). */
.form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-fields + .form-footer,
.form-fields + .form-control-submit {
  margin-top: 24px;
}

/* ══════════════════════════════════════════════════════════
   5. VALIDATION STATES
   ══════════════════════════════════════════════════════════ */
/* PS Classic + Bootstrap 4 use multiple class conventions for validation —
   we cover them all so the form looks consistent regardless of source. */
.form-control.is-invalid,
.has-error .form-control,
.has-danger .form-control {
  border-color: var(--h2j-error, #ef4444);
}

.form-control.is-invalid:focus,
.has-error .form-control:focus,
.has-danger .form-control:focus {
  border-color: var(--h2j-error, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-control.is-valid,
.has-success .form-control {
  border-color: var(--h2j-success, #10b981);
}

.form-control.is-valid:focus,
.has-success .form-control:focus {
  border-color: var(--h2j-success, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Error message below the field (Bootstrap .invalid-feedback / PS .help-block).
   Stays compact, doesn't push the layout much when it appears. */
.invalid-feedback,
.form-control + .help-block,
.form-control + .help-block-error,
.has-error .help-block {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--h2j-error, #ef4444);
  line-height: 1.4;
}

.has-success .help-block,
.valid-feedback {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--h2j-success, #10b981);
  line-height: 1.4;
}

/* Generic helper text below a field (e.g. "Use 8+ characters with a mix of
   letters, numbers & symbols" under a password). */
.form-control-comment,
.form-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--h2j-text-light, #6b7280);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   6. CHECKBOXES & RADIOS (PS Classic + Bootstrap 4 conventions)
   ══════════════════════════════════════════════════════════ */
/* PS Classic forms use .custom-checkbox / .custom-radio wrappers that hide the
   native input behind a custom-rendered <span>. We keep that pattern but
   re-skin it on the design tokens (accent color, radius). */
.custom-checkbox,
.custom-radio,
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--h2j-text, #1a1f2c);
  line-height: 1.5;
  cursor: pointer;
  padding: 4px 0;
}

.custom-checkbox input[type="checkbox"],
.custom-radio input[type="radio"],
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  margin-top: 2px;
  accent-color: var(--cubx-accent, var(--h2j-accent, #f43f5e));
  cursor: pointer;
}

.custom-checkbox label,
.custom-radio label,
.form-check label,
.form-check-label {
  margin: 0;
  font-weight: 400;
  cursor: pointer;
  flex: 1;
  font-size: 14px;
}

/* CGV / GDPR consent links inside checkbox labels — keep the accent color and
   underline on hover, no bold (the checkbox label is already a paragraph). */
.custom-checkbox label a,
.custom-radio label a,
.form-check-label a {
  color: var(--cubx-accent, var(--h2j-accent, #f43f5e));
  text-decoration: none;
}

.custom-checkbox label a:hover,
.custom-radio label a:hover,
.form-check-label a:hover {
  color: var(--cubx-accent-2, var(--h2j-primary-dark, #6d28d9));
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════
   7. FORM ACTIONS (submit row, cancel link)
   ══════════════════════════════════════════════════════════ */
/* .form-footer wraps the submit button + secondary actions on most PS forms.
   We align the buttons right + add a small gap between them. */
.form-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.form-footer .btn {
  min-height: var(--cubx-input-height, 44px);
  padding: var(--cubx-input-padding-y, 10px) calc(var(--cubx-input-padding-x, 14px) * 1.5);
  font-size: var(--cubx-input-font-size, 15px);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   8. MOBILE
   ══════════════════════════════════════════════════════════ */
/* On small screens, bump up the input height a bit so touch targets meet
   the recommended 44px minimum. The default token is already 44px, but on
   mobile we go to 48px for extra comfort. Use a media query rather than
   updating the token at root, so the value only applies to FO mobile and
   doesn't impact the BO admin tables (which inherit the same tokens). */
@media (max-width: 768px) {
  .form-control,
  input[type="text"].form-control,
  input[type="email"].form-control,
  input[type="tel"].form-control,
  input[type="url"].form-control,
  input[type="search"].form-control,
  input[type="password"].form-control,
  input[type="number"].form-control,
  input[type="date"].form-control,
  select.form-control,
  textarea.form-control {
    min-height: 48px;
    font-size: 16px;        /* prevents iOS Safari zoom-on-focus */
  }

  .form-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .form-footer .btn {
    width: 100%;
  }
}