/* ══════════════════════════════════════════════════════════════
   ACCOUNTCHI SHOP
   Cart, checkout, account and notices.

   These pages render WooCommerce's own markup through the generic page
   template, so previously they arrived as unstyled tables and browser-
   default inputs. Everything below targets WooCommerce's stable class
   names and uses the theme tokens, so it survives plugin updates and
   follows light/dark without a second set of colours.
   ══════════════════════════════════════════════════════════════ */

.akch-page-shell .woocommerce { font-size: 14px; }

/* ─── Notices ────────────────────────────────────────────────── */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.95;
}
.woocommerce-message { border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.09); }
.woocommerce-error   { border-color: rgba(244,63,94,.35);  background: rgba(244,63,94,.08); }
.woocommerce-error li { list-style: none; }
.woocommerce-message .button,
.woocommerce-info .button {
  margin-inline-start: auto;
  font-size: 12.5px;
  padding: 8px 16px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

/* ─── Buttons ────────────────────────────────────────────────── */
.akch-page-shell .woocommerce .button,
.akch-page-shell .woocommerce button.button,
.akch-page-shell .woocommerce input.button,
.akch-page-shell .woocommerce a.button,
.akch-page-shell .woocommerce #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 13px;
  padding: 12px 24px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .18s, transform .18s;
  text-decoration: none;
}
.akch-page-shell .woocommerce .button:hover { filter: brightness(1.08); }
.akch-page-shell .woocommerce .button:active { transform: translateY(1px); }
.akch-page-shell .woocommerce .button:disabled,
.akch-page-shell .woocommerce .button.disabled { opacity: .5; cursor: not-allowed; }
.akch-page-shell .woocommerce .button[name="update_cart"] {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border2);
}
.akch-page-shell .woocommerce .button[name="update_cart"]:hover { color: var(--text); filter: none; }

/* ─── Form fields ────────────────────────────────────────────── */
.akch-page-shell .woocommerce form .form-row { margin: 0 0 16px; padding: 0; }
.akch-page-shell .woocommerce form .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.akch-page-shell .woocommerce form .form-row .required {
  color: #f43f5e;
  text-decoration: none;
  margin-inline-start: 3px;
}
.akch-page-shell .woocommerce input.input-text,
.akch-page-shell .woocommerce textarea,
.akch-page-shell .woocommerce select,
.akch-page-shell .woocommerce .select2-container .select2-selection {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
  height: auto;
}
.akch-page-shell .woocommerce input.input-text:focus,
.akch-page-shell .woocommerce textarea:focus,
.akch-page-shell .woocommerce select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.akch-page-shell .woocommerce .form-row-first,
.akch-page-shell .woocommerce .form-row-last { width: 100%; float: none; }
.akch-page-shell .woocommerce form .form-row span.description {
  font-size: 11.5px;
  color: var(--muted2);
  margin-top: 6px;
  display: block;
}

/* Two-up on wide screens; WooCommerce's floats are replaced with grid. */
@media (min-width: 660px) {
  .akch-page-shell .woocommerce-billing-fields__field-wrapper,
  .akch-page-shell .woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  .akch-page-shell .woocommerce-billing-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
}

/* ─── Cart table ─────────────────────────────────────────────── */
.akch-page-shell .woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--card);
  margin: 0 0 24px;
}
.akch-page-shell .woocommerce table.shop_table th {
  background: var(--bg2);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
  text-align: start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.akch-page-shell .woocommerce table.shop_table td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 13.5px;
}
.akch-page-shell .woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.akch-page-shell .woocommerce table.shop_table img { width: 56px; border-radius: 12px; }
.akch-page-shell .woocommerce table.shop_table .product-name a {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.akch-page-shell .woocommerce table.shop_table .product-name a:hover { color: var(--accent-text); }
.akch-page-shell .woocommerce .product-remove a.remove {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted2) !important;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}
.akch-page-shell .woocommerce .product-remove a.remove:hover {
  background: rgba(244,63,94,.14);
  color: #f43f5e !important;
}
.akch-page-shell .woocommerce .variation {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--muted2);
}
.akch-page-shell .woocommerce .variation dt,
.akch-page-shell .woocommerce .variation dd {
  display: inline;
  margin: 0;
}
.akch-page-shell .woocommerce .variation dd { margin-inline-end: 10px; }
.akch-page-shell .woocommerce .variation p { margin: 0; display: inline; }

/* Quantity stepper */
.akch-page-shell .woocommerce .quantity input.qty {
  width: 72px;
  text-align: center;
  padding: 10px 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
}

/* ─── Cart totals / order review ─────────────────────────────── */
.akch-page-shell .cart_totals,
.akch-page-shell .woocommerce-checkout-review-order {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
}
.akch-page-shell .cart_totals h2,
.akch-page-shell .woocommerce-checkout h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--text);
}
.akch-page-shell .cart_totals table.shop_table,
.akch-page-shell .woocommerce-checkout-review-order table.shop_table {
  border: 0;
  background: transparent;
  margin: 0;
}
.akch-page-shell .cart_totals table.shop_table th,
.akch-page-shell .woocommerce-checkout-review-order table.shop_table th {
  background: transparent;
  padding: 11px 0;
  border-bottom: 1px dashed var(--border);
}
.akch-page-shell .cart_totals table.shop_table td,
.akch-page-shell .woocommerce-checkout-review-order table.shop_table td {
  padding: 11px 0;
  border-bottom: 1px dashed var(--border);
  text-align: end;
}
.akch-page-shell .order-total th,
.akch-page-shell .order-total td {
  border-bottom: 0 !important;
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  padding-top: 16px !important;
}
.akch-page-shell .order-total .amount { color: var(--accent-text); }
.akch-page-shell .wc-proceed-to-checkout { margin-top: 18px; padding: 0; }
.akch-page-shell .wc-proceed-to-checkout .button { width: 100%; }

