/**
 * WPSL 縮圖專屬樣式 v1.3 - 修復版
 * 核心理念：統一圖片來源，CSS 控制顯示尺寸
 * 
 * @version 1.3-fixed
 * @author Rice
 */

/* ===========================================
   上半部：縮圖管理器專用區塊（修復版）
   =========================================== */

/* CSS 變數 - 由後台動態設定 */
:root {
    --wpsl-info-window-width: 50px;
    --wpsl-info-window-height: 50px;
    --wpsl-listing-width: 150px;
    --wpsl-listing-height: 150px;
}

/* =================================
   🎯 統一圖片基礎樣式
   ================================= */

/* 所有 WPSL 相關圖片的基礎樣式 */
.wpsl-info-window img,
.custom-info-window img,
.wpsl-store-location img,
.wpsl-store-thumb,
li[data-store-id] img {
    object-fit: cover !important;
    border-radius: 4px !important;
    display: block !important;
    transition: opacity 0.3s ease !important;
    box-sizing: border-box !important;
}

/* =================================
   🖼️ Info Window 圖片樣式
   使用清單圖片但 CSS 縮放到小尺寸
   ================================= */

.wpsl-info-window .info-right img,
.custom-info-window .info-right img,
img[data-wpsl-context="info_window"],
img[data-wpsl-unified="true"][data-wpsl-context="info_window"] {
    width: var(--wpsl-info-window-width) !important;
    height: var(--wpsl-info-window-height) !important;
    min-width: var(--wpsl-info-window-width) !important;
    min-height: var(--wpsl-info-window-height) !important;
    max-width: var(--wpsl-info-window-width) !important;
    max-height: var(--wpsl-info-window-height) !important;
}

/* =================================
   📋 清單圖片樣式
   使用實際生成的清單尺寸
   ================================= */

.wpsl-store-location img,
.wpsl-store-thumb,
li[data-store-id] img,
img[data-wpsl-context="listing"],
img[data-wpsl-unified="true"][data-wpsl-context="listing"] {
    width: var(--wpsl-listing-width) !important;
    height: var(--wpsl-listing-height) !important;
    min-width: var(--wpsl-listing-width) !important;
    min-height: var(--wpsl-listing-height) !important;
    max-width: var(--wpsl-listing-width) !important;
    max-height: var(--wpsl-listing-height) !important;
}

/* 確保清單圖片不會在 info window 中誤用清單尺寸 */
.wpsl-info-window .wpsl-store-location img,
.custom-info-window .wpsl-store-location img,
.wpsl-info-window .wpsl-store-thumb,
.custom-info-window .wpsl-store-thumb,
.wpsl-info-window li[data-store-id] img,
.custom-info-window li[data-store-id] img {
    width: var(--wpsl-info-window-width) !important;
    height: var(--wpsl-info-window-height) !important;
    min-width: var(--wpsl-info-window-width) !important;
    min-height: var(--wpsl-info-window-height) !important;
    max-width: var(--wpsl-info-window-width) !important;
    max-height: var(--wpsl-info-window-height) !important;
}

/* =================================
   🔄 載入狀態樣式
   ================================= */

/* 佔位符和載入狀態 */
img.wpsl-img-loading {
    opacity: 0.5 !important;
    background: #f0f0f0 !important;
}

img.wpsl-img-placeholder {
    opacity: 0.6 !important;
    background: repeating-linear-gradient(
        45deg,
        #f0f0f0,
        #f0f0f0 5px,
        #e0e0e0 5px,
        #e0e0e0 10px
    ) !important;
}

img.wpsl-img-loaded {
    opacity: 1 !important;
    background: none !important;
}

/* 處理中的圖片有淡入效果 */
img.wpsl-processed {
    transition: all 0.3s ease !important;
}

/* =================================
   📱 響應式設計
   ================================= */

/* 響應式 - 配合用戶的 720px 斷點 */
@media (max-width: 720px) {
    :root {
        --wpsl-info-window-width: 40px;
        --wpsl-info-window-height: 40px;
        --wpsl-listing-width: 120px;
        --wpsl-listing-height: 120px;
    }
}

