/* ==========================================================================
   REPAIR — SHAIYA ADDICTED
   ========================================================================== */

body:has(.repair-page)
.column-left
.content-bg
> .content-header {
    display: none !important;
}


.repair-page {
    padding: 18px 0 9px;

    color: #c8ced3;
}


.repair-page *,
.repair-page *::before,
.repair-page *::after {
    box-sizing: border-box;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.repair-hero {
    position: relative;

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

    gap: 26px;

    min-height: 164px;
    margin-bottom: 16px;
    padding: 27px 28px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(208, 196, 130, .075),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            rgba(18, 22, 25, .985),
            rgba(10, 14, 17, .99)
        );

    border: 1px solid rgba(210, 199, 143, .12);
    border-radius: 4px;

    box-shadow:
        0 11px 28px rgba(0, 0, 0, .13);
}


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

    position: absolute;
    inset: 0 auto 0 0;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            #dfd28a,
            rgba(223, 210, 138, .28)
        );
}


.repair-hero__content {
    position: relative;
    z-index: 2;

    max-width: 600px;
}


.repair-eyebrow,
.repair-section-kicker,
.repair-notice__eyebrow {
    color: #b9ab70;

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

    letter-spacing: .8px;
    text-transform: uppercase;
}


.repair-title {
    margin: 7px 0 7px;

    color: #f0f2f3;

    font-size: 31px;
    line-height: 35px;
    font-weight: 700;
}


.repair-description {
    max-width: 570px;

    margin: 0;

    color: #7f8990;

    font-size: 13px;
    line-height: 19px;
}


/* BALANCE */

.repair-balance {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(130px, 1fr) 104px;
    grid-template-rows: auto auto;

    min-width: 270px;
    min-height: 68px;

    overflow: hidden;

    background: rgba(7, 10, 12, .78);

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


.repair-balance__label {
    grid-column: 1;
    grid-row: 1;

    padding: 11px 14px 0;

    color: #667078;

    font-size: 8px;
    line-height: 10px;

    letter-spacing: .4px;
    text-transform: uppercase;
}


.repair-balance__value {
    grid-column: 1;
    grid-row: 2;

    padding: 1px 14px 11px;

    color: #ddd083;

    font-size: 20px;
    line-height: 24px;
    font-weight: 700;

    white-space: nowrap;
}


.repair-balance__value small {
    font-size: 12px;
}


.repair-balance__button {
    grid-column: 2;
    grid-row: 1 / 3;

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

    color: #262719 !important;

    background:
        linear-gradient(
            180deg,
            #ddd18d,
            #c8bc77
        );

    border-left: 1px solid rgba(255, 255, 255, .07);

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

    text-decoration: none !important;
}


/* ==========================================================================
   NOTICE
   ========================================================================== */

.repair-notice {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    margin-bottom: 16px;
    padding: 14px 16px;

    background:
        linear-gradient(
            90deg,
            rgba(161, 123, 52, .055),
            rgba(12, 16, 19, .94) 30%,
            rgba(10, 14, 17, .96)
        );

    border: 1px solid rgba(206, 187, 105, .09);
    border-radius: 4px;
}


.repair-notice__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #cbbb72;
    background: rgba(205, 190, 112, .05);

    border: 1px solid rgba(205, 190, 112, .10);
    border-radius: 4px;

    font-size: 14px;
}


