:root {
  --accent-gradient: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 41%,
    rgba(255, 255, 255, 0) 57%,
    rgba(255, 255, 255, 0.4) 100%
  );
}

/* Global reset / base styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}
.hidden { display: none; }

/* --------------------------
   HEADER
   -------------------------- */
.header {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 640px;
  height: 50px;
  border-radius: 25px;
  z-index: 999;
  box-sizing: border-box;
  padding: 7px;
  overflow: hidden;

  /* Black background with 10% opacity */
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);

  /* Animate expansions */
  transition: height 0.3s ease, padding 0.3s ease, background 0.3s ease,
              -webkit-backdrop-filter 0.3s ease;
}
.header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0) 41%,
    rgba(255,255,255,0) 57%,
    rgba(255,255,255,0.4) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.4px;
  pointer-events: none;
  z-index: 0;
}
.header.expanded {
  height: 220px;
  padding-bottom: 20px;
}

.header-top {
  position: relative;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -7.2px;
  z-index: 1;
}

/* BRAND LOGO */
.logo {
  cursor: pointer;
  position: relative;
  user-select: none;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  line-height: 1.2;
}

.logo-image {
  height: 19px;
  width: auto;
  max-width: 116px;
  transition: transform 0.2s ease;
}
.logo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  z-index: -1;
  opacity: 0;
  transform: scale(0.7);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.logo:hover::before {
  opacity: 1;
  transform: scale(1);
}

.logo:hover .logo-image {
  transform: none;
}

/* Toggle icon container (+ / X) */
.toggle {
  font-size: 1.5rem;
  cursor: pointer;
  user-select: none;
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform-origin: center;
  transition: transform 0.3s ease, margin 0.3s ease;
  line-height: 0;
  margin-right: -5px;
}
.toggle::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: -1;
}
.toggle:hover::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* The plus lines */
.toggle span {
  position: absolute;
  display: block;
  width: 16px;
  height: 2.5px;
  background: #fff;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transition: transform 0.3s ease;
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.9);
}

.toggle span:first-child {
  transform: translate(-50%, -50%) rotate(0deg);
}
.toggle span:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
}
.toggle.rotated span:first-child {
  transform: translate(-50%, -50%) rotate(135deg);
}
.toggle.rotated span:last-child {
  transform: translate(-50%, -50%) rotate(225deg);
}

/* NAV LINKS (small screens) */
.nav-links {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1;
}
.header.expanded .nav-links {
  opacity: 1;
  transform: translateY(0);
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.2rem;
  cursor: pointer;
  position: relative;
  padding: 6px 12px;
  margin: 4px 0;
  user-select: none;
}
.nav-links a::before {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  inset: 0;
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: -1;
}
.nav-links a:hover::before {
  transform: scale(1);
  opacity: 1;
}

/* DUPLICATE NAV LINKS FOR DESKTOP */
.nav-links-desktop {
  display: none;
  gap: 30px;
}
.nav-links-desktop a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.2rem;
  cursor: pointer;
  position: relative;
  padding: 6px 12px;
  user-select: none;
}
.nav-links-desktop a::before {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  inset: 0;
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: -1;
}
.nav-links-desktop a:hover::before {
  transform: scale(1);
  opacity: 1;
}

/* No shadows on header text */
.header .logo,
.header .nav-links a,
.header .nav-links-desktop a {
  text-shadow: none;
}

/* LANDING SECTION & IFRAME */
#landing {
  position: relative;
  height: 100vh;
  padding: 0 0 60px;
}
.landing-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.landing-content {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 750px;
  padding: 0 5px;
  pointer-events: auto;
  z-index: 2;
}
.landing-content h1,
.landing-content p {
  text-shadow: 0 3px 16px rgba(0,0,0,1);
  text-align: center;
}
.landing-content h1 {
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 8vw, 2.9rem) !important;
  max-width: 100%;
}
.landing-content p {
  line-height: 1.6;
  font-weight: 500;
  color: #A6A6A6;
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
}

/* CTA 1 (original) */
.cta-button {
  display: inline-block;
  background: #FF4F00;
  color: #fff;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  transition: all 0.3s ease;
  margin-top: 10px;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.cta-button::after {
  content: '';
  opacity: 0;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 6px;
  height: 6px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transition: opacity 0.3s ease;
}
.cta-button:hover {
  padding-right: 40px;
}
.cta-button:hover::after {
  opacity: 1;
}

/* CTA 2 (new) */
.cta-button2 {
  display: inline-block;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  transition: background 0.3s ease;
  margin-left: 8px;
  position: relative;
  cursor: pointer;
  user-select: none;
  border: 2.5px solid #FF4F00;
  color: #FF4F00;
  background: transparent;
  font-size: 1rem;
}
.cta-button2:hover {
  background: #FF4F00;
  color: #fff;
}

/* Sections */
.section {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
}
#landing.section {
  max-width: 100% !important;
  margin: 0 !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#landing-carousel {
  padding: 30px 20px 0px; /* Keep top padding, remove bottom padding */
  position: relative;
  min-height: 10px; /* Adjust this value based on your needs */
  align-items: flex-end;
}

#landing-stats2 {
  padding: 70px 20px 10px;
  position: relative;
}

/* We apply padding to all sections below for consistent spacing */
#landing-more,
#landing-more2,
#landing-stats,
#about-mission,
#about-innovation,
#create-steps1,
#create-steps2,
#create-steps3 {
  padding: 70px 20px 40px;
  position: relative;
}
/* We reduce top padding of #landing-additional by ~25px to tighten the gap */
#landing-additional {
  padding: 50px 20px 60px;
  position: relative;
}
/* Added section outlines for bettter visualization */
.section {
  border: 1px solid rgba(255,0,0,0); /* Temporary visual guide */
}

.section h1 {
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: clamp(2.9rem, 8vw, 3.9rem);
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}
.section h2 {
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 2rem;
}
.section p {
  line-height: 1.6;
  font-weight: 400;
  color: #737373;
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}

/* TWO-COLUMN STRATEGY FOR WIDER SCREENS */
.two-col-section .two-col-content {
  display: block;
  text-align: center;
}
.two-col-section .two-col-content .right-col {
  margin-top: 1.5rem;
}
@media (min-width: 640px) {
  .two-col-section .two-col-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    text-align: left;
    align-items: start;
  }
  .two-col-section .two-col-content h1,
  .two-col-section .two-col-content h2 {
    margin-bottom: 1rem;
  }
  .two-col-section .two-col-content .right-col {
    margin-top: 0;
  }
}
@media (min-width: 640px) {
  .two-col-section .two-col-content {
    margin-left: 6%;
    margin-right: 6%;
  }
}

