/* ========================================
   WooCommerce Cart Page Styles
   MoCA | NFS Underground 2 Inspired
   ======================================== */

/* =====================================================================
   ⬇ WOOCOMMERCE CART *BLOCK* (Gutenberg) ⬇
   The live /koszyk page is rendered by the Cart BLOCK, whose DOM uses
   .wc-block-* / .wc-block-components-* classes — NOT the classic
   .cart_totals / .woocommerce-cart-form markup the rules further below
   target. Those classic rules never matched, which is why the cart kept
   the default look. The block rules below are the ones that actually
   skin the page. A few contrast-critical props use !important because
   WooCommerce ships component CSS of equal specificity.
   ===================================================================== */

.wp-block-woocommerce-cart,
.wc-block-cart {
  color: var(--ca-white);
  --wc-input-border-color: var(--ca-elevated);
}

.wc-block-cart {
  max-width: var(--ca-max-width);
  margin: 40px auto;
}

/* native control accents (radios/checkboxes/spinners) */
.wc-block-cart input { accent-color: var(--ca-pink); }

/* ---- Items column ----
   NOTE: backgrounds/borders need !important — WooCommerce's block CSS
   loads after this file and wins the cascade otherwise (that's why the
   first pass left the items area and the PRODUKT/ŁĄCZNIE bar default). */
.wc-block-cart-items,
table.wc-block-cart-items,
.wc-block-cart .wc-block-cart-items {
  background: var(--ca-mid) !important;
  border: 1px solid var(--ca-elevated) !important;
  border-radius: var(--ca-radius) !important;
  /* The header looked "double" because the default border-spacing let the
     table's --ca-mid background show between the --ca-elevated header cells.
     Collapse the spacing (keep separate model so border-radius still works). */
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
}

.wc-block-cart-items__header,
thead.wc-block-cart-items__header,
.wc-block-cart-items__header th,
.wc-block-cart .wc-block-cart-items__header {
  background: var(--ca-elevated) !important;
  color: var(--ca-gray) !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 12px;
  font-weight: 700;
  border: none !important;
  border-radius: 0 !important;
}
/* breathing room so "Produkt" isn't glued to the left edge */
.wc-block-cart-items__header th {
  padding: 12px 16px !important;
}

.wc-block-cart-items__row,
.wc-block-cart-items__row td,
.wc-block-cart .wc-block-cart-items__row {
  border-bottom: 1px solid var(--ca-elevated) !important;
  background: transparent !important;
}

/* "Podwójna kwota": each row carries a per-unit price (in the product cell,
   .wc-block-cart-item__prices) AND a line total (.wc-block-cart-item__total).
   For qty 1 they're identical and read as a duplicate — hide the per-unit one,
   keep the line total in the ŁĄCZNIE column. */
.wc-block-cart-item__prices {
  display: none !important;
}

.wc-block-cart-item__image img {
  border-radius: 6px;
  background: var(--ca-deep);
  border: 1px solid var(--ca-elevated);
}

.wc-block-components-product-name {
  color: var(--ca-white) !important;
  font-weight: 600;
  text-decoration: none;
}
.wc-block-components-product-name:hover {
  color: var(--ca-pink) !important;
}

.wc-block-cart .wc-block-components-product-metadata,
.wc-block-cart .wc-block-components-product-details,
.wc-block-cart .wc-block-components-product-details__name,
.wc-block-cart .wc-block-components-product-details__value {
  color: var(--ca-gray);
  font-size: 13px;
}

.wc-block-components-product-price,
.wc-block-components-product-price__value {
  color: var(--ca-pink);
  font-weight: 700;
}

/* Quantity stepper */
.wc-block-components-quantity-selector {
  border: 1px solid var(--ca-elevated) !important;
  border-radius: 6px;
  background: var(--ca-deep);
}
.wc-block-components-quantity-selector__input {
  color: var(--ca-white) !important;
  background: transparent !important;
}
.wc-block-components-quantity-selector__button {
  color: var(--ca-gray) !important;
}
.wc-block-components-quantity-selector__button:hover {
  color: var(--ca-pink) !important;
}

