/**
 * Bottom Sheet Styles
 * Phase 3: Mobile Builder Redesign
 *
 * Modal that slides up from bottom, contains edit controls.
 * Triggered from Edit Drawer option buttons.
 */

/* ========================================
   BOTTOM SHEET OVERLAY
   ======================================== */

.bottom-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  /* Blur effect for modern feel */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.bottom-sheet-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   BOTTOM SHEET CONTAINER
   ======================================== */

.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;

  /* Sheet height - leaves space for header */
  max-height: calc(100vh - var(--mobile-head-h, 100px) - 20px);
  max-height: calc(100dvh - var(--mobile-head-h, 100px) - 20px);

  background: rgb(245, 247, 255);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.15);

  /* Initial state - hidden below viewport */
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
              max-height 0.35s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.35s ease;

  /* Layout */
  display: flex;
  flex-direction: column;

  /* Safe area for bottom notch */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-sheet.is-open {
  transform: translateY(0);
}

/* ========================================
   SHEET HEADER
   ======================================== */

.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

/* Drag handle indicator */
.bottom-sheet-header::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
}

.bottom-sheet-title {
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.bottom-sheet-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f5f5f5;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.bottom-sheet-close:hover {
  background: #eee;
}

.bottom-sheet-close:active {
  background: #e0e0e0;
  transform: scale(0.95);
}

.bottom-sheet-close svg {
  width: 20px;
  height: 20px;
}

/* ========================================
   SHEET CONTENT
   ======================================== */

.bottom-sheet-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;

  /* Prevent content from being too tall */
  min-height: 200px;
}

/* Content sections within the sheet */
.bottom-sheet-section {
  margin-bottom: 24px;
}

.bottom-sheet-section:last-child {
  margin-bottom: 0;
}

.bottom-sheet-section-title {
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* ========================================
   SHEET FOOTER (optional action buttons)
   ======================================== */

.bottom-sheet-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  display: flex;
  gap: 12px;
}

.bottom-sheet-footer .btn-primary {
  flex: 1;
  padding: 14px 24px;
  background: linear-gradient(135deg, #9333ea, #7c3aed);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
}

.bottom-sheet-footer .btn-primary:active {
  transform: scale(0.98);
}

.bottom-sheet-footer .btn-secondary {
  padding: 14px 24px;
  background: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 12px;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
}

.bottom-sheet-footer .btn-secondary:active {
  background: #e8e8e8;
  transform: scale(0.98);
}

/* ========================================
   COMMON FORM ELEMENTS IN SHEETS
   ======================================== */

/* Text input */
.bottom-sheet-input {
  width: 100%;
  padding: 14px 16px;
  background: #f8f8f8;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  color: #1a1a1a;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.bottom-sheet-input:focus {
  outline: none;
  background: white;
  border-color: #9333ea;
}

.bottom-sheet-input::placeholder {
  color: #999;
}

/* Textarea */
.bottom-sheet-textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  background: #f8f8f8;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  color: #1a1a1a;
  resize: vertical;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.bottom-sheet-textarea:focus {
  outline: none;
  background: white;
  border-color: #9333ea;
}

/* Label */
.bottom-sheet-label {
  display: block;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

/* Field group */
.bottom-sheet-field {
  margin-bottom: 16px;
}

.bottom-sheet-field:last-child {
  margin-bottom: 0;
}

/* ========================================
   TILE GRID (for selections like palettes)
   ======================================== */

.bottom-sheet-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
}

.bottom-sheet-tile {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: hidden;
  position: relative;
}

.bottom-sheet-tile:hover {
  transform: scale(1.02);
}

.bottom-sheet-tile:active {
  transform: scale(0.98);
}

.bottom-sheet-tile.is-selected {
  border-color: #9333ea;
  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.2);
}

.bottom-sheet-tile.is-selected::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: #9333ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/14px no-repeat;
  border-radius: 50%;
}

/* ========================================
   COLOR PALETTE TILES
   ======================================== */

.bottom-sheet-color-tile {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.15s ease;
}

.bottom-sheet-color-tile:hover {
  transform: scale(1.05);
}

.bottom-sheet-color-tile.is-selected {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 2px white, 0 0 0 4px #1a1a1a;
}

/* ========================================
   UPLOAD BUTTON
   ======================================== */

.bottom-sheet-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  background: #f8f8f8;
  border: 2px dashed #ddd;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bottom-sheet-upload:hover {
  background: #f0f0f0;
  border-color: #bbb;
}

.bottom-sheet-upload:active {
  background: #e8e8e8;
}

.bottom-sheet-upload[hidden] {
  display: none !important;
}

.bottom-sheet-upload-icon {
  width: 48px;
  height: 48px;
  color: #888;
}