.two-col-section .two-col-content .right-col p,
.two-col-section .two-col-content .right-col .cta-button2-fixed {
  /* Remove any existing margin overrides */
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* If you want to adjust the spacing between them */
.two-col-section .two-col-content .right-col p {
  margin-bottom: 1.5rem;
}

.two-col-section .two-col-content .right-col .cta-button2-fixed {
  margin-left: 0; /* Override the default 8px margin-left */
}

/* Pricing Cards */
.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  margin-top: 80px;
}
.pricing-card {
  text-align: center;
  max-width: 540px;
  width: 90%;
  padding: 30px;
  border-radius: 32px;
  position: relative;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  transition: background 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.pricing-card::before {
  content: "";
  padding: 1.4px;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0) 41%,
    rgba(255,255,255,0) 57%,
    rgba(255,255,255,0.4) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.pricing-card h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 500;
}
.pricing-card p {
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: #ccc;
  line-height: 1.4;
}
.pricing-card .price {
  font-size: 3.6rem;
  margin-bottom: 20px;
  font-weight: 500;
  background: conic-gradient(
    from -40deg at 0% -50%,
    #E7621E 0%,
    #E7621E 15%,
    #D768C6 45%,
    #FF4F00 85%,
    #E7621E 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Feedback Section */
.feedback-section {
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 40px 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feedback-form {
  display: flex;
  width: 100%;
  max-width: 600px;
}
.feedback-input {
  flex: 1;
  padding: 12px;
  border-radius: 999px;
  border: 1px solid #444;
  background-color: #111;
  outline: none;
  font-size: 1rem;
  color: #ccc;
}

/* Footer */
footer {
  text-align: center;
  padding: 40px 20px;
  color: #777;
  font-size: 0.9rem;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
  z-index: 2;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-logo {
  height: 19px;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.footer-logo:hover {
  opacity: 1;
}

/* Waitlist Styles */
.waitlist-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 40px 20px;
}

.waitlist-card {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border-radius: 24px;
  padding: 48px 32px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.waitlist-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0) 41%,
    rgba(255,255,255,0) 57%,
    rgba(255,255,255,0.4) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.4px;
  pointer-events: none;
  z-index: 0;
}

.waitlist-header {
  position: relative;
  z-index: 1;
  margin-bottom: 32px;
}

.waitlist-logo {
  height: 32px;
  width: auto;
  margin-bottom: 24px;
  opacity: 1;
  filter: brightness(1) contrast(1);
}

.waitlist-header h1 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 16px;
  color: #fff;
}

.waitlist-header p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

.waitlist-form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.input-group {
  position: relative;
}

.waitlist-input {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.waitlist-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.waitlist-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.waitlist-submit-btn {
  background: linear-gradient(135deg, #FF4F00 0%, #FF6B35 100%);
  color: #fff;
  border: none;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.waitlist-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 79, 0, 0.3);
}

.waitlist-submit-btn:active {
  transform: translateY(0);
}

.waitlist-success {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 32px 0;
}

.success-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #00C851 0%, #00E676 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  margin: 0 auto 24px;
  font-weight: bold;
}

.waitlist-success h3 {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 16px;
  color: #fff;
}

.waitlist-success p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

.waitlist-terms {
  margin-top: 16px;
  text-align: center;
}

.waitlist-terms p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 400;
  margin: 0;
}

.privacy-policy-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.privacy-policy-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Privacy Policy Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: 20px;
}

.modal-overlay.hidden {
  display: none;
}

.modal-content {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 2rem;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.modal-body {
  padding: 24px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.modal-body h3 {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 16px 0;
}

.modal-body h4 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  margin: 24px 0 12px 0;
}

.modal-body p {
  margin: 0 0 16px 0;
  font-size: 0.95rem;
}

.modal-body ul {
  margin: 0 0 16px 0;
  padding-left: 20px;
}

.modal-body li {
  margin: 0 0 8px 0;
  font-size: 0.95rem;
}

.modal-body strong {
  color: #fff;
  font-weight: 500;
}

/* Responsive adjustments for modal */
@media (max-width: 768px) {
  .modal-content {
    margin: 0 16px;
    max-height: 90vh;
  }
  
  .modal-header {
    padding: 20px 20px 12px 20px;
  }
  
  .modal-body {
    padding: 20px;
  }
  
  .modal-header h2 {
    font-size: 1.3rem;
  }
  
  .modal-body h3 {
    font-size: 1.2rem;
  }
  
  .modal-body h4 {
    font-size: 1rem;
  }
}

/* Responsive adjustments for waitlist */
@media (max-width: 768px) {
  .waitlist-card {
    padding: 32px 24px;
    margin: 0 16px;
  }
  
  .waitlist-header h1 {
    font-size: 1.4rem;
  }
  
  .waitlist-header p {
    font-size: 0.95rem;
  }
  
  .waitlist-input {
    padding: 14px 16px;
  }
  
  .waitlist-submit-btn {
    padding: 14px 24px;
    font-size: 0.95rem;
  }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .feedback-form {
    flex-direction: column;
  }
  .feedback-input {
    width: 100%;
    margin-bottom: 8px;
  }
  .cta-button2 {
    width: 100%;
    margin-left: 0 !important;
  }
}
@media (min-width: 700px) {
  .toggle {
    display: none !important;
  }
  .nav-links {
    display: none !important;
  }
  .nav-links-desktop {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
  }
  .header {
    height: 50px !important;
    padding-bottom: 0 !important;
  }
  .header.expanded {
    height: 50px !important;
  }
  
  /* Logo maintains consistent size on desktop */
  .logo-image {
    height: 19px;
    max-width: 116px;
  }
}

/* Logo maintains consistent size on mobile */
@media (max-width: 480px) {
  .logo-image {
    height: 19px;
    max-width: 116px;
  }
}

/* Create page iframes container */
.iframe-container {
  margin-top: 80px;
}

/* Ensure About, Pricing, and Create start 35% from the top */
#about,
#pricing-header,
#create {
  flex-direction: column;
  justify-content: center;
  min-height: 3rem;
  margin-top: 10rem;
  margin-bottom: 3rem;
}

/* LOGO CAROUSEL STYLES */
.logo-carousel {
  overflow: hidden;
  background: transparent;
  position: relative;
  width: 100%;
  margin-bottom: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.logos {
  display: flex;
  animation: scroll 44.1s linear infinite;
}
.logos img {
  width: auto;
  height: 60px;
  margin: 0 17px;
  opacity: 0.5;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1500px);
  }
}
.logo-carousel::before,
.logo-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.logo-carousel::before {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,1), transparent);
}
.logo-carousel::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,1), transparent);
}

/* Inline White Text */
.inline-white {
  color: #fff;
}

/* CTA Button Static – identical to CTA2 but without responsive width rules */
.cta-button2-fixed {
  display: inline-block;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  transition: background 0.3s ease;
  margin-left: 8px;
  position: relative;
  cursor: pointer;
  user-select: none;
  border: 2.5px solid #FF4F00;
  color: #FF4F00;
  background: transparent;
  font-size: 1rem;
}
.cta-button2-fixed:hover {
  background: #FF4F00;
  color: #fff;
}

/* STATS SECTION (Apple-like) */
.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
  justify-content: center;
  align-items: center;
  margin-left: 0%;
  margin-right: 0%;
}
@media (min-width: 750px) {
  .stats-grid {
    flex-direction: row;
    align-items: stretch;
  }
}
.stat-box {
  width: 100%;
  max-width: 414px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  border-radius: 25px;
  position: relative;
  color: #fff;
  text-align: left;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}
/* Variation for box #1 */
.stat-box:nth-child(1) {
  background: rgba(0, 0, 0, 0.1); /* Base background with opacity */
  /* Applying gradient potentially as overlay or removing opacity from definition */
  /* Simpler approach: Just use a base color if gradient is complex */
}
/* Variation for box #2 */
.stat-box:nth-child(2) {
  background: rgba(0, 0, 0, 0.1);
}
/* Variation for box #3 */
.stat-box:nth-child(3) {
  background: rgba(0, 0, 0, 0.1);
}
.stat-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0) 41%,
    rgba(255,255,255,0) 57%,
    rgba(255,255,255,0.4) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  padding: 1.82px;
}
.stat-box h1 {
  display: block;       /* Ensure it's a block-level element */
  width: 100%;          /* Take up full width of the container */
  text-align: left;     /* Force left alignment */
  font-size: 4rem !important;
  margin-bottom: 5px;
  font-weight: 500;
  background: conic-gradient(
    from -40deg at 0% -50%,
    #E7621E 0%,
    #E7621E 15%,
    #D768C6 45%,
    #FF4F00 85%,
    #E7621E 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.stat-box p {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 5px;
  color: #fff;
}

.stats-source {
  color: #777;
  font-size: 0.9rem;
  margin-top: 45px;
}

/* PROJECT CARDS (Dashboard) - Max 2 per row, wider cards */
.project-cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 40px;
  align-items: center;
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) {
  .project-cards {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    margin-left: 6%;
    margin-right: 6%;
    max-width: none;
  }
}
.project-box {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 25px;
  border-radius: 25px;
  position: relative;
  color: #fff;
  text-align: left;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: 2.5px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .project-box {
    flex: 0 0 calc(50% - 15px);
    width: calc(50% - 15px);
  }
}
/* Variation for box #1 */
.project-box:nth-child(1) {
  background: rgba(0, 0, 0, 0.1); /* Base background with opacity */
}
/* Variation for box #2 */
.project-box:nth-child(2) {
  background: rgba(0, 0, 0, 0.1);
}
/* Variation for box #3 */
.project-box:nth-child(3) {
  background: rgba(0, 0, 0, 0.1);
}

.project-box h1 {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 1.2rem;
  margin: 0 0 8px 0;
  font-weight: 500;
  color: #fff;
}
.project-box p {
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  max-width: none;
}

