/* ========================================
   ELMFC BASE STYLES
   Always loaded: the popup, the form width setting and multi-step forms need these to
   work, and a form's "Use custom button styling" option uses the .elmfc-btn rules below
   (without that option the buttons get the theme's wp-block-button__link class and keep
   the theme's style). Everything else (fields, messages, form box) is in elmfc.css,
   loaded only when "Load the plugin's form styles" is enabled in Forms > Settings.
   ======================================== */

/* === Popup Overlay === */
.elmfc-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* No backdrop blur: blurring the whole page behind the popup on every animation frame
       made the popup appear slowly and stutter on phones and image-heavy pages. */
    transition: opacity 0.2s ease, visibility 0.2s ease;
    will-change: opacity;
}

.elmfc-popup-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* === Popup Box === */
.elmfc-popup-content {
    background: #fff;
    color: #2c3e50;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25), 0 0 1px rgba(0,0,0,0.1);
    box-sizing: border-box;
    display: block;
    width: 90%;
    max-width: 500px;
    min-width: 320px;
    margin: 0 30px;
    position: relative;
    transform: scale(0.96) translateY(-8px);
    transition: transform 0.2s ease;
    will-change: transform;
    max-height: 90vh;
    overflow-y: auto;
}

.elmfc-popup-overlay.active .elmfc-popup-content {
    transform: scale(1) translateY(0);
}

/* Minimal space around the form: style it from the form's own Custom HTML block. */
.elmfc-popup-content .elmfc-form {
    margin: 0;
    padding: 12px;
    box-sizing: border-box;
}

/* Custom Scrollbar */
.elmfc-popup-content::-webkit-scrollbar {
    width: 8px;
}

.elmfc-popup-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.elmfc-popup-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.elmfc-popup-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* === Popup Header (can be dragged) === */
.elmfc-popup-header {
    margin: 0;
    padding: 20px 30px;
    background: linear-gradient(to bottom, #f8f9fa, #f0f1f2);
    border-bottom: 1px solid #e0e0e0;
    border-radius: 10px 10px 0 0;
    font-weight: 600;
    font-size: 1.25rem;
    color: #2c3e50;
    user-select: none;
    cursor: move;
}

/* === Close Button === */
.elmfc-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    /* The "×" character in the markup is hidden: its position depends on the font, so the
       cross is drawn by the two bars below, exactly in the middle of the circle. The button
       keeps its "Close" label for screen readers. */
    font-size: 0;
    line-height: 0;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.elmfc-popup-close::before,
.elmfc-popup-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    background: currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
}

.elmfc-popup-close::after {
    transform: rotate(-45deg);
}

.elmfc-popup-close:hover {
    background: #fff;
    color: #d63638;
    transform: rotate(90deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.elmfc-popup-close:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* === Form Width Setting (Narrow / Default / Wide) === */
.elmfc-inline-wrapper.elmfc-width-narrow,
.elmfc-inline-wrapper.elmfc-width-default,
.elmfc-inline-wrapper.elmfc-width-wide {
    margin-left: auto;
    margin-right: auto;
}

.elmfc-inline-wrapper.elmfc-width-narrow {
    max-width: 450px;
}

.elmfc-inline-wrapper.elmfc-width-default {
    max-width: 720px;
}

.elmfc-inline-wrapper.elmfc-width-wide {
    max-width: 1080px;
}

/* === Multi-step forms: hidden steps === */
.elmfc-step--hidden {
    display: none !important;
}

/* ========================================
   CUSTOM BUTTON STYLING (per-form option)
   Applies only to forms with "Use custom button styling" ticked: the plugin keeps
   .elmfc-btn on their buttons, and swaps it for the theme's button class otherwise.
   ======================================== */

.elmfc-btn {
    background: linear-gradient(135deg, #0073aa, #005c87);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,115,170,0.25);
    transition: all 0.2s ease;
    min-height: 48px;
    min-width: 110px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
}

.elmfc-btn:hover {
    background: linear-gradient(135deg, #0096dd, #006fa8);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,115,170,0.3);
}

.elmfc-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 3px 8px rgba(0,115,170,0.25);
}

.elmfc-btn:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: 3px;
}

.elmfc-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Cancel / reset button */
.elmfc-cancel.elmfc-btn {
    background: #fff;
    color: #495057;
    border: 1.5px solid #d1d5db;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.elmfc-cancel.elmfc-btn:hover {
    background: #f8f9fa;
    color: #495057;
    border-color: #adb5bd;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.elmfc-cancel.elmfc-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Loading spinner while the form is sent */
@keyframes elmfc-spin {
    to { transform: rotate(360deg); }
}

.elmfc-btn.elmfc-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

.elmfc-btn.elmfc-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: elmfc-spin 0.7s linear infinite;
}

/* ========================================
   SUCCESS MESSAGE (replaces the form once it is sent)
   A centred check mark, a title and the message, as in EffortLess Simple House Booking.
   ======================================== */
.elmfc-result {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 40px 20px;
    text-align: center;
    background: #fff;
    color: #333;
    border-radius: 8px;
    animation: elmfc-result-in 0.3s ease;
}

.elmfc-response:focus,
.elmfc-response:focus-visible {
    outline: none; /* Focused by the script after a send; it is not a control. */
}

/* Check mark in a circle, drawn in SVG; the circle and the tick draw themselves in. */
.elmfc-result-icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    overflow: visible;
}

.elmfc-result-circle {
    fill: #e8f5e9;
    stroke: #2e7d32;
    stroke-width: 2;
    stroke-dasharray: 158;
    stroke-dashoffset: 158;
    animation: elmfc-result-draw 0.5s ease-out forwards;
}

.elmfc-result-check {
    fill: none;
    stroke: #2e7d32;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: elmfc-result-draw 0.35s 0.4s ease-out forwards;
}

@keyframes elmfc-result-draw {
    to {
        stroke-dashoffset: 0;
    }
}

.elmfc-result-close {
    margin-top: 24px;
}

.elmfc-result-title {
    display: block;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
    color: #333;
}

.elmfc-result-message {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    color: #666;
}

@keyframes elmfc-result-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .elmfc-popup-content {
        width: 95%;
        margin: 0 10px;
    }
}

@media (max-width: 480px) {
    .elmfc-popup-content {
        margin: 0 12px;
        min-width: auto;
        max-height: 95vh;
        border-radius: 9px;
    }

    .elmfc-popup-header {
        padding: 16px 20px;
        font-size: 1.1rem;
    }

    .elmfc-popup-close {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
    }

    .elmfc-btn {
        width: 100%;
    }
}

@media print {
    .elmfc-popup-overlay,
    .elmfc-popup-wrapper {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .elmfc-popup-overlay,
    .elmfc-popup-content,
    .elmfc-popup-close,
    .elmfc-btn,
    .elmfc-result,
    .elmfc-result-circle,
    .elmfc-result-check {
        transition: none;
        animation: none;
    }

    .elmfc-result-circle,
    .elmfc-result-check {
        stroke-dashoffset: 0;
    }
}