/* ============================================================================
   tna W rna — brand-aligned checkout
   ----------------------------------------------------------------------------
   Scope: .tnw-checkout-page wrapper only. Targets the classes emitted by
   Botble\Ecommerce\Forms\Fronts\CheckoutForm so the PHP form stays untouched.
   RTL/LTR: handled by parent `dir` + CSS logical properties (no .rtl{} fork).
   ============================================================================ */

.tnw-checkout-page {
  --tnw-green-50:  #f0fdf4;
  --tnw-green-100: #dcfce7;
  --tnw-green-200: #bbf7d0;
  --tnw-green-500: #22c55e;
  --tnw-green-600: #16a34a;
  --tnw-green-700: #15803d;
  --tnw-green-800: #166534;

  --tnw-ink-900: #0f172a;
  --tnw-ink-700: #334155;
  --tnw-ink-500: #64748b;
  --tnw-ink-300: #cbd5e1;
  --tnw-ink-100: #f1f5f9;

  --tnw-surface:    #ffffff;
  --tnw-canvas:     #f8fafc;
  --tnw-danger:     #dc2626;
  --tnw-amber:      #f59e0b;

  --tnw-radius-sm: 8px;
  --tnw-radius-md: 12px;
  --tnw-radius-lg: 16px;

  --tnw-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --tnw-shadow-md: 0 8px 24px -8px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .04);
  --tnw-shadow-lg: 0 20px 40px -12px rgba(16, 185, 129, .18);

  --tnw-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tnw-font-ar:   'Cairo', 'Inter', system-ui, sans-serif;

  background: var(--tnw-canvas);
  color: var(--tnw-ink-900);
  font-family: var(--tnw-font-sans);
  min-height: 100vh;
  padding-block: 0 64px;
}

.tnw-checkout-page[dir="rtl"] {
  font-family: var(--tnw-font-ar);
}

/* ---------- Hero / Steps / Trust badge --------------------------------- */
.tnw-checkout-page__hero {
  background: linear-gradient(135deg, #ffffff 0%, var(--tnw-green-50) 100%);
  border-bottom: 1px solid var(--tnw-green-100);
  padding: 20px clamp(16px, 5vw, 64px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin-block-end: 32px;
}

.tnw-checkout-page__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.tnw-checkout-page__logo img {
  height: 56px;
  width: auto;
  max-width: 220px;
  display: block;
  object-fit: contain;
}

@media (max-width: 768px) {
  .tnw-checkout-page__logo img { height: 44px; max-width: 160px; }
}

.tnw-checkout-page__steps {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.tnw-step {
  font-size: 13px;
  font-weight: 600;
  color: var(--tnw-ink-500);
  background: var(--tnw-surface);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--tnw-ink-100);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.tnw-step--done {
  color: var(--tnw-green-700);
  background: var(--tnw-green-50);
  border-color: var(--tnw-green-200);
}

.tnw-step--current {
  color: #fff;
  background: var(--tnw-green-700);
  border-color: var(--tnw-green-700);
  box-shadow: 0 4px 12px -4px rgba(21, 128, 61, .35);
}

.tnw-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.tnw-step:not(.tnw-step--current):not(.tnw-step--done) .tnw-step__num {
  background: var(--tnw-ink-100);
  color: var(--tnw-ink-500);
}

.tnw-step--done .tnw-step__num {
  background: var(--tnw-green-600);
  color: #fff;
}

.tnw-step__label { white-space: nowrap; }

.tnw-trust {
  font-size: 13px;
  font-weight: 600;
  color: var(--tnw-green-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tnw-green-50);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--tnw-green-200);
}

@media (max-width: 768px) {
  .tnw-checkout-page__hero {
    grid-template-columns: auto auto;
    grid-template-areas:
      "logo  trust"
      "steps steps";
    padding: 14px 16px;
    gap: 12px;
  }
  .tnw-checkout-page__logo  { grid-area: logo; }
  .tnw-checkout-page__trust { grid-area: trust; }
  .tnw-checkout-page__steps { grid-area: steps; justify-content: flex-start; }
  .tnw-step { font-size: 12px; padding: 6px 10px; }
}

/* ---------- Hide the duplicate logo the form emits ---------------------- */
/* CheckoutForm injects its own logo wrapper at top-left of the form. We
   already render a hero logo, so suppress the inline one to avoid doubles. */
.tnw-checkout-page .form-checkout > div:first-child:has(img),
.tnw-checkout-page .form-checkout > div:first-child img[src*="logo"] {
  display: none;
}
.tnw-checkout-page .form-checkout img[alt*="ogo"],
.tnw-checkout-page .form-checkout img.checkout-logo {
  display: none !important;
}

/* ---------- Container & 2-column layout -------------------------------- */
.tnw-checkout-page__container {
  max-width: 1180px;
  padding-inline: 16px;
}

.tnw-checkout-page #main-checkout-product-info {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: 32px;
  align-items: start;
}

@media (max-width: 991px) {
  .tnw-checkout-page #main-checkout-product-info {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Reset Bootstrap col widths inside our grid — the grid drives layout */
.tnw-checkout-page .form-checkout,
.tnw-checkout-page .checkout-order-info {
  flex: unset;
  max-width: 100%;
  width: 100%;
  padding: 0;
}

/* Right column — sticky summary on desktop */
@media (min-width: 992px) {
  .tnw-checkout-page .checkout-order-info {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}

/* ---------- Section cards (left column) -------------------------------- */
.tnw-checkout-page .form-checkout > .mb-4,
.tnw-checkout-page .form-checkout > .shipping-method-wrapper,
.tnw-checkout-page .form-checkout > [data-bb-toggle="checkout-payment-methods-area"] {
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  box-shadow: var(--tnw-shadow-sm);
  padding: 24px;
  margin-block-end: 20px;
  transition: box-shadow .2s, border-color .2s;
}

.tnw-checkout-page .form-checkout > .mb-4:hover,
.tnw-checkout-page .form-checkout > .shipping-method-wrapper:hover,
.tnw-checkout-page .form-checkout > [data-bb-toggle="checkout-payment-methods-area"]:hover {
  border-color: var(--tnw-green-200);
  box-shadow: var(--tnw-shadow-md);
}

/* Section titles — green accent */
.tnw-checkout-page .checkout-shipping-information-title,
.tnw-checkout-page .checkout-billing-information-title,
.tnw-checkout-page .checkout-payment-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--tnw-ink-900);
  margin: 0 0 18px;
  padding-inline-start: 14px;
  border-inline-start: 4px solid var(--tnw-green-600);
  line-height: 1.4;
}

/* ---------- Form inputs ------------------------------------------------ */
.tnw-checkout-page .form-control,
.tnw-checkout-page .form-select,
.tnw-checkout-page input.form-control,
.tnw-checkout-page select.form-select,
.tnw-checkout-page textarea.form-control {
  border: 1.5px solid var(--tnw-ink-300);
  border-radius: var(--tnw-radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--tnw-ink-900);
  background: #fff;
  transition: border-color .15s, box-shadow .15s, background .15s;
  min-height: 48px;
}

.tnw-checkout-page .form-control:hover,
.tnw-checkout-page .form-select:hover {
  border-color: var(--tnw-ink-500);
}

.tnw-checkout-page .form-control:focus,
.tnw-checkout-page .form-select:focus {
  outline: none;
  border-color: var(--tnw-green-600);
  box-shadow: 0 0 0 4px var(--tnw-green-100);
  background: #fff;
}

.tnw-checkout-page .form-control::placeholder,
.tnw-checkout-page textarea::placeholder {
  color: var(--tnw-ink-500);
  opacity: 1;
}

.tnw-checkout-page .form-floating > label,
.tnw-checkout-page label,
.tnw-checkout-page .form-label {
  color: var(--tnw-ink-700);
  font-weight: 600;
  font-size: 14px;
}

.tnw-checkout-page .form-group {
  margin-block-end: 16px;
}

.tnw-checkout-page .invalid-feedback {
  color: var(--tnw-danger);
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
}

.tnw-checkout-page .is-invalid {
  border-color: var(--tnw-danger) !important;
  background-image: none !important;
  padding-inline-end: 14px !important;
}

/* Floating-label tweaks — fix RTL label positioning */
.tnw-checkout-page[dir="rtl"] .form-floating > label {
  inset-inline-start: 14px;
  inset-inline-end: auto;
  transform-origin: 100% 0;
}

/* ---------- Shipping methods (radio cards) ----------------------------- */
.tnw-checkout-page .shipping-method-wrapper .shipping-method,
.tnw-checkout-page .shipping-method-wrapper [data-bb-toggle="checkout-shipping-methods-area"] > label,
.tnw-checkout-page .shipping-method-wrapper .form-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--tnw-ink-300);
  border-radius: var(--tnw-radius-md);
  margin-block-end: 10px;
  background: #fff;
  cursor: pointer;
  transition: all .15s;
}

.tnw-checkout-page .shipping-method-wrapper .form-check:hover {
  border-color: var(--tnw-green-500);
  background: var(--tnw-green-50);
}

.tnw-checkout-page .shipping-method-wrapper .form-check:has(input:checked) {
  border-color: var(--tnw-green-600);
  background: var(--tnw-green-50);
  box-shadow: 0 0 0 3px var(--tnw-green-100);
}

.tnw-checkout-page .form-check-input {
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--tnw-ink-300);
  cursor: pointer;
  flex-shrink: 0;
}

.tnw-checkout-page .form-check-input:checked {
  background-color: var(--tnw-green-600);
  border-color: var(--tnw-green-600);
}

.tnw-checkout-page .form-check-input:focus {
  box-shadow: 0 0 0 4px var(--tnw-green-100);
  border-color: var(--tnw-green-600);
}

