/* =====================================================
   Darjeeling Trips - Things To Do Global CSS
   Reusable for Darjeeling, Sikkim, Gangtok, Pelling etc.
   Typography comes from root/theme CSS.
===================================================== */

:root {
   --dt-ttd-brand: orangered;
   --dt-ttd-brand-soft: rgba(255, 69, 0, 0.1);
   --dt-ttd-brand-soft-2: rgba(255, 69, 0, 0.18);
   --dt-ttd-brand-dark: #c93400;
   --dt-ttd-dark: #171717;
   --dt-ttd-text: #4d4d4d;
   --dt-ttd-muted: #737373;
   --dt-ttd-white: #ffffff;
   --dt-ttd-cream: #fff8f4;
   --dt-ttd-border: rgba(255, 69, 0, 0.16);
   --dt-ttd-shadow: 0 24px 70px rgba(255, 69, 0, 0.12);
   --dt-ttd-shadow-strong: 0 28px 90px rgba(255, 69, 0, 0.2);
   --dt-ttd-radius-xl: 34px;
   --dt-ttd-radius-lg: 26px;
   --dt-ttd-radius-pill: 999px;
}

.dt-ttd-page {
   overflow: hidden;
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-text);
}

.dt-ttd-page a {
   text-decoration: none;
}

/* Common Buttons */

.dt-ttd-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 56px;
   padding: 0 28px;
   border-radius: var(--dt-ttd-radius-pill);
   transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
   position: relative;
   overflow: hidden;
}

.dt-ttd-btn::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.28), transparent);
   transform: translateX(-120%);
   transition: transform 0.65s ease;
}

.dt-ttd-btn:hover::before {
   transform: translateX(120%);
}

.dt-ttd-btn-primary {
   background: var(--dt-ttd-brand);
   color: var(--dt-ttd-white);
   box-shadow: 0 16px 38px rgba(255, 69, 0, 0.28);
}

.dt-ttd-btn-primary:hover {
   color: var(--dt-ttd-white);
   transform: translateY(-3px);
   box-shadow: 0 24px 50px rgba(255, 69, 0, 0.34);
}

.dt-ttd-btn-secondary {
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-brand);
   border: 1px solid var(--dt-ttd-border);
}

.dt-ttd-btn-secondary:hover {
   color: var(--dt-ttd-white);
   background: var(--dt-ttd-brand);
   border-color: var(--dt-ttd-brand);
   transform: translateY(-3px);
}

/* Hero Section */

.dt-ttd-hero {
   position: relative;
   padding: 100px 0 90px;
   background:
      radial-gradient(circle at 12% 14%, rgba(255, 69, 0, 0.18), transparent 28%),
      radial-gradient(circle at 85% 20%, rgba(255, 69, 0, 0.08), transparent 32%),
      linear-gradient(135deg, #fff7f1 0%, #ffffff 48%, #fff3ed 100%);
   overflow: hidden;
}

.dt-ttd-hero::before {
   content: "";
   position: absolute;
   inset: 24px;
   border: 1px solid rgba(255, 69, 0, 0.08);
   border-radius: 42px;
   pointer-events: none;
}

.dt-ttd-hero-glow {
   position: absolute;
   border-radius: 50%;
   filter: blur(10px);
   opacity: 0.65;
   pointer-events: none;
   animation: dtTtdFloat 7s ease-in-out infinite;
}

.dt-ttd-hero-glow-one {
   width: 260px;
   height: 260px;
   left: -90px;
   bottom: -90px;
   background: rgba(255, 69, 0, 0.12);
}

.dt-ttd-hero-glow-two {
   width: 360px;
   height: 360px;
   right: -130px;
   top: -130px;
   background: rgba(255, 69, 0, 0.1);
   animation-delay: 1.5s;
}

.dt-ttd-hero-content {
   position: relative;
   z-index: 0;
}

.dt-ttd-kicker {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 9px 16px;
   border-radius: var(--dt-ttd-radius-pill);
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-brand);
   box-shadow: 0 12px 34px rgba(255, 69, 0, 0.11);
   border: 1px solid var(--dt-ttd-border);
   margin-bottom: 18px;
}

.dt-ttd-kicker span {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   box-shadow: 0 0 0 6px var(--dt-ttd-brand-soft);
}

.dt-ttd-hero-title {
   color: var(--dt-ttd-dark);
   margin-bottom: 22px;
   max-width: 820px;
}

.dt-ttd-hero-text {
   color: var(--dt-ttd-text);
   max-width: 760px;
   margin-bottom: 32px;
}

.dt-ttd-hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-bottom: 28px;
}

.dt-ttd-trust-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.dt-ttd-trust-pill {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 10px 15px;
   border-radius: var(--dt-ttd-radius-pill);
   background: rgba(255, 255, 255, 0.82);
   color: var(--dt-ttd-dark);
   border: 1px solid rgba(255, 69, 0, 0.12);
   backdrop-filter: blur(10px);
   transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.dt-ttd-trust-pill:hover {
   transform: translateY(-2px);
   border-color: var(--dt-ttd-brand);
   background: var(--dt-ttd-white);
}

.dt-ttd-trust-pill span {
   color: var(--dt-ttd-brand);
}

/* Insight Card */

.dt-ttd-insight-card {
   position: relative;
   z-index: 0;
   padding: 36px;
   border-radius: var(--dt-ttd-radius-xl);
   background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 244, 0.96));
   box-shadow: var(--dt-ttd-shadow);
   border: 1px solid var(--dt-ttd-border);
   overflow: hidden;
}

.dt-ttd-insight-card::before {
   content: "";
   position: absolute;
   width: 160px;
   height: 160px;
   right: -70px;
   top: -70px;
   background: var(--dt-ttd-brand-soft-2);
   border-radius: 50%;
}

.dt-ttd-insight-card::after {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 5px;
   background: linear-gradient(90deg, var(--dt-ttd-brand), transparent);
}

.dt-ttd-card-tag {
   display: inline-flex;
   padding: 8px 14px;
   border-radius: var(--dt-ttd-radius-pill);
   background: var(--dt-ttd-brand-soft);
   color: var(--dt-ttd-brand-dark);
   margin-bottom: 18px;
}

.dt-ttd-insight-card h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 15px;
   position: relative;
   z-index: 0;
}

.dt-ttd-insight-card p {
   color: var(--dt-ttd-text);
   margin-bottom: 20px;
   position: relative;
   z-index: 0;
}

.dt-ttd-mini-list {
   display: grid;
   gap: 12px;
   margin-bottom: 24px;
   position: relative;
   z-index: 0;
}

.dt-ttd-mini-list div {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   color: var(--dt-ttd-dark);
}

.dt-ttd-mini-list span {
   width: 10px;
   height: 10px;
   flex: 0 0 10px;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   margin-top: 7px;
   box-shadow: 0 0 0 6px var(--dt-ttd-brand-soft);
}

.dt-ttd-arrow-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--dt-ttd-brand);
   position: relative;
   z-index: 0;
}

.dt-ttd-arrow-link i {
   font-style: normal;
   transition: transform 0.25s ease;
}

.dt-ttd-arrow-link:hover {
   color: var(--dt-ttd-brand-dark);
}

.dt-ttd-arrow-link:hover i {
   transform: translateX(4px);
}

/* Animation Utilities */

.dt-animate-fade-up {
   opacity: 0;
   transform: translateY(24px);
   animation: dtTtdFadeUp 0.8s ease forwards;
}

.dt-delay-1 {
   animation-delay: 0.16s;
}

.dt-delay-2 {
   animation-delay: 0.32s;
}

.dt-delay-3 {
   animation-delay: 0.48s;
}

@keyframes dtTtdFadeUp {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes dtTtdFloat {
   0%, 100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-18px);
   }
}

/* Responsive */

@media (max-width: 991px) {
   .dt-ttd-hero {
      padding: 70px 0 65px;
   }

   .dt-ttd-insight-card {
      margin-top: 36px;
   }
}

@media (max-width: 575px) {
   .dt-ttd-hero {
      padding: 58px 0 55px;
   }

   .dt-ttd-hero::before {
      inset: 12px;
      border-radius: 26px;
   }

   .dt-ttd-hero-actions {
      flex-direction: column;
   }

   .dt-ttd-btn {
      width: 100%;
   }

   .dt-ttd-insight-card {
      padding: 26px;
      border-radius: var(--dt-ttd-radius-lg);
   }
}

@media (prefers-reduced-motion: reduce) {
   .dt-animate-fade-up,
   .dt-ttd-hero-glow {
      animation: none;
      opacity: 1;
      transform: none;
   }

   .dt-ttd-btn,
   .dt-ttd-trust-pill,
   .dt-ttd-arrow-link i {
      transition: none;
   }
}


/* TOC / Stable Sticky-Fixed Navigation */

:root {
   --dt-ttd-sticky-top: 84px;
}

html {
   scroll-behavior: smooth;
}

html,
body {
   overflow-y: auto;
   height: auto;
   min-height: 100%;
}

.dt-ttd-page {
   overflow: visible !important;
   height: auto !important;
   min-height: 100%;
}

