/* DanceGrove — studio compare tray + comparison table.
   Uses the active skin's --dg-* variables only; no new colors/fonts. */

/* --- Add-to-compare control (on cards & detail) --- */
.cmp-add{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--dg-font-body);
  font-weight:600;font-size:12px;letter-spacing:.02em;cursor:pointer;
  border:1.5px solid var(--dg-line-2);color:var(--dg-ink-soft);background:var(--dg-paper);
  padding:6px 13px;border-radius:var(--dg-radius-pill,999px);transition:.25s;line-height:1;
}
.cmp-add:hover{border-color:var(--dg-clay);color:var(--dg-ink)}
.cmp-add.is-on{background:var(--dg-sage);border-color:var(--dg-sage);color:#fff}
.cmp-add .cmp-add-ico{font-size:14px;line-height:1}
.cmp-add.is-on .cmp-add-ico::before{content:"✓"}
.cmp-add .cmp-add-ico::before{content:"＋"}

/* --- floating tray bar --- */
.cmp-tray{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:color-mix(in srgb,var(--dg-obsidian,#1f1813) 94%,transparent);
  color:var(--dg-linen,#f7f1e6);
  border-top:1px solid color-mix(in srgb,var(--dg-brass-1,#c9a227) 40%,transparent);
  box-shadow:0 -18px 40px -24px rgba(0,0,0,.55);
  animation:cmp-tray-up .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes cmp-tray-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cmp-tray-inner{
  max-width:1280px;margin:0 auto;padding:12px 36px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.cmp-tray-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--dg-linen) 80%,transparent)}
.cmp-tray-count{color:var(--dg-brass-1,#c9a227);font-weight:700;margin-left:4px}
.cmp-tray-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:120px}
.cmp-tray-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;
  background:color-mix(in srgb,var(--dg-linen) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--dg-linen) 22%,transparent);
  border-radius:999px;padding:5px 6px 5px 13px;
}
.cmp-tray-x,.cmp-remove{
  border:none;background:none;color:inherit;cursor:pointer;font-size:16px;line-height:1;
  width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  transition:.2s;
}
.cmp-tray-x:hover{background:color-mix(in srgb,var(--dg-linen) 20%,transparent)}
.cmp-tray-actions{display:flex;gap:10px;align-items:center}
.cmp-tray-clear{border-color:color-mix(in srgb,var(--dg-linen) 30%,transparent);color:var(--dg-linen)}
.cmp-tray-clear:hover{background:color-mix(in srgb,var(--dg-linen) 14%,transparent);color:var(--dg-linen)}
.cmp-tray-go.is-disabled{opacity:.45;pointer-events:none}

/* --- toast --- */
.cmp-flash{
  position:fixed;left:50%;bottom:84px;
  background:var(--dg-obsidian,#1f1813);color:var(--dg-linen,#f7f1e6);
  padding:11px 20px;border-radius:999px;font-size:13px;font-weight:600;z-index:60;
  box-shadow:0 18px 34px -18px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:.3s;
  transform:translateX(-50%) translateY(8px);
}
.cmp-flash.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

/* --- comparison table --- */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;padding:0;min-width:560px}
.cmp-table th,.cmp-table td{
  text-align:left;vertical-align:top;padding:16px 18px;
  border-bottom:1px solid var(--dg-line);font-size:14px;
}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-rowhead{
  font-family:var(--dg-font-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dg-ink-soft);font-weight:600;white-space:nowrap;width:140px;
  background:color-mix(in srgb,var(--dg-sand,#efe6d6) 50%,transparent);
}
.cmp-col{min-width:170px;position:relative}
.cmp-name{
  font-family:var(--dg-font-display);font-size:20px;font-weight:380;color:var(--dg-ink);
  display:block;padding-right:24px;line-height:1.2;
}
.cmp-name:hover{color:var(--dg-clay)}
.cmp-col .cmp-remove{position:absolute;top:14px;right:10px;color:var(--dg-ink-soft)}
.cmp-col .cmp-remove:hover{background:var(--dg-line);color:var(--dg-ink)}
.cmp-chips{display:flex;gap:6px;flex-wrap:wrap}
.cmp-stars{color:var(--dg-clay-2,#a8542e);font-weight:700}
.cmp-hours{display:flex;flex-direction:column;gap:3px}
.cmp-hrow{display:flex;gap:8px;font-size:13px}
.cmp-hrow dt{min-width:34px;text-transform:capitalize}
.cmp-empty{text-align:center}

@media (max-width:640px){
  .cmp-tray-inner{padding:10px 18px;gap:10px}
  .cmp-tray-title{width:100%}
  .cmp-table th,.cmp-table td{padding:12px}
  .cmp-rowhead{width:96px}
}