/**
 * Jakarta Islamic School
 * Auto-separated stylesheet for: public/students/pendaftaranmuridbaru.php
 */

:root {
            --sage-dark: #1b4332; --sage-main: #2d6a4f; --sage-light: #e8f5e9;
            --bg-body: #f4f7f6; --dark-text: #2c3e50;
        }
        body { font-family: 'Poppins', sans-serif; background: var(--bg-body); color: var(--dark-text); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
        .portal-wrapper { width: 100%; max-width: 1300px; }
        .portal-card { background: #ffffff; border-radius: 1.75rem; box-shadow: 0 15px 35px rgba(45, 106, 79, 0.08); overflow: hidden; border: 1px solid #e0e6ed; }
        .flyer-sidebar { background: linear-gradient(135deg, var(--sage-dark), var(--sage-main)); color: white; padding: 3rem 2rem; display: flex; flex-direction: column; justify-content: space-between; }
        .portal-header { background: linear-gradient(135deg, #2d6a4f, #1b4332); padding: 2.5rem 2rem; text-align: center; color: white; }
        .portal-logo { width: 75px; height: auto; margin-bottom: 0.75rem; }
        .form-label { font-weight: 600; font-size: 0.85rem; color: var(--dark-text); }
        .form-control, .form-select { border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.9rem; background-color: #fafbfc; border: 1px solid #cbd5e1; }
        .ticket-box { background: var(--sage-light); border: 2px dashed var(--sage-main); border-radius: 1rem; padding: 1rem; text-align: center; }
        .ticket-number { font-size: 1.5rem; font-weight: 800; color: var(--sage-dark); letter-spacing: 2px; }
        .btn-submit { background: var(--sage-main); color: #ffffff; border: none; padding: 0.75rem 2rem; border-radius: 1rem; font-weight: 600; }
        .btn-submit:hover { background: var(--sage-dark); color: #fff; }
        .btn-custom-back { background: #e2e8f0; color: #334155; border: none; padding: 0.75rem 1.5rem; border-radius: 1rem; font-weight: 600; text-decoration: none; }
        .search-box-card { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 1.25rem; padding: 1.25rem; }

        /* Styling Stepper / Garis Bilangan Status Pendaftaran */
        .stepper { display: flex; justify-content: space-between; position: relative; margin-top: 1.5rem; margin-bottom: 0.5rem; min-width: 500px; }
        .stepper::before { content: ''; position: absolute; top: 20px; left: 30px; right: 30px; height: 4px; background: #cbd5e1; z-index: 1; }
        .step-item { position: relative; z-index: 2; text-align: center; flex: 1; }
        .step-counter { width: 44px; height: 44px; border-radius: 50%; background: #e2e8f0; color: #64748b; display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto 10px auto; border: 3px solid #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
        .step-name { font-size: 0.75rem; font-weight: 600; color: #64748b; display: block; }
        .step-date { font-size: 0.65rem; color: #94a3b8; display: block; margin-top: 4px; font-weight: 500; }

        .step-item.completed .step-counter { background: #10b981; color: white; }
        .step-item.completed .step-name { color: #059669; }
        .step-item.completed .step-date { color: #047857; }

        .step-item.active-yellow .step-counter { background: #ffb703; color: #1e1b4b; box-shadow: 0 0 0 4px rgba(255, 183, 3, 0.2); }
        .step-item.active-yellow .step-name { color: #d97706; font-weight: 700; }
        .step-item.active-yellow .step-date { color: #b45309; font-weight: 600; }

        /* Styling Animasi Waiting / Pendaftaran Ditutup */
        .waiting-banner { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 2px dashed #f59e0b; border-radius: 1.25rem; padding: 2rem; text-align: center; margin-top: 1rem; color: #2c3e50; }
        .waiting-spinner { width: 55px; height: 55px; border: 5px solid #fde68a; border-top: 5px solid #d97706; border-radius: 50%; animation: spinPulse 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; margin: 0 auto 1rem auto; }
        @keyframes spinPulse {
            0% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.1); }
            100% { transform: rotate(360deg) scale(1); }
        }