/* ═══════════════════════════════════════════════════════════════════════════
   Plugin Rétractation WooCommerce – Feuille de style
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
    --ret-red:        #c0392b;
    --ret-red-dark:   #96281b;
    --ret-red-light:  #fdf0ef;
    --ret-red-border: #e8bbb8;
    --ret-orange:     #e67e22;
    --ret-text:       #2c2c2c;
    --ret-muted:      #6b7280;
    --ret-border:     #e5e7eb;
    --ret-bg:         #f9fafb;
    --ret-white:      #ffffff;
    --ret-radius:     10px;
    --ret-shadow:     0 4px 20px rgba(0,0,0,.08);
    --ret-transition: 200ms ease;
}

/* ── Section principale ──────────────────────────────────────────────────── */
.retraction-woo-section {
    margin: 28px 0;
    border-radius: var(--ret-radius);
    background: var(--ret-white);
    box-shadow: var(--ret-shadow);
    border: 1px solid var(--ret-border);
    overflow: hidden;
    font-family: inherit;
}

/* ── Barre d'intro ───────────────────────────────────────────────────────── */
.retraction-woo-intro {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--ret-bg);
    border-bottom: 1px solid var(--ret-border);
    flex-wrap: wrap;
}

.retraction-woo-intro-text {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.retraction-woo-intro-text p {
    margin: 0;
    font-size: 14px;
    color: var(--ret-text);
    line-height: 1.5;
}

.retraction-woo-intro-text strong {
    font-weight: 700;
}

/* Icône décorative dans le texte intro */
.retraction-woo-icon {
    font-size: 20px;
    flex-shrink: 0;
    color: var(--ret-red);
}

/* Badge "Xj restants" */
.retraction-woo-badge {
    flex-shrink: 0;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
}

.retraction-woo-badge--urgent {
    background: #fff1f0;
    color: var(--ret-red);
    animation: retraction-pulse 2s infinite;
}

@keyframes retraction-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .6; }
}

/* ── Bouton principal ────────────────────────────────────────────────────── */
.retraction-woo-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ret-red);
    color: var(--ret-white) !important;
    border: none;
    border-radius: 7px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ret-transition), transform var(--ret-transition), box-shadow var(--ret-transition);
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(192,57,43,.3);
}

.retraction-woo-trigger:hover {
    background: var(--ret-red-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(192,57,43,.4);
}

.retraction-woo-trigger:focus-visible {
    outline: 3px solid var(--ret-red);
    outline-offset: 3px;
}

.retraction-woo-trigger:active {
    transform: translateY(0);
}

/* Flèche tournante à l'ouverture */
.retraction-woo-trigger-chevron {
    font-size: 11px;
    transition: transform var(--ret-transition);
    display: inline-block;
}

.retraction-woo-trigger[aria-expanded="true"] .retraction-woo-trigger-chevron {
    transform: rotate(180deg);
}

/* ── Formulaire ──────────────────────────────────────────────────────────── */
.retraction-woo-form-wrapper {
    padding: 0; /* le padding est géré par les sous-sections */
}

.retraction-woo-form {
    padding: 24px 24px 20px;
}

/* En-tête du formulaire */
.retraction-woo-form-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ret-border);
}

.retraction-woo-form-header h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ret-text);
}

.retraction-woo-legal {
    margin: 0;
    font-size: 13px;
    color: var(--ret-muted);
    font-style: italic;
    background: var(--ret-red-light);
    border-left: 3px solid var(--ret-red);
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    line-height: 1.6;
}

/* ── Grille 2 colonnes (Prénom / Nom) ────────────────────────────────────── */
.retraction-woo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

@media (max-width: 540px) {
    .retraction-woo-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Champs ──────────────────────────────────────────────────────────────── */
.retraction-woo-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.retraction-woo-field:last-of-type {
    margin-bottom: 0;
}

.retraction-woo-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ret-text);
    display: flex;
    align-items: center;
    gap: 5px;
}

.retraction-woo-required {
    color: var(--ret-red);
    font-weight: 700;
}

