/* 
=========================================================
 VoraMU 2026 — Dark Fantasy Forest Theme
 Profiles Styles (Player & Guild)
 Compatible with WebEngine 1.2.2 HTML output
=========================================================
*/

/* ─── CSS Variables ─────────────────────────────────── */
:root {
    --pro-bg:          #050705;
    --pro-green:       #3FAE2A;
    --pro-green-glow:  #7CFF5B;
    --pro-gold:        #D4A62E;
    --pro-gold-glow:   #F0CF63;
    --pro-glass:       rgba(5, 7, 5, 0.85);
    --pro-border:      rgba(124, 255, 91, 0.18);
    --pro-row-bg:      rgba(124, 255, 91, 0.05);
    --pro-text:        #e0e0e0;
    --pro-label:       #D4A62E;   /* gold for label cells */
}

/* ─── Utility ────────────────────────────────────────── */
.fixitemsview {
    padding-right: 0 !important;
    background-color: transparent;
}

/* ═══════════════════════════════════════════════════════
   PLAYER PROFILE CARD
   WebEngine generates: div.profiles_player_card
══════════════════════════════════════════════════════════ */
.profiles_player_card {
    width: 100%;
    background: var(--pro-glass) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--pro-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.85),
                0 0 30px rgba(47, 125, 31, 0.08) !important;
    padding: 30px;
    /* NO overflow:hidden — items are absolute and must not be clipped */
    overflow: visible !important;
    color: var(--pro-text);
}

/* ─── Avatar Column ─────────────────────────────────── 
   WebEngine class: .profiles_player_avatar (col-sm-5)
   All profile_item divs are children of this element.
────────────────────────────────────────────────────── */
.profiles_player_avatar {
    position: relative !important;   /* anchor for absolute items */
    min-height: 520px;
    padding: 0 !important;
    overflow: visible !important;
}

.profiles_player_avatar .profiles_player_avatar_img,
.profiles_player_avatar > img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    filter: drop-shadow(0 0 12px rgba(124, 255, 91, 0.25));
}

/* ─── Equipped Item Slots ───────────────────────────── */
[class^="profile_item"] {
    position: absolute !important;
    border: 1px solid rgba(124, 255, 91, 0.25);
    background: rgba(0, 0, 0, 0.55);
    border-radius: 4px;
    z-index: 10;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

[class^="profile_item"] img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

[class^="profile_item"]:hover {
    border-color: var(--pro-green-glow) !important;
    box-shadow: 0 0 14px var(--pro-green-glow);
    background: rgba(47, 125, 31, 0.15);
}

/* ─── Item Positions (Standard MU Online S6 layout) ── */
/* Slot 0: Left-hand Weapon */
.profile_item0  { left:   8px; top: 155px; width: 72px; height: 115px; }
/* Slot 1: Right-hand Weapon */
.profile_item1  { right:  8px; top: 155px; width: 72px; height: 115px; }
/* Slot 2: Helm */
.profile_item2  { left: 50%; transform: translateX(-50%); top:  28px; width: 72px; height:  72px; }
/* Slot 3: Armor */
.profile_item3  { left: 50%; transform: translateX(-50%); top: 108px; width: 72px; height: 100px; }
/* Slot 4: Pants */
.profile_item4  { left: 50%; transform: translateX(-50%); top: 216px; width: 72px; height:  80px; }
/* Slot 5: Gloves */
.profile_item5  { left: 88px; top: 305px; width: 72px; height:  72px; }
/* Slot 6: Boots */
.profile_item6  { right: 88px; top: 305px; width: 72px; height:  72px; }
/* Slot 7: Wings (behind character — decorative) */
.profile_item7  { left: 50%; transform: translateX(-50%); top: 55px; width: 170px; height: 145px; z-index: 4; opacity: 0.75; background: none !important; border: none !important; }
/* Slot 8: Pet */
.profile_item8  { left: 10px; top:  40px; width: 72px; height:  72px; }
/* Slot 9: Pendant */
.profile_item9  { right: 10px; top: 50px; width: 40px; height:  40px; }
/* Slot 10: Ring 1 */
.profile_item10 { left: 10px; top: 290px; width: 40px; height:  40px; }
/* Slot 11: Ring 2 */
.profile_item11 { right: 10px; top: 290px; width: 40px; height:  40px; }

/* ─── Content Column ────────────────────────────────── */
.profiles_player_content {
    z-index: 5;
    padding-left: 20px;
}

/* Character Name */
.profiles_player_table .cname,
.profiles_player_card .cname {
    font-family: 'Cinzel', serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--pro-gold) !important;
    text-shadow: 0 0 18px var(--pro-gold-glow);
    text-transform: uppercase;
    margin: 0 0 4px 0;
    display: block;
}

/* Character Class */
.profiles_player_table .cclass,
.profiles_player_card .cclass {
    color: var(--pro-green-glow) !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 20px;
}

/* ─── Stats Table ───────────────────────────────────── */
.profiles_player_table_info {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    margin-top: 16px;
    color: var(--pro-text) !important;
}

.profiles_player_table_info tr td {
    padding: 10px 14px !important;
    background: var(--pro-row-bg) !important;
    border: 1px solid rgba(124, 255, 91, 0.1) !important;
    color: var(--pro-text) !important;
    font-size: 14px;
}

/* Label cells (first column) */
.profiles_player_table_info tr td:first-child {
    color: var(--pro-label) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    width: 38%;
    background: rgba(212, 166, 46, 0.08) !important;
}

/* Value cells (second column) */
.profiles_player_table_info tr td:last-child {
    color: #ffffff !important;
    font-weight: 600;
}

/* Hover on stat rows */
.profiles_player_table_info tr:hover td {
    background: rgba(124, 255, 91, 0.1) !important;
    border-color: rgba(124, 255, 91, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════
   GUILD PROFILE CARD
══════════════════════════════════════════════════════════ */
.profiles_guild_card {
    width: 100%;
    background: var(--pro-bg) radial-gradient(circle at top, rgba(47,125,31,0.2), transparent) !important;
    border: 1px solid var(--pro-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8) !important;
    padding: 40px;
    color: #ffffff;
}

.profiles_guild_card .guild_name {
    font-family: 'Cinzel', serif !important;
    font-size: 28px !important;
    color: var(--pro-gold) !important;
    text-shadow: 0 0 15px var(--pro-gold-glow);
    text-transform: uppercase;
}

/* ─── Item Tooltip ──────────────────────────────────── */
.item-box {
    background: rgba(5, 7, 5, 0.97) !important;
    border: 1px solid var(--pro-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.95) !important;
    border-radius: 8px;
    padding: 14px !important;
    color: var(--pro-text) !important;
    min-width: 200px;
}

.item-name {
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    color: #fff !important;
}

/* ─── Item Quality Colors ───────────────────────────── */
.item-opt-exc    { color: #7CFF5B !important; }
.item-opt-anc    { color: #D4A62E !important; }
.item-opt-socket { color: #B6FF7A !important; }
.item-opt-luck   { color: #ffffff !important; }
.item-opt-skill  { color: #a0cfff !important; }