/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 23, 2020, 9:48:06 PM
    Author     : Adity
*/

.select2 {
    width: 100% !important;
    line-height: 0px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 17px !important;
}

.select2-container .select2-selection--single {
    height: calc(1.5em + 1.3rem + 2px) !important;
    
}

.btn-phi {
  color: #ffffff;
  background-color: #e7717d !important;
}

.bg-input-disable {
    background-color: #EDF6FD !important;
}

.color-tps-primary {
    color: #044890 !important;
}

.color-tps-primary-dark {
    color: #0f3f6f !important;
}

.color-tps-primary-soft {
    color: #00b1c5 !important;
}

.color-tps-primary-dark2 {
    color: #f3721f !important;
}

.bg-tps-primary {
    background-color: #044890 !important;
}

.bg-tps-primary-dark {
    background-color: #0f3f6f !important;
}

.bg-tps-primary-soft {
    background-color: #00b1c5 !important;
}

.bg-tps-primary-dark2 {
    background-color: #f3721f !important;
}

/* ============================================================
   PREMIUM LOADER v2
   - Glassmorphism backdrop dengan radial gradient + blur kuat
   - Card glassmorphism dengan animated glow border (gradient bergerak)
   - Scene SVG alur tagihan: Proforma -> Bayar -> Lunas
   - Text "Memuat" + 3 animated dots fade berurutan
   - Smooth entry animation (scale + translate + bounce)
   ============================================================ */

/* Container ============================================== */
.kt-loader {
    position: fixed;
    inset: 0;
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.kt-loader.show {
    opacity: 1;
    pointer-events: auto;
}

/* Backdrop ============================================== */
.kt-loader__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center,
            rgba(78, 126, 62, 0.18) 0%,
            rgba(15, 23, 42, 0.55) 60%),
        rgba(15, 23, 42, 0.50);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}

/* Card =================================================== */
.kt-loader__card {
    position: relative;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(252, 253, 250, 0.94) 100%);
    border-radius: 24px;
    padding: 38px 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    min-width: 240px;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.32),
        0 0 60px rgba(78, 126, 62, 0.20),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset,
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
    transform: translateY(14px) scale(0.92);
    opacity: 0;
    transition:
        transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 280ms ease;
}
.kt-loader.show .kt-loader__card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Animated glow border around card */
.kt-loader__card::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 26px;
    background: linear-gradient(135deg,
        #0f8b90, #6fb056, #a3d18a, #6fb056, #0f8b90, #0a6d73);
    background-size: 300% 300%;
    z-index: -1;
    opacity: 0.55;
    filter: blur(16px);
    animation: kt-loader-glow 3.5s ease-in-out infinite;
}

/* Scene: alur tagihan Proforma -> Bayar -> Lunas ========= */
/* Satu siklus 4s: proforma tercetak baris demi baris, tombol Bayar
 * di HP ditekan, koin Rp terbang ke dokumen, judul berganti NOTA,
 * stempel LUNAS, lalu reset. Gaya dasar (tanpa animasi) = keadaan
 * akhir, supaya mode reduced-motion menampilkan nota lunas lengkap.
 * Semua posisi dalam satuan user SVG (viewBox 0 0 240 132). */
.kt-loader__scene {
    width: 264px;
    height: 145px;
    display: block;
    overflow: hidden;
}
.kt-loader__scene * {
    transform-box: fill-box;
    transform-origin: center;
}
.kt-bill__doc     { animation: kt-bill-doc 4s ease-in-out infinite; }
.kt-bill__row--1  { animation: kt-bill-row1 4s linear infinite; }
.kt-bill__row--2  { animation: kt-bill-row2 4s linear infinite; }
.kt-bill__row--3  { animation: kt-bill-row3 4s linear infinite; }
.kt-bill__total   { animation: kt-bill-total 4s linear infinite; }
.kt-bill__lbl-pro {
    opacity: 0;
    animation: kt-bill-lbl-pro 4s linear infinite;
}
.kt-bill__lbl-nota { animation: kt-bill-lbl-nota 4s linear infinite; }
.kt-bill__stamp {
    animation: kt-bill-stamp 4s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}
