/* WP CTA Table v1.0.0 - OnlyTable */
/* =================================================================
   DESIGN SYSTEM & CSS CUSTOM PROPERTIES
   ================================================================= */

.wctatbl {
  /* Spacing */
  --gap: 14px;
  --card-pad: 24px;
  --card-gap: 24px;

  /* Border radius - consistent scale */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows - layered system */
  --shadow-sm: 0 1px 3px rgba(10, 12, 16, 0.04), 0 1px 2px rgba(10, 12, 16, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 12, 16, 0.05), 0 2px 6px rgba(10, 12, 16, 0.04);
  --shadow-lg: 0 10px 28px rgba(10, 12, 16, 0.08), 0 4px 12px rgba(10, 12, 16, 0.04);
  --shadow-xl: 0 20px 40px rgba(10, 12, 16, 0.1), 0 8px 20px rgba(10, 12, 16, 0.06);

  /* Colors - semantic naming */
  --color-bg: #fff;
  --color-bg-hover: #fafbff;
  --color-bg-muted: #f8f9fb;
  --color-text: #15171a;
  --color-text-muted: #667085;
  --color-text-light: #9aa3b2;
  --color-border: #e6e8ef;
  --color-border-light: #f0f2f5;

  /* Badge colors */
  --badge-default-bg: #eef1f8;
  --badge-default-color: #4a5568;

  /* CTA colors - can be overridden via inline styles */
  --cta-pill-bg: #10b981;
  --cta-pill-color: #fff;
  --cta-pill-bg-hover: #059669;
  --cta-pill-color-hover: #fff;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-h2: 26px;
  --fs-title: 22px;
  --fs-body: 15px;
  --fs-meta: 14px;
  --fs-small: 12px;

  /* Component */
  --pill-h: 48px;
  --image-ratio: 4/3;
}

/* =================================================================
   BASE STYLES
   ================================================================= */

.wctatbl {
  display: block;
  background: transparent;
  margin: 24px 0;
  max-width: 100%;
  font-family: var(--font-family);
}

.wctatbl *,
.wctatbl *::before,
.wctatbl *::after {
  box-sizing: border-box;
}

