:root {
    --merrikh-red: #dc2626;
    --merrikh-red-dark: #7f1d1d;
    --merrikh-yellow: #fbbf24;
    --merrikh-cream: #fff7ed;
}

.register-page {
    background: radial-gradient(circle at top left, rgba(220, 38, 38, 0.08), transparent 35%), linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
}

.register-shell {
    border: 0;
    border-radius: 1.5rem;
    box-shadow: 0 1.5rem 3.5rem rgba(127, 29, 29, 0.14);
}

.register-side {
    background: linear-gradient(145deg, var(--merrikh-red) 0%, var(--merrikh-red-dark) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.register-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(251, 191, 36, 0.22), transparent 32%);
    pointer-events: none;
}

.register-side .text-secondary {
    color: rgba(255, 255, 255, 0.78) !important;
}

.register-side .text-light,
.register-side .display-6,
.register-side h6 {
    color: #fff !important;
}

.register-form-panel h1 {
    color: var(--merrikh-red-dark);
}

.register-form-panel a {
    color: var(--merrikh-red);
    font-weight: 600;
}

.register-form-panel a:hover {
    color: var(--merrikh-red-dark);
}

.register-form-panel .form-control:focus {
    border-color: rgba(220, 38, 38, 0.45);
    box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.14);
}

.register-form-panel .form-check-input:checked {
    background-color: var(--merrikh-red);
    border-color: var(--merrikh-red);
}

.register-password-alert {
    background: linear-gradient(180deg, #fff7ed 0%, #fff1d6 100%);
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #7c2d12;
}

.register-captcha-alert {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.45);
    color: var(--merrikh-red-dark);
}

.btn-register-merrikh {
    background: linear-gradient(135deg, var(--merrikh-red) 0%, var(--merrikh-red-dark) 100%);
    border: none;
    color: #fff;
    box-shadow: 0 0.8rem 1.75rem rgba(220, 38, 38, 0.22);
}

.btn-register-merrikh:hover,
.btn-register-merrikh:focus {
    background: linear-gradient(135deg, #b91c1c 0%, #651111 100%);
    color: #fff;
}

.btn-outline-merrikh {
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--merrikh-red-dark);
}

.btn-outline-merrikh:hover {
    background: var(--merrikh-cream);
    border-color: var(--merrikh-red);
    color: var(--merrikh-red-dark);
}

.register-input-rounded {
    border-radius: 12px;
}

@media (max-width: 767.98px) {
    .register-page {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}