/* ============================================================
   FORMS — fusion de form.css (admin/produits) +
   form-checkout.css (panier/checkout/paiement).
   Resets * scopés, .btn retiré (voir buttons.css).
   ============================================================ */

/* ---------- FORMULAIRES ADMIN (ex-form.css) ---------- */
/* Admin Add Product Page - Style */

h2, h3 {
    color: #2c3e50;
    margin-top: 0;
}

hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 20px 0;
}

/* Alerts */
.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Form Styles */
.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #495057;
}

input[type="text"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

textarea {
    resize: vertical;
}


.btn-group {
    margin-bottom: 20px;
}

/* Option Rows */
.option-row {
    padding: 15px;
    background-color: #f1f3f4;
    border-radius: 6px;
    margin-bottom: 10px;
    border-left: 4px solid #007bff;
}

.option-row:last-child {
    margin-bottom: 0;
}

/* Discount Fields */
.discount-fields {
    display: none;
    margin-top: 10px;
}

.discount-fields.active {
    display: block;
}

/* Radio Buttons */
.checkbox label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}

.checkbox input[type="radio"] {
    margin-right: 5px;
}


.addproduct {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.form-group-little {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    margin-right: 20px;
    flex-wrap: wrap;
}

.form-group-little label {
    font-weight: 700;
    font-size: 14px;
    color: #495057;
    margin: 0;
}

.form-group-little input[type="text"],
.form-group-little input[type="number"],
.form-group-little input[type="radio"] {
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    min-width: 80px;
    flex: 1;
    max-width: 150px;
}

.form-group-little input[type="radio"] {
    flex: 0 0 auto;
    width: auto;
    margin: 0 5px;
}

.form-group-little input[type="text"]:focus,
.form-group-little input[type="number"]:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}



.image-block {
  width: 20%;
  display: inline-block;
  cursor: move;
  transition: all 0.2s ease;
}

.image-block.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

.image-block.drag-over {
  border: 2px dashed #007bff;
  background-color: #f8f9fa;
}

.save-button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px 0;
}

.save-button:hover {
    background-color: #218838;
}




/* ---------- FILTRES DE RECHERCHE COMPACTS (admin/invoices) ----------
   Les inputs héritent de width:100% plus haut → chaque champ prenait
   une ligne entière. Ici on les groupe en rangées flexibles ; les
   rangées elles-mêmes se placent côte à côte quand la place le permet
   et repassent en pile sur mobile. */
.filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex: 1 1 360px;
    min-width: 0;
}

.filter-row > input {
    flex: 1 1 120px;
    width: auto;
    min-width: 0;
}

/* Champ avec mini-label visible (utile pour les dates, dont le
   placeholder n'existe pas) */
.filter-field {
    flex: 1 1 140px;
    min-width: 0;
    margin-bottom: 0;
    font-weight: 400;
}

.filter-field .filter-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
}

.filter-field input,
.filter-field select {
    width: 100%;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    /* NB : un `body { padding: 10px }` global vivait ici — il décollait
       la navbar des bords de page sur toutes les vues chargeant
       forms.css. Retiré : les conteneurs de contenu (.admin-container,
       .address-form, .addproduct...) gèrent déjà leur propre padding. */
.addproduct {
    width: 90%;
}
    .form-group {
        margin-bottom: 10px;
    }

    .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
    }

    .btn {
        flex: 1;
        min-width: 120px;
    }
}


/* ---------- FORMULAIRES CHECKOUT (ex-form-checkout.css) ---------- */
/* Scoped reset — limited to the checkout area so it does not override
   spacing globally on every page that imports this stylesheet. */
.checkout-container *,
.address-form *,
.payment-form * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* FIX MOBILE : le reset ci-dessus ne s'applique qu'aux DESCENDANTS.
   Les conteneurs eux-mêmes étaient en content-box avec width:100% +
   padding:20px → 100% + 40px = débordement horizontal de la page sur
   checkout et payment (contenu « coupé » à gauche après scroll). */
.checkout-container,
.address-form,
.delivery-options,
.payment-form {
  box-sizing: border-box;
}


.checkout-container {
  width: 100%;
  margin: 0;
  padding: 0;
}

.delivery-options {
  width: 100%;
  max-width: 780px;
  margin-left: 0;
  margin-right: 0;
}

.address-form,
.delivery-options {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 20px;
  padding-top: 40px;
}


.address-form h3,
.delivery-options h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #222;
  margin-top: 24px;
  margin-bottom: 12px;
  position: relative;
}

