/* BS Tools Suite - Responsive Pack
   Objetivo: que todas las pantallas/tablas del plugin sean usables en móvil sin romper layout.
*/

/* Base typography + spacing */
.bsts-wrap, .bsts-admin, .bsts-front {
  box-sizing: border-box;
}

/* --------- Generic table responsiveness --------- */
.bsts-table-scroll,
.bsts-responsive-table,
.bsts-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Make WP widefat / striped tables scrollable if wrapped */
.bsts-table-scroll table,
.bsts-responsive-table table,
.bsts-table-wrap table {
  min-width: 640px; /* allow horizontal scroll on small screens */
}

@media (max-width: 980px) {
  .bsts-table-scroll table,
  .bsts-responsive-table table,
  .bsts-table-wrap table { min-width: 720px; }
}

@media (max-width: 782px) {
  /* WP admin breakpoint */
  table.widefat { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .bsts-table-scroll table,
  .bsts-responsive-table table,
  .bsts-table-wrap table { min-width: 760px; }

  /* Reduce density */
  table.widefat th,
  table.widefat td {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.25;
  }

  /* Buttons full width in stacks */
  .bsts-actions .button,
  .bsts-actions button,
  .bsts-actions input[type="submit"],
  .bsts-actions a.button {
    width: 100%;
    margin: 6px 0;
  }

  /* Inputs */
  .bsts-admin input[type="text"],
  .bsts-admin input[type="number"],
  .bsts-admin input[type="date"],
  .bsts-admin select,
  .bsts-front input[type="text"],
  .bsts-front input[type="number"],
  .bsts-front input[type="date"],
  .bsts-front select {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Headings + tabs */
  .nav-tab-wrapper { display: flex; flex-wrap: wrap; gap: 6px; }
  .nav-tab-wrapper .nav-tab { margin: 0; }
}

/* --------- Payment proofs cards responsiveness --------- */
.bsts-proof-card,
.bsts-proof-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.bsts-proof-preview { flex: 0 0 120px; max-width: 120px; }
.bsts-proof-preview img { max-width: 100%; height: auto; border-radius: 10px; }

.bsts-proof-body { flex: 1 1 260px; min-width: 240px; }
.bsts-proof-actions { flex: 1 1 240px; min-width: 220px; }

@media (max-width: 782px) {
  .bsts-proof-preview { flex: 0 0 96px; max-width: 96px; }
  .bsts-proof-body, .bsts-proof-actions { flex: 1 1 100%; min-width: 0; }
}

/* --------- Progress bar / badges (safe defaults) --------- */
.bsts-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.12);
}

.bsts-paybar { width: 100%; max-width: 680px; }
.bsts-paybar .bsts-paybar-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  overflow: hidden;
}
.bsts-paybar .bsts-paybar-fill { height: 10px; width: 0%; }

@media (max-width: 782px) {
  .bsts-paybar { max-width: 100%; }
}

/* --------- Make metabox content usable on mobile --------- */
#bsts_proofs_metabox .inside,
#bsts_photos_metabox .inside,
#bsts_files_metabox .inside {
  max-width: 100%;
}


/* ========== ULTRA VISUAL ENGINE (mobile cards + sticky headers + modal) ========== */

/* Sticky table headers inside scroll containers */
.bsts-table-scroll table thead th,
.bsts-table-wrap table thead th,
.bsts-responsive-table table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

/* Mobile: convert labeled tables into cards */
@media (max-width: 782px) {
  table.bsts-card-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100% !important;
    min-width: 0 !important;
    display: block;
    overflow: visible;
  }
  table.bsts-card-table thead { display:none; }
  table.bsts-card-table tbody { display:block; }
  table.bsts-card-table tr {
    display:block;
    background:#fff;
    border:1px solid rgba(0,0,0,.10);
    border-radius:14px;
    padding:10px 10px 6px;
    margin:10px 0;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  table.bsts-card-table td{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:8px 0;
    border-bottom:1px dashed rgba(0,0,0,.10);
  }
  table.bsts-card-table td:last-child{ border-bottom:none; }
  table.bsts-card-table td::before{
    content: attr(data-label);
    flex:0 0 44%;
    max-width:44%;
    font-weight:800;
    color:#555;
    font-size:12px;
    line-height:1.2;
  }
  table.bsts-card-table td{
    font-size:13px;
    line-height:1.25;
  }

  /* Make nav tabs horizontal-scroll friendly */
  .nav-tab-wrapper{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    flex-wrap:nowrap;
  }
  .nav-tab-wrapper .nav-tab{ display:inline-flex; }
}

