/* ==========================================================================
   Cart Pharma — Frontend Styles
   Plugin:  Cart Pharma 1.0.0
   Author:  Devzord
   Color palette: #8F4EC8 (Purple) / #ffffff (White) / #000000 (Black)
   ========================================================================== */

/* ── Default CSS custom properties (overridden by inline block from PHP) ─── */
:root {
  --cp-primary:          #8F4EC8;
  --cp-accent:           #ffffff;
  --cp-icon-color:       #8F4EC8;
  --cp-badge-bg:         #8F4EC8;
  --cp-badge-text:       #ffffff;
  --cp-float-bg:           #8F4EC8;
  --cp-float-size:         56px;
  --cp-float-hover-bg:     #7a3db0;
  --cp-float-hover-icon:   #ffffff;
  --cp-trigger-bg:         transparent;
  --cp-trigger-hover-bg:   #f3eaff;
  --cp-trigger-hover-icon: #8F4EC8;
  --cp-gradient-opacity: 0.6;
  --cp-radius-btn:       50px;
  --cp-drawer-width:     420px;
  --cp-speed:            350ms;
  --cp-icon-size:        24px;

  /* Derived palette */
  --cp-primary-dark:  #6d3a9a;
  --cp-primary-light: #f3eaff;
  --cp-black:         #0f0f0f;
  --cp-white:         #ffffff;
  --cp-surface:       #ffffff;
  --cp-surface-2:     #faf6ff;
  --cp-border:        #e8daf5;
  --cp-text:          #0f0f0f;
  --cp-text-muted:    #6b6b7b;
  --cp-shadow:        0 24px 64px rgba(0, 0, 0, 0.22);
  --cp-radius:        16px;
  --cp-radius-sm:     10px;
  --cp-easing:        cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   CRITICAL: SVG visibility overrides
   Some themes (GeneratePress, Astra, Elementor, WPBakery) ship global CSS
   that hides or resets SVGs. These rules hard-restore our icons.
   ========================================================================= */

.cp-cart-trigger svg,
.cp-drawer svg,
.cp-drawer__close svg,
.cp-drawer__title-icon,
.cp-item__remove svg,
.cp-empty__icon,
.cp-icon {
  display: inline-block !important;
  visibility: visible  !important;
  opacity: 1           !important;
  overflow: visible    !important;
  pointer-events: none;
}

/* Outline icons: protect stroke, kill fill */
.cp-cart-trigger svg path,
.cp-cart-trigger svg line,
.cp-cart-trigger svg circle,
.cp-cart-trigger svg polyline,
.cp-drawer__close svg path,
.cp-drawer__close svg line,
.cp-drawer__title-icon path,
.cp-drawer__title-icon line,
.cp-item__remove svg path,
.cp-item__remove svg polyline,
.cp-item__remove svg line,
.cp-empty__icon path,
.cp-empty__icon circle,
.cp-empty__icon line {
  stroke: currentColor !important;
  fill:   none        !important;
}

/* =========================================================================
   1. Cart Trigger  (<a role="button">)
   ========================================================================= */

.cp-cart-trigger {
  position: relative;
  display:  inline-flex;
  align-items:     center;
  justify-content: center;
  padding: 10px;
  background:   var(--cp-trigger-bg);
  border:       2px solid transparent;
  border-radius: var(--cp-radius-btn);
  cursor:  pointer;
  color:   var(--cp-text);
  text-decoration: none;
  line-height: 1;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    color         var(--cp-speed) var(--cp-easing),
    background    var(--cp-speed) var(--cp-easing),
    border-color  var(--cp-speed) var(--cp-easing),
    transform     200ms          var(--cp-easing);
}

.cp-cart-trigger:hover,
.cp-cart-trigger:focus-within {
  background:   var(--cp-trigger-hover-bg);
  border-color: var(--cp-border);
  color:        var(--cp-primary);
  transform:    scale(1.05);
  text-decoration: none;
}

.cp-cart-trigger:hover .cp-icon,
.cp-cart-trigger:focus-within .cp-icon {
  color: var(--cp-trigger-hover-icon);
}

.cp-cart-trigger:hover .cp-icon path,
.cp-cart-trigger:hover .cp-icon line,
.cp-cart-trigger:hover .cp-icon circle,
.cp-cart-trigger:hover .cp-icon polyline,
.cp-cart-trigger:focus-within .cp-icon path,
.cp-cart-trigger:focus-within .cp-icon line,
.cp-cart-trigger:focus-within .cp-icon circle,
.cp-cart-trigger:focus-within .cp-icon polyline {
  stroke: var(--cp-trigger-hover-icon) !important;
}

.cp-cart-trigger:active {
  transform: scale(0.96);
}

.cp-cart-trigger:focus-visible {
  outline:        2px solid var(--cp-primary);
  outline-offset: 3px;
}

/* Cart icon SVG — size and colour driven by admin settings */
.cp-icon {
  width:   var(--cp-icon-size) !important;
  height:  var(--cp-icon-size) !important;
  display: block !important;
  flex-shrink: 0;
  color: var(--cp-icon-color);
}

/* Override SVG stroke to the admin-chosen icon colour */
.cp-cart-trigger .cp-icon path,
.cp-cart-trigger .cp-icon line,
.cp-cart-trigger .cp-icon circle,
.cp-cart-trigger .cp-icon polyline {
  stroke: var(--cp-icon-color) !important;
}

/* =========================================================================
   2. Cart Count Badge
   ========================================================================= */

.cp-cart-badge {
  position:   absolute;
  top:   -2px;
  right: -2px;
  min-width: 18px;
  height:    18px;
  padding:   0 4px;
  border-radius: 50px;
  background: var(--cp-badge-bg);
  color:      var(--cp-badge-text);
  font-size:  10px;
  font-weight: 700;
  line-height: 18px;
  text-align:  center;
  display:    flex;
  align-items:     center;
  justify-content: center;
  pointer-events:  none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-shadow:  0 2px 8px rgba(143, 78, 200, 0.45);
  transition:  transform 300ms var(--cp-easing), opacity 300ms var(--cp-easing);
  z-index: 1;
}

.cp-cart-badge.cp-hidden {
  opacity:   0;
  transform: scale(0);
  pointer-events: none;
}

.cp-cart-badge.cp-bump {
  animation: cp-badge-bump 380ms var(--cp-easing);
}

@keyframes cp-badge-bump {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.55); }
  70%  { transform: scale(0.88); }
  100% { transform: scale(1);    }
}

