body { font-family: "PingFang TC", "Microsoft JhengHei", sans-serif; background-color: #fcfcfd; color: #333; margin: 0; padding: 0; line-height: 1.6; }
#store-locator-container { max-width: 1100px; margin: 60px auto; padding: 0 20px; }
#store-locator-container .page-title {font-size: 3rem;font-weight: 700;color: #5173b8;text-align: center;margin-bottom: 40px;letter-spacing: 2px;text-shadow: 0 2px 4px rgba(81,115,184,0.1);}
#store-locator-container #region-filter { display: flex; justify-content: center; gap: 12px; margin-bottom: 50px; flex-wrap: wrap; }
.filter-btn { background-color: #ffffff; color: #5173b8; padding: 10px 32px; border-radius: 50px; cursor: pointer; font-size: 16px; border: 1px solid #5173b8; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; box-shadow: 0 2px 8px rgba(81, 115, 184, 0.05); }
.filter-btn:hover { background-color: rgba(81, 115, 184, 0.08); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(81, 115, 184, 0.15); }
.filter-btn.active { background-image: linear-gradient(135deg, #5173b8 0%, #3a5894 100%); color: #ffffff; border-color: transparent; box-shadow: 0 6px 16px rgba(81, 115, 184, 0.3); transform: translateY(-1px); }
#store-locator-container #data-display-section { width: 100%; border-collapse: collapse; overflow: hidden; background: #ffffff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.04); border: 1px solid #f0f0f0; }
#store-locator-container .table-head { display: grid; grid-template-columns: 1fr 2fr 1.5fr 3fr 0.8fr; padding: 18px 0; background-image: linear-gradient(135deg, #5173b8 0%, #3a5894 100%); border-radius: 12px 12px 0 0; }
#store-locator-container .head-item { color: #ffffff; text-align: center; font-size: 15px; font-weight: 500; letter-spacing: 1px; }
.data-row { display: grid; grid-template-columns: 1fr 2fr 1.5fr 3fr 0.8fr; padding: 20px 0; border-bottom: 1px solid #f4f4f4; align-items: center; transition: all 0.3s ease; position: relative; }
.data-row:last-child { border-bottom: none; }
.data-row:hover { background-color: #f9fbff; transform: translateX(4px); box-shadow: -4px 0 0 #5173b8 inset; }
.data-row.hide { display: none !important; }
.cell-text {text-align: center;font-size: 15px;color: #555;transition: color 0.3s;width: 100%;}
.data-row:hover .cell-text { color: #222; }
.cell-address { text-align: left; padding-left: 20px; }
.map-icon-box { display: flex; justify-content: center; align-items: center; }
.map-icon {cursor: pointer;transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s;filter: drop-shadow(0 2px 4px rgba(81,115,184,0.3));}
.map-icon:hover { transform: scale(1.25) translateY(-2px); filter: drop-shadow(0 6px 8px rgba(81,115,184,0.4)); }

@keyframes fadeInRow {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    #store-locator-container{margin-top:20px;}
    #store-locator-container .page-title{font-size: 2.25rem;}
#store-locator-container #region-filter { gap: 10px; margin-bottom: 30px; }
.filter-btn { padding: 8px 20px; font-size: 14px; }
#store-locator-container #data-display-section { background: transparent; box-shadow: none; border: none; }
#store-locator-container .table-head { display: none; }
.data-row {display: flex;flex-direction: column;gap: 8px;padding: 20px;border: 1px solid #ebebeb;margin-bottom: 16px;border-radius: 12px;background: #ffffff;box-shadow: 0 4px 12px rgba(0,0,0,0.03);transform: none !important;transition: border-color 0.3s, box-shadow 0.3s;align-items: flex-start;}
.data-row:hover { box-shadow: 0 6px 16px rgba(81, 115, 184, 0.1); border-color: #dbe4f5; }
.cell-text, .cell-address {text-align: left;padding-left: 0;font-size: 14px;}
.cell-text.mobile-label::before { content: attr(data-label) "："; font-weight: 600; color: #5173b8; display: inline-block; min-width: 85px; }
.map-icon-box {justify-content: flex-end;margin-top: 0;position: relative;z-index: 2;display: none;}
}