/* =========================================
   CHIKII STORE - ULTIMATE STYLE (FINAL FIXED)
   - ခိုးဖို့ မကြိုးစားပါနဲ့  
   ========================================= */

/* --- 1. VARIABLES --- */
:root {
    --bg-color: #000000;
    --card-bg: #111111;
    --text-color: #ffffff;
    --accent-color: #00d4ff;
    --nav-height: 70px;
    --success-color: #00ff88;
    --warning-color: #ffcc00;
    --danger-color: #ff4444;
}

[data-theme="blue"] {
    --bg-color: #02050a;
    --card-bg: rgba(20, 30, 50, 0.8);
    --text-color: #e0f2fe;
}

body {
    margin: 0; padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at top, #1e3a8a 0%, #000000 70%);
    background-attachment: fixed;
    color: var(--text-color);
    padding-bottom: calc(var(--nav-height) + 20px);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.5s ease;
}

/* --- MODERN GLASS HEADER --- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    position: sticky;
    top: 0;
    z-index: 1000;
    
    /* Glass Effect */
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

/* Logo အပိုင်း */
.brand-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon {
    font-size: 24px;
    color: #00d4ff;
    filter: drop-shadow(0 0 5px #00d4ff);
    animation: floatIcon 3s ease-in-out infinite;
}

.brand-title {
    font-weight: 900;
    font-size: 18px;
    color: #fff;
    letter-spacing: 1px;
    font-style: italic; /* စာလုံးစောင်း */
}

/* Color ခလုတ် ဒီဇိုင်း */
.theme-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* အဝိုင်းပုံ */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
}

.theme-btn:active {
    transform: scale(0.9);
}

.back-btn {
    background: transparent; /* ပုံမှန်အချိန်မှာ နောက်ခံမရှိ */
    border: none;
    color: var(--text-color); /* စာလုံးအရောင် (အဖြူ) */
    width: 40px;
    height: 40px;
    border-radius: 50%; /* အဝိုင်းပုံ */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px; /* Icon အရွယ်အစား */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Mouse တင်လိုက်ရင် ဖြစ်မယ့် ပုံစံ */
.back-btn:hover {
    background: rgba(255, 255, 255, 0.1); /* မှန်သားကြည် နောက်ခံ */
    backdrop-filter: blur(5px);
    color: var(--accent-color); /* Icon ကို အပြာရောင် ပြောင်းမယ် */
    transform: translateX(-3px); /* ဘယ်ဘက်ကို နည်းနည်းရွေ့သွားမယ် */
}

/* Animation for Icon */
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}