/* H2 Heading */
.wctatbl__h2 {
  margin: 0 0 20px;
  padding: 0;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

/* Attribution Footer Text */
.wctatbl__attribution {
  margin: 20px 0 0;
  padding: 12px 0;
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.wctatbl__attribution:hover {
  opacity: 1;
}

.wctatbl__attribution a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.wctatbl__attribution a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* =================================================================
   TABLE LAYOUT
   ================================================================= */

.wctatbl--table .wctatbl__head {
  display: grid;
  grid-template-columns: 80px minmax(140px, 1.5fr) minmax(100px, 1fr) minmax(80px, 0.8fr) minmax(70px, 0.7fr) minmax(100px, 1fr);
  gap: var(--gap);
  align-items: center;
  font-weight: 700;
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--color-border);
  padding: 12px 16px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.wctatbl--table .wctatbl__row {
  display: grid;
  grid-template-columns: 80px minmax(140px, 1.5fr) minmax(100px, 1fr) minmax(80px, 0.8fr) minmax(70px, 0.7fr) minmax(100px, 1fr);
  gap: var(--gap);
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Table layout: badge is shown inline in name cell */

/* Table layout cell ordering */
.wctatbl--table .wctatbl__image { order: 1; }
.wctatbl--table .wctatbl__name { order: 2; }
.wctatbl--table .wctatbl__rating { order: 3; }
.wctatbl--table .wctatbl__desc { order: 4; }
.wctatbl--table .wctatbl__price { order: 5; }
.wctatbl--table .wctatbl__cta { order: 6; }

/* Table image styling */
.wctatbl--table .wctatbl__image {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

.wctatbl--table .wctatbl__image img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.wctatbl--table .wctatbl__imgwrap {
  width: 70px;
  height: 70px;
  position: relative;
}

/* Table: show flag inline with name */
.wctatbl--table .wctatbl__flag-inline {
  display: inline-block;
  margin-left: 6px;
}

/* Table: hide badge on image, show inline */
.wctatbl--table .wctatbl-badge {
  position: static;
  display: inline-flex;
  margin-top: 6px;
  font-size: 10px;
  padding: 4px 10px;
}

/* Table: active dot positioning */
.wctatbl--table .wctatbl-active-dot {
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
}

/* Table description styling */
.wctatbl--table .wctatbl__desc {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Table price styling */
.wctatbl--table .wctatbl__price {
  font-weight: 700;
  font-size: var(--fs-body);
}

/* Table CTA button */
.wctatbl--table .wctatbl__btn {
  height: 40px;
  padding: 0 20px;
  font-size: 12px;
  white-space: nowrap;
}

.wctatbl__th[data-sort-key] {
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: color 0.15s ease;
}

.wctatbl__th[data-sort-key]:hover {
  color: var(--color-text);
}

.wctatbl__th[data-sort-key]::after {
  content: "⇅";
  position: absolute;
  right: 4px;
  opacity: 0.4;
  font-size: 11px;
}

.wctatbl__th[data-sort-key].is-asc::after {
  content: "▲";
  opacity: 1;
  color: var(--cta-pill-bg);
}

.wctatbl__th[data-sort-key].is-desc::after {
  content: "▼";
  opacity: 1;
  color: var(--cta-pill-bg);
}

.wctatbl__body {
  display: block;
}

.wctatbl--table .wctatbl__row:last-child {
  border-bottom: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.wctatbl--table .wctatbl__row:hover {
  background: var(--color-bg-hover);
  box-shadow: var(--shadow-sm);
}

/* =================================================================
   SHARED CELL STYLES
   ================================================================= */

.wctatbl__cell {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* Image */
.wctatbl__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: block;
}

.wctatbl__imgwrap {
  position: relative;
}

/* Title & Handle */
.wctatbl__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wctatbl__title {
  font-weight: 800;
  font-size: var(--fs-title);
  line-height: 1.25;
  color: var(--color-text);
  margin-bottom: 2px;
}

.wctatbl__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.wctatbl__title a:hover {
  color: var(--cta-pill-bg);
}

.wctatbl__handle {
  color: var(--color-text-muted);
  font-size: var(--fs-meta);
}

.wctatbl__handle a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.wctatbl__handle a:hover {
  color: var(--cta-pill-bg);
  text-decoration: underline;
}

/* Flag */
.wctatbl__flag-inline {
  font-size: 18px;
  line-height: 1;
}

.wctatbl__flag {
  font-size: 24px;
  line-height: 1;
}

/* Price */
.wctatbl__price {
  font-weight: 700;
  color: var(--color-text);
}

.wctatbl__price strong {
  font-weight: 500;
  color: var(--color-text-muted);
  margin-right: 4px;
}

/* Rating Label */
.wctatbl__rating-label {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  font-weight: 500;
  margin-right: 6px;
}

/* =================================================================
   STARS RATING
   ================================================================= */

.wctatbl__stars-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wctatbl__stars {
  position: relative;
  display: inline-flex;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 2px;
}

.wctatbl__stars-bg,
.wctatbl__stars-fill {
  color: #e0e4ea;
  user-select: none;
}

.wctatbl__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fbbf24;
}

.wctatbl__rating-value {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-bg-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* Placeholder Image */
.wctatbl__placeholder {
  opacity: 0.8;
}

/* =================================================================
   BADGES - Consistent styling
   ================================================================= */

.wctatbl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--badge-default-bg);
  color: var(--badge-default-color);
  font-weight: 700;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

/* Badge variants with consistent contrast */
.wctatbl-badge--verified {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #065f46;
}

.wctatbl-badge--official {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
}

.wctatbl-badge--partner {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #5b21b6;
}

.wctatbl-badge--bestseller {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

.wctatbl-badge--new {
  background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
  color: #0e7490;
}

/* =================================================================
   CTA BUTTON
   ================================================================= */

.wctatbl__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--pill-h);
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--cta-pill-bg);
  color: var(--cta-pill-color);
  border: none;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 0, 0, 0.04);
  font-weight: 700;
  font-size: var(--fs-meta);
  letter-spacing: 0.5px;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wctatbl__btn:hover {
  background: var(--cta-pill-bg-hover);
  color: var(--cta-pill-color-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.wctatbl__btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Focus state for accessibility */
.wctatbl__btn:focus-visible {
  outline: 2px solid var(--cta-pill-bg);
  outline-offset: 2px;
}

/* =================================================================
   ACTIVE DOT INDICATOR
   ================================================================= */

.wctatbl-active-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--color-bg), var(--shadow-sm);
}

.wctatbl-active-dot.is-online {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  animation: pulse-online 2s infinite;
}

.wctatbl-active-dot.is-offline {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

@keyframes pulse-online {

  0%,
  100% {
    box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 6px rgba(16, 185, 129, 0.2);
  }

  50% {
    box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 10px rgba(16, 185, 129, 0);
  }
}

/* =================================================================
   CARDS LAYOUT
   ================================================================= */

.wctatbl--cards .wctatbl__head {
  display: none;
}

.wctatbl--cards .wctatbl__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 580px), 1fr));
  gap: var(--card-gap);
  width: 100%;
}

