/* =====================================================================
   Apply Now — quick enquiry modal
   One shared instance lives in includes/footer.php and is reused across
   the homepage, pages/services.php, and pages/service-details.php —
   opened/populated per click by assets/js/apply-now.js. Overlay/dialog
   treatment mirrors gallery.css's .lightbox (dark scrim + centered
   dialog is the site's one existing modal pattern), but the dialog
   itself is a light card since it holds a form, not a photo.
   ===================================================================== */

/* ---- Service card trigger row (View More + Apply Now) ------------------ */

.service-card__actions {
    margin-top: auto;
    padding-top: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.service-card__actions .service-card__link {
    margin-top: 0;
    padding-top: 0;
}

.service-card__apply {
    padding: 0.6rem 1.25rem;
    font-size: var(--fs-small);
}

/* ---- Modal overlay ------------------------------------------------------- */

.apply-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background-color: rgba(11, 35, 68, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-base);
}

.apply-modal[hidden] {
    display: none;
}

.apply-modal.is-open {
    opacity: 1;
}

.apply-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.35);
    transform: scale(0.96) translateY(8px);
    transition: transform var(--duration-base) var(--ease-base);
}

.apply-modal.is-open .apply-modal__dialog {
    transform: scale(1) translateY(0);
}

.apply-modal__close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background-color: transparent;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-base),
                border-color var(--duration-fast) var(--ease-base);
}

.apply-modal__close:hover {
    background-color: var(--color-bg-light);
    border-color: var(--color-primary);
}

.apply-modal__close svg {
    width: 1.1rem;
    height: 1.1rem;
}

.apply-modal__title {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-xs);
    padding-right: var(--space-2xl);
}

.apply-modal__subtitle {
    color: var(--color-text-grey);
    font-size: var(--fs-small);
    margin-bottom: var(--space-lg);
}

.apply-modal__subtitle:empty {
    display: none;
}

.apply-modal__form .form-group {
    margin-bottom: var(--space-lg);
}

/* Off-screen, not display:none — matches .contact__honeypot's reasoning
   in contact.css (some bots skip display:none fields but still fill
   ones merely positioned off-canvas). */
.apply-modal__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.apply-modal__flash {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-lg);
    font-size: var(--fs-small);
    background-color: #FEE2E2;
    color: #991B1B;
}

.apply-modal__flash[hidden] {
    display: none;
}

.apply-modal__flash ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* ---- Success state -------------------------------------------------------- */

.apply-modal__success {
    text-align: center;
    padding-top: var(--space-md);
}

.apply-modal__success[hidden] {
    display: none;
}

.apply-modal__success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--space-lg);
    border-radius: 50%;
    background-color: #DCFCE7;
    color: #166534;
}

.apply-modal__success-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.apply-modal__success-title {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-sm);
}

.apply-modal__success-text {
    color: var(--color-text-grey);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    margin-bottom: var(--space-xl);
}

.apply-modal__success-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

@media (max-width: 480px) {
    .apply-modal {
        padding: var(--space-md);
    }

    .apply-modal__dialog {
        padding: var(--space-xl);
    }
}

@media (prefers-reduced-motion: reduce) {
    .apply-modal,
    .apply-modal__dialog {
        transition: none;
    }
}

/* Applied to <body> while the modal is open. */
body.apply-modal-open {
    overflow: hidden;
}