/* ==========================================================================
   ALIGO STOREFRONT — lapisan tipis di atas aligo-ui.css.

   Dimuat SETELAH aligo-ui.css. Isinya hanya elemen yang tidak ada di situs
   statis karena memang tidak ada backend-nya di sana: cek ID ke provider,
   kunci nominal, tombol pesan yang bisa disabled, dan bar bawah yang jumlah
   kolomnya mengikuti halaman yang sudah dibuat.

   style.css (bundle Tailwind lama) TIDAK lagi dimuat di storefront, jadi
   jangan menambahkan utility Tailwind ke berkas Blade mana pun di store/.
   ========================================================================== */

/* --- Bar bawah mobile -----------------------------------------------------
   aligo-ui.css memaku 5 kolom. Sebagian menu (invoices, dashboard) belum punya
   route, dan bar 5 kolom berisi 2 tombol membuat FAB Top Up meleset dari
   tengah. */
.ag-scope .ag-bottombar--2 { grid-template-columns: repeat(2, 1fr); }
.ag-scope .ag-bottombar--3 { grid-template-columns: repeat(3, 1fr); }
.ag-scope .ag-bottombar--4 { grid-template-columns: repeat(4, 1fr); }
.ag-scope .ag-bottombar--5 { grid-template-columns: repeat(5, 1fr); }

/* --- Cek ID ke provider ---------------------------------------------------
   Tidak ada di desain statis: di sana ID tidak pernah divalidasi. */
.pp-check-id {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.pp-check-id__status {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

.pp-check-id__status.is-loading { color: var(--ag-muted); }
.pp-check-id__status.is-ok { color: var(--ag-lime); }
.pp-check-id__status.is-error { color: var(--ag-pink); }

.pp-field__hint {
    color: var(--ag-muted);
    cursor: help;
}

/* --- Nominal terkunci -----------------------------------------------------
/* Kode layanan pembeda region (MLBR, MLPH, ...) untuk nominal bernama sama. */
.pp-nominal-btn__variant {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ag-muted);
}

/* --- Tombol pesan ---------------------------------------------------------
   Dinonaktifkan selama request checkout berjalan: klik ganda adalah cara
   termudah membuat tagihan kembar (lihat Cache::lock di CheckoutController). */
.pp-order-btn:disabled {
    opacity: .6;
    cursor: progress;
}

.pp-order-btn.is-loading svg {
    animation: ag-spin .9s linear infinite;
}

@keyframes ag-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pp-order-btn.is-loading svg { animation: none; }
}

/* --- Kolom hanya-desktop di halaman produk --------------------------------
   Deskripsi & kartu bantuan muncul dua kali di markup: di kolom transaksi
   (desktop) dan di tab Keterangan (mobile). */
.pp-desktop-only { display: none; }

@media (min-width: 1024px) {
    .pp-desktop-only { display: block; }
}

/* --- Daftar galat di form daftar ------------------------------------------ */
.ag-scope .ag-notice-alert ul {
    margin: 0;
    padding-left: 18px;
}

.ag-scope .ag-notice-alert li {
    font-size: 13px;
    line-height: 1.5;
}

/* --- Ticker ---------------------------------------------------------------
   Isinya transaksi sungguhan, jadi jumlahnya bisa sedikit di instalasi baru.
   Animasi dimatikan bagi yang meminta gerakan minimal. */
@media (prefers-reduced-motion: reduce) {
    .ag-ticker__track { animation: none; }
}

/* --- Halaman placeholder "segera hadir" ------------------------------------
   Dipakai StorefrontController::comingSoon() untuk tautan header/footer yang
   halamannya belum dibangun (invoices, leaderboard, kalkulator, dashboard
   pelanggan, halaman legal). */
.ag-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 48px 20px;
}

.ag-coming-soon__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(127, 219, 77, .12);
    color: var(--ag-lime);
    margin-bottom: 4px;
}

.ag-coming-soon__icon svg {
    width: 22px;
    height: 22px;
}

.ag-coming-soon__text {
    font-size: 14px;
    font-weight: 600;
    color: var(--ag-text);
    margin: 0;
}

.ag-coming-soon__help {
    font-size: 13px;
    color: var(--ag-muted);
    margin: 0;
}

.ag-coming-soon__help a {
    color: var(--ag-lime);
    font-weight: 600;
}

/* --- Filter rentang harga di step "Pilih nominal" --------------------------
   Hanya dirender JS untuk kategori dengan banyak nominal sekaligus (Mobile
   Legends dkk); kategori kecil (Free Fire, PLN, dst) tidak pernah menampilkan
   baris ini sama sekali. Rentangnya dihitung dari sebaran harga kategori itu
   sendiri, bukan angka tetap. */