/* =========================================================================
   3. Overlay backdrop
   ========================================================================= */

.cp-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.55);
  z-index:    99998;
  opacity:    0;
  visibility: hidden;
  transition:
    opacity    var(--cp-speed) var(--cp-easing),
    visibility var(--cp-speed) var(--cp-easing);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.cp-overlay.is-open {
  opacity:    1;
  visibility: visible;
}

/* =========================================================================
   4. Drawer
   ========================================================================= */

.cp-drawer {
  position:       fixed;
  top:    0;
  bottom: 0;
  width:          min(var(--cp-drawer-width), 96vw);
  z-index:        99999;
  display:        flex;
  flex-direction: column;
  background:     var(--cp-surface);
  box-shadow:     var(--cp-shadow);
  transition:
    transform   var(--cp-speed) var(--cp-easing),
    visibility  var(--cp-speed) var(--cp-easing);
  will-change:    transform;
  overflow:       hidden;
  /* notched iPhones */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.cp-drawer--right {
  right: 0;
  transform:    translateX(105%);
  border-radius: var(--cp-radius) 0 0 var(--cp-radius);
}

.cp-drawer--left {
  left: 0;
  transform:    translateX(-105%);
  border-radius: 0 var(--cp-radius) var(--cp-radius) 0;
}

.cp-drawer.is-open {
  transform: translateX(0);
}

/* =========================================================================
   5. Drawer Header — black bar with white text + purple accent
   ========================================================================= */

.cp-drawer__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         18px 20px;
  background:      var(--cp-black);
  flex-shrink:     0;
  /* subtle purple underline */
  border-bottom:   3px solid var(--cp-primary);
}

.cp-drawer__title {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   17px;
  font-weight: 700;
  color:       var(--cp-white);
  letter-spacing: -0.01em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.cp-drawer__title-icon {
  width:      20px   !important;
  height:     20px   !important;
  color:      var(--cp-primary);
  flex-shrink: 0;
}

.cp-drawer__count {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width: 22px;
  height:    22px;
  padding:   0 6px;
  border-radius:   50px;
  background:      rgba(143, 78, 200, 0.25);
  border:          1px solid rgba(143, 78, 200, 0.4);
  font-size:  12px;
  font-weight: 600;
  color:      var(--cp-primary);
}

/* Close button — white circle on black header */
.cp-drawer__close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:  36px;
  height: 36px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.1);
  border:        1px solid rgba(255, 255, 255, 0.2);
  cursor:        pointer;
  color:         var(--cp-white);
  flex-shrink:   0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:    background 200ms, color 200ms, transform 200ms, border-color 200ms;
}

