/**
 * CHUNK 104 — Round Builder V2 Styles
 * Role badges, gold accent cards, round theme display, and UI enhancements
 */

/* ========================================
 * Helper Text Styling
 * ======================================== */

.bb-page-helper {
  font-size: var(--type-micro-size, 0.8125rem);
  color: var(--text-muted, #8C7F74);
  line-height: var(--type-body-line, 1.6);
  margin: var(--space-xs, 8px) 0 0 0;
  font-style: italic;
}

/* CHUNK 151: Ensure form card helpers are readable */
.bb-card--form .bb-page-helper {
  color: var(--bb-deep, #0F1118) !important; /* Dark text for readability on light card backgrounds */
  opacity: 0.9 !important; /* Slightly reduced opacity but still very readable */
}

[data-bar-mode='dark'] .bb-page-helper,
body.dark .bb-page-helper {
  color: var(--text-muted, rgba(255, 255, 255, 0.7));
}

/* ========================================
 * Round Theme Card
 * ======================================== */

.round-theme-card {
  background: linear-gradient(135deg, rgba(191, 160, 90, 0.05) 0%, rgba(228, 199, 138, 0.05) 100%);
  border: 1px solid var(--bb-gold, #BFA05A);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-lg, 24px);
  margin-bottom: var(--space-xl, 32px);
  text-align: center;
}

.round-theme-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: var(--type-subtitle-size, clamp(1.35rem, 1.8vw + 0.4rem, 1.75rem));
  font-weight: 600;
  color: var(--bb-gold, #BFA05A);
  margin: 0 0 var(--space-sm, 12px) 0;
  letter-spacing: -0.5px;
}

.round-theme-summary {
  font-size: var(--type-body-size, 1rem);
  line-height: var(--type-body-line, 1.6);
  color: var(--text, #2b2b2b);
  margin: 0;
  font-style: italic;
}

[data-bar-mode='dark'] .round-theme-title,
body.dark .round-theme-title {
  color: var(--bb-gold, #BFA05A);
}

[data-bar-mode='dark'] .round-theme-summary,
body.dark .round-theme-summary {
  color: var(--text);
}

/* ========================================
 * Role Badges
 * ======================================== */

.round-role-badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 8px);
  padding: var(--space-xs, 8px) var(--space-sm, 12px);
  background: linear-gradient(135deg, rgba(191, 160, 90, 0.1) 0%, rgba(228, 199, 138, 0.1) 100%);
  border: 1px solid var(--bb-gold, #BFA05A);
  border-radius: var(--radius-button, 12px);
  margin-top: var(--space-xs, 8px);
  margin-bottom: var(--space-md, 16px);
  font-family: var(--font-ui, 'Inter', sans-serif);
  transition: all var(--transition-base, 0.2s ease);
}

.round-role-badge:hover {
  background: linear-gradient(135deg, rgba(191, 160, 90, 0.15) 0%, rgba(228, 199, 138, 0.15) 100%);
  transform: translateY(-1px);
  box-shadow: var(--bb-shadow-1, 0 2px 8px rgba(0, 0, 0, 0.15));
}

.round-role-badge__icon {
  font-size: 1.2rem;
  line-height: 1;
}

.round-role-badge__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.round-role-badge__label {
  font-size: var(--type-micro-size, 0.8125rem);
  font-weight: 600;
  color: var(--bb-gold, #BFA05A);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.round-role-badge__description {
  font-size: 0.75rem;
  color: var(--text-muted, #8C7F74);
  font-style: italic;
}

/* Role-specific colors */
.round-role-badge[data-role="opener"] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
  border-color: rgba(59, 130, 246, 0.4);
}

.round-role-badge[data-role="opener"] .round-role-badge__label {
  color: #3B82F6;
}

.round-role-badge[data-role="centerpiece"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
  border-color: rgba(245, 158, 11, 0.5);
}

.round-role-badge[data-role="centerpiece"] .round-role-badge__label {
  color: #F59E0B;
}

.round-role-badge[data-role="closer"] {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border-color: rgba(168, 85, 247, 0.4);
}

.round-role-badge[data-role="closer"] .round-role-badge__label {
  color: #A855F7;
}

/* Dark mode role badges */
[data-bar-mode='dark'] .round-role-badge,
body.dark .round-role-badge {
  background: rgba(191, 160, 90, 0.15);
  border-color: rgba(191, 160, 90, 0.4);
}

[data-bar-mode='dark'] .round-role-badge .round-role-badge__label,
body.dark .round-role-badge .round-role-badge__label {
  color: var(--bb-gold, #BFA05A);
}

/* ========================================
 * "Why It Works" Gold Accent Card
 * ======================================== */

.why-it-works-gold {
  background: linear-gradient(135deg, rgba(191, 160, 90, 0.08) 0%, rgba(228, 199, 138, 0.08) 100%);
  border: 2px solid var(--bb-gold, #BFA05A);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-lg, 24px);
  margin: var(--space-lg, 24px) 0;
  position: relative;
  overflow: hidden;
}

.why-it-works-gold::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bb-gold, #BFA05A) 0%, rgba(228, 199, 138, 1) 100%);
}

.why-it-works-gold .section-header {
  color: var(--bb-gold, #BFA05A);
  font-weight: 600;
  margin-bottom: var(--space-sm, 12px);
}

.why-it-works-gold .why-it-works-text {
  color: var(--text, #2b2b2b);
  font-size: var(--type-body-size, 1rem);
  line-height: var(--type-body-line, 1.6);
  margin: 0;
  font-style: italic;
}

/* Dark mode "Why It Works" card */
[data-bar-mode='dark'] .why-it-works-gold,
body.dark .why-it-works-gold {
  background: linear-gradient(135deg, rgba(191, 160, 90, 0.15) 0%, rgba(228, 199, 138, 0.15) 100%);
  border-color: var(--bb-gold, #BFA05A);
}

[data-bar-mode='dark'] .why-it-works-gold .why-it-works-text,
body.dark .why-it-works-gold .why-it-works-text {
  color: var(--text);
}

/* ========================================
 * Drink Card Header Enhancement
 * ======================================== */

.drink-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 8px);
  margin-bottom: var(--space-md, 16px);
}

.drink-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: var(--type-subtitle-size, clamp(1.35rem, 1.8vw + 0.4rem, 1.75rem));
  font-weight: 600;
  color: var(--text, #2b2b2b);
  margin: 0;
  letter-spacing: -0.5px;
}

/* ========================================
 * Glassware & Garnish Sections
 * ======================================== */

.glassware-section,
.garnish-section {
  margin: var(--space-md, 16px) 0;
}

.glassware-text,
.garnish-text {
  font-size: var(--type-body-size, 1rem);
  color: var(--text, #2b2b2b);
  margin: 0;
  font-style: italic;
}

/* ========================================
 * Mobile Responsive Adjustments
 * ======================================== */

@media (max-width: 768px) {
  .round-role-badge {
    padding: var(--space-xs, 8px);
    gap: var(--space-xs, 8px);
  }

  .round-role-badge__icon {
    font-size: 1rem;
  }

  .round-role-badge__description {
    font-size: 0.7rem;
  }

  .why-it-works-gold {
    padding: var(--space-md, 16px);
    margin: var(--space-md, 16px) 0;
  }

  .drink-card-header {
    gap: var(--space-xs, 8px);
  }

  .round-theme-card {
    padding: var(--space-md, 16px);
    margin-bottom: var(--space-lg, 24px);
  }
}