/* 確保滾動行為平滑 */
html {
    scroll-behavior: smooth;
}

/* == 門市 == */
.store-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    width: 100%; 
}
.location-icon {
    width: 108px;
    height:108px;
    margin-right: 10px;
}
.store-navigation-header h2 {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin: 0;
    text-align: center;
    width: 100%;
}

/* 門市卡片的個別滾動邊距設置 */
#taipei-store {
    scroll-margin-top: 180px;
}
#taoyuan-store, #hsinchu-store, #taichung-store, #tainan-store, #kaohsiung-store {
    scroll-margin-top: 120px;
}

/* 門市導航區域樣式 */
.store-navigation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 30px;
    padding: 0 20px;
    text-align: center;
}
.reservation-info {
    font-size: 18px;
    color: #555;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

.line-link {
    display: inline-block;
    padding: 2px 12px;
    background-color: #00C300;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

.line-link:hover {
    background-color: #00a000;
    color: white;
}

.store-navigation-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.nav-link {
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 10px;
    transition: all 0.3s ease;
}

.separator {
    color: #ccc;
    margin: 0 5px;
}

/* 各門市連結顏色 */
.taipei-link {
    color: #0F71B6;
}

.taipei-link:hover {
    color: #62BCFA;
}

.taoyuan-link {
    color: #009B4C;
}

.taoyuan-link:hover {
    color: #4CD07A;
}

.hsinchu-link {
    color: #FFA800;
}

.hsinchu-link:hover {
    color: #FFCC00;
}

.taichung-link {
    color: #E54646;
}

.taichung-link:hover {
    color: #FF7070;
}

.tainan-link {
    color: #7a4aa0;
}

.tainan-link:hover {
    color: #8a5db5;
}

.kaohsiung-link {
    color: #8B6E4E;
}

.kaohsiung-link:hover {
    color: #A68B6E;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .store-navigation-container {
        margin: 40px auto 20px;
        width: 100%;
    }
    
    .store-icon {
        margin-bottom: 10px;
    }
    
    .location-icon {
        width: 58px;
        height: 58px;
    }
    
    .store-navigation-header h2 {
        font-size: 24px;
    }
    
    .reservation-info {
        font-size: 16px;
        width: 100%;
        text-align: center;
    }
    
    .nav-link {
        font-size: 18px;
    }
}

/* 修改移動端的導航連結布局 */
@media (max-width: 576px) {
    .store-navigation-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        width: 100%;
    }
    
    .separator {
        display: none;
    }
    
    .nav-link {
        padding: 8px 15px;
        border-radius: 30px;
        margin-bottom: 8px;
        text-align: center;
    }
    
    /* 各門市連結背景色保持不變 */
    .taipei-link {
        background-color: #E3F2FC;
    }
    
    .taoyuan-link {
        background-color: #EEFBEF;
    }
    
    .hsinchu-link {
        background-color: #FFF8E9;
    }
    
    .taichung-link {
        background-color: #FFF0F0;
    }
    
    .tainan-link {
        background-color: #f5e9ff;
    }
    
    .kaohsiung-link {
        background-color: #F9F2E9;
    }
}

/* 卡片容器 */
.store-card-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 20px 0;
}
.store-card {
    display: flex;
    width: 1384px;
    height: auto;
    padding: 32px 60px;
    justify-content: center;
    align-items: stretch;
    margin: 0 auto;
    text-align: left;
}

/* 左文字區域 */
.store-info {
    display: flex;
    height: 400px;
    padding: 0px 60px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 20px 0px 0px 20px;
    text-align: left;
}

/* 各門市卡片背景顏色 */
.taipei-bg {
    background: #E3F2FC;
}
.taoyuan-bg {
    background: #EEFBEF;
}
.hsinchu-bg {
    background: #FFF8E9;
}
.taichung-bg {
    background: #FFF0F0;
}
.tainan-bg {
    background: #f5e9ff;
}
.kaohsiung-bg {
    background: #F9F2E9;
}

/* 門市標題 */
.store-title {
    font-size: 28px;
    font-weight: bold;
    text-align: left;
}

/* 各門市標題顏色 */
.taipei-bg .store-title {
    color: #0F71B6;
}
.taoyuan-bg .store-title {
    color: #009B4C;
}
.hsinchu-bg .store-title {
    color: #FFA800;
}
.taichung-bg .store-title {
    color: #E54646;
}
.tainan-bg .store-title {
    color: #7a4aa0;
}
.kaohsiung-bg .store-title {
    color: #8B6E4E;
}

/* 門市資訊 */
.store-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #333;
    font-size: 16px;
    line-height: 1.5;
    font-family: inherit;
    text-align: left;
}
.address-line {
    display: flex;
    align-items: center;
    line-height: 1.5;
    justify-content: flex-start;
}
.map-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    text-decoration: none;
    width: auto;
    height: auto;
}
.map-icon img {
    width: auto;
    height: 18px;
    vertical-align: middle;
}
.tel-link {
    color: #333;
    text-decoration: none;
}
.tel-link:hover {
    text-decoration: underline;
}
.address-link {
    color: #333;
    text-decoration: none;
}

