:root {
    --pawapay-accent: #F57C00;
    --pawapay-accent-dark: #C4620A;
    --pawapay-ink: #1A1A1A;
}

.pawapay-logo {
    text-align: center;
    margin-bottom: 22px;
}

.pawapay-logo img {
    max-width: 130px;
    height: auto;
}

.pawapay-form-wrapper {
    max-width: 480px;
    margin: 20px auto;
    padding: 32px;
    border: 1px solid #ececec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pawapay-form-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.25em;
    font-weight: 700;
    color: var(--pawapay-ink);
    text-align: center;
    letter-spacing: 0.2px;
}

.pawapay-field {
    margin-bottom: 18px;
}

.pawapay-field label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    font-size: 0.85em;
    color: #444;
    letter-spacing: 0.2px;
}

.pawapay-field input,
.pawapay-field select,
.pawapay-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.98em;
    font-family: inherit;
    background: #fcfcfc;
    transition: border-color 0.15s ease-in-out, background 0.15s ease-in-out;
}

.pawapay-field input:focus,
.pawapay-field select:focus,
.pawapay-field textarea:focus {
    outline: none;
    border-color: var(--pawapay-accent);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(245, 124, 0, 0.12);
}

.pawapay-fixed-amount {
    font-size: 1.05em;
    font-weight: 700;
    background: #fff4e8;
    color: var(--pawapay-accent-dark);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 18px;
    text-align: center;
}

.pawapay-submit {
    margin-top: 24px;
}

.pawapay-button {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    padding: 13px 16px;
    background: var(--pawapay-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.98em;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background 0.15s ease-in-out, transform 0.1s ease-in-out;
}

.pawapay-button:hover {
    background: var(--pawapay-accent-dark);
    color: #fff;
}

.pawapay-button:visited {
    color: #fff;
}

.pawapay-button:active {
    transform: scale(0.99);
}

.pawapay-button-loading {
    opacity: 0.75;
    cursor: wait;
    position: relative;
    padding-left: 40px !important;
}

.pawapay-button-loading::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pawapay-spin 0.7s linear infinite;
}

@keyframes pawapay-spin {
    to { transform: rotate(360deg); }
}

.pawapay-secure-note {
    margin-top: 16px;
    font-size: 0.78em;
    color: #999;
    text-align: center;
    line-height: 1.5;
}

.pawapay-notice {
    max-width: 480px;
    margin: 16px auto;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.94em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pawapay-notice-error {
    background: #fdf1f0;
    color: #a12622;
    border: 1px solid #f6d5d2;
}

.pawapay-notice-success {
    background: #f1f8f2;
    color: #256b35;
    border: 1px solid #cfe8d3;
}

.pawapay-notice-pending {
    background: #fff8ec;
    color: #8a6100;
    border: 1px solid #ffe6b3;
}

/* Catalogue de produits */
.pawapay-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.pawapay-product-card {
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pawapay-product-image img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 14px;
}

.pawapay-product-name {
    margin: 0 0 6px;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--pawapay-ink);
}

.pawapay-product-description {
    font-size: 0.87em;
    color: #777;
    margin: 0 0 10px;
    line-height: 1.5;
}

.pawapay-product-price {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--pawapay-accent);
    margin: 0 0 14px;
}

.pawapay-catalog-form {
    margin-top: auto;
}

.pawapay-field-compact {
    margin-bottom: 9px;
}

.pawapay-field-compact label {
    font-size: 0.78em;
    margin-bottom: 4px;
}

.pawapay-field-compact input {
    padding: 8px 11px;
    font-size: 0.9em;
}

.pawapay-button-small {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9em;
    margin-top: 6px;
}

.pawapay-product-delivery {
    font-size: 0.75em;
    color: var(--pawapay-accent-dark);
    background: #fff4e8;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    margin: 0 0 12px;
    font-weight: 600;
}

/* Tests de diagnostic */
.pawapay-test-card {
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pawapay-test-name {
    margin: 0 0 6px;
    font-size: 1.12em;
    font-weight: 700;
    color: var(--pawapay-ink);
}

.pawapay-test-image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 16px;
}

.pawapay-test-description {
    font-size: 0.9em;
    color: #777;
    margin: 0 0 12px;
    line-height: 1.5;
}

