/**
 * Shared effects for both Apply Now wizards (see public/assets/oxford/js/wizard-fx.js).
 * Presentation only. Uses the registration page tokens (--ink, --gold, --gold-soft, ...).
 */

/* ---------- Upload fill: gold while the receipt is processed, green when it is ready ---------- */
.fx-fill-host { position: relative; overflow: hidden; isolation: isolate; }
.fx-fill {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    transform: scaleX(0); transform-origin: left center;
    background: linear-gradient(90deg, rgba(255, 204, 0, .30), rgba(255, 204, 0, .55));
}
[dir="rtl"] .fx-fill { transform-origin: right center; }
.fx-filling .fx-fill { transform: scaleX(.86); transition: transform 1.4s cubic-bezier(.1, .6, .2, 1); }
.fx-filling .fx-fill::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: fx-shimmer 1s linear infinite;
}
.fx-filled .fx-fill {
    transform: scaleX(1);
    background: linear-gradient(90deg, rgba(26, 127, 55, .14), rgba(26, 127, 55, .24));
    transition: transform .28s ease-out, background-color .3s ease;
}
@keyframes fx-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Copy button fill (adult wizard: round copy buttons) ---------- */
.fx-copy-host { position: relative; overflow: hidden; isolation: isolate; }
.fx-copy-host::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: var(--gold, #ffcc00); transform: scale(0);
}
.fx-copied::before { animation: fx-copy-fill .45s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes fx-copy-fill { from { transform: scale(0); } to { transform: scale(1.05); } }

/* ---------- Adult wizard: transfer details in the same navy panel as the kids wizard ---------- */
#wizard-card .credentials-container {
    margin: 22px 0 0; padding: 18px 16px; border: 0; border-radius: var(--r-md);
    background: var(--ink); color: #fff;
}
#wizard-card .credentials-container > .form-label { color: var(--gold) !important; margin-bottom: 12px !important; }
#wizard-card .credentials-container > .form-label i { color: var(--gold) !important; }
#wizard-card .credentials-container .bg-light { background: rgba(255, 255, 255, .08) !important; }
#wizard-card .credentials-container .bg-light small { color: rgba(255, 255, 255, .8) !important; }
#wizard-card #credentials-list { gap: 0 !important; }
#wizard-card .credential-card {
    background: transparent; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0;
    padding: 12px 4px; margin: 0 !important;
}
#wizard-card .credential-card:first-child { border-top: 0; }
#wizard-card .credential-card:hover { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
#wizard-card .credential-card .credential-icon { background: rgba(255, 255, 255, .1); border: 0; color: var(--gold); }
#wizard-card .credential-card .credential-label { color: rgba(255, 255, 255, .7) !important; }
#wizard-card .credential-card .credential-value { color: #fff !important; }
#wizard-card .credential-card .credential-copy-btn { background: transparent; border-color: var(--gold); color: var(--gold); }
#wizard-card .credential-card .credential-copy-btn:hover { background: rgba(255, 204, 0, .15); color: var(--gold); transform: none; }
#wizard-card .credential-card .credential-copy-btn.fx-copied { color: var(--ink); }
#wizard-card .credential-card .credential-copy-btn:focus-visible,
#wizard-card .payment-method-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Adult receipt dropzone: the fill sits behind the icon and text. */
#receipt-dropzone > *:not(.fx-fill):not(#receipt_input) { position: relative; }
#receipt-dropzone.fx-filled { border-color: #1a7f37 !important; border-style: solid !important; }

/* ---------- Final-submit overlay (WizardFX.processing): fill + particles ---------- */
/* Below the particle-burst canvas (2147483000) so the success burst draws on top. */
.fx-proc {
    --fx-proc: 0;
    position: fixed; inset: 0; z-index: 2147482000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: radial-gradient(120% 90% at 50% 0%, rgba(10, 68, 134, .92) 0%, rgba(0, 42, 85, .96) 60%, rgba(0, 26, 54, .98) 100%);
    opacity: 0; transition: opacity .22s ease-out;
    font-family: inherit;
}
.fx-proc, .fx-proc *, .fx-proc *::before, .fx-proc *::after { box-sizing: border-box; }
.fx-proc.fx-proc-open { opacity: 1; }
.fx-proc.fx-proc-leaving { opacity: 0; transition-duration: .2s; }
.fx-proc-sky { position: absolute; inset: 0; pointer-events: none; }

