/**
 * Bangladesh Ecommerce — Cart Page Styles
 * Matches custom design: be-cart.css
 */

/* =============================================
   CART PAGE WRAPPER
============================================= */

/* Reset WC default woocommerce div on cart page — no max-width override, container handles width */
.woocommerce-cart .woocommerce,
.woocommerce-cart #page-content > .woocommerce {
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Prevent WC float on cart collaterals */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals,
.woocommerce-cart .cross-sells {
  float: none !important;
  width: 100% !important;
}

/* Sticky order summary */
.be-order-summary {
  position: sticky;
  top: 100px;
}

.be-cart-page {
  background: var(--bg-light);
  padding: 28px 0 60px;
  min-height: 60vh;
}

.be-cart-title-row {
  margin-bottom: 20px;
}

.be-cart-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-bangla);
}

.be-cart-heading i {
  color: var(--primary);
  font-size: 20px;
}

.be-cart-item-count {
  font-size: 14px;
  font-weight: 600;
  background: var(--primary-light);
  color: var(--primary);
  padding: 3px 12px;
  border-radius: 20px;
  margin-left: 6px;
}

/* =============================================
   LAYOUT: 2-column (see top of file for !important overrides)
============================================= */

/* =============================================
   FREE DELIVERY BAR
============================================= */
.be-free-delivery-bar {
  background: #fff;
  border: 1px solid #d4edda;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.be-fdb-text {
  font-size: 13px;
  color: var(--text-medium);
  font-family: var(--font-bangla);
  margin-bottom: 10px;
}

.be-fdb-text strong { color: var(--primary); }

.be-fdb-track {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-light);
  font-family: var(--font-bangla);
}

.be-fdb-bar {
  flex: 1;
  height: 8px;
  background: #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

.be-fdb-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.be-fdb-end { color: var(--primary); font-weight: 700; }

/* =============================================
   CART TABLE
============================================= */
.be-cart-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.be-cart-table thead tr th {
  background: transparent;
  color: var(--text-medium);
  font-size: 13px;
  font-weight: 600;
  padding: 14px 16px;
  border-bottom: 2px solid var(--border);
  font-family: var(--font-bangla);
  text-align: left;
}

.be-cart-table tbody tr td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  background: #fff;
  font-family: var(--font-bangla);
}

.be-cart-table tbody tr:last-child td { border-bottom: none; }
.be-cart-table tbody tr:hover > td { background: #fafff7; }

.be-col-product { width: 40%; }
.be-col-price   { width: 18%; text-align: center; }
.be-col-qty     { width: 20%; text-align: center; }
.be-col-subtotal{ width: 17%; text-align: right; }
.be-col-remove  { width: 5%;  text-align: center; }

/* Product cell */
.be-cart-product-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}

.be-cart-product-thumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f7f7f7;
}

.be-cart-product-thumb img,
.be-cart-product-thumb .be-cart-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.be-cart-product-info { flex: 1; }

.be-cart-product-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: 4px;
}

.be-cart-product-name a {
  color: var(--text-dark);
  text-decoration: none;
}

.be-cart-product-name a:hover { color: var(--primary); }

.woocommerce-cart-form__cart-item .variation {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
}

.woocommerce-cart-form__cart-item .variation dt,
.woocommerce-cart-form__cart-item .variation dd {
  display: inline;
  font-size: 12px;
  color: var(--text-light);
  margin: 0;
  font-family: var(--font-bangla);
}

/* Price */
.be-cart-price,
.be-cart-subtotal {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-bangla);
}

.be-cart-price .woocommerce-Price-amount,
.be-cart-subtotal .woocommerce-Price-amount {
  font-family: var(--font-bangla);
}

/* Quantity */
.be-qty-wrapper,
.be-qty-wrap,
.quantity.be-qty-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* Override WC default quantity */
.be-cart-table .quantity,
.be-qty-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.be-cart-table .quantity .qty,
.be-qty-wrap .qty,
.be-qty-wrap input[type="number"] {
  width: 50px !important;
  height: 36px !important;
  border: 1.5px solid var(--border) !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--font-bangla) !important;
  color: var(--text-dark) !important;
  background: #fff !important;
  outline: none !important;
  -moz-appearance: textfield !important;
}

.be-qty-wrap .qty::-webkit-inner-spin-button,
.be-qty-wrap .qty::-webkit-outer-spin-button { -webkit-appearance: none; }

.be-qty-dec,
.be-qty-inc {
  width: 32px;
  height: 36px;
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-medium);
  transition: var(--transition);
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
}