.repair-notice__content strong {
    display: block;

    margin-top: 3px;

    color: #d5d9dc;

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


.repair-notice__content p {
    margin: 2px 0 0;

    color: #68737a;

    font-size: 9px;
    line-height: 13px;
}


/* ==========================================================================
   SECTION
   ========================================================================== */

.repair-section {
    margin-bottom: 16px;
    padding: 19px 18px 20px;

    background:
        linear-gradient(
            180deg,
            rgba(12, 16, 19, .975),
            rgba(9, 13, 16, .985)
        );

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

    box-shadow:
        0 8px 23px rgba(0, 0, 0, .10);
}


.repair-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 15px;
    padding-bottom: 12px;

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


.repair-section-head h2 {
    margin: 4px 0 0;

    color: #e3e7e9;

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


.repair-section-head p {
    margin: 3px 0 0;

    color: #69737a;

    font-size: 10px;
    line-height: 15px;
}


.repair-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 31px;
    height: 29px;

    padding: 0 9px;

    color: #a39a6b;
    background: rgba(202, 188, 113, .035);

    border: 1px solid rgba(202, 188, 113, .085);
    border-radius: 20px;

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


/* ==========================================================================
   CARDS
   ========================================================================== */

.repair-grid {
    display: grid;

    gap: 9px;
}


.repair-card {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;

    overflow: visible;

    background:
        linear-gradient(
            180deg,
            rgba(16, 20, 23, .97),
            rgba(10, 14, 17, .985)
        );

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

    transition:
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.repair-card:hover {
    border-color: rgba(208, 197, 133, .12);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, .13);

    transform: translateY(-1px);
}


.repair-card__item {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);

    gap: 13px;

    min-width: 0;
    padding: 14px;
}


.repair-card__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    align-self: start;

    overflow: hidden;

    background:
        radial-gradient(
            circle,
            rgba(204, 189, 105, .06),
            rgba(255, 255, 255, .012)
        );

    border: 1px solid rgba(205, 190, 112, .08);
    border-radius: 5px;
}


.repair-card__item-icon img {
    display: block;

    width: 46px;
    height: 46px;

    object-fit: contain;

    image-rendering: auto;
}


