/* ==================================================================
   TOUR PEMBELI -- tema driver.js
   ==================================================================

   driver.css bawaan memberi kotak putih bersudut 5px dengan tombol biru
   kecil -- tidak menyerupai apa pun di aplikasi ini, dan di layar ponsel
   tombolnya di bawah ukuran sasaran sentuh yang wajar.

   Berkas ini TIDAK menggantikan driver.css; ia dimuat sesudahnya dan hanya
   menimpa yang perlu. Semua selektor dibatasi ke .tour-sahabat supaya tidak
   ada tour lain (kalau nanti ada) yang ikut berubah tanpa diminta.
   ================================================================== */

:root {
    --tour-hijau: #006d37;
    --tour-hijau-tua: #005c2e;
    --tour-tinta: #091d2e;
    --tour-abu: #6b7280;
    --tour-garis: #e8efe9;
}

/* ------------------------------------------------------------------
   KARTU
   ------------------------------------------------------------------ */

.driver-popover.tour-sahabat {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px 20px 16px;
    max-width: 340px;
    box-shadow:
        0 24px 48px -12px rgba(9, 29, 46, 0.22),
        0 0 0 1px rgba(9, 29, 46, 0.04);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.driver-popover.tour-sahabat .driver-popover-arrow {
    border-width: 8px;
}

/* Panah mengikuti warna kartu di keempat arah. driver.js memberi kelas
   arah pada elemen panah, dan tiap arah memakai border-*-color yang
   berbeda -- kalau hanya satu yang disetel, tiga arah lainnya tetap
   memakai warna bawaan dan panahnya lenyap. */
.driver-popover.tour-sahabat .driver-popover-arrow-side-left   { border-left-color: #ffffff; }
.driver-popover.tour-sahabat .driver-popover-arrow-side-right  { border-right-color: #ffffff; }
.driver-popover.tour-sahabat .driver-popover-arrow-side-top    { border-top-color: #ffffff; }
.driver-popover.tour-sahabat .driver-popover-arrow-side-bottom { border-bottom-color: #ffffff; }

/* ------------------------------------------------------------------
   ISI
   ------------------------------------------------------------------ */

.driver-popover.tour-sahabat .driver-popover-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--tour-tinta);
    margin: 0 0 6px;
    padding-right: 28px;   /* ruang untuk tombol tutup */
}

.driver-popover.tour-sahabat .driver-popover-description {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--tour-abu);
    margin: 0;
}

/* Tombol tutup: lingkaran samar di pojok, bukan "x" telanjang yang
   gampang terlewat maupun tertekan tanpa sengaja. */
.driver-popover.tour-sahabat .driver-popover-close-btn {
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    line-height: 26px;
    font-size: 18px;
    border-radius: 999px;
    color: #9aa3ab;
    background: #f4f6f5;
    transition: background 0.15s ease, color 0.15s ease;
}

.driver-popover.tour-sahabat .driver-popover-close-btn:hover {
    background: #e9edeb;
    color: var(--tour-tinta);
}

/* ------------------------------------------------------------------
   KAKI: kemajuan + tombol
   ------------------------------------------------------------------ */

.driver-popover.tour-sahabat .driver-popover-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--tour-garis);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Kemajuan sebagai teks kecil di kiri, bukan angka besar yang bersaing
   dengan judulnya. */
.driver-popover.tour-sahabat .driver-popover-progress-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #9aa3ab;
    margin-right: auto;
}

.driver-popover.tour-sahabat .driver-popover-navigation-btns {
    display: flex;
    gap: 8px;
    align-items: center;
}

.driver-popover.tour-sahabat .driver-popover-navigation-btns button {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 0 16px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
    text-shadow: none;
}

.driver-popover.tour-sahabat .driver-popover-navigation-btns button:active {
    transform: scale(0.97);
}

/*
 * Selektornya sengaja panjang: menyertakan `button` dan rantai kelas yang
 * sama dengan aturan dasar di atas. Aturan dasar itu memakai `all: unset`,
 * dan dengan (0,3,1) ia mengalahkan varian yang hanya (0,3,0) -- akibatnya
 * "Lanjut" ikut transparan dan tidak terbedakan dari "Kembali". Ditambah
 * kelas varian, keduanya jadi (0,4,1) dan menang tanpa !important.
 */

