/* ============================================================================
   POZECON SHOP THEME — centralized theme (loaded site-wide from header.php)
   ----------------------------------------------------------------------------
   TO CHANGE THE SHOP LOOK: edit only the "THEME TOKENS" block below.
   Every button, price, badge, chip, hero, icon tint and status color in the
   shop (and the shared chrome buttons) derives from these variables — no
   other file needs to change.
   ============================================================================ */

:root{
  /* ============================== THEME TOKENS ============================== */

  /* --- Brand accent (main color: CTA buttons, prices, active chips, links) --- */
  --sp-accent:            #6d28d9;              /* solid accent (buttons, price text) */
  --sp-accent-strong:     #5b21b6;              /* hover / pressed state */
  --sp-accent-deep:       #4c1d95;              /* gradient start (hero left/top) */
  --sp-accent-soft:       #7c3aed;              /* gradient end (hero right/bottom) */
  --sp-accent-tint:       rgba(109,40,217,.10); /* soft accent background (badges, chips) */
  --sp-accent-tint-strong:rgba(109,40,217,.20); /* stronger tint (borders, rings) */
  --sp-on-accent:         #ffffff;              /* text/icon color on accent surfaces */

  /* --- Status colors (soft tinted pairs: background + text) --- */
  --sp-success:      #047857;  --sp-success-bg: rgba(5,150,105,.12);   /* paid, delivered */
  --sp-warning:      #b45309;  --sp-warning-bg: rgba(217,119,6,.14);   /* COD unpaid, shipped */
  --sp-danger:       #b91c1c;  --sp-danger-bg:  rgba(220,38,38,.11);   /* cancelled, out of stock */
  --sp-info:         #0369a1;  --sp-info-bg:    rgba(2,132,199,.12);   /* confirmed */
  --sp-slate:        #475569;  --sp-slate-bg:   rgba(71,85,105,.12);   /* placed, neutral */

  /* --- Shape & effects --- */
  --sp-radius:       16px;     /* card radius */
  --sp-radius-btn:   10px;     /* button radius */
  --sp-radius-pill:  999px;    /* chips, badges */
  --sp-card-shadow:  0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
  --sp-card-shadow-hover: 0 4px 8px rgba(15,23,42,.07), 0 16px 32px rgba(15,23,42,.12);

  /* --- Thumbnail placeholders --- */
  --sp-thumb-bg:     #eef0f5;

  /* ========================== END THEME TOKENS ============================== */

  /* Dark-mode readable variants */
  --sp-accent-text:  var(--sp-accent);
}

[data-bs-theme="dark"]{
  --sp-accent-text: #a78bfa;                    /* lighter violet for prices/text on dark cards */
  --sp-accent-tint: rgba(139,92,246,.16);
  --sp-accent-tint-strong: rgba(139,92,246,.30);
  --sp-card-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --sp-card-shadow-hover: 0 4px 8px rgba(0,0,0,.45), 0 16px 32px rgba(0,0,0,.5);
  --sp-thumb-bg: #2a2d34;
}

/* ============================ SHARED CHROME ================================ */
/* Site chrome visible on every page follows the same accent                */

/* Bottom-nav primary button (Apps launcher) */
.fixed-bottom .btn-primary{background:var(--sp-accent);border-color:var(--sp-accent)}
.fixed-bottom .btn-primary:hover,.fixed-bottom .btn-primary:focus{background:var(--sp-accent-strong);border-color:var(--sp-accent-strong)}

/* Consent bar "I Agree" button */
.pc-consent-btn{background:var(--sp-accent)!important;border-color:var(--sp-accent)!important}
.pc-consent-btn:hover,.pc-consent-btn:focus{background:var(--sp-accent-strong)!important;border-color:var(--sp-accent-strong)!important}
.pc-consent-txt a{color:var(--sp-accent)!important}

/* ============================== SHOP PAGES ================================= */

/* Quick links strip (compact action cards, horizontally scrollable) */
.sp-quicklinks{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;margin:-4px -2px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sp-quicklinks::-webkit-scrollbar{display:none}
.sp-ql{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-width:150px;padding:12px 14px;border-radius:14px;background:var(--bs-body-bg);border:1px solid rgba(15,23,42,.07);box-shadow:var(--sp-card-shadow);text-decoration:none;color:var(--bs-body-color);transition:transform .15s ease,box-shadow .15s ease}
[data-bs-theme="dark"] .sp-ql{border-color:rgba(255,255,255,.09)}
.sp-ql:hover{transform:translateY(-2px);box-shadow:var(--sp-card-shadow-hover);color:var(--bs-body-color);text-decoration:none}
.sp-ql>i{font-size:22px;color:var(--sp-accent);flex:0 0 auto}
.sp-ql-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.sp-ql-txt small{font-size:11px;color:var(--bs-secondary-color);text-transform:uppercase;letter-spacing:.03em}
.sp-ql-txt strong{font-size:14px;font-weight:700;white-space:nowrap}
.sp-ql-balance .sp-ql-txt strong{color:var(--sp-accent-text)}
.sp-ql-add{margin-left:auto;flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sp-accent);color:var(--sp-on-accent);font-size:12px}
.sp-ql-badge{flex:0 0 auto;background:var(--sp-accent);color:var(--sp-on-accent);font-size:.72rem;font-weight:700;margin-left:auto}

