{% extends "base.html" %}

{% block title %}404 - Page Not Found | NailTech Nation{% endblock %}

{% block content %}
<div class="error-page">
    <div class="container">
        <div class="error-content">
            <h1 class="error-code">404</h1>
            <h2 class="error-title">Oops! Page Not Found</h2>
            <p class="error-message">The page you're looking for seems to have wandered off. Let's get you back on track!</p>
            <a href="{{ url_for('public.index') }}" class="btn btn-primary">Return Home</a>
        </div>
    </div>
</div>

<style>
.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.error-code {
    font-size: 8rem;
    background: var(--bg-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.error-title {
    margin: var(--spacing-md) 0;
}
.error-message {
    color: var(--light-text);
    margin-bottom: var(--spacing-lg);
}
</style>
{% endblock %}