/* WooCommerce page overrides — match the BanglaTrack design system */
.bt-wc-wrap { padding-top: 48px; padding-bottom: 80px; }

/* Registration + Login forms */
.woocommerce-form,
.woocommerce-form-login,
.woocommerce-form-register {
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
}

/* Login/Register pill tabs (My Account) — segmented control matching the app */
.bt-auth-card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}
.bt-auth-card .woocommerce-form-login,
.bt-auth-card .woocommerce-form-register {
  max-width: none; margin: 0; background: none; border: none; border-radius: 0; padding: 0;
}
.bt-auth-tabs {
  display: flex; gap: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 4px; margin-bottom: 20px;
}
.bt-auth-tab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--fs-md); font-weight: 700;
  color: var(--text2); padding: 10px 16px; border-radius: var(--r-pill);
  transition: background .15s, color .15s, box-shadow .15s;
}
.bt-auth-tab:hover { color: var(--text); }
.bt-auth-tab.is-active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.bt-auth-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bt-auth-panel[hidden] { display: none; }

.woocommerce-form-row label { font-size: 13px; font-weight: 700; margin-bottom: 6px; display: block; color: var(--text2); }
.woocommerce-Input--text {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s;
}
.woocommerce-Input--text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13,107,80,.1); }
.woocommerce-form-row { margin-bottom: 16px; }

/* Buttons */
.woocommerce button[type="submit"],
.woocommerce-button {
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: #fff;
  border: none;
  border-radius: var(--r);
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
  width: 100%;
}
.woocommerce button[type="submit"]:hover { opacity: 0.88; }

/* Error / notice messages */
.woocommerce-error { background: rgba(237,27,36,.08); border-left: 3px solid var(--accent2); border-radius: var(--r-sm); padding: 12px 16px; list-style: none; margin-bottom: 20px; font-size: 14px; color: var(--accent2); }
.woocommerce-message { background: rgba(13,107,80,.08); border-left: 3px solid var(--accent); border-radius: var(--r-sm); padding: 12px 16px; list-style: none; margin-bottom: 20px; font-size: 14px; }

/* Checkout */
.woocommerce-checkout #payment { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } }

/* ── MY ACCOUNT: two-column layout (nav + content) ──────────────── */
/*
 * WooCommerce core ships its own bundled stylesheet with legacy
 * theme-compat rules for classic (non-block) themes:
 *   .woocommerce-account .woocommerce-MyAccount-navigation { float:left; width:30%; }
 *   .woocommerce-account .woocommerce-MyAccount-content    { float:right; width:68%; }
 * That rule has the SAME specificity (0,2,0 — one class + one class) as our
 * own .woocommerce-account .woocommerce-MyAccount-navigation rule below, so
 * whichever stylesheet is later in the cascade wins — not reliable to
 * depend on. The .bt-myaccount-layout > selectors here add a parent-class
 * qualifier (0,3,0), giving them unconditional priority over WC core's
 * float layout regardless of stylesheet load order, and explicitly reset
 * float/width so the CSS grid on .bt-myaccount-layout actually controls
 * layout instead of being fought by leftover float positioning.
 */
.bt-myaccount-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .bt-myaccount-layout { grid-template-columns: 1fr; gap: 24px; }
}

.bt-myaccount-layout .woocommerce-MyAccount-navigation,
.bt-myaccount-layout .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px; position: sticky; top: 88px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: 2px; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
  color: var(--text2); text-decoration: none; transition: all .15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--surface2); color: var(--accent); }
.woocommerce-MyAccount-navigation-link-icon { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { position: static; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: 0; }
}

.woocommerce-MyAccount-content { font-size: 14px; color: var(--text2); line-height: 1.7; }
.woocommerce-MyAccount-content > p:first-child { margin-bottom: 16px; }
.woocommerce-MyAccount-content table.shop_table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td { padding: 10px 14px; border: 1px solid var(--border); font-size: 13px; text-align: left; }
.woocommerce-MyAccount-content table.shop_table th { background: var(--surface2); font-weight: 700; color: var(--text); }

