.paginalink { color:#00B6DD; font-weight: 700; }

/* - ROUTES - */

        .routes-info-section {
            background: var(--primary-color);
            background-image: radial-gradient(circle at center, rgba(255,255,255,0.25) 2px, transparent 2px);
            background-size: 25px 25px;
            color: var(--text-dark);
            padding: 6rem 5% 6rem;
            text-align: center;
            margin-top: 2rem;
            transform: skewY(-2deg);
        }

        .routes-info-content {
            max-width: 1050px; margin: 0 auto;
            background: rgba(255,255,255,0.25);
            padding: 1rem; border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transform: skewY(2deg);
            
        }

        .routecontainer {
       
            /*max-width: 900px;*/
           width: 100%;
        }

        .routecontainer h1 {
            text-align: center;
            color: var(--secondary-color);
            margin-bottom: 20px;
        }
        
        
        
/* Basis styling voor de route kaart */

.trip-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);

    text-align: left; /* Forceert alles naar links */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Voor flex-items */    
    
}

.trip-card-done {
    background: #c0c0c0;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);

    text-align: left; /* Forceert alles naar links */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Voor flex-items */    
    
}



/* Header: Plaats bestemming en datum onder elkaar op mobiel */

.trip-header {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 12px;

}

.trip-info {
    width: 100%;
}

.destination {
    font-weight: bold;
    font-size: 1.2rem;
    color: #333;
}

.date-tag {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
}

/* De opstapplaatsen lijst */

.boarding-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}


.boarding-item {
    border-bottom: 1px dashed #eee;
    font-size: 0.95rem;
    line-height: 1.4;
    
    display: flex;
    flex-wrap: wrap; /* Zorgt dat de kaart-link naar de volgende regel gaat op smalle schermen */
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    text-align: left;    
    
}

.boarding-item em {
    font-style: italic;
    font-weight: bold;
    color: #ff5722; /* Of een andere accentkleur */
    min-width: 50px;
    display: inline-block;
}



.boarding-item:last-child {
    border-bottom: none;
}

/* De 'Bekijk kaart' linkjes subtieler maken */

.map-link {
    display: inline-block;

    color: #007bff;
    text-decoration: none;

    background: #f0f7ff;
    padding: 2px 8px;
    border-radius: 4px;

    margin-left: 0;
    font-size: 0.75rem;
}




/* De 'Boek nu' knop: Maak hem groot en opvallend */

.trip-actions {
    margin-top: 15px;
    width: 100%;
}


.boek-knop {
    display: block;
    width: 100%; 
    background-color: #ff5722; 
    color: white;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    font-size: 1.1rem;
    box-shadow: 0 4px 0 #e64a19;
    transition: transform 0.1s;
}




.boek-knop:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #e64a19;
}      

/* Styling voor de 'knop' die het menu opent */
.trip-card .details-toggle {
    padding: 10px;
    cursor: pointer;
    background-color: #f0f0f0;
    border-radius: 5px;
    font-weight: bold;
    list-style: none; /* Verbergt het standaard pijltje in sommige browsers */
    margin: 10px 0;
    transition: background 0.3s ease;
    margin-top:30px;
}

.trip-card .details-toggle:hover {
    background-color: #e2e2e2;
}

/* Voeg een pijltje toe dat draait bij openen (optioneel) */
.trip-card .details-toggle::before {
    content: "▶ ";
    display: inline-block;
    transition: transform 0.2s;
}

.trip-card details[open] .details-toggle::before {
    transform: rotate(90deg);
}

.trip-card .details-content {
    padding: 10px;
    border-left: 2px solid #ccc;
    margin-bottom: 15px;
}  





 /* Basis styling voor de footer */
        .site-footer {
            background-color: #f8f9fa; /* Lichtgrijs/wit voor een schone look */
            color: #333;
            padding: 40px 20px;
            border-top: 2px solid #e0e0e0;
            line-height: 1.6;
        }

        .site-footer .footer-container {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 30px;
        }

        .site-footer .footer-section {
            flex: 1;
            min-width: 250px;
        }

        .site-footer .footer-section h4 {
            color: #d32f2f; /* Een opvallende kleur, bijv. rood voor actie/korting */
            margin-bottom: 15px;
            text-transform: uppercase;
            font-size: 14px;
            letter-spacing: 1px;
        }

        .site-footer .footer-section p, .site-footer .footer-section a {
            font-size: 14px;
            color: #555;
            text-decoration: none;
            margin: 5px 0;
            display: block;
        }

        .site-footer .footer-section a:hover {
            color: #000;
            text-decoration: underline;
        }

        .site-footer .footer-bottom {
            width: 100%;
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
            font-size: 12px;
            color: #888;
        }

        /* Mobiele aanpassing */
        @media (max-width: 600px) {
            .site-footer .footer-container {
                flex-direction: column;
                text-align: center;
            }
        }



/* bespaarmodule */


        :root {
            --bespaarsg-blue: #00B6DD;
            --bespaarsg-orange: #ff8800;
            --bespaarsg-green: #2ecc71;
            --bespaarbg-light: #f8f9fa;
            --bespaarnl-red: #e74c3c;
        }