.cp-drawer__close svg {
  width:  18px !important;
  height: 18px !important;
  display: block !important;
  color: currentColor;
}

.cp-drawer__close:hover {
  background:   var(--cp-primary);
  border-color: var(--cp-primary);
  color:        var(--cp-white);
  transform:    rotate(90deg);
}

.cp-drawer__close:focus-visible {
  outline:        2px solid var(--cp-primary);
  outline-offset: 2px;
}

/* =========================================================================
   6. Drawer Body
   ========================================================================= */

.cp-drawer__body {
  flex:      1;
  overflow-y: auto;
  overflow-x: hidden;
  padding:   14px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--cp-surface-2);
}

.cp-drawer__body::-webkit-scrollbar           { width: 4px; }
.cp-drawer__body::-webkit-scrollbar-track     { background: transparent; }
.cp-drawer__body::-webkit-scrollbar-thumb     { background: var(--cp-border); border-radius: 4px; }

/* =========================================================================
   7. Loader / Spinner
   ========================================================================= */

.cp-loader {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         60px 0;
}

.cp-loader.cp-hidden { display: none; }

.cp-spinner {
  width:  36px;
  height: 36px;
  border: 3px solid var(--cp-border);
  border-top-color: var(--cp-primary);
  border-radius: 50%;
  animation: cp-spin 700ms linear infinite;
}

@keyframes cp-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   8. Cart Items List
   ========================================================================= */

.cp-items {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.cp-items.cp-hidden  { display: none; }
.cp-items.is-loading { opacity: 0.45; pointer-events: none; }

/* ── Single item card ── */
.cp-item {
  display:               grid;
  grid-template-columns: 76px 1fr;
  gap:     12px;
  padding: 12px;
  background:    var(--cp-white);
  border:        1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  transition:    border-color 200ms, box-shadow 200ms;
  animation:     cp-item-in 280ms var(--cp-easing) both;
}

.cp-item:hover {
  border-color: var(--cp-primary);
  box-shadow:   0 4px 16px rgba(143, 78, 200, 0.08);
}

@keyframes cp-item-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.cp-item__image-wrap { display: block; flex-shrink: 0; }

.cp-item__image {
  width:  76px;
  height: 76px;
  object-fit:    cover;
  border-radius: var(--cp-radius-sm);
  background:    var(--cp-border);
  display:       block;
}

.cp-item__details {
  display:        flex;
  flex-direction: column;
  gap:     5px;
  min-width: 0;
}

.cp-item__name {
  font-size:   13px;
  font-weight: 600;
  color:       var(--cp-text);
  line-height: 1.3;
  text-decoration: none;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  display:        block;
}

.cp-item__name:hover { color: var(--cp-primary); }

.cp-item__variation {
  font-size: 11px;
  color:     var(--cp-text-muted);
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
}

.cp-item__variation span {
  background:    var(--cp-surface-2);
  border:        1px solid var(--cp-border);
  border-radius: 4px;
  padding:       1px 5px;
}

.cp-item__meta {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:       6px;
  margin-top: auto;
}

.cp-item__price {
  font-size:   14px;
  font-weight: 700;
  color:       var(--cp-primary);
}

.cp-item__actions {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
}

/* ── Quantity controls ── */
.cp-qty {
  display:     flex;
  align-items: center;
  border:        1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  overflow:      hidden;
  background:    var(--cp-white);
}

.cp-qty__btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:  30px;
  height: 30px;
  background:   transparent;
  border:        none;
  cursor:        pointer;
  color:         var(--cp-text-muted);
  font-size:     16px;
  font-weight:   700;
  flex-shrink:   0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:    background 150ms, color 150ms;
}

.cp-qty__btn:hover:not(:disabled) {
  background: var(--cp-primary);
  color:      var(--cp-white);
}

.cp-qty__btn:disabled { opacity: 0.3; cursor: not-allowed; }

.cp-qty__input {
  width:      34px;
  text-align: center;
  border:     none;
  border-left:  1px solid var(--cp-border);
  border-right: 1px solid var(--cp-border);
  padding:    0;
  height:     30px;
  font-size:  13px;
  font-weight: 600;
  color:      var(--cp-text);
  background: var(--cp-white);
  -moz-appearance: textfield;
}