.be-qty-dec { border-radius: 6px 0 0 6px; }
.be-qty-inc { border-radius: 0 6px 6px 0; }
.be-qty-dec:hover, .be-qty-inc:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Remove button */
.be-cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #fff0f0;
  color: #e53935;
  border-radius: 6px;
  font-size: 13px;
  transition: var(--transition);
  text-decoration: none;
}

.be-cart-remove:hover {
  background: #e53935;
  color: #fff;
}

/* =============================================
   CART ACTIONS (coupon + secure)
============================================= */
.be-cart-actions-row td {
  padding: 16px !important;
  background: #fafafa !important;
  border-top: 1px solid var(--border) !important;
}

.be-cart-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Coupon box */
.be-coupon-box {
  background: #fff;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 280px;
}

.be-coupon-icon {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-medium);
  font-family: var(--font-bangla);
  margin-bottom: 10px;
}

.be-coupon-input-row {
  display: flex;
  gap: 8px;
}

.be-coupon-input {
  flex: 1;
  height: 38px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 0 12px;
  font-size: 13px;
  font-family: var(--font-bangla);
  outline: none;
  transition: var(--transition);
  color: var(--text-dark);
}

.be-coupon-input:focus { border-color: var(--primary); }
.be-coupon-input::placeholder { color: #bbb; }

.be-coupon-btn {
  height: 38px;
  padding: 0 18px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: var(--font-bangla);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.be-coupon-btn:hover { background: var(--primary-dark); }

/* Secure badge */
.be-secure-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #d4edda;
  border-radius: 10px;
  padding: 12px 16px;
}

.be-secure-icon {
  width: 38px;
  height: 38px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.be-secure-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  font-family: var(--font-bangla);
}

.be-secure-sub {
  font-size: 11px;
  color: var(--text-light);
  font-family: var(--font-bangla);
}

/* =============================================
   CART BOTTOM ROW
============================================= */
.be-cart-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.be-btn-continue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-medium);
  background: #fff;
  font-family: var(--font-bangla);
  text-decoration: none;
  transition: var(--transition);
}

.be-btn-continue:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.be-btn-clear-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid #ffcdd2;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #e53935;
  background: #fff9f9;
  font-family: var(--font-bangla);
  cursor: pointer;
  transition: var(--transition);
}

.be-btn-clear-cart:hover {
  background: #e53935;
  color: #fff;
  border-color: #e53935;
}

/* =============================================
   ORDER SUMMARY (RIGHT)
============================================= */
.be-order-summary {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 22px;
  position: sticky;
  top: 90px;
}

.be-os-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  font-family: var(--font-bangla);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}

.be-os-rows {
  margin-bottom: 16px;
}

.be-os-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
  color: var(--text-medium);
  font-family: var(--font-bangla);
}

.be-os-val {
  font-weight: 600;
  color: var(--text-dark);
}

.be-os-discount { color: #e53935 !important; }

.be-os-coupon .be-remove-coupon {
  color: #e53935;
  margin-left: 6px;
  font-size: 13px;
  text-decoration: none;
  vertical-align: middle;
}

.be-free-tag {
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  font-family: var(--font-bangla);
}

.be-os-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 16px;
  border-top: 2px solid var(--border);
  margin-top: 4px;
  font-family: var(--font-bangla);
}

.be-os-total-row span:first-child {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}

.be-os-total-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
}

.be-os-total-val .woocommerce-Price-amount {
  font-family: var(--font-bangla);
}

/* Checkout button */
.be-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: #fff;
  border-radius: 9px;
  font-family: var(--font-bangla);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  margin-bottom: 12px;
}

.be-checkout-btn:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,122,60,.3);
}

.be-or-divider {
  text-align: center;
  position: relative;
  margin: 10px 0;
}

.be-or-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}

.be-or-divider span {
  position: relative;
  background: #fff;
  padding: 0 12px;
  font-size: 12px;
  color: var(--text-light);
  font-family: var(--font-bangla);
}

/* PayPal button */
.be-paypal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: #ffc439;
  color: #003087;
  border-radius: 9px;
  font-family: var(--font-bangla);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  margin-bottom: 16px;
}

.be-paypal-btn:hover {
  background: #f0b429;
  color: #003087;
}

.be-paypal-btn i { font-size: 16px; }