/* Orders list (My Account → Orders) */
.woocommerce-orders-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.woocommerce-orders-table thead th {
  background: var(--surface2); text-align: left; padding: 12px 16px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3);
  border-bottom: 1px solid var(--border);
}
.woocommerce-orders-table__row td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text2); }
.woocommerce-orders-table__row:last-child td { border-bottom: none; }
.woocommerce-orders-table__cell-order-number a { color: var(--accent); font-weight: 700; text-decoration: none; }
.woocommerce-orders-table__cell-order-status mark { background: none; color: inherit; }
.woocommerce-orders-table__cell-order-actions .button {
  display: inline-flex; width: auto; padding: 7px 14px; font-size: 12px;
  background: var(--surface2); color: var(--text); box-shadow: none;
  border: 1px solid var(--border2); border-radius: var(--r-sm); margin: 2px;
}
.woocommerce-orders-table__cell-order-actions .button:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }
.woocommerce-orders-table__cell-order-actions .button.pay { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 700px) {
  .woocommerce-orders-table thead { display: none; }
  .woocommerce-orders-table, .woocommerce-orders-table tbody, .woocommerce-orders-table tr, .woocommerce-orders-table td { display: block; width: 100%; }
  .woocommerce-orders-table__row { padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .woocommerce-orders-table__row td { border: none; padding: 4px 0; }
}

/* Single order view (My Account → Orders → View) */
.woocommerce-order-details,
.woocommerce-customer-details {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px; margin-bottom: 24px;
}
.woocommerce-order-details h2,
.woocommerce-customer-details h2 { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 14px; }
.woocommerce-table--order-details { width: 100%; border-collapse: collapse; }
.woocommerce-table--order-details th,
.woocommerce-table--order-details td { padding: 10px 4px; border-bottom: 1px solid var(--border); font-size: 13px; text-align: left; }
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td { border-bottom: none; }
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td { font-weight: 800; color: var(--text); font-size: 15px; }
address { font-style: normal; font-size: 13px; color: var(--text2); line-height: 1.7; }
.woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.woocommerce-column--billing-address h2,
.woocommerce-column--shipping-address h2 { font-size: 14px; }
@media (max-width: 640px) {
  .woocommerce-customer-details .woocommerce-columns,
  .woocommerce-columns.woocommerce-columns--2 { grid-template-columns: 1fr; }
}

/* Addresses (My Account → Addresses) */
/*
 * Same WooCommerce-core-collision pattern already fixed for the My Account
 * nav/content pair (see woocommerce/myaccount/my-account.php's header
 * comment) and for checkout's #payment box: WC core's bundled stylesheet
 * applies legacy `float:left;width:48%` to `.u-column1`/`.u-column2` (the
 * classic 2-column address layout markup), which core still renders here
 * alongside `.woocommerce-Address`. Reset float/width explicitly so this
 * theme's own `display:grid` layout on `.woocommerce-Addresses.addresses`
 * actually controls positioning instead of being fought by leftover float
 * layout from WC core's stylesheet.
 */
.woocommerce-Addresses.addresses .woocommerce-Address,
.woocommerce-Addresses.addresses .u-column1,
.woocommerce-Addresses.addresses .u-column2 {
  float: none;
  width: auto;
}
.woocommerce-Addresses.addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.woocommerce-Address {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px;
}
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.woocommerce-Address-title h2 { font-size: 15px; font-weight: 800; color: var(--text); margin: 0; }
.woocommerce-Address-title .edit {
  font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 12px;
}
.woocommerce-Address-title .edit:hover { border-color: var(--accent); }
.woocommerce-Address address { font-size: 13px; color: var(--text2); line-height: 1.7; }
@media (max-width: 700px) {
  .woocommerce-Addresses.addresses { grid-template-columns: 1fr; }
}

/* ── CART & CHECKOUT: shared cart table ─────────────────────────── */
.woocommerce-cart-form,
.woocommerce-checkout-review-order,
#order_review {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
}
table.shop_table,
table.cart,
table.woocommerce-cart-form__contents,
table.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.shop_table th,
table.shop_table td,
table.cart th,
table.cart td,
table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  color: var(--text2);
}
table.shop_table th,
table.cart th,
table.woocommerce-checkout-review-order-table th {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text3); border-bottom: 1px solid var(--border);
}
table.shop_table tr:last-child td,
table.cart tr:last-child td { border-bottom: none; }
.product-name a { color: var(--text); font-weight: 600; text-decoration: none; }
.product-name a:hover { color: var(--accent); }
.product-thumbnail img { border-radius: var(--r-sm); width: 64px; height: auto; }
.product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(237,27,36,.1); color: var(--accent2) !important;
  text-decoration: none; font-weight: 800; line-height: 1;
}
.product-remove a.remove:hover { background: rgba(237,27,36,.18); }
.quantity .qty {
  width: 64px; padding: 8px 10px; border: 1px solid var(--border2);
  border-radius: var(--r-sm); background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 14px;
}
.woocommerce-cart-form .actions { padding: 16px 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.woocommerce-cart-form .actions button { width: auto; }
.woocommerce-cart-form .coupon { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; }
.woocommerce-cart-form .coupon .input-text {
  padding: 10px 14px; border: 1px solid var(--border2); border-radius: var(--r-sm);
  background: var(--bg); color: var(--text); font-family: inherit; font-size: 14px;
}
.woocommerce-cart-form .coupon button { width: auto; padding: 10px 18px; }

/* Cart totals / order review totals */
.cart-collaterals,
.cart_totals {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px; max-width: 420px; margin-left: auto;
}
.cart_totals h2 { font-size: 16px; font-weight: 800; margin-bottom: 16px; color: var(--text); }
.cart_totals table.shop_table { border: none; }
.cart_totals table.shop_table th,
.cart_totals table.shop_table td { padding: 10px 0; border-bottom: 1px solid var(--border); }
.cart_totals .order-total td { font-weight: 800; color: var(--text); font-size: 16px; }
.wc-proceed-to-checkout { margin-top: 16px; }
.wc-proceed-to-checkout a.checkout-button {
  display: block; text-align: center; width: 100%;
}

/* ── CHECKOUT LAYOUT ─────────────────────────────────────────────── */
/*
 * As with My Account (see woocommerce/myaccount/my-account.php's header
 * comment), WooCommerce core ships its own bundled stylesheet with rules
 * that collide with ours at equal specificity — notably
 * `.woocommerce-checkout #payment { background: rgba(129,110,153,.14);
 * border-radius:5px; }` (a purple tint + different radius), which is the
 * SAME specificity (one class + one ID) as our own `#payment` rule below,
 * so whichever stylesheet loads later in the cascade wins unpredictably.
 * The .woocommerce-checkout.woocommerce-page prefix used throughout this
 * section adds a qualifier WC core's rules don't have, giving our rules
 * unconditional priority regardless of load order.
 */
.woocommerce-checkout.woocommerce-page .col2-set,
.woocommerce-checkout.woocommerce-page form.checkout_coupon {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px; margin-bottom: 24px;
}
.woocommerce-checkout h3 { font-size: 16px; font-weight: 800; margin: 20px 0 14px; color: var(--text); }
.woocommerce-checkout h3:first-child { margin-top: 0; }
.woocommerce-checkout .form-row { margin-bottom: 14px; }
.woocommerce-checkout .form-row label { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; display: block; }
.woocommerce-checkout .required { color: var(--accent2); text-decoration: none; }
.woocommerce-checkout .optional { color: var(--text3); font-weight: 400; }

/* Text/email/tel/number inputs — previously unstyled (only select/textarea
   were covered), which is why First name, Street address, City, Postcode,
   Phone, Email all rendered as bare browser-default boxes. */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border2);
  border-radius: var(--r-sm); background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout input[type="number"]:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13,107,80,.1);
}
.woocommerce-checkout textarea { resize: vertical; min-height: 70px; }

