/* ===============================================
   EVERSIGN® Custom Price List Pro — Core Styles
   File: assets/eversign-cpl.css
   =============================================== */

/* Base palette and tokens */
.eversign-cpl-wrap{
  --bg:#fff;
  --text:#0f172a;
  --muted:#6b7280;
  --line:#eef2f7;
  --chip:#f7f9fc;
  --btn:#ffffff;
  --btn-bd:#e1e5ea;
  --btn-tx:#111827;
  --btn-hover:#f3f4f6;
  --accent:var(--evcpl-accent,#2563eb);
  color:var(--text);
}

/* Table */
.eversign-cpl-wrap table{width:100%;border-collapse:collapse;background:var(--bg)}
.eversign-cpl-wrap th,.eversign-cpl-wrap td{border-bottom:1px solid var(--line);padding:.6rem .7rem;text-align:left;vertical-align:middle}
.eversign-cpl-wrap thead th{font-weight:700;letter-spacing:.02em;background:#f8fafc;cursor:pointer;position:sticky;top:0;z-index:5}
.eversign-cpl-wrap thead th:hover{background:#f3f6fb}
.eversign-cpl-wrap .ev-num{text-align:right}
.eversign-cpl-spinner{font-weight:600;opacity:.6}

/* Toolbar */
.eversign-cpl-toolbar{
  display:grid;
  grid-template-columns:minmax(220px,1.2fr) repeat(3,auto) 1fr repeat(2,auto);
  gap:.6rem;align-items:center;margin:.9rem 0
}
.eversign-cpl-toolbar .ev-flex{min-width:10px}
.eversign-cpl-toolbar input[type="search"]{
  width:100%;border:1px solid var(--btn-bd);padding:.55rem .75rem;border-radius:10px
}
.eversign-cpl-toolbar .ev-btn{
  display:inline-flex;gap:.4rem;align-items:center;justify-content:center;
  border:1px solid var(--btn-bd);background:var(--btn);color:var(--btn-tx);
  padding:.5rem .9rem;border-radius:10px;font-weight:600;cursor:pointer;transition:background .15s ease
}
.eversign-cpl-toolbar .ev-btn:hover{background:var(--btn-hover)}
.eversign-cpl-toolbar .ev-btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent) }
.eversign-cpl-toolbar .ev-btn.ghost{background:var(--chip)}
.ev-btn-link{ color: var(--accent); text-decoration: underline; font-weight:600 }

/* Group sections */
.eversign-cpl-group-head{
  display:flex;justify-content:space-between;align-items:center;
  background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;
  padding:.5rem .75rem;margin:.5rem 0
}
.eversign-cpl-section.collapsed .eversign-cpl-table-wrap{display:none}

/* Table container */
.eversign-cpl-wrap .eversign-cpl-table-wrap{max-width:100%; overflow:auto}

/* Price styling */
.ev-sale{font-weight:700}
.ev-del{text-decoration:line-through; opacity:.6}

/* Themes */

/* Soft */
.eversign-cpl-wrap.theme-soft{
  --line:#eef2ff; --chip:#f8fafc; --btn-bd:#e5e7eb; --btn-hover:#f3f4f6; --accent:var(--evcpl-accent,#2563eb)
}

/* Glass */
.eversign-cpl-wrap.theme-glass{
  --bg:rgba(255,255,255,.65); backdrop-filter:saturate(140%) blur(8px);
  --line:rgba(0,0,0,.06); --chip:rgba(255,255,255,.6); --btn-bd:rgba(0,0,0,.08);
  --btn-hover:rgba(255,255,255,.8); --accent:var(--evcpl-accent,#0ea5e9);
}

/* Contrast (dark) */
.eversign-cpl-wrap.theme-contrast{
  --bg:#0b1220; --text:#e5e7eb; --line:#1f2937; --chip:#0f172a;
  --btn:#0f172a; --btn-bd:#253043; --btn-tx:#e5e7eb; --btn-hover:#111a2b;
  --accent:var(--evcpl-accent,#f59e0b);
}
.eversign-cpl-wrap.theme-contrast thead th{background:#111827}
.eversign-cpl-wrap.theme-contrast a{color:#c7d2fe}

/* Minimal Carded */
.eversign-cpl-wrap.theme-carded .ev-table{border-collapse:separate;border-spacing:0 10px}
.eversign-cpl-wrap.theme-carded tbody tr{background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.eversign-cpl-wrap.theme-carded td,.eversign-cpl-wrap.theme-carded th{border:none}
.eversign-cpl-wrap.theme-carded tbody tr td:first-child{border-radius:12px 0 0 12px;position:relative}
.eversign-cpl-wrap.theme-carded tbody tr td:last-child{border-radius:0 12px 12px 0}
.eversign-cpl-wrap.theme-carded tbody tr:hover{transform:translateY(-1px); transition:transform .18s ease}
.eversign-cpl-wrap.theme-carded tbody tr td:first-child:before{
  content:"";position:absolute;left:-2px;top:8px;bottom:8px;width:4px;border-radius:4px;
  background:linear-gradient(180deg,#60a5fa,#8b5cf6)
}

/* Gradient Glass wrapper accent */
.eversign-cpl-wrap.theme-gradient{
  background:linear-gradient(135deg, rgba(56,189,248,.18), rgba(168,85,247,.14));
  border:1px solid rgba(255,255,255,.35);box-shadow:0 10px 40px rgba(67,56,202,.15) inset;
  border-radius:16px; padding:12px;
}
.eversign-cpl-wrap.theme-gradient thead th{
  background:linear-gradient(90deg, rgba(56,189,248,.2), rgba(168,85,247,.2))
}

/* Material Bold */
.eversign-cpl-wrap.theme-material thead th{
  background:#0f172a; color:#fff; text-transform:uppercase; letter-spacing:.06em
}
.eversign-cpl-wrap.theme-material tbody tr:nth-child(odd){background:#f9fafb}

/* Corporate Pro */
.eversign-cpl-wrap.theme-corporate .ev-btn{
  background:linear-gradient(#ffffff, #f5f7fb); border:1px solid #dae1ea; border-radius:8px
}
.eversign-cpl-wrap.theme-corporate .ev-btn:hover{background:linear-gradient(#ffffff, #eef2f7)}

/* Print */
@media print{
  .eversign-cpl-toolbar,.eversign-cpl-pager{display:none!important}
}

/* ===== UI icons & small tweaks ===== */

/* Keep icons small & predictable everywhere (prevents upscaling) */
.eversign-cpl-wrap .ev-icon,
.eversign-cpl-wrap .ev-btn .ev-icon {
  width:16px; height:16px; display:inline-block; vertical-align:middle; flex:0 0 16px;
}
.eversign-cpl-wrap .ev-btn .ev-icon + span { margin-left:.4rem }

/* Search icon inside input (small, fixed) */
.eversign-cpl-wrap .ev-input-wrap.has-icon { position:relative }
.eversign-cpl-wrap .ev-input-wrap.has-icon .ev-icon.search {
  position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
  opacity:.55; pointer-events:none; width:16px; height:16px;
}
.eversign-cpl-wrap .ev-input-wrap.has-icon input[type="search"] { padding-left:2rem }

/* Optional: live-search loader (JS toggles .is-loading on .ev-input-wrap) */
.eversign-cpl-wrap .ev-input-wrap.is-loading::after{
  content:""; position:absolute; right:.55rem; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border:2px solid #cbd5e1; border-top-color:var(--accent);
  border-radius:50%; animation:evcpl-spin .75s linear infinite;
}
@keyframes evcpl-spin { to { transform:translateY(-50%) rotate(360deg) } }

/* Group toggle chevron rotates when collapsed */
.eversign-cpl-group-head .chev { transition: transform .18s ease; width:14px; height:14px }
.eversign-cpl-section.collapsed .chev { transform: rotate(-90deg) }

/* Make group toggle buttons compact */
.evcpl-toggle-sec.ev-btn.ghost { padding:.35rem .55rem }

/* Brand link styling (linked brand archives) */
.eversign-cpl-wrap a.ev-brand-link{
  color:var(--text); text-decoration:none; border-bottom:1px dotted #cbd5e1;
}
.eversign-cpl-wrap a.ev-brand-link:hover{
  color:var(--accent); border-bottom-color:var(--accent);
}

/* Pager small polish (keeps spacing consistent) */
.eversign-cpl-wrap .eversign-cpl-pager{ display:flex; gap:8px; justify-content:flex-end; margin:10px 0 }
.eversign-cpl-wrap .eversign-cpl-pager .ev-btn{ padding:.45rem .75rem }

/* --- Typing Loader (3 dots) --- */
.ev-typing-loader{ display:flex; gap:.3rem; align-items:center; justify-content:center; padding:1rem; }
.ev-typing-loader span{ width:.45rem; height:.45rem; border-radius:50%; background:var(--evcpl-accent, #00A859); display:inline-block; opacity:.6; animation:evcpl-bounce 1s infinite; }
.ev-typing-loader span:nth-child(2){ animation-delay:.15s }
.ev-typing-loader span:nth-child(3){ animation-delay:.3s }
@keyframes evcpl-bounce { 0%,80%,100%{ transform:scale(0.7); opacity:.4 } 40%{ transform:scale(1.0); opacity:1 } }


/* Button styles in table cells (not just toolbar) */
.eversign-cpl-wrap .ev-btn{
  display:inline-flex;gap:.4rem;align-items:center;justify-content:center;
  border:1px solid var(--btn-bd);background:var(--btn);color:var(--btn-tx);
  padding:.4rem .75rem;border-radius:9px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease
}
.eversign-cpl-wrap .ev-btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent) }

/* Group head enhancements */
.eversign-cpl-group-head{
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg, #f9fbff 0%, #f1f5ff 100%);
  border:1px solid #dbe4ff; border-radius:12px; padding:.6rem .85rem; margin:.7rem 0;
}
.eversign-cpl-group-head .label{
  font-size:1.05rem; font-weight:700; letter-spacing:.2px; color:#0f172a;
}
/* When grouping by category, make label a bit larger for emphasis */
.eversign-cpl-group-head[data-group-type="category"] .label{
  font-size:1.15rem;
}
/* Chev anim already present; ensure collapsed rotates */
.eversign-cpl-section.collapsed .chev{ transform:rotate(-90deg) }


/* Column alignment */
.eversign-cpl-table th[data-col="price"], .eversign-cpl-table td[data-col="price"]{ text-align:right; white-space:nowrap }
.eversign-cpl-table th[data-col="link"], .eversign-cpl-table td[data-col="link"]{ text-align:center; width:128px }


/* Brand logo inside group head */
.eversign-cpl-group-head .ev-brand-logo{
  width:28px; height:28px; object-fit:contain; border-radius:6px; margin-right:.55rem; flex:0 0 auto;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
/* Slightly bigger when grouped by brand */
.eversign-cpl-group-head[data-group-type="brand"] .ev-brand-logo{
  width:32px; height:32px;
}
.eversign-cpl-group-head .label{
  display:flex; align-items:center; gap:.55rem;
}

/* Sticky header (enabled via admin option) */
.eversign-cpl-wrap.sticky thead th{
  position: sticky; top: 0; z-index: 3;
  background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

/* Column picker panel */
.ev-colpanel{
  position:absolute; margin-top:.4rem; padding:.6rem .7rem; background:#fff;
  border:1px solid rgba(0,0,0,.08); border-radius:10px; box-shadow:0 12px 24px rgba(16,24,40,.08);
}
.ev-colrow{ display:block; font-size:.92rem; line-height:1.8; white-space:nowrap }

/* Hide chosen columns */
.eversign-cpl-table .hidden-col{ display:none }

/* Compact mode for small screens */
@media (max-width: 520px){
  .eversign-cpl-wrap.compact .eversign-cpl-table td[data-col="brand"],
  .eversign-cpl-wrap.compact .eversign-cpl-table td[data-col="sku"],
  .eversign-cpl-wrap.compact .eversign-cpl-table th[data-col="brand"],
  .eversign-cpl-wrap.compact .eversign-cpl-table th[data-col="sku"]{ display:none }
  .eversign-cpl-wrap.compact .eversign-cpl-table td[data-col="product"]{ max-width: 80vw }
}

/* Group meta badges */
.eversign-cpl-group-head .ev-group-count{ font-weight:600; color:#334155; margin-left:.35rem }
.eversign-cpl-group-head .ev-group-totals{ font-weight:700; margin-left:.5rem; color:#0f172a }
.eversign-cpl-group-head .ev-group-totals .reg{ opacity:.8 }
.eversign-cpl-group-head .ev-group-totals .sale{ color:#047857 }

/* Search input polish */
.eversign-cpl-toolbar input[type="search"]{ height:44px; line-height:44px }
.eversign-cpl-wrap .ev-input-wrap.has-icon .ev-icon.search{
  position:absolute; left:.6rem; right:auto; top:50%; transform:translateY(-50%);
}
/* Optional: place icon on the right if container has .icon-right */
.eversign-cpl-wrap .ev-input-wrap.has-icon.icon-right .ev-icon.search{
  left:auto; right:.6rem;
}
.eversign-cpl-wrap .ev-input-wrap.has-icon.icon-right input[type="search"]{
  padding-left:.75rem; padding-right:2rem;
}

/* Hide per-section chip label, rely on header click */
.eversign-cpl-group-head .evcpl-toggle-sec{ display:none }

/* Ensure input wrapper is positioned for icons/spinner */
.eversign-cpl-wrap .ev-input-wrap{ position:relative; display:inline-block; }
.eversign-cpl-wrap .ev-input-wrap input[type="search"]{ padding-left:2.2rem; }
/* Spinner shown while typing */
.eversign-cpl-wrap .ev-input-wrap .ev-typing{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(2,6,23,.2); border-left-color:rgba(2,6,23,.6);
  animation: evspin .7s linear infinite; display:none;
}
@keyframes evspin{ to{ transform:translateY(-50%) rotate(360deg);} }

.eversign-cpl-wrap .ev-icon.search svg{ width:16px; height:16px; display:block }

/* 1.4.9 icon alignment */
.eversign-cpl-wrap .ev-input-wrap{ position:relative; display:inline-block; }
.eversign-cpl-wrap .ev-input-wrap .ev-icon.search{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; line-height:0; display:flex; align-items:center; justify-content:center;
  opacity:.75; pointer-events:none;
}
.eversign-cpl-wrap .ev-input-wrap .ev-icon.search svg{ width:16px; height:16px; display:block }
.eversign-cpl-wrap .ev-input-wrap input[type="search"]{ padding-left:2.4rem; height:44px; line-height:44px; }

/* 1.5.0 icon+spinner */
.eversign-cpl-wrap .ev-input-wrap{ position:relative; display:inline-block; }
.eversign-cpl-wrap .ev-input-wrap .ev-icon.search{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:.8;
}
.eversign-cpl-wrap .ev-input-wrap .ev-icon.search svg{ width:16px; height:16px; display:block }
.eversign-cpl-wrap .ev-input-wrap input[type="search"]{ padding-left:2.4rem; height:44px; line-height:44px; }
.eversign-cpl-wrap .ev-input-wrap .ev-typing{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(2,6,23,.2); border-left-color:rgba(2,6,23,.6);
  animation: evspin .7s linear infinite; display:none;
}
@keyframes evspin{ to{ transform:translateY(-50%) rotate(360deg);} }


/* === 1.5.1 Modern search box (flex, bulletproof) === */
.eversign-cpl-toolbar .ev-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:.5rem;
  height:48px;
  padding:0 12px;
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius:12px;
  box-shadow:0 1px 0 rgba(2,6,23,.03) inset, 0 1px 2px rgba(2,6,23,.04);
}
/* Override any previous absolute icon rules */
.eversign-cpl-toolbar .ev-input-wrap .ev-icon.search{
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  transform:none !important;
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  opacity:.7; pointer-events:none;
}
.eversign-cpl-toolbar .ev-input-wrap .ev-icon.search svg{ width:16px; height:16px; display:block }
/* Input resets inside the wrap */
.eversign-cpl-toolbar .ev-input-wrap input[type="search"]{
  border:0; outline:none; background:transparent;
  height:100%; line-height:48px; padding:0 !important; margin:0; flex:1 1 auto;
  font-size:16px;
}
/* Spinner becomes a flex child pinned to the right */
.eversign-cpl-toolbar .ev-input-wrap .ev-typing{
  margin-left:auto;
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(2,6,23,.2); border-left-color:rgba(2,6,23,.6);
  animation: evspin .7s linear infinite; display:none;
}
/* Optional: right-side icon variant */
.eversign-cpl-toolbar .ev-input-wrap.icon-right{
  flex-direction:row-reverse;
}
.eversign-cpl-toolbar .ev-input-wrap.icon-right .ev-typing{ order:2; margin-left:0; margin-right:auto; }


/* 1.5.2 normalize input focus to avoid double-box highlight */
.eversign-cpl-toolbar .ev-input-wrap input[type="search"]{
  -webkit-appearance:none; appearance:none;
  background:transparent!important; border:0!important;
  outline:none!important; box-shadow:none!important;
  border-radius:0!important;
}
.eversign-cpl-toolbar .ev-input-wrap input[type="search"]::placeholder{ color:rgba(2,6,23,.45); }
.eversign-cpl-toolbar .ev-input-wrap input[type="search"]::-webkit-search-decoration,
.eversign-cpl-toolbar .ev-input-wrap input[type="search"]::-webkit-search-cancel-button,
.eversign-cpl-toolbar .ev-input-wrap input[type="search"]::-webkit-search-results-button,
.eversign-cpl-toolbar .ev-input-wrap input[type="search"]::-webkit-search-results-decoration{ display:none; }

/* Spinner must be a normal flex child for 1.5.1+ */
.eversign-cpl-toolbar .ev-input-wrap .ev-typing{
  position:static!important; transform:none!important; right:auto!important; top:auto!important;
}


/* === 1.5.3 Toolbar alignment & spinner visibility === */
.eversign-cpl-toolbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.eversign-cpl-toolbar .ev-input-wrap{ flex:1 1 420px; min-width:260px; }
/* Ensure action buttons align nicely */
.eversign-cpl-toolbar > a, .eversign-cpl-toolbar > button{ margin:0; }

/* Spinner: reserve space always to avoid layout jump */
.eversign-cpl-toolbar .ev-input-wrap .ev-typing{
  display:block; visibility:hidden; /* hidden until active */
  min-width:18px; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(2,6,23,.25); border-left-color:#0EA5E9; /* accent */
  animation: evspin .7s linear infinite;
}
.eversign-cpl-toolbar .ev-input-wrap .ev-typing.is-on{ visibility:visible; }


/* 1.5.4 spinner visibility (opacity) and size */
.eversign-cpl-toolbar .ev-input-wrap .ev-typing{
  display:block; opacity:0; visibility:visible; /* keep space but hide visually */
  min-width:20px; width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(2,6,23,.3); border-left-color:#0ea5e9;
  animation: evspin .65s linear infinite; transition: opacity .15s ease-in;
}
.eversign-cpl-toolbar .ev-input-wrap .ev-typing.is-on{ opacity:1; }


/* 1.5.5 wrapper-based spinner (fallback) */
.eversign-cpl-toolbar .ev-input-wrap{ position:relative; }
.eversign-cpl-toolbar .ev-input-wrap::after{
  content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; pointer-events:none;
  border:2px solid rgba(2,6,23,.28); border-left-color:#0ea5e9;
  animation: evspin .7s linear infinite; opacity:0; transition:opacity .12s ease-in;
}
.eversign-cpl-toolbar .ev-input-wrap.loading::after{ opacity:1; }
.eversign-cpl-toolbar .ev-input-wrap input[type="search"]{ padding-right:2.2rem; }