/* ─── Checkout layout ────────────────────────────────────────── */
@media (min-width: 980px) {
  .akch-page-shell form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
    gap: 28px;
    align-items: start;
  }
  .akch-page-shell #customer_details { grid-column: 1; }
  .akch-page-shell #order_review_heading,
  .akch-page-shell #order_review { grid-column: 2; }
  .akch-page-shell #order_review_heading { margin-top: 0; }
}
.akch-page-shell #customer_details .col-1,
.akch-page-shell #customer_details .col-2 { width: 100%; float: none; }

/* ─── Payment methods ────────────────────────────────────────── */
.akch-page-shell .woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
  margin-top: 18px;
}
.akch-page-shell .woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.akch-page-shell .woocommerce-checkout #payment ul.payment_methods li {
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px 15px;
  background: var(--bg2);
  transition: border-color .18s;
}
.akch-page-shell .woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--border2); }
.akch-page-shell .woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  cursor: pointer;
}
.akch-page-shell .woocommerce-checkout #payment ul.payment_methods li img {
  max-height: 26px;
  width: auto;
  margin-inline-start: 6px;
}
.akch-page-shell .woocommerce-checkout #payment div.payment_box {
  background: var(--surface);
  border-radius: 11px;
  margin: 10px 0 0;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--muted);
}
.akch-page-shell .woocommerce-checkout #payment div.payment_box::before { content: none; }
.akch-page-shell .woocommerce-checkout #payment #place_order { width: 100%; margin-top: 6px; }
.akch-page-shell .woocommerce-terms-and-conditions-wrapper {
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 12px;
}

/* ─── Coupon ─────────────────────────────────────────────────── */
.akch-page-shell .woocommerce .coupon {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.akch-page-shell .woocommerce .coupon input.input-text { flex: 1 1 180px; width: auto; }
.akch-page-shell .checkout_coupon {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  background: var(--card);
  margin-bottom: 20px;
}

/* ─── Empty cart ─────────────────────────────────────────────── */
.akch-page-shell .cart-empty,
.akch-page-shell .woocommerce-info.cart-empty {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  padding: 40px 20px 12px;
  justify-content: center;
}
.akch-page-shell .return-to-shop { text-align: center; padding-bottom: 40px; }

/* ─── My account ─────────────────────────────────────────────── */
.akch-page-shell .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.akch-page-shell .woocommerce-MyAccount-navigation li a {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.akch-page-shell .woocommerce-MyAccount-navigation li.is-active a,
.akch-page-shell .woocommerce-MyAccount-navigation li a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ─── Order received ─────────────────────────────────────────── */
.akch-page-shell .woocommerce-order-overview {
  list-style: none;
  margin: 0 0 26px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.akch-page-shell .woocommerce-order-overview li {
  font-size: 11.5px;
  color: var(--muted2);
  text-transform: none;
  border: 0;
}
.akch-page-shell .woocommerce-order-overview li strong {
  display: block;
  font-size: 14px;
  color: var(--text);
  margin-top: 5px;
}

/* ─── Mobile: tables become cards ────────────────────────────── */
@media (max-width: 720px) {
  .akch-page-shell .woocommerce table.shop_table thead { display: none; }
  .akch-page-shell .woocommerce table.shop_table,
  .akch-page-shell .woocommerce table.shop_table tbody,
  .akch-page-shell .woocommerce table.shop_table tr,
  .akch-page-shell .woocommerce table.shop_table td { display: block; width: 100%; }
  .akch-page-shell .woocommerce table.shop_table tr {
    border-bottom: 1px solid var(--border);
    padding: 6px 0;
  }
  .akch-page-shell .woocommerce table.shop_table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 0;
    padding: 9px 14px;
  }
  /* WooCommerce ships the column name in data-title; use it as the row label. */
  .akch-page-shell .woocommerce table.shop_table td::before {
    content: attr(data-title);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted2);
  }
  .akch-page-shell .woocommerce table.shop_table td.product-remove::before,
  .akch-page-shell .woocommerce table.shop_table td.product-thumbnail::before { content: none; }
  .akch-page-shell .woocommerce table.shop_table td.actions { display: block; }
  .akch-page-shell .woocommerce .coupon { flex-direction: column; }
  .akch-page-shell .woocommerce .coupon .button,
  .akch-page-shell .woocommerce .button[name="update_cart"] { width: 100%; }
}

/* ─── Checkout connection notice ───
   Replaces the old VPN Alert plugin's CDN-loaded modal. Inline, dismissible,
   and in the site's own colours instead of a green popup over the payment form. */
.akch-checkout-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 22px;
  padding: 15px 18px;
  border: 1px solid rgba(245, 158, 11, .34);
  border-inline-start: 3px solid #f59e0b;
  border-radius: 15px;
  background: rgba(245, 158, 11, .08);
}
.akch-checkout-notice[hidden] { display: none; }
.akch-checkout-notice-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: #f59e0b;
}
.akch-checkout-notice-icon svg { width: 100%; height: 100%; }
.akch-checkout-notice-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.akch-checkout-notice-body strong {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}
.akch-checkout-notice-body span {
  font-size: 12.5px;
  line-height: 2;
  color: var(--muted);
}
.akch-checkout-notice-close {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0 4px;
  font-size: 21px;
  line-height: 1;
  color: var(--muted2);
  cursor: pointer;
}
.akch-checkout-notice-close:hover { color: var(--text); }