/* =======================================================================
   search-section.css  ·  Little Genius English Dictionary
   — 乾淨版，僅含「搜尋區塊 + Difficulty 下拉」最新樣式
   ======================================================================= */

/* ---------- 1. 主題色變數（可全站共用） ------------------------------ */
:root {
    --accent-blue:        #2196f3;
    --accent-blue-light:  #90caf9;
    --accent-green:       #4caf50;
    --accent-green-dark:  #45a049;
    --light-cyan:         #e0f7fa;
    --light-cyan-border:  #81d4fa;
}

/* ---------- 2. Search Section 容器 ----------------------------------- */
.search-section {
    background: var(--light-cyan);
    padding: 25px;
    margin-bottom: 30px;
    text-align: center;
}

.search-section > label {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    color: var(--accent-blue);
    margin-bottom: 15px;
}

/* ---------- 3. 搜尋輸入 + 按鈕 --------------------------------------- */
.search-input-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

#wordInput {
    flex-grow: 1;
    max-width: 400px;
    padding: 15px 20px;
    font-size: 1.4em;
    color: #333;
    border: 3px solid var(--accent-blue-light);
    border-radius: 10px;
    outline: none;
    transition: border-color .3s;
}

#wordInput:focus {
    border-color: var(--accent-blue);
}

.search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;

    padding: 15px 25px;
    font-size: 1.3em;
    font-weight: bold;
    color: #fff;

    background: var(--accent-green);
    border: none;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(76,175,80,.4);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, background .2s;
}

.search-button:hover {
    background: var(--accent-green-dark);
    transform: translateY(-3px);
    box-shadow: 0 7px 12px rgba(76,175,80,.5);
}

/* ---------- 4. Difficulty (Age-Level) Selector ----------------------- */
.age-level-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.age-level-selector > label {
    font-size: 1.2em;
    color: #424242;
    white-space: nowrap; /* Keep label on one line, careful with very long text */
}

/* 統一 input / select / button 高度 */
.search-input-group > *,
#ageLevelSelect {
    height: 54px;
}

/* 美化原生 <select> */
#ageLevelSelect {
    width: 250px; /* Base width */
    max-width: 100%; /* Ensure it doesn't overflow on smaller screens */

    padding: 0 50px 0 20px;             /* 右邊留空給箭頭 */
    font-size: 1.2em;
    color: #333;
    background: #fff;
    border: 3px solid var(--accent-blue-light);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* SVG 箭頭 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23757575' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px 8px;

    transition: border-color .3s, box-shadow .3s;
}

#ageLevelSelect:hover,
#ageLevelSelect:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(33,150,243,.25);
    outline: none;
}

/* 隱藏舊版 IE / Edge 原生箭頭 */
#ageLevelSelect::-ms-expand { display: none; }

/* --- Responsive Tweaks for this component are moved to responsive.css --- */