/* Modal preview */
.bsts-modal{ position:fixed; inset:0; display:none; z-index:999999; }
.bsts-modal.is-open{ display:block; }
.bsts-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.bsts-modal__panel{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(980px, 92vw);
  height:min(86vh, 680px);
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.bsts-modal__close{
  position:absolute; right:10px; top:8px;
  width:38px; height:38px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:999px;
  font-size:22px;
  line-height:36px;
  cursor:pointer;
}
.bsts-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 54px 12px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.bsts-modal__title{ font-weight:900; font-size:14px; }
.bsts-modal__open{ font-size:12px; text-decoration:none; }
.bsts-modal__body{ padding:0; flex:1; background:#0b0b0b08; }
.bsts-modal__iframe{ width:100%; height:100%; border:0; background:#fff; }
.bsts-modal__img{ width:100%; height:100%; object-fit:contain; background:#000; }
.bsts-modal__fallback{ display:inline-block; margin:16px; }

body.bsts-modal-open{ overflow:hidden; }



/* --------- WooCommerce "Mi cuenta" tables: keep desktop table + horizontal scroll on mobile --------- */
@media (max-width: 768px) {
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details,
  body.woocommerce-account .woocommerce-MyAccount-content table.bsts-order-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Revert WooCommerce responsive "cards" */
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table thead,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table th,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details thead,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details tr,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details th,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details td,
  body.woocommerce-account .woocommerce-MyAccount-content table.bsts-order-table thead,
  body.woocommerce-account .woocommerce-MyAccount-content table.bsts-order-table tbody,
  body.woocommerce-account .woocommerce-MyAccount-content table.bsts-order-table tr,
  body.woocommerce-account .woocommerce-MyAccount-content table.bsts-order-table th,
  body.woocommerce-account .woocommerce-MyAccount-content table.bsts-order-table td {
    display: table-row-group;
  }

  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table thead,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details thead,
  body.woocommerce-account .woocommerce-MyAccount-content table.bsts-order-table thead {
    display: table-header-group !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody,
  body.woocommerce-account .woocommerce-MyAccount-content table.bsts-order-table tbody {
    display: table-row-group !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details tr,
  body.woocommerce-account .woocommerce-MyAccount-content table.bsts-order-table tr {
    display: table-row !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table th,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details th,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details td,
  body.woocommerce-account .woocommerce-MyAccount-content table.bsts-order-table th,
  body.woocommerce-account .woocommerce-MyAccount-content table.bsts-order-table td {
    display: table-cell !important;
    float: none !important;
    width: auto !important;
    text-align: left !important;
    white-space: nowrap;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.2;
    vertical-align: middle;
  }

  /* Hide the pseudo-labels WooCommerce injects on mobile */
  body.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tr td::before,
  body.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tr th::before {
    display: none !important;
    content: none !important;
  }

  /* Make thumbnails mini (Option A) */
  body.woocommerce-account .woocommerce-MyAccount-content table.bsts-order-table img,
  body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details img {
    max-width: 28px !important;
    height: auto !important;
  }
}



/* ===== WooCommerce My Account: force desktop-like tables with horizontal scroll (no broken cards) ===== */
@media (max-width: 782px) {
  .woocommerce-account .woocommerce-MyAccount-content{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Orders list table and order details tables: keep table layout */
  .woocommerce-account table.shop_table_responsive{
    display: table;
    width: 100%;
  }
  .woocommerce-account table.shop_table_responsive thead{ display: table-header-group; }
  .woocommerce-account table.shop_table_responsive tbody{ display: table-row-group; }
  .woocommerce-account table.shop_table_responsive tr{ display: table-row; }
  .woocommerce-account table.shop_table_responsive th,
  .woocommerce-account table.shop_table_responsive td{ display: table-cell; }

  /* Disable Woo's pseudo-labels that cause the card look */
  .woocommerce-account table.shop_table_responsive td::before{
    display:none !important;
    content:none !important;
  }

  /* Ensure scroll is possible (desktop table width) */
  .woocommerce-account table.shop_table_responsive,
  .woocommerce-account table.woocommerce-orders-table{
    min-width: 720px;
  }

  /* Compact density */
  .woocommerce-account table.shop_table_responsive th,
  .woocommerce-account table.shop_table_responsive td{
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
  }

  /* Mini product thumbnails in order details (option A) */
  .woocommerce-account .woocommerce-order-details table.shop_table td.product-thumbnail img,
  .woocommerce-account .woocommerce-table--order-details td.product-thumbnail img{
    width: 28px !important;
    height: auto !important;
  }
}