/* =========================================================================
   mu-components.css — Batch 4 polish layer
   Micro-interactions, skeleton loaders, smooth theme transition, ripple.
   All animations gated behind prefers-reduced-motion.
   ========================================================================= */

/* ---------- Smooth theme transition ---------- */
html,
body,
.mu-topbar,
.mu-bottom-nav,
.mu-drawer,
.mu-drawer-content,
.mu-surface,
.mu-card,
.auth-card,
.auth-input,
.auth-cta,
.rw-card,
.ph-section,
.ph-pkg,
.bp-card,
.hi-section,
.hi-table,
.pl-card,
.ph-carrier,
.ph-live-card,
.otp-order-card-inner,
.hx-card,
.modal-content{
    transition:
        background-color .22s ease,
        color .22s ease,
        border-color .22s ease;
}
@media (prefers-reduced-motion: reduce){
    html,
    body,
    .mu-topbar,
    .mu-bottom-nav,
    .mu-drawer,
    .mu-drawer-content,
    .mu-surface,
    .mu-card,
    .auth-card,
    .auth-input,
    .auth-cta,
    .rw-card,
    .ph-section,
    .ph-pkg,
    .bp-card,
    .hi-section,
    .hi-table,
    .pl-card,
    .ph-carrier,
    .ph-live-card,
    .otp-order-card-inner,
    .hx-card,
    .modal-content{
        transition: none !important;
    }
}

/* ---------- Pressable — scale-on-tap feedback ---------- */
.mu-pressable{
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease;
    will-change: transform;
}
.mu-pressable:active{ transform: scale(.97); }

@media (prefers-reduced-motion: reduce){
    .mu-pressable:active{ transform: none; }
}

/* ---------- Tap ripple — pure CSS overlay ---------- */
.mu-ripple{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}
.mu-ripple::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mu-ripple-x, 50%) var(--mu-ripple-y, 50%),
        color-mix(in srgb, var(--main, #4f46e5) 25%, transparent) 0%,
        transparent 55%);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .35s ease, transform .45s ease;
    pointer-events: none;
    z-index: 0;
}
.mu-ripple:active::after{
    opacity: 1;
    transform: scale(1);
    transition: opacity .05s ease, transform .05s ease;
}
.mu-ripple > *{ position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce){
    .mu-ripple::after{ display: none; }
}

/* Auto-apply ripple to common interactive elements (opt-out via .no-ripple) */
.btn:not(.no-ripple),
.mu-tab:not(.no-ripple),
.auth-cta:not(.no-ripple),
.bp-cta:not(.no-ripple),
#random.btn:not(.no-ripple){
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.btn:not(.no-ripple)::after,
.mu-tab:not(.no-ripple)::after,
.bp-cta:not(.no-ripple)::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mu-ripple-x, 50%) var(--mu-ripple-y, 50%),
        color-mix(in srgb, currentColor 22%, transparent) 0%,
        transparent 55%);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .35s ease, transform .45s ease;
    pointer-events: none;
}
.btn:not(.no-ripple):active::after,
.mu-tab:not(.no-ripple):active::after,
.bp-cta:not(.no-ripple):active::after{
    opacity: .8;
    transform: scale(1);
    transition: opacity .05s ease, transform .05s ease;
}

@media (prefers-reduced-motion: reduce){
    .btn:not(.no-ripple)::after,
    .mu-tab:not(.no-ripple)::after,
    .bp-cta:not(.no-ripple)::after{ display: none; }
}

/* ---------- Skeleton loaders ---------- */
@keyframes muShimmer{
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skel-line,
.skel-card,
.skel-circle{
    display: block;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--mu-border, #e6e8ec) 40%, transparent) 0%,
        color-mix(in srgb, var(--mu-border, #e6e8ec) 80%, transparent) 50%,
        color-mix(in srgb, var(--mu-border, #e6e8ec) 40%, transparent) 100%
    );
    background-size: 200% 100%;
    animation: muShimmer 1.5s infinite linear;
    border-radius: 8px;
}
:root[data-theme="dark"] .skel-line,
:root[data-theme="dark"] .skel-card,
:root[data-theme="dark"] .skel-circle{
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--mu-surface-3, #1a2234) 40%, transparent) 0%,
        color-mix(in srgb, var(--mu-surface-3, #1a2234) 80%, transparent) 50%,
        color-mix(in srgb, var(--mu-surface-3, #1a2234) 40%, transparent) 100%
    );
    background-size: 200% 100%;
}
.skel-line{
    height: 12px;
    width: 100%;
    border-radius: 6px;
    margin-bottom: 8px;
}
.skel-line.is-short{ width: 40%; }
.skel-line.is-medium{ width: 68%; }
.skel-line.is-tall{ height: 18px; }
.skel-card{
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    margin-bottom: 12px;
}
.skel-card.is-square{ aspect-ratio: 1 / 1; }
.skel-circle{
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.skel-group{
    padding: 14px;
    border-radius: 14px;
    background: var(--mu-surface, #fff);
    border: 1px solid var(--mu-border, #e6e8ec);
}
:root[data-theme="dark"] .skel-group{
    background: var(--mu-surface, #111827);
    border-color: var(--mu-border, #1f2a3a);
}

@media (prefers-reduced-motion: reduce){
    .skel-line,
    .skel-card,
    .skel-circle{ animation: none; }
}

/* ---------- Mobile bottom-sheet drag handle (on top of modal-sheet.css) ---------- */
@media (max-width: 767.98px){
    .modal .modal-content.is-dragging{
        transition: none !important;
    }
    .modal .modal-dialog.is-dragging{
        transition: none !important;
    }
}

/* ---------- Toast helper container (used by window.muToast) ---------- */
.mu-toast{
    font-family: 'IBM Plex Sans Thai','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px -18px rgba(15,23,42,.35) !important;
    padding: 12px 16px !important;
    min-width: 240px !important;
}
.mu-toast .swal2-title{
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--mu-text, #0f172a) !important;
}
.mu-toast .swal2-html-container{
    font-size: 12.5px !important;
    color: var(--mu-text-muted, #64748b) !important;
    margin-top: 2px !important;
    padding: 0 !important;
}
:root[data-theme="dark"] .mu-toast{
    background: var(--mu-surface, #111827) !important;
}
:root[data-theme="dark"] .mu-toast .swal2-title{
    color: var(--mu-text, #f1f5f9) !important;
}
:root[data-theme="dark"] .mu-toast .swal2-html-container{
    color: var(--mu-text-muted, #94a3b8) !important;
}