.wctatbl--cards .wctatbl__row {
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas:
    "image title"
    "image rating"
    "image desc"
    "image price"
    "image cta";
  gap: 8px 20px;
  align-items: start;
  padding: var(--card-pad);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wctatbl--cards .wctatbl__row:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

.wctatbl--cards .wctatbl__image {
  grid-area: image;
  position: relative;
  align-self: stretch;
}

.wctatbl--cards .wctatbl__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--image-ratio);
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.wctatbl--cards .wctatbl-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  box-shadow: var(--shadow-md);
}

.wctatbl--cards .wctatbl__name {
  grid-area: title;
  align-self: end;
}

.wctatbl--cards .wctatbl__rating {
  grid-area: rating;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.wctatbl--cards .wctatbl__desc {
  grid-area: desc;
  max-width: 65ch;
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-clamp: 4;
  overflow: hidden;
  margin-top: 8px;
}

.wctatbl--cards .wctatbl__price {
  grid-area: price;
  align-self: end;
  font-size: 16px;
  margin-top: 12px;
}

.wctatbl--cards .wctatbl__cta {
  grid-area: cta;
  align-self: end;
  margin-top: 16px;
}

/* =================================================================
   COMPACT LAYOUT - Centered cards with circular images
   ================================================================= */

.wctatbl--compact .wctatbl__head {
  display: none;
}

.wctatbl--compact .wctatbl__body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.wctatbl--compact .wctatbl__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}

.wctatbl--compact .wctatbl__row:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-3px);
}

/* Compact: Badge base styling (positioned absolutely in imgwrap section below) */
.wctatbl--compact .wctatbl-badge {
  font-size: 10px;
  padding: 6px 12px;
}

/* Compact: Circular image */
.wctatbl--compact .wctatbl__image {
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  position: relative;
}

.wctatbl--compact .wctatbl__imgwrap {
  width: 120px;
  height: 120px;
  position: static; /* Allow badge to position relative to card */
}

.wctatbl--compact .wctatbl__image img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

/* Compact: Active dot on circular image */
.wctatbl--compact .wctatbl-active-dot {
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 3px var(--color-bg), var(--shadow-sm);
}

/* Compact: Name styling */
.wctatbl--compact .wctatbl__name {
  margin-bottom: 8px;
}

.wctatbl--compact .wctatbl__title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}

