@font-face {
    font-family: "WinTaungyi";
    src: local('WinTaungyi'), url('../font/WinTaungyi.ttf') format('truetype');
}
@font-face {
    font-family: "Pyidaungsu";
    src: local('Pyidaungsu'), url('../font/Pyidaungsu.ttf') format('truetype');
}

body {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* အပေါ်အောက် အစီအစဉ်ဖြစ်အောင် ပြောင်းလဲခြင်း */
    min-height: 100vh; /* height: 100vh အစား min-height သုံးပေးရပါမယ် */
    width: 100vw;
    overflow-x: hidden;
    animation: bgSlider 45s infinite;
}
    body::after {
        content: "";
        display: none; /* ဒီ element ကို screen ပေါ်မှာ မပြပါဘူး */
        /* ပုံအားလုံးကို တစ်ခါတည်း လှမ်းခေါ်ထားပြီး cache လုပ်ခိုင်းတာပါ */
        background-image:
            url('/img/slide/img1.png'),
            url('/img/slide/img2.png'),
            url('/img/slide/img3.png'), 
            url('/img/slide/img4.png'),
            url('/img/slide/img5.png'), 
    }

@keyframes bgSlider {
    0% {
        background-image: url('/img/slide/img1.png');
    }

    20% {
        background-image: url('/img/slide/img2.png');
    }

    40% {
        background-image: url('/img/slide/img3.png');
    }

    60% {
        background-image: url('/img/slide/img4.png');
    }

    80% {
        background-image: url('/img/slide/img5.png');
    }

    100% {
        background-image: url('/img/slide/img1.png');
    }
}
    /* ပင်မ Container */
    .main-wrapper {
        display: flex;
        width: 100%;
        flex: 1; /* လက်ရှိနေရာလွတ်အားလုံးကို ယူပြီး Footer ကို အောက်ဆုံးရောက်အောင် တွန်းပို့ပေးပါတယ် */
        flex-direction: row;
        box-sizing: border-box;
        padding: 15px 15px 0px 0px;
    }
    /* --- Footer အသစ်အတွက် Styling --- */
    .site-footer {
        width: 100%;
        text-align: right;
        padding: 0px 25px 5px 0px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #b0c4de;
        box-sizing: border-box;
    }

    .site-footer .highlight {
        color: #ffd700; /* Developer နာမည်ကို ရွှေရောင်လင်းလင်းလေး ပေးထားခြင်း */
    }
    /* ဘယ်ဘက်အခြမ်း ခေါင်းစဉ်ဧရိယာ */
    .sidebar-title {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5px;
        box-sizing: border-box;
    }

    .sidebar-title h1 {
        font-family: 'WinTaungyi' !important;
        font-size: 48px;
        line-height: 1.6;
        color: #ffd700;
        text-align: center;
        letter-spacing: 0.5px;
        animation: fadeInEffect 1s ease-out forwards;
        text-shadow: 2px 2px 4px #000;
    }

    .sidebar-title h2 {
        font-size: 26px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        color: #000;
        margin-top: -10px;
        width: 100%;
        text-align: center;
        animation: fadeInEffect 1s ease-out 0.3s forwards;
        opacity: 0;
    }
    /* --- Search Box Styling --- */
    .search-wrapper {
        position: relative;
        width: 90%;
        margin: 10px 0 25px 0;
        border-top: 1px solid #000;
        padding-top: 30px;
        animation: fadeInEffect 1s ease-out 0.6s forwards;
        opacity: 0;
    }

    .search-input {
        width: 100%;
        padding: 14px 20px 14px 45px; /* ဘယ်ဘက်မှာ icon ပြဖို့ space ချန်ထားတာပါ */
        font-family: 'Pyidaungsu', Arial, sans-serif;
        font-size: 15px;
        color: #000;
        background: #fff;
        border: 2px solid #000;
        border-radius: 30px; /* လုံးဝန်းသော UI ပုံစံ */
        outline: none;
        box-sizing: border-box;
        transition: all 0.3s ease;
    }
    /* Input ကိုနှိပ်လိုက်တဲ့အခါ (Focus ဖြစ်တဲ့အချိန်) ပြောင်းမယ့်ပုံစံ */
    .search-input:focus {
        background: #fff;
        border-color: #054c98; /* ခေါင်းစဉ်ကဲ့သို့ ရွှေရောင်လိုင်းလေး လင်းလာပါမယ် */
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
    }

    .search-input::placeholder {
        font-weight: bold;
        color: #000;
    }

    .search-icon {
        position: absolute;
        left: 18px; /* Icon နေရာ အလယ်ကျအောင် အနည်းငယ် ရွှေ့ထားပါတယ် */
        top: 65%;
        transform: translateY(-50%);
        font-size: 16px; /* Icon အရွယ်အစား သတ်မှတ်ချက် */
        color: #b0c4de; /* Icon အရောင် */
        pointer-events: none;
        transition: color 0.3s ease;
        color: #000;
    }

    .search-input:focus + .search-icon {
        color: #054c98;
    }
    /* --- မြေပုံဖြင့်ကြည့်ရန် Button စတိုင်အသစ် --- */
    .view-map-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        gap: 8px;
        width: 100%;
        max-width: 220px;
        padding: 12px 24px;
        font-family: 'Pyidaungsu', Arial, sans-serif;
        font-size: 15px;
        font-weight: bold;
        color: #ffffff;
        background: linear-gradient(135deg, #054c98, #002244); /* ခန့်ညားသော အပြာရောင် Gradient */
        border: 2px solid #054c98; /* ရွှေရောင် Border လေးဖြင့် ပေါ်လွင်စေခြင်း */
        border-radius: 30px;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        animation: fadeInEffect 1s ease-out 0.8s forwards;
        opacity: 0;
    }
    /* Button Hover ဖြစ်ချိန် ပုံစံ */
    .view-map-btn:hover {
        background: linear-gradient(135deg, #ffd700, #ffa500); /* ရွှေရောင်ပြောင်းသွားစေခြင်း */
        color: #000000;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
        border: 2px solid #ffd700;
    }

    .view-map-btn:active {
        transform: translateY(1px);
    }
    /* ညာဘက်အခြမ်း SVG မြေပုံဧရိယာ (Box Shadow နှင့် Padding ထည့်သွင်းထားသည်) */
    .map-container {
        width: 50%;
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px; /* ပတ်ပတ်လည် padding တိုးမြှင့်ထားခြင်း */
        box-sizing: border-box;
        animation: mapScaleUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    svg {
        width: 100%;
        height: 100%;
        max-height: 90vh;
    }

    path {
        cursor: pointer;
        stroke: #000;
        stroke-width: 1.5;
        transition: all 0.3s ease;
    }

    path:hover {
        opacity: 0.85;
    }
    /* foreignObject ၏ အနားသတ်များ အပြည့်ပေါ်စေရန် */
    foreignObject {
        overflow: visible !important;
    }

    .map-box {
        display: flex;
        align-items: center;
        border-radius: 50px;
        cursor: pointer;
    }

    .map-box:hover {
        transform: translateY(-2px) scale(1.05); /* အပေါ်ကို ကြွတက်ပြီး အနည်းငယ် ကြီးလာမည် */
    }
    /* Box ထဲက ပုံ (Image) အတွက် Size သတ်မှတ်ချက် */
    .map-box img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        background-color: #fff;
        padding: 1px;
        position: relative;
        box-shadow: 1px 2px 6px rgba(0,0,0,0.35);
    }

    .map-box span {
        color: #000;
        font-size: 12px;
        font-family: "Pyidaungsu";
        font-weight: bold;
        background-color: #f9f9f9;
        border-radius: 50px;
        margin-left: -20px;
        box-shadow: 1px 2px 8px rgba(0,0,0,0.35);
        width: auto;
        padding: 4px 10px 4px 28px;
    }

    .double-arrow {
        color: #054c98;
        margin-left: 2px;
        font-size: 11px;
        font-weight: bold;
        animation: doubleBounce 0.8s infinite alternate ease-in-out;
    }

    @keyframes doubleBounce {
        0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(6px); /* ညာဘက်သို့ 5px လှုပ်ရှားမည် */
    }
}

