/* ============================================================
   404 PAGINA — Banden-kopen.nl
   Locatie: app/design/frontend/<vendor>/<theme>/web/css/404.css
   ============================================================ */

/* -------------------------------------------------------
   Magento page wrapper — lichte achtergrond
------------------------------------------------------- */
.cms-noroute-index .page-wrapper {
    background-color: #f4f6f8 !important;
}

.cms-noroute-index .page-main,
.cms-noroute-index .column.main {
    padding: 0 !important;
    background-color: #f4f6f8 !important;
}

/* -------------------------------------------------------
   Hero wrapper
------------------------------------------------------- */
.error404-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    overflow: hidden;
    text-align: center;
    background-color: #f4f6f8;
    font-family: 'Barlow', 'Segoe UI', sans-serif;
    width: 100%;
}

/* Content beperkt in breedte zodat het niet uitrekt */
.error404-hero > *:not(.e4-tire) {
    max-width: 640px;
    width: 100%;
}

/* -------------------------------------------------------
   Achtergrond banden — kleiner en puur decoratief
------------------------------------------------------- */
.e4-tire {
    position: absolute;
    top: 50%;
    z-index: 0;
    pointer-events: none;
    max-width: none;
    width: auto;
}

.e4-tire-r {
    right: -80px;
    transform: translateY(-50%);
    width: 360px;
    height: 360px;
    opacity: 0.07;
    animation: e4spin 18s linear infinite;
}

.e4-tire-l {
    left: -100px;
    transform: translateY(-50%);
    width: 300px;
    height: 300px;
    opacity: 0.05;
    animation: e4spin 24s linear infinite reverse;
}

@keyframes e4spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}

/* -------------------------------------------------------
   404 getal — navy outline
------------------------------------------------------- */
.e4-num {
    position: relative;
    z-index: 1;
    font-family: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
    font-size: clamp(6rem, 15vw, 11rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -6px;
    color: transparent;
    -webkit-text-stroke: 3px rgba(26,39,64,0.10);
    user-select: none;
    animation: e4up 0.7s ease both;
}

.e4-num::after {
    content: '404';
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-stroke: 2px #e8552a;
    clip-path: polygon(0 0, 100% 0, 100% 42%, 0 42%);
    opacity: 0.50;
}

/* -------------------------------------------------------
   Oranje streep
------------------------------------------------------- */
.e4-line {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 4px;
    background: #e8552a;
    border-radius: 2px;
    margin: 24px auto 28px;
    animation: e4up 0.7s 0.15s ease both;
    opacity: 0;
}

/* -------------------------------------------------------
   Titel
------------------------------------------------------- */
.e4-title {
    position: relative;
    z-index: 1;
    font-family: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.15 !important;
    color: #1a2740 !important;
    margin: 0 0 14px !important;
    animation: e4up 0.7s 0.25s ease both;
    opacity: 0;
}

.e4-title em {
    color: #e8552a;
    font-style: normal;
}

/* -------------------------------------------------------
   Subtekst
------------------------------------------------------- */
.e4-sub {
    position: relative;
    z-index: 1;
    font-size: 1.05rem !important;
    color: #4a5568 !important;
    max-width: 500px;
    line-height: 1.65 !important;
    margin: 0 auto 36px !important;
    animation: e4up 0.7s 0.35s ease both;
    opacity: 0;
}

/* -------------------------------------------------------
   Knoppen
------------------------------------------------------- */
.e4-btns {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    animation: e4up 0.7s 0.45s ease both;
    opacity: 0;
}

.e4-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 32px !important;
    border-radius: 4px !important;
    font-family: 'Barlow', 'Segoe UI', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.e4-btn-p {
    background: #e8552a !important;
    color: #ffffff !important;
    border: 2px solid #e8552a !important;
}

.e4-btn-p:hover {
    background: #c94220 !important;
    border-color: #c94220 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(232,85,42,0.30) !important;
    text-decoration: none !important;
}

.e4-btn-s {
    background: transparent !important;
    color: #1a2740 !important;
    border: 2px solid rgba(26,39,64,0.25) !important;
}

.e4-btn-s:hover {
    border-color: #1a2740 !important;
    color: #1a2740 !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

/* -------------------------------------------------------
   Snelkoppelingen
------------------------------------------------------- */
.e4-quick {
    position: relative;
    z-index: 1;
    margin-top: 48px;
    animation: e4up 0.7s 0.55s ease both;
    opacity: 0;
}

.e4-quick-label {
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    color: #9aa5b4 !important;
    margin-bottom: 14px !important;
}

.e4-quick-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.e4-qlink {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 10px 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 100px !important;
    color: #1a2740 !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

.e4-qlink:hover {
    background: #fff5f2 !important;
    border-color: rgba(232,85,42,0.40) !important;
    color: #e8552a !important;
    text-decoration: none !important;
}

.e4-qlink i {
    font-size: 0.68rem;
    color: #e8552a;
}

/* -------------------------------------------------------
   Animatie
------------------------------------------------------- */
@keyframes e4up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------
   Responsive — tablet
------------------------------------------------------- */
@media (max-width: 900px) {
    .e4-tire-r { width: 360px; height: 360px; right: -70px; }
    .e4-tire-l { width: 280px; height: 280px; left: -90px; }
}

/* -------------------------------------------------------
   Responsive — mobiel
------------------------------------------------------- */
@media (max-width: 600px) {
    .error404-hero { padding: 36px 20px 36px; }
    .e4-tire-l { display: none; }
    .e4-tire-r { width: 260px; height: 260px; right: -50px; opacity: 0.05; }
    .e4-btns { flex-direction: column; align-items: center; }
    .e4-btn { width: 100% !important; max-width: 300px !important; justify-content: center !important; }
}