/* ==========================================================
   Joomla 3 / Helix3
   Premium Search Page 2026
   สำหรับ com_search
   ========================================================== */

/* ---------- พื้นหลัง ---------- */

.search{
    max-width:1180px;
    margin:40px auto 60px;
    padding:40px;
    position:relative;
}

.search::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:28px;
    background:
        linear-gradient(135deg,
        rgba(255,255,255,.88),
        rgba(245,248,255,.92));
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:
        0 20px 60px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.7);
    z-index:-1;
}

/* ---------- หัวข้อ ---------- */

.search .page-header{
    margin-bottom:35px;
}

.search .page-header h1,
.search h1{

    font-size:2.3rem;
    font-weight:800;
    color:#001c54;

    display:flex;
    align-items:center;
    gap:16px;

    margin:0;
}

.search .page-header h1::before{

    content:"";

    width:7px;
    height:46px;

    border-radius:20px;

    background:
    linear-gradient(180deg,#D4AF37,#F8D667);

}

/* ---------- Search Form ---------- */

.search form{

    display:flex;
    align-items:center;

    gap:18px;

    margin:40px 0;

    flex-wrap:wrap;

}

.search input[type=text]{

    flex:1;

    min-width:320px;

    height:64px;

    border:none;

    border-radius:60px;

    background:#fff;

    padding:0 28px;

    font-size:17px;

    color:#001c54;

    box-shadow:
    0 10px 30px rgba(0,0,0,.06);

    transition:.35s;

}

.search input[type=text]:focus{

    outline:none;

    transform:translateY(-2px);

    box-shadow:
    0 0 0 4px rgba(212,175,55,.18),
    0 20px 40px rgba(0,0,0,.10);

}

/* Placeholder */

.search input::placeholder{

    color:#8d98a8;

}

/* ---------- Button ---------- */

.search button,
.search input[type=submit]{

    height:64px;

    padding:0 42px;

    border:none;

    border-radius:60px;

    cursor:pointer;

    color:#fff;

    font-size:16px;

    font-weight:700;

    background:
    linear-gradient(135deg,
    #001c54,
    #003b8f);

    transition:.35s;

    box-shadow:
    0 15px 35px rgba(0,28,84,.30);

}

.search button:hover,
.search input[type=submit]:hover{

    transform:translateY(-3px);

    box-shadow:
    0 22px 40px rgba(0,28,84,.40);

}

/* ---------- จำนวนผลลัพธ์ ---------- */

.searchintro{

    color:#6f7a88;

    font-size:15px;

    margin-bottom:25px;

}

/* ---------- รายการผลลัพธ์ ---------- */

.search-results{

    list-style:none;

    margin:0;

    padding:0;

}

.search-results li{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:22px;

    margin-bottom:24px;

    padding:28px 32px;

    border:1px solid rgba(0,28,84,.06);

    transition:.35s;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

}

/* เส้น Accent */

.search-results li::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:6px;
    height:100%;

    background:
    linear-gradient(180deg,#D4AF37,#FFD85E);

}

/* Hover */

.search-results li:hover{

    transform:translateY(-6px);

    box-shadow:
    0 28px 55px rgba(0,0,0,.12);

}

/* ---------- Title ---------- */

.search-results h3{

    margin:0 0 14px;

    font-size:1.45rem;

    font-weight:700;

}

.search-results h3 a{

    color:#001c54;

    text-decoration:none;

    transition:.3s;

}

.search-results h3 a:hover{

    color:#C59A00;

}

/* ---------- Description ---------- */

.search-results p{

    color:#666;

    line-height:1.9;

    margin-bottom:18px;

}

/* ---------- URL ---------- */

.result-url{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#eef4ff;

    color:#003b8f;

    padding:8px 18px;

    border-radius:50px;

    font-size:13px;

    text-decoration:none;

    font-weight:600;

}

/* ---------- Highlight ---------- */

.highlight{

    background:#FFF3B2;

    color:#000;

    padding:2px 6px;

    border-radius:5px;

}

/* ---------- No Result ---------- */

.search .warning,
.search .alert{

    border:none;

    border-radius:20px;

    background:#fff8e7;

    border-left:6px solid #D4AF37;

    padding:25px;

}

/* ---------- Pagination ---------- */

.pagination{

    margin-top:45px;

    justify-content:center;

}

.pagination>li>a,
.pagination>li>span{

    border:none;

    background:#fff;

    margin:0 5px;

    width:46px;
    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    color:#001c54;

    box-shadow:
    0 8px 20px rgba(0,0,0,.05);

    transition:.3s;

}

.pagination>li>a:hover{

    background:#001c54;

    color:#fff;

}

.pagination>.active>span{

    background:
    linear-gradient(135deg,#001c54,#003b8f);

    color:#fff;

}

/* ---------- Mobile ---------- */

@media (max-width:991px){

.search{

padding:25px;

margin:20px;

}

.search form{

display:block;

}

.search input[type=text]{

width:100%;
margin-bottom:15px;

}

.search button,
.search input[type=submit]{

width:100%;

}

.search-results li{

padding:22px;

}

}

@media (max-width:576px){

.search .page-header h1{

font-size:1.7rem;

}

.search-results h3{

font-size:1.2rem;

}

}

/* แถวของ Select */
.search > form > .mb-3:last-child .row{
    display:block;
}

/* Column ที่ครอบ Select */
.search > form > .mb-3:last-child .col-lg-5{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
}

/* Select */
.search #ordering{
    width:420px !important;
    max-width:100%;
}