.dt-ttd-page section[id],
.dt-ttd-page div[id] {
   scroll-margin-top: calc(var(--dt-ttd-sticky-top) + 110px);
}

.dt-ttd-toc-wrap {
   position: relative;
   z-index: 99;
   padding: 12px 0;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}

.dt-ttd-toc-wrap.is-fixed {
   position: fixed;
   left: 0;
   right: 0;
   top: var(--dt-ttd-sticky-top);
   z-index: 1;
   padding: 10px 0;
   animation: dtTocDrop 0.22s ease forwards;
}

.dt-ttd-toc-placeholder {
   display: none;
}

.dt-ttd-toc-placeholder.is-active {
   display: block;
}

.dt-ttd-toc {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 12px;
   border-radius: var(--dt-ttd-radius-pill);
   background: rgba(255, 255, 255, 0.96);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 50px rgba(255, 69, 0, 0.12);
   backdrop-filter: blur(16px);
}

.dt-ttd-toc-head {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   color: var(--dt-ttd-dark);
   white-space: nowrap;
   padding-left: 8px;
   flex: 0 0 auto;
}

.dt-ttd-toc-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   box-shadow: 0 0 0 6px var(--dt-ttd-brand-soft);
   flex: 0 0 auto;
}

.dt-ttd-toc-scroll-area {
   position: relative;
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
   flex: 1 1 auto;
}

.dt-ttd-toc-nav {
   display: flex;
   align-items: center;
   gap: 8px;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-behavior: smooth;
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding: 2px;
   min-width: 0;
   flex: 1 1 auto;
}

.dt-ttd-toc-nav::-webkit-scrollbar {
   display: none;
}

.dt-ttd-toc-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 40px;
   padding: 0 16px;
   border-radius: var(--dt-ttd-radius-pill);
   color: var(--dt-ttd-text);
   background: transparent;
   border: 1px solid transparent;
   white-space: nowrap;
   transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.dt-ttd-toc-link:hover {
   color: var(--dt-ttd-brand);
   background: var(--dt-ttd-brand-soft);
   border-color: var(--dt-ttd-border);
   transform: translateY(-1px);
}

.dt-ttd-toc-link.is-active {
   color: var(--dt-ttd-white);
   background: var(--dt-ttd-brand);
   border-color: var(--dt-ttd-brand);
}

.dt-ttd-toc-cta {
   color: var(--dt-ttd-white);
   background: var(--dt-ttd-brand);
   border-color: var(--dt-ttd-brand);
}

.dt-ttd-toc-cta:hover {
   color: var(--dt-ttd-white);
   background: var(--dt-ttd-brand-dark);
   border-color: var(--dt-ttd-brand-dark);
}

.dt-ttd-toc-arrow {
   width: 40px;
   height: 40px;
   flex: 0 0 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   border: 1px solid var(--dt-ttd-border);
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-brand);
   cursor: pointer;
   position: relative;
   z-index: 3;
   transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.dt-ttd-toc-arrow:hover {
   color: var(--dt-ttd-white);
   background: var(--dt-ttd-brand);
   border-color: var(--dt-ttd-brand);
   transform: translateY(-1px);
}

.dt-ttd-toc-arrow.is-disabled {
   opacity: 0.35;
   pointer-events: none;
}

@keyframes dtTocDrop {
   from {
      opacity: 0;
      transform: translateY(-10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (max-width: 991px) {
   :root {
      --dt-ttd-sticky-top: 70px;
   }

   .dt-ttd-toc {
      align-items: stretch;
      flex-direction: column;
      border-radius: var(--dt-ttd-radius-lg);
   }

   .dt-ttd-toc-head {
      padding-left: 4px;
   }

   .dt-ttd-toc-scroll-area {
      width: 100%;
   }
}

@media (max-width: 575px) {
   :root {
      --dt-ttd-sticky-top: 64px;
   }

   .dt-ttd-toc-wrap {
      padding: 8px 0;
   }

   .dt-ttd-toc {
      padding: 10px;
   }

   .dt-ttd-toc-link {
      min-height: 38px;
      padding: 0 14px;
   }

   .dt-ttd-toc-arrow {
      width: 38px;
      height: 38px;
      flex-basis: 38px;
   }
}


/* Common Section Layout */

.dt-ttd-section {
   position: relative;
   padding: 95px 0;
}

.dt-ttd-section-head {
   margin-bottom: 46px;
}

.dt-ttd-section-head h2 {
   color: var(--dt-ttd-dark);
   margin-bottom: 18px;
}

.dt-ttd-section-head p {
   color: var(--dt-ttd-text);
   margin-bottom: 0;
}

/* Quick Planner */

.dt-ttd-quick-planner {
   background:
      linear-gradient(180deg, #ffffff 0%, #fff8f4 100%);
}

.dt-ttd-planner-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px;
}

.dt-ttd-planner-card,
.dt-ttd-planner-help {
   position: relative;
   min-height: 100%;
   padding: 30px;
   border-radius: var(--dt-ttd-radius-lg);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 46px rgba(255, 69, 0, 0.08);
   overflow: hidden;
   transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.dt-ttd-planner-card::before {
   content: "";
   position: absolute;
   inset: 0;
   background:
      radial-gradient(circle at top right, var(--dt-ttd-brand-soft), transparent 34%);
   opacity: 0;
   transition: opacity 0.28s ease;
}

.dt-ttd-planner-card:hover {
   transform: translateY(-8px);
   border-color: var(--dt-ttd-brand);
   box-shadow: var(--dt-ttd-shadow-strong);
}

.dt-ttd-planner-card:hover::before {
   opacity: 1;
}

.dt-ttd-planner-icon {
   position: relative;
   width: 58px;
   height: 58px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   background: var(--dt-ttd-brand-soft);
   color: var(--dt-ttd-brand);
   margin-bottom: 22px;
   overflow: hidden;
}

.dt-ttd-planner-icon::after {
   content: "";
   position: absolute;
   width: 36px;
   height: 36px;
   right: -12px;
   bottom: -12px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft-2);
}

.dt-ttd-planner-icon span {
   position: relative;
   z-index: 0;
}

.dt-ttd-planner-card h3,
.dt-ttd-planner-help h3 {
   position: relative;
   color: var(--dt-ttd-dark);
   margin-bottom: 14px;
   z-index: 0;
}

.dt-ttd-planner-card p,
.dt-ttd-planner-help p {
   position: relative;
   color: var(--dt-ttd-text);
   margin-bottom: 20px;
   z-index: 0;
}

.dt-ttd-planner-card ul {
   position: relative;
   padding: 0;
   margin: 0 0 24px;
   display: grid;
   gap: 10px;
   z-index: 0;
}

.dt-ttd-planner-card li {
   list-style: none;
   position: relative;
   padding-left: 22px;
   color: var(--dt-ttd-dark);
}

.dt-ttd-planner-card li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 10px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   box-shadow: 0 0 0 5px var(--dt-ttd-brand-soft);
}

.dt-ttd-card-cta {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--dt-ttd-brand);
   z-index: 0;
}

.dt-ttd-card-cta i {
   font-style: normal;
   transition: transform 0.25s ease;
}

.dt-ttd-card-cta:hover {
   color: var(--dt-ttd-brand-dark);
}

.dt-ttd-card-cta:hover i {
   transform: translateX(5px);
}

/* Help Card */

.dt-ttd-planner-help {
   background:
      linear-gradient(135deg, var(--dt-ttd-brand) 0%, var(--dt-ttd-brand-dark) 100%);
   color: var(--dt-ttd-white);
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.dt-ttd-planner-help h3,
.dt-ttd-planner-help p {
   color: var(--dt-ttd-white);
}

.dt-ttd-planner-help .dt-ttd-card-tag {
   background: rgba(255, 255, 255, 0.18);
   color: var(--dt-ttd-white);
   border: 1px solid rgba(255, 255, 255, 0.2);
   position: relative;
   z-index: 0;
}

.dt-ttd-planner-help .dt-ttd-btn-primary {
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-brand);
   box-shadow: none;
   position: relative;
   z-index: 0;
}

.dt-ttd-planner-help .dt-ttd-btn-primary:hover {
   background: var(--dt-ttd-dark);
   color: var(--dt-ttd-white);
}

.dt-ttd-help-pattern {
   position: absolute;
   inset: 0;
   background-image:
      radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px);
   background-size: 18px 18px;
   opacity: 0.32;
}

@media (max-width: 1199px) {
   .dt-ttd-planner-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 767px) {
   .dt-ttd-section {
      padding: 70px 0;
   }

   .dt-ttd-planner-grid {
      grid-template-columns: 1fr;
   }

   .dt-ttd-planner-card,
   .dt-ttd-planner-help {
      padding: 26px;
   }
}

/* Top Experiences */

.dt-ttd-experiences {
   background:
      radial-gradient(circle at 10% 0%, var(--dt-ttd-brand-soft), transparent 28%),
      linear-gradient(180deg, #fff8f4 0%, #ffffff 100%);
}

.dt-ttd-section-side-note {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 18px 20px;
   border-radius: var(--dt-ttd-radius-lg);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   color: var(--dt-ttd-dark);
   box-shadow: 0 16px 44px rgba(255, 69, 0, 0.08);
   margin-bottom: 46px;
}

.dt-ttd-section-side-note span {
   width: 12px;
   height: 12px;
   flex: 0 0 12px;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   box-shadow: 0 0 0 7px var(--dt-ttd-brand-soft);
   margin-top: 6px;
}

.dt-ttd-experience-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px;
}

