/* ══════════════════════════════════════
   mobile.css — ShadeMatch
   ملف مستقل للهاتف فقط
   لا علاقة له بتصميم الكمبيوتر
══════════════════════════════════════ */

/* منع الخروج الأفقي */
html, body {
  max-width: 100vw;
}

/* Navbar */
.nav-container {
  padding: 0 1rem;
}
.logo-subtitle {
  display: none;
}
.logo-text {
  font-size: .9rem;
}
.logo-icon {
  width: 36px;
  height: 36px;
}

/* Hero */
.hero-inner {
  display: flex !important;
  flex-direction: column !important;
  padding: 1.75rem 1rem !important;
  gap: 1.5rem !important;
}
.hero-right {
  display: none !important;
}
.hero-title {
  font-size: 1.7rem !important;
  line-height: 1.25 !important;
}
.hero-desc {
  font-size: .85rem;
}
.hero-actions {
  flex-direction: column !important;
  gap: .65rem !important;
}
.hero-btn-primary,
.hero-btn-ghost {
  width: 100%;
  justify-content: center;
}
.hero-trust {
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
}

/* Tools cards */
.tools-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
}
.tool-card-new {
  padding: .9rem 1rem;
}

/* Tool page hero */
.tool-page-hero-inner {
  display: flex !important;
  flex-direction: column !important;
  padding: 1rem !important;
  gap: .75rem !important;
}
.tool-page-title {
  font-size: 1.35rem !important;
}
.tool-nav-btns {
  flex-wrap: wrap !important;
  gap: .3rem !important;
}
.tool-nav-btn {
  font-size: .68rem !important;
  padding: .26rem .48rem !important;
}

/* Stain — الحقول الثلاثة في عمود واحد */
.stain-inputs-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
}
.stain-selection-panel {
  padding: 1rem !important;
}

/* Selection panel — tooth & gingiva */
.selection-panel {
  padding: 1rem !important;
}
.selection-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
}

/* Results */
.results-grid-improved {
  display: flex !important;
  flex-direction: column !important;
}
.results-header {
  flex-direction: column !important;
  gap: .75rem !important;
}
.results-title-section {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: .4rem !important;
}
.warning-pill,
.warning-pill-strong {
  font-size: .7rem !important;
}

/* VITA guide */
.wrap {
  padding: 1rem !important;
}
.vita-hero-inner {
  padding: 1rem !important;
}
.vita-ref-table-wrap {
  padding: .75rem !important;
}

/* تحويل الجدول لبطاقات على الهاتف */
.table-scroll {
  overflow-x: visible !important;
}
.vita-ref-table {
  min-width: unset !important;
  width: 100% !important;
}
.vita-ref-table thead {
  display: none !important;
}
.vita-ref-table tbody tr {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .35rem .5rem !important;
  padding: .625rem .75rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  margin-bottom: .5rem !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
}
.vita-ref-table tbody tr:last-child {
  margin-bottom: 0 !important;
}
.vita-ref-table td {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  border: none !important;
  font-size: .8rem !important;
  background: transparent !important;
}
/* السهم بين Old و New */
.vita-ref-table td:nth-child(1)::after {
  content: '→';
  margin: 0 .3rem;
  color: var(--t3);
  font-size: .75rem;
}
/* Match badge — يأخذ عرض كامل بعد الظلين */
.vita-ref-table td:nth-child(3) {
  order: 2 !important;
}
/* Notes — سطر كامل تحت */
.vita-ref-table td:nth-child(4) {
  width: 100% !important;
  order: 3 !important;
  font-size: .72rem !important;
  color: var(--t2) !important;
  padding-top: .25rem !important;
  border-top: 1px solid var(--border-light) !important;
  margin-top: .15rem !important;
}

.vita-legend {
  flex-direction: column !important;
  gap: .35rem !important;
}
.vita-disclaimer-banner {
  flex-direction: column !important;
  gap: .75rem !important;
}
.tips-grid {
  display: flex !important;
  flex-direction: column !important;
}

/* Static pages */
.about-hero-inner,
.reviews-hero-inner,
.contact-hero-inner {
  padding: 1.5rem 1rem !important;
}
.about-hero-title {
  font-size: 1.55rem !important;
}
.about-stats {
  flex-wrap: wrap !important;
  gap: .65rem !important;
  justify-content: center !important;
}
.static-content {
  padding: 1rem !important;
}
.contact-layout {
  flex-direction: column !important;
}
.contact-subject-row {
  flex-direction: column !important;
}
.contact-quick-btns {
  flex-wrap: wrap !important;
  gap: .4rem !important;
}

/* Footer */
.landing-footer-inner {
  flex-direction: column !important;
  gap: .85rem !important;
  text-align: center !important;
}
.landing-footer-links {
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: .4rem !important;
}
.landing-footer-note {
  font-size: .7rem !important;
}