/* =========================================================
   Swift Transit — custom glue CSS on top of the real GlobeFarer
   theme/plugin stylesheets (copied locally from the reference
   demoindex.html build). Only covers the bits the theme CSS can't:
   the hero slider (revslider replaced with a lightweight fade
   slider) and the side-area drawer toggle state.
   ========================================================= */

/* ---------- Kill theme's JS-computed header-offset padding (no WP header-height JS running) ---------- */
#qodef-page-inner,
#qodef-page-outer,
#qodef-page-content { padding-top: 0 !important; margin-top: 0 !important; }

/* ---------- Header chrome (explicit layout; ported theme JS not present) ---------- */
#qodef-page-header {
  position: fixed !important; top: 0; left: 0; width: 100%; height: auto;
  background: transparent !important; z-index: 1000; transition: background .35s ease, box-shadow .35s ease;
  border-bottom: 1px solid rgba(255,255,255,.5);
}
body.qodef-header--sticky-display #qodef-page-header { border-bottom-color: transparent; }
#qodef-page-header-inner {
  display: flex !important; align-items: center; justify-content: space-between;
  padding: 24px 40px !important; height: auto !important;
}
.qodef-header-logo-link { padding: 0 !important; display: inline-flex; align-items: center; flex: none; }
.qodef-header-logo-image { height: 34px; width: auto; }
.qodef-header-logo-image.qodef--dark,
.qodef-header-logo-image.qodef--light { display: none; }
.qodef-header-logo-image.qodef--main { display: inline-block; }