.theme-btn { background: #222; color: #fff; border: 1px solid #333; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; }



.news-ticker { background: #111; color: var(--warning-color); padding: 5px 0; font-size: 12px; overflow: hidden; white-space: nowrap; }
.ticker-text { display: inline-block; animation: scroll 15s linear infinite; padding-left: 100%; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* --- 3. BANNER --- */
.banner-container { padding: 15px; }
.slider-wrapper { border-radius: 16px; overflow: hidden; border: 1px solid #333; aspect-ratio: 16/7; position: relative; }
.slide { width: 100%; height: 100%; object-fit: cover; display: none; }
.slide.active { display: block; }

/* --- 4. PRODUCT GRID (IMAGE FIX HERE) --- */
.section-title { text-align: center; font-weight: 900; margin: 10px 0; font-size: 16px; color: #fff; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 15px; }
@media (max-width: 360px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }



.card {
    background: var(--card-bg);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    
    /* Animation Setup */
    opacity: 0;
    transform: translateY(0);
    transition: all 0.3s ease; 
    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* PC Hover Effect */
.card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.3);
    border-color: #00d4ff;
    z-index: 10;
}

/* Phone Touch Effect */
.card:active {
    transform: scale(0.95);
    border-color: #00d4ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
}

/* Image Styles */
.card-img { 
    width: 100%; 
    aspect-ratio: 1/1; 
    object-fit: contain; 
    margin-bottom: 8px;
    background-color: #ffffff; /* White Background */
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    transition: transform 0.5s ease;
}

.card:hover .card-img {
    transform: scale(1.1); /* Zoom Effect */
}


.card-name { font-size: 12px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.card-badge { position: absolute; top: 5px; right: 5px; background: var(--danger-color); color: white; font-size: 9px; padding: 2px 6px; border-radius: 8px; font-weight: bold; }
.stars { color: var(--warning-color); font-size: 10px; display: block; margin-bottom: 8px; }
.buy-btn { width: 100%; background: transparent; border: 1px solid var(--accent-color); color: var(--accent-color); padding: 6px; border-radius: 8px; font-size: 12px; font-weight: bold; cursor: pointer; }

/* Animation Keyframes */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(50px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.page { 
    display: none; 
    opacity: 0; 
}

.page.active { 
    display: block; 
    animation: fadeInQuick 0.2s ease-in forwards; 
}

@keyframes fadeInQuick { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}
/* --- 6. PRODUCT DETAILS PAGE (FULL SCREEN + IOS GLASS FOOTER) --- */


#page-product-details { 
    z-index: 200; 
    background: transparent;
    min-height: 100vh; 
    padding-bottom: 0;
}

/* Hero Section  */
#pd-hero { 
    height: 320px; 
    background: transparent; 
    display: flex; align-items: center; justify-content: center; 
    padding-top: 0; 
}


/* 1. စက်ဝိုင်းဘောင် ဒီဇိုင်း */
.pd-image-circle {
    width: 120px;  /* စက်ဝိုင်း အကျယ် */
    height: 120px; /* စက်ဝိုင်း အမြင့် (အကျယ်နဲ့တူမှ စက်ဝိုင်းဖြစ်မည်) */
    border-radius: 50%; /* စက်ဝိုင်းပုံစံဖြစ်စေရန် */
    
    overflow: hidden;
    
    /* Neon Glass Effect ဒီဇိုင်း */
    background: rgba(0, 0, 0, 0.3); /* နောက်ခံ အမည်းဖျော့ဖျော့ */
    border: 3px solid var(--neon-cyan); /* နီယွန်အရောင် ဘောင် */
    box-shadow: 
        0 0 25px rgba(0, 229, 255, 0.4), /* အပြင်ဘက် အလင်းရောင် */
        inset 0 0 15px rgba(0, 229, 255, 0.2); /* အတွင်းဘက် အလင်းရောင် */
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}


#pd-image {
    width: 100%;
    height: 100%;
    /* ပုံကို ဆွဲဆန့်ခြင်းမရှိဘဲ စက်ဝိုင်းအပြည့် ဖြည့်ရန် */
    object-fit: cover;     
    filter: none !important; 
}



#pd-hero {
    height: 280px;
}

/* Logo Animation (လေထဲဝဲနေမည့် Effect) */
@keyframes floatLogo {
    0%, 100% { transform: translateY(0px); filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.3)); }
    50% { transform: translateY(-15px); filter: drop-shadow(0 0 25px rgba(0, 212, 255, 0.6)); }
}

#pd-img { 
    width: 150px; height: 150px; 
    object-fit: contain; 
    animation: floatLogo 3s ease-in-out infinite; 
    z-index: 5;
}

/* --- PRODUCT DETAILS (NEW BOX STYLE) --- */

/* Wrapper Container (နေရာချရုံသက်သက်) */
.details-container {
    padding: 0 15px; /* ဘေးဘောင်ချန် */
    transform: translateY(-40px); /* ပုံပေါ် နည်းနည်းတင်မယ် */
    z-index: 10;
    position: relative;
    padding-bottom: 120px; /* Footer နဲ့မလွတ်အောင် */
}

/* 🔥 The New "Square Box" (မီးခိုးရောင် လေးထောင့်ကွက်) */
.selection-card {
    background: #111111; /* မီးခိုးရောင် ရင့်ရင့် */
    border: 1px solid #333; /* ဘောင်ပါးပါးလေး */
    border-radius: 25px; /* ထောင့်ဝိုင်း */
    padding: 25px 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); /* အရိပ်ထည့် */
    backdrop-filter: blur(10px); /* နောက်ခံဝါး */
}

/* Region Scroller */
.region-scroller { 
    display: flex; 
    gap: 10px; 
    overflow-x: auto; 
    padding-bottom: 5px; 
    scrollbar-width: none; 
}

/* Region Chip (Buttons inside the box) */
.region-chip { 
    padding: 8px 16px; 
    background: #222; /* Box ထဲက ခလုတ်အရောင် */
    border: 1px solid #444; 
    border-radius: 10px; 
    color: #aaa; 
    font-size: 13px; 
    white-space: nowrap; 
    cursor: pointer; 
    transition: 0.3s; 
}

