.elementor-7243 .elementor-element.elementor-element-0f63c39{--display:flex;}.elementor-7243 .elementor-element.elementor-element-4ba92fe > .elementor-widget-container{margin:36px 0px 36px 0px;padding:0px 30px 0px 30px;}#elementor-popup-modal-7243 .dialog-widget-content{animation-duration:1.2s;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-7243{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-7243 .dialog-message{width:640px;height:90vh;align-items:flex-start;}#elementor-popup-modal-7243 .dialog-close-button{display:flex;top:2%;font-size:16px;}@media(max-width:1024px){#elementor-popup-modal-7243 .dialog-message{width:450px;}}@media(max-width:767px){#elementor-popup-modal-7243 .dialog-message{width:320px;}}/* Start custom CSS *//* ---------------------------------------------------- */
/* 1. 容器樣式：確保橫向排列並居中 */
/* ---------------------------------------------------- */
#artist-filter-buttons {
    display: flex;
    flex-wrap: wrap; /* 允許換行，適合手機響應式 */
    justify-content: center; /* 居中對齊 */
    align-items: center;
    gap: 8px; /* 按鈕間距 */
    margin: 20px 0; /* 上下邊距 */
    padding: 10px;
}

/* ---------------------------------------------------- */
/* 2. 按鈕基礎樣式 */
/* ---------------------------------------------------- */
.artist-az-filter .az-filter-btn {
    /* 外觀設定 */
    background-color: transparent;
    border: 1px solid #ccc;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 10px; /* 內邊距 */
    min-width: 30px; 
    text-align: center;
    border-radius: 4px; /* 圓角 */
    transition: all 0.2s ease-in-out;
    line-height: 1; /* 確保文字居中 */
}

/* ---------------------------------------------------- */
/* 3. 懸停與啟用 (Active) 狀態 */
/* ---------------------------------------------------- */

/* 懸停 (Hover) 效果 */
.artist-az-filter .az-filter-btn:hover {
    background-color: #f0f0f0;
    border-color: #888;
    color: #000;
}

/* 啟用/選中 (Active) 狀態 */
.artist-az-filter .az-filter-btn.active {
    background-color: #000; /* 激活時背景為黑色 */
    border-color: #000;
    color: #fff; /* 文字為白色 */
    font-weight: 600;
}


/* ---------------------------------------------------- */
/* 4. 響應式調整 (讓手機端每行顯示更多) */
/* ---------------------------------------------------- */
@media screen and (max-width: 480px) {
    #artist-filter-buttons {
        gap: 4px; /* 手機上間距縮小 */
        padding: 5px;
    }
    .artist-az-filter .az-filter-btn {
        font-size: 12px;
        padding: 5px 7px;
        min-width: 25px;
    }
}/* End custom CSS */