@media (max-width: 480px) {
    :root {
        --wpsl-info-window-width: 35px;
        --wpsl-info-window-height: 35px;
        --wpsl-listing-width: 100px;
        --wpsl-listing-height: 100px;
    }
}

/* ===========================================
   下半部：用戶原始設定區塊（保持不變）
   =========================================== */

/* 地圖按鈕*/
#wpsl-wrap [class^="wpsl-icon-"], #wpsl-wrap [class*=" wpsl-icon-"] {
    position: relative;
    float: left;
    padding: 12px 13px;
    display: inline-block;
    font-family: "wpsl-fontello";
    font-style: normal;
    font-weight: normal;
    font-size: 1.3em;
    color: #c79954;
    speak: none;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wpsl-icon-direction {
    display: inline-block;      /* 讓它跟按鈕一樣內聯區塊 */
    cursor: pointer;            /* 滑鼠變手指 */
}

.wpsl-icon-direction:hover {
    background: #ffffff;
}

/* ------------------------------------------
   地圖讓整個 checkbox 清單改用 flex 排列，
      寬度不夠時整個項目才會換行
-------------------------------------------- */
ul#wpsl-checkbox-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;    /* 上下 8px、左右 16px，依需求調整 */
    margin: 30px 0 30px !important;
    padding: 0 !important;
}

/* ------------------------------------------
   地圖把每個 li 的寬度和浮動都還原成「自動」，
      只靠內容決定寬度，才不會死板切欄
-------------------------------------------- */
ul#wpsl-checkbox-filter li {
    flex: 0 0 auto !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    list-style: none !important;
}

/* ------------------------------------------
   勾選文字不做折行，保證「景點」「飲食」等關鍵詞完整
-------------------------------------------- */
ul#wpsl-checkbox-filter li label {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* ------------------------------------------
   4) 小微調：checkbox 與文字間距
-------------------------------------------- */
ul#wpsl-checkbox-filter li input[type="checkbox"] {
    margin-right: 5px !important;
}

/* 最外層直式排列 */
.custom-info-window {
    display: flex;
    flex-direction: column;
    padding: 5px;
    gap: 6px;
}

/* 上層左右並排 */
.custom-info-window .info-top {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* 左邊文字撐滿 */
.custom-info-window .info-left {
    flex: 1;
    font-size: 14px;
    line-height: 1.2 !important;
}

/* 右邊縮圖 */
.custom-info-window .info-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
}

.custom-info-window .info-right img {
    /* 尺寸由上方動態控制，這裡設定其他樣式 */
    object-fit: cover;
    border-radius: 4px;
}

/* 下層操作按鈕全寬置中 */
.custom-info-window .info-actions {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
}

/* 移除原本 <p> 的上下 margin */
.custom-info-window .info-left p {
    margin: 1.6 !important;
    line-height: 14px !important;
}

/* 左邊文字撐滿 */
.custom-info-window .info-left h3{
    font-size: 16px;
    line-height: 1.2 !important;
}

#wpsl-gmap .wpsl-info-actions {
    display: block;
    margin: 0px 0 !important;
}

/*地圖*/
/* 針對桌機視窗寬度超過 720px 的情況 */
@media (min-width: 721px) {
    #wpsl-search-wrap,
    #wpsl-gmap,
    #wpsl-result-list,
    #wpsl-wrap {
        max-width: 720px;
        margin: 0 auto; /* 使內容居中 */
    }
}

/* 針對平板和手機視窗寬度小於或等於 720px 的情況 */
@media (max-width: 720px) {
    #wpsl-search-wrap,
    #wpsl-gmap,
    #wpsl-result-list,
    #wpsl-wrap {
        width: 100%;
        max-width: none; /* 取消 max-width 限制 */
    }
}

/*地圖搜尋控制不要有底色*/
.wpsl-search.wpsl-checkboxes-enabled {
    padding: 12px;
    background: none
}

.wp-block-image img {
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
    /* vertical-align: bottom; */
}