/* Remove link */
.wc-block-cart-item__remove-link {
  color: var(--ca-gray) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wc-block-cart-item__remove-link:hover {
  color: #ff4d6a !important;
}

/* ---- Sidebar / totals card ---- */
.wc-block-components-sidebar,
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-sidebar {
  background: var(--ca-mid) !important;
  border: 1px solid var(--ca-elevated) !important;
  border-radius: var(--ca-radius) !important;
  padding: 24px !important;
}
.wc-block-cart__sidebar .wc-block-components-sidebar {
  position: sticky;
  top: 80px;
}

.wc-block-cart__totals-title,
.wc-block-cart .wc-block-components-title {
  color: var(--ca-gray) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
  font-weight: 700;
}

.wc-block-components-totals-item {
  color: var(--ca-white);
}
.wc-block-components-totals-item__label {
  color: var(--ca-gray);
}
.wc-block-components-totals-item__value {
  color: var(--ca-white);
  font-weight: 600;
}
.wc-block-components-totals-item__description {
  color: var(--ca-gray);
}

/* Estimated / final total row */
.wc-block-components-totals-footer-item {
  border-top: 2px solid var(--ca-pink);
  margin-top: 8px;
  padding-top: 16px;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
  color: var(--ca-pink) !important;
  font-size: 20px;
  font-weight: 700;
}

/* Dividers between total groups */
.wc-block-cart .wc-block-components-totals-wrapper {
  border-color: var(--ca-elevated);
}

/* Coupon collapsible ("Dodaj kupony") */
.wc-block-components-panel__button,
.wc-block-components-totals-coupon__button {
  color: var(--ca-white) !important;
}
.wc-block-components-panel__button:hover {
  color: var(--ca-pink) !important;
}
.wc-block-components-totals-coupon__input .wc-block-components-text-input input,
.wc-block-components-totals-coupon input[type="text"] {
  background: var(--ca-deep) !important;
  color: var(--ca-white) !important;
  border-color: var(--ca-elevated) !important;
}

/* Free-shipping / discount values */
.wc-block-components-totals-discount__coupon-list,
.wc-block-cart .wc-block-components-totals-item--free,
.wc-block-cart__totals-final--free {
  color: #4ade80;
}

/* ---- Proceed to checkout button ---- */
.wc-block-cart__submit-button,
.wc-block-cart .wc-block-cart__submit-container .wc-block-components-button,
.wc-block-cart .wc-block-components-button.contained {
  background: var(--ca-pink) !important;
  color: #000 !important;
  border: 2px solid var(--ca-pink) !important;
  border-radius: var(--ca-radius) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--ca-transition);
}
.wc-block-cart__submit-button:hover,
.wc-block-cart .wc-block-components-button.contained:hover {
  background: var(--ca-violet-light) !important;
  border-color: var(--ca-violet-light) !important;
  box-shadow: 0 0 20px rgba(255, 0, 132, 0.4);
  transform: translateY(-2px);
}

/* Generic links inside the cart block */
.wc-block-cart a:not(.wc-block-components-product-name):not(.wc-block-components-button) {
  color: var(--ca-pink);
}

/* Empty cart block */
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block h2 {
  color: var(--ca-white) !important;
}

/* Responsive: stack & unstick on tablet */
@media (max-width: 768px) {
  .wc-block-cart .wc-block-cart__sidebar .wc-block-components-sidebar {
    position: relative;
    top: auto;
  }
}

/* ===================================================================== */

/* ========================================
   Cart Container
   ======================================== */

.ca-cart,
.woocommerce.cart {
  background-color: var(--ca-black);
  padding: 40px 20px;
  min-height: 100vh;
}

.ca-cart__wrapper {
  max-width: var(--ca-max-width);
  margin: 0 auto;
}

