/*
    ============================================================
    Gaya halaman publik  -  BERSAMA, bukan bercakupan
    ============================================================

    Berkas ini lahir dari satu kekeliruan yang terjadi DUA KALI di tempat yang
    sama, dan keduanya gagal tanpa suara.

    CSS bercakupan (.razor.css) hanya berlaku bagi markup komponennya SENDIRI.
    Aturan yang ditulis di PublicBooking.razor.css tidak pernah mengenai halaman
    lain - sehingga halaman Cek Pesanan yang memakai kelas pb-* yang sama
    terkirim ke peramban tanpa satu pun gaya, telanjang seperti dokumen tahun
    sembilan puluhan. Tidak ada galat, tidak ada peringatan build.

    Kekeliruan kembarannya: pemilih seperti ".pb-field input" dicetak menjadi
    ".pb-field input[b-xxxxx]", padahal input itu buatan komponen InputText dan
    tidak pernah membawa sidik induknya - sehingga ::deep harus ditempelkan
    di mana-mana, dan yang lupa ditempel gagal diam-diam.

    Dijadikan berkas bersama, keduanya lenyap sekaligus: halaman publik mana pun
    boleh memakainya, dan ::deep tidak diperlukan sama sekali karena tidak ada
    cakupan yang perlu ditembus.

    Yang boleh masuk ke sini: gaya yang dipakai LEBIH DARI SATU halaman publik.
    Yang benar-benar khas satu halaman tetap pantas tinggal di .razor.css-nya.
*/

/*
    Pemesanan publik.

    Disusun untuk layar HP lebih dulu, dan pelebarannya baru muncul di 720px ke
    atas. Yang memakai halaman ini kebanyakan sedang memegang telepon, sering di
    luar ruangan — karena itu sasaran sentuh dibuat besar dan tidak ada teks
    berwarna terang di atas latar terang.
*/

