/* =====================================================
   404 PAGE COMPONENT STYLES
   Extracted from 404.php inline <style> block
   ===================================================== */

.custom_404 {
    display: flex;
    margin: 0;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: #F7F7F7;
    padding: 64px;
}

.custom_404 .error_content {
    width: 500px;
}

.custom_404 svg {
    width: 457px;
}

.error_type {
    font-weight: 600;
    font-size: 24px;
    color: var(--basic-color);
}

.error_title {
    font-size: 40px;
    font-weight: 700;
    color: #000000;
    line-height: 40px;
    margin: 24px 0;
}

.error_description {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    line-height: 22px;
}

.error_buttons h2 {
    margin: 24px 0;
    color: var(--basic-color);
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}

.error_buttons p {
    letter-spacing: -1.5px;
    font-weight: 500;
    color: #000;
    font-size: 28px;
    margin: 0 0 24px 0;
}

.error_buttons a {
    text-decoration: none;
    width: 140px;
    height: 40px;
    display: flex;
    background: var(--basic-color);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    border: 2px solid var(--basic-color);
    font-weight: 700;
}

.error_buttons li:first-child a {
    background: transparent;
    color: var(--basic-color);
}

.error_buttons ul {
    width: 300px;
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 1200px) {
    .custom_404 {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .custom_404 .error_content {
        width: 100%;
        margin-top: 50px;
        text-align: center;
    }

    .custom_404 svg {
        max-width: 100%;
        display: block;
        margin: 0 auto;
        height: auto;
    }

    .error_buttons ul {
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .custom_404 {
        padding: 32px;
    }

    .error_type {
        font-size: 20px;
    }

    .error_title {
        line-height: 28px;
        font-size: 24px;
    }

    .error_buttons h2 {
        font-size: 20px;
    }
}

@media (max-width: 450px) {
    .error_buttons ul {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .error_buttons li:last-child a {
        margin-top: 10px;
    }
}