/* FULL BLACK BORDER TABLE */
.price-table {
  width: 100%;
  border-collapse: collapse;
  border: 3px solid #000 !important;   /* OUTER BORDER */
  background: rgba(255,255,255,0.15);
  table-layout: fixed;
}

table {
    width: 60% !important;   /* makes table smaller */
    margin: 0 auto !important;  /* centers the table */
}



/* INTERNAL BORDERS */
.price-table th,
.price-table td {
  border: 2px solid #000 !important;
  white-space: normal;
  word-break: break-word;
  overflow: anywhere;
  padding: 14px;
  color: #000;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid rgb(0,0,0,0.06);
}

/* HEADER */
.price-table th {
  background: rgba(0,0,0,0.1);
  font-weight: 700;
}
/* Price table section inserted between section-2 and section-3 */
.price-section {
  padding: 20px 10px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.price-con {
  width: 100%;
  max-width: 980px;
  box-sizing: border-box;
  margin: 0 auto;
}

.price-con h2 {
  color: #642E11 !important;
  margin-bottom: 12px;
  text-align: center;
  padding: 5px;
}

/* table wrapper enables horizontal scroll on small screens */
.price-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.price-table thead {
  background: rgba(100, 46, 17, 0.06);
}

.price-table th {
  font-weight: 700;
  color: #642E11 !important;
}

/* zebra rows */
.price-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

/* emphasize price column */
.price-table tbody td:last-child {
  font-weight: 800;
  color: #642E11 !important;
}

.price-table td:last-child {
  width: 160px;
  text-align: center;
  padding-right: 18px;
  vertical-align: middle;
}

/* Enquire button in table */
.price-enquire-btn {
  background: linear-gradient(90deg, #ff8a5b 0%, #642E11 100%);
  color: #fff !important;
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(100, 46, 17, 0.12);
  transition: transform .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}

/* hover */
.price-enquire-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(100, 46, 17, 0.16);
}

@media (max-width: 1200px) {
  .price-section {
    padding: 24px 14px;
  }

  .price-con {
    max-width: 920px;
  }

  /* allow table to reflow instead of forcing a wide minimum */
  .price-table-wrap {
    overflow-x: visible;
  }

  .price-table {
    min-width: 0 !important;
    /* override original 520px minimum */
    table-layout: fixed;
    /* force columns to share available space */
    width: 100%;
  }

  .price-table th,
  .price-table td {
    padding: 12px 14px;
    font-size: 14px;
  }

  /* keep last column readable but not too wide */
  .price-table td:last-child,
  .price-table th:last-child {
    width: 160px;
    text-align: center;
  }
}

/* tighter sizing for medium-small screens */
@media (max-width: 900px) {
  .price-section {
    padding: 20px 12px;
  }

  .price-con {
    max-width: 820px;
  }

  .price-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0 !important;
  }

  .price-enquire-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  .price-table th,
  .price-table td {
    padding: 8px 6px;
    font-size: 13px;
    line-height: 1.2;
  }

  /* reduce emphasis column width slightly so whole table fits */
  .price-table td:last-child,
  .price-table th:last-child {
    width: 140px;
    text-align: center;
  }
}

/* Phone portrait — ensure no horizontal scroll by forcing word-wrap and narrower paddings.
   If you prefer stacked card style on phones, switch display:block here (requires small HTML tweak). */
@media (max-width: 520px) {
  .price-section {
    padding: 16px 10px;
  }

  .price-con {
    max-width: 100%;
    padding: 0 6px;
  }

  .price-table-wrap {
    overflow-x: visible;
  }

  /* avoid scroll bars */
  .price-table {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
    /* distribute available width among columns */
  }

  .price-table thead {
    display: table-header-group;
  }

  /* keep header visible */
  .price-table th,
  .price-table td {
    padding: 6px 5px;
    font-size: 12px;
    white-space: normal;
    /* allow wrapping lines */
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* make last column narrower on phones and allow it to wrap */
  .price-table td:last-child,
  .price-table th:last-child {
    padding-right: 10px;
    /* reduce right padding so button has room */
    width: 120px;
    max-width: 120px;
    box-sizing: border-box;
  }

  /* make action buttons inside cells wrap if needed */
  .price-enquire-btn {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    font-size: 11px;
    white-space: normal;
    text-align: center;
  }

  .price-table td {
    overflow: visible;
    word-break: break-word;
  }
}

/* Very small phones: tighten fonts/paddings to avoid overflow */
@media (max-width: 375px) {
  .price-section {
    padding: 12px 8px;
  }

  .price-con {
    padding: 0 6px;
  }

  .price-table th,
  .price-table td {
    padding: 5px 4px;
    font-size: 11px;
  }

  .price-table td:last-child,
  .price-table th:last-child {
    padding-right: 8px;
    width: 100px;
    max-width: 100px;
  }

  .price-enquire-btn {
    padding: 2px px;
    font-size: x-small;
  }
}

@media (max-width: 768px) {

  .price-table-wrap {
    width: 100%;
    display: flex;
    justify-content: center; 
  }

  .price-table {
    width: 100%;
    min-width: 520px;
    table-layout: auto;
  }

  /* ⬇️ reduce row height */
  .price-table th,
  .price-table td {
    padding: 6px 6px !important;   /* ⬅️ THIS makes table shorter */
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    text-align: center;
  }

  /* last column narrower */
  .price-table th:last-child,
  .price-table td:last-child {
    min-width: 120px;
  }

  /* ⬇️ smaller enquire button */
  .price-enquire-btn {
    padding: 5px 6px !important;
    font-size: 11px !important;
    height: auto !important;
    line-height: 1.1;
    white-space: nowrap;
  }
}