/* Payment icons */
.be-payment-icons {
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.be-pi-label {
  font-size: 11px;
  color: var(--text-light);
  font-family: var(--font-bangla);
  margin-bottom: 8px;
  display: block;
}

.be-pi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.be-pi {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.be-pi.bkash  { background: #e2136e; color: #fff; }
.be-pi.nagad  { background: #f15a25; color: #fff; }
.be-pi.rocket { background: #8b008b; color: #fff; }
.be-pi.visa   { background: #1a1f71; color: #fff; }
.be-pi.mc     { background: #eb001b; color: #fff; }
.be-pi.amex   { background: #007bc1; color: #fff; }

/* Trust badges */
.be-trust-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.be-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.be-trust-icon {
  width: 36px;
  height: 36px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.be-trust-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  font-family: var(--font-bangla);
  line-height: 1.3;
}

.be-trust-sub {
  font-size: 11px;
  color: var(--text-light);
  font-family: var(--font-bangla);
}

/* =============================================
   RECOMMENDED PRODUCTS
============================================= */
.be-cart-recommended {
  margin-top: 8px;
}

.be-recommended-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  font-family: var(--font-bangla);
  margin-bottom: 16px;
}

.be-recommended-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.be-slider-arrow {
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  font-size: 13px;
  color: var(--text-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
  z-index: 2;
}

.be-slider-arrow:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.be-recommended-slider {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex: 1;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.be-recommended-slider::-webkit-scrollbar { display: none; }

.be-rec-card {
  width: 200px;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: var(--transition);
  flex-shrink: 0;
}

.be-rec-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  border-color: #c8e6c9;
}

.be-rec-img-link {
  display: block;
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: #f7f7f7;
}

.be-rec-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.be-rec-card:hover .be-rec-img { transform: scale(1.06); }

.be-rec-noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
  font-size: 36px;
}

.be-rec-body {
  padding: 10px 12px 12px;
}

.be-rec-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  font-family: var(--font-bangla);
  line-height: 1.4;
  margin-bottom: 5px;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.be-rec-name:hover { color: var(--primary); }

.be-rec-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 5px;
  color: #f8b500;
  font-size: 11px;
}

.be-rec-rcount {
  color: var(--text-light);
  font-size: 11px;
  margin-left: 3px;
}

.be-rec-price {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.be-rec-price-now {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-bangla);
}

.be-rec-price-was {
  font-size: 12px;
  color: #bbb;
  text-decoration: line-through;
  font-family: var(--font-bangla);
}

.be-rec-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-bangla);
  text-decoration: none;
  transition: var(--transition);
  text-align: center;
}

.be-rec-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* =============================================
   WC NOTICES on cart page
============================================= */
.be-cart-page .woocommerce-message,
.be-cart-page .woocommerce-info,
.be-cart-page .woocommerce-error {
  border-radius: 8px;
  font-family: var(--font-bangla);
  margin-bottom: 16px;
}

/* =============================================
   EMPTY CART
============================================= */
.be-cart-page .cart-empty {
  text-align: center;
  padding: 60px 20px;
  font-family: var(--font-bangla);
  font-size: 16px;
  color: var(--text-medium);
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.be-cart-page .return-to-shop {
  text-align: center;
  margin-top: 16px;
}

.be-cart-page .return-to-shop .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  font-family: var(--font-bangla);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}

.be-cart-page .return-to-shop .button:hover {
  background: var(--primary-dark);
}

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 1024px) {
  .be-cart-layout {
    grid-template-columns: 1fr 300px !important;
  }
}

@media (max-width: 768px) {
  .be-cart-layout {
    grid-template-columns: 1fr !important;
  }

  .be-cart-right {
    order: -1;
  }

  .be-order-summary {
    position: static;
  }

  .be-cart-table thead { display: none; }

  .be-cart-table tbody tr td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: none;
  }

  .be-cart-table tbody tr td::before {
    content: attr(data-title);
    font-weight: 700;
    color: var(--text-medium);
    font-size: 12px;
    font-family: var(--font-bangla);
  }

  .be-col-product { flex-direction: column; align-items: flex-start; }
  .be-col-product::before { display: none; }

  .be-cart-table tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
  }

  .be-col-subtotal { text-align: right; }
  .be-col-remove   { justify-content: flex-end; }
  .be-col-remove::before { content: 'সরান'; }

  .be-cart-actions { flex-direction: column; align-items: stretch; }
  .be-coupon-box   { min-width: auto; }

  .be-cart-bottom-row { flex-direction: column; align-items: stretch; }
  .be-btn-continue, .be-btn-clear-cart { justify-content: center; }
}

@media (max-width: 480px) {
  .be-cart-page { padding: 16px 0 80px; }
  .be-cart-heading { font-size: 18px; }
  .be-rec-card { width: 170px; min-width: 170px; }
  .be-rec-img-link { height: 130px; }
}