@extends('partial.layout')

@section('content')
    <style>
        .expired-wrapper {
            min-height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
            background: linear-gradient(135deg, rgba(191, 166, 64, 0.1), rgba(14, 129, 158, 0.08));
        }

        .expired-card {
            background: #ffffff;
            border-radius: 24px;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
            padding: 3rem 2.5rem;
            max-width: 480px;
            width: 100%;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .expired-card::before {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle at center, rgba(191, 166, 64, 0.18), transparent 65%);
            top: -60px;
            right: -60px;
        }

        .expired-icon {
            width: 88px;
            height: 88px;
            border-radius: 50%;
            margin: 0 auto 1.5rem auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(14, 129, 158, 0.08);
            color: var(--primaryColor, #bfa640);
            font-size: 2.2rem;
        }

        .expired-title {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primaryColor, #bfa640);
            margin-bottom: 0.5rem;
            letter-spacing: 2px;
        }

        .expired-subtitle {
            font-size: 1.3rem;
            color: #333333;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .expired-desc {
            color: #6c757d;
            font-size: 0.95rem;
            line-height: 1.8;
            margin-bottom: 2.5rem;
        }

        .expired-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }

        .expired-actions .btn {
            min-width: 150px;
            border-radius: 999px;
            padding: 0.8rem 1.6rem;
            font-weight: 600;
        }

        @media (max-width: 576px) {
            .expired-card {
                padding: 2.5rem 1.5rem;
            }

            .expired-title {
                font-size: 2.4rem;
            }

            .expired-subtitle {
                font-size: 1.1rem;
            }
        }
    </style>

    <div class="expired-wrapper">
        <div class="expired-card">
            <div class="expired-icon">
                <i class="bi bi-hourglass-split"></i>
            </div>
            <div class="expired-title">419</div>
            <div class="expired-subtitle">نشست شما منقضی شده است</div>
            <p class="expired-desc mb-0">
                به نظر می‌رسد زمان استفاده شما از صفحه به پایان رسیده یا ارتباط به دلیل وقفه‌ای کوتاه قطع شده است.
                لطفاً صفحه را تازه‌سازی کنید تا دوباره ادامه دهید. اگر اطلاعاتی وارد کرده بودید، ممکن است لازم باشد دوباره آن
                را وارد کنید.
            </p>
            <div class="expired-actions mt-4">
                <button type="button" class="btn btn-primary" onclick="window.location.reload()">
                    تلاش مجدد
                </button>
                <a href="{{ url()->previous() ?: url('/') }}" class="btn btn-outline-primary">
                    بازگشت به صفحه قبل
                </a>
            </div>
        </div>
    </div>
@endsection