/* Contact flow form styles — keep in sync with global theme variables */
/* Contact flow form styles — scoped under #contact-flow */
/* Relies on CSS variables and fonts defined in global.css (loaded by BaseLayout) */

/* Hide all steps by default to prevent FOUC */
#contact-flow .step {
  display: none;
}

/* Prevent focus outline flash on initial page load */
#contact-flow:not(.js-ready) input:focus,
#contact-flow:not(.js-ready) textarea:focus,
#contact-flow:not(.js-ready) select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,0.02) !important;
}

/* Smooth transition for focus styles */
#contact-flow.js-ready input,
#contact-flow.js-ready textarea,
#contact-flow.js-ready select {
  transition: box-shadow 120ms ease, border-color 120ms ease, background 120ms ease, outline 120ms ease;
}

/* Show only the first step initially (before JS loads) based on parent data-step */
#contact-flow[data-step="0"] .step[data-step="0"],
#contact-flow[data-step="1"] .step[data-step="1"],
#contact-flow[data-step="2"] .step[data-step="2"],
#contact-flow[data-step="3"] .step[data-step="3"],
#contact-flow[data-step="4"] .step[data-step="4"],
#contact-flow[data-step="5"] .step[data-step="5"],
#contact-flow[data-step="6"] .step[data-step="6"],
#contact-flow[data-step="7"] .step[data-step="7"] {
  display: flex;
}

/* When JS marks a step as hidden, hide it regardless */
#contact-flow .step[hidden] {
  display: none !important;
}

#contact-flow {
  /* full viewport container so we can center the form */
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  box-sizing: border-box;
  color: var(--text-main, #fff);
  font-family: 'InterDisplay', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #010205; /* match Figma background */
}

#contact-flow form {
  width: 100%;
  max-width: 640px;
}

#contact-flow .step {
  background: transparent;
  padding: 6px 0 12px;
  min-height: 240px;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

#contact-flow .step > input,
#contact-flow .step > select,
#contact-flow .step > textarea,
#contact-flow .step input,
#contact-flow .step select,
#contact-flow .step textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.02);
  padding: 10px 17px;
  border-radius: 12px;
  outline: none;
  font-size: 18px;
  font-family: 'Inter_Display', sans-serif;
  line-height: 1.5;
  transition: box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
  margin: 0 auto;
  /* Smooth typing feel */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  will-change: contents;
  transform: translateZ(0);
  backface-visibility: hidden;
  caret-color: rgba(255,255,255,0.9);
}

/* Fixed sizing for short and long answers (scoped) */
/* short inputs: 500px width, 48px height */
#contact-flow input[name="name"],
#contact-flow input[name="contact"],
#contact-flow input[name="business"],
#contact-flow input[name="website"] {
  width: 500px;
  height: 48px;
  max-width: 100%; /* responsive fallback */
  box-sizing: border-box;
  margin: 0 auto; /* horizontally center fixed-width inputs */
  display: block;
}

/* budget select should match short inputs visually */
#contact-flow select[name="budget"] {
  width: 500px;
  height: 48px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto; /* center select */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%), linear-gradient(135deg, rgba(255,255,255,0.6) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
  font-size: 15px;
  color: rgba(255,255,255,0.95);
  background-color: rgba(255,255,255,0.02);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.02);
}

/* long answer textarea: 500px width, 96px height */
/* DETAILS textarea wrapper + custom sidebar */
#contact-flow .textarea-wrap {
  position: relative;
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

#contact-flow textarea[name="details"] {
  width: 500px;
  height: 96px;
  max-width: 100%;
  box-sizing: border-box;
  resize: none !important;
  margin: 0 auto; /* center textarea */
  padding: 14px 36px 14px 16px; /* leave room for custom scrollbar */
  overflow-y: auto;
  font-size: 15px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.02);
  line-height: 1.45;
}

#contact-flow .step input::placeholder,
#contact-flow .step textarea::placeholder {
  color: rgba(255,255,255,0.15);
  font-family: 'Inter_Display', sans-serif;
  font-size: 18px;
}