.pb-page {
    max-width: 56rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ---- kepala ---- */
.pb-head h1 {
    margin: 0.35rem 0 0.25rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ams-text, #1f2937);
}

.pb-head p {
    margin: 0;
    color: var(--ams-text-muted, #6b7280);
    font-size: 0.95rem;
}

.pb-back {
    display: inline-block;
    color: var(--ams-primary, #1e3a5f);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.pb-back:hover {
    text-decoration: underline;
}

/* ---- tahapan ---- */
.pb-steps {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.pb-steps li {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ams-text-muted, #6b7280);
    border-top: 3px solid var(--ams-border, #e5e7eb);
    padding-top: 0.5rem;
}

.pb-steps li span {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--ams-border, #e5e7eb);
    color: var(--ams-text, #374151);
    font-size: 0.75rem;
}

.pb-steps li.is-active {
    color: var(--ams-primary, #1e3a5f);
    border-top-color: var(--ams-primary, #1e3a5f);
}

.pb-steps li.is-active span {
    background: var(--ams-primary, #1e3a5f);
    color: #fff;
}

.pb-steps li.is-done {
    color: var(--ams-success, #15803d);
    border-top-color: var(--ams-success, #15803d);
}

.pb-steps li.is-done span {
    background: var(--ams-success, #15803d);
    color: #fff;
}

/* ---- kartu ---- */
.pb-card {
    background: var(--ams-surface, #fff);
    border: 1px solid var(--ams-border, #e5e7eb);
    border-radius: 0.9rem;
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

.pb-card h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ams-text, #1f2937);
}

/* ---- bidang isian ---- */
.pb-grid {
    display: grid;
    gap: 0.85rem;
}

/*
    Label bidang isian.

    Sengaja lebih kecil dan lebih redup daripada sebelumnya. Label yang setebal
    dan sepekat isinya membuat formulir terbaca sebagai deretan perintah;
    padahal yang harus menonjol adalah apa yang DIKETIK orang, bukan pertanyaan
    yang sudah dibacanya sekali lalu tidak dilihat lagi.
*/
/*
    ================================================================
    WAJIB untuk seluruh input, textarea, dan checkbox di sini
    ================================================================

    Elemen-elemen itu tidak ditulis di halaman ini melainkan dihasilkan komponen
    InputText, InputTextArea, dan InputCheckbox. CSS bercakupan menempelkan sidik
    scope pada elemen TERAKHIR sebuah pemilih, dan elemen milik komponen anak
    tidak pernah membawa sidik milik induknya - sehingga ".pb-field input"
    berubah menjadi ".pb-field input[b-xxxxx]" dan TIDAK PERNAH cocok.

    Kegagalannya diam total: tidak ada galat, tidak ada peringatan build, dan
    berkas gayanya tetap terkirim ke peramban lengkap dengan aturan yang tidak
    mengenai apa pun. Dua kali perbaikan tampilan sempat dikerjakan dan sama
    sekali tidak berbekas sebelum sebabnya ketahuan.

    memindahkan sidik itu ke leluhurnya - ".pb-field[b-xxxxx] input" -
    dan barulah aturannya mengenai sasaran.
*/

.pb-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #6b7690;
}

/*
    Bidang isian bergaya TERISI, bukan berkotak.

    Kotak bergaris mengelilingi tiap isian adalah bentuk formulir lama: yang
    ditangkap mata lebih dulu adalah kotaknya, dan sebelas kotak berjajar
    membuat halaman terlihat seperti berkas pajak. Diganti bidang berlatar
    lembut tanpa garis - bentuknya tetap terbaca sebagai "di sini tempat
    mengetik", tetapi ia mundur ke belakang alih-alih maju ke depan.

    Garis tepinya tidak dihapus melainkan dibuat bening. Ruangnya tetap
    disediakan, sehingga saat garis itu muncul kembali ketika difokus, tidak ada
    satu piksel pun yang bergeser.
*/
.pb-field input,
.pb-field textarea {
    /* 16px supaya iOS tidak memperbesar halaman saat bidang disentuh. */
    font-size: 1rem;
    font-weight: 400;
    padding: 0.75rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    background: #f1f5fa;
    color: var(--ams-text, #1f2937);
    width: 100%;
    appearance: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pb-field textarea {
    min-height: 4.75rem;
    resize: vertical;
}

.pb-field input::placeholder,
.pb-field textarea::placeholder {
    color: #9aa5bb;
}

.pb-field input:hover,
.pb-field textarea:hover {
    background: #e9eff8;
}

/*
    Saat difokus bidangnya MEMUTIH dan garisnya muncul.

    Perpindahan dari abu ke putih itu sendiri yang menjadi penandanya - jauh
    lebih terbaca daripada perubahan warna garis, dan terbaca juga oleh orang
    yang sulit membedakan warna. Cincin tipis di luarnya menegaskan tanpa
    menambah siku tajam.
*/
.pb-field input:focus,
.pb-field textarea:focus {
    outline: none;
    background: #fff;
    border-color: #1c3d78;
    box-shadow: 0 0 0 3px rgba(28, 61, 120, 0.12);
}

/*
    Bidang yang ditolak pemeriksaan. Kelasnya dipasang Blazor sendiri.

    Merah HANYA di sini. Bidang yang belum pernah disentuh tidak boleh memerah -
    memarahi orang sebelum ia sempat mengetik adalah cara tercepat membuatnya
    menutup halaman.
*/
.pb-field input.invalid,
.pb-field textarea.invalid {
    background: #fdf4f3;
    border-color: #e0a19b;
}

.pb-field input.invalid:focus,
.pb-field textarea.invalid:focus {
    background: #fff;
    border-color: #b42318;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.pb-hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ams-text-muted, #6b7280);
}

/* Pratinjau bukti transfer sebelum dikirim.

   Tingginya dibatasi supaya tombol kirim tetap terlihat tanpa menggulung: foto
   dari kamera ponsel berbentuk potret dan, kalau dibiarkan, mendorong tombolnya
   jauh ke bawah layar. */
.pb-proof {
    margin: 0;
    border: 1px solid var(--ams-border, #e5e7eb);
    border-radius: 0.6rem;
    overflow: hidden;
    background: #f6f7fa;
}

.pb-proof img {
    display: block;
    width: 100%;
    max-height: 11rem;
    object-fit: contain;
    background: #eceff5;
}

.pb-proof figcaption {
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    color: var(--ams-text-muted, #6b7280);
    border-top: 1px solid var(--ams-border, #e5e7eb);
    word-break: break-all;
}

/*
    Baris persetujuan.

    Semula melayang begitu saja di antara kotak catatan dan tombol kirim -
    sederet huruf kecil tanpa bentuk, menempel pada tombol tanpa jeda. Padahal
    inilah satu-satunya persetujuan yang diminta halaman ini, dan dasar hukum
    bagi seluruh penyimpanan data penyewa sesudahnya.

    Diberi wadah sendiri supaya terbaca sebagai satu langkah yang harus
    dilakukan, bukan sebagai keterangan kaki yang boleh dilewati. Seluruh
    wadahnya bisa ditekan, karena ia memang sebuah <label>.
*/
.pb-consent {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin: 1.25rem 0 0;
    padding: 0.85rem 0.95rem;
    border: 1px solid #dde3ee;
    border-radius: 0.7rem;
    background: #f7f9fc;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #45506b;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.pb-consent:hover {
    border-color: #c6d0e2;
    background: #f2f6fc;
}

/*
    Sudah dicentang: warnanya berubah tenang, bukan meriah.

    :has() membaca keadaan kotak centang di dalamnya tanpa satu baris
    JavaScript. Peramban yang belum mengenalnya sekadar tidak berubah warna -
    persetujuannya tetap tercatat, hanya tanpa penegasan tambahan.
*/
.pb-consent:has(input:checked) {
    border-color: #9fc7ae;
    background: #f2f9f5;
    color: #33405e;
}

.pb-consent input {
    margin-top: 0.1rem;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;

    /* Mengikuti warna aplikasi alih-alih biru bawaan sistem operasi - satu
       baris, tanpa perlu mengganti kotak centangnya dengan gambar sendiri. */
    accent-color: #1c3d78;
    cursor: pointer;
}

/* ---- tombol ---- */
.pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /* 44px: sasaran sentuh terkecil yang masih nyaman dengan ibu jari. */
    min-height: 2.75rem;
    padding: 0 1.1rem;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.pb-btn--primary {
    background: var(--ams-primary, #1e3a5f);
    color: #fff;
}

.pb-btn--primary:hover:not(:disabled) {
    filter: brightness(1.12);
}

.pb-btn--ghost {
    background: transparent;
    border-color: var(--ams-border, #d1d5db);
    color: var(--ams-primary, #1e3a5f);
}

.pb-btn--ghost:hover {
    background: var(--ams-surface-alt, #f3f4f6);
}

.pb-btn--wide {
    width: 100%;
}

/*
    Tombol kirim pada langkah data diri.

    Diberi jarak dari kotak persetujuan di atasnya - dua benda yang menempel
    tanpa jeda terbaca sebagai satu benda, dan tombol yang terlihat menempel
    pada kalimat persetujuan seolah menjadi bagian dari kalimat itu.

    Sedikit lebih tinggi dan berbayang tipis daripada tombol lain di halaman
    ini, sebab inilah tombol yang mengakhiri seluruh pengisian. Bayangannya
    hilang saat ditekan, sehingga tombolnya terasa turun.
*/
.pb-field + .pb-consent,
.pb-grid + .pb-consent {
    margin-top: 1.25rem;
}

.pb-consent + .pb-btn {
    margin-top: 0.9rem;
    min-height: 3.1rem;
    border-radius: 0.7rem;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 6px rgba(16, 26, 51, 0.16);
    transition: box-shadow .15s ease, filter .15s ease, transform .05s ease;
}

.pb-consent + .pb-btn:active:not(:disabled) {
    box-shadow: 0 1px 2px rgba(16, 26, 51, 0.18);
    transform: translateY(1px);
}

.pb-consent + .pb-btn:disabled {
    box-shadow: none;
    opacity: 0.65;
    cursor: progress;
}

.pb-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- daftar unit ---- */
.pb-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pb-unit {
    background: var(--ams-surface, #fff);
    border: 1px solid var(--ams-border, #e5e7eb);
    border-radius: 0.9rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pb-unit--full {
    opacity: 0.72;
}

.pb-unit h3 {
    margin: 0 0 0.2rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ams-text, #1f2937);
}

.pb-unit__meta {
    margin: 0 0 0.45rem;
    font-size: 0.85rem;
    color: var(--ams-text-muted, #6b7280);
}

.pb-unit__side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.pb-price {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ams-text, #1f2937);
    font-variant-numeric: tabular-nums;
}

.pb-price span {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ams-text-muted, #6b7280);
}

.pb-price small {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ams-text-muted, #6b7280);
}

.pb-tag {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pb-tag--ok {
    background: #dcfce7;
    color: #166534;
}

.pb-tag--full {
    background: #fee2e2;
    color: #991b1b;
}

/* ---- unit terpilih ---- */
.pb-chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--ams-surface-alt, #f8fafc);
    border: 1px solid var(--ams-border, #e5e7eb);
    border-radius: 0.7rem;
    padding: 0.75rem 0.9rem;
}

.pb-chosen__label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ams-text-muted, #6b7280);
}

.pb-chosen strong {
    font-size: 1rem;
    color: var(--ams-text, #1f2937);
}

.pb-chosen p {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--ams-text-muted, #6b7280);
}

/* ---- ringkasan tagihan ---- */
.pb-summary {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pb-summary div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
}

.pb-summary dt {
    color: var(--ams-text-muted, #6b7280);
}

.pb-summary dd {
    margin: 0;
    font-weight: 600;
    color: var(--ams-text, #1f2937);
    font-variant-numeric: tabular-nums;
}

.pb-summary__hi {
    border-top: 1px dashed var(--ams-border, #e5e7eb);
    padding-top: 0.45rem;
    font-size: 1rem;
}

.pb-summary__hi dd {
    color: var(--ams-primary, #1e3a5f);
    font-size: 1.1rem;
}

.pb-bank {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.7rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.9rem;
    color: #1e3a5f;
}

.pb-bank span {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

/* ---- keadaan ---- */
.pb-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2.25rem 1rem;
    text-align: center;
    color: var(--ams-text-muted, #6b7280);
    background: var(--ams-surface, #fff);
    border: 1px dashed var(--ams-border, #e5e7eb);
    border-radius: 0.9rem;
}

.pb-state i {
    font-size: 1.75rem;
    opacity: 0.55;
}

.pb-state p {
    margin: 0;
    font-size: 0.92rem;
}

.pb-spinner {
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid var(--ams-border, #e5e7eb);
    border-top-color: var(--ams-primary, #1e3a5f);
    border-radius: 50%;
    animation: pb-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .pb-spinner { animation-duration: 2.4s; }
}

.pb-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.7rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.pb-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.pb-alert--ok {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.pb-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    padding: 1.25rem 0.5rem;
}

.pb-done i {
    font-size: 2.75rem;
    color: var(--ams-success, #15803d);
}

.pb-done h2 {
    margin: 0;
}

.pb-done p {
    margin: 0;
    color: var(--ams-text-muted, #6b7280);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ---- layar lebar ---- */
@media (min-width: 720px) {
    .pb-grid--2 {
        grid-template-columns: 1fr 1fr;
    }

    .pb-field--wide {
        grid-column: 1 / -1;
    }

    .pb-unit {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .pb-unit__side {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.5rem;
    }

    .pb-steps li {
        font-size: 0.85rem;
    }
}

/*
    Foto KTP pada langkah "Data diri".

    Ditaruh mendatar: pratinjau di kiri, ajakan di kanan. Susunan itu membuat
    hasil fotonya terlihat tanpa mendorong seluruh formulir turun - dan pada
    halaman tiga langkah, tiap gulir tambahan adalah kesempatan orang berhenti
    di tengah jalan.
*/
.pb-ktp {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin: 0 0 1.1rem;
    padding: .85rem;
    border: 1px dashed #c9d3e4;
    border-radius: .75rem;
    background: #f7f9fc;
}

.pb-ktp__shot {
    flex: 0 0 auto;
    width: 5.5rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: .5rem;
    background: #e7edf6;
    color: #93a1ba;
    font-size: 1.5rem;
}

.pb-ktp__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pb-ktp__body {
    flex: 1 1 auto;
    min-width: 0;
}

.pb-ktp__body strong {
    display: block;
    font-size: .92rem;
    color: #101a33;
}

.pb-ktp__body strong span {
    font-weight: 500;
    color: #8792a8;
}

.pb-ktp__body p {
    margin: .15rem 0 .5rem;
    font-size: .8rem;
    line-height: 1.45;
    color: #6b7280;
}

/*
    Tombolnya sebenarnya <label> yang membungkus input berkas.

    Input berkas bawaan peramban tidak bisa digayakan, dan tampilannya berbeda
    di tiap peramban - pada halaman yang dilihat calon pelanggan, itu satu-satunya
    bagian yang terlihat seperti bukan bagian dari halaman ini. Menyembunyikannya
    di balik label memberi kendali penuh atas rupanya tanpa satu baris JavaScript.
*/
.pb-ktp__pick {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border: 1px solid #1c3d78;
    border-radius: .55rem;
    background: #fff;
    color: #1c3d78;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
}

.pb-ktp__pick:hover {
    background: #eef3fb;
}

.pb-ktp__pick.is-busy {
    border-color: #c9d3e4;
    color: #8792a8;
    cursor: progress;
}

/* wajib: input-nya milik komponen InputFile, bukan markup halaman ini. */
.pb-ktp__pick input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pb-ktp__note {
    margin: .5rem 0 0;
    font-size: .8rem;
    line-height: 1.45;
}

.pb-ktp__note--ok {
    color: #17703f;
}

.pb-ktp__note--warn {
    color: #9a5416;
}

.pb-ktp__note--bad {
    color: #b42318;
}

@media (max-width: 30rem) {
    .pb-ktp {
        flex-direction: column;
    }

    .pb-ktp__shot {
        width: 100%;
        height: 8rem;
    }
}

/* Tulisan mentah hasil pembacaan, tertutup sampai dibuka sendiri. */
.pb-ktp__raw {
    margin-top: 0.5rem;
    font-size: 0.78rem;
}

.pb-ktp__raw summary {
    cursor: pointer;
    color: #1c3d78;
    font-weight: 600;
}

.pb-ktp__raw pre {
    margin: 0.4rem 0 0;
    padding: 0.5rem 0.65rem;
    max-height: 11rem;
    overflow: auto;
    border-radius: 0.5rem;
    background: #eef2f8;
    color: #45506b;
    font-size: 0.74rem;
    line-height: 1.4;

    /* Teks pembacaan mengandung baris panjang tanpa spasi; tanpa ini kotaknya
       melebar dan menggeser seluruh halaman ke samping. */
    white-space: pre-wrap;
    word-break: break-word;
}

/* Putaran kecil di dalam tombol. Warnanya diambil dari huruf tombolnya sendiri,
   sebab latarnya gelap dan warna bawaan yang biru tua akan lenyap di sana. */
.pb-spinner--sm {
    width: 1.05rem;
    height: 1.05rem;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}

/* Keterangan penutup di bawah tombol kirim. */
.pb-after {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.65rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #7b8698;
}

.pb-after i {
    margin-top: 0.1rem;
    color: #6f9a80;
}

/* Jalan masuk ke halaman cek pesanan, dari kepala halaman pemesanan. */
.pb-head__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: #1c3d78;
    text-decoration: none;
}

.pb-head__link:hover {
    text-decoration: underline;
}

.pb-done__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}


/*
    Cek pesanan.

    Sengaja meminjam seluruh gaya halaman pemesanan (pb-*), yang tersedia lewat
    berkas gaya bersama halaman publik. Yang ditulis di sini hanya yang benar-
    benar khas halaman ini: papan keadaan dan baris tindakan berikutnya.

    Meminjam, bukan menyalin: dua halaman yang dilihat orang yang sama dalam satu
    urusan harus terasa satu tempat, dan gaya yang disalin akan berbeda pelan-
    pelan setiap kali salah satunya disentuh.
*/

/*
    Papan keadaan.

    Inilah satu-satunya hal yang dicari orang saat membuka halaman ini, dan ia
    harus terbaca sebelum mata sempat menyusuri sisanya - karena itu ia paling
    besar, paling berwarna, dan berada paling atas.
*/
.bs-status {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
}

.bs-status i {
    font-size: 1.4rem;
    line-height: 1.2;
}

.bs-status strong {
    display: block;
    font-size: 1.02rem;
}

.bs-status p {
    margin: 0.2rem 0 0;
    font-size: 0.86rem;
    line-height: 1.5;
    opacity: 0.9;
}

/* Menunggu: tenang. Tidak ada yang salah, hanya belum selesai — dan warna
   peringatan pada keadaan yang normal membuat orang menelepon tanpa perlu. */
.bs-status--wait {
    background: #fdf6ec;
    border-color: #f0d9b5;
    color: #8a5a1a;
}

.bs-status--ok {
    background: #f0f9f4;
    border-color: #b9dfc8;
    color: #17703f;
}

.bs-status--bad {
    background: #fdf3f2;
    border-color: #eebfba;
    color: #a4302a;
}

/*
    Tindakan berikutnya.

    Dipisahkan dari papan keadaan dengan sengaja: keadaan menjawab "bagaimana
    pesanan saya", sedangkan baris ini menjawab "apa yang harus saya kerjakan".
    Dua pertanyaan berbeda yang digabung menjadi satu paragraf akan membuat yang
    kedua terlewat.
*/
.bs-next {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.9rem 0 0;
    padding: 0.7rem 0.85rem;
    border-radius: 0.6rem;
    background: #eef3fb;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #1c3d78;
    font-weight: 600;
}

.bs-next i {
    margin-top: 0.1rem;
    flex: none;
}

/* ==========================================================
   Latar halaman publik
   ========================================================== */

/*
    Latar bernuansa teknologi, dikerjakan sepenuhnya dengan CSS.

    Dua lapis, dan keduanya DI BELAKANG isi halaman: cahaya lembut yang
    memberi kedalaman, lalu kisi tipis yang memberi kesan terukur. Dipasang
    fixed supaya tidak ikut bergulir - latar yang bergerak bersama teks
    membuat halaman terasa murah dan mengganggu saat dibaca.

    Kisinya dipudarkan ke bawah dengan mask, sehingga ia hanya terasa di
    kepala halaman dan tidak pernah bersaing dengan tulisan di bawahnya.
    Tanpa itu, kisi yang menembus seluruh halaman akan membuat huruf kecil
    terlihat bergetar.

    Sengaja tanpa animasi. Latar yang bergerak menarik mata terus-menerus,
    dan yang dibutuhkan orang di halaman ini adalah membaca satu jawaban.
*/
.pb-page {
    position: relative;
    isolation: isolate;
}

.pb-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(60rem 40rem at 8% -12%, rgba(28, 61, 120, 0.13), transparent 62%),
        radial-gradient(52rem 36rem at 104% 4%, rgba(23, 112, 63, 0.10), transparent 60%),
        radial-gradient(40rem 30rem at 50% 110%, rgba(28, 61, 120, 0.07), transparent 65%),
        linear-gradient(180deg, #f5f8fd 0%, #eef2f9 100%);
}

.pb-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(28, 61, 120, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 61, 120, 0.05) 1px, transparent 1px);
    background-size: 3.25rem 3.25rem;

    -webkit-mask-image: radial-gradient(75% 55% at 50% 0%, #000 0%, transparent 78%);
    mask-image: radial-gradient(75% 55% at 50% 0%, #000 0%, transparent 78%);
}

/*
    Kartu di atas latar itu dibuat sedikit tembus pandang.

    Kartu putih pekat akan memotong latarnya dengan tegas dan membuat
    kisinya terlihat seperti kesalahan cetak. Yang sedikit tembus membiarkan
    warna latar terbaca samar di baliknya, sehingga keduanya menjadi satu
    bidang, bukan dua yang bertumpuk.
*/
.pb-card {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 2px rgba(16, 26, 51, 0.05), 0 10px 30px rgba(16, 26, 51, 0.07);
}

/* ==========================================================
   Tombol hubungi admin
   ========================================================== */

/*
    Mengambang di sudut, tidak ikut bergulir.

    Pertanyaan yang membuat orang berhenti mengisi formulir muncul kapan saja
    - di tengah memilih tanggal, atau tepat sebelum menekan kirim. Tombol yang
    hanya ada di kaki halaman menuntut orang menggulir turun untuk bertanya,
    dan sebagian besar memilih menutup tab.
*/
.pc-wa {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: 2rem;
    background: #25d366;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
    transition: transform .15s ease, box-shadow .15s ease;
}

.pc-wa i {
    font-size: 1.25rem;
    line-height: 1;
}

.pc-wa:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45);
}

/* Di layar sempit tulisannya disembunyikan: ikon WhatsApp sudah dikenali
   semua orang, dan tombol lebar di ponsel menutupi isi halaman. */
@media (max-width: 30rem) {
    .pc-wa {
        padding: 0.8rem;
    }

    .pc-wa__text {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-wa {
        transition: none;
    }
}

/*
    Tombol lebar yang mengikuti sederet isian.

    Tanpa jarak ini, tombolnya menempel persis di bawah kotak isian terakhir
    dan terbaca sebagai bagian dari kotak itu - seolah baris berikutnya dari
    formulir, bukan perintah yang mengakhirinya. Jeda kecil sudah cukup
    memisahkan "yang saya isi" dari "yang saya tekan".
*/
.pb-grid + .pb-btn--wide,
.pb-field + .pb-btn--wide {
    margin-top: 1.15rem;
    min-height: 3.1rem;
    border-radius: 0.7rem;
    font-size: 0.98rem;
    box-shadow: 0 2px 6px rgba(16, 26, 51, 0.16);
    transition: box-shadow .15s ease, filter .15s ease, transform .05s ease;
}

.pb-grid + .pb-btn--wide:active:not(:disabled),
.pb-field + .pb-btn--wide:active:not(:disabled) {
    box-shadow: 0 1px 2px rgba(16, 26, 51, 0.18);
    transform: translateY(1px);
}

.pb-grid + .pb-btn--wide:disabled,
.pb-field + .pb-btn--wide:disabled {
    box-shadow: none;
    opacity: 0.65;
    cursor: progress;
}