/* registration_wizard.css
 * Shared visual components for the unified registration wizard
 * (Course 1/2/3/4 + confirmation pages + success.php).
 * Namespaced with "rwiz-" to avoid colliding with page-specific CSS
 * (hero sections, FAQ blocks, the Bootstrap back-to-top widget, etc).
 * Loaded AFTER bootstrap.min.css / style.css / top_page.css so these
 * rules win on source order without needing !important.
 */

.rwiz-root {
    --rwiz-accent: #2461ae;
    --rwiz-tint: #eff5ff;
    --rwiz-navy: #132747;
    --rwiz-line: #dde6f0;
    --rwiz-muted: #64748b;
    --rwiz-bg: #f6f8fc;
    --rwiz-white: #ffffff;
    --rwiz-done: #2f8f4e;
    font-family: inherit;
    color: var(--rwiz-navy);
}
.rwiz-root[data-rwiz-course="2"] { --rwiz-accent: #16837f; --rwiz-tint: #eaf8f6; }
.rwiz-root[data-rwiz-course="3"] { --rwiz-accent: #16837f; --rwiz-tint: #e8f6f4; }
.rwiz-root[data-rwiz-course="4"] { --rwiz-accent: #9b4f74; --rwiz-tint: #fbeef4; }

.rwiz-root * { box-sizing: border-box; }

/* ---------- Stepper ----------
 * Called from all registration pages (renderRegistrationStepper()), including ones not
 * yet wrapped in .rwiz-root (Course 2/3/4/success.php pending their own stages), so every
 * var() here carries an explicit fallback to avoid unstyled/transparent output outside
 * a .rwiz-root ancestor.
 */
.rwiz-stepper {
    display: grid;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
.rwiz-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border-radius: 10px;
    background: var(--rwiz-white, #ffffff);
    border: 1px solid var(--rwiz-line, #dde6f0);
    font-size: 13px;
    font-weight: 700;
    color: var(--rwiz-muted, #64748b);
}
.rwiz-step-n {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    background: var(--rwiz-bg, #f6f8fc);
    color: var(--rwiz-muted, #64748b);
    border: 1px solid var(--rwiz-line, #dde6f0);
}
.rwiz-step span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rwiz-step-active {
    border-color: var(--rwiz-accent, #2461ae);
    background: var(--rwiz-tint, #eff5ff);
    color: var(--rwiz-navy, #132747);
}
.rwiz-step-active .rwiz-step-n {
    background: var(--rwiz-accent, #2461ae);
    border-color: var(--rwiz-accent, #2461ae);
    color: #fff;
}
.rwiz-step-done {
    color: var(--rwiz-navy, #132747);
}
.rwiz-step-done .rwiz-step-n {
    background: var(--rwiz-done, #2f8f4e);
    border-color: var(--rwiz-done, #2f8f4e);
    color: #fff;
}
@media (max-width: 680px) {
    .rwiz-stepper { grid-template-columns: 1fr !important; }
    .rwiz-step span:last-child { white-space: normal; }
}

/* ---------- Columns (form + side panel) ---------- */
.rwiz-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 262px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 820px) {
    .rwiz-columns { grid-template-columns: 1fr; }
    .rwiz-side { order: -1; }
}

/* ---------- Panel / card ---------- */
.rwiz-panel {
    background: var(--rwiz-white);
    border: 1px solid var(--rwiz-line);
    border-radius: 14px;
    overflow: hidden;
    min-width: 0;
}
.rwiz-panel-head {
    padding: 18px 22px;
    background: var(--rwiz-tint);
    border-bottom: 1px solid var(--rwiz-line);
    font-size: 17px;
    font-weight: 800;
    color: var(--rwiz-navy);
}
.rwiz-content {
    padding: 22px;
}
.rwiz-bottom {
    padding: 18px 22px;
    border-top: 1px solid var(--rwiz-line);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.rwiz-section-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--rwiz-navy);
    margin: 28px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rwiz-tint);
}
.rwiz-content > .rwiz-section-title:first-child { margin-top: 0; }

/* ---------- Fields ---------- */
.rwiz-field {
    margin-bottom: 16px;
}
.rwiz-field-label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rwiz-navy);
    margin-bottom: 6px;
}
.rwiz-req {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #e0586f;
    border-radius: 4px;
    padding: 1px 6px;
    vertical-align: middle;
}
.rwiz-hint {
    display: block;
    font-size: 12px;
    color: var(--rwiz-muted);
    margin-top: 4px;
}
.rwiz-input,
.rwiz-select,
.rwiz-root textarea.rwiz-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--rwiz-line);
    border-radius: 8px;
    font-size: 14px;
    color: var(--rwiz-navy);
    background: var(--rwiz-white);
}
.rwiz-input:focus,
.rwiz-select:focus {
    outline: none;
    border-color: var(--rwiz-accent);
    box-shadow: 0 0 0 3px var(--rwiz-tint);
}
.rwiz-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.rwiz-third {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}
@media (max-width: 560px) {
    .rwiz-pair, .rwiz-third { grid-template-columns: 1fr; }
}

/* ---------- Choice groups (radio/checkbox cards) ---------- */
.rwiz-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rwiz-choice {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--rwiz-line);
    border-radius: 8px;
    font-size: 13.5px;
    background: var(--rwiz-white);
    cursor: pointer;
}
.rwiz-choice:hover {
    border-color: var(--rwiz-accent);
}

/* ---------- Notice box ---------- */
.rwiz-notice {
    background: var(--rwiz-tint);
    border: 1px solid var(--rwiz-line);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--rwiz-navy);
    line-height: 1.7;
    margin-bottom: 18px;
}

/* ---------- Course / schedule grids ---------- */
.rwiz-course-grid,
.rwiz-schedule {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rwiz-course-option {
    border: 1px solid var(--rwiz-line);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--rwiz-white);
}

/* ---------- Side panel ---------- */
.rwiz-side {
    background: var(--rwiz-white);
    border: 1px solid var(--rwiz-line);
    border-radius: 14px;
    padding: 20px;
    position: sticky;
    top: 20px;
    min-width: 0;
}
.rwiz-side h3 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 800;
    color: var(--rwiz-navy);
}
.rwiz-summary-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--rwiz-muted);
    padding: 8px 0;
    border-bottom: 1px solid var(--rwiz-line);
}
.rwiz-summary-item span:last-child {
    color: var(--rwiz-navy);
    font-weight: 700;
    text-align: right;
}
.rwiz-progress {
    margin: 12px 0 16px;
    height: 8px;
    border-radius: 999px;
    background: var(--rwiz-bg);
    overflow: hidden;
}
.rwiz-progress-bar {
    height: 100%;
    background: var(--rwiz-accent);
    border-radius: 999px;
    transition: width .3s ease;
}
.rwiz-side-box {
    margin-top: 16px;
    background: var(--rwiz-tint);
    border-radius: 10px;
    padding: 14px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--rwiz-navy);
}
@media (max-width: 820px) {
    .rwiz-side { position: static; }
}

/* ---------- Notice row (info-card-soft pairs shown side by side) ---------- */
.rwiz-notice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}
@media (max-width: 820px) {
    .rwiz-notice-row { grid-template-columns: 1fr; }
}
.rwiz-notice-row .info-card-soft {
    margin-bottom: 0 !important;
}
.rwiz-notice-row .info-card-soft h5 {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rwiz-notice-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
}
.rwiz-notice-icon-info { background: #2461ae; }
.rwiz-notice-icon-warn { background: #d9822b; }

/* ---------- Buttons (restyle existing classes, not the mockup's .btn) ---------- */
.rwiz-root .btn-pink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 26px;
    border-radius: 10px;
    background: var(--rwiz-accent);
    color: #fff !important;
    font-weight: 800;
    border: none;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.rwiz-root .main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--rwiz-navy);
    color: #fff !important;
    font-weight: 700;
    border: none;
    font-size: 13px;
    cursor: pointer;
}
.rwiz-root .course-next-btn,
.rwiz-root .course-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 26px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 14px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.rwiz-root .course-next-btn {
    background: var(--rwiz-accent);
    color: #fff !important;
}
.rwiz-root .course-back-btn {
    background: var(--rwiz-white);
    color: var(--rwiz-navy) !important;
    border: 1px solid var(--rwiz-line);
}

/* ---------- Course 1 (courses.php): restyle existing field/sidebar markup ----------
 * Course 1 keeps its own JS-driven sub-stepper (#wizardSidebar, .wizard-step-nav-item,
 * toggled by showStep() in courses.php) and its existing .form-row/.form-left/.form-right/
 * .form-control field markup — names/ids/required untouched. These rules only restyle
 * those EXISTING classes to match the mockup, scoped under the new rwiz- wrappers, instead
 * of renaming every field.
 */
.rwiz-panel-head .wizard-sidebar {
    position: static;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
}
.rwiz-panel-head .wizard-sidebar-head { display: none; }
.rwiz-panel-head .wizard-steps-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 6px;
}
.rwiz-panel-head .wizard-step-nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 0 4px;
    color: var(--rwiz-muted);
    font-size: 11.5px;
    font-weight: 700;
    cursor: default;
}
.rwiz-panel-head .wizard-step-num {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rwiz-white);
    color: var(--rwiz-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid var(--rwiz-line);
}
.rwiz-panel-head .wizard-step-nav-item.is-active { color: var(--rwiz-navy); }
.rwiz-panel-head .wizard-step-nav-item.is-active .wizard-step-num {
    background: var(--rwiz-accent);
    border-color: var(--rwiz-accent);
    color: #fff;
}
.rwiz-panel-head .wizard-step-nav-item.is-done { color: var(--rwiz-navy); cursor: pointer; }
.rwiz-panel-head .wizard-step-nav-item.is-done .wizard-step-num {
    background: var(--rwiz-done);
    border-color: var(--rwiz-done);
    color: #fff;
}
@media (max-width: 575px) {
    .rwiz-panel-head .wizard-step-label { display: none; }
}

.rwiz-content .form-title-box { margin-bottom: 18px; }
.rwiz-content .pink-table,
.rwiz-content .google-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}
.rwiz-content .form-row {
    display: block;
    background: transparent;
    padding: 0 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--rwiz-line);
}
.rwiz-content .form-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.rwiz-content .form-left {
    padding: 0 0 8px;
    background: transparent;
    border: none;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--rwiz-navy);
}
.rwiz-content .form-right {
    padding: 0;
    background: transparent;
}
.rwiz-content .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--rwiz-line);
    border-radius: 8px;
    font-size: 14px;
    color: var(--rwiz-navy);
    background: var(--rwiz-white);
}
.rwiz-content .form-control:focus {
    outline: none;
    border-color: var(--rwiz-accent);
    box-shadow: 0 0 0 3px var(--rwiz-tint);
}

.rwiz-bottom .wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}
.rwiz-bottom .wizard-footer-progress {
    font-size: 13px;
    font-weight: 700;
    color: var(--rwiz-muted);
    order: 2;
}
.rwiz-bottom .wizard-btn-back,
.rwiz-bottom .wizard-btn-next {
    border: none;
    border-radius: 10px;
    padding: 11px 26px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
}
.rwiz-bottom .wizard-btn-back {
    background: var(--rwiz-white);
    color: var(--rwiz-navy);
    border: 1px solid var(--rwiz-line);
    order: 1;
}
.rwiz-bottom .wizard-btn-next {
    background: var(--rwiz-accent);
    color: #fff;
    order: 3;
    margin-left: auto;
}
@media (max-width: 575px) {
    .rwiz-bottom .wizard-footer { justify-content: center; }
    .rwiz-bottom .wizard-btn-back,
    .rwiz-bottom .wizard-btn-next {
        flex: 1 1 auto;
        text-align: center;
        padding: 12px 16px;
    }
    .rwiz-bottom .wizard-footer-progress {
        order: 0;
        flex: 1 1 100%;
        text-align: center;
    }
}