/* select2 (country/state dropdowns) — select2 hides the native <select>
   and renders its own widget (.select2-container > .select2-selection),
   which the plain `select` rule above never reaches since it's not the
   element actually visible on screen. Re-skin the select2 widget itself
   to match. */
.woocommerce-checkout .select2-container .select2-selection--single {
  height: auto; padding: 10px 14px; border: 1px solid var(--border2);
  border-radius: var(--r-sm); background: var(--bg);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0; line-height: 1.4; color: var(--text); font-size: 14px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%; top: 0; right: 8px;
}
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--default .select2-selection--single:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13,107,80,.1);
}
.woocommerce-checkout .select2-dropdown {
  border-color: var(--border2); border-radius: var(--r-sm); overflow: hidden;
}
.woocommerce-checkout .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border2); border-radius: var(--r-sm); padding: 6px 10px;
  background: var(--bg); color: var(--text); font-family: inherit;
}
.woocommerce-checkout .select2-results__option--highlighted[aria-selected] {
  background: var(--accent); color: #fff;
}

.woocommerce-checkout.woocommerce-page #payment {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px;
}
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; margin-bottom: 16px; }
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--surface2); border-radius: var(--r-sm); padding: 14px; margin: 10px 0;
  font-size: 13px; color: var(--text2); line-height: 1.6;
}
.woocommerce-checkout #payment div.payment_box:before { display: none; } /* remove WC core's default CSS arrow tail — clashes with our flat card look */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; font-size: 13px; color: var(--text2); }
.woocommerce-checkout #place_order { margin-top: 8px; }

