/* Tchin pour WooCommerce : le moyen de paiement à la caisse et la page de paiement. Couleurs de Tchin, tailles en rem,
   toutes les règles préfixées « tchin-wc » pour ne rien toucher du thème de la boutique. */
.tchin-wc-logos { display: inline-flex; align-items: center; vertical-align: middle; margin-left: .5rem; }
.tchin-wc-logos img { width: 1.5rem !important; height: 1.5rem !important; max-height: none !important; margin: 0 0 0 -.3rem !important; padding: 0 !important; border: .125rem solid #fff !important; border-radius: 50% !important; object-fit: cover; background: #fff; box-shadow: 0 0 0 .0625rem rgba(23, 19, 16, .08); }
.tchin-wc-logos img:first-child { margin-left: 0 !important; }
.tchin-wc-cache { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Le logo complet de Tchin, à la caisse en blocs et à la caisse classique */
.tchin-wc-libelle__logo, .tchin-wc-icone__logo { display: block; width: auto !important; height: 1.75rem !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }

/* Le logo à la couleur d'accent : une forme découpée dans le logo noir */
.tchin-wc-logo-masque { display: block; aspect-ratio: 3321 / 887; -webkit-mask: var(--tchin-wc-logo) center / contain no-repeat; mask: var(--tchin-wc-logo) center / contain no-repeat; }
.tchin-wc-libelle__image { display: inline-flex; }
.tchin-wc-libelle__nom { font-weight: 600; }

/* La page de commande en blocs */
.tchin-wc-libelle { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; width: 100%; }
.tchin-wc-libelle .tchin-wc-logos { margin-left: auto; }

/* La page de commande classique : le nom du moyen est remplacé par le logo (il reste lu par les lecteurs d'écran) */
li.payment_method_tchin > label { display: inline-flex !important; align-items: center; gap: .75rem; width: calc(100% - 2rem); font-size: 0 !important; line-height: 1 !important; vertical-align: middle; }
li.payment_method_tchin > label .tchin-wc-icone { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: 1rem; }
li.payment_method_tchin > label .tchin-wc-logos { margin-left: auto; }
li.payment_method_tchin > label:has(.tchin-wc-icone--nom) { font-size: inherit !important; line-height: inherit !important; }

/* Le bouton de la page de paiement : la couleur choisie dans les réglages (sinon l'orange de Tchin) */
.tchin-wc-paiement .tchin-wc-bouton { background: var(--tchin-wc-bouton, #E17A21); color: var(--tchin-wc-bouton-texte, #161616); }
.tchin-wc-paiement .tchin-wc-bouton:hover, .tchin-wc-paiement .tchin-wc-bouton:focus-visible { background: var(--tchin-wc-bouton, #E17A21); color: var(--tchin-wc-bouton-texte, #161616); filter: brightness(.92); }
.tchin-wc-paiement__definitif { margin: .75rem 0 0 !important; color: #8A7663; font-size: .78rem; line-height: 1.45; text-align: center; }
.tchin-wc-description p { margin: 0; }
.tchin-wc-description__test, .tchin-wc-paiement__test { display: inline-block; margin: 0 0 .5rem !important; padding: .3rem .7rem; border-radius: 999px; background: #FEF3C7; color: #92400E; font-size: .8rem; }

/* La page de paiement */
.tchin-wc-paiement { box-sizing: border-box; max-width: 30rem; margin: 1.5rem 0; padding: 1.5rem; border: .0625rem solid #EADFD0; border-radius: 1.25rem; background: #FFFFFF; color: #3A1C0A; box-shadow: 0 1rem 2.5rem -1.5rem rgba(23, 19, 16, .35); }
.tchin-wc-paiement *, .tchin-wc-paiement *::before { box-sizing: border-box; }
.tchin-wc-paiement__tete { display: flex; align-items: center; gap: .9rem; }
.tchin-wc-paiement__tete > img { flex: none; width: 2.75rem; height: 2.75rem; padding: .55rem; border-radius: 50%; background: #171310; }
.tchin-wc-paiement__etiquette { margin: 0 !important; color: #6E5846; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.tchin-wc-paiement__montant { margin: .1rem 0 0 !important; font-size: 1.75rem; line-height: 1.1; font-weight: 600; color: #171310; }
.tchin-wc-paiement__montant span { font-size: .95rem; font-weight: 400; color: #6E5846; }
.tchin-wc-paiement__test { margin-top: 1rem !important; }
.tchin-wc-paiement__texte { margin: 1rem 0 0 !important; color: #6E5846; font-size: .95rem; line-height: 1.5; }
.tchin-wc-paiement .tchin-wc-bouton { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.1rem; margin-top: 1rem; padding: .8rem 1.5rem; border: 0; border-radius: 999px; background: #E67A1E; color: #3A1C0A; font-size: 1.05rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s; }
.tchin-wc-paiement .tchin-wc-bouton:hover, .tchin-wc-paiement .tchin-wc-bouton:focus-visible { background: #D96F14; color: #3A1C0A; }
.tchin-wc-paiement .tchin-wc-bouton[hidden] { display: none; }
.tchin-wc-paiement__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: .0625rem solid #EADFD0; }
.tchin-wc-paiement__pied .tchin-wc-logos { margin-left: 0; }
.tchin-wc-paiement__pied a { color: #A84A08; font-size: .9rem; }

/* La fiche Tchin dans une commande (administration) */
.tchin-wc-fiche { margin-top: 1rem; }
.tchin-wc-fiche code { font-size: .85em; }

/* Le tableau de bord du vendeur (Dokan, WCFM) : ses retraits par Tchin */
.tchin-wc-retraits { box-sizing: border-box; margin: 1.25rem 0; padding: 1.25rem; border: .0625rem solid #EADFD0; border-radius: 1.25rem; background: #FFFFFF; color: #161616; }
.tchin-wc-retraits * { box-sizing: border-box; }
.tchin-wc-retraits__titre { margin: 0 0 .75rem !important; font-size: 1.05rem; }
.tchin-wc-retraits ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tchin-wc-retraits li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; padding: .7rem .9rem; border-radius: 1rem; background: #FAF5EE; }
.tchin-wc-retraits__montant { font-size: 1rem; font-variant-numeric: tabular-nums; }
.tchin-wc-retraits__etat { padding: .2rem .65rem; border-radius: 999px; background: #EFE7DC; font-size: .78rem; }
.tchin-wc-retraits__etat--completed { background: #DCFCE7; color: #15803D; }
.tchin-wc-retraits__etat--processing { background: #FEF3C7; color: #92400E; }
.tchin-wc-retraits__etat--failed, .tchin-wc-retraits__etat--cancelled { background: #FEE2E2; color: #B91C1C; }
.tchin-wc-retraits__bouton { margin-left: auto; padding: .55rem 1.2rem; border: 0; border-radius: 999px; background: #161616; color: #FDF6EC; font: inherit; font-size: .88rem; cursor: pointer; }
.tchin-wc-retraits__bouton:hover, .tchin-wc-retraits__bouton:focus-visible { background: #000; }
.tchin-wc-retraits__bouton:disabled { opacity: .5; }
.tchin-wc-retraits__note { margin-left: auto; color: #6E5846; font-size: .8rem; }
.tchin-wc-retraits__test { padding: .15rem .5rem; border-radius: 999px; background: #FEF3C7; color: #92400E; font-size: .7rem; }
.tchin-wc-retraits__alerte { margin: .9rem 0 0 !important; color: #78350F; font-size: .8rem; }
.tchin-wc-vendeur-texte { color: #6E5846; }

/* Le bouton Tchin dans une page (bloc « Paiement Tchin » ou code court [tchin]) */
.tchin-bouton { margin-left: auto; margin-right: auto; }
.tchin-bouton__libre { display: flex; align-items: baseline; gap: .5rem; margin: .2rem 0 0 !important; }
.tchin-bouton__libre input { width: 9rem; min-height: 0; margin: 0; padding: .2rem .7rem; border: .0625rem solid #E5D9CA; border-radius: .75rem; background: #FFFDF9; color: #171310; font: inherit; font-size: 1.5rem; font-weight: 600; line-height: 1.2; box-shadow: none; }
.tchin-bouton__libre input:focus { border-color: #171310; outline: 0; box-shadow: 0 0 0 .2rem rgba(225, 122, 33, .2); }
.tchin-bouton__libre span { color: #6E5846; font-size: .95rem; }
.tchin-bouton__bornes { margin: .6rem 0 0 !important; color: #8A7663; font-size: .8rem; }
.tchin-bouton .tchin-wc-bouton:disabled { opacity: .6; cursor: wait; }
.tchin-bouton--paye .tchin-wc-paiement__texte[data-tchin-texte] { padding: .8rem 1rem; border-radius: 1rem; background: #DCFCE7; color: #14532D; text-align: center; }
.tchin-bouton--paye .tchin-bouton__libre input { pointer-events: none; }