/* ========================================
    FLUENT FORM 7 - DEVICE QUIZ STYLES
    ======================================== */
  .fluent_form_7.ff_conv_app_frame {
      overscroll-behavior: inherit;
  }

  .fluent_form_7.ff_conv_app_7 {
      background-color: #eeeeee !important;
      border-radius: 12px !important;
  }

  .multi-select-filter-wrapper {
      display: none !important;
  }

  /* Re-show filter wrappers inside the quiz result product table */
  .fluent_form_7 #quiz-result-product-table .multi-select-filter-wrapper {
      display: block !important;
      position: relative;
      width: 100%;
      z-index: 1;
  }

  .fluent_form_7 #quiz-result-product-table .sticky-col-device .multi-select-filter-wrapper {
      z-index: 9999 !important;
  }

  /* Hide original progress bar */
  .fluent_form_7 .vff-footer .f-progress,
  .hide {
      display: none !important;
  }

  .quiz-criteria-details {
      margin-top: 12px;
      text-align: center;
      font-size: 14px;
      line-height: 1.6;
  }

  .quiz-criteria-details > span {
      display: block;
  }

  .quiz-criteria-matched strong {
      color: #1f9d55;
      font-weight: 700;
  }

  .quiz-criteria-not-matched strong {
      color: #d32f2f;
      font-weight: 700;
  }

  /* Custom progress bar container - positioned above ffc_q_header */
  .fluent_form_7 .custom-progress-wrapper {
      width: 100%;
      max-width: 600px;
      margin: 0 auto 30px auto;
      padding: 0 20px;
  }

  .fluent_form_7 .custom-progress-wrapper .f-progress-bar {
      background: #fff;
      height: 8px;
      border-radius: 10px;
      margin-bottom: 10px;
      overflow: hidden;
      border: 1px solid #d3d3d3;
  }

  .fluent_form_7 .custom-progress-wrapper .f-progress-bar-inner {
      background: linear-gradient(90deg, #fdb44b 0%, #f59e0b 100%) !important;
      height: 100%;
      border-radius: 10px;
      transition: width 0.3s ease;
      width: 0%;
  }

  .fluent_form_7 .asterisk-right {
      display: none !important;
  }

  /* Adjust container padding */
  .fluent_form_7 .f-container {
      padding-top: 40px;
  }

  /* Question header styling */
  .fluent_form_7 .ffc_q_header {
      text-align: center;
  }

  .fluent_form_7 .fh2 .f-text {
      font-size: 32px !important;
      font-weight: 700 !important;
      color: #1a1a1a !important;
      text-align: center;
      margin-bottom: 10px;
  }

  .fluent_form_7 .f-sub .f-help {
      text-align: center;
      font-size: 14px;
      color: #666 !important;
      margin-bottom: 20px;
  }

  /* Hide the counter */
  .fluent_form_7 .ffc-counter {
      display: none;
  }

  /* Radio/Checkbox options styling */
  .fluent_form_7 .f-radios-wrap ul.f-radios {
      max-width: 600px;
      margin: 0 auto;
  }

  .fluent_form_7 .f-answer .f-radios-wrap ul li {
      background-color: #fff !important;
      text-align: center;
  }

  .fluent_form_7 ul.f-radios li:focus {
      border-width: 1px !important;
  }

  .fluent_form_7 .f-radios-wrap ul li {
      background-color: #fff !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 8px !important;
      padding: 16px 20px !important;
      margin-bottom: 12px !important;
      transition: all 0.3s ease !important;
      position: relative;
  }

  .fluent_form_7 .f-answer .f-radios-wrap ul li:hover {
      border-color: #c0c0c0 !important;
      background-color: #fff !important;
  }

  .fluent_form_7 .f-answer .f-radios-wrap ul li.f-selected {
      border-color: #ffc222 !important;
      background-color: #fff !important;
      border-width: 2px !important;
  }

  .fluent_form_7 .f-answer .f-radios-wrap ul li:focus {
      border: 0;
      background-color: #fff !important;
  }

  .fluent_form_7 .f-enter,
  .fluent_form_7 .o-btn-action {
      display: none;
  }

  .fluent_form_7 .ff-btn-submit-left {
      text-align: center !important;
  }

  .fluent_form_7 .f-enter .f-enter-desc {
      color: #000;
      margin: 20px 0 0 0;
      padding: 10px 20px;
      background-color: #ddd;
      border-radius: 50px;
      width: 100%;
      max-width: 138px;
  }

  .fluent_form_7 .f-enter .f-enter-desc:hover {
      background-color: #1e9dd8;
      color: #fff;
  }

  .fluent_form_7 .fh2 {
      display: flex !important;
      flex-direction: column;
  }

  .fluent_form_7 .custom-progress-wrapper {
      order: 1;
  }

  .fluent_form_7 .ffc_q_header {
      order: 2;
  }

  .fluent_form_7 span.f-sub {
      order: 3;
  }

  .fluent_form_7 .f-answer.f-full-width {
      order: 4;
      margin-top: 0 !important;
  }

  .fluent_form_7 .f-prev {
      display: block;
  }

  .fluent_form_FF_ID .ffc_inline_form.ffc_conv_wrapper .ff_conv_app .vff-footer {
      position: absolute;
      right: auto !important;
      left: 20px !important;
      bottom: auto !important;
      top: 20px !important;
  }

  /* Form last page */
  .fluent_form_7 .ffc_last_step .f-container {
      width: 100% !important;
      max-width: 100% !important;
      overflow: visible !important;
  }

  /* Table styling */

  .fluent_form_7 .product-table {
      visibility: hidden;
      opacity: 0;
  }

  .container.table-results {
      width: 100%;
      max-width: 100%;
      padding: 0;
  }

  table.custom-product-table {
      font-size: 15px;
  }

  .fluent_form_7 .field-sectionbreak.q_form_layout_default {
      width: 100% !important;
      max-width: 100% !important;
  }

  .fluent_form_7 .vff.ffc_last_step input:not(.filter-checkbox):not(.filter-search-input):not(.row-checkbox) {
      -webkit-appearance: checkbox !important;
      appearance: checkbox !important;
      overflow: visible !important;
  }

  div#quiz-result-product-table {
      width: 100%;
  }

  /* In table-results context the form animation is done — remove overflow:hidden
     from ALL Fluent Form ancestor wrappers so position:sticky can reference the viewport */
  .table-results .fluent_form_7.ff_conv_app_frame,
  .table-results .fluent_form_7.ff_conv_app_7,
  .table-results .fluent_form_7 .vff,
  .table-results .fluent_form_7 .ff_conv_section_wrapper,
  .table-results .fluent_form_7 .f-container,
  .table-results .fluent_form_7 .ffc_last_step .f-container {
      overflow: visible !important;
  }

  .table-results .fluent_form_7.ff_conv_app_7 {
      border-radius: 0 !important;
      margin-bottom: -20px;
  }

  .table-results .fluent_form_7 .vff {
      padding-left: 0 !important;
      padding-right: 0 !important;
  }

  .table-results .fluent_form_7 .ff_conv_section_wrapper {
      flex-direction: column;
  }

  /* Quiz Results Header */
  .fluent_form_7 .quiz-results-header {
      text-align: center;
      margin-bottom: 40px;
      padding: 80px 0 20px 0;
      background-color: #eee !important;
      z-index: 50;
  }

  .fluent_form_7 .quiz-results-title {
      font-size: 36px;
      font-weight: 700;
      color: #000000;
      margin: 0 0 10px 0;
      line-height: 1.2;
  }

  .fluent_form_7 .quiz-results-subtitle {
      font-size: 22px;
      font-weight: 400;
      color: #333333;
      margin: 0;
  }

  .fluent_form_7 .vff .compare-products {
      border: none;
      outline: 0;
      cursor: pointer;
      padding: 10px 12px;
      text-align: center;
      display: inline-block;
      min-height: auto;
      white-space: normal;
      max-width: 100%;
      font-size: 15px;
  }

  .fluent_form_7 .vff .remove-product-group {
      min-height: auto;
  }

  /* Quiz Results Actions */
  .fluent_form_7 .quiz-results-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin: 0 auto;
      padding: 20px 0;
      flex-wrap: wrap;
      width: 100%;
      max-width: 900px;
  }

  .fluent_form_7 .quiz-action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 24px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      white-space: normal;
      color: #fff;
      background-color: #1e9dd8;
  }

  .fluent_form_7 .quiz-action-btn:hover {
      background-color: #248ec0;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(30, 157, 216, 0.3);
  }

  .fluent_form_7 .quiz-edit-btn {
      background-color: #ffc107;
      color: #000000;
  }

  .fluent_form_7 .quiz-edit-btn:hover {
      background-color: #ffb300;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
  }


  .fluent_form_7 .quiz-email-btn {
      background-color: #000000;
      color: #ffffff;
  }

  .fluent_form_7 .quiz-email-btn:hover {
      background-color: #333333;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .fluent_form_7 .explore-btn {
      width: 100%;
      text-align: center;
  }

  .fluent_form_7 .quiz-explore-link {
      color: #1976d2;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      padding: 12px 0;
      transition: color 0.3s ease;
      text-align: center;
  }

  .fluent_form_7 .quiz-explore-link:hover {
      color: #1565c0;
      text-decoration: underline;
  }

  /* Label styling */
  .fluent_form_7 .f-label-wrap .f-label {
      font-size: 15px;
      font-weight: 500;
      color: #1a1a1a;
  }

  /* Remove the default info icon from ALL items */
  .fluent_form_7 .f-radios-wrap ul li::after {
      display: none !important;
  }

  /* Info icon styling - will be added by JS only to items with tooltips */
  .fluent_form_7 .f-radios-wrap ul li .info-icon {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      background: #3b82f6;
      color: white;
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      font-style: normal;
      cursor: help;
      line-height: 24px;
      text-align: center;
  }

  .info-icon svg {
      width: 5px;
      fill: #fff;
  }

  /* Hide the checkmark SVG */
  .fluent_form_7 .ffc_check_svg {
      display: none !important;
  }

  /* Hide the keyboard shortcuts */
  .fluent_form_7 .f-key {
      display: none !important;
  }

  /* Button styling */
  .fluent_form_7 .o-btn-action {
      background: #e5e7eb !important;
      color: #6b7280 !important;
      border-radius: 8px !important;
      padding: 12px 40px !important;
      font-size: 15px !important;
      font-weight: 600 !important;
      border: none !important;
      transition: all 0.3s ease !important;
  }

  .fluent_form_7 .o-btn-action:hover {
      background: #d1d5db !important;
  }

  /* Hide "Press Enter" text */
  .fluent_form_7 .f-enter-desc {
      display: inline-block;
  }

  /* Style for submit button when it appears */
  .fluent_form_7 .ff-btn-submit {
      background-color: #ffc222 !important;
      color: #000000 !important;
      border-radius: 8px !important;
      padding: 12px 40px !important;
      font-weight: 600 !important;
  }

  .fluent_form_7 .set-container .f-content p,
  .fluent_form_7 .text-success p {
      color: #000;
  }

  .fluent_form_7 .text-success {
      padding: 12% 0;
  }

  .fluent_form_7 .set-container .f-answer {
      padding: 15% 0;
  }

  .fluent_form_7 .vff-footer {
      position: absolute;
      top: auto !important;
      left: 0;
      right: 0 !important;
      bottom: 40px !important;
      width: 100%;
      z-index: 10;
  }

  .fluent_form_7 .vff-footer .footer-inner-wrap {
      width: 100%;
      box-shadow: none;
      background: transparent;
      margin: 0;
      justify-content: center;
  }

  .table-results .fluent_form_7 .vff-footer .footer-inner-wrap {
      display: none !important;
  }

  /* Navigation buttons at bottom - centered */
  .fluent_form_7 .footer-inner-wrap .f-nav {
      display: flex !important;
      justify-content: center;
      align-items: center;
      gap: 16px;
      background-color: transparent;
  }

  .fluent_form_7 .footer-inner-wrap .f-nav a.f-prev,
  .fluent_form_7 .footer-inner-wrap .f-nav a.f-next {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 32px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 50px;
      text-decoration: none;
      transition: all 0.3s ease;
      min-width: 100px;
  }

  /* Hide the SVG arrows - we'll use text instead */
  .fluent_form_7 .footer-inner-wrap .f-nav a.f-prev svg,
  .fluent_form_7 .footer-inner-wrap .f-nav a.f-next svg {
      display: none !important;
  }

  .fluent_form_7 a.f-prev.f-disabled {
      display: none !important;
  }

  /* Back button styling */
  .fluent_form_7 .footer-inner-wrap .f-nav a.f-prev {
      background-color: #e0e0e0;
      color: #000000;
      padding: 10px 20px;
      height: 40px;
      font-weight: 400;
  }

  .fluent_form_7 .footer-inner-wrap .f-nav a.f-prev:hover {
      background-color: #d0d0d0;
  }

  /* Next button styling */
  .fluent_form_7 .footer-inner-wrap .f-nav a.f-next {
      background-color: #1e9dd8;
      color: #fff;
      padding: 10px 20px;
      height: 40px;
      font-weight: 400;
  }

  .fluent_form_7 .footer-inner-wrap .f-nav a.f-next:hover {
      background-color: #1e9dd8;
  }

  /* Hide back button on first step */
  .fluent_form_7 .footer-inner-wrap .f-nav a.f-prev.hidden {
      display: none !important;
  }

  /* Nav button text styling */
  .fluent_form_7 .footer-inner-wrap .f-nav a .nav-text {
      font-size: 14px;
      font-weight: 400;
  }

  /* Desktop tooltip styles - right side (wide screens only) */
  @media (min-width: 1200px) {
      .fluent_form_7 .f-radios-wrap ul li .custom-tooltip {
          position: absolute;
          left: calc(100% + 10px);
          right: auto;
          top: 50%;
          transform: translateY(-50%);
          background: rgba(26, 26, 26, 0.8);
          color: #ffffff;
          padding: 12px 16px;
          border-radius: 8px;
          font-size: 13px;
          width: max-content;
          max-width: 250px;
          min-width: 120px;
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          z-index: 1000;
          pointer-events: none;
          line-height: 1.5;
      }

      .fluent_form_7 .f-radios-wrap ul li .custom-tooltip .tooltip-arrow {
          position: absolute;
          left: -8px;
          right: auto;
          top: 50%;
          transform: translateY(-50%);
          width: 0;
          height: 0;
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
          border-right: 8px solid rgba(26, 26, 26, 0.8);
          border-left: none;
      }
  }

  /* Medium screen tooltip styles - above item */
  @media (min-width: 769px) and (max-width: 1199px) {
      .fluent_form_7 .f-radios-wrap ul li {
          margin-bottom: 20px !important;
      }

      .fluent_form_7 .f-radios-wrap ul li .custom-tooltip {
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          bottom: 100%;
          transform: none;
          background: rgba(26, 26, 26, 0.8);
          color: #ffffff;
          padding: 12px 16px;
          border-radius: 8px;
          font-size: 13px;
          margin-bottom: 8px;
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          z-index: 1000;
          pointer-events: none;
          line-height: 1.5;
      }

      .fluent_form_7 .f-radios-wrap ul li .custom-tooltip .tooltip-arrow {
          position: absolute;
          left: 50%;
          bottom: -8px;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-top: 8px solid rgba(26, 26, 26, 0.8);
      }
  }

  /* Mobile/Tablet tooltip styles - above item */
  @media (max-width: 768px) {
      .fluent_form_7 .f-radios-wrap ul li {
          margin-bottom: 20px !important;
      }

      .fluent_form_7 .f-radios-wrap ul li .custom-tooltip {
          position: absolute;
          left: 0;
          right: 0;
          top: auto;
          bottom: 100%;
          transform: none;
          background: rgba(26, 26, 26, 0.8);
          color: #ffffff;
          padding: 12px 16px;
          border-radius: 8px;
          font-size: 13px;
          margin-bottom: 8px;
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          z-index: 1000;
          pointer-events: none;
          line-height: 1.5;
      }

      .fluent_form_7 .f-radios-wrap ul li .custom-tooltip .tooltip-arrow {
          position: absolute;
          left: 50%;
          bottom: -8px;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-top: 8px solid rgba(26, 26, 26, 0.8);
      }

      .fluent_form_7 .fh2 .f-text {
          font-size: 24px !important;
      }
  }

  @media (max-width: 767px) {
      .fluent_form_7 .vff-footer .footer-inner-wrap {
          background: none;
          box-shadow: none;
      }
  }

  /* Responsive styles for Quiz Results */
  @media screen and (max-width: 767.98px) {
      .fluent_form_7 .quiz-results-header {
          padding: 50px 20px 0px 20px;
      }

      .fluent_form_7 .quiz-results-title {
          font-size: 24px;
      }

      .fluent_form_7 .quiz-results-subtitle {
          font-size: 16px;
      }

      .fluent_form_7 .quiz-results-actions {
          flex-direction: column;
          gap: 12px;
      }

      .fluent_form_7 .quiz-action-btn {
          width: 100%;
          max-width: 300px;
      }
  }

  /* ========================================
    HERO SECTION
    ======================================== */

  .hero-section {
      height: 320px;
      display: flex;
      align-items: center;
      padding: 0;
      background-image: url("/wp-content/themes/astra-child/latticedesignhub/assets/images/help_me_choose_banner_3.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
  }

  @media screen and (min-width: 768px) {
      .hero-section .hero-image {
          display: none;
      }
  }

  @media screen and (max-width: 767.98px) {
      .hero-section {
          background-image: none;
          height: auto;
          padding: 40px 0 0 0 !important;
      }

      .hero-section .hero-image {
          padding: 0;
      }

      .hero-section p {
          margin-bottom: 20px;
      }
  }

  /* Tablet (768–1024px) — the hero banner gets cropped awkwardly at this
     width: `background-size: cover` pulls the chip graphic off-frame and
     the full-width text column overlaps it. Shift the focal point to 75%
     so the chip stays in view, and hold the heading/intro text to the
     left half so it clears the graphic.
     !important is needed on background-position to defeat the inline
     `style="background: ..."` attribute on .design-hub-wrapper.hero-section
     in the template. */
  @media (min-width: 768px) and (max-width: 1024px) {
      .design-hub-wrapper.hero-section {
          background-position: 75% center !important;
      }

      .design-hub-wrapper.hero-section .col-md-12.space-y-2 {
          width: 50% !important;
      }
  }

  /* ========================================
    EMAIL MODAL STYLES
    ======================================== */

  .quiz-email-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .quiz-email-modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
  }

  .quiz-email-modal-content {
      position: relative;
      background: #ffffff;
      border-radius: 12px;
      padding: 32px;
      max-width: 450px;
      width: 90%;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      animation: modalSlideIn 0.3s ease;
  }

  @keyframes modalSlideIn {
      from {
          opacity: 0;
          transform: translateY(-20px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @keyframes spin {
      from {
          transform: rotate(0deg);
      }

      to {
          transform: rotate(360deg);
      }
  }

  .quiz-email-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      background: none;
      border: none;
      font-size: 28px;
      color: #666;
      cursor: pointer;
      line-height: 1;
      padding: 4px 8px;
      transition: color 0.2s;
  }

  .quiz-email-modal-close:hover,
  .quiz-email-modal-close:focus,
  .quiz-email-modal-close:active {
      color: #000;
      background: none !important;
      background-color: transparent !important;
      outline: none;
      box-shadow: none;
  }

  .quiz-email-modal-title {
      font-size: 24px;
      font-weight: 700;
      color: #000;
      margin: 0 0 8px 0;
  }

  .quiz-email-modal-subtitle {
      font-size: 14px;
      color: #666;
      margin: 0 0 24px 0;
  }

  .quiz-email-input-group {
      margin-bottom: 24px;
  }

  .quiz-email-input-group label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
  }

  .quiz-email-input-group input {
      width: 100%;
      padding: 12px 16px;
      font-size: 16px;
      border: 2px solid #ddd;
      border-radius: 8px;
      transition: border-color 0.2s;
      box-sizing: border-box;
  }

  .quiz-email-input-group input:focus {
      outline: none;
      border-color: #1976d2;
  }

  .quiz-email-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
  }

  .quiz-email-cancel-btn {
      padding: 12px 24px;
      font-size: 14px;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      background-color: #f0f0f0;
      color: #333;
      transition: background-color 0.2s;
  }

  .quiz-email-cancel-btn:hover {
      background-color: #e0e0e0;
      color: #333;
  }

  .quiz-email-send-btn {
      display: inline-flex;
      align-items: center;
      padding: 12px 24px;
      font-size: 14px;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      background-color: #1976d2;
      color: #fff;
      transition: background-color 0.2s;
  }

  .quiz-email-send-btn:hover:not(:disabled) {
      background-color: #1565c0;
      color: #fff;
  }

  .quiz-email-send-btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
  }

  .quiz-email-send-btn:disabled:hover {
      background-color: #1976d2 !important;
      color: #fff !important;
      opacity: 0.5;
  }

  .quiz-email-status {
      margin-top: 16px;
  }

  .quiz-email-success {
      text-align: center;
      padding: 20px 0;
  }

  .quiz-email-success h4 {
      font-size: 20px;
      color: #4caf50;
      margin: 16px 0 8px 0;
  }

  .quiz-email-success p {
      font-size: 14px;
      color: #666;
      margin: 0 0 20px 0;
  }

  .quiz-email-done-btn {
      padding: 12px 32px;
      font-size: 14px;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      background-color: #4caf50;
      color: #fff;
      transition: background-color 0.2s;
  }

  .quiz-email-done-btn:hover {
      background-color: #43a047;
      color: #fff;
  }

  .quiz-email-error {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px;
      background-color: #ffebee;
      border-radius: 8px;
      color: #c62828;
      font-size: 14px;
  }

  /* ========================================
    SAVE PROFILE MODAL STYLES
    ======================================== */

  .save-profile-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .save-profile-modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
  }

  .save-profile-modal-content {
      position: relative;
      background: #ffffff;
      border-radius: 12px;
      padding: 32px;
      max-width: 500px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      animation: modalSlideIn 0.3s ease;
  }

  .save-profile-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      background: none;
      border: none;
      font-size: 28px;
      color: #666;
      cursor: pointer;
      line-height: 1;
      padding: 4px 8px;
      transition: color 0.2s;
  }

  .save-profile-modal-close:hover,
  .save-profile-modal-close:focus,
  .save-profile-modal-close:active {
      color: #000;
      background: none !important;
      background-color: transparent !important;
      outline: none;
      box-shadow: none;
  }

  .save-profile-modal-title {
      font-size: 24px;
      font-weight: 700;
      color: #000;
      margin: 0 0 8px 0;
  }

  .save-profile-modal-subtitle {
      font-size: 14px;
      color: #666;
      margin: 0 0 24px 0;
  }

  .save-profile-form-group {
      margin-bottom: 20px;
  }

  .save-profile-form-group label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
  }

  .save-profile-input {
      width: 100%;
      padding: 12px 16px;
      font-size: 16px;
      border: 2px solid #ddd;
      border-radius: 24px;
      transition: border-color 0.2s;
      box-sizing: border-box;
  }

  .save-profile-input:focus {
      outline: none;
      border-color: #1976d2;
  }

  .save-profile-error {
      margin-top: 8px;
      padding: 10px 12px;
      background-color: #ffebee;
      border-radius: 6px;
      color: #c62828;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  /* Active Filters Display */
  .active-filters-display {
      background-color: #f5f5f5;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 16px;
      max-height: 200px;
      overflow-y: auto;
  }

  .active-filters-display .filter-item {
      padding: 8px 0;
      font-size: 14px;
      color: #333;
      border-bottom: 1px solid #e0e0e0;
  }

  .active-filters-display .filter-item:last-child {
      border-bottom: none;
  }

  .active-filters-display .filter-item strong {
      color: #1a1a1a;
  }

  .active-filters-display .filter-item.no-filters {
      color: #999;
      font-style: italic;
      text-align: center;
  }

  /* Save Profile Actions */
  .save-profile-actions {
      margin-top: 24px;
  }

  .save-profile-save-btn {
      display: block;
      width: 100%;
      padding: 14px 24px;
      font-size: 15px;
      font-weight: 700;
      border: 2px solid #f5b800;
      border-radius: 8px;
      cursor: pointer;
      background-color: #f5b800;
      color: #000;
      transition: background-color 0.2s, border-color 0.2s;
      text-align: center;
  }

  .save-profile-save-btn:hover:not(:disabled) {
      background-color: #e5ab00;
      border-color: #e5ab00;
      color: #000;
  }

  .save-profile-save-btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
  }

  .save-profile-view-bys-btn {
      display: block;
      width: 100%;
      padding: 14px 24px;
      font-size: 15px;
      font-weight: 700;
      border: 2px solid #f5b800;
      border-radius: 8px;
      cursor: pointer;
      background-color: #f5b800;
      color: #000;
      transition: background-color 0.2s, border-color 0.2s;
      text-align: center;
  }

  .save-profile-view-bys-btn:hover {
      background-color: #e5ab00;
      border-color: #e5ab00;
      color: #000;
  }

  /* Save Profile Status */
  .save-profile-status {
      margin-top: 16px;
  }

  .save-profile-success {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      background-color: #e8f5e9;
      border-radius: 8px;
      color: #2e7d32;
      font-size: 14px;
      font-weight: 500;
  }

  /* Responsive styles for Save Profile Modal */
  @media screen and (max-width: 767.98px) {
      .save-profile-modal-content {
          padding: 24px;
          max-width: 95%;
      }

      .save-profile-modal-title {
          font-size: 20px;
      }

      .save-profile-save-btn,
      .save-profile-view-bys-btn {
          width: 100%;
      }
  }

  /* ========================================
    QUIZ LOADING OVERLAY
    ======================================== */

  .quiz-loading-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #eeeeee;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      border-radius: 12px;
  }

  .quiz-loading-spinner {
      width: 50px;
      height: 50px;
      border: 4px solid #e0e0e0;
      border-top: 4px solid #1e9dd8;
      border-radius: 50%;
      animation: quizSpinner 1s linear infinite;
  }

  @keyframes quizSpinner {
      0% {
          transform: rotate(0deg);
      }

      100% {
          transform: rotate(360deg);
      }
  }

  .quiz-loading-text {
      font-size: 18px;
      font-weight: 600;
      color: #333;
  }

  /* ========================================
    PRODUCT TABLE OVERRIDES (inside Fluent Form)
    Prevents .vff button and other Fluent Form
    styles from overriding product table elements
    ======================================== */

  /* --- Table Controls Bar --- */
  .fluent_form_7 .table-controls-bar {
      display: flex !important;
      align-items: center !important;
      gap: 15px !important;
      margin-bottom: 0 !important;
      background: #000 !important;
      padding: 12px 55px !important;
      min-height: 50px !important;
      position: sticky !important;
      top: var(--table-controls-top, 0px) !important;
      z-index: 200 !important;
  }

  .fluent_form_7 .active-build-indicator {
      position: sticky !important;
      top: var(--table-active-indicator-top, 50px) !important;
      z-index: 200 !important;
  }

  .fluent_form_7 .sticky-header-wrapper {
      position: sticky !important;
      top: var(--table-thead-top, 50px) !important;
      z-index: 100 !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scrollbar-width: none !important;
  }

  .fluent_form_7 .sticky-header-wrapper::-webkit-scrollbar {
      display: none !important;
  }

  .fluent_form_7 .table-controls-bar .clear-all-filters-btn {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 8px 16px !important;
      background: #1e9dd8 !important;
      color: #fff !important;
      border: none !important;
      border-radius: 4px !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
      opacity: 1 !important;
      min-height: auto !important;
      line-height: normal !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      box-shadow: none !important;
      outline: none !important;
      white-space: normal !important;
  }

  .fluent_form_7 .table-controls-bar .clear-all-filters-btn:hover {
      background: #1789c2 !important;
  }

  .fluent_form_7 .table-controls-bar .clear-all-filters-btn.active {
      opacity: 1 !important;
      cursor: pointer !important;
  }

  .fluent_form_7 .table-controls-bar .clear-all-filters-btn.active:hover {
      background: #1789c2 !important;
  }

  /* --- Table Navigation Arrows --- */
  .fluent_form_7 .table-nav-arrows {
      display: flex !important;
      align-items: center !important;
      gap: 5px !important;
  }

  .fluent_form_7 .table-nav-arrow {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: transparent !important;
      border: none !important;
      color: #1789c2 !important;
      cursor: pointer !important;
      padding: 5px !important;
      transition: color 0.3s !important;
      min-height: auto !important;
      min-width: auto !important;
      line-height: normal !important;
      box-shadow: none !important;
      outline: none !important;
  }

  .fluent_form_7 .table-nav-arrow:hover {
      color: #ffc222 !important;
      background: transparent !important;
  }

  .fluent_form_7 .table-nav-arrow svg {
      width: 20px !important;
      height: 20px !important;
      margin: 0 -5px !important;
  }

  /* --- Table Responsive --- */
  .fluent_form_7 .table-responsive {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      margin-top: -41px !important;
  }

  /* --- Filter Trigger Button (div, but override just in case) --- */
  .fluent_form_7 .multi-select-trigger {
      width: 100% !important;
      padding: 6px 8px !important;
      border: 1px solid #333 !important;
      border-radius: 4px !important;
      background: white !important;
      color: #333 !important;
      font-size: 13px !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 8px !important;
      user-select: none !important;
      min-height: auto !important;
      line-height: normal !important;
  }

  .fluent_form_7 .multi-select-trigger:hover {
      border-color: #ffc222 !important;
      background: #f9f9f9 !important;
  }

  .fluent_form_7 .multi-select-trigger .filter-label {
      flex: 1 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
  }

  .fluent_form_7 .multi-select-trigger .filter-arrow {
      font-size: 10px !important;
      color: #666 !important;
  }

  /* --- Filter Dropdown --- */
  .fluent_form_7 .multi-select-dropdown {
      position: fixed !important;
      z-index: 999999 !important;
      min-width: 250px !important;
      max-width: 400px !important;
      background: white !important;
      border: 1px solid #ddd !important;
      border-radius: 4px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      display: none !important;
      flex-direction: column !important;
      max-height: 400px !important;
      color: #000 !important;
  }

  .fluent_form_7 .multi-select-dropdown.active {
      display: flex !important;
  }

  .fluent_form_7 .multi-select-dropdown .filter-options-container {
      max-height: 200px !important;
      overflow-y: auto !important;
      padding: 8px !important;
      background: white !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      position: relative !important;
      width: 100% !important;
      box-sizing: border-box !important;
      color: #000 !important;
  }

  /* --- Filter Search Input --- */
  .fluent_form_7 .filter-search-box {
      padding: 10px !important;
      border-bottom: 1px solid #eee !important;
      background: white !important;
  }

  .fluent_form_7 .filter-search-box input[type=text] {
      width: 100% !important;
      padding: 6px 10px !important;
      border: 1px solid #ddd !important;
      border-radius: 4px !important;
      font-size: 13px !important;
      outline: none !important;
      background: white !important;
      color: #333 !important;
      box-sizing: border-box !important;
      -webkit-appearance: none !important;
      appearance: none !important;
      min-height: auto !important;
      line-height: normal !important;
  }

  .fluent_form_7 .filter-search-input:focus {
      border-color: #ffc222 !important;
      box-shadow: 0 0 0 2px rgba(255, 194, 34, 0.1) !important;
  }

  /* --- Filter Options --- */
  .fluent_form_7 .filter-option {
      padding: 8px 12px !important;
      cursor: pointer !important;
      background: white !important;
  }

  .fluent_form_7 .filter-option:hover {
      background: #f5f5f5 !important;
  }

  .fluent_form_7 .filter-option.disabled-option {
      opacity: 0.5 !important;
      cursor: not-allowed !important;
      background: #f9f9f9 !important;
  }

  .fluent_form_7 .filter-option label {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      cursor: pointer !important;
      margin: 0 !important;
      font-size: 13px !important;
      user-select: none !important;
      color: #000 !important;
  }

  /* --- Filter Checkboxes --- */
  .fluent_form_7 .filter-checkbox {
      width: 16px !important;
      height: 16px !important;
      cursor: pointer !important;
      margin: 0 !important;
      flex-shrink: 0 !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      border: 2px solid #999 !important;
      border-radius: 3px !important;
      outline: none !important;
      background: white !important;
      position: relative !important;
      padding: 0 !important;
      min-height: auto !important;
      overflow: visible !important;
  }

  .fluent_form_7 .filter-checkbox:checked {
      background: #ffc222 !important;
      border-color: #ffc222 !important;
  }

  .fluent_form_7 .filter-checkbox:checked::after {
      content: "\2713" !important;
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      color: #000 !important;
      font-size: 12px !important;
      font-weight: bold !important;
  }

  .fluent_form_7 .filter-checkbox:hover {
      border-color: #ffc222 !important;
  }

  /* --- Filter Action Buttons (Apply / Clear) --- */
  .fluent_form_7 .filter-actions {
      display: flex !important;
      gap: 8px !important;
      padding: 10px !important;
      border-top: 1px solid #eee !important;
      background: #fafafa !important;
  }

  .fluent_form_7 .filter-clear-btn,
  .fluent_form_7 .filter-apply-btn {
      flex: 1 !important;
      padding: 6px 12px !important;
      border-radius: 4px !important;
      font-size: 13px !important;
      cursor: pointer !important;
      font-weight: 500 !important;
      min-height: auto !important;
      line-height: normal !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      box-shadow: none !important;
      outline: none !important;
      transition: all 0.3s !important;
  }

  .fluent_form_7 .filter-clear-btn {
      background: white !important;
      color: #000 !important;
      border: 1px solid #ddd !important;
  }

  .fluent_form_7 .filter-clear-btn:hover {
      background: #f5f5f5 !important;
      border-color: #999 !important;
      color: #000 !important;
  }

  .fluent_form_7 .filter-apply-btn {
      background: #ffc222 !important;
      color: #000 !important;
      border: 1px solid #ffc222 !important;
  }

  .fluent_form_7 .filter-apply-btn:hover {
      background: #e6ad1f !important;
      border-color: #e6ad1f !important;
      color: #000 !important;
  }

  /* --- Row Checkboxes --- */
  .fluent_form_7 .row-checkbox {
      width: 16px !important;
      height: 16px !important;
      cursor: pointer !important;
      margin: 0 !important;
      -webkit-appearance: checkbox !important;
      appearance: checkbox !important;
      min-height: auto !important;
      padding: 0 !important;
  }

  /* --- Pagination Buttons --- */
  .fluent_form_7 .page-btn {
      padding: 8px 12px !important;
      background: white !important;
      border: 1px solid #ddd !important;
      border-radius: 4px !important;
      cursor: pointer !important;
      font-size: 14px !important;
      min-height: auto !important;
      line-height: normal !important;
      color: #333 !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      box-shadow: none !important;
  }

  .fluent_form_7 .page-btn:hover:not(:disabled) {
      background: #f5f5f5 !important;
      border-color: #0073aa !important;
  }

  .fluent_form_7 .page-btn.active {
      background: #0073aa !important;
      color: white !important;
      border-color: #0073aa !important;
  }

  .fluent_form_7 .page-btn:disabled {
      opacity: 0.5 !important;
      cursor: not-allowed !important;
  }

  .fluent_form_7 .prev-btn,
  .fluent_form_7 .next-btn {
      background: white !important;
      color: #333 !important;
  }

  /* --- Compare & Remove Buttons (reinforced) --- */
  .fluent_form_7 .vff .compare-products {
      border: none !important;
      outline: 0 !important;
      cursor: pointer !important;
      padding: 10px 12px !important;
      text-align: center !important;
      display: inline-block !important;
      min-height: auto !important;
      white-space: normal !important;
      max-width: 100% !important;
      font-size: 15px !important;
      background: white !important;
      color: #000 !important;
      border-radius: 4px !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
      line-height: normal !important;
      box-shadow: none !important;
  }

  .fluent_form_7 .vff .compare-products:hover:not(:disabled) {
      background: #f0f0f0 !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }

  .fluent_form_7 .vff .remove-product-group {
      min-height: auto !important;
      background: transparent !important;
      border: none !important;
      color: white !important;
      padding: 0 !important;
      box-shadow: none !important;
      line-height: 1 !important;
  }

  input#profile-title-input {
      border-color: #d7d7d7 !important;
      border-radius: 4px;
  }

  input#profile-title-input:hover {
      border-color: #ffc222 !important;
      opacity: 1;
  }

  input#profile-title-input:focus {
      border-color: #ffc222 !important;
      border-style: solid;
  }