.pawapay-toggle-test {
    width: auto;
    padding: 10px 24px;
}

.pawapay-test-panel {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.pawapay-question-section-title {
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--pawapay-accent);
    font-size: 0.98em;
    font-weight: 700;
    color: var(--pawapay-ink);
}

.pawapay-question-section-title:first-child {
    margin-top: 0;
}

.pawapay-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.pawapay-radio-option {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 400;
    font-size: 0.92em;
    color: #444;
    padding: 10px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fcfcfc;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, background 0.15s ease-in-out;
    /* Désactive le flash de surlignage tactile natif d'Android/Chrome au tap
       (gris/bleu, indépendant de nos propres styles) : sans ça, ce flash
       natif se superposait à notre encadré et pouvait ressembler à un second
       contour qui apparaît puis disparaît. */
    -webkit-tap-highlight-color: transparent;
}

.pawapay-radio-option input {
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.pawapay-radio-option:hover,
.pawapay-radio-option:focus-within {
    border-color: var(--pawapay-accent);
    background: #fff8f0;
}

/* État "sélectionné" : un seul contour intentionnel (bordure + léger anneau). */
.pawapay-radio-option:has(input:checked) {
    border-color: var(--pawapay-accent);
    background: #fff4e8;
    box-shadow: 0 0 0 1px var(--pawapay-accent);
}

/* Le contour de focus natif du navigateur est totalement désactivé plutôt
   que conditionné à l'état coché : sur mobile, le focus et la sélection
   arrivent au même instant, ce qui pouvait produire un bref flash du contour
   natif juste avant que notre propre encadré ne prenne le relais. La
   navigation au clavier reste signalée via :focus-within ci-dessus (même
   langage visuel que le survol, sans contour brut qui pourrait clignoter).
   Les !important ci-dessous sont nécessaires car certains thèmes WordPress
   (ex : Astra) imposent leur propre contour d'accessibilité sur tous les
   champs du site, avec une priorité qui peut dépasser la nôtre sans cela. */
.pawapay-radio-option input,
.pawapay-radio-option input:focus,
.pawapay-radio-option input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.pawapay-radio-option:has( input:checked ) {
    box-shadow: 0 0 0 1px var(--pawapay-accent) !important;
}

/* Bloc de résultat affiché après paiement confirmé */
.pawapay-result-block {
    max-width: 520px;
    margin: 18px auto;
    padding: 26px 28px;
    background: #fff;
    border: 1px solid #f0e0cc;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pawapay-result-title {
    margin: 0 0 14px;
    color: var(--pawapay-accent-dark);
    font-size: 1.15em;
    font-weight: 700;
    text-align: center;
}

.pawapay-result-block p {
    margin: 0 0 10px;
    color: #333;
    line-height: 1.6;
}

.pawapay-synthesis-block {
    margin: 16px 0;
    padding: 16px 18px;
    background: #fff8ec;
    border-left: 3px solid var(--pawapay-accent);
    border-radius: 6px;
    font-style: italic;
    color: #5a4632;
}

.pawapay-synthesis-block p {
    margin: 0;
    color: inherit;
}

/* Le graphique conserve sa taille réelle (texte lisible) et défile horizontalement
   sur les petits écrans plutôt que d'être rétréci jusqu'à devenir illisible. */
.pawapay-result-chart-wrapper {
    overflow-x: auto;
    margin: 4px 0 18px;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
}

.pawapay-result-chart {
    display: block;
    width: 100%;
    min-width: 420px;
    height: auto;
    border-radius: 10px;
}

.pawapay-pdf-download {
    text-align: center;
    margin-top: 18px !important;
}

.pawapay-pdf-button {
    display: inline-block;
    width: auto;
    padding: 12px 26px;
    background: #fff;
    color: var(--pawapay-accent-dark);
    border: 1.5px solid var(--pawapay-accent);
    text-decoration: none;
    font-weight: 600;
}

.pawapay-pdf-button:hover {
    background: var(--pawapay-accent);
    color: #fff;
}

.pawapay-axis-result {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0e0cc;
}

.pawapay-recommendation {
    text-align: center;
    margin: 14px 0;
    padding: 14px;
    background: #fafafa;
    border-radius: 8px;
}

.pawapay-recommendation-label {
    display: block;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin-bottom: 8px;
}

.pawapay-recommendation-button {
    width: auto;
    display: inline-block;
    padding: 10px 22px;
    background: #fff;
    color: var(--pawapay-accent-dark);
    border: 1.5px solid var(--pawapay-accent);
    font-size: 0.9em;
}

.pawapay-recommendation-button:hover {
    background: var(--pawapay-accent);
    color: #fff;
}

.pawapay-axis-result-title {
    margin: 0 0 8px;
    font-size: 0.98em;
    font-weight: 700;
    color: var(--pawapay-ink);
}

/* Navigation multi-pages des tests */
.pawapay-test-progress {
    margin-bottom: 20px;
}

.pawapay-test-progress-track {
    width: 100%;
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.pawapay-test-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--pawapay-accent);
    transition: width 0.25s ease-in-out;
}

