/* ============================================================
   Custom Search Modal — modal.css
   ============================================================ */

/* ---------- Modal shell ---------- */
.csm-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.csm-modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* ---------- Overlay ---------- */
.csm-modal-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); /* fallback — overridden by Elementor */
}

/* ---------- Content area ---------- */
.csm-modal-content {
    position: relative;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: translateY(50px);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.csm-modal.active .csm-modal-content { transform: translateY(0); }

/* ---------- Close button wrapper — positioning anchor only ---------- */
.csm-close-btn-wrapper {
    position: absolute;
    top: 20px;   /* overridden by Elementor "Position Top" */
    right: 20px; /* overridden by Elementor "Position Right" */
    z-index: 10;
}

/* ---------- Close button — all visual styles live here ---------- */
.csm-close-btn {
    background: none;   /* overridden by Elementor */
    border: none;
    color: #fff;        /* overridden by Elementor */
    cursor: pointer;
    padding: 10px;      /* overridden by Elementor */
    border-radius: 50%; /* overridden by Elementor */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease,
                color 0.3s ease,
                transform 0.3s ease;
}
.csm-close-btn:hover {
    transform: scale(1.1);
    /* hover background-color / color come from Elementor :hover selectors */
}
.csm-close-btn i   { font-size: 24px; }
.csm-close-btn svg { width: 24px; height: 24px; display: block; fill: currentColor; }

/* ---------- Search container ---------- */
.csm-search-container {
    width: 100%;
    max-width: 600px; /* overridden by Elementor */
    padding: 0 20px;
}

/* ---------- Search form ---------- */
.csm-search-form {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);      /* overridden */
    border-radius: 50px;                        /* overridden */
    padding: 5px;                               /* overridden */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}



/* -- Icon position helpers (class toggled by JS from widget setting) -- */
.csm-search-form.csm-icon-right .csm-search-input  { order: 1; }
.csm-search-form.csm-icon-right .csm-search-submit { order: 2; }
.csm-search-form.csm-icon-left  .csm-search-submit { order: 1; }
.csm-search-form.csm-icon-left  .csm-search-input  { order: 2; }

/* ---------- Search input ---------- */
.csm-search-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    padding: 20px 25px; /* overridden */
    font-size: 18px;    /* overridden */
    color: #fff;        /* overridden */
    font-weight: 300;
}
.csm-search-input::placeholder { color: rgba(255, 255, 255, 0.7); /* overridden */ }

/* ---------- Submit button ---------- */
.csm-search-submit {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2); /* overridden */
    border: none;
    border-radius: 50%; /* overridden */
    width: 50px;        /* overridden */
    height: 50px;       /* overridden */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    margin: 0 5px;      /* overridden */
}
.csm-search-submit:hover { transform: scale(1.05); }
.csm-search-submit i   { font-size: 20px; }
.csm-search-submit svg { width: 20px; height: 20px; display: block; fill: currentColor; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .csm-search-container { padding: 0 15px; }
    .csm-search-input     { font-size: 16px; padding: 15px 20px; }
    .csm-search-submit    { width: 45px; height: 45px; }
}

/* ---------- Entry animation ---------- */
@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
.csm-modal.active .csm-search-container {
    animation: fadeInModal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}