/* Item Tooltip - Transparent Premium Style */
.item-tooltip {
    position: fixed;
    background: rgba(255, 255, 255, 0.65);
    /* Khung trong suốt kính mờ */
    backdrop-filter: blur(8px);
    color: #333;
    padding: 12px 20px;
    border-radius: 12px;
    z-index: 2000000;
    display: none;
    min-width: 220px;
    max-width: 300px;
    max-height: 450px;
    overflow-y: auto;

    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    transform: translateY(10px) scale(0.95);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* Default to auto so we can interact with it (scroll, click actions), soft-hover will override this with none */
    pointer-events: auto;
}

/* Chỉ cho phép tương tác với nút bấm, không block phần còn lại */
.item-tooltip .item-actions {
    pointer-events: auto;
}

/* Khi đang soft-hover, cấm mọi sự kiện chuột/touch để chuột xuyên qua hoàn toàn */
.item-tooltip.soft-hover,
.item-tooltip.soft-hover * {
    pointer-events: none !important;
}

/* Custom scrollbar for tooltip */
.item-tooltip::-webkit-scrollbar {
    width: 4px;
}

.item-tooltip::-webkit-scrollbar-track {
    background: transparent;
}

.item-tooltip::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.item-tooltip.show {
    display: block;
    transform: translateY(0) scale(1);
    opacity: 1;
}

.tooltip-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.item-name {
    font-size: 1.15rem;
    font-weight: 900;
    color: #6b3e1b;
    /* Brown title */
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
    width: 100%;
}

.item-type {
    display: none;
    /* Hide standard type label for simplistic look */
}

.item-description {
    font-size: 0.9rem;
    color: #555555;
    /* Grey description */
    font-weight: bold;
    line-height: 1.4;
    padding-bottom: 12px;
    margin-bottom: 12px;
    width: 100%;
    border-bottom: 2px solid #222;
    /* Black separator */
}

.item-weight {
    display: none;
    /* Hide weight from base layout, optionally show in stats */
}

.item-level-required {
    font-size: 0.9rem;
    font-weight: 800;
    margin-bottom: 8px;
    width: 100%;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
}

.item-level-required.met {
    color: #2e7d32; /* Green when level condition is met */
}

.item-level-required.not-met {
    color: #c62828; /* Red when level condition is not met */
}

.item-stats {
    font-size: 0.95rem;
    color: #4A90E2;
    /* Blue stats */
    font-weight: 800;
    white-space: pre-line;
    line-height: 1.6;
    width: 100%;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 2px solid #222;
    /* Black separator */
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
}

/* Gem text trong item-sockets: den de khong bi mat tren nen sang */
.item-sockets {
    color: #222 !important;
}

.item-sockets div {
    color: #222 !important;
}

.item-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

/* Common premium button styling */
.item-actions button {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.use-item-btn,
.drop-item-btn,
.split-item-btn {
    background-image: url('../assets/icon/inventorynew/buttontuido.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    outline: none;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    transition: filter 0.15s ease;
}

.use-item-btn:hover,
.drop-item-btn:hover,
.split-item-btn:hover {
    filter: brightness(1.2);
}

.use-item-btn:active,
.drop-item-btn:active,
.split-item-btn:active {
    filter: brightness(0.8);
}

/* Mobile Tooltip Styles */
.item-tooltip.mobile-centered {
    max-height: 90vh !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(0.85) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    /* outer container khong scroll */
}

.item-tooltip.mobile-centered.show {
    transform: translate(-50%, -50%) scale(0.9) !important;
}

/* Scroll area: chi phan content, ko tinh nut */
.item-tooltip.mobile-centered .tooltip-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 14px 4px;
    -webkit-overflow-scrolling: touch;
}

/* Nut luon hien o cuoi, khong bi cuon mat */
.item-tooltip.mobile-centered .item-actions {
    flex-shrink: 0;
    padding: 6px 14px 10px;
    background: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0 0 12px 12px;
}

/* Landscape mobile: thu nho them */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .item-tooltip.mobile-centered {
        max-height: 96vh !important;
        max-width: 340px !important;
        font-size: 0.82rem;
    }

    .item-tooltip.mobile-centered .item-name {
        font-size: 1rem;
        margin-bottom: 2px;
    }

    .item-tooltip.mobile-centered .item-stats {
        font-size: 0.82rem;
        line-height: 1.4;
        padding-bottom: 6px;
        margin-bottom: 6px;
    }

    .item-tooltip.mobile-centered .item-description {
        padding-bottom: 6px;
        margin-bottom: 6px;
        font-size: 0.8rem;
    }

    .item-tooltip.mobile-centered .item-actions button {
        padding: 6px 8px;
        font-size: 0.78rem;
    }
}