.qrd-status-active { color: #2a7a2a; font-weight: 600; }
.qrd-status-expired { color: #b32d2e; font-weight: 600; }
.qrd-status-disabled { color: #8a8a8a; font-weight: 600; }

.qrd-card { background: #fff; }
.qrd-stats > div { text-align: center; min-width: 90px; }
.qrd-sticker-embed { margin-top: 12px; }

.qrd-tabs-nav, .qrd-subtabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}
.qrd-tab-btn, .qrd-subtab-btn {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 500;
    color: #555;
}
.qrd-tab-btn.is-active, .qrd-subtab-btn.is-active {
    background: #fff;
    color: #000;
    border-bottom: 2px solid #fff;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}
.qrd-tab-btn:hover, .qrd-subtab-btn:hover { background: #eee; }
.qrd-tab-panel .qrd-card { margin-bottom: 0; }

/* Sous-onglets (Redirection / Statistiques / QR code) à l'intérieur de
   chaque fiche QR : même style que les onglets principaux, dans un
   encadré légèrement distinct pour marquer visuellement l'imbrication. */
.qrd-subtabs { margin-top: 16px; }
.qrd-subtabs-nav { margin-bottom: 16px; }

/* Diagrammes en bâtons (CSS pur, pas de dépendance JS externe). */
.qrd-subtab-panel h4 { margin: 20px 0 8px; font-size: 14px; }
.qrd-subtab-panel h4:first-of-type { margin-top: 20px; }

.qrd-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.qrd-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 auto;
    min-width: 20px;
}
.qrd-chart-value {
    font-size: 11px;
    color: #555;
    height: 14px;
    line-height: 14px;
}
.qrd-chart-track {
    width: 100%;
    max-width: 26px;
    height: 100px;
    background: #f4f4f4;
    border-radius: 3px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.qrd-chart-bar {
    width: 100%;
    background: #2271b1;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}
.qrd-chart-label {
    font-size: 10px;
    color: #777;
    margin-top: 4px;
    white-space: nowrap;
}

/* Onglet "QR code" : le shortcode [qr_sticker] est appelé avec le formulaire
   pré-soumis (voir class-qrd-account.php), on masque donc uniquement la
   colonne du formulaire pour ne garder que l'aperçu + les téléchargements.
   Scope strictement limité à .qrd-sticker-embed--auto : la vraie page
   autonome du plugin QR Sticker (hors "Mon compte") n'est jamais touchée. */
.qrd-sticker-embed--auto .builder-col { display: none !important; }
.qrd-sticker-embed--auto .layout { display: block; }
.qrd-sticker-embed--auto .preview-col { width: 100%; max-width: 360px; margin: 0 auto; }
.qrd-sticker-embed--auto .panel-head h3 { font-size: 15px; }

/* ============================================================
   Harmonisation du panneau "Aperçu et téléchargements" (onglet
   "QR code") avec les couleurs du menu "Mon compte" (rose clair
   / liseré rouge), reprises telles quelles depuis le CSS du
   thème : --wc-bg-menu:#fbeced ; --wc-border-soft:rgba(239,20,
   20,.35) ; --wc-border-radius:18px.
   Le panneau qr21-merged (plugin QR Sticker) applique par
   défaut un fond sombre + liseré rouge marqué et un titre
   "Aperçu et téléchargements" en blanc : on neutralise ça ici
   avec des règles !important, strictement scopées sous
   .qrd-sticker-embed--auto pour ne jamais toucher la page
   autonome du plugin QR Sticker.
   Les boutons de téléchargement / achat / support en bas du
   panneau ne sont volontairement PAS modifiés (couleurs et
   textes inchangés, comme demandé). */
.qrd-sticker-embed--auto .qr21-merged .preview-col .panel {
    background: #fbeced !important;
    border: 1px solid rgba(239, 20, 20, 0.35) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    overflow: hidden;
}
.qrd-sticker-embed--auto .qr21-merged .preview-col .panel-head {
    background: transparent !important;
    border-bottom: 1px solid rgba(239, 20, 20, 0.25) !important;
}
.qrd-sticker-embed--auto .qr21-merged .preview-col .panel-head h3 {
    color: #1f0a0c !important;
}
.qrd-sticker-embed--auto .qr21-merged .preview-col .preview-box {
    background: #fff !important;
}

/* ============================================================
   Icône "redirection" devant le lien "QR Code dynamique" dans le
   menu "Mon compte", pour le distinguer visuellement des autres
   entrées (Tableau de bord, Commandes, etc.). Flèche qui tourne
   ("corner-up-right"), symbole classique de redirection/lien
   raccourci. Rendue via mask + currentColor : elle suit donc
   automatiquement la couleur du texte du lien (y compris au
   survol / à l'état actif, déjà gérés par le thème). */
.woocommerce-MyAccount-navigation-link--qr-dynamique > a::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 14 20 9 15 4'%3E%3C/polyline%3E%3Cpath d='M4 20v-7a4 4 0 0 1 4-4h12'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 14 20 9 15 4'%3E%3C/polyline%3E%3Cpath d='M4 20v-7a4 4 0 0 1 4-4h12'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}