.tnw-checkout-page .form-check-label {
  flex: 1;
  cursor: pointer;
  font-weight: 500;
  margin: 0;
}

/* ---------- Payment methods ------------------------------------------- */
.tnw-checkout-page [data-bb-toggle="checkout-payment-methods-area"] .payment-method-item,
.tnw-checkout-page [data-bb-toggle="checkout-payment-methods-area"] .form-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1.5px solid var(--tnw-ink-300);
  border-radius: var(--tnw-radius-md);
  margin-block-end: 10px;
  background: #fff;
  cursor: pointer;
  transition: all .15s;
}

.tnw-checkout-page [data-bb-toggle="checkout-payment-methods-area"] .form-check:has(input:checked) {
  border-color: var(--tnw-green-600);
  background: var(--tnw-green-50);
  box-shadow: 0 0 0 3px var(--tnw-green-100);
}

.tnw-checkout-page .payment-method-item img,
.tnw-checkout-page [data-bb-toggle="checkout-payment-methods-area"] img {
  max-height: 24px;
  width: auto;
}

/* ---------- Order summary (right column) ------------------------------- */
.tnw-checkout-page .cart-item-wrapper {
  background: var(--tnw-surface) !important;
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  box-shadow: var(--tnw-shadow-md);
  padding: 20px !important;
}

/* Kill the .bg-light wrapper background — we restyle the inner */
.tnw-checkout-page .bg-light {
  background: transparent !important;
}

.tnw-checkout-page .cart-item-wrapper h5,
.tnw-checkout-page .cart-item-wrapper .h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--tnw-ink-900);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--tnw-green-100);
}

.tnw-checkout-page .cart-item-wrapper table,
.tnw-checkout-page .cart-item-wrapper .table {
  width: 100%;
  font-size: 14px;
}

.tnw-checkout-page .cart-item-wrapper table td,
.tnw-checkout-page .cart-item-wrapper .table td {
  padding: 10px 0;
  border-color: var(--tnw-ink-100);
  vertical-align: middle;
}

/* Subtotals row */
.tnw-checkout-page .cart-item-wrapper tr:has(.text-end),
.tnw-checkout-page .cart-item-wrapper .subtotal-row {
  color: var(--tnw-ink-700);
}

/* Grand total — make it big & branded */
.tnw-checkout-page .cart-item-wrapper tr:last-child,
.tnw-checkout-page .cart-item-wrapper .grand-total,
.tnw-checkout-page .cart-item-wrapper .total-row {
  font-size: 18px;
  font-weight: 800;
  color: var(--tnw-green-700);
}

.tnw-checkout-page .cart-item-wrapper tr:last-child td {
  padding-top: 14px;
  border-top: 2px solid var(--tnw-green-100);
  border-bottom: 0;
}

/* Discount/coupon form */
.tnw-checkout-page .checkout-discount-form,
.tnw-checkout-page form[action*="discount"] {
  background: var(--tnw-surface);
  border: 1.5px dashed var(--tnw-green-300, #86efac);
  border-radius: var(--tnw-radius-md);
  padding: 14px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
}

.tnw-checkout-page .checkout-discount-form > * { margin: 0; }

.tnw-checkout-page .checkout-discount-form input,
.tnw-checkout-page .checkout-discount-form .form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  min-height: 44px;
  margin: 0;
}

.tnw-checkout-page .checkout-discount-form button,
.tnw-checkout-page .checkout-discount-form .btn {
  flex: 0 0 auto;
  background: var(--tnw-ink-900);
  color: #fff;
  border: 0;
  padding: 0 22px;
  border-radius: var(--tnw-radius-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, transform .12s;
  min-height: 44px;
  white-space: nowrap;
}

.tnw-checkout-page .checkout-discount-form button:hover,
.tnw-checkout-page .checkout-discount-form .btn:hover {
  background: var(--tnw-green-700);
  color: #fff;
}

/* ---------- Perks card (under order summary on desktop) ----------------- */
.tnw-perks {
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  box-shadow: var(--tnw-shadow-sm);
  padding: 20px;
  margin-block-start: 16px;
}

.tnw-perks__title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tnw-green-700);
  margin: 0 0 14px;
  padding-block-end: 10px;
  border-block-end: 2px solid var(--tnw-green-100);
}

.tnw-perks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tnw-perks__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tnw-ink-700);
}

.tnw-perks__list strong {
  color: var(--tnw-ink-900);
  font-weight: 700;
}

.tnw-perks__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tnw-green-50);
  color: var(--tnw-green-700);
  flex-shrink: 0;
}

/* ---------- Trust badges (payment + delivery icons) ------------------- */
.tnw-trust-badges {
  margin-top: 24px;
  padding: 20px;
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tnw-trust-badges__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tnw-ink-500);
  margin: 0;
}

.tnw-trust-badges__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.tnw-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--tnw-ink-100);
  border-radius: var(--tnw-radius-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--tnw-ink-700);
  line-height: 1;
}

.tnw-trust-badge svg { flex-shrink: 0; }
.tnw-trust-badge--cod    { background: #fef3c7; color: #92400e; }
.tnw-trust-badge--wallet { background: var(--tnw-green-50); color: var(--tnw-green-700); }
.tnw-trust-badge--secure { background: #eff6ff; color: #1e40af; }
.tnw-trust-badge--ssl    { background: #f5f3ff; color: #6d28d9; }

/* ---------- Footer actions: Back to cart + Checkout button ------------- */
.tnw-checkout-page .form-checkout .row.align-items-center.mb-5 {
  margin-block: 24px 0 !important;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--tnw-ink-100);
}

/* Big primary checkout button */
.tnw-checkout-page button[type="submit"],
.tnw-checkout-page .checkout-button,
.tnw-checkout-page [data-bb-toggle="checkout-button"],
.tnw-checkout-page .btn-checkout,
.tnw-btn--primary {
  background: linear-gradient(135deg, var(--tnw-green-600) 0%, var(--tnw-green-700) 100%);
  color: #fff;
  border: 0;
  border-radius: var(--tnw-radius-md);
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  min-height: 56px;
  box-shadow: 0 8px 20px -6px rgba(21, 128, 61, .4);
  transition: transform .12s, box-shadow .15s, filter .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.tnw-checkout-page button[type="submit"]:hover,
.tnw-checkout-page .checkout-button:hover,
.tnw-btn--primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -6px rgba(21, 128, 61, .5);
  color: #fff;
}

.tnw-checkout-page button[type="submit"]:active {
  transform: translateY(0);
}

.tnw-checkout-page button[type="submit"]:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* Back-to-cart link — secondary */
.tnw-checkout-page .back-to-cart,
.tnw-checkout-page a[href*="cart"]:not(.tnw-btn) {
  color: var(--tnw-ink-700);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}

.tnw-checkout-page .back-to-cart:hover,
.tnw-checkout-page a[href*="cart"]:not(.tnw-btn):hover {
  color: var(--tnw-green-700);
}

/* ---------- Secondary inline links (force brand color, never white) --- */
/* Reset for all plain <a> tags inside the checkout that aren't .tnw-btn,
   the back-to-cart, the footer, or the place-order button. */
.tnw-checkout-page .btn-open-coupon-form,
.tnw-checkout-page .form-checkout a:not(.tnw-btn):not(.checkout-button):not(.back-to-cart):not([href*="cart"]),
.tnw-checkout-page .checkout-order-info a:not(.tnw-btn):not(.checkout-button),
.tnw-checkout-page p a:not(.tnw-btn) {
  color: var(--tnw-green-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--tnw-green-200);
  background: transparent;
  transition: color .15s, text-decoration-color .15s;
}

.tnw-checkout-page .btn-open-coupon-form:hover,
.tnw-checkout-page .form-checkout a:not(.tnw-btn):not(.checkout-button):not(.back-to-cart):not([href*="cart"]):hover,
.tnw-checkout-page .checkout-order-info a:not(.tnw-btn):not(.checkout-button):hover {
  color: var(--tnw-green-800);
  text-decoration-color: var(--tnw-green-600);
}

.tnw-checkout-page .btn-open-coupon-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}

/* "Do you have a coupon?" toggle area — surface it as a clear chip */
.tnw-checkout-page .checkout-discount-wrapper,
.tnw-checkout-page [data-bb-toggle="open-coupon-form"],
.tnw-checkout-page .ps-block--coupon {
  background: var(--tnw-green-50);
  border: 1px dashed var(--tnw-green-300, #86efac);
  border-radius: var(--tnw-radius-md);
  padding: 14px 16px;
  margin-block: 12px;
  text-align: center;
}

/* Mirror chevron in RTL */
.tnw-checkout-page[dir="rtl"] .back-to-cart svg,
.tnw-checkout-page[dir="rtl"] a[href*="cart"] svg {
  transform: scaleX(-1);
}

/* ---------- Terms checkbox & order notes ------------------------------- */
.tnw-checkout-page .form-check:has(#agree_terms_and_policy) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--tnw-ink-100);
  border: 1px solid var(--tnw-ink-300);
  padding: 14px 16px;
  border-radius: var(--tnw-radius-md);
  margin-block: 16px;
  font-size: 14px;
  color: var(--tnw-ink-700);
}

.tnw-checkout-page .form-check:has(#agree_terms_and_policy) a {
  color: var(--tnw-green-700);
  font-weight: 600;
}

/* ---------- Alerts ---------------------------------------------------- */
.tnw-checkout-page .alert {
  border-radius: var(--tnw-radius-md);
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
}

.tnw-checkout-page .alert-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.tnw-checkout-page .alert-info {
  background: var(--tnw-green-50);
  border-color: var(--tnw-green-200);
  color: var(--tnw-green-800);
}

/* ---------- Empty-cart state ------------------------------------------ */
.tnw-checkout-page__empty {
  max-width: 540px;
  margin: 80px auto;
  text-align: center;
}

.tnw-empty-cart {
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  padding: 48px 32px;
  box-shadow: var(--tnw-shadow-md);
}

.tnw-empty-cart svg { color: var(--tnw-green-600); margin-bottom: 16px; }
.tnw-empty-cart h2 { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: var(--tnw-ink-900); }
.tnw-empty-cart p  { color: var(--tnw-ink-500); margin: 0 0 24px; }

.tnw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: var(--tnw-radius-md);
  font-weight: 700;
  text-decoration: none;
  transition: all .15s;
}

/* ---------- Footer ---------------------------------------------------- */
.tnw-checkout-page__footer {
  text-align: center;
  margin-top: 64px;
  padding: 24px 16px;
  color: var(--tnw-ink-500);
  font-size: 13px;
}

.tnw-checkout-page__footer-links {
  margin-top: 6px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.tnw-checkout-page__footer a {
  color: var(--tnw-green-700);
  text-decoration: none;
  font-weight: 600;
}

.tnw-checkout-page__footer a:hover { text-decoration: underline; }

/* ---------- Loading spinner -------------------------------------------- */
.tnw-checkout-page .loading-spinner {
  border: 3px solid var(--tnw-green-100);
  border-top-color: var(--tnw-green-600);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  animation: tnw-spin .8s linear infinite;
  margin: 16px auto;
}

@keyframes tnw-spin { to { transform: rotate(360deg); } }

/* ---------- Mobile polish --------------------------------------------- */
@media (max-width: 575px) {
  .tnw-checkout-page__container { padding-inline: 12px; }

  .tnw-checkout-page .form-checkout > .mb-4,
  .tnw-checkout-page .form-checkout > .shipping-method-wrapper,
  .tnw-checkout-page .form-checkout > [data-bb-toggle="checkout-payment-methods-area"],
  .tnw-checkout-page .cart-item-wrapper { padding: 16px !important; border-radius: var(--tnw-radius-md); }

  .tnw-checkout-page .checkout-shipping-information-title,
  .tnw-checkout-page .checkout-billing-information-title,
  .tnw-checkout-page .checkout-payment-title { font-size: 16px; }

  /* prevent iOS zoom on focus */
  .tnw-checkout-page .form-control,
  .tnw-checkout-page .form-select { font-size: 16px; }
}

/* ---------- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tnw-checkout-page *,
  .tnw-checkout-page *::before,
  .tnw-checkout-page *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   tna W rna — Cart page (.tnw-cart-page)
   Empty state + filled grid (items + summary sidebar). RTL/LTR safe.
   ============================================================================ */

.tnw-cart-page {
  --tnw-green-50:  #f0fdf4;
  --tnw-green-100: #dcfce7;
  --tnw-green-200: #bbf7d0;
  --tnw-green-300: #86efac;
  --tnw-green-500: #22c55e;
  --tnw-green-600: #16a34a;
  --tnw-green-700: #15803d;
  --tnw-green-800: #166534;
  --tnw-ink-900:   #0f172a;
  --tnw-ink-700:   #334155;
  --tnw-ink-500:   #64748b;
  --tnw-ink-300:   #cbd5e1;
  --tnw-ink-100:   #f1f5f9;
  --tnw-surface:   #ffffff;
  --tnw-canvas:    #f8fafc;
  --tnw-danger:    #dc2626;
  --tnw-radius-sm: 8px;
  --tnw-radius-md: 12px;
  --tnw-radius-lg: 16px;
  --tnw-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --tnw-shadow-md: 0 8px 24px -8px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .04);
  --tnw-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tnw-font-ar:   'Cairo', 'Inter', system-ui, sans-serif;

  background: var(--tnw-canvas);
  color: var(--tnw-ink-900);
  font-family: var(--tnw-font-sans);
  min-height: 60vh;
  padding-block: 32px 64px;
}

.tnw-cart-page[dir="rtl"] { font-family: var(--tnw-font-ar); }

.tnw-cart-page__container {
  max-width: 1200px;
  padding-inline: 16px;
}

/* ---------- Empty state ---------- */
.tnw-empty-state {
  max-width: 560px;
  margin: 40px auto;
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  box-shadow: var(--tnw-shadow-md);
  padding: 48px 32px;
  text-align: center;
}

.tnw-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: var(--tnw-green-50);
  color: var(--tnw-green-600);
  border-radius: 50%;
  margin: 0 auto 20px;
}

