/* ============================================
   BUTTON CONSISTENCY FIX
   Makes all CTA buttons uniform in appearance
   ============================================ */

/* Universal button base styles */
.cta-button-base {
  background: #000000;
  color: #ffffff;
  font-weight: 700;
  border-radius: 9999px; /* rounded-full */
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Hero section button - "Redesign My Website" */
.group.relative.overflow-hidden.bg-black.text-white.px-12 {
  padding: 1.25rem 3rem !important; /* py-5 px-12 */
  font-size: 1.125rem !important; /* text-lg */
  border-radius: 9999px !important;
  width: auto !important;
  max-width: fit-content !important;
}

/* Middle section button - "Submit Your Website" */
.bg-black.text-white.px-10.py-5 {
  padding: 1.25rem 2.5rem !important; /* py-5 px-10 */
  font-size: 1.125rem !important; /* text-lg */
  border-radius: 9999px !important;
  width: auto !important;
  max-width: fit-content !important;
}

/* Form submit button - "Submit For Free Review" - FIX THIS ONE */
button[type="submit"].group.w-full {
  /* Desktop: reasonable size */
  padding: 1.25rem 2.5rem !important; /* py-5 px-10 */
  font-size: 1.125rem !important; /* text-lg instead of text-2xl */
  font-weight: 700 !important; /* font-bold instead of font-black */
  border-radius: 9999px !important; /* rounded-full instead of rounded-2xl */
  width: auto !important; /* Remove w-full */
  max-width: fit-content !important;
  margin: 0 auto !important; /* Center the button */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fix the parent container to center the button */
.pt-6 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* ============================================
   MOBILE RESPONSIVE FIXES
   ============================================ */

@media (max-width: 768px) {
  /* Hero button on mobile */
  .group.relative.overflow-hidden.bg-black.text-white.px-12 {
    padding: 1rem 2rem !important; /* Smaller on mobile */
    font-size: 1rem !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Middle button on mobile */
  .bg-black.text-white.px-10.py-5 {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    width: auto !important;
    max-width: fit-content !important;
  }

  /* Form button on mobile - CRITICAL FIX */
  button[type="submit"].group.w-full {
    padding: 1rem 2rem !important; /* Comfortable mobile size */
    font-size: 1rem !important; /* text-base */
    width: auto !important; /* NOT full width */
    max-width: 90% !important; /* Allow some margin */
    margin: 0 auto !important; /* Center it */
    white-space: nowrap !important; /* Keep text on one line if possible */
  }

  /* Ensure button text stays centered on mobile */
  button[type="submit"].group.w-full span {
    text-align: center !important;
  }

  /* Fix button container on mobile */
  .pt-6 {
    padding-top: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
}

/* ============================================
   TABLET RESPONSIVE
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  button[type="submit"].group.w-full {
    padding: 1.125rem 2.25rem !important;
    font-size: 1.0625rem !important;
  }
}

/* ============================================
   HOVER STATES - Consistent across all buttons
   ============================================ */

.cta-button-base:hover,
.group.relative.overflow-hidden.bg-black:hover,
.bg-black.text-white.px-10.py-5:hover,
button[type="submit"].group:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cta-button-base:active,
.group.relative.overflow-hidden.bg-black:active,
.bg-black.text-white.px-10.py-5:active,
button[type="submit"].group:active {
  transform: scale(0.98);
}

/* ============================================
   ARROW ANIMATION - Consistent
   ============================================ */

.group:hover span.group-hover\:translate-x-1,
.group:hover span.group-hover\:translate-x-2 {
  transform: translateX(0.25rem);
  transition: transform 0.3s ease;
}

/* ============================================
   TEXT CENTERING FIX
   ============================================ */

/* Ensure all button text is properly centered */
button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ============================================
   SPECIFIC FIXES FOR EACH SECTION
   ============================================ */

/* Hero section - Keep button left-aligned with content on desktop */
@media (min-width: 1024px) {
  section.relative.min-h-\[95vh\] .flex.flex-col.sm\:flex-row {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  
  section.relative.min-h-\[95vh\] .group.relative.overflow-hidden.bg-black {
    align-self: flex-start !important;
  }
}

/* Middle section - Center button */
.bg-zinc-50.py-16.md\:py-24 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Form section - Center button */
#submission-form .pt-6 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* ============================================
   FONT WEIGHT FIX
   ============================================ */

/* Make all buttons have same font weight */
.group.relative.overflow-hidden.bg-black,
.bg-black.text-white.px-10.py-5,
button[type="submit"].group {
  font-weight: 700 !important; /* font-bold, not font-black */
}

/* ============================================
   BORDER RADIUS FIX
   ============================================ */

/* All buttons should be rounded-full (pill shape) */
.group.relative.overflow-hidden.bg-black,
.bg-black.text-white.px-10.py-5,
button[type="submit"].group {
  border-radius: 9999px !important;
}




button.custom-select-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

button.custom-select-trigger .selected-display {
  flex: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-right: auto !important;
  display: block !important;
}

button.custom-select-trigger .select-chevron {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.iti input::placeholder {
  color: #d4d4d8 !important;
}

/* ============================================
   FINAL MOBILE ADJUSTMENTS
   ============================================ */

@media (max-width: 640px) {
  /* All buttons stack nicely on mobile */
  .flex.flex-col.sm\:flex-row.items-stretch {
    gap: 1.5rem !important;
  }

  /* Ensure buttons don't overflow */
  button {
    max-width: 100% !important;
    word-wrap: break-word !important;
  }

  /* Keep arrow visible on mobile */
  button span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }
}