/* Tombol pertama = "Kembali": sengaja lebih senyap. Yang ingin ditekan
   orang hampir selalu "Lanjut"; membuat keduanya sama tebal memaksa
   membaca dua-duanya. */
.driver-popover.tour-sahabat .driver-popover-navigation-btns button.driver-popover-prev-btn {
    color: var(--tour-abu);
    background: transparent;
    border: 1px solid var(--tour-garis) !important;
}

.driver-popover.tour-sahabat .driver-popover-navigation-btns button.driver-popover-prev-btn:hover {
    background: #f6faf7;
    color: var(--tour-tinta);
}

.driver-popover.tour-sahabat .driver-popover-navigation-btns button.driver-popover-next-btn {
    color: #ffffff;
    background: var(--tour-hijau);
    box-shadow: 0 4px 12px rgba(0, 109, 55, 0.24);
}

.driver-popover.tour-sahabat .driver-popover-navigation-btns button.driver-popover-next-btn:hover {
    background: var(--tour-hijau-tua);
}

/* driver.js menonaktifkan tombol pada langkah ujung dengan atribut
   disabled. Bawaan hanya memudarkan warnanya; tanpa mengubah kursor,
   tombolnya masih terasa bisa ditekan. */
.driver-popover.tour-sahabat .driver-popover-navigation-btns button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* ------------------------------------------------------------------
   SOROTAN
   ------------------------------------------------------------------ */

.driver-active .driver-overlay,
.driver-active * {
    /* Kursor bawaan driver.js berubah jadi 'default' di seluruh halaman
       sehingga tombol di dalam sorotan terasa mati. */
    cursor: inherit;
}

/* ------------------------------------------------------------------
   PONSEL
   ------------------------------------------------------------------

   Di bawah 640px kartunya dipatok ke bawah layar, bukan mengambang di
   dekat elemen. Alasannya: pada layar sempit popover yang menempel pada
   elemen sering keluar dari viewport atau justru menutupi elemen yang
   sedang dijelaskannya. Dipatok di bawah, elemen yang disorot selalu
   tetap terlihat.

   Kelas .tour-ponsel dipasang oleh tour-pembeli.js, bukan hanya lewat
   media query, supaya JS dan CSS memakai ambang yang sama persis. */

.driver-popover.tour-sahabat.tour-ponsel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    max-width: none;
    width: auto;
    border-radius: 22px;
    padding: 18px 18px 14px;
    animation: tour-naik 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Panah tidak masuk akal untuk kartu yang dipatok di bawah layar. */
.driver-popover.tour-sahabat.tour-ponsel .driver-popover-arrow {
    display: none !important;
}

.driver-popover.tour-sahabat.tour-ponsel .driver-popover-footer {
    margin-top: 16px;
}

/* Sasaran sentuh 44px -- ambang yang dipakai Apple HIG, dan cukup lapang
   untuk ibu jari. Di desktop 38px sudah memadai karena penunjuknya presisi. */
.driver-popover.tour-sahabat.tour-ponsel .driver-popover-navigation-btns button {
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
}

/* Pada layar paling sempit, tombol melebar mengisi baris supaya tidak
   ada yang terlalu kecil untuk ditekan. */
@media (max-width: 380px) {
    .driver-popover.tour-sahabat.tour-ponsel .driver-popover-progress-text {
        width: 100%;
        margin: 0 0 10px;
    }

    .driver-popover.tour-sahabat.tour-ponsel .driver-popover-footer {
        flex-wrap: wrap;
    }

    .driver-popover.tour-sahabat.tour-ponsel .driver-popover-navigation-btns {
        width: 100%;
    }

    .driver-popover.tour-sahabat.tour-ponsel .driver-popover-navigation-btns button {
        flex: 1;
    }
}

@keyframes tour-naik {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Hormati pengguna yang mematikan animasi di setelan sistemnya. */
@media (prefers-reduced-motion: reduce) {
    .driver-popover.tour-sahabat.tour-ponsel {
        animation: none;
    }

    .driver-popover.tour-sahabat .driver-popover-navigation-btns button {
        transition: none;
    }
}