/* ==========================================================================
   pbx-a11y.css — Paybox Accessibility Layer (WCAG 2.2)
   --------------------------------------------------------------------------
   Ce fichier est chargé APRÈS les CSS clients (sistyle_tc / PBX_THEME_CSS)
   pour garantir que les indicateurs de focus restent visibles même si un
   CSS client les supprime (ex : outline: 0 dans up2pay_puma.css).

   Règles :
   - !important UNIQUEMENT sur les propriétés d'accessibilité critique (focus)
   - :focus-visible plutôt que :focus (ne s'active qu'au clavier, pas au clic)
   - Sélecteurs volontairement larges pour couvrir tous les thèmes clients
   ========================================================================== */

/* --------------------------------------------------------------------------
   WCAG 2.4.13 — Focus Appearance (Level AAA, ciblé AA+)
   Indicateur de focus clavier visible sur TOUS les éléments interactifs.
   Contraste outline : #0060df (bleu Paybox) sur fond clair → ratio ≥ 3:1
   -------------------------------------------------------------------------- */

/* --- Règle globale : tous les éléments interactifs ----------------------- */
/* box-shadow blanc : halo de contraste pour les thèmes clients sombres     */
/* (#0060df sur fond sombre = 2:1 sans halo ; 3:1 requis — WCAG 1.4.11)    */
:focus-visible {
    outline: 2px solid #0060df !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45) !important;
}

/* --- Inputs de paiement (surcharge le outline:0 de up2pay_puma.css) ------ */
#middle .Finput:focus-visible,
#middle .Finput.error:focus-visible,
#middle .Finput.valid:focus-visible,
#pan:focus-visible,
#mois_val:focus-visible,
#an_val:focus-visible,
#CVV:focus-visible {
    outline: 2px solid #0060df !important;
    outline-offset: 2px !important;
}

/* --- Boutons ------------------------------------------------------------- */
.pbx-button:focus-visible,
#pbx-button-validate:focus-visible,
#pbx-button-cancel:focus-visible,
button:focus-visible {
    outline: 2px solid #0060df !important;
    outline-offset: 2px !important;
}

/* --- Liens --------------------------------------------------------------- */
a:focus-visible {
    outline: 2px solid #0060df !important;
    outline-offset: 2px !important;
}

/* --- Checkboxes et radios ------------------------------------------------ */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid #0060df !important;
    outline-offset: 2px !important;
}

/* --- Custom checkbox/radio : focus sur l'élément visuel (.checkmark) ----- */
/* Le <input> dans .checkcontainer est masqué (opacity:0) — on cible le span */
/* visuel via le sélecteur ~ établi dans styles.css (ex: input:checked ~ .checkmark) */
.checkcontainer input[type="checkbox"]:focus-visible ~ .checkmark,
.checkcontainer input[type="radio"]:focus-visible ~ .checkmark {
    outline: 2px solid #0060df !important;
    outline-offset: 2px !important;
}

/* --- Choix de marque dual brand ------------------------------------------ */
.brand-input:focus-visible + .brand-label,
input[name="pbx-brand-choice"]:focus-visible + .brand-label {
    outline: 2px solid #0060df !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45) !important;
}

/* --- Select (mois/année expiration) -------------------------------------- */
select:focus-visible {
    outline: 2px solid #0060df !important;
    outline-offset: 2px !important;
}

/* --- Tooltip / info buttons ---------------------------------------------- */
.tooltip-trigger:focus-visible,
#pbx_infoCVV:focus-visible,
.pbx-dualbrand-i:focus-visible {
    outline: 2px solid #0060df !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   WCAG 2.5.8 — Target Size (Minimum) (Level AA)
   Toutes les cibles interactives doivent faire au moins 24×24 CSS pixels.
   On utilise min-width/min-height pour ne pas casser le layout existant.
   Pas de !important ici — les clients peuvent surcharger les tailles.
   ========================================================================== */

/* --- Bouton info CVV (était 15×15 dans up2pay_puma, 14×14 img dans styles) */
button#pbx_infoCVV {
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#pbx_infoCVV img {
    width: 18px;
    height: 18px;
}

/* --- Bouton info dual brand (était 22×22 dans rwd.css) ------------------- */
.pbx-dualbrand-i {
    min-width: 24px;
    min-height: 24px;
}

/* --- Boutons back/cancel/validate : min 24px (WCAG minimum) -------------- */
/* Note : pas de min-height 44px ici — les thèmes clients (up2pay_puma)
   positionnent ces boutons de manière très spécifique et un agrandissement
   casse le layout. Les boutons font déjà > 24px avec leur padding/contenu. */

/* --- Aide cryptogramme (était 16×16 dans styles.css) --------------------- */
.pbx-form-cryptogram-help {
    min-width: 24px;
    min-height: 24px;
}

/* --- Custom checkbox/radio .checkmark (était 15×15 dans styles.css) ------ */
.checkmark {
    min-width: 24px;
    min-height: 24px;
}

.checkcontainer {
    min-height: 24px;
}

/* ==========================================================================
   WCAG 2.4.1 — Bypass Blocks (Level A)
   Lien "skip to main content" masqué visuellement, visible au focus clavier.
   ========================================================================== */

.pbx-a11y-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    padding: 8px 16px;
    background: #0060df;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    white-space: nowrap;
}

.pbx-a11y-skip-link:focus {
    top: 0;
}