.tnw-empty-state__title {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--tnw-ink-900);
}

.tnw-empty-state__desc {
  color: var(--tnw-ink-500);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 28px;
}

.tnw-empty-state__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.tnw-empty-state__perks {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px dashed var(--tnw-ink-100);
}

.tnw-empty-state__perk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tnw-green-700);
}

.tnw-empty-state__perk svg { color: var(--tnw-green-600); flex-shrink: 0; }

/* ---------- Filled cart: hero ---------- */
.tnw-cart-page__hero {
  background: linear-gradient(135deg, var(--tnw-green-50) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--tnw-green-100);
  padding: 24px clamp(16px, 5vw, 48px);
  margin-block-end: 28px;
}

.tnw-cart-page__title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--tnw-ink-900);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 1200px;
}

.tnw-cart-page__title svg { color: var(--tnw-green-700); }

.tnw-cart-page__count {
  font-size: 13px;
  font-weight: 700;
  color: var(--tnw-green-700);
  background: var(--tnw-green-50);
  border: 1px solid var(--tnw-green-200);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* ---------- Cart grid ---------- */
.tnw-cart-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: 28px;
  align-items: start;
}

@media (max-width: 991px) {
  .tnw-cart-page__grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (min-width: 992px) {
  .tnw-cart-page__summary {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}

/* ---------- Cart items list ---------- */
.tnw-cart-items-card {
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  box-shadow: var(--tnw-shadow-sm);
  overflow: hidden;
}

.tnw-cart-row {
  display: grid;
  grid-template-columns: 88px 1fr auto auto auto 32px;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--tnw-ink-100);
}

.tnw-cart-row:last-child { border-bottom: 0; }

.tnw-cart-row__thumb {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: var(--tnw-radius-md);
  overflow: hidden;
  background: var(--tnw-ink-100);
  flex-shrink: 0;
}

.tnw-cart-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tnw-cart-row__info { min-width: 0; }

.tnw-cart-row__name {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tnw-ink-900);
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 4px;
  transition: color .15s;
}

.tnw-cart-row__name:hover { color: var(--tnw-green-700); }

.tnw-cart-row__meta {
  margin: 2px 0;
  font-size: 13px;
  color: var(--tnw-ink-500);
}

.tnw-cart-row__meta a { color: var(--tnw-green-700); font-weight: 600; }

.tnw-cart-row__stock {
  color: var(--tnw-danger);
  font-weight: 600;
  font-size: 12px;
  margin-inline-start: 6px;
}

.tnw-cart-row__price {
  font-size: 15px;
  font-weight: 600;
  color: var(--tnw-ink-700);
  white-space: nowrap;
  text-align: center;
}

.tnw-cart-row__price.sale { color: var(--tnw-danger); }
.tnw-cart-row__price.sale del { color: var(--tnw-ink-500); margin-inline-start: 6px; font-weight: 400; }

.tnw-cart-row__price-mobile { display: none; }

/* Quantity stepper */
.tnw-cart-row__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--tnw-ink-300);
  border-radius: var(--tnw-radius-sm);
  overflow: hidden;
  background: #fff;
  height: 40px;
}

.tnw-cart-row__qty button {
  width: 36px;
  background: transparent;
  border: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--tnw-ink-700);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.tnw-cart-row__qty button:hover {
  background: var(--tnw-green-50);
  color: var(--tnw-green-700);
}

.tnw-cart-row__qty input.form-control {
  width: 44px;
  border: 0;
  border-inline: 1.5px solid var(--tnw-ink-300);
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
  min-height: auto;
  border-radius: 0;
}

.tnw-cart-row__qty input::-webkit-outer-spin-button,
.tnw-cart-row__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.tnw-cart-row__qty input:focus {
  outline: none;
  background: var(--tnw-green-50);
  box-shadow: none;
}

.tnw-cart-row__line-total {
  font-size: 16px;
  font-weight: 800;
  color: var(--tnw-green-700);
  white-space: nowrap;
  text-align: end;
  min-width: 80px;
}

.tnw-cart-row__remove {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--tnw-ink-500);
  background: transparent;
  text-decoration: none;
  transition: all .15s;
}

.tnw-cart-row__remove:hover {
  background: #fee2e2;
  color: var(--tnw-danger);
}

@media (max-width: 768px) {
  .tnw-cart-row {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "thumb info  remove"
      "thumb info  remove"
      "qty   qty   total";
    row-gap: 12px;
  }
  .tnw-cart-row__thumb { grid-area: thumb; width: 72px; height: 72px; }
  .tnw-cart-row__info  { grid-area: info; }
  .tnw-cart-row__price { display: none; }
  .tnw-cart-row__price-mobile {
    display: block;
    font-size: 14px;
    color: var(--tnw-ink-700);
    font-weight: 600;
    margin-top: 6px;
  }
  .tnw-cart-row__qty       { grid-area: qty; justify-self: start; }
  .tnw-cart-row__line-total { grid-area: total; justify-self: end; align-self: center; }
  .tnw-cart-row__remove    { grid-area: remove; justify-self: end; }
}

/* ---------- Update row (under items list) ---------- */
.tnw-cart-page__update-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ---------- Summary card ---------- */
.tnw-summary-card {
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  box-shadow: var(--tnw-shadow-md);
  padding: 24px;
}

