/* ============================================================
   EBDAA ALKHUTAA - REGISTRATION EXPERIENCE 2026
   Shared on trainee, trainer, quick flow, status and success
   Requires: _RegistrationLayout / _Styles / _Scripts
   ============================================================ */
:root {
    --rg-gold: #aa802d;
    --rg-gold-dark: #7d5816;
    --rg-gold-soft: #fff5df;
    --rg-ink: #293641;
    --rg-muted: #73808d;
    --rg-border: #e8e3d8;
    --rg-surface: #fff;
    --rg-canvas: #faf8f3;
    --rg-radius: 18px;
    --rg-shadow: 0 12px 40px rgba(37, 38, 38, .065);
}
[data-bs-theme="dark"] {
    --rg-gold: #e8c57a;
    --rg-gold-dark: #e8c57a;
    --rg-gold-soft: #3b3220;
    --rg-ink: #f3eee4;
    --rg-muted: #b8b6b0;
    --rg-border: #42474b;
    --rg-surface: #262d34;
    --rg-canvas: #1e2429;
    --rg-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}
.ak-rg { color: var(--rg-ink); max-width: 1240px; min-width: 0; margin-inline: auto; padding-block: clamp(16px, 2.5vw, 35px) 42px; }
.ak-rg *, .ak-rg *::before, .ak-rg *::after { box-sizing: border-box; }
.ak-rg .row, .ak-rg [class*="col-"] { min-width: 0; }
.ak-rg .registration-shell { width: 100%; max-width: none; margin: 0 auto; }
.ak-rg .registration-card, .ak-rg .success-card, .ak-rg .ak-rg-card {
    background: var(--rg-surface); border: 1px solid var(--rg-border) !important;
    box-shadow: var(--rg-shadow) !important; border-radius: var(--rg-radius) !important; overflow: hidden;
}
.ak-rg .registration-card .card-body { padding: clamp(19px, 3vw, 36px) !important; }
.ak-rg .registration-hero, .ak-rg .registration-header,
.ak-rg .ak-rg-hero { background: var(--rg-canvas); border-color: var(--rg-border); border-radius: var(--rg-radius); }
.ak-rg .registration-page-header, .ak-rg .registration-page-title,
.ak-rg h1, .ak-rg h2, .ak-rg h3, .ak-rg h4, .ak-rg h5 { color: var(--rg-ink); }
.ak-rg .text-muted, .ak-rg .text-body-secondary, .ak-rg .registration-meta-label { color: var(--rg-muted) !important; }
.ak-rg h1, .ak-rg h2, .ak-rg h3 { letter-spacing: -.012em; line-height: 1.35; }
.ak-rg a:focus-visible, .ak-rg button:focus-visible, .ak-rg input:focus-visible, .ak-rg select:focus-visible,
.ak-rg textarea:focus-visible { outline: 3px solid rgba(185, 139, 55, .35); outline-offset: 2px; }
/* Primary CTAs always readable in light and dark modes */
.ak-rg .btn-primary, .ak-rg .ak-rg-button { min-height: 48px; border-radius: 11px; font-weight: 800; }
.ak-rg .btn-lg { min-height: 54px; font-size: 1rem; }
.ak-rg .btn-outline-primary { border-radius: 11px; min-height: 44px; font-weight: 700; }
.ak-rg .form-control, .ak-rg .form-select, .ak-rg .select2-container--bootstrap-5 .select2-selection {
    min-height: 49px; border-radius: 10px !important; font-size: 1rem; border-color: var(--rg-border);
    background-color: var(--rg-surface); color: var(--rg-ink);
}
.ak-rg textarea.form-control { min-height: 103px; line-height: 1.7; }
.ak-rg .form-control:focus, .ak-rg .form-select:focus {
    border-color: var(--rg-gold) !important; box-shadow: 0 0 0 .18rem rgba(170,128,45,.13) !important;
}
.ak-rg .form-label { color: var(--rg-ink); font-weight: 800; margin-bottom: 8px; }
.ak-rg .field-help, .ak-rg .form-text { color: var(--rg-muted) !important; font-size: .84rem; line-height: 1.7; margin-top: 7px; }
.ak-rg .registration-section-title { display: flex; align-items: center; gap: 11px; padding: 0 0 13px;
    border-bottom: 1px solid var(--rg-border); margin: 26px 0 22px; }
