/**
 * Start From Scratch Page Styles - CHUNK 93
 * Aligned to Hero Builder Standard v1
 */

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

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

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

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

.start-from-scratch-results-card {
  max-width: 780px;
  margin: 32px auto 40px;
  width: 100%;
}

/* Single card centered layout */
.start-from-scratch-results-card .round-card {
  max-width: 100%;
  margin: 0 auto;
}

/* Card inherits all styles from round-builder.css */
.start-from-scratch-drink-card {
  /* All card styles come from .round-card in round-builder.css */
}

/* Fix text color for Glassware, Garnish, and Why This Recipe sections */
.start-from-scratch-drink-card .glassware-text,
.start-from-scratch-drink-card .garnish-text {
  color: rgba(255, 255, 255, 0.9) !important;
}

.start-from-scratch-drink-card .why-it-works-gold .why-it-works-text {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Light mode overrides */
:root[data-ui-theme='halytic'] .start-from-scratch-drink-card .glassware-text,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .start-from-scratch-drink-card .glassware-text,
:root[data-ui-theme='halytic'] .start-from-scratch-drink-card .garnish-text,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .start-from-scratch-drink-card .garnish-text {
  color: #333 !important;
}

:root[data-ui-theme='halytic'] .start-from-scratch-drink-card .why-it-works-gold .why-it-works-text,
:root[data-ui-theme='aperium'][data-bar-mode='light'] .start-from-scratch-drink-card .why-it-works-gold .why-it-works-text {
  color: #333 !important;
}

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

@media (max-width: 768px) {
  /* A) Sticky primary CTA with safe-area padding */
  .start-from-scratch-form__actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--card, #161516);
    padding: var(--ds-space-3, 12px) 0;
    padding-bottom: calc(var(--ds-space-3, 12px) + env(safe-area-inset-bottom));
    margin-top: var(--ds-space-6, 24px);
    border-top: 1px solid var(--border, rgba(196, 126, 66, 0.28));
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  }

  /* Reserve space for sticky CTA to prevent content overlap */
  .start-from-scratch-page .bb-main-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* B) iOS input behavior - 16px font to prevent zoom */
  .start-from-scratch-form__select,
  .start-from-scratch-form__textarea {
    font-size: 16px;
  }

  /* B) Tap targets ≥44px for buttons */
  .start-from-scratch-form__submit {
    min-height: 44px;
    font-size: 16px; /* Prevent iOS zoom */
  }

  .start-from-scratch-actions__btn {
    min-height: 44px;
    font-size: 16px; /* Prevent iOS zoom */
  }

  /* C) Layout density - tightened header/title spacing */
  .start-from-scratch-page .bb-header {
    padding-top: var(--ds-space-2, 8px);
    padding-bottom: var(--ds-space-2, 8px);
  }

  /* Slightly reduce section spacing on mobile for better density */
  .start-from-scratch-card .start-from-scratch-form__section {
    margin-bottom: var(--ds-space-5, 20px);
  }

  .bb-page-subtitle {
    margin-bottom: var(--ds-space-4, 16px);
    font-size: 14px;
  }

  /* D) Scrolling + panels - STABILIZATION: Remove nested scroll trapping
   * Page should scroll naturally, not trap scroll inside results card
   */
  .start-from-scratch-results-card {
    /* Removed max-height and overflow-y to allow natural page scrolling */
    /* max-height: clamp(300px, 50vh, 600px); */
    /* overflow-y: auto; */
    /* -webkit-overflow-scrolling: touch; */
  }

  /* E) Visual polish - button pressed state */
  .start-from-scratch-form__submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .start-from-scratch-actions__btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  /* Icon/text spacing in action buttons */
  .start-from-scratch-actions__btn span {
    flex-shrink: 0;
    margin-right: var(--space-xs, 8px);
  }

  /* Sticky action region for rebuild button */
  .start-from-scratch-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--card, #161516);
    padding-top: var(--ds-space-3, 12px);
    padding-bottom: calc(var(--ds-space-3, 12px) + env(safe-area-inset-bottom));
    margin-top: var(--ds-space-6, 24px);
    border-top: 1px solid var(--border, rgba(196, 126, 66, 0.28));
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  }
}