/* ============================================================
 * LeNavire — Home dashboard polish layer (v2)
 * Loaded AFTER style.css to refine the homeWelcomePage look.
 * Uses isolation + ::before/::after via parent stacking only —
 * does NOT touch positioning of .hwp-ctrl-bar, .hwp-drag-handle,
 * .hwp-resize-handle, .hwp-w-resize (those stay absolute).
 *
 * Pairs with home-polish.js which turns the grid into a true
 * masonry layout (no vertical voids between widgets).
 * ============================================================ */

/* ---------- Page background : depth & aurora ---------- */
.home-welcome-page{
    background:
        radial-gradient(1200px 600px at 8% -10%, rgba(0,217,163,0.07), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(91,141,238,0.06), transparent 65%),
        radial-gradient(1000px 600px at 50% 110%, rgba(168,120,255,0.05), transparent 70%),
        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 100%);
}

/* ---------- HERO — refined glass ---------- */
.hwp-hero{
    margin:18px 24px 0;
    padding:22px 28px 22px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(135deg, rgba(0,217,163,0.07) 0%, rgba(91,141,238,0.07) 50%, rgba(168,120,255,0.05) 100%),
        rgba(10,18,28,0.55);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 18px 50px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.06);
    overflow:hidden;
    isolation:isolate;
}
.hwp-hero::before{
    top:-80px; left:-60px;
    width:380px; height:260px;
    background:radial-gradient(ellipse, rgba(0,217,163,0.18) 0%, transparent 65%);
    filter:blur(8px);
    z-index:-1;
}
.hwp-hero::after{
    top:-30px; right:60px;
    width:340px; height:220px;
    background:radial-gradient(ellipse, rgba(91,141,238,0.15) 0%, transparent 65%);
    filter:blur(8px);
    z-index:-1;
}
.hwp-title{
    font-size:1.7rem;
    background:linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.78) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hwp-title-accent{
    background:linear-gradient(120deg,#00d9a3 0%,#5b8dee 50%,#a878ff 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hwp-logo{
    width:60px; height:60px; min-width:60px;
    border-radius:20px;
    background:linear-gradient(135deg, rgba(0,217,163,0.30), rgba(91,141,238,0.20));
    border:1.5px solid rgba(0,217,163,0.35);
    box-shadow:0 0 32px rgba(0,217,163,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
}
.hwp-hero-tag{
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.10);
    backdrop-filter:blur(6px);
    transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.hwp-hero-tag:hover{
    transform:translateY(-1px);
    border-color:rgba(0,217,163,0.35);
    background:rgba(0,217,163,0.10);
    color:#fff;
}

/* ---------- LAYOUT BAR ---------- */
.hwp-layout-bar{
    padding:14px 28px 4px;
}
.hwp-layout-reset-btn{
    border:1px solid rgba(255,255,255,0.06);
    border-radius:8px;
    padding:6px 12px;
}
.hwp-layout-reset-btn:hover{
    border-color:rgba(0,217,163,0.30);
    background:rgba(0,217,163,0.10);
    color:#00d9a3;
}

/* ============================================================
 * MASONRY GRID — kills vertical voids between widgets.
 * home-polish.js sets explicit grid-row spans for perfect packing.
 * ============================================================ */
.hwp-grid--3.hwp-masonry-ready{
    padding:14px 24px 32px;
    grid-auto-rows: 8px;
    row-gap: 0;
    column-gap: 18px;
}
/* Pre-JS state: avoids flash */
.hwp-grid--3:not(.hwp-masonry-ready){
    padding:14px 24px 32px;
    column-gap: 18px;
    row-gap: 18px;
}

/* ---------- BLOCK — refined glass card (safe, no > * tricks) ---------- */
.hwp-block{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.018) 100%),
        rgba(10,18,28,0.45);
    border:1px solid rgba(255,255,255,0.075);
    border-radius:18px;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow:
        0 4px 14px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.05);
    isolation:isolate;
    transition:
        transform .26s cubic-bezier(.4,0,.2,1),
        border-color .26s ease,
        box-shadow .26s ease;
    /* keep overflow visible so .hwp-ctrl-bar / handles stay clickable */
}
.hwp-block::before{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:radial-gradient(600px 200px at 0% -10%, rgba(0,217,163,0.06), transparent 60%);
    opacity:.7;
    transition:opacity .26s ease;
    z-index:-1;
}
.hwp-block::after{
    content:"";
    position:absolute; left:18px; right:18px; top:0;
    height:2px;
    background:linear-gradient(90deg, transparent, rgba(0,217,163,0.55), rgba(91,141,238,0.55), transparent);
    opacity:0;
    transition:opacity .26s ease;
    border-radius:0 0 2px 2px;
    pointer-events:none;
}
.hwp-block:hover{
    transform:translateY(-3px);
    border-color:rgba(0,217,163,0.30);
    box-shadow:
        0 14px 36px rgba(0,0,0,0.45),
        0 0 0 1px rgba(0,217,163,0.10),
        inset 0 1px 0 rgba(255,255,255,0.07);
}
.hwp-block:hover::before{ opacity:1; }
.hwp-block:hover::after{ opacity:1; }