.dt-ttd-experience-card {
   position: relative;
   padding: 32px;
   border-radius: var(--dt-ttd-radius-lg);
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(255, 69, 0, 0.14);
   box-shadow: 0 18px 48px rgba(255, 69, 0, 0.08);
   overflow: hidden;
   transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.dt-ttd-experience-card::before {
   content: "";
   position: absolute;
   inset: 0;
   background:
      radial-gradient(circle at top right, var(--dt-ttd-brand-soft-2), transparent 34%);
   opacity: 0;
   transition: opacity 0.28s ease;
}

.dt-ttd-experience-card::after {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 5px;
   height: 100%;
   background: linear-gradient(180deg, var(--dt-ttd-brand), transparent);
   opacity: 0;
   transition: opacity 0.28s ease;
}

.dt-ttd-experience-card:hover {
   transform: translateY(-8px);
   border-color: var(--dt-ttd-brand);
   box-shadow: var(--dt-ttd-shadow-strong);
}

.dt-ttd-experience-card:hover::before,
.dt-ttd-experience-card:hover::after {
   opacity: 1;
}

.dt-ttd-experience-top {
   position: relative;
   z-index: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   margin-bottom: 22px;
}

.dt-ttd-experience-no {
   width: 54px;
   height: 54px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   background: var(--dt-ttd-brand-soft);
   color: var(--dt-ttd-brand);
   border: 1px solid var(--dt-ttd-border);
}

.dt-ttd-experience-tag {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 8px 14px;
   border-radius: var(--dt-ttd-radius-pill);
   background: var(--dt-ttd-cream);
   color: var(--dt-ttd-brand-dark);
   border: 1px solid var(--dt-ttd-border);
}

.dt-ttd-experience-card h3 {
   position: relative;
   z-index: 0;
   color: var(--dt-ttd-dark);
   margin-bottom: 14px;
}

.dt-ttd-experience-card p {
   position: relative;
   z-index: 0;
   color: var(--dt-ttd-text);
   margin-bottom: 22px;
}

.dt-ttd-insight-row {
   position: relative;
   z-index: 0;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
   margin-bottom: 16px;
}

.dt-ttd-insight-row div {
   padding: 16px;
   border-radius: 18px;
   background: #fff8f4;
   border: 1px solid rgba(255, 69, 0, 0.1);
   color: var(--dt-ttd-dark);
}

.dt-ttd-insight-row span,
.dt-ttd-combine-box span {
   display: block;
   color: var(--dt-ttd-brand);
   margin-bottom: 6px;
}

.dt-ttd-combine-box {
   position: relative;
   z-index: 0;
   padding: 16px;
   border-radius: 18px;
   background: var(--dt-ttd-white);
   border: 1px dashed rgba(255, 69, 0, 0.28);
   color: var(--dt-ttd-dark);
   margin-bottom: 22px;
}

@media (max-width: 991px) {
   .dt-ttd-section-side-note {
      margin-bottom: 34px;
   }

   .dt-ttd-experience-grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 575px) {
   .dt-ttd-experience-card {
      padding: 26px;
   }

   .dt-ttd-experience-top {
      align-items: flex-start;
      flex-direction: column;
   }

   .dt-ttd-insight-row {
      grid-template-columns: 1fr;
   }
}

/* Local Route Logic */

.dt-ttd-route-logic {
   background:
      radial-gradient(circle at 85% 10%, var(--dt-ttd-brand-soft), transparent 30%),
      linear-gradient(180deg, #ffffff 0%, #fff8f4 100%);
}

.dt-ttd-route-warning {
   display: flex;
   align-items: flex-start;
   gap: 18px;
   padding: 26px;
   border-radius: var(--dt-ttd-radius-lg);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 48px rgba(255, 69, 0, 0.08);
   position: relative;
   overflow: hidden;
}

.dt-ttd-route-warning::before {
   content: "";
   position: absolute;
   right: -70px;
   top: -70px;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
}

.dt-ttd-route-warning-icon {
   width: 54px;
   height: 54px;
   flex: 0 0 54px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   background: var(--dt-ttd-brand);
   color: var(--dt-ttd-white);
   box-shadow: 0 14px 30px rgba(255, 69, 0, 0.24);
   position: relative;
   z-index: 0;
}

.dt-ttd-route-warning h3,
.dt-ttd-route-warning p {
   position: relative;
   z-index: 0;
}

.dt-ttd-route-warning h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 10px;
}

.dt-ttd-route-warning p {
   color: var(--dt-ttd-text);
   margin-bottom: 0;
}

.dt-ttd-route-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px;
   margin-top: 24px;
}

.dt-ttd-route-card {
   position: relative;
   padding: 32px;
   border-radius: var(--dt-ttd-radius-lg);
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 48px rgba(255, 69, 0, 0.08);
   overflow: hidden;
   transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.dt-ttd-route-card::before {
   content: "";
   position: absolute;
   inset: auto -60px -80px auto;
   width: 190px;
   height: 190px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
   opacity: 0;
   transition: opacity 0.28s ease, transform 0.28s ease;
}

.dt-ttd-route-card:hover {
   transform: translateY(-8px);
   border-color: var(--dt-ttd-brand);
   box-shadow: var(--dt-ttd-shadow-strong);
}

.dt-ttd-route-card:hover::before {
   opacity: 1;
   transform: scale(1.1);
}

.dt-ttd-route-card-head {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 22px;
   position: relative;
   z-index: 0;
}

.dt-ttd-route-card-head span {
   width: 52px;
   height: 52px;
   flex: 0 0 52px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 17px;
   color: var(--dt-ttd-brand);
   background: var(--dt-ttd-brand-soft);
   border: 1px solid var(--dt-ttd-border);
}

.dt-ttd-route-card-head h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 0;
}

.dt-ttd-route-flow {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 22px;
   position: relative;
   z-index: 0;
}

.dt-ttd-route-flow span {
   display: inline-flex;
   align-items: center;
   min-height: 38px;
   padding: 0 14px;
   border-radius: var(--dt-ttd-radius-pill);
   background: #fff8f4;
   border: 1px solid rgba(255, 69, 0, 0.12);
   color: var(--dt-ttd-dark);
}

.dt-ttd-route-flow i {
   font-style: normal;
   color: var(--dt-ttd-brand);
}

.dt-ttd-route-card p {
   color: var(--dt-ttd-text);
   margin-bottom: 20px;
   position: relative;
   z-index: 0;
}

.dt-ttd-route-note {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 16px;
   border-radius: 18px;
   background: var(--dt-ttd-white);
   border: 1px dashed rgba(255, 69, 0, 0.28);
   color: var(--dt-ttd-dark);
   position: relative;
   z-index: 0;
}

.dt-ttd-route-note span {
   width: 10px;
   height: 10px;
   flex: 0 0 10px;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   box-shadow: 0 0 0 6px var(--dt-ttd-brand-soft);
   margin-top: 7px;
}

.dt-ttd-route-cta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   margin-top: 24px;
   padding: 34px;
   border-radius: var(--dt-ttd-radius-xl);
   background:
      linear-gradient(135deg, var(--dt-ttd-brand) 0%, var(--dt-ttd-brand-dark) 100%);
   color: var(--dt-ttd-white);
   position: relative;
   overflow: hidden;
}

.dt-ttd-route-cta::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px);
   background-size: 18px 18px;
   opacity: 0.28;
}

.dt-ttd-route-cta h3,
.dt-ttd-route-cta p,
.dt-ttd-route-cta a {
   position: relative;
   z-index: 0;
}

.dt-ttd-route-cta h3,
.dt-ttd-route-cta p {
   color: var(--dt-ttd-white);
}

.dt-ttd-route-cta p {
   margin-bottom: 0;
}

.dt-ttd-route-cta .dt-ttd-btn-primary {
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-brand);
   box-shadow: none;
   flex: 0 0 auto;
}

.dt-ttd-route-cta .dt-ttd-btn-primary:hover {
   background: var(--dt-ttd-dark);
   color: var(--dt-ttd-white);
}

@media (max-width: 991px) {
   .dt-ttd-route-warning {
      margin-top: 10px;
   }

   .dt-ttd-route-grid {
      grid-template-columns: 1fr;
   }

   .dt-ttd-route-cta {
      align-items: flex-start;
      flex-direction: column;
   }
}

@media (max-width: 575px) {
   .dt-ttd-route-warning {
      flex-direction: column;
      padding: 24px;
   }

   .dt-ttd-route-card {
      padding: 26px;
   }

   .dt-ttd-route-card-head {
      align-items: flex-start;
      flex-direction: column;
   }

   .dt-ttd-route-cta {
      padding: 26px;
      border-radius: var(--dt-ttd-radius-lg);
   }
}
/* Traffic, Parking & Fine Awareness */

