/**
 * Pokelite Custom — Frontend CSS
 * Tous les styles des modules en un seul fichier.
 * v3.0.0
 */

/* ============================================
   VARIABLES
   ============================================ */
:root {
    --pk-gold:       #c5a059;
    --pk-gold-light: #fffbf0;
    --pk-dark:       #1a1a1a;
    --pk-dark-soft:  #2d3748;
    --pk-text:       #333;
    --pk-muted:      #888;
    --pk-border:     #eee;
    --pk-bg-light:   #f8f9fa;
}

/* ============================================
   BADGES CATALOGUE (Premium + Précommande)
   ============================================ */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.wc-block-grid__product-link,
.product-inner {
    position: relative !important;
}

.pk-catalog-badge {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--pk-dark);
    color: var(--pk-gold);
    font-size: 11px; font-weight: 800;
    text-transform: uppercase;
    padding: 6px 10px; border-radius: 3px;
    border: 1px solid var(--pk-gold);
    z-index: 99;
    letter-spacing: 0.5px; line-height: 1;
}

.pk-badge-preorder {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--pk-dark-soft);
    color: #fff;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase;
    padding: 6px 10px; border-radius: 3px;
    border: 1px solid #34495e;
    z-index: 90;
    letter-spacing: 0.5px; line-height: 1;
}

/* ============================================
   FICHE PRODUIT — Message Premium Lock
   ============================================ */
.pk-premium-lock {
    background: var(--pk-gold-light);
    border: 1px solid var(--pk-gold);
    color: var(--pk-dark);
    padding: 20px; margin: 20px 0;
    border-radius: 4px; text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    clear: both;
}

.pk-lock-icon  { font-size: 24px; display: block; margin-bottom: 10px; }
.pk-lock-title { font-weight: bold; text-transform: uppercase; color: var(--pk-gold); display: block; margin-bottom: 5px; }
.pk-lock-link  { color: var(--pk-dark); text-decoration: underline; font-weight: 600; }

/* ============================================
   FICHE PRODUIT — Drop Box (compte à rebours)
   ============================================ */
.pk-drop-box {
    background: var(--pk-dark-soft);
    color: #fff;
    padding: 20px; text-align: center;
    border-radius: 4px; margin-bottom: 20px;
    border-left: 5px solid var(--pk-gold);
}

.pk-drop-icon  { font-size: 20px; display: block; margin-bottom: 5px; }
.pk-drop-title { text-transform: uppercase; letter-spacing: 1px; font-weight: bold; display: block; margin-bottom: 10px; color: var(--pk-gold); font-size: 12px; }

.availability.pk-drop-coming-soon {
    color: var(--pk-dark-soft); font-weight: 800;
    background: #e2e8f0;
    padding: 5px 10px; border-radius: 4px;
    display: inline-block;
}

/* ============================================
   MON COMPTE — Carte de Dresseur
   ============================================ */
.woocommerce-MyAccount-content > p:first-child { display: none !important; }
.pk-dashboard-wrapper p { display: block !important; }
.pk-dashboard-wrapper { margin-left: 20px; margin-right: -10px; margin-bottom: 40px; }

.pk-trainer-card-pro {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: 5px solid var(--pk-gold);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    overflow: hidden;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--pk-text);
}