.repair-card__item-placeholder {
    color: #6b747b;

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


.repair-card__item-content {
    min-width: 0;
}


.repair-card__badges {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 7px;
}


.repair-card__character,
.repair-card__date {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    min-height: 23px;
    padding: 0 8px;

    border-radius: 20px;

    font-size: 9px;
    line-height: 11px;
    font-weight: 600;
}


.repair-card__character {
    color: #aeb6ba;
    background: rgba(255, 255, 255, .025);

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


.repair-card__date {
    color: #777f84;
    background: rgba(255, 255, 255, .014);

    border: 1px solid rgba(255, 255, 255, .03);
}


.repair-card__name-row {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 8px;
}


.repair-card__name {
    overflow: hidden;

    color: #e2e5e7;

    font-size: 16px;
    line-height: 20px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================================
   ITEM INFO TOOLTIP
   ========================================================================== */

.repair-info-wrap {
    position: relative;

    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;
}


.repair-page .q.repair-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    margin: 0;
    padding: 0;

    color: #b7ae7c;
    background: rgba(205, 190, 112, .055);

    border: 1px solid rgba(205, 190, 112, .10);
    border-radius: 50%;

    outline: none;

    font-family: inherit;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;

    cursor: help;
}


.repair-page .q.repair-info-button:hover,
.repair-info-wrap:focus-within .repair-info-button {
    color: #171813;
    background: #d6ca87;
}


.repair-page .repair-info-wrap .test {
    position: absolute;

    top: 27px;
    left: 50%;

    z-index: 9999;

    display: none;

    width: 260px;

    margin: 0 0 0 -130px;
    padding: 17px;

    color: #929ba1;
    background: rgba(5, 8, 10, .98);

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

    box-shadow:
        0 14px 32px rgba(0, 0, 0, .48);

    font-size: 11px !important;
    line-height: 17px;

    text-align: left;
    white-space: normal;
}


.repair-info-wrap:hover .test,
.repair-info-wrap:focus-within .test {
    display: block;
}


.repair-page .repair-info-wrap .test .tes {
    position: absolute;

    top: -6px;
    left: 50%;

    width: 11px;
    height: 11px;

    margin-left: -6px;

    background: #080b0d;

    border-top: 1px solid rgba(208, 194, 116, .13);
    border-left: 1px solid rgba(208, 194, 116, .13);

    transform: rotate(45deg);
}


.repair-page .test .item-title {
    display: block;

    margin-bottom: 3px;

    color: #a9d274;

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


.repair-page .test .fff {
    color: #d9dde0;
}


.repair-page .test .stat {
    color: #e2d75e;
}


.repair-page .test .orange-stat {
    color: #e39548;
}


.repair-page .test .lv {
    margin: 7px 0 5px;
}


.repair-page .test .te {
    color: #8c969c;
}


/* ==========================================================================
   DETAILS / GEMS / REASON
   ========================================================================== */

.repair-card__details {
    display: grid;
    grid-template-columns: 1fr 1.1fr;

    gap: 8px;

    margin-top: 11px;
}


.repair-card__detail {
    min-width: 0;
    padding: 9px 10px;

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

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


.repair-card__detail-label {
    display: block;

    margin-bottom: 6px;

    color: #5e686f;

    font-size: 8px;
    line-height: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .4px;
}


.repair-page .slots {
    display: flex;
    align-items: center;

    gap: 4px;
}


.repair-page .slots .gem {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    margin: 0;

    overflow: hidden;

    background: rgba(6, 9, 11, .8);

    border: 1px solid rgba(121, 85, 72, .55);
    border-radius: 3px;
}


.repair-page .slots .gem img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 1px;

    object-fit: cover;
}


.repair-card__reason {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 8px;
}


.repair-card__reason-icon {
    display: flex;
    align-items: center;
    justify-content: center;

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

    overflow: hidden;

    background: rgba(6, 9, 11, .8);

    border: 1px solid rgba(121, 85, 72, .55);
    border-radius: 3px;
}


.repair-card__reason-icon img {
    width: 100%;
    height: 100%;

    padding: 1px;

    object-fit: cover;
}


.repair-card__reason strong {
    overflow: hidden;

    color: #aeb6bb;

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

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================================
   ACTION
   ========================================================================== */

.repair-card__action {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 10px;

    padding: 14px;

    background: rgba(7, 10, 12, .45);

    border-left: 1px solid rgba(255, 255, 255, .04);
}


.repair-card__price span {
    display: block;

    color: #5c666d;

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

    text-transform: uppercase;
    letter-spacing: .4px;
}


.repair-card__price strong {
    display: block;

    margin-top: 2px;

    color: #d3c77e;

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


.repair-card__price small {
    font-size: 10px;
}


.repair-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    width: 100%;
    min-height: 35px;

    padding: 0 10px;

    color: #c9cfcf;
    background: rgba(208, 194, 116, .045);

    border: 1px solid rgba(208, 194, 116, .10);
    border-radius: 4px;

    outline: none;

    font-family: inherit;
    font-size: 10px;
    line-height: 13px;
    font-weight: 700;

    cursor: pointer;

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


.repair-card__button:hover {
    color: #eee2a5;
    background: rgba(208, 194, 116, .075);

    border-color: rgba(208, 194, 116, .18);

    transform: translateY(-1px);
}


/* ==========================================================================
   EMPTY / PAGINATION
   ========================================================================== */

.repair-empty {
    padding: 34px 20px;

    color: #6b757b;

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

    border: 1px dashed rgba(255, 255, 255, .055);
    border-radius: 4px;

    text-align: center;
}


.repair-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin: 0 auto 9px;

    color: #827b5b;

    background: rgba(202, 188, 113, .03);

    border: 1px solid rgba(202, 188, 113, .07);
    border-radius: 50%;
}


.repair-empty strong {
    display: block;

    color: #a9b0b4;

    font-size: 12px;
}


.repair-empty p {
    margin: 4px 0 0;

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


.repair-pagination {
    display: flex;
    justify-content: center;

    padding-top: 16px;
}


.repair-pagination .pagination {
    margin: 0 !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1250px) {

    .repair-title {
        font-size: 27px;
        line-height: 31px;
    }

}


@media (max-width: 900px) {

    .repair-hero {
        align-items: stretch;
        flex-direction: column;
    }


    .repair-balance {
        width: 100%;
    }


    .repair-card {
        grid-template-columns: 1fr;
    }


    .repair-card__action {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        border-top: 1px solid rgba(255, 255, 255, .04);
        border-left: 0;
    }


    .repair-card__button {
        width: auto;
        min-width: 140px;
    }

}


@media (max-width: 620px) {

    .repair-card__item {
        grid-template-columns: 1fr;
    }


    .repair-card__details {
        grid-template-columns: 1fr;
    }


    .repair-card__action {
        align-items: stretch;
        flex-direction: column;
    }


    .repair-card__button {
        width: 100%;
    }

}

/* ==========================================================================
   REPAIR V2 — TOOLTIP НА ИКОНКАХ КАК В DROPLIST
   ========================================================================== */

.repair-page .repair-hover-item,
.repair-page .js-droplist-item {
    cursor: help;

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


.repair-card__item-icon:has(.repair-hover-item):hover,
.repair-page .gem:has(.repair-hover-item):hover,
.repair-card__reason-icon:has(.repair-hover-item):hover {
    border-color:
        rgba(218, 199, 110, .35);

    box-shadow:
        0 0 0 1px rgba(218, 199, 110, .06),
        0 0 14px rgba(205, 181, 76, .08);
}


.repair-page .repair-hover-item:hover {
    filter: brightness(1.14);

    transform: scale(1.04);
}


/*
 * Сам DropList tooltip уже оформлен в основном CSS сайта.
 * Здесь страхуем только позиционирование.
 */
#droplist-tooltip {
    position: fixed;
    z-index: 9999999;

    pointer-events: none;
}

/* ==========================================================================
   REPAIR V3 — ЗАТОЧКА И РЕКРУН КОНКРЕТНОГО ЭКЗЕМПЛЯРА
   ========================================================================== */

.repair-instance-stats {
    margin-top: 9px;
}


.repair-instance-stats-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 6px;
    padding-bottom: 6px;

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


.repair-instance-stats-legend span {
    color: #b7b7b7;

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

    text-transform: uppercase;
    letter-spacing: .35px;
}


.repair-instance-stats-legend em {
    color: #c27637;

    font-size: 9px;
    font-style: normal;
}


.repair-instance-stat-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 5px;

    min-height: 17px;
}


.repair-instance-stat-base {
    color: #e2d75e;

    font-weight: 700;
}


.repair-instance-stat-recreation {
    color: #e58a33;

    font-weight: 700;
}


.repair-instance-tooltip-gems {
    margin-top: 10px;
    padding-top: 9px;

    border-top:
        1px solid rgba(190, 158, 76, .16);
}


.repair-instance-tooltip-gems .slots {
    display: flex;
    align-items: center;

    gap: 4px;
}


.repair-instance-tooltip-gems .gem {
    width: 24px;
    height: 24px;

    overflow: hidden;

    background: rgba(6, 9, 11, .82);

    border:
        1px solid rgba(121, 85, 72, .58);

    border-radius: 3px;
}


.repair-instance-tooltip-gems .gem img {
    width: 100%;
    height: 100%;

    padding: 1px;

    object-fit: cover;

    transform: none !important;
}

/* ==========================================================================
   REPAIR V4 — КРИСТАЛЛЫ В TOOLTIP В ОДНУ СТРОКУ
   ========================================================================== */

.repair-instance-tooltip-gems {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: 4px;
}


.repair-instance-tooltip-gems .slots {
    display: flex !important;
    align-items: center;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 4px;
    margin: 0;
}


.repair-instance-tooltip-gems .gem {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 24px;

    width: 24px;
    min-width: 24px;
    height: 24px;

    margin: 0 !important;
}