/* ---------- BLOCK HEADERS ---------- */
.hwp-block-header{
    padding:14px 16px 10px;
    border-bottom:1px solid rgba(255,255,255,0.05);
    background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
}
.hwp-block-title{
    font-size:.74rem;
    letter-spacing:.10em;
    text-transform:uppercase;
    font-weight:800;
    color:rgba(255,255,255,0.78);
    display:inline-flex; align-items:center; gap:8px;
}
.hwp-block-title .hwp-ic{
    color:#00d9a3;
    width:18px; height:18px;
    display:inline-flex; align-items:center; justify-content:center;
}
.hwp-block-title .hwp-ic svg{ width:14px; height:14px; }
.hwp-see-all-btn{
    font-size:.7rem; font-weight:700; letter-spacing:.04em;
    color:rgba(0,217,163,0.85);
    background:rgba(0,217,163,0.08);
    border:1px solid rgba(0,217,163,0.20);
    border-radius:999px;
    padding:4px 12px;
    transition:background .18s, border-color .18s, color .18s;
    cursor:pointer;
}
.hwp-see-all-btn:hover{
    background:rgba(0,217,163,0.18);
    border-color:rgba(0,217,163,0.45);
    color:#fff;
}

/* ---------- ACTION CARDS — themed glow ---------- */
.hwp-action-grid{
    padding:14px 14px 16px;
    gap:10px;
}
.hwp-action-card{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%),
        rgba(255,255,255,0.018);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:13px 12px;
    transition:
        transform .22s cubic-bezier(.34,1.56,.64,1),
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}
.hwp-action-card:hover{
    transform:translateY(-3px) scale(1.015);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%),
        rgba(255,255,255,0.025);
    box-shadow:0 12px 28px rgba(0,0,0,0.45);
}
.hwp-action-icon-box{
    width:38px; height:38px;
    border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
    transition:transform .22s ease, background .22s ease, border-color .22s ease;
    flex-shrink:0;
}
.hwp-action-card:hover .hwp-action-icon-box{
    transform:scale(1.08) rotate(-2deg);
}
.hwp-action-card--friends .hwp-action-icon-box{ background:rgba(88,101,242,0.16);  border-color:rgba(88,101,242,0.30);  color:#9aa4ff; }
.hwp-action-card--pending .hwp-action-icon-box{ background:rgba(250,166,26,0.16);  border-color:rgba(250,166,26,0.30);  color:#ffc36a; }
.hwp-action-card--add     .hwp-action-icon-box{ background:rgba(59,165,93,0.16);   border-color:rgba(59,165,93,0.30);   color:#7ddc9b; }
.hwp-action-card--shop    .hwp-action-icon-box{ background:rgba(240,192,64,0.16);  border-color:rgba(240,192,64,0.30);  color:#ffd86a; }
.hwp-action-card--bp      .hwp-action-icon-box{ background:rgba(168,120,255,0.16); border-color:rgba(168,120,255,0.32); color:#c8a8ff; }

.hwp-action-card--friends:hover{ box-shadow:0 12px 28px rgba(88,101,242,0.25),  0 0 0 1px rgba(88,101,242,0.30); }
.hwp-action-card--pending:hover{ box-shadow:0 12px 28px rgba(250,166,26,0.25),  0 0 0 1px rgba(250,166,26,0.30); }
.hwp-action-card--add:hover    { box-shadow:0 12px 28px rgba(59,165,93,0.25),   0 0 0 1px rgba(59,165,93,0.30); }
.hwp-action-card--shop:hover   { box-shadow:0 12px 28px rgba(240,192,64,0.25),  0 0 0 1px rgba(240,192,64,0.30); }
.hwp-action-card--bp:hover     { box-shadow:0 12px 28px rgba(168,120,255,0.30), 0 0 0 1px rgba(168,120,255,0.35); }

.hwp-action-title{
    font-size:.86rem; font-weight:700; color:#fff; line-height:1.2;
}
.hwp-action-sub{
    font-size:.7rem; color:rgba(255,255,255,0.55); margin-top:2px; line-height:1.3;
}
.hwp-action-chevron{
    color:rgba(255,255,255,0.25);
    transition:transform .22s ease, color .22s ease;
    flex-shrink:0;
}
.hwp-action-card:hover .hwp-action-chevron{
    transform:translateX(3px);
    color:rgba(255,255,255,0.75);
}

/* ---------- DRAG / RESIZE feedback ---------- */
.hwp-block.hwp-dragging{
    opacity:.92;
    box-shadow:0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,217,163,0.40) !important;
    cursor:grabbing;
    z-index:1000 !important;
}
.hwp-drop-zone{
    background:rgba(0,217,163,0.06) !important;
    border:1px dashed rgba(0,217,163,0.45) !important;
    box-shadow:inset 0 0 30px rgba(0,217,163,0.10) !important;
}

/* Drop marker — green (valid) / red (invalid). Smooth size/color transition. */
.hwp-drop-marker{
    transition:
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        height .22s cubic-bezier(.4,0,.2,1) !important;
}
.hwp-drop-marker-label{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:8px;
    color:rgba(0,217,163,0.95);
    transition:color .22s ease;
    pointer-events:none;
    z-index:2;
}
.hwp-drop-marker-text{
    font-size:.78rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.12em;
}
.hwp-drop-marker--invalid{
    background:linear-gradient(135deg, rgba(255,80,90,0.12) 0%, rgba(255,80,90,0.18) 100%) !important;
    border-color:rgba(255,80,90,0.85) !important;
    box-shadow:
        inset 0 0 0 2px rgba(255,80,90,0.25),
        0 0 40px rgba(255,80,90,0.30),
        0 12px 32px rgba(0,0,0,0.20) !important;
    animation:hwp-marker-pulse-red 1.2s ease-in-out infinite !important;
}
.hwp-drop-marker--invalid .hwp-drop-marker-label{
    color:rgba(255,120,130,0.98);
}
.hwp-drop-marker--invalid .hwp-drop-marker-text::after{
    content:" — pas la place";
    opacity:.85;
    font-weight:700;
}
@keyframes hwp-marker-pulse-red{
    0%,100%{
        border-color:rgba(255,80,90,0.85);
        box-shadow:inset 0 0 0 2px rgba(255,80,90,0.25), 0 0 40px rgba(255,80,90,0.30), 0 12px 32px rgba(0,0,0,0.20);
    }
    50%{
        border-color:rgba(255,80,90,1);
        box-shadow:inset 0 0 0 2px rgba(255,80,90,0.40), 0 0 60px rgba(255,80,90,0.55), 0 12px 32px rgba(0,0,0,0.20);
    }
}

/* Smoother widget rearrangement during drag (FLIP-anim friendly) */
.hwp-block{
    /* keep existing transition defined above */
}

/* ---------- STAT rows ---------- */
.hwp-stats-list{ padding:8px 14px 14px; }
.hwp-stat-row{
    border-bottom:1px solid rgba(255,255,255,0.04);
    padding:9px 0;
}
.hwp-stat-row:last-of-type{ border-bottom:none; }
.hwp-stat-value{
    color:#fff;
    font-weight:700;
}

/* ---------- ONLINE BADGE ---------- */
.hwp-online-badge{
    background:rgba(59,165,93,0.18);
    color:#7ddc9b;
    border:1px solid rgba(59,165,93,0.30);
    border-radius:999px;
    font-weight:800;
    font-size:.7rem;
    padding:2px 9px;
}

/* ---------- DENSITY tweaks ---------- */
@media (max-width: 1500px){
    .hwp-hero{ margin:14px 18px 0; padding:18px 22px; }
    .hwp-grid--3.hwp-masonry-ready{ padding:12px 18px 24px; column-gap:14px; }
    .hwp-grid--3:not(.hwp-masonry-ready){ padding:12px 18px 24px; column-gap:14px; }
}

/* ---------- EN VEDETTE � redesign featured cards ---------- */

/* Tighter, cleaner grid — 2 cards per row in the home widget */
.hwp-featured-grid{
    display:grid !important;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
    gap:12px !important;
    padding:14px !important;
}

.hwpf-card-wrap{ min-width:0; }

.hwpf-card{
    border-radius:14px !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%),
        rgba(10,18,28,0.55) !important;
    overflow:hidden !important;
    transition:
        transform .28s cubic-bezier(.34,1.56,.64,1),
        border-color .28s ease,
        box-shadow .28s ease !important;
    position:relative;
}
.hwpf-card::before{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%);
    z-index:1;
    border-radius:inherit;
    opacity:.0;
    transition:opacity .28s ease;
}
.hwpf-card:hover{
    transform:translateY(-4px) scale(1.02);
}
.hwpf-card:hover::before{ opacity:.0; }

/* Preview area — taller, more breathing room */
.hwp-featured-grid .hwpf-card .shop-preview,
.hwp-featured-grid .hwpf-card .shop-preview--theme{
    height: 132px !important;
    border-radius:0 !important;
    flex-shrink:0;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
        rgba(0,0,0,0.25);
}
.hwp-featured-grid .hwpf-card .shop-preview-font-sample{
    font-size: 1.55rem !important;
    line-height: 1.1;
}
.hwp-featured-grid .hwpf-card .spt-mockup{
    width: 78% !important;
    height: 70% !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}

/* Category chip — bigger, readable, top-right */
.hwp-featured-grid .hwpf-cat{
    top:8px !important; left:8px !important;
    font-size: 0.6rem !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    letter-spacing: .07em;
    backdrop-filter: blur(10px) saturate(140%);
    background-color: rgba(0,0,0,0.45) !important;
    z-index:5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    gap:5px;
}
.hwp-featured-grid .hwpf-cat svg{ width:11px; height:11px; }

/* Info pad below preview */
.hwp-featured-grid .hwpf-info{
    padding:10px 12px 12px !important;
    gap:8px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0));
    border-top: 1px solid rgba(255,255,255,0.05);
}
.hwp-featured-grid .hwpf-row{
    align-items:center;
    gap:8px !important;
}
.hwp-featured-grid .hwpf-name{
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing:.005em;
}
.hwp-featured-grid .hwpf-price-chip{
    font-size: .7rem !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(240,192,64,0.18), rgba(240,192,64,0.10)) !important;
    border:1px solid rgba(240,192,64,0.40) !important;
    color:#ffd86a !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    gap:4px;
}
.hwp-featured-grid .hwpf-price-chip img{
    width: 11px !important; height: 11px !important; opacity:1 !important;
}
.hwp-featured-grid .hwpf-owned-chip{
    font-size: .7rem !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(0,217,163,0.22), rgba(0,217,163,0.12)) !important;
    border:1px solid rgba(0,217,163,0.45) !important;
    color:#3ce0b3 !important;
}
.hwp-featured-grid .hwpf-meta-row{
    gap:6px !important;
}
.hwp-featured-grid .hwpf-rarity-inner .rarity-badge{
    font-size: .58rem !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    max-width: none !important;
}
.hwp-featured-grid .hwpf-eye-btn{
    width: 26px !important; height: 26px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.06) !important;
    border:1px solid rgba(255,255,255,0.12) !important;
}
.hwp-featured-grid .hwpf-eye-btn:hover{
    background: rgba(0,217,163,0.18) !important;
    border-color: rgba(0,217,163,0.35) !important;
    color:#fff !important;
}
.hwp-featured-grid .hwpf-eye-btn svg{ width:13px !important; height:13px !important; }

