/* ----------------------------------------------------------
   Global card layout
---------------------------------------------------------- */
.cart-wrapper {
  margin-top: 20px;
}

.cart-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

/* ----------------------------------------------------------
   Header Card
---------------------------------------------------------- */
.cart-header .cart-page-title {
  font-size: 22px;
  font-weight: 600;
  color: #444;
}

/* ----------------------------------------------------------
   Product List Toolbar
---------------------------------------------------------- */
.cart-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.cart-toolbar .cart-title {
  font-size: 18px;
  font-weight: 600;
  color: #222;
}

/* ----------------------------------------------------------
   TABLE COLUMN LAYOUT (NEW STRUCTURE)
   Product | Code | Price | Quantity | Action
---------------------------------------------------------- */

/* Force columns to align uniformly */
table.product-list td,
table.product-list th {
  vertical-align: top !important;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* PRODUCT COLUMN */
td.col-product {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 420px;
}

td.col-product .prod-img img {
  width: 80px;
  height: auto;
  border-radius: 4px;
}

td.col-product .prod-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

td.col-product .prod-name {
  font-weight: 600;
  color: #333;
  font-size: 15px;
}

td.col-product .prod-options .opt-line {
  font-size: 13px;
  color: #666;
}

/* CODE COLUMN */
td.col-code {
  font-weight: 600;
  color: #444;
  white-space: nowrap;
}

/* PRICE COLUMN */
td.col-price {
  font-weight: 600;
  color: #222;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   QUANTITY COLUMN (HORIZONTAL − qty +)
---------------------------------------------------------- */
td.col-qty {
  white-space: nowrap;
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qty-control button.qty-minus,
.qty-control button.qty-plus {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fafafa;
  cursor: pointer;
  font-size: 18px;
  line-height: 24px;
}

.qty-control button.qty-minus:hover,
.qty-control button.qty-plus:hover {
  background: #eee;
}

.qty-control .qty-display {
  width: 48px;
  text-align: center;
  font-size: 15px;
  padding: 2px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f9f9f9;
}

/* ----------------------------------------------------------
   ACTION COLUMN (delete icon)
---------------------------------------------------------- */
td.col-action i.fa-remove {
  font-size: 18px;
  cursor: pointer;
}

/* ----------------------------------------------------------
   Summary Card
---------------------------------------------------------- */
.cart-summary .summary-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  color: #313131;
  font-family: "Segoe UI" !important;
  font-weight: 400;
  letter-spacing: 0.019px;
  line-height: 150%;
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row span:last-child {
  font-weight: 600;
  font-size: 16px;
  color: #000;
  font-style:normal;
  line-height: 150%;
}

.summary-row .gross {
  font-weight: 700 !important;
}

/* ----------------------------------------------------------
   Footer Buttons
---------------------------------------------------------- */
.footer-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.footer-buttons .btn-clear {
  background: #d9534f !important;
  color: #fff !important;
}

.footer-buttons .confirm-button {
  background: #5cb85c !important;
  color: #fff !important;
}

/* ----------------------------------------------------------
   Product List Header Styling
---------------------------------------------------------- */

/* Title */
.cart-toolbar .cart-title {
  color: var(--Colors-Content-contentPrimary, #000);
  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}

/* Sort dropdown */
.cart-toolbar select.cart-sort {
  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: var(--Colors-Content-contentPrimary, #000);

  height: 48px;
  padding: 8px 12px;

  border-radius: var(--Border-radius-border-radius-2, 8px);
  border: 2px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
  background: #FFF;

  cursor: pointer;
  box-shadow: none !important;
}

.cart-toolbar select.cart-sort:focus {
  outline: none;
  border-color: #93117E;
}

/* ----------------------------------------------------------
   Save for later button
---------------------------------------------------------- */

.cart-toolbar .btn-save-for-later {
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;

  height: 48px;

  border-radius: 8px;
  border: 2px solid var(--Colors-Borders-borderBrandLight, #EFDBEC);
  background: var(--Colors-Surface-surfacePrimary, #FFF);

  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 600;
  color: var(--Colors-Content-contentBrand, #93117E);

  box-shadow: none !important;
}

.cart-toolbar .btn-save-for-later:hover {
  background: #F4E7F2;
  color: var(--Colors-Content-contentBrand, #93117E);
}

.cart-toolbar .btn-save-for-later:focus {
  background: #EFDBEC;
  color: var(--Colors-Content-contentBrand, #93117E);
}

/* ----------------------------------------------------------
   Delete All button
---------------------------------------------------------- */

.cart-toolbar .btn-delete-all {
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;

  height: 48px;

  border-radius: 8px;
  background: var(--Colors-Surface-surfacePrimary, #FFF);

  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 600;
  color: var(--Colors-Content-contentDestructiveDark, #541A1A);

  box-shadow: none !important;
}

.cart-toolbar .btn-delete-all:hover {
  background: #EEC3C3;
  color: var(--Colors-Content-contentDestructiveDark, #541A1A);
}

.cart-toolbar .btn-delete-all:active {
  background: #E6A7A6;
  color: var(--Colors-Content-contentDestructiveDark, #541A1A);
}

/* Header text styling (th + sort links) */
table.product-list thead th,
table.product-list thead th a.sort_link {
  color: var(--Colors-Content-contentTertiary, #6A6A6A) !important;
  font-family: "Segoe UI" !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 150% !important;
  letter-spacing: 0.019px !important;
  white-space: nowrap;
}

/* Hide Discount + Total headers + data */
table.product-list thead th.discount,
table.product-list thead th.product-line-total,
table.product-list tbody td.discount,
table.product-list tbody td.product-line-total {
  display: none !important;
}

table.product-list td.p-name.hidden-xs:empty {
  display: none !important;
}

/* Hide the Discount + Total columns */
table.product-list th.discount,
table.product-list td.discount,
table.product-list th.product-line-total,
table.product-list td.product-line-total {
  display: none !important;
}

/* ----------------------------------------------------------
   PRODUCT COLUMN
---------------------------------------------------------- */

/* Make product image and text appear side-by-side */
table.product-list td.thumb-cart {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Product image */
table.product-list td.thumb-cart img {
  width: 80px;
  height: auto;
  border-radius: 4px;
}

/* Product name text */
table.product-list td.thumb-cart .p-title a,
table.product-list td.p-name.hidden-xs a {
  color: var(--Colors-Content-contentSecondary, #313131);
  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Options line */
table.product-list td.thumb-cart .p-options {
  color: var(--Colors-Content-contentSecondary, #313131);
  font-family: "Segoe UI";
  font-size: 14px;
  line-height: 150%;
  opacity: 0.8;
}



/* ----------------------------------------------------------
   PRICE COLUMN
---------------------------------------------------------- */

table.product-list td.amount.product-price {
  color: var(--Colors-Content-contentSuccess, #048259);
  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}


/* ----------------------------------------------------------
   QUANTITY COLUMN
---------------------------------------------------------- */

table.product-list td.amount.product-quantity .qty-display {
  border-radius: 8px;
  border: 2px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
  background: var(--Colors-Surface-surfacePrimary, #FFF);

  color: var(--Colors-Content-contentTertiary, #6A6A6A);
  text-align: center;

  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;

  width: 32px;
  height: 32px;
}


table.product-list td.amount.product-quantity .qty-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

table.product-list td.amount.product-quantity .qty-wrap {
  display: flex;
  align-items: center;
  height: 46px;
  border-radius: 8px;
  border: 2px solid var(--Colors-Borders-borderOpaque, #E3E3E3);
  background: #FFF;
  padding: 0 6px;
  width: fit-content;

}

table.product-list td.amount.product-quantity .qty-minus,
table.product-list td.amount.product-quantity .qty-plus {
  background: none;
  border: none;
  font-size: 20px;
  font-weight: 600;
  padding: 0;
  height: 100%;
  color: var(--Colors-Content-contentTertiary, #6A6A6A);
  cursor: pointer;
  line-height: 42px;
}

/* Hover effect */
table.product-list td.amount.product-quantity .qty-minus:hover,
table.product-list td.amount.product-quantity .qty-plus:hover {
  background: #F4E7F2;
  border-radius: 999px;
  color: #93117E;

}

table.product-list td.amount.product-quantity .qty-minus:hover,
table.product-list td.amount.product-quantity .qty-plus:hover {
  background: #EFDBEC;
  border-radius: 999px;
  color: #5B0B4F;
}


/* Style the value display */
table.product-list td.amount.product-quantity .qty-display {
  flex: 1;
  border: none !important;
  background: transparent !important;

  text-align: center;

  color: var(--Colors-Content-contentTertiary, #6A6A6A);
  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.019px;

  pointer-events: none; 
}

/* Remove outlines on buttons */
table.product-list td.amount.product-quantity .qty-minus:focus,
table.product-list td.amount.product-quantity .qty-plus:focus {
  outline: none;
  box-shadow: none;
}

tfoot {
  display: none !important;
}

#order-details .col-md-5.pull-right.text-right .confirm-button {
  display: none !important;
}

/* Center the footer buttons container */
.cart-footer .footer-buttons {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;
  gap: 20px;                 /* space between the two buttons */
  width: 100%;
}

/* Make both buttons larger, evenly stretched */
.cart-footer .footer-buttons a {
  flex: 1;                  
  max-width: 800px;          
  height: 52px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 8px;
  font-family: "Segoe UI";
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}

/* Clear the cart (outlined style) */
.cart-footer .btn-delete-all {
  border: 2px solid #E3BEBE;                      
  background: #FFF;
  color: #541A1A !important;
      box-shadow: none !important;
}

.cart-footer .btn-delete-all:hover {
  background: #F7E6E6;
}

/* Checkout securely (filled style) */
.cart-footer .confirm-button {
  background: #2E7A57 !important;                 
  color: #FFF !important;
  border: 2px solid #2E7A57 !important;
  box-shadow: none;
}

.cart-footer .confirm-button:hover {
  background: #276A4C !important;
  box-shadow: none;
}

.btn-save-for-later .fa-floppy-o {
    display: none !important;
}

table thead th {
    text-align: left !important;
}

.cart-wrapper {
    margin-top: 0px;
}

/* Clear Cart hover */
.cart-footer .btn-delete-all:hover {
  background: #EEC3C3 !important;
  color: #541A1A !important;
  box-shadow: none;
}

/* Clear Cart focus / active */
.cart-footer .btn-delete-all:focus,
.cart-footer .btn-delete-all:active {
  background: #E6A7A6 !important;
  color: #541A1A !important;
  box-shadow: none !important;
}

/* Checkout hover */
.cart-footer .confirm-button:hover {
  background: #016143 !important;
  color: #FFF !important;
    box-shadow: none !important;  
}

/* Checkout focus / active */
.cart-footer .confirm-button:focus,
.cart-footer .confirm-button:active {
  background: #014B34 !important;
  color: #FFF !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  /* Hide desktop table on mobile */
  .cart-products table.product-list {
    display: none !important;
  }


  .mobile-grid {
    display: flex;
  }
}

@media (min-width: 769px) {

  .mobile-grid {
    display: none !important;
  }
}

.mobile-grid {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}

.mobile-grid-labels,
.mobile-grid-products .mobile-col {
  display: flex;
  flex-direction: column;
}

.mobile-grid-labels {
  min-width: 110px;
  background: #fafafa;
  border-right: 1px solid #e3e3e3;
}

.mobile-grid-labels div,
.mobile-grid-products .mobile-col div {
  padding: 8px;
  border-bottom: 1px solid #f1f1f1;
  font-family: "Segoe UI";
  font-size: 14px;
  line-height: 20px;
}

.mobile-grid-products {
  display: flex;

}

.mobile-grid-products .mobile-col {
  min-width: 200px;
}

.mobile-product-name {
  font-weight: 600;
  color: #313131;
}
.mobile-price {
  font-weight: 600;
  color: #048259;
}

/* -------------------------------------------------------
   MOBILE ONLY
------------------------------------------------------- */
@media (max-width: 768px) {

 
  /* -------------------------------------------------------
     2. QUANTITY BUTTONS - match desktop style
  ------------------------------------------------------- */
  .mobile-qty .qty-wrap {
      display: flex;
      align-items: center;
      border: 2px solid #E3E3E3;
      border-radius: 8px;
      padding: 4px 6px;
      background: #FFF;
      height: 48px;
      box-sizing: border-box;
  }

  .mobile-qty .qty-wrap button.qty-minus,
  .mobile-qty .qty-wrap button.qty-plus {
      border-radius: 6px;
      border: 1px solid #fff;
      background: transparent;
      font-size: 18px;
      line-height: 1;
  }

  .mobile-qty .qty-wrap .qty-display {
      width: 45px;
      text-align: center;
      border: 1px solid #fff;
      border-radius: 6px;
      background: #fff;
      font-size: 16px;
      padding: 2px;
  }


  /* -------------------------------------------------------
     3. Align all mobile rows to same row height
  ------------------------------------------------------- */

  .mobile-grid .mobile-col {
      display: grid;
      grid-template-rows: repeat(5, 56px); /* 5 rows, consistent height */
      align-items: center;
       border-right: 1px solid #e3e3e3;
  }

  /* prevents tall content breaking the row height */
  .mobile-col > div {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
  }

  /* Product name should be bold but truncated */
  .mobile-product-name {
      font-weight: 600;
      color: #000;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  /* SKU */
  .mobile-sku {
      font-size: 14px;
      color: #555;
  }

  /* Price */
  .mobile-price {
      font-size: 16px;
      font-weight: 600;
      color: #048259;
  }


  /* -------------------------------------------------------
     4. Fixed first column labels alignment
  ------------------------------------------------------- */
  .mobile-grid-labels > div {
      height: 56px;
      display: flex;
      align-items: center;
      font-weight: 600;
      color: #6A6A6A;
  }
}

@media (max-width: 768px) {

  /* Hide Sort By completely */
  .cart-products .cart-toolbar select.cart-sort {
      display: none !important;
  }

  /* Buttons become icon-only */
  .cart-products .cart-toolbar .btn-save-for-later,
  .cart-products .cart-toolbar .btn-delete-all {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      height: 44px;
      padding: 0 8px !important;
      white-space: nowrap;
      gap: 0;
  }

  /* Remove ALL text but keep icons */
  .cart-products .cart-toolbar .btn-save-for-later i,
  .cart-products .cart-toolbar .btn-save-for-later span,
  .cart-products .cart-toolbar .btn-save-for-later br,
  .cart-products .cart-toolbar .btn-delete-all i,
  .cart-products .cart-toolbar .btn-delete-all span,
  .cart-products .cart-toolbar .btn-delete-all br {
      display: none !important;
  }

  /* Remove raw text nodes by setting text color/size to none */
  .cart-products .cart-toolbar .btn-save-for-later,
  .cart-products .cart-toolbar .btn-delete-all {
      font-size: 0 !important;
      color: transparent !important;
  }

  /* BUT keep the SVG visible */
  .cart-products .cart-toolbar .btn-save-for-later img,
  .cart-products .cart-toolbar .btn-delete-all img {
      height: 22px !important;
      width: auto !important;
      margin: 0 !important;
      display: inline-block !important;
  }

}

@media (max-width: 768px) {
  .mobile-grid-labels {
      display: grid !important;
      grid-template-rows: repeat(5, 56px) !important;
      align-items: center;
  }

  .mobile-grid-labels > div {
      display: flex;
      align-items: center;    /* vertical centering */
      justify-content: flex-start; /* keep left alignment */
      height: 100%;
      padding-left: 20px;    
  }
}

@media (max-width: 768px) {

  /* Force every row in the label column to exactly 56px */
  .mobile-grid-labels > div {
      height: 56px !important;
      min-height: 56px !important;
      max-height: 56px !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      text-overflow: ellipsis !important;
  }

  /* Force every row in each product column to exactly 56px */
  .mobile-grid-products .mobile-col > div {
      height: 56px !important;
      min-height: 56px !important;
      max-height: 56px !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      text-overflow: ellipsis !important;
  }
  
  /* Quantity box must also not exceed the row height */
  .mobile-qty .qty-wrap {
      max-height: 40px !important;
  }

}

@media (max-width: 768px) {

  .cart-footer .footer-buttons {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 0px !important;
  }

  .cart-footer .footer-buttons a {
      width: 100% !important;
      justify-content: center !important;
  }
}

.orders_current_order .cart-toolbar .cart-actions {
    display: flex;
    gap:8px
}

.orders_current_order .cart-toolbar .btn.btn-danger.btn-delete-all,
.orders_current_order .cart-toolbar .btn.btn-info.btn-confirm.btn-save-for-later {
    margin: 0;
}

.cart-actions-divider {
    width: 1px;
    background: var(--Colors-Borders-borderOpaque, #E3E3E3);
    height: 24px;
    align-self: center;
}

.cart-remove-btn {
display: flex;
justify-content: center;
align-items: center;
gap: var(--Spacing-spacer-01, 4px);
border-radius: var(--Border-radius-border-radius-2, 8px);
height: 32px;
width: 32px;
background: transparent; 
border: transparent;
padding: 4px;
}

.cart-remove-btn:hover {
  background: #EEC3C3;
}

.cart-remove-btn:active {
  background: #E6A7A6;
}

.orders_current_order .product-quantity input.product_id {
  display: none !important;
}

.orders_current_order .product-quantity i.fa-check.pull-right {
  display: none !important;
}

.orders_current_order .qty-wrap button img {
  padding: 8px;
}

.orders_current_order .product-quantity .form-group {
  display: none !important;
}

.qty-wrap button {
  border-radius: 50%;
}

.qty-wrap button:hover {
  background: #F4E7F2;
}

.qty-wrap button:hover svg {
  fill: #93117E;
}

.qty-wrap button:active {
  background: #EFDBEC;
}

.qty-wrap button:active svg {
  fill: #5B0B4F;
}

.qty-wrap button img,
.qty-wrap button svg {
  pointer-events: none;
}