/* ──────────────────────────────────────────────────────────
   FictionX – Header search (`.top-search.fx-search`)
   1) Balanced circular trigger aligned with the nav.
   2) A clean, modern centered search panel (open state).
   Preserves legacy toggle JS (.top-search > a / .search-box /
   .close-srch / .srch-overlay). RTL-first.
   ────────────────────────────────────────────────────────── */

/* ===== Trigger button ===== */
.top-head .top-search.fx-search{
    display:flex;
    align-items:center;
    height:69px;
    margin:0;
    margin-inline-start:8px;
    padding:0;
    border:0;
}
.top-head .top-search.fx-search > a.fx-search-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin:0;
    padding:0;
    border-radius:50%;
    color:#a51313;
    background:#fff;
    border:1.5px solid rgba(165,19,19,.28);
    line-height:1;
    transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.top-head .top-search.fx-search > a.fx-search-btn:hover,
.top-head .top-search.fx-search > a.fx-search-btn:focus{
    background:#a51313;
    color:#fff;
    border-color:#a51313;
    outline:none;
}
.top-head .top-search.fx-search > a.fx-search-btn span{font-size:15px;line-height:1;}
.top-head .top-search.fx-search > a.fx-search-btn span::before{margin:0;}

/* ===== Overlay (added by JS) ===== */
.srch-overlay{
    background:rgba(15,23,42,.5) !important;
    -webkit-backdrop-filter:blur(3px);
            backdrop-filter:blur(3px);
}

/* ===== Search panel (open state) ===== */
/* NOTE: do NOT set `display` here — the legacy JS relies on the base
   `.search-box{display:none}` so the panel stays hidden until the
   trigger is clicked (JS toggles via .show()/.hide()). */
.top-head .top-search.fx-search .search-box{
    position:fixed;
    top:96px;
    left:50%;
    transform:translateX(-50%);
    width:min(620px, 92vw);
    margin:0;
    padding:54px 22px 22px;
    border:1px solid rgba(15,23,42,.08);
    border-bottom:3px solid #a51313;
    border-radius:4px;
    background:#fff;
    box-shadow:none;
    line-height:normal;
    z-index:1000;
}

/* Hide the legacy "-" label */
.top-head .top-search.fx-search .search-box #searchLabel{display:none;}

/* Form row: input + submit */
.top-head .top-search.fx-search .search-box form{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
}
.top-head .top-search.fx-search .search-box input[type=text].txt-box{
    flex:1 1 auto;
    width:auto;
    border:1px solid rgba(15,23,42,.16);
    border-radius:4px;
    padding:13px 16px;
    font-size:16px;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    background:#f7f8fa;
    color:#15202b;
}
.top-head .top-search.fx-search .search-box input[type=text].txt-box:focus{
    border-color:#a51313;
    background:#fff;
    outline:none;
}
.top-head .top-search.fx-search .search-box .fx-search-go{
    flex:0 0 auto;
    width:48px;
    height:48px;
    border:0;
    border-radius:4px;
    background:#a51313;
    color:#fff;
    font-size:16px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease;
}
.top-head .top-search.fx-search .search-box .fx-search-go:hover{background:#7d0f0f;}

/* Clean close (×) button — top trailing corner */
.top-head .top-search.fx-search .search-box .close-srch{
    position:absolute;
    top:14px;
    right:auto;
    left:auto;
    inset-inline-end:16px;
    width:32px;
    height:32px;
    margin:0;
    border-radius:50%;
    background:#f1f2f4;
    border:1px solid rgba(15,23,42,.10);
    color:#a51313;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0;
    transition:background .2s ease, color .2s ease;
}
.top-head .top-search.fx-search .search-box .close-srch:hover{background:#a51313;color:#fff;}
.top-head .top-search.fx-search .search-box .close-srch::before{
    content:"\2715";
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    line-height:1;
}

@media (max-width:991px){
    .top-head .top-search.fx-search{height:auto;}
    .top-head .top-search.fx-search .search-box{top:78px;}
}