/* New Project Card Styling - Pill shape, full width on desktop */
.new-project-card {
  background: rgba(255, 255, 255, 0.1) !important;
  cursor: pointer;
  transition: background 0.3s ease;
  padding: 12px 20px !important;
  border-radius: 25px !important;
  box-sizing: border-box !important;
  border: none !important;
}
.new-project-card:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}
@media (min-width: 640px) {
  .new-project-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}
.new-project-card h1 {
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 5px;
}
.new-project-card .plus-icon {
  position: absolute;
  right: 25px;
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
}
.new-project-card .plus-icon span {
  position: absolute;
  display: block;
  width: 16px;
  height: 2.5px;
  background: #fff;
  top: 50%;
  left: 50%;
  transform-origin: center;
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.9);
}
.new-project-card .plus-icon span:first-child {
  transform: translate(-50%, -50%) rotate(0deg);
}
.new-project-card .plus-icon span:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
}

.stat-box2 {
  width: 100%;
  max-width: 814px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 5vw;
  padding-right: 5vw;
  border-radius: 31px;
  position: relative;
  color: #fff;
  text-align: left;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}
/* Variation for box #1 */
.stat-box2:nth-child(1) {
  background: conic-gradient(
    from 100deg at 50% 110%,
    #FF4F00 0%,
    #FF4F00 20%,
    #EFEEE7 40%,
    #CD70E4 80%,
    #FF4F00 100%
  );
}
.stat-box2 img {
  width: auto;
  height: auto;
  margin: 0 17px;
  opacity: 1;
  scale: 0.702;
  transform: scale(0.702);
}
.stat-box2::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0) 41%,
    rgba(255,255,255,0) 57%,
    rgba(255,255,255,0.4) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  padding: 1.82px;
}

.stat-box2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-image: url("assets/noiseEffect Rectangle 1024.png");
  background-repeat: repeat;
  background-size: 200px 200px; /* adjust for finer or coarser grain */
  opacity: 0.18; /* adjust opacity as needed */
  pointer-events: none;
  z-index: -1;
}

.stat-box2 h1 {
  font-size: 5rem;
  margin-bottom: 15px;
  font-weight: 500;
  color: #fff;
}
.stat-box2 p {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 6px;
  color: #fff;
}
.stat-box p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Invisible overlay to prevent accidental iframe interactions */
#iframe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  pointer-events: auto;
  z-index: 1;
}

@media (hover: none) {
  .disable-hover:hover::before {
    opacity: 0 !important;
    transform: scale(0.7) !important;
  }
}

/* FILE: dronePathGenerator.css */
#dfpg-container {
  position: relative;
  margin: 20px auto;
  max-width: 1200px;
}

/* We replaced .container with .dfpg-container-inner */
#dfpg-container .dfpg-container-inner {
  width: 90%;
  max-width: 600px;
  margin: 80px auto 40px auto;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  position: relative; /* for absolute positioning of tooltips */
}

/* Reset-like styles for elements inside #dfpg-container */
#dfpg-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#dfpg-container h1, 
#dfpg-container h2, 
#dfpg-container label {
  text-shadow: 0 3px 16px rgba(0,0,0,0.8);
}

/* HEADINGS */
#dfpg-container h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
}
#dfpg-container h2 {
  font-size: 1.3rem;
  font-weight: 500;
  margin-top: 40px;
  margin-bottom: 15px;
}
#dfpg-container label {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 8px;
  display: block;
}

/* FORMS & INPUTS */
#dfpg-container .input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
#dfpg-container .input-wrapper {
  position: relative;
  display: block;
  flex: 1;
  margin-bottom: 15px;
}
#dfpg-container .input-wrapper input[type="text"],
#dfpg-container .input-wrapper input[type="number"] {
  width: 100%;
  padding: 12px 15px;
  font-size: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
  transition: border 0.2s ease, background 0.2s ease;
}
#dfpg-container .input-wrapper input::placeholder {
  color: #bbb;
  opacity: 1;
}
#dfpg-container .input-wrapper input:focus {
  border: 1px solid #FF4F00;
  background: rgba(255, 255, 255, 0.15);
}

/* Hover label overlay */
#dfpg-container .hover-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  color: #fff;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 999;
}
#dfpg-container .input-wrapper.hover-active input {
  background: rgba(255, 255, 255, 0.3);
}
#dfpg-container .input-wrapper.hover-active .hover-overlay {
  opacity: 1;
}

/* iOS-style toggles */
#dfpg-container .ios-toggle-container {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  margin-bottom: 15px;
  position: relative;
  min-height: 46px;
  box-sizing: border-box;
  flex: 0;
}
#dfpg-container .toggle-switch {
  position: relative;
  width: 50px;
  height: 24px;
  flex-shrink: 0;
}
#dfpg-container .toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
#dfpg-container .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #565656;
  border-radius: 34px;
  transition: 0.4s;
}
#dfpg-container .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}
#dfpg-container .toggle-switch input:checked + .slider {
  background-color: #FF4F00;
}
#dfpg-container .toggle-switch input:checked + .slider:before {
  transform: translateX(26px);
}

/* BUTTONS */
#dfpg-container button {
  padding: 14px 24px;
  font-size: 1rem;
  border: none;
  border-radius: 999px;
  background: #FF4F00;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 15px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}
#dfpg-container button:hover {
  background: #d84400;
}
#dfpg-container #downloadMasterBtn,
#dfpg-container .segment-downloads button {
  margin-top: 8px;
  margin-right: 8px;
}

/* PILL-TOGGLE */
#dfpg-container .pill-toggle {
  display: inline-block;
  background-color: #2C2C2C;
  border-radius: 999px;
  width: 210px;
  height: 42px;
  position: relative;
  margin: 0 auto 20px auto;
  border: none;
  overflow: hidden;
}
#dfpg-container .pill-toggle-selector {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 6px); /* Change from thirds to halves */
  /* width: calc(100% / 3 - 6px); */
  height: 36px;
  background-color: #565656;
  border-radius: 999px;
  transition: all 0.3s ease;
}
#dfpg-container .pill-toggle-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  height: 100%;
  user-select: none;
  cursor: pointer;
}
#dfpg-container .pill-toggle-labels span {
  flex: 1;
  min-width: 0; /* Allows the flex item to shrink */
  display: block; /* Ensures block-level behavior for overflow to work */
  text-align: center;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 42px;
  color: #fff;
  white-space: nowrap; /* Prevents wrapping */
  overflow: hidden;    /* Hides any overflow */
  text-overflow: ellipsis; /* Shows "..." when text is too long */
}


/* Move the toggle for the 3 modes */
#dfpg-container .pill-toggle[data-mode="standard"] .pill-toggle-selector {
  left: 3px;
}

/*

#dfpg-container .pill-toggle[data-mode="ranch"] .pill-toggle-selector {
  left: calc(100% / 3 + 3px);
}
#dfpg-container .pill-toggle[data-mode="advanced"] .pill-toggle-selector {
  left: calc(2 * (100% / 3) + 3px);
}

*/

#dfpg-container .pill-toggle[data-mode="advanced"] .pill-toggle-selector {
  left: calc(50% + 3px); /* Change from thirds to halves */
}

/* SLIDER-RANGE */
#dfpg-container .slider-container {
  width: 100%;
  margin: 0 auto 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
#dfpg-container input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 95%;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  outline: none;
  margin: 0;
  cursor: pointer;
  position: relative;
}
#dfpg-container input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}
#dfpg-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FF4F00;
  cursor: pointer;
  margin-top: -8px;
  transition: transform 0.15s ease;
}
#dfpg-container input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
#dfpg-container input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.2);
}
#dfpg-container input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FF4F00;
  cursor: pointer;
  transition: transform 0.15s ease;
}
#dfpg-container input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.1);
}
#dfpg-container input[type="range"]::-moz-range-thumb:active {
  transform: scale(1.2);
}
#dfpg-container .slider-labels {
  width: 95%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 1rem;
  color: #ccc;
}

/* RESULTS & LOGGING */
#dfpg-container #result,
#dfpg-container #flightTime,
#dfpg-container #log {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 10px 15px;
  margin-top: 20px;
  font-size: 0.9rem;
  color: #fff;
}
#dfpg-container #result {
  font-weight: 600;
}
#dfpg-container #log {
  max-height: 250px;
  overflow-y: auto;
}
#dfpg-container #log strong {
  color: #FF4F00;
}

