/* Base */
.open-onboarding {
  display: block; /* makes it sit on its own line */

}
.onboarding-thankyou {
  background: var(--dts-surface);
  color: var(--dts-text);
  padding: 3rem 2rem;
  border-radius: 1rem;
  text-align: center;
  margin: 2rem 0;
}
#contact-slider {
	background: var(--dts-surface, #000000);
	  isolation: isolate;
  mix-blend-mode: normal;
}

.slider {
  position: fixed;
  z-index: 1000;
  transition: transform 0.4s ease;
  box-shadow: 0 0 20px rgba(0,0,0,.5);
}

/* Menu Slider (right side) */
.menu-slider {
  position: fixed;           /* fixed to viewport, not header */
  top: var(--header-height, 0); /* sits just below header */
  right: 0;
  width: 80%;
  height: calc(100vh - var(--header-height, 0)); /* full viewport minus header */
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 2rem;
  z-index: 9999;
}

.menu-slider.active {
  transform: translateX(0);
}
/* New */


.contact-slider {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80dvh; /* proper mobile viewport unit */
  max-height: 80dvh; /* prevents overflow below screen */
  transform: translateY(100%);
  padding: 1.5rem;
  border-radius: 20px 20px 0 0;
  overflow-y: auto; /* <-- lets the form scroll inside */
  -webkit-overflow-scrolling: touch; /* smooth scroll for iOS */

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@supports (height: 100dvh) {
  .contact-slider {
    height: 80dvh;
    max-height: 80dvh;
  }
}
.contact-slider.active { transform: translateY(0); }

/* Buttons */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1100;
  position: fixed;
  right: 1rem;
}
.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 3px;
  background: var(--dts-btn);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger:hover{
	background:none;
}
.hamburger:focus{
	background:none;
}
.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
/* Close button inside menu */
.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  background: transparent;
  color:var(--dts-btn);
  border: none;
  cursor: pointer;
}
.close-btn::before { 
	content: "✕"; 
	display: block; 
	line-height: 1; 
}
.close-btn:hover {
  background: transparent;
  color:var(--dts-btn);
}
.close-btn:focus {
  background: transparent;
  color:var(--dts-btn);
}

.contact-cta {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  cursor: pointer;
  z-index:4; /* on top of the demo-site cards*/
}

.contact-form input {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.6rem;
  border: none;
  border-radius: 4px;
}

.faster-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--dts-accent);
}


#dtsFormResponse.success {
  font-size: 1rem;
  margin-top: 1em;
  text-align: center;
}

.contact-extra.hidden {
  display: none;
}

.hidden-honey {
  position: absolute !important;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

.thankyou-message .faster-link {
  display: inline-block;
  margin-top: .25em;
  text-decoration: underline;
}

.thankyou-message .faster-link:hover {
  opacity: .8;
}

/*Thank You Begin*/
.thankyou-container {
  max-width: 700px;
  margin: 8rem auto;
  text-align: center;
  padding: 2rem;
  border-radius: 12px;
  background: var(--dts-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.thankyou-container h1 {
  font-size: 2.4rem;
  margin-bottom: 1rem;
  color: var(--dts-heading);
}

.thankyou-container p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--dts-text);
}

.thankyou-container a {
  color: var(--dts-link);
  text-decoration: underline;
}

/*Thank You Container End*/



.submit-button {
 display:inline-block;
  padding: 0.6em 1.2em;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s ease;

}
.call-btn{
	font-size:20px;
}


/* colors */
.slider {
  background: var(--dts-bg);
  color: var(--dts-text);
  box-shadow: 0 0 20px rgba(0,0,0,.5);
}

#dtsFormResponse.success { 
	color: var(--dts-text);
}

.thankyou-message .faster-link {
	color: var(--dts-link);
}

.contact-cta {  
  background: var(--dts-btn);
  color:  var(--dts-btn-text);

}
.contact-cta:hover {  
  background: var(--dts-btn-hvr);
	color:  var(--dts-btn-text);
}

.faster-link{ 
  color: var(--dts-link);
}