.dt-ttd-traffic {
   background:
      radial-gradient(circle at 12% 18%, var(--dt-ttd-brand-soft), transparent 30%),
      linear-gradient(180deg, #fff8f4 0%, #ffffff 100%);
}

.dt-ttd-traffic-alert {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 20px;
   border-radius: var(--dt-ttd-radius-lg);
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-dark);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 48px rgba(255, 69, 0, 0.08);
   margin-bottom: 46px;
}

.dt-ttd-traffic-alert span {
   width: 34px;
   height: 34px;
   flex: 0 0 34px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   color: var(--dt-ttd-white);
}

.dt-ttd-traffic-layout {
   display: grid;
   grid-template-columns: 1.05fr 0.95fr;
   gap: 24px;
   align-items: stretch;
}

.dt-ttd-traffic-main,
.dt-ttd-traffic-side {
   min-height: 100%;
}

.dt-ttd-traffic-map-card {
   position: relative;
   min-height: 100%;
   padding: 36px;
   border-radius: var(--dt-ttd-radius-xl);
   background:
      radial-gradient(circle at 50% 50%, rgba(255, 69, 0, 0.08), transparent 42%),
      linear-gradient(135deg, #ffffff 0%, #fff8f4 100%);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 50px rgba(255, 69, 0, 0.09);
   overflow: hidden;
}

.dt-ttd-traffic-map-card::before {
   content: "";
   position: absolute;
   inset: 22px;
   border: 1px dashed rgba(255, 69, 0, 0.22);
   border-radius: 30px;
}

.dt-ttd-traffic-map-line {
   position: absolute;
   left: 12%;
   top: 50%;
   width: 76%;
   height: 3px;
   background: linear-gradient(90deg, var(--dt-ttd-brand), rgba(255, 69, 0, 0.08));
   transform: rotate(-10deg);
   border-radius: var(--dt-ttd-radius-pill);
}

.dt-ttd-traffic-map-line::before,
.dt-ttd-traffic-map-line::after {
   content: "";
   position: absolute;
   width: 28%;
   height: 3px;
   background: linear-gradient(90deg, rgba(255, 69, 0, 0.08), var(--dt-ttd-brand));
   border-radius: var(--dt-ttd-radius-pill);
}

.dt-ttd-traffic-map-line::before {
   left: 18%;
   top: -58px;
   transform: rotate(34deg);
}

.dt-ttd-traffic-map-line::after {
   right: 18%;
   top: 58px;
   transform: rotate(34deg);
}

.dt-ttd-traffic-point {
   position: absolute;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 9px 13px;
   border-radius: var(--dt-ttd-radius-pill);
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-dark);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 14px 34px rgba(255, 69, 0, 0.12);
   z-index: 0;
   animation: dtTtdPointPulse 2.8s ease-in-out infinite;
}

.dt-ttd-traffic-point span {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   box-shadow: 0 0 0 6px var(--dt-ttd-brand-soft);
}

.dt-point-one {
   left: 9%;
   top: 22%;
}

.dt-point-two {
   right: 18%;
   top: 20%;
   animation-delay: 0.3s;
}

.dt-point-three {
   left: 14%;
   bottom: 24%;
   animation-delay: 0.6s;
}

.dt-point-four {
   right: 10%;
   bottom: 20%;
   animation-delay: 0.9s;
}

.dt-ttd-traffic-center {
   position: relative;
   z-index: 3;
   max-width: 420px;
   margin: 150px auto;
   padding: 30px;
   border-radius: var(--dt-ttd-radius-lg);
   background: rgba(255, 255, 255, 0.86);
   border: 1px solid var(--dt-ttd-border);
   backdrop-filter: blur(12px);
   text-align: center;
}

.dt-ttd-traffic-center h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 12px;
}

.dt-ttd-traffic-center p {
   color: var(--dt-ttd-text);
   margin-bottom: 0;
}

.dt-ttd-traffic-side {
   display: grid;
   gap: 16px;
}

.dt-ttd-traffic-tip {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 24px;
   border-radius: var(--dt-ttd-radius-lg);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 46px rgba(255, 69, 0, 0.07);
   transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.dt-ttd-traffic-tip:hover {
   transform: translateY(-6px);
   border-color: var(--dt-ttd-brand);
   box-shadow: var(--dt-ttd-shadow-strong);
}

.dt-ttd-traffic-tip-icon {
   width: 48px;
   height: 48px;
   flex: 0 0 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 16px;
   color: var(--dt-ttd-brand);
   background: var(--dt-ttd-brand-soft);
   border: 1px solid var(--dt-ttd-border);
}

.dt-ttd-traffic-tip h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 8px;
}

.dt-ttd-traffic-tip p {
   color: var(--dt-ttd-text);
   margin-bottom: 0;
}

.dt-ttd-fine-awareness {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   gap: 24px;
   margin-top: 24px;
   padding: 34px;
   border-radius: var(--dt-ttd-radius-xl);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 48px rgba(255, 69, 0, 0.08);
   position: relative;
   overflow: hidden;
}

.dt-ttd-fine-awareness::before {
   content: "";
   position: absolute;
   right: -90px;
   top: -90px;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
}

.dt-ttd-fine-content,
.dt-ttd-fine-list {
   position: relative;
   z-index: 0;
}

.dt-ttd-fine-content h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 14px;
}

.dt-ttd-fine-content p {
   color: var(--dt-ttd-text);
   margin-bottom: 0;
}

.dt-ttd-fine-list {
   display: grid;
   gap: 12px;
}

.dt-ttd-fine-list div {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 16px;
   border-radius: 18px;
   background: #fff8f4;
   color: var(--dt-ttd-dark);
   border: 1px solid rgba(255, 69, 0, 0.12);
}

.dt-ttd-fine-list span {
   width: 10px;
   height: 10px;
   flex: 0 0 10px;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   box-shadow: 0 0 0 6px var(--dt-ttd-brand-soft);
   margin-top: 7px;
}

.dt-ttd-traffic-cta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   margin-top: 24px;
   padding: 34px;
   border-radius: var(--dt-ttd-radius-xl);
   background:
      linear-gradient(135deg, var(--dt-ttd-brand) 0%, var(--dt-ttd-brand-dark) 100%);
   color: var(--dt-ttd-white);
   position: relative;
   overflow: hidden;
}

.dt-ttd-traffic-cta::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px);
   background-size: 18px 18px;
   opacity: 0.28;
}

.dt-ttd-traffic-cta h3,
.dt-ttd-traffic-cta p,
.dt-ttd-traffic-cta a {
   position: relative;
   z-index: 0;
}

.dt-ttd-traffic-cta h3,
.dt-ttd-traffic-cta p {
   color: var(--dt-ttd-white);
}

.dt-ttd-traffic-cta p {
   margin-bottom: 0;
}

.dt-ttd-traffic-cta .dt-ttd-btn-primary {
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-brand);
   box-shadow: none;
   flex: 0 0 auto;
}

.dt-ttd-traffic-cta .dt-ttd-btn-primary:hover {
   background: var(--dt-ttd-dark);
   color: var(--dt-ttd-white);
}

@keyframes dtTtdPointPulse {
   0%, 100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-6px);
   }
}

@media (max-width: 1199px) {
   .dt-ttd-traffic-layout,
   .dt-ttd-fine-awareness {
      grid-template-columns: 1fr;
   }

   .dt-ttd-traffic-map-card {
      min-height: 540px;
   }
}

@media (max-width: 991px) {
   .dt-ttd-traffic-alert {
      margin-bottom: 34px;
   }

   .dt-ttd-traffic-cta {
      align-items: flex-start;
      flex-direction: column;
   }
}

@media (max-width: 575px) {
   .dt-ttd-traffic-map-card {
      min-height: auto;
      padding: 26px;
   }

   .dt-ttd-traffic-map-card::before,
   .dt-ttd-traffic-map-line,
   .dt-ttd-traffic-point {
      display: none;
   }

   .dt-ttd-traffic-center {
      margin: 0;
      padding: 26px;
      text-align: left;
   }

   .dt-ttd-traffic-tip {
      flex-direction: column;
      padding: 24px;
   }

   .dt-ttd-fine-awareness,
   .dt-ttd-traffic-cta {
      padding: 26px;
      border-radius: var(--dt-ttd-radius-lg);
   }
}
/* Best Time Section */

.dt-ttd-best-time {
   background:
      radial-gradient(circle at 85% 12%, var(--dt-ttd-brand-soft), transparent 28%),
      linear-gradient(180deg, #ffffff 0%, #fff8f4 100%);
}

.dt-ttd-time-board {
   border-radius: var(--dt-ttd-radius-xl);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 50px rgba(255, 69, 0, 0.08);
   overflow: hidden;
}

.dt-ttd-time-row {
   display: grid;
   grid-template-columns: 1fr 1fr 1.15fr 1.45fr;
   border-bottom: 1px solid rgba(255, 69, 0, 0.1);
   transition: background 0.25s ease, transform 0.25s ease;
}

.dt-ttd-time-row:last-child {
   border-bottom: 0;
}

.dt-ttd-time-row > div {
   padding: 22px;
   color: var(--dt-ttd-text);
   border-right: 1px solid rgba(255, 69, 0, 0.1);
}

.dt-ttd-time-row > div:last-child {
   border-right: 0;
}

.dt-ttd-time-row:not(.dt-ttd-time-head):hover {
   background: #fff8f4;
   transform: scale(1.006);
}

.dt-ttd-time-head {
   background:
      linear-gradient(135deg, var(--dt-ttd-brand) 0%, var(--dt-ttd-brand-dark) 100%);
}

.dt-ttd-time-head > div {
   color: var(--dt-ttd-white);
   border-right-color: rgba(255, 255, 255, 0.18);
}

.dt-ttd-time-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 6px 11px;
   border-radius: var(--dt-ttd-radius-pill);
   color: var(--dt-ttd-brand);
   background: var(--dt-ttd-brand-soft);
   border: 1px solid var(--dt-ttd-border);
   margin-right: 10px;
}

