/* ============================================================
   celina-forms.css  v2.3.0 — 18.6.26
   Global form styling — ALL Gravity Forms
   White encart on any background · Manrope · Violet accent #B040C8
   ============================================================ */

/* ── Pack Order Form Container ─────────────────────── */

.gform_wrapper {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  padding: 1.75rem 2rem;
  margin: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* Text "* indique les champs nécessaires" */
.gform_wrapper .gform_required_legend {
  color: rgba(28, 0, 56, 0.55) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  font-style: italic;
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
}

.gform_wrapper .gform_required_legend .gfield_required {
  color: #B040C8;
}

.gform_wrapper .gform_head {
  display: none; /* Title handled separately */
}

.gform_wrapper .gform_body {
  margin: 0;
  padding: 0;
}

/* ── Form Fields — layout natif GF (gf_left_half / gf_right_half) ── */

.gform_wrapper .gform_fields {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gform_wrapper .gfield {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.gform_wrapper .ginput_container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* GF 2.5+ utilise CSS Grid — row-gap contrôle l'espace entre les champs */
.gform_wrapper .gform_fields {
  row-gap: 0.75rem !important;
  column-gap: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gform_wrapper .gform_body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Champs côte à côte : GF ajoute gf_left_half / gf_right_half */
.gform_wrapper .gfield.gf_left_half,
.gform_wrapper .gfield.gf_right_half {
  width: 49% !important;
  float: left !important;
  clear: none !important;
}

.gform_wrapper .gfield.gf_right_half {
  margin-left: 2% !important;
}

/* Nettoyage du float après une ligne en demi-colonne */
.gform_wrapper .gfield.gf_right_half + .gfield:not(.gf_left_half) {
  clear: both;
}

@media (max-width: 600px) {
  .gform_wrapper .gfield.gf_left_half,
  .gform_wrapper .gfield.gf_right_half {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
}

/* ── Labels ────────────────────────────────────────── */

.gform_wrapper .gfield_label {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: rgba(28, 0, 56, 0.6) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.3rem !important;
  display: block !important;
}

.gform_wrapper .gfield_label .gfield_required {
  color: #B040C8;
  font-weight: 700;
  margin-left: 0.2rem;
}

/* ── Inputs & Textareas ────────────────────────────── */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="number"] {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: #1C0038 !important;
  border: 1px solid rgba(28, 0, 56, 0.18) !important;
  border-radius: 2px !important;
  padding: 0 0.875rem !important;
  height: 40px !important;
  line-height: 40px !important;
  background: #f9f7f5 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.gform_wrapper textarea {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: #1C0038 !important;
  border: 1px solid rgba(28, 0, 56, 0.18) !important;
  border-radius: 2px !important;
  padding: 0.625rem 0.875rem !important;
  min-height: 90px !important;
  background: #f9f7f5 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.gform_wrapper input[type="text"]::placeholder,
.gform_wrapper input[type="email"]::placeholder,
.gform_wrapper textarea::placeholder {
  color: rgba(28, 0, 56, 0.4);
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="date"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper textarea:focus {
  outline: none !important;
  background: #fff !important;
  border-color: #B040C8 !important;
  box-shadow: 0 0 0 3px rgba(176, 64, 200, 0.15) !important;
}

.gform_wrapper textarea {
  min-height: 120px;
  resize: vertical;
}

/* ── Select ────────────────────────────────────────── */

.gform_wrapper select {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #1C0038;
  border: 2px solid rgba(176, 64, 200, 0.3);
  border-radius: 2px;
  padding: 0.875rem 2.5rem 0.875rem 1rem;
  background: #f9f7f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23B040C8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 1rem center;
  background-size: 1.2rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.gform_wrapper select:hover {
  background-color: #fff;
}

.gform_wrapper select:focus {
  outline: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23B040C8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  border-color: #B040C8;
  box-shadow: 0 0 0 3px rgba(176, 64, 200, 0.2);
}

/* ── Buttons ───────────────────────────────────────– */

.gform_wrapper .gform_footer {
  display: flex;
  gap: 1rem;
  margin-top: 1rem !important;
  padding: 0 !important;
  border: none;
  background: none;
}

.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper .gsubmit_button {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #fff !important;
  background-color: #B040C8 !important;
  border: 2px solid #B040C8 !important;
  border-radius: 2px !important;
  padding: 0.75rem 2rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gsubmit_button:hover {
  background-color: #9a30b0 !important;
  border-color: #9a30b0 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(176, 64, 200, 0.4) !important;
}

.gform_wrapper input[type="submit"]:focus,
.gform_wrapper button[type="submit"]:focus,
.gform_wrapper .gform_button:focus {
  outline: 2px solid rgba(176, 64, 200, 0.5) !important;
  outline-offset: 2px !important;
}

/* ── Error States ──────────────────────────────────– */

.gform_wrapper .gfield.error input[type="text"],
.gform_wrapper .gfield.error input[type="email"],
.gform_wrapper .gfield.error input[type="tel"],
.gform_wrapper .gfield.error textarea,
.gform_wrapper .gfield.error select {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
}

.gform_wrapper .gfield.error input[type="text"]:focus,
.gform_wrapper .gfield.error input[type="email"]:focus,
.gform_wrapper .gfield.error textarea:focus,
.gform_wrapper .gfield.error select:focus {
  border-color: #ff6b6b;
  background: #fff;
}

.gform_wrapper .gfield_validation_message {
  color: #ff8787;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* ── Success Message ───────────────────────────────– */

.gform_wrapper .gform_confirmation_message {
  background: rgba(76, 175, 80, 0.2);
  border: 2px solid rgba(76, 175, 80, 0.4);
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}

/* ── Contexte fond sombre : .gradient, .dark-bg, .primary ─── */
/* gform_wrapper → encart violet semi-transparent (même style que pack-order-form) */

.gradient .gform_wrapper,
.dark-bg .gform_wrapper,
.primary .gform_wrapper {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ── Bloc "flex formulaire" (.gradient.form) ──────────────────
   .inner englobe titre (.section-header) + form-box + gform_wrapper.
   Le box est sur .inner → titre et formulaire dans le même encart. */

.gradient.form .inner {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  padding: 1.75rem 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* gform_wrapper transparent — le box parent suffit */
.gradient.form .gform_wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Labels → blancs sur fond sombre */
.gradient .gform_wrapper .gfield_label,
.dark-bg .gform_wrapper .gfield_label,
.primary .gform_wrapper .gfield_label {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Légende → blanche */
.gradient .gform_wrapper .gform_required_legend,
.dark-bg .gform_wrapper .gform_required_legend,
.primary .gform_wrapper .gform_required_legend {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Bouton → ghost outline blanc sur fond sombre */
.gradient .gform_wrapper input[type="submit"],
.gradient .gform_wrapper button[type="submit"],
.gradient .gform_wrapper .gform_button,
.dark-bg .gform_wrapper input[type="submit"],
.dark-bg .gform_wrapper button[type="submit"],
.dark-bg .gform_wrapper .gform_button,
.primary .gform_wrapper input[type="submit"],
.primary .gform_wrapper button[type="submit"],
.primary .gform_wrapper .gform_button {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
}

.gradient .gform_wrapper input[type="submit"]:hover,
.gradient .gform_wrapper button[type="submit"]:hover,
.gradient .gform_wrapper .gform_button:hover,
.dark-bg .gform_wrapper input[type="submit"]:hover,
.dark-bg .gform_wrapper button[type="submit"]:hover,
.dark-bg .gform_wrapper .gform_button:hover,
.primary .gform_wrapper input[type="submit"]:hover,
.primary .gform_wrapper button[type="submit"]:hover,
.primary .gform_wrapper .gform_button:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* ── Responsive ────────────────────────────────────– */

@media (max-width: 700px) {
  .gform_wrapper {
    padding: 1.25rem 1rem;
  }

  /* Masquer les labels — le placeholder suffit */
  .gform_wrapper .gfield_label {
    display: none !important;
  }

  /* Sauf champ readonly (Pack souhaité) et textarea (Message) */
  .gform_wrapper .gfield--type-textarea .gfield_label,
  .gform_wrapper input[readonly] ~ label,
  .gform_wrapper .gfield--has-no-placeholder .gfield_label {
    display: block !important;
  }

  .gform_wrapper input[type="text"],
  .gform_wrapper input[type="email"],
  .gform_wrapper input[type="tel"],
  .gform_wrapper textarea {
    font-size: 16px !important;
  }
}