.kt-bill__btn  { animation: kt-bill-btn 4s ease-in-out infinite; }
.kt-bill__paid { animation: kt-bill-paid 4s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
.kt-bill__coin {
    opacity: 0;
    animation: kt-bill-coin 4s ease-in-out infinite;
}
.kt-bill__coin--2 { animation-delay: 0.12s; }
.kt-bill__coin--3 { animation-delay: 0.24s; }
.kt-bill__progress {
    transform-origin: left center;
    animation: kt-bill-progress 4s ease-in-out infinite;
}
.kt-bill__step--2 { animation: kt-bill-step2 4s linear infinite; }
.kt-bill__step--3 { animation: kt-bill-step3 4s linear infinite; }

/* Text =================================================== */
.kt-loader__text {
    color: #1e2129;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.6px;
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.kt-loader__text-main {
    background: linear-gradient(90deg, #1e2129 0%, #0f8b90 50%, #1e2129 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: kt-loader-shimmer-text 2.2s linear infinite;
}
.kt-loader__dots {
    display: inline-flex;
    margin-left: 2px;
    width: 18px;
    line-height: 1;
}
.kt-loader__dots span {
    color: #0f8b90;
    opacity: 0;
    font-weight: 700;
    animation: kt-loader-dot-fade 1.4s ease-in-out infinite;
}
.kt-loader__dots span:nth-child(1) { animation-delay: 0s; }
.kt-loader__dots span:nth-child(2) { animation-delay: 0.2s; }
.kt-loader__dots span:nth-child(3) { animation-delay: 0.4s; }

/* Top progress bar ====================================== */
.kt-loader__topbar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg,
        #0f8b90 0%, #6fb056 25%, #a3d18a 50%, #6fb056 75%, #0f8b90 100%);
    background-size: 200% 100%;
    z-index: 10600;
    box-shadow:
        0 0 14px rgba(78, 126, 62, 0.7),
        0 1px 4px rgba(78, 126, 62, 0.4);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: width 400ms ease, opacity 220ms ease;
    animation: kt-loader-topbar-shimmer 1.6s linear infinite;
}
.kt-loader__topbar.show { opacity: 1; }

/* Keyframes ============================================== */
/* Dokumen masuk di awal, keluar di akhir (menutupi reset baris) */
@keyframes kt-bill-doc {
    0%       { opacity: 0; transform: translateY(6px); }
    6%, 92%  { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(-4px); }
}
@keyframes kt-bill-row1 {
    0%, 11.9% { opacity: 0; }
    13%, 100% { opacity: 1; }
}
@keyframes kt-bill-row2 {
    0%, 19.9% { opacity: 0; }
    21%, 100% { opacity: 1; }
}
@keyframes kt-bill-row3 {
    0%, 27.9% { opacity: 0; }
    29%, 100% { opacity: 1; }
}
@keyframes kt-bill-total {
    0%, 35.9% { opacity: 0; }
    37%, 100% { opacity: 1; }
}
@keyframes kt-bill-lbl-pro {
    0%, 61.9% { opacity: 1; }
    63%, 100% { opacity: 0; }
}
@keyframes kt-bill-lbl-nota {
    0%, 61.9% { opacity: 0; }
    63%, 100% { opacity: 1; }
}
@keyframes kt-bill-stamp {
    0%, 65.9% { opacity: 0; transform: scale(1.8); }
    68%       { opacity: 0.95; transform: scale(0.94); }
    70%, 100% { opacity: 0.95; transform: scale(1); }
}
@keyframes kt-bill-btn {
    0%, 40%   { transform: scale(1); }
    43%       { transform: scale(0.9); }
    46%, 100% { transform: scale(1); }
}
@keyframes kt-bill-paid {
    0%, 57.9% { opacity: 0; transform: scale(0.4); }
    61%       { opacity: 1; transform: scale(1.1); }
    63%, 92%  { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(1); }
}
/* Koin: dari tombol Bayar melengkung ke TOTAL di dokumen */
@keyframes kt-bill-coin {
    0%, 43.9% { opacity: 0; transform: translate(0, 0) scale(0.6); }
    45%       { opacity: 1; transform: translate(0, 0) scale(1); }
    53%       { opacity: 1; transform: translate(-48px, -32px) scale(1); }
    61%       { opacity: 1; transform: translate(-96px, 6px) scale(0.8); }
    63%, 100% { opacity: 0; transform: translate(-96px, 6px) scale(0.8); }
}
@keyframes kt-bill-progress {
    0%, 41%   { transform: scaleX(0); }
    46%, 61%  { transform: scaleX(0.5); }
    66%, 96%  { transform: scaleX(1); }
    100%      { transform: scaleX(0); }
}
@keyframes kt-bill-step2 {
    0%, 43.9% { fill: #b8c6cb; }
    45%, 96%  { fill: #0f8b90; }
    100%      { fill: #b8c6cb; }
}
@keyframes kt-bill-step3 {
    0%, 65.9% { fill: #b8c6cb; }
    67%, 96%  { fill: #0f8b90; }
    100%      { fill: #b8c6cb; }
}
@keyframes kt-loader-glow {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.45;
    }
    50% {
        background-position: 100% 50%;
        opacity: 0.7;
    }
}
@keyframes kt-loader-shimmer-text {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes kt-loader-dot-fade {
    0%, 80%, 100% { opacity: 0; transform: translateY(0); }
    40%           { opacity: 1; transform: translateY(-2px); }
}
@keyframes kt-loader-topbar-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Reduced motion fallback (a11y) */
@media (prefers-reduced-motion: reduce) {
    .kt-loader,
    .kt-loader__card,
    .kt-loader__card::before,
    .kt-loader__scene *,
    .kt-loader__text-main,
    .kt-loader__dots span,
    .kt-loader__topbar {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.1s !important;
    }
}

/* Block accidental horizontal scroll at the document level, NOT at body.
 * Setting overflow-x on body forces overflow-y to computed `auto`
 * (per CSS spec) — that turns body into a scroll container and breaks
 * the sticky footer / page-level scroll behavior on tall pages such as
 * JODIMPP (Perpanjangan Delivery). Applying it to <html> only leaves
 * body untouched while still preventing rogue horizontal scrollbars from
 * a single overflowing child element. */
html { overflow-x: clip; }
@supports not (overflow: clip) {
    html { overflow-x: hidden; }
}

/* Mobile responsive: shrink card so it fits narrow viewports and stays
 * centered. Without this, `min-width: 240px` + 48px side padding pushes
 * the card to ~336px effective width, which overflows on phones < 340px
 * or when a horizontal scrollbar is present elsewhere on the page. */
@media (max-width: 480px) {
    .kt-loader__card {
        min-width: 0;
        width: auto;
        max-width: calc(100vw - 32px);
        padding: 24px 28px 22px;
        gap: 16px;
        border-radius: 18px;
    }
    .kt-loader__scene {
        width: 220px;
        height: 121px;
    }
    .kt-loader__text {
        font-size: 14px;
    }
}