.address-link:hover {
    text-decoration: underline;
}

/* 預約按鈕 - 基本樣式 */
.reserve-btn {
    display: inline-block;
    padding: 10px 30px;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 20px;
    transition: background-color 0.3s;
    margin-top: 10px;
    align-self: flex-start;
}
.taipei-bg .reserve-btn {
    background: #0F71B6;
    color: white;
}
.taipei-bg .reserve-btn:hover {
    background: #62BCFA;
    color: white;
}
.taoyuan-bg .reserve-btn {
    background: #009B4C;
    color: white;
}
.taoyuan-bg .reserve-btn:hover {
    background: #4CD07A;
    color: white;
}
.hsinchu-bg .reserve-btn {
    background: #FFA800;
    color: white;
}
.hsinchu-bg .reserve-btn:hover {
    background: #FFCC00;
    color: white;
}
.taichung-bg .reserve-btn {
    background: #E54646;
    color: white;
}
.taichung-bg .reserve-btn:hover {
    background: #FF7070;
    color: white;
}
.tainan-bg .reserve-btn {
    background: #7a4aa0;
    color: white;
}
.tainan-bg .reserve-btn:hover {
    background: #8a5db5;
    color: white;
}
.kaohsiung-bg .reserve-btn {
    background: #8B6E4E;
    color: white;
}
.kaohsiung-bg .reserve-btn:hover {
    background: #A68B6E;
    color: white;
}


/* 右圖片輪播區域 */
.store-image-slider {
    position: relative;
    height: 400px;
    flex: 1 0 0;
    border-radius: 0px 20px 20px 0px;
    overflow: hidden;
    display: block;
}
.slider-container {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}
.slider-image {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0px 20px 20px 0px;
}

/* 輪播指示器容器 */
.slider-indicators {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    width: 100%;
    height: 56px;
    justify-content: center;
    align-items: center;
    gap: 18px;
}
/* 輪播指示器點點 */
.slider-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}
/* 選中的輪播指示器點點 */
.slider-dot.active {
    background-color: #fff;
}

/* 平板尺寸響應式調整 (768px - 1400px) */
@media (max-width: 1400px) {
    .store-card {
        width: 95%;
        max-width: 1100px;
        padding: 20px 30px;
        flex-wrap: nowrap;
        flex-direction: row;
    }
    
    .store-info {
        padding: 0px 30px;
        flex: 1;
        min-width: 0;
        height: 360px;
        text-align: left;
    }
    
    .store-image-slider {
        flex: 1;
        min-width: 0;
        height: 360px;
    }
}

/* 平板中等尺寸 */
@media (max-width: 1100px) {
    .store-card {
        padding: 15px;
        height: auto;
        text-align: left;
    }
    
    .store-info {
        padding: 30px;
        height: 340px;
        text-align: left;
    }
    
    .store-image-slider {
        height: 340px;
    }
    
    .store-title {
        font-size: 26px;
        text-align: left;
    }
    
    .store-details {
        font-size: 16px;
        text-align: left;
    }
    
    .reserve-btn {
        font-size: 18px;
        align-self: flex-start;
    }
}

/* 手機尺寸響應式調整 (小於 768px) */
@media (max-width: 768px) {
    .store-card {
        flex-direction: column;
        width: 100%;
        padding: 15px;
        text-align: left;
    }
    
    .store-info {
        width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 30px 20px;
        height: auto;
        min-height: 270px;
        text-align: left;
    }
    
    .store-image-slider {
        width: 100%;
        height: 240px;
        max-height: 240px;
        border-radius: 0 0 20px 20px;
        display: block !important;
    }
    
    .slider-image {
        border-radius: 0 0 20px 20px;
        height: 240px;
        max-height: 240px;
        object-fit: cover;
    }
    
    .store-title {
        font-size: 24px;
        text-align: left;
    }
    
    .store-details {
        font-size: 16px;
        gap: 8px;
        text-align: left;
    }
    
    .reserve-btn {
        font-size: 16px;
        padding: 8px 25px;
        align-self: flex-start;
    }
}

/* 小型手機尺寸 */
@media (max-width: 480px) {
    .store-image-slider {
        height: 200px;
        max-height: 200px;
        display: block !important;
        visibility: visible !important;
    }
    
    .slider-image {
        height: 200px;
        max-height: 200px;
    }
    
    .store-info {
        min-height: auto;
        padding: 25px 15px;
        text-align: left;
    }
    
    .slider-indicators {
        bottom: 10px;
        height: 40px;
    }
    
    .slider-dot {
        width: 10px;
        height: 10px;
    }
    
    .store-details {
        font-size: 14px;
        text-align: left;
    }
}