/* ──────────────────────────────────────────────────────
   hk-checkout — Style overrides only (native WC layout)
   ────────────────────────────────────────────────────── */

/* ── Typography & Colors ─────────────────────────── */

.hk-checkout {
  font-family: var(
    --font-family,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif
  );
  font-size: var(--font-size-base, 0.9375rem);
  color: var(--color-gray-800, #1d2939);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

/* ── Billing & Shipping Fields ───────────────────── */

.hk-checkout .woocommerce-billing-fields label,
.hk-checkout .woocommerce-shipping-fields label {
  font-size: 1.4rem;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-gray-700, #344054);
}

.hk-checkout .woocommerce-billing-fields label .required,
.hk-checkout .woocommerce-shipping-fields label .required {
  color: var(--color-error, #f04438);
}

.hk-checkout .input-text,
.hk-checkout input[type="text"],
.hk-checkout input[type="email"],
.hk-checkout input[type="tel"],
.hk-checkout input[type="number"],
.hk-checkout select,
.hk-checkout textarea {
  height: 44px;
  padding: 0 var(--space-3, 0.75rem);
  border: 1px solid var(--color-gray-200, #eaecf0);
  border-radius: var(--radius-md, 10px);
  font-size: var(--font-size-sm, 0.8125rem);
  font-family: inherit;
  color: var(--color-gray-800, #1d2939);
  background: var(--color-gray-25, #fcfcfd);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--duration-fast, 150ms)
    var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.hk-checkout select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2398a2b3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3, 0.75rem) center;
  padding-right: var(--space-10, 2.5rem);
}

.hk-checkout .input-text:focus,
.hk-checkout input:focus,
.hk-checkout select:focus,
.hk-checkout textarea:focus {
  border-color: var(--color-gray-400, #98a2b3);
  background: var(--color-white, #ffffff);
}

.hk-checkout textarea {
  height: auto;
  min-height: 88px;
  padding: var(--space-3, 0.75rem);
  resize: vertical;
}

.hk-checkout .woocommerce-invalid .input-text,
.hk-checkout .woocommerce-invalid input,
.hk-checkout .woocommerce-invalid select {
  border-color: var(--color-error, #f04438);
  background: var(--color-error-bg, #fef3f2);
}

.hk-checkout .woocommerce-error,
.hk-checkout .woocommerce-error::before {
  border-radius: var(--radius-md, 10px);
  font-size: var(--font-size-sm, 0.8125rem);
}

.hk-checkout .woocommerce-error {
  background: var(--color-error-bg, #fef3f2);
  border: 1px solid var(--color-error, #f04438);
  color: var(--color-error, #f04438);
}

.hk-checkout .woocommerce-message {
  background: var(--color-success-bg, #ecfdf3);
  border: 1px solid var(--color-success, #12b76a);
  border-radius: var(--radius-md, 10px);
  color: var(--color-success, #12b76a);
}

.hk-checkout .woocommerce-info {
  background: var(--color-gray-50, #f9fafb);
  border: 1px solid var(--color-gray-200, #eaecf0);
  border-radius: var(--radius-md, 10px);
  color: var(--color-gray-700, #344054);
}

/* ── Payment Methods ─────────────────────────────── */

.hk-checkout .wc_payment_methods {
  border: none;
  list-style: none;
  padding: 0;
}

.hk-checkout .wc_payment_method {
  border: 1px solid var(--color-gray-200, #eaecf0);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  margin-bottom: var(--space-2, 0.5rem);
  background: var(--color-white, #ffffff);
  transition: border-color var(--duration-fast, 150ms)
    var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.hk-checkout .wc_payment_method:hover {
  border-color: var(--color-gray-300, #d0d5dd);
}

.hk-checkout .wc_payment_method input[name="payment_method"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-gray-900, #101828);
  cursor: pointer;
}

.hk-checkout .wc_payment_method label {
  cursor: pointer;
}

.hk-checkout .wc_payment_method label img {
  height: 24px;
  width: auto;
  vertical-align: middle;
}

.hk-checkout .payment_box {
  margin-top: var(--space-3, 0.75rem);
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid var(--color-gray-100, #f2f4f7);
  font-size: var(--font-size-sm, 0.8125rem);
  color: var(--color-gray-500, #667085);
}

.hk-checkout .payment_box p {
  margin: 0;
}

/* ── Place Order Button ──────────────────────────── */

.hk-checkout #place_order,
.hk-checkout button#place_order,
.hk-checkout .button.alt {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 52px;
  border: none !important;
  border-radius: var(--radius-md, 10px) !important;
  background: var(--color-gray-900, #101828) !important;
  color: var(--color-white, #ffffff) !important;
  font-size: var(--font-size-base, 0.9375rem) !important;
  font-weight: var(--font-weight-medium, 500) !important;
  cursor: pointer;
  transition: all var(--duration-fast, 150ms)
    var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.hk-checkout #place_order:hover,
.hk-checkout .button.alt:hover {
  background: var(--color-gray-800, #1d2939) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 4px 8px -2px rgba(16, 24, 40, 0.06));
}

.hk-checkout #place_order:active {
  transform: translateY(0);
}

/* ── Order Review Table ──────────────────────────── */

.hk-checkout .shop_table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

.hk-checkout .shop_table th {
  font-size: var(--font-size-sm, 0.8125rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-gray-900, #101828);
  padding: var(--space-3, 0.75rem) 0;
  border-bottom: 1px solid var(--color-gray-200, #eaecf0);
  text-align: left;
}

.hk-checkout .shop_table td {
  font-size: var(--font-size-sm, 0.8125rem);
  color: var(--color-gray-600, #475467);
  padding: var(--space-3, 0.75rem) 0;
  border-bottom: 1px solid var(--color-gray-200, #eaecf0);
}

.hk-checkout .shop_table .product-total {
  text-align: right;
}

.hk-checkout .cart-subtotal td,
.hk-checkout .shipping td,
.hk-checkout .order-total td {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-gray-900, #101828);
}

/* ── Terms & Conditions ──────────────────────────── */

.hk-checkout .woocommerce-terms-and-conditions-wrapper {
  margin: var(--space-4, 1rem) 0;
  padding: var(--space-4, 1rem) 0;
  border-top: 1px solid var(--color-gray-200, #eaecf0);
}

.hk-checkout .woocommerce-terms-and-conditions-wrapper label {
  font-size: var(--font-size-sm, 0.8125rem);
  color: var(--color-gray-600, #475467);
}

/* ── Reduced Motion ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hk-checkout *,
  .hk-checkout *::before,
  .hk-checkout *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.hk-checkout {
  .woocommerce {
    width: 100%;
    display: grid;
    gap: var(--space-16, 4rem);
    grid-template-columns: repeat(2, 1fr);
    font-family: "poppins", sans-serif;

    h3,
    h4 {
      font-size: 2.5rem;
      margin-bottom: 2rem;
    }

    #customer_details {
      & > .col-2 {
        display: none;
      }
    }
    #payment {
      padding: 0;
      border: none;
    }

    > div {
      padding: var(--space-8, 2rem);
      background-color: #fff;
      border-radius: var(--radius-xl, 25px);
      height: fit-content;
      position: sticky;
      top: 4rem;
    }

    .product-name {
      img {
        width: 100px;
        border-radius: var(--radius-xl);
      }
    }
  }

  .woocommerce .before-cart,
  .woocommerce .before-checkout {
    display: none;
  }

  @media (max-width: 768px) {
    .woocommerce {
      grid-template-columns: 1fr;

      > div {
        position: static;
      }
    }
  }
}