/* ── ALIGNÉ SUR LE VITRAGE DU SITE ──────────────────────────────────
           On reprend exactement le système du template produit : fonds
           translucides, bordures blanches à faible opacité, flou d'arrière-plan.
           Des couleurs pleines auraient fait une pièce rapportée au milieu
           d'une interface entièrement en verre. */
        .joystore-uid-wrapper{display:flex;gap:8px;align-items:stretch;}
        .joystore-uid-wrapper .joystore-field-uid{flex:1;min-width:0;}

        /* Bouton NEUTRE et translucide : la vérification est un service rendu,
           pas un appel à l'achat. Le rouge reste réservé à « Commander » —
           deux boutons rouges côte à côte se disputeraient l'attention. */
        /* PAS de backdrop-filter ni de transition sur le bouton.
           Sur Android, un backdrop-filter combiné au passage en « disabled »
           provoque un défaut de repeinture : le bouton devient un rectangle
           vide, et ne réapparaît qu'après une autre interaction sur la page.
           Le flou est joli, mais pas au prix d'un bouton qui s'efface au clic.
           On garde donc un fond translucide simple, sans effet composé. */
        .joystore-verify-btn{
            flex:none;white-space:nowrap;cursor:pointer;font:inherit;font-weight:600;
            font-size:14px;line-height:1.2;padding:0 18px;border-radius:8px;
            color:#FFFFFF !important;
            background:rgba(255,255,255,0.10);
            border:2px solid rgba(255,255,255,0.45);
        }
        .joystore-verify-btn:hover{
            background:rgba(255,255,255,0.18) !important;border-color:rgba(255,255,255,0.7) !important;
        }
        /* On n'utilise plus l'attribut disabled : c'est lui qui déclenchait le
           défaut d'affichage. L'état occupé est porté par une classe, et les
           clics sont ignorés côté script. */
        .joystore-verify-btn.jsv-busy{opacity:.55;cursor:default;}
        .joystore-verify-btn:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px;}

        .joystore-verify-out:empty{display:none;}
        .joystore-verify-out{
            margin-top:10px;border-radius:8px;padding:11px 14px;font-size:14px;
            line-height:1.5;color:#FFFFFF;
            background:rgba(255,255,255,0.06);
            border:1px solid rgba(255,255,255,0.15);
        }
        /* La couleur ne porte que sur la bordure et un voile léger : le fond
           reste vitré, comme le reste de la fiche. */
        .jsv-ok  {border-color:rgba(46,204,113,0.55);background:rgba(46,204,113,0.10);}
        .jsv-ko  {border-color:rgba(231,76,60,0.55); background:rgba(231,76,60,0.10);}
        .jsv-warn{border-color:rgba(230,126,34,0.55);background:rgba(230,126,34,0.10);}
        .jsv-load{border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.05);}

        /* Le pseudo est l'information que le client cherche : c'est elle qui
           lui prouve que la recharge ira sur SON compte. */
        /* Le pseudo est court : il laissait un grand vide à sa droite.
           On y place la région — l'information tient sur une seule ligne au
           lieu de deux, et l'espace est occupé utilement. */
        .jsv-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
        .jsv-pseudo{font-weight:700;font-size:17px;letter-spacing:.01em;color:#FFFFFF;
                    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
        .jsv-region{flex:none;font-size:12px;color:rgba(255,255,255,0.65);white-space:nowrap;}
        .jsv-sub{display:block;font-size:13px;color:rgba(255,255,255,0.78);}
        /* Réservé à l'administrateur — jamais envoyé aux clients. */
        .jsv-tech{display:block;margin-top:6px;padding-top:6px;font-size:11px;
                  color:rgba(255,255,255,0.55);
                  border-top:1px dashed rgba(255,255,255,0.18);}

        /* ── CARTE DE CONFIRMATION ──────────────────────────────────────────
           Elle prend la place du champ de saisie, et doit garder EXACTEMENT le
           même poids visuel : même fond translucide, même bordure discrète.
           Un fond vert ajoutait une couleur pleine au milieu d'une interface
           entièrement en verre — et attirait l'œil sur une simple confirmation
           plutôt que sur le bouton d'achat.

           IMPORTANT : le champ n'est que MASQUÉ, jamais vidé ni remplacé.
           C'est toujours l'identifiant qui part chez le fournisseur — le
           pseudo n'est qu'un affichage. */
        .jsv-carte{
            display:none;margin-top:0;border-radius:8px;padding:8px 10px 8px 12px;
            background:rgba(255,255,255,0.06);
            border:1px solid rgba(255,255,255,0.15);
        }
        .jsv-carte.on{display:flex;align-items:center;gap:10px;}

        /* Texte aligné à gauche : centré, il laissait de grands vides des deux
           côtés sur écran large. Le vide restant sert au bouton, à droite. */
        .jsv-carte-txt{flex:1;min-width:0;text-align:left;}

        .jsv-carte-nom{
            display:block;font-weight:700;font-size:15px;color:#FFFFFF;
            line-height:1.3;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
        }
        .jsv-carte-id{
            display:block;margin-top:1px;
            font-size:12px;color:rgba(255,255,255,0.62);
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
        }

        /* Exactement le bouton « Vérifier » : il ne fait que changer de nom,
           il ne doit pas changer d'allure ni de place. */
        .jsv-carte-btn{
            flex:none;white-space:nowrap;cursor:pointer;font:inherit;font-weight:600;
            font-size:14px;line-height:1.2;padding:0 18px;align-self:stretch;
            border-radius:8px;
            color:#FFFFFF !important;
            background:rgba(255,255,255,0.10);
            border:2px solid rgba(255,255,255,0.45);
        }
        .jsv-carte-btn:hover{
            background:rgba(255,255,255,0.18) !important;border-color:rgba(255,255,255,0.7) !important;
        }
        .jsv-carte-btn:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px;}

        /* Aide sous un champ : discrète mais lisible. Elle explique où trouver
           une valeur que le client ne connaît pas par cœur. */
        .joystore-field-hint{
            display:block;margin-top:5px;
            font-size:12px;line-height:1.5;
            color:rgba(255,255,255,0.60);
        }

        /* Lien vers le produit de la bonne région. Présenté comme une action
           claire — c'est la sortie que cherche le client à cet instant. */
        .jsv-go{
            display:block;margin-top:8px;padding:9px 12px;border-radius:8px;
            background:rgba(255,255,255,0.10);
            border:1px solid rgba(255,255,255,0.30);
            color:#FFFFFF !important;text-decoration:none !important;
            font-weight:600;font-size:13.5px;text-align:center;
        }
        .jsv-go:hover{background:rgba(255,255,255,0.18) !important;}

        /* Éléments techniques : ils ne doivent JAMAIS occuper de place.
           Un thème qui applique un style large aux champs de formulaire
           (par exemple « .single-product form input { display:block } ») peut
           redonner une hauteur à un champ caché, et faire apparaître un espace
           vide inexpliqué dans la fiche produit. On le verrouille ici. */
        .jsv-pseudo-hidden{
            display:none !important;
            width:0 !important;height:0 !important;
            margin:0 !important;padding:0 !important;border:0 !important;
            position:absolute !important;
        }
        .jsv-carte:not(.on){display:none !important;}

        @media (max-width:380px){
            .joystore-uid-wrapper{flex-direction:column;}
            .joystore-verify-btn{padding:12px 18px;}
        }

        /* 3.0 — le thème ne repeint pas « Vérifier » ni « Changer » (mêmes valeurs que plus haut). */
        #joystore-form-wrapper .joystore-verify-btn,
        #joystore-form-wrapper .jsv-carte-btn { background: rgba(255,255,255,0.10); border: 2px solid rgba(255,255,255,0.45); padding: 0 18px; border-radius: 8px; }