/* Card List View Styles (Home & Catalog) */

/* ==========================================================================
   1. Home Page List View
   ========================================================================== */
body.home-scale-soft .home-card-grid[data-view="list"],
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] {
  display: grid !important; /* Force grid layout */
  grid-template-columns: 1fr !important;
  grid-auto-rows: auto !important;
  gap: 20px !important; /* Increased to ensure visible separation */
  padding: 0 !important;
  margin: 0 !important;
}

body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  padding: 14px 20px !important; /* Increased vertical padding for more height */
  border-radius: 16px !important;
  min-height: 80px !important; /* Increased height as requested previously */
  height: auto !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(45, 33, 24, 0.08) !important; /* Stronger shadow for clear separation */
  border: 1px solid rgba(0, 0, 0, 0.02) !important;
  margin: 0 !important;
}

/* Left Section: Number + Icons */
body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home .card-left-group,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-left-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important; /* Balanced vertical spacing */
  min-width: 135px !important; /* Reduced width to bring middle section closer */
}

body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home .card-top,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-top {
  font-size: 20px !important; 
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #1a1612 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home .card-topic-icons,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-topic-icons {
  margin: 0 !important;
  gap: 14px !important; /* Spread them out elegantly */
  display: flex !important;
  padding: 0 !important;
  max-width: 160px !important; /* Match phone number width */
}

body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home .card-topic-icon,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-topic-icon {
  width: 17px !important;
  height: 17px !important;
  font-size: 9px !important;
}

/* Middle Section: Price Stack */
body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home .card-body,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-body {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important; /* Still centered but closer due to left group shrink */
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home .card-meta-stack,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-meta-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important; /* More breathing room between lines */
  line-height: 1 !important;
  white-space: nowrap !important; /* Prevent wrapping */
}

body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home .card-tier--network,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-tier--network {
  background: none !important;
  border: none !important;
  color: #1a1612 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  display: flex !important;
  gap: 4px !important;
}

body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home .card-meta-price,
body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home .card-meta-plan,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-meta-price,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-meta-plan {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #4b382a !important; /* Premium Brown */
  line-height: 1.2 !important;
  margin: 2px 0 0 0 !important;
}

body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home .card-meta-price *,
body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home .card-meta-plan *,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-meta-price *,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-meta-plan * {
  font-weight: 400 !important;
  font-size: 15px !important;
}

/* Right Section: Button */
body.home-scale-soft .home-card-grid[data-view="list"] .number-card--home .card-btn,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-btn {
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-btn {
  width: 100px !important;
  min-height: 30px !important;
  height: 30px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e1b155 !important;
  color: #1a1612 !important;
}

/* ==========================================================================
   2. Catalog Page List View
   ========================================================================== */
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog {
  grid-template-columns: minmax(156px, auto) minmax(0, 1fr) auto;
  grid-template-areas:
    "top body btn"
    "icons body btn";
  align-items: center;
  gap: 2px 14px;
  padding: 11px 14px;
  border-radius: 14px;
}

body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-top {
  grid-area: top;
  font-size: 20px;
}

body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-topic-icons {
  grid-area: icons;
  justify-content: flex-start;
  margin-top: 0;
}

body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-body {
  grid-area: body;
}

body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-tier--network .card-network-main,
body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-tier--network .card-network-suffix {
  font-size: 14px;
}

body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-meta-plan {
  font-size: 15px;
}

body.numbers-scale-soft .numbers-catalog-grid[data-view="list"] .number-card--catalog .card-btn {
  grid-area: btn;
  width: 100px !important;
  min-height: 30px !important;
  height: 30px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  background: #e1b155 !important;
  color: #4b382a !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}