.tnw-summary-card__title {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--tnw-ink-900);
  padding-block-end: 12px;
  border-block-end: 2px solid var(--tnw-green-100);
}

.tnw-summary-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  color: var(--tnw-ink-700);
  font-size: 14.5px;
}

.tnw-summary-card__row--discount { color: var(--tnw-green-700); }
.tnw-summary-card__row--discount a {
  color: var(--tnw-danger);
  font-size: 12px;
  margin-inline-start: 6px;
  text-decoration: underline;
}

.tnw-summary-card__value { font-weight: 700; }

.tnw-summary-card__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 6px;
  border-block-start: 2px solid var(--tnw-green-100);
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
}

.tnw-summary-card__total strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--tnw-green-700);
}

.tnw-summary-card__note {
  font-size: 12px;
  color: var(--tnw-ink-500);
  text-align: end;
  margin: 0 0 18px;
}

/* ---------- Coupon card ---------- */
.tnw-coupon-card {
  background: var(--tnw-surface);
  border: 1.5px dashed var(--tnw-green-300);
  border-radius: var(--tnw-radius-md);
  padding: 16px;
  margin-top: 16px;
}

.tnw-coupon-card__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--tnw-green-700);
  margin-bottom: 10px;
}

.tnw-coupon-card__row {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.tnw-coupon-card__row input.form-control {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  border: 1.5px solid var(--tnw-ink-300);
  border-radius: var(--tnw-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}

.tnw-coupon-card__row input.form-control:focus {
  outline: none;
  border-color: var(--tnw-green-600);
  box-shadow: 0 0 0 3px var(--tnw-green-100);
}

.tnw-coupon-card__apply {
  flex: 0 0 auto;
  background: var(--tnw-ink-900);
  color: #fff;
  border: 0;
  padding: 0 22px;
  border-radius: var(--tnw-radius-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  transition: background .15s;
}

.tnw-coupon-card__apply:hover { background: var(--tnw-green-700); color: #fff; }

/* ---------- Cart perks (under summary) ---------- */
.tnw-cart-perks {
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-md);
  padding: 18px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tnw-cart-perks__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--tnw-ink-700);
  line-height: 1.5;
}

.tnw-cart-perks__item strong { color: var(--tnw-ink-900); font-weight: 700; }

.tnw-cart-perks__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--tnw-green-50);
  color: var(--tnw-green-700);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- Buttons (shared) ---------- */
.tnw-cart-page .tnw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--tnw-radius-md);
  padding: 12px 24px;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  transition: all .15s;
}

.tnw-cart-page .tnw-btn--sm { padding: 8px 16px; font-size: 13.5px; }
.tnw-cart-page .tnw-btn--block { width: 100%; min-height: 52px; font-size: 16px; margin-top: 8px; }

.tnw-cart-page .tnw-btn--primary {
  background: linear-gradient(135deg, var(--tnw-green-600) 0%, var(--tnw-green-700) 100%);
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(21, 128, 61, .35);
}
.tnw-cart-page .tnw-btn--primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  color: #fff;
  box-shadow: 0 10px 20px -4px rgba(21, 128, 61, .45);
}

.tnw-cart-page .tnw-btn--secondary {
  background: #fff;
  color: var(--tnw-green-700);
  border-color: var(--tnw-green-700);
}
.tnw-cart-page .tnw-btn--secondary:hover {
  background: var(--tnw-green-700);
  color: #fff;
  border-color: var(--tnw-green-700);
}

.tnw-cart-page .tnw-btn--ghost {
  background: transparent;
  color: var(--tnw-ink-700);
  border: 1.5px solid var(--tnw-ink-300);
}
.tnw-cart-page .tnw-btn--ghost:hover {
  border-color: var(--tnw-green-600);
  color: var(--tnw-green-700);
  background: var(--tnw-green-50);
}

/* Mirror chevron in RTL */
.tnw-cart-page[dir="rtl"] .tnw-btn svg { transform: scaleX(-1); }

/* ---------- Cross-sell section spacing ---------- */
.tnw-cart-page + .ps-section--cross-sell,
.tnw-cart-page .ps-section--cross-sell { margin-top: 48px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tnw-cart-page *,
  .tnw-cart-page *::before,
  .tnw-cart-page *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   tna W rna — Order Tracking (.tnw-track-page)
   Two states: form only, OR form + results (header, customer/shipping, items)
   ============================================================================ */

.tnw-track-page {
  --tnw-green-50:  #f0fdf4;
  --tnw-green-100: #dcfce7;
  --tnw-green-200: #bbf7d0;
  --tnw-green-300: #86efac;
  --tnw-green-600: #16a34a;
  --tnw-green-700: #15803d;
  --tnw-green-800: #166534;
  --tnw-ink-900:   #0f172a;
  --tnw-ink-700:   #334155;
  --tnw-ink-500:   #64748b;
  --tnw-ink-300:   #cbd5e1;
  --tnw-ink-100:   #f1f5f9;
  --tnw-surface:   #ffffff;
  --tnw-canvas:    #f8fafc;
  --tnw-danger:    #dc2626;
  --tnw-radius-sm: 8px;
  --tnw-radius-md: 12px;
  --tnw-radius-lg: 16px;
  --tnw-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --tnw-shadow-md: 0 8px 24px -8px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .04);
  --tnw-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tnw-font-ar:   'Cairo', 'Inter', system-ui, sans-serif;

  background: var(--tnw-canvas);
  color: var(--tnw-ink-900);
  font-family: var(--tnw-font-sans);
  min-height: 70vh;
  padding-block-end: 64px;
}

.tnw-track-page[dir="rtl"] { font-family: var(--tnw-font-ar); }

.tnw-track-page__container { max-width: 1080px; padding-inline: 16px; }

/* ---------- Hero ---------- */
.tnw-track-page__hero {
  background: linear-gradient(135deg, var(--tnw-green-50) 0%, #ffffff 60%);
  border-bottom: 1px solid var(--tnw-green-100);
  padding: 48px 16px 56px;
  text-align: center;
  margin-block-end: -28px;
}

.tnw-track-page__hero-inner { max-width: 640px; margin: 0 auto; }

.tnw-track-page__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  color: var(--tnw-green-700);
  box-shadow: 0 8px 20px -6px rgba(21, 128, 61, .25);
  border: 1px solid var(--tnw-green-200);
  margin-bottom: 18px;
}

.tnw-track-page__title {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--tnw-ink-900);
}

.tnw-track-page__subtitle {
  font-size: 15px;
  color: var(--tnw-ink-500);
  margin: 0;
  line-height: 1.6;
}

/* ---------- Form ---------- */
.tnw-track-form {
  position: relative;
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  box-shadow: var(--tnw-shadow-md);
  padding: 24px;
  max-width: 680px;
  margin: 0 auto;
}

.tnw-track-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 575px) {
  .tnw-track-form__row { grid-template-columns: 1fr; }
}

.tnw-track-form__field label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tnw-ink-700);
  margin-bottom: 6px;
}

.tnw-track-form__field label svg { color: var(--tnw-green-700); }

.tnw-track-form__field label sup { color: var(--tnw-danger); font-size: 14px; }

.tnw-track-form__field input.form-control {
  width: 100%;
  border: 1.5px solid var(--tnw-ink-300);
  border-radius: var(--tnw-radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  min-height: 48px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.tnw-track-form__field input.form-control:focus {
  outline: none;
  border-color: var(--tnw-green-600);
  box-shadow: 0 0 0 4px var(--tnw-green-100);
}

.tnw-track-form__error {
  display: block;
  color: var(--tnw-danger);
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
}

.tnw-track-form__submit {
  margin-top: 18px;
  width: 100%;
  background: linear-gradient(135deg, var(--tnw-green-600) 0%, var(--tnw-green-700) 100%);
  color: #fff;
  border: 0;
  border-radius: var(--tnw-radius-md);
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 20px -6px rgba(21, 128, 61, .4);
  transition: all .15s;
}

.tnw-track-form__submit:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -6px rgba(21, 128, 61, .5);
}

@media (max-width: 575px) {
  .tnw-track-form__field input.form-control { font-size: 16px; }
}

/* ---------- Not found ---------- */
.tnw-track-page__not-found {
  max-width: 680px;
  margin: 24px auto 0;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: var(--tnw-radius-md);
  padding: 24px;
  text-align: center;
}

.tnw-track-page__not-found svg { color: var(--tnw-danger); margin-bottom: 8px; }
.tnw-track-page__not-found h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.tnw-track-page__not-found p { margin: 0; font-size: 14px; color: #991b1b; }

/* ---------- Results section ---------- */
.tnw-track-results {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tnw-track-card {
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  box-shadow: var(--tnw-shadow-sm);
  padding: 24px;
}

.tnw-track-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--tnw-ink-900);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tnw-green-100);
}

.tnw-track-card__title svg { color: var(--tnw-green-700); }

/* Header card */
.tnw-track-card--header {
  background: linear-gradient(135deg, var(--tnw-green-50) 0%, #fff 60%);
  border-color: var(--tnw-green-200);
}

.tnw-track-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.tnw-track-card__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--tnw-ink-500);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tnw-track-card__order-code {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--tnw-green-700);
  font-family: var(--tnw-font-sans);
  letter-spacing: -.02em;
}

.tnw-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid;
}

.tnw-status-badge--info {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

.tnw-track-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--tnw-green-200);
}

.tnw-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--tnw-ink-700);
  font-weight: 600;
}

.tnw-meta-item svg { color: var(--tnw-green-700); flex-shrink: 0; }

.tnw-track-card__note {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--tnw-radius-sm);
  font-size: 13.5px;
  color: #92400e;
}

/* 2-col grid */
.tnw-track-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 767px) {
  .tnw-track-grid { grid-template-columns: 1fr; }
}

/* Info list (key/value) */
.tnw-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tnw-info-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--tnw-ink-100);
  font-size: 14px;
}

.tnw-info-list li:last-child { border-bottom: 0; }

.tnw-info-list span { color: var(--tnw-ink-500); flex-shrink: 0; }
.tnw-info-list strong { color: var(--tnw-ink-900); font-weight: 700; text-align: end; }
.tnw-info-list strong a { color: var(--tnw-green-700); text-decoration: underline; }

/* Items list */
.tnw-items-list { display: flex; flex-direction: column; gap: 12px; }

.tnw-track-item {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--tnw-canvas);
  border-radius: var(--tnw-radius-md);
}

.tnw-track-item__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--tnw-radius-sm);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tnw-ink-100);
}

.tnw-track-item__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.tnw-track-item__name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tnw-ink-900);
}

.tnw-track-item__name small {
  font-weight: 500; color: var(--tnw-ink-500); margin-inline-start: 6px; font-size: 12px;
}

.tnw-track-item__meta {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--tnw-ink-500);
}

.tnw-track-item__qty {
  font-size: 14px;
  font-weight: 700;
  color: var(--tnw-ink-700);
  padding: 4px 10px;
  background: #fff;
  border-radius: 999px;
  border: 1px solid var(--tnw-ink-100);
}

.tnw-track-item__total {
  font-size: 15px;
  font-weight: 800;
  color: var(--tnw-green-700);
  min-width: 90px;
  text-align: end;
}

@media (max-width: 575px) {
  .tnw-track-item {
    grid-template-columns: 56px 1fr;
    grid-template-areas: "thumb info" "thumb info" "qty total";
    row-gap: 6px;
  }
  .tnw-track-item__thumb { grid-area: thumb; width: 56px; height: 56px; }
  .tnw-track-item__info  { grid-area: info; }
  .tnw-track-item__qty   { grid-area: qty; justify-self: start; }
  .tnw-track-item__total { grid-area: total; justify-self: end; }
}

/* Totals */
.tnw-track-totals {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--tnw-ink-100);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tnw-track-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--tnw-ink-700);
  padding: 6px 0;
}

.tnw-track-totals__row strong { font-weight: 700; }
.tnw-track-totals__row--discount { color: var(--tnw-green-700); }

.tnw-track-totals__row--grand {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 2px solid var(--tnw-green-100);
  font-size: 17px;
  font-weight: 800;
}

.tnw-track-totals__row--grand strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--tnw-green-700);
}

@media (prefers-reduced-motion: reduce) {
  .tnw-track-page *,
  .tnw-track-page *::before,
  .tnw-track-page *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   tna W rna — Product detail (.tnw-product-page)
   Surgical brand layer on top of martfury structure: title, price, buttons,
   stock badge, tabs, sidebar features, related section.
   ============================================================================ */

.tnw-product-page {
  --tnw-green-50:  #f0fdf4;
  --tnw-green-100: #dcfce7;
  --tnw-green-200: #bbf7d0;
  --tnw-green-300: #86efac;
  --tnw-green-600: #16a34a;
  --tnw-green-700: #15803d;
  --tnw-green-800: #166534;
  --tnw-ink-900:   #0f172a;
  --tnw-ink-700:   #334155;
  --tnw-ink-500:   #64748b;
  --tnw-ink-300:   #cbd5e1;
  --tnw-ink-100:   #f1f5f9;
  --tnw-surface:   #ffffff;
  --tnw-canvas:    #f8fafc;
  --tnw-danger:    #dc2626;
  --tnw-radius-sm: 8px;
  --tnw-radius-md: 12px;
  --tnw-radius-lg: 16px;
  --tnw-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --tnw-shadow-md: 0 8px 24px -8px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .04);
  --tnw-font-sans: 'Inter', system-ui, sans-serif;
  --tnw-font-ar:   'Cairo', 'Inter', system-ui, sans-serif;
}

.tnw-product-page[dir="rtl"] { font-family: var(--tnw-font-ar); }

/* ---------- Product info column ---------- */
.tnw-product-info__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--tnw-ink-900);
  line-height: 1.3;
  margin: 0 0 12px;
}

.tnw-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--tnw-ink-500);
}

.tnw-product-meta__brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.tnw-product-meta__brand svg { color: var(--tnw-green-700); }
.tnw-product-meta__brand a { color: var(--tnw-green-700); font-weight: 700; }

.tnw-product-meta__rating a { color: var(--tnw-ink-700); font-size: 13px; }

/* Price */
.tnw-product-page .tnw-product-price {
  font-size: 30px;
  font-weight: 800;
  color: var(--tnw-green-700);
  margin: 0 0 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--tnw-green-50) 0%, #fff 80%);
  border-inline-start: 4px solid var(--tnw-green-600);
  border-radius: var(--tnw-radius-md);
  display: inline-block;
}

.tnw-product-page .tnw-product-price del {
  font-size: 18px;
  font-weight: 500;
  color: var(--tnw-ink-500);
  margin-inline-start: 8px;
}

/* Description block */
.tnw-product-desc {
  color: var(--tnw-ink-700);
  line-height: 1.7;
  margin-bottom: 18px;
}

.tnw-product-desc .ps-list--dot,
.tnw-product-desc p {
  font-size: 15px;
}

/* Stock badge */
.tnw-product-stock { margin: 12px 0 14px; }

.tnw-stock {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid;
}

.tnw-stock--in {
  background: var(--tnw-green-50);
  color: var(--tnw-green-700);
  border-color: var(--tnw-green-200);
}

.tnw-stock--out {
  background: #fef2f2;
  color: var(--tnw-danger);
  border-color: #fecaca;
}

/* Shopping row (qty + add to cart + actions) */
.tnw-product-shopping {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 14px 0 18px;
}

.tnw-product-shopping figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tnw-product-shopping figcaption {
  font-size: 13px;
  font-weight: 700;
  color: var(--tnw-ink-700);
}

/* Brand-styled qty stepper */
.tnw-product-page .tnw-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--tnw-ink-300);
  border-radius: var(--tnw-radius-sm);
  overflow: hidden;
  background: #fff;
  height: 50px;
}

.tnw-product-page .tnw-qty button {
  width: 40px;
  background: transparent;
  border: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--tnw-ink-700);
  cursor: pointer;
  transition: background .15s, color .15s;
  padding: 0;
}

.tnw-product-page .tnw-qty button:hover {
  background: var(--tnw-green-50);
  color: var(--tnw-green-700);
}

.tnw-product-page .tnw-qty input.qty-input {
  width: 56px;
  border: 0;
  border-inline: 1.5px solid var(--tnw-ink-300);
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
  min-height: auto;
  border-radius: 0;
}

.tnw-product-page .tnw-qty input::-webkit-outer-spin-button,
.tnw-product-page .tnw-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.tnw-product-page .tnw-qty input:focus { outline: none; box-shadow: none; }

/* Buttons (override martfury .ps-btn defaults inside our scope) */
.tnw-product-page .tnw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--tnw-radius-md);
  font-weight: 700;
  font-family: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  min-height: 50px;
  transition: all .15s;
}

.tnw-product-page .tnw-btn--primary {
  background: linear-gradient(135deg, var(--tnw-green-600) 0%, var(--tnw-green-700) 100%);
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(21, 128, 61, .35);
}
.tnw-product-page .tnw-btn--primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  color: #fff;
  box-shadow: 0 10px 20px -4px rgba(21, 128, 61, .45);
}

.tnw-product-page .tnw-btn--buy {
  background: var(--tnw-ink-900);
  color: #fff;
}
.tnw-product-page .tnw-btn--buy:hover { background: var(--tnw-green-700); color: #fff; }

/* Wishlist / Compare icons */
.tnw-product-actions { display: inline-flex; gap: 8px; align-items: center; }

.tnw-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--tnw-ink-100);
  color: var(--tnw-ink-700);
  text-decoration: none;
  transition: all .15s;
}

.tnw-icon-btn:hover {
  background: var(--tnw-green-50);
  color: var(--tnw-green-700);
  transform: translateY(-1px);
}

/* Spec rows (SKU/categories/tags) */
.tnw-product-spec {
  border-top: 1px dashed var(--tnw-ink-100);
  padding-top: 14px;
  margin-top: 14px;
}

.tnw-spec-row {
  margin: 4px 0;
  font-size: 13.5px;
  color: var(--tnw-ink-500);
}

.tnw-spec-row strong {
  color: var(--tnw-ink-700);
  font-weight: 700;
  margin-inline-end: 4px;
}

.tnw-spec-row a {
  color: var(--tnw-green-700);
  text-decoration: none;
  font-weight: 600;
}

.tnw-spec-row a:hover { text-decoration: underline; }

/* Sharing */
.tnw-product-sharing {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--tnw-ink-100);
  font-size: 13px;
  color: var(--tnw-ink-700);
  font-weight: 700;
}

/* ---------- Flash sale block ---------- */
.tnw-product-flash {
  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
  border: 1px solid #fde68a;
  border-radius: var(--tnw-radius-md);
  padding: 16px;
  margin: 16px 0;
}

.tnw-product-flash figcaption {
  font-weight: 700;
  color: #92400e;
  font-size: 14px;
  margin-bottom: 10px;
}

/* ---------- Tabs ---------- */
.tnw-product-page .tnw-product-tabs {
  margin-top: 40px;
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  padding: 24px;
  box-shadow: var(--tnw-shadow-sm);
}

.tnw-product-page .ps-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0 0 0;
  border-bottom: 2px solid var(--tnw-ink-100);
}

.tnw-product-page .ps-tab-list li { margin: 0; }

.tnw-product-page .ps-tab-list a {
  display: inline-block;
  padding: 12px 22px;
  color: var(--tnw-ink-500);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all .15s;
}

.tnw-product-page .ps-tab-list a:hover { color: var(--tnw-green-700); }

.tnw-product-page .ps-tab-list li.active a {
  color: var(--tnw-green-700);
  border-bottom-color: var(--tnw-green-600);
}

.tnw-product-page .ps-tab { padding-top: 8px; font-size: 14.5px; line-height: 1.7; color: var(--tnw-ink-700); }
.tnw-product-page .ps-tab .ck-content { color: var(--tnw-ink-700); }

/* ---------- Sidebar ---------- */
.tnw-product-page .ps-page__right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tnw-product-sidebar-card {
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  padding: 22px;
  box-shadow: var(--tnw-shadow-sm);
}

.tnw-product-sidebar-card__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--tnw-green-700);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--tnw-green-100);
  text-transform: uppercase;
}

.tnw-product-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tnw-product-sidebar-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: var(--tnw-ink-700);
  line-height: 1.5;
}

.tnw-product-sidebar-list strong { color: var(--tnw-ink-900); font-weight: 700; }

.tnw-product-sidebar-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tnw-green-50);
  color: var(--tnw-green-700);
  flex-shrink: 0;
}

.tnw-product-sidebar-card__contact {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--tnw-ink-100);
  text-align: center;
}

.tnw-product-sidebar-card__contact a {
  color: var(--tnw-green-700);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
}

.tnw-product-sidebar-card__contact a:hover { text-decoration: underline; }

.tnw-product-page .widget.widget_features { display: none; }

.tnw-product-video {
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  padding: 18px;
  box-shadow: var(--tnw-shadow-sm);
}

.tnw-product-video .widget-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--tnw-green-700);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- Related products section ---------- */
.tnw-related-section { margin-top: 48px; }
.tnw-related-section .ps-section__header h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--tnw-ink-900);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--tnw-green-200);
  display: inline-block;
}

/* ---------- Mobile polish ---------- */
@media (max-width: 575px) {
  .tnw-product-info__title { font-size: 22px; }
  .tnw-product-page .tnw-product-price { font-size: 24px; padding: 12px 14px; }
  .tnw-product-page .tnw-product-tabs { padding: 16px; }
  .tnw-product-page .ps-tab-list a { padding: 10px 14px; font-size: 13px; }
}

/* ============================================================================
   tna W rna — Shop / Products list (.tnw-shop-page)
   Light polish: toolbar, recommended section title, filter button
   ============================================================================ */

.tnw-shop-page {
  --tnw-green-50:  #f0fdf4;
  --tnw-green-100: #dcfce7;
  --tnw-green-200: #bbf7d0;
  --tnw-green-600: #16a34a;
  --tnw-green-700: #15803d;
  --tnw-ink-900:   #0f172a;
  --tnw-ink-700:   #334155;
  --tnw-ink-500:   #64748b;
  --tnw-ink-300:   #cbd5e1;
  --tnw-ink-100:   #f1f5f9;
  --tnw-surface:   #ffffff;
  --tnw-radius-sm: 8px;
  --tnw-radius-md: 12px;
}

.tnw-shop-page[dir="rtl"] { font-family: 'Cairo', 'Inter', system-ui, sans-serif; }

/* Recommended items section title */
.tnw-shop-page .tnw-recommended {
  margin-bottom: 32px;
  padding: 0 4px;
}

.tnw-shop-page .tnw-recommended .ps-block__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 3px solid var(--tnw-green-200);
}

.tnw-shop-page .tnw-recommended .ps-block__header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--tnw-ink-900);
}

.tnw-shop-page .tnw-recommended .ps-block__navigation { display: flex; gap: 6px; }

.tnw-shop-page .tnw-recommended .ps-carousel__prev,
.tnw-shop-page .tnw-recommended .ps-carousel__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tnw-green-50);
  color: var(--tnw-green-700);
  border: 1px solid var(--tnw-green-200);
  transition: all .15s;
  text-decoration: none;
}

.tnw-shop-page .tnw-recommended .ps-carousel__prev:hover,
.tnw-shop-page .tnw-recommended .ps-carousel__next:hover {
  background: var(--tnw-green-700);
  color: #fff;
  border-color: var(--tnw-green-700);
}

/* Toolbar (products found, sort, layout) */
.tnw-shop-page .tnw-shop-toolbar {
  background: linear-gradient(135deg, var(--tnw-green-50) 0%, #fff 100%) !important;
  border: 1px solid var(--tnw-green-100);
  border-radius: var(--tnw-radius-md);
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
}

.tnw-shop-page .products-found {
  font-size: 14.5px;
  color: var(--tnw-ink-700);
  font-weight: 500;
}

.tnw-shop-page .products-found strong {
  color: var(--tnw-green-700);
  font-size: 18px;
  font-weight: 800;
  margin-inline-end: 4px;
}

.tnw-shop-page #products-filter-sidebar {
  background: var(--tnw-green-700);
  color: #fff;
  border: 0;
  border-radius: var(--tnw-radius-sm);
  padding: 8px 16px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.tnw-shop-page #products-filter-sidebar:hover { background: var(--tnw-green-800, #166534); }

/* Layout toggle (grid/list) */
.tnw-shop-page .products-layout li a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tnw-ink-300);
  border-radius: var(--tnw-radius-sm);
  color: var(--tnw-ink-500);
  transition: all .15s;
}

.tnw-shop-page .products-layout li a:hover { color: var(--tnw-green-700); border-color: var(--tnw-green-300); }
.tnw-shop-page .products-layout li.active a { background: var(--tnw-green-700); color: #fff; border-color: var(--tnw-green-700); }

/* Filter sidebar title hover */
.tnw-shop-page .ps-filter__header h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--tnw-ink-900);
}

/* ============================================================================
   tna W rna — Shop / Products list (.tnw-shop-page)
   Light brand polish: toolbar "products found" pill, recommended header,
   filter sidebar headings. Keeps martfury grid/list JS intact.
   ============================================================================ */

.tnw-shop-page {
  --tnw-green-50:  #f0fdf4;
  --tnw-green-100: #dcfce7;
  --tnw-green-200: #bbf7d0;
  --tnw-green-600: #16a34a;
  --tnw-green-700: #15803d;
  --tnw-ink-900:   #0f172a;
  --tnw-ink-700:   #334155;
  --tnw-ink-500:   #64748b;
  --tnw-ink-100:   #f1f5f9;
  --tnw-radius-md: 12px;
}

/* Toolbar bar — give it brand surface instead of grey */
.tnw-shop-page .tnw-shop-toolbar.bg-light {
  background: linear-gradient(135deg, var(--tnw-green-50) 0%, #fff 70%) !important;
  border: 1px solid var(--tnw-green-100);
  border-radius: var(--tnw-radius-md);
}

.tnw-shop-page .products-found {
  font-size: 14px;
  color: var(--tnw-ink-700);
}

.tnw-shop-page .products-found strong {
  color: var(--tnw-green-700);
  font-weight: 800;
  font-size: 16px;
}

/* Recommended block header */
.tnw-shop-page .tnw-recommended .ps-block__header h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--tnw-ink-900);
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--tnw-green-200);
}

/* Filter sidebar widget titles → brand */
.tnw-shop-page .ps-layout__left .widget-title,
.tnw-shop-page .ps-layout__left h4,
.tnw-shop-page .ps-filter__header h3 {
  color: var(--tnw-ink-900) !important;
  font-weight: 800;
}

/* Grid/list view toggle active state */
.tnw-shop-page .products-layout li.active a { color: var(--tnw-green-700); }

/* Pagination active page → brand green */
.tnw-shop-page .ps-pagination .page-item.active .page-link,
.tnw-shop-page .ps-pagination .active > .page-link {
  background: var(--tnw-green-700) !important;
  border-color: var(--tnw-green-700) !important;
  color: #fff !important;
}

.tnw-shop-page .ps-pagination .page-link { color: var(--tnw-ink-700); }
.tnw-shop-page .ps-pagination .page-link:hover { color: var(--tnw-green-700); }

/* ============================================================================
   tna W rna — Auth pages (.tnw-auth-page)
   Split-screen: brand panel + form card. Stacks on mobile.
   ============================================================================ */

.tnw-auth-page {
  --tnw-green-50:  #f0fdf4;
  --tnw-green-100: #dcfce7;
  --tnw-green-200: #bbf7d0;
  --tnw-green-500: #22c55e;
  --tnw-green-600: #16a34a;
  --tnw-green-700: #15803d;
  --tnw-green-800: #166534;
  --tnw-ink-900:   #0f172a;
  --tnw-ink-700:   #334155;
  --tnw-ink-500:   #64748b;
  --tnw-ink-300:   #cbd5e1;
  --tnw-ink-100:   #f1f5f9;
  --tnw-surface:   #ffffff;
  --tnw-canvas:    #f8fafc;
  --tnw-danger:    #dc2626;
  --tnw-radius-sm: 8px;
  --tnw-radius-md: 12px;
  --tnw-radius-lg: 16px;
  --tnw-shadow-md: 0 8px 24px -8px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .04);
  --tnw-shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, .2);
  --tnw-font-sans: 'Inter', system-ui, sans-serif;
  --tnw-font-ar:   'Cairo', 'Inter', system-ui, sans-serif;

  background: var(--tnw-canvas);
  font-family: var(--tnw-font-sans);
  min-height: 70vh;
  padding: 24px 16px;
}

.tnw-auth-page[dir="rtl"] { font-family: var(--tnw-font-ar); }

.tnw-auth-page__grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  min-height: 580px;
}

@media (max-width: 767px) {
  .tnw-auth-page__grid { grid-template-columns: 1fr; }
  .tnw-auth-page__brand { display: none; }
}

/* Brand panel (LEFT) */
.tnw-auth-page__brand {
  background: linear-gradient(135deg, var(--tnw-green-700) 0%, var(--tnw-green-800) 100%);
  border-radius: var(--tnw-radius-lg);
  padding: 40px 32px;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.tnw-auth-page__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.12) 0, transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(34, 197, 94, .35) 0, transparent 50%);
  pointer-events: none;
}

.tnw-auth-page__brand-inner { position: relative; z-index: 1; max-width: 380px; }

.tnw-auth-page__logo {
  display: inline-flex;
  background: #fff;
  padding: 12px 16px;
  border-radius: var(--tnw-radius-md);
  margin-bottom: 28px;
}

.tnw-auth-page__hero-title {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.3;
  color: #fff;
}

.tnw-auth-page__hero-text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
  margin: 0 0 28px;
}

.tnw-auth-page__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tnw-auth-page__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}

.tnw-auth-page__perk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, .15);
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
}

/* Form panel (RIGHT) */
.tnw-auth-page__form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tnw-auth-card {
  background: var(--tnw-surface);
  border: 1px solid var(--tnw-ink-100);
  border-radius: var(--tnw-radius-lg);
  box-shadow: var(--tnw-shadow-lg);
  padding: 40px 32px;
  width: 100%;
  max-width: 480px;
}

.tnw-auth-card__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--tnw-ink-900);
  margin: 0 0 6px;
}

.tnw-auth-card__subtitle {
  color: var(--tnw-ink-500);
  font-size: 14.5px;
  margin: 0 0 28px;
}

/* Input styling — targets the auto-rendered form */
.tnw-auth-page .form-control,
.tnw-auth-page input.form-control,
.tnw-auth-page input[type="text"],
.tnw-auth-page input[type="email"],
.tnw-auth-page input[type="password"],
.tnw-auth-page input[type="tel"] {
  border: 1.5px solid var(--tnw-ink-300);
  border-radius: var(--tnw-radius-sm);
  padding: 12px 14px 12px 40px;
  font-size: 15px;
  font-family: inherit;
  min-height: 48px;
  width: 100%;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.tnw-auth-page[dir="rtl"] .form-control,
.tnw-auth-page[dir="rtl"] input.form-control {
  padding: 12px 40px 12px 14px;
}

.tnw-auth-page .form-control:focus {
  outline: none;
  border-color: var(--tnw-green-600);
  box-shadow: 0 0 0 4px var(--tnw-green-100);
}

.tnw-auth-page .form-group { margin-bottom: 16px; position: relative; }

.tnw-auth-page label,
.tnw-auth-page .control-label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tnw-ink-700);
  margin-bottom: 6px;
}

.tnw-auth-page label sup,
.tnw-auth-page .control-label sup { color: var(--tnw-danger); margin-inline-start: 2px; }

.tnw-auth-page .form-control.is-invalid,
.tnw-auth-page .form-control.error {
  border-color: var(--tnw-danger);
}

.tnw-auth-page .invalid-feedback,
.tnw-auth-page .text-danger {
  color: var(--tnw-danger);
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
  display: block;
}

/* Input with icon (the form renders icons inside fields) */
.tnw-auth-page .input-group-prepend,
.tnw-auth-page .input-group-text,
.tnw-auth-page .ps-form__icon {
  background: transparent;
  border: 0;
  color: var(--tnw-green-700);
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 14px;
  margin-top: 12px;
  z-index: 2;
}

/* Show/hide password toggle */
.tnw-auth-page .show-password,
.tnw-auth-page [data-show-password],
.tnw-auth-page .form-control + i.icon-eye {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 12px;
  color: var(--tnw-ink-500);
  cursor: pointer;
  z-index: 2;
}

/* Submit button */
.tnw-auth-page .tnw-auth-form__submit,
.tnw-auth-page .ps-btn--fullwidth {
  width: 100%;
  background: linear-gradient(135deg, var(--tnw-green-600) 0%, var(--tnw-green-700) 100%);
  color: #fff;
  border: 0;
  border-radius: var(--tnw-radius-md);
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 54px;
  box-shadow: 0 6px 16px -4px rgba(21, 128, 61, .4);
  transition: all .15s;
  margin-top: 8px;
}

.tnw-auth-page .tnw-auth-form__submit:hover,
.tnw-auth-page .ps-btn--fullwidth:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -4px rgba(21, 128, 61, .5);
  color: #fff;
}

/* Remember me + forgot link row */
.tnw-auth-page .row { display: flex; flex-wrap: wrap; align-items: center; margin: 12px 0; gap: 12px; }

.tnw-auth-page .col-6 { flex: 1 1 0; min-width: 0; }

.tnw-auth-page .tnw-checkbox,
.tnw-auth-page .ps-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tnw-auth-page .tnw-checkbox input,
.tnw-auth-page .ps-checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  min-height: auto;
  padding: 0;
  cursor: pointer;
  accent-color: var(--tnw-green-700);
}

.tnw-auth-page .tnw-checkbox label,
.tnw-auth-page .ps-checkbox label {
  margin: 0;
  font-weight: 500;
  color: var(--tnw-ink-700);
  cursor: pointer;
}

/* Forgot password / Register links */
.tnw-auth-page a {
  color: var(--tnw-green-700);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}

.tnw-auth-page a:hover { color: var(--tnw-green-800); text-decoration: underline; }

/* Social login buttons (if present) */
.tnw-auth-page .ps-social-login,
.tnw-auth-page .social-login {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--tnw-ink-100);
}

/* Mobile: bigger inputs to avoid iOS zoom */
@media (max-width: 575px) {
  .tnw-auth-page .form-control { font-size: 16px; }
  .tnw-auth-card { padding: 28px 22px; }
  .tnw-auth-card__title { font-size: 22px; }
}

/* ---------- Auth page: hide form's auto-rendered inner header ---------- */
/* The form renders its own .auth-card__header (with icon + title +
   description). We already provide brand title + subtitle, so hide the
   inner one to avoid duplication. */
.tnw-auth-card .auth-card__header { display: none !important; }
.tnw-auth-card .auth-card__body { padding: 0 !important; }
.tnw-auth-card .auth-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Also tighten any auto-rendered card containers inside our card */
.tnw-auth-card .card,
.tnw-auth-card .card-body {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* ---------- Auth page: defeat .ps-my-account's flex-row default ---------- */
/* martfury's .ps-my-account sets display:flex which collapses our card's
   children into a row. Force block flow so the title + subtitle + form stack. */
.tnw-auth-page .tnw-auth-card.ps-my-account {
  display: block !important;
  flex-direction: initial !important;
}

.tnw-auth-card > * { width: 100%; }

/* ============================================================================
   tna W rna — FIXES (2026-05-30)
   1) Quantity stepper: martfury positions .up/.down absolutely (overlapping the
      input → cramped). Force them static so our flex stepper renders cleanly.
   2) Product cards: 2-line titles pushed price down and broke row alignment.
      Clamp title to 2 lines + equal-height flex columns + price pinned bottom.
   ============================================================================ */

/* ---------- 1) Quantity stepper (product detail + cart) ---------- */
.tnw-product-page .tnw-qty,
.tnw-cart-page .tnw-cart-row__qty {
  position: relative;
}

.tnw-product-page .tnw-qty button.up,
.tnw-product-page .tnw-qty button.down,
.tnw-cart-page .tnw-cart-row__qty button.up,
.tnw-cart-page .tnw-cart-row__qty button.down {
  position: static !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  inset: auto !important;
  max-width: none !important;
  height: auto !important;
  align-self: stretch;
  line-height: 1 !important;
}

.tnw-product-page .tnw-qty button.up,
.tnw-product-page .tnw-qty button.down {
  width: 44px !important;
}

.tnw-cart-page .tnw-cart-row__qty button.up,
.tnw-cart-page .tnw-cart-row__qty button.down {
  width: 36px !important;
}

/* Kill martfury's pill radius / huge side padding on the qty input */
.tnw-product-page .tnw-qty input.qty-input,
.tnw-cart-page .tnw-cart-row__qty input.qty-input {
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto !important;
  align-self: stretch;
}

/* ---------- 2) Equal-height product cards (listing + carousels) ---------- */
/* Applies on pages where tnw-checkout.css loads (shop, product, cart cross-sell)
   — exactly where the misalignment was reported. Detail-page H1 uses
   .tnw-product-info__title so it is unaffected by the title clamp below. */
.tnw-shop-page .ps-product,
.tnw-product-page .ps-product,
.tnw-cart-page .ps-product {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

.tnw-shop-page .ps-product__container,
.tnw-product-page .ps-product__container,
.tnw-cart-page .ps-product__container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.tnw-shop-page .ps-product__content,
.tnw-product-page .ps-product__content,
.tnw-cart-page .ps-product__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Title → always reserve 2 lines so every card's price baseline aligns */
.tnw-shop-page .ps-product .ps-product__title,
.tnw-product-page .ps-product .ps-product__title,
.tnw-cart-page .ps-product .ps-product__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  line-height: 1.35;
  margin-bottom: 6px;
}

/* Pin price to the bottom of the card so all prices sit on one line */
.tnw-shop-page .ps-product .ps-product__price,
.tnw-product-page .ps-product .ps-product__price,
.tnw-cart-page .ps-product .ps-product__price {
  margin-top: auto;
  margin-bottom: 0;
}

/* Make owl carousel items stretch to equal height (so the card height:100% works) */
.tnw-shop-page .owl-slider .owl-stage,
.tnw-product-page .owl-slider .owl-stage,
.tnw-cart-page .owl-slider .owl-stage {
  display: flex;
}

.tnw-shop-page .owl-slider .owl-item,
.tnw-product-page .owl-slider .owl-item,
.tnw-cart-page .owl-slider .owl-item {
  display: flex;
  height: auto;
}

.tnw-shop-page .owl-slider .owl-item > .ps-product,
.tnw-product-page .owl-slider .owl-item > .ps-product,
.tnw-cart-page .owl-slider .owl-item > .ps-product {
  width: 100%;
}

/* Bootstrap grid rows: make columns equal height too */
.tnw-shop-page .ps-shopping-product .row { align-items: stretch; }
.tnw-shop-page .ps-shopping-product .row > [class*="col-"] { display: flex; }
.tnw-shop-page .ps-shopping-product .row > [class*="col-"] > .ps-product { width: 100%; }

/* ---------- Auth page: contain form overflow within the card ---------- */
.tnw-auth-card {
  overflow: hidden;          /* fallback */
  contain: layout style;
}

.tnw-auth-card form,
.tnw-auth-card form * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Bootstrap .row inside form leaks via negative margins — neutralize them */
.tnw-auth-card form .row,
.tnw-auth-card .row {
  margin-inline: 0 !important;
  display: flex;
  flex-wrap: wrap;
}

.tnw-auth-card form [class*="col-"],
.tnw-auth-card [class*="col-"] {
  padding-inline: 4px !important;
}

/* Force form's own width to match the parent card */
.tnw-auth-card form { width: 100% !important; max-width: 100% !important; }

/* ---------- Auth page: force the rendered form to fit inside the card ---------- */
/* The form's own CSS (.ps-form--account) sets a fixed width and flex that
   makes it overflow our card. Constrain it absolutely. */
.tnw-auth-card form,
.tnw-auth-card form.ps-form--account,
.tnw-auth-page form.tnw-auth-form {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.tnw-auth-card form > *,
.tnw-auth-card form .form-group {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Force any auto-flex inside the form to stack */
.tnw-auth-card .row { display: flex; flex-wrap: wrap; }
.tnw-auth-card .row > [class^="col-"] { flex: 1 1 auto; min-width: 0; }

/* ============================================================================
   Auth pages — final polish (fix tall brand panel + form whitespace)
   ============================================================================ */

/* Make grid only as tall as content + balance heights */
.tnw-auth-page__grid {
  min-height: auto !important;
  align-items: stretch;
}

/* Brand panel: distribute content vertically when panel is tall */
.tnw-auth-page__brand {
  padding: 36px 32px !important;
  align-items: center !important;
}

.tnw-auth-page__brand-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-block: 20px !important;
}

/* Logo pinned to TOP of green panel */
.tnw-auth-page__logo {
  align-self: flex-start;
  margin: 0 !important;
  padding: 10px 14px !important;
  flex-shrink: 0;
}

.tnw-auth-page__logo img { max-height: 44px !important; }

/* Title + description sit just under the logo, with breathing room */
.tnw-auth-page__hero-title {
  margin: 16px 0 0 !important;
  font-size: 24px !important;
}
.tnw-auth-page__hero-text {
  margin: 0 !important;
  font-size: 14.5px !important;
}

/* Perks pinned to BOTTOM of green panel — `margin-top: auto` absorbs leftover space */
.tnw-auth-page__perks {
  gap: 12px !important;
  margin-top: auto !important;
  padding-top: 24px !important;
}

.tnw-auth-page__perks li { font-size: 13.5px !important; }

/* Form card: tighter padding + remove whitespace above form */
.tnw-auth-card {
  padding: 28px 28px !important;
}

.tnw-auth-card__title {
  font-size: 22px !important;
  margin: 0 0 4px !important;
}

.tnw-auth-card__subtitle {
  margin: 0 0 18px !important;
}

/* Kill any inherited margin from auto-rendered form root that creates a gap */
.tnw-auth-card form,
.tnw-auth-card form.ps-form--account {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.tnw-auth-card form > *:first-child { margin-top: 0 !important; }

/* Form fields: compact spacing */
.tnw-auth-card .form-group {
  margin-bottom: 12px !important;
}

.tnw-auth-card label,
.tnw-auth-card .control-label {
  margin-bottom: 4px !important;
  font-size: 13px !important;
}

.tnw-auth-card .form-control,
.tnw-auth-card input.form-control {
  min-height: 44px !important;
  padding: 10px 12px 10px 36px !important;
}

.tnw-auth-card[dir="rtl"] .form-control,
.tnw-auth-page[dir="rtl"] .tnw-auth-card .form-control {
  padding: 10px 36px 10px 12px !important;
}

/* Submit button: smaller + tighter */
.tnw-auth-page .tnw-auth-form__submit,
.tnw-auth-page .ps-btn--fullwidth {
  min-height: 48px !important;
  padding: 12px 22px !important;
  font-size: 15px !important;
  margin-top: 6px !important;
}

/* Mobile tightening */
@media (max-width: 575px) {
  .tnw-auth-card { padding: 22px 18px !important; }
  .tnw-auth-page__brand { padding: 28px 22px !important; }
  .tnw-auth-page__hero-title { font-size: 20px !important; }
}

/* =====================================================================
   FIX: Override Botble's danger-colored checkout button → brand green
   ===================================================================== */
.tnw-checkout-page .payment-checkout-btn,
.tnw-checkout-page button.payment-checkout-btn,
.tnw-checkout-page .btn.payment-checkout-btn {
  background: linear-gradient(180deg, var(--tnw-green-700) 0%, var(--tnw-green-800) 100%) !important;
  color: #ffffff !important;
  border: 1px solid var(--tnw-green-700) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px 36px !important;
  border-radius: var(--tnw-radius-md) !important;
  min-width: 220px !important;
  box-shadow: 0 10px 24px -8px rgba(21, 128, 61, 0.45) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.tnw-checkout-page .payment-checkout-btn:hover {
  background: var(--tnw-green-800) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(21, 128, 61, 0.55) !important;
}
.tnw-checkout-page .payment-checkout-btn:disabled,
.tnw-checkout-page .payment-checkout-btn.disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.tnw-checkout-page .payment-checkout-btn .fa,
.tnw-checkout-page .payment-checkout-btn i,
.tnw-checkout-page .payment-checkout-btn svg {
  color: #ffffff !important;
  fill: currentColor !important;
}
/* Defeat Bootstrap's text-danger/btn-outline-danger on the button */
.tnw-checkout-page .btn-outline-danger.payment-checkout-btn,
.tnw-checkout-page .text-danger.payment-checkout-btn {
  color: #ffffff !important;
  border-color: var(--tnw-green-700) !important;
}

/* Auth pages: cross-link footer (login ↔ register) */
.tnw-auth-card__crosslink {
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid #e5e7eb !important;
  text-align: center !important;
  font-size: 14px !important;
  color: var(--tnw-ink-500) !important;
  margin-bottom: 0 !important;
}
.tnw-auth-card__crosslink a {
  color: var(--tnw-green-700) !important;
  font-weight: 600 !important;
  margin-inline-start: 6px !important;
  text-decoration: underline !important;
}
.tnw-auth-card__crosslink a:hover {
  color: var(--tnw-green-800) !important;
}

/* =====================================================================
   FIX: Botble auth form renders inside a free-floating .col-xl-6 with
   no .row wrapper → it expands to 1198px and overflows the panel.
   Force every level of the rendered form to honor the parent width.
   ===================================================================== */
/* Catch the FULL ancestor chain that Botble renders:
   container > row > col > auth-card > auth-card__body > form > mb-3 > position-relative > input
   Every level must shrink to the parent panel width (480px), not Bootstrap defaults (1230px). */
.tnw-auth-card .container,
.tnw-auth-card .container-fluid,
.tnw-auth-card .row,
.tnw-auth-card .row.justify-content-center,
.tnw-auth-card [class*="col-"],
.tnw-auth-card .col-xl-6,
.tnw-auth-card .col-lg-8,
.tnw-auth-card .auth-card,
.tnw-auth-card .auth-card.card,
.tnw-auth-card .auth-card__body,
.tnw-auth-card .auth-card__footer,
.tnw-auth-card form.tnw-auth-form,
.tnw-auth-card form.tnw-auth-form > [class*="col-"],
.tnw-auth-card form.tnw-auth-form > .row,
.tnw-auth-card form.tnw-auth-form > .row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
}
/* Force block flow inside form area (defeat Bootstrap row=flex which can break wrapping) */
.tnw-auth-card .container,
.tnw-auth-card .row,
.tnw-auth-card .auth-card,
.tnw-auth-card .auth-card__body,
.tnw-auth-card form.tnw-auth-form { display: block !important; }
/* Kill spacing that adds unwanted whitespace */
.tnw-auth-card .py-5 { padding-top: 0 !important; padding-bottom: 0 !important; }
.tnw-auth-card .mt-40, .tnw-auth-card .mb-40 { margin: 0 !important; }

/* Each field group — proper card-like spacing inside the form */
.tnw-auth-card .mb-3,
.tnw-auth-card .form-group {
  margin-bottom: 16px !important;
}
/* The input itself: clear visible card-like box, brand-tinted focus */
.tnw-auth-card .form-control,
.tnw-auth-card input.form-control,
.tnw-auth-card textarea.form-control {
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  padding: 10px 14px 10px 40px !important;  /* RTL: icon on left */
  font-size: 14.5px !important;
  color: var(--tnw-ink-900) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.tnw-auth-card textarea.form-control { height: auto !important; min-height: 110px !important; }
.tnw-auth-card .form-control:focus,
.tnw-auth-card input.form-control:focus {
  border-color: var(--tnw-green-700) !important;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15) !important;
  outline: none !important;
}
.tnw-auth-card label,
.tnw-auth-card .form-label {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--tnw-ink-900) !important;
}