.pawapay-test-progress-label {
    display: block;
    margin-top: 6px;
    font-size: 0.78em;
    color: #999;
    text-align: right;
}

.pawapay-test-nav {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.pawapay-test-nav .pawapay-button {
    margin-top: 0;
    flex: 1; /* boutons Suivant/Précédent de largeur égale, confortables au toucher */
}

.pawapay-secondary-button {
    background: #fff;
    color: var(--pawapay-ink);
    border: 1px solid #ddd;
}

.pawapay-secondary-button:hover {
    background: #f7f7f7;
}

/* Transition en fondu entre deux pages d'un test */
.pawapay-test-page {
    transition: opacity 0.18s ease-in-out;
    opacity: 1;
}

.pawapay-page-fade-out {
    opacity: 0;
}

/* Bandeau "reprise du test" affiché si des réponses précédentes sont retrouvées */
.pawapay-test-resume-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: #fff8ec;
    border: 1px solid #ffe6b3;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 0.85em;
    color: #8a6100;
}

.pawapay-resume-restart {
    background: none;
    border: 1px solid #d9b877;
    color: #8a6100;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.9em;
    cursor: pointer;
    white-space: nowrap;
}

.pawapay-resume-restart:hover {
    background: #ffe6b3;
}

/* Estimation du temps affichée sur la carte du test */
.pawapay-test-duration {
    font-size: 0.8em;
    color: #999;
    margin: 0 0 10px;
}

/* Les boutons d'action (Suivant/Précédent, Valider) restent accessibles en
   collant en bas de l'écran lors du défilement, utile pour les tests à
   beaucoup de questions. */
.pawapay-test-actions {
    position: sticky;
    bottom: 10px;
    background: #ffffff;
    padding-top: 10px;
    margin-top: 4px;
    box-shadow: 0 -8px 12px -4px rgba(255, 255, 255, 0.95);
    z-index: 5;
}

/* ------------------------------------------------------------------
   Ajustements mobile : on resserre les espacements sur petit écran,
   sans jamais réduire la taille des zones cliquables (boutons, options
   de réponse) pour garder un usage tactile confortable.
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
    .pawapay-form-wrapper,
    .pawapay-test-card,
    .pawapay-product-card,
    .pawapay-result-block {
        padding: 20px 18px;
        border-radius: 12px;
    }

    .pawapay-form-title {
        font-size: 1.12em;
    }

    .pawapay-test-name,
    .pawapay-product-name {
        font-size: 1.02em;
    }

    .pawapay-result-title {
        font-size: 1.05em;
    }

    .pawapay-catalog-grid {
        gap: 16px;
    }

    /* Zones tactiles un peu plus généreuses sur mobile */
    .pawapay-radio-option {
        padding: 12px 14px;
    }

    .pawapay-button {
        padding: 14px 16px;
        font-size: 1em;
    }

    /* Le bouton "Précédent" passe en icône compacte pour laisser toute la
       place au bouton "Suivant", le plus utilisé, sur les très petits écrans. */
    .pawapay-test-nav {
        gap: 8px;
    }
}

/* Tableau de résultats individuels (tests de groupe) */
.pawapay-group-results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9em;
}

.pawapay-group-results-table th,
.pawapay-group-results-table td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid #eee;
}

.pawapay-group-results-table th {
    color: #777;
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pawapay-group-results-table a {
    color: var(--pawapay-accent);
    font-weight: 600;
    text-decoration: none;
}

.pawapay-group-results-table a:hover {
    text-decoration: underline;
}