/*
 * theme_global.css
 * ─────────────────────────────────────────────────────────
 * CSS global yang dipakai lintas theme.
 * Sertakan file ini di setiap header theme, SEBELUM file
 * CSS theme-spesifik (misal theme_v1.css, theme_v8.css).
 *
 * Jangan tambahkan CSS yang hanya berlaku untuk satu theme.
 * Gunakan prefix .upl- untuk komponen shared baru.
 * ─────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════
   BURGER FLIP ANIMATION
   Digunakan oleh semua theme via box_mobile_drawer.php
   Trigger class: .tmvN-menu-trigger (per-theme)
═══════════════════════════════════════════════════════ */

.burger-flip-container {
    width: 22px;
    height: 22px;
    perspective: 600px;
}

.burger-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.burger-flip-front,
.burger-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.burger-flip-front {
    z-index: 2;
}

.burger-flip-back {
    transform: rotateY(180deg);
}

.burger-flip-front i,
.burger-flip-back i {
    font-size: 24px;
    color: #ffffff;
}


/* ═══════════════════════════════════════════════════════
   MOBILE DRAWER — SHARED
   Struktur HTML disediakan oleh box_mobile_drawer.php.
   CSS spesifik panel per-theme (.menu-pop-theme-vN)
   tetap di file CSS theme masing-masing.
═══════════════════════════════════════════════════════ */

.menu-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.menu-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Drawer header row (logo + close button) */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    height: 70px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 8px;
}

.drawer-logo {
    height: 28px;
}

.drawer-close-btn {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.drawer-close-btn:hover {
    opacity: 0.7;
}

/* Body scroll lock when drawer is open */
body.drawer-body-lock {
    overflow: hidden;
}

/* Homepage popup scroll lock shared across themes. */
html.upl-popup-scroll-lock,
body.upl-popup-scroll-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.upl-popup-scroll-lock {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100%;
    touch-action: none;
}

/* Desktop: sembunyikan elemen drawer-only */
@media (min-width: 769px) {
    .drawer-close-btn {
        display: none !important;
    }

    .menu-drawer-overlay {
        display: none !important;
    }

    .drawer-header {
        display: none !important;
    }
}

/* Mobile: tampilkan tombol close */
@media (max-width: 768px) {
    .drawer-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════
   LOGO ANIMATIONS
   Utility classes, pakai langsung di tag <img> logo.
   @keyframes di-share lintas semua theme.
═══════════════════════════════════════════════════════ */

@keyframes logo-anim-fade       { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes logo-anim-float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes logo-anim-pulse      { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
@keyframes logo-anim-glow       { 0%,100%{filter:drop-shadow(0 0 0px transparent)} 50%{filter:drop-shadow(0 0 10px #4a90e2)} }
@keyframes logo-anim-shine      { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.6) drop-shadow(0 0 6px rgba(255,220,80,.9))} }
@keyframes logo-anim-tilt       { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(-6deg)} 75%{transform:rotate(6deg)} }
@keyframes logo-anim-whiteflash { 0%,100%{filter:brightness(1)} 50%{filter:brightness(3)} }

.logo-anim-fade       { animation: logo-anim-whiteflash  2s ease-in-out infinite; }
.logo-anim-float      { animation: logo-anim-float       2s ease-in-out infinite; }
.logo-anim-pulse      { animation: logo-anim-pulse       2s ease-in-out infinite; }
.logo-anim-glow       { animation: logo-anim-glow        2s ease-in-out infinite; }
.logo-anim-shine      { animation: logo-anim-shine       2s ease-in-out infinite; }
.logo-anim-tilt       { animation: logo-anim-tilt        2s ease-in-out infinite; }
.logo-anim-whiteflash { animation: logo-anim-whiteflash  2s linear infinite; }


/* ═══════════════════════════════════════════════════════
   UTILITY CLASSES — shared lintas semua theme
   Jangan copy ke file CSS theme masing-masing.
═══════════════════════════════════════════════════════ */

.fw-semibold { font-weight: 600 !important; }
.fs-6        { font-size: 16px !important; }
.fs-7        { font-size: 0.75rem !important; }

/* Responsive visibility */
.desktop-only { display: block; }
.mobile-only,
.tablet-only  { display: none; }

@media (max-width: 768px) {
    .desktop-only,
    .tablet-only  { display: none; }
    .mobile-only  { display: block; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .desktop-only,
    .mobile-only  { display: none; }
    .tablet-only  { display: block; }
}

/* Badge status */
.badge-self {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    border-radius: 6px;
    width: max-content;
}
.badge-self.as-canceled  { color: #F00;    background: #FFC7C7; }
.badge-self.as-completed { color: #03AC0E; background: #D5FFDD; }
.badge-self.as-pending   { color: #AB8103; background: #FFF4D5; }