/**
 * CHUNK 105 — Make Tonight V2 Styles
 * "Why This Recipe" gold accent card, category badges, flavor tags
 */

/* ========================================
 * "Why This Recipe" 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 This Recipe" 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, rgba(255, 255, 255, 0.9));
}

/* Light mode override for "Why This Recipe" text */
:root[data-ui-theme='halytic'] .why-it-works-gold .why-it-works-text,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .why-it-works-gold .why-it-works-text,
.start-from-scratch-drink-card .why-it-works-gold .why-it-works-text {
  color: #333 !important;
}

/* Dark mode for Start From Scratch "Why This Recipe" */
[data-bar-mode='dark'] .start-from-scratch-drink-card .why-it-works-gold .why-it-works-text,
body.dark .start-from-scratch-drink-card .why-it-works-gold .why-it-works-text {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ========================================
 * Category Badge
 * ======================================== */

.drink-category-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs, 8px) var(--space-sm, 12px);
  background: var(--bb-cream, #F4E8D3);
  border: 1px solid rgba(191, 160, 90, 0.3);
  border-radius: var(--radius-button, 12px);
  font-size: var(--type-micro-size, 0.8125rem);
  font-weight: 600;
  color: var(--bb-deep, #0F1118);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-ui, 'Inter', sans-serif);
  margin-top: var(--space-xs, 8px);
  margin-bottom: var(--space-md, 16px);
  transition: all var(--transition-base, 0.2s ease);
}

.drink-category-badge:hover {
  background: var(--bb-gold, #BFA05A);
  color: var(--bb-white, #FFFFFF);
  border-color: var(--bb-gold, #BFA05A);
  transform: translateY(-1px);
  box-shadow: var(--bb-shadow-1, 0 2px 8px rgba(0, 0, 0, 0.15));
}

/* Dark mode category badge */
[data-bar-mode='dark'] .drink-category-badge,
body.dark .drink-category-badge {
  background: rgba(191, 160, 90, 0.2);
  border-color: rgba(191, 160, 90, 0.4);
  color: var(--bb-gold, #BFA05A);
}

[data-bar-mode='dark'] .drink-category-badge:hover,
body.dark .drink-category-badge:hover {
  background: var(--bb-gold, #BFA05A);
  color: var(--bb-white, #FFFFFF);
}

/* ========================================
 * Flavor Profile Tags
 * ======================================== */

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

.flavor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 8px);
  margin-top: var(--space-xs, 8px);
}

.flavor-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs, 8px) var(--space-sm, 12px);
  background: rgba(191, 160, 90, 0.1);
  border: 1px solid rgba(191, 160, 90, 0.3);
  border-radius: var(--radius-button, 12px);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bb-gold, #BFA05A);
  font-family: var(--font-ui, 'Inter', sans-serif);
}

/* Dark mode flavor tags */
[data-bar-mode='dark'] .flavor-tag,
body.dark .flavor-tag {
  background: rgba(191, 160, 90, 0.15);
  border-color: rgba(191, 160, 90, 0.4);
  color: var(--bb-gold, #BFA05A);
}

/* ========================================
 * 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, rgba(255, 255, 255, 0.9));
  margin: 0;
  font-style: italic;
}

/* Light mode overrides for glassware and garnish text */
:root[data-ui-theme='halytic'] .glassware-text,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .glassware-text,
:root[data-ui-theme='halytic'] .garnish-text,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .garnish-text {
  color: #333;
}

/* ========================================
 * Make Results Container
 * ======================================== */

#makeResultsContainer {
  display: block !important;
  width: 100%;
  margin-top: var(--space-xl, 32px);
  margin-bottom: var(--space-xl, 32px);
}

#makeResultsContainer[style*="display: none"] {
  display: none !important;
}

.make-results-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 24px);
  width: 100%;
}

.make-results-content .bb-card {
  width: 100%;
  opacity: 1;
  visibility: visible;
}

/* Ensure all text in Make a Drink result cards is visible in light mode */
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card,
:root.theme-aperium.mode-light .make-results-content .bb-card {
  color: rgba(15, 23, 42, 0.95) !important;
}

:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card h3,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card .bb-card-title,
:root.theme-aperium.mode-light .make-results-content .bb-card h3,
:root.theme-aperium.mode-light .make-results-content .bb-card .bb-card-title {
  color: rgba(15, 23, 42, 0.98) !important;
}

:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card p,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card li,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card .make-result-flavor,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card .make-result-why,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card .make-result-instructions,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card .make-result-instructions li,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .make-results-content .bb-card .make-result-garnish,
:root.theme-aperium.mode-light .make-results-content .bb-card p,
:root.theme-aperium.mode-light .make-results-content .bb-card li {
  color: rgba(15, 23, 42, 0.85) !important;
}

/* Fix placeholder subtitle text visibility in light mode */
:root[data-ui-theme='aperium'][data-bar-mode='light'] .bb-page-subtitle,
:root.theme-aperium.mode-light .bb-page-subtitle {
  color: rgba(15, 23, 42, 0.85) !important;
}

/* ========================================
 * Builder Card Vertical Rhythm
 * ======================================== */

/* Normalize section spacing inside the builder card */
.make-drink-card .make-drink-form__section {
  margin-bottom: var(--ds-space-6, 24px);
}

/* Ensure toggle groups have consistent visual rhythm */
.make-drink-card .make-drink-form__radio-group {
  margin-top: var(--ds-space-2, 8px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2, 8px);
}

/* CTA separation - creates clear "commit" moment */
.make-drink-card .make-drink-form__submit {
  margin-top: var(--ds-space-8, 32px);
}

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

@media (max-width: 768px) {
  /* Slightly reduce section spacing on mobile for better density */
  .make-drink-card .make-drink-form__section {
    margin-bottom: var(--ds-space-5, 20px);
  }

  /* Mobile header confidence - subtle padding increase (scoped to Make a Drink page only) */
  .make-drink-page .bb-header {
    padding-bottom: var(--ds-space-3, 12px);
  }

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

  .drink-category-badge {
    font-size: 0.7rem;
    padding: var(--space-xs, 8px) var(--space-sm, 12px);
  }

  .flavor-tag {
    font-size: 0.7rem;
    padding: 6px var(--space-xs, 8px);
  }

  #makeDrinkResultsContainer {
    margin-top: var(--space-lg, 24px);
    margin-bottom: var(--space-lg, 24px);
  }
}