/* ==========================================================================
   Regalo Digital - Premium Responsive Design System
   Optimized for Desktop, Laptops, iPad/Tablets, and Mobile Devices
   ========================================================================== */

/* ==========================================================================
   1. LAPTOPS & SMALL DESKTOPS (992px - 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
  .studio-container {
    grid-template-columns: 390px 1fr;
    gap: 18px;
    padding: 18px;
  }

  .preview-stage-container {
    min-height: calc(100vh - 36px);
  }
}

/* ==========================================================================
   2. TABLETS & PORTRAIT IPADS (768px - 991px)
   ========================================================================== */
@media (max-width: 991px) {
  .studio-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 16px;
    gap: 20px;
    min-height: auto;
  }

  /* Form panel comes first on tablet/mobile */
  .studio-panel {
    order: 0;
    max-height: none;
    overflow-y: visible;
    border-radius: var(--radius-md);
  }

  /* Gift preview stage placed AT THE BOTTOM below form panel */
  .preview-stage-container {
    order: 1;
    position: relative;
    min-height: 560px;
    height: 580px;
    border-radius: var(--radius-md);
    padding-top: 80px;  /* Room for Capi jump & dialogue bubble */
    padding-bottom: 70px;
    overflow: hidden;
  }

  /* Proportional scaling to fit box, Capi, bow pop & bubble */
  .gift-stage {
    transform: scale(0.85);
  }

  .preview-toolbar {
    top: 14px;
    left: 16px;
    right: 16px;
  }

  .preview-badge {
    font-size: 0.74rem;
    padding: 5px 10px;
  }

  /* Move Audio Controls to the bottom right on responsive views */
  .audio-quick-controls {
    position: absolute;
    bottom: 18px;
    right: 18px;
    z-index: 110;
    background: rgba(10, 8, 24, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 6px 12px 6px 8px;
    box-shadow: var(--shadow-md);
  }

  .volume-slider {
    width: 70px;
  }
}

/* ==========================================================================
   3. MOBILE PHONES & SMARTPHONES (under 768px)
   ========================================================================== */
@media (max-width: 767px) {
  .studio-container {
    padding: 10px;
    gap: 14px;
  }

  /* Form Panel Top */
  .studio-panel {
    order: 0;
    padding: 16px;
    gap: 16px;
  }

  /* Gift Preview Stage Bottom - Fitting EVERYTHING inside container */
  .preview-stage-container {
    order: 1;
    min-height: 540px;
    height: 560px;
    padding-top: 85px;  /* Ample room for Capi + dialogue bubble */
    padding-bottom: 65px;
    overflow: hidden;
  }

  /* Scale gift stage so box, Capi, tag & bow fit 100% inside container */
  .gift-stage {
    transform: scale(0.76);
  }

  .studio-brand {
    padding-bottom: 12px;
  }

  .brand-icon {
    font-size: 1.75rem;
  }

  .brand-title {
    font-size: 1.28rem;
  }

  .form-section {
    padding: 14px;
    gap: 12px;
  }

  .section-header {
    font-size: 0.98rem;
  }

  .text-input, .select-input {
    padding: 10px 12px;
    font-size: 0.9rem;
    min-height: 44px; /* Touch target minimum */
  }

  /* Color Pickers mobile adjustments */
  .color-picker-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .color-picker-item {
    padding: 8px 4px;
  }

  .color-swatch-input {
    width: 32px;
    height: 32px;
  }

  /* Emoji Selector Grid mobile adjustments */
  .emoji-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .emoji-btn {
    font-size: 1.3rem;
    padding: 8px 4px;
    min-height: 44px;
  }

  /* Phrase Builder item */
  .phrase-item input {
    font-size: 0.88rem;
  }

  .btn-remove-phrase {
    width: 44px;
    height: 44px;
  }

  .btn-add-phrase {
    min-height: 44px;
  }

  /* Action Share Button */
  .btn-primary-action {
    padding: 14px;
    font-size: 1.05rem;
    min-height: 48px;
  }

  /* Open Gift Button on stage */
  .btn-open-gift {
    padding: 14px 28px;
    font-size: 1.1rem;
    bottom: 25px;
  }

  /* Dialogue Speech Bubble mobile scaling & Larger readable text */
  .dialogue-bubble {
    max-width: 90vw;
    top: -85px;
    padding: 14px 18px;
    border-radius: 18px;
  }

  .phrase-content {
    font-size: 1.12rem !important;
  }

  /* Move Audio Controls to the bottom right on mobile */
  .audio-quick-controls {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 110;
  }

  /* Share Modal Popup mobile sizing */
  .modal-card {
    width: 94%;
    padding: 22px 16px;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-title {
    font-size: 1.35rem;
  }

  .share-url-box {
    flex-direction: column;
    gap: 6px;
  }

  .btn-copy-url {
    width: 100%;
    min-height: 42px;
  }

  .social-share-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .btn-social-share {
    min-height: 44px;
  }
}

/* ==========================================================================
   4. EXTRA SMALL PHONES & NARROW VIEWPORTS (under 400px)
   ========================================================================== */
@media (max-width: 399px) {
  .preview-stage-container {
    height: 520px;
    min-height: 500px;
    padding-top: 75px;
  }

  .gift-stage {
    transform: scale(0.68);
  }

  .preview-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .preview-controls-right {
    width: 100%;
    justify-content: space-between;
  }

  .color-picker-grid {
    grid-template-columns: 1fr;
  }

  .color-picker-item {
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 12px;
  }

  .emoji-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .dialogue-bubble {
    top: -75px;
  }

  .phrase-content {
    font-size: 1.05rem !important;
  }

  .audio-quick-controls {
    bottom: 10px;
    right: 10px;
  }
}

/* ==========================================================================
   5. RECEIVER VIEW (`view.php`) SPECIFIC RESPONSIVE OVERRIDES
   ========================================================================== */
.receiver-stage {
  min-height: 100dvh;
}

@media (max-width: 767px) {
  .receiver-stage .gift-stage {
    transform: scale(0.82);
  }

  .brand-footer-cta {
    bottom: 16px;
    padding: 8px 18px;
    font-size: 0.8rem;
  }
}