/* POI ROWS */
#dfpg-container .poi-row {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
}
#dfpg-container .poi-row .poi-row-title {
  font-size: 0.95rem;
  margin-bottom: 8px;
  display: block;
}
#dfpg-container .poi-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
#dfpg-container .delete-poi-button {
  background-color: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}
#dfpg-container .delete-poi-button:hover {
  background-color: rgba(255,255,255,0.2);
}

/* Spinner styling */
#dfpg-container .spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Info icon & tooltips */
#dfpg-container .info-pill-icon {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.85rem;
  color: #fff;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s ease;
  margin: 0;
  height: 24px;
}
#dfpg-container .info-pill-icon:hover {
  background: #FF4F00;
  color: #fff;
}
#dfpg-container .info-wrapper {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
#dfpg-container .info-tooltip {
  display: none;
  position: absolute; 
  width: 90%;  
  max-width: 540px;
  background: rgba(0,0,0,0.9);
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  z-index: 99999;
  font-size: 0.9rem;
  box-sizing: border-box;
  white-space: normal; 
  color: #fff;
}
#dfpg-container .info-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%; 
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(0,0,0,0.9);
  left: var(--arrowOffset, 50%);
  transform: translateX(-50%);
}
#dfpg-container .info-tooltip.active {
  display: block;
}

/* RESPONSIVE */
@media (max-width: 480px) {
  #dfpg-container .dfpg-container-inner {
    width: 95%;
    margin: 40px auto;
    padding: 15px;
    position: relative;
  }
}

/* CHUNK #2: dronePhotoUploader.css (CSS) */

/* Outer wrapper for everything in this uploader */
#dpu-container {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #000;
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

/* The "card" that replaced .container */
#dpu-container .dpu-container-inner {
  width: 90%;
  max-width: 600px;
  margin: 80px auto 40px auto;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  position: relative;
}

/* Reset-like styles inside #dpu-container */
#dpu-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#dpu-container h1, 
#dpu-container h2, 
#dpu-container label {
  text-shadow: 0 3px 16px rgba(0,0,0,0.8);
}
#dpu-container h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 35px;
  text-align: center;
}
#dpu-container label {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 8px;
  display: block;
}

#dpu-container .input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
#dpu-container .input-wrapper {
  position: relative;
  display: block;
  flex: 1;
}
#dpu-container .input-wrapper input[type="text"],
#dpu-container .input-wrapper input[type="email"],
#dpu-container .input-wrapper textarea {
  width: 100%;
  padding: 12px 15px;
  font-size: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
  transition: border 0.2s ease, background 0.2s ease;
  margin-bottom: 15px;
}
#dpu-container .input-wrapper textarea {
  border-radius: 20px;
  resize: vertical;
}
#dpu-container .input-wrapper input::placeholder, 
#dpu-container .input-wrapper textarea::placeholder {
  color: #bbb;
  opacity: 1;
}
#dpu-container .input-wrapper input:focus,
#dpu-container .input-wrapper textarea:focus {
  border: 1px solid #FF4F00;
  background: rgba(255, 255, 255, 0.15);
}

/* Drag & Drop */
#dpu-container .upload-area {
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  transition: border-color 0.3s ease;
  cursor: pointer;
  margin-bottom: 15px;
}
#dpu-container .upload-area.dragover {
  border-color: #FF4F00;
  background: rgba(255, 255, 255, 0.07);
}
#dpu-container .upload-area p {
  margin-bottom: 10px;
  font-size: 0.95rem;
}

/* Enhanced styling for CSV upload area */
#dpu-container .upload-area.csv-upload {
  border-color: #4CAF50;
  background: rgba(76, 175, 80, 0.05);
  margin: 20px 0;
  position: relative;
}

#dpu-container .upload-area.csv-upload:hover {
  border-color: #66BB6A;
  background: rgba(76, 175, 80, 0.08);
}

#dpu-container .upload-area.csv-upload.dragover {
  border-color: #4CAF50;
  background: rgba(76, 175, 80, 0.12);
}

#dpu-container .upload-area.csv-upload p:first-child {
  color: #4CAF50;
  font-weight: 500;
  margin-bottom: 8px;
}

#dpu-container .upload-area.csv-upload .upload-description {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Buttons => changed .btn to .dpu-btn */
#dpu-container .dpu-btn {
  padding: 14px 24px;
  font-size: 1rem;
  border: none;
  border-radius: 999px;
  background: #FF4F00;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#dpu-container .dpu-btn:hover {
  background: #d84400;
}

/* Spinner */
#dpu-container .spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Progress Bar */
#dpu-container .progress-bar {
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  overflow: hidden;
  height: 12px;
  margin-top: 15px;
  margin-bottom: 15px;
  display: none;
}
#dpu-container .progress-bar-fill {
  background: #FF4F00;
  height: 100%;
  width: 0%;
  transition: width 0.3s ease;
}

/* Red highlight when missing required fields */
#dpu-container .missing-field {
  border: 2px solid red !important;
}

/* Close icon (X) */
#dpu-container .close-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 18px;
  background: #fff;
  border-radius: 50%;
  color: #000;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin-left: 10px;
  cursor: pointer;
}
#dpu-container .close-icon:hover {
  background: #ccc;
}

/* Mobile breakpoint */
@media (max-width: 480px) {
  #dpu-container .dpu-container-inner {
    width: 95%;
    margin: 40px auto;
    padding: 15px;
  }
}


/* Keep the same position & overflow for all three */
/* Keep the same position & overflow for all three */
#pricing-header,
#about,
#create {
  position: relative;
  overflow: visible;
  isolation: isolate; /* Create new stacking context */
}

/* PRICING Circle Swirl */
#pricing-header::before {
  content: "";
  position: absolute;
  top: -1200px;
  left: 50%;
  transform: translateX(-50%) rotate(160deg);
  width: 1600px;         /* Larger bounding box so the swirl is bigger */
  height: 1600px;
  pointer-events: none;
  z-index: -2;
  background: url("assets/ColorSwirl.svg") no-repeat center;
  /* 'contain' keeps the full shape visible within the box 
     If you need it to fill the box entirely, use 'cover' instead. */
  background-size: contain;
  opacity: 0.6;
}

/* ABOUT Circle Swirl */
#about::before {
  content: "";
  position: absolute;
  top: -1200px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  width: 1600px;         /* Larger bounding box so the swirl is bigger */
  height: 1600px;
  pointer-events: none;
  z-index: -2;
  background: url("assets/ColorSwirl.svg") no-repeat center;
  /* 'contain' keeps the full shape visible within the box 
     If you need it to fill the box entirely, use 'cover' instead. */
  background-size: contain;
  opacity: 0.6;
}

/* CREATE Circle Swirl */
#create::before {
  content: "";
  position: absolute;
  top: -1200px;
  left: 50%;
  transform: translateX(-50%) rotate(200deg);
  width: 1600px;         /* Larger bounding box so the swirl is bigger */
  height: 1600px;
  pointer-events: none;
  z-index: -2;
  background: url("assets/ColorSwirl.svg") no-repeat center;
  /* 'contain' keeps the full shape visible within the box 
     If you need it to fill the box entirely, use 'cover' instead. */
  background-size: contain;
  opacity: 0.6;
}

/* Noise overlay layer for all three */
#pricing-header::after,
#about::after,
#create::after {
  content: "";
  position: absolute;
  top: -1600px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  width: 1800px;
  height: 1800px;
  pointer-events: none;
  z-index: -1;
  background: url("assets/NoiseSwirl.png") repeat center;
  background-size: 200px 200px;
  background-position: 0 0;
  opacity: 1;
}



.stat-box h1 {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  /* If needed, add !important:
     margin-left: 0 !important;
     margin-right: 0 !important;
     max-width: none !important; */
}


/* Not adding gradient for now, work on later so it just appears on pages other than the landing page */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to bottom, 
    rgba(0,0,0,0.0) 0%,
    rgba(0,0,0,0.0) 20%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
  z-index: 998; /* Below header (999) but above other content */
}

.symbol-3d {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(0.05px);
}