.submit-button {
	background: var(--dts-btn);
	 color: var(--dts-btn-text);
	padding:12px 22px;
	font-size: var(--fs-md);
}
.submit-button:hover {
	background: var(--dts-btn-hvr);
	color: var(--dts-btn-text);
}

/* === Onboarding Slider === */
.onboarding-slider {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998; /* just under contact slider if needed */
  transform: translateY(100%);
  transition: transform 0.35s ease;
  pointer-events: none; /* only interactive when active/minimized */
}

.onboarding-slider.active,
.onboarding-slider.minimized {
  pointer-events: auto;
}

.onboarding-shell {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

/* Full panel */
.onboarding-panel {
  background: var(--dts-surface);
  color: var(--dts-text);
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.28);
  padding: 1.5rem 1.5rem 1.75rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

/* Minibar */
.onboarding-minibar {
  display: none;
  width: 100%;
  height: 80px;
  border-radius: 1rem 1rem 0 0;
  border: none;
  outline: none;
  background: var(--dts-surface);
  color: var(--dts-text);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.24);
  padding: 0 1.25rem;
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.onboarding-minibar-title {
  font-size: 0.95rem;
  font-weight: 500;
}

/* State transforms */
.onboarding-slider.active {
  transform: translateY(0);
}

.onboarding-slider.minimized {
  transform: translateY(calc(100% - 80px));
}

/* Show only appropriate piece per state */
.onboarding-slider.active .onboarding-panel {
  display: block;
}
.onboarding-slider.active .onboarding-minibar {
  display: none;
}

.onboarding-slider.minimized .onboarding-panel {
  display: none;
}
.onboarding-slider.minimized .onboarding-minibar {
  display: flex;
}

/* Close button */
.onboarding-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

/* Fields */
.onboarding-header h2 {
  margin: 0 0 0.25rem;
}

.onboarding-header p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  opacity: 0.9;
}

.onboarding-form {
  display: grid;
  gap: 1rem;
}

.onboarding-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field-label {
  font-weight: 500;
}

.field-hint {
  display: block;
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: 0.15rem;
}

.onboarding-field input,
.onboarding-field select,
.onboarding-field textarea {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgba(0,0,0,0.16);
  padding: 0.6rem 0.75rem;
  font: inherit;
  background: var(--dts-surface);
}

.onboarding-field textarea {
  resize: vertical;
}

.option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}

.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-start;
}

/* Basic button styles; adjust to match your system */
.onboarding-actions .btn-primary,
.onboarding-actions .btn-secondary {
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  border: none;
  cursor: pointer;
  font: inherit;
}

.onboarding-actions .btn-primary {
  background: var(--dts-background);
  color: Var(--dts-text);
}

.onboarding-actions .btn-secondary {
  background: transparent;
  color: var(--dts-btn);
  border: 1px solid currentColor;
}

/* Conditional fields hidden by default */
.onboarding-conditional {
  display: none;
}

.onboarding-conditional.is-visible {
  display: flex;
}
@media (max-height: 650px) {
  .contact-slider {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .onboarding-panel {
    border-radius: 1rem 1rem 0 0;
    padding: 1.25rem 1rem 1.5rem;
  }
}

/* Contact slider close button */
#contact-slider .close-btn::before {
  content: "✕";
  font-size: 2rem;
  line-height: 1;
}

/* Onboarding slider close button */
#onboarding-slider .onboarding-close-btn::before {
  content: "✕";
  font-size: 1.6rem;
  line-height: 1;
}

/* === HAMBURGER OVERRIDE — FINAL FIX === */

/* Make sure the toggle button is above all sliders */
#menu-toggle.hamburger {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 99999 !important;
  padding: 0;
  background: none !important;
  border: none !important;
}

/* Fix the three bars */
#menu-toggle.hamburger span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}

/* X animation */
#menu-toggle.hamburger.active span:nth-child(1) {
  transform: translateY(13px) rotate(45deg);
}

#menu-toggle.hamburger.active span:nth-child(2) {
  opacity: 0;
}

#menu-toggle.hamburger.active span:nth-child(3) {
  transform: translateY(-13px) rotate(-45deg);
}