/* ========================================================================
   ENCHANT PAGE — SHAIYA ADDICTED
   ======================================================================== */

body:has(.enchant-page) .content-header {
    display: none !important;
}

body:has(.enchant-page) .content-bg {
    padding-top: 1px !important;
}

.enchant-page {
    padding: 18px 20px 28px;
}


/* ------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------ */

.enchant-hero {
    position: relative;

    display: flex;
    align-items: stretch;
    justify-content: space-between;

    gap: 24px;

    padding: 24px 25px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 92% 14%,
            rgba(208,198,150,.075),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(20,25,29,.98),
            rgba(11,15,18,.99)
        );

    border: 1px solid rgba(208,198,150,.13);
    border-radius: 5px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 14px 34px rgba(0,0,0,.13);
}

.enchant-hero::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            #d5c889,
            rgba(166,149,89,.34),
            transparent
        );
}

.enchant-hero__content {
    min-width: 0;
    max-width: 610px;
}

.enchant-hero__eyebrow,
.enchant-section__eyebrow {
    margin-bottom: 7px;

    color: #cfc28b;

    font-size: 10px;
    line-height: 14px;
    font-weight: 700;

    letter-spacing: 1.1px;

    text-transform: uppercase;
}

.enchant-hero__title {
    margin: 0;

    color: #f0f2f3;

    font-size: 31px;
    line-height: 37px;
    font-weight: 700;

    letter-spacing: -.35px;
}

.enchant-hero__description {
    max-width: 590px;

    margin: 9px 0 0;

    color: #949ea6;

    font-size: 14px;
    line-height: 21px;
}

.enchant-hero__stats {
    display: grid;

    grid-template-columns:
        minmax(110px, 1fr)
        minmax(145px, 1.15fr);

    gap: 1px;

    min-width: 310px;

    align-self: stretch;

    overflow: hidden;

    background: rgba(255,255,255,.045);

    border: 1px solid rgba(255,255,255,.05);
    border-radius: 4px;
}

.enchant-hero-stat {
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 88px;

    padding: 12px;

    background: rgba(8,11,13,.78);
}

.enchant-hero-stat span {
    color: #66717a;

    font-size: 9px;
    line-height: 12px;

    text-transform: uppercase;

    letter-spacing: .45px;
}

.enchant-hero-stat strong {
    margin-top: 5px;

    color: #e4d89e;

    font-size: 20px;
    line-height: 24px;
}

.enchant-buy {
    grid-column: 1 / -1;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 40px;

    color: #1b1c17 !important;

    background:
        linear-gradient(
            180deg,
            #ddd39a,
            #c5b874
        );

    font-size: 11px;
    font-weight: 700;

    text-decoration: none !important;

    transition:
        filter .15s ease,
        transform .15s ease;
}

.enchant-buy:hover {
    filter: brightness(1.07);

    transform: translateY(-1px);
}


/* ------------------------------------------------------------------------
   SECTION
   ------------------------------------------------------------------------ */

.enchant-section {
    margin-top: 22px;
}

.enchant-section__head {
    display: flex;

    align-items: end;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 12px;
}

.enchant-section__head h2 {
    margin: 0;

    color: #e9ecee;

    font-size: 21px;
    line-height: 26px;
    font-weight: 700;
}

.enchant-section__head > p {
    max-width: 360px;

    margin: 0;

    color: #717c85;

    font-size: 11px;
    line-height: 16px;

    text-align: right;
}


/* ------------------------------------------------------------------------
   GEM CARDS
   ------------------------------------------------------------------------ */

.enchant-gems {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.enchant-gem-card {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    min-height: 142px;

    padding: 17px 18px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(17,22,26,.96),
            rgba(10,14,17,.98)
        );

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 4px;

    transition:
        border-color .15s ease,
        transform .15s ease,
        background .15s ease;
}

.enchant-gem-card:hover {
    transform: translateY(-1px);

    border-color: rgba(208,198,150,.15);

    background:
        linear-gradient(
            135deg,
            rgba(20,25,29,.98),
            rgba(11,15,18,.99)
        );
}

.enchant-gem-card__icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 39px;
    height: 39px;

    color: #cabd82;

    background: rgba(208,198,150,.04);

    border: 1px solid rgba(208,198,150,.11);
    border-radius: 4px;

    font-size: 14px;
}

.enchant-gem-card--gm .enchant-gem-card__icon {
    color: #e8d46e;

    box-shadow:
        0 0 18px rgba(220,194,75,.08);
}

.enchant-gem-card__body {
    min-width: 0;
}

.enchant-gem-card__type {
    display: block;

    margin-bottom: 5px;

    color: #7e8991;

    font-size: 9px;
    line-height: 12px;

    text-transform: uppercase;

    letter-spacing: .55px;
}

.enchant-gem-card h3 {
    margin: 0;

    color: #e5e9eb;

    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
}