.pk-card-header  { display: flex; align-items: center; gap: 25px; padding: 30px; }
.pk-avatar-section img { border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.pk-identity-section { flex-grow: 1; }

.pk-pill { background: var(--pk-dark-soft); color: #fff; font-size: 9px; font-weight: bold; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; letter-spacing: 1px; }
.pk-name { margin: 8px 0; font-size: 28px; color: #1a202c; line-height: 1.1; font-weight: 800; letter-spacing: -0.5px; }

.pk-rank-badge {
    display: inline-block;
    background: var(--pk-gold-light);
    border: 1px solid var(--pk-gold);
    color: #b48a3c; font-size: 11px; font-weight: 700;
    padding: 4px 12px; border-radius: 20px;
    text-transform: uppercase;
}

.pk-ranking-box { text-align: center; min-width: 140px; padding: 15px; border-radius: 10px; border: 1px solid var(--pk-border); background: #fafafa; }
.pk-ranking-box.pk-rank-gold  { background: #fff9c4; }
.pk-ranking-box.pk-rank-top10 { background: #ffebee; }

.pk-label-center { font-size: 10px; text-transform: uppercase; color: var(--pk-muted); letter-spacing: 1px; margin-bottom: 5px; font-weight: bold; }
.pk-rank-icon    { font-size: 24px; margin-right: 5px; vertical-align: middle; }
.pk-rank-number  { color: var(--pk-gold); font-weight: 900; font-size: 28px; }
.pk-rank-na      { color: #999; font-size: 14px; font-weight: bold; text-transform: uppercase; }
.pk-rank-pending { color: #aaa; font-size: 11px; }

.pk-stats-container { background: var(--pk-bg-light); padding: 25px 30px; border-top: 1px solid var(--pk-border); }
.pk-meta-row  { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; margin-bottom: 20px; }
.pk-icon      { font-size: 16px; opacity: 0.7; }

.pk-xp-labels { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; color: #555; }
.pk-target strong  { color: var(--pk-gold); }
.pk-percent strong { color: var(--pk-dark-soft); }

.pk-bar-bg   { background: #e2e8f0; height: 12px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
.pk-bar-fill  { background: linear-gradient(90deg, var(--pk-gold), #f6e05e); height: 100%; border-radius: 6px; position: relative; transition: width 1s ease-in-out; }
.pk-bar-shine { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg) translateX(-150%); animation: pk-shine 2s infinite; }

@keyframes pk-shine { 100% { transform: skewX(-20deg) translateX(150%); } }

/* ============================================
   MON COMPTE — Club Premium
   ============================================ */
.pk-wrapper { background: #fff; border: 1px solid #eaeaea; border-radius: 4px; overflow: hidden; }
.pk-header  { background: var(--pk-dark); color: #fff; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--pk-gold); }
.pk-title   { margin: 0 !important; color: #fff !important; font-size: 1.3em; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.pk-badge   { background: var(--pk-gold); color: #fff; padding: 4px 12px; font-size: 0.75em; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; border-radius: 2px; }
.pk-body    { padding: 30px; }
.pk-intro   { color: #666; margin-bottom: 20px; font-size: 0.95em; }
.pk-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin: 30px 0; }
.pk-stat-card { border: 1px solid var(--pk-border); padding: 20px; text-align: center; transition: border-color 0.2s, transform 0.2s; }
.pk-stat-card:hover { border-color: var(--pk-gold); transform: translateY(-2px); }
.pk-label   { display: block; font-size: 0.8em; text-transform: uppercase; color: var(--pk-muted); margin-bottom: 10px; letter-spacing: 0.5px; }
.pk-value   { font-size: 1.6em; font-weight: 700; color: var(--pk-dark); }
.pk-value--gold { color: var(--pk-gold) !important; }
.pk-goal    { font-size: 0.75em; color: #bbb; margin-top: 5px; }

.pk-status-box { padding: 15px; text-align: center; font-weight: 500; border: 1px solid; margin-top: 10px; }
.pk-status-box--success { background-color: #fcfbf8; border-color: var(--pk-gold); color: #8a6d3b; }
.pk-status-box--pending { background-color: #fafafa; border-color: var(--pk-border); color: #999; font-style: italic; font-size: 0.9em; }
.pk-notice  { padding: 12px 16px; background: #fff8e1; border-left: 3px solid var(--pk-gold); color: #7a5c00; font-size: 0.9em; margin-bottom: 20px; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .pk-dashboard-wrapper { margin-left: 0; margin-right: 0; }
    .pk-card-header { flex-direction: column; text-align: center; padding: 20px; }
    .pk-ranking-box { width: 100%; margin-top: 15px; }
}