/* Style for CTA1 button symbol */
.cta-button.with-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cta-button.with-symbol .symbol-3d {
  filter: invert(0%); /* Makes SVG white to match button text */
}

/* Style for CTA2 button symbol */
.cta-button2-fixed.with-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cta-button2-fixed.with-symbol .symbol-3d {
  filter: invert(39%) sepia(62%) saturate(7483%) hue-rotate(4deg) brightness(112%) contrast(106%); /* Makes SVG #FF4F00 color */
}

.cta-button2-fixed.with-symbol:hover .symbol-3d {
  filter: invert(0%); /* Makes SVG white on hover */
}

/* 3D Viewer Button Styles */
.viewer-button-container {
  margin-top: 1.5rem;
}

.viewer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FF4F00;
  color: #fff;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.viewer-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.viewer-button:hover {
  background: #e64500;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 79, 0, 0.3);
}

.viewer-button:hover::after {
  left: 100%;
}

.viewer-button-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  filter: invert(0%); /* Makes SVG white to match button text */
  transition: transform 0.3s ease;
}

.viewer-button:hover .viewer-button-icon {
  transform: scale(1.1);
}

#dpu-container .input-wrapper textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Remove arrows (spinners) in Chrome, Safari, Edge, and Opera */
#dfpg-container .input-wrapper input[type="number"]::-webkit-outer-spin-button,
#dfpg-container .input-wrapper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove arrows (spinners) in Firefox */
#dfpg-container .input-wrapper input[type="number"] {
  -moz-appearance: textfield;
}

/* Add Existing Path Button */
.add-path-button {
  /* Removed position: absolute; */
  /* Removed top/left properties */
  /* Other styles moved to .info-pill-icon or overridden above */
  background: rgba(255, 255, 255, 0.1);
  border: none; /* Match info pill */
  border-radius: 999px; /* Match info pill */
  padding: 2px 10px; /* Match info pill */
  font-size: 0.85rem; /* Match info pill */
  cursor: pointer;
  color: #fff;
  text-transform: uppercase; /* Match info pill */
  user-select: none;
  transition: all 0.3s ease;
  /* Removed z-index */
  margin-top: 0.5rem;
  display: block;
  width: fit-content;
}

.add-path-button:hover {
  /* Inherits hover from .info-pill-icon */
  background: #FF4F00; 
  color: #fff;
}

/* Popup Styles */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup.hidden {
  display: none;
}

.popup-content {
  background: #1a1a1a;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  position: relative;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.popup-header h2 {
  font-size: 1.5rem;
  font-weight: 500;
}

.close-icon {
  font-size: 1.5rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}

.close-icon:hover {
  color: white;
}

.instructions {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  font-weight: 500;
}

.upload-area {
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.upload-area:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.upload-area p {
  margin: 10px 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  font-weight: 500;
  font-family: inherit;
}

.file-format {
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.parsing-results {
  margin-top: 1.5rem;
}

.parsing-results.hidden {
  display: none;
}

#detectedParams {
  margin-top: 1rem;
}

#detectedParams div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

#detectedParams strong,
#detectedParams span {
  font-size: 1.2rem;
  font-weight: 500;
}

#detectedParams strong {
  color: rgba(255, 255, 255, 0.8);
}

#detectedParams span {
  color: white;
}

.dfpg-header {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* Add explicit gap between elements */
}

/* Group for title/info - Flexbox centers this */
.header-title-group {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title-group h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.header-title-group .info-wrapper {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* Style for Add Existing Path button */
.add-path-button.info-pill-icon {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.85rem;
  color: #fff;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s ease;
  margin: 0;
  height: 24px;
}

.add-path-button.info-pill-icon:hover {
  background: #FF4F00;
  color: #fff;
}

/* ML Processing Styles - Match dpu-container design language */
#ml-container {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

/* The main container that matches dpu-container-inner */
#ml-container .dpu-container-inner {
  width: 90%;
  max-width: 600px;
  margin: 80px auto 40px auto;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  position: relative;
}

/* Reset styles inside ml-container */
#ml-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#ml-container h1, 
#ml-container h2 {
  text-shadow: 0 3px 16px rgba(0,0,0,0.8);
}

#ml-container .input-wrapper {
  position: relative;
  display: block;
  flex: 1;
  margin-bottom: 15px;
}

#ml-container .input-wrapper input[type="url"],
#ml-container .input-wrapper input[type="email"] {
  width: 100%;
  padding: 12px 15px;
  font-size: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
  transition: border 0.2s ease, background 0.2s ease;
  margin-bottom: 15px;
}

#ml-container .input-wrapper input::placeholder {
  color: #bbb;
  opacity: 1;
}

#ml-container .input-wrapper input:focus {
  border: 1px solid #FF4F00;
  background: rgba(255, 255, 255, 0.15);
}

#ml-container .input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

#ml-container .dpu-btn {
  padding: 14px 24px;
  font-size: 1rem;
  border: none;
  border-radius: 999px;
  background: #FF4F00;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 160px;
}

#ml-container .dpu-btn:hover {
  background: #d84400;
}

#ml-container .dpu-btn:disabled {
  background: #666;
  cursor: not-allowed;
}

/* Stop button in ML form - using existing cta-button2 style */
#ml-container .stop-button {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 25px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#ml-container .stop-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

#ml-container .stop-button:disabled {
  background: transparent;
  color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
  transform: none;
}

#ml-container .stop-button .stop-icon {
  font-size: 14px;
}

#ml-container .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 10px;
  display: inline-block;
}

#ml-container .job-status {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.3);
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
}

#ml-container .job-status h3 {
  color: #28a745;
  margin-bottom: 15px;
  font-size: 1.2rem;
  text-shadow: 0 3px 16px rgba(0,0,0,0.8);
}

#ml-container .job-status p {
  margin-bottom: 8px;
  line-height: 1.5;
  color: #fff;
}

#ml-container .error-message {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
}

#ml-container .error-message h3 {
  color: #dc3545;
  margin-bottom: 15px;
  font-size: 1.2rem;
  text-shadow: 0 3px 16px rgba(0,0,0,0.8);
}

#ml-container .error-message p {
  line-height: 1.5;
  color: #fff;
}

/* Mobile breakpoint */
@media (max-width: 480px) {
  #ml-container .dpu-container-inner {
    width: 95%;
    margin: 40px auto;
    padding: 15px;
  }
}

/* Enhanced Drone Path Generator Styles */
#dfpg-container .optimization-section {
  margin: 30px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#dfpg-container .optimize-btn {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #0a84ff, #007aff);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

#dfpg-container .optimize-btn:hover {
  background: linear-gradient(135deg, #007aff, #005fe7);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(10, 132, 255, 0.3);
}

#dfpg-container .optimize-btn:disabled {
  background: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#dfpg-container .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

#dfpg-container .optimization-results {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#dfpg-container .results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

#dfpg-container .result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#dfpg-container .result-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

#dfpg-container .result-value {
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  text-align: right;
}

#dfpg-container .error-message {
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.3);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

#dfpg-container .error-message p {
  color: #ff453a;
  margin: 0;
  font-size: 14px;
}

#dfpg-container .download-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

#dfpg-container .download-btn {
  padding: 14px 20px;
  background: rgba(52, 199, 89, 0.2);
  border: 1px solid rgba(52, 199, 89, 0.4);
  border-radius: 10px;
  color: #34c759;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#dfpg-container .download-btn:hover:not(:disabled) {
  background: rgba(52, 199, 89, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(52, 199, 89, 0.2);
}

#dfpg-container .download-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#dfpg-container .battery-downloads {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#dfpg-container .download-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
  font-weight: 500;
}

#dfpg-container .battery-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

#dfpg-container .battery-btn {
  padding: 12px 16px;
  background: rgba(255, 149, 0, 0.2);
  border: 1px solid rgba(255, 149, 0, 0.4);
  border-radius: 8px;
  color: #ff9500;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

#dfpg-container .battery-btn:hover {
  background: rgba(255, 149, 0, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 149, 0, 0.2);
}

#dfpg-container .mission-logs {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 20px;
}

#dfpg-container .mission-logs h3 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 600;
}

#dfpg-container .mission-logs #logContent {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

#dfpg-container .mission-logs #logContent strong {
  color: #0a84ff;
  font-weight: 600;
}