.retraction-woo-optional {
    font-weight: 400;
    color: var(--ret-muted);
    font-size: 12px;
}

.retraction-woo-field input[type="text"],
.retraction-woo-field input[type="email"],
.retraction-woo-field textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--ret-border);
    border-radius: 7px;
    font-size: 14px;
    color: var(--ret-text);
    background: var(--ret-white);
    transition: border-color var(--ret-transition), box-shadow var(--ret-transition);
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.5;
}

.retraction-woo-field textarea {
    resize: vertical;
    min-height: 80px;
}

.retraction-woo-field input::placeholder,
.retraction-woo-field textarea::placeholder {
    color: #b0b7c3;
}

.retraction-woo-field input:focus,
.retraction-woo-field textarea:focus {
    outline: none;
    border-color: var(--ret-red);
    box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}

/* ── Raccourcis motif ────────────────────────────────────────────────────── */
.retraction-woo-reason-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 8px;
}

.retraction-woo-shortcut {
    background: var(--ret-bg);
    border: 1.5px solid var(--ret-border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ret-muted);
    cursor: pointer;
    transition: border-color var(--ret-transition), color var(--ret-transition), background var(--ret-transition);
    white-space: nowrap;
}

.retraction-woo-shortcut:hover,
.retraction-woo-shortcut.is-active {
    border-color: var(--ret-red);
    color: var(--ret-red);
    background: var(--ret-red-light);
}

/* Compteur de caractères */
.retraction-woo-char-count {
    font-size: 11px;
    color: var(--ret-muted);
    text-align: right;
    margin-top: 3px;
}

/* Note d'aiguillage vers la garantie légale de conformité */
.retraction-woo-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--ret-muted);
    line-height: 1.5;
}

/* ── Zone de message retour ──────────────────────────────────────────────── */
.retraction-woo-message {
    display: none;
    padding: 12px 16px;
    border-radius: 7px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.retraction-woo-message:not(:empty) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.retraction-woo-message.success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.retraction-woo-message.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── Boutons d'action ────────────────────────────────────────────────────── */
.retraction-woo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--ret-border);
    flex-wrap: wrap;
}

.retraction-woo-submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ret-red);
    color: var(--ret-white) !important;
    border: none;
    border-radius: 7px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--ret-transition), transform var(--ret-transition), box-shadow var(--ret-transition);
    box-shadow: 0 2px 8px rgba(192,57,43,.3);
}

.retraction-woo-submit:hover {
    background: var(--ret-red-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(192,57,43,.4);
}

.retraction-woo-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.retraction-woo-submit-icon {
    font-size: 15px;
    font-weight: 900;
}

.retraction-woo-cancel {
    background: none;
    border: 1.5px solid var(--ret-border);
    border-radius: 7px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ret-muted);
    cursor: pointer;
    transition: border-color var(--ret-transition), color var(--ret-transition);
}

.retraction-woo-cancel:hover {
    border-color: #9ca3af;
    color: var(--ret-text);
}

/* ── État "déjà rétracté" ────────────────────────────────────────────────── */
.retraction-woo-already-done {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    padding: 14px 18px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--ret-radius);
    font-size: 14px;
    color: #92400e;
}

.retraction-woo-already-done::before {
    content: "✓";
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    background: #fbbf24;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
}

.retraction-woo-already-done p {
    margin: 0;
}

/* ── Variante urgence (≤ 3 jours) ────────────────────────────────────────── */
.retraction-woo-section.retraction-woo-urgent .retraction-woo-intro {
    background: var(--ret-red-light);
    border-bottom-color: var(--ret-red-border);
}

/* ── Information précontractuelle au checkout ────────────────────────────── */
.retraction-woo-checkout-notice {
    margin: 14px 0;
    padding: 12px 16px;
    background: var(--ret-bg, #f9fafb);
    border: 1px solid var(--ret-border, #e5e7eb);
    border-left: 3px solid var(--ret-red, #c0392b);
    border-radius: 7px;
    font-size: 13px;
    color: var(--ret-muted, #6b7280);
    line-height: 1.6;
}