/* ============================================================================
   MDL PORTAL — mobile-hardening.css   ("main" / Landrick-theme pages:
   e-payment gerbang, e-perkhidmatan forms, etc.)
   Additive, non-destructive. Link LAST in views/main/includes/_header.ejs.
   Scoped to <=991px / <=575px — desktop untouched.
   Deploy: FileZilla /public/main/css/mobile-hardening.css
   ---------------------------------------------------------------------------
   Parity pass 2026-07-06: img/iframe scoped into the media query; responsive
   embeds; Landrick nav 44px tap rows; footer link + social-icon tap targets;
   footer text floor — to match the Porto-theme hardening. Selectors verified
   against the served gerbang/pembayaran DOM (#navigation .navigation-menu,
   .submenu, .footer-cms-tree-link, .footer-cms-rich, .social-icons-medium).
   ============================================================================ */

/* [1] Image + iframe guard — scoped to mobile so desktop is untouched */
@media (max-width: 991px){
  img { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }
}

/* [2] Overflow-x safety net */
@media (max-width: 991px){
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* [3] Responsive embeds — YouTube, Google Maps, Google Forms */
@media (max-width: 991px){
  iframe[src*="youtube"], iframe[src*="google.com/maps"], iframe[src*="docs.google.com"] { max-width: 100%; }
}

/* [4] Form fields >=16px → no iOS zoom on the payment account-number / select */
@media (max-width: 991px){
  input[type=text], input[type=email], input[type=tel], input[type=number],
  input[type=search], input[type=password], input[type=date], select, textarea,
  .form-control, .form-select { font-size: 16px; }
}

/* [5] Mobile nav (Landrick .navigation-menu / .submenu) — 44px tap rows.
   Nested submenu reveal on touch is the theme's own toggleMenu(); if a submenu
   does not expand on tap on a real phone, add the delegated tap-fix shim
   (Porto B5 adapted to li.has-submenu > a). */
@media (max-width: 991px){
  #navigation .navigation-menu > li > a,
  #navigation .submenu > li > a { padding-top: 11px; padding-bottom: 11px; line-height: 22px; }
}

/* [6] Floating widgets + back-to-top — de-conflict the corners */
@media (max-width: 575px){
  .back-to-top { width: 44px; height: 44px; line-height: 42px; right: 12px; bottom: 88px; }
  .survey-widget-root { right: 12px; bottom: 12px; z-index: 1080; }
  .mdp-readabler-trigger-button-box.left-center{
    top: auto !important; bottom: 150px !important;
    left: 12px !important; right: auto !important; transform: none !important;
  }
  .czm-fixed .czm-button, .czm-left .czm-button { left: 12px; bottom: 12px; }
  .czm-chat-support-3 .czm-button { width: 52px; height: 52px; padding: 0; border-radius: 50%; }
  .czm-chat-support-3 .czm-button-content { display: none; }
}

/* [7] Payment tab pills — px-5 (48px) padding clips labels at 320px */
@media (max-width: 575px){
  .nav-pills .nav-link.px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* [8] Tap targets — footer link rows + social icons to ~44px (shared footer) */
@media (max-width: 991px){
  .social-icons.social-icons-medium li a { width: 44px; height: 44px; line-height: 44px; }
  .social-icons li { margin: 0 6px 6px 0; }
  .footer-cms-tree-link { display: block; padding: 9px 0; line-height: 1.4; }
  .footer-cms-tree-item { margin-bottom: 2px; }
}

/* [9] Footer text floor (shared footer) */
@media (max-width: 575px){
  .footer-cms-rich, .footer-cms-tree-link { font-size: 14px; line-height: 1.6; }
}