/* Success highlighting for optimization results */
#dfpg-container .result-value.success {
  color: #34c759;
}

#dfpg-container .result-value.warning {
  color: #ff9500;
}

#dfpg-container .result-value.error {
  color: #ff453a;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #dfpg-container .results-grid {
    grid-template-columns: 1fr;
  }
  
  #dfpg-container .battery-buttons {
    grid-template-columns: 1fr;
  }
  
  #dfpg-container .result-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  #dfpg-container .result-value {
    text-align: left;
  }
}

/* Pipeline Step Selector Styling */
#ml-container .step-selector-label {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#ml-container .step-selector {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 45px;
}

#ml-container .step-selector:focus {
  outline: none;
  border-color: rgba(10, 132, 255, 0.8);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
}

#ml-container .step-selector option {
  background: #1a1a1a;
  color: #fff;
  padding: 12px;
  font-weight: 500;
}

/* Dynamic placeholder text color */
#ml-container #s3UrlInput.step-sfm {
  color: #34c759;
}

#ml-container #s3UrlInput.step-3dgs {
  color: #ff9500;
}

#ml-container #s3UrlInput.step-compression {
  color: #0a84ff;
}

/* Responsive adjustments for step selector */
@media (max-width: 480px) {
  #ml-container .step-selector {
    font-size: 14px;
    padding: 12px 16px;
    padding-right: 40px;
    background-size: 18px;
    background-position: right 10px center;
  }
  
  #ml-container .step-selector-label {
    font-size: 13px;
  }
}

/* ===== PROGRESS TRACKER STYLES ===== */
/* Merged from style.css - Progress Tracker for ML Pipeline */

/* Progress Tracker - Matching Brand Aesthetic */
.apple-progress-tracker {
  margin: 24px 0;
  padding: 0;
  background: transparent;
  border: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Progress Container */
.progress-container {
  margin-bottom: 16px;
}

.pill-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin-bottom: 12px;
}

.pill-progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0, 0, 0.2, 1);
  width: 0%;
}

/* Status Text */
.status-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
  text-align: left;
}

/* Action Buttons Container */
.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}

/* Secondary Button (Stop) */
.stop-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.stop-button:hover {
  background: #374151;
  color: white;
  border-color: #374151;
}

.stop-button:active {
  transform: translateY(1px);
}

.stop-button:disabled {
  background: transparent;
  color: #9ca3af;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

.stop-icon {
  font-size: 12px;
}

/* Responsive Design for Progress Tracker */
@media (max-width: 768px) {
  .apple-progress-tracker {
    margin: 16px 0;
  }
  
  #ml-container .stop-button {
    margin-left: 8px;
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}

/* ML Processing Section */
#ml-container {
  margin-top: 2rem;
}

.step-selector-label {
  display: block;
  margin-bottom: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

.step-selector {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.csv-data-label {
  display: block;
  margin-bottom: 0.5rem;
  color: #666;
  font-size: 0.9rem;
  font-weight: 500;
}

.csv-data-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.85rem;
  resize: vertical;
  min-height: 120px;
}

.csv-data-input:focus {
  outline: none;
  border-color: #4a4a4a;
}

.job-status {
  background-color: #e8f5e9;
  border: 1px solid #4caf50;
  border-radius: 4px;
  padding: 1rem;
  margin-top: 1rem;
}

/* NEW PROJECT POPUP */
body.popup-open {
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overscroll-behavior: none;
  -ms-scroll-chaining: none;
  height: 100%;
  position: fixed;
  width: 100%;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  box-sizing: border-box;
  pointer-events: all;
  overscroll-behavior: contain;
  -webkit-overscroll-behavior: contain;
  -ms-scroll-chaining: none;
}

.popup-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Header */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0 6px 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 10;
  gap: 12px;
  margin: 0 auto 6px auto;
  max-width: 420px;
  width: 100%;
}

.popup-title-section {
  flex: 1;
  min-width: 0;
  margin-right: 12px; /* Reduced from 44px to allow text to extend closer to close button */
}

.popup-title-input {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  outline: none;
  padding: 6px 12px;
  border-radius: 25px;
  transition: background 0.2s ease;
  font-family: inherit;
  width: 100%;
  resize: none;
  overflow: hidden;
  display: block;
  line-height: 1.4;
  min-height: 44px;
  height: auto;
}

.popup-title-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

.popup-title-input:focus {
  background: rgba(255, 255, 255, 0.05);
}

.popup-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  opacity: 1;
  transition: all 0.2s ease;
  flex-shrink: 0;
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('assets/SpaceportIcons/Close.svg');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  filter: brightness(0) invert(1);
}

.popup-close::before {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: -1;
}

.popup-close:hover::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Scrollable Content */
.popup-content-scroll {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 20px;
  position: relative;
  z-index: 1001;
}

/* Accordion Sections */
.accordion-section {
  /* Removed border-bottom for cleaner look */
  margin-bottom: 0;
}

.accordion-section:last-child {
  /* No border needed */
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  opacity: 1;
  transform: translateY(0);
  height: 50px;
  box-sizing: border-box;
  margin: 2px 0;
}

.accordion-header:hover {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 25px;
}

/* Hide header when section is active */
.accordion-section.active .accordion-header {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  height: 0;
  padding: 0 16px;
  overflow: hidden;
}

/* Keep Property Upload title visible when active */
.accordion-section[data-section="upload"].active .accordion-header {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  height: 50px;
  padding: 15px 16px;
  overflow: visible;
}

.accordion-title {
  display: flex;
  align-items: center;
}

.accordion-title h3 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
  font-family: inherit;
}

.accordion-chevron {
  width: 16px;
  height: 16px;
  background: url('assets/SpaceportIcons/Arrow.svg') no-repeat center;
  background-size: contain;
  opacity: 1;
  transition: transform 0.3s ease;
}

.accordion-section.active .accordion-chevron {
  transform: rotate(90deg);
}

.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}

.accordion-section.active .accordion-content {
  max-height: 1000px;
  opacity: 1;
}

/* Section Descriptions */
.section-description {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  margin: 0 0 20px 0;
  padding: 0 16px;
  line-height: 1.4;
  font-family: inherit;
}

/* Map Section */
.popup-map-section {
  position: relative;
}

/* Address Search Overlay */
.address-search-overlay {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  z-index: 15;
  display: flex;
  gap: 6px;
  align-items: center;
}

.address-search-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 32px;
  padding: 0 20px; /* Increased padding for better text containment */
  transition: all 0.2s ease;
  box-sizing: border-box;
  height: 56px;
  min-width: 0; /* Allow wrapper to shrink */
  overflow: hidden; /* Ensure content doesn't overflow */
}

.address-search-wrapper:focus-within {
  background: rgba(0, 0, 0, 0.15);
}

.address-search-wrapper input {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  padding: 16px 0;
  outline: none;
  width: 100%;
  min-width: 0; /* Allow shrinking below content size */
  font-weight: 500;
  font-family: inherit;
  overflow: hidden; /* Ensure text doesn't overflow */
  text-overflow: ellipsis; /* Show ellipsis for overflow */
}

.address-search-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.address-search-wrapper::after, /* Use ::after to avoid conflict with icon */
.expand-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: var(--accent-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.82px; /* Increased by 30% for thicker border */
  pointer-events: none;
  z-index: 0; /* Ensure it's below the input */
}

.popup-map-section {
  position: relative;
}

.expand-button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 35;
}

.expand-button:hover {
  background: rgba(0, 0, 0, 0.15);
}

.expand-icon {
  width: 20px;
  height: 20px;
  background: url('assets/SpaceportIcons/MaximizeScreen.svg') no-repeat center;
  background-size: contain;
  opacity: 1;
  filter: brightness(0) invert(1);
}

.expand-button.expanded .expand-icon {
  background: url('assets/SpaceportIcons/MinimizeScreen.svg') no-repeat center;
  background-size: contain;
  filter: brightness(0) invert(1);
}

