/* ==========================================
   Search Our Channel
   search-our-channel.css
========================================== */

.search-channel-section {

    padding: 60px 20px;

    background: linear-gradient(
        180deg,
        #f9f9f9,
        #ffffff
    );

}

.search-channel-section .container {

    max-width: 1100px;

    margin: auto;

}

/* ==========================================
   Heading
========================================== */

.search-channel-section h1 {

    font-size: 42px;

    text-align: center;

    color: #d46a00;

    margin-bottom: 30px;

}

.search-channel-section p {

    font-size: 19px;

    line-height: 1.9;

    color: #444;

    margin-bottom: 20px;

    text-align: justify;

}

/* ==========================================
   Search Box
========================================== */

.search-box {

    background: #ffffff;

    margin-top: 45px;

    padding: 35px;

    border-radius: 16px;

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

}

.search-box label {

    display: block;

    font-size: 22px;

    font-weight: bold;

    color: #333;

    margin-bottom: 20px;

}

.search-form {

    display: flex;

    gap: 15px;

}

.search-form input {

    flex: 1;

    padding: 16px 20px;

    font-size: 18px;

    border: 2px solid #dddddd;

    border-radius: 10px;

    outline: none;

    transition: 0.3s;

}

.search-form input:focus {

    border-color: #d46a00;

    box-shadow: 0 0 10px rgba(212, 106, 0, 0.15);

}

.search-form button {

    padding: 16px 35px;

    border: none;

    border-radius: 10px;

    background: #d46a00;

    color: white;

    font-size: 18px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;

}

.search-form button:hover {

    background: #b55600;

    transform: translateY(-2px);

}

/* ==========================================
   Results Table
========================================== */

.results-wrapper {

    margin-top: 40px;

    overflow-x: auto;

    background: #ffffff;

    border-radius: 16px;

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

}

#results {

    width: 100%;

    border-collapse: collapse;

}

#results thead {

    background: #d46a00;

    color: white;

}

#results th {

    padding: 18px;

    font-size: 19px;

    text-align: left;

}

#results td {

    padding: 18px;

    border-bottom: 1px solid #eeeeee;

    font-size: 17px;

    color: #444;

}

#results tbody tr:nth-child(even) {

    background: #fafafa;

}

#results tbody tr:hover {

    background: #fff4e8;

}

/* ==========================================
   Links
========================================== */

#results a {

    color: #0066cc;

    text-decoration: none;

    font-weight: 600;

}

#results a:hover {

    text-decoration: underline;

}

/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .search-channel-section {

        padding: 40px 15px;

    }

    .search-channel-section h1 {

        font-size: 30px;

        line-height: 1.3;

    }

    .search-channel-section p {

        font-size: 17px;

    }

    .search-box {

        padding: 25px;

    }

    .search-box label {

        font-size: 18px;

    }

    .search-form {

        flex-direction: column;

    }

    .search-form input {

        width: 100%;

        font-size: 17px;

    }

    .search-form button {

        width: 100%;

        font-size: 18px;

    }

    #results th,
    #results td {

        padding: 14px;

        font-size: 15px;

    }

}