/*!
Theme Name: WPNexa Child
Theme URI: https://wpnexa.com
Description: Powerful WordPress Theme by WPNexa
Author: WPNexa
Author URI: https://wpnexa.com
Template: wpnexa
Version: 1.0.0
Text Domain: wpnexa
*/

/* Add your custom style here */

/* ACF table */
.acf-table-scrolled-container,
.acf-table-container{
  width: 100%;
  border-radius: 15px !important;
  border: 2px solid #717680;
}
.acf-table-scrolled-container {
  position: relative;
  overflow-x: auto;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch; /* Enables smooth scroll on iOS */
  touch-action: auto; /* Ensure touch gestures like swipe work */
  scroll-behavior: auto; /* Optional: smooth effect */
  white-space: nowrap;
}
.acf-table-scrolled-container.active{
  cursor: grabbing;
}

table.acf-table {
  width: 100%;
  border-collapse: collapse;
  border-style: hidden;
  margin:0;
}

.acf-table-scrolled-container table.acf-table {
  width: 100%;
}

table.acf-table tr {
  border: 2px solid #717680;
}

table.acf-table tr:nth-child(even) {
  background-color: #F8F9FB;
}


table.acf-table td,
table.acf-table th {
  border-top: 1px solid #717680;
  padding: 20px 30px;
  vertical-align: bottom;
  white-space: break-spaces;
  max-width: 300px;
  font-size: .8em;
}

th.sticky-col,
td.sticky-col {
  position: sticky;
  left: 0;
  background: #f9f9f9;
  z-index: 2;
  max-width: 250px;
}

table.acf-table td:not(.sticky-col),
table.acf-table th:not(.sticky-col) {
  min-width: 250px;
}

table.acf-table tr:first-child td {
  border-top: none;
}

table.acf-table .product-featured-image {
  width: 100%;
  max-width: 200px;
}

table.acf-table td:first-child,
table.acf-table th:first-child {
  color: #2d69c7;
}

table.acf-table td,
table.acf-table th {
  text-align: center;
  vertical-align: middle;
}

table.acf-table td:nth-child(1),
table.acf-table th:nth-child(1) {
  text-align: left;
}

table.acf-table td.checkmark::before {
  content: '✔';
  color: #2ecc71;
  font-size: 18px;
  display: inline-block;
}

@media (min-width: 481px) and (max-width: 768px) {
  table.acf-table td, table.acf-table th{
    padding: 10px;
  }
  th.sticky-col, td.sticky-col {
    max-width: 200px !important;
  }  
}

@media (max-width: 480px) {
  th.sticky-col, td.sticky-col {
    padding: 10px!important;
    max-width: 113px !important;
  }  
}