.fx-proc-card {
    position: relative; width: 100%; max-width: 440px;
    padding: 34px 28px 26px; border-radius: 22px; text-align: center;
    background: #fff; color: var(--ink, #003366);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 204, 0, .25);
    transform: translateY(14px) scale(.98); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
    outline: none;
}
.fx-proc-open .fx-proc-card { transform: none; }

/* Badge: a liquid gold fill rising behind the icon with the progress. */
.fx-proc-badge {
    position: relative; width: 84px; height: 84px; margin: 0 auto 18px;
    border-radius: 50%; overflow: hidden; isolation: isolate;
    background: var(--gold-soft, #fff9e0);
    box-shadow: 0 0 0 6px rgba(255, 204, 0, .18), 0 10px 26px rgba(0, 51, 102, .18);
}
.fx-proc-badge-fill {
    position: absolute; left: -10%; right: -10%; bottom: 0; z-index: -1;
    height: calc(var(--fx-proc) * 100%);
    background: linear-gradient(180deg, #ffe680 0%, #ffcc00 100%);
    transition: height .4s ease-out, background .3s ease;
}
.fx-proc-badge-fill::before {
    content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 18px;
    background: radial-gradient(12px 9px at 25% 100%, #ffe680 98%, transparent 100%) 0 0 / 36px 18px repeat-x;
    animation: fx-proc-wave 1.6s linear infinite;
}
.fx-proc-icon {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: var(--ink, #003366);
    animation: fx-proc-float 1.8s ease-in-out infinite;
}

.fx-proc-title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--ink, #003366); letter-spacing: -.01em; }
.fx-proc-step { margin: 0 0 20px; min-height: 1.5em; font-size: 1rem; color: var(--ink-soft, #6c7689); }
.fx-proc-step-in { animation: fx-proc-step-in .35s ease-out; }

/* Bar: same gold gradient + shimmer as the receipt upload (.fx-fill). */
.fx-proc-bar {
    position: relative; height: 14px; border-radius: 999px; overflow: hidden;
    background: #eef1f6; box-shadow: inset 0 1px 2px rgba(0, 51, 102, .12);
}
.fx-proc-bar-fill {
    position: absolute; inset: 0;
    transform: scaleX(var(--fx-proc)); transform-origin: left center;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 204, 0, .65), #ffcc00);
    transition: transform .4s ease-out, background .3s ease;
}
[dir="rtl"] .fx-proc-bar-fill { transform-origin: right center; }
.fx-proc-bar-fill::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
    animation: fx-shimmer 1s linear infinite;
}
.fx-proc-meta {
    display: flex; justify-content: space-between; margin: 8px 2px 0;
    font-size: .8rem; font-weight: 700; color: var(--ink-soft, #6c7689); font-variant-numeric: tabular-nums;
}
.fx-proc-hint {
    margin: 16px 0 0; padding: 10px 12px; border-radius: 12px;
    background: var(--gold-soft, #fff9e0); color: var(--ink, #003366);
    font-size: .88rem; line-height: 1.45;
}
.fx-proc-hint:empty { display: none; }

/* Success: everything turns green, then the burst plays. */
.fx-proc-done .fx-proc-bar-fill { background: linear-gradient(90deg, #2ea043, #1a7f37); }
.fx-proc-done .fx-proc-bar-fill::after { animation: none; opacity: 0; }
.fx-proc-done .fx-proc-badge { background: #e7f6ec; box-shadow: 0 0 0 6px rgba(26, 127, 55, .18), 0 10px 26px rgba(26, 127, 55, .25); }
.fx-proc-done .fx-proc-badge-fill { background: linear-gradient(180deg, #56c271, #1a7f37); }
.fx-proc-done .fx-proc-badge-fill::before { background-image: radial-gradient(12px 9px at 25% 100%, #56c271 98%, transparent 100%); }
.fx-proc-done .fx-proc-icon { color: #fff; animation: fx-proc-pop .45s cubic-bezier(.2, .8, .2, 1.4); }
.fx-proc-done .fx-proc-title { color: #1a7f37; }

@keyframes fx-proc-wave { from { background-position-x: 0; } to { background-position-x: 36px; } }
@keyframes fx-proc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes fx-proc-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fx-proc-pop { from { transform: scale(.4); } to { transform: scale(1); } }

@media (max-width: 480px) {
    .fx-proc-card { padding: 28px 20px 22px; border-radius: 18px; }
    .fx-proc-title { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-filling .fx-fill, .fx-filled .fx-fill { transition: none; }
    .fx-filling .fx-fill::after { animation: none; }
    .fx-copied::before { animation: none; transform: scale(1.05); }
    .fx-proc, .fx-proc-card, .fx-proc-bar-fill, .fx-proc-badge-fill { transition: none; }
    .fx-proc-bar-fill::after, .fx-proc-badge-fill::before, .fx-proc-icon, .fx-proc-step-in { animation: none; }
}

/* =====================================================================
   خطوات التسجيل للكبار: نفس حركة تسجيل الصغار (أسلوب فقط — لا منطق).
   - الانتقال بين الخطوات انزلاق واحد يتولاه wizard-fx.js (WAAPI).
   - نُلغي هنا أنيميشن CSS القديم على الخطوة (liquidFade) وظهور الحقول المتدرّج (fieldEntrance)؛
     وجودهما فوق الانزلاق كان يسبب قفزة بعد انتهائه ويؤخر ظهور الحقول حتى 0.6 ثانية.
   ===================================================================== */
#wizard-card .step-pane { animation: none; will-change: transform, opacity; }
#wizard-card .step-pane .row > div,
#wizard-card .step-pane.active .row > div {
    opacity: 1;
    transform: none;
    animation: none;
}

/* خطأ في حقل: هزّة قصيرة مرة واحدة عند ظهور حالة الخطأ (كما في تسجيل الصغار) */
#wizard-card .form-control.is-invalid,
#wizard-card .ox-dob-wrap.is-invalid {
    animation: fx-shake .32s ease-out;
}
@keyframes fx-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    55% { transform: translateX(5px); }
    80% { transform: translateX(-3px); }
}

/* شريط التقدّم والدوائر: نفس إيقاع الصغار (سلاسة الخروج أقصر من الدخول) */
#wizard-card .step-track-fill { transition: width .45s cubic-bezier(.2, .8, .2, 1); }
#wizard-card .step-number { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1); }

/* زر الصوت (يُضاف من wizard-fx.js إلى رأس الخطوات) */
.fx-sound {
    position: absolute; top: 12px; inset-inline-end: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--rule, #e5e9f0); background: var(--paper, #fff); color: var(--ink-soft, #6c7689);
    font-size: .85rem; font-weight: 600; cursor: pointer;
}
.fx-sound[aria-pressed="true"] { color: var(--ink, #003366); border-color: var(--gold, #ffcc00); background: var(--gold-soft, #fff7d6); }
.fx-sound:focus-visible { outline: 3px solid var(--gold, #ffcc00); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    #wizard-card .form-control.is-invalid, #wizard-card .ox-dob-wrap.is-invalid { animation: none; }
    #wizard-card .step-track-fill, #wizard-card .step-number { transition: none; }
}

/* =====================================================================
   مودال «أقل من 14 سنة» (SweetAlert2): زر رئيسي واحد واضح، ومخرج صريح، وحلقة تركيز ظاهرة.
   ===================================================================== */
.swal2-container:has(.fx-swal) { background: rgba(0, 28, 56, .55) !important; }
.fx-swal.swal2-popup {
    width: min(92vw, 460px); padding: 32px 28px 26px; border-radius: var(--r-lg, 18px);
    background: var(--paper, #fff); box-shadow: 0 24px 60px rgba(0, 51, 102, .28);
    border: 1px solid var(--rule, #e5e9f0);
}
.fx-swal .fx-swal-icon.swal2-icon {
    width: 72px; height: 72px; margin: 0 auto 18px; border: 0; border-radius: 50%;
    background: var(--gold-soft, #fff4cc); color: var(--ink, #003366);
    display: flex !important; align-items: center; justify-content: center;
}
.fx-swal .fx-swal-icon .swal2-icon-content { font-size: 2rem; display: flex; align-items: center; justify-content: center; }
.fx-swal .fx-swal-title.swal2-title {
    padding: 0; margin: 0 0 10px; color: var(--ink, #003366); font-size: 1.45rem; line-height: 1.3;
    font-family: var(--font-display, 'Fraunces', Georgia, serif) !important; font-weight: 600 !important; text-align: center;
}
.fx-swal .fx-swal-body.swal2-html-container { margin: 0 0 6px; padding: 0; text-align: center; }
.fx-swal .fx-swal-text { margin: 0 0 8px; color: var(--ink-soft, #44546a); font-size: 1rem; line-height: 1.6; }
.fx-swal .fx-swal-ar { color: var(--ink-3, #6c7689); font-size: .98rem; }
.fx-swal .fx-swal-actions.swal2-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 22px 0 0; }
.fx-swal .fx-swal-confirm, .fx-swal .fx-swal-cancel {
    width: 100%; min-height: 48px; margin: 0; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 1rem; cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fx-swal .fx-swal-confirm { border: 2px solid var(--ink, #003366); background: var(--ink, #003366); color: var(--gold, #ffcc00); }
.fx-swal .fx-swal-confirm:hover { box-shadow: 0 8px 20px rgba(0, 51, 102, .28); }
.fx-swal .fx-swal-cancel { border: 2px solid var(--rule, #e5e9f0); background: transparent; color: var(--ink, #003366); }
.fx-swal .fx-swal-cancel:hover { border-color: var(--gold, #ffcc00); background: var(--gold-soft, #fff4cc); }
.fx-swal .fx-swal-confirm:focus-visible, .fx-swal .fx-swal-cancel:focus-visible, .fx-swal .fx-swal-close:focus-visible {
    outline: 3px solid var(--gold, #ffcc00); outline-offset: 3px; box-shadow: none;
}
.fx-swal .fx-swal-close.swal2-close { color: var(--ink-3, #6c7689); width: 44px; height: 44px; font-size: 2rem; }
.fx-swal .fx-swal-close.swal2-close:hover { color: var(--ink, #003366); background: transparent; }

/* =====================================================================
   كرات خطوات الكبار بنفس تصميم الصغار (أسلوب فقط): دائرة 40px، النشطة ذهبية،
   المكتملة كحلية، وشريط رفيع مصمت يمتلئ بالذهبي. التسميات بحروف عادية.
   ===================================================================== */
#wizard-card .wizard-header-steps {
    background: var(--paper, #fff); padding: 52px 40px 18px; border-bottom: 1px solid var(--rule, #e5e9f0);
}
#wizard-card .step-track-line {
    top: 70px; left: 10%; right: 10%; height: 3px; background: var(--rule, #e5e9f0); border-radius: 3px; overflow: hidden;
}
#wizard-card .step-track-fill { height: 100%; background: var(--gold, #ffcc00); border-radius: 3px; }
#wizard-card .step-track-fill::after { display: none; }
#wizard-card .step-indicator { gap: 8px; }
#wizard-card .step-number {
    width: 40px; height: 40px; border: 2px solid var(--rule, #e5e9f0); background: var(--paper, #fff);
    color: var(--ink-3, #6c7689); box-shadow: none; transform: none;
}
#wizard-card .step-number .step-num-text {
    font-family: inherit; font-style: normal; font-weight: 700; font-size: 1rem; font-variation-settings: normal;
    font-variant-numeric: tabular-nums;
}
#wizard-card .step-indicator.active .step-number {
    background: var(--gold, #ffcc00); border-color: var(--ink, #003366); color: var(--ink, #003366);
    box-shadow: none; transform: scale(1.08);
}
#wizard-card .step-indicator.active .step-number::before { display: none; animation: none; }
#wizard-card .step-indicator.completed .step-number {
    background: var(--ink, #003366); border-color: var(--ink, #003366); color: var(--gold, #ffcc00); box-shadow: none;
}
#wizard-card .step-indicator.completed .step-num-text { visibility: visible; }
#wizard-card .step-indicator.completed .step-num-text::before { display: none; }
#wizard-card .step-label {
    text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 600; color: var(--ink-3, #6c7689);
}
#wizard-card .step-indicator.active .step-label,
#wizard-card .step-indicator.completed .step-label { color: var(--ink, #003366); opacity: 1; }
#wizard-card .step-indicator.active .step-label { font-weight: 700; }

@media (max-width: 640px) {
    #wizard-card .wizard-header-steps { padding: 48px 16px 14px; }
    #wizard-card .step-track-line { top: 64px; }
    #wizard-card .step-number { width: 36px; height: 36px; }
    #wizard-card .step-number .step-num-text { font-size: .92rem; }
    #wizard-card .step-label { font-size: .78rem; }
}
/* على الشاشات الصغيرة تُخفى التسميات (كما في الصغار)؛ نُخفي أيضاً الرقم الخام الذي كان يُكتب تحت الدائرة النشطة. */
#wizard-card .step-indicator.active::after { display: none; }

@media (prefers-reduced-motion: reduce) {
    #wizard-card .step-indicator.active .step-number { transform: none; }
}