/* "Have a coupon?" toggle link */
.woocommerce-checkout .woocommerce-info {
  background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); padding: 12px 16px; font-size: 14px; color: var(--text2); list-style: none;
}
.woocommerce-checkout .woocommerce-info .showcoupon { color: var(--accent); font-weight: 700; text-decoration: none; }

/* Empty cart state */
.woocommerce-cart .cart-empty { font-size: 15px; color: var(--text2); margin-bottom: 20px; }
.woocommerce-cart .return-to-shop .button { display: inline-flex; }

@media (max-width: 900px) {
  .cart_totals { max-width: none; margin-left: 0; }
}

/* ==========================================================
   BanglaTrack – Checkout form layout fix
   ========================================================== */

/* 1. Stack Billing + Additional info full width (was squeezed into a 48% column) */
.woocommerce-checkout #customer_details.col2-set { display: grid; grid-template-columns: 1fr; gap: 28px; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; max-width: none; }

/* 2. Proper 2-column field grid */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::before,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::before,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::after { content: none; display: none; }

/* Kill WooCommerce's float/47% widths inside grid cells (root cause of tiny fields) */
.woocommerce-checkout form .form-row {
  float: none !important; width: 100% !important;
  margin: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column;
}

/* Full-width rows */
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #billing_email_field,
.woocommerce-checkout #shipping_country_field,
.woocommerce-checkout #shipping_address_1_field,
.woocommerce-checkout #shipping_address_2_field,
.woocommerce-checkout #shipping_company_field { grid-column: 1 / -1; }
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #shipping_address_2_field { margin-top: -8px !important; }

/* 3. Labels & inputs – consistent height/borders */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 { margin: 0 0 18px; }
.woocommerce-checkout form .form-row label { line-height: 1.4; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.woocommerce-checkout form .form-row .woocommerce-input-wrapper { width: 100%; display: block; }

.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100% !important; box-sizing: border-box;
  height: 46px; padding: 0 14px;
  border: 1px solid var(--border2) !important; border-radius: var(--r) !important;
  background: var(--surface); font-size: var(--fs-md); line-height: 44px;
  transition: border-color .15s, box-shadow .15s;
}
.woocommerce-checkout form .form-row textarea { height: 110px; padding: 12px 14px !important; line-height: 1.5; resize: vertical; }
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px; padding-left: 0; }
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }

.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row select:focus,
.woocommerce-checkout form .form-row textarea:focus {
  outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(13,107,80,.1);
}

/* 4. Ship-to-different checkbox */
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #ship-to-different-address { font-size: var(--fs-lg); margin: 0 0 12px; }
.woocommerce-checkout #ship-to-different-address label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.woocommerce-checkout #ship-to-different-address input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

/* 5. Notices – icon no longer overlaps text */
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px 14px 48px !important; position: relative;
}
.woocommerce-checkout .woocommerce-message { justify-content: space-between; }
.woocommerce-checkout .woocommerce-info { justify-content: flex-start; gap: 6px; }
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); margin: 0; }
.woocommerce-checkout .woocommerce-message .button { order: 2; margin: 0; float: none; }
.woocommerce-checkout .woocommerce-message:focus { outline: none; }

