/* ============================================================
   Namla Support & Feedback — Responsive Styles (Mobile-First 320px+)
   ============================================================ */

/* Base fluid & word break rules */
*, *::before, *::after {
  max-width: 100%;
}

img, svg, video, canvas, audio, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

body {
  overflow-x: hidden;
  width: 100%;
}

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

/* 320px to 480px (Compact Mobile Screens) */
@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-3);
  }

  .site-header {
    padding-block: 4px;
  }

  .header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .header-main-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .brand-logo-img {
    height: 32px;
    max-width: 140px;
  }

  .lang-select {
    min-height: 36px;
    height: 36px;
    min-width: 100px;
    font-size: 0.82rem;
    padding: 0 6px;
    padding-inline-end: 1.5rem;
  }

  .hero {
    padding-block: var(--space-6) var(--space-7);
  }

  .hero h1 {
    font-size: 1.85rem;
    line-height: 1.15;
  }

  .hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .choice-card {
    padding: var(--space-4);
  }

  .wizard-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wizard-actions .btn {
    width: 100%;
  }

  .btn-group {
    flex-direction: column;
    width: 100%;
  }

  .reference-card-body {
    flex-direction: column;
    align-items: flex-start;
  }

  .reference-code-val {
    font-size: 1.15rem;
  }

  .rating-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-1);
  }

  .rating-tile {
    min-width: unset;
    padding: var(--space-2) var(--space-1);
    font-size: 0.85rem;
  }
}

/* 481px to 767px (Large Mobile & Phablet) */
@media (min-width: 481px) and (max-width: 767px) {
  .wizard-actions .btn-primary-wrap {
    margin-inline-start: auto;
  }
}

/* 768px to 1023px (Tablet) */
@media (min-width: 768px) {
  .hero-inner {
    max-width: 48rem;
  }
}

/* 1024px to 1439px (Laptop / Desktop) */
@media (min-width: 1024px) {
  .container {
    padding-inline: var(--space-5);
  }

  .section {
    padding-block: var(--space-8);
  }
}

/* 1440px+ (Large Monitors) */
@media (min-width: 1440px) {
  :root {
    --container-max: 82rem;
  }
}