/* Mobile Responsive Enhancements */

@media (max-width: 475px) {
  .hidden-xs {
    display: none !important;
  }

  .px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  button, a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .break-words {
    word-wrap: break-word;
    word-break: break-word;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 475px) {
  .xs\:block {
    display: block !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  button, a, input, label {
    min-height: 44px;
  }

  button:active, a:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

@media (max-width: 768px) {
  .lg\:col-span-5, .lg\:col-span-7 {
    grid-column: span 12 !important;
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  html {
    scroll-behavior: smooth;
  }
}

@media (max-width: 640px) {
  input[type="range"] {
    height: 6px;
  }

  input[type="text"], input[type="color"], select, textarea {
    font-size: 16px !important;
  }

  .preview-item {
    padding: 0.5rem !important;
  }

  .preview-item .text-xs {
    font-size: 0.7rem !important;
  }

  .preview-item .text-sm {
    font-size: 0.8rem !important;
  }
}

body {
  overflow-x: hidden;
}

.max-w-6xl {
  max-width: 100% !important;
}

#previewArea img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}