/* Cart icons - plain text-size icons, no button styling. The SVG inside
   sizes itself to 1em, so the icon's size follows font-size here. */
.peercore-cart-icon{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    background:transparent;
    border:none;
    padding:0;
}

.peercore-cart-icon__icon{
    display:inline-flex;
    align-items:center;
    font-size:26px;
    line-height:1;
    color:#142850;
}

.peercore-cart-icon .peercore-cart-count{
    position:absolute;
    top:-8px;
    right:-8px;
    min-width:18px;
    height:18px;
    line-height:18px;
    padding:0 5px;
    border-radius:50%;
    background:#b3261e;
    color:#fff;
    font-size:11px;
    font-weight:700;
    text-align:center;
}

/* Fixed header cart icon (includes/cart-icon.php, includes/header-cart.php) */
.cart-icon{
    position:fixed;
    top:20px;
    right:20px;
    z-index:9999;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    line-height:1;
    color:#142850;
    background:transparent;
    border:none;
    text-decoration:none;
    padding:0;
}

.cart-icon .cart-count{
    position:absolute;
    top:-8px;
    right:-8px;
    min-width:18px;
    height:18px;
    line-height:18px;
    padding:0 5px;
    border-radius:50%;
    background:#b3261e;
    color:#fff;
    font-size:11px;
    font-weight:700;
    text-align:center;
}

/* Quantity stepper shown next to Add to Cart for logged-in visitors only
   (product cards + product detail page - see those templates). */
.peercore-add-to-cart-row{
display:flex;
align-items:center;
gap:10px;
margin-top:auto;
}

/* The default card's and product detail page's Add to Cart button are
   width:100% on their own (to fill the card/buy-box before this stepper
   existed) - flex:1 here lets them share the row with the qty box instead
   of overflowing it. Cards without a width:100% button (compact/
   horizontal) are unaffected since flex:1 on an already content-sized
   button is a no-op. */
.peercore-add-to-cart-row .add-cart{
flex:1 1 auto;
width:auto !important;
}

/* !important throughout this box - the theme's own input/button defaults
   (e.g. a generic "inputs stretch full width" rule) otherwise win the
   cascade tie and this renders as an oversized unstyled input with native
   spinner arrows instead of the intended small pill + custom -/+ buttons. */
.peercore-qty-box{
display:inline-flex !important;
align-items:center;
flex-shrink:0;
height: 50px;
width:auto !important;
background:#f1f2f4 !important;
background-image:none !important;
border-radius:8px !important;
border:none !important;
overflow:hidden;
box-sizing:border-box;
}

.peercore-qty-box button{
display:inline-flex !important;
align-items:center;
justify-content:center;
border:none !important;
background:none !important;
background-image:none !important;
box-shadow:none !important;
padding:6px 10px !important;
font-size:20px !important;
font-weight:600 !important;
line-height:1 !important;
color:#142850 !important;
width:auto !important;
height:auto !important;
cursor:pointer;
}

.peercore-qty-box button:hover{
background:#e2e4e8 !important;
}

.peercore-qty-box.is-loading{
opacity:.6;
pointer-events:none;
cursor:wait;
}

.peercore-qty-input{
width:36px !important;
max-width:36px;
flex:none;
box-sizing:border-box;
border:none !important;
background:transparent !important;
text-align:center;
color:#142850;
font-size:14px;
padding:6px 0 !important;
}

.peercore-qty-input{
appearance:textfield;
-moz-appearance:textfield;
}

.peercore-qty-input::-webkit-outer-spin-button,
.peercore-qty-input::-webkit-inner-spin-button{
-webkit-appearance:none;
margin:0;
}

.cart-page table{

background:white;

}

.cart-summary{

margin-top:20px;
display:flex;
justify-content:space-between;
align-items:center;

}

.cart-summary h4{

margin:0;

}

/* Per-control loading state (dimmed + disabled) while that specific qty
   box's own update request is in flight - the /cart/ page's qty-box. */
.qty-box.is-loading{
opacity:.6;
pointer-events:none;
cursor:wait;
}

/* Global "an API call is happening" indicator - a thin bar at the very
   top of the page, shown for every cart API call (see peercoreCartAjax()
   in cart.js), not just Add to Cart. */
#peercore-global-loader{
position:fixed;
top:0;
left:0;
width:100%;
height:3px;
z-index:999999;
pointer-events:none;
overflow:hidden;
}

#peercore-global-loader.is-active::before{
content:"";
display:block;
height:100%;
width:40%;
background:linear-gradient(90deg, rgba(4,107,210,0) 0%, #046bd2 50%, rgba(4,107,210,0) 100%);
animation:peercore-global-loader-slide 1.8s ease-in-out infinite;
}

@keyframes peercore-global-loader-slide{
0%{ transform:translateX(-100%); }
100%{ transform:translateX(350%); }
}

/* Add to Cart loading state - opacity/cursor only, never textContent, since
   some Add to Cart buttons (product detail page) have an SVG icon inside. */
.add-cart.is-loading{
opacity:.6;
pointer-events:none;
cursor:wait;
}

/* Toast (small auto-dismissing notification, used instead of alert()) */
.peercore-toast{
position:fixed;
top:24px;
left:50%;
z-index:100010;
background:#1e8e3e;
color:#fff;
padding:14px 20px;
border-radius:10px;
font-size:14px;
font-weight:500;
max-width:320px;
box-shadow:0 10px 30px rgba(0,0,0,.2);
opacity:0;
transform:translate(-50%, -10px);
transition:opacity .25s ease, transform .25s ease;
}

.peercore-toast.is-visible{
opacity:1;
transform:translate(-50%, 0);
}

.peercore-toast--error{
background:#b3261e;
}

.peercore-toast--warning{
background:#c77c02;
}