/* FAQ Page Styles
 * NOTE: Brand colors defined in brand-variables.css
 */
/* CARD STYLING */
.customer-support {
  background-color: #ffffff;
  padding-bottom: 51px;
  margin: auto;
  margin-top: 60px;
  margin-bottom: 80px;
  border-radius: 12px;
  max-width: 1107px;
  font-family: var(--font-primary, Arial, sans-serif);
  /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); */
}
.footer__bottom {
  /* Mimics the black background seen in the image */
  background-color: #000000;
  /* Uses Flexbox to align items horizontally and center them vertically */
  display: flex;
  justify-content: center; /* Center content horizontally by default */
  align-items: center;
  /* Fixed position at the bottom of the viewport, full width */
  bottom: 0;
  left: 0;
  width: 100%;
  /* Standard height for a compact bar */
  height: 70px;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 1000; /* Ensure it stays on top of other content */
}

/* HEADER STYLING */
.section-header {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 24px;
  color: var(--color-black); /* Dark Gray */
  margin-bottom: 45px;
  text-transform: uppercase;
  font-family: var(--font-primary-bold, Arial, sans-serif);
}

/* CATEGORY TITLE STYLING */

.faq-category {
  margin-top: 40px;
}
.faq-category:first-child {
  margin-top: 0;
}

.faq-category h2 {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-black);
  margin-bottom: 20px;
}
.accordion {
  padding: 35px 20px 45px 20px;
}

/* FAQ ITEM STYLING */
.faq-item {
  border-top: 1px solid #e5e7eb; /* Light Gray Border */
  cursor: pointer;
}

/* Ensure the last item in a category has a bottom border */
.faq-category > .faq-item:last-of-type {
  border-bottom: 1px solid #e5e7eb;
}

.question-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0px;
}

.question-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.32px;
  color: var(--color-nava); /* Medium Gray */
}

/* ICON STYLING (The '+') */
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.1s ease-in-out;
}

/* Cookie Consent Styles */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f8f9fa;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 15px 0;
}

.cookie-consent__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.cookie-consent__text {
  margin: 0;
  font-size: 14px;
}

.cookie-consent__button {
  background-color: var(--color-nava);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s;
}

.cookie-consent__button:hover {
  background-color: #6b8a3a;
}

.hidden {
  display: none !important;
}

/* ACCORDION (ANSWER) CONTENT */
.answer-content {
  /* Initial state for the answer (closed) */
  max-height: 0;
  overflow: hidden;
  /* Smooth transition for opening/closing */
  transition: max-height 0.1s ease-in-out, padding-bottom 0.1s ease-in-out;
}

.answer-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;

  color: var(--color-black); /* Text color for the answer */
}

/* OPEN STATE STYLING (When data-open="true") */
.faq-item[data-open="true"] .answer-content {
  /* Expanded state for the answer */
  max-height: 500px; /* Large enough value to contain content */
  padding-bottom: 20px; /* Space after the answer text */
}

/* --- RESPONSIVENESS: MOBILE STYLES (max-width 768px) --- */
/* @media (max-width: 768px) { */
@media (max-width: 1190px) {
  /* 1. .customer-support padding: 16px */
  .customer-support {
    /* Reset desktop properties for mobile */
    max-width: 100%;
    margin-top: 50px;
    margin-bottom: 20px;
    /* Apply 16px padding on all sides for the card */
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* Adjustments for better mobile look */
  .section-header {
    font-size: 16px;
    margin-bottom: 0px;
    padding-left: 20px;
  }

  /* 2. .accordion padding: 20px left/right, 35px top, 45px bottom */
  .accordion {
    /* Apply the specific padding requested for the inner container on mobile */
    padding: 35px 20px 45px 20px;
  }

  .faq-category {
    margin-top: 40px;
  }

  .faq-category h2 {
    font-size: 15px;
  }

  .question-wrapper {
    padding: 15px 0;
  }
  .question-text {
    padding-right: 20px;
  }
}

.customer-support-section {
  /* Matching the olive/khaki background color from the image */
  background-color: var(--color-nava);
  color: var(--color-white); /* White text for contrast */
  padding: 90px 100px; /* Generous padding top/bottom */
  text-align: center;
  font-family: var(--font-primary, Arial, sans-serif);
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 40px;
  line-height: 50px;
  letter-spacing: 1px;
}

.support-cards-container {
  display: flex;
  justify-content: center;
  gap: 1.5rem; /* Spacing between cards */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  max-width: 1000px;
  margin: 0 auto;
}

.support-card:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.card-icon-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0; /* Separator line */
}

/* NOTE: Original .card-icon-text i styling removed as we are using <img> or inline SVG */

.response-time {
  margin: 0;
  font-size: 0.9rem;
  color: #ffffff; /* Response time text color */
  margin-top: 1rem;
  font-weight: 500;
}

/* Responsive adjustment for the response time text placement as seen in the image */
.support-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 104px; /* ADJUSTED as requested */
}

.response-detail {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85); /* Slightly muted white */
}

/* Override for the main card to make it look like the image: icon/text centered, white background. */
.support-card {
  background-color: #ffffff;
  color: #333333;
  border-radius: 8px;
  padding: 12px 32px;
  width: 100%;
  max-width: 235px;
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 10px; /* Space between icon and text */
  height: 70px; /* ADJUSTED as requested */
  text-align: center;
}

/* Style for the SVG Image placeholder (for Card 1 and 3) */
.support-card .card-svg-icon {
  width: 24px;
  height: 24px;
  /* Using object color for external images */
}

/* NEW: Style for the INLINE SVG (for Card 2) */
.support-card svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #799863; /* Olive/green color for the icon stroke/outline */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Optional: animation on hover */
  transition: stroke 0.1s;
}

.support-card:hover svg {
  stroke: #5e794b; /* Darker olive on hover */
}

.support-card span {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-nava);
  line-height: 14px;
  letter-spacing: 0px;
  text-wrap: nowrap;
  text-align: center;
}

.support-cards-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Mobile adjustments: make the cards slightly smaller if necessary */
@media (max-width: 768px) {
  .support-card {
    max-width: 200px;
    height: 48px; /* ADJUSTED for mobile consistency */
  }
  .support-card-wrapper {
    height: auto; /* ADDED for mobile consistency */
  }
  .support-cards-wrapper {
    gap: 10px;
  }
  .customer-support-section {
    padding: 30px 16px;
  }
  .response-detail {
    font-size: 14px;
  }
}