/* ROUTE PAGE WRAPPER */
.tp-route-page {
  font-family: 'Arial', sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: #333;
}

/* HEADER / HERO */
.tp-route-header {
  text-align: center;
  margin-bottom: 40px;
}
.tp-route-header img.tp-route-hero {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px;
}
.tp-route-header h1 {
  font-size: 2rem;
  margin-bottom: 10px;
}
.tp-route-header p.tp-route-tagline {
  font-size: 1.1rem;
  color: #666;
}

/* MATCH SCORE */
.tp-route-score {
  margin-bottom: 40px;
}
.tp-score-label {
  font-weight: bold;
  margin-bottom: 6px;
}
.tp-score-bar {
  background: #eee;
  border-radius: 12px;
  height: 20px;
  width: 100%;
  overflow: hidden;
}
.tp-score-fill {
  background: #4caf50;
  height: 100%;
  width: 0;
  transition: width 0.5s ease-in-out;
  border-radius: 12px;
}

/* ROUTE OVERVIEW / DAG CARDS */
.tp-route-overview h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.tp-route-days {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.tp-day-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 15px;
  flex: 1 1 calc(33.333% - 20px);
  min-width: 250px;
  transition: transform 0.3s ease;
}
.tp-day-card:hover {
  transform: translateY(-5px);
}
.tp-day-number {
  font-weight: bold;
  margin-bottom: 10px;
}
.tp-day-img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
  max-height: 300px;
}
.tp-day-title {
  font-weight: bold;
  margin-bottom: 6px;
}

/* ROUTE FACTS */
.tp-route-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 40px 0;
}
.tp-fact {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  flex: 1 1 150px;
  text-align: center;
}

/* HIGHLIGHTS */
.tp-route-highlights h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.tp-highlights-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.tp-highlight {
  flex: 1 1 200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tp-highlight:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.tp-highlight img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.tp-highlight span {
  display: block;
  padding: 10px;
  font-weight: 500;
}

/* CTA BUTTON */
.tp-route-cta {
  text-align: center;
  margin: 40px 0;
}
.tp-book-btn {
  background: #ff6f61;
  color: #fff;
  padding: 15px 30px;
  font-size: 1.2rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.tp-book-btn:hover {
  background: #ff3b2f;
}

/* SIMILAR ROUTES */
.tp-similar-routes h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.tp-similar-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.tp-similar-card {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 15px;
  flex: 1 1 250px;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease;
}
.tp-similar-card:hover {
  background: #e0e0e0;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .tp-day-card, .tp-highlight, .tp-similar-card {
    flex: 1 1 calc(50% - 15px);
  }
}
@media (max-width: 600px) {
  .tp-day-card, .tp-highlight, .tp-similar-card {
    flex: 1 1 100%;
  }
}

/* PLANNER PAGE */
/* HERO */

.tt-hero{

position:relative;

height:70vh;
min-height:550px;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

background-image:url('http://localhost/tt/wp-content/uploads/2026/03/hero-travelthailand-reisplanner.jpg');
background-size:cover;
background-position:center;

color:white;

}


/* overlay */

.tt-hero-overlay{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

/* turquoise overlay */

background:linear-gradient(
rgba(105,187,199,0.8),
rgba(0,0,0,0.34)
);

}


/* content */

.tt-hero-content{

position:relative;
z-index:2;

max-width:700px;
padding:20px;

}


.tt-hero h1{

font-size:52px;
line-height:1.2;
margin-bottom:20px;

}


.tt-hero p{

font-size:20px;
margin-bottom:30px;

}


/* CTA */

.tt-cta{

background:#F0887F;
color:white;

border:none;

padding:18px 36px;

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

border-radius:10px;

cursor:pointer;

transition:0.25s;

}


.tt-cta:hover{

transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,0.2);

}


/* trust */

.tt-trust{

margin-top:15px;
font-size:14px;
opacity:0.9;

}


/* planner */

.tp-intro {


/*padding:100px 20px;
background:#f7fafb;*/

}