.dt-ttd-time-insight-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px;
   margin-top: 24px;
}

.dt-ttd-time-insight {
   position: relative;
   padding: 28px;
   border-radius: var(--dt-ttd-radius-lg);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 46px rgba(255, 69, 0, 0.07);
   overflow: hidden;
   transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.dt-ttd-time-insight::before {
   content: "";
   position: absolute;
   right: -70px;
   top: -70px;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
   opacity: 0;
   transition: opacity 0.28s ease, transform 0.28s ease;
}

.dt-ttd-time-insight:hover {
   transform: translateY(-7px);
   border-color: var(--dt-ttd-brand);
   box-shadow: var(--dt-ttd-shadow-strong);
}

.dt-ttd-time-insight:hover::before {
   opacity: 1;
   transform: scale(1.12);
}

.dt-ttd-time-insight-icon {
   width: 54px;
   height: 54px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   background: var(--dt-ttd-brand-soft);
   color: var(--dt-ttd-brand);
   border: 1px solid var(--dt-ttd-border);
   margin-bottom: 20px;
   position: relative;
   z-index: 0;
}

.dt-ttd-time-insight h3,
.dt-ttd-time-insight p {
   position: relative;
   z-index: 0;
}

.dt-ttd-time-insight h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 12px;
}

.dt-ttd-time-insight p {
   color: var(--dt-ttd-text);
   margin-bottom: 0;
}

@media (max-width: 1199px) {
   .dt-ttd-time-row {
      grid-template-columns: 1fr 1fr;
   }

   .dt-ttd-time-row > div:nth-child(2) {
      border-right: 0;
   }

   .dt-ttd-time-row > div:nth-child(1),
   .dt-ttd-time-row > div:nth-child(2) {
      border-bottom: 1px solid rgba(255, 69, 0, 0.1);
   }

   .dt-ttd-time-head > div:nth-child(1),
   .dt-ttd-time-head > div:nth-child(2) {
      border-bottom-color: rgba(255, 255, 255, 0.18);
   }
}

@media (max-width: 991px) {
   .dt-ttd-time-insight-grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 575px) {
   .dt-ttd-time-board {
      border-radius: var(--dt-ttd-radius-lg);
   }

   .dt-ttd-time-row {
      grid-template-columns: 1fr;
   }

   .dt-ttd-time-row > div {
      border-right: 0;
      border-bottom: 1px solid rgba(255, 69, 0, 0.1);
   }

   .dt-ttd-time-row > div:last-child {
      border-bottom: 0;
   }

   .dt-ttd-time-head {
      display: none;
   }

   .dt-ttd-time-row {
      margin-bottom: 14px;
      border: 1px solid rgba(255, 69, 0, 0.12);
      border-radius: var(--dt-ttd-radius-lg);
      overflow: hidden;
      background: var(--dt-ttd-white);
   }

   .dt-ttd-time-row:last-child {
      margin-bottom: 0;
   }

   .dt-ttd-time-row:not(.dt-ttd-time-head):hover {
      transform: none;
   }

   .dt-ttd-time-insight {
      padding: 26px;
   }
}

/* What Not To Do / Mistakes Section */

.dt-ttd-mistakes {
   background:
      radial-gradient(circle at 10% 18%, var(--dt-ttd-brand-soft), transparent 28%),
      linear-gradient(180deg, #fff8f4 0%, #ffffff 100%);
}

.dt-ttd-mistake-feature {
   display: flex;
   align-items: flex-start;
   gap: 18px;
   padding: 28px;
   border-radius: var(--dt-ttd-radius-lg);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 48px rgba(255, 69, 0, 0.08);
   position: relative;
   overflow: hidden;
}

.dt-ttd-mistake-feature::before {
   content: "";
   position: absolute;
   right: -80px;
   top: -80px;
   width: 190px;
   height: 190px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
}

.dt-ttd-mistake-feature-icon {
   width: 56px;
   height: 56px;
   flex: 0 0 56px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   background: var(--dt-ttd-brand);
   color: var(--dt-ttd-white);
   box-shadow: 0 14px 32px rgba(255, 69, 0, 0.24);
   position: relative;
   z-index: 0;
}

.dt-ttd-mistake-feature h3,
.dt-ttd-mistake-feature p {
   position: relative;
   z-index: 0;
}

.dt-ttd-mistake-feature h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 10px;
}

.dt-ttd-mistake-feature p {
   color: var(--dt-ttd-text);
   margin-bottom: 0;
}

.dt-ttd-mistake-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px;
   margin-top: 24px;
}

.dt-ttd-mistake-card {
   position: relative;
   padding: 28px;
   border-radius: var(--dt-ttd-radius-lg);
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 46px rgba(255, 69, 0, 0.07);
   overflow: hidden;
   transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.dt-ttd-mistake-card::before {
   content: "";
   position: absolute;
   right: -70px;
   top: -70px;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
   opacity: 0;
   transition: opacity 0.28s ease, transform 0.28s ease;
}

.dt-ttd-mistake-card:hover {
   transform: translateY(-8px);
   border-color: var(--dt-ttd-brand);
   box-shadow: var(--dt-ttd-shadow-strong);
}

.dt-ttd-mistake-card:hover::before {
   opacity: 1;
   transform: scale(1.12);
}

.dt-ttd-mistake-number {
   width: 50px;
   height: 50px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 17px;
   background: var(--dt-ttd-brand-soft);
   color: var(--dt-ttd-brand);
   border: 1px solid var(--dt-ttd-border);
   margin-bottom: 20px;
   position: relative;
   z-index: 0;
}

.dt-ttd-mistake-card h3,
.dt-ttd-mistake-card p,
.dt-ttd-mistake-fix {
   position: relative;
   z-index: 0;
}

.dt-ttd-mistake-card h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 12px;
}

.dt-ttd-mistake-card p {
   color: var(--dt-ttd-text);
   margin-bottom: 18px;
}

.dt-ttd-mistake-fix {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   padding: 14px;
   border-radius: 16px;
   background: #fff8f4;
   color: var(--dt-ttd-dark);
   border: 1px dashed rgba(255, 69, 0, 0.28);
}

.dt-ttd-mistake-fix span {
   width: 9px;
   height: 9px;
   flex: 0 0 9px;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   box-shadow: 0 0 0 6px var(--dt-ttd-brand-soft);
   margin-top: 7px;
}

.dt-ttd-mistake-cta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   margin-top: 24px;
   padding: 34px;
   border-radius: var(--dt-ttd-radius-xl);
   background:
      linear-gradient(135deg, var(--dt-ttd-brand) 0%, var(--dt-ttd-brand-dark) 100%);
   color: var(--dt-ttd-white);
   position: relative;
   overflow: hidden;
}

.dt-ttd-mistake-cta::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px);
   background-size: 18px 18px;
   opacity: 0.28;
}

.dt-ttd-mistake-cta h3,
.dt-ttd-mistake-cta p,
.dt-ttd-mistake-cta a {
   position: relative;
   z-index: 0;
}

.dt-ttd-mistake-cta h3,
.dt-ttd-mistake-cta p {
   color: var(--dt-ttd-white);
}

.dt-ttd-mistake-cta p {
   margin-bottom: 0;
}

.dt-ttd-mistake-cta .dt-ttd-btn-primary {
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-brand);
   box-shadow: none;
   flex: 0 0 auto;
}

.dt-ttd-mistake-cta .dt-ttd-btn-primary:hover {
   background: var(--dt-ttd-dark);
   color: var(--dt-ttd-white);
}

@media (max-width: 1199px) {
   .dt-ttd-mistake-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 991px) {
   .dt-ttd-mistake-feature {
      margin-top: 10px;
   }

   .dt-ttd-mistake-cta {
      align-items: flex-start;
      flex-direction: column;
   }
}

@media (max-width: 575px) {
   .dt-ttd-mistake-feature {
      flex-direction: column;
      padding: 24px;
   }

   .dt-ttd-mistake-grid {
      grid-template-columns: 1fr;
   }

   .dt-ttd-mistake-card {
      padding: 26px;
   }

   .dt-ttd-mistake-cta {
      padding: 26px;
      border-radius: var(--dt-ttd-radius-lg);
   }
}
/* Itinerary Section */

