/* ═══════════════════════════════════════════════════════════════════
   ZEEDTOPUP — Responsive Polish
   ────────────────────────────────────────────────────────────────
   แก้เฉพาะเรื่อง "เลย์เอาต์ตามขนาดจอ" เท่านั้น
   • ไฟล์นี้ต้องโหลด "ท้ายสุด" เพื่อทับ media query ของ app.css ได้
     โดยไม่ต้องใช้ !important (specificity เท่ากัน → ไฟล์หลังชนะ)
   • ห้ามแก้ app.css / mobile-fixes.css เดิม
   • เอฟเฟกต์ตกแต่งอยู่ที่ reactbits.css คนละไฟล์กัน
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1. Mobile Quick Grid — กันการ์ดโดดแถวล่าง ═════════════════
   ปัญหาเดิม: quick link มี 5 อัน แต่ grid เป็น 4 คอลัมน์ (≤768px)
              และ 2 คอลัมน์ (≤420px) → เหลือการ์ดโดด 1 ใบเสมอ
   วิธีแก้:   เปลี่ยนเป็น flex + จำนวนคอลัมน์หารลงตัวกับ 5
              จอปกติ = 5 คอลัมน์แถวเดียวจบ · จอเล็ก = 3 คอลัมน์
              justify-content:center → ถ้าเหลือเศษก็อยู่กลาง ดูตั้งใจ */
