@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;600;700;900&display=swap');

/* ─── Wrapper ─────────────────────────────────────── */
.rn-reg-wrap {
    font-family: 'Noto Sans Devanagari', sans-serif;
    max-width: 640px;
    margin: 0 auto;
    padding: 20px;
    color: #1a1a1a;
}

/* ─── Header ──────────────────────────────────────── */
.rn-reg-header {
    text-align: center;
    margin-bottom: 28px;
}
.rn-reg-drop {
    font-size: 56px;
    animation: rn-reg-pulse 2s ease-in-out infinite;
    display: inline-block;
}
@keyframes rn-reg-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.12) drop-shadow(0 0 8px #e74c3c); }
}
.rn-reg-header h2 {
    font-size: 1.9em;
    font-weight: 900;
    color: #c0392b;
    margin: 8px 0 4px;
    letter-spacing: -0.5px;
}
.rn-reg-header p {
    color: #555;
    font-size: 0.97em;
    margin: 0;
}

/* ─── Form Card ───────────────────────────────────── */
.rn-reg-form {
    background: #fff;
    border: 2px solid #e74c3c;
    border-radius: 16px;
    padding: 28px 28px 24px;
    box-shadow: 0 6px 28px rgba(192,57,43,.12);
}

/* ─── Field ───────────────────────────────────────── */
.rn-reg-field {
    margin-bottom: 20px;
}
.rn-reg-field label {
    display: block;
    font-weight: 700;
    color: #222;
    margin-bottom: 7px;
    font-size: .95em;
}
.rn-req { color: #c0392b; }
.rn-opt { color: #888; font-weight: 400; font-size: .88em; }

.rn-reg-field input[type="text"],
.rn-reg-field input[type="tel"],
.rn-reg-field input[type="date"],
.rn-reg-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1.5px solid #ddd;
    border-radius: 9px;
    font-size: 1em;
    font-family: inherit;
    background: #fafafa;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.rn-reg-field input:focus,
.rn-reg-field textarea:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231,76,60,.15);
    background: #fff;
}
.rn-reg-field textarea {
    resize: vertical;
    min-height: 80px;
}

/* Mobile with +91 prefix */
.rn-mobile-wrap {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #ddd;
    border-radius: 9px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    background: #fafafa;
}
.rn-mobile-wrap:focus-within {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231,76,60,.15);
}
.rn-mobile-prefix {
    display: flex;
    align-items: center;
    padding: 11px 13px;
    background: #f0f0f0;
    font-weight: 700;
    color: #444;
    font-size: .97em;
    border-right: 1.5px solid #ddd;
    white-space: nowrap;
}
.rn-mobile-wrap input[type="tel"] {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    flex: 1;
}

/* Blood group grid */
.rn-blood-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.rn-blood-chip { cursor: pointer; }
.rn-blood-chip input { display: none; }
.rn-blood-chip span {
    display: block;
    text-align: center;
    padding: 10px 4px;
    border: 2px solid #e0e0e0;
    border-radius: 9px;
    font-weight: 700;
    font-size: 1em;
    background: #fafafa;
    transition: all .18s;
}
.rn-blood-chip input:checked + span {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
    transform: scale(1.06);
    box-shadow: 0 2px 10px rgba(192,57,43,.35);
}
.rn-blood-chip:hover span { border-color: #e74c3c; }

/* Field error */
.rn-field-err {
    display: block;
    color: #c0392b;
    font-size: .83em;
    margin-top: 4px;
    min-height: 1em;
}
.rn-reg-field--error input,
.rn-reg-field--error textarea,
.rn-reg-field--error .rn-mobile-wrap {
    border-color: #c0392b !important;
}

/* Toggle (willing) */
.rn-reg-field--inline { margin-bottom: 18px; }
.rn-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.rn-toggle-label input[type="checkbox"] { display: none; }
.rn-toggle-track {
    position: relative;
    width: 50px;
    height: 28px;
    background: #ddd;
    border-radius: 14px;
    flex-shrink: 0;
    transition: background .25s;
}
.rn-toggle-thumb {
    position: absolute;
    top: 3px; left: 3px;
    width: 22px; height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: left .25s;
}
.rn-toggle-label input:checked ~ .rn-toggle-track { background: #27ae60; }
.rn-toggle-label input:checked ~ .rn-toggle-track .rn-toggle-thumb { left: 25px; }
.rn-toggle-text { font-weight: 600; color: #333; font-size: .95em; }

/* ─── Footer & Submit ─────────────────────────────── */
.rn-reg-footer { margin-top: 8px; }
.rn-privacy-note {
    font-size: .82em;
    color: #888;
    margin: 0 0 14px;
    text-align: center;
}
.rn-reg-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    color: #fff;
    border: none;
    border-radius: 11px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    font-family: inherit;
}
.rn-reg-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 22px rgba(192,57,43,.38);
}
.rn-reg-btn:active { transform: translateY(0); }
.rn-reg-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* Error message */
.rn-reg-error-msg {
    margin-top: 14px;
    padding: 12px 16px;
    background: #fdecea;
    border: 1.5px solid #e74c3c;
    border-radius: 9px;
    color: #c0392b;
    font-size: .93em;
    text-align: center;
}

/* ─── Success State ───────────────────────────────── */
.rn-reg-success {
    text-align: center;
    padding: 40px 20px;
    background: #eafaf1;
    border: 2px solid #27ae60;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(39,174,96,.12);
}
.rn-success-icon {
    font-size: 64px;
    animation: rn-bounce .6s ease-out;
}
@keyframes rn-bounce {
    0%  { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100%{ transform: scale(1); opacity: 1; }
}
.rn-reg-success h3 {
    font-size: 1.6em;
    color: #1a7a46;
    margin: 12px 0 8px;
    font-weight: 900;
}
.rn-reg-success p {
    color: #2d6a4f;
    font-size: .97em;
    margin: 0 0 20px;
    line-height: 1.6;
}
.rn-reg-again-btn {
    padding: 11px 28px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s;
}
.rn-reg-again-btn:hover { background: #1e8449; }

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 480px) {
    .rn-reg-form { padding: 20px 16px; }
    .rn-blood-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .rn-blood-chip span { padding: 9px 2px; font-size: .9em; }
    .rn-reg-header h2 { font-size: 1.5em; }
}