.ca-cart__title {
  font-size: 42px;
  font-weight: 700;
  color: var(--ca-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 30px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ca-cart__title::before {
  content: "";
  display: block;
  width: 4px;
  height: 40px;
  background: linear-gradient(180deg, var(--ca-pink) 0%, transparent 100%);
  border-radius: 2px;
}

/* ========================================
   Empty Cart State
   ======================================== */

.ca-cart__empty,
.woocommerce.cart .cart-empty {
  text-align: center;
  padding: 80px 40px;
  background-color: var(--ca-mid);
  border: 1px dashed var(--ca-elevated);
  border-radius: var(--ca-radius);
  margin: 30px 0;
}

.ca-cart__empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.6;
}

.ca-cart__empty-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--ca-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.ca-cart__empty-description {
  color: var(--ca-gray);
  font-size: 14px;
  margin-bottom: 30px;
  line-height: 1.6;
}

.ca-cart__empty-action {
  display: inline-block;
  padding: 12px 28px;
  background-color: var(--ca-pink);
  color: #000;
  border: none;
  border-radius: var(--ca-radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all var(--ca-transition);
  text-decoration: none;
  font-size: 14px;
}

.ca-cart__empty-action:hover {
  background-color: #ff479f;
  box-shadow: 0 0 20px rgba(255, 0, 132, 0.4);
  transform: translateY(-2px);
}

/* ========================================
   Cart Layout (Items + Summary)
   ======================================== */

.ca-cart__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
  margin-bottom: 40px;
}

/* ========================================
   Cart Items List
   ======================================== */

.ca-cart__items,
.woocommerce.cart form.woocommerce-cart-form {
  background-color: var(--ca-mid);
  border: 1px solid var(--ca-elevated);
  border-radius: var(--ca-radius);
  overflow: hidden;
}

.ca-cart__items-header {
  display: grid;
  grid-template-columns: 80px 1fr 120px 100px 100px 80px;
  gap: 12px;
  padding: 16px 20px;
  background-color: var(--ca-elevated);
  border-bottom: 1px solid var(--ca-elevated);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ca-gray);
}

.ca-cart__items-header span {
  display: flex;
  align-items: center;
}

/* Individual Cart Item */
.ca-cart-item,
.woocommerce.cart form.woocommerce-cart-form tbody tr {
  display: grid;
  grid-template-columns: 80px 1fr 120px 100px 100px 80px;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ca-elevated);
  transition: all var(--ca-transition);
}

.ca-cart-item:hover,
.woocommerce.cart form.woocommerce-cart-form tbody tr:hover {
  background-color: var(--ca-deep);
}

.ca-cart-item:last-child,
.woocommerce.cart form.woocommerce-cart-form tbody tr:last-child {
  border-bottom: none;
}

/* Product Image */
.ca-cart-item__image,
.woocommerce.cart .product-thumbnail {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--ca-deep);
}

.ca-cart-item__image img,
.woocommerce.cart .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ca-transition);
}

.ca-cart-item:hover .ca-cart-item__image img,
.woocommerce.cart form.woocommerce-cart-form tbody tr:hover .product-thumbnail img {
  transform: scale(1.08);
}

/* Product Details */
.ca-cart-item__details,
.woocommerce.cart .product-name {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ca-cart-item__name,
.woocommerce.cart .product-name a {
  color: var(--ca-white);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: color var(--ca-transition);
}

.ca-cart-item__name:hover,
.woocommerce.cart .product-name a:hover {
  color: var(--ca-pink);
}

.ca-cart-item__variant {
  color: var(--ca-gray);
  font-size: 12px;
}

.ca-cart-item__variant strong {
  color: var(--ca-white);
}

/* Unit Price */
.ca-cart-item__unit-price,
.woocommerce.cart .product-price {
  text-align: right;
  color: var(--ca-pink);
  font-weight: 700;
  font-size: 14px;
}

/* Quantity Input */
.ca-cart-item__quantity,
.woocommerce.cart .product-quantity {
  display: flex;
  justify-content: center;
}

.ca-cart-item__quantity input,
.woocommerce.cart .product-quantity input[type="number"] {
  width: 60px;
  padding: 8px 10px;
  background-color: var(--ca-deep);
  border: 1px solid var(--ca-elevated);
  color: var(--ca-white);
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
  transition: all var(--ca-transition);
}

.ca-cart-item__quantity input:focus,
.woocommerce.cart .product-quantity input[type="number"]:focus {
  border-color: var(--ca-pink);
  box-shadow: 0 0 10px rgba(255, 0, 132, 0.2);
  outline: none;
}

/* Line Item Total */
.ca-cart-item__subtotal,
.woocommerce.cart .product-subtotal {
  text-align: right;
  color: var(--ca-pink);
  font-weight: 700;
  font-size: 15px;
}

/* Remove Button */
.ca-cart-item__remove,
.woocommerce.cart .product-remove {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ca-cart-item__remove-btn,
.woocommerce.cart .product-remove a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--ca-deep);
  border: 1px solid var(--ca-elevated);
  color: var(--ca-gray);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--ca-transition);
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
}

