/* =====================================================================
   Custom styling for extended signup page
   These rules complement the existing site design and are scoped
   to newly added sections and the multi‑step signup overlay. They
   follow the existing colour palette defined in styles.css.
===================================================================== */

/* Section wrapper and two‑column layout */
.highlight-section,
.benefits-section,
.process-section,
.pricing-section,
.verified-section,
.testimonials-section,
.faq-section {
  padding: 60px 0;
}

.highlight-section.alt-bg {
  background: #f6f8fc;
}

.section-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-container.two-col {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  align-items: center;
}

.text-block,
.image-block {
  flex: 1 1 400px;
  min-width: 280px;
}

.text-block h2 {
  margin-top: 0;
  font-size: 32px;
  color: var(--brand-navy);
}

.text-block p {
  font-size: 15px;
  color: #444;
  line-height: 1.7;
  margin: 18px 0;
}

.text-block ul.icon-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.text-block ul.icon-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 15px;
  color: #0b1f3a;
}

.text-block ul.icon-list li i {
  color: var(--brand-blue);
  font-size: 18px;
}

.image-block img {
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.cta-btn,
.submit-btn,
.next-btn,
.back-btn {
  background: var(--brand-blue);
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.back-btn {
  background: #d0d7e3;
  color: #0b1f3a;
}

.cta-btn:hover,
.next-btn:hover,
.submit-btn:hover {
  background: #163bb3;
}

.back-btn:hover {
  background: #c2cadd;
}

/* Benefits grid */
.benefits-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 40px;
}

.benefit-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: 24px;
  text-align: center;
}

.benefit-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}

.benefit-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--brand-navy);
}

.benefit-card p {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}

/* Additional new sections */
.network-section,
.sustainability-section,
.promise-section,
.container-spaces-section {
  padding: 60px 0;
}

.network-section .image-block img,
.sustainability-section .image-block img,
.promise-section .image-block img {
  max-width: 500px;
}

.container-spaces-section {
  background: #f6f8fc;
}

/* Container space cards grid */
.container-spaces-section .card-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 40px;
}

.container-spaces-section .space-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container-spaces-section .space-card h3 {
  margin-top: 0;
  font-size: 20px;
  color: var(--brand-navy);
}

.container-spaces-section .space-card p {
  font-size: 14px;
  color: #444;
  margin: 12px 0;
}

.container-spaces-section .space-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}
.container-spaces-section .space-card ul li {
  font-size: 14px;
  color: #555;
  margin-bottom: 6px;
}

.container-spaces-section .reserve-btn {
  align-self: flex-start;
  background: var(--brand-blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.container-spaces-section .reserve-btn:hover {
  background: #163bb3;
}

/* Process section */
.process-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  margin-top: 40px;
}

.process-step {
  flex: 1 1 calc(25% - 20px);
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
  min-width: 220px;
  text-align: center;
}

.process-step .step-number {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 50%;
  font-weight: 600;
  margin-bottom: 12px;
}

.process-step h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--brand-navy);
}

.process-step p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* Testimonials */
.testimonial-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 40px;
}

.testimonial-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.testimonial-card img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 16px;
}

.testimonial-card blockquote {
  font-style: italic;
  color: #555;
  margin: 0 0 12px;
  line-height: 1.6;
}

.testimonial-card cite {
  font-size: 14px;
  color: var(--brand-navy);
  font-weight: 600;
}

/* FAQ */
.faq-section .faq-item {
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 0;
}

.faq-question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-navy);
  cursor: pointer;
  padding: 10px 0;
}

.faq-question::after {
  content: '\f078';
  /* Font Awesome chevron-down */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  float: right;
  transition: transform 0.3s;
}

.faq-item.open .faq-question::after {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

.faq-item.open .faq-answer {
  max-height: 200px;
}

/* Multi‑step signup overlay styles */
.progress-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 20px;
  position: relative;
}

.progress-bar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #e5e7eb;
  z-index: 0;
}

.progress-step {
  position: relative;
  z-index: 1;
  background: #e5e7eb;
  color: #0b1f3a;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.progress-step small {
  display: block;
  font-size: 10px;
  color: #555;
  margin-top: 4px;
  white-space: nowrap;
}

.progress-step.active {
  background: var(--brand-blue);
  color: #fff;
}

.step {
  display: none;
  animation: fadeIn 0.4s ease;
}

.step-active {
  display: block;
}

.step-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