.bottom-sheet-upload-text {
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.bottom-sheet-upload-hint {
  font-size: 12px;
  color: #999;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Larger phones */
@media (min-width: 428px) {
  .bottom-sheet {
    max-height: calc(100vh - var(--mobile-head-h, 100px) - 40px);
    max-height: calc(100dvh - var(--mobile-head-h, 100px) - 40px);
  }

  .bottom-sheet-header {
    padding: 20px 24px;
  }

  .bottom-sheet-content {
    padding: 24px;
  }

  .bottom-sheet-tiles {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }
}

/* Desktop - hide or show centered modal */
@media (min-width: 769px) {
  .bottom-sheet-overlay,
  .bottom-sheet {
    display: none !important;
  }
}

/* Short phones (landscape) */
@media (max-height: 600px) {
  .bottom-sheet {
    max-height: 85vh;
    max-height: 85dvh;
  }

  .bottom-sheet-header {
    padding: 12px 16px;
  }

  .bottom-sheet-content {
    padding: 16px;
  }
}

/* ========================================
   SPECIFIC SHEET CONTENT STYLES
   ======================================== */

/* Palette sheet - color swatches */
.sheet-palette .bottom-sheet-tiles {
  grid-template-columns: repeat(4, 1fr);
}

/* Hero sheet - larger tiles */
.sheet-hero .bottom-sheet-tiles {
  grid-template-columns: repeat(3, 1fr);
}

.sheet-hero .bottom-sheet-tile {
  aspect-ratio: 1;
}

/* Message sheet - text editing */
.sheet-message .bottom-sheet-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Effects sheet - toggle list */
.sheet-effects .effect-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #f8f8f8;
  border-radius: 12px;
  margin-bottom: 8px;
}

.sheet-effects .effect-item:last-child {
  margin-bottom: 0;
}

.sheet-effects .effect-name {
  font-weight: 600;
  color: #333;
}

.sheet-effects .effect-preview {
  font-size: 24px;
}

/* ========================================
   PHASE 4: CONNECTED CONTENT STYLES
   ======================================== */

/* Loading placeholder */
.bottom-sheet-placeholder {
  padding: 40px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

/* Error message */
.bottom-sheet-error {
  padding: 20px;
  text-align: center;
  color: #e53935;
  font-size: 14px;
}

/* ========================================
   EMOJI BUTTON IN INPUTS
   ======================================== */

.emoji-field-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.emoji-field-wrapper .bottom-sheet-input {
  padding-right: 48px;
}

.emoji-btn-sheet {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.emoji-btn-sheet:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #666;
}

.emoji-btn-sheet:active {
  background: rgba(0, 0, 0, 0.1);
}

/* Emoji Popover */
.sheet-emoji-popover {
  position: fixed;
  z-index: 2200;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  max-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}

.sheet-emoji-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sheet-emoji-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.sheet-emoji-btn:hover {
  background: #f0f0f0;
  transform: scale(1.1);
}

.sheet-emoji-btn:active {
  transform: scale(0.95);
}

/* ========================================
   HERO SHEET - KIND TABS
   ======================================== */

.hero-kind-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.hero-kind-tab {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: #f0f0f0;
  border-radius: 10px;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hero-kind-tab:hover {
  background: #e8e8e8;
}

.hero-kind-tab.is-active {
  background: linear-gradient(135deg, #9333ea, #7c3aed);
  color: white;
}

/* Hero tiles specific styling */
.hero-tiles {
  grid-template-columns: repeat(3, 1fr);
}

.hero-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

/* Hero upload preview */
.hero-upload-preview {
  position: relative;
  width: 100%;
  min-height: 220px;
  max-height: 320px;
  border-radius: 16px;
  background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.hero-upload-preview[hidden] {
  display: none !important;
}

.hero-upload-preview img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Preview actions container */
.bottom-sheet .hero-preview-actions,
.hero-preview-actions {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex !important;
  gap: 10px;
  justify-content: center;
  align-items: center;
  z-index: 20;
  padding: 0 16px;
}

/* Collapse/Edit Effects button */
.bottom-sheet .hero-preview-collapse,
.hero-preview-collapse {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border: none;
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  color: white;
  border-radius: 24px;
  font-family: 'Gilroy', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.4);
  white-space: nowrap;
}

.bottom-sheet .hero-preview-collapse:hover,
.hero-preview-collapse:hover {
  background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.5);
}

.bottom-sheet .hero-preview-collapse svg,
.hero-preview-collapse svg {
  flex-shrink: 0;
}

/* Clear/Remove button */
.bottom-sheet .hero-preview-clear,
.hero-preview-clear {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.bottom-sheet .hero-preview-clear:hover,
.hero-preview-clear:hover {
  background: rgba(220, 38, 38, 0.9);
  transform: scale(1.05);
}

/* ========================================
   EFFECTS LIST
   ======================================== */

.effects-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.effect-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f8f8f8;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.effect-item:hover {
  background: #f0f0f0;
}

.effect-item.is-selected {
  background: rgba(147, 51, 234, 0.08);
  border-color: #9333ea;
}

.effect-icon {
  font-size: 24px;
  width: 32px;
  text-align: center;
}

.effect-label {
  flex: 1;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.effect-check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9333ea;
  font-weight: 700;
  font-size: 16px;
}

/* ========================================
   CTA / BUTTON PRESETS
   ======================================== */

.cta-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cta-preset {
  padding: 10px 16px;
  background: #f0f0f0;
  border: 2px solid transparent;
  border-radius: 20px;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cta-preset:hover {
  background: #e8e8e8;
}

.cta-preset.is-selected {
  background: rgba(147, 51, 234, 0.1);
  border-color: #9333ea;
  color: #9333ea;
}

/* ========================================
   VALID UNTIL TOGGLE
   ======================================== */

.valid-until-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.valid-until-header .bottom-sheet-label {
  margin-bottom: 0;
}

/* Small toggle switch */
.toggle-switch-small {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch-small input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch-small .toggle-track {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ddd;
  border-radius: 12px;
  transition: all 0.25s ease;
}

.toggle-switch-small .toggle-track::before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.25s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.toggle-switch-small input:checked + .toggle-track {
  background: linear-gradient(135deg, #9333ea, #7c3aed);
}

.toggle-switch-small input:checked + .toggle-track::before {
  transform: translateX(20px);
}

.toggle-switch-small input:disabled + .toggle-track {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
   SENDER INFO SECTION
   ======================================== */

.sender-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sender-toggle-row .bottom-sheet-label {
  margin-bottom: 0;
}

.sender-fields {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Select wrapper for styled dropdown */
.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #888;
  pointer-events: none;
}

.select-wrapper select.bottom-sheet-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

/* ========================================
   DECOR NONE OPTION
   ======================================== */

.decor-none {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #999;
  background: #f8f8f8;
  border-radius: 10px;
}

.decor-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* ========================================
   GIFT LOGO TILES
   ======================================== */

.gift-logo-tiles {
  grid-template-columns: repeat(4, 1fr);
}

.gift-logo-tile {
  background: #f8f8f8;
}

.gift-logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

/* ========================================
   BACKGROUND TILES
   ======================================== */

.bg-tiles {
  grid-template-columns: repeat(4, 1fr);
}

.bg-tile {
  aspect-ratio: 1;
}

/* ========================================
   PALETTE TILES (refined)
   ======================================== */

.palette-tiles {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.palette-tiles .bottom-sheet-color-tile {
  aspect-ratio: 1;
  border-radius: 10px;
}

/* ========================================
   PORTAL PATTERN STYLES
   Sections moved from panel into bottom sheet
   ======================================== */

/* Base portal styling - sections inside bottom sheet */
.in-bottom-sheet {
  /* Remove panel-specific spacing */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hide section headers inside bottom sheet (sheet has its own header) */
.in-bottom-sheet > .panel-section-header,
.in-bottom-sheet > .section-header,
.in-bottom-sheet > .section-head:not(.sender-toggle-header),
.in-bottom-sheet > h3,
.in-bottom-sheet > h4 {
  display: none !important;
}

/* Content wrapper inside portaled section */
.in-bottom-sheet > .section-content,
.in-bottom-sheet > .panel-section-content {
  padding: 0;
}

/* Palette container - show all palettes in grid when in bottom sheet */
.in-bottom-sheet .palette,
.in-bottom-sheet .palette-dots,
.in-bottom-sheet #paletteDots {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.in-bottom-sheet .palette .dot,
.in-bottom-sheet .palette-dots .dot,
.in-bottom-sheet #paletteDots .dot {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
}

.in-bottom-sheet .palette .dot:hover,
.in-bottom-sheet .palette-dots .dot:hover,
.in-bottom-sheet #paletteDots .dot:hover {
  transform: scale(1.05);
}

.in-bottom-sheet .palette .dot.active,
.in-bottom-sheet .palette-dots .dot.selected,
.in-bottom-sheet #paletteDots .dot.active {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #1a1a1a;
}

/* Hide the "+" more button in bottom sheet - all palettes shown */
.in-bottom-sheet .palette .more-btn,
.in-bottom-sheet #paletteDots .more-btn {
  display: none !important;
}

/* Message section - input fields */
.in-bottom-sheet .field-group {
  margin-bottom: 16px;
}

.in-bottom-sheet .field-group:last-child {
  margin-bottom: 0;
}

/* Emoji field container - matches inputs.css styling */
.in-bottom-sheet .emoji-field {
  display: flex;
  align-items: center;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: 4px;
  box-shadow: 0 8px 20px rgba(33, 26, 83, 0.08);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.in-bottom-sheet .emoji-field:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus), 0 8px 20px rgba(33, 26, 83, 0.08);
  background: var(--color-surface-focus);
}

.in-bottom-sheet .emoji-field input,
.in-bottom-sheet .emoji-field textarea {
  flex: 1;
  height: auto;
  border: 0 !important;
  background: transparent !important;
  padding: 0 1rem;
  box-shadow: none !important;
}

.in-bottom-sheet .emoji-field input:focus,
.in-bottom-sheet .emoji-field textarea:focus {
  border: 0 !important;
  box-shadow: none !important;
}

.in-bottom-sheet .emoji-field textarea {
  min-height: 120px;
  resize: vertical;
}

/* Standalone inputs (not in emoji-field) */
.in-bottom-sheet input[type="text"]:not(.emoji-field input),
.in-bottom-sheet textarea:not(.emoji-field textarea) {
  width: 100%;
  padding: 14px 16px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--color-ink);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  box-sizing: border-box;
}

.in-bottom-sheet input[type="text"]:not(.emoji-field input):focus,
.in-bottom-sheet textarea:not(.emoji-field textarea):focus {
  outline: none;
  background: var(--color-surface-focus);
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.in-bottom-sheet textarea:not(.emoji-field textarea) {
  min-height: 120px;
  resize: vertical;
}

/* ========================================
   HERO SECTION
   ======================================== */

/* Hide section label - sheet has its own header */
.in-bottom-sheet[data-section="hero"] > .label,
.in-bottom-sheet[data-section="hero"] > .label-with-tooltip,
.in-bottom-sheet .hero-section > .label {
  display: none !important;
}

/* Remove frame.content-card visual container - not needed in mobile sheet */
.in-bottom-sheet .frame.content-card,
.in-bottom-sheet #heroFrame,
.in-bottom-sheet .effects-card-options.content-card,
.in-bottom-sheet #effectsCardOptions,
.in-bottom-sheet .decor-gallery.content-card,
.in-bottom-sheet .button-text.content-card,
.in-bottom-sheet #ctaField {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Hide hero explainer bubble - not needed in mobile sheet */
.in-bottom-sheet .hero-explainer {
  display: none !important;
}

/* Hero combo fieldset - remove default fieldset styling */
.in-bottom-sheet .hero-combo {
  border: none;
  padding: 0;
  margin: 0;
}

/* Hero option tiles - simplified button style for mobile */
.in-bottom-sheet .hero-option {
  aspect-ratio: unset !important;
  padding: 12px 10px !important;
  background: rgb(245, 247, 255) !important; /* Match bottom sheet bg */
  border: 1px solid var(--color-border-light, rgba(31, 33, 60, 0.12)) !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.in-bottom-sheet .hero-option:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Hide checkbox/radio */
.in-bottom-sheet .hero-option__checkbox {
  display: none !important;
}

/* Active tile - accent color background */
.in-bottom-sheet .hero-option:has(input:checked),
.in-bottom-sheet .hero-option.is-active {
  background: var(--color-accent-primary, #5a4af2) !important;
  border-color: var(--color-accent-primary, #5a4af2) !important;
}

.in-bottom-sheet .hero-option:has(input:checked) .hero-option__title,
.in-bottom-sheet .hero-option.is-active .hero-option__title {
  color: #fff !important;
}

/* Hero tiles grid */
.in-bottom-sheet .hero-tiles,
.in-bottom-sheet .hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.in-bottom-sheet .hero-tile {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
}

.in-bottom-sheet .hero-tile:hover {
  transform: scale(1.02);
}

.in-bottom-sheet .hero-tile.selected {
  border-color: #9333ea;
  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.2);
}

/* Decor section - decor tiles */
.in-bottom-sheet .decor-tiles,
.in-bottom-sheet .decor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.in-bottom-sheet .decor-tile {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
}

.in-bottom-sheet .decor-tile.selected {
  border-color: #9333ea;
}

/* Effects section - list */
.in-bottom-sheet .effects-list,
.in-bottom-sheet .fx-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.in-bottom-sheet .fx-item,
.in-bottom-sheet .effect-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f8f8f8;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.in-bottom-sheet .fx-item:hover,
.in-bottom-sheet .effect-option:hover {
  background: #f0f0f0;
}

.in-bottom-sheet .fx-item.selected,
.in-bottom-sheet .effect-option.selected {
  background: rgba(147, 51, 234, 0.08);
  border-color: #9333ea;
}

/* Button/CTA section */
.in-bottom-sheet .cta-presets,
.in-bottom-sheet .btn-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.in-bottom-sheet .cta-preset,
.in-bottom-sheet .btn-preset {
  padding: 10px 16px;
  background: #f0f0f0;
  border: 2px solid transparent;
  border-radius: 20px;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.15s ease;
}

.in-bottom-sheet .cta-preset.selected,
.in-bottom-sheet .btn-preset.selected {
  background: rgba(147, 51, 234, 0.1);
  border-color: #9333ea;
  color: #9333ea;
}

/* Toggle switches inside bottom sheet */
.in-bottom-sheet .toggle-row,
.in-bottom-sheet .switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.in-bottom-sheet .toggle-row:last-child,
.in-bottom-sheet .switch-row:last-child {
  border-bottom: none;
}

/* Label styling inside bottom sheet */
.in-bottom-sheet label {
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* Subsection titles inside portaled content */
.in-bottom-sheet .subsection-title,
.in-bottom-sheet .panel-subsection-title {
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 16px 0 12px;
}

.in-bottom-sheet .subsection-title:first-child,
.in-bottom-sheet .panel-subsection-title:first-child {
  margin-top: 0;
}

/* Section group (for message which wraps title+text) */
.in-bottom-sheet.panel-section-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.in-bottom-sheet.panel-section-group > .panel-section {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* Placeholder for portal restore */
.portal-placeholder {
  display: none;
}

/* ==========================================================================
   Step-3 (Gift Custom) Portal Styles
   ========================================================================== */

/* Background gradient grid - similar to palette dots */
.in-bottom-sheet .bg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.in-bottom-sheet .bg-grid > * {
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  border-radius: 10px;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.in-bottom-sheet .bg-grid > *::before,
.in-bottom-sheet .bg-grid > *::after {
  display: none !important;
}

.in-bottom-sheet .bg-grid > *:hover {
  transform: scale(1.03);
  box-shadow: none !important;
}

.in-bottom-sheet .bg-grid > *.active {
  outline: 3px solid #1a1a1a !important;
  outline-offset: -3px;
  box-shadow: none !important;
}

/* Hide the "+" more button in bottom sheet - all backgrounds shown */
.in-bottom-sheet .bg-grid .more-btn {
  display: none !important;
}

/* Sender (From) section - .in-bottom-sheet is added directly to .from-section */
.from-section.in-bottom-sheet {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Hide toggle text in bottom sheet - sheet header has the title */
.in-bottom-sheet .sender-toggle-text {
  display: none;
}

/* Sender toggle header in bottom sheet - hint left, toggle right */
.in-bottom-sheet .sender-toggle-header {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

/* Sender hint in bottom sheet */
.in-bottom-sheet .sender-toggle-hint {
  display: block;
  font-size: 0.85rem;
  color: var(--color-ink-label, #1a1a2e);
  font-weight: 400;
}

/* Hide delete button - using static remove text instead */
.in-bottom-sheet .from-row .from-del {
  display: none !important;
}

/* Remove text link under username input - hidden by default, visible on non-first rows */
.in-bottom-sheet .from-row .remove-text {
  display: none;
  text-align: right;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #999;
  padding: 4px 0 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.in-bottom-sheet .from-row .remove-text.is-visible {
  display: block;
}

.in-bottom-sheet .from-row .remove-text:hover {
  color: #dc2626;
}

/* Remove content-card wrapper styling */
.in-bottom-sheet .from-card {
  display: contents !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.in-bottom-sheet .from-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Flat sender rows with dividers instead of cards */
.in-bottom-sheet .from-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Divider between rows */
.in-bottom-sheet .from-row + .from-row {
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Delete button styles moved to step-3-gift-custom.css for proper specificity */

/* Add sender button - flat style */
.in-bottom-sheet .from-add-btn {
  width: 100%;
  padding: 14px 0;
  margin-top: 8px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.in-bottom-sheet .from-add-btn:hover {
  background: transparent;
  color: #333;
}

/* Sender row inputs */
.in-bottom-sheet .from-row input,
.in-bottom-sheet .from-row select {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: #1a1a1a;
  transition: border-color 0.15s ease;
}

/* First input aligns with delete button */
.in-bottom-sheet .from-row input:first-of-type {
  grid-row: 1;
}

.in-bottom-sheet .from-row input:focus,
.in-bottom-sheet .from-row select:focus {
  outline: none;
  border-color: #9333ea;
}

.in-bottom-sheet .from-row input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* Platform select wrapper */
.in-bottom-sheet .from-row .fx-select {
  position: relative;
  width: 100%;
}

.in-bottom-sheet .from-row .fx-select select {
  appearance: none;
  padding-right: 36px;
}

.in-bottom-sheet .from-row .fx-select .fx-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Image picker (logo-combo) */
.in-bottom-sheet .logo-combo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.in-bottom-sheet .logo-grid-mobile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.in-bottom-sheet .logo-thumb-mobile {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  background: #f8f8f8;
  padding: 0;
  transition: all 0.15s ease;
}

.in-bottom-sheet .logo-thumb-mobile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.in-bottom-sheet .logo-thumb-mobile.selected,
.in-bottom-sheet .logo-thumb-mobile:hover {
  border-color: #9333ea;
}

.in-bottom-sheet .logo-tile-mobile {
  aspect-ratio: 1;
  max-width: 120px;
  border-radius: 16px;
  border: 2px solid rgba(31, 33, 60, 0.12);
  background: #fff;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.in-bottom-sheet .logo-tile-mobile__img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.in-bottom-sheet .logo-change-mobile {
  padding: 12px 20px;
  background: #f8f8f8;
  border: 2px solid transparent;
  border-radius: 10px;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.15s ease;
}

.in-bottom-sheet .logo-change-mobile:hover {
  background: #f0f0f0;
}

/* ============================================
   GIFT INFO SECTION (Combined: Gift Name + Valid Until + Instructions)
   Unified spacing: label (4px) → hint (10px) → input
   ============================================ */
.in-bottom-sheet[data-section="gift-info"] {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.in-bottom-sheet[data-section="gift-info"] .row.title-row {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Dividers between fields */
.in-bottom-sheet[data-section="gift-info"] .row.title-row .field {
  padding: 16px 0;
  border-bottom: 1px solid #e5e5e5;
}

.in-bottom-sheet[data-section="gift-info"] .row.title-row .field:first-child {
  padding-top: 0;
}

.in-bottom-sheet[data-section="gift-info"] .row.title-row .field:last-child {
  border-bottom: none;
}

.in-bottom-sheet[data-section="gift-info"] .instructions-field {
  padding-top: 16px;
  margin-top: 0;
  border-top: 1px solid #e5e5e5;
}

.in-bottom-sheet[data-section="gift-info"] .field {
  width: 100%;
}

.in-bottom-sheet[data-section="gift-info"] .instructions-field textarea {
  height: 120px !important;
  min-height: unset !important;
  resize: none;
}

/* Unified label styling */
.in-bottom-sheet[data-section="gift-info"] .label {
  font-size: calc(var(--font-size-md, 15px) + 1px); /* 16px */
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-ink, #222);
  margin: 0 0 4px 0 !important;
}

/* Unified hint styling */
.in-bottom-sheet[data-section="gift-info"] .hint {
  display: block !important;
  font-size: 13px;
  color: #666;
  margin: 0 0 10px 0 !important;
  line-height: 1.4;
}

/* Input fields styling */
.in-bottom-sheet[data-section="gift-info"] .emoji-field,
.in-bottom-sheet[data-section="gift-info"] .valid-until-wrap {
  margin-top: 0 !important;
}

.in-bottom-sheet[data-section="gift-info"] .emoji-field input,
.in-bottom-sheet[data-section="gift-info"] textarea,
.in-bottom-sheet[data-section="gift-info"] .valid-until-wrap input[type="date"] {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: #222;
  width: 100%;
  box-sizing: border-box;
}

.in-bottom-sheet[data-section="gift-info"] .emoji-field input:focus,
.in-bottom-sheet[data-section="gift-info"] textarea:focus,
.in-bottom-sheet[data-section="gift-info"] .valid-until-wrap input[type="date"]:focus {
  outline: none;
  border-color: var(--accent, #8aa4ff);
  box-shadow: 0 0 0 3px rgba(138, 164, 255, 0.15);
}

/* Valid Until: section-head--toggleable overrides */
.in-bottom-sheet[data-section="gift-info"] .section-head--toggleable {
  background: none;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.in-bottom-sheet[data-section="gift-info"] .section-head--toggleable .section-head__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.in-bottom-sheet[data-section="gift-info"] .section-head--toggleable .label {
  margin: 0 !important;
}

.in-bottom-sheet[data-section="gift-info"] .section-head--toggleable .hint {
  margin: 0 !important;
}

/* Ensure emoji button is visible */
.in-bottom-sheet .emoji-btn {
  border: none;
  background: transparent;
  color: #000;
  border-radius: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  transition: opacity var(--transition-base);
}

.in-bottom-sheet .emoji-btn:hover {
  opacity: 0.7;
}

.in-bottom-sheet .emoji-btn svg {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

/* ============================================
   DECOR SHEET CONTENT
   Modal-like layout for decor in bottom sheet
   ============================================ */

.in-bottom-sheet .decor-sheet-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

/* Tags filter - horizontal scrollable row */
.in-bottom-sheet .decor-sheet-tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 4px 8px;
  margin: 0 -4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.in-bottom-sheet .decor-sheet-tags::-webkit-scrollbar {
  display: none;
}

/* Grid - 3 columns, 2 rows (6 items per page) */
.in-bottom-sheet .decor-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  min-height: 120px;
}

/* Cards in sheet - use modal card styling */
.in-bottom-sheet .decor-sheet-grid .hero-modal__card {
  aspect-ratio: 1;
  padding: 8px;
  background: white;
  border: var(--border-width-active) solid rgba(31, 33, 60, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.in-bottom-sheet .decor-sheet-grid .hero-modal__card:hover {
  border-color: var(--color-border-focus);
  transform: none;
}

.in-bottom-sheet .decor-sheet-grid .hero-modal__card.is-active {
  border-color: var(--border-color-active);
  background: var(--background-active);
  box-shadow: var(--shadow-active-glow);
}

.in-bottom-sheet .decor-sheet-grid .hero-modal__card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* Navigation - pagination controls */
.in-bottom-sheet .decor-sheet-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 8px;
  min-height: 44px;
}

/* Hide navigation when not needed */
.in-bottom-sheet .decor-sheet-nav:empty {
  display: none;
}

/* Empty state */
.in-bottom-sheet .decor-sheet-grid .hero-modal__empty {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
  color: #5b5f86;
  font-size: 14px;
  border: 1px dashed rgba(122, 128, 185, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   GIFT IMAGE SECTION (Step 3)
   Simplified: show only selected image + Change button (like desktop)
   ========================================================================== */

/* Hide the "Image" label - bottom sheet already has its own header */
.in-bottom-sheet[data-section="gift-image"] > .label {
  display: none !important;
}

/* Hide desktop version (logo-tile with inline "Change" button) */
.in-bottom-sheet .logo-combo .logo-tile.has-change.inline {
  display: none !important;
}

/* Hide the 3-thumbnail grid in bottom sheet - use only single tile + Change */
.in-bottom-sheet .logo-grid-mobile {
  display: none !important;
}

/* Logo combo - centered vertical layout */
.in-bottom-sheet .logo-combo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Always show single tile in bottom sheet (regardless of has-selected state) */
.in-bottom-sheet .logo-tile-mobile {
  display: grid !important;
  width: 200px;
  max-width: 200px;
  aspect-ratio: 1;
  border-radius: 24px;
  border: 2px solid rgba(31, 33, 60, 0.12);
  background: #fff;
  overflow: hidden;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.in-bottom-sheet .logo-tile-mobile:hover {
  border-color: #9333ea;
}

.in-bottom-sheet .logo-tile-mobile__img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

/* Mobile change button - styled like .btn-tile-action (hero-combo buttons) */
.in-bottom-sheet .logo-change-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid rgba(31, 33, 60, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-ink, #1f213c);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  font-family: var(--font-family, 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  box-shadow: none;
}

.in-bottom-sheet .logo-change-mobile:hover {
  background: #fff;
  border-color: var(--color-ink, #1f213c);
  color: var(--color-ink, #1f213c);
}

.in-bottom-sheet .logo-change-mobile:active {
  background: #fff;
  transform: scale(0.98);
}

.in-bottom-sheet .logo-change-mobile:focus-visible {
  outline: 3px solid rgba(90, 74, 242, 0.25);
  outline-offset: 2px;
}

/* ==========================================================================
   GIFT INSTRUCTIONS SECTION (Step 3)
   Show hint instead of duplicated title
   ========================================================================== */

/* Hide the "Instructions" label - bottom sheet already has its own header */
.in-bottom-sheet[data-section="gift-instructions"] > .label {
  display: none !important;
}

/* Show hint in bottom sheet (hidden on desktop via .mobile-only) */
.in-bottom-sheet[data-section="gift-instructions"] .hint {
  display: block !important;
  padding: 0 4px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #5b5f86;
  text-align: left;
}

/* Style the textarea in bottom sheet */
.in-bottom-sheet[data-section="gift-instructions"] textarea {
  width: 100%;
  min-height: 140px;
  padding: 16px;
  border: 1px solid rgba(31, 33, 60, 0.15);
  border-radius: 16px;
  background: #fff;
  font-family: var(--font-family, 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink, #1f213c);
  resize: none;
  transition: border-color 0.15s ease;
}

.in-bottom-sheet[data-section="gift-instructions"] textarea:focus {
  outline: none;
  border-color: #9333ea;
}

.in-bottom-sheet[data-section="gift-instructions"] textarea::placeholder {
  color: rgba(91, 95, 134, 0.6);
}

/* ============================================
   COMPACT MODE - Collapsible sheet for hero effects
   Uses same control styling as main hero sheet
   ============================================ */

.bottom-sheet.is-compact {
  max-height: 200px;
  min-height: 120px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-sheet.is-compact .bottom-sheet-header {
  display: none;
}

.bottom-sheet.is-compact .bottom-sheet-content {
  padding: 16px;
  max-height: none;
  overflow: visible;
}

/* Compact sheet content layout */
.compact-sheet-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.compact-sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Header row: Thumbnail + Effect dropdown + Expand button */
.compact-sheet-row--header {
  align-items: center;
}

/* Controls row: Width + Color/Opacity */
.compact-sheet-row--controls {
  gap: 16px;
  padding-left: 4px;
}

.compact-sheet-row--controls .compact-fx__col {
  flex: 1;
  min-width: 0;
}

/* Thumbnail */
.compact-sheet-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(31, 33, 60, 0.05);
  border: 1px solid rgba(31, 33, 60, 0.1);
}

.compact-sheet-thumb img,
.compact-sheet-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compact-sheet-thumb--video {
  position: relative;
}

.compact-sheet-thumb--video::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}

/* Effect dropdown in header row */
.compact-sheet-effect {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compact-sheet-effect .fx-label {
  font-size: 11px;
  font-weight: 600;
  color: #5b5f86;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.compact-sheet-effect .fx-select {
  width: 100%;
}

/* FX controls container (legacy, keeping for compatibility) */
.compact-sheet-fx {
  flex: 1;
  min-width: 0;
}

/* FX card - grid layout matching main sheet */
.compact-fx__card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.compact-fx__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Compact mode specific overrides for fx controls */
.compact-sheet-content .fx-label {
  font-size: 12px;
  font-weight: 600;
  color: #1f213c;
}

.compact-sheet-content .fx-select {
  position: relative;
}

.compact-sheet-content .fx-select select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 38px;
  line-height: 38px;
  border: 1px solid rgba(31, 33, 60, 0.15);
  border-radius: 10px;
  background: #fff;
  padding: 0 28px 0 10px;
  font-family: 'Gilroy', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1f213c;
  box-shadow: 0 4px 12px rgba(33, 26, 83, 0.08);
  cursor: pointer;
}

.compact-sheet-content .fx-select .fx-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #5b5f86;
  pointer-events: none;
}

/* Range slider */
.compact-sheet-content .fx-range {
  display: flex;
  align-items: center;
  height: 38px;
}

.compact-sheet-content .fx-range input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.compact-sheet-content .fx-range input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(#1f213c, #1f213c) 0/var(--pct, 0%) 100% no-repeat, rgba(31, 33, 60, 0.1);
  border-radius: 999px;
}

.compact-sheet-content .fx-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1f213c;
  margin-top: -6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.compact-sheet-content .fx-range input[type="range"]::-moz-range-track {
  height: 6px;
  background: rgba(31, 33, 60, 0.1);
  border: none;
  border-radius: 999px;
}

.compact-sheet-content .fx-range input[type="range"]::-moz-range-progress {
  height: 6px;
  background: #1f213c;
  border: none;
  border-radius: 999px;
}

.compact-sheet-content .fx-range input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1f213c;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/* Color picker */
.compact-sheet-content .fx-color {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  background: rgba(31, 33, 60, 0.05);
  border: 1px solid rgba(31, 33, 60, 0.1);
  border-radius: 10px;
  padding: 0 10px;
}

.compact-sheet-content .fx-color__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #1f213c;
  background: var(--dot, #ffffff);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.compact-sheet-content .fx-color__value {
  font-size: 12px;
  font-weight: 600;
  color: #1f213c;
  letter-spacing: 0.02em;
}

.compact-sheet-content .fx-color__picker {
  position: absolute;
  left: 10px; /* Account for parent padding */
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  opacity: 0;
  cursor: pointer;
  /* No pointer-events: none - must be clickable on mobile! */
}

/* Expand button in header row */
.compact-sheet-expand {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(31, 33, 60, 0.15);
  border-radius: 50%;
  background: #fff;
  color: #5b5f86;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
}

.compact-sheet-expand:hover {
  border-color: #9333ea;
  color: #9333ea;
  background: rgba(147, 51, 234, 0.05);
}

.compact-sheet-expand svg {
  display: block;
}

/* Small screens adjustments */
@media (max-width: 400px) {
  .compact-sheet-thumb {
    width: 64px;
    height: 64px;
  }

  .compact-sheet-expand {
    width: 36px;
    height: 36px;
  }

  .compact-sheet-effect .fx-select select {
    height: 34px;
    font-size: 12px;
  }

  .compact-sheet-row--controls {
    gap: 12px;
    padding-left: 0;
  }

  .compact-sheet-content .fx-range {
    height: 34px;
  }
}