/* Mobile Responsive Overrides for SAaS EDJE */

/* Tablets and smaller devices */
@media screen and (max-width: 780px) {
  /* Make flex columns stack vertically */
  .fx-sided-box ul li.fx-width-50,
  .fx-sided-box > .fx-width-50,
  .fx-width-50 {
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
  }

  /* Remove side pulls on mobile */
  .fx-width-50.fx-right-pull-20,
  .fx-width-50.fx-left-pull-20,
  .fx-width-50.fx-right-pull-50,
  .fx-width-50.fx-left-pull-50 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Stack FAQ columns */
  .fx-sided-box ul li {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Stack FAQ items vertically on mobile */
  .fx-sided-box ul li.fx-right-pull-50,
  .fx-sided-box ul li.fx-left-pull-50 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ensure FAQ sections stack properly */
  .fx-sided-box.pads20 ul li {
    float: none !important;
    display: block !important;
  }

  /* Stack homepage FAQ section on mobile - force each item to full width */
  #saas-faqs ul li.fx-width-50,
  #saas-faqs ul li.fx-width-50.fx-right-pull-50,
  #saas-faqs ul li.fx-width-50.fx-left-pull-50 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    clear: both !important;
  }

  #saas-faqs .fx-sided-box ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  #saas-faqs .fx-sided-box ul li {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    display: block !important;
  }

  /* Force FAQ link spans to full width */
  #saas-faqs ul li span.block-element {
    width: 100% !important;
    display: block !important;
  }

  /* Adjust container widths */
  .fx-width-80,
  .fx-width-70,
  .fx-width-60 {
    width: 95% !important;
  }

  /* Reduce horizontal padding on mobile */
  .fx-right-pull-50,
  .fx-left-pull-50 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Make footer columns stack */
  .footer ul li.fx-width-25 {
    width: 100% !important;
    margin-bottom: 30px !important;
  }

  /* Fix homepage button section on mobile */
  header + .dark-deep-black-theme,
  .dark-deep-black-theme {
    width: 100% !important;
    padding: 20px !important;
  }

  .dark-deep-black-theme .fx-width-80 {
    width: 100% !important;
  }

  .dark-deep-black-theme .fx-sided-box ul li {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .dark-deep-black-theme .fx-sided-box ul li:last-of-type {
    margin-bottom: 0;
  }

  /* Adjust card heights for mobile */
  .cs-height-600 {
    height: auto !important;
    min-height: 400px;
  }

  /* Fix jumbotron background images for mobile */
  header .cs-height-600 {
    min-height: 500px !important;
  }

  .saas-f1,
  .saas-f2,
  .saas-f3 {
    background-size: cover !important;
    background-position: center center !important;
  }

  /* Reduce font sizes slightly on mobile */
  .xxxlarge {
    font-size: 2.5rem !important;
  }

  .xxlarge {
    font-size: 2rem !important;
  }

  .xlarge {
    font-size: 1.5rem !important;
  }

  /* Chat box adjustments */
  #chat-box {
    width: 280px !important;
    right: 10px !important;
    bottom: 10px !important;
  }

  /* Make start conversation text black in mobile */
  #chat-box h4 {
    color: #000 !important;
  }

  /* Keep white on hover */
  #chat-box:hover h4,
  #wa:hover h4 {
    color: #fff !important;
  }

  /* Image containers */
  .cs-width-150 {
    width: 120px !important;
  }

  /* Hide desktop navigation links on mobile */
  .header ul li.th span.top-pull-30 {
    display: none !important;
  }

  /* Show mobile menu button */
  .header ul li.th span.alignrt {
    display: block !important;
  }

  /* Keep logo visible */
  .header ul li.th:first-child {
    display: inline-block !important;
  }

  /* Fix logo dimensions on mobile */
  .header ul li.th:first-child .auto-wh {
    width: 80px !important;
    height: 80px !important;
  }

  /* Fix header layout on mobile */
  .header ul {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .header ul li.th {
    width: auto !important;
    flex-shrink: 0 !important;
  }

  .header ul li.th:nth-child(2) {
    flex: 1;
    text-align: right;
    min-width: 40px !important;
  }

  /* Fix mobile menu overlay */
  #ismobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 100000 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 30px 20px !important;
  }

  #ismobile-menu.x-translate-show {
    transform: translateX(0%) !important;
  }

  #ismobile-menu.x-translate-hide {
    transform: translateX(100%) !important;
  }
}

