:root {
  --ddd-pink: #ff2daa;
  --ddd-magenta: #d51fff;
  --ddd-purple: #641bff;
  --ddd-gold: #ffd34d;
  --ddd-coral: #ff3b68;
  --ddd-black: #050505;
  --ddd-white: #ffffff;
  --ddd-soft: #fff5fb;
  --ddd-border: #ffd1e8;
  --ddd-text: #18181b;
}

.ddd-section,
.ddd-track-shell {
  padding: clamp(36px, 6vw, 84px) 20px;
}

.ddd-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.ddd-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 211, 77, .38), transparent 23%),
    radial-gradient(circle at 72% 12%, rgba(213, 31, 255, .42), transparent 28%),
    radial-gradient(circle at 88% 84%, rgba(255, 45, 170, .35), transparent 28%),
    linear-gradient(135deg, #050505 0%, #250024 34%, #ff2daa 72%, #ff3b68 100%);
  background-size: 140% 140%;
  color: var(--ddd-white);
  padding: clamp(44px, 8vw, 96px) 20px;
  animation: dddHeroGradient 12s ease-in-out infinite alternate;
}

.ddd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.15) 38%, transparent 56%);
  transform: translateX(-120%);
  animation: dddSweep 5.5s ease-in-out infinite;
  pointer-events: none;
}

.ddd-hero-shine {
  position: absolute;
  inset: auto -80px -120px auto;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,211,77,.46), transparent 62%);
  filter: blur(4px);
  animation: dddGlowFloat 7s ease-in-out infinite alternate;
  pointer-events: none;
}

.ddd-hero .ddd-wrap {
  position: relative;
  z-index: 2;
}

.ddd-hero h1 {
  color: var(--ddd-white);
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.02;
  margin: 0 0 16px;
  text-shadow: 0 8px 28px rgba(0,0,0,.38);
}

.ddd-hero p {
  max-width: 760px;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.45;
}

.ddd-dispatch-status {
  background: rgba(16,185,129,.94);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 18px;
  padding: 9px 14px;
  box-shadow: 0 10px 24px rgba(16,185,129,.22);
}

.ddd-eyebrow {
  color: var(--ddd-gold);
  font-size: 14px !important;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0 0 12px;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.ddd-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.ddd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none !important;
}

.ddd-btn-primary {
  background: linear-gradient(135deg, var(--ddd-pink), var(--ddd-magenta), var(--ddd-purple));
  box-shadow: 0 12px 28px rgba(213,31,255,.25);
  color: var(--ddd-white) !important;
}

.ddd-btn-dark {
  background: var(--ddd-black);
  color: var(--ddd-white) !important;
}

.ddd-btn-light {
  background: linear-gradient(135deg, #ffffff, #fff2b8);
  color: var(--ddd-black) !important;
}

.ddd-btn-outline {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.62);
  color: var(--ddd-white) !important;
  backdrop-filter: blur(8px);
}