.pp-price-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.pp-price-filter__chip {
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--ag-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--ag-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.pp-price-filter__chip.is-active {
    background: var(--ag-lime);
    border-color: var(--ag-lime);
    color: var(--ag-lime-ink);
}


/* ==========================================================================
   DASHBOARD PELANGGAN
   Kelas yang belum ada di aligo-ui.css. Sisanya (.ag-dashboard,
   .ag-dashboard__sidebar, .ag-stat-grid, .ag-stat-card, .ag-table,
   .ag-filter-card, .ag-actions-row) sudah disediakan aligo-ui.css dan
   sengaja tidak ditulis ulang di sini.
   ========================================================================== */

.ag-section-title {
    font-family: var(--ag-font-display);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
}

/* Dua ukuran grid statistik. aligo-ui.css memaku .ag-stat-grid ke 2 kolom
   (4 di layar lebar); dashboard butuh baris 2-kolom juga, jadi keduanya
   dinyatakan eksplisit alih-alih mengandalkan default. */
.ag-stat-grid--2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 12px; }
.ag-stat-grid--4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
    .ag-stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .ag-stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Garis warna tipis di sisi kiri, bukan kartu berwarna penuh seperti desain
   statis: empat blok warna solid berdampingan bersaing dengan tombol aksi
   utama dan membuat angka lebih susah dibaca. */
.ag-stat-card--waiting    { border-left: 3px solid #d9a521; }
.ag-stat-card--processing { border-left: 3px solid #4d9dff; }
.ag-stat-card--success    { border-left: 3px solid var(--ag-lime); }
.ag-stat-card--failed     { border-left: 3px solid var(--ag-pink); }

.ag-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
}

.ag-profile-card__body { flex: 1; min-width: 0; }
.ag-profile-card__name { margin: 0; font-weight: 600; font-size: 14.5px; }
.ag-profile-card__meta { margin: 3px 0 0; font-size: 12.5px; color: var(--ag-muted); }

.ag-avatar--lg {
    width: 48px;
    height: 48px;
    font-size: 18px;
    flex: none;
}

.ag-form-card { padding: 20px; }
.ag-form-card + .ag-form-card { margin-top: 18px; }

.ag-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ag-badge--success { background: rgba(127, 219, 77, .15); color: var(--ag-lime); }
.ag-badge--info    { background: rgba(77, 157, 255, .15); color: #7bb8ff; }
.ag-badge--warning { background: rgba(217, 165, 33, .16); color: #e0b544; }
.ag-badge--danger  { background: rgba(255, 77, 141, .15); color: var(--ag-pink); }

.ag-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.ag-muted { color: var(--ag-muted); }

/* Paginator bawaan Laravel (Tailwind) tidak punya gaya di sini karena
   style.css tidak dimuat — diberi tampilan minimal supaya tetap terbaca. */
.ag-pagination { margin-top: 16px; font-size: 13px; }
.ag-pagination svg { width: 16px; height: 16px; }

.ag-pagination a,
.ag-pagination span {
    color: var(--ag-text);
    text-decoration: none;
}

.ag-pagination a:hover { color: var(--ag-lime); }

/* ==========================================================================
   AUTH — baris label dengan tautan di kanan (dipakai "Lupa kata sandi?")
   ========================================================================== */

.ag-field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

/* Di dalam .ag-field__label-row, label kehilangan margin-bottom sendiri —
   sudah dipegang oleh baris pembungkusnya supaya sejajar dengan tautannya. */
.ag-field__label-row .ag-field__label { margin-bottom: 0; }

.ag-field__aside-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ag-lime);
    white-space: nowrap;
}

.ag-field__aside-link:hover { text-decoration: underline; }

/* ==========================================================================
   CEK TRANSAKSI (halaman publik pencarian invoice)
   ========================================================================== */

.ag-invoice-hero {
    padding: 40px 0 8px;
    text-align: center;
}

.ag-invoice-hero__inner h1 {
    font-family: var(--ag-font-display);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
}

@media (min-width: 640px) {
    .ag-invoice-hero__inner h1 { font-size: 32px; }
}

.ag-invoice-hero__inner > p {
    color: var(--ag-muted);
    font-size: 14px;
    margin: 0 0 28px;
}

.ag-invoice-form {
    max-width: 560px;
    margin: 0 auto;
    background: var(--ag-panel);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r);
    padding: 22px;
    text-align: left;
}

.ag-invoice-form__label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 12px;
}

.ag-invoice-form__row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 560px) {
    .ag-invoice-form__row { flex-direction: row; }
    .ag-invoice-form__row .ag-input { flex: 1; }
    .ag-invoice-form__row .ag-btn { flex: none; }
}

.ag-invoice-form__hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--ag-muted);
}

.ag-invoice-result {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ag-invoice-result svg {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--ag-muted);
    margin-top: 2px;
}

.ag-invoice-result__title { margin: 0 0 4px; font-weight: 700; }
.ag-invoice-result__meta { margin: 0; font-size: 13px; color: var(--ag-muted); }

.ag-invoice-result__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ag-line);
    width: 100%;
}

/* Blok nomor invoice tidak boleh melebar mengisi sisa ruang — sebelumnya
   div ini tidak dibatasi lebarnya sama sekali, jadi badge status terdorong
   jauh ke kanan dan nomor invoice terlihat menempati hampir seluruh kartu. */