@media (max-width:768px){
  .mobile-quick-grid{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:8px; margin-top:14px;
  }
  .mobile-quick-card{
    flex:0 0 calc((100% - 32px) / 5);   /* 5 ใบ = 4 ช่องว่าง = 32px */
    min-height:78px; padding:10px 4px; gap:6px;
  }
  .mobile-quick-card i{font-size:1.16rem}
  .mobile-quick-card span{
    font-size:.61rem; line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* จอแคบ (≤379px) — 5 คอลัมน์จะบีบเกินไป ลดเป็น 3 แล้วแถวท้ายอยู่กลาง */
@media (max-width:379px){
  .mobile-quick-card{
    flex:0 0 calc((100% - 16px) / 3);   /* 3 ใบ = 2 ช่องว่าง = 16px */
    min-height:84px;
  }
  .mobile-quick-card i{font-size:1.32rem}
  .mobile-quick-card span{font-size:.7rem}
}

/* ═══ 2. Mobile Hero — ให้มีพื้นหลังโทน ROII เหมือนฝั่ง desktop ═══
   .mobile-hero-card เป็นการ์ดมุมโค้ง → ต้อง clip เลเยอร์ตามมุมด้วย */
@media (max-width:768px){
  .mobile-hero-card{position:relative; overflow:hidden}
  .mobile-hero-card > .rb-hero-fx{border-radius:inherit}
  /* ดันเนื้อหาให้อยู่เหนือเลเยอร์พื้นหลังเสมอ */
  .mobile-hero-card > *:not(.rb-hero-fx){position:relative; z-index:1}

  /* การ์ดมือถือเล็กกว่า hero desktop มาก → ลดน้ำหนักเลเยอร์ลง
     ไม่งั้น vignette จะกลายเป็นขอบดำหนารอบการ์ด */
  .mobile-hero-card .rb-hero-vignette{
    background:radial-gradient(ellipse 96% 108% at 42% 44%,
               transparent 42%, rgba(0,0,0,.16) 82%, rgba(0,0,0,.28) 100%);
  }
  .mobile-hero-card .rb-hero-wash{opacity:.7}
}

/* ═══ 2b. Mobile Hero — โลโก้ฝั่งขวา (เดิมเป็นพื้นที่ว่าง) ═══════════
   จัดเป็น flex 2 คอลัมน์: ข้อความซ้าย · โลโก้ขวา
   ใช้ flex แทน absolute → ข้อความกับโลโก้ไม่มีทางทับกันไม่ว่าจอกว้างเท่าไร */
@media (max-width:768px){
  .mobile-hero-card{display:flex; align-items:center; gap:12px}
  .mobile-hero-copy{flex:1 1 auto; min-width:0}

  .mobile-hero-visual{
    flex:0 0 34%; max-width:130px;
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  /* แสงเรืองหลังโลโก้ ให้ลอยออกจากพื้นการ์ด */
  .mobile-hero-visual::before{
    content:""; position:absolute; inset:-20%;
    background:radial-gradient(circle at center,rgba(227,24,55,.32),rgba(227,24,55,0) 68%);
    filter:blur(14px);
  }
  .mobile-hero-visual img{
    position:relative; display:block;
    width:100%; height:auto; max-height:112px; object-fit:contain;
    filter:drop-shadow(0 10px 24px rgba(227,24,55,.28));
  }
  /* fallback ตัว Z ไล่เฉด — ใช้เมื่อยังไม่ได้ตั้งโลโก้ หรือรูปโหลดไม่ขึ้น */
  .mobile-hero-visual__mark{
    position:relative;
    font-size:4rem; font-weight:900; line-height:1; letter-spacing:-4px;
    background:linear-gradient(135deg,#ff4565 0%,#E31837 55%,#7a0b1e 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    filter:drop-shadow(0 10px 26px rgba(227,24,55,.40));
  }
}

/* จอแคบมาก — ซ่อนโลโก้ ให้ข้อความได้พื้นที่เต็ม ไม่บีบจนขึ้นบรรทัดแปลก ๆ */
@media (max-width:359px){
  .mobile-hero-visual{display:none}
}

/* ═══ 2c. KPI "สถิติหน้าแรก" บนมือถือ — 2 แถว แถวละ 2 ═══════════════
   ⚠️ ที่นี่ "จำเป็น" ต้องใช้ !important — ไม่ใช่ความมักง่าย
      mobile-fixes.css:61-66 เขียนไว้ว่า "force 1 column on mobile"
        .home-kpi-grid  ...  grid-template-columns:1fr !important
      !important ชนะทุก specificity ที่ไม่มี !important เสมอ
      → กฎธรรมดาของไฟล์นี้แพ้ ต่อให้โหลดทีหลัง
      วิธีชนะ: ใส่ !important เท่ากัน + โหลดทีหลัง (specificity เสมอ → ไฟล์หลังชนะ)
   ── ที่ยังต้องคุม: mobile-fixes ยัด !important ไว้ทั้ง card/icon/strong/span
      เลยต้องตอบโต้ทุกตัว ไม่งั้นได้ 2 คอลัมน์แต่ของข้างในล้น */
@media (max-width:768px){
  .home-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin:12px 0 !important;
  }
  .home-kpi-card{
    min-height:82px !important; padding:13px 12px !important;
    gap:10px !important; border-radius:18px !important;
  }
  .home-kpi-icon{
    width:42px !important; height:42px !important;
    border-radius:13px !important; font-size:1.12rem !important;
  }
  .home-kpi-copy{gap:2px !important; min-width:0 !important}
  .home-kpi-copy strong{font-size:1.18rem !important; letter-spacing:-.04em}
  .home-kpi-copy span{font-size:.74rem !important; font-weight:600; line-height:1.25}
  .home-kpi-watermark{font-size:4rem !important; right:-2px; bottom:-10px}

  /* v3 = ไอคอนบน–ตัวเลขล่าง (แนวตั้ง) → คุมความสูงแยก ไม่งั้นเตี้ยจนบีบ */
  .home-kpi-grid--v3 .home-kpi-card{min-height:126px !important; padding:16px 10px !important; gap:8px !important}
  .home-kpi-grid--v3 .home-kpi-icon{width:52px !important; height:52px !important; font-size:1.3rem !important}
  .home-kpi-grid--v3 .home-kpi-copy strong{font-size:1.32rem !important}
}

/* ≤420px — mobile-fixes.css:497 ย่อ card/icon/strong ซ้ำอีกชุด ต้องตอบโต้ตรงนี้ด้วย */
@media (max-width:420px){
  .home-kpi-card{padding:12px 11px !important; min-height:80px !important}
  .home-kpi-icon{width:40px !important; height:40px !important; font-size:1.05rem !important}
  .home-kpi-copy strong{font-size:1.12rem !important}
}

/* จอแคบมาก (≤359px) — ย่อลงอีกขั้น ให้ตัวเลข 6–7 หลักยังอยู่บรรทัดเดียว */
@media (max-width:359px){
  .home-kpi-grid{gap:8px !important}
  .home-kpi-card{padding:11px 9px !important; gap:8px !important}
  .home-kpi-icon{width:36px !important; height:36px !important; border-radius:11px !important; font-size:.98rem !important}
  .home-kpi-copy strong{font-size:1.02rem !important}
  .home-kpi-copy span{font-size:.66rem !important}
}

/* ═══ 3. Tablet / จอกลาง 769–1100px ═══════════════════════════════
   ช่วงนี้ยังใช้ layout desktop อยู่ แต่กริด 4 คอลัมน์จะบีบจนอ่านยาก */
@media (min-width:769px) and (max-width:1100px){
  /* การ์ด "ทำไมต้องเรา" — 4 คอลัมน์ที่ 800px = ใบละ ~185px แน่นเกิน */
  .why-grid--xl{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
  .why-card--xl{min-height:auto; padding:24px 20px 20px}
  .why-card--xl h4{font-size:1.26rem}
  .why-card-copy{max-width:88%}

  /* KPI — ลดเหลือ 2 คอลัมน์ให้ตัวเลขไม่ล้น */
  .home-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Hero — ลดขนาดหัวเรื่องและโลโก้ กันเนื้อหาบีบ */
  .hero h1{font-size:34px}
  .hero p{font-size:16px}
  .hero-brand-visual{flex:0 0 clamp(200px,24vw,280px)}
  .hero-stats{gap:24px}
}

/* ช่วงคาบเกี่ยว 769–900px — hero แคบสุดในโหมด desktop */
@media (min-width:769px) and (max-width:900px){
  .hero{padding:36px 22px 20px; gap:18px}
  .hero h1{font-size:30px}
  .hero-brand-visual{flex:0 0 190px}
  .home-image-grid{gap:12px}
}

/* ═══ 4. จอใหญ่พิเศษ ≥1600px — กันเนื้อหาลอยกลางจนโล่งเกิน ═══ */
@media (min-width:1600px){
  .hero-content{max-width:600px}
  .hero h1{font-size:48px}
}

/* ═══ 5. มือถือแนวนอน (landscape) — hero เตี้ยมาก อย่าให้กินทั้งจอ ═══ */
@media (max-width:900px) and (orientation:landscape) and (max-height:480px){
  .mobile-hero-card{padding:14px 16px 14px}
  .mobile-hero-card h1{font-size:1.5rem}
  .mobile-hero-card p{font-size:.84rem; margin-top:4px}
  .mobile-quick-card{min-height:64px}
  /* ไม่ลด body padding-bottom ที่นี่ — bottom nav ยังสูงเท่าเดิมในแนวนอน
     ลดแล้วเนื้อหาท้ายหน้าจะโดนแถบล่างทับ */
}

/* ═══ 6. Safe area (iPhone มีขอบมน/แถบล่าง) ═══════════════════════
   เผื่อพื้นที่ล่างเพิ่มจาก bottom nav ให้พอดีกับ home indicator */
@media (max-width:768px){
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .mobile-home-shell,.mobile-topup-shell{
    padding-left:max(12px, env(safe-area-inset-left,0px));
    padding-right:max(12px, env(safe-area-inset-right,0px));
  }
}

/* ═══ 7. กัน content ล้นแนวนอนบนมือถือ ═══════════════════════════
   ⚠️ ไม่ใส่ overflow-x:hidden ที่ <html> โดยเจตนา —
      app.css:12 มี body{overflow-x:hidden} อยู่แล้ว และการใส่ที่ <html>
      จะทำให้ <html> กลายเป็น scroll container → navbar position:sticky พัง */
@media (max-width:768px){
  .mobile-home-shell,.mobile-topup-shell{max-width:100%}
  .mobile-home-shell img,.mobile-topup-shell img{max-width:100%; height:auto}
}

/* ═══ 8. ปุ่มแตะง่าย ≥44px + กัน iOS zoom ตอนโฟกัส input ═══════════ */
@media (max-width:768px){
  .front-bottom-nav__item{min-height:54px}
  .mobile-hero-btn{min-height:44px}
  input,select,textarea{font-size:16px}
}

/* ═══ 9. หน้า auth บนมือถือ: โลโก้แบรนด์ + เว้นที่ให้ bottom nav ═══════
   .auth-brand (แผงซ้าย) ถูกซ่อนที่ ≤768 ใน mobile-fixes.css → ใส่โลโก้ย่อ
   ไว้บนสุดของการ์ดแทน ผ่าน partial auth_mobile_brand.php */
.auth-mobile-brand{display:none}
@media (max-width:768px){
  .auth-mobile-brand{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;margin:0 auto 14px;
  }
  .auth-mobile-brand img{
    width:96px;height:96px;max-width:38vw;max-height:38vw;object-fit:contain;display:block;
  }
  .auth-mobile-brand__text{
    font-size:1.22rem;font-weight:900;letter-spacing:-.02em;color:var(--tx,#fff);line-height:1;
  }
  .auth-mobile-brand__text .red{color:var(--rl,#FF3D5A)}
}