/*
 * 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; }

/* ── Laporkan Kendala Modal (customer-facing) ─────────────────────────── */
.upl-lk-trigger-wrap { margin-top: 14px; }
.upl-lk-already-sent {
    display: flex; align-items: center; gap: 8px;
    background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 8px;
    padding: 10px 14px; font-size: 13px; color: #15803D;
}
.btn-lapor-kendala-trx {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 1px solid #dc3545; color: #dc3545;
    border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background .12s, color .12s; width: 100%;
    justify-content: center;
}
.btn-lapor-kendala-trx:hover { background: #dc3545; color: #fff; }
.upl-lk-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    padding: 16px;
    box-sizing: border-box;
}
.upl-lk-modal {
    background: #fff; border-radius: 12px;
    width: 100%; max-width: 640px;
    max-height: calc(100vh - 32px); overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.upl-lk-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "nama    contact"
        "jenis   proof"
        "desc    desc";
    gap: 0 16px;
}
.upl-lk-ga-nama    { grid-area: nama; }
.upl-lk-ga-contact { grid-area: contact; }
.upl-lk-ga-jenis   { grid-area: jenis; }
.upl-lk-ga-desc    { grid-area: desc; }
.upl-lk-ga-proof   { grid-area: proof; }
.upl-lk-field--stretch { display: flex; flex-direction: column; }
.upl-lk-field--stretch textarea { flex: 1; resize: vertical; min-height: 90px; }
@media (max-width: 540px) {
    .upl-lk-overlay { align-items: center; padding: 12px; }
    .upl-lk-modal { max-width: 100%; margin: 0; border-radius: 12px; max-height: 88vh; }
    .upl-lk-form-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "nama"
            "contact"
            "jenis"
            "desc"
            "proof";
    }
    .upl-lk-field--stretch textarea { min-height: 72px; }
}
.upl-lk-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #E3E8EF;
    position: sticky; top: 0; background: #fff; z-index: 1;
}
.upl-lk-header h5 { margin: 0; font-size: 16px; font-weight: 600; color: #202939; }
.upl-lk-close { background: none; border: none; font-size: 22px; cursor: pointer; color: #697586; line-height: 1; }
.upl-lk-body { padding: 20px; }
.upl-lk-trx-info {
    background: #F8FAFC; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 16px;
    font-size: 13.5px; color: #697586;
}
.upl-lk-field { margin-bottom: 14px; }
.upl-lk-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; color: #374151; }
.upl-lk-field input,
.upl-lk-field select,
.upl-lk-field textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid #E3E8EF; border-radius: 8px;
    padding: 9px 12px; font-size: 14px; color: #202939;
    font-family: inherit;
}
.upl-lk-field input[type="file"] { padding: 6px 10px; }
.upl-lk-field input:focus,
.upl-lk-field select:focus,
.upl-lk-field textarea:focus { outline: none; border-color: #2563EB; }
.upl-lk-required { color: #e53e3e; margin-left: 2px; }
.upl-lk-optional { color: #9CA3AF; font-weight: 400; font-size: 11px; }
.upl-lk-error {
    background: #FFF5F5; color: #C53030;
    border-radius: 8px; padding: 10px 14px;
    font-size: 13px; margin-bottom: 14px; border: 1px solid #FED7D7;
}
.upl-lk-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.upl-lk-btn-cancel {
    padding: 9px 20px; border-radius: 8px;
    border: 1px solid #E3E8EF; background: #fff;
    font-size: 14px; cursor: pointer; color: #374151;
}
.upl-lk-btn-submit {
    padding: 9px 20px; border-radius: 8px;
    border: none; background: #2563EB; color: #fff;
    font-size: 14px; cursor: pointer; font-weight: 500;
}
.upl-lk-btn-submit:disabled { opacity: .6; cursor: not-allowed; }
.upl-lk-success { text-align: center; padding: 32px 20px; }
.upl-lk-success-icon {
    width: 54px; height: 54px; border-radius: 50%;
    background: #DCFCE7; color: #16A34A;
    font-size: 28px; line-height: 54px; margin: 0 auto 16px;
}
.upl-lk-note { font-size: 12px; color: #9CA3AF; }
.upl-lk-copy-icon {
    background: none; border: none; padding: 0 0 0 6px;
    color: #9CA3AF; cursor: pointer; font-size: 14px;
    vertical-align: middle; line-height: 1;
    transition: color .15s;
}
.upl-lk-copy-icon:hover { color: #2563EB; }
.upl-lk-success-actions {
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
    margin-top: 14px;
}
.upl-lk-proof-label-wrap {
    display: flex; align-items: center; gap: 4px; margin-bottom: 4px;
    flex-wrap: wrap; min-height: 24px;
}
.upl-lk-proof-label-wrap label { margin-bottom: 0; }
.upl-lk-info-wrap {
    display: inline-flex; align-items: center;
    flex-shrink: 0; margin-left: 4px; position: relative;
}
.upl-lk-info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    color: #6b7280; font-size: 14px;
    cursor: help; line-height: 1; user-select: none;
    transition: color .15s;
}
.upl-lk-info-icon:hover { color: #374151; }
.upl-lk-info-tooltip {
    display: none;
    position: fixed;
    width: 280px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    padding: 12px;
    z-index: 10010;
}
.upl-lk-info-tooltip.is-visible { display: block; }
.upl-lk-tooltip-arrow {
    position: absolute;
    top: -7px; right: 11px;
    width: 13px; height: 7px;
    overflow: hidden;
    transform: scaleY(-1);
}
.upl-lk-tooltip-arrow::before {
    content: '';
    display: block;
    width: 10px; height: 10px;
    background: #fff;
    border: 1px solid #E3E8EF;
    transform: rotate(45deg);
    margin: -6px auto 0;
    box-shadow: 2px 2px 4px rgba(0,0,0,.06);
}
.upl-lk-tooltip-img {
    width: 100%; border-radius: 6px; border: 1px solid #E3E8EF; display: block;
    cursor: zoom-in; transition: opacity .15s;
}
.upl-lk-tooltip-img:hover { opacity: .88; }
.upl-lk-tooltip-caption {
    margin: 7px 0 0; font-size: 11px; color: #697586; line-height: 1.5;
}
.upl-lk-tooltip-zoom-hint { margin: 4px 0 0; font-size: 10px; color: #94a3b8; }