/**
 * components/forms.css
 * Dedicated stylesheet for all form controls, inputs, custom checkmarks,
 * color swatches, quantity steppers, and validation overrides.
 */

/* ==========================================================================
   1. Standard Form Controls
   ========================================================================== */
.form-control {
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
  background-color: #fff;
}

.form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.2rem rgba(197, 160, 89, 0.25);
}

/* ==========================================================================
   2. Checkboxes & Radio Swatches
   ========================================================================== */
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Color Swatches (Product Detail) */
.color-swatch-maroon { background-color: #800020; border-color: #eee; }
.color-swatch-emerald { background-color: #004d40; border-color: #eee; }
.color-swatch-peach { background-color: #ffdab9; border-color: #eee; }

.color-swatch:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid transparent;
  border-radius: 50%;
  transition: border-color 0.2s;
}

.btn-check:checked + .color-swatch:before {
  border-color: var(--bs-primary);
}

/* Payment Method Option Container (Radio Select Card) */
.payment-option {
  transition: border-color 0.2s ease;
  cursor: pointer;
}

.payment-option:hover {
  border-color: var(--bs-primary) !important;
}

/* ==========================================================================
   3. Custom Quantity Steppers & Selects
   ========================================================================== */
/* Seamless Cart Quantity Stepper (Equal 1/3 width, 0 internal borders) */
.cart-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  width: 102px;
  height: 34px;
  border: 1px solid var(--color-border, #dee2e6);
}

.cart-qty-stepper .btn-stepper {
  flex: 1 1 0;
  width: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-primary);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cart-qty-stepper .btn-stepper:hover {
  background-color: var(--color-surface, #f8f8f8);
  color: var(--color-accent);
}

.cart-qty-stepper .qty-input {
  flex: 1 1 0;
  width: 34px;
  padding: 0;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-primary);
  box-shadow: none;
}

/* Product Detail Quantity Select (Legacy/Fallback) */
.product-qty-select {
  width: 90px;
  height: 100%;
  flex-shrink: 0;
}

/* ==========================================================================
   4. Validation & Security Inputs
   ========================================================================== */
/* Invalid fields: clear red border and clean padding without background exclamation icon */
.was-validated .form-control:invalid,
.form-control.is-invalid {
  background-image: none !important;
  padding-right: 0.75rem !important;
  border-color: var(--color-danger) !important;
}

.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-color: var(--color-danger) !important;
  background-image: var(--bs-form-select-bg-img) !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.25rem !important;
}

/* Enclose entire input group in red border when password input is invalid */
.was-validated .input-group > .form-control:invalid ~ .toggle-password-btn,
.input-group > .form-control.is-invalid ~ .toggle-password-btn {
  border-color: var(--color-danger) !important;
}

.was-validated .input-group > .form-control:invalid:focus ~ .toggle-password-btn,
.input-group > .form-control.is-invalid:focus ~ .toggle-password-btn {
  border-color: var(--color-danger) !important;
}

/* Suppress all green success styling (borders, checkmark icons) on valid fields */
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--color-border) !important;
  background-image: none !important;
  box-shadow: none !important;
  padding-right: 0.75rem !important;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(197, 160, 89, 0.25) !important;
}

/* Preserve standard select dropdown arrow without green checkmark or green border */
.was-validated .form-select:valid,
.form-select.is-valid {
  border-color: var(--color-border) !important;
  background-image: var(--bs-form-select-bg-img) !important;
  box-shadow: none !important;
  padding-right: 2.25rem !important;
}

.was-validated .form-select:valid:focus,
.form-select.is-valid:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(197, 160, 89, 0.25) !important;
}

/* Suppress green success styling on valid checkboxes, radio buttons, and their labels */
.was-validated .form-check-input:valid,
.form-check-input.is-valid {
  border-color: var(--color-border) !important;
}

.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.was-validated .form-check-input:valid:focus,
.form-check-input.is-valid:focus {
  box-shadow: 0 0 0 0.2rem rgba(197, 160, 89, 0.25) !important;
}

.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
  color: inherit !important;
}

/* Suppress green valid feedback messages if any exist */
.valid-feedback,
.valid-tooltip {
  display: none !important;
}

.invalid-feedback {
  font-size: 0.75rem;
  color: var(--color-danger);
}

/* 6-Digit OTP Spacing */
.letter-spacing-otp {
  letter-spacing: 0.5rem;
}