/* mobile-fix.css (2026-10-04) - phone & tablet layout fixes for Sri Hari Matrimony.
   Loaded last from header.php (public) and user/header.php (members). */

/* ---------- tablets and phones (< 992px) ---------- */
@media (max-width: 991px) {
  /* profile photo column was locked to 25% width -> tiny photo */
  .single-right-left,
  .single-right-left[style] { width: 100% !important; float: none !important; margin-bottom: 20px; }
  .single-right-left img { max-width: 320px; width: 100%; height: auto; display: block; margin: 0 auto; }

  /* membership plan boxes were locked to 24% each */
  .modal-content.col-md-3[style] { width: 46% !important; margin: 0 2% 15px !important; float: left !important; }
}

/* ---------- phones (< 768px) ---------- */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  img, video, iframe { max-width: 100%; }

  /* justified Tamil text left huge gaps between words */
  p, .text-justify, [style*="justify"] { text-align: left !important; }
  body { overflow-wrap: anywhere; word-break: normal; }

  .modal-content.col-md-3[style] { width: 100% !important; margin: 0 0 15px !important; float: none !important; }

  /* login / popup dialogs were 450px wide - wider than a phone */
  .modal-dialog, .modal-dialog[style] { width: auto !important; max-width: calc(100% - 20px); margin: 10px auto !important; }

  /* photo crop box was a fixed 350px */
  #image_demo, #image_demo[style] { width: 100% !important; max-width: 350px; margin-left: auto; margin-right: auto; }

  /* detail tables: let the label column shrink and wrap long values */
  table { width: 100% !important; table-layout: auto; }
  td[style*="width:25%"], td[style*="width: 25%"] { width: 40% !important; }
  td, th { word-break: break-word; padding: 6px !important; font-size: 13px; }

  /* forms */
  input, select, textarea, .form-control, .select2-container { max-width: 100% !important; }
  .btn-lg { width: 100%; margin-top: 12px; }

  /* profile cards in listings: centre them, keep round photos round */
  .product-men { text-align: center; }
  .product-men .men-thumb-item img { margin: 0 auto; max-width: 250px; }

  /* headings a bit smaller so they fit */
  .tittle-w3l { font-size: 22px !important; }
  .container { padding-left: 12px; padding-right: 12px; }
}

/* ---------- horoscope (rasi / navamsam) grid on phones (2026-10-04) ----------
   The generic "td width:25% -> 40%" rule above squashed the 4x4 chart.
   Keep it an even 4x4 grid with the 2x2 centre box. */
@media (max-width: 767px) {
  table:has(td[colspan="2"][rowspan="2"]) { table-layout: fixed !important; width: 100% !important; }
  table:has(td[colspan="2"][rowspan="2"]) td { width: 25% !important; height: 64px; padding: 3px !important; font-size: 12px; line-height: 1.35; text-align: center; vertical-align: middle; word-break: normal; overflow-wrap: break-word; }
  table:has(td[colspan="2"][rowspan="2"]) td[colspan="2"] { width: 50% !important; }
  table:has(td[colspan="2"][rowspan="2"]) img.lak { width: 22px !important; height: auto !important; display: block; margin: 0 auto 2px; }
}