/* ================================
   VoIPstudio DDI Pricing UI
   + mobile Option A (scroll) / Option B (cards)
   ================================ */

.vdp { max-width: 100%; }

.vdp-controls {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.vdp-controls label {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.vdp-controls select {
  min-width: 260px;
  box-sizing: border-box;
  border-radius: 8px;
  border-color: #9595954F;

  height: 44px;
  line-height: 44px;

  padding: 0 40px 0 12px;
  margin: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 16px;
  font-weight: 400;
}

.vdp-status { margin: 8px 0 12px; font-size: 14px; opacity: 0.85; }

.vdp-tablewrap { width: 100%; }

.vdp-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.vdp-table th, .vdp-table td {
  border-bottom: 1px solid #eee;
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;

  overflow-wrap: anywhere;
  word-break: break-word;
}

.vdp-table thead th { border-bottom: 2px solid #ddd; }

/* ===== Mobile behaviours ===== */
@media (max-width: 768px) {
  .vdp .vdp-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .vdp .vdp-controls select {
    width: 100%;
    min-width: 100%;
  }

  /* Option A: horizontal scroll */
  .vdp[data-mobile-view="scroll"] .vdp-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vdp[data-mobile-view="scroll"] .vdp-table {
    min-width: 860px;
    table-layout: auto;
  }

  /* Option B: cards */
  .vdp[data-mobile-view="cards"] .vdp-table {
    table-layout: auto;
  }
  .vdp[data-mobile-view="cards"] .vdp-table thead {
    display: none;
  }
  .vdp[data-mobile-view="cards"] .vdp-table tbody,
  .vdp[data-mobile-view="cards"] .vdp-table tr {
    display: block;
    width: 100%;
  }

  .vdp[data-mobile-view="cards"] .vdp-table tr {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 10px 6px;
    margin: 0 0 12px;
    background: #fff;
  }

  .vdp[data-mobile-view="cards"] .vdp-table td {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f1f1;
  }

  .vdp[data-mobile-view="cards"] .vdp-table td:last-child {
    border-bottom: 0;
  }

  .vdp[data-mobile-view="cards"] .vdp-table td::before {
    content: attr(data-label);
    font-weight: 600;
    opacity: 0.85;
    flex: 0 0 45%;
    max-width: 45%;
  }

  .vdp[data-mobile-view="cards"] .vdp-table td {
    flex-wrap: wrap;
  }
}