:root {
--servi-primary-color:    #ff0000;
--servi-primary-dark:     #D76700;
--servi-secondary-color:  #00457C;
--servi-text-color:       #333333;
--servi-text-light:       #666666;
--servi-border-color:     #ff0000;
--servi-background-white: #FFFFFF;
--servi-background-light: #FFFFFF;
--servi-font-family:      'Montserrat', sans-serif;
}
#servienvia-locator-wrapper * {
font-family: var(--servi-font-family) !important;
}
.servienvia-directions-btn {
background: #ff0000;
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
margin-top: 8px;
}
.servienvia-directions-btn:hover { background: #cc0000; }
.cluster-icon {
background-color: var(--servi-secondary-color);
border: 3px solid var(--servi-background-white);
}
#servienvia-locator-wrapper,
#servienvia-locator-wrapper * {
box-sizing: border-box;
} #servienvia-panel input[type="text"],
#servienvia-panel input[type="email"] {
width: 100%;
max-width: 100%;
box-sizing: inherit;
} #servienvia-locator-wrapper {
display: flex;
width: 100%;
height: 650px;
border: 1px solid var(--servi-border-color);
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
border-radius: 8px;
overflow: hidden;
background: var(--servi-background-white);
position: relative;
}
#servienvia-panel {
background: var(--servi-background-white);
flex: 0 0 35%;
min-width: 300px;
max-width: 600px;
display: flex;
flex-direction: column;
height: 100%;
border-right: 1px solid var(--servi-border-color);
}
#servienvia-map-container {
flex-grow: 1;
height: 100%;
background-color: #e9e9e9;
} .servienvia-controls {
padding: 20px;
background: var(--servi-background-white);
border-bottom: 1px solid var(--servi-border-color);
}
.servienvia-controls h3 {
margin: 0 0 15px;
font-size: 1.25rem;
}
.servienvia-controls input[type="text"] {
width: 100%;
padding: 12px 15px;
font-size: 1rem;
border: 1px solid var(--servi-border-color);
border-radius: 6px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.servienvia-controls input[type="text"]:focus {
outline: none;
border-color: var(--servi-primary-color);
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}
.separator {
text-align: center;
margin: 15px 0;
color: #aaa;
font-size: 0.75rem;
display: flex;
align-items: center;
}
.separator::before,
.separator::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--servi-border-color);
}
.separator span { padding: 0 10px; } #servienvia-near-me-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 6px 12px;
font-size: 1rem;
font-weight: 500;
background-color: var(--servi-primary-color);
color: #fff;
border: 1px solid var(--servi-primary-color);
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
position: relative;
}
#servienvia-near-me-btn:hover:not(:disabled) { background-color: #e9ecef; }
#servienvia-near-me-btn:disabled { cursor: wait; background-color: #e9ecef; }
#servienvia-near-me-btn .btn-spinner {
display: none;
width: 18px;
height: 18px;
border: 2px solid var(--servi-primary-color);
border-bottom-color: transparent;
border-radius: 50%;
animation: spin 0.75s linear infinite;
}
#servienvia-near-me-btn.is-locating .btn-text,
#servienvia-near-me-btn.is-locating .default-icon { display: none; }
#servienvia-near-me-btn.is-locating .btn-spinner { display: block; }
#servienvia-near-me-btn .default-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
} #servienvia-list-container {
flex-grow: 1;
overflow-y: auto;
position: relative;
background: var(--servi-background-light);
}
.servienvia-list-item {
padding: 15px 20px;
margin-bottom: 16px;
border-bottom: 1px solid var(--servi-border-color);
cursor: pointer;
transition: background-color 0.2s;
background: #fff;
}
.servienvia-list-item:hover { background-color: #eef5ff; }
.servienvia-list-item.active > h4 { color: #ff0000; }
.servienvia-list-item.active {
color: #000000;
background-color: #fff;
border-left: 4px solid var(--servi-primary-color);
padding-left: 16px;
}
.servienvia-list-item h4 {
margin: 0 0 8px 0;
font-size: 1rem;
font-weight: 600;
color: var(--servi-primary-color);
}
.servienvia-list-item p {
margin: 0 0 4px 0;
font-size: 0.9rem;
color: var(--servi-text-light);
line-height: 1.5;
} #servienvia-loader {
position: absolute;
inset: 0;
background: rgba(248, 249, 250, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--servi-primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.pac-container { z-index: 9999 !important; }
.servienvia-error-box {
padding: 10px 15px;
background-color: #fffbe6;
border: 1px solid #ffe58f;
color: #d46b08;
border-radius: 4px;
margin-bottom: 15px;
}
#servienvia-frontend-error {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: #d9534f;
color: white;
padding: 15px 25px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
z-index: 100;
text-align: center;
max-width: 90%;
}
#servienvia-frontend-error a { color: #fff; text-decoration: underline; } .sv-item-media {
margin: 8px 0 10px;
border-radius: 8px;
overflow: hidden;
background: #f3f3f3;
}
.sv-item-media img {
display: block;
width: 100%;
height: 160px; object-fit: cover;
} .servienvia-infowindow-content .sv-iw-media {
margin: 0 0 6px 0;
border-radius: 6px;
overflow: hidden;
background: #f3f3f3;
height: 110px; }
.servienvia-infowindow-content .sv-iw-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; } .servienvia-infowindow-content h4 {
margin: 0 0 8px 0;
font-size: 1rem;
font-weight: 600;
color: var(--servi-primary-color);
}
.servienvia-infowindow-content .item-line {
margin: 2px 0;
font-size: 0.92rem;
line-height: 1.25;
} .sv-schedule {
margin: 12px 0;
font-size: 0.9rem;
color: var(--servienvia-text-color);
}
.sv-schedule-today {
display: flex;
align-items: center;
cursor: default;
}
.sv-schedule-today .item-icon {
margin-right: 8px;
flex-shrink: 0;
}
.sv-schedule-today .sv-schedule-line { flex-grow: 1; }
.sv-schedule-today .sv-sched-toggle {
background: none;
border: none;
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
.sv-schedule-all {
margin-top: 8px;
padding-left: 24px;
}
.sv-schedule-all p { margin: 4px 0; }  @media (max-width: 800px) {
#servienvia-locator-wrapper {
flex-direction: column;
height: auto;
} #servienvia-map-container {
order: 1;
height: 55vh; } @media (max-width: 800px) and (min-height: 700px) {
#servienvia-map-container { height: 65vh; }
}
@media (max-width: 800px) and (min-height: 900px) {
#servienvia-map-container { height: 75vh; }
} @supports (height: 1dvh) {
#servienvia-map-container { height: 65dvh; } }
@supports (height: 1dvh) and (min-height: 700px) {
#servienvia-map-container { height: 70dvh; }
}
@supports (height: 1dvh) and (min-height: 900px) {
#servienvia-map-container { height: 80dvh; }
}
#servienvia-panel {
order: 2;
flex-basis: auto;
height: auto;
border-right: none;
padding: 12px;
}
#servienvia-near-me-btn { padding: 6px 12px; }
#servienvia-near-me-btn .default-icon { width: 20px; height: 20px; flex-shrink: 0; }
.servienvia-list-item.active {
border-left: none;
border-top: 4px solid var(--servi-primary-color);
padding-left: 20px;
}
} .gm-style .gm-style-iw button.gm-ui-hover-effect,
.gm-style button.gm-ui-hover-effect[aria-label="Close"] {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
-webkit-tap-highlight-color: transparent;
}
.gm-style .gm-style-iw button.gm-ui-hover-effect:hover,
.gm-style .gm-style-iw button.gm-ui-hover-effect:focus,
.gm-style .gm-style-iw button.gm-ui-hover-effect:focus-visible,
.gm-style .gm-style-iw button.gm-ui-hover-effect:active {
background: transparent !important;
outline: none !important;
box-shadow: none !important;
} .servienvia-infowindow-content {
padding: 8px 10px; }
.servienvia-infowindow-content .sv-iw-media {
margin-bottom: 8px;  }
.servienvia-infowindow-content h4 {
margin: 0 0 10px;  }
.servienvia-infowindow-content .item-line {
margin: 6px 0; line-height: 1.35; }
.servienvia-infowindow-content .servienvia-directions-btn {
margin-top: 10px; }