/* Checkout — satu file Blade (resources/views/checkout/create.blade.php)
   dipakai untuk SEMUA paket sewa (checkout/{paketSewa}), jadi polesan di sini
   otomatis konsisten di semua tampilan checkout tanpa perlu diulang per paket.

   Tema dijaga TETAP terang/cream-brand seperti sebelumnya (bukan dark-glass
   ala tenant-login) karena halaman ini bagian dari alur landing page publik,
   bukan portal wali kelas. "3D" di sini difokuskan ke elemen DEKORATIF (blob
   background mengambang, logo, tombol submit) -- BUKAN tilt penuh di kartu
   form, karena kartu form berisi dropdown custom-select (.cstm-select-item)
   yang popup-nya bisa ikut miring/rusak kalau parent card ditilt penuh saat
   dropdown terbuka. Ini prinsip yang sama dipakai di dashboard wali kelas:
   tilt 3D untuk elemen non-interaktif, hover-lift ringan untuk kartu data. */

:root {
    --chk-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Blob dekoratif -- sebelumnya statis, sekarang mengambang pelan (drift) +
   ikut parallax kursor lewat public/js/checkout.js (data-parallax, pola sama
   dengan tl-shape di tenant-login.js). PENTING: drift di sini SENGAJA
   menganimasikan `margin` (bukan `transform`) -- transform-nya sendiri
   dikendalikan penuh oleh JS (translate parallax mengikuti kursor), supaya
   dua-duanya bisa jalan BARENGAN tanpa saling menimpa (CSS animation selalu
   menang atas inline style di properti yang SAMA, jadi kalau drift ini juga
   pakai `transform`, parallax dari JS tidak akan pernah kelihatan). Pola
   persis sama dipakai `.tl-shape` di tenant-login.css. */
.chk-shape {
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
    pointer-events: none;
    transition: transform 0.2s ease-out;
    animation: chk-shape-drift var(--chk-drift-duration, 9s) ease-in-out infinite alternate;
}

@keyframes chk-shape-drift {
    from { margin: 0; }
    to { margin: -10px 0 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .chk-shape {
        animation: none;
    }
}

/* Logo badge -- v1.1: perbaikan dari percobaan pertama (animasi
   translateY+rotate BOLAK-BALIK ke 0deg) -- di tengah ayunannya, ada momen
   dia "lewat" posisi netral yang keliatan SAMA PERSIS dengan versi lama, jadi
   di screenshot diam ada peluang keliatan "belum berubah". Sekarang badge-nya
   PERMANEN dimiringkan (rotate tetap, bukan balik ke 0) via `perspective` +
   `rotateY/rotateX` sungguhan (bukan cuma rotate 2D) supaya SELALU terlihat
   "3D miring" di kondisi diam mana pun, float pelan cuma nambah gerakan naik-
   turun DI ATAS kemiringan permanen itu (bukan menggantikannya). */
.chk-logo-badge {
    transform: perspective(200px) rotateY(-18deg) rotateX(8deg);
    box-shadow: 0 10px 20px -8px rgba(124, 78, 224, 0.55), 4px 6px 0 rgba(76, 42, 143, 0.25);
    animation: chk-logo-float 3.2s var(--chk-ease) infinite;
}

@keyframes chk-logo-float {
    0%, 100% { transform: perspective(200px) rotateY(-18deg) rotateX(8deg) translateY(0); }
    50% { transform: perspective(200px) rotateY(-18deg) rotateX(8deg) translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .chk-logo-badge {
        animation: none;
    }
}

/* Kartu form -- v1.1: shadow/border-accent SEKARANG permanen (bukan cuma
   muncul saat hover) supaya kartu terlihat "terangkat"/dimensional bahkan di
   screenshot diam -- hover cuma menambah lift tipis DI ATAS tampilan dasar
   yang sudah elevated ini. Tetap TIDAK pakai tilt penuh (lihat catatan atas
   soal dropdown custom-select). */
.chk-card {
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 45px -30px rgba(76, 42, 143, 0.45), 0 2px 4px rgba(15, 23, 42, 0.04);
    transition: transform 0.3s var(--chk-ease), box-shadow 0.3s var(--chk-ease);
}

/* Aksen strip gradasi di tepi atas kartu -- pseudo-element, bukan border-image
   (border-image akan ikut menimpa border kiri/kanan/bawah yang sudah dipakai
   Tailwind `border border-slate-200`, jadi dipisah supaya tidak konflik).
   BUG PERNAH TERJADI: sebelumnya `.chk-card` dikasih `overflow: hidden` biar
   strip ini ikut lengkung di sudut atas -- ternyata itu JUGA memotong popup
   dropdown `.cstm-select-item` (Tingkatan/Kelas/dst), karena popup itu
   render sebagai anak `.chk-card` yang melebar ke LUAR batas kartu saat
   terbuka. Diganti: `overflow` pada `.chk-card` dihapus total, radius
   lengkung strip-nya di-set MANUAL di sini (match rounded-3xl = 1.5rem)
   supaya tidak perlu overflow:hidden di parent sama sekali. */
.chk-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 1.5rem 1.5rem 0 0;
    background: linear-gradient(90deg, #7c4ee0, #c1502e);
}

.chk-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 55px -28px rgba(76, 42, 143, 0.5), 0 2px 4px rgba(15, 23, 42, 0.04);
}

/* Input -- micro-lift halus saat focus, konsisten dengan gaya elegan yang
   sudah dipakai di halaman lain (bukan cuma ganti warna border). */
.chk-card input:focus,
.chk-card .cstm-select-item > button:focus {
    transform: translateY(-1px);
}

.chk-card input,
.chk-card .cstm-select-item > button {
    transition: transform 0.15s var(--chk-ease), border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Tombol "Buat Invoice" -- v1.1: shadow "terangkat" permanen (bukan cuma
   nongol saat hover) + sorotan sheen yang lewat pelan otomatis, supaya
   tombol ini juga kelihatan "3D" di kondisi diam, bukan cuma saat disentuh.

   z-index SENGAJA lebih RENDAH dari `.chk-card` (2) -- tombol ini punya
   `position: relative` sendiri (untuk sheen ::after), jadi dia bikin
   stacking context baru. Karena letaknya di DOM SETELAH kedua kartu, tanpa
   z-index eksplisit dia akan tetap menang tumpang-tindih (elemen positioned
   belakangan menang kalau level stacking-nya sama) dan MENUTUPI popup
   dropdown Tingkatan/Kelas yang lagi terbuka (yang meluber ke luar kartu,
   turun sampai ke area tombol ini). Dikasih z-index 1 di sini supaya kartu
   (z-index 2, termasuk popup dropdown di dalamnya) selalu menang di atas. */
.chk-btn-submit {
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 14px 28px -10px rgba(124, 78, 224, 0.5);
    transition: transform 0.2s var(--chk-ease), box-shadow 0.2s var(--chk-ease);
}

.chk-btn-submit:hover:not(:disabled) {
    transform: perspective(600px) rotateX(4deg) translateY(-2px);
    box-shadow: 0 18px 34px -10px rgba(124, 78, 224, 0.6);
}

.chk-btn-submit:active:not(:disabled) {
    transform: perspective(600px) rotateX(0deg) translateY(0);
}

.chk-btn-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 66%);
    transform: translateX(-120%);
    animation: chk-btn-sheen 3.5s ease-in-out infinite;
}

@keyframes chk-btn-sheen {
    0%, 40% { transform: translateX(-120%); }
    60%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .chk-card,
    .chk-card input,
    .chk-card .cstm-select-item > button,
    .chk-btn-submit {
        transition: none;
        transform: none !important;
    }
    .chk-btn-submit::after {
        animation: none;
        display: none;
    }
}