.enchant-gem-card p {
    margin: 8px 0 0;

    color: #99a2a9;

    font-size: 12px;
    line-height: 18px;
}

.enchant-gem-card__badge {
    position: absolute;

    right: 12px;
    top: 12px;

    padding: 4px 7px;

    color: #d9cb88;

    background: rgba(208,198,150,.045);

    border: 1px solid rgba(208,198,150,.11);
    border-radius: 3px;

    font-size: 9px;
    font-weight: 700;
}


/* ------------------------------------------------------------------------
   TABLES
   ------------------------------------------------------------------------ */

.enchant-tables {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.enchant-table-card {
    overflow: hidden;

    background:
        rgba(9,13,16,.76);

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 4px;
}

.enchant-table-card__header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    min-height: 67px;

    padding: 12px 14px;

    background:
        linear-gradient(
            180deg,
            rgba(208,198,150,.035),
            rgba(255,255,255,.008)
        );

    border-bottom: 1px solid rgba(255,255,255,.05);
}

.enchant-table-card__header span {
    display: block;

    margin-bottom: 3px;

    color: #727e86;

    font-size: 9px;
    line-height: 12px;

    text-transform: uppercase;

    letter-spacing: .55px;
}

.enchant-table-card__header h3 {
    margin: 0;

    color: #e6e9eb;

    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
}

.enchant-table-card__mark {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: #cfc186;

    background: rgba(208,198,150,.04);

    border: 1px solid rgba(208,198,150,.11);
    border-radius: 4px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .4px;
}

.enchant-table-wrap {
    max-height: 590px;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color:
        #6c674f
        #0c1013;
}

.enchant-table-wrap::-webkit-scrollbar {
    width: 6px;
}

.enchant-table-wrap::-webkit-scrollbar-track {
    background: #0c1013;
}

.enchant-table-wrap::-webkit-scrollbar-thumb {
    background: #6c674f;

    border-radius: 4px;
}

.enchant-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;
}

.enchant-table th {
    position: sticky;

    top: 0;

    z-index: 2;

    padding: 10px 8px;

    color: #77828a;

    background: #0d1114;

    border-bottom: 1px solid rgba(255,255,255,.055);

    font-size: 9px;
    line-height: 12px;
    font-weight: 700;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: .45px;
}

.enchant-table td {
    height: 44px;

    padding: 7px 8px;

    color: #aeb7be;

    border-bottom: 1px solid rgba(255,255,255,.045);

    text-align: center;

    font-size: 11px;
}

.enchant-table tbody tr {
    transition: background .15s ease;
}

.enchant-table tbody tr:hover {
    background: rgba(208,198,150,.035);
}

.enchant-level {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 32px;
    min-height: 26px;

    padding: 0 7px;

    color: #d7ca8d;

    background: rgba(208,198,150,.04);

    border: 1px solid rgba(208,198,150,.09);
    border-radius: 3px;

    font-weight: 700;
}

.enchant-value {
    color: #d9dfe2;

    font-weight: 700;
}

.enchant-chance {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;
}

.enchant-chance strong {
    font-size: 10px;
}

.enchant-chance--high strong {
    color: #73be84;
}

.enchant-chance--mid strong {
    color: #d7bc63;
}

.enchant-chance--low strong {
    color: #c66f63;
}

.enchant-chance__bar {
    display: block;

    width: 58px;
    height: 3px;

    overflow: hidden;

    background: rgba(255,255,255,.05);

    border-radius: 2px;
}

.enchant-chance__bar span {
    display: block;

    height: 100%;

    min-width: 2px;

    background:
        linear-gradient(
            90deg,
            #94874d,
            #d3c36f
        );

    border-radius: 2px;
}


/* ------------------------------------------------------------------------
   NOTE
   ------------------------------------------------------------------------ */

.enchant-note {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 15px;

    padding: 12px 14px;

    color: #89939a;

    background: rgba(11,15,17,.60);

    border: 1px solid rgba(255,255,255,.045);
    border-left: 3px solid #84794d;
    border-radius: 3px;
}

.enchant-note__icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 23px;
    height: 23px;

    color: #cfc185;

    background: rgba(208,198,150,.04);

    border: 1px solid rgba(208,198,150,.10);
    border-radius: 50%;

    font-size: 10px;
    font-weight: 700;
}

.enchant-note p {
    margin: 1px 0 0;

    font-size: 11px;
    line-height: 17px;
}

.enchant-note strong {
    color: #d8cc91;
}


/* ------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------ */

@media (max-width: 1250px) {

    .enchant-hero {
        gap: 18px;
    }

    .enchant-hero__stats {
        min-width: 275px;
    }

    .enchant-hero__title {
        font-size: 27px;
        line-height: 33px;
    }

    .enchant-gems,
    .enchant-tables {
        grid-template-columns: 1fr;
    }

}