.ca-cart-item__remove-btn:hover,
.woocommerce.cart .product-remove a.remove:hover {
  background-color: #ff4444;
  border-color: #ff4444;
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.3);
}

/* ========================================
   Cart Actions
   ======================================== */

.ca-cart__actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  margin: 20px 0 30px 0;
}

.ca-cart__coupon {
  display: flex;
  gap: 8px;
}

.ca-cart__coupon input {
  flex: 1;
  padding: 12px 14px;
  background-color: var(--ca-mid);
  border: 1px solid var(--ca-elevated);
  border-radius: var(--ca-radius);
  color: var(--ca-white);
  transition: all var(--ca-transition);
  min-width: 200px;
}

.ca-cart__coupon input::placeholder {
  color: var(--ca-gray);
  opacity: 0.7;
}

.ca-cart__coupon input:focus {
  border-color: var(--ca-pink);
  box-shadow: 0 0 12px rgba(255, 0, 132, 0.2);
  outline: none;
}

.ca-cart__coupon button {
  padding: 12px 20px;
  background-color: var(--ca-elevated);
  color: var(--ca-white);
  border: 1px solid var(--ca-elevated);
  border-radius: var(--ca-radius);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all var(--ca-transition);
}

.ca-cart__coupon button:hover {
  background-color: var(--ca-mid);
  border-color: var(--ca-pink);
  color: var(--ca-pink);
}

.ca-cart__update-btn {
  padding: 12px 24px;
  background-color: var(--ca-elevated);
  color: var(--ca-white);
  border: 1px solid var(--ca-elevated);
  border-radius: var(--ca-radius);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all var(--ca-transition);
}

.ca-cart__update-btn:hover {
  background-color: var(--ca-pink);
  border-color: var(--ca-pink);
  color: #000;
  box-shadow: 0 0 15px rgba(255, 0, 132, 0.3);
}

/* ========================================
   Cart Summary Sidebar
   ======================================== */

.ca-cart__summary,
.woocommerce.cart .cart_totals {
  background-color: var(--ca-mid);
  border: 1px solid var(--ca-elevated);
  border-radius: var(--ca-radius);
  padding: 24px;
  position: sticky;
  top: 80px;
  height: fit-content;
}

.ca-cart__summary-title,
.woocommerce.cart .cart_totals h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ca-white);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 24px 0;
}

/* Cart Totals */
.ca-cart-totals {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ca-cart-totals__row,
.woocommerce.cart .cart_totals tr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--ca-elevated);
}

.ca-cart-totals__row:last-child,
.woocommerce.cart .cart_totals tr:last-child {
  border-bottom: none;
  padding-top: 20px;
  padding-bottom: 0;
}

.ca-cart-totals__label,
.woocommerce.cart .cart_totals th {
  color: var(--ca-gray);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  text-align: left;
  padding: 0;
}

.ca-cart-totals__value,
.woocommerce.cart .cart_totals td {
  color: var(--ca-white);
  font-weight: 600;
  text-align: right;
  padding: 0;
  font-size: 13px;
}

.ca-cart-totals__row--subtotal .ca-cart-totals__value,
.ca-cart-totals__row--shipping .ca-cart-totals__value,
.ca-cart-totals__row--discount .ca-cart-totals__value {
  color: var(--ca-white);
}

.ca-cart-totals__row--total,
.woocommerce.cart .cart_totals tr.order-total {
  padding-top: 20px;
  border-top: 2px solid var(--ca-pink);
}