/* Disclaimer Styling */
.disclaimer-box {
    border: 1px solid #ddd;       /* subtiel lichtgrijs kader */
    background-color: #f9f9f9;    /* zachte achtergrond */
    padding: 12px 16px;           /* binnenruimte */
    margin-top: 20px;             /* afstand tot de planner */
    font-size: 13px;          /* iets kleiner lettertype */
    color: #555;                  /* subtiele tekstkleur */
    border-radius: 6px;           /* afgeronde hoeken */
    line-height: 1.5;
}


/* Stijl voor korte intro */





/**** THAILAND ROUTEPLANNER *****/
.tp-route { max-width:800px; margin:0 auto; padding:20px; }
.tp-route h1 { font-size:28px; margin-bottom:15px; }
.tp-match { font-weight:bold; color:#1a7f37; margin-bottom:8px; }
.tp-badges { margin-bottom:20px; }
.tp-badge { display:inline-block; background:#f2f2f2; padding:6px 10px; margin-right:6px; margin-bottom:6px; border-radius:6px; font-size:14px; }
.tp-step { display:none; opacity:0; transform:translateX(20px); transition:.25s; }
.tp-step.active { display:block; opacity:1; transform:translateX(0); }
.tp-step button { margin-top:20px; margin-right:10px; }
.tp-progress { width:100%; height:8px; background:#eee; border-radius:6px; margin-bottom:30px; overflow:hidden; }
.tp-progress-bar { height:100%; width:0%; background:#1a7f37; transition:width .3s ease; }
.tp-options { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.tp-card { border:2px solid #eee; border-radius:10px; padding:20px; text-align:center; cursor:pointer; font-size:22px; transition:.2s; }
.tp-card span { display:block; margin-top:8px; font-size:16px; }
.tp-card:hover { border-color:#1a7f37; }
.tp-card.selected { border-color:#1a7f37; background:#f5fff6; }
.tp-steps-indicator { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.tp-step-ind { text-align:center; flex:1; }
.tp-step-ind span { display:block; width:32px; height:32px; line-height:32px; border-radius:50%; background:#ddd; margin:0 auto 5px; font-weight:600; }
.tp-step-ind.active span { background:#1a7f37; color:#fff; }
.tp-step-ind.active { color:#1a7f37; font-weight:600; }
.tp-results { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; }
.tp-route-card { border:1px solid #eee; padding:20px; border-radius:10px; background:#fff; }
.tp-route-label { font-size:13px; color:#1a7f37; font-weight:bold; margin-bottom:8px; }
.tp-wizard-wrapper { padding: 72px 12px 140px; border-radius: 10px; margin: 72px 0; background-color: #f5f5f5;}
.tp-intro { text-align:center; }
.tp-intro-image { width:100%; border-radius:12px; margin-bottom:20px; }
.tp-start-btn { background:#1a7f37; color:white; border:none; padding:14px 28px; border-radius:8px; font-size:18px; cursor:pointer; }
.tp-wizard-card { background:#fff; border-radius:14px; padding:40px; max-width:700px; margin:40px auto; box-shadow:0 10px 30px rgba(0,0,0,0.08); }
@media(max-width:768px){ .tp-options{ grid-template-columns:1fr; } .tp-card{ font-size:26px; padding:24px; } .tp-results{ grid-template-columns:1fr; } }
.tp-progress.hidden, .tp-steps-indicator.hidden, #tp-wizard.hidden { display:none; }
.tp-step button { background:#1a7f37; color:#fff; border:none; padding:12px 24px; border-radius:8px; font-size:16px; cursor:pointer; transition:background 0.3s ease, transform 0.2s ease; margin-top:20px; margin-right:10px; display:inline-block; }
.tp-step button:hover { background:#145a27; transform:translateY(-2px); }
.tp-step button:active { transform:translateY(0); }
.tp-prev { background:#eee; color:#1a7f37; }
.tp-prev:hover { background:#ccc; }