/* 6. Mobile: single column */
@media (max-width: 640px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* ==========================================================
   BanglaTrack – My Account › Addresses fix
   ========================================================== */

/* 1. Widen account pages (were capped at 800px by .bt-page-content) */
body.woocommerce-account .landing-wrap.bt-page-content { max-width: 1140px !important; }
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type { margin-top: 0; }

/* 2. Address cards – clearfix pseudo-elements were taking the first grid cell */
.woocommerce-account .woocommerce-Addresses.col2-set {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 16px;
}
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account .addresses .woocommerce-Address-title::before,
.woocommerce-account .addresses .woocommerce-Address-title::after { content: none !important; display: none !important; }

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
  float: none; width: 100%; max-width: none; margin: 0; padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.woocommerce-account .woocommerce-Address-title {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 12px !important; margin: 0;
}
.woocommerce-account .woocommerce-Address-title h2 {
  font-size: 20px; line-height: 1.3; margin: 0 !important; padding: 0 !important;
  float: none; text-align: left !important; white-space: nowrap;
}
.woocommerce-account .woocommerce-Address-title .edit {
  float: none; position: static !important; margin: 0 !important;
  white-space: nowrap; padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--fs-base); line-height: 1.2;
}
.woocommerce-account .woocommerce-Address address { margin: 0; font-style: normal; line-height: 1.6; }

/* 3. Edit address form (/edit-address/billing|shipping/) – match checkout */
.woocommerce-account .woocommerce-address-fields__field-wrapper {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin-bottom: 24px;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper::before,
.woocommerce-account .woocommerce-address-fields__field-wrapper::after { content: none; display: none; }
.woocommerce-account .woocommerce-address-fields .form-row {
  float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column; grid-column: 1 / -1;
}
.woocommerce-account .woocommerce-address-fields .form-row-first,
.woocommerce-account .woocommerce-address-fields .form-row-last,
.woocommerce-account .woocommerce-address-fields .form-row[id$="_city_field"],
.woocommerce-account .woocommerce-address-fields .form-row[id$="_state_field"],
.woocommerce-account .woocommerce-address-fields .form-row[id$="_postcode_field"],
.woocommerce-account .woocommerce-address-fields .form-row[id$="_phone_field"] { grid-column: auto; }
.woocommerce-account .woocommerce-address-fields .form-row[id$="_address_2_field"] { margin-top: -8px !important; }

.woocommerce-account .woocommerce-address-fields .form-row label { line-height: 1.4; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.woocommerce-account .woocommerce-address-fields .woocommerce-input-wrapper { width: 100%; display: block; }
.woocommerce-account .woocommerce-address-fields input.input-text,
.woocommerce-account .woocommerce-address-fields select,
.woocommerce-account .woocommerce-address-fields .select2-container .select2-selection--single {
  width: 100% !important; box-sizing: border-box; height: 46px; padding: 0 14px;
  border: 1px solid var(--border2) !important; border-radius: var(--r) !important;
  background: var(--surface); font-size: var(--fs-md); line-height: 44px; transition: border-color .15s, box-shadow .15s;
}
.woocommerce-account .woocommerce-address-fields .select2-selection__rendered { line-height: 44px !important; padding-left: 0 !important; padding-top: 0 !important; }
.woocommerce-account .woocommerce-address-fields .select2-selection__arrow { height: 44px !important; right: 8px !important; }
.woocommerce-account .woocommerce-address-fields input.input-text:focus,
.woocommerce-account .woocommerce-address-fields select:focus {
  outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(13,107,80,.1);
}

/* Save button – was rendering grey/disabled-looking */
.woocommerce-account .woocommerce-address-fields button[name="save_address"] {
  width: auto; min-width: 180px; height: 46px; padding: 0 28px; border: 0; border-radius: var(--r);
  background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: #fff; font-weight: 700; font-size: var(--fs-md);
  cursor: pointer; transition: filter .15s;
}
.woocommerce-account .woocommerce-address-fields button[name="save_address"]:hover { filter: brightness(1.1); }

/* 4. Mobile */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce-Addresses.col2-set,
  .woocommerce-account .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
  .woocommerce-account .woocommerce-address-fields button[name="save_address"] { width: 100%; }
}