/* CTA button */
.hwp-featured-grid .hwpf-btn{
    padding: 7px 10px !important;
    border-radius: 10px !important;
    font-size: .74rem !important;
    font-weight: 800 !important;
    letter-spacing:.02em;
    transition: transform .15s ease, background .18s ease, box-shadow .18s ease !important;
}
.hwp-featured-grid .hwpf-btn--buy{
    background: linear-gradient(135deg, #00e8ae 0%, #00b388 100%) !important;
    color:#06140e !important;
    box-shadow: 0 4px 14px rgba(0,217,163,0.30);
}
.hwp-featured-grid .hwpf-btn--buy:hover{
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(0,217,163,0.45);
}
.hwp-featured-grid .hwpf-btn--equip{
    background: rgba(0,217,163,0.15) !important;
    color:#3ce0b3 !important;
    border:1px solid rgba(0,217,163,0.35) !important;
}
.hwp-featured-grid .hwpf-btn--locked{
    background: rgba(255,255,255,0.04) !important;
    color: rgba(255,255,255,0.5) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
}

/* Themed glow on hover per type */
.hwp-featured-grid .hwpf-card--theme:hover{
    border-color: rgba(91,141,238,0.55) !important;
    box-shadow: 0 14px 32px rgba(91,141,238,0.30);
}
.hwp-featured-grid .hwpf-card--badge:hover{
    border-color: rgba(240,192,64,0.55) !important;
    box-shadow: 0 14px 32px rgba(240,192,64,0.28);
}
.hwp-featured-grid .hwpf-card--aura:hover{
    border-color: rgba(0,217,163,0.55) !important;
    box-shadow: 0 14px 32px rgba(0,217,163,0.32);
}
.hwp-featured-grid .hwpf-card--font:hover{
    border-color: rgba(168,120,255,0.55) !important;
    box-shadow: 0 14px 32px rgba(168,120,255,0.30);
}

/* Compact mode for very narrow widget */
@media (max-width: 1100px){
    .hwp-featured-grid{
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap:10px !important;
    }
    .hwp-featured-grid .hwpf-card .shop-preview,
    .hwp-featured-grid .hwpf-card .shop-preview--theme{
        height: 112px !important;
    }
    .hwp-featured-grid .hwpf-name{ font-size:.78rem !important; }
}
/* ---------- EN VEDETTE � fix overflows in font/aura previews ---------- */
.hwp-featured-grid .shop-preview-aura-bg { display:none !important; }
.hwp-featured-grid .shop-mp-card { min-width:0 !important; max-width:100% !important; gap:8px !important; padding:8px 10px !important; }
.hwp-featured-grid .shop-mp-info { min-width:0 !important; flex:1 1 0 !important; max-width:100% !important; overflow:hidden !important; }
.hwp-featured-grid .shop-mp-name-row { min-width:0 !important; overflow:hidden !important; }
.hwp-featured-grid .shop-mp-name { font-size:.78rem !important; max-width:100% !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:block !important; min-width:0 !important; }
.hwp-featured-grid .shop-mp-name--font { font-size:.78rem !important; line-height:1.25 !important; letter-spacing:0 !important; text-shadow:none !important; max-width:100% !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:block !important; }
.hwp-featured-grid .shop-mp-handle { font-size:.6rem !important; max-width:100% !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:block !important; }
.hwp-featured-grid .shop-mp-avatar { width:34px !important; height:34px !important; flex-shrink:0 !important; }
.hwp-featured-grid .shop-mp-avatar--aura { width:38px !important; height:38px !important; }
.hwp-featured-grid .shop-preview-font-tag { display:none !important; }