/* Extracted from map.html inline <style> blocks (moved out for strict CSP).
   Order preserved: head-block rules first, then body-block rules (which
   intentionally override .fadeOut / @keyframes fadeClose). */

/* ---- was head <style> ---- */
.hidden {
    display: none;
}

.fadeOut {
    animation: fadeClose 2s;
}

@keyframes fadeClose {
    0% {
        display: none;
        top: 10;
        opacity: 1;
    }
    100% {
        display: none;
        top: -100px;
        opacity: 0;
    }
}

.store-number {
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    background-color: #0079c2;
    border-radius: 50%;
    font-size: 1.4rem;
}

.store2 {
    background: red;
    margin-left: 102%;
    margin-top: -4%;
}

.number2 {
    width: 45px;
    height: 43px;
    position: absolute;
    z-index: 10;
    margin-left: 10px;
    margin-top: 10px;
}

/* ---- was body <style> ---- */
.fadeIn {
    animation: fade 1s;
}

.fadeOut {
    animation: fadeClose 1s;
}

@keyframes fade {
    0% {
        top: -100px;
        opacity: 0;
    }
    100% {
        top: 10;
        opacity: 1;
    }
}

@keyframes fadeClose {
    0% {
        top: 10;
        opacity: 1;
    }
    100% {
        top: -100px;
        opacity: 0;
    }
}

/* ---- was inline style="" attributes in the markup ---- */
#slideout_tab {
    transition: all 0.6s ease;
}

/* ---- store list + Leaflet popup (were inline style="" in dataStationsSusco.js) ---- */
.store-list-logo   { width: 40%; }
.info-logo-sinopec { width: 25%; }
.info-logo-bangchak{ width: 20%; }
.info-logo-ptt     { width: 20%; }
.info-logo-susco   { width: 23%; }
.info-title   { border-bottom: 1px solid #0079c2; padding-bottom: 4px; }
.info-addr    { color: #a1a1a1; }
.info-divider { border-bottom: 1px solid #0079c2; margin-top: 4px; }
.nav-btn      { background-color: #0079c2; color: #fff; }