.qodef-header-navigation { display: flex; align-items: center; flex: 1; justify-content: center; }
.qodef-header-navigation > ul.menu {
  display: flex !important; align-items: center; gap: 42px; list-style: none; margin: 0; padding: 0;
}
.qodef-header-navigation > ul.menu > li > a {
  color: #fff; font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 15px;
  text-decoration: none; transition: color .25s ease; white-space: nowrap;
}
.qodef-header-navigation > ul.menu > li > a:hover,
.qodef-header-navigation > ul.menu > li.current-menu-item > a { color: #f7c600; }

.qodef-widget-holder { display: flex; align-items: center; gap: 22px; }
.qodef-order-tracking { position: relative; }
.qodef-m-opener { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #fff; }
.qodef-m-opener svg { fill: currentColor; width: 16px; height: 20px; }
.qodef-m-opener-text { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.qodef-order-tracking .qodef-m-dropdown {
  position: absolute; top: calc(100% + 18px); right: 0; width: 300px; background: #fff; border-radius: 10px;
  box-shadow: 0 24px 50px rgba(0,0,0,.18); padding: 22px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.qodef-order-tracking:hover .qodef-m-dropdown,
.qodef-order-tracking:focus-within .qodef-m-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.qodef-m-dropdown-tagline { font-size: 12.5px; color: #777; margin-bottom: 12px; }
.qodef-order-tracking-form .wpcf7-form-control-wrap input {
  width: 100%; border: 1px solid #e2e2e2; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; font-size: 13px;
}
.qodef-order-tracking-form button { width: 100%; }
.qodef-m-dropdown-link { display: block; margin-top: 12px; font-size: 12px; color: #999; text-align: center; }
.qodef-side-area-opener { color: #fff; }
.qodef-side-area-opener svg { fill: currentColor; }

/* Solid header once scrolled */
body.qodef-header--sticky-display #qodef-page-header { background: #fff !important; box-shadow: 0 2px 14px rgba(0,0,0,.08); }
body.qodef-header--sticky-display .qodef-header-navigation > ul.menu > li > a { color: #1b1b1b; }
body.qodef-header--sticky-display .qodef-m-opener,
body.qodef-header--sticky-display .qodef-side-area-opener { color: #1b1b1b; }
body.qodef-header--sticky-display .qodef-header-logo-image.qodef--main { display: none; }
body.qodef-header--sticky-display .qodef-header-logo-image.qodef--dark { display: inline-block; }

#qodef-page-mobile-header { display: none; }
@media only screen and (max-width: 1024px) {
  #qodef-page-header .qodef-header-navigation,
  #qodef-page-header .qodef-widget-holder .widget_globefarer_core_order_tracking { display: none; }
  #qodef-page-mobile-header {
    display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000; padding: 18px 24px; background: rgba(11,11,11,.55); backdrop-filter: blur(6px);
  }
  body.qodef-header--sticky-display #qodef-page-mobile-header { background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.08); }
  #qodef-page-mobile-header .qodef-header-logo-image { height: 32px; }
  .qodef-mobile-header-opener { color: #fff; cursor: pointer; }
  body.qodef-header--sticky-display .qodef-mobile-header-opener { color: #1b1b1b; }
  .qodef-mobile-header-opener svg { fill: currentColor; }
  .qodef-mobile-header-opener .qodef--close { display: none; }
  #qodef-page-mobile-header.qodef--opened .qodef-mobile-header-opener .qodef--open { display: none; }
  #qodef-page-mobile-header.qodef--opened .qodef-mobile-header-opener .qodef--close { display: block; }
}
@media only screen and (min-width: 1025px) {
  .qodef-mobile-header-navigation { display: none; }
}

/* ---------- Dark CTA banner overlay (image-backed section) ---------- */
.qodef-cta-overlay { position: relative; padding: 120px 0; }
.qodef-cta-overlay::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,11,11,.86) 0%, rgba(11,11,11,.6) 55%, rgba(11,11,11,.25) 100%);
}
.qodef-cta-overlay .elementor-container { position: relative; z-index: 1; }

/* ---------- Tabbed info: panels sized by content, not JS-computed height ---------- */
.qodef-tabbed-info .qodef-m-content { position: relative !important; z-index: auto !important; }
.qodef-tabbed-info .qodef-m-content[aria-hidden="true"] { display: none !important; }
.qodef-tabbed-info .qodef-m-image { aspect-ratio: 4 / 3; overflow: hidden; }
.qodef-tabbed-info .qodef-m-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Neutralize WP-editor-only reveal animations (clip-path/opacity/transform
   flourishes that are meant to be triggered by admin-only JS we don't ship — without it
   they get stuck in their hidden starting frame, so force the settled/visible state). ---------- */
.qodef-m-image img,
.qodef-divided-image-info .qodef-m-content-mask,
.qodef-divided-image-info .qodef-m-button-mask .qodef-m-button {
  clip-path: none !important; -webkit-clip-path: none !important;
  opacity: 1 !important; transform: none !important; animation: none !important;
}

/* ---------- Hero slider (replaces Slider Revolution) ---------- */
.qodef-hero-slider {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: #0b0b0b;
}
.qodef-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease;
  display: flex;
  align-items: center;
}
.qodef-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.qodef-hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.42) 55%, rgba(10,10,10,.2) 100%);
}
.qodef-hero-slide-inner {
  position: relative; z-index: 1; width: 100%; max-width: 1560px; margin: 0 auto;
  display: flex; align-items: center; gap: 60px; padding: 0 6% 90px;
}
.qodef-hero-wordmark { display: flex; align-items: center; gap: 16px; flex: none; }
.qodef-hero-wordmark-text {
  font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 62px; line-height: 1;
  color: #fff; letter-spacing: -0.02em; white-space: nowrap;
}
.qodef-hero-wordmark-arrow {
  display: block; width: 60px; height: 78px; flex: none;
  background: linear-gradient(135deg, #f7c600 0%, #ffe38a 100%);
  clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 38% 50%);
}
.qodef-hero-slide-content { color: #fff; flex: 1; min-width: 0; max-width: 560px; }
.qodef-hero-slide-content .qodef-m-title { color: #fff; margin-bottom: 22px; }
.qodef-hero-slide-content .qodef-m-text { color: rgba(255,255,255,.82); font-size: 18px; margin-bottom: 34px; max-width: 480px; }
.qodef-hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.qodef-hero-buttons .qodef-layout--textual,
.qodef-hero-buttons .qodef-layout--textual .qodef-m-button-text,
.qodef-hero-buttons .qodef-layout--textual .qodef-m-button-icon svg { color: #fff; fill: #fff; }

/* ---------- Hero arrows (prev/next) ---------- */
.qodef-hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 56px; height: 56px; border-radius: 50%; border: none; background: rgba(255,255,255,.12);
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .25s ease;
  display: flex; align-items: center; justify-content: center;
}
.qodef-hero-arrow:hover { background: rgba(255,255,255,.25); }
.qodef-hero-arrow--prev { left: 30px; }
.qodef-hero-arrow--next { right: 30px; }

/* ---------- Hero bottom tab strip (slide selector) ---------- */
.qodef-hero-tabs {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; max-width: 1560px; margin: 0 auto; padding: 0 6%;
}
.qodef-hero-tab {
  flex: 1; padding: 22px 24px; border-top: 1px solid rgba(255,255,255,.28); cursor: pointer;
  position: relative; transition: border-color .3s ease;
}
.qodef-hero-tab::after {
  content: ""; position: absolute; top: -1px; left: 0; right: 100%; height: 2px; background: #f7c600;
  transition: right .4s cubic-bezier(.22,1,.36,1);
}
.qodef-hero-tab.is-active::after { right: 0; }
.qodef-hero-tab span {
  color: rgba(255,255,255,.7); font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 15px;
  transition: color .3s ease;
}
.qodef-hero-tab.is-active span, .qodef-hero-tab:hover span { color: #fff; }

@media only screen and (max-width: 991px) {
  /* Slides were absolutely positioned and stretched to fill a fixed-height
     container (needed for the desktop crossfade). On mobile that's brittle —
     any extra content (a long title, a wrapped button row) overflows past the
     fixed height and collides with the tab strip pinned to the bottom of it.
     Instead, only the active slide stays in the document flow so the
     container's height always matches whatever that slide actually needs,
     and the tab strip flows naturally below it instead of overlapping. */
  .qodef-hero-slider { height: auto; min-height: 0; }
  .qodef-hero-slide {
    position: relative; inset: auto;
    display: none; opacity: 1; visibility: visible; transition: none;
    align-items: flex-start;
  }
  .qodef-hero-slide.is-active { display: flex; }
  .qodef-hero-slide-inner {
    flex-direction: column; align-items: flex-start; gap: 18px;
    padding-top: 104px; padding-bottom: 48px;
  }
  .qodef-hero-wordmark-text { font-size: 40px; }
  .qodef-hero-wordmark-arrow { width: 40px; height: 52px; }
  .qodef-hero-arrow { display: none; }
  /* The base .qodef-m-title size is desktop-scale (~65px) and was never cut down for
     mobile, which is what pushed the hero content tall enough to overlap the fixed
     header above and the tab strip below — this is the actual fix, not just padding. */
  .qodef-hero-slide-content .qodef-m-title { font-size: 36px; line-height: 1.15; margin-bottom: 16px; }
  .qodef-hero-slide-content .qodef-m-text { font-size: 15.5px; line-height: 1.6; margin-bottom: 24px; }
  /* Tabs move from an absolutely-positioned bottom bar to a normal-flow strip
     right after the (now normal-flow) slide content — no fixed height math to
     get wrong, and nothing left underneath for the content to overlap. */
  .qodef-hero-tabs { position: static; }
}
@media only screen and (max-width: 767px) {
  .qodef-hero-tabs { flex-wrap: wrap; }
  .qodef-hero-tab { flex: 1 1 50%; padding: 14px 12px; }
  .qodef-hero-tab span { font-size: 12px; }
}
@media only screen and (max-width: 420px) {
  .qodef-hero-slide-content .qodef-m-title { font-size: 30px; }
}

/* ---------- Side area drawer (contact panel) ---------- */
#qodef-side-area {
  position: fixed; top: 0; right: 0; width: 420px; max-width: 90vw; height: 100%;
  background: #141414; color: #fff; z-index: 10000; padding: 70px 50px;
  transform: translateX(100%); transition: transform .5s cubic-bezier(.77,0,.18,1);
  overflow-y: auto;
}
#qodef-side-area.qodef--opened { transform: translateX(0); }
#qodef-side-area-close { position: absolute; top: 34px; right: 40px; cursor: pointer; color: #fff; }
#qodef-side-area-close svg { fill: currentColor; width: 18px; height: 18px; }
#qodef-side-area-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; opacity: 0; visibility: hidden;
  transition: opacity .4s ease;
}
#qodef-side-area-overlay.qodef--opened { opacity: 1; visibility: visible; }
#qodef-side-area-inner figure { margin: 0 0 26px; }
#qodef-side-area-inner figure img { max-width: 190px; }

@media only screen and (max-width: 480px) {
  #qodef-side-area { padding: 60px 30px; }
}

/* ---------- Mobile nav open/close ---------- */
@media only screen and (max-width: 1024px) {
  .qodef-mobile-header-navigation {
    position: fixed; top: 0; right: 0; width: 320px; max-width: 85vw; height: 100%;
    background: #141414; padding: 100px 34px 40px; overflow-y: auto; z-index: 9998;
    transform: translateX(100%); transition: transform .45s cubic-bezier(.77,0,.18,1);
  }
  #qodef-page-mobile-header.qodef--opened .qodef-mobile-header-navigation { transform: translateX(0); }
  .qodef-mobile-header-navigation ul.menu { list-style: none; margin: 0; padding: 0; }
  .qodef-mobile-header-navigation ul.menu > li { margin-bottom: 4px; }
  .qodef-mobile-header-navigation ul.menu > li > a { display: block; padding: 12px 0; color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .qodef-mobile-header-navigation ul.menu > li > a:hover { color: #f7c600; }
}

/* =========================================================
   New sections
   ========================================================= */

/* ---------- Why Choose Us ---------- */
.qodef-why-choose-section { padding: 110px 0; background: #fff; }
.qodef-why-choose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; }
.qodef-why-choose-item {
  display: flex; gap: 18px; padding: 32px 28px; border-radius: 4px; background: #fafafa;
  border: 1px solid #ececec; transition: transform .35s ease, box-shadow .35s ease;
}
.qodef-why-choose-item:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(11,11,11,.1); }
.qodef-why-choose-item .qodef-m-icon-wrapper {
  flex: none; width: 52px; height: 52px; border-radius: 4px; background: #1b1b1b;
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: #f7c600;
}
.qodef-why-choose-item .qodef-m-content { flex: 1; }
.qodef-why-choose-item .qodef-m-title { font-size: 18px; margin-bottom: 8px; }
.qodef-why-choose-item .qodef-m-text { color: #666; font-size: 14.5px; }

@media only screen and (max-width: 991px) { .qodef-why-choose-grid { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (max-width: 575px) { .qodef-why-choose-grid { grid-template-columns: 1fr; } .qodef-why-choose-section { padding: 70px 0; } }

/* ---------- Stats / by the numbers ---------- */
.qodef-stats-section { position: relative; padding: 110px 0; background: #1b1b1b; overflow: hidden; }
.qodef-stats-section .qodef-m-title,
.qodef-stats-section .qodef-section-title { color: #fff; }
.qodef-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; }
.qodef-stat-tile {
  padding: 34px 26px; border-radius: 4px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  transition: transform .35s ease, background .35s ease;
}
.qodef-stat-tile:hover { transform: translateY(-6px); background: rgba(255,255,255,.09); }
.qodef-stat-num { font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 44px; color: #f7c600; line-height: 1; }
.qodef-stat-label { margin-top: 12px; color: rgba(255,255,255,.7); font-size: 14px; font-weight: 600; }

@media only screen and (max-width: 767px) { .qodef-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Gallery ---------- */
.qodef-gallery-section { padding: 110px 0; background: #fff; }
.qodef-gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 50px; }
.qodef-gallery-item { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 3 / 4; }
.qodef-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.qodef-gallery-item:hover img { transform: scale(1.08); }
.qodef-gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(11,11,11,0) 45%, rgba(11,11,11,.7)); opacity: 0; transition: opacity .35s ease; }
.qodef-gallery-item:hover::after { opacity: 1; }
.qodef-gallery-item span {
  position: absolute; left: 18px; bottom: 16px; color: #fff; font-weight: 700; font-size: 14px;
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease;
}
.qodef-gallery-item:hover span { opacity: 1; transform: translateY(0); }

@media only screen and (max-width: 991px) { .qodef-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media only screen and (max-width: 575px) { .qodef-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   Inner-page banner (shared by track.html, track-result.php, login.php)
   ========================================================= */
.qodef-page-title-banner { position: relative; padding: 220px 0 90px; background-size: cover; background-position: center; }
.qodef-page-title-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,11,.82) 0%, rgba(11,11,11,.55) 100%); }
.qodef-page-title-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 0 6%; color: #fff; }
.qodef-page-title-inner .qodef-m-title { color: #fff; margin-bottom: 14px; }
.qodef-page-title-inner .qodef-m-text { color: rgba(255,255,255,.8); }

/* ---------- Shared inner-page container ---------- */
.qodef-inner-container { max-width: 1100px; margin: 0 auto; padding: 0 6%; }

/* =========================================================
   Page: track (track.html) / track-result (track-result.php)
   ========================================================= */
.qodef-track-section { padding: 110px 0; background: #f6f4ee; }
.qodef-track-result-section { padding: 90px 0 110px; background: #f6f4ee; }
.qodef-track-card,
.qodef-login-card {
  max-width: 620px; margin: 0 auto; background: #fff; border-radius: 6px;
  padding: 50px 46px; box-shadow: 0 24px 60px rgba(11,11,11,.08); border: 1px solid #ececec;
}
.qodef-track-card .qodef-section-title,
.qodef-login-card .qodef-section-title { margin-bottom: 30px; }

.qodef-track-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.qodef-track-form-row input[type="text"],
.qodef-track-form-row input[type="search"] {
  flex: 1 1 260px; border: 1px solid #ddd; border-radius: 4px; padding: 16px 18px;
  font-family: "Sarabun", sans-serif; font-size: 15px; color: #1b1b1b; background: #fafafa;
}
.qodef-track-form-row input[type="text"]:focus,
.qodef-track-form-row input[type="search"]:focus { outline: none; border-color: #f7c600; background: #fff; }
.qodef-track-form-row button { flex: none; border: none; cursor: pointer; }

.qodef-track-notfound {
  background: #fdf1f1; border: 1px solid #f3caca; color: #a12a2a; border-radius: 4px;
  padding: 16px 20px; margin-bottom: 28px; font-size: 14.5px; line-height: 1.6; text-align: center;
}
.qodef-track-notfound-number { font-weight: 700; color: #7a1c1c; }

@media only screen and (max-width: 767px) {
  .qodef-track-card, .qodef-login-card { padding: 34px 24px; }
}

/* =========================================================
   Page: login (login.php)
   ========================================================= */
.qodef-login-section { padding: 110px 0; background: #f6f4ee; min-height: 50vh; }
.qodef-login-form { display: flex; flex-direction: column; gap: 18px; }
.qodef-form-group input[type="text"],
.qodef-form-group input[type="password"] {
  width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 16px 18px;
  font-family: "Sarabun", sans-serif; font-size: 15px; color: #1b1b1b; background: #fafafa;
}
.qodef-form-group input[type="text"]:focus,
.qodef-form-group input[type="password"]:focus { outline: none; border-color: #f7c600; background: #fff; }
.qodef-login-error:empty { display: none; }
.qodef-login-error:not(:empty) {
  background: #fdf1f1; border: 1px solid #f3caca; color: #a12a2a; border-radius: 4px;
  padding: 12px 16px; margin-bottom: 22px; font-size: 13.5px; text-align: center;
}
.qodef-login-submit-row { margin-top: 6px; }
input.qodef-login-submit {
  width: 100%; border: none; cursor: pointer; text-align: center; font-family: "Sarabun", sans-serif;
}

/* =========================================================
   Inner-page banner (shared by about.html / services.html / service.html / blog.html)
   ========================================================= */
.qodef-page-title-banner { position: relative; padding: 220px 0 90px; background-size: cover; background-position: center; }
.qodef-page-title-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,11,.82) 0%, rgba(11,11,11,.55) 100%); }
.qodef-page-title-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 0 6%; color: #fff; }
.qodef-page-title-inner .qodef-m-title { color: #fff; margin-bottom: 14px; }
.qodef-page-title-inner .qodef-m-text { color: rgba(255,255,255,.8); }
.qodef-page-title-breadcrumb { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto 18px; padding: 0 6%; }
.qodef-page-title-breadcrumb a,
.qodef-page-title-breadcrumb span { color: rgba(255,255,255,.65); font-size: 13px; font-weight: 600; letter-spacing: .02em; text-decoration: none; }
.qodef-page-title-breadcrumb a:hover { color: #f7c600; }
.qodef-page-title-breadcrumb .qodef-sep { margin: 0 8px; color: rgba(255,255,255,.35); }

/* =========================================================
   Shared small components reused across about.html / services.html / service.html / blog.html
   ========================================================= */

/* ---------- Founder / pull-quote block (about.html) ---------- */
.qodef-quote-block { max-width: 640px; padding: 40px 44px; background: #fafafa; border-left: 3px solid #f7c600; border-radius: 4px; margin-top: 10px; }
.qodef-quote-block p { font-family: "Sarabun", sans-serif; font-size: 19px; line-height: 1.6; color: #1b1b1b; margin: 0 0 22px; font-style: italic; }
.qodef-quote-signature { display: flex; align-items: center; gap: 18px; }
.qodef-quote-signature img { height: 46px; width: auto; }
.qodef-quote-signature strong { display: block; font-size: 15px; color: #1b1b1b; }
.qodef-quote-signature span { display: block; font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Check list (about.html advantages / service.html "why us") ---------- */
.qodef-check-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 30px; }
.qodef-check-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #333; font-weight: 500; }
.qodef-check-list li i { color: #f7c600; font-size: 16px; flex: none; }
@media only screen and (max-width: 575px) { .qodef-check-list { grid-template-columns: 1fr; } }

/* ---------- Two-panel image cards (about.html action panels) ---------- */
.qodef-panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 50px; }
.qodef-panel-item { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 10; }
.qodef-panel-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.qodef-panel-item:hover img { transform: scale(1.06); }
.qodef-panel-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,11,11,.82) 0%, rgba(11,11,11,.1) 60%); }
.qodef-panel-content { position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.qodef-panel-content h3 { color: #fff; font-size: 17px; margin: 0; }
.qodef-panel-content i { color: #f7c600; font-size: 20px; flex: none; background: rgba(255,255,255,.14); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
@media only screen and (max-width: 575px) { .qodef-panel-grid { grid-template-columns: 1fr; } }

/* ---------- Case study / featured project cards (about.html) ---------- */
.qodef-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 50px; }
.qodef-case-item { background: #fff; border: 1px solid #ececec; border-radius: 4px; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; }
.qodef-case-item:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(11,11,11,.1); }
.qodef-case-item img { width: 100%; height: 220px; object-fit: cover; display: block; }
.qodef-case-item-content { padding: 26px 28px 30px; }
.qodef-case-cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #f7c600; margin-bottom: 10px; display: block; }
.qodef-case-item-content h4 { font-size: 19px; margin: 0 0 12px; }
.qodef-case-item-content h4 a { color: #1b1b1b; text-decoration: none; }
.qodef-case-item-content h4 a:hover { color: #f7c600; }
.qodef-case-item-content p { color: #666; font-size: 14.5px; margin: 0 0 16px; }
.qodef-case-item-content .qodef-case-more { font-size: 13px; font-weight: 700; color: #1b1b1b; text-decoration: none; }
.qodef-case-item-content .qodef-case-more:hover { color: #f7c600; }
@media only screen and (max-width: 991px) { .qodef-case-grid { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (max-width: 575px) { .qodef-case-grid { grid-template-columns: 1fr; } }

/* ---------- Client logos row (about.html) ---------- */
.qodef-clients-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; margin-top: 50px; padding: 46px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; }
.qodef-clients-row img { max-height: 42px; width: auto; opacity: .55; filter: grayscale(1); transition: opacity .3s ease, filter .3s ease; }
.qodef-clients-row img:hover { opacity: 1; filter: grayscale(0); }

/* ---------- Video block with play button (about.html / service.html) ---------- */
.qodef-video-block { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 10; }
.qodef-video-block img { width: 100%; height: 100%; object-fit: cover; }
.qodef-video-block::after { content: ""; position: absolute; inset: 0; background: rgba(11,11,11,.35); }
.qodef-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 78px; height: 78px; border-radius: 50%; background: #f7c600; display: flex; align-items: center; justify-content: center; color: #1b1b1b; font-size: 22px; transition: transform .3s ease; }
.qodef-video-play:hover { transform: translate(-50%, -50%) scale(1.08); }

/* ---------- Two-column text/image row (service.html overview + chart) ---------- */
.qodef-two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: center; margin-top: 26px; }
.qodef-two-col img { width: 100%; border-radius: 4px; display: block; }
.qodef-two-col p { margin: 0 0 16px; color: #555; }
@media only screen and (max-width: 767px) { .qodef-two-col { grid-template-columns: 1fr; } }

/* ---------- Sidebar (service.html / services.html / blog.html) ---------- */
.qodef-layout-with-sidebar { display: grid; grid-template-columns: 2.2fr 1fr; gap: 60px; align-items: start; }
.qodef-sidebar { display: flex; flex-direction: column; gap: 30px; }
.qodef-sidebar-widget { background: #fafafa; border: 1px solid #ececec; border-radius: 4px; padding: 30px; }
.qodef-sidebar-widget h5 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 20px; color: #1b1b1b; }
.qodef-sidebar-widget ul { list-style: none; margin: 0; padding: 0; }
.qodef-sidebar-widget ul li { border-bottom: 1px solid #e8e8e8; }
.qodef-sidebar-widget ul li:last-child { border-bottom: none; }
.qodef-sidebar-widget ul li a { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; color: #555; text-decoration: none; font-size: 14.5px; }
.qodef-sidebar-widget ul li a:hover { color: #f7c600; }
.qodef-sidebar-widget ul li a .qodef-e-icon { color: #999; font-size: 12px; }
.qodef-sidebar-cta { position: relative; border-radius: 4px; overflow: hidden; text-align: center; }
.qodef-sidebar-cta img { width: 100%; height: 190px; object-fit: cover; display: block; }
.qodef-sidebar-cta-content { padding: 26px 24px 30px; background: #1b1b1b; }
.qodef-sidebar-cta-content h5 { color: #fff; font-size: 16px; margin: 0 0 12px; text-transform: none; letter-spacing: 0; }
.qodef-sidebar-cta-content p { color: rgba(255,255,255,.7); font-size: 13.5px; margin: 0 0 20px; }
.qodef-sidebar-post { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #e8e8e8; }
.qodef-sidebar-post:last-child { border-bottom: none; }
.qodef-sidebar-post img { width: 62px; height: 62px; object-fit: cover; border-radius: 3px; flex: none; }
.qodef-sidebar-post-meta { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.qodef-sidebar-post-title { font-size: 13.5px; font-weight: 600; color: #1b1b1b; line-height: 1.4; text-decoration: none; display: block; }
.qodef-sidebar-post-title:hover { color: #f7c600; }
.qodef-sidebar-search { display: flex; }
.qodef-sidebar-search input { flex: 1; border: 1px solid #e2e2e2; border-radius: 4px 0 0 4px; padding: 12px 14px; font-size: 14px; }
.qodef-sidebar-search button { width: 48px; border: none; border-radius: 0 4px 4px 0; background: #1b1b1b; color: #f7c600; cursor: pointer; }
.qodef-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.qodef-tag-list a { padding: 7px 14px; border: 1px solid #e2e2e2; border-radius: 30px; font-size: 12.5px; color: #555; text-decoration: none; }
.qodef-tag-list a:hover { background: #1b1b1b; color: #f7c600; border-color: #1b1b1b; }
@media only screen and (max-width: 991px) { .qodef-layout-with-sidebar { grid-template-columns: 1fr; } }

/* ---------- Accordion (service.html key benefits — native <details>, no JS dependency) ---------- */
.qodef-accordion { margin-top: 24px; border: 1px solid #ececec; border-radius: 4px; overflow: hidden; }
.qodef-accordion details { border-bottom: 1px solid #ececec; }
.qodef-accordion details:last-child { border-bottom: none; }
.qodef-accordion summary { cursor: pointer; list-style: none; padding: 20px 26px; font-weight: 600; font-size: 15px; color: #1b1b1b; display: flex; align-items: center; justify-content: space-between; }
.qodef-accordion summary::-webkit-details-marker { display: none; }
.qodef-accordion summary::after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; color: #999; transition: transform .25s ease; }
.qodef-accordion details[open] summary::after { transform: rotate(180deg); }
.qodef-accordion details[open] summary { color: #f7c600; }
.qodef-accordion-body { padding: 0 26px 22px; color: #666; font-size: 14.5px; line-height: 1.7; }

/* ---------- Blog single post (blog.html) ---------- */
.qodef-post-meta { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 26px; font-size: 13px; color: #888; }
.qodef-post-meta a { color: #888; text-decoration: none; }
.qodef-post-meta a:hover { color: #f7c600; }
.qodef-post-body p { color: #555; margin: 0 0 20px; line-height: 1.8; }
.qodef-post-body img { width: 100%; border-radius: 4px; margin: 10px 0 26px; display: block; }
.qodef-post-share { display: flex; align-items: center; gap: 14px; margin: 34px 0; padding: 20px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; }
.qodef-post-share a { width: 38px; height: 38px; border-radius: 50%; background: #f6f4ee; color: #1b1b1b; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; }
.qodef-post-share a:hover { background: #f7c600; color: #1b1b1b; }
.qodef-post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 40px; }
.qodef-post-tags span { font-weight: 700; color: #1b1b1b; font-size: 13px; }
.qodef-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 44px; }
.qodef-post-nav a { display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 16px; border: 1px solid #ececec; border-radius: 4px; }
.qodef-post-nav a img { width: 56px; height: 56px; object-fit: cover; border-radius: 3px; flex: none; }
.qodef-post-nav-next { justify-content: flex-end; text-align: right; }
.qodef-post-nav span { display: block; font-size: 11px; text-transform: uppercase; color: #999; margin-bottom: 4px; }
.qodef-post-nav strong { font-size: 14px; color: #1b1b1b; font-weight: 600; }
.qodef-author-box { display: flex; gap: 22px; padding: 30px; background: #fafafa; border-radius: 4px; margin-bottom: 40px; }
.qodef-author-box img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.qodef-author-box h4 { margin: 0 0 8px; font-size: 17px; }
.qodef-author-box p { color: #666; font-size: 14px; margin: 0 0 14px; }
.qodef-author-box a { color: #1b1b1b; margin-right: 10px; }
.qodef-author-box a:hover { color: #f7c600; }
.qodef-comments-list { list-style: none; margin: 0 0 40px; padding: 0; }
.qodef-comment { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid #ececec; }
.qodef-comment img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.qodef-comment h6 { margin: 0 0 4px; font-size: 15px; }
.qodef-comment .qodef-comment-date { font-size: 12px; color: #999; margin-bottom: 10px; }
.qodef-comment p { color: #555; font-size: 14.5px; margin: 0 0 10px; }
.qodef-comment .qodef-reply-link { font-size: 12.5px; font-weight: 700; color: #1b1b1b; text-decoration: none; }
.qodef-comment .qodef-reply-link:hover { color: #f7c600; }
.qodef-comment-replies { list-style: none; margin: 18px 0 0 30px; padding: 18px 0 0; border-top: 1px solid #ececec; }

/* ---------- Form fields (contact form / comment form visual restyle only — attributes untouched) ---------- */
.qodef-form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.qodef-contact-form input[type="text"],
.qodef-contact-form input[type="email"],
.qodef-contact-form input[type="number"],
.qodef-contact-form textarea {
  width: 100%; border: 1px solid #e2e2e2; border-radius: 4px; padding: 14px 16px; font-size: 14px;
  font-family: "Sarabun", sans-serif; background: #fff; color: #1b1b1b;
}
.qodef-contact-form textarea { resize: vertical; min-height: 120px; }
.qodef-contact-form-radio { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 13.5px; color: #666; }
@media only screen and (max-width: 767px) { .qodef-form-row { grid-template-columns: 1fr; } }

/* =========================================================
   Page: contact.html / contact.php / contact_successful.html /
   quote.php / quote_successful.html
   ========================================================= */

/* ---------- Select fields (quote form) — visual only, name/id untouched ---------- */
.qodef-contact-form select {
  width: 100%; border: 1px solid #e2e2e2; border-radius: 4px; padding: 14px 16px; font-size: 14px;
  font-family: "Sarabun", sans-serif; background-color: #fff; color: #1b1b1b; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.qodef-contact-form label {
  display: block; font-size: 13px; font-weight: 700; color: #1b1b1b; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .03em;
}
.qodef-contact-form input:focus, .qodef-contact-form select:focus, .qodef-contact-form textarea:focus {
  outline: none; border-color: #f7c600;
}
.qodef-form-row.qodef-cols--2 { grid-template-columns: repeat(2, 1fr); }
.qodef-form-row.qodef-cols--1 { grid-template-columns: 1fr; }
.qodef-form-row .qodef-form-actions { grid-column: 1 / -1; margin-top: 10px; }
@media only screen and (max-width: 767px) { .qodef-form-row.qodef-cols--2 { grid-template-columns: 1fr; } }

/* ---------- Form card + contact-info sidebar ---------- */
.qodef-form-section { padding: 110px 0; background: #f6f4ee; }
.qodef-form-layout { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 1400px; margin: 0 auto; padding: 0 6%; }
.qodef-form-layout.qodef-has-sidebar { grid-template-columns: 340px 1fr; align-items: start; }
.qodef-form-card { background: #fff; border-radius: 6px; padding: 48px 44px; box-shadow: 0 24px 60px rgba(11,11,11,.06); }
.qodef-form-card .qodef-m-title { margin-bottom: 10px; }
.qodef-form-card .qodef-m-text { color: #666; margin-bottom: 34px; }
.qodef-form-actions { margin-top: 6px; }

.qodef-contact-info-card { background: #1b1b1b; color: #fff; border-radius: 6px; padding: 44px 36px; }
.qodef-contact-info-card h3 { color: #fff; font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 20px; margin: 0 0 26px; }
.qodef-contact-info-item { display: flex; gap: 16px; margin-bottom: 26px; }
.qodef-contact-info-item:last-child { margin-bottom: 0; }
.qodef-contact-info-item i { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #f7c600; color: #1b1b1b; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.qodef-contact-info-item strong { display: block; color: #fff; font-size: 14.5px; margin-bottom: 3px; }
.qodef-contact-info-item span, .qodef-contact-info-item a { color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.6; text-decoration: none; }
.qodef-contact-info-item a:hover { color: #f7c600; }

@media only screen and (max-width: 991px) {
  .qodef-form-layout.qodef-has-sidebar { grid-template-columns: 1fr; }
  .qodef-form-card { padding: 34px 26px; }
}
@media only screen and (max-width: 575px) { .qodef-form-section { padding: 70px 0; } }

/* ---------- Map embed (contact.html) ---------- */
.qodef-map-section { line-height: 0; }
.qodef-map-section iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ---------- Success panel (contact_successful.html / quote_successful.html) ---------- */
.qodef-success-panel { max-width: 720px; margin: 0 auto; padding: 0 6%; text-align: center; }
.qodef-success-icon {
  width: 84px; height: 84px; border-radius: 50%; background: #1b1b1b; color: #f7c600; font-size: 32px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 26px;
}
.qodef-success-panel .qodef-m-title { margin-bottom: 14px; }
.qodef-success-panel .qodef-m-text { color: #666; margin-bottom: 6px; }
.qodef-success-redirect { margin-top: 30px; font-size: 13px; color: #999; }

/* =========================================================
   Search/view/edit courier pages — internal admin tool
   (search-courier.php, search-edit.php, view-courier.php,
   editcons.php, update-success.php)

   These pages keep their existing Atlantis/Bootstrap admin
   dashboard chrome (.wrapper / .sidebar / .main-panel / .panel-header
   / .card / .footer) per the style guide's "page already has its own
   admin nav/sidebar" rule — the qodef-* marketing header/footer is
   NOT used here. This block only re-skins that existing admin chrome
   in the ink (#1b1b1b) + gold (#f7c600) Sarabun palette. Class names
   below are all Atlantis-skin classes that don't appear anywhere in
   the public qodef-* marketing markup, so this can't leak onto the
   public site; it intentionally also affects any other admin page
   sharing the same dashboard skin (courier-list.php, admin-list.php,
   etc.) for a consistent internal tool look, if/when those are
   restyled too. No PHP/form/input attributes were touched to enable
   this — colors are applied purely via CSS, including !important
   overrides for a few inline style="color:..." attributes left in
   the page markup. ---- */
body { font-family: "Sarabun", "Lato", sans-serif; }

/* Top bar + logo header */
.main-header .logo-header,
.main-header .navbar-header { background-color: #1b1b1b !important; }
.main-header .logo-header { border-bottom: 1px solid rgba(247,198,0,.25); }

/* Sidebar */
.sidebar.sidebar-style-2,
.sidebar.sidebar-style-2 .sidebar-wrapper { background-color: #1b1b1b !important; }
.sidebar .nav-item > a p,
.sidebar .nav-item > a strong { color: #e9e6da !important; font-family: "Sarabun", sans-serif; }
.sidebar .nav-item.active > a,
.sidebar .nav-item > a:hover { background-color: rgba(247,198,0,.14) !important; }
.sidebar .nav-item.active > a p,
.sidebar .nav-item.active > a strong,
.sidebar .nav-item > a:hover p,
.sidebar .nav-item > a:hover strong { color: #f7c600 !important; }

/* Panel header (doubles as the compact page-title banner for these pages) */
.panel-header.bg-primary-gradient {
  background: linear-gradient(90deg, #1b1b1b 0%, #2b2b2b 100%) !important;
  border-bottom: 3px solid #f7c600;
}
.panel-header h2, .panel-header h5, .panel-header strong { font-family: "Sarabun", sans-serif; }

/* Cards / modal-style content blocks / lists */
.card { border-radius: 4px; border: 1px solid #ececec; box-shadow: 0 2px 10px rgba(11,11,11,.05); }
.card-header.card-header-primary { background-color: #1b1b1b !important; color: #fff; }
.card-title, .card-category { font-family: "Sarabun", sans-serif; }
.modal-content { font-family: "Sarabun", "Lato", sans-serif; }
.modal-title strong { color: #1b1b1b; }
.list-group-item { font-family: "Sarabun", "Lato", sans-serif; }
.list-group-item b { color: #1b1b1b; }
/* update-success.php's confirmation text ships as inline <font color="#FF0000">; a
   red "success" message reads as an error against the new brand, so it's re-tinted here. */
.modal-title font[color="#FF0000"] { color: #8a6d00 !important; }

/* Buttons */
.btn-primary, .btn.btn-primary,
.gentxt, input[type="submit"].gentxt {
  background-color: #f7c600 !important; border-color: #f7c600 !important; color: #1b1b1b !important;
  font-weight: 700; font-family: "Sarabun", sans-serif;
}
.btn-primary:hover, .gentxt:hover { background-color: #e0b200 !important; border-color: #e0b200 !important; }
.btn-success { background-color: #1b1b1b !important; border-color: #1b1b1b !important; }
.btn-success:hover { background-color: #333 !important; border-color: #333 !important; }

/* Form controls */
.form-control, input.form-control, select.form-control {
  border-radius: 3px; border: 1px solid #d8d5c9; font-family: "Sarabun", "Lato", sans-serif;
}
.form-control:focus { border-color: #f7c600; box-shadow: 0 0 0 3px rgba(247,198,0,.18); outline: none; }
.bmd-label-floating { font-family: "Sarabun", sans-serif; color: #6b6b6b; }

/* Footer */
footer.footer { background: #1b1b1b !important; color: rgba(255,255,255,.75); }
footer.footer .nav-link { color: rgba(255,255,255,.75) !important; }
footer.footer .copyright { color: rgba(255,255,255,.6); }

/* ----------------------------------------------------------------
   Courier admin pages (add-courier.php, edit-courier.php,
   courier-list.php, courier-add-success.php, courier-edit-success.php)

   These reuse the same Atlantis/Bootstrap admin dashboard chrome as
   the "Search/view/edit courier pages" block above (same .wrapper /
   .sidebar / .panel-header / .card / .footer skin, already re-skinned
   there), so no new header/footer/body scoping was needed — the pages
   were simply wired up to load this stylesheet. This block only adds
   the bits that block didn't cover: the consignment data table on
   courier-list.php and the small flat action buttons used in its
   table rows. Purely additive CSS — no PHP/form/table markup or
   attributes were touched. ---------------------------------------- */

/* Consignment listing table (#TableTab on courier-list.php) */
.main-panel table.table,
.main-panel table.dataTable {
  font-family: "Sarabun", "Lato", sans-serif;
  border-collapse: collapse;
}
.main-panel table.table thead th,
.main-panel table.dataTable thead th {
  background-color: #1b1b1b;
  color: #f7c600 !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: .03em;
  border-color: #1b1b1b !important;
}
.main-panel table.table tbody td,
.main-panel table.dataTable tbody td {
  border-color: #ece7da !important;
  vertical-align: middle;
}
.main-panel table.table tbody tr:hover,
.main-panel table.dataTable tbody tr:hover { background-color: #faf6e6; }

/* Small flat action buttons (view / update / edit / delete / print) */
.main-panel .btn-flat.btn-xs {
  font-family: "Sarabun", sans-serif;
  font-weight: 600;
  border-radius: 3px;
}
.main-panel .btn-flat.btn-xs.btn-danger { background-color: #b3261e !important; border-color: #b3261e !important; }
.main-panel .btn-flat.btn-xs.btn-danger:hover { background-color: #8f1e18 !important; border-color: #8f1e18 !important; }

/* =========================================================
   Tracking result page — DHL-style comfortable layout
   ========================================================= */
.qodef-track-result-section { background: #f6f4ee; padding: 60px 0 110px; }
.qodef-inner-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---- Hero status strip ---- */
.qodef-track-hero-strip {
  background: #1b1b1b; padding: 46px 0 40px;
}
.qodef-track-hero-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.qodef-track-hero-id { color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.qodef-track-hero-num { color: #fff; font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -0.01em; }
.qodef-status-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  background: rgba(247,198,0,.14); border: 1px solid rgba(247,198,0,.4); color: #f7c600;
  font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em;
}
.qodef-status-pill i { font-size: 12px; }
.qodef-track-hero-eta { color: rgba(255,255,255,.85); font-size: 14px; }
.qodef-track-hero-eta strong { color: #fff; }
.qodef-track-hero-actions { display: flex; gap: 10px; }
.qodef-icon-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background .25s ease, border-color .25s ease;
  text-decoration: none;
}
.qodef-icon-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; }
.qodef-icon-btn.is-copied { background: #f7c600; border-color: #f7c600; color: #1b1b1b; }

/* ---- Progress stepper ---- */
.qodef-progress-section { background: #fff; border-bottom: 1px solid #ececec; padding: 38px 0; }
.qodef-stepper { display: flex; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.qodef-step { flex: 1; position: relative; text-align: center; }
.qodef-step:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; left: 50%; width: 100%; height: 2px; background: #e6e6e6; z-index: 0;
}
.qodef-step.is-done:not(:last-child)::after { background: #f7c600; }
.qodef-step-dot {
  position: relative; z-index: 1; width: 36px; height: 36px; margin: 0 auto 12px; border-radius: 50%;
  background: #fff; border: 2px solid #e6e6e6; display: flex; align-items: center; justify-content: center;
  color: #bbb; font-size: 14px; transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.qodef-step.is-done .qodef-step-dot { background: #f7c600; border-color: #f7c600; color: #1b1b1b; }
.qodef-step.is-current .qodef-step-dot { background: #1b1b1b; border-color: #1b1b1b; color: #f7c600; box-shadow: 0 0 0 5px rgba(247,198,0,.18); }
.qodef-step-label { font-size: 12.5px; font-weight: 700; color: #999; }
.qodef-step.is-done .qodef-step-label, .qodef-step.is-current .qodef-step-label { color: #1b1b1b; }

@media only screen and (max-width: 767px) {
  .qodef-step-label { font-size: 10.5px; }
  .qodef-track-hero-num { font-size: 22px; }
}

/* ---- Main two-column grid: map+parties | product+waybill ---- */
.qodef-track-main-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; margin-top: 40px; align-items: start; }
@media only screen and (max-width: 991px) { .qodef-track-main-grid { grid-template-columns: 1fr; } }

.qodef-card { background: #fff; border-radius: 8px; border: 1px solid #ececec; box-shadow: 0 8px 30px rgba(11,11,11,.04); }
.qodef-card-pad { padding: 26px 28px; }

/* ---- Map card (legacy Google embed, kept for other pages) ---- */
.qodef-map-card { overflow: hidden; margin-bottom: 20px; }
.qodef-map-card-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid #ececec; }
.qodef-map-card-head h3 { font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 16px; margin: 0; color: #1b1b1b; }
.qodef-map-card-head span { font-size: 12.5px; color: #999; }
.qodef-map-frame { width: 100%; height: 320px; border: 0; display: block; filter: grayscale(.15); }

/* ---- Live map card (phone-style route preview + info card) ---- */
.qodef-livemap-card { overflow: hidden; margin-bottom: 20px; }
.qodef-livemap-phone { position: relative; background: #eef1f5; }
.qodef-livemap-canvas { width: 100%; height: 300px; background: #eef1f5; }
.qodef-livemap-loading { display: flex; align-items: center; justify-content: center; height: 300px; color: #9aa1ab; font-size: 13px; }
.qodef-livemap-legend {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 500;
  background: #fff; border-radius: 999px; padding: 8px 16px; display: flex; gap: 16px;
  box-shadow: 0 6px 20px rgba(11,11,11,.16); font-size: 12px; font-weight: 600; color: #333; white-space: nowrap;
}
.qodef-livemap-legend span { display: flex; align-items: center; gap: 6px; }
.qodef-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.qodef-legend-dot--covered { background: #d1274e; }
.qodef-legend-dot--dest { background: #1f9d55; }

.qodef-livemap-body { padding: 26px 28px 30px; }
.qodef-livemap-eyebrow { color: #d1274e; font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.qodef-livemap-title { font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 22px; color: #1b1b1b; margin: 0 0 4px; }
.qodef-livemap-subtitle { color: #8a8a8a; font-size: 13.5px; margin: 0 0 22px; }

.qodef-livemap-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 11px 0; }
.qodef-livemap-row-label { display: flex; align-items: center; gap: 8px; color: #999; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.qodef-livemap-row-label i { color: #d1274e; width: 14px; text-align: center; }
.qodef-livemap-row-value { font-weight: 700; color: #1b1b1b; font-size: 14.5px; text-align: right; }
.qodef-livemap-divider { height: 1px; background: #f0f0f0; }

.qodef-livemap-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 24px; }
.qodef-livemap-stat { background: #f6f4ee; border-radius: 8px; padding: 14px 16px; }
.qodef-livemap-stat span { display: block; color: #999; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.qodef-livemap-stat strong { font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 16px; color: #1b1b1b; }

.qodef-livemap-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 13px 18px; border-radius: 8px; font-weight: 700; font-size: 13.5px; cursor: pointer;
  text-decoration: none; border: 1px solid transparent; margin-bottom: 10px; transition: opacity .2s ease;
}
.qodef-livemap-btn:last-child { margin-bottom: 0; }
.qodef-livemap-btn--primary { background: rgba(209,39,78,.1); color: #d1274e; border-color: rgba(209,39,78,.25); }
.qodef-livemap-btn--secondary { background: rgba(31,157,85,.1); color: #1f9d55; border-color: rgba(31,157,85,.25); }
.qodef-livemap-btn:hover { opacity: .75; color: inherit; }

.qodef-plane-icon { color: #d1274e; font-size: 16px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.qodef-marker-dot { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.qodef-marker-dot--origin { background: #d1274e; }
.qodef-marker-dot--dest { background: #1f9d55; }

@media only screen and (max-width: 480px) {
  .qodef-livemap-row { flex-direction: column; gap: 4px; }
  .qodef-livemap-row-value { text-align: left; }
  .qodef-livemap-legend { font-size: 11px; gap: 10px; padding: 7px 12px; }
}

/* ---- Detail cards (sender/receiver) ---- */
.qodef-track-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media only screen and (max-width: 575px) { .qodef-track-details-grid { grid-template-columns: 1fr; } }
.qodef-detail-card { background: #fff; border-radius: 8px; border: 1px solid #ececec; padding: 24px 26px; }
.qodef-detail-card-title {
  font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 15px; color: #1b1b1b; margin: 0 0 16px;
  padding-bottom: 12px; border-bottom: 2px solid #f7c600; display: inline-block;
}

.qodef-detail-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #ececec; }
.qodef-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.qodef-avatar--placeholder { display: flex; align-items: center; justify-content: center; font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 18px; }
.qodef-avatar--sender { background: #1b1b1b; color: #f7c600; }
.qodef-avatar--receiver { background: #f6f4ee; color: #1b1b1b; }
.qodef-detail-card-name { font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 16px; color: #1b1b1b; }
.qodef-detail-card-role { color: #999; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* ---- Product visual card ---- */
.qodef-product-card { overflow: hidden; margin-bottom: 20px; }
.qodef-product-image { width: 100%; height: 190px; object-fit: cover; display: block; }
.qodef-product-body { padding: 22px 24px; }
.qodef-product-name { font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 17px; color: #1b1b1b; margin: 0 0 4px; }
.qodef-product-meta { color: #888; font-size: 13px; margin-bottom: 14px; }
.qodef-product-stats { display: flex; gap: 22px; }
.qodef-product-stat { font-size: 13px; color: #666; }
.qodef-product-stat strong { display: block; color: #1b1b1b; font-size: 15px; font-family: "Sarabun", sans-serif; font-weight: 700; }

/* ---- Waybill card (restyled to match the Live Map card language) ---- */
.qodef-waybill-card { padding: 26px 28px; }
.qodef-waybill-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid #ececec; }
.qodef-waybill-num { font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 20px; color: #1b1b1b; letter-spacing: -0.01em; }
.qodef-waybill-print-btn { width: auto; padding: 11px 20px; margin-bottom: 0; }

/* ---- Route summary pill (Origin -> Now -> Destination) ---- */
.qodef-route-card {
  background: #fff; border: 1px solid #ececec; border-radius: 8px; padding: 26px 30px; margin: 28px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.qodef-route-step { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.qodef-route-dot { width: 10px; height: 10px; border-radius: 50%; }
.qodef-route-dot--origin { background: #d1274e; }
.qodef-route-dot--current { background: #f7c600; box-shadow: 0 0 0 4px rgba(247,198,0,.22); }
.qodef-route-dot--dest { background: #1f9d55; }
.qodef-route-step-label { color: #999; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.qodef-route-step-value { color: #1b1b1b; font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 15px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qodef-route-arrow { color: #ccc; font-size: 13px; flex: none; }

.qodef-track-heading { margin-top: 44px; margin-bottom: 6px; }

@media only screen and (max-width: 575px) {
  .qodef-route-card { flex-direction: column; align-items: stretch; }
  .qodef-route-arrow { transform: rotate(90deg); align-self: center; }
  .qodef-route-step-value { max-width: none; white-space: normal; }
}

/* ---- Shipment timeline card ---- */
.qodef-timeline-card { padding: 28px 28px 8px; }
.qodef-timeline-list { margin-top: 4px; }
.qodef-timeline-item { display: flex; gap: 16px; }
.qodef-timeline-rail { flex: none; width: 12px; display: flex; flex-direction: column; align-items: center; }
.qodef-timeline-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #e2e2e2; margin-top: 4px; }
.qodef-timeline-dot.is-current { background: #f7c600; box-shadow: 0 0 0 4px rgba(247,198,0,.22); }
.qodef-timeline-line { flex: 1; width: 2px; background: #ececec; margin: 4px 0; min-height: 30px; }
.qodef-timeline-content { flex: 1; padding-bottom: 24px; }
.qodef-timeline-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.qodef-timeline-date { color: #999; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.qodef-timeline-headline { font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 15px; color: #1b1b1b; margin-bottom: 4px; }
.qodef-timeline-loc { color: #777; font-size: 13.5px; }
.qodef-timeline-loc i { color: #d1274e; margin-right: 4px; }

.qodef-status-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.qodef-status-chip--gray { background: #f6f4ee; color: #777; }
.qodef-status-chip--gold { background: rgba(247,198,0,.16); color: #a17f00; }
.qodef-status-chip--green { background: rgba(31,157,85,.12); color: #1f9d55; }
.qodef-status-chip--red { background: rgba(209,39,78,.1); color: #d1274e; }

/* ---- Unique feature cards ---- */
.qodef-track-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
@media only screen and (max-width: 991px) { .qodef-track-features { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (max-width: 575px) { .qodef-track-features { grid-template-columns: 1fr; } }
.qodef-feature-card { background: #fff; border: 1px solid #ececec; border-radius: 8px; padding: 26px 24px; }
.qodef-feature-icon { width: 46px; height: 46px; border-radius: 10px; background: #1b1b1b; color: #f7c600; display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 16px; }
.qodef-feature-card h4 { font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 15.5px; color: #1b1b1b; margin: 0 0 8px; }
.qodef-feature-card p { color: #777; font-size: 13.5px; margin: 0 0 14px; line-height: 1.55; }
.qodef-eco-value { font-family: "Sarabun", sans-serif; font-weight: 700; font-size: 26px; color: #1b1b1b; }
.qodef-eco-value span { font-size: 14px; font-weight: 600; color: #888; }
.qodef-eco-bar { height: 6px; border-radius: 4px; background: #f0f0f0; margin-top: 12px; overflow: hidden; }
.qodef-eco-bar-fill { height: 100%; background: linear-gradient(90deg,#f7c600,#ffe38a); }

.qodef-feature-qr { display: block; border-radius: 8px; border: 1px solid #ececec; padding: 6px; background: #fff; }
.qodef-feature-note { display: flex; align-items: center; gap: 8px; color: #555; font-size: 13.5px; margin-top: 6px; }
.qodef-feature-note i { color: #f7c600; width: 14px; text-align: center; flex: none; }

/* =========================================================
   ---- Delivered/manager/officer pages ----
   manager-list.php (and the "Add New Manager" form markup shared
   with add-new-officer.php) use an older, even-more-bare nested
   <table> admin template — no .sidebar/.panel-header/.main-panel
   Atlantis shell at all, just class names like .LargeBlue/.Partext1/
   .blackbox/.newtext/.gentxt on plain <td> cells. Since it doesn't
   share markup with the Atlantis-skin pages re-styled above, it
   gets its own small, narrowly-scoped block here (selectors below
   only match class names unique to this legacy template, so this
   cannot leak onto the qodef-* marketing pages or the Atlantis
   admin dashboard pages). Purely additive CSS — no PHP, <form>
   action/method, or <input>/<textarea> name attributes were
   touched to enable this. ---- */
body { font-family: "Sarabun", "Lato", sans-serif; }

/* Section headings ("View All Manager Details", "Add New Manager") */
.LargeBlue, .Partext1, .headtext13 { font-family: "Sarabun", sans-serif; }
.Partext1 strong, .LargeBlue strong, .headtext13 strong {
  color: #1b1b1b; font-size: 19px; font-weight: 700;
}

/* Data table (manager-list.php) */
table.blackbox { border: 1px solid #e2ded0; border-radius: 4px; overflow: hidden; border-collapse: collapse; }
table.blackbox td.newtext {
  background-color: #1b1b1b !important; color: #f7c600 !important; font-weight: 700;
  text-transform: uppercase; font-size: 12px; letter-spacing: .04em; padding: 10px 8px !important;
  border: none !important;
}
table.blackbox td.gentxt { font-family: "Sarabun", "Lato", sans-serif; padding: 8px !important; }

/* Field labels + inputs (add-new-officer.php "Add New Manager" form) */
.TrackMediumBlue { font-family: "Sarabun", sans-serif; color: #444; font-weight: 600; }
.REDLink { color: #b3261e; }
input[name="ManagerName"], input[name="Password"], input[name="Email"], input[name="PhoneNo"],
textarea[name="Address"] {
  border: 1px solid #d8d4c8; border-radius: 4px; padding: 6px 8px; font-family: "Sarabun", sans-serif;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input[name="ManagerName"]:focus, input[name="Password"]:focus, input[name="Email"]:focus,
input[name="PhoneNo"]:focus, textarea[name="Address"]:focus {
  border-color: #f7c600; box-shadow: 0 0 0 3px rgba(247,198,0,.2); outline: none;
}
input[name="Submit"] {
  background: #1b1b1b; color: #f7c600; border: 1px solid #1b1b1b; border-radius: 4px;
  padding: 8px 18px; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease;
}
input[name="Submit"]:hover { background: #f7c600; color: #1b1b1b; }

/* Small "Update Status" action button reused on manager-list.php rows */
.gentxt .btn-success, td.gentxt .btn-success {
  background-color: #1b1b1b !important; border-color: #1b1b1b !important; font-family: "Sarabun", sans-serif;
}
.gentxt .btn-success:hover, td.gentxt .btn-success:hover { background-color: #333 !important; border-color: #333 !important; }

/* ---- WhatsApp floating chat button (every public-facing page) ---- */
.qodef-whatsapp-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 9999;
  width: 58px; height: 58px; border-radius: 50%; background: #25d366;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px;
  box-shadow: 0 10px 30px rgba(37,211,102,.45); text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.qodef-whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 14px 36px rgba(37,211,102,.55); color: #fff; }
.qodef-whatsapp-fab i { line-height: 1; }
@media only screen and (max-width: 575px) {
  .qodef-whatsapp-fab { width: 50px; height: 50px; font-size: 23px; right: 16px; bottom: 16px; }
}