/* AFSON Veilleuses Commande — formulaire de commande directe, mobile d'abord. */

.afson-vl-wrap {
  --vl-ink: #11161c;
  --vl-muted: #5b6672;
  --vl-line: #dfe4ea;
  --vl-accent: #0f766e;
  --vl-accent-dark: #0b5a54;
  --vl-bg: #fff;
  --vl-soft: #f5f7f9;
  --vl-error: #c0392b;
  --vl-ok: #0f766e;
  max-width: 560px;
  margin: 0 auto;
}

.afson-vl-form {
  background: var(--vl-bg);
  border: 1px solid var(--vl-line);
  border-radius: 16px;
  padding: 20px 16px 24px;
  color: var(--vl-ink);
  font-size: 16px;
  line-height: 1.45;
}

.afson-vl-title {
  margin: 0 0 14px;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
}

.afson-vl-product {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  background: var(--vl-soft);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.afson-vl-product-name { font-weight: 600; }
.afson-vl-product-price { color: var(--vl-muted); font-size: 15px; }

.afson-vl-field { margin-bottom: 14px; }
.afson-vl-field[hidden] { display: none; }

.afson-vl-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}
.afson-vl-field > label span { color: var(--vl-error); }

/* 16px minimum : en dessous, iOS zoome tout seul au focus. */
.afson-vl-form input[type="text"],
.afson-vl-form input[type="tel"],
.afson-vl-form input[type="number"],
.afson-vl-form select,
.afson-vl-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  font-family: inherit;
  color: var(--vl-ink);
  background: var(--vl-bg);
  border: 1px solid var(--vl-line);
  border-radius: 10px;
  padding: 12px 13px;
  min-height: 48px;
  appearance: none;
  -webkit-appearance: none;
}
.afson-vl-form textarea { min-height: 72px; resize: vertical; }

.afson-vl-form select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6672' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
}

.afson-vl-form input:focus,
.afson-vl-form select:focus,
.afson-vl-form textarea:focus {
  outline: none;
  border-color: var(--vl-accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .16);
}

.afson-vl-form .is-invalid { border-color: var(--vl-error); }

.afson-vl-hint {
  display: none;
  margin-top: 5px;
  font-size: 13px;
  color: var(--vl-error);
}
.afson-vl-hint.is-visible { display: block; }

/* Quantité */
.afson-vl-stepper {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--vl-line);
  border-radius: 10px;
  overflow: hidden;
  max-width: 180px;
}
.afson-vl-stepper input[type="number"] {
  border: 0;
  border-radius: 0;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
}
.afson-vl-stepper input::-webkit-outer-spin-button,
.afson-vl-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.afson-vl-step {
  flex: 0 0 52px;
  border: 0;
  background: var(--vl-soft);
  color: var(--vl-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  min-height: 48px;
}
.afson-vl-step:disabled { opacity: .4; cursor: not-allowed; }

.afson-vl-saving {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--vl-ok);
}

.afson-vl-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--vl-line);
  margin-top: 18px;
  padding-top: 14px;
  font-size: 16px;
}
.afson-vl-total strong { font-size: 24px; font-weight: 700; }

.afson-vl-payment {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--vl-muted);
}

.afson-vl-message {
  margin-top: 14px;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
}
.afson-vl-message.is-error { background: #fdecea; color: var(--vl-error); }
.afson-vl-message.is-success { background: #e7f4f2; color: var(--vl-accent-dark); }

.afson-vl-submit {
  display: block;
  width: 100%;
  margin-top: 16px;
  border: 0;
  border-radius: 12px;
  background: var(--vl-accent);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  padding: 16px 18px;
  min-height: 54px;
  cursor: pointer;
}
.afson-vl-submit:hover { background: var(--vl-accent-dark); }
.afson-vl-submit:disabled { opacity: .6; cursor: progress; }

.afson-vl-error {
  background: #fdecea;
  color: var(--vl-error);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
}

.afson-vl-tag {
  display: inline-block;
  background: #eef2f5;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
}

@media (max-width: 480px) {
  .afson-vl-form { border-radius: 14px; padding: 16px 13px 20px; }
  .afson-vl-title { font-size: 19px; }
  .afson-vl-total strong { font-size: 22px; }
  .afson-vl-stepper { max-width: none; }
}

@media (prefers-color-scheme: dark) {
  .afson-vl-wrap:not([data-theme="light"]) {
    --vl-ink: #e9edf2;
    --vl-muted: #a3adb8;
    --vl-line: #333c46;
    --vl-bg: #161b21;
    --vl-soft: #1e242b;
  }
}