.equipments {

}

.equipments .mapping {
    position: relative;
    width: 400px;
    height: 388px;
}

.equipments .mapping .item-mapping {
    position: absolute;
}

.equipments .mapping .item0 {
    bottom: 17px;
    width: 70px;
    height: 130px;
    left: 7px;
}
.equipments .mapping .item1 {
    bottom: 17px;
    width: 70px;
    height: 130px;
    right: 2px;
}
.equipments .mapping .item2 {
    top: 60px;
    width: 56px;
    height: 64px;
    left: 77px;
}
.equipments .mapping .item3 {
    top: 133px;
    width: 81px;
    height: 98px;
    left: 41px;
}
.equipments .mapping .item4 {
    bottom: 17px;
    width: 60px;
    height: 74px;
    left: 88px;
}
.equipments .mapping .item5 {
    bottom: 155px;
    width: 83px;
    height: 54px;
    right: 44px;
}
.equipments .mapping .item6 {
    bottom: 17px;
    width: 57px;
    height: 74px;
    right: 84px;
}
.equipments .mapping .item7 {
    top: 59px;
    width: 127px;
    height: 112px;
    right: 0px;
}
.equipments .mapping .item8 {
    display: none;
}
.equipments .mapping .item9 {
    top: 81px;
    width: 30px;
    height: 30px;
    right: 137px;
}
.equipments .mapping .item10 {
    bottom: 106px;
    width: 30px;
    height: 30px;
    left: 102px;
}
.equipments .mapping .item11 {
    bottom: 106px;
    width: 30px;
    height: 30px;
    right: 99px;
}

/* Slots para Season 20+ */
.equipments .mapping .item12,
.equipments .mapping .item13,
.equipments .mapping .item14 {
    position: absolute;
    width: 30px;
    height: 30px;
    /* Adiciona um fundo para que o slot seja visível mesmo sem item */
    background: rgba(0,0,0,0.3); 
    border-radius: 3px;
}

.equipments .mapping .item12 { /* Pentagrama */
    bottom: 71px; /* Posição abaixo do anel direito */
    right: 99px; /* Alinhado com o anel direito */
}
.equipments .mapping .item13 { /* Brinco Esquerdo */
    bottom: 141px; /* Posição acima do anel esquerdo */
    left: 102px; /* Alinhado com o anel esquerdo */
}
.equipments .mapping .item14 { /* Brinco Direito */
    bottom: 141px; /* Posição acima do anel direito */
    right: 99px; /* Alinhado com o anel direito */
}

/* ANASTARIA PERFIL VISUAL V3 */

.ana-perfil-character {
    width: 100%;
    min-width: 0;
    color: #fcedc0;
}

/* Page heading */

.ana-perfil-character > .title {
    margin: 0 0 18px;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: transparent;
    color: #fcedc0;
    font-family: "Philosopher", sans-serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Breadcrumb */

.ana-perfil-character .breadcrumber {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    text-transform: uppercase;
}

.ana-perfil-character .breadcrumber li {
    margin: 0;
    padding: 0;
}

.ana-perfil-character .breadcrumber a {
    color: #fcedc0;
    text-decoration: none;
}

.ana-perfil-character .breadcrumber a:hover,
.ana-perfil-character .breadcrumber .active {
    color: #cc7954;
}

/* Information and Guild: same row */

.ana-perfil-character .ana-perfil-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin: 0;
}

.ana-perfil-character .ana-perfil-overview > .box-panel,
.ana-perfil-character > .box-panel {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0 !important;
    padding: 28px;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background-color: #12141f;
    background-image: var(--ana-v3-bg);
    background-position: center top;
    background-repeat: no-repeat;
    box-shadow: 0 10px 15px 4px rgba(0,0,0,.3);
    overflow: hidden;
}

.ana-perfil-character .ana-perfil-overview > .box-panel {
    height: 100%;
}

/* Native Wonder heading */

.ana-perfil-character .box-panel-title.ana-perfil-heading {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 18px;
    padding: 0 0 24px 25px;
    min-height: 0;
    border: 0 !important;
    border-bottom: 1px solid #22252d !important;
    border-radius: 0;
    background: transparent !important;
    color: #cc7954 !important;
    font-family: "Philosopher", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: uppercase;
    box-shadow: none;
}