/* Fade animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-container.two-col {
    flex-direction: column;
    gap: 30px;
  }
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  .process-grid {
    flex-direction: column;
  }
  .process-step {
    flex: 1 1 100%;
  }
  .progress-bar small {
    display: none;
  }

  /*
    Always display images before text on smaller screens for two‑column
    sections. Setting the order to -1 moves image blocks above text
    without modifying the HTML structure. This improves mobile flow
    by showing visuals first.
  */
  .section-container.two-col .image-block {
    order: -1;
  }
}

/*
  Enhance the shipper process section with a simple scroll‑triggered
  animation. Each process step starts slightly below its final
  position and animates upward into place when scrolled into view.
  The `.in-view` class will be toggled via IntersectionObserver in
  the page script.
*/
.shipper-process-section .process-step {
  transform: translateY(60px);
  transition: transform 0.6s ease-out;
}
.shipper-process-section .process-step.in-view {
  transform: translateY(0);
}

/*
  Mobile‑specific spacing adjustments. Reduce excessive white space
  and arrange content in two columns where appropriate on mobile
  devices (approx. iPhone widths). These rules only apply to
  screens 600px and narrower.
*/
@media (max-width: 600px) {
  /* Show two benefit cards per row */
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Show two container cards per row */
  .container-spaces-section .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Tighten general section padding to clear white space */
  .highlight-section,
  .benefits-section,
  .pricing-section,
  .verified-section,
  .network-section,
  .sustainability-section,
  .promise-section,
  .container-spaces-section,
  .testimonials-section,
  .faq-section {
    padding: 40px 0;
  }

  /* The shipper process section still needs a bit more breathing room */
  .shipper-process-section {
    padding: 50px 0;
  }

  /* Reduce padding on split feature bands */
  .split-feature-section {
    padding: 60px 0;
  }

  /* Reduce gap inside two‑column containers */
  .section-container.two-col {
    gap: 24px;
  }

  /* Reduce gaps in various grids */
  .process-grid {
    gap: 24px;
  }
  .testimonial-grid {
    gap: 24px;
  }
}

/* Parallax fix for mobile: disable background‑attachment fixed */
@media (max-width: 768px) {
  .parallax-section {
    background-attachment: scroll !important;
  }
}

/* Ensure hero container can hold absolute positioned logo overlay */
.hero-wrap {
  position: relative;
}

/* Make progress dots smaller on very small screens (e.g. iPhone widths) */
@media (max-width: 480px) {
  .progress-step {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
  .progress-step small {
    display: none;
  }
}

/* =======================================
   Logo overlays for hero and images
======================================= */
.logo-overlay {
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 10;
}

.logo-overlay img {
  width: 140px;
  height: auto;
}

.image-block {
  position: relative;
}

.image-logo-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 80px;
  height: auto;
  opacity: 0.85;
}

/* Extra pricing details toggle */
.info-btn {
  background: none;
  border: none;
  color: var(--brand-blue);
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  margin-top: 10px;
  padding: 0;
}

.info-btn:hover {
  text-decoration: underline;
}

.pricing-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin-top: 10px;
}

.pricing-details.open {
  max-height: 500px;
}

