:root {
    --cassiopeia-color-primary: #000;
    --cassiopeia-color-link: #9e905e;
    --link-color: #045091;
    --link-color-rgb: 4, 80, 145;
    --cassiopeia-color-hover: #000;
    --link-hover-color: #9e905e;
    --link-hover-color-rgb: 158, 144, 94;
}
a {font-weight: 700;}

/* Header styling */
.container-header {
    box-shadow: 0 0 32px rgb(0 0 0 / 6%), 0 4px 8px rgb(0 0 0 / 16%);
    background-image: none;
    background-color: #fff;
}
.container-header .container-nav {
    padding-bottom: .5em;
}
.container-header .container-nav nav {
    margin-top: 0px;
}
.container-header .navbar-toggler {
    color: #045091;
    border: 1px solid #045091;
}

@media (min-width: 992px) {
 .container-header .container-nav nav {
    margin-left: auto;
    margin-right: auto;
 }
}

.metismenu.mod-menu .metismenu-item>a {font-weight: 600; color: #000;}
.metismenu.mod-menu .metismenu-item>a:hover {text-decoration: none;}
.metismenu.mod-menu .metismenu-item:hover {
  border: 2px solid #045091;
  border-radius: 10px;
}

/* Offcanvas menu styling */
@media (max-width: 991.98px) {
    .offcanvas {
        max-width: 80%;
   }
}
/*.offcanvas {
    background-color: var(--cassiopeia-color-primary);
}
.offcanvas.showing, .offcanvas.hiding, .offcanvas.show {
    border: 1px solid #ffa62e;
}
.offcanvas-header .btn-close {
   background-color: #ffa62e;
}
*/

/* Homepage styling */
#mod-custom111 {
  min-height: 100vh; 
  background-position: left center;
  background-size: cover;
}
.frontcenter {
  position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    padding: 20px;
    background: rgba(0,0,0,0.6);
}
.frontcenter button {
  background-color: #045091;
  color: #fff;
  border-radius: 10px;
  padding: 8px 30px;
  font-weight: 700;
  font-size: 1.5em;
}
.frontcenter button:hover {
  background-color: #fff;
  color: #045091;
}
.fronttext {
  font-family: var(--cassiopeia-font-family-headings);
  font-weight: var(--cassiopeia-font-weight-headings,700);
  color: white;
  /*text-transform: uppercase;*/
  margin: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  font-size: 3rem;
  transform: translate(-50%, -50%);
  text-align: center;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  border-radius: 10px;
  padding: 10px 20px;
  background: rgba(0,0,0,0.6);
}

/* Content styling */
h1 {
  background-color: #034074;
  color: #fff;
  padding: 15px;
  margin: 0 0 20px 0;
  border-radius: 5px;
}
.top-home {margin: 0}
h2 {
  background-color: #034882;
  color: #fff;
  padding: 15px;
  margin: 40px 0 20px 0;
  border-radius: 5px;
}
h3 {
  background-color: #045091;
  color: #fff;
  padding: 15px;
  margin: 40px 0 20px 0;
  border-radius: 5px;
}
h4 {
  background-color: #1d619c;
  color: #fff;
  padding: 15px;
  margin: 40px 0 20px 0;
  border-radius: 5px;
}

/*.photo-credit {
  margin-top: -10px;
  color: #333;
  font-size: 14px;
  font-style: italic;
  text-align: center;
}*/
.gygw {
  background-color: #000;
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/*remove icons from article info*/
span.icon-calendar::before {content: "";}
span.icon-user::before {content: "";}

/*article info in one line*/
dl.article-info {
  display: inline-flex;
  font-size: 0.8em;
  border-bottom: 1px solid grey;
}
dl.article-info a {
  color: black;
}
.author-block {
  padding: 30px 10px;
  font-size: 0.9em;
}
.author-block a {
  color: black;
  text-decoration: none;
}
.author-photo {
  padding-bottom: 20px;
}

/* Right sidebar styling */
/* body.wrapper-fluid .site-grid {
  grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,0%) minmax(0,30%) minmax(0,30%) minmax(0,40%) [main-end] minmax(0,1fr) [full-end]
}*/
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 70px;
  z-index: 0;
  border: solid 1px #045091;
  border-radius: 5px;
  padding: 10px;
  /*background-color: #e5edf4;*/
}
h3.sticky {
  margin: 0 0 20px 0;
}

/* Bottom styling 
.back-to-top-link {
    background-color: #010f6d;
    border: 2px solid #010f6d;
}
.back-to-top-link:hover {
    color: #010f6d;
    border: 2px solid #010f6d;
}*/

