/*
  Theme overrides for Letreco
  - Variables (couleurs, spacing, radius)
  - Normalisation légère
  - Composants: boutons, formulaires, modales, helpers
  Ces styles sont chargés après les CSS existants pour surcharger proprement.
*/

:root {
  --color-primary: #339933;
  --color-primary-600: #2d8a2d;
  --color-primary-100: #eaf6ea;
  --color-text: #222;
  --color-muted: #646363;
  --color-border: #e5e5e5;
  --color-error: #cc0000;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

/* Normalisation légère et utilitaires */
html #top * { box-sizing: border-box; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Boutons génériques */
.btn, html #top .letreco-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 24px;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  cursor: pointer;
  transition: all .2s ease-in-out;
}
.btn:hover, .btn:focus,
html #top .letreco-btn:hover:not(.disabled),
html #top .letreco-btn:focus:not(.disabled) {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
  outline: none;
}
.btn.primary { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.btn.primary:hover, .btn.primary:focus { background: var(--color-primary-600); border-color: var(--color-primary-600); }
.btn.muted { color: var(--color-muted); border-color: var(--color-border); }
.btn.block { display: flex; width: 100%; }
.btn.disabled, .btn[disabled], html #top .letreco-btn.disabled { opacity: .6; cursor: not-allowed; background: #b5afaf; color: #fff; border-color: #b5afaf; }

/* Formulaires */
html #top .letreco-form .element > label:nth-child(1) { font-weight: 600; color: var(--color-text); }
html #top .letreco-form .element input[type='email'],
html #top .letreco-form .element input[type='text'],
html #top .letreco-form .element input[type='password'] {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 16px; /* Empêche le zoom automatique sur mobile */
}
html #top .letreco-form .element input.error { border-bottom-color: var(--color-error); }

html #top .letreco-form .element select {
  background-color: #f7f7f7;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 14px 40px 14px 16px;
}

/* Masquer l'icône native de révélation sur certains navigateurs (évite l'œil en double) */
input[type='password']::-ms-reveal,
input[type='password']::-ms-clear {
  display: none;
}
/* Prévenir certains décors webkit si présents */
input[type='password']::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none;
}

/* Messages d'état */
.form-help { font-size: 12px; color: var(--color-muted); }
.form-error, html #top .letreco-error { color: var(--color-error); font-style: normal; }

/* Modales Letreco */
html #top .letreco-modal {
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
html #top .letreco-modal .mfp-close { opacity: 1; color: #9aa0a6 !important; }
html #top .letreco-modal.checkout-modal { max-width: 900px; }

/* Tooltips Tippy thème letreco */
.tippy-box[data-theme~='letreco'] { background: var(--color-primary); color: #fff; }
.tippy-box[data-theme~='letreco'] > .tippy-arrow::before { border-bottom-color: var(--color-primary); border-top-color: var(--color-primary); }

/* Helpers d'espacement */
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); }
.pt-1 { padding-top: var(--space-1); } .pt-2 { padding-top: var(--space-2); } .pt-3 { padding-top: var(--space-3); } .pt-4 { padding-top: var(--space-4); } .pt-5 { padding-top: var(--space-5); }
.pb-1 { padding-bottom: var(--space-1); } .pb-2 { padding-bottom: var(--space-2); } .pb-3 { padding-bottom: var(--space-3); } .pb-4 { padding-bottom: var(--space-4); } .pb-5 { padding-bottom: var(--space-5); }

/* Tables (ex: récap commande) */
table th, table td { vertical-align: top; }
table thead th { background: var(--color-primary-100); }

/* Masquage forcé des modules cookies/WordPress hérités */
#cookie-law-info-bar,
#cookie-law-info-again,
.cli-modal,
.cli-modal *,
.cli-modal-dialog,
.cli-modal-dialog *,
.cli-modal-content,
.cli-modal-content *,
#cliModalClose,
#cliModalClose *,
.cli-modal-backdrop,
.wt-cli-ckyes-footer-section,
.wt-cli-ckyes-brand-logo,
.wt-cli-privacy-overview-actions,
.wt-cli-privacy-btn,
.wt-cli-sr-only { display: none !important; visibility: hidden !important; }

/* Pré-vérification modal */
#precheck-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9998; display: none; }
#precheck-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
#precheck-modal .card { max-width: 760px; margin: 40px auto; background: #fff; border: 2px solid var(--color-primary); border-radius: 14px; padding: 28px; }
@media (max-width: 768px) {
  #precheck-modal .card { margin: 20px 16px; padding: 20px; }
}

/* Modale d'expiration: marges mobiles */
@media (max-width: 768px) {
  .expiration-modal .card { margin: 20px 16px !important; padding: 16px !important; }
}
#precheck-modal h1 { color: var(--color-primary); text-align: center; line-height: 1.25; margin: 0 0 12px; }
#precheck-modal p.lead { text-align: center; color: #3b3b3b; margin-bottom: 18px; }
#precheck-modal .field { margin-bottom: 16px; }
#precheck-modal label { display: block; font-size: 13px; margin-bottom: 6px; color: #333; }
#precheck-modal input[type="text"] { width: 100%; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--color-primary-100); font-size: 16px; /* Empêche le zoom automatique sur mobile */ }
#precheck-modal .actions { display: flex; flex-direction: column; align-items: center; gap: 15px; }
#precheck-modal .actions .btn { padding: 12px 22px; }
#precheck-modal .error { color: var(--color-error); font-size: 12px; margin-top: 1px; font-style: italic; display: none; }
#precheck-modal.show, #precheck-overlay.show { display: block; }

/* Spinner de chargement */
#loading-spinner { display: none; flex-direction: column; align-items: center; gap: 10px; }
.spinner { width: 24px; height: 24px; border: 3px solid var(--color-primary-100); border-top: 3px solid var(--color-primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }