/* =========================================================================
   App Modal — styling that mirrors the 3-column layout at parker.edu/application.
   The modal frame (overlay + content card) is our own. Inside the content card we
   recreate the Elementor 3-column section: background image + intro panel + form.
   Breakpoints intentionally match the live site:
     >= 1200px  full 3-column with intro panel
     768–1199px background + form (intro panel hidden, exactly like parker.edu)
     <= 767px   single-column, form-only
   ========================================================================= */

/* Modal frame ----------------------------------------------------------- */

.parker-appmodal-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none !important;
    align-items: center;
    justify-content: center;
}

.parker-appmodal-modal.active {
    display: flex !important;
}

.parker-appmodal-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
}

/* Modal Content — wider to fit the 3-column layout, with the rounded-corner +
   drop-shadow treatment Elementor's section has on parker.edu/application. */
.parker-appmodal-modal-content {
    position: relative;
    background: #fff;
    border-radius: 20px;
    max-width: 1376px;
    width: calc(100% - 4rem);
    max-height: 92vh;
    overflow-y: auto;
    padding: 0;
    z-index: 9999;
    box-shadow: 0px 26px 40px -10px rgba(11, 18, 103, 0.3);
}

/* Close Button --------------------------------------------------------- */

.parker-appmodal-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none !important;
    border: none !important;
    font-size: 2.5rem;
    line-height: 1;
    color: #aaa !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10000;
    box-shadow: none !important;
    font-weight: 200 !important;
    font-family: Arial, sans-serif;
}

.parker-appmodal-modal-close:hover {
    color: #555 !important;
    background: none !important;
    transform: scale(1.1);
}

/* Trigger Button (only rendered when [parker_appmodal button="…"] is used) */

.parker-appmodal-button {
    display: inline-block;
    padding: 12px 24px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
}

.parker-appmodal-button:hover {
    background: #005a87;
    color: #fff;
}

/* Loading State -------------------------------------------------------- */

.parker-appmodal-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.parker-appmodal-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0073aa;
    border-radius: 50%;
    animation: parker-spin 1s linear infinite;
}

@keyframes parker-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Stage — the 3-column layout that mirrors parker.edu/application ----- */

.parker-appmodal-stage {
    display: grid;
    /* Same proportions Elementor uses on the live page (12% / 15% / 72.666%). */
    grid-template-columns: 12% 15% 72.666%;
    align-items: stretch;
    min-height: 600px;
    border-radius: 20px;
    background-color: #fff;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;

    /* Initial entry state — the stage starts faded out and shifted down by a few pixels.
       JS preloads the background image, then adds .is-entered which triggers the fly-in. */
    opacity: 0;
    transform: translateY(8px);

    /* Default direction (Back, after step-2 → step-1): grid expands immediately. The intro
       panel's slide-in is delayed until the grid is wide enough to hold it (see
       .application-intro-panel transition below). The is-step2 override flips the delays
       so the Forward direction plays panel-out first, then grid-collapse. */
    transition: opacity 0.45s ease-out,
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

.parker-appmodal-stage.is-entered {
    opacity: 1;
    transform: translateY(0);
}

.parker-appmodal-col {
    box-sizing: border-box;
}

.parker-appmodal-col-left {
    /* Empty column; exists to reveal the background image. */
}

.parker-appmodal-col-intro {
    display: flex;
    align-items: center;
    /* overflow:hidden clips the intro panel while it animates off to the left so it can't
       bleed into the form column (the background image sits on the stage *behind* the
       intro, which is why the user sees it "go behind" the image visually). */
    overflow: hidden;
}

/* Animate the panel itself (not the column). translateX percentages are relative to the
   panel's own width, which stays constant — unlike the column, whose width is also being
   animated by grid-template-columns. Animating the column AND its transform at the same
   time creates a "shrink in place" effect instead of the slide-out we want.

   Default state (pre-entry and after Back): panel starts off slightly to the left and
   faded out. The .is-entered class (initial modal-open) and absence of .is-step2 (Back)
   both pull it back to translateX(0) opacity 1. The 0.4s delay sequences the panel
   slide-in behind the stage fade-in / grid expansion. */
.parker-appmodal-col-intro .application-intro-panel {
    opacity: 0;
    transform: translateX(-30px);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s,
                opacity 0.4s ease 0.4s;
}

.parker-appmodal-stage.is-entered .application-intro-panel {
    opacity: 1;
    transform: translateX(0);
}

.parker-appmodal-col-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    /* Right column on parker.edu/application uses width:95% inside its widget;
       reproduce that constraint so the form doesn't kiss the modal edge. */
}

.parker-appmodal-col-form > .parker-appmodal-form-container {
    width: 95%;
    max-width: 95%;
}

/* Intro Panel — values lifted verbatim from parker.edu/application's
   Elementor custom CSS for class .elementor-element-eda32ee. */