.wctatbl--compact .wctatbl__title-row {
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.wctatbl--compact .wctatbl__handle {
  font-size: 14px;
  color: var(--color-text-muted);
}

.wctatbl--compact .wctatbl__flag-inline {
  font-size: 16px;
}

/* Compact: Rating */
.wctatbl--compact .wctatbl__rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.wctatbl--compact .wctatbl__rating-label {
  display: none;
}

/* Compact: Hide description */
.wctatbl--compact .wctatbl__desc {
  display: none;
}

/* Compact: Price styling */
.wctatbl--compact .wctatbl__price {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 16px;
}

.wctatbl--compact .wctatbl__price strong {
  display: none;
}

/* Compact: CTA button */
.wctatbl--compact .wctatbl__cta {
  width: 100%;
}

.wctatbl--compact .wctatbl__btn {
  width: auto;
  min-width: 140px;
  height: 44px;
  padding: 0 24px;
  font-size: 13px;
}

/* Compact: Badge positioning - positioned relative to card (.wctatbl__row) */
.wctatbl--compact .wctatbl__imgwrap .wctatbl-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

/* =================================================================
   RESPONSIVE - TABLET (max 1024px)
   ================================================================= */

@media (max-width: 1024px) {
  .wctatbl {
    --fs-h2: 24px;
    --fs-title: 20px;
    --fs-body: 14px;
    --card-pad: 20px;
    --card-gap: 20px;
    --pill-h: 44px;
  }

  .wctatbl--cards .wctatbl__row {
    grid-template-columns: minmax(160px, 260px) 1fr;
    gap: 8px 16px;
  }

  /* Table: responsive grid */
  .wctatbl--table .wctatbl__head,
  .wctatbl--table .wctatbl__row {
    grid-template-columns: 70px minmax(120px, 1.2fr) minmax(90px, 1fr) minmax(60px, 0.7fr) minmax(50px, 0.6fr) minmax(90px, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .wctatbl--table .wctatbl__image,
  .wctatbl--table .wctatbl__imgwrap,
  .wctatbl--table .wctatbl__image img {
    width: 60px;
    height: 60px;
  }

  .wctatbl--table .wctatbl__btn {
    height: 36px;
    padding: 0 14px;
    font-size: 11px;
  }

  /* Compact: 2 columns on tablet */
  .wctatbl--compact .wctatbl__body {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .wctatbl--compact .wctatbl__image,
  .wctatbl--compact .wctatbl__imgwrap,
  .wctatbl--compact .wctatbl__image img {
    width: 100px;
    height: 100px;
  }
}

/* =================================================================
   RESPONSIVE - MOBILE (max 768px)
   ================================================================= */

@media (max-width: 768px) {
  .wctatbl {
    --fs-h2: 22px;
    --fs-title: 18px;
    --fs-body: 14px;
    --fs-meta: 13px;
    --card-pad: 16px;
    --card-gap: 16px;
    --pill-h: 44px;
    margin: 16px 0;
  }

  .wctatbl__h2 {
    margin-bottom: 16px;
  }

  /* ============ TABLE MOBILE ============ */
  /* Hide table header on mobile */
  .wctatbl--table .wctatbl__head {
    display: none;
  }

  /* Stack table rows as cards */
  .wctatbl--table .wctatbl__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
  }

  .wctatbl--table .wctatbl__image {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
  }

  .wctatbl--table .wctatbl__image,
  .wctatbl--table .wctatbl__imgwrap,
  .wctatbl--table .wctatbl__image img {
    width: 70px;
    height: 70px;
  }

  .wctatbl--table .wctatbl__name {
    flex: 1;
    min-width: 150px;
  }

  .wctatbl--table .wctatbl__rating {
    width: 100%;
    order: 10;
  }

  .wctatbl--table .wctatbl__desc {
    width: 100%;
    order: 11;
    -webkit-line-clamp: 3;
  }

  .wctatbl--table .wctatbl__price {
    order: 12;
  }

  .wctatbl--table .wctatbl__cta {
    width: 100%;
    order: 20;
  }

  .wctatbl--table .wctatbl__btn {
    width: 100%;
    height: 44px;
  }

  /* ============ CARDS MOBILE ============ */
  .wctatbl--cards .wctatbl__body {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
  }

  .wctatbl--cards .wctatbl__row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "title"
      "rating"
      "desc"
      "price"
      "cta";
    gap: 10px;
  }

  .wctatbl--cards .wctatbl__image img {
    aspect-ratio: 16/10;
    max-height: 240px;
  }

  .wctatbl--cards .wctatbl__desc {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .wctatbl--cards .wctatbl__btn {
    width: 100%;
  }

  /* ============ COMPACT MOBILE ============ */
  .wctatbl--compact .wctatbl__body {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .wctatbl--compact .wctatbl__row {
    padding: 20px 16px;
  }

  .wctatbl--compact .wctatbl__image,
  .wctatbl--compact .wctatbl__imgwrap,
  .wctatbl--compact .wctatbl__image img {
    width: 90px;
    height: 90px;
  }

  .wctatbl--compact .wctatbl__title {
    font-size: 16px;
  }

  .wctatbl--compact .wctatbl__handle {
    font-size: 13px;
  }

  .wctatbl--compact .wctatbl-badge {
    top: 10px;
    right: 10px;
    font-size: 9px;
    padding: 4px 8px;
  }

  .wctatbl--compact .wctatbl__btn {
    min-width: 100%;
    height: 40px;
    font-size: 12px;
  }
}

/* =================================================================
   RESPONSIVE - SMALL MOBILE (max 480px)
   ================================================================= */

@media (max-width: 480px) {
  .wctatbl {
    --fs-h2: 20px;
    --fs-title: 17px;
    --fs-body: 14px;
    --fs-meta: 12px;
    --card-pad: 14px;
    --pill-h: 42px;
  }

  .wctatbl-badge {
    padding: 6px 10px;
    font-size: 10px;
  }

  .wctatbl-active-dot {
    width: 10px;
    height: 10px;
    top: 8px;
    right: 8px;
  }

  .wctatbl--cards .wctatbl-badge {
    right: 8px;
    bottom: 8px;
  }

  .wctatbl__btn {
    font-size: 13px;
    padding: 0 16px;
  }

  /* ============ COMPACT SMALL MOBILE ============ */
  /* Single column on very small screens */
  .wctatbl--compact .wctatbl__body {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wctatbl--compact .wctatbl__row {
    padding: 20px 16px;
  }

  .wctatbl--compact .wctatbl__image,
  .wctatbl--compact .wctatbl__imgwrap,
  .wctatbl--compact .wctatbl__image img {
    width: 100px;
    height: 100px;
  }

  /* ============ TABLE SMALL MOBILE ============ */
  .wctatbl--table .wctatbl__image,
  .wctatbl--table .wctatbl__imgwrap,
  .wctatbl--table .wctatbl__image img {
    width: 60px;
    height: 60px;
  }

  .wctatbl--table .wctatbl__title {
    font-size: 16px;
  }
}

/* =================================================================
   PRINT STYLES
   ================================================================= */

@media print {
  .wctatbl {
    box-shadow: none !important;
  }

  .wctatbl__btn {
    background: #eee !important;
    color: #333 !important;
    box-shadow: none !important;
  }

  .wctatbl-active-dot {
    display: none;
  }
}

/* =================================================================
   REDUCED MOTION
   ================================================================= */

@media (prefers-reduced-motion: reduce) {

  .wctatbl__row,
  .wctatbl__btn,
  .wctatbl-active-dot {
    transition: none;
    animation: none;
  }
}

/* =================================================================
   DARK MODE SUPPORT (for themes that support it)
   ================================================================= */

@media (prefers-color-scheme: dark) {
  .wctatbl[data-theme="auto"] {
    --color-bg: #1a1a2e;
    --color-bg-hover: #252542;
    --color-bg-muted: #16162a;
    --color-text: #e4e4e7;
    --color-text-muted: #a1a1aa;
    --color-text-light: #71717a;
    --color-border: #3f3f5c;
    --color-border-light: #2d2d44;
    --badge-default-bg: #3f3f5c;
    --badge-default-color: #e4e4e7;
  }

  .wctatbl[data-theme="auto"] .wctatbl-badge--verified {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    color: #6ee7b7;
  }

  .wctatbl[data-theme="auto"] .wctatbl-badge--official {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
    color: #93c5fd;
  }
}