/* Custom additions to restore behaviors that Next.js provided via JS:
   1. --font-sf-pro-text variable (injected by next/font at runtime) — without it
      .font-manrope becomes invalid-at-computed-value and falls back.
   2. Base body font for pages that rely on inheritance. */
:root {
  --font-sf-pro-text: "manrope", "manrope Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body {
  font-family: var(--font-sf-pro-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Next.js puts a fixed-position spacer div for the top bar (used to offset
   sticky header); harmless. Keep everything else as-is. */

/* ============================================================
   Nextend Social Login (Google/Facebook) — full-width buttons,
   matching the form buttons (h-12, rounded-xl) on /login/ & /my-account/
   ============================================================ */
div.nsl-container,
div.nsl-container div.nsl-container-buttons {
  width: 100% !important;
}
div.nsl-container[data-align="left"],
div.nsl-container[data-align="center"] {
  text-align: center !important;
}
div.nsl-container div.nsl-container-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
div.nsl-container.nsl-container-block .nsl-container-buttons a {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
}
div.nsl-container .nsl-button {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid #D9DADE !important;
  background: #fff !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}
div.nsl-container .nsl-button-svg-container {
  display: flex !important;
  align-items: center !important;
}
div.nsl-container .nsl-button-google div.nsl-button-label-container {
  color: #0F1012 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}
/* ===== Ô tìm kiếm quốc gia (front page) — dropdown không bị cắt/tràn ===== */
#gh-dest-list {
  max-height: min(384px, 55vh);
}
/* ===== THANH TOÁN CHUYỂN KHOẢN (trang cảm ơn) — REDESIGN ===== */
#banks_details {
  max-width: 640px;
  margin: 24px auto 0;
}
#banks_details .wc-ttck-bank-details-heading {
  font-weight: 800 !important;
  color: #0F1012 !important;
  text-align: left !important;
  font-size: 18px !important;
  margin: 0 0 14px !important;
}
#banks_details .woocommerce-ttck-qr-scan {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
}
#banks_details #qrcode img { border-radius: 12px; max-width: 260px; height: auto; }
#banks_details .woocommerce-ttck-bank-details {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 20px 24px;
}
#banks_details h4 {
  background: #FFF7ED !important;
  color: #92400E !important;
  border: 1px solid #FDE68A !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  max-width: none !important;
  margin: 0 0 16px !important;
}
#banks_details table.table-bordered {
  width: 100%;
  border-collapse: collapse;
  max-width: none !important;
  margin: 0 !important;
  font-size: 14px;
}
#banks_details table.table-bordered td {
  padding: 12px 14px !important;
  border: none !important;
  border-bottom: 1px solid #F1F2F4 !important;
  background: #fff !important;
  vertical-align: middle;
}
#banks_details table.table-bordered tr:last-child td { border-bottom: none !important; }
#banks_details table.table-bordered td.text-right {
  color: #6B7280 !important;
  font-weight: 600 !important;
  width: 42%;
}
#banks_details table.table-bordered td.text-left {
  color: #0F1012 !important;
  font-weight: 700 !important;
}
/* ẩn phần thừa: timer, comment lỗi, logo */
#banks_details .ttck-timer,
#banks_details #noTransaction_0,
#banks_details #image_loading_0,
#banks_details .bank-logo {
  display: none !important;
}
/* nút "Tôi đã chuyển khoản" — style đẹp, dùng khi auto-check */
#banks_details [name="submit_paid"],
#banks_details .submit_paid_0 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 16px auto 0 !important;
  padding: 12px 24px !important;
  border: 1px solid #1446A5 !important;
  border-radius: 10px !important;
  background: #1446A5 !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
}
#banks_details [name="submit_paid"]:hover,
#banks_details .submit_paid_0:hover { background: #0F3A8C !important; }
/* Ẩn giao diện mặc định của plugin chuyển khoản (giữ container — khối gohub-bank-pay nằm trong đó) */
#banks_details .woocommerce-ttck-qr-scan,
#banks_details .woocommerce-ttck-bank-details,
#banks_details > style {
  display: none !important;
}
.gohub-bank-pay code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* ===== Trang đơn hàng (thank-you / my-account) — responsive mobile ===== */
@media (max-width: 600px) {
  .woocommerce-order-overview { flex-wrap: wrap !important; gap: 6px 14px; }
  .woocommerce-order-overview li { margin: 0 !important; }
  .woocommerce-order-details .shop_table,
  .woocommerce-order-details .shop_table tbody,
  .woocommerce-order-details .shop_table tfoot,
  .woocommerce-order-details .shop_table tr,
  .woocommerce-order-details .shop_table td,
  .woocommerce-order-details .shop_table th {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left !important;
  }
  .woocommerce-order-details .shop_table thead { display: none !important; }
  .woocommerce-order-details .shop_table tr {
    margin-bottom: 10px;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
  }
  .woocommerce-order-details .shop_table td,
  .woocommerce-order-details .shop_table th {
    border: none !important;
    padding: 3px 0 !important;
    font-size: 12px;
  }
  .woocommerce-order-details .shop_table td.product-name { font-weight: 700; color: #0F1012; }
}