/* ==========================================================================
   نظام تصميم شاشات المصادقة الحديثة (تسجيل + دخول) — مودّة
   بسيط، متمركز، Mobile-first، Floating Labels، هوية مودّة.
   ========================================================================== */
.reg { max-width: 460px; margin: 0 auto; padding: 22px 18px 40px; }
.reg-card { background: var(--bg-surface, #fff); border: 1px solid var(--border-subtle, rgba(13,47,58,.08));
    border-radius: 26px; padding: 26px 24px; box-shadow: 0 18px 50px rgba(13,47,58,.10); }
.reg-hero { text-align: center; margin-bottom: 20px; }
.reg-logo { width: 56px; height: 56px; border-radius: 18px; object-fit: cover; margin-bottom: 12px; }
.reg-hero h1 { font-size: 1.5rem; font-weight: 800; color: var(--text-primary, #17343B); margin: 0 0 6px; }
.reg-hero p { color: var(--text-muted, #5C7078); margin: 0; font-size: .95rem; line-height: 1.7; }
.reg-proof { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .82rem; color: var(--text-muted, #5C7078); }
.reg-proof .stars { color: var(--highlight, #D8B56A); letter-spacing: 1px; }

.reg-alert { background: rgba(215,87,76,.1); color: #b23b31; border-radius: 12px; padding: 10px 14px; font-size: .9rem; margin-bottom: 14px; }
.reg-info { background: rgba(23,107,107,.08); color: var(--primary, #176B6B); border-radius: 12px; padding: 10px 14px; font-size: .9rem; margin-bottom: 14px; }
.reg-gift { background: rgba(216,181,106,.14); color: #8a6d2f; border-radius: 12px; padding: 9px 14px; font-size: .86rem; margin-bottom: 14px; }

.reg-field { position: relative; margin-bottom: 13px; }
.reg-input { width: 100%; height: 58px; padding: 22px 16px 8px; border: 1.5px solid var(--border-subtle, rgba(13,47,58,.14));
    border-radius: 14px; background: var(--bg-surface, #fff); color: var(--text-primary, #17343B); font-size: 1.02rem;
    font-family: inherit; transition: border-color .16s, box-shadow .16s; }
.reg-input:focus { outline: none; border-color: var(--primary, #176B6B); box-shadow: 0 0 0 4px rgba(23,107,107,.13); }
.reg-input.ok { border-color: #2E9E6B; }
.reg-field > label { position: absolute; inset-inline-start: 16px; top: 18px; color: var(--text-muted, #7c8a8a);
    pointer-events: none; transition: .15s ease; font-size: 1.02rem; }
.reg-input:focus ~ label, .reg-input:not(:placeholder-shown) ~ label { top: 8px; font-size: .72rem; color: var(--primary, #176B6B); }
.reg-field .reg-ficon { position: absolute; inset-inline-end: 16px; top: 19px; color: var(--text-muted, #aab4b4); font-size: 1rem; }
.reg-field .reg-eye { position: absolute; inset-inline-end: 10px; top: 11px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--text-muted, #7c8a8a); cursor: pointer; border-radius: 8px; }
.reg-field .reg-eye:hover { color: var(--primary, #176B6B); }
.reg-input.has-icon { padding-inline-end: 46px; }
.reg-vmsg { color: #d7574c; font-size: .8rem; display: block; margin: 4px 4px 0; }

.reg-cta { width: 100%; height: 56px; border: 0; border-radius: 16px; background: var(--primary, #176B6B); color: #fff;
    font-size: 1.08rem; font-weight: 700; cursor: pointer; margin-top: 8px; transition: background .16s, transform .12s, box-shadow .16s;
    box-shadow: 0 10px 26px rgba(23,107,107,.28); display: flex; align-items: center; justify-content: center; gap: 8px; }
.reg-cta:hover:not(:disabled) { background: var(--primary-hover, #135D5D); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(23,107,107,.36); }
.reg-cta:active { transform: scale(.99); }
.reg-cta:disabled { opacity: .8; cursor: default; }

.reg-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 6px; font-size: .88rem; }
.reg-remember { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted, #5C7078); cursor: pointer; }
.reg-remember input { width: 18px; height: 18px; accent-color: var(--primary, #176B6B); }
.reg-forgot { color: var(--primary, #176B6B); font-weight: 600; text-decoration: none; }

.reg-consent { text-align: center; font-size: .76rem; color: var(--text-muted, #98a4a4); margin-top: 12px; line-height: 1.8; }
.reg-consent a { color: var(--primary, #176B6B); font-weight: 600; }
.reg-trust { text-align: center; font-size: .78rem; color: var(--text-muted, #98a4a4); margin-top: 8px; line-height: 1.8; }
.reg-trust i { color: var(--primary, #176B6B); }
.reg-login { text-align: center; margin-top: 16px; font-size: .92rem; color: var(--text-muted, #5C7078); }
.reg-login a { color: var(--primary, #176B6B); font-weight: 700; }
.reg-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.reg-shake { animation: regShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes regShake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
@media (max-width: 480px) { .reg-card { padding: 22px 18px; border-radius: 22px; } .reg-hero h1 { font-size: 1.35rem; } }
@media (prefers-reduced-motion: reduce) { .reg-shake { animation: none; } }