@charset "utf-8";


        /* ส่วนของแถบด้านล่างแบบโปร่งใส */
        .bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80px;
            
            /* ใช้ RGBA เพื่อกำหนดสีม่วงเข้ม (48, 0, 72) และความโปร่งใส 0.8 */
            background-color: rgba(48, 0, 72, 0.6); 
            
            /* เอฟเฟกต์เบลอคอนเทนต์ด้านหลัง (สำคัญมากสำหรับสไตล์กระจก) */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px); /* สำหรับ Safari */
            
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10%;
            box-sizing: border-box;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 9999;
        }
/* จัดกลุ่มให้ ยอดรวม และ เหลือชำระเงิน วางเรียงกันแนวราบ */
.price-group {
    display: flex;
    align-items: center;
    gap: 25px; /* ระยะห่างระหว่าง 2 ชุดข้อมูล */
}
        .price-container {
            display: flex;
            flex-direction: column;
        }

        .price-label {
	color: rgba(255, 255, 255, 0.7); /* ตัวอักษรสีขาวจางๆ */
	font-size: 13px;
	font-weight: 300;
	font-family: "Noto Sans Thai";
        }

        .price-amount {
	color: #ffffff;
	font-size: 24px;
	font-weight: 600;
	font-family: serithairegular;
        }

        .continue-btn {
	background-color: #fde594; /* สีม่วงสว่างขึ้นเล็กน้อยเพื่อให้ตัดกับแถบ */
	color: #333;
	border: none;
	padding: 10px 25px;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	font-family: serithairegular;
        }

        .continue-btn:hover {
	background-color: #FBCC2B;
	transform: translateY(-1px);
        }

        /* --- Responsive --- */

		/* เพิ่มกรอบให้เฉพาะส่วน "เหลือชำระเงิน" โดยยังคง Properties ของ price-container ไว้ */
.balance-border-box {
    border: 1px solid rgba(255, 255, 255, 0.2); /* เส้นขอบบางๆ สีขาวโปร่งแสง */
    padding: 5px 15px; /* เพิ่มช่องว่างในกรอบ */
    border-radius: 12px; /* ความโค้งมนของกรอบ */
    background-color: rgba(255, 255, 255, 0.05); /* เติมพื้นหลังให้ดูเป็นบล็อกมากขึ้น */
}
/* สไตล์ของกรอบ "เหลือชำระเงิน" */
.balance-box {
    border: 1px solid rgba(255, 255, 255, 0.3); /* สร้างกรอบเส้นบางๆ */
    padding: 5px 15px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05); /* พื้นหลังจางๆ ให้ดูมีมิติ */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.balance-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-family: "Noto Sans Thai";
}

.balance-amount {
    color: #fde594; /* ใช้สีเหลืองเดียวกับปุ่มเพื่อให้เด่นขึ้น */
    font-size: 18px;
    font-weight: 600;
    font-family: serithairegular;
}

/* ปรับปรุง Responsive สำหรับมือถือ */
@media (max-width: 670px) {
	   .bottom-bar {
	display: inline;
	height: auto;
	width: 100%;	padding: 0 20px;
		   }
    .price-group {
	gap: 12px;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
    }
    .balance-border-box {
        padding: 4px 10px;
        border-radius: 8px;
    }
    /* ให้ตัวเลขเล็กลงพร้อมกันทั้งคู่ในหน้าจอมือถือ */

            .price-amount { font-size: 18px; }
            .continue-btn {
	font-size: 1.2rem;
	clear: both;
	float: left;
	padding-top: 8px;
	padding-right: 18px;
	padding-bottom: 8px;
	padding-left: 18px;
	width: 100%;
	margin-bottom: 3%;
}
}