#contact-flow .step input:focus,
#contact-flow .step select:focus,
#contact-flow .step textarea:focus {
  border-color: rgba(255,255,255,0.02);
  box-shadow: none;
  outline: none;
}

#contact-flow textarea.step,
#contact-flow .step textarea {
  min-height: 120px;
  resize: none;
}

#contact-flow .actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 48px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  transition: padding 400ms cubic-bezier(.22,.61,.36,1), margin 400ms cubic-bezier(.22,.61,.36,1);
}

/* Default button look matches site buttons */
#contact-flow .actions button {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 9px 14px;
  border-radius: 999px; /* pill */
  font-weight: 500;
  font-family: 'InterDisplay', sans-serif;
  font-size: 14px;
  color: #fff;
  background: rgba(255,255,255,0.06);
  transition: opacity 160ms ease, transform 120ms ease, box-shadow 120ms ease;
  transform-origin: center center;
  will-change: transform;
}

#contact-flow .actions button:hover {
  opacity: 0.9;
}

#contact-flow .actions button:active {
  transform: scale(0.97);
}

#contact-flow .actions button[data-next],
#contact-flow .actions button.primary,
#contact-flow .actions button[type="submit"] {
  background: linear-gradient(to bottom, var(--gradient-top, #524ff0), var(--gradient-bottom, #3f2cab));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 12px 30px rgba(82,79,240,0.12);
  color: #fff;
}

#contact-flow .actions button[data-prev] {
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.9);
}

/* icon button (left circular) */
.icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.075);
  border: 0.75px solid rgba(255,255,255,0.2);
}
.icon-btn .chev {
  font-size: 16px;
  color: #fff;
  line-height: 1;
}

/* Primary next button sizing (Figma) */
.actions button.primary {
  width: 140px;
  height: 40px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#contact-flow .actions button[type="submit"] {
  background: linear-gradient(to bottom, var(--gradient-top, #524ff0), var(--gradient-bottom, #3f2cab));
}

#contact-flow .btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  color: var(--text-main);
  text-decoration: none;
}

#contact-flow .progress {
  height: 6px;
  background: rgba(255,255,255,0.03);
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
}

#contact-flow .progress .bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gradient-top, #524ff0), var(--gradient-bottom, #3f2cab));
  transition: width 320ms cubic-bezier(.22,.61,.36,1);
}

/* Figma top-right progress indicator (visual only) */
.progress-indicator {
  position: fixed;
  top: 36px;
  right: 36px;
  width: 232px;
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 12px;
  pointer-events: none;
}

/* Mobile: move progress to bottom left */
@media (max-width: 768px) {
  .progress-indicator {
    top: auto;
    bottom: 36px;
    left: 36px;
    right: auto;
    width: auto;
    max-width: calc(100% - 72px);
  }
}
.progress-indicator .dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.progress-indicator .dot {
  width: 28px;
  height: 6px;
  border-radius: 21px;
  background: rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

.progress-indicator .dot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #524ff0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.progress-indicator .dot.active::before {
  transform: scaleX(1);
}

.progress-indicator .progress-label {
  margin: 0;
  font-family: 'Inter_Display', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.4);
}

.progress-indicator .dot::before {
  transition-delay: calc(var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .progress-indicator .dot::before {
    transition: none;
  }
}


/* heading above the inputs */
#contact-flow .cf-heading {
  font-family: 'OfficeTimesSharp', serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--text-main, #ffffff);
  margin: 0 0 12px 0;
}

.cf-question-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  text-align: center;
  margin-bottom: 32px;
  position: relative;
}

.cf-optional {
  font-family: 'Inter_Display', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  text-align: center;
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cf-question {
  font-family: 'OfficeTimesSharp', serif;
  font-size: 22px;
  text-align: center;
  color: #ffffff;
  margin: 0;
}
.cf-question .required { color: #524ff0; margin-left: 4px; }

/* When question is used standalone (without wrapper) */
.step > .cf-question {
  margin-bottom: 32px;
}

.cf-input-wrap {
  width: 500px;
  max-width: 100%;
  margin: 0 auto; /* center input field horizontally */
}
.cf-input-wrap input {
  width: 100%;
  height: 48px;
  box-shadow: 0 6px 18px rgba(2,2,6,0.18);
}

/* Ensure question text is centered - let global.css handle word-rotator */
#contact-flow .cf-question {
  text-align: center;
  width: 100%;
}

#contact-flow .cf-question .required {
  display: inline-block;
  margin-left: 4px;
  color: #524ff0;
}

