/* =========================
   ADD-ONS INTRO + SEARCH
   Sits between the hero slider and the info cards.
   Dark intro fades into a gold band, then a yellow
   search area with a black pixel-style input.
========================= */

/* ---------- INTRO ---------- */

.addons-intro {
    --gold: #FFC933;
    --gold-shadow: #A56A00;

    /* pixel border between the red blocks section above and this dark one.
       border3.png is border2.png recolored to the blocks red (4096x483, 32px blocks) */
    --edge-scale: 0.25;
    --edge-h: calc(483px * var(--edge-scale));

    position: relative;
    padding: calc(var(--edge-h) + 8px) 24px 64px;
    background: linear-gradient(to bottom, #0D0D0D 0%, #17130C 35%, #54401F 100%);
    text-align: center;
}

.addons-intro::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: var(--edge-h);

    background: url("../img/border3.png") repeat-x center top;
    background-size: calc(4096px * var(--edge-scale)) var(--edge-h);
    image-rendering: pixelated;
    pointer-events: none;
}

.addons-title {
    font-family: "Texureon", Arial, sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 2px;

    color: var(--gold);
    text-shadow: 0 4px 0 var(--gold-shadow);
}

.addons-text {
    max-width: 620px;
    margin: 20px auto 0;

    color: #fff;
    font-size: 18px;
    line-height: 1.6;
}


/* ---------- SEARCH ---------- */

.addons-search {
    --field-bg: #0C0C0C;
    --field-line: #3E3E4A;

    padding: 24px 16px 28px;

    /* solid gold band on top, yellow gradient below it */
    border-top: 24px solid #F9BE2B;
    background: linear-gradient(to bottom, #FBDF70, #FDD24A);
    background-clip: padding-box;
}

.addons-search-form {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
}

.addons-search-label {
    display: block;
    margin-bottom: 14px;

    color: #1A1A1A;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.addons-search-field {
    position: relative;
}

.addons-search-icon {
    position: absolute;
    top: 50%;
    left: 22px;

    color: #fff;
    transform: translateY(-50%);
    pointer-events: none;
}

.addons-search-input {
    display: block;
    width: 100%;
    height: 66px;

    padding: 0 20px 0 68px;

    background: var(--field-bg);
    border: 2px solid var(--field-line);
    border-radius: 0;

    color: #fff;
    font-family: "Minecraft", Arial, sans-serif;
    font-size: 20px;
    line-height: 1;

    -webkit-appearance: none;
    appearance: none;
}

.addons-search-input::placeholder {
    color: #A8A8A8;
    opacity: 1;
}

.addons-search-input::-webkit-search-decoration,
.addons-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.addons-search-input:focus-visible {
    outline: 3px solid #1A1A1A;
    outline-offset: 2px;
    border-color: #fff;
}


/* ---------- EMPTY STATE (info cards) ---------- */

.info-cards-empty {
    position: relative;
    padding: 28px 0 20px;

    color: #fff;
    font-family: "Minecraft", Arial, sans-serif;
    font-size: 20px;
    line-height: 1.4;
    text-align: center;
}


/* ---------- DESKTOP ---------- */

@media (min-width: 701px) {
    .addons-intro {
        --edge-scale: 0.4375;
        padding: calc(var(--edge-h) + 16px) 30px 88px;
    }

    .addons-title {
        font-size: 72px;
    }

    .addons-text {
        max-width: 720px;
        margin-top: 24px;
        font-size: 20px;
    }

    .addons-search {
        padding: 32px 30px 40px;
        border-top-width: 32px;
    }

    .addons-search-label {
        margin-bottom: 16px;
        font-size: 22px;
    }

    .addons-search-input {
        height: 72px;
        padding-left: 76px;
        font-size: 22px;
    }

    .addons-search-icon {
        left: 26px;
    }
}

.addons-search,.addons-search-form,.addons-search-field,.addons-search-input{border-radius:0 !important;}