:root {
--tssl-primary: #8B4513;
--tssl-primary-light: #A0522D;
--tssl-primary-dark: #6B3410;
--tssl-bg: #FFFFFF;
--tssl-bg-alt: #F9F6F3;
--tssl-text: #2D2016;
--tssl-text-muted: #7A6E63;
--tssl-border: #E0D5C7;
--tssl-radius: 8px;
--tssl-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
--tssl-transition: 0.25s ease;
}   .tssl-locator {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--tssl-text);
max-width: 1200px;
margin: 0 auto;
padding: 16px;
}   .tssl-search-section {
text-align: center;
margin-bottom: 8px;
}
.tssl-search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 32px;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
background: var(--tssl-primary);
border: none;
border-radius: var(--tssl-radius);
cursor: pointer;
transition: background var(--tssl-transition), transform var(--tssl-transition);
box-shadow: var(--tssl-shadow);
letter-spacing: 0.01em;
}
.tssl-search-btn:hover {
background: var(--tssl-primary-dark);
transform: translateY(-1px);
}
.tssl-search-btn--loading {
background: var(--tssl-primary-light);
pointer-events: none;
}
.tssl-search-btn--success {
background: #2e7d32;
}
.tssl-search-btn--error {
background: #c62828;
}
.tssl-consent-notice {
font-size: 0.72rem;
color: var(--tssl-text-muted);
margin: 6px auto 0;
max-width: 340px;
line-height: 1.5;
}   .tssl-divider {
height: 1px;
background: var(--tssl-border);
margin: 20px 0;
}   .tssl-filters {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
.tssl-filter-select {
width: 100%;
padding: 10px 12px;
font-size: 0.9rem;
border: 1px solid var(--tssl-border);
border-radius: var(--tssl-radius);
background: var(--tssl-bg);
color: var(--tssl-text);
box-sizing: border-box;
appearance: auto;
}   .tssl-outlet-listing {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 24px;
}   .tssl-distance-badge {
display: inline-block;
padding: 2px 10px;
font-size: 0.78rem;
font-weight: 600;
color: var(--tssl-primary);
background: var(--tssl-bg-alt);
border: 1px solid var(--tssl-border);
border-radius: 20px;
white-space: nowrap;
}   .tssl-map-container {
margin-bottom: 24px;
border-radius: var(--tssl-radius);
border: 1px solid var(--tssl-border);
overflow: hidden;
box-shadow: var(--tssl-shadow);
}
#tssl-consumer-map {
width: 100%;
min-height: 400px;
height: 50vw;
max-height: 600px;
}   .tssl-marker-icon {
background: var(--tssl-primary);
border: 3px solid #fff;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.tssl-user-icon {
background: #1976D2;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
animation: tssl-pulse 2s ease-in-out infinite;
}
@keyframes tssl-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.3); }
50%      { box-shadow: 0 0 0 12px rgba(25, 118, 210, 0); }
}   .tssl-empty-state {
text-align: center;
padding: 40px 20px;
color: var(--tssl-text-muted);
font-size: 1rem;
display: none;
}
.tssl-empty-state::before {
content: '🏪';
display: block;
font-size: 2.5rem;
margin-bottom: 12px;
}   .tssl-loading {
animate: tssl-shimmer 1.5s infinite;
background: linear-gradient(90deg,
var(--tssl-bg-alt) 25%,
#ede4da 50%,
var(--tssl-bg-alt) 75%);
background-size: 200% 100%;
border-radius: var(--tssl-radius);
min-height: 120px;
}
@keyframes tssl-shimmer {
0%   { background-position: 200% 0; }
100% { background-position: -200% 0; }
}   @media (max-width: 600px) {
.tssl-locator {
padding: 12px;
}
.tssl-search-btn {
width: 100%;
padding: 14px 20px;
}
.tssl-filters {
grid-template-columns: 1fr;
}
.tssl-outlet-listing {
grid-template-columns: 1fr;
}
#tssl-consumer-map {
height: 60vw;
}
} .tssl-outlet-card {
border: 1px solid var(--tssl-border);
border-radius: var(--tssl-radius);
overflow: hidden;
background: var(--tssl-bg);
transition: box-shadow var(--tssl-transition), transform var(--tssl-transition);
position: relative;
}
.tssl-outlet-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.tssl-outlet-card__image {
width: 100%;
height: 180px;
overflow: hidden;
background: var(--tssl-bg-alt);
display: flex;
align-items: center;
justify-content: center;
}
.tssl-outlet-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tssl-outlet-card__placeholder {
font-size: 3rem;
line-height: 1;
}
.tssl-outlet-card__body {
padding: 14px 16px;
}
.tssl-outlet-card__name {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 4px;
line-height: 1.3;
color: var(--tssl-primary-dark);
}
.tssl-outlet-card__name a {
color: var(--tssl-primary);
text-decoration: none;
}
.tssl-outlet-card__name a:hover {
color: var(--tssl-primary-dark);
text-decoration: underline;
}
.tssl-outlet-card__kecamatan {
font-size: 0.82rem;
color: var(--tssl-text-muted);
margin: 0 0 4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.tssl-outlet-card__address {
font-size: 0.88rem;
color: var(--tssl-text);
margin: 0 0 8px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tssl-outlet-card__sales {
font-size: 0.82rem;
color: var(--tssl-text-muted);
margin: 0 0 8px;
}
.tssl-outlet-card__sales strong {
color: var(--tssl-text);
}
.tssl-outlet-card__actions {
margin-top: 10px;
display: flex;
gap: 8px;
align-items: center;
}
.tssl-outlet-card__detail-btn {
display: inline-block;
padding: 7px 18px;
font-size: 0.85rem;
font-weight: 600;
color: #fff;
background: var(--tssl-primary);
border: none;
border-radius: 6px;
cursor: pointer;
text-decoration: none;
transition: background var(--tssl-transition);
line-height: 1.4;
}
.tssl-outlet-card__detail-btn:hover {
background: var(--tssl-primary-dark);
}
.tssl-outlet-card__maps-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 7px 14px;
font-size: 0.82rem;
color: var(--tssl-primary);
background: transparent;
border: 1px solid var(--tssl-border);
border-radius: 6px;
cursor: pointer;
text-decoration: none;
transition: all var(--tssl-transition);
line-height: 1.4;
}
.tssl-outlet-card__maps-btn:hover {
background: var(--tssl-bg-alt);
border-color: var(--tssl-primary-light);
} .tssl-outlet-card .tssl-distance-badge {
position: absolute;
top: 10px;
right: 10px;
} @media (max-width: 600px) {
.tssl-outlet-card__image {
height: 140px;
}
.tssl-outlet-card__body {
padding: 10px 12px;
}
.tssl-outlet-card__actions {
flex-direction: column;
align-items: stretch;
}
.tssl-outlet-card__detail-btn,
.tssl-outlet-card__maps-btn {
text-align: center;
width: 100%;
}
} .tssl-popup-detail {
max-width: 480px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--tssl-text);
}
.tssl-popup-detail__hero {
width: 100%;
height: 220px;
overflow: hidden;
background: var(--tssl-bg-alt);
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px 8px 0 0;
}
.tssl-popup-detail__hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tssl-popup-detail__hero-placeholder {
font-size: 4rem;
line-height: 1;
}
.tssl-popup-detail__content {
padding: 20px;
}
.tssl-popup-detail__status {
display: inline-block;
padding: 3px 12px;
font-size: 0.78rem;
font-weight: 600;
border-radius: 20px;
background: #e8f5e9;
color: #2e7d32;
margin-bottom: 8px;
}
.tssl-popup-detail__status--inactive {
background: #fbe9e7;
color: #c62828;
}
.tssl-popup-detail__name {
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 12px;
color: var(--tssl-primary-dark);
}
.tssl-popup-detail__location,
.tssl-popup-detail__contact {
margin: 12px 0;
font-size: 0.92rem;
line-height: 1.7;
}
.tssl-popup-detail__location strong,
.tssl-popup-detail__contact strong {
color: var(--tssl-primary);
font-weight: 600;
}
.tssl-popup-detail__distance {
margin: 12px 0;
}
.tssl-popup-detail__actions {
margin-top: 22px;
text-align: center;
}
.tssl-popup-detail__maps-btn {
display: inline-block;
padding: 12px 28px;
font-size: 1rem;
font-weight: 600;
color: #fff;
background: var(--tssl-primary);
border-radius: 8px;
text-decoration: none;
transition: background var(--tssl-transition);
}
.tssl-popup-detail__maps-btn:hover {
background: var(--tssl-primary-dark);
} .tssl-popup-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 999999;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
justify-content: center;
align-items: flex-end;
padding: 0;
}
.tssl-popup-overlay.is-open {
display: flex;
}
.tssl-popup-card {
position: relative;
background: #fff;
border-radius: 20px 20px 0 0;
width: 100%;
max-width: 600px;
max-height: 94vh;
overflow-y: auto;
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.2);
animation: tssl-popup-slide-up 0.3s ease-out;
-webkit-overflow-scrolling: touch;
}
@keyframes tssl-popup-slide-up {
from { transform: translateY(100%); }
to   { transform: translateY(0); }
} .tssl-popup-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.tssl-popup-close:hover {
background: rgba(0, 0, 0, 0.7);
} .tssl-popup-card__photo {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 20px 20px 0 0;
}
.tssl-popup-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tssl-popup-card__photo--empty {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f5ede3 0%, #efe3d5 100%);
}
.tssl-popup-card__photo--empty span {
font-size: 5rem;
line-height: 1;
} .tssl-popup-card__content {
padding: 24px 20px 32px;
}
.tssl-popup-card__name {
font-size: 1.35rem;
font-weight: 700;
color: #2D2016;
margin: 0 0 8px;
line-height: 1.3;
padding-right: 30px;
} .tssl-popup-card__distance {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 14px;
font-size: 0.82rem;
font-weight: 600;
color: #8B4513;
background: rgba(139, 69, 19, 0.08);
border: 1px solid #E0D5C7;
border-radius: 20px;
margin-bottom: 16px;
} .tssl-popup-card__location {
margin-bottom: 16px;
font-size: 0.92rem;
line-height: 1.8;
color: #2D2016;
}
.tssl-popup-card__location strong {
color: #8B4513;
font-weight: 600;
} .tssl-popup-card__hours {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #f9f6f3;
border-radius: 10px;
font-size: 0.9rem;
color: #2D2016;
margin-bottom: 20px;
}
.tssl-popup-card__hours-icon {
font-size: 1.2rem;
line-height: 1;
} .tssl-popup-card__actions {
margin-top: 4px;
}
.tssl-popup-card__btn-directions {
display: block;
width: 100%;
padding: 14px;
font-size: 1rem;
font-weight: 700;
color: #fff;
background: #8B4513;
border: none;
border-radius: 12px;
cursor: pointer;
text-align: center;
text-decoration: none;
transition: background 0.2s;
box-sizing: border-box;
}
.tssl-popup-card__btn-directions:hover {
background: #6B3410;
} @media (min-width: 601px) {
.tssl-popup-overlay {
align-items: center;
padding: 20px;
}
.tssl-popup-card {
border-radius: 20px;
max-height: 85vh;
}
.tssl-popup-card__photo {
border-radius: 20px 20px 0 0;
}
}
@media (max-width: 600px) {
.tssl-popup-card {
max-width: 100%;
border-radius: 16px 16px 0 0;
}
.tssl-popup-card__photo {
aspect-ratio: 4 / 3;
min-height: 220px;
}
.tssl-popup-card__content {
padding: 20px 16px 28px;
}
.tssl-popup-card__name {
font-size: 1.2rem;
}
}