.region-chip.active { 
    background: var(--accent-color); 
    color: black; 
    border-color: var(--accent-color); 
    font-weight: bold;
}

/* Amount Grid */
.amount-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
}

/* Amount Buttons */
.amount-btn { 
    background: #222; 
    border: 1px solid #444; 
    border-radius: 12px; 
    padding: 15px 5px; 
    text-align: center; 
    cursor: pointer; 
    transition: 0.3s;
}

.amount-btn:hover { 
    background: #333; 
}

.amount-btn.active { 
    background: rgba(0, 212, 255, 0.15); /* အပြာနုရောင် */
    border: 1px solid var(--accent-color); 
    color: white; 
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}


/* Active Button Effect */
.amount-btn.active { 
    background: var(--accent-color); color: black; 
    border-color: var(--accent-color); 
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
    transform: scale(1.05); font-weight: 800;
}

/* --- IOS GLASS FOOTER (Floating Style) --- */
.pd-footer { 
    position: fixed; 
    bottom: 25px; /* အောက်ခြေကနေ ၂၅ pixels မ တင်လိုက်ပါ */
    left: 20px; 
    right: 20px; /* ဘေးဘက်တွေကို နေရာချန်မယ် */
    width: auto; /* Auto ထားမှ ဘေးကွာတာ အလုပ်လုပ်မယ် */
    
    /* 🔥 Glass Effect (အကြည်) */
    background: rgba(20, 20, 20, 0.65); 
    backdrop-filter: blur(20px); /* ရေခဲရိုက်အကြည် */
    -webkit-backdrop-filter: blur(20px); /* iOS Safari အတွက် */
    
    border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 25px; /* ထောင့်ဝိုင်းမယ် (Pill Shape) */
    padding: 15px 25px; 
    
    display: flex; justify-content: space-between; align-items: center; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.6); /* အရိပ်ကြီးကြီးချမယ် */
    z-index: 500; 
}


/* --- 7. PAYMENT PAGE --- */

#page-payment {
    z-index: 210;
    background: transparent; /* အကြည်ပြောင်းလိုက်ပါ */
    min-height: 100vh;
    backdrop-filter: blur(10px);
}

.payment-card { background: #1a1a1a; border: 1px solid #333; padding: 15px; border-radius: 12px; display: flex; align-items: center; margin-bottom: 10px; }

.payment-card { background: #1a1a1a; border: 1px solid #333; padding: 15px; border-radius: 12px; display: flex; align-items: center; margin-bottom: 10px; }
.copy-btn { background: #333; color: white; border: none; padding: 5px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; }
.upload-box { width: 100%; height: 150px; border: 2px dashed #333; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #111; cursor: pointer; margin-top: 10px; overflow: hidden; }

/* --- 8. REVIEWS & MISC --- */
.review-slider { display: flex; overflow-x: auto; gap: 15px; padding: 10px 15px; scrollbar-width: none; }
/* style.css ထဲက .review-card ကို ဒါနဲ့ အစားထိုးပါ */
.review-card {
    min-width: 260px; /* Card အကျယ်ကို နည်းနည်းတိုးလိုက်တယ် */
    background: rgba(255, 255, 255, 0.03); /* မှန်သားကြည်ဒီဇိုင်း */
    padding: 20px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
}

/* Review ထဲက စာသား (Comment) ကို သေးရန် */
.review-text {
    color: #ddd;
    font-size: 13px; /* စာလုံးအရွယ်အစားကို ၁၃ ပေးထားပါတယ် */
    line-height: 1.6;
    margin: 12px 0;
    font-style: italic; /* စာသားကို စောင်းပေးထားတယ် (ကြည့်ကောင်းအောင်) */
}

/* ကြယ်အရောင်နဲ့ အရွယ်အစား */
.stars {
    color: #ffcc00;
    font-size: 12px;
    margin-bottom: 5px;
}

/* User နာမည်ပိုင်း ဒီဇိုင်း */
.reviewer {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-size: 11px; /* နာမည်ကို ပိုသေးလိုက်တယ် */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px;
}

.user-icon {
    font-size: 14px;
    color: #00d4ff;
}

.category-btn { background: #1a1a1a; color: white; border: 1px solid #333; padding: 20px; border-radius: 15px; font-size: 16px; font-weight: bold; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* --- 9. MODALS --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 3000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-content { background: #111; width: 85%; max-width: 400px; border-radius: 20px; border: 1px solid #333; padding: 20px; max-height: 80vh; overflow-y: auto; animation: zoomIn 0.2s ease; }
@keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.close-btn { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }

/* --- 10. AUTH & TOAST --- */
.auth-input { width: 100%; padding: 15px; margin: 8px 0; background: #222; border: 1px solid #333; color: white; border-radius: 12px; font-size: 16px; box-sizing: border-box; outline: none; }
.auth-btn {
    /* Gradient ကို ၄၅ ဒီဂရီ စောင်းလိုက်ရင် ပိုလှပါတယ် */
    background: linear-gradient(45deg, #0072ff, #00d4ff);
    border: none;
    color: white;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px; /* လုံးဝန်းသော ဘဲဥပုံ */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Icon နဲ့ စာသားကြား အကွာအဝေး */
    
    /* 🔥 အဓိကအချက်: အရိပ်ကို အရောင်နဲ့တူအောင်ပေးပြီး Glow ဖြစ်စေခြင်း */
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.5);
    transition: all 0.3s ease;
}

/* Mouse တင်လိုက်ရင် (သို့) နှိပ်လိုက်ရင် လှုပ်ရှားမှု */
.auth-btn:hover {
    transform: translateY(-3px); /* အပေါ်ကို အနည်းငယ် ကြွတက်သွားမယ် */
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.7); /* Glow က ပိုတောက်လာမယ် */
}

/* Icon ကို အရွယ်အစား ညှိခြင်း */
.auth-btn ion-icon {
    font-size: 20px;
}

/* --- TOAST: NEON GAMER STYLE --- */
#toast {
    visibility: hidden;
    min-width: 280px;
    background: #0f0f0f; /* အမည်းရောင် နောက်ခံ */
    color: white;
    padding: 15px 20px;
    position: fixed;
    z-index: 9999;
    right: 20px; /* ညာဘက်ကပ်မယ် */
    top: 80px;   /* Header အောက်နားလောက် */
    
    border-left: 4px solid #00ff88; /* ဘယ်ဘက်မှာ အစိမ်းရောင်လိုင်း */
    border-radius: 4px; /* ထောင့်ချွန်း (Box shape) */
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2); /* Neon Glow */
    
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    
    /* စထွက်ရင် ညာဘက်အပြင်ရောက်နေမယ် */
    transform: translateX(120%); 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
}

#toast.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(0); /* နေရာမှန် ပြန်ရောက်မယ် */
}

/* Error ဖြစ်ရင် အနီရောင်ပြောင်းမည့် Logic ကို JS မှာ ရေးထားပြီးသားမို့ အဆင်ပြေပါတယ် */

/* --- 11. PROFILE & HISTORY --- */
.wallet-card { background: linear-gradient(135deg, #1a1a2e 0%, #000000 100%); border: 1px solid #333; border-radius: 20px; padding: 25px; position: relative; }
.menu-item { background: #111; border: 1px solid #222; padding: 15px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.history-card { background: #131313; border-radius: 16px; padding: 15px; margin-bottom: 12px; border: 1px solid #222; display: flex; justify-content: space-between; align-items: center; }
.history-card.completed { border-left: 4px solid var(--success-color); }
.history-card.pending { border-left: 4px solid var(--warning-color); }

/* style.css ရှိ Bottom Nav ဒီဇိုင်းအသစ် */

.bottom-nav {
    position: fixed;
    bottom: 20px; /* အောက်ခြေမှ အနည်းငယ် မ ထားသည် */
    left: 15px;
    right: 15px;
    height: 70px;
    background: rgba(20, 20, 20, 0.8); /* Glass effect အတွက် အကြည်ရောင် */
    backdrop-filter: blur(15px); /* မှန်သားကဲ့သို့ ဝါးစေရန် */
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 35px; /* ဘဲဥပုံစံ ဖြစ်စေရန် */
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 0 10px;
}

.nav-btn {
    background: none;
    border: none;
    color: #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    transition: all 0.3s ease;
    padding: 10px 0;
}

.nav-btn .icon {
    font-size: 24px; /* Icon အရွယ်အစား */
    margin-bottom: 4px;
    transition: transform 0.3s ease;
}

.nav-btn span {
    font-size: 11px;
    font-weight: 500;
}

/* Active ဖြစ်နေတဲ့ ခလုတ် (ပုံပါအတိုင်း အပြာရောင် သန်းသွားစေရန်) */
.nav-btn.active {
    color: #00d4ff;
}

.nav-btn.active .icon {
    transform: translateY(-3px); /* အနည်းငယ် ကြွတက်သွားစေရန် */
}

/* Cart Badge ဒီဇိုင်းကိုပါ ပိုသေသပ်အောင် ပြင်ခြင်း */
.icon-wrapper {
    position: relative;
    display: flex;
}

.badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: #ff4444;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid #111;
    font-weight: bold;
}

/* --- 13. CART --- */
.cart-item { display: flex; align-items: center; background: #111; border: 1px solid #222; padding: 10px; border-radius: 12px; margin-bottom: 10px; }
.cart-thumb { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; margin-right: 12px; }
.cart-info { flex: 1; }
.cart-title { font-size: 14px; font-weight: bold; color: #fff; }
.cart-meta { font-size: 12px; color: #888; }
.remove-btn { color: var(--danger-color); cursor: pointer; padding: 5px; font-size: 18px; }

/* --- NEW HISTORY LIST STYLE (Drill-down) --- */
.history-list-item {
    display: flex; align-items: center;
    background: #1a1a1a; border: 1px solid #333;
    padding: 15px; border-radius: 15px;
    margin-bottom: 10px; transition: 0.2s;
    cursor: pointer;
}
.history-list-item:active { transform: scale(0.98); background: #222; }

/* Icon Left */
.history-icon { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; margin-right: 15px; background: #fff; padding: 2px; }

/* Info Middle */
.history-info { flex: 1; }
.h-title { color: white; font-weight: bold; font-size: 14px; margin-bottom: 4px; }
.h-date { color: #666; font-size: 11px; }
.h-status { font-size: 10px; padding: 2px 8px; border-radius: 6px; display: inline-block; margin-top: 4px; font-weight: bold; }
.h-status.success { background: rgba(0, 255, 136, 0.15); color: #00ff88; }
.h-status.pending { background: rgba(255, 204, 0, 0.15); color: #ffcc00; }

/* Price Right */
.h-price { color: white; font-weight: bold; font-size: 14px; text-align: right; }
.arrow-icon { color: #666; font-size: 18px; margin-left: 10px; }

/* Detail Modal Styling */
.detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #333; }
.detail-label { color: #888; font-size: 13px; }
.detail-val { color: white; font-weight: bold; font-size: 13px; }
.code-btn { width: 100%; background: #00d4ff; color: #000; padding: 12px; border-radius: 10px; border: none; font-weight: bold; margin-top: 20px; cursor: pointer; font-size: 14px; }


/* --- NEW PROFILE PAGE STYLES (Added for Image 2 & 3 Design) --- */

/* 1. Profile Header (ပုံ ၂ ပုံစံ - နာမည်နဲ့ UID ကဒ်) */
.profile-header {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* အရိပ်ထည့်ထားသည် */
}

.profile-avatar {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #00d4ff, #0055ff); /* အပြာရောင် Gradient */
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
    flex-shrink: 0;
}

.profile-info { flex: 1; overflow: hidden; }
.p-name { color: white; font-weight: bold; font-size: 18px; margin-bottom: 2px; }
.p-email { color: #888; font-size: 13px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.p-uid { 
    background: #000; color: #666; 
    font-size: 11px; padding: 3px 8px; 
    border-radius: 6px; border: 1px solid #333; 
    display: inline-block; font-family: monospace;
}

/* 2. Menu Card (ပုံ ၃ ပုံစံ - My Orders ခလုတ်) */
.menu-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 15px;
    display: flex; align-items: center; gap: 15px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* နှိပ်လိုက်ရင် ခွက်ဝင်သွားမည့် Effect */
.menu-card:active { 
    transform: scale(0.98); 
    background: #222; 
    border-color: #555;
}

.menu-icon-box {
    width: 45px; height: 45px;
    background: rgba(0, 255, 136, 0.1); /* အစိမ်းနုရောင် နောက်ခံ */
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #00ff88; /* အစိမ်းရောင် Icon */
    font-size: 20px;
    flex-shrink: 0;
}

/* --- NEON MODAL STYLES (ADDED) --- */
.card-container {
    position: relative;
    width: 320px;
    height: 450px; 
    background: #000;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

.card-container::before {
    content: ''; position: absolute; width: 200%; height: 200%;
    background: conic-gradient(transparent, #00d4ff 5%, transparent 15%, transparent 50%, #ff0055 55%, transparent 65%);
    animation: rotateSharp 3s linear infinite;
}
@keyframes rotateSharp { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.form-content {
    position: absolute; inset: 2px; background: #0c0c0c;
    border-radius: 18px; z-index: 10; padding: 40px 30px;
    display: flex; flex-direction: column; justify-content: center;
}

.input-group { position: relative; width: 100%; margin-bottom: 20px; }
.input-group input {
    width: 100%; padding: 12px 15px; background: #181818; 
    border: 1px solid #282828; border-radius: 10px; color: #fff; 
    outline: none; font-size: 13px; transition: 0.3s;
}
.input-group input:focus { border-color: #00d4ff; box-shadow: 0 0 8px rgba(0, 212, 255, 0.2); }

.forgot-pass { text-align: right; margin-top: -10px; margin-bottom: 15px; }
.forgot-pass a { color: #666; font-size: 12px; text-decoration: none; transition: 0.3s; }
.forgot-pass a:hover { color: #00d4ff; text-shadow: 0 0 5px rgba(0, 212, 255, 0.5); }

.btn {
    width: 100%; padding: 12px; border: none; border-radius: 10px;
    background: #00d4ff; color: #000; font-weight: 800;
    font-size: 14px; text-transform: uppercase; cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5); margin-top: 5px; transition: 0.3s;
}
.btn:hover { transform: scale(1.02); box-shadow: 0 0 25px rgba(0, 212, 255, 0.8); }
.btn.signup-btn { background: #ff0055; color: #fff; box-shadow: 0 0 15px rgba(255, 0, 85, 0.5); margin-top: 15px; }

.toggle-text { color: #666; font-size: 11px; margin-top: 25px; text-align: center; font-weight: 600; }
.toggle-link { color: #ff0055; cursor: pointer; font-weight: 800; }

.form-wrapper { display: none; width: 100%; }
.form-wrapper.active { display: block; animation: fadeInOut 0.5s ease-in-out forwards; }
@keyframes fadeInOut { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }


/* --- BACKGROUND ANIMATION (ADDED) --- */
body {
    /* အရောင် ၄ မျိုး စပ်ထားပါမယ် (အမည်း၊ အပြာရင့်၊ ခရမ်း၊ အမည်း) */
    background: linear-gradient(-45deg, #000000, #0a1128, #1a0b1a, #000000);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite; /* ၁၅ စက္ကန့်ကြာ တစ်ပတ်လည်မယ် */
    
    /* စာလုံးအရောင် ပြန်ချိန်ပါတယ် */
    color: #ffffff; 
    min-height: 100vh;
}

/* အရောင်ရွေ့မည့် Animation */
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


/* style.css (အောက်ဆုံးတွင် ထည့်ရန်) */

.payment-container-box {
    background: #111111; /* နောက်ခံ မီးခိုးရောင်အပျစ် */
    border: 1px solid #333; /* ဘောင်ပါးပါး */
    border-radius: 25px; /* ထောင့်ဝိုင်း */
    padding: 25px 20px; /* အတွင်းဘက် အကွာအဝေး */
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); /* အရိပ် */
    margin-bottom: 20px;
}

/* Payment Card လေးတွေကို Box ထဲထည့်ရင် အရောင်ခွဲခြားမြင်ရအောင် အနည်းငယ်ပြင်မည် */
.payment-card {
    background: #222 !important; /* Box ထက် နည်းနည်းဖျော့တဲ့ အရောင် */
    border: 1px solid #444 !important;
    margin-bottom: 12px;
}

/* --- 1. RECEIPT/BILL CARD STYLE --- */
.receipt-card {
    background: #1a1a1a;
    border: 1px dashed #444; /* ပြတ်တောင်းပြတ်တောင်း လိုင်း */
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
/* လက်မှတ်ဖြတ်ပိုင်းပုံစံ ဘေးချိုင့်လေးများ */
.receipt-card::before, .receipt-card::after {
    content: ''; position: absolute; bottom: 50px; width: 20px; height: 20px;
    background: #000; border-radius: 50%;
}
.receipt-card::before { left: -10px; }
.receipt-card::after { right: -10px; }

.bill-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: #aaa; }
.bill-total { border-top: 1px dashed #444; padding-top: 15px; margin-top: 15px; display: flex; justify-content: space-between; align-items: center; }
.bill-total span { color: white; font-size: 14px; }
.bill-total strong { color: #00d4ff; font-size: 24px; }

/* --- 2. BRAND GLOW EFFECTS --- */
.payment-card { transition: all 0.3s ease; position: relative; overflow: hidden; }

/* KBZ Pay - Blue Glow */
.payment-card.kbz { border-left: 4px solid #0055ff !important; }
.payment-card.kbz:hover, .payment-card.kbz.active {
    box-shadow: 0 0 20px rgba(0, 85, 255, 0.3);
    background: linear-gradient(90deg, rgba(0,85,255,0.1), transparent);
}

/* Wave Pay - Yellow Glow */
.payment-card.wave { border-left: 4px solid #ffe600 !important; }
.payment-card.wave:hover, .payment-card.wave.active {
    box-shadow: 0 0 20px rgba(255, 230, 0, 0.3);
    background: linear-gradient(90deg, rgba(255,230,0,0.1), transparent);
}

/* --- 3. QR CODE EXPAND --- */
.qr-section {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: #000;
    margin-top: 0;
    text-align: center;
    border-radius: 0 0 12px 12px;
}
.payment-card.active + .qr-section {
    max-height: 300px; /* ပွင့်လာမည့်အမြင့် */
    border: 1px solid #333;
    border-top: none;
    padding: 15px;
    margin-bottom: 15px;
}
.qr-img-placeholder {
    width: 150px; height: 150px;
    background: white; padding: 10px;
    margin: 0 auto; border-radius: 8px;
}

/* --- 4. UPLOAD ANIMATION --- */
.upload-box { transition: 0.3s; }
.upload-icon { animation: bounce 2s infinite; }

/* Upload ပြီးသွားရင် ပြောင်းမည့် ပုံစံ */
.upload-box.success {
    border: 2px solid #00ff88;
    background: rgba(0, 255, 136, 0.05);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}
.upload-box.success .upload-icon { animation: none; display: none; }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* --- COMPACT UPLOAD BUTTON (Image 2 Style) --- */
.compact-upload-btn {
    border: 2px dashed #555; /* ပြတ်တောင်းလိုင်း အဖြူမွဲ */
    border-radius: 50px; /* ဘဲဥပုံ (Pill Shape) */
    padding: 12px;
    text-align: center;
    color: #aaa;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    margin-top: 20px;
}

.compact-upload-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #777;
}

.compact-upload-btn.success {
    border: 2px solid #00ff88; /* အစိမ်းရောင် ဘောင် */
    color: #00ff88; /* အစိမ်းရောင် စာ */
    background: rgba(0, 255, 136, 0.1);
    font-weight: bold;
}

/* style.css (အောက်ဆုံးတွင် ထည့်ရန်) */

.upload-dashed-box {
    border: 2px dashed #444; /* အတုံးပြတ်လိုင်း */
    border-radius: 16px;       /* ထောင့်ဝိုင်း */
    height: 120px;             /* အမြင့်သတ်မှတ် */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    margin-top: 25px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.upload-dashed-box:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #666;
}

/* ဖိုင်ရွေးပြီးရင် ဖြစ်သွားမည့်ပုံစံ */
.upload-dashed-box.success {
    border: 2px solid #00ff88;
    background: rgba(0, 255, 136, 0.05);
}

/* Upload Button (Pill Shape Dashed Style) */
.upload-btn-dashed {
    border: 2px dashed #666;  /* မီးခိုးရောင် အစက်လိုင်း */
    border-radius: 50px;      /* ဘဲဥပုံ (Pill Shape) */
    padding: 15px;            /* အတွင်းကန် */
    text-align: center;
    color: #fff;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    margin-top: 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Icon နဲ့ စာ ကြားအကွာအဝေး */
}

.upload-btn-dashed:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #aaa;
}

/* ဖိုင်ရွေးပြီးရင် ဖြစ်သွားမည့် ပုံစံ (အစိမ်းရောင်) */
.upload-btn-dashed.selected {
    border: 2px solid #00ff88;
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
    font-weight: bold;
}

/* --- FAILED STATUS & CONTACT BUTTONS --- */

/* --- FAILED STATUS BADGE DESIGN --- */
/* Success လိုမျိုး နောက်ခံပါသည့် ဒီဇိုင်း */
.h-status.failed {
    background: rgba(255, 68, 68, 0.15); /* အနီရောင် ဖျော့ဖျော့ နောက်ခံ */
    color: #ff4444; /* တောက်ပသော အနီရောင် စာသား */
    padding: 5px 12px; /* Success နဲ့တူအောင် padding ချိန်သည် */
    border-radius: 12px; /* ထောင့်ဝိုင်း */
    display: inline-block; /* Badge ပုံစံပေါ်စေရန် */
}

/* --- FAILED CONTACT BUTTONS WITH LOGO --- */
.failed-contact-container {
    margin-top: 25px;
    text-align: center;
}

.failed-buttons-row {
    display: flex;
    gap: 15px; /* ခလုတ်နှစ်ခုကြား အကွာအဝေး */
    justify-content: center;
    margin-top: 15px;
}

.failed-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Logo နှင့် စာသားကြား အကွာအဝေး */
    padding: 12px 20px;
    border-radius: 15px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 14px;
    flex: 1; /* ခလုတ်နှစ်ခု အရွယ်တူဖြစ်စေရန် */
    max-width: 180px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.failed-contact-btn:hover {
    transform: translateY(-3px); /* Mouse တင်ရင် အပေါ်နည်းနည်းတက်မယ် */
}

/* Telegram Style */
.btn-tg {
    background: linear-gradient(135deg, #229ED9, #1E88BD); /* TG Blue Gradient */
    box-shadow: 0 4px 15px rgba(34, 158, 217, 0.3);
}

/* Messenger Style */
.btn-msg {
    background: linear-gradient(135deg, #0084FF, #006BCE); /* Messenger Blue Gradient */
    box-shadow: 0 4px 15px rgba(0, 132, 255, 0.3);
}

/* Logo Image Style */
.btn-logo-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Review Marquee Animation */
.review-slider {
    overflow: hidden; /* Scrollbar ဖျောက်မယ် */
    white-space: nowrap; /* တစ်ကြောင်းတည်း ဖြစ်နေစေမယ် */
    padding: 10px 0;
}

.review-track {
    display: inline-flex;
    gap: 15px; /* Review ကတ်တစ်ခုနဲ့တစ်ခု ကြားအကွာအဝေး */
    animation: scrollReviewInfinite 30s linear infinite; /* စက္ကန့် ၃၀ ကြာ တစ်ပတ်လည်မယ် */
}

/* Mouse တင်ထားရင် ခဏရပ်ပေးမယ့် Effect (Optional) */


/* ဘယ်ဘက်ကို ရွေ့မယ့် Animation */
@keyframes scrollReviewInfinite {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* ထက်ဝက်တိတိ ရွေ့သွားရင် အစပြန်ရောက်မယ် */
}

/* Tracking Timeline Design */
.tracking-wrapper {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.track-step {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}
.track-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 14px;
    top: 30px;
    width: 2px;
    height: 25px;
    background: #333;
}
.track-step.active:not(:last-child)::after {
    background: #00d4ff;
}
.track-dot {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #222;
    border: 2px solid #444;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    z-index: 2;
}
.track-step.active .track-dot {
    background: #00d4ff;
    border-color: #00d4ff;
    color: black;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
.track-info { display: flex; flex-direction: column; }
.track-label { font-size: 13px; font-weight: bold; color: #888; }
.track-step.active .track-label { color: white; }
.track-time { font-size: 10px; color: #555; }


/* --- NEW TRACKING ANIMATIONS --- */

/* အဝိုင်းလည်မည့် Animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Spinner အဝါရောင် အဝိုင်းလည်နေသည့် ပုံစံ */
.track-dot.spinning {
    border: 2px solid rgba(255, 204, 0, 0.2);
    border-top: 2px solid #ffcc00; /* အဝါရောင် */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    background: transparent !important;
}

/* အစိမ်းရောင် အမှန်ခြစ် ပုံစံ */
.track-dot.success {
    background: #00ff88 !important;
    border-color: #00ff88 !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

/* Timeline လိုင်းများ အရောင်ပြောင်းခြင်း */
.track-step.done::after {
    background: #00ff88 !important;
}

.track-step.processing::after {
    background: #ffcc00 !important;
}

.track-time.completed-time {
    color: #00ff88;
    font-weight: bold;
}