/* Fare calculatore */
.iframe-wrapper {
    position: relative;
    display: inline-block;
}
.cover-element-srt {
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    height: 220px;
    background-color: #9e905e;
    z-index: 2;
}
.cover-element-bts {
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    height: 50px;
    background-color: #9e905e;
    z-index: 2;
}
.cover-element-mrt {
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    height: 70px;
    background-color: #9e905e;
    z-index: 2;
}

/* Green & Gold Line */
  /* ── Reset & container ── */
  .bts-calc *{box-sizing:border-box;margin:0;padding:0}
  .bts-calc{font-family:'Segoe UI',Arial,sans-serif;max-width:580px;margin:2rem auto;padding:1.5rem;background:#fff;border-radius:14px;border:1px solid #dde8d8;box-shadow:0 2px 12px rgba(0,0,0,.06)}

  /* ── Header ── */
  .bts-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}
  .bts-header-text p{font-size:18px;font-weight:700;color:#1a7230;line-height:1.2,margin-bottom:14px}

  /* ── Line legend ── */
  .bts-legend{display:flex;gap:12px;margin-bottom:1rem;font-size:12px;flex-wrap:wrap}
  .bts-legend-item{display:flex;align-items:center;gap:5px}
  .bts-pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.02em;flex-shrink:0}
  .bts-pill.sukhumvit{background:#7AB420;color:#7AB420}
  .bts-pill.silom{background:#00807D;color:#00807D}
  .bts-pill.shared-green{background:linear-gradient(90deg,#7AB420 50%,#00807D 50%);color:#00807D}
  .bts-pill.gold{background:#c9960c;color:#c9960c}
  .bts-pill.future{background:#aaa;color:#aaa}

  /* ── Dropdowns row ── */
  .bts-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .bts-field label{font-size:13px;color:#555;display:block;margin-bottom:6px;font-weight:600}

  /* ── Custom searchable dropdown ── */
  .bts-select-wrap{position:relative}
  .bts-select-btn{width:100%;padding:9px 32px 9px 10px;border:1.5px solid #c5d9c5;border-radius:8px;font-size:13px;background:#f8fbf8;color:#111;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:40px;text-align:left;transition:border-color .15s;position:relative}
  .bts-select-btn:hover,.bts-select-btn.open{border-color:#1a7230}
  .bts-select-btn .arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;font-size:11px}
  .bts-select-btn .btn-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
  .bts-select-btn .btn-code{font-size:11px;color:#888;flex-shrink:0}

  .bts-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1.5px solid #1a7230;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:999;overflow:hidden}
  .bts-dropdown.open{display:block}
  .bts-search-wrap{padding:8px;border-bottom:1px solid #eee}
  .bts-search{width:100%;padding:7px 10px;border:1px solid #ccc;border-radius:6px;font-size:13px;outline:none}
  .bts-search:focus{border-color:#1a7230}
  .bts-options{max-height:240px;overflow-y:auto}
  .bts-option{padding:8px 10px;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .1s}
  .bts-option:hover,.bts-option.selected{background:#f0f7f0}
  .bts-option.hidden{display:none}
  .bts-option .opt-code{font-size:11px;color:#888;flex-shrink:0;min-width:38px}
  .bts-option .opt-name{flex:1}
  .bts-option.future-station .opt-name{color:#999}
  .bts-group-header{padding:6px 10px 3px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#bbb;background:#fafafa;border-bottom:1px solid #f0f0f0}
  .bts-no-results{padding:12px 10px;font-size:13px;color:#999;text-align:center;display:none}

  /* ── Result card ── */
  .bts-result{background:linear-gradient(135deg,#f0f7f0,#e8f4e8);border:1.5px solid #b8d9b8;border-radius:10px;padding:1.4rem;text-align:center;margin-top:4px}
  .bts-result .rl{font-size:11px;color:#5a8a5a;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-weight:600}
  .bts-result .amount{font-size:44px;font-weight:800;color:#1a7230;line-height:1}
  .bts-result .unit{font-size:13px;color:#6a9a6a;margin-top:4px}
  .bts-result hr{border:none;border-top:1px solid #c8e0c8;margin:12px 0}
  .bts-result .route{font-size:13px;color:#444;line-height:1.6}
  .bts-result .route strong{color:#1a7230}
  .bts-result .route .arrow-sep{color:#aaa;margin:0 6px}

  /* ── Fare breakdown (Gold Line) ── */
  .bts-breakdown{display:none;margin-top:12px;border-top:1px solid #c8e0c8;padding-top:12px;gap:10px;justify-content:center;flex-wrap:wrap}
  .bts-breakdown.visible{display:flex}
  .bts-breakdown-item{background:#fff;border:1px solid #d8e8d0;border-radius:8px;padding:8px 16px;text-align:center;min-width:110px}
  .bts-breakdown-item .bi-label{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
  .bts-breakdown-item .bi-amount{font-size:20px;font-weight:700}
  .bts-breakdown-item.green .bi-amount{color:#1a7230}
  .bts-breakdown-item.gold-fare .bi-amount{color:#c9960c}
  .bts-breakdown-item .bi-sub{font-size:10px;color:#aaa;margin-top:2px}

  /* ── Note ── */
  .bts-note{font-size:11px;color:#aaa;text-align:center;margin-top:10px}

  /* ── Scrollbar ── */
  .bts-options::-webkit-scrollbar{width:5px}
  .bts-options::-webkit-scrollbar-track{background:#f5f5f5}
  .bts-options::-webkit-scrollbar-thumb{background:#aaa;border-radius:3px}

  @media(max-width:440px){.bts-row{grid-template-columns:1fr}}

/* Yellow Line */
  .yl-calc{font-family:sans-serif;max-width:540px;margin:2rem auto;padding:1.5rem;background:#fff;border-radius:12px;border:1px solid #e0e0e0}
  .yl-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}
  .yl-dot{width:18px;height:18px;border-radius:50%;background:#f5c400;flex-shrink:0;border:2px solid #d4a800}
  .yl-calc h2{font-size:18px;font-weight:700;color:#b38a00;margin:0}
  .yl-calc p.sub{font-size:18px;font-weight:700;color:#b38a00;margin:0 0 1.5rem;padding-left:30px}
  .yl-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
  .yl-row label{font-size:13px;color:#555;display:block;margin-bottom:6px;font-weight:500}
  .yl-row select{width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:8px;font-size:14px;background:#fafafa;color:#111;appearance:auto}
  .yl-result{background:#fffdf0;border:1px solid #e8d87a;border-radius:10px;padding:1.25rem;text-align:center;margin-top:4px}
  .yl-result .label{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px}
  .yl-result .amount{font-size:40px;font-weight:700;color:#b38a00;margin:0}
  .yl-result .unit{font-size:13px;color:#666;margin:4px 0 0}
  .yl-result hr{border:none;border-top:1px solid #e8d87a;margin:12px 0}
  .yl-result .route{font-size:14px;color:#444}
  .yl-result .route strong{color:#b38a00}
  .yl-badge{display:inline-block;font-size:11px;background:#f5c400;color:#333;padding:2px 8px;border-radius:20px;font-weight:600;margin-bottom:6px}
  @media(max-width:420px){.yl-row{grid-template-columns:1fr}}

/* Pink Line */
  .pk-calc{font-family:sans-serif;max-width:560px;margin:2rem auto;padding:1.5rem;background:#fff;border-radius:12px;border:1px solid #e0e0e0}
  .pk-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}
  .pk-dot{width:18px;height:18px;border-radius:50%;background:#e91e8c;flex-shrink:0;border:2px solid #c0176e}
  .pk-calc h2{font-size:18px;font-weight:700;color:#c0176e;margin:0}
  .pk-calc p.sub{font-size:18px;font-weight:700;color:#c0176e;margin:0 0 1.5rem;padding-left:30px}
  .pk-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
  .pk-row label{font-size:13px;color:#555;display:block;margin-bottom:6px;font-weight:500}
  .pk-row select{width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:8px;font-size:14px;background:#fafafa;color:#111;appearance:auto}
  .pk-result{background:#fff5fa;border:1px solid #f5b8d8;border-radius:10px;padding:1.25rem;text-align:center;margin-top:4px}
  .pk-result .label{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px}
  .pk-result .amount{font-size:40px;font-weight:700;color:#c0176e;margin:0}
  .pk-result .unit{font-size:13px;color:#666;margin:4px 0 0}
  .pk-result hr{border:none;border-top:1px solid #f5b8d8;margin:12px 0}
  .pk-result .route{font-size:14px;color:#444}
  .pk-result .route strong{color:#c0176e}
  .pk-note{font-size:11px;color:#aaa;text-align:center;margin-top:10px}
  @media(max-width:420px){.pk-row{grid-template-columns:1fr}}


/* Ads styling */
.banner-top {display: flex; border: solid 1px lightgray;}
.banner-top-text {padding: 20px; display: flex; align-items: center;}
.banner-top-title {font-size: 2rem; padding-bottom: 20px;}
.banner-top-note {color: rgb(126, 140, 141);}
.banner-top-link {font-size: 1.7rem; font-weight: bold; text-align: center; padding-top: 20px;}
.banner-top-link a {text-decoration: none; margin-right: 15px;}

@media (max-width: 767.98px) {
  .banner-top {display: block;}
  .banner-top-title {font-size: 1.4rem; padding-bottom: 10px;}
  .banner-top-link {font-size: 1.2rem; font-weight: semibold; text-align: center; padding-top: 10px;}
  /*.banner-top-text {display: none;}*/
}