/* Parallax background for sections */
.parallax-bg {
  position: relative;
  background-image: url('clouds-2.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}

.parallax-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.parallax-bg > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .parallax-bg {
    background-attachment: scroll !important;
  }
}

/* -----------------------------------------------------------------
   Enhancements for updated signup page
   These additions reduce white space, provide subtle backgrounds
   to long sections and define new interactive tab styles. They
   complement the existing styles and ensure consistency across
   desktop and mobile devices.
------------------------------------------------------------------- */

/* Process section background and overlay. Adds a scenic backdrop to
   the "How it works for shippers" section and lightly tints it so
   text remains readable. */
/* ===== SHIPPER PROCESS PARALLAX FIX ===== */
/* ===== FIX SHIPPER PROCESS SECTION ===== */
/* ===== SHIPPER PROCESS SECTION FIX ===== */
/* ===== FINAL FIX: SHIPPER PROCESS SECTION ===== */
.shipper-process-section {
  position: relative;
  background-image:
    linear-gradient(rgba(10, 20, 40, 0.58), rgba(10, 20, 40, 0.72)),
    url("parallax-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 90px 0;
  overflow: hidden;
}

.shipper-process-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.shipper-process-section .dashboard-wrapper {
  position: relative;
  z-index: 2;
}

.shipper-process-section .section-heading {
  color: #ffffff !important;
  position: relative;
  z-index: 3;
}

.shipper-process-section .process-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.shipper-process-section .process-step {
  background: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  color: #0b1f3a !important;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.shipper-process-section .process-step:nth-child(4) {
  grid-column: 1 / -1;
}

.shipper-process-section .process-step h3 {
  color: #0b1f3a !important;
  opacity: 1 !important;
}

.shipper-process-section .process-step p {
  color: #334155 !important;
  opacity: 1 !important;
}

.shipper-process-section .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #4361ee !important;
  color: #fff !important;
  font-weight: 700;
  margin-bottom: 14px;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .shipper-process-section {
    background-attachment: scroll !important;
    padding: 70px 0;
  }

  .shipper-process-section .process-grid {
    grid-template-columns: 1fr;
  }

  .shipper-process-section .process-step:nth-child(4) {
    grid-column: auto;
  }
}
/* Dynamic pricing tab styles. These tabs allow users to explore
   multiple pricing topics without leaving the section. On mobile
   they wrap naturally and adjust to 2–3 per row. */
.pricing-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.pricing-tabs .tab-btn {
  flex: 1 1 200px;
  background: #f2f5f9;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  color: #0b1f3a;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.pricing-tabs .tab-btn.active {
  background: var(--brand-blue);
  color: #fff;
}
.pricing-tabs .tab-btn:hover {
  background: #e0e7f5;
}
.pricing-tab-content {
  display: none;
  margin-top: 16px;
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}
.pricing-tab-content.active {
  display: block;
}

/* Adjust top navigation spacing on smaller screens so multiple links
   remain visible. */
@media (max-width: 480px) {
  .top-nav .nav-links a {
    margin-left: 8px;
    font-size: 12px;
    padding: 8px 6px;
  }
  .pricing-tabs .tab-btn {
    flex: 1 1 140px;
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* Testimonial call‑to‑action section styling. Appears below
   testimonials to encourage sign‑ups. */
.testimonial-cta {
  margin-top: 40px;
  text-align: center;
}
.testimonial-cta h3 {
  margin-bottom: 16px;
  font-size: 24px;
  color: var(--brand-navy);
}
.testimonial-cta .cta-btn {
  padding: 12px 24px;
}

/* ===== repeated polished section pattern ===== */
.split-feature-section {
  padding: 90px 0;
}

.alt-band {
  background: linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
}

.mini-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.mini-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  text-align: center;
}

.mini-card strong {
  display: block;
  font-size: 20px;
  color: #0b1f3a;
  margin-bottom: 6px;
}

.mini-card span {
  font-size: 13px;
  color: #475569;
}

.info-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.switch-btn {
  border: none;
  background: #eef2f8;
  color: #0b1f3a;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

.switch-btn.active {
  background: #4361ee;
  color: #fff;
}

.info-panel {
  display: none;
  margin-top: 16px;
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
  line-height: 1.7;
  color: #475569;
}

.info-panel.active {
  display: block;
}

.eco-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.eco-card {
  background: rgba(255,255,255,0.92);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}

.eco-card i {
  font-size: 22px;
  color: #4361ee;
  display: block;
  margin-bottom: 10px;
}

.promise-accordion {
  margin-top: 26px;
  display: grid;
  gap: 12px;
}

.promise-item {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
  overflow: hidden;
}

.promise-btn {
  width: 100%;
  border: none;
  background: #fff;
  text-align: left;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #0b1f3a;
  cursor: pointer;
}

.promise-content {
  display: none;
  padding: 0 20px 18px;
  color: #475569;
  line-height: 1.7;
}

.promise-item.active .promise-content {
  display: block;
}

@media (max-width: 768px) {
  .mini-cards,
  .info-switch,
  .eco-grid {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   SIGNUP ROLE PICKER – MOBILE 2 COL
================================ */
.role-picker{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.role-picker button{
  width: 100%;
  min-height: 96px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.35;
}

.role-picker button i{
  font-size: 18px;
  margin-bottom: 8px;
}

@media (max-width: 768px){
  .role-picker{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .role-picker button{
    min-height: 88px;
    padding: 12px 8px;
    font-size: 13px;
  }

  .signup-shell{
    grid-template-columns: 1fr;
  }

  .signup-info{
    display: none;
  }

  .signup-form{
    padding: 28px 18px;
  }
}

/* ===============================
   CTA WITH LOGIN LINK
================================ */
.cta-inline{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
}

.cta-inline .cta-btn,
.cta-inline .primary-btn,
.cta-inline .secondary-btn{
  margin-top: 0;
}

.secondary-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: #ffffff;
  color: var(--brand-blue);
  border: 1px solid #dbe4f0;
}

.secondary-btn:hover{
  background: #f5f8ff;
}

@media (max-width: 768px){
  .cta-inline{
    width: 100%;
  }

  .cta-inline .cta-btn,
  .cta-inline .primary-btn,
  .cta-inline .secondary-btn{
    flex: 1 1 50%;
    justify-content: center;
    text-align: center;
  }
}