/* External registration — NRGC logo palette (navy, gold) */
:root {
    --ext-reg-navy: #0D2240;
    --ext-reg-navy-dark: #091830;
    --ext-reg-primary: var(--ext-reg-navy);
    --ext-reg-accent: #C5A059;
    --ext-reg-accent-light: #D4B56A;
    --ext-reg-light: #EDE8DF;
    --ext-reg-white: #ffffff;
    --ext-reg-border: #B8A882;
    --ext-reg-text-muted: #5C6478;
    --ext-reg-bg: #FAF8F4;
}

.ext-reg {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--ext-reg-primary);
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
    background: var(--ext-reg-bg);
}

/* Common portal registration only — org-specific pages keep the NRGC palette above */
.ext-reg--platform {
    --ext-reg-navy: #002D5B;
    --ext-reg-navy-dark: #001c3a;
    --ext-reg-primary: var(--ext-reg-navy);
    --ext-reg-accent: #4D5827;
    --ext-reg-accent-light: #6B7540;
    --ext-reg-light: #E8EEF4;
    --ext-reg-border: #C5CDD6;
    --ext-reg-bg: transparent;
    --ext-reg-text-muted: #4a5568;
}

body.nk-body.bg-white:has(.ext-reg--platform) {
    margin: 0;
    min-height: 100vh;
    background-color: transparent !important;
    background-image:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(77, 88, 39, 0.12), transparent 55%),
        radial-gradient(ellipse 70% 50% at 90% 80%, rgba(0, 45, 91, 0.1), transparent 50%),
        linear-gradient(165deg, #eef3f8 0%, #ffffff 45%, #f4f6ef 100%) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#external-registration-app {
    position: relative;
}

.ext-reg-processing-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(13, 34, 64, 0.5);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.ext-reg-processing-overlay.is-visible {
    display: flex;
}
.ext-reg-processing-popup {
    background: var(--ext-reg-white);
    border: 1px solid var(--ext-reg-border);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(13, 34, 64, 0.2);
    padding: 2rem 1.75rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
}
.ext-reg-processing-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 1.25rem;
    border: 4px solid var(--ext-reg-light);
    border-top-color: var(--ext-reg-navy);
    border-radius: 50%;
    animation: ext-reg-spin 0.9s linear infinite;
}
.ext-reg-processing-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ext-reg-navy);
    margin: 0 0 0.5rem;
}
.ext-reg-processing-subtitle {
    font-size: 0.85rem;
    color: var(--ext-reg-text-muted);
    line-height: 1.45;
    margin: 0;
}
@keyframes ext-reg-spin {
    to { transform: rotate(360deg); }
}

.ext-reg-header { text-align: center; margin-bottom: 1.25rem; }
.ext-reg-header img { max-height: 80px; max-width: 100%; object-fit: contain; }
.ext-reg-header h1 { font-size: 1.25rem; font-weight: 700; margin-top: 0.5rem; color: var(--ext-reg-navy); }
.ext-reg-login-note {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--ext-reg-text-muted);
}
.ext-reg-login-btn {
    margin-left: 0.35rem;
    vertical-align: middle;
    font-weight: 600;
}

.ext-reg-secure-badge {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem 0.5rem;
    font-size: 0.9rem; color: var(--ext-reg-text-muted); margin-bottom: 1rem;
}
.ext-reg-secure-badge .icon { color: var(--ext-reg-accent); font-size: 1.1rem; }
.ext-reg-support-label { color: var(--ext-reg-text-muted); }
.ext-reg-support-link {
    font-size: 0.95rem; font-weight: 600; text-decoration: underline; color: var(--ext-reg-navy);
}
.ext-reg-support-link:hover { color: var(--ext-reg-accent); }

.ext-reg-progress {
    display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: space-between;
    margin-bottom: 1.5rem; position: relative;
}
.ext-reg-progress-step {
    flex: 1 1 90px; text-align: center; font-size: 0.72rem; color: var(--ext-reg-text-muted);
    padding-top: 0.25rem;
}
.ext-reg-progress-step .step-circle {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ext-reg-border);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; background: var(--ext-reg-white); margin-bottom: 0.25rem;
    color: var(--ext-reg-navy);
}
.ext-reg-progress-step.active .step-circle {
    background: var(--ext-reg-navy); border-color: var(--ext-reg-accent); color: var(--ext-reg-white);
}
.ext-reg-progress-step.completed .step-circle {
    background: var(--ext-reg-navy); border-color: var(--ext-reg-accent); color: var(--ext-reg-white);
}
.ext-reg-progress-step.active .step-label { color: var(--ext-reg-navy); font-weight: 600; }