.ag-invoice-result__head > div:first-child {
    flex: 0 1 auto;
    min-width: 0;
}

.ag-invoice-result__head > .ag-badge {
    flex: none;
}

.ag-invoice-result__label {
    font-size: 11.5px;
    color: var(--ag-muted);
    margin: 0 0 3px;
}

.ag-invoice-result__ref { font-size: 15px; font-weight: 700; margin: 0; }

.ag-invoice-result__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 640px) {
    .ag-invoice-result__grid { grid-template-columns: repeat(3, 1fr); }
}

.ag-invoice-result__grid p:last-child { margin: 0; font-size: 13.5px; }

/* --- Catatan kecil dalam kartu (dipakai halaman invoice) ------------------
   Sama gayanya dengan .pp-note di aligo-ui.css, tapi versi umum: .pp-note
   khusus untuk panel pembelian produk. */
.ag-note {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--ag-amber, #e0b544);
    background: rgba(224, 181, 68, .1);
    border: 1px solid rgba(224, 181, 68, .25);
    border-radius: 8px;
    padding: 10px 12px;
    width: 100%;
}

/* ==========================================================================
   HALAMAN LEGAL — .ag-legal (aligo-ui.css) belum menata h1/tanggal update
   ========================================================================== */

.ag-legal h1 {
    font-family: var(--ag-font-display);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
}

.ag-legal__updated {
    font-size: 12.5px;
    color: var(--ag-muted);
    margin: 0 0 22px;
}

.ag-legal a { color: var(--ag-lime); font-weight: 600; }

/* ==========================================================================
   ORDER TOAST — notifikasi dekoratif "baru saja order", kiri bawah
   (public/assets/js/order-toast.js). Dummy, tidak menarik data sungguhan —
   lihat catatan di berkas JS-nya.
   ========================================================================== */

.ag-order-toast {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 320px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--ag-panel-2);
    border: 1px solid var(--ag-line-strong);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
    font-size: 12.5px;
    line-height: 1.4;

    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}

.ag-order-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Di atas bottom bar mobile (lihat .ag-bottombar) supaya tidak tertindih. */
@media (max-width: 639px) {
    .ag-order-toast { left: 10px; right: 10px; max-width: none; bottom: 78px; }
}

.ag-order-toast__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ag-lime);
    box-shadow: 0 0 0 3px rgba(127, 219, 77, .18);
}

.ag-order-toast__text { flex: 1; min-width: 0; color: var(--ag-text); }
.ag-order-toast__text b { color: var(--ag-lime); font-weight: 700; }

.ag-order-toast__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    color: var(--ag-muted);
    cursor: pointer;
}

.ag-order-toast__close svg { width: 14px; height: 14px; }
.ag-order-toast__close:hover { color: var(--ag-text); }

@media (prefers-reduced-motion: reduce) {
    .ag-order-toast { transition: opacity .01ms; }
}

/* ==========================================================================
   INFORMASI & BERITA — .ag-news__thumb sekarang <a>, bukan <div>, supaya
   gambar kartu ikut bisa diklik menuju detail artikel. Anchor default-nya
   inline; dipaksa block di sini supaya aspect-ratio dari aligo-ui.css tetap
   berlaku persis seperti sebelumnya.
   ========================================================================== */

a.ag-news__thumb { display: block; }

/* ==========================================================================
   HALAMAN DETAIL ARTIKEL (/informasi/{slug})
   ========================================================================== */

.ag-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ag-muted);
    margin-bottom: 18px;
}

.ag-breadcrumb a { color: var(--ag-muted); }
.ag-breadcrumb a:hover { color: var(--ag-lime); }
.ag-breadcrumb [aria-current="page"] { color: var(--ag-text); }

.ag-article__shell { max-width: 780px; margin: 0 auto; }

.ag-article__head { margin-bottom: 18px; }

.ag-article__head h1 {
    font-family: var(--ag-font-display);
    font-size: 26px;
    font-weight: 700;
    margin: 10px 0 8px;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .ag-article__head h1 { font-size: 32px; }
}

.ag-article__date { font-size: 12.5px; color: var(--ag-muted); }

.ag-article__cover {
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 800;
    object-fit: cover;
    border-radius: var(--ag-r);
    border: 1px solid var(--ag-line);
    margin-bottom: 24px;
}

/* Isi artikel memakai .ag-legal (sudah menata h2/p/ul/strong) — di sini
   cuma menambah gaya yang khusus dibutuhkan konten artikel: gambar inline
   dan blockquote, yang tidak muncul di halaman legal. */
.ag-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 16px 0;
}

.ag-article__body blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 3px solid var(--ag-lime);
    background: var(--ag-panel);
    border-radius: 0 10px 10px 0;
    color: var(--ag-muted);
    font-style: italic;
}

.ag-article__body h3 {
    font-family: var(--ag-font-display);
    font-size: 15px;
    margin: 20px 0 8px;
}