.ddd-btn:hover {
  transform: translateY(-1px);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ddd-rainbow-btn {
  background: linear-gradient(90deg, #641bff, #ff2daa, #ffd34d, #16a34a, #06b6d4, #641bff) !important;
  background-size: 300% 100% !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(255,45,170,.24);
  animation: dddButtonFlow 5.5s linear infinite;
}

.ddd-track-shell .ddd-rainbow-btn,
.ddd-track-shell .ddd-rainbow-btn:hover {
  transform: none !important;
}

.ddd-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.ddd-trust-row span {
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: var(--ddd-white);
  font-size: 14px;
  font-weight: 800;
  padding: 8px 12px;
}

.ddd-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.ddd-ecosystem-section {
  background:
    linear-gradient(135deg, #fff5fb 0%, #ffffff 48%, #fff9e6 100%);
}

.ddd-section-copy {
  color: #3f3f46;
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 880px;
}

.ddd-service-card {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--ddd-pink), var(--ddd-gold), var(--ddd-purple)) border-box;
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(255,45,170,.08);
}

.ddd-service-card:hover {
  box-shadow: 0 14px 34px rgba(255,45,170,.16);
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ddd-service-card h2 {
  font-size: 22px;
  margin: 0 0 8px;
}

.ddd-track-app {
  background: var(--ddd-white);
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  padding: 18px;
}

.ddd-track-status {
  background: linear-gradient(135deg, #fff5fb, #fff9e6);
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  color: var(--ddd-text);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 14px;
  padding: 14px;
}

.ddd-track-pill {
  background: linear-gradient(135deg, var(--ddd-pink), var(--ddd-magenta), var(--ddd-purple));
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  padding: 8px 14px;
}

.ddd-track-map {
  aspect-ratio: 16 / 10;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  min-height: 280px;
  overflow: hidden;
}

.ddd-track-map-message {
  align-items: center;
  color: #3f3f46;
  display: flex;
  font-weight: 800;
  height: 100%;
  justify-content: center;
  padding: 18px;
  text-align: center;
}

.ddd-mobile-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(135deg, #050505, #30002f, #ff2daa);
  border-top: 2px solid var(--ddd-pink);
}

.ddd-mobile-sticky a {
  color: var(--ddd-white) !important;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 6px;
  text-align: center;
  text-decoration: none !important;
}

.ddd-parts-source-message {
  background: linear-gradient(135deg, #fff5fb, #fff9e6);
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  color: var(--ddd-text);
  font-weight: 700;
  margin-top: 10px;
  padding: 12px;
}

.ddd-dashboard-grid {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 420px) 1fr;
}

.ddd-tech-instructions {
  background: linear-gradient(135deg, #050505, #30002f, #ff2daa);
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  margin: 0 0 18px;
  padding: 16px 18px;
  box-shadow: 0 14px 34px rgba(255,45,170,.18);
}

.ddd-panel {
  background: #fff;
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(255,45,170,.08);
  padding: 18px;
}

.ddd-panel h2 {
  margin-top: 0;
}

.ddd-panel label {
  display: block;
  font-weight: 800;
  margin-bottom: 12px;
}

.ddd-panel input,
.ddd-panel textarea,
.ddd-panel select {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: block;
  margin-top: 6px;
  min-height: 42px;
  padding: 10px 12px;
  width: 100%;
}

.ddd-panel textarea {
  min-height: 86px;
}

.ddd-admin-result {
  margin-top: 14px;
  overflow-wrap: anywhere;
}

.ddd-admin-result input {
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  margin-top: 8px;
  min-height: 42px;
  padding: 10px 12px;
  width: 100%;
}

.ddd-inline-action {
  margin-top: 10px;
}

.ddd-job-item {
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  margin-top: 12px;
  padding: 14px;
}

.ddd-job-item strong {
  display: block;
  font-size: 18px;
}

.ddd-job-meta {
  color: #71717a;
  font-size: 13px;
  font-weight: 800;
  margin-top: 6px;
}

.ddd-job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ddd-job-actions button {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  padding: 9px 11px;
}

.ddd-copy-link {
  background: var(--ddd-pink);
  color: #fff;
}

.ddd-status-btn {
  background: #111;
  color: #fff;
}

.ddd-tech-toolbar,
.ddd-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.ddd-bulk-bar {
  align-items: center;
  background: #fff5fb;
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  padding: 10px;
}

.ddd-bulk-bar label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
}

.ddd-bulk-bar select {
  margin: 0;
  min-height: 42px;
  width: auto;
}

.ddd-tech-roster {
  align-items: center;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 8px;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
}

.ddd-tech-roster-pill {
  align-items: center;
  background: linear-gradient(135deg, var(--ddd-pink), var(--ddd-purple));
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  gap: 6px;
  padding: 6px 10px;
}

.ddd-tech-roster-pill small {
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: 10px;
  padding: 2px 6px;
}

.ddd-tech-job-btn {
  background: #fff;
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(255,45,170,.08);
  cursor: pointer;
  display: block;
  margin-top: 12px;
  position: relative;
  padding: 14px;
  text-align: left;
  width: 100%;
}

.ddd-job-check {
  position: absolute;
  right: 12px;
  top: 12px;
}

.ddd-job-check input {
  accent-color: var(--ddd-pink);
  height: 18px;
  width: 18px;
}

.ddd-tech-job-btn.ddd-status-new-booking {
  background: linear-gradient(135deg, #fff5fb, #f6e8ff) !important;
  border-color: #ff2daa !important;
}

.ddd-tech-job-btn.ddd-status-assigned {
  background: linear-gradient(135deg, #f8fafc, #e5e7eb) !important;
  border-color: #111827 !important;
}

.ddd-tech-job-btn.ddd-status-en-route {
  background: linear-gradient(135deg, #eff6ff, #dff9ff) !important;
  border-color: #2563eb !important;
}

.ddd-tech-job-btn.ddd-status-arrived {
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4) !important;
  border-color: #16a34a !important;
}

.ddd-tech-job-btn.ddd-status-working {
  background: linear-gradient(135deg, #fff7ed, #fef3c7) !important;
  border-color: #f59e0b !important;
}

.ddd-tech-job-btn.ddd-status-completed {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  border-color: #047857 !important;
}

.ddd-tech-job-btn.ddd-status-rescheduled {
  background: linear-gradient(135deg, #f5f3ff, #fce7f3) !important;
  border-color: #8b5cf6 !important;
}

.ddd-tech-job-btn.ddd-status-archived,
.ddd-tech-job-btn.ddd-status-canceled {
  background: linear-gradient(135deg, #f4f4f5, #e4e4e7) !important;
  border-color: #52525b !important;
}

.ddd-tech-job-btn:hover,
.ddd-tech-job-btn.is-selected {
  background: linear-gradient(135deg, #fff5fb, #fff9e6);
  border-color: var(--ddd-pink);
}

.ddd-tech-job-btn strong {
  display: block;
  font-size: 17px;
}

.ddd-tech-job-meta,
.ddd-selected-summary {
  color: #52525b;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 6px;
}

.ddd-tech-status-badge {
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: 5px;
  padding: 5px 9px;
  text-transform: uppercase;
}

.ddd-status-new-booking {
  background: linear-gradient(135deg, #ff2daa, #d51fff) !important;
  color: #fff !important;
}

.ddd-status-assigned {
  background: #111827 !important;
  color: #fff !important;
}

.ddd-status-en-route {
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  color: #fff !important;
}

.ddd-status-arrived {
  background: linear-gradient(135deg, #16a34a, #84cc16) !important;
  color: #fff !important;
}

.ddd-status-working {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  color: #111 !important;
}

.ddd-status-completed {
  background: linear-gradient(135deg, #10b981, #047857) !important;
  color: #fff !important;
}

.ddd-status-rescheduled {
  background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
  color: #fff !important;
}

.ddd-status-archived,
.ddd-status-canceled {
  background: #71717a !important;
  color: #fff !important;
}

.ddd-power-status {
  background: linear-gradient(135deg, #fff5fb, #fff9e6);
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  color: #3f3f46;
  font-size: 13px;
  font-weight: 800;
  margin-top: 14px;
  padding: 10px 12px;
}

.ddd-quick-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.ddd-quick-actions .ddd-btn {
  width: 100%;
}

#ddd-tech-refresh-jobs,
#ddd-tech-start-route {
  background: linear-gradient(135deg, var(--ddd-pink), var(--ddd-magenta), var(--ddd-purple));
  color: #fff !important;
}

#ddd-tech-wake-lock {
  background: linear-gradient(135deg, #fff, #fff2b8) !important;
  color: #111 !important;
}

.ddd-btn-danger,
#ddd-tech-delete-job {
  background: linear-gradient(135deg, #dc2626, #7f1d1d) !important;
  color: #fff !important;
}

.ddd-quick-actions [data-tech-status="Arrived"] {
  background: linear-gradient(135deg, #16a34a, #84cc16) !important;
  color: #fff !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--ddd-pink), var(--ddd-gold), var(--ddd-purple)) border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(255,45,170,.10);
  overflow: hidden;
  padding: 14px !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  box-shadow: 0 18px 38px rgba(255,45,170,.18);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  color: #111827;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  color: var(--ddd-pink) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  background: linear-gradient(135deg, var(--ddd-pink), var(--ddd-purple)) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 900 !important;
  text-align: center;
  width: 100%;
}

.woocommerce div.product .summary,
.woocommerce-page div.product .summary {
  background: #fff;
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(255,45,170,.08);
  padding: 18px;
}

.ddd-quick-actions [data-tech-status="Working"] {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  color: #111 !important;
}

.ddd-quick-actions [data-tech-status="Completed"] {
  background: linear-gradient(135deg, #10b981, #047857) !important;
  color: #fff !important;
}

.ddd-quick-actions [data-tech-status="Rescheduled"] {
  background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
  color: #fff !important;
}

.ddd-quick-actions [data-tech-status="Archived"] {
  background: linear-gradient(135deg, #52525b, #18181b) !important;
  color: #fff !important;
}

@keyframes dddHeroGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes dddSweep {
  0%, 38% { transform: translateX(-120%); opacity: 0; }
  55% { opacity: 1; }
  78%, 100% { transform: translateX(120%); opacity: 0; }
}

@keyframes dddGlowFloat {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-80px, -60px, 0) scale(1.16); }
}

@keyframes dddButtonFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .ddd-hero,
  .ddd-hero::before,
  .ddd-hero-shine {
    animation: none;
  }

  .ddd-btn:hover,
  .ddd-service-card:hover {
    transform: none;
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: 62px;
  }

  .ddd-mobile-sticky {
    display: grid;
  }

  .forminator-row {
    margin-bottom: 14px !important;
  }

  .ddd-cta-row .ddd-btn {
    width: 100%;
  }

  .ddd-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .ddd-quick-actions {
    grid-template-columns: 1fr;
  }
}
