/* DIM-like Item Popup Styles */

/* 1. Header Updates */
/* 1. Header Updates */
/* 1. Header Updates */
.popup-header {
    background-size: cover;
    background-position: right center;
    /* Confirmed right-center */
    position: relative;
    overflow: hidden;
    min-height: 80px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* 2. Perks - Active State with !important */
/* 2. Perks - Active State with !important */
.socket-grid.perk-columns .socket-icon.active,
.socket-row .socket-icon.active {
    border-color: #fff !important;
    /* Brighter and thicker */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
    z-index: 10;
}

/* Header Info Shadows for visibility on light backgrounds */
.header-info,
.header-power,
#popup-item-name,
#popup-item-type,
.en-name {
    text-shadow: 0 0 10px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1);
    /* Heavy shadow */
    z-index: 2;
    position: relative;
}

.en-name {
    color: #ddd;
    /* Brighter gray */
    font-weight: bold;
}

/* Constrain Whole Popup Width */
.item-popup-content {
    background-color: #222;
    /* Fallback */
    width: fit-content !important;
    min-width: 270px !important;
    max-width: 95vw !important;
    /* Safety constraint */

    margin: 10% auto;
    /* Center vertical */
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
    padding-bottom: 5px;
    /* Manually reduced padding bottom further */
}

/* Ensure no child forces width */
.popup-header,
.popup-body,
.popup-section {
    max-width: 100%;
    box-sizing: border-box;
}

/* Remove Thumbnail for Header */
.header-icon-container {
    display: none;
}

.header-info {
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 1);
}

.header-power {
    z-index: 2;
    display: flex;
    align-items: center;
    font-size: 24px;
    /* Larger */
    font-weight: 800;
    /* Bolder */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 1);
}

.header-power .power-icon {
    width: 20px;
    height: 20px;
    margin-right: 4px;
}

/* 2. Perks - Circular Icons in Grid */
.socket-grid.perk-columns .socket-icon {
    border-radius: 50%;
    overflow: hidden;
    width: 38px;
    height: 38px;
    background-color: transparent;
    /* Remove square bg */
}

.socket-grid.perk-columns .socket-icon img {
    border-radius: 50%;
}

/* Old Active State Block - Moved below for !important */
/* .socket-grid.perk-columns .socket-icon.active { ... } */

/* 3. Stats Compaction */
.stat-row {
    margin-bottom: 2px;
    /* Very tight spacing */
    height: 14px;
    /* Reduced height */
    line-height: 14px;
    font-size: 11px !important;
    /* Reduced to 11px forced */
    display: flex;
    align-items: center;
}

.stat-label {
    width: 60px;
    /* Reduced label width significantly */
    /* Fixed width for alignment */
    text-align: left;
    /* User requested Left Align */
    padding-right: 8px;
    color: #ccc;
    font-size: 11px !important;
}

.stat-value {
    width: auto !important;
    /* Let it shrink to content */
    min-width: 15px;
    /* Minimum width */
    text-align: left;
    padding-left: 1px !important;
    /* Almost zero padding */
    margin-left: 0 !important;
    font-weight: bold;
    font-size: 11px !important;
}

.stat-bar-container {
    flex-grow: 1;
    height: 10px;
    /* Thinner bars */
}

/* Constrain Stats Width to look better over sockets (e.g. 260px) */
#popup-stats-list {
    max-width: 260px;
    margin-bottom: 5px;
}

/* English Name */
.en-name {
    font-size: 0.8rem;
    color: #999;
    font-style: italic;
    margin-bottom: 2px;
}

/* Combined Bottom Stats (RPM, Mag, Recoil) */
.bottom-combined-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 4px;
    margin-top: 4px;
}

.combined-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}

.stat-label-mini {
    color: #ccc;
    font-size: 12px;
}

.stat-value-text {
    font-weight: bold;
    color: #fff;
}

.mini-arc svg {
    width: 20px;
    height: 10px;
    vertical-align: middle;
}

/* Remove old Text Only Stat styles if conflicting, or override */
/* Text Only Stat (RPM) */
.text-only-stat {
    justify-content: flex-start;
    gap: 0;
}

/* 4. Kill Tracker Specifics */
.kill-tracker-row {
    background: transparent;
    border: none;
    padding: 0 10px 0 10px;
    /* Tight padding */
    margin-bottom: 2px;
    justify-content: flex-end;
    /* Align right */
    height: 18px;
}

.kill-tracker-row .kill-tracker-icon img {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    filter: invert(1);
    opacity: 0.7;
}

.kill-tracker-row .kill-tracker-text .label {
    display: none;
    /* User format: "[Icon] 처치 수 00" -> Icon + Text */
}

.kill-tracker-text .value {
    font-size: 13px;
    font-weight: normal;
    color: #ddd;
}

.recoil-arc {
    display: inline-block;
    vertical-align: middle;
}

/* 2. Socket Layouts */
.socket-row {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
    /* Force single line, expand container */
    justify-content: center;
    /* Center them if container is wider */
}

.socket-grid.perk-columns {
    display: flex;
    gap: 4px;
}

.perk-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 3. Sockets */
.socket-icon {
    width: 40px;
    height: 40px;
    background-color: #222;
    border: 3px solid transparent;
    /* Default transparent border for alignment */
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    /* Include border in size */
}

.socket-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    /* Increased visibility from 0.5 */
}

/* Active State */
.socket-icon.active img {
    opacity: 1.0;
}

.socket-icon.active {
    border: 1px solid #ddd;
}

/* Masterwork Overlay */
.mw-tier-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #ffd700;
    padding: 1px 3px;
    font-weight: bold;
}

.socket-icon.masterwork {
    border-color: #ffd700;
}

/* 4. Kill Tracker */
.kill-tracker-row {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px;
    margin-bottom: 10px;
    border-left: 3px solid #ccc;
}

.kill-tracker-icon img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    filter: invert(1);
}

.kill-tracker-text .label {
    font-size: 10px;
    color: #aaa;
    display: block;
}

.kill-tracker-text .value {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

/* 5. Stats Layout */
.stats-bottom-row {
    display: flex;
    justify-content: flex-end;
    /* Or space-between */
    gap: 15px;
    margin-top: 10px;
    font-size: 12px;
    color: #ccc;
}

.stat-bottom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.text-only-stat {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 4px;
}

.stat-value-text {
    font-weight: bold;
}