.ca-cart-totals__row--total .ca-cart-totals__value,
.woocommerce.cart .cart_totals tr.order-total .amount {
  color: var(--ca-pink);
  font-size: 18px;
  font-weight: 700;
}

/* Discount/Savings */
.ca-cart-totals__discount,
.woocommerce.cart .discount .amount {
  color: #52c41a;
  font-weight: 700;
}

/* Free Shipping Notice in Summary */
.ca-cart__free-shipping,
.woocommerce-shipping-totals.free {
  padding: 14px;
  background: linear-gradient(135deg, rgba(82, 196, 26, 0.1) 0%, rgba(82, 196, 26, 0.05) 100%);
  border: 1px solid #52c41a;
  border-radius: 6px;
  color: #52c41a;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin: 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ca-cart__free-shipping::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: #52c41a;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  flex-shrink: 0;
}

/* Checkout Button */
.ca-cart__checkout-btn,
.woocommerce.cart .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background-color: var(--ca-pink);
  color: #000;
  border: 2px solid var(--ca-pink);
  border-radius: var(--ca-radius);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--ca-transition);
  text-decoration: none;
  text-align: center;
  margin-top: 20px;
}

.ca-cart__checkout-btn:hover,
.woocommerce.cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: #ff479f;
  border-color: #ff479f;
  box-shadow: 0 0 20px rgba(255, 0, 132, 0.4);
  transform: translateY(-2px);
}

/* Continue Shopping Link */
.ca-cart__continue-shopping {
  display: block;
  margin-top: 16px;
  text-align: center;
  color: var(--ca-gray);
  font-size: 12px;
  text-decoration: none;
  transition: color var(--ca-transition);
}

.ca-cart__continue-shopping:hover {
  color: var(--ca-pink);
  text-decoration: underline;
}

/* ========================================
   Free Shipping Banner
   ======================================== */

.ca-free-shipping-banner,
.woocommerce-store-notice {
  background: linear-gradient(135deg, var(--ca-pink) 0%, #ff479f 100%);
  color: #000;
  padding: 16px 20px;
  border-radius: var(--ca-radius);
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 12px rgba(255, 0, 132, 0.3);
}

.ca-free-shipping-banner::before {
  content: "🚚";
  font-size: 18px;
}

/* ========================================
   Responsive Design
   ======================================== */

/* Tablet (768px) */
@media (max-width: 768px) {
  .ca-cart__layout {
    grid-template-columns: 1fr;
  }

  .ca-cart__summary {
    position: relative;
    top: auto;
  }

  .ca-cart__items-header {
    display: none;
  }

  .ca-cart-item {
    grid-template-columns: 70px 1fr auto;
    gap: 12px;
  }

  .ca-cart-item__quantity,
  .ca-cart-item__subtotal,
  .ca-cart-item__unit-price {
    grid-column: auto;
  }

  .ca-cart__actions {
    grid-template-columns: 1fr auto;
  }

  .ca-cart__coupon {
    grid-column: 1 / -1;
    margin-bottom: 12px;
  }

  .ca-cart__coupon input {
    min-width: auto;
  }
}

/* Mobile (480px) */
@media (max-width: 480px) {
  .ca-cart {
    padding: 20px 12px;
  }

  .ca-cart__title {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .ca-cart__items-header {
    display: none;
  }

  .ca-cart-item {
    grid-template-columns: 60px 1fr;
    gap: 12px;
    row-gap: 8px;
  }

  .ca-cart-item__details {
    grid-column: 2;
  }

  .ca-cart-item__quantity,
  .ca-cart-item__subtotal,
  .ca-cart-item__unit-price,
  .ca-cart-item__remove {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .ca-cart-item__quantity input {
    width: 50px;
  }

  .ca-cart__actions {
    flex-direction: column;
    gap: 12px;
  }

  .ca-cart__coupon {
    flex-direction: column;
    width: 100%;
  }

  .ca-cart__coupon input,
  .ca-cart__coupon button {
    width: 100%;
  }

  .ca-cart__summary {
    padding: 20px 16px;
  }

  .ca-cart-totals__row {
    padding: 12px 0;
  }

  .ca-cart__checkout-btn {
    padding: 12px 16px;
    font-size: 13px;
  }
}