.ana-perfil-character .ana-perfil-heading::before {
    content: "";
    position: absolute;
    display: block;
    width: 26px;
    height: 26px;
    left: -5px;
    top: 50%;
    margin-top: -25px;
    transform: none;
    border: 0;
    border-radius: 0;
    background: var(--ana-v3-icon) center no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 0 10px #ff2a00);
}

/* Content and typography */

.ana-perfil-character .box-panel-content {
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.ana-perfil-character table.list {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.ana-perfil-character table.list tr {
    background: transparent !important;
}

.ana-perfil-character table.list td {
    padding: 11px 9px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: transparent;
    color: #fcedc0;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    line-height: 1.45;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.ana-perfil-character table.list tr:last-child td {
    border-bottom-color: transparent;
}

.ana-perfil-character table.list td[rowspan] {
    width: 96px;
    text-align: center;
    vertical-align: middle;
}

.ana-perfil-character table.list td[rowspan] img {
    max-width: 80px;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ana-perfil-character .ana-perfil-overview table.list td {
    text-transform: uppercase;
}

.ana-perfil-character .ana-perfil-overview table.list td:nth-child(2) {
    min-width: 85px;
    color: #aaa5a6;
}

.ana-perfil-character .ana-perfil-overview table.list td:last-child {
    color: #f1e0c6;
}

.ana-perfil-character table.list a {
    color: #d7b879;
    text-decoration: none;
}

.ana-perfil-character table.list a:hover {
    color: #fff0c5;
}

/* Original Wonder separator */

.ana-perfil-character .ana-v3-separator {
    display: block;
    width: 100%;
    height: 86px;
    margin: 0;
    background-image: var(--ana-v3-line);
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Equipment slots remain unchanged */

.ana-perfil-character .box-panel-content.equipments {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12px 0 4px;
    overflow-x: auto;
}

.ana-perfil-character .equipments .mapping {
    position: relative;
    width: 400px;
    height: 388px;
    flex: 0 0 400px;
    max-width: none;
}

.ana-perfil-character .equipments .mapping > img {
    max-width: none;
}

@media (max-width: 900px) {
    .ana-perfil-character .ana-perfil-overview {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .ana-perfil-character > .title {
        font-size: 21px;
    }

    .ana-perfil-character .ana-perfil-overview > .box-panel,
    .ana-perfil-character > .box-panel {
        padding: 20px 12px;
    }

    .ana-perfil-character .box-panel-title.ana-perfil-heading {
        font-size: 16px;
        padding-bottom: 18px;
    }

    .ana-perfil-character table.list td {
        padding: 9px 5px;
        font-size: 12px;
    }

    .ana-perfil-character table.list td[rowspan] {
        width: 60px;
    }

    .ana-perfil-character table.list td[rowspan] img {
        max-width: 55px;
    }

    .ana-perfil-character .box-panel-content.equipments {
        justify-content: flex-start;
    }
}

/* END ANASTARIA PERFIL VISUAL V3 */

/* ANASTARIA PERFIL VISUAL V4 */

/* Cover the entire panel using existing Wonder texture */

.ana-perfil-character .ana-perfil-overview > .box-panel,
.ana-perfil-character > .box-panel {
    background-size: 100% 100%;
}

/* Preserve the original class image proportions */

.ana-perfil-character .ana-perfil-class-image {
    display: inline-block;
    width: 80px;
    height: 90px;
    max-width: 100%;
    object-fit: contain;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .ana-perfil-character .ana-perfil-class-image {
        width: 55px;
        height: auto;
        max-height: 90px;
    }
}

/* END ANASTARIA PERFIL VISUAL V4 */

/* ANASTARIA PERFIL VISUAL V5 */

/* Class portrait: native asset, no distortion */

.ana-perfil-character .ana-perfil-class-avatar {
    display: inline-block;
    width: 76px;
    height: 73px;
    max-width: 100%;
    object-fit: contain;
    vertical-align: middle;
}

/* Remove incomplete borders from cells.
   Use a single full-width row separator instead. */

.ana-perfil-character .ana-perfil-overview table.list td {
    border-bottom: 0 !important;
}

.ana-perfil-character .ana-perfil-overview table.list tr {
    position: relative;
}

.ana-perfil-character .ana-perfil-overview table.list tr::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,255,255,.07);
    pointer-events: none;
}

/* Last row uses the same separator width */

.ana-perfil-character .ana-perfil-overview table.list tr:last-child::after {
    background: rgba(255,255,255,.07);
}

@media (max-width: 600px) {
    .ana-perfil-character .ana-perfil-class-avatar {
        width: 55px;
        height: auto;
        max-height: 73px;
    }
}

/* END ANASTARIA PERFIL VISUAL V5 */

/* ANASTARIA PERFIL VISUAL V6 */

/* Separate page label from original database character name */

.ana-perfil-character > .ana-perfil-page-title {
    text-transform: none !important;
}

.ana-perfil-character .ana-v6-title-label {
    color: #fcedc0;
    text-transform: uppercase;
}

.ana-perfil-character .ana-v6-title-name {
    color: #cc7954;
    text-transform: none !important;
}

/* Breadcrumb removed from the view; no global navigation changes */

/* END ANASTARIA PERFIL VISUAL V6 */

/* ANASTARIA PERFIL VISUAL V7A */

/*
 * Equipment presentation only.
 * No slot coordinates or inventory bitmap changes.
 */

.ana-perfil-character .box-panel-content.equipments {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 410px;
    padding: 16px 0 8px;
    overflow-x: auto;
    overflow-y: visible;
    background: transparent;
}

.ana-perfil-character .equipments .mapping {
    position: relative;
    width: 400px;
    height: 388px;
    min-width: 400px;
    flex: 0 0 400px;
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
}

/* Do not stretch the original class inventory image */

.ana-perfil-character .equipments .mapping > img {
    display: block;
    max-width: none;
    height: auto;
}

/*
 * Preserve all native slot positions, images and tooltip events.
 * Apply only a subtle hover enhancement to linked items.
 */

.ana-perfil-character .equipments .mapping a {
    transition: filter .18s ease;
}

.ana-perfil-character .equipments .mapping a:hover {
    filter: brightness(1.12);
}

/* Keep the Wonder background and title untouched */

/* END ANASTARIA PERFIL VISUAL V7A */

/* ANASTARIA PERFIL V7E MARKET PANEL */
.ana-perfil-character .ana-v7e-market-panel {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: 30px 0 24px;
    padding: 28px 32px 30px;
    background:
        url('/templates/wonder/assets/images/block-arka.jpg')
        center center / 100% 100% no-repeat;
}

.ana-perfil-character .ana-v7e-market-heading {
    position: relative;
    min-height: 52px;
    display: flex;
    align-items: flex-start;
    padding: 0 0 22px;
    margin: 0 0 22px;
    border-bottom: 1px solid rgba(170, 170, 195, 0.13);
}

.ana-perfil-character .ana-v7e-market-title {
    position: relative;
    margin: 0;
    padding: 0 0 0 28px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
    color: #dc8b56;
    text-transform: uppercase;
}

.ana-perfil-character .ana-v7e-market-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 19px;
    height: 19px;
    background:
        url('/templates/wonder/assets/images/title-icon.png')
        center / contain no-repeat;
}

.ana-perfil-character .ana-v7e-market-body {
    min-height: 110px;
}

.ana-perfil-character .ana-v7e-market-panel .market-perfil {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 22px;
}

.ana-perfil-character .ana-v7e-market-panel .market-perfil > .item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    min-width: 155px;
    max-width: 190px;
    padding: 16px 18px;
    border: 1px solid rgba(160, 150, 185, 0.12);
    background: rgba(7, 9, 20, 0.32);
    text-align: center;
}

.ana-perfil-character .ana-v7e-market-panel .item .name {
    width: 100%;
    min-height: 30px;
    color: #e2d8cc;
    font-size: 13px;
    line-height: 18px;
}

.ana-perfil-character .ana-v7e-market-panel .item .image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90px;
    margin: 8px 0;
}