.ext-reg-layout { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.ext-reg-main { flex: 1 1 520px; min-width: 0; }
.ext-reg-sidebar { flex: 0 1 300px; min-width: 260px; }

.ext-reg-card {
    background: var(--ext-reg-white); border: 1px solid var(--ext-reg-border); border-radius: 12px;
    padding: 1.5rem; box-shadow: 0 4px 16px rgba(13, 34, 64, 0.08);
}
.ext-reg-step { display: none; }
.ext-reg-step.active { display: block; }

.ext-reg-card .form-label { font-weight: 600; color: var(--ext-reg-navy); font-size: 0.9rem; }
.ext-reg-card .form-control, .ext-reg-card .form-select { border-color: var(--ext-reg-border); }
.ext-reg-card .form-control:focus, .ext-reg-card .form-select:focus {
    border-color: var(--ext-reg-navy); box-shadow: 0 0 0 0.2rem rgba(13, 34, 64, 0.2);
}

.btn-ext-reg-primary {
    background: var(--ext-reg-navy); border-color: var(--ext-reg-navy); color: var(--ext-reg-white);
}
.btn-ext-reg-primary:hover, .btn-ext-reg-primary:focus {
    background: transparent; border-color: var(--ext-reg-navy); color: var(--ext-reg-navy);
}
.btn-ext-reg-outline {
    background: transparent; border: 1px solid var(--ext-reg-navy); color: var(--ext-reg-navy);
}
.btn-ext-reg-outline:hover, .btn-ext-reg-outline:focus {
    background: transparent; border-color: var(--ext-reg-navy); color: var(--ext-reg-navy);
}
.btn-ext-reg-complete {
    background: var(--ext-reg-navy); border-color: var(--ext-reg-navy); color: var(--ext-reg-white);
    padding: 0.65rem 1.5rem;
}
.btn-ext-reg-complete:hover, .btn-ext-reg-complete:focus {
    background: transparent; border-color: var(--ext-reg-navy); color: var(--ext-reg-navy);
}
.btn-ext-reg-complete:disabled { opacity: 0.75; cursor: wait; }

.step-title { font-size: 1.15rem; font-weight: 700; color: var(--ext-reg-navy); margin-bottom: 0.25rem; }
.step-subtitle { font-size: 0.9rem; color: var(--ext-reg-text-muted); margin-bottom: 1rem; }
.ext-reg-step-org {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ext-reg-navy);
    text-align: center;
    line-height: 1.3;
    margin: 0 0 1rem;
}

.secure-banner {
    background: var(--ext-reg-light); border: 1px solid var(--ext-reg-border); border-radius: 8px;
    padding: 0.75rem 1rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.9rem; color: var(--ext-reg-navy);
}

.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 0.5rem; }
.plan-card {
    border: 2px solid var(--ext-reg-border); border-radius: 10px; padding: 1rem;
    cursor: pointer; transition: all 0.2s ease; background: var(--ext-reg-bg);
}
.plan-card:hover, .plan-card.selected {
    border-color: var(--ext-reg-navy); background: var(--ext-reg-light);
    box-shadow: 0 0 0 1px var(--ext-reg-accent);
}
.plan-card h5 { margin: 0 0 0.35rem; color: var(--ext-reg-navy); font-size: 1rem; }
.plan-card .fee { font-size: 1.2rem; font-weight: 700; color: var(--ext-reg-accent); }

.selected-plan-summary {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    background: var(--ext-reg-light);
    border: 1px solid var(--ext-reg-border);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--ext-reg-navy);
    font-weight: 600;
}
.selected-plan-fee { color: var(--ext-reg-accent); font-weight: 700; }

.auto-renew-box {
    border: 1px solid var(--ext-reg-border); border-radius: 10px; padding: 1rem 1.25rem;
    margin-top: 1.25rem; display: flex; align-items: flex-start; gap: 1rem; background: var(--ext-reg-bg);
}
.auto-renew-box .auto-renew-icon { color: var(--ext-reg-accent); font-size: 1.25rem; margin-top: 0.15rem; }
.auto-renew-box .auto-renew-text h6 { margin: 0 0 0.25rem; font-weight: 700; color: var(--ext-reg-navy); }
.auto-renew-box .auto-renew-text p { margin: 0; font-size: 0.85rem; color: var(--ext-reg-text-muted); line-height: 1.4; }

