/* ==========================================================
   Brachers 2025 — Search Overlay
   Fullscreen overlay • smooth fade • XD minimalist style
   ========================================================== */

:root {
    --br-blue: #2a418d;
    --br-dark: #1b1b1b;
    --br-white: #ffffff;
    --transition-fast: 0.25s ease;
}

/* ==========================================================
   OVERLAY BACKDROP
   ========================================================== */

.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

/* When active */
.search-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================
   BOX INNER (the white area)
   ========================================================== */

.search-overlay__box {
    width: 90%;
    max-width: 700px;
    padding: 40px 36px;
    background: var(--br-white);
    border-radius: 8px;
    position: relative;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2);

    transform: translateY(20px);
    transition: transform var(--transition-fast);
}

.search-overlay.active .search-overlay__box {
    transform: translateY(0);
}

/* ==========================================================
   CLOSE BUTTON
   ========================================================== */

.search-overlay__close {
    position: absolute;
    top: 16px;
    right: 16px;

    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;

    color: var(--br-dark);
    transition: opacity var(--transition-fast);
}

.search-overlay__close:hover {
    opacity: 0.7;
}

/* ==========================================================
   SEARCH FORM
   ========================================================== */

.search-overlay__form {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 20px;
}

/* The input */
.search-overlay__input {
    flex: 1;
    font-size: 22px;
    padding: 16px 20px;
    border: 2px solid var(--br-blue);
    border-radius: 6px 0 0 6px;
    outline: none;
    color: var(--br-dark);
    transition: border-color var(--transition-fast);
}

.search-overlay__input:focus {
    border-color: #1f3374;
}

/* Submit button */
.search-overlay__submit {
    background: var(--br-blue);
    border: none;
    color: var(--br-white);
    padding: 0 28px;
    font-size: 18px;
    cursor: pointer;

    border-radius: 0 6px 6px 0;
    transition: background var(--transition-fast);
}

.search-overlay__submit:hover {
    background: #1f3374;
}

/* Magnifying glass icon inside the button */
.search-overlay__submit svg {
    width: 22px;
    height: 22px;
    display: block;
}

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

@media (max-width: 768px) {
    .search-overlay__box {
        padding: 30px 24px;
    }

    .search-overlay__input {
        font-size: 18px;
        padding: 14px 16px;
    }

    .search-overlay__submit {
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .search-overlay__form {
        flex-direction: column;
    }

    .search-overlay__input {
        border-radius: 6px;
        margin-bottom: 14px;
    }

    .search-overlay__submit {
        width: 100%;
        border-radius: 6px;
        padding: 14px;
    }
}