.dt-ttd-itinerary {
   background:
      radial-gradient(circle at 85% 12%, var(--dt-ttd-brand-soft), transparent 28%),
      linear-gradient(180deg, #ffffff 0%, #fff8f4 100%);
}

.dt-ttd-itinerary-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px;
}

.dt-ttd-itinerary-card {
   position: relative;
   padding: 32px;
   border-radius: var(--dt-ttd-radius-xl);
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 48px rgba(255, 69, 0, 0.08);
   overflow: hidden;
   transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.dt-ttd-itinerary-card::before {
   content: "";
   position: absolute;
   right: -90px;
   top: -90px;
   width: 210px;
   height: 210px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
   opacity: 0;
   transition: opacity 0.28s ease, transform 0.28s ease;
}

.dt-ttd-itinerary-card:hover {
   transform: translateY(-8px);
   border-color: var(--dt-ttd-brand);
   box-shadow: var(--dt-ttd-shadow-strong);
}

.dt-ttd-itinerary-card:hover::before {
   opacity: 1;
   transform: scale(1.12);
}

.dt-ttd-itinerary-featured {
   border-color: var(--dt-ttd-brand);
   box-shadow: var(--dt-ttd-shadow);
}

.dt-ttd-itinerary-ribbon {
   position: absolute;
   right: 22px;
   top: 22px;
   z-index: 3;
   padding: 8px 14px;
   border-radius: var(--dt-ttd-radius-pill);
   background: var(--dt-ttd-brand);
   color: var(--dt-ttd-white);
}

.dt-ttd-itinerary-top {
   position: relative;
   z-index: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   margin-bottom: 24px;
   padding-right: 0;
}

.dt-ttd-itinerary-featured .dt-ttd-itinerary-top {
   padding-right: 116px;
}

.dt-ttd-itinerary-top span {
   width: 64px;
   height: 64px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 20px;
   background: var(--dt-ttd-brand-soft);
   color: var(--dt-ttd-brand);
   border: 1px solid var(--dt-ttd-border);
   flex: 0 0 64px;
}

.dt-ttd-itinerary-top div {
   color: var(--dt-ttd-brand-dark);
   text-align: right;
}

.dt-ttd-itinerary-card h3,
.dt-ttd-itinerary-card p,
.dt-ttd-itinerary-flow,
.dt-ttd-itinerary-warning,
.dt-ttd-itinerary-card a {
   position: relative;
   z-index: 0;
}

.dt-ttd-itinerary-card h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 14px;
}

.dt-ttd-itinerary-card p {
   color: var(--dt-ttd-text);
   margin-bottom: 22px;
}

.dt-ttd-itinerary-flow {
   display: grid;
   gap: 12px;
   margin-bottom: 22px;
}

.dt-ttd-itinerary-flow div {
   padding: 16px;
   border-radius: 18px;
   background: #fff8f4;
   border: 1px solid rgba(255, 69, 0, 0.12);
   color: var(--dt-ttd-dark);
}

.dt-ttd-itinerary-flow span {
   display: block;
   color: var(--dt-ttd-brand);
   margin-bottom: 6px;
}

.dt-ttd-itinerary-warning {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 16px;
   border-radius: 18px;
   background: var(--dt-ttd-white);
   border: 1px dashed rgba(255, 69, 0, 0.28);
   color: var(--dt-ttd-dark);
   margin-bottom: 22px;
}

.dt-ttd-itinerary-warning span {
   width: 10px;
   height: 10px;
   flex: 0 0 10px;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   box-shadow: 0 0 0 6px var(--dt-ttd-brand-soft);
   margin-top: 7px;
}

.dt-ttd-itinerary-builder {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   margin-top: 24px;
   padding: 34px;
   border-radius: var(--dt-ttd-radius-xl);
   background:
      linear-gradient(135deg, var(--dt-ttd-brand) 0%, var(--dt-ttd-brand-dark) 100%);
   color: var(--dt-ttd-white);
   position: relative;
   overflow: hidden;
}

.dt-ttd-itinerary-builder::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px);
   background-size: 18px 18px;
   opacity: 0.28;
}

.dt-ttd-itinerary-builder-content,
.dt-ttd-itinerary-builder-actions {
   position: relative;
   z-index: 0;
}

.dt-ttd-itinerary-builder h3,
.dt-ttd-itinerary-builder p {
   color: var(--dt-ttd-white);
}

.dt-ttd-itinerary-builder p {
   margin-bottom: 0;
}

.dt-ttd-itinerary-builder .dt-ttd-card-tag {
   background: rgba(255, 255, 255, 0.18);
   color: var(--dt-ttd-white);
   border: 1px solid rgba(255, 255, 255, 0.22);
}

.dt-ttd-itinerary-builder-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   flex: 0 0 auto;
}

.dt-ttd-itinerary-builder .dt-ttd-btn-primary {
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-brand);
   box-shadow: none;
}

.dt-ttd-itinerary-builder .dt-ttd-btn-primary:hover {
   background: var(--dt-ttd-dark);
   color: var(--dt-ttd-white);
}

.dt-ttd-itinerary-builder .dt-ttd-btn-secondary {
   background: rgba(255, 255, 255, 0.12);
   color: var(--dt-ttd-white);
   border-color: rgba(255, 255, 255, 0.28);
}

.dt-ttd-itinerary-builder .dt-ttd-btn-secondary:hover {
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-brand);
   border-color: var(--dt-ttd-white);
}

@media (max-width: 1199px) {
   .dt-ttd-itinerary-grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 991px) {
   .dt-ttd-itinerary-builder {
      align-items: flex-start;
      flex-direction: column;
   }

   .dt-ttd-itinerary-builder-actions {
      width: 100%;
   }

   .dt-ttd-itinerary-builder-actions .dt-ttd-btn {
      flex: 1 1 auto;
   }
}

@media (max-width: 575px) {
   .dt-ttd-itinerary-card,
   .dt-ttd-itinerary-builder {
      padding: 26px;
      border-radius: var(--dt-ttd-radius-lg);
   }

   .dt-ttd-itinerary-top {
      align-items: flex-start;
      flex-direction: column;
   }

   .dt-ttd-itinerary-top div {
      text-align: left;
   }

   .dt-ttd-itinerary-featured .dt-ttd-itinerary-top {
      padding-right: 0;
      padding-top: 42px;
   }

   .dt-ttd-itinerary-ribbon {
      left: 22px;
      right: auto;
   }

   .dt-ttd-itinerary-builder-actions {
      flex-direction: column;
   }
}
/* Food, Tea & Shopping */

.dt-ttd-food-shopping {
   background:
      radial-gradient(circle at 12% 14%, var(--dt-ttd-brand-soft), transparent 30%),
      linear-gradient(180deg, #fff8f4 0%, #ffffff 100%);
}

.dt-ttd-food-layout {
   display: grid;
   grid-template-columns: 0.85fr 1.15fr;
   gap: 24px;
   align-items: stretch;
}

.dt-ttd-food-feature {
   position: relative;
   min-height: 100%;
   padding: 36px;
   border-radius: var(--dt-ttd-radius-xl);
   background:
      linear-gradient(135deg, var(--dt-ttd-brand) 0%, var(--dt-ttd-brand-dark) 100%);
   color: var(--dt-ttd-white);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.dt-ttd-food-feature-bg {
   position: absolute;
   inset: 0;
   background-image:
      radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px);
   background-size: 18px 18px;
   opacity: 0.28;
}

.dt-ttd-food-feature::before {
   content: "";
   position: absolute;
   right: -100px;
   top: -100px;
   width: 260px;
   height: 260px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.12);
}

.dt-ttd-food-feature::after {
   content: "";
   position: absolute;
   left: -80px;
   bottom: -80px;
   width: 190px;
   height: 190px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
}

.dt-ttd-food-feature .dt-ttd-card-tag {
   background: rgba(255, 255, 255, 0.18);
   color: var(--dt-ttd-white);
   border: 1px solid rgba(255, 255, 255, 0.22);
}

.dt-ttd-food-feature h3,
.dt-ttd-food-feature p,
.dt-ttd-food-feature .dt-ttd-card-tag,
.dt-ttd-food-mini-grid,
.dt-ttd-food-feature a {
   position: relative;
   z-index: 0;
}

.dt-ttd-food-feature h3,
.dt-ttd-food-feature p {
   color: var(--dt-ttd-white);
}

.dt-ttd-food-feature p {
   margin-bottom: 24px;
}

.dt-ttd-food-mini-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
   margin-bottom: 26px;
}

.dt-ttd-food-mini-grid div {
   padding: 16px;
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.18);
   color: var(--dt-ttd-white);
}

.dt-ttd-food-mini-grid span {
   display: block;
   margin-bottom: 6px;
   opacity: 0.82;
}

.dt-ttd-food-feature .dt-ttd-btn-primary {
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-brand);
   box-shadow: none;
   align-self: flex-start;
}

.dt-ttd-food-feature .dt-ttd-btn-primary:hover {
   background: var(--dt-ttd-dark);
   color: var(--dt-ttd-white);
}

.dt-ttd-food-cards {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px;
}

