/* =========================================================================
   FG Academy — Apply Page Stylesheet
   =========================================================================
   Styles specific to resources/views/apply.blade.php only: the hero summary
   chips, the multi-step form wizard (stepper + premium field system + step
   transitions), and the sidebar "why apply" summary cards.
   ========================================================================= */

:root {
    /* Same physical deceleration curve used site-wide (see home.css) for
       every hover/reveal/focus transition on this page — kept local since
       apply.css is loaded standalone (this page doesn't load home.css). */
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------
   Shared entrance-animation keyframes
   ------------------------------------------------------------------------- */
@keyframes apply-fade-up-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes apply-fade-scale-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* -------------------------------------------------------------------------
   Hero — ambient glow + summary chips + trust line
   ------------------------------------------------------------------------- */
.apply-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #020817 0%, #071331 35%, #0b1f4d 70%, #102a63 100%);
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

@media (min-width: 640px) {
    .apply-hero {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* Compact by design on mobile — capped to ~45% of the viewport height and
   vertically centered, so the hero reads as a short banner rather than a
   scroll obstacle before the form. The chips/trust line are desktop-only
   content trimmed here specifically to stay inside that budget. */
@media (max-width: 639.98px) {
    .apply-hero {
        min-height: 45vh;
        display: flex;
        align-items: center;
    }
}

.apply-hero__glow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 9999px;
    filter: blur(65px);
    animation: apply-glow-breathe 9s var(--ease-premium) infinite alternate;
}

.apply-hero__glow--teal {
    top: -5rem;
    right: -4rem;
    height: 18rem;
    width: 18rem;
    background: radial-gradient(circle, rgba(45, 212, 191, .4), transparent 70%);
}

.apply-hero__glow--violet {
    bottom: -6rem;
    left: -5rem;
    height: 16rem;
    width: 16rem;
    background: radial-gradient(circle, rgba(124, 58, 237, .38), transparent 70%);
    animation-delay: -4.5s;
}

@keyframes apply-glow-breathe {
    from {
        transform: scale(1) translateY(0);
        opacity: .85;
    }
    to {
        transform: scale(1.12) translateY(-8px);
        opacity: 1;
    }
}

/* Reveal-on-load for the hero content: each element carries an --i index
   (set inline in Blade) so they cascade in one after another instead of
   popping in as a single block. */
.apply-hero-reveal {
    animation: apply-fade-up-in .7s var(--ease-premium) both;
    animation-delay: calc(var(--i, 0) * 90ms);
}

.apply-hero-chips {
    position: relative;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .625rem;
}

.apply-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    padding: .4rem 1rem .4rem .4rem;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(4px);
    transition: transform .2s var(--ease-premium), border-color .2s var(--ease-premium), background-color .2s var(--ease-premium);
}

.apply-hero-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .13);
}