/* ensure required-letter inherits visible color and doesn't interrupt letter transitions */
#contact-flow .cf-question .required-letter {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  color: #524ff0;
}

/* small helper text */
#contact-flow small {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,0.45); /* slightly higher contrast per Figma */
  font-size: 13px;
}

/* checkboxes styling spacing */
#contact-flow label {
  display: block;
  margin: 6px 0;
  font-size: 14px;
  color: var(--opacity-70, rgba(255,255,255,0.7));
}

#contact-flow input[type="checkbox"] {
  margin-right: 10px;
}

/* Services & budget chips (Figma) */
#contact-flow .step[data-step="4"],
#contact-flow .step[data-step="5"] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* SERVICES: chip list */
#contact-flow .services-choices {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* hide native checkbox but keep semantic input */
#contact-flow .services-choices input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#contact-flow .services-choices .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px; /* match Figma chip height */
  padding: 0 18px; /* vertical centering via line-height */
  background: rgba(255,255,255,0.02);
  border-radius: 100px;
  cursor: pointer;
  font-size: 18px; /* increased to match Figma */
  line-height: 40px;
  color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.02);
  letter-spacing: -0.2px;
  transition: transform 120ms ease, background 200ms ease, color 200ms ease, box-shadow 120ms ease;
  transform-origin: center center;
  will-change: transform;
}

#contact-flow .services-choices .chip:active {
  transform: scale(0.97);
}

/* BUDGET: chip list (radios) */
#contact-flow .budget-choices {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#contact-flow .budget-choices input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#contact-flow .budget-choices .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px; /* match Figma chip height */
  padding: 0 18px; /* vertical centering via line-height */
  background: rgba(255,255,255,0.02);
  border-radius: 100px;
  cursor: pointer;
  font-size: 18px; /* increased to match Figma */
  line-height: 40px;
  color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.02);
  letter-spacing: -0.2px;
  transition: transform 120ms ease, background 200ms ease, color 200ms ease, box-shadow 120ms ease;
  transform-origin: center center;
  will-change: transform;
}

#contact-flow .budget-choices .chip:active {
  transform: scale(0.97);
}

/* selected state for both checkboxes and radios */
#contact-flow .services-choices input[type="checkbox"]:checked + label.chip,
#contact-flow .budget-choices input[type="radio"]:checked + label.chip {
  background: linear-gradient(90deg, #524ff0, #3f2cab);
  color: #fff;
  box-shadow: 0 12px 30px rgba(82,79,240,0.14);
  border-color: rgba(255,255,255,0.06);
}

/* honeypot: keep hidden */
#contact-flow .hp {
  position: absolute;
  left: -9999px;
  height: 0;
  width: 0;
  opacity: 0;
}

/* position profile image top-left like index.astro */
#contact-flow .profile-shimmer {
  position: fixed;
  top: 36px; /* match requested padding */
  left: 36px; /* match requested padding */
  width: 32px;
  height: 32px;
  z-index: 60;
  overflow: hidden; /* preserve shimmer effect */
  border-radius: 50%;
}

#contact-flow .profile-shimmer img.pfp-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
}

@media (max-width: 768px) {
  #contact-flow {
    padding: 100px 28px 120px 28px;
    height: 100vh;
  }
  
  /* Adjust font sizes for mobile */
  .cf-question {
    font-size: 20px;
    line-height: 1.3;
  }
  
  #contact-flow .step input,
  #contact-flow .step textarea,
  #contact-flow .step select {
    font-size: 16px;
  }
  
  .cf-optional {
    font-size: 13px;
  }
  
  .progress-indicator .progress-label {
    font-size: 13px;
  }
  
  /* Profile image padding matches progress indicator */
  #contact-flow .profile-shimmer {
    top: 24px;
    left: 24px;
  }
  
  .progress-indicator {
    bottom: 24px;
    left: 24px;
  }
}