.ak-rg .registration-section-title h5 { font-size: 1.15rem; font-weight: 900; margin: 0; }
.ak-rg .registration-section-icon, .ak-rg .registration-meta-icon { color: var(--rg-gold-dark) !important;
    background: var(--rg-gold-soft) !important; border-radius: 12px; }
.ak-rg .registration-meta-card { background: var(--rg-surface); border: 1px solid var(--rg-border);
    border-radius: 12px; padding: 15px; box-shadow: none; }
.ak-rg .registration-meta-value { font-weight: 800; color: var(--rg-ink); overflow-wrap: anywhere; }
.ak-rg .registration-notice { background: var(--rg-gold-soft); border: 1px solid rgba(170,128,45,.22);
    border-radius: 13px; padding: 15px; color: var(--rg-ink); }
.ak-rg .registration-notice p { color: var(--rg-ink); line-height: 1.85; }
.ak-rg .registration-notice > i { color: var(--rg-gold-dark); }
.ak-rg .existing-trainee-panel { padding: 17px; background: var(--rg-gold-soft);
    border: 1px solid rgba(170,128,45,.3); border-radius: 13px; }
.ak-rg .other-field { margin-top: 8px; }
.ak-rg #formError { overflow-wrap: anywhere; border-radius: 11px; line-height: 1.7; }
.ak-rg .select2-container { width: 100% !important; }
.ak-rg .select2-container--bootstrap-5 .select2-selection--single,
.ak-rg .select2-container--bootstrap-5 .select2-selection--multiple { min-height: 49px; }
/* Shared visual headers */
.ak-rg-top { position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding: clamp(20px, 3vw, 32px); margin-bottom: 22px; border: 1px solid var(--rg-border);
    background: linear-gradient(125deg, var(--rg-surface), var(--rg-canvas)); border-radius: var(--rg-radius); overflow: hidden; }
.ak-rg-top::after { content: ""; position: absolute; width: 240px; height: 240px; inset-inline-end: -100px;
    inset-block-end: -150px; border: 1px solid rgba(170,128,45,.16); border-radius: 50%; pointer-events: none; }
.ak-rg-top > * { position: relative; z-index: 1; }
.ak-rg-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
    background: var(--rg-gold-soft); color: var(--rg-gold-dark); border-radius: 40px;
    font-weight: 900; font-size: .83rem; margin-bottom: 10px; }
.ak-rg-title { font-size: clamp(1.45rem, 2.8vw, 2.3rem); font-weight: 900; margin: 0 0 10px; }
.ak-rg-intro { max-width: 680px; font-size: .98rem; line-height: 1.8; color: var(--rg-muted); margin-bottom: 0; }
.ak-rg-top-img { width: clamp(110px, 15vw, 190px); height: 155px; object-fit: contain; flex-shrink: 0; }
.ak-rg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    margin: 14px 0 22px; padding: 10px; border: 1px solid var(--rg-border); border-radius: 13px; background: var(--rg-canvas); }
.ak-rg-step { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0;
    padding: 10px 8px; border-radius: 9px; font-weight: 800; font-size: .87rem; color: var(--rg-muted);
    text-align: center; text-decoration: none; border: 0; background: transparent; cursor: pointer; }
.ak-rg-step > span { width: 26px; height: 26px; border-radius: 50%; background: var(--rg-border);
    color: var(--rg-ink); display: inline-grid; place-items: center; flex-shrink: 0; }
