/**************************************************************************
 * Pagina
 **************************************************************************/

body {

    background: #f5f7fa;

}

/**************************************************************************
 * Header
 **************************************************************************/

h1 {

    font-weight: 700;

    color: #0d6efd;

}

/**************************************************************************
 * Cards
 **************************************************************************/

.station-card {

    background: #fff;

    border-radius: 15px;

    box-shadow: 0 4px 12px rgba(0,0,0,.08);

    padding: 25px;

    margin-bottom: 25px;

}

/**************************************************************************
 * Zoekveld
 **************************************************************************/

#station-search {

    border-radius: 50px;

    padding: 14px 22px;

    font-size: 18px;

    border: 2px solid #dee2e6;

    transition: .2s;

}

#station-search:focus {

    border-color: #0d6efd;

    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);

}

/**************************************************************************
 * Stationlijst
 **************************************************************************/

.station-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 20px;

    margin-bottom: 10px;

    background: #ffffff;

    border-radius: 12px;

    transition: .2s;

    cursor: pointer;

}

.station-item:hover {

    background: #0d6efd;

    color: #fff;

    transform: translateY(-2px);

}

.station-item a {

    color: inherit;

    text-decoration: none;

    width: 100%;

}

/**************************************************************************
 * Detail header
 **************************************************************************/

.station-header {

    background: linear-gradient(135deg,#0d6efd,#4da3ff);

    color: #fff;

    border-radius: 18px;

    padding: 30px;

    margin-bottom: 25px;

    box-shadow: 0 5px 15px rgba(0,0,0,.15);

}

.station-header h2 {

    margin-bottom: 10px;

    font-weight: bold;

}

/**************************************************************************
 * Informatie
 **************************************************************************/

.station-info {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 20px;

}

.station-info .info-box {

    background: rgba(255,255,255,.15);

    border-radius: 10px;

    padding: 12px 18px;

    min-width: 170px;

}

/**************************************************************************
 * Tabellen
 **************************************************************************/

.table {

    margin-bottom: 0;

}

.table thead {

    background: #0d6efd;

    color: white;

}

.table-hover tbody tr:hover {

    background: rgba(13,110,253,.08);

}

/**************************************************************************
 * Badges
 **************************************************************************/

.badge {

    font-size: .85rem;

}

/**************************************************************************
 * Voorzieningen
 **************************************************************************/

.facility-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));

    gap: 15px;

}

.facility-item {

    background: #fff;

    border-radius: 12px;

    padding: 18px;

    text-align: center;

    box-shadow: 0 3px 8px rgba(0,0,0,.08);

    transition: .2s;

}

.facility-item:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 20px rgba(0,0,0,.15);

}

.facility-item i {

    font-size: 28px;

    color: #0d6efd;

    margin-bottom: 10px;

}

/**************************************************************************
 * Kaart
 **************************************************************************/

#station-map {

    height: 350px;

    border-radius: 15px;

    overflow: hidden;

}

/**************************************************************************
 * Spinner
 **************************************************************************/

.spinner-border {

    width: 3rem;

    height: 3rem;

}

/**************************************************************************
 * Responsive
 **************************************************************************/

@media (max-width:768px) {

    .station-header {

        padding:20px;

    }

    .station-info {

        flex-direction:column;

    }

    .facility-grid {

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:576px) {

    .facility-grid {

        grid-template-columns:1fr;

    }

}

.track-grid{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:15px;

}

.track-badge{

display:inline-block;

text-decoration:none;

background:#0d6efd;

color:#fff;

padding:8px 16px;

border-radius:25px;

margin:4px;

font-weight:bold;

transition:.2s;

}

.track-badge:hover{

background:#084298;

color:#fff;

transform:scale(1.05);

}

.trainseries-grid{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:15px;

}

.trainseries{

display:flex;

align-items:center;

gap:8px;

padding:10px 18px;

border-radius:30px;

text-decoration:none;

font-weight:600;

transition:.25s;

}

.trainseries:hover{

transform:translateY(-2px);

text-decoration:none;

}

.trainseries.intercity{

background:#0057b8;

color:white;

}

.trainseries.sprinter{

background:#ffc107;

color:#212529;

}

.trainseries strong{

margin-left:6px;

font-size:16px;

}