.dt-ttd-food-card {
   position: relative;
   padding: 30px;
   border-radius: var(--dt-ttd-radius-lg);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 46px rgba(255, 69, 0, 0.07);
   overflow: hidden;
   transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.dt-ttd-food-card::before {
   content: "";
   position: absolute;
   right: -70px;
   top: -70px;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
   opacity: 0;
   transition: opacity 0.28s ease, transform 0.28s ease;
}

.dt-ttd-food-card:hover {
   transform: translateY(-8px);
   border-color: var(--dt-ttd-brand);
   box-shadow: var(--dt-ttd-shadow-strong);
}

.dt-ttd-food-card:hover::before {
   opacity: 1;
   transform: scale(1.12);
}

.dt-ttd-food-icon {
   width: 54px;
   height: 54px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   background: var(--dt-ttd-brand-soft);
   color: var(--dt-ttd-brand);
   border: 1px solid var(--dt-ttd-border);
   margin-bottom: 20px;
   position: relative;
   z-index: 0;
}

.dt-ttd-food-card h3,
.dt-ttd-food-card p,
.dt-ttd-food-tags {
   position: relative;
   z-index: 0;
}

.dt-ttd-food-card h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 12px;
}

.dt-ttd-food-card p {
   color: var(--dt-ttd-text);
   margin-bottom: 18px;
}

.dt-ttd-food-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
}

.dt-ttd-food-tags span {
   display: inline-flex;
   align-items: center;
   min-height: 34px;
   padding: 0 12px;
   border-radius: var(--dt-ttd-radius-pill);
   background: #fff8f4;
   color: var(--dt-ttd-brand-dark);
   border: 1px solid rgba(255, 69, 0, 0.12);
}

.dt-ttd-shopping-advice {
   margin-top: 24px;
   padding: 34px;
   border-radius: var(--dt-ttd-radius-xl);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 48px rgba(255, 69, 0, 0.08);
   position: relative;
   overflow: hidden;
}

.dt-ttd-shopping-advice::before {
   content: "";
   position: absolute;
   right: -80px;
   top: -80px;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
}

.dt-ttd-shopping-advice-head {
   display: flex;
   align-items: flex-start;
   gap: 18px;
   margin-bottom: 24px;
   position: relative;
   z-index: 0;
}

.dt-ttd-shopping-icon {
   width: 56px;
   height: 56px;
   flex: 0 0 56px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   background: var(--dt-ttd-brand);
   color: var(--dt-ttd-white);
   box-shadow: 0 14px 32px rgba(255, 69, 0, 0.24);
}

.dt-ttd-shopping-advice h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 10px;
}

.dt-ttd-shopping-advice p {
   color: var(--dt-ttd-text);
   margin-bottom: 0;
}

.dt-ttd-shopping-checks {
   position: relative;
   z-index: 0;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 12px;
}

.dt-ttd-shopping-checks div {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   padding: 16px;
   border-radius: 18px;
   background: #fff8f4;
   color: var(--dt-ttd-dark);
   border: 1px solid rgba(255, 69, 0, 0.12);
}

.dt-ttd-shopping-checks span {
   width: 9px;
   height: 9px;
   flex: 0 0 9px;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   box-shadow: 0 0 0 6px var(--dt-ttd-brand-soft);
   margin-top: 7px;
}

@media (max-width: 1199px) {
   .dt-ttd-food-layout {
      grid-template-columns: 1fr;
   }

   .dt-ttd-shopping-checks {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 767px) {
   .dt-ttd-food-cards {
      grid-template-columns: 1fr;
   }

   .dt-ttd-food-mini-grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 575px) {
   .dt-ttd-food-feature,
   .dt-ttd-food-card,
   .dt-ttd-shopping-advice {
      padding: 26px;
      border-radius: var(--dt-ttd-radius-lg);
   }

   .dt-ttd-shopping-advice-head {
      flex-direction: column;
   }

   .dt-ttd-shopping-checks {
      grid-template-columns: 1fr;
   }
}

/* Why Plan With Us */

.dt-ttd-why-us {
   background:
      radial-gradient(circle at 12% 18%, var(--dt-ttd-brand-soft), transparent 30%),
      linear-gradient(180deg, #ffffff 0%, #fff8f4 100%);
}

.dt-ttd-why-content {
   position: relative;
}

.dt-ttd-why-content h2 {
   color: var(--dt-ttd-dark);
   margin-bottom: 18px;
}

.dt-ttd-why-content p {
   color: var(--dt-ttd-text);
   margin-bottom: 24px;
}

.dt-ttd-why-highlight {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 20px;
   border-radius: var(--dt-ttd-radius-lg);
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-dark);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 46px rgba(255, 69, 0, 0.07);
   margin-bottom: 28px;
}

.dt-ttd-why-highlight span {
   width: 12px;
   height: 12px;
   flex: 0 0 12px;
   border-radius: 50%;
   background: var(--dt-ttd-brand);
   box-shadow: 0 0 0 7px var(--dt-ttd-brand-soft);
   margin-top: 7px;
}

.dt-ttd-why-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
}

.dt-ttd-why-proof-wrap {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px;
   position: relative;
}

.dt-ttd-why-proof-wrap::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
   width: 260px;
   height: 260px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
   transform: translate(-50%, -50%);
   filter: blur(4px);
   pointer-events: none;
}

.dt-ttd-why-proof-card {
   position: relative;
   z-index: 0;
   padding: 28px;
   border-radius: var(--dt-ttd-radius-lg);
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 46px rgba(255, 69, 0, 0.07);
   overflow: hidden;
   transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.dt-ttd-why-proof-card::before {
   content: "";
   position: absolute;
   right: -70px;
   top: -70px;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
   opacity: 0;
   transition: opacity 0.28s ease, transform 0.28s ease;
}

.dt-ttd-why-proof-card:hover {
   transform: translateY(-8px);
   border-color: var(--dt-ttd-brand);
   box-shadow: var(--dt-ttd-shadow-strong);
}

.dt-ttd-why-proof-card:hover::before {
   opacity: 1;
   transform: scale(1.12);
}

.dt-ttd-why-proof-icon {
   width: 54px;
   height: 54px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   background: var(--dt-ttd-brand-soft);
   color: var(--dt-ttd-brand);
   border: 1px solid var(--dt-ttd-border);
   margin-bottom: 20px;
   position: relative;
   z-index: -1;
}

.dt-ttd-why-proof-card h3,
.dt-ttd-why-proof-card p {
   position: relative;
   z-index: 0;
}

.dt-ttd-why-proof-card h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 12px;
}

.dt-ttd-why-proof-card p {
   color: var(--dt-ttd-text);
   margin-bottom: 0;
}

.dt-ttd-why-strip {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
   margin-top: 34px;
   padding: 22px;
   border-radius: var(--dt-ttd-radius-xl);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 46px rgba(255, 69, 0, 0.07);
}

.dt-ttd-why-strip-item {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 10px 15px;
   border-radius: var(--dt-ttd-radius-pill);
   color: var(--dt-ttd-dark);
   background: #fff8f4;
   border: 1px solid rgba(255, 69, 0, 0.12);
}

.dt-ttd-why-strip-item span {
   color: var(--dt-ttd-brand);
}

@media (max-width: 991px) {
   .dt-ttd-why-proof-wrap {
      margin-top: 36px;
   }
}

@media (max-width: 767px) {
   .dt-ttd-why-proof-wrap {
      grid-template-columns: 1fr;
   }

   .dt-ttd-why-actions {
      flex-direction: column;
   }

   .dt-ttd-why-actions .dt-ttd-btn {
      width: 100%;
   }
}

@media (max-width: 575px) {
   .dt-ttd-why-highlight,
   .dt-ttd-why-proof-card,
   .dt-ttd-why-strip {
      border-radius: var(--dt-ttd-radius-lg);
   }

   .dt-ttd-why-proof-card {
      padding: 26px;
   }
}

/* Lead Capture / Plan My Trip */

.dt-ttd-lead {
   background:
      radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.18), transparent 30%),
      linear-gradient(135deg, var(--dt-ttd-brand) 0%, var(--dt-ttd-brand-dark) 100%);
   position: relative;
   overflow: hidden;
}

.dt-ttd-lead::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1px);
   background-size: 20px 20px;
   opacity: 0.22;
}

.dt-ttd-lead::after {
   content: "";
   position: absolute;
   right: -140px;
   bottom: -140px;
   width: 380px;
   height: 380px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.12);
}

.dt-ttd-lead-wrap {
   position: relative;
   z-index: 0;
   display: grid;
   grid-template-columns: 0.9fr 1.1fr;
   gap: 34px;
   align-items: center;
}

.dt-ttd-lead-content .dt-ttd-kicker {
   background: rgba(255, 255, 255, 0.16);
   color: var(--dt-ttd-white);
   border-color: rgba(255, 255, 255, 0.24);
   box-shadow: none;
}

.dt-ttd-lead-content .dt-ttd-kicker span {
   background: var(--dt-ttd-white);
   box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18);
}

.dt-ttd-lead-content h2,
.dt-ttd-lead-content p {
   color: var(--dt-ttd-white);
}

.dt-ttd-lead-content h2 {
   margin-bottom: 18px;
}

.dt-ttd-lead-content p {
   margin-bottom: 26px;
}