.cp-qty__input::-webkit-inner-spin-button,
.cp-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Remove button — always show icon; hover → black/white ── */
.cp-item__remove {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:  30px;
  height: 30px;
  background:    transparent;
  border:        1px solid var(--cp-border);
  border-radius: 6px;
  cursor:        pointer;
  /* explicit color so currentColor drives the SVG stroke */
  color:         var(--cp-text-muted);
  flex-shrink:   0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:    background 150ms, color 150ms, border-color 150ms;
}

.cp-item__remove svg {
  width:   14px !important;
  height:  14px !important;
  display: block !important;
  color:   currentColor;
  /* Never let anything hide the remove X */
  visibility: visible !important;
  opacity:    1       !important;
}

.cp-item__remove:hover {
  background:   var(--cp-black);
  border-color: var(--cp-black);
  color:        var(--cp-white);
}

/* Swap the hard-coded stroke to white on hover so it stays visible */
.cp-item__remove:hover svg,
.cp-item__remove:hover .cp-remove-icon {
  stroke: #ffffff !important;
}

/* =========================================================================
   9. Empty state
   ========================================================================= */

/*
 * Astra (and some other themes) override the [hidden] attribute's default
 * display:none rule, so the empty state stays visible even when there are
 * items. We use an ID + attribute selector to enforce display:none with
 * the highest possible CSS specificity short of !important.
 * jQuery's .show()/.hide() in cart-pharma.js also sets inline display,
 * providing a second layer of protection.
 */
#cp-empty[hidden] {
  display: none !important;
}

.cp-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        48px 24px;
  gap:            14px;
  animation:      cp-item-in 300ms var(--cp-easing) both;
}

.cp-empty__icon {
  width:  72px  !important;
  height: 72px  !important;
  color:  var(--cp-border);
}