.parker-appmodal-stage .application-intro-panel {
    font-family: Georgia, "Times New Roman", serif;
    color: #003b78;
    padding: 40px;
}

.parker-appmodal-stage .application-eyebrow {
    display: block;
    font-size: 21px;
    line-height: 1.18;
    letter-spacing: 0.04em;
    color: #6f7890;
    font-weight: 500;
}

.parker-appmodal-stage .application-title {
    margin: 0 0 20px 0;
    font-size: 27px;
    line-height: 1.18;
    letter-spacing: 0.01em;
    font-weight: 700;
    color: #003b78;
}

.parker-appmodal-stage .application-title span {
    color: #f36c21;
    text-decoration: underline;
}

.parker-appmodal-stage .application-description {
    margin: 0 0 20px 0;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.7;
    color: #6f7890;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.parker-appmodal-stage .application-parker-shield {
    width: 65px;
    height: auto;
    display: block;
}

/* Form Controls inside the modal -------------------------------------- */

.parker-appmodal-modal-content select,
.parker-appmodal-modal-content .form-control {
    padding-right: 40px !important;
    background-position: right 15px center !important;
}

/* Back-to-step-1 link — injected as the first child of FormGenerator's .form-container
   (the white form card) so it shares the form's opacity/visibility transition and aligns
   with the form fields. */
.parker-appmodal-back-link,
.parker-appmodal-back-link:link,
.parker-appmodal-back-link:visited {
    display: inline-block;
    margin: 0 0 16px 0;
    color: #0073aa;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
}

.parker-appmodal-back-link:hover,
.parker-appmodal-back-link:focus {
    color: #005a87;
    text-decoration: underline;
}

/* Responsive ---------------------------------------------------------- */

/* Step-2 state: intro panel slides out to the left and the form column expands to fill
   its width. JS toggles .is-step2 on the stage when the user clicks Next on step 1 (and
   removes it on Back from step 2). Only meaningful at >=1296px where the intro is visible;
   below that the intro is already display:none, so the rule is a no-op.

   Asymmetric delays make the motion legible in both directions:
     Forward (.is-step2 added):  panel slides out 0–400ms, grid collapses 400–800ms.
     Back (.is-step2 removed):   grid expands  0–400ms, panel slides in  400–800ms.
   In both directions one element finishes its motion before the other starts. */
@media (min-width: 1296px) {
    .parker-appmodal-stage.is-step2 {
        grid-template-columns: 12% 0% 88%;
        /* Delay the grid collapse so the panel has time to slide off first. */
        transition: opacity 0.3s ease-in-out,
                    grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
    }

    .parker-appmodal-stage.is-step2 .application-intro-panel {
        transform: translateX(-150%);
        opacity: 0;
        pointer-events: none;
        /* No delay — slide out immediately on Forward. */
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s,
                    opacity 0.3s ease 0s;
    }
}

/* Hide the intro panel and collapse the grid at 1295px so the form has more room.
   The left column keeps showing the artwork until the 1024px breakpoint kicks in. */
@media (max-width: 1295px) {
    .parker-appmodal-stage {
        grid-template-columns: 18% 82%;
    }
    .parker-appmodal-col-intro {
        display: none;
    }
}

/* Hide the background image at 1024px, matching parker.edu/application's behavior
   (the live page has `background-image: none !important` at this breakpoint). Once the
   image is gone, the left column has nothing to show, so collapse to a single form
   column instead of leaving dead space on the left. */
@media (max-width: 1024px) {
    .parker-appmodal-stage {
        background-image: none !important;
        grid-template-columns: 1fr;
    }
    .parker-appmodal-col-left {
        display: none;
    }
}

/* Tablet/mobile — tighten modal margins and stack the form fields. */
@media (max-width: 767px) {
    .parker-appmodal-modal-content {
        width: calc(100% - 1rem);
        max-height: calc(100% - 1rem);
        border-radius: 16px;
        margin: 0.5rem;
    }

    .parker-appmodal-stage {
        min-height: auto;
        border-radius: 16px;
    }

    .parker-appmodal-col-form {
        padding: 20px;
    }

    .parker-appmodal-col-form > .parker-appmodal-form-container {
        width: 100%;
        max-width: 100%;
    }

    .parker-appmodal-modal-close {
        top: 0.25rem;
        right: 0.25rem;
    }

    .parker-appmodal-modal-content .form-container,
    .parker-appmodal-modal-content .form-section,
    .parker-appmodal-modal-content .form-group,
    .parker-appmodal-modal-content .progress-indicator {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .parker-appmodal-modal-content input,
    .parker-appmodal-modal-content select,
    .parker-appmodal-modal-content textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* Prevent iOS auto-zoom */
    }

    .parker-appmodal-modal-content .form-group-row {
        flex-direction: column !important;
    }

    .parker-appmodal-modal.active {
        touch-action: pan-y;
    }
}