.ana-perfil-character .ana-v7e-market-panel .item .image img {
    max-width: 100%;
    height: auto;
}

.ana-perfil-character .ana-v7e-market-panel .item .info {
    width: 100%;
    margin-top: 8px;
    color: #d8b68c;
    font-size: 13px;
    line-height: 20px;
}

.ana-perfil-character .ana-v7e-market-panel .item .buy {
    margin-top: 12px;
}
/* END ANASTARIA PERFIL V7E MARKET PANEL */

/* ANASTARIA PERFIL V7E-R5
   Scoped Market card improvements.
   No global tooltip overrides.
*/

.ana-perfil-character .ana-v7e-market-panel .market-perfil {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.ana-perfil-character .ana-v7e-market-panel .market-perfil > .item {
    width: 185px;
    min-width: 185px;
    max-width: 185px;
    min-height: 215px;
    padding: 17px 15px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid rgba(160, 150, 185, 0.15);
    background: rgba(7, 9, 20, 0.32);
}

.ana-perfil-character .ana-v7e-market-panel .market-perfil > .item .name {
    width: 100%;
    min-height: 36px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 18px;
    color: #e2d8cc;
    text-align: center;
    overflow-wrap: anywhere;
}

.ana-perfil-character .ana-v7e-market-panel .market-perfil > .item .image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100px;
    margin: 0 0 12px;
}

