:root {
    --raya-pink:       #B76E79;
    --raya-pink-light: #D88FA4;
    --raya-pink-pale:  #F8E9EF;
    --raya-dark:       #5C3D45;
    --raya-radius:     22px;
    --raya-ease:       0.35s cubic-bezier(0.22,1,0.36,1);
}

.raya-auth-wrap {
    max-width: 420px;
    margin: 40px auto;
    background: #fff;
    border-radius: var(--raya-radius);
    box-shadow: 0 20px 60px rgba(183,110,121,0.15);
    border: 1px solid var(--raya-pink-pale);
    overflow: hidden;
    direction: rtl;
}

.raya-auth-tabs { display: flex; border-bottom: 1px solid var(--raya-pink-pale); }
.raya-tab {
    flex: 1; padding: 16px; background: #fdf6f8; border: none;
    cursor: pointer; font-size: 0.88rem; font-weight: 600; color: #aaa;
    transition: all var(--raya-ease); font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
.raya-tab.active { background: #fff; color: var(--raya-pink); box-shadow: inset 0 -2px 0 var(--raya-pink); }

.raya-tab-content { padding: 32px 28px; }
.raya-tab-content.hidden,
.raya-step.hidden { display: none; }

.raya-auth-icon {
    width: 70px; height: 70px; border-radius: 50%;
    background: var(--raya-pink-pale);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.raya-auth-icon i { font-size: 1.8rem; color: var(--raya-pink); }

.raya-auth-wrap h3 {
    text-align: center; color: var(--raya-dark);
    font-size: 1.2rem; font-weight: 700; margin: 0 0 6px;
}
.raya-auth-desc { text-align: center; color: #999; font-size: 0.85rem; margin: 0 0 22px; }

.raya-input-wrap { position: relative; margin-bottom: 14px; }
.raya-input-icon {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%); color: var(--raya-pink);
    font-size: 0.9rem; pointer-events: none;
}
.raya-input {
    width: 100%; padding: 13px 40px 13px 14px;
    border: 1px solid var(--raya-pink-pale); border-radius: 14px;
    background: #fdf6f8; color: var(--raya-dark); font-size: 0.95rem;
    font-family: inherit; outline: none;
    transition: border-color var(--raya-ease), box-shadow var(--raya-ease);
    text-align: right; box-sizing: border-box;
}
.raya-input:focus {
    border-color: var(--raya-pink);
    box-shadow: 0 0 0 3px rgba(183,110,121,0.12);
    background: #fff;
}
.raya-pass-toggle {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); color: #bbb; cursor: pointer; font-size: 0.9rem;
}

.raya-btn {
    width: 100%; padding: 13px; border: none; border-radius: 50px;
    background: linear-gradient(135deg, var(--raya-pink), var(--raya-pink-light));
    color: #fff; font-size: 0.95rem; font-weight: 700; font-family: inherit;
    cursor: pointer; margin-top: 6px;
    box-shadow: 0 8px 20px rgba(183,110,121,0.3);
    transition: transform var(--raya-ease), box-shadow var(--raya-ease);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.raya-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(183,110,121,0.4); }
.raya-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.raya-btn-ghost {
    width: 100%; padding: 10px; border: 1px solid var(--raya-pink-pale);
    border-radius: 50px; background: transparent; color: var(--raya-pink);
    font-size: 0.85rem; font-weight: 600; font-family: inherit;
    cursor: pointer; margin-top: 8px; transition: all var(--raya-ease);
}
.raya-btn-ghost:hover { background: var(--raya-pink-pale); }
.raya-btn-ghost.hidden { display: none; }

.raya-otp-inputs {
    display: flex; gap: 5px; justify-content: center;
    margin: 20px 0; direction: ltr;
}
.raya-otp-box{
    width:50px !important;
    height:50px !important;
    padding:0 !important;
    margin:0 !important;
    text-align:center !important;
    line-height:50px !important;
    font-size:28px !important;
    font-family:Arial,sans-serif !important;
    color:#000 !important;
    background:#fff !important;
    border:2px solid #B76E79 !important;
    border-radius:14px;
    direction:ltr !important;
    text-indent:0 !important;
    letter-spacing:0 !important;
}
#raya-back-btn {
    display:flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.raya-otp-box:focus { border-color: var(--raya-pink); box-shadow: 0 0 0 3px rgba(183,110,121,0.15); background: #fff; }
.raya-otp-box.filled { border-color: var(--raya-pink); background: var(--raya-pink-pale); }

.raya-resend { text-align: center; margin-top: 14px; font-size: 0.82rem; color: #aaa; }
.raya-resend strong { color: var(--raya-pink); }

.raya-switch { text-align: center; margin-top: 14px; font-size: 0.85rem; color: #999; }
.raya-switch a { color: var(--raya-pink); font-weight: 700; text-decoration: none; }

.raya-auth-msg {
    margin: 0 28px; font-size: 0.85rem; border-radius: 12px;
    text-align: center; max-height: 0; overflow: hidden;
    transition: all var(--raya-ease);
}
.raya-auth-msg.error { background: #fff0f2; color: #c0392b; padding: 10px 16px; max-height: 60px; border: 1px solid #fcc; margin: 12px 28px; }
.raya-auth-msg.success { background: #f0fff4; color: #27ae60; padding: 10px 16px; max-height: 60px; border: 1px solid #b2dfdb; margin: 12px 28px; }

.raya-spinner-sm {
    width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff; border-radius: 50%;
    animation: raya-spin 0.6s linear infinite; display: inline-block;
}
@keyframes raya-spin { to { transform: rotate(360deg); } }

.raya-already-logged { text-align: center; padding: 20px; color: var(--raya-dark); }
.raya-already-logged a { color: var(--raya-pink); font-weight: 700; }
#raya-mobile {
    padding-right: 30px !important;
    padding-left: 20px !important;
    text-align: right !important;
}
#raya-password {
    padding-right: 30px !important;
    padding-left: 20px !important;
    text-align: right !important;
}
#raya-firstname {
    padding-right: 30px !important;
    padding-left: 20px !important;
    text-align: right !important;
}
#raya-lastname {
    padding-right: 30px !important;
    padding-left: 20px !important;
    text-align: right !important;
}
#raya-profile-email {
    padding-right: 30px !important;
    padding-left: 20px !important;
    text-align: right !important;
}
#raya-birthdate {
    padding-right: 30px !important;
    padding-left: 20px !important;
    text-align: right !important;
}
#raya-profile-password {
    padding-right: 30px !important;
    padding-left: 20px !important;
    text-align: right !important;
}
#raya-email {
    padding-right: 30px !important;
    padding-left: 20px !important;
    text-align: right !important;
}
@media (max-width: 480px) {
    .raya-auth-wrap {
     margin: 1px; }
    .raya-tab-content { padding: 24px 18px; }
    .raya-otp-box { width: 44px; height: 50px; font-size: 1.2rem; }
    .raya-auth-msg { margin: 8px 18px; }
}
.raya-name-row { display: flex; gap: 10px; }
.raya-name-row .raya-input-wrap { flex: 1; }
.raya-birthdate-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fdf6f8;
    border: 1px solid var(--raya-pink-pale);
    border-radius: 14px;
    padding: 4px 14px;
    margin-bottom: 14px;
}
.raya-birth-part {
    flex: 1;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    color: #333;
    outline: none;
    padding: 9px 0;
    font-family: inherit;
}
.raya-birth-sep {
    color: var(--raya-pink);
    font-weight: 700;
    font-size: 1.1rem;
}
.raya-birthdate-select {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    direction: rtl;
    justify-content: center;
    align-items: center;
}
.raya-birthdate-select .raya-select {
    flex: 0 0 auto;
    width: 30%;
}
.raya-select {
    flex: 0 0 auto;
    width: 30%;
    padding: 10px 0 !important;
    border: 1px solid var(--raya-pink-pale);
    border-radius: 14px !important;
    background: #fdf6f8;
    color: #333;
    font-family: inherit;
    font-size: 0.82rem;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
}
.raya-select:focus {
    border-color: var(--raya-pink);
    box-shadow: 0 0 0 3px rgba(183,110,121,0.12);
}
.raya-select {
    border-radius: 14px !important;
}
.raya-field-label {
    display: block;
    color: var(--raya-dark);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    padding-right: 4px;
}
#raya-birth-month {
    padding: 16px 0px 16px 18px !important;
}
.raya-field-label {
    display: block;
    color: var(--raya-dark);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    padding-right: 4px;
}
.raya-input-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231,76,60,0.12) !important;
    background: #fff8f8 !important;
}