/* ================================================
   🎯 Page Checkout WooCommerce — Tyshara
   ================================================= */

/* === Conteneur principal === */
.woocommerce-checkout {
  background: var(--ty-lin-brume);
  font-family: var(--font-main);
  color: var(--ty-terre-argile);
  padding: var(--space-3xl) var(--space-md);
  max-width: 75rem;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

/* === Titres === */
.woocommerce-checkout h2,
.woocommerce-checkout h3 {
  font-family: var(--font-deco);
  color: var(--ty-rose-boise);
  margin-bottom: var(--space-lg);
  text-align: center;
}

/* === Formulaire principal === */
.woocommerce form.checkout {
  background: var(--ty-nuage-pastel);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* === Champs === */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--ty-cuivre-vieilli);
  border-radius: var(--radius-sm);
  background: var(--ty-lin-brume);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-normal) var(--ease-standard);
  font-family: var(--font-main);
  color: var(--ty-anthracite-velours);
}

/* === Focus champs === */
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--ty-success);
  outline: none;
}

/* === Bouton Commander === */
.woocommerce-checkout .button {
  background: var(--gradient-or-corail);
  color: #fff;
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-radius: 999px;
  font-size: var(--fs-md);
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  transition: background var(--dur-normal) var(--ease-standard);
}

.woocommerce-checkout .button:hover {
  background: var(--ty-poussiere-or);
}

/* === Messages (erreur, info, validation) === */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  background: var(--ty-nuage-pastel);
  border-left: 4px solid var(--ty-success);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
  color: var(--ty-terre-argile);
  font-size: var(--fs-sm);
}

/* === Récapitulatif de commande === */
.woocommerce-checkout-review-order-table {
  background: var(--ty-lin-brume);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-soft);
  font-size: var(--fs-sm);
}

.woocommerce-checkout table th,
.woocommerce-checkout table td {
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-main);
  color: var(--ty-anthracite-velours);
}

.woocommerce-checkout table th {
  background: var(--ty-nuage-pastel);
  font-weight: 600;
}

/* === Page de confirmation de commande === */
.woocommerce-order {
  background: var(--ty-lin-brume);
  padding: var(--space-3xl) var(--space-lg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-medium);
  max-width: 68rem;
  margin: 0 auto;
  text-align: center;
}

.woocommerce-order h2 {
  font-family: var(--font-deco);
  font-size: var(--fs-2xl);
  color: var(--ty-rose-boise);
  margin-bottom: var(--space-md);
}

.woocommerce-order p,
.woocommerce-order li {
  font-family: var(--font-main);
  font-size: var(--fs-md);
  color: var(--ty-terre-argile);
}

/* === Responsive === */
@media (max-width: 768px) {
  .woocommerce-checkout {
    padding: var(--space-2xl) var(--space-md);
  }
  .woocommerce form.checkout {
    padding: var(--space-lg);
  }
  .woocommerce-order {
    padding: var(--space-xl) var(--space-md);
  }
}