.ana-perfil-character .ana-v7e-market-panel .market-perfil > .item .image img {
    max-width: 100%;
    height: auto;
}

.ana-perfil-character .ana-v7e-market-panel .market-perfil > .item .info {
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
    font-size: 13px;
    line-height: 19px;
    color: #d8b68c;
    text-align: center;
}

.ana-perfil-character .ana-v7e-market-panel .market-perfil > .item .buy {
    margin-top: 12px;
}

/* END ANASTARIA PERFIL V7E-R5 */

/* ANASTARIA PERFIL V7E-R8-FIX1 START */
/*
   Market-only PowerTip styling.
   Morpheus JavaScript and native item content unchanged.
*/

@supports selector(body:has(.ana-v7e-market-panel .image:hover)) {

    body:has(.ana-perfil-character .ana-v7e-market-panel .image[data-tooltip]:hover)
    #morpheus-tooltip {
        box-sizing: border-box;
        width: 250px;
        min-width: 240px;
        max-width: 260px;
        padding: 13px 15px;
        white-space: normal;
        overflow-wrap: break-word;
        font-size: 13px;
        line-height: 1.5;
        z-index: 99999;
    }

    body:has(.ana-perfil-character .ana-v7e-market-panel .image[data-tooltip]:hover)
    #morpheus-tooltip .item-desc {
        box-sizing: border-box;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.5;
    }
}

/* ANASTARIA PERFIL V7E-R8-FIX1 END */


/* ANASTARIA CHARACTER GUILD STYLE PARITY */
.ana-perfil-character:not(.ana-perfil-guild-page) .ana-perfil-overview table.list td {
    padding: 13px 17px;
    text-transform: none;
}
.ana-perfil-character:not(.ana-perfil-guild-page) .ana-perfil-overview table.list td:not([rowspan]):not(:last-child) {
    width: 150px;
    color: #cb8563;
    font-family: "Philosopher", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .45px;
}
.ana-perfil-character:not(.ana-perfil-guild-page) .ana-perfil-overview table.list td:last-child {
    color: #e2c58e;
    font-size: 15px;
    font-weight: 600;
}
.ana-perfil-character:not(.ana-perfil-guild-page) .ana-perfil-overview table.list td:last-child a {
    color: #e2c58e;
    font-weight: 600;
    text-transform: none;
}
.ana-perfil-character:not(.ana-perfil-guild-page) .ana-perfil-overview table.list td:last-child a:hover {
    color: #fff0c5;
}
.ana-perfil-character:not(.ana-perfil-guild-page) .ana-perfil-overview table.list tr::after {
    background: rgba(201,139,99,.12);
}
@media (max-width: 650px) {
    .ana-perfil-character:not(.ana-perfil-guild-page) .ana-perfil-overview table.list td {
        padding: 10px 8px;
    }
    .ana-perfil-character:not(.ana-perfil-guild-page) .ana-perfil-overview table.list td:not([rowspan]):not(:last-child),
    .ana-perfil-character:not(.ana-perfil-guild-page) .ana-perfil-overview table.list td:last-child {
        font-size: 12px;
    }
    .ana-perfil-character:not(.ana-perfil-guild-page) .ana-perfil-overview table.list td[rowspan] {
        width: 70px;
        min-width: 70px;
    }
    .ana-perfil-character:not(.ana-perfil-guild-page) .ana-perfil-overview table.list td[rowspan] img {
        max-width: 60px;
    }
}
/* END ANASTARIA CHARACTER GUILD STYLE PARITY */