@media (max-width: 520px) {
  #contact-flow {
    padding: 90px 24px 110px 24px;
    height: 100vh;
  }
  
  .cf-question {
    font-size: 18px;
  }
  
  #contact-flow .step input,
  #contact-flow .step textarea,
  #contact-flow .step select {
    font-size: 15px;
  }
  
  #contact-flow .actions { gap: 8px; }
  
  /* make fixed-width inputs collapse to full width on small screens */
  #contact-flow input[name="name"],
  #contact-flow input[name="contact"],
  #contact-flow input[name="business"],
  #contact-flow input[name="website"],
  #contact-flow select[name="budget"],
  #contact-flow textarea[name="details"],
  .cf-input-wrap {
    width: 100%;
  }
  
  /* Smaller padding for mobile */
  #contact-flow .profile-shimmer {
    top: 20px;
    left: 20px;
    width: 28px;
    height: 28px;
  }
  
  #contact-flow .profile-shimmer img.pfp-img {
    width: 28px;
    height: 28px;
  }
  
  .progress-indicator {
    bottom: 20px;
    left: 20px;
  }
  
  .progress-indicator .dot {
    width: 24px;
    height: 5px;
  }
  
  /* Success screen font sizes */
  #contact-flow .step[data-step="7"] h2 {
    font-size: 32px !important;
  }
  
  #contact-flow .step[data-step="7"] p {
    font-size: 16px !important;
  }
}

/* Toast message (top of screen) */
.cf-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: rgba(20,20,22,0.96);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(2,2,6,0.6);
  opacity: 0;
  pointer-events: none;
  transition: transform 260ms cubic-bezier(.2,.9,.3,1), opacity 260ms ease;
  z-index: 9999;
  max-width: 90%;
  text-align: center;
}
.cf-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Shake animation for error states */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.shake {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97);
}

/* Center the details step (step index 6) so its content is centered visually */
#contact-flow .step[data-step="6"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 240px; /* provides consistent vertical space */
}

#contact-flow .step[data-step="6"] textarea {
  margin: 0 auto;
  width: 500px;
  max-width: 100%;
  resize: none !important;
}

/* Center the success/confirmation screen (step index 7) */
#contact-flow .step[data-step="7"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 320px;
  gap: 18px;
}

#contact-flow .step[data-step="7"] h2 {
  margin: 0;
  font-family: 'OfficeTimesSharp', serif;
  font-size: 48px;
  color: #fff;
}

#contact-flow .step[data-step="7"] p {
  margin: 0;
  font-family: 'InterDisplay', sans-serif;
  font-size: 20px;
  color: rgba(255,255,255,0.40);
}

#contact-flow .step[data-step="7"] .actions {
  margin-top: 20px;
  justify-content: center;
}

/* custom minimal scrollbar (sidebar) shown when textarea overflows */
.cf-textarea-scrollbar {
  position: absolute;
  top: 6px;
  right: 8px; /* inside the wrapper */
  width: 8px;
  bottom: 6px;
  border-radius: 8px;
  background: transparent;
  display: none; /* shown dynamically when needed */
  z-index: 20;
}
.cf-textarea-scrollbar .cf-scroll-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  background: rgba(255,255,255,0.10); /* white at 10% opacity */
  border-radius: 8px;
  transition: top 120ms linear, height 120ms linear, opacity 160ms ease;
  opacity: 1;
  z-index: 21;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
}

/* hide native scrollbars so our custom thumb is visible */
#contact-flow textarea::-webkit-scrollbar { display: none; }
#contact-flow textarea { scrollbar-width: none; -ms-overflow-style: none; }

/* make chip labels non-selectable */
#contact-flow .chip {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.grey {
  color: rgba(255, 255, 255, 0.40);
font-family: "Office Times Sharp";
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: normal;
}