/**
 * TidyUpQuick — Main CSS
 * Additional styles extending style.css
 */

/* ============================================================
   HERO — floating shapes decoration
   ============================================================ */
.hero-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.hero-shape-1 {
  width: 480px; height: 480px;
  right: -100px; top: -100px;
  background: radial-gradient(circle, rgba(13,148,136,0.15) 0%, transparent 70%);
}
.hero-shape-2 {
  width: 280px; height: 280px;
  right: 200px; bottom: -60px;
  background: radial-gradient(circle, rgba(251,69,76,0.08) 0%, transparent 70%);
}

/* ============================================================
   SECTION TRANSITIONS
   ============================================================ */
.section + .section { padding-top: 0; }

/* ============================================================
   REVIEW CARD GRID LOADING SKELETON
   ============================================================ */
.skeleton {
  animation: skeleton-loading 1.2s linear infinite alternate;
  border-radius: 8px;
  background: #e5e7eb;
}
@keyframes skeleton-loading {
  from { background-color: #e5e7eb; }
  to   { background-color: #f3f4f6; }
}

/* ============================================================
   PRO TIP CALLOUT (for single posts)
   ============================================================ */
.pro-tip {
  background: var(--color-light);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.pro-tip-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.pro-tip-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.pro-tip p { margin: 0; color: var(--color-text); }

/* ============================================================
   RATING COMPARISON TABLE (for detailed review posts)
   ============================================================ */
.rating-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.9rem;
}
.rating-table th {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 0.85rem 1rem;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rating-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-gray);
  color: var(--color-text);
}
.rating-table tr:last-child td { border-bottom: none; }
.rating-table tr:nth-child(even) td { background: var(--color-gray-light); }

/* ============================================================
   PROS & CONS BLOCK
   ============================================================ */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 2rem 0;
}
.pros, .cons {
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.pros { background: #f0fdf4; border: 1px solid #bbf7d0; }
.cons { background: #fff1f2; border: 1px solid #fecdd3; }
.pros h4 { color: #15803d; font-family: var(--font-heading); margin-bottom: 0.75rem; }
.cons h4 { color: #be123c; font-family: var(--font-heading); margin-bottom: 0.75rem; }
.pros li, .cons li {
  font-size: 0.88rem;
  padding: 0.3rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.pros li::before { content: '✓'; color: #16a34a; font-weight: 700; flex-shrink: 0; }
.cons li::before { content: '✗'; color: #dc2626; font-weight: 700; flex-shrink: 0; }

/* ============================================================
   VERDICT BOX
   ============================================================ */
.verdict-box {
  background: linear-gradient(135deg, var(--color-navy), #1a2a5e);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 2rem;
  margin: 2.5rem 0;
  text-align: center;
}
.verdict-box .verdict-score {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.verdict-box .verdict-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.75rem;
}
.verdict-box p { color: rgba(255,255,255,0.8); margin: 0; }

/* ============================================================
   PRODUCT HIGHLIGHT CARD (sidebar or inline)
   ============================================================ */
.product-highlight {
  background: var(--color-gray-light);
  border: 2px solid var(--color-light);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin: 1.5rem 0;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.product-highlight img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.product-highlight-info h4 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.product-highlight-info .price { color: var(--color-primary); font-weight: 700; font-size: 1.1rem; }

/* ============================================================
   KINDNESS CATEGORY — special badge
   ============================================================ */
.badge-kindness {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border: 1px solid #fcd34d;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ============================================================
   CHILDREN'S KINDNESS — article decorative elements
   ============================================================ */
.kindness-intro {
  background: linear-gradient(135deg, #fff7ed, #fef9f0);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  border-left: 4px solid #f59e0b;
  margin-bottom: 2rem;
}
.kindness-intro p { color: #78350f; margin: 0; }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-red));
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
}

/* ============================================================
   COOKIE CONSENT BAR
   ============================================================ */
.cookie-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--color-navy);
  color: rgba(255,255,255,0.85);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 10000;
  font-size: 0.85rem;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}
.cookie-bar.show { transform: translateY(0); }
.cookie-bar a { color: var(--color-primary); }
.cookie-bar-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ============================================================
   ADMIN BAR FIX
   ============================================================ */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }