/*!
 * working-process-scoped.css
 * All-in-one scoped styles for "Working Process One" block.
 * Classes use .gt-wp scope + custom tabs (.gt-tabs / .gt-tab / .gt-tab-btn)
 * to avoid conflicts with your theme/framework.
 */

/* ---------- Theme variables (optional) ---------- */
.gt-wp {
  --billdins-white: #ffffff;
  --billdins-gray: #9aa0a6;
  --billdins-base: #ffc801;
  --billdins-black: #111418;
  --billdins-gray-bg: #f5f7fa;
}

/* Minimal container fallback (if your project has no container system) */
.gt-wp .container { width: min(1200px, 100%); margin: 0 auto; padding: 0 15px; }


/* ---------- Section base ---------- */
.gt-wp.working-process-one {
  position: relative;
  display: block;
  background: #00000000;
  z-index: 1;
}

.gt-wp .sec-title.center { text-align: center; }
.gt-wp .sec-title__tagline {
  display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px;
}
.gt-wp .sec-title__tagline .left-line,
.gt-wp .sec-title__tagline .right-line {
  flex:0 0 40px; height:2px; background: #fe6500;
}
.gt-wp .sec-title__title { font-size: 36px; margin: 8px 0 32px; }


/* ---------- Layout ---------- */
.gt-wp .working-process-one__inner {
  position: relative;
  display: block;
  padding-left: 80px;
}

/* Decorative vertical stripe (do not block clicks) */
.gt-wp .working-process-one__inner .shape1 {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 38px;
  background-repeat: repeat-y;
  background-size: contain;
  pointer-events: none;
}

/* Tabs layout */
.gt-wp .working-process-one__tab-box {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

/* ---------- Left buttons ---------- */
.gt-wp .tab-buttons {
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 80px;
  position: relative;
  z-index: 2; /* stay above any background shapes */
}

.gt-wp .tab-buttons li { margin-bottom: 20px; }

.gt-wp .gt-tab-btn {
  cursor: pointer;
  user-select: none;
  padding: 6px 8px;
  border-left: 3px solid transparent;
  transition: transform .2s, border-color .2s;
}
.gt-wp .gt-tab-btn h2 {
  margin: 0;
  color: transparent;
  -webkit-text-stroke: 1px var(--billdins-gray);
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
  transition: all .2s ease;
}
.gt-wp .gt-tab-btn.active-btn { border-left-color: #fe6500; transform: translateX(4px); }
.gt-wp .gt-tab-btn.active-btn h2 { color: #fe6500; -webkit-text-stroke: 1px #fe6500; }


/* ---------- Right content (tabs) ---------- */
.gt-wp .gt-tabs { flex: 1; position: relative; }

/* Show only active tab — force with !important to defeat theme conflicts */
.gt-wp .gt-tabs .gt-tab { display: none !important; }
.gt-wp .gt-tabs .gt-tab.active-tab { display: block !important; }

/* Entry animation / reveal */
.gt-wp .working-process-one__single-tab {
  position: relative;
  display: block;
  transition: all .7s ease;
  opacity: 0;
  transform: scaleY(0.96);
  transform-origin: top;
}
.gt-wp .gt-tabs .gt-tab.active-tab .working-process-one__single-tab {
  opacity: 1;
  transform: scaleY(1);
  transform-origin: bottom;
}

.gt-wp .working-process-one__single-tab-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Content card */
.gt-wp .working-process-one__single-tab-inner .content-box {
  position: relative;
  display: block;
  max-width: 320px;
  padding: 32px 15px;
  text-align: center;
  margin-right: -16px;
  z-index: 1;
}
.gt-wp .working-process-one__single-tab-inner .content-box::before {
  content: "";
  position: absolute; inset: 0;
  background: #fe6500;
  z-index: -1;
}
.gt-wp .working-process-one__single-tab-inner .content-box::after {
  content: "";
  position: absolute; inset: -10px;
  background: var(--billdins-white);
  z-index: -2;
}
.gt-wp .working-process-one__single-tab-inner .content-box h2 {
  color: var(--billdins-white);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  margin: 0 0 10px;
}
.gt-wp .working-process-one__single-tab-inner .content-box p {
  color: var(--billdins-white);
  margin: 0;
}

/* Image box */
.gt-wp .working-process-one__single-tab-inner .img-box {
  position: relative;
  display: block;
  flex: 1;
}
.gt-wp .working-process-one__single-tab-inner .img-box img {
  width: 100%; height: auto; display: block; border-radius: 6px;
}


/* ---------- Decoration / animation ---------- */
.gt-wp .animation-infinite1 { animation: gt-float 12s linear infinite; }
@keyframes gt-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(8px); }
  100% { transform: translateY(0); }
}


/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .gt-wp .working-process-one__inner { padding-left: 20px; }
  .gt-wp .working-process-one__inner .shape1 { display: none; }
  .gt-wp .working-process-one__tab-box { flex-direction: column; }
  .gt-wp .working-process-one__single-tab-inner { flex-direction: column; gap: 16px; }
  .gt-wp .working-process-one__single-tab-inner .content-box { margin-right: 0; max-width: 100%; padding: 24px; }
  .gt-wp .tab-buttons { display: flex; gap: 10px; }
  .gt-wp .tab-buttons li { margin-bottom: 0; }
}


/* หัวข้ออังกฤษให้หนา / เนื้อความไทยปกติ */
.feature h4,
.heading h2[lang="en"]{ font-weight:700; letter-spacing:.03em; }

.feature p{ font-weight:400; }  /* ไทยตัวบางปกติ */