:root {
    --gold: #cba156;
    --emerald: #1a3020;
    --cream: #fcfaf5;
}

.register-page {
    background: var(--cream);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Changa', sans-serif;
}

.registration-wrapper { width: 100%; max-width: 450px; padding: 20px; }

/* شريط التقدم */
.progress-container { display: flex; align-items: center; justify-content: center; margin-bottom: 30px; }
.progress-step {
    width: 35px; height: 35px; border-radius: 50%; background: #ddd;
    display: flex; align-items: center; justify-content: center; color: white; transition: 0.4s;
}
.progress-step.active { background: var(--gold); box-shadow: 0 0 15px rgba(203, 161, 86, 0.4); }
.progress-line { width: 50px; height: 2px; background: #ddd; }

/* الكرت الأبيض المودرن */
.reg-card {
    background: white; padding: 40px 30px; border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05); text-align: center;
    animation: slideIn 0.5s ease;
}

/* المدخلات بطريقة عائمة */
.input-box { position: relative; margin-bottom: 25px; }
.input-box input {
    width: 100%; padding: 15px; border: 1px solid #eee; border-radius: 12px;
    outline: none; transition: 0.3s;
}
.input-box label {
    position: absolute; right: 15px; top: 15px; color: #aaa;
    pointer-events: none; transition: 0.3s;
}
.input-box input:focus ~ label, .input-box input:not(:placeholder-shown) ~ label {
    top: -12px; right: 10px; font-size: 12px; background: white; padding: 0 5px; color: var(--gold);
}

/* التذكرة الملكية */
.royal-ticket {
    background: var(--emerald); color: white; border-radius: 30px;
    padding: 40px 20px; border: 2px solid var(--gold);
    position: relative; overflow: hidden;
}
.ticket-header h3 { font-family: 'El Messiri'; color: var(--gold); margin: 0; }
.ticket-content h4 { font-size: 1.8rem; margin: 20px 0; color: white; }
.ticket-meta { display: flex; justify-content: space-around; border-top: 1px dashed rgba(203, 161, 86, 0.3); padding-top: 15px; }
.ticket-qrcode { background: white; padding: 10px; border-radius: 15px; margin-top: 30px; display: inline-block; }

@keyframes slideIn { from {opacity: 0; transform: translateY(20px);} }