/* Custom teardrop pin styling */
.custom-teardrop-pin {
  cursor: pointer;
  /* Enhanced shadow for better visibility against light backgrounds */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)) 
          drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2))
          drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
  transition: transform 0.2s ease;
  /* REMOVED: Scale down by 20% for better visual balance - testing if this causes coordinate issues */
  /* transform: scale(0.8); */
  /* transform-origin: center bottom; */
  /* Additional shadow positioned at the base */
  position: relative;
  /* Shift pin down so the actual bottom tip aligns with the click point */
  transform: translateY(4px);
}

.custom-teardrop-pin::after {
  content: '';
  position: absolute;
  bottom: -6px; /* Adjusted to account for the 4px translateY shift */
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 4px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.custom-teardrop-pin:hover {
  /* REMOVED: transform: scale(0.88); - testing if this causes coordinate issues */
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.35)) 
          drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25))
          drop-shadow(0 0 3px rgba(0, 0, 0, 0.15));
}

.custom-teardrop-pin:hover::after {
  bottom: -7px; /* Adjusted to account for the 4px translateY shift */
  width: 10px;
  height: 5px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, transparent 70%);
}

/* Map Container */
.map-container {
  height: 300px;
  width: 100%;
  position: relative;
  border-radius: 31px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

/* Remove the direct blur on map container */
.map-container.has-instructions {
  /* filter: blur(2px); - removing this */
}

/* Add a new blur overlay */
.map-blur-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 20;
}

.map-container.has-instructions .map-blur-background {
  opacity: 1;
}

.map-container.has-instructions.instructions-hidden .map-blur-background {
  opacity: 0;
}

/* Progressive bottom blur for seamless edge blending */
/* Temporarily disabled for performance optimization - can be re-enabled if needed */
/*
.map-progressive-bottom-blur {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 10;
  border-radius: 0 0 31px 31px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 10%,
    rgba(0, 0, 0, 0.4) 25%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 0.8) 55%,
    rgba(0, 0, 0, 0.9) 70%,
    rgba(0, 0, 0, 1) 95%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 10%,
    rgba(0, 0, 0, 0.4) 25%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 0.8) 55%,
    rgba(0, 0, 0, 0.9) 70%,
    rgba(0, 0, 0, 1) 95%
  );
}
*/

/* Fullscreen adjustments for progressive bottom blur */
.map-container.fullscreen .map-progressive-bottom-blur {
  border-radius: 0;
  height: 90px;
}

/* Instructions aligned with map margins */
.map-instructions-center {
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  transform: translateY(-50%);
  z-index: 30;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  padding: 0;
}

.instruction-content {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 25px;
  padding: 24px 20px 24px 20px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.instruction-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 41%,
    rgba(255, 255, 255, 0) 57%,
    rgba(255, 255, 255, 0.4) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  padding: 1.82px;
  z-index: -1;
}

/* Remove the hover state for instructions popup */
.instruction-content:hover {
  background: rgba(0, 0, 0, 0.1);
}

.instruction-pin {
  width: 32px;
  height: 32px;
  background: url('assets/SpaceportIcons/Pin.svg') no-repeat center;
  background-size: contain;
  margin: 0 auto 12px;
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  position: relative;
  z-index: 1;
}

.instruction-content h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
  color: #fff;
  position: relative;
  z-index: 1;
}

/* Map Dim Overlay for Instructions */
.map-dim-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 15;
  pointer-events: none;
  border-radius: 31px;
  transition: opacity 0.3s;
  opacity: 1;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
}

.map-container.has-instructions .map-dim-overlay {
  display: block;
}

/* Category Outline Containers */
.category-outline {
  box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 31px;
  padding: 6px;
  margin-bottom: 16px;
  background: transparent;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.category-outline:last-child {
  margin-bottom: 0;
}

/* Add margin above the upload zone container in Property Upload section */
.accordion-section[data-section="upload"] .category-outline:first-child {
  margin-top: 16px;
}

.category-outline h4 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  margin: 6px 0 6px 0;
  font-family: inherit;
  text-align: center;
}

/* Sections - now used inside category outlines */
.popup-section {
  padding: 0; /* Remove padding since category-outline handles it */
  position: relative;
}

.popup-section:last-child {
  padding-bottom: 0;
}

.popup-section h4 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  margin: 5px 0 5px 0;
  font-family: inherit;
  text-align: center;
}

.input-row-popup {
  display: flex;
  gap: 6px;
  margin: 0 0 6px 0;
  width: 100%;
}

.input-row-popup:last-child {
  margin-bottom: 0;
}

.popup-input-wrapper {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 25px;
  padding: 0 20px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  height: 50px;
}

.popup-input-wrapper.listing-description-wrapper {
  min-height: 50px;
  height: auto;
  align-items: flex-start;
}

.popup-input-wrapper.listing-description-wrapper textarea {
  width: 100%;
  height: 100%;
  padding: 12px 0 12px 0;
}

.popup-input-wrapper:focus-within {
  background: rgba(255, 255, 255, 0.15);
}

.input-icon {
  width: 19px;
  height: 19px;
  margin-right: 10px;
  flex-shrink: 0;
  opacity: 0.6;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.popup-input-wrapper input {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  padding: 16px 0;
  outline: none;
  width: 100%; /* Take full width of wrapper */
  min-width: 0; /* Allow shrinking below content size */
  font-weight: 500;
  font-family: inherit;
}

.popup-input-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* Explanatory text styling */
.popup-input-wrapper input.has-suffix::after {
  content: attr(data-suffix);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  font-weight: 500;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}

/* Alternative approach - position relative to wrapper */
.popup-input-wrapper.has-suffix::after {
  content: attr(data-suffix);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  font-weight: 500;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}

/* Adjust text fade for inputs with suffix */
.popup-input-wrapper input.has-suffix {
  padding-right: 80px; /* Make room for suffix text */
}

/* Upload Zone */
.upload-zone {
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  background: none;
  padding: 32px 24px;
  text-align: center;
  transition: border-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}
.upload-zone:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: none;
}

.upload-icon {
  width: 48px;
  height: 48px;
  background: url('assets/SpaceportIcons/Camera.svg') no-repeat center;
  background-size: contain;
  margin: 0 auto 12px auto;
  opacity: 0.7;
}

.upload-zone p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 8px 0;
  font-family: inherit;
}

.upload-hint {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  font-weight: 500;
  font-family: inherit;
}

/* Status Indicators */
.status-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  border: 2.4px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.pending {
  background: #ff9500;
  box-shadow: 0 0 8px rgba(255, 149, 0, 0.4);
}

.status-dot.processing {
  background: #0a84ff;
  box-shadow: 0 0 8px rgba(10, 132, 255, 0.4);
  animation: pulse 2s infinite;
}

.status-dot.complete {
  background: #34c759;
  box-shadow: 0 0 8px rgba(52, 199, 89, 0.4);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.status-indicator span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  font-weight: 500;
  font-family: inherit;
}

/* Action Buttons */
.popup-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  border: 2.5px solid #FF4F00;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  box-sizing: border-box;
  text-decoration: none;
}

.popup-action-btn.primary {
  background: transparent;
  color: #FF4F00;
  border-color: #FF4F00;
}

.popup-action-btn.primary:hover {
  background: #FF4F00;
  color: #fff;
  border-color: #FF4F00;
  transform: translateY(-1px);
}

.popup-action-btn.secondary {
  background: transparent;
  color: #FF4F00;
  border-color: #FF4F00;
  opacity: 0.6;
}

.popup-action-btn.secondary:hover {
  background: #FF4F00;
  color: #fff;
  border-color: #FF4F00;
  opacity: 1;
}

.popup-action-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  color: #FF4F00;
  background: transparent;
  border-color: #FF4F00;
}

.btn-icon {
  font-size: 1.2rem;
}

/* Mobile responsive styles removed to maintain consistent dimensions and concentricity */

/* Specific Input Icon Classes */
.input-icon.pin {
  background-image: url('assets/SpaceportIcons/Pin.svg');
}

.input-icon.time {
  background-image: url('assets/SpaceportIcons/Time.svg');
}

.input-icon.number {
  background-image: url('assets/SpaceportIcons/Number.svg');
}

.input-icon.minimum {
  background-image: url('assets/SpaceportIcons/Minimum.svg');
}

.input-icon.maximum {
  background-image: url('assets/SpaceportIcons/Maximum.svg');
}

.input-icon.home {
  background-image: url('assets/SpaceportIcons/3D.svg');
}

