/* assets/css/checkout-ui.css */

/* --- General Styles (Keep relevant ones) --- */

/* General item wrapper (used in mini-cart template) */
.afcb-item {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
  position: relative; /* Added for potential loader positioning within item */
}

/* Thumbnail (used in mini-cart template) */
.afcb-thumb img {
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--bricks-radius-m,6px);
}

/* Name & variation (used in mini-cart template) */
.afcb-name { /* Added style target */
    flex-grow: 1; /* Allow name to take space */
}
.afcb-name a { text-decoration: none; }
.afcb-var-list { margin:4px 0; font-size:.85em; line-height:1.3; }
.afcb-var-inline { font-size:.9em; opacity:.8 }
.afcb-var-list dt { font-weight:600; }
.afcb-var-inline dl, .afcb-var-inline dd { display:inline; margin:0 }


/* Price (used in mini-cart template) */
.afcb-price { margin-left:auto; white-space:nowrap; padding-left: 10px; }

/* Quantity controls (used in mini-cart template) */
.afcb-qty { display:flex; align-items:center; gap:6px; }
.afcb-qty button {
  border:none;
  background:#eee;
  color: #333; /* Ensure color contrast */
  width:26px;height:26px;
  border-radius:4px;
  font-size:16px; line-height:1;
  cursor:pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease, opacity 0.2s ease; /* Add transition */
}
.afcb-qty button:hover {
  background-color: #ddd; /* Add hover effect */
}
.afcb-qty button svg {
  width: 1em;
  height: 1em;
}
.afcb-qty-input {
  width:48px; text-align:center;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  /* Add basic appearance reset for different browsers */
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Hide spinner buttons on number input */
.afcb-qty-input::-webkit-outer-spin-button,
.afcb-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ** NEW: Disabled state for quantity buttons ** */
.afcb-qty button:disabled,
.afcb-qty button.disabled { /* Add class target for flexibility */
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f5f5f5; /* Lighter background when disabled */
}


/* Remove button (used in mini-cart template) */
.afcb-remove {
  border:none;
  background:none;
  padding:4px;
  cursor:pointer;
  font-size:18px;
  line-height: 1;
  color: #a00;
  transition: color .3s ease;
}
.afcb-remove:hover {
  color: #f00;
}
.afcb-remove svg {
  width: 1em;
  height: 1em;
  display: block;
}

/* Accessibility */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}


/* --- REMOVED Off-Canvas Panel Styles --- */


/* --- PlaceOrderButton Specific Styles (Keep if used elsewhere) --- */
/* ... (Styles for .afcb-button-container, #place_order, .icon etc. IF NEEDED) ... */
/* If PlaceOrderButton element is ONLY used on checkout page and not related */
/* to mini-cart, keep these styles. If not used, remove them too. */


/* ** NEW: AJAX Loader Styles ** */
/* The container where the loader will appear (likely your template's main wrapper inside .widget_shopping_cart_content) */
/* Or directly target .widget_shopping_cart_content if the loader is placed just inside it */
.widget_shopping_cart_content {
    position: relative; /* Needed for absolute positioning of the loader */
    min-height: 50px; /* Ensure container has some height even when empty briefly */
}

.afcb-ajax-loader {
    display: none; /* Hidden by default */
    position: absolute;
    inset: 0; /* Cover the entire container */
    background-color: rgba(11, 10, 10, .7); /* Semi-transparent white overlay */
    z-index: 999; /* Above content */
    justify-content: center;
    align-items: center;
}

/* Style for the SVG inside the loader */
.afcb-ajax-loader svg {
    width: 40px; /* Adjust size as needed */
    height: 40px;
    animation: afcb-spin 1s linear infinite; /* Basic spinning animation */
}

/* Show loader when parent container has .afcb-loading class */
.afcb-loading .afcb-ajax-loader {
    display: flex; /* Use flex to center the SVG */
}


/* Basic spinning animation */
@keyframes afcb-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Optional: Slightly dim content while loading */
.widget_shopping_cart_content.afcb-loading > *:not(.afcb-ajax-loader) {
  opacity: 1;
  pointer-events: none; /* Prevent interaction with content below loader */
}