/* search-style.css */

/* Container ช่องค้นหา จัดกึ่งกลางและเว้นระยะห่าง */
.search-container {
    max-width: 600px;
    margin: 40px auto 40px;
    display: flex;
    gap: 12px;
    align-items: center; /* จัดกึ่งกลางในแนวตั้ง */
}

/* ช่องค้นหา input */
#searchInput {
   flex-grow: 1;
    height: 48px; /* กำหนดความสูง */
    padding: 0 20px;
    font-size: 18px;
    border: 2.5px solid #26a69a;
    border-radius: 50px;
    background-color: #e0f2f1;
    color: #004d40;
    font-weight: 600;
    box-shadow: 0 3px 7px rgba(38, 166, 154, 0.35);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Placeholder สีอ่อนสบายตา */
#searchInput::placeholder {
    color: #00796b;
    font-weight: 400;
}

/* เอฟเฟกต์เมื่อโฟกัส */
#searchInput:focus {
    outline: none;
    border-color: #004d40;
    box-shadow: 0 5px 14px rgba(0, 77, 64, 0.6);
    background-color: #fff;
    color: #00251a;
}

/* ปุ่มค้นหา */
#searchButton {
    height: 48px; /* ให้ความสูงเท่ากับ input */
    padding: 0 32px;
    font-size: 18px;
    background-color: #004d40;
    border: none;
    border-radius: 50px;
    color: white;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 77, 64, 0.5);
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* สถานะ hover และ focus ของปุ่ม */
#searchButton:hover,
#searchButton:focus {
    background-color: #00796b;
    box-shadow: 0 6px 18px rgba(0, 121, 107, 0.7);
}

/* สถานะ active (คลิกปุ่ม) */
#searchButton:active {
    background-color: #004d40;
    box-shadow: 0 3px 8px rgba(0, 77, 64, 0.6);
}

#results {
    max-width: 700px;
    margin: 40px auto 60px; /* เพิ่ม margin-bottom 60px เพื่อเว้นที่กับ footer */
    background: white;
    border-radius: 12px;
    box-shadow: 0 0 20px #bbb;
    padding: 25px 35px;
}



/* หัวข้อผลลัพธ์ */
#results h2 {
    margin-bottom: 20px;
    color: #00796b;
    border-bottom: 3px solid #004d40;
    padding-bottom: 7px;
    font-weight: 700;
}

/* แต่ละผลลัพธ์ */
.result-item {
    border-bottom: 1px solid #ddd;
    padding: 16px 0;
    transition: background-color 0.25s ease;
}

.result-item:last-child {
    border-bottom: none;
}

/* แสงเวลาเลื่อนเมาส์ */
.result-item:hover {
    background-color: #d0f0eb;
}

/* ลิงก์หัวข้อผลลัพธ์ */
.result-item a {
    font-size: 21px;
    color: #004d40;
    font-weight: 700;
    text-decoration: none;
}

.result-item a:hover {
    color: #00796b;
    text-decoration: underline;
}

/* คำอธิบายใต้หัวข้อ */
.description {
    margin-top: 8px;
    font-size: 16px;
    color: #555;
    line-height: 1.4;
}

/* กรณีไม่มีผลลัพธ์ */
.no-results {
    font-style: italic;
    color: #999;
    text-align: center;
    margin-top: 50px;
    font-size: 17px;
}

/* Breadcrumb */
section.breadcrumb-area {
    background-size: cover;
    background-position: center;
    padding: 60px 15px;
    color: white;
    text-align: center;
    height: 50vh;
}

.breadcrumb-content .breadcrumb-title h4 {
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}