.bespaarmodule { padding: 50px 30px 50px 30px; }

        .bespaarmodule .compact-calc {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 12px 35px rgba(0,0,0,0.2);
            border: 2px solid var(--bespaarsg-blue);
            overflow: hidden;

        }

        .bespaarmodule .mini-header { 
            background: var(--bespaarsg-blue); color: white; 
            padding: 15px 20px; text-align: center;
        }
        .bespaarmodule .mini-header h2 { margin: 0; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; }

        .bespaarmodule .result-bar {
            background: var(--bespaarbg-light); padding: 20px; text-align: center;
            border-bottom: 4px solid var(--bespaarsg-orange);
            min-height: 80px;
            display: flex; align-items: center; justify-content: center;
        }

        .bespaarmodule #btn-calc {
            display: none; 
            background: var(--bespaarsg-orange); color: white; border: none;
            padding: 18px 35px; font-size: 18px; font-weight: 900;
            border-radius: 50px; cursor: pointer;
            animation: pulse-orange 2s infinite, slideIn 0.3s ease-out;
            text-transform: uppercase;
        }

        .bespaarmodule .instruction-header { padding: 15px 25px 0 25px; text-align: center; }
        .bespaarmodule .instruction-header h3 {
            margin: 0; font-size: 16px; color: var(--bespaarsg-blue);
            text-transform: uppercase; letter-spacing: 0.5px;
            border-bottom: 1px solid #eee; padding-bottom: 8px;
        }

        @keyframes pulse-orange {
            0% { transform: scale(1); box-shadow: 0 4px 0 #d35400; }
            50% { transform: scale(1.03); box-shadow: 0 6px 15px rgba(255, 136, 0, 0.4); }
            100% { transform: scale(1); box-shadow: 0 4px 0 #d35400; }
        }

        .bespaarmodule #total-flash { display: none; width: 100%; animation: slideIn 0.4s ease-out; }

        .bespaarmodule .comparison-summary {
            display: flex; justify-content: space-around; align-items: center;
            margin-bottom: 15px; padding: 15px; background: #fff; border-radius: 10px; border: 1px solid #eee;
        }

        .bespaarmodule .summary-item { font-size: 16px; line-height: 1.5; flex: 1; }
        .bespaarmodule .summary-item b { font-size: 22px; display: block; margin-top: 5px; }

        .bespaarmodule .big-price {
            font-size: 52px; color: var(--bespaarsg-green); font-weight: 900; display: block;
            line-height: 1; margin: 10px 0;
        }

        .bespaarmodule #ticket-feedback { margin: 15px 0; padding: 15px; border-radius: 10px; font-weight: bold; border: 2px solid transparent; }
        .bespaarmodule .status-win { background: #d4edda; color: #155724; border-color: #c3e6cb; }
        .bespaarmodule .status-wait { background: #fff3cd; color: #856404; border-color: #ffeeba; }

        .bespaarmodule .btn-book {
            background: var(--bespaarsg-green); animation: pulse-orange 1.5s infinite;
            box-shadow: 0 4px 0 #27ae60; margin-top: 10px;
            padding: 15px 30px; color: white; font-weight: 900; border-radius: 50px;
            display: inline-block; text-decoration: none;
        }

        .bespaarmodule .product-list-compact { padding: 15px 25px; }
        .bespaarmodule .row-mini { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
        
        /* Label line met DE prijs en Winst naast elkaar */
        .bespaarmodule .label-line { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: bold; margin-bottom: 8px; }
        .bespaarmodule .data-points { display: flex; gap: 15px; }
        .bespaarmodule .de-price-tag { color: #666; font-weight: normal; font-size: 13px; }
        .bespaarmodule .save-val { color: var(--bespaarsg-green); font-size: 15px; }
        .bespaarmodule .perc-tag { color: var(--bespaarsg-orange); font-size: 11px; background: #fff5e6; padding: 2px 5px; border-radius: 4px; vertical-align: middle; }

        .bespaarmodule .input-container { position: relative; flex: 1; }
        .bespaarmodule .input-container::before { content: '€'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #888; font-weight: bold; font-size: 14px; }
        
        .bespaarmodule .num-input { 
            width: 100%; padding: 8px 8px 8px 25px; border: 1px solid #ccc; border-radius: 6px; 
            font-size: 16px; font-family: inherit; box-sizing: border-box; outline: none;
        }
        .bespaarmodule .num-input:focus { border-color: var(--bespaarsg-blue); box-shadow: 0 0 5px rgba(0,74,153,0.1); }

        .bespaarmodule .btn-recalc {
            margin-top:10px; background:#666; box-shadow: 0 4px 0 #333; 
            padding: 10px 20px; font-size: 12px; color: white; border: none; 
            border-radius: 50px; cursor: pointer; text-transform: uppercase; font-weight: bold;
        }
        @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
   
   
   
/* Bestemming */ 

	.hoffmann {text-align: left; } 
    .hoffmann h1 { color: var(--secondary-color); border-bottom: 2px solid #0056b3; padding-bottom: 10px; }
    .hoffmann h2 { color: #2c3e50; }
    .hoffmann h3 { color: #d9534f; margin-top: 25px; }
    .hoffmann .highlight { background-color: #f0f7fb; padding: 15px; border-left: 5px solid #0056b3; margin: 15px 0; }
    .hoffmann .tips-list { list-style-type: none; padding: 0; }
    .hoffmann .tips-list li { margin-bottom: 12px; padding-left: 35px; position: relative; }
    .hoffmann .icon { position: absolute; left: 0; font-size: 1.2em; }
    .hoffmann .disclaimer { font-size: 0.9em; background-color: #fff3f3; padding: 15px; border: 1px solid #ebccd1; border-radius: 5px; margin-top: 30px; }
    .hoffmann .button-container { text-align: center; margin: 30px 0; }
    .hoffmann .button { background-color: #0056b3; color: white; padding: 12px 25px; text-decoration: none; border-radius: 5px; font-weight: bold; display: inline-block; }
    .hoffmann .button:hover { background-color: #004494; }
    .hoffmann .footer { font-weight: bold; margin-top: 30px; color: var(--secondary-color); border-top: 1px solid #ddd; padding-top: 15px; }