/* ============================================================
   pembaikan-20260923.css — pembaikan UI Homestay Benting Lintang
   Fail ini dikongsi oleh semua halaman (index.cfm + admin.cfm).

   1. Warna nota/label status eksplisit supaya teks kekal jelas
      walaupun butang siang/malam berbeza dengan tetapan telefon.
   2. Bar tempahan mudah alih hanya muncul apabila tarikh dipilih
      dan butang hantar utama tidak kelihatan.
   3. Butang chat disorok semasa skrol (tidak menutup teks).
   4. Sasaran sentuh lebih besar pada telefon (>= 40px).
   ============================================================ */

/* ---------- 1. Nota hijau ---------- */
.note-hijau { color:#0C5232; background:#E1F5E8; border-color:#2E9E52; }
:root[data-tema="gelap"] .note-hijau { color:#BBF7D0; background:#123024; border-color:#3FAF63; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .note-hijau { color:#BBF7D0; background:#123024; border-color:#3FAF63; }
}

/* ---------- 1b. Label status (pill) ---------- */
.pill-amber { background:#FFF3D6; color:#7A4E06; }
.pill-hijau { background:#E3F3E6; color:#1C6B33; }
.pill-kelabu { background:#ECEBE6; color:#5C6663; }
:root[data-tema="gelap"] .pill-amber { background:#3A2C10; color:#F2C879; }
:root[data-tema="gelap"] .pill-hijau { background:#173A22; color:#8FE0A6; }
:root[data-tema="gelap"] .pill-kelabu { background:#243230; color:#A9BCB8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .pill-amber { background:#3A2C10; color:#F2C879; }
  :root:not([data-tema="terang"]) .pill-hijau { background:#173A22; color:#8FE0A6; }
  :root:not([data-tema="terang"]) .pill-kelabu { background:#243230; color:#A9BCB8; }
}

/* ---------- 2. Bar tempahan mudah alih ---------- */
@media (max-width: 960px) {
  .mobile-bar { display: none !important; }
  .mobile-bar.tunjuk { display: flex !important; }
}

/* ---------- 3. Butang chat semasa skrol ---------- */
.bot-btn { transition: transform .28s ease, opacity .28s ease; }
.bot-btn.bot-sorok { transform: translateY(150%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .bot-btn { transition: none; } }

/* ---------- 4. Sasaran sentuh pada telefon ---------- */
@media (max-width: 640px) {
  .btn, .cta { min-height: 40px; }
  .cta { display: inline-flex; align-items: center; }
  .footer a, p a[href^="https://wa.me"], li a[href^="https://wa.me"], .notis a {
    display: inline-block; padding: 10px 2px;
  }
}


/* ============================================================
   Bahagian 2 — panel admin: kontras gelap, jadual jadi kad,
   sasaran sentuh, placeholder gambar.
   ============================================================ */

/* ---------- Kontras mod gelap ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) a:not(.btn):not(.cta):not(.pill):not(.brand) { color:#8FE3C0; }
  :root:not([data-tema="terang"]) .muted,
  :root:not([data-tema="terang"]) .small.muted { color:#A9C2BD; }
  :root:not([data-tema="terang"]) .mono { color:#F2F8F7; }
  :root:not([data-tema="terang"]) th { color:#C6DAD6; }
  :root:not([data-tema="terang"]) .table td,
  :root:not([data-tema="terang"]) .table th { border-color:var(--line-2); }
}
:root[data-tema="gelap"] a:not(.btn):not(.cta):not(.pill):not(.brand) { color:#8FE3C0; }
:root[data-tema="gelap"] .muted, :root[data-tema="gelap"] .small.muted { color:#A9C2BD; }
:root[data-tema="gelap"] .mono { color:#F2F8F7; }

/* ---------- Jadual → kad bawah 768px ---------- */
@media (max-width: 767px) {
  .table-lipat { display:block !important; width:auto !important; min-width:0 !important; max-width:100% !important; }
  .table-wrap { overflow-x:visible !important; }
  .table-lipat tbody, .table-lipat tr, .table-lipat td { display:block !important; width:auto !important; min-width:0 !important; max-width:100% !important; }
  .table-lipat thead { display:none; }
  .table-lipat tbody { display:block; }
  .table-lipat tr { display:block; background:var(--card); border:1px solid var(--line);
                    border-radius:14px; padding:10px 12px; margin:0 0 10px; }
  .table-lipat td { display:block; border:0; padding:7px 0; text-align:left; white-space:normal;
                    overflow-wrap:anywhere; word-break:break-word; }
  .table-lipat td::before { display:block; content:attr(data-l); color:var(--ink-mute);
                            font-size:.78rem; font-weight:600; margin-bottom:2px; letter-spacing:.02em; }
  .table-lipat td > * { max-width:100%; }
  .table-lipat td .btn, .table-lipat td .cta { width:100%; white-space:normal; }
  .table-lipat td form { display:block; width:100%; }
  .table-lipat td form { width:100%; }
  .table-lipat td.mono { word-break:break-word; }
}

/* ---------- Sasaran sentuh pautan kecil ---------- */
@media (max-width: 640px) {
  .card a.small, .note a.small { display:inline-flex; align-items:center; min-height:38px; padding:0 4px; }
}

/* ---------- Placeholder gambar tidak dapat dipaparkan ---------- */
.gambar-fail { display:inline-block; }
.gambar-fail .ganti { display:none; }
.gambar-fail.tiada img { display:none; }
.gambar-fail.tiada .ganti { display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  padding:12px; border:1px dashed var(--line-2); border-radius:var(--r-md);
  background:var(--card-2); max-width:280px; }

/* Pautan dalam kad jadual (mudah alih) — sasaran sentuh lebih besar */
@media (max-width: 767px) {
  .table-lipat td a { display:inline-flex; align-items:center; min-height:34px; }
  .table-lipat td a + br { display:none; }
}


/* ============================================================
   Bahagian 3 — susunan satu kolum (mobile), thumbnail IC + modal
   ============================================================ */

/* Punca limpah sebenar: .split-2 grid (462px) + .kv grid auto/1fr (463px) */
@media (max-width: 767px) {
  .split-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .split-2 > * { min-width: 0 !important; width: 100% !important; }
  .kv { grid-template-columns: minmax(0, 1fr) !important; gap: 2px 0 !important; }
  .kv dt { margin-top: 10px; font-size: .78rem; letter-spacing: .02em; }
  .kv dd { text-align: left !important; overflow-wrap: anywhere; word-break: break-word; }
  .kv dd:first-of-type { margin-top: 0; }
  /* semua bekas ikut lebar induk */
  main.shell, main.wrap, .card, .card-head, .table-wrap, .split-2, section { min-width: 0 !important; max-width: 100% !important; }
  img, input, select, textarea, button, pre, code { max-width: 100% !important; }
  input.input, select.input { width: 100% !important; min-width: 0 !important; }
  .card { padding-left: 14px; padding-right: 14px; }
  .card-head { flex-wrap: wrap; gap: 8px; }
}

/* Thumbnail gambar IC */
.ic-blok { display: block; margin-top: 10px; }
.ic-thumb { display: block; width: 100%; max-width: 220px; padding: 0; cursor: zoom-in;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ic-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ic-aksi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Modal gambar penuh */
.modal-gambar { position: fixed; inset: 0; z-index: 80; background: rgba(4, 12, 12, .88);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-gambar[hidden] { display: none; }
.modal-kotak { position: relative; max-width: min(92vw, 900px); max-height: 88vh; overflow: auto;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.modal-kotak img { max-width: 100%; max-height: 72vh; width: auto; height: auto; object-fit: contain;
  border-radius: 8px; margin: 0 auto; }
.modal-kotak p { text-align: center; }
.modal-tutup { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--ink);
  font-size: 1.35rem; line-height: 1; }
body.modal-buka { overflow: hidden; }

/* Form dalam sel/kad: elak min-width tetap yang menolak halaman (punca limpah 650px) */
@media (max-width: 767px) {
  form, details { min-width: 0 !important; }
  .table-lipat td details { display: block !important; width: 100% !important; }
  .table-lipat td form, details form {
    display: flex !important; flex-direction: column !important; gap: 8px !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  .table-lipat td form > *, details form > * {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  .table-lipat td form label, details form label { text-align: left !important; }
}

/* Kepala kad: butang navigasi kalendar mesti membalut pada telefon */
@media (max-width: 767px) {
  .card-head > * { flex-wrap: wrap !important; min-width: 0 !important; max-width: 100% !important; }
  .card-head .btn, .card-head a.btn { max-width: 100% !important; }
}

/* Dua pilihan QR DuitNow (Touch 'n Go + akaun bank) */
.qr-baris { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.qr-satu { flex: 0 1 150px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.qr-img { width: 100%; max-width: 150px; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; }

/* Logo pokok kelapa (dari poster) dalam jubin jenama */
.brand-logo .brand-img { width: 62%; height: auto; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
@media (max-width: 640px) { .brand-logo .brand-img { width: 64%; } }

/* Ruang bernafas dalam kad tempahan "Tarikh menginap" dan borang lain */
.field { margin-bottom: 18px; }
.field > label, .field > .lbl { margin-bottom: 9px; }
.card-head { margin-bottom: 17px; }
.card .split-2 { row-gap: 18px; column-gap: 22px; }
.card .field:last-of-type { margin-bottom: 6px; }
.card .field .err { margin-top: 8px; }
@media (max-width: 767px) {
  .field { margin-bottom: 21px; }
  .field > label, .field > .lbl { margin-bottom: 10px; }
  .card-head { margin-bottom: 18px; }
  .card .split-2 { row-gap: 21px; }
  .card { padding: 18px 16px; }
}

/* Betulan: medan di dalam grid .split-2 dikawal oleh row-gap sahaja (bukan margin) */
.card .field:last-of-type { margin-bottom: 18px; }
.card .split-2 .field { margin-bottom: 0; }
@media (max-width: 767px) {
  .card .field:last-of-type { margin-bottom: 21px; }
  .card .split-2 .field { margin-bottom: 0; }
}

/* Grid dua kolum dalam kad: beri jarak bawah supaya medan seterusnya tidak rapat */
.card > .split-2 { margin-bottom: 18px; }
@media (max-width: 767px) { .card > .split-2 { margin-bottom: 21px; } }

/* Pemilih tarikh format Malaysia (hh/bb/tttt) + kalendar ringan */
.tarikh-medan { display: flex; gap: 8px; align-items: stretch; }
.tarikh-medan .tarikh-papar { flex: 1 1 auto; min-width: 0; }
.tarikh-kal-btn { flex: 0 0 auto; padding: 0 14px; min-height: 46px; border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--card-2); color: var(--ink); font: inherit; font-weight: 600;
  cursor: pointer; white-space: nowrap; }
.tarikh-kal-btn:hover { border-color: var(--ink-mute); }
.kal-mini { margin-top: 8px; padding: 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  background: var(--card); box-shadow: 0 10px 26px rgba(0,0,0,.10); max-width: 340px; }
.kal-mini[hidden] { display: none; }
.kal-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.kal-nav { width: 34px; height: 34px; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: var(--card-2); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-hari { text-align: center; font-size: .70rem; font-weight: 700; color: var(--ink-mute); padding: 4px 0; }
.kal-hari-btn { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--ink);
  font: inherit; font-size: .84rem; cursor: pointer; }
.kal-hari-btn:hover { background: var(--brand-100); }
.kal-hari-btn.dipilih { background: var(--brand-700); color: #fff; font-weight: 700; }
.kal-hari-btn.luar { color: var(--ink-mute); opacity: .45; cursor: not-allowed; }
.tarikh-papar { box-sizing: border-box; }

/* Konsistensi input (tarikh + bilangan tetamu): lebar penuh, tinggi & jejari sama */
.field .input, .tarikh-medan .input { width: 100%; max-width: 100%; box-sizing: border-box; }
.field .input { min-height: 46px; }


/* ==== Medan tarikh: butang kalendar diletak DALAM medan supaya ketiga-tiga input sama lebar (100%) ==== */
.field .tarikh-medan { position: relative; display: block; width: 100%; max-width: 100%; box-sizing: border-box; }
.field .tarikh-medan .tarikh-papar,
.field .input { width: 100%; max-width: 100%; box-sizing: border-box; }
.field .tarikh-medan .tarikh-papar { padding-right: 52px; }
.field .tarikh-kal-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 38px; padding: 0; margin: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.5rem; line-height: 1.05; letter-spacing: 0; overflow: hidden;
}
.field .input, .field .tarikh-medan .tarikh-papar { height: 49px; padding-top: 0; padding-bottom: 0; }
.field + .field, .grid-2 .field { margin-bottom: 21px; }
.gr-2 .field, .grid-2 .field { margin-bottom: 21px; }
.kal-mini { margin-top: 8px; }
.tarikh-ralat { display: none; margin: 6px 0 0; color: #b3261e; font-size: 0.82rem; }
.field.invalid .tarikh-ralat { display: block; }
.field.invalid .input, .field.invalid .tarikh-papar { border-color: #b3261e; }


/* ==== Pemilih tarikh: butang tutup + hari penuh/dilumpuhkan ==== */
.field .tarikh-medan { position: relative; display: block; }
.kal-mini .kal-kepala { display: flex; align-items: center; gap: 6px; }
.kal-mini .kal-kepala strong { flex: 1 1 auto; text-align: center; }
.kal-mini .kal-nav, .kal-mini .kal-tutup { min-width: 40px; min-height: 38px; }
.kal-mini .kal-tutup { font-size: .8rem; padding: 0 10px; }
.kal-mini .kal-hari-btn.penuh { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.kal-mini .kal-hari-btn.dipilih { outline: 2px solid var(--brand-700, #0f6b53); }

/* ==== Muat naik mesra mobile: kamera / galeri / fail ==== */
.upload .upload-label { display: block; font-weight: 600; margin-bottom: 8px; }
.upload .upload-btn-baris { display: flex; flex-wrap: wrap; gap: 8px; }
.upload .upload-btn { flex: 1 1 auto; min-height: 46px; font-size: .92rem; }
.upload .upload-papar { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2, rgba(127,127,127,.08)); }
.upload .upload-thumb { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 10px; overflow: hidden;
  background: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.upload .upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload .pdf-ikon { font-weight: 700; font-size: .85rem; color: #b3261e; letter-spacing: .5px; }
.upload .upload-meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.upload .upload-nama { overflow-wrap: anywhere; font-size: .9rem; }
.upload .upload-saiz { font-size: .8rem; }
.upload .upload-tindakan { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.upload .btn-mini { min-height: 38px; padding: 0 12px; font-size: .82rem; }
.upload .btn-bahaya { border-color: #f0c4c0; color: #b3261e; }
.upload .upload-ralat { color: #b3261e; margin: 6px 0 0; }
@media (max-width: 399px) { .upload .upload-btn { flex: 1 1 100%; } }


/* ==== PENTING: atribut [hidden] mesti menang atas display:flex/block kita ====
   Tanpa ini, kotak pratonton kosong dan ikon imej rosak tetap kelihatan. */
.upload [hidden], .field [hidden], .kal-mini [hidden], .upload-papar[hidden], .upload-thumb img[hidden], .pdf-ikon[hidden] { display: none !important; }
.tarikh-ralat[hidden] { display: none !important; }

/* ===== 24/09/2026: kalendar admin responsif (7 lajur), bottom sheet, kad bayaran ===== */
.cal-wrap{overflow-x:hidden !important;padding-bottom:2px}
.cal{display:grid !important;grid-template-columns:repeat(7,minmax(0,1fr)) !important;gap:4px !important;width:100% !important;min-width:0 !important}
.cal .wd{font-size:.7rem !important}
.cal .cell{min-width:0 !important;min-height:74px;padding:5px 4px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal .cell .num{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:.8rem;font-weight:800}
.cal .who{display:flex !important;align-items:center;gap:5px;width:100%;min-width:0;border:0;cursor:pointer;text-align:left;padding:2px 5px;border-radius:6px;font-size:.72rem;line-height:1.3;white-space:normal;margin-top:0}
.cal .who .dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.cal .who .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .out{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.64rem}
.denyut{animation:hblDenyut 1.4s ease-out 1}
@keyframes hblDenyut{0%{box-shadow:0 0 0 0 rgba(15,118,110,.5)}100%{box-shadow:0 0 0 16px rgba(15,118,110,0)}}
#petak-sheet{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--surface,#fff);color:var(--ink,#111);border-radius:18px 18px 0 0;box-shadow:0 -10px 42px rgba(0,0,0,.32);padding:16px 18px 22px;max-height:82vh;overflow:auto}
#petak-sheet .sheet-backdrop{position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.38)}
#petak-sheet .sheet-grip{width:44px;height:5px;border-radius:99px;background:var(--line,#e5e7eb);margin:0 auto 12px}
#petak-sheet .sheet-senarai{margin:12px 0 14px;display:grid;gap:9px}
#petak-sheet .sheet-senarai > div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px}
#petak-sheet dt{font-size:.76rem;color:var(--ink-mute,#6b7280)}
#petak-sheet dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.sheet-ref{font-family:ui-monospace,SFMono-Regular,monospace;font-size:1.05rem}
[hidden]{display:none !important}
body.sheet-buka{overflow:hidden}
.kad-bayaran{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.kad-bayaran .card{min-width:0}
.kad-bayaran .angka{font-size:1.7rem;font-weight:800;line-height:1.1}
.kad-merah{border-color:#DC2626 !important;box-shadow:inset 0 0 0 1px #DC2626}
.kad-amaran{border-color:#DC2626 !important;box-shadow:inset 0 0 0 1px #DC2626;background:rgba(220,38,38,.10) !important}
.lencana{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.7rem;font-weight:800;letter-spacing:.02em}
.lencana-hijau{background:rgba(15,118,110,.14);color:#0F766E}
.lencana-amber{background:rgba(180,83,9,.16);color:#B45309}
.lencana-merah{background:rgba(220,38,38,.16);color:#DC2626}
@media (max-width:1200px){ .kad-bayaran{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:767px){
  .kad-bayaran{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px}
  .cal{gap:2px !important}
  .cal .wd{font-size:.58rem !important;letter-spacing:0 !important;padding:3px 0 !important}
  .cal .cell{min-height:52px;padding:3px 2px;border-radius:8px}
  .cal .cell .num{font-size:.72rem}
  .cal .cell .num .masuk{display:none}
  .cal .who{padding:2px;justify-content:center;gap:0;background:transparent !important}
  .cal .who .nm{display:none}
  /* titik mewakili status — warna mesti jelas pada latar terang & gelap */
  .cal .who .dot{width:9px;height:9px;box-shadow:none;background:#0F766E}
  .cal .who.who-pending .dot{background:#B45309}
  .cal .who.who-semakan .dot{background:#C2410C}
  .cal .who.who-expired .dot{background:#6B7280}
  .cal .who.who-blocked .dot{background:#7C3AED}
  .cal .who.who-clash   .dot{background:#DC2626}
  .cal .out{display:none}
}
@media (min-width:768px){ #petak-sheet{left:50% !important;right:auto !important;transform:translateX(-50%);max-width:560px;border-radius:18px} }

/* status baharu pada kalendar: menunggu semakan bayaran + tamat tempoh */
.cal .who.who-semakan { background:linear-gradient(135deg,#EA7A34,#C2410C); }
.cal .who.who-expired { background:linear-gradient(135deg,#8A9491,#6B7280); }

/* ===== 24/09/2026b: angka & kad statistik pada telefon (elak limpahan antara kad) ===== */
.tiles{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)) !important}
.tiles > .card{min-width:0;overflow-wrap:anywhere}
.stat{font-size:clamp(1.05rem,5.6vw,1.9rem) !important;font-weight:800;line-height:1.08;overflow-wrap:anywhere;letter-spacing:-.01em}
.kad-bayaran .angka{font-size:clamp(1.2rem,5.8vw,1.7rem);overflow-wrap:anywhere;line-height:1.1}
.line-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-width:0}
.line-row > *{min-width:0}
.pill{max-width:100%;overflow-wrap:anywhere;white-space:normal}
@media (max-width:700px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}
  .kad-bayaran{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:430px){
  .tiles,.kad-bayaran{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
  .tiles .card,.kad-bayaran .card{padding:14px !important}
  .stat{font-size:clamp(1.05rem,5.6vw,1.7rem) !important}
  .kad-bayaran .angka{font-size:clamp(1.05rem,5.4vw,1.4rem) !important}
}
@media (max-width:349px){ .tiles,.kad-bayaran{grid-template-columns:1fr !important} }