.toggle-switch { position: relative; width: 48px; height: 26px; flex-shrink: 0; margin-left: auto; cursor: pointer; display: inline-block; }
.toggle-switch input[type="checkbox"] {
    opacity: 0; width: 0; height: 0; position: absolute; margin: 0;
}
.toggle-slider {
    position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 26px; transition: 0.3s;
}
.toggle-slider:before {
    position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px;
    background: white; border-radius: 50%; transition: 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input[type="checkbox"]:checked ~ .toggle-slider { background: var(--ext-reg-navy); }
.toggle-switch input[type="checkbox"]:checked ~ .toggle-slider:before { transform: translateX(22px); }
.toggle-switch input[type="checkbox"]:focus ~ .toggle-slider { box-shadow: 0 0 0 2px rgba(13, 34, 64, 0.35); }

.payment-method-header {
    display: flex; align-items: center; gap: 0.85rem;
    border: 1px solid var(--ext-reg-border); border-radius: 10px;
    padding: 0.9rem 1rem; margin-bottom: 1.25rem; background: var(--ext-reg-light);
}
.payment-method-header .payment-method-icon { font-size: 1.6rem; color: var(--ext-reg-accent); line-height: 1; }
.payment-method-header strong { display: block; color: var(--ext-reg-navy); font-size: 0.95rem; }
.payment-method-note { font-size: 0.8rem; color: var(--ext-reg-text-muted); margin-top: 0.15rem; }
.payment-card-fields { margin-bottom: 0.5rem; }

.charge-summary-box {
    background: var(--ext-reg-light); border: 1px solid var(--ext-reg-border); border-radius: 8px;
    padding: 1rem; margin-top: 1.25rem; display: flex; gap: 0.75rem; align-items: flex-start;
}
.charge-summary-box .shield { color: var(--ext-reg-accent); font-size: 1.25rem; }

.order-sidebar-card {
    background: var(--ext-reg-white); border: 1px solid var(--ext-reg-border); border-radius: 12px;
    padding: 1.25rem; position: sticky; top: 1rem;
}
.order-sidebar-card h5 { font-weight: 700; color: var(--ext-reg-navy); margin-bottom: 1rem; font-size: 1rem; }
.order-org { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ext-reg-border); }
.order-org img { max-height: 40px; max-width: 60px; object-fit: contain; }
.order-org .org-name { font-size: 0.85rem; font-weight: 600; color: var(--ext-reg-navy); line-height: 1.3; }
.order-line { display: flex; justify-content: space-between; font-size: 0.88rem; margin-bottom: 0.5rem; color: var(--ext-reg-text-muted); }
.order-line .val { color: var(--ext-reg-navy); font-weight: 500; }
.order-line.total { font-weight: 700; color: var(--ext-reg-navy); margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--ext-reg-border); }
.order-line.total .val { color: var(--ext-reg-accent); font-size: 1.1rem; }
.text-enabled { color: var(--ext-reg-accent); font-weight: 600; }
.order-secure-note {
    background: var(--ext-reg-light); border-radius: 8px; padding: 0.75rem; margin-top: 1rem;
    font-size: 0.8rem; color: var(--ext-reg-text-muted); display: flex; gap: 0.5rem; align-items: flex-start;
}

.review-section {
    border: 1px solid var(--ext-reg-border); border-radius: 10px; padding: 1rem 1.25rem;
    margin-bottom: 1rem; position: relative;
}
.review-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.review-section-header h6 { margin: 0; font-weight: 700; color: var(--ext-reg-navy); display: flex; align-items: center; gap: 0.5rem; }
.review-section-header .section-icon { color: var(--ext-reg-accent); }
.review-edit-link { color: var(--ext-reg-navy); font-size: 0.85rem; cursor: pointer; text-decoration: none; font-weight: 600; }
.review-edit-link:hover { text-decoration: underline; color: var(--ext-reg-navy-dark); }
.review-row { display: flex; margin-bottom: 0.35rem; font-size: 0.9rem; }
.review-row .label { width: 140px; flex-shrink: 0; color: var(--ext-reg-text-muted); }
.review-row .value { color: var(--ext-reg-navy); flex: 1; }
.review-plan-price { float: right; font-weight: 600; color: var(--ext-reg-navy); }

.payment-display { display: flex; align-items: center; gap: 0.75rem; }
.payment-display .card-icon { font-size: 1.5rem; color: var(--ext-reg-accent); }

.ext-reg-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; margin-top: 1.5rem; }
.msg-alerts .alert { margin-bottom: 1rem; }
.ext-reg-success-alert { text-align: center; }
.ext-reg-success-alert .btn { min-width: 140px; background: var(--ext-reg-navy); border-color: var(--ext-reg-navy); }
.ext-reg-success-alert .btn:hover { background: transparent; border-color: var(--ext-reg-navy); color: var(--ext-reg-navy); }

.verified-email-row { display: flex; align-items: center; gap: 0.5rem; }
.verified-email-row img { width: 24px; }

.ext-reg-modal .modal-content {
    border: 1px solid var(--ext-reg-border);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(13, 34, 64, 0.18);
}
.ext-reg-modal .modal-body { color: var(--ext-reg-navy); }
.ext-reg-spam-reminder-text { font-size: 0.95rem; line-height: 1.5; }
.ext-reg-modal .modal-footer { flex-wrap: wrap; }

@media (max-width: 768px) {
    .ext-reg-sidebar { flex: 1 1 100%; }
    .order-sidebar-card { position: static; }
    .ext-reg-progress-step { font-size: 0.65rem; }
}