.apply-hero-chip__icon {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--chip-color, #0047ff);
    color: #fff;
    box-shadow: 0 6px 14px -4px var(--chip-color, #0047ff);
}

.apply-hero-chip__icon svg {
    height: 1rem;
    width: 1rem;
}

.apply-hero-chip--blue {
    --chip-color: #0047ff;
}

.apply-hero-chip--violet {
    --chip-color: #7c3aed;
}

.apply-hero-chip--teal {
    --chip-color: #0d9488;
}

.apply-trust-line {
    position: relative;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.25rem;
    font-size: .75rem;
    font-weight: 600;
    color: rgb(201 219 255);
}

.apply-trust-line__item {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.apply-trust-line__item svg {
    height: 1rem;
    width: 1rem;
    color: var(--trust-color, #2dd4bf);
}

.apply-trust-line__item--teal {
    --trust-color: #5eead4;
}

.apply-trust-line__item--blue {
    --trust-color: #93c5fd;
}

.apply-trust-line__item--violet {
    --trust-color: #c4b5fd;
}

/* Desktop-only content, trimmed on mobile to keep the hero inside its ~45vh
   budget (see .apply-hero above) — the chips row stays visible on mobile,
   only the trust line is hidden. Placed after the base rule above so it
   correctly wins the cascade at this viewport instead of being overridden
   by its unconditional `display: flex`. */
@media (max-width: 639.98px) {
    .apply-trust-line {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   Form section background — soft colorful blobs behind the white card
   ------------------------------------------------------------------------- */
.apply-main {
    position: relative;
    overflow: hidden;
}

.apply-main__blob {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 9999px;
    filter: blur(70px);
    animation: apply-glow-breathe 11s var(--ease-premium) infinite alternate;
}

.apply-main__blob--blue {
    top: -3rem;
    left: -5rem;
    height: 18rem;
    width: 18rem;
    background: radial-gradient(circle, rgba(0, 71, 255, .12), transparent 70%);
}

.apply-main__blob--violet {
    bottom: -5rem;
    right: -5rem;
    height: 20rem;
    width: 20rem;
    background: radial-gradient(circle, rgba(124, 58, 237, .12), transparent 70%);
    animation-delay: -5.5s;
}

/* -------------------------------------------------------------------------
   Form card
   ------------------------------------------------------------------------- */
.apply-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(2, 15, 33, .04), 0 30px 70px -35px rgba(2, 15, 33, .3), 0 0 0 1px rgba(2, 15, 33, .04);
    padding: 1.5rem;
    animation: apply-fade-scale-in .6s var(--ease-premium) both;
}

.apply-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0047ff, #7c3aed, #2dd4bf);
}

@media (min-width: 640px) {
    .apply-card {
        padding: 2rem;
    }
}

@media (min-width: 1024px) {
    .apply-card {
        padding: 2.75rem;
    }
}

/* -------------------------------------------------------------------------
   Form sections (Personal Details / Location) — the form is a single
   continuous page (no multi-step wizard), so these are just staggered
   entrance reveals + section header styling, not step-navigation state.
   ------------------------------------------------------------------------- */
.apply-form-section {
    animation: apply-fade-up-in .6s var(--ease-premium) both;
}

.apply-form-section:not(:first-child) {
    margin-top: 2.5rem;
    padding-top: 2.25rem;
    border-top: 1px solid rgb(226 232 240);
}

.apply-form-section:nth-of-type(2) {
    animation-delay: 90ms;
}

.apply-step-head {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.apply-step-icon {
    display: flex;
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: .875rem;
    color: #fff;
    background: var(--step-color, #0047ff);
    box-shadow: 0 10px 22px -10px var(--step-color, #0047ff);
}

.apply-step-icon svg {
    height: 1.375rem;
    width: 1.375rem;
}

.apply-step-icon--blue {
    --step-color: #0047ff;
}

.apply-step-icon--violet {
    --step-color: #7c3aed;
}

.apply-step-icon--teal {
    --step-color: #0d9488;
}

.apply-step-icon--amber {
    --step-color: #d97706;
}

.apply-step-icon--pink {
    --step-color: #db2777;
}

.apply-step-heading {
    font-size: 1.125rem;
    font-weight: 800;
    color: rgb(4 30 66);
}

.apply-step-subtext {
    margin-top: .25rem;
    font-size: .8125rem;
    color: rgb(107 114 128);
}

.apply-form-footer {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgb(226 232 240);
    display: flex;
    justify-content: center;
}

.apply-btn-submit {
    width: 100%;
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: .9375rem;
}

@media (min-width: 640px) {
    .apply-btn-submit {
        width: auto;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* Premium gradient treatment for the Submit button, layered on top of the
   shared .btn-primary class (kept so focus-ring/disabled/base layout rules
   stay shared site-wide — only the surface + motion here are page-specific). */
.apply-btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0047ff, #3d5bff 45%, #7c3aed);
    box-shadow: 0 14px 30px -12px rgba(0, 71, 255, .55);
    transition: transform .2s var(--ease-premium), box-shadow .2s var(--ease-premium);
}

.apply-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .32) 45%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s var(--ease-premium);
}

.apply-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(0, 71, 255, .65);
}

.apply-btn-primary:hover::before {
    transform: translateX(120%);
}

.apply-btn-primary:active {
    transform: translateY(0) scale(.98);
}

.apply-btn-primary svg {
    position: relative;
    transition: transform .2s var(--ease-premium);
}

.apply-btn-primary:hover svg {
    transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   Premium field system — labels, icon-prefixed inputs/selects, states
   ------------------------------------------------------------------------- */
.apply-field__label {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    color: rgb(4 30 66);
    letter-spacing: .01em;
}

.apply-field__required {
    margin-left: .125rem;
    color: rgb(239 68 68);
}

.apply-field__control {
    position: relative;
    margin-top: .5rem;
}

.apply-field__icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: .9rem;
    color: rgb(148 163 184);
    pointer-events: none;
    transition: color .2s var(--ease-premium);
}

.apply-field__icon svg {
    height: 1.125rem;
    width: 1.125rem;
}

.apply-field__control:focus-within .apply-field__icon {
    color: rgb(0 71 255);
}

.apply-field--invalid .apply-field__icon {
    color: rgb(239 68 68);
}

.apply-input,
.apply-select,
.apply-textarea {
    width: 100%;
    border-radius: .875rem;
    border: 1.5px solid rgb(226 232 240);
    background-color: #fff;
    padding: .8rem 1rem;
    font-size: .9375rem;
    font-weight: 500;
    color: rgb(4 30 66);
    box-shadow: 0 1px 2px rgba(2, 15, 33, .03);
    transition: border-color .2s var(--ease-premium), box-shadow .2s var(--ease-premium), transform .2s var(--ease-premium);
}

.apply-input.has-icon,
.apply-select.has-icon {
    padding-left: 2.75rem;
}

/* .password-input (style.css, shared with auth pages) reserves the right-hand
   gap for the show/hide toggle button. .apply-input's shorthand `padding`
   above loads later in the cascade and would otherwise collapse that gap
   back down — this compound selector's higher specificity restores it. */
.apply-input.password-input {
    padding-right: 2.75rem;
}

.apply-input::placeholder,
.apply-textarea::placeholder {
    color: rgb(148 163 184);
    font-weight: 400;
}

.apply-input:hover,
.apply-select:hover,
.apply-textarea:hover {
    border-color: rgb(203 213 225);
}

.apply-input:focus,
.apply-select:focus,
.apply-textarea:focus {
    outline: none;
    border-color: rgb(61 120 255);
    box-shadow: 0 0 0 4px rgba(0, 71, 255, .13);
    transform: translateY(-1px);
}

.apply-field--invalid .apply-input,
.apply-field--invalid .apply-select,
.apply-field--invalid .apply-textarea {
    border-color: rgb(248 113 113);
}

.apply-field--invalid .apply-input:focus,
.apply-field--invalid .apply-select:focus,
.apply-field--invalid .apply-textarea:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .13);
}

.apply-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%230047ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right .9rem center;
    background-repeat: no-repeat;
    background-size: 1.1em 1.1em;
    padding-right: 2.5rem;
}

.apply-select:disabled {
    cursor: not-allowed;
    background-color: rgb(248 250 252);
    color: rgb(100 116 139);
}

.apply-textarea {
    resize: vertical;
    min-height: 5rem;
}

.apply-field__error {
    margin-top: .375rem;
    font-size: .75rem;
    font-weight: 600;
    color: rgb(220 38 38);
}

.apply-field__hint {
    margin-top: .375rem;
    font-size: .75rem;
    color: rgb(61 120 255);
}

/* "Create your login account" panel — a soft security-themed panel instead
   of a plain heading, so account-creation reads as a distinct, reassuring
   step rather than more of the same form. */
.apply-account-panel {
    margin-top: 2rem;
    border-radius: 1.125rem;
    border: 1px solid rgb(219 234 254);
    background: linear-gradient(165deg, rgba(239, 246, 255, .8), rgba(245, 243, 255, .6));
    padding: 1.25rem 1.25rem 1.5rem;
}

@media (min-width: 640px) {
    .apply-account-panel {
        padding: 1.5rem 1.75rem 1.75rem;
    }
}

.apply-account-panel__head {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.apply-account-panel__icon {
    display: flex;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: .625rem;
    background: rgb(0 71 255);
    color: #fff;
    box-shadow: 0 8px 16px -8px rgba(0, 71, 255, .6);
}

.apply-account-panel__icon svg {
    height: 1rem;
    width: 1rem;
}

/* -------------------------------------------------------------------------
   Sidebar summary cards
   ------------------------------------------------------------------------- */
.apply-sidebar-card {
    border-radius: 1.25rem;
    border: 1px solid rgb(226 232 240);
    border-top: 3px solid var(--card-accent, transparent);
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 20px 45px -30px rgba(2, 15, 33, .25);
    transition: transform .25s var(--ease-premium), box-shadow .25s var(--ease-premium);
    animation: apply-fade-up-in .6s var(--ease-premium) both;
}

.apply-sidebar-card:nth-of-type(1) { animation-delay: 80ms; }
.apply-sidebar-card:nth-of-type(2) { animation-delay: 170ms; }
.apply-sidebar-card:nth-of-type(3) { animation-delay: 260ms; }

.apply-sidebar-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 50px -28px rgba(2, 15, 33, .32);
}

.apply-sidebar-card--blue {
    --card-accent: #0047ff;
}

.apply-sidebar-card--violet {
    --card-accent: #7c3aed;
}

.apply-sidebar-card--teal {
    --card-accent: #0d9488;
}

.apply-sidebar-card__title {
    font-size: .8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--card-accent, #0047ff);
}

.apply-perk-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.apply-perk-list__item {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}

.apply-perk-list__check {
    display: flex;
    height: 1.375rem;
    width: 1.375rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--perk-color, linear-gradient(135deg, #10b981, #059669));
    color: #fff;
    transition: transform .2s var(--ease-premium);
}

.apply-perk-list__item:hover .apply-perk-list__check {
    transform: scale(1.12) rotate(-6deg);
}

.apply-perk-list__check--blue {
    --perk-color: linear-gradient(135deg, #60a5fa, #0047ff);
}

.apply-perk-list__check--violet {
    --perk-color: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.apply-perk-list__check--teal {
    --perk-color: linear-gradient(135deg, #5eead4, #0d9488);
}

.apply-perk-list__check--amber {
    --perk-color: linear-gradient(135deg, #fbbf24, #d97706);
}

.apply-perk-list__check svg {
    height: .75rem;
    width: .75rem;
}

.apply-perk-list__item p {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: rgb(4 30 66);
}

.apply-stat-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.apply-stat-grid__cell {
    border-radius: .875rem;
    background: rgb(248 250 252);
    padding: .875rem .75rem;
    text-align: center;
    transition: background-color .2s var(--ease-premium);
}

.apply-stat-grid__cell:hover {
    background: rgb(241 245 249);
}

.apply-stat-grid__value {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--stat-color, #0047ff);
}

.apply-stat-grid__cell--blue {
    --stat-color: #0047ff;
}

.apply-stat-grid__cell--violet {
    --stat-color: #7c3aed;
}

.apply-stat-grid__label {
    margin-top: .125rem;
    font-size: .6875rem;
    font-weight: 600;
    color: rgb(107 114 128);
}

.apply-help-link {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .75rem;
    background: rgb(239 246 255);
    padding: .75rem 1rem;
    font-size: .8125rem;
    font-weight: 700;
    color: rgb(0 71 255);
    transition: background-color .2s var(--ease-premium), transform .2s var(--ease-premium);
}

.apply-help-link:hover {
    background: rgb(219 234 254);
    transform: translateY(-1px);
}

.apply-testimonial-card__stars {
    display: flex;
    gap: .125rem;
    color: #fbbf24;
}

.apply-testimonial-card__stars svg {
    height: 1rem;
    width: 1rem;
}

.apply-testimonial-card__quote {
    margin-top: .75rem;
    font-size: .8125rem;
    font-style: italic;
    line-height: 1.6;
    color: rgb(55 65 81);
}

.apply-testimonial-card__author {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-top: 1rem;
}

.apply-testimonial-card__avatar {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: linear-gradient(135deg, #0047ff, #7c3aed);
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    overflow: hidden;
}

.apply-testimonial-card__avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.apply-testimonial-card__name {
    font-size: .8125rem;
    font-weight: 700;
    color: rgb(4 30 66);
}

.apply-testimonial-card__role {
    font-size: .6875rem;
    color: rgb(107 114 128);
}

/* Desktop: let the summary sidebar stay in view alongside the (potentially
   taller) form column, like a concierge panel that follows you down. */
@media (min-width: 1024px) {
    .apply-sidebar {
        position: sticky;
        top: 6rem;
    }
}

/* -------------------------------------------------------------------------
   Reduced motion — disable every decorative animation added above, leaving
   only the functional (near-instant) state transitions in place.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .apply-hero__glow,
    .apply-main__blob,
    .apply-hero-reveal,
    .apply-card,
    .apply-form-section,
    .apply-sidebar-card {
        animation: none;
    }

    .apply-input:focus,
    .apply-select:focus,
    .apply-textarea:focus {
        transform: none;
    }

    .apply-btn-primary:hover,
    .apply-sidebar-card:hover {
        transform: none;
    }

    .apply-btn-primary::before {
        display: none;
    }
}