/* Product cards */
.sp-card{border:1px solid rgba(15,23,42,.06);border-radius:var(--sp-radius);box-shadow:var(--sp-card-shadow);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.sp-card:hover{transform:translateY(-3px);box-shadow:var(--sp-card-shadow-hover)}
[data-bs-theme="dark"] .sp-card{border-color:rgba(255,255,255,.08)}
.sp-thumb{background:var(--sp-thumb-bg);object-fit:cover}
.sp-thumb-fallback{height:170px;display:flex;align-items:center;justify-content:center;color:#9aa3b2;background:linear-gradient(135deg,rgba(15,23,42,.04),rgba(15,23,42,.09))}
[data-bs-theme="dark"] .sp-thumb-fallback{color:#6b7280;background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.08))}

/* Price + points text */
.sp-price{font-size:1.05rem;font-weight:800;color:var(--sp-accent-text)}
.sp-price-big{font-size:1.7rem;font-weight:800;color:var(--sp-accent-text)}
.sp-pts{color:var(--sp-accent-text)}

/* Card meta + badges */
.sp-title{font-size:.92rem;min-height:2.4em}
.sp-badge{font-size:.68rem;font-weight:600;padding:.34em .7em;border-radius:var(--sp-radius-pill);background:var(--sp-accent-tint);color:var(--sp-accent-text)}
.sp-meta{display:flex;flex-wrap:wrap;gap:.35rem;min-height:1.4rem}

/* Tinted status badges (replace solid Bootstrap bg-* badges) */
.sp-st-accent{background:var(--sp-accent-tint);color:var(--sp-accent-text)}
.sp-st-success{background:var(--sp-success-bg);color:var(--sp-success)}
.sp-st-warning{background:var(--sp-warning-bg);color:var(--sp-warning)}
.sp-st-danger{background:var(--sp-danger-bg);color:var(--sp-danger)}
.sp-st-info{background:var(--sp-info-bg);color:var(--sp-info)}
.sp-st-slate{background:var(--sp-slate-bg);color:var(--sp-slate)}
[data-bs-theme="dark"] .sp-st-success{color:#6ee7b7}
[data-bs-theme="dark"] .sp-st-warning{color:#fcd34d}
[data-bs-theme="dark"] .sp-st-danger{color:#fca5a5}
[data-bs-theme="dark"] .sp-st-info{color:#7dd3fc}
[data-bs-theme="dark"] .sp-st-slate{color:#cbd5e1}

/* Accent buttons (CTAs) */
.sp-btn{background:var(--sp-accent);color:var(--sp-on-accent);border-radius:var(--sp-radius-btn);border:0}
.sp-btn:hover,.sp-btn:focus{background:var(--sp-accent-strong);color:var(--sp-on-accent)}
.sp-btn:hover{text-decoration:none}

/* Add-to-cart button on cards */
.sp-add{background:var(--sp-accent);color:var(--sp-on-accent);border-radius:var(--sp-radius-btn);border:0}
.sp-add:hover,.sp-add:focus{background:var(--sp-accent-strong);color:var(--sp-on-accent)}

/* Accent-colored icons (replaces text-primary) */
.sp-ico{color:var(--sp-accent)}

/* Category chips (outlined pills; tinted when active) */
.sp-chip{font-size:.82rem;font-weight:500;border-radius:var(--sp-radius-pill);padding:.32rem .85rem;white-space:nowrap;background:transparent;color:var(--bs-secondary-color);border:1px solid var(--bs-border-color);transition:background .15s ease,color .15s ease,border-color .15s ease}
.sp-chip:hover{background:var(--sp-accent-tint);color:var(--sp-accent-text);border-color:var(--sp-accent-tint-strong)}
.sp-chip.active{background:var(--sp-accent);color:var(--sp-on-accent);border-color:var(--sp-accent)}

/* Sticky filter bar (shop listing) */
.sp-filterbar{position:sticky;top:56px;z-index:1020;background:var(--bs-body-bg,#fff);border-bottom:1px solid var(--bs-border-color)}

/* Product page: gallery thumbnail active state */
.sp-thumb-img{width:70px;height:56px;object-fit:cover;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:border-color .15s ease}
.sp-thumb-img.active{border-color:var(--sp-accent)}

/* Checkout: payment option selected state */
.sp-pay-option{border:2px solid var(--bs-border-color);border-radius:12px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.sp-pay-option.active{border-color:var(--sp-accent);background:var(--sp-accent-tint)}

/* Order tracking steps */
.sp-order-card{border:1px solid rgba(15,23,42,.06);border-radius:16px;box-shadow:var(--sp-card-shadow)}
[data-bs-theme="dark"] .sp-order-card{border-color:rgba(255,255,255,.08)}
.sp-step{flex:1;text-align:center;position:relative;font-size:.72rem;color:var(--bs-secondary-color)}
.sp-step .dot{width:34px;height:34px;border-radius:50%;background:var(--sp-slate-bg);color:var(--sp-slate);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-size:14px;position:relative;z-index:2}
.sp-step.done .dot{background:var(--sp-success-bg);color:var(--sp-success)}
.sp-step.current .dot{background:var(--sp-accent);color:var(--sp-on-accent);box-shadow:0 0 0 5px var(--sp-accent-tint-strong)}
.sp-step.done,.sp-step.current{color:var(--bs-body-color);font-weight:600}
.sp-step::before{content:"";position:absolute;top:17px;left:-50%;width:100%;height:3px;background:var(--sp-slate-bg);z-index:1}
.sp-step:first-child::before{display:none}
.sp-step.done::before,.sp-step.current::before{background:var(--sp-success)}

/* Orders page: status filter pills (reuse chip look) */
.sp-filter{font-size:.82rem;font-weight:500;border-radius:var(--sp-radius-pill);padding:.32rem .85rem;background:transparent;color:var(--bs-secondary-color);border:1px solid var(--bs-border-color)}
.sp-filter:hover{background:var(--sp-accent-tint);color:var(--sp-accent-text);border-color:var(--sp-accent-tint-strong)}
.sp-filter.active{background:var(--sp-accent);color:var(--sp-on-accent);border-color:var(--sp-accent)}