:root {
    --gp-pill-dark:       var(--text-color);;
    --gp-pill-soft:       var(--secondary-color);
    --gp-active-bright:   var(--secondary-color);
    --gp-text-on-dark:    #FFFFFF;
    --gp-tab-inactive-bg: #F6F6F6;
    --gp-tab-active-bg:   var(--text-color);
    --gp-card-border:     #D7D7D7;
    --gp-card-active-bg:  var(--secondary-color);
    --gp-card-active-border: var(--secondary-color);
    --gp-card-title:      var(--text-color);;
    --gp-card-text:       var(--text-color);;
}
.gp-tabs {
    display: flex;
    width: 100%;
    border: none;
    background: var(--gp-tab-inactive-bg);
    border-radius: 4px;
    overflow: hidden;
    flex-wrap: nowrap;
    margin-bottom: 30px;
}
.gp-tabs .nav-item { display: flex; }
.gp-tabs .nav-link {
    width: 100%;
    border: 0;
    border-radius: 0;
    padding: 14px 16px;
    font-weight: 500;
    letter-spacing: 0.04em;
    font-size: 15px;
    color: var(--gp-pill-dark);
    background: var(--gp-tab-inactive-bg);
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    text-align: center;
    font-family: 'Inter';
}
.gp-tabs .nav-link:hover { background: #ECECEC; }
.gp-tabs .nav-link.active {
    background: var(--gp-tab-active-bg);
    color: #fff;
}
 
/* ============ Map ============ */
.gp-map-wrap {
    position: relative;
    width: 100%;
    /* background: #000; */
    border-radius: 6px;
    overflow: hidden;
}
.gp-map-wrap svg { display: block; width: 100%; height: auto; }
 
.gp-map-wrap svg [data-pill="true"] {
    cursor: pointer;
    transition: fill 0.2s ease;
    outline: none;
}
.gp-map-wrap svg [data-text="true"] {
    transition: fill 0.2s ease;
    pointer-events: none;
}
.gp-map-wrap svg [data-pill="true"].is-active {outline: none;stroke: var(--secondary-color);stroke-width: 2px;}
.gp-map-wrap svg [data-text="true"].is-active {fill: var(--secondary-color);}
.gp-map-wrap svg [data-pill="true"].is-hidden,
.gp-map-wrap svg [data-text="true"].is-hidden { display: none; }
 

.gp-map-wrap svg {
    padding-bottom: 30px;
}
/* ============ Address grid ============ */
.gp-addresses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 32px;
}
.gp-card a {
    text-decoration: none;
}

.gp-card {
    padding: 28px 28px 28px 28px;
    position: relative;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    scroll-margin: 80px;
}
 
.gp-card { border-right: 1px dashed var(--gp-card-border); border-bottom: 1px dashed var(--gp-card-border); }
.gp-card:nth-child(3n) { border-right: 0; }                 /* last column */
.gp-card.is-last-row     { border-bottom: 0; }              /* last row */
 
.gp-card-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--gp-card-title);
    margin: 0 0 14px 0;
    letter-spacing: -0.01em;
}
.gp-card-body {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--gp-card-text);
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 15px;
}
.gp-card-icon {
    flex-shrink: 0;
    width: 16px; height: 16px;
    margin-top: 4px;
    color: var(--gp-card-title);
}
 
.gp-card.is-active {
    background: var(--gp-card-active-bg);
    box-shadow: inset 0 0 0 2px var(--gp-card-active-border);
    border-radius: 6px;
    border-color: transparent !important;
}
.gp-card.is-active .gp-card-title { color: var(--gp-pill-dark); }
 
.gp-card.is-hidden { display: none; }
 
.gp-empty {
    padding: 32px;
    color: #999;
    text-align: center;
    font-style: italic;
}
 
@media (max-width: 992px) {
    .gp-tabs .nav-link { font-size: 11px; padding: 12px 8px; }
    .gp-addresses { grid-template-columns: repeat(2, 1fr); }
    .gp-card:nth-child(3n) { border-right: 1px dashed var(--gp-card-border); }
    .gp-card:nth-child(2n) { border-right: 0; }
    .gp-card-title { font-size: 18px; }
    .gp-card-body { font-size: 14px; }
}
@media (max-width: 576px) {
    .gp-tabs { flex-wrap: wrap; }
    .gp-tabs .nav-item { flex: 1 0 50%; }
    .gp-tabs .nav-link { font-size: 10px; padding: 10px 6px; }
 
    /* ===== Mobile slider mode ===== */
    .gp-slider { position: relative; }
 
    /* Horizontal scroll-snap track: each "page" is a slot wide as the viewport */
    .gp-addresses {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;        /* Firefox */
        gap: 0;
        grid-template-columns: none;  /* override desktop grid */
        margin-top: 16px;
    }
    .gp-addresses::-webkit-scrollbar { display: none; } /* Chrome/Safari */
 
    /* Each "page" wraps 3 cards stacked vertically */
    .gp-slider-page {
        flex: 0 0 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex;
        flex-direction: column;
        padding: 0 4px;
    }
    .gp-slider-page .gp-card {
        border-right: 0 !important;
        border-bottom: 1px dashed var(--gp-card-border);
    }
    .gp-slider-page .gp-card:last-child {
        border-bottom: 0;
    }
 
    .gp-card-title { font-size: 17px; }
 
    /* Arrow controls */
    .gp-slider-controls {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        padding: 16px 4px 4px;
    }
    .gp-slider-btn {
        /* width: 44px; */
        /* height: 44px; */
        /* border-radius: 50%; */
        border: none;
        background: transparent;
        /* color: var(--gp-pill-dark); */
        /* display: inline-flex; */
        /* align-items: center; */
        /* justify-content: center; */
        cursor: pointer;
        /* transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease; */
        /* padding: 0; */
    }
    
    .gp-slider-btn:disabled,
    .gp-slider-btn[aria-disabled="true"] {
        opacity: 0.35;
        cursor: default;
    }
    .gp-slider-btn:disabled:hover,
    .gp-slider-btn[aria-disabled="true"]:hover {
        background: transparent;
        color: var(--gp-pill-dark);
    }
}
 
/* On desktop / tablet, hide slider controls (CSS grid layout takes over) */
@media (min-width: 577px) {
    .gp-slider-controls { display: none; }
    .gp-slider-page { display: contents; } /* Pages collapse — children become grid items */
}