.dt-ttd-lead-points {
   display: grid;
   gap: 12px;
   margin-bottom: 26px;
}

.dt-ttd-lead-points div {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 15px 16px;
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: var(--dt-ttd-white);
   backdrop-filter: blur(10px);
}

.dt-ttd-lead-points span {
   color: var(--dt-ttd-white);
}

.dt-ttd-lead-contact-card {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   padding: 20px;
   border-radius: var(--dt-ttd-radius-lg);
   background: rgba(255, 255, 255, 0.14);
   border: 1px solid rgba(255, 255, 255, 0.22);
   color: var(--dt-ttd-white);
   backdrop-filter: blur(12px);
}

.dt-ttd-lead-contact-card span {
   display: block;
   color: var(--dt-ttd-white);
   margin-bottom: 4px;
}

.dt-ttd-lead-contact-card a {
   color: var(--dt-ttd-white);
   white-space: nowrap;
}

.dt-ttd-lead-contact-card a:hover {
   color: var(--dt-ttd-dark);
}

.dt-ttd-lead-form-card {
   position: relative;
   padding: 36px;
   border-radius: var(--dt-ttd-radius-xl);
   background: var(--dt-ttd-white);
   border: 1px solid rgba(255, 255, 255, 0.24);
   box-shadow: 0 30px 90px rgba(0, 0, 0, 0.16);
   overflow: hidden;
}

.dt-ttd-lead-form-card::before {
   content: "";
   position: absolute;
   right: -90px;
   top: -90px;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
}

.dt-ttd-form-head,
.dt-ttd-lead-form {
   position: relative;
   z-index: 0;
}

.dt-ttd-form-head {
   margin-bottom: 24px;
}

.dt-ttd-form-head h3 {
   color: var(--dt-ttd-dark);
   margin-bottom: 10px;
}

.dt-ttd-form-head p {
   color: var(--dt-ttd-text);
   margin-bottom: 0;
}

.dt-ttd-form-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
}

.dt-ttd-form-group {
   display: grid;
   gap: 8px;
}

.dt-ttd-form-full {
   grid-column: 1 / -1;
}

.dt-ttd-form-group label {
   color: var(--dt-ttd-dark);
}

.dt-ttd-form-group input,
.dt-ttd-form-group select,
.dt-ttd-form-group textarea {
   width: 100%;
   min-height: 54px;
   padding: 0 16px;
   border-radius: 16px;
   border: 1px solid rgba(255, 69, 0, 0.16);
   background: #fff8f4;
   color: var(--dt-ttd-dark);
   outline: none;
   transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.dt-ttd-form-group textarea {
   min-height: 130px;
   padding-top: 15px;
   resize: vertical;
}

.dt-ttd-form-group input:focus,
.dt-ttd-form-group select:focus,
.dt-ttd-form-group textarea:focus {
   border-color: var(--dt-ttd-brand);
   background: var(--dt-ttd-white);
   box-shadow: 0 0 0 4px var(--dt-ttd-brand-soft);
}

.dt-ttd-submit-btn {
   width: 100%;
   margin-top: 18px;
   border: 0;
   cursor: pointer;
}

.dt-ttd-form-note {
   color: var(--dt-ttd-muted);
   margin: 14px 0 0;
   text-align: center;
}

@media (max-width: 1199px) {
   .dt-ttd-lead-wrap {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 767px) {
   .dt-ttd-form-grid {
      grid-template-columns: 1fr;
   }

   .dt-ttd-lead-contact-card {
      align-items: flex-start;
      flex-direction: column;
   }
}

@media (max-width: 575px) {
   .dt-ttd-lead-form-card {
      padding: 26px;
      border-radius: var(--dt-ttd-radius-lg);
   }
}

/* FAQ + Final CTA */

.dt-ttd-faq {
   background:
      radial-gradient(circle at 12% 12%, var(--dt-ttd-brand-soft), transparent 30%),
      linear-gradient(180deg, #fff8f4 0%, #ffffff 100%);
}

.dt-ttd-faq-layout {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   gap: 24px;
   align-items: start;
}

.dt-ttd-faq-card {
   padding: 24px;
   border-radius: var(--dt-ttd-radius-xl);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 50px rgba(255, 69, 0, 0.08);
}

.dt-ttd-faq-item {
   border: 1px solid rgba(255, 69, 0, 0.12);
   border-radius: 18px;
   overflow: hidden;
   margin-bottom: 12px;
   background: #fff8f4;
}

.dt-ttd-faq-item:last-child {
   margin-bottom: 0;
}

.dt-ttd-faq-btn {
   color: var(--dt-ttd-dark);
   background: var(--dt-ttd-white);
   box-shadow: none;
   padding: 20px;
}

.dt-ttd-faq-btn:not(.collapsed) {
   color: var(--dt-ttd-brand);
   background: #fff8f4;
   box-shadow: none;
}

.dt-ttd-faq-btn:focus {
   box-shadow: 0 0 0 4px var(--dt-ttd-brand-soft);
   border-color: var(--dt-ttd-brand);
}

.dt-ttd-faq-btn::after {
   filter: none;
}

.dt-ttd-faq-body {
   color: var(--dt-ttd-text);
   background: var(--dt-ttd-white);
   padding: 0 20px 20px;
}

.dt-ttd-faq-side {
   position: sticky;
   top: calc(var(--dt-ttd-sticky-top) + 110px);
   padding: 34px;
   border-radius: var(--dt-ttd-radius-xl);
   background:
      linear-gradient(135deg, var(--dt-ttd-brand) 0%, var(--dt-ttd-brand-dark) 100%);
   color: var(--dt-ttd-white);
   overflow: hidden;
}

.dt-ttd-faq-side::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px);
   background-size: 18px 18px;
   opacity: 0.28;
}

.dt-ttd-faq-side::after {
   content: "";
   position: absolute;
   right: -80px;
   top: -80px;
   width: 210px;
   height: 210px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.12);
}

.dt-ttd-faq-side .dt-ttd-card-tag,
.dt-ttd-faq-side h3,
.dt-ttd-faq-side p,
.dt-ttd-faq-side-list,
.dt-ttd-faq-side a {
   position: relative;
   z-index: 0;
}

.dt-ttd-faq-side .dt-ttd-card-tag {
   background: rgba(255, 255, 255, 0.18);
   color: var(--dt-ttd-white);
   border: 1px solid rgba(255, 255, 255, 0.22);
}

.dt-ttd-faq-side h3,
.dt-ttd-faq-side p {
   color: var(--dt-ttd-white);
}

.dt-ttd-faq-side h3 {
   margin-bottom: 14px;
}

.dt-ttd-faq-side p {
   margin-bottom: 22px;
}

.dt-ttd-faq-side-list {
   display: grid;
   gap: 12px;
   margin-bottom: 24px;
}

.dt-ttd-faq-side-list div {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 15px;
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.18);
   color: var(--dt-ttd-white);
}

.dt-ttd-faq-side-list span {
   width: 9px;
   height: 9px;
   flex: 0 0 9px;
   border-radius: 50%;
   background: var(--dt-ttd-white);
   box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.16);
   margin-top: 7px;
}

.dt-ttd-faq-side .dt-ttd-btn-primary {
   background: var(--dt-ttd-white);
   color: var(--dt-ttd-brand);
   box-shadow: none;
}

.dt-ttd-faq-side .dt-ttd-btn-primary:hover {
   background: var(--dt-ttd-dark);
   color: var(--dt-ttd-white);
}

.dt-ttd-final-cta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
   margin-top: 24px;
   padding: 40px;
   border-radius: var(--dt-ttd-radius-xl);
   background: var(--dt-ttd-white);
   border: 1px solid var(--dt-ttd-border);
   box-shadow: 0 18px 50px rgba(255, 69, 0, 0.08);
   position: relative;
   overflow: hidden;
}

.dt-ttd-final-cta::before {
   content: "";
   position: absolute;
   right: -100px;
   bottom: -100px;
   width: 260px;
   height: 260px;
   border-radius: 50%;
   background: var(--dt-ttd-brand-soft);
}

.dt-ttd-final-cta > div {
   position: relative;
   z-index: 0;
}

.dt-ttd-final-cta h2 {
   color: var(--dt-ttd-dark);
   margin-bottom: 14px;
}

.dt-ttd-final-cta p {
   color: var(--dt-ttd-text);
   margin-bottom: 0;
}

.dt-ttd-final-cta-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   flex: 0 0 auto;
}

@media (max-width: 1199px) {
   .dt-ttd-faq-layout {
      grid-template-columns: 1fr;
   }

   .dt-ttd-faq-side {
      position: relative;
      top: auto;
   }
}

@media (max-width: 991px) {
   .dt-ttd-final-cta {
      align-items: flex-start;
      flex-direction: column;
   }
}

@media (max-width: 575px) {
   .dt-ttd-faq-card,
   .dt-ttd-faq-side,
   .dt-ttd-final-cta {
      padding: 26px;
      border-radius: var(--dt-ttd-radius-lg);
   }

   .dt-ttd-final-cta-actions {
      flex-direction: column;
      width: 100%;
   }

   .dt-ttd-final-cta-actions .dt-ttd-btn {
      width: 100%;
   }
}