.label-line {
    stroke-width: 1;
    stroke: #000 !important;
    /*stroke-dasharray: 3, 3;*/
    pointer-events: none;
}

.region-pointer {
    transform-origin: center;
    animation: breathingGlow 1.8s infinite ease-in-out;
}

@keyframes breathingGlow {
    0% {
        r: 4; /* မူလအချင်းဝက် */
        stroke: #000;
    }

    50% {
        r: 4.5; /* အနည်းငယ် ကြီးလာမည့် အရွယ်အစား */
        stroke: #054c98; /* ဘုရားမြေပုံဖြစ်လို့ ရွှေရောင်လင်းလာရင် ပိုလှပါတယ် */
    }

    100% {
        r: 4;
        stroke: #000;
    }
}

@keyframes fadeInEffect {
    from {
        opacity: 0;
        transform: translateY(-10px); /* အပေါ်ကနေ အောက်ကို အနည်းငယ်ဆင်းပြီး fade ဖြစ်ချင်ရင် သုံးနိုင်ပါတယ် */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mapScaleUp {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


@media (max-width: 1024px) {
    .sidebar-title{
        width:50%;
    }
    
    .sidebar-title h1 {
        font-size: 20px;
    }

    .sidebar-title h2 {
        font-size: 16px;
    }

    .map-container {
        width: 50%;
        height: 80vh;
    }

    svg {
        height: 70vh;
    }
    .search-input {
        padding: 10px 16px 10px 41px;
        font-size: 12px;
    }
    .view-map-btn {
        max-width: 150px;
        padding: 7px 14px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    body {
        overflow: auto;
    }

    .main-wrapper {
        flex-direction: column;
        height: auto;
        padding: 10px;
        gap: 10px;
    }

    .sidebar-title {
        width: 100%;
        text-align: center;
        align-items: center;
        padding: 10px;
    }

        .sidebar-title h1 {
            font-size: 25px;
        }

        .sidebar-title h2 {
            font-size: 14px;
        }

    .map-container {
        width: 100%;
        height: 65vh;
        padding: 5px;
    }
    svg {
        height: 60vh;
    }
}

@media (max-width: 500px) {
    body {
        overflow: auto;
    }

    .main-wrapper {
        flex-direction: column;
        height: auto;
        padding: 5px 5px 10px 5px;
        gap: 5px;
    }

    .sidebar-title {
        width: 100%;
        text-align: center;
        align-items: center;
        padding: 10px;
    }

        .sidebar-title h1 {
            font-size: 20px;
        }

        .sidebar-title h2 {
            font-size: 12px;
        }

    .map-container {
        width: 100%;
        height: 60vh;
    }

    svg {
        height: 45vh;
    }
    .view-map-btn {
        max-width: 200px;
        padding: 2px 14px;
        font-size: 12px;
    }
}
/* Responsive Media Query */
@media (max-width: 400px) {
    body {
        overflow: auto;
    }

    .main-wrapper {
        flex-direction: column;
        height: auto;
        padding: 5px 5px 10px 5px;
        gap: 5px;
    }

    .sidebar-title {
        width: 100%;
        text-align: center;
        align-items: center;
        padding: 10px;
    }

        .sidebar-title h1 {
            font-size: 20px;
        }

        .sidebar-title h2 {
            font-size: 12px;
        }

    .map-container {
        width: 100%;
        height: 50vh;
        padding:5px;
    }

    svg {
        height: 45vh;
    }

    .search-input {
        padding: 10px 16px 10px 41px;
        font-size: 12px;
    }
    .view-map-btn {
        max-width: 150px;
        padding: 7px 14px;
        font-size:12px;
    }
}