/* Mobile phones */
@media screen and (max-width: 480px) {
  /* Ensure all flex columns are full width */
  .fx-sided-box ul li,
  .fx-sided-box > li,
  .fx-sided-box > div {
    width: 100% !important;
  }

  /* Remove all side padding */
  .pads20 {
    padding: 15px !important;
  }

  .pads30 {
    padding: 20px !important;
  }

  /* Fix navbar on mobile */
  .header ul li.th span.top-pull-30 {
    display: none !important;
  }

  /* Fix logo dimensions on mobile phones */
  .header ul li.th:first-child .auto-wh {
    width: 70px !important;
    height: 70px !important;
  }

  /* Fix header layout on mobile phones */
  .header ul {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .header ul li.th {
    width: auto !important;
    flex-shrink: 0 !important;
  }

  .header ul li.th:nth-child(2) {
    flex: 1;
    text-align: right;
    min-width: 40px !important;
  }

  /* Add spacing to first section after header */
  header + section,
  section.top-pull-10,
  section.top-pull-30 {
    margin-top: 30px !important;
    padding-top: 30px !important;
  }

  /* Remove empty paragraphs causing spacing */
  p:empty {
    display: none !important;
  }

  /* Ensure FAQ columns stack on mobile phones */
  .fx-sided-box.pads20 ul {
    display: block !important;
  }

  .fx-sided-box.pads20 ul li {
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  /* Fix homepage button section on mobile phones */
  .dark-deep-black-theme .fx-sided-box ul li {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .dark-deep-black-theme .fx-width-80 {
    width: 100% !important;
  }

  /* Homepage FAQ section mobile stacking - force single column */
  section.pads #saas-faqs ul li {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    clear: both !important;
  }

  section.pads #saas-faqs .fx-sided-box ul {
    display: flex !important;
    flex-direction: column !important;
  }

  section.pads #saas-faqs ul li a,
  section.pads #saas-faqs ul li span {
    width: 100% !important;
    display: block !important;
  }

  /* Further reduce font sizes */
  .xxxlarge {
    font-size: 2rem !important;
  }

  .xxlarge {
    font-size: 1.75rem !important;
  }

  .xlarge {
    font-size: 1.25rem !important;
  }

  .large {
    font-size: 1.1rem !important;
  }

  /* Reduce header height */
  .cs-height-400 {
    height: 300px !important;
  }

  /* Chat box for small screens */
  #chat-box {
    width: 260px !important;
    right: 5px !important;
  }

  /* Make start conversation text black in mobile */
  #chat-box h4 {
    color: #000 !important;
  }

  /* Keep white on hover */
  #chat-box:hover h4,
  #wa:hover h4 {
    color: #fff !important;
  }

  /* Adjust card heights */
  .cs-height-600 {
    min-height: 350px;
  }

  /* Fix jumbotron background images for mobile phones */
  header .cs-height-600 {
    min-height: 450px !important;
  }

  .saas-f1,
  .saas-f2,
  .saas-f3 {
    background-size: cover !important;
    background-position: center center !important;
  }

  /* Center align images */
  .noscroll img {
    max-width: 100%;
    height: auto;
  }

  /* Reduce spacing */
  .fx-right-pull-50,
  .fx-left-pull-50 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Logo size */
  .cs-width-150 {
    width: 100px !important;
  }

  /* Ensure buttons are readable */
  .mini-rounded-button,
  .sml-rounded-button {
    padding: 12px 20px !important;
  }

  /* Fix mobile menu overlay */
  #ismobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 100000 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 30px 20px !important;
  }

  #ismobile-menu.x-translate-show {
    transform: translateX(0%) !important;
  }

  #ismobile-menu.x-translate-hide {
    transform: translateX(100%) !important;
  }
}

/* Small mobile devices */
@media screen and (max-width: 360px) {
  .xxxlarge {
    font-size: 1.75rem !important;
  }

  .pads20,
  .pads30 {
    padding: 10px !important;
  }

  #chat-box {
    width: 240px !important;
  }

  /* Make start conversation text black in mobile */
  #chat-box h4 {
    color: #000 !important;
  }

  /* Keep white on hover */
  #chat-box:hover h4,
  #wa:hover h4 {
    color: #fff !important;
  }

  /* Fix mobile menu overlay for small devices */
  #ismobile-menu {
    padding: 20px 15px !important;
  }

  /* Add spacing to first section after header */
  header + section,
  section.top-pull-10,
  section.top-pull-30 {
    margin-top: 25px !important;
    padding-top: 25px !important;
  }
}

/* Touch-friendly improvements for all mobile devices */
@media (hover: none) and (pointer: coarse) {
  /* Increase tap target sizes */
  a,
  button,
  .anchor {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Make buttons more touch-friendly */
  .mini-rounded-button,
  .sml-rounded-button,
  .rounded-button {
    padding: 14px 24px !important;
    min-height: 48px !important;
  }

  /* Improve link spacing */
  .header a {
    padding: 10px 15px;
  }
}

/* Ensure images are responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent horizontal scroll */
body {
  overflow-x: hidden;
}

.fx-sided-box,
.sided-box {
  overflow-x: hidden;
}

/* Make tables scrollable on mobile */
@media screen and (max-width: 780px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Improve text readability */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}