.address-form h3::after,
.delivery-options h3::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: #007bff;
  margin-top: 6px;
  border-radius: 2px;
}

.address-form h3:first-of-type {
  margin-top: 0;
}

/* Restaure le padding des .btn dans les zones du reset scopé :
   .address-form * (0,1,0) écrasait .btn (0,1,0 aussi) car buttons.css
   est chargé avant forms.css → bouton "Enregistrer" sans padding. */
.checkout-container .btn,
.address-form .btn,
.payment-form .btn {
  padding: 0.625rem 1.25rem;
}

/* Inputs & Labels */
/* NB : le sélecteur `select` était nu (0,0,1) et perdait contre le
   reset `.address-form *` (0,1,0) → select pays sans padding sur la
   facture admin. On le scope pour qu'il gagne (0,1,1). */
.address-form input,
.address-form select,
.checkout-container select,
.payment-form select,
.address-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s ease;
  background-color: #fafafa;
  color: #333;
}

.address-form input:focus,
.address-form select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.address-form input:not(:placeholder-shown):valid,
.address-form select:valid {
  border-color: #28a745;
}

.address-form input:invalid:not(:placeholder-shown),
.address-form select:invalid {
  border-color: #dc3545;
}

.address-form input::placeholder,
.address-form select::placeholder {
  color: #999;
}

.address-form label {
  display: block;
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 6px;
  font-weight: 500;
}

/* Field Group */
.address-form .field-group {
  margin-bottom: 16px;
}

/* Row Layout */
.address-form .row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.address-form .row input,
.address-form .row select {
  flex: 1;
}

/* Buttons */
.address-form .btn-checkout {
  width: 100%;
  padding: 14px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.address-form .btn:hover,
.address-form .btn-checkout:hover {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.15);
}


/* Hidden Class */
.hidden {
  display: none;
}

/* Toggle Button for Billing Address */
.address-form #addBillingAddress {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 12px;
}

.address-form #addBillingAddress:hover {
  background: #0056b3;
}



.address-form .toggler-slider {
  width: 50px;
  height: 24px;
  background: #ddd;
  border-radius: 12px;
  position: relative;
  transition: all 0.3s ease;
  margin-right: 10px;
  cursor: pointer;
}

.address-form .toggler-knob {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
}


/* Radio Buttons (Boxtal) */
.address-form .shipping-option {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.address-form .shipping-option:last-child {
  border-bottom: none;
}

.address-form .shipping-option input[type="radio"] {
  display: none;
}

.address-form .shipping-option label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 10px;
  transition: all 0.2s ease;
}

.address-form .shipping-option input[type="radio"]:checked+label::before {
  background: #007bff;
  border-color: #007bff;
}

.address-form .shipping-option label {
  font-size: 1rem;
  color: #333;
  display: inline-block;
  margin: 0;
  padding: 4px 0;
}

.address-form .shipping-option label:hover::before {
  border-color: #007bff;
}

.address-form .shipping-option button {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 1rem;
  margin-top: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.address-form .shipping-option button:hover {
  background: #0056b3;
}

/* Delivery Options Section */
.delivery-options {
  padding: 20px;
  padding-top: 0;
  margin-left: auto;
  margin-right: auto;
  background: #f8f9fa;
  /* border-radius: 8px; */
  /* border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef; */
}



.delivery-options p {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
}

.delivery-options p.small {
  font-size: 0.8rem;
  color: #666;
}

.delivery-options p strong {
  color: #0c253f;
  font-weight: 600;
}

/* Form for Delivery Mode */
.address-form #deliveryMode {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 1rem;
}

.address-form .mt-20 {
  margin-top: 20px;
}

/* Billing Address Section */
#billing {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

#billing h3 {
  margin-top: 0;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
  .address-form .row {
    flex-direction: column;
  }

  .address-form .row input,
  .address-form .row select {
    flex: none;
    width: 100%;
  }

  .address-form h3 {
    font-size: 1.2rem;
  }

  .address-form .shipping-option {
    padding: 12px 0;
  }

  .address-form .btn-checkout {
    padding: 12px;
  }
}