.ak-rg-step.is-active { background: var(--rg-gold-soft); color: var(--rg-gold-dark); }
.ak-rg-step.is-active > span { background: var(--rg-gold); color: #fff; }
.ak-rg-progress { height: 4px; border-radius: 4px; background: var(--rg-border); overflow: hidden; margin-bottom: 23px; }
.ak-rg-progress > div { width: 0; height: 100%; background: var(--rg-gold); transition: width .25s ease; }
.ak-rg-info { display: flex; align-items: flex-start; gap: 11px; background: var(--rg-gold-soft);
    border: 1px solid rgba(170,128,45,.23); padding: 15px; border-radius: 12px; line-height: 1.8; }
.ak-rg-info > i { font-size: 1.35rem; color: var(--rg-gold-dark); flex-shrink: 0; margin-top: 2px; }
.ak-rg-info p { color: var(--rg-ink); margin: 0; }
.ak-rg-status { max-width: 780px; margin-inline: auto; text-align: center; }
.ak-rg-status-icon { display: grid; place-items: center; width: 78px; height: 78px;
    margin: 0 auto 20px; border-radius: 22px; background: var(--rg-gold-soft); color: var(--rg-gold-dark); font-size: 2.7rem; }
.ak-rg-status-icon--error { background: rgba(211, 73, 68, .1); color: #d34d48; }
.ak-rg-status-icon--success { background: rgba(25, 143, 93, .11); color: #14905d; }
.ak-rg-status h1 { font-weight: 900; font-size: clamp(1.55rem, 3.2vw, 2.2rem); }
.ak-rg-status p { color: var(--rg-muted); font-size: 1.02rem; line-height: 1.85; }
.ak-rg-status-image { display: block; margin: 0 auto 17px; width: min(245px, 62vw); height: auto; max-height: 200px; object-fit: contain; }
.ak-rg-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 23px; }
.ak-rg-actions .btn { flex: 1 1 160px; max-width: 260px; min-height: 48px; display: inline-flex; gap: 7px; align-items: center; justify-content: center; }
/* Form safety / confirmation / account */
.ak-rg .success-main { padding: clamp(20px, 4vw, 42px) !important; }
.ak-rg .success-title { color: var(--rg-ink) !important; font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
.ak-rg .success-description { color: var(--rg-muted) !important; }
.ak-rg .success-icon, .ak-rg .registration-success-icon { background: #e5f6eb !important; color: #188451 !important; }
.ak-rg .account-created-box, .ak-rg .notification-box, .ak-rg .login-data-item {
    background: var(--rg-canvas) !important; border: 1px solid var(--rg-border) !important; border-radius: 13px !important; }
.ak-rg .login-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ak-rg .login-data-item { min-width: 0; }
.ak-rg .login-data-value { min-width: 0; display: flex; align-items: center; gap: 8px; }
.ak-rg .login-data-value strong { min-width: 0; overflow-wrap: anywhere; }
.ak-rg .success-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ak-rg .success-actions .btn { min-height: 48px; flex: 1 1 190px; }
.ak-rg .ak-rg-secret:not(.is-visible) { filter: blur(6px); user-select: none; }
.ak-rg .ak-rg-secret-toggle { flex-shrink: 0; min-width: 36px; min-height: 36px; }
.ak-rg .whatsapp-btn { border-radius: 11px; min-height: 50px; }
/* Compact mobile progress and layout */
.ak-rg-floating { display: none; }
@media (max-width: 991.98px) {
    .ak-rg-top-img { height: 125px; }
    .ak-rg .registration-meta-card { padding: 13px; }
    .ak-rg .registration-section-title { margin: 22px 0 17px; }
}
@media (max-width: 767.98px) {
    .ak-rg { padding-inline: 0; padding-block: 12px 28px; }
    .ak-rg-top { padding: 17px; gap: 10px; margin-bottom: 14px; }
    .ak-rg-title { font-size: 1.42rem; }
    .ak-rg-intro { font-size: .89rem; }
    .ak-rg-top-img { width: 90px; height: 105px; }
    .ak-rg .registration-card .card-body { padding: 18px !important; }
    .ak-rg .registration-card { border-radius: 14px !important; }
    .ak-rg .registration-section-title h5 { font-size: 1.06rem; }
    .ak-rg .form-control, .ak-rg .form-select { font-size: 16px; } /* avoid iOS zoom */
    .ak-rg .ak-rg-steps { padding: 7px; gap: 4px; }
    .ak-rg .ak-rg-step { padding: 8px 3px; font-size: .76rem; gap: 4px; }
    .ak-rg .ak-rg-step > span { width: 22px; height: 22px; }
    .ak-rg .registration-meta-card { margin-bottom: 0; }
    .ak-rg .login-data-grid { grid-template-columns: 1fr; }
    .ak-rg .success-actions { flex-direction: column; }
    .ak-rg .success-actions .btn { flex-basis: auto; width: 100%; }
    .ak-rg .ak-rg-status { padding: 3px; }
    .ak-rg-actions .btn { max-width: none; }
}
@media (max-width: 479.98px) {
    .ak-rg-top-img { width: 75px; height: 85px; }
    .ak-rg-top { align-items: flex-start; }
    .ak-rg .registration-card .card-body { padding: 16px !important; }
    .ak-rg .ak-rg-title { font-size: 1.28rem; }
    .ak-rg .ak-rg-steps { display: flex; gap: 4px; }
    .ak-rg .ak-rg-step { flex: 1; font-size: .69rem; }
}
@media (prefers-reduced-motion: reduce) { .ak-rg * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }