/* ==========================================================================
   Neila Beauty Store — Cart & totals (v2)
   Shipping methods as selectable radio-cards on the CLASSIC cart/checkout.
   WooCommerce's own AJAX recomputes Shipping + Total on selection.
   ========================================================================== */

/* ---- Added-to-cart success banner ---------------------------------------- */
.woocommerce-message {
  background: var(--nbs-success-bg);
  color: var(--nbs-success-text);
  border: none;
  border-radius: 12px;
  font-weight: 500;
}
.woocommerce-message::before { color: var(--nbs-success-dot); }
.woocommerce-message .button {
  background: transparent;
  color: var(--nbs-success-text);
  font-weight: 700;
  padding-right: 0;
}

/* ---- Line items card ------------------------------------------------------- */
.woocommerce table.shop_table {
  background: #fff;
  border: 1px solid var(--nbs-card-border);
  border-radius: var(--nbs-radius);
  border-collapse: separate;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  font-family: var(--nbs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nbs-muted);
  border-bottom: 1px solid var(--nbs-sand);
  padding: 18px 22px;
}
.woocommerce table.shop_table td {
  border-top: 1px solid var(--nbs-img-hairline);
  padding: 24px 22px;
}

.woocommerce-cart table.cart th:first-child,
.woocommerce-cart table.cart td:first-child {
  padding-left: 28px;
}

.woocommerce-cart table.cart th:last-child,
.woocommerce-cart table.cart td:last-child {
  padding-right: 28px;
}

.woocommerce-cart table.cart img {
  width: 64px;
  border: 1px solid var(--nbs-card-border);
  border-radius: 10px;
  background: #fff;
}
.woocommerce-cart table.cart td.product-name a {
  color: var(--nbs-ink);
  font-weight: 600;
}
.woocommerce-cart table.cart td.product-name a:hover { color: var(--nbs-orange); }

.woocommerce a.remove {
  color: var(--nbs-caption) !important;
  font-weight: 400;
}
.woocommerce a.remove:hover {
  background: transparent !important;
  color: var(--nbs-orange) !important;
}

.woocommerce-cart .coupon,
.woocommerce-cart [name="coupon_code"],
.woocommerce-cart [name="apply_coupon"] {
  display: none !important;
}

.woocommerce-cart table.shop_table td.actions {
  display: none !important;
}

.woocommerce-cart .woocommerce-shipping-calculator,
.woocommerce-cart .woocommerce-shipping-destination {
  display: none !important;
}

/* ---- Cart totals card -------------------------------------------------------- */
.cart_totals {
  background: #fff;
  border: 1px solid var(--nbs-card-border);
  border-radius: var(--nbs-radius);
  padding: 22px;
}
.cart_totals h2 { font-size: 24px; margin-bottom: 12px; }
.cart_totals table.shop_table { border: none; }

.cart_totals .order-total .amount,
.woocommerce-checkout-review-order-table .order-total .amount {
  font-family: var(--nbs-font-head);
  font-size: 24px;
  color: var(--nbs-ink);
}

/* ---- Shipping radio-cards ------------------------------------------------------
   ul#shipping_method → each li becomes a card; the checked card gets the
   orange border + warm fill via :has(). ------------------------------------- */
ul#shipping_method {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 6px 0;
  padding: 0;
}
ul#shipping_method li {
  margin: 0;
  padding: 0;
}
ul#shipping_method li label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  cursor: pointer;
  background: #fff;
  border: 1.5px solid var(--nbs-sand);
  border-radius: 13px;
  padding: 13px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--nbs-ink);
  transition: border-color .15s, background-color .15s;
  margin: 0;
}
ul#shipping_method li label:hover { border-color: var(--nbs-orange-soft); }

ul#shipping_method li input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  border: 1.5px solid var(--nbs-sand);
  border-radius: 50%;
  background: #fff;
  display: inline-grid;
  place-content: center;
  transition: border-color .15s;
}
ul#shipping_method li input[type="radio"]::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--nbs-orange);
  transform: scale(0);
  transition: transform .12s;
}
ul#shipping_method li input[type="radio"]:checked::before { transform: scale(1); }
ul#shipping_method li input[type="radio"]:checked { border-color: var(--nbs-orange); }

/* Selected card */
ul#shipping_method li:has(input:checked) label,
ul#shipping_method li label:has(input:checked) {
  border-color: var(--nbs-orange);
  background: var(--nbs-tint-hover);
}

/* method price inside the label */
ul#shipping_method li label .amount {
  margin-left: auto;
  font-family: var(--nbs-font-head);
  color: var(--nbs-ink);
  font-weight: 400;
}

ul#shipping_method li label .nbs-ship-main {
  line-height: 1.45;
}

@media (max-width: 520px) {
  ul#shipping_method li label {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  ul#shipping_method li label .amount {
    margin-left: 30px;
  }
}

.woocommerce-shipping-destination { font-size: 13px; color: var(--nbs-muted); }
.woocommerce-shipping-calculator .shipping-calculator-button { color: var(--nbs-orange); font-weight: 600; }

/* ---- Proceed / place order buttons ------------------------------------------- */
.wc-proceed-to-checkout .checkout-button,
#place_order {
  width: 100%;
  background: var(--nbs-orange) !important;
  border-radius: var(--nbs-radius-pill) !important;
  font-size: 15px !important;
  padding: 16px 24px !important;
}
.wc-proceed-to-checkout .checkout-button:hover,
#place_order:hover { background: var(--nbs-orange-hover) !important; }

/* ---- Checkout form fields (classic) -------------------------------------------- */
.woocommerce-checkout .woocommerce form .form-row input.input-text,
.woocommerce-checkout .woocommerce form .form-row select,
.woocommerce-cart .woocommerce form .form-row input.input-text {
  background: #fff;
  border: 1px solid var(--nbs-sand);
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 15px;   /* ≥15px prevents iOS zoom-on-focus */
  color: var(--nbs-ink);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--nbs-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(226, 112, 26, .12);
}

.woocommerce-checkout .nbs-field-invalid {
  border-color: #c43d2b !important;
  box-shadow: 0 0 0 3px rgba(196, 61, 43, .12) !important;
}

.woocommerce-checkout .nbs-field-validation {
  display: block;
  margin-top: 6px;
  color: #9f2f23;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

/* Mobile cart rows: square product well with a wider, calmer detail column. */
@media (max-width: 520px) {
  /* Let the product card reach the page hairline, without touching the screen edge. */
  .woocommerce-cart .woocommerce-cart-form {
    margin-inline: -14px;
  }

  .woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name remove"
      "thumb quantity subtotal";
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
    padding: 16px;
  }

  .woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item > td {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
  }

  .woocommerce-cart table.cart td.product-thumbnail {
    grid-area: thumb;
    align-self: center;
  }

  .woocommerce-cart table.cart td.product-thumbnail img {
    display: block;
    width: 58px;
    height: 58px;
    max-width: none;
    object-fit: contain;
  }

  .woocommerce-cart table.cart td.product-name {
    grid-area: name;
  }

  .woocommerce-cart table.cart td.product-name a {
    display: block;
    font-size: 12.5px;
    line-height: 1.35;
  }

  .woocommerce-cart table.cart td.product-quantity {
    grid-area: quantity;
  }

  .woocommerce-cart table.cart td.product-subtotal {
    grid-area: subtotal;
    justify-self: end;
    white-space: nowrap;
  }

  .woocommerce-cart table.cart td.product-remove {
    grid-area: remove;
    justify-self: end;
    align-self: start;
  }

  .woocommerce-cart table.cart td.product-price {
    display: none;
  }
}