/* Legal Mentions */
.legals {
  margin-top: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.legals h3 {
  margin-top: 0;
  font-size: 1.2rem;
}










/* Payment button */

.payment-form {
  display: block;
  /* FIX MOBILE : 400px fixes débordaient des écrans < 400px */
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.payment-form p {
  font-size: 20px;
  padding: 15px;
}

.payment-form div {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}


.payment-form_ship {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.payment-form_ship p {
  font-size: 20px;
  padding-left: 15px;
  padding-right: 15px;
}

.payment-form_ship .selection {
  display: inline-block;
  margin: 10px;
  width: 200px;

}

.payment-form_ship .unselection {
  display: inline-block;
  margin: 10px;
}



/*Checkbox style */

.toggler-wrapper {
  display: inline-block;
  width: 45px;
  height: 25px;
  cursor: pointer;
  position: relative;
  /* margin-left: auto;
  margin-right: auto; */
}

.toggler-wrapper input[type="checkbox"] {
  display: none;
}

.toggler-wrapper input[type="checkbox"]:checked+.toggler-slider {
  background-color: #44cc66;
}

.toggler-wrapper .toggler-slider {
  background-color: rgb(218, 211, 211);
  position: absolute;
  border-radius: 100px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.toggler-wrapper .toggler-knob {
  position: absolute;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.toggler-wrapper.style-6 {
  width: 54px;
  -webkit-box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
  box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0))), #ddd;
  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #ddd;
  border-radius: 100px;
}

.toggler-wrapper.style-6 input[type="checkbox"]:checked+.toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px + 5px);
}

.toggler-wrapper.style-6 .toggler-slider {
  -webkit-box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset;
  box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0.1))), #d0d0d0;
  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #da9797;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}

.toggler-wrapper.style-6 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: calc(3px - 5px);
  top: calc(3px - 5px);
  -webkit-box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5);
  box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #f5f5f5), to(#eeeeee));
  background: linear-gradient(#f5f5f5 10%, #eeeeee);
}


.small {
  font-size: 0.8rem;
  color: #666;
}








/* Dark mode */
@media (prefers-color-scheme: dark) {

  .address-form,
  .delivery-options {
    background: #1c1f24;
  }

  .address-form h3,
  .delivery-options h3 {
    color: #f0f4f8;
  }

  .address-form h3::after,
  .delivery-options h3::after {
    background: #4da6ff;
  }

  /* Inputs & Labels */
  .address-form input,
  .address-form select,
  .address-form textarea {
    background: #252930;
    border-color: #3a404a;
    color: #e0e6ed;
  }

  .address-form input::placeholder {
    color: #7d8b9b;
  }

  .address-form input:focus,
  .address-form select:focus {
    border-color: #4da6ff;
    box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.2);
  }

  .address-form input:not(:placeholder-shown):valid,
  .address-form select:valid {
    border-color: #66bb6a;
  }

  .address-form input:invalid:not(:placeholder-shown),
  .address-form select:invalid {
    border-color: #ff6b6b;
  }

  .address-form label {
    color: #bdc3c7;
  }

  /* Buttons */
  .address-form .btn-checkout,
  .address-form #addBillingAddress,
  .address-form .shipping-option button {
    background: #4da6ff;
    color: #1c1f24;
  }

  .address-form .btn-checkout:hover,
  .address-form #addBillingAddress:hover,
  .address-form .shipping-option button:hover {
    background: #66b3ff;
    box-shadow: 0 4px 8px rgba(77, 166, 255, 0.25);
  }

  /* Toggle Switch */
  .address-form .toggler-slider {
    background: #3a404a;
  }

  .address-form .toggler-knob {
    background: #f0f4f8;
  }

  /* Radio Buttons */
  .address-form .shipping-option label::before {
    border-color: #7d8b9b;
  }

  .address-form .shipping-option input[type="radio"]:checked+label::before {
    background: #4da6ff;
    border-color: #4da6ff;
  }

  .address-form .shipping-option label {
    color: #dfe6e9;
  }

  .address-form .shipping-option label:hover::before {
    border-color: #4da6ff;
  }

  /* Delivery Options Text */
  .delivery-options p {
    color: #bdc3c7;
  }

  .delivery-options p.small {
    color: #9aa5b1;
  }

  .delivery-options p strong {
    color: #4da6ff;
  }

  #deliveryMode {
    background: #252930;
    border-color: #3a404a;
    color: #e0e6ed;
  }

  #billing {
    border-top-color: #2d323b;
  }

  .legals {
    border-top-color: #2d323b;
    border-bottom-color: #2d323b;
  }

  .legals h3 {
    color: #f0f4f8;
  }

  /* Responsive tweaks */
  @media (max-width: 768px) {
    .address-form h3 {
      color: #f0f4f8;
    }

    .address-form .shipping-option {
      padding: 12px 0;
    }

    .address-form .btn-checkout {
      padding: 12px;
    }
  }
}