.cp-empty p {
  font-size: 14px;
  color:     var(--cp-text-muted);
  margin:    0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.cp-btn-shop {
  display:     inline-flex;
  align-items: center;
  padding:     10px 24px;
  background:  var(--cp-black);
  border:      2px solid var(--cp-black);
  border-radius: 50px;
  font-size:   14px;
  font-weight: 600;
  color:       var(--cp-white);
  text-decoration: none;
  transition:  background 200ms, color 200ms;
  -webkit-tap-highlight-color: transparent;
}

.cp-btn-shop:hover {
  background: var(--cp-primary);
  border-color: var(--cp-primary);
  color: var(--cp-white);
}

.cp-error-msg {
  padding:    20px;
  text-align: center;
  color:      #c0392b;
  font-size:  14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =========================================================================
   10. Drawer Footer
   ========================================================================= */

.cp-drawer__footer {
  border-top:  1px solid var(--cp-border);
  padding:     14px 16px 16px;
  flex-shrink: 0;
  background:  var(--cp-white);
}

.cp-subtotal {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   12px;
  font-size:       14px;
  color:           var(--cp-text-muted);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.cp-subtotal strong {
  font-size:   18px;
  font-weight: 800;
  color:       var(--cp-black);
}

.cp-footer-actions {
  display: flex;
  gap:     8px;
}

/* ── Shared button base ── */
.cp-btn {
  flex:            1;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         13px 12px;
  border-radius:   var(--cp-radius-btn);
  font-size:       14px;
  font-weight:     700;
  text-decoration: none;
  cursor:          pointer;
  border:          2px solid transparent;
  white-space:     nowrap;
  letter-spacing:  0.01em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background    var(--cp-speed) var(--cp-easing),
    border-color  var(--cp-speed) var(--cp-easing),
    color         var(--cp-speed) var(--cp-easing),
    transform     150ms          var(--cp-easing),
    box-shadow    var(--cp-speed) var(--cp-easing);
}

.cp-btn:hover  { transform: translateY(-1px); text-decoration: none; }
.cp-btn:active { transform: translateY(0);   }

/* View Cart — white with black border, black text → hover black/white */
.cp-btn--outline {
  background:   var(--cp-white);
  border-color: var(--cp-black);
  color:        var(--cp-black);
}

.cp-btn--outline:hover {
  background:   var(--cp-black);
  border-color: var(--cp-black);
  color:        var(--cp-white);
  box-shadow:   0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Checkout — solid purple + white text */
.cp-btn--primary {
  background:   var(--cp-primary);
  border-color: var(--cp-primary);
  color:        var(--cp-white);
  box-shadow:   0 4px 14px rgba(143, 78, 200, 0.35);
}

.cp-btn--primary:hover {
  background:   var(--cp-primary-dark);
  border-color: var(--cp-primary-dark);
  box-shadow:   0 6px 20px rgba(143, 78, 200, 0.5);
  color:        var(--cp-white);
}

/* =========================================================================
   11. Body scroll lock
   ========================================================================= */

body.cp-locked {
  overflow: hidden;
  padding-right: var(--cp-scrollbar-width, 0px);
}

/* =========================================================================
   12. Responsive — Tablet (≤ 768px)
   ========================================================================= */

@media screen and (max-width: 768px) {
  .cp-drawer { width: min(var(--cp-drawer-width), 88vw); }
  .cp-drawer__header { padding: 14px 16px; }
  .cp-drawer__title  { font-size: 16px; }
  .cp-drawer__body   { padding: 12px; }

  .cp-item {
    grid-template-columns: 68px 1fr;
    gap:     10px;
    padding: 10px;
  }
  .cp-item__image, .cp-item__image-wrap img { width: 68px; height: 68px; }
  .cp-btn { padding: 12px 10px; font-size: 13px; }
  .cp-drawer__footer { padding: 12px 14px 14px; }
}

/* =========================================================================
   13. Responsive — Mobile (≤ 480px) — full-width drawer
   ========================================================================= */

@media screen and (max-width: 480px) {
  .cp-drawer { width: 100vw !important; }
  .cp-drawer--right, .cp-drawer--left { border-radius: 0 !important; }
  .cp-drawer__header { padding: 14px; }
  .cp-drawer__body   { padding: 10px 12px; }

  .cp-item {
    grid-template-columns: 60px 1fr;
    gap:     10px;
    padding: 10px;
  }
  .cp-item__image, .cp-item__image-wrap img { width: 60px; height: 60px; }
  .cp-item__meta    { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cp-item__actions { width: 100%; justify-content: space-between; }

  .cp-footer-actions { flex-direction: column; gap: 8px; }
  .cp-btn            { width: 100%; padding: 14px; font-size: 14px; }

  .cp-drawer__footer {
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .cp-subtotal { font-size: 13px; }
  .cp-subtotal strong { font-size: 16px; }
  .cp-empty   { padding: 40px 16px; }
}

/* =========================================================================
   14. Responsive — Small phones (≤ 360px)
   ========================================================================= */

@media screen and (max-width: 360px) {
  .cp-drawer__title  { font-size: 14px; gap: 7px; }
  .cp-drawer__close  { width: 32px; height: 32px; }

  .cp-item {
    grid-template-columns: 52px 1fr;
    gap: 8px;
  }
  .cp-item__image, .cp-item__image-wrap img { width: 52px; height: 52px; }
  .cp-item__name { font-size: 12px; }

  .cp-qty__btn   { width: 26px; height: 26px; font-size: 14px; }
  .cp-qty__input { width: 28px; height: 26px; font-size: 12px; }
}

/* =========================================================================
   15. Floating Draggable Cart Button
   ========================================================================= */

.cp-float-trigger {
  position:   fixed;
  z-index:    99997;
  width:      var(--cp-float-size);
  height:     var(--cp-float-size);
  border-radius: 50%;
  background: var(--cp-float-bg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.18);
  display:    flex;
  align-items:     center;
  justify-content: center;
  cursor:     grab;
  border:     none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow 200ms, transform 200ms;
  /* default position — overridden by JS localStorage restore */
  bottom: 24px;
  right:  24px;
}

.cp-float-trigger:hover {
  background: var(--cp-float-hover-bg);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35), 0 3px 12px rgba(0, 0, 0, 0.2);
  transform:  scale(1.06);
  text-decoration: none;
}

.cp-float-trigger:hover .cp-icon {
  color: var(--cp-float-hover-icon);
}

.cp-float-trigger:hover .cp-icon path,
.cp-float-trigger:hover .cp-icon line,
.cp-float-trigger:hover .cp-icon circle {
  stroke: var(--cp-float-hover-icon) !important;
}

/* ── No-background mode: icon floats freely with no circle ── */
.cp-float-trigger.cp-float-no-bg {
  background:    transparent !important;
  box-shadow:    none !important;
  border-radius: 0 !important;
}

.cp-float-trigger.cp-float-no-bg:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform:  scale(1.12);
}

.cp-float-trigger.cp-float-no-bg .cp-icon {
  color: var(--cp-float-bg);
}

.cp-float-trigger.cp-float-no-bg .cp-icon path,
.cp-float-trigger.cp-float-no-bg .cp-icon line,
.cp-float-trigger.cp-float-no-bg .cp-icon circle {
  stroke: var(--cp-float-bg) !important;
}

.cp-float-trigger.cp-float-no-bg:hover .cp-icon {
  color: var(--cp-float-hover-icon);
}

.cp-float-trigger.cp-float-no-bg:hover .cp-icon path,
.cp-float-trigger.cp-float-no-bg:hover .cp-icon line,
.cp-float-trigger.cp-float-no-bg:hover .cp-icon circle {
  stroke: var(--cp-float-hover-icon) !important;
}

.cp-float-trigger:active,
.cp-float-trigger.is-dragging {
  cursor:    grabbing;
  transform: scale(0.96);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: none;
}

/* Float icon — always white on the coloured background */
.cp-float-trigger .cp-icon {
  width:  calc(var(--cp-float-size) * 0.42) !important;
  height: calc(var(--cp-float-size) * 0.42) !important;
  color:  #ffffff;
}

.cp-float-trigger .cp-icon path,
.cp-float-trigger .cp-icon line,
.cp-float-trigger .cp-icon circle {
  stroke: #ffffff !important;
}

/* Badge on the floating button */
.cp-float-trigger .cp-cart-badge {
  top:   -3px;
  right: -3px;
  min-width: 20px;
  height:    20px;
  line-height: 20px;
  font-size: 11px;
}

/* Drag hint tooltip — shows briefly on first load */
.cp-float-hint {
  position: fixed;
  z-index:  99996;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 300ms;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.cp-float-hint.is-visible { opacity: 1; }

/* =========================================================================
   16. Admin panel — section subtitle (used in settings page)
   ========================================================================= */

/* =========================================================================
   17. Add-to-Cart Toast Notifications
   ========================================================================= */

/* Wrapper — stacks toasts from the top-right */
.cp-toast-wrap {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 320px;
  width: calc(100vw - 48px);
}

/* Individual toast card */
.cp-toast {
  background: #ffffff;
  border: 1px solid #e8daf5;
  border-left: 3px solid var(--cp-primary, #8F4EC8);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
  pointer-events: all;
  animation: cp-toast-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Product thumbnail */
.cp-toast__img {
  width: 48px;
  height: 48px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #f0e6ff;
}

/* Fallback checkmark circle (when no image) */
.cp-toast__icon {
  width: 36px;
  height: 36px;
  background: var(--cp-primary, #8F4EC8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Text body */
.cp-toast__body {
  flex: 1;
  min-width: 0;
}

.cp-toast__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cp-primary, #8F4EC8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin: 0 0 3px;
}

.cp-toast__name {
  font-size: 13px;
  font-weight: 600;
  color: #0f0f0f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 5px;
  line-height: 1.3;
}

.cp-toast__link {
  font-size: 11px;
  color: var(--cp-primary, #8F4EC8);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 150ms;
  display: inline-block;
}

.cp-toast__link:hover { opacity: 0.75; }

/* Close button */
.cp-toast__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #6b6b7b;
  border-radius: 50%;
  padding: 0;
  transition: background 150ms, color 150ms;
}

.cp-toast__close:hover {
  background: #f3eaff;
  color: var(--cp-primary, #8F4EC8);
}

/* Animations */
@keyframes cp-toast-in {
  from { opacity: 0; transform: translateX(24px) scale(0.94); }
  to   { opacity: 1; transform: translateX(0)    scale(1);    }
}

@keyframes cp-toast-out {
  from { opacity: 1; transform: translateX(0)    scale(1);    max-height: 100px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(24px) scale(0.94); max-height: 0;     margin-bottom: -10px; padding-top: 0; padding-bottom: 0; }
}

.cp-toast.is-leaving {
  animation: cp-toast-out 300ms ease forwards;
  pointer-events: none;
  overflow: hidden;
}

/* Mobile: anchor to bottom-right with slightly smaller cards */
@media (max-width: 480px) {
  .cp-toast-wrap {
    top: auto;
    bottom: 90px;
    right: 12px;
    left: 12px;
    max-width: none;
    width: auto;
  }
}

/* =========================================================================
   18. Utility
   ========================================================================= */

.cp-hidden { display: none !important; }