.input-icon.map {
  background-image: url('assets/SpaceportIcons/Map.svg');
}

.input-icon.email {
  background-image: url('assets/SpaceportIcons/Info.svg');
}

.input-icon.link {
  background-image: url('assets/SpaceportIcons/Controls.svg');
}

.input-icon.flight {
  background-image: url('assets/SpaceportIcons/FlightPath.svg');
}

/* Flight Path Download Buttons Grid */
.flight-path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 0;
}

.flight-path-download-btn {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 25px;
  padding: 0 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  height: 50px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  font-weight: 500;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  animation: buttonFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.flight-path-download-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.flight-path-download-btn:active {
  transform: translateY(1px);
}

.flight-path-download-btn.loading {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.7);
}

.flight-path-download-btn.loading:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.flight-path-download-btn .download-icon {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  flex-shrink: 0;
  opacity: 0.6;
  background: url('assets/SpaceportIcons/Download.svg') no-repeat center;
  background-size: contain;
  filter: brightness(0) invert(1);
  transition: opacity 0.2s ease;
}

.flight-path-download-btn:hover .download-icon {
  opacity: 1;
}

.flight-path-download-btn .download-icon.loading {
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 2px solid rgba(255, 255, 255, 0.8);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Removed gradient border and text fade effects for cleaner appearance */

/* Placeholder message when no batteries */
.flight-path-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.1rem;
  font-weight: 500;
  padding: 20px;
  font-family: inherit;
  opacity: 0;
  animation: placeholderFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Luxurious button fade-in animation */
@keyframes buttonFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Placeholder fade-in animation */
@keyframes placeholderFadeIn {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments for map overlays - REMOVED to maintain concentricity */

/* Add background blur when instructions are visible */
.map-container.has-instructions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(3px);
  z-index: 15;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.map-container.has-instructions.instructions-hidden::before {
  opacity: 0;
}

/* Adjust address search wrapper width */
.address-search-wrapper {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 25px;
  padding: 0 20px 0 48px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  height: 50px;
}

.address-search-wrapper::before {
  content: '';
  position: absolute;
  left: 20px;
  width: 18px;
  height: 18px;
  background: url('assets/SpaceportIcons/Map.svg') no-repeat center;
  background-size: contain;
  opacity: 1;
  filter: brightness(0) invert(1);
}

/* Text fade-out effect for inputs */
.text-fade-right,
input.text-fade-right,
.address-search-wrapper input.text-fade-right {
  position: relative;
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    to right,
    black calc(100% - 10px),
    transparent calc(100% - 1px)
  );
  mask-image: linear-gradient(
    to right,
    black calc(100% - 10px),
    transparent calc(100% - 1px)
  );
}

/* Adjust fade length based on content */
.text-fade-right.fade-long {
  -webkit-mask-image: linear-gradient(
    to right,
    black calc(100% - 10px),
    transparent calc(100% - 1px)
  );
  mask-image: linear-gradient(
    to right,
    black calc(100% - 10px),
    transparent calc(100% - 1px)
  );
}

.text-fade-right.fade-short {
  -webkit-mask-image: linear-gradient(
    to right,
    black calc(100% - 10px),
    transparent calc(100% - 1px)
  );
  mask-image: linear-gradient(
    to right,
    black calc(100% - 10px),
    transparent calc(100% - 1px)
  );
}

.map-container.has-instructions.instructions-hidden .map-blur-background {
  opacity: 0;
}

.map-container.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  border-radius: 0;
  border: none;
  transition: all 0.3s ease;
}

.map-container.fullscreen .address-search-overlay {
  bottom: 16px;
  left: 16px;
  right: 16px;
}

.map-container.fullscreen .coordinates-input-overlay {
  bottom: 16px;
  left: 16px;
  right: 16px;
}

.map-container.fullscreen .expand-button {
  top: 16px;
  right: 16px;
}

.map-container.fullscreen .map-instructions-center {
  left: 16px;
  right: 16px;
}

.map-container.fullscreen .map-progressive-bottom-blur {
  border-radius: 0;
  height: 40px; /* Slightly taller in fullscreen for better effect */
}

/* Instructions aligned with map margins */
.map-instructions-center {
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  transform: translateY(-50%);
  z-index: 30;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  padding: 0;
}

.popup-input-wrapper textarea {
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  font-family: inherit;
  font-weight: 500;
  width: 100%;
  min-height: 50px;
  resize: vertical;
  box-sizing: border-box;
  display: block;
  padding: 0 0 0 0;
}
.popup-input-wrapper textarea:focus {
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #fff;
}
.popup-input-wrapper textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  opacity: 1;
}

.popup-input-wrapper textarea {
  padding: 12px 0 12px 0;
}

.popup-input-wrapper.listing-description-wrapper .input-icon {
  margin-top: 15px;
}

.input-icon.paragraph {
  background-image: url('assets/SpaceportIcons/Paragraph.svg');
}

.popup-input-wrapper input:focus {
  color: #fff;
}

/* Upload button progress functionality */
.category-outline.upload-button-only {
  box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 31px;
  padding: 15px 24px 24px 24px;  /* Increase top padding to 12px for 6px margin */
  margin-bottom: 16px;
  background: transparent;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
}

.category-outline.upload-button-only.no-outline {
  box-shadow: none;
  border: none;
  background: transparent;
}

.upload-progress-text {
  position: absolute;
  left: 6px;
  top: 6px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  font-family: inherit;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.upload-progress-text.active {
  opacity: 1;
}

.upload-progress-container {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 25px;
  overflow: hidden;
  display: none;
}

.upload-progress-container.active {
  display: block;
}

.upload-progress-bar {
  height: 100%;
  background: #fff;
  border-radius: 25px;
  width: 0%;
  transition: width 0.3s ease;
}

.upload-button-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 80px;
  width: 100%;
  margin: 0;
  padding: 0;  /* Remove top padding since we'll position the upload button absolutely */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-btn-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #111;
  font-size: 1.15rem;
  font-weight: 600;
  border: none;
  border-radius: 25px;
  padding: 10px 22px 10px 18px;
  cursor: pointer;
  box-shadow: none;
  transition: left 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.2s ease;
  width: fit-content;
  gap: 10px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
  margin: 0;
}

.upload-btn-with-icon.uploading {
  left: 100%;
  transform: translate(-100%, 0);
  pointer-events: none;
  z-index: 1;
  transition: left 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.upload-btn-with-icon.uploading .upload-btn-icon {
  opacity: 0;
}

.upload-btn-with-icon.loading {
  pointer-events: none;
  background: #e0e0e0;
  color: #999;
}

.upload-btn-with-icon.loading .upload-btn-icon {
  background: none;
  border: 2px solid rgba(170, 170, 170, 0.3);
  border-radius: 50%;
  border-top: 2px solid #999;
  animation: spin 1s linear infinite;
  width: 16px;
  height: 16px;
}

.upload-btn-with-icon:hover {
  background: #f2f2f2;
}

.upload-btn-with-icon.loading:hover {
  background: #e0e0e0;
}

.cancel-btn-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: transparent;
  font-size: 1.15rem;
  font-weight: 600;
  border: none;
  border-radius: 25px;
  padding: 10px 22px 10px 18px;
  cursor: pointer;
  box-shadow: none;
  transition: left 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: fit-content;
  gap: 10px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  margin: 0;
}

.cancel-btn-with-icon.active {
  left: 100%;
  transform: translate(-100%, 0);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  color: #111;
  transition: left 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cancel-btn-with-icon.active .cancel-btn-icon {
  opacity: 1;
}

.cancel-btn-with-icon:hover {
  background: #f2f2f2;
}

.upload-btn-icon,
.cancel-btn-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
  margin-right: 8px;
  filter: brightness(0);
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

.upload-btn-icon {
  background-image: url('assets/SpaceportIcons/Upload.svg');
}

.cancel-btn-icon {
  background-image: url('assets/SpaceportIcons/Close.svg');
  opacity: 0;
}

.project-controls-btn {
  position: absolute;
  top: 25px;
  right: 25px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s;
}
.project-controls-btn:focus,
.project-controls-btn:hover {
  filter: brightness(1.2) drop-shadow(0 2px 8px rgba(0,0,0,0.12));
}
.project-controls-icon {
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
  user-select: none;
}