/* =========================
   NEAREST STATIONS
========================= */
.nearest-stations-section{
    color: black;
}

.nearest-description-useful{
    margin-bottom: 30px;
}




.nearest-stations-section {
    margin-top: 40px;
    margin-bottom: 60px;
    text-align: center;
}

.nearest-description {
    opacity: 0.8;
    margin-bottom: 20px;
}

.nearest-btn {

    background: #2563eb;
    border: none;

    padding: 12px 22px;

    border-radius: 8px;

    color: white;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: all .25s ease;
}

.nearest-btn:hover {
    background: #1d4ed8;
}

.nearest-stations-wrapper {
    margin-top: 35px;
}

/* grid */

.nearest-stations-list {

    display: grid;

    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));

    gap: 22px;

}

/* station card */

.station-card {

    background: var(--card-bg);
    backdrop-filter: blur(12px);

    border: 1px solid var(--border-color);

    border-radius: 16px;

    padding: 24px;

    text-align: center;

    transition: all .25s ease;

}

.station-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;

}

.station-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.station-distance {
    font-size: 14px;
    color: #22c55e;
    font-weight: 600;
}

.station-address {
    font-size: 13px;
    opacity: 0.75;
    margin-top: 6px;
}

.nearest-map-wrapper {
    margin-top: 40px;
}

.nearest-map-wrapper{

    width:calc(100%);
    margin:40px auto;

    padding:12px;

    border-radius:20px;

    background:rgb(33, 52, 72);

    border:1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(14px);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,255,255,0.04) inset;
}

#nearest-map,
#station-map{

    width:100%;
    height:60vh;

    border-radius:14px;

    overflow:hidden;

    /* лек вътрешен ефект */
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06);
}



.station-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.station-logo {
    height: 22px;
}

/* =========================
   TOOLS FLEX SECTION
========================= */

.tools-section {

    margin-top: 60px;

    display: flex;

    gap: 40px;

    align-items: stretch;

    flex-wrap: wrap;

}

/* cards */

.tool-card {

    flex: 1;

    min-width:
            320px;

    backdrop-filter: blur(14px);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    padding: 35px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;

    transition: all .35s ease;

}

.tool-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);

}

.section-title-useful,
.calculator-description-useful{
    color: white;
    margin-bottom: 30px;
}

.station-name{
    color: white;
}

/* =========================
   CALCULATOR GRID
========================= */

.calculator-grid {

    display: grid;

    grid-template-columns:180px 1fr;

    gap: 14px 20px;

    margin-bottom: 25px;

    align-items: center;

}

.calculator-description {
    margin-bottom: 20px;
}

.input-group {
    display: contents;
}

.input-group label {

    font-size: 14px;

    opacity: 0.85;

    color: var(--text-color);

}

/* inputs */

.input-group input {

    width: 100%;

    padding: 12px 14px;

    border-radius: 10px;

    border: 1px solid var(--border-color);

    background: var(--input-bg);

    color: var(--text-color);

    font-size: 15px;

    transition: all .25s ease;

}

.input-group input:focus {

    outline: none;

    border: 1px solid #3b82f6;

    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);

}

/* button */

#calculate-btn {

    margin-top: 10px;

    width: 180px;

}

/* result */

.fuel-result {

    margin-top: 20px;

    padding: 18px;

    border-radius: 12px;

    background: rgba(34, 197, 94, 0.08);

    border: 1px solid rgba(34, 197, 94, 0.25);

    color: var(--text-color);

    font-size: 15px;

    line-height: 1.7;

    opacity: 0;

    transform: translateY(10px);

    transition: all .35s ease;

}

.fuel-result.show {

    opacity: 1;

    transform: translateY(0);

}

/* =========================
   CHECK BUTTONS
========================= */

.check-links {

    margin-top: 20px;

    display: flex;

    flex-direction: column;

    gap: 15px;

}

.check-card {

    display: block;

    padding: 16px;

    border-radius: 10px;

    background: rgba(37, 99, 235, 0.15);

    border: 1px solid rgba(37, 99, 235, 0.4);

    text-decoration: none;

    color: var(--text-color);

    font-weight: 600;

    transition: all .25s ease;

}

.check-card:hover {

    background: rgba(37, 99, 235, 0.25);

    transform: translateX(4px);

}

body.light-theme .fuel-result {

    background: rgba(34, 197, 94, 0.12);

    border: 1px solid rgba(34, 197, 94, 0.35);

}

/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

    .calculator-grid {
        grid-template-columns:1fr;
    }

}

/* =========================
   TRIP CALCULATOR
========================= */

.trip-section {

    margin-top: 80px;

    text-align: center;

}

.trip-description {

    opacity: 0.8;

    margin-bottom: 25px;

}

.trip-card {

    max-width: 720px;

    margin: auto;

    padding: 35px;

    border-radius: 18px;

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    backdrop-filter: blur(12px);

}

.trip-grid {

    display: grid;

    grid-template-columns:1fr 1fr;

    gap: 20px;

    margin-bottom: 25px;

}

.trip-result {

    margin-top: 20px;

    padding: 18px;

    border-radius: 12px;

    background: rgba(34, 197, 94, 0.08);

    border: 1px solid rgba(34, 197, 94, 0.25);

    font-size: 15px;

}

@media (max-width: 700px) {

    .trip-grid {
        grid-template-columns:1fr;
    }

}