/* ==========================================================================
   1. สไตล์สำหรับป้ายระดับสิทธิ์ (Role Badges) - ใช้สำหรับแสดงในตารางหรือโปรไฟล์
   ========================================================================== */

/* สไตล์พื้นฐานของป้าย */
.role-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* ทำให้ขอบมนแบบวงรี */
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
}

/* สีเฉพาะตามระดับ (Gradient Style) */
.role-manager {
    background: linear-gradient(135deg, #8B0000 0%, #DC143C 100%); /* แดงเข้ม */
    color: white;
}

.role-admin {
    background: linear-gradient(135deg, #4B0082 0%, #8A2BE2 100%); /* ม่วงเข้ม */
    color: white;
}

.role-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); /* ทอง */
    color: white;
}

.role-basic {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%); /* เทา */
    color: white;
}

/* ==========================================================================
   2. ตั้งค่าพื้นฐาน (Global Styles)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* ทำให้การคำนวณ Padding ไม่กระทบความกว้าง */
}

body {
    font-family: 'Prompt', sans-serif; /* ใช้ฟอนต์ Prompt ที่ดูเป็นสากลสำหรับภาษาไทย */
    background-color: #f8f9fa;
    color: #1a1a1a;
    line-height: 1.6;
}

/* ปรับแต่งแถบเลื่อน (Custom Scrollbar) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #F39200; /* สีส้มคูโบต้า */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #d67f00; /* สีส้มเข้มขึ้นเมื่อเอาเมาส์วาง */
}

/* ==========================================================================
   3. ส่วนหัวเว็บไซต์ (Hero Section)
   ========================================================================== */
.hero-gradient {
    background: linear-gradient(135deg, #009743 0%, #00602a 100%); /* เขียวคูโบต้า */
    position: relative;
    overflow: hidden;
}

/* ลายพื้นหลังจางๆ (Pattern) ในส่วน Hero */
.hero-gradient::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.6;
}

/* ==========================================================================
   4. การ์ดสินค้าและปุ่ม (Components)
   ========================================================================== */

/* การ์ดสินค้า */
.card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease; /* เอฟเฟกต์นุ่มนวลเวลา Hover */
}

.card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px); /* ยกตัวขึ้นเล็กน้อย */
}

/* ปุ่มสีส้ม (Primary) */
.btn-primary {
    background: linear-gradient(135deg, #F39200 0%, #d67f00 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(243, 146, 0, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

/* ฟอร์มรับข้อมูล */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: #F39200;
    box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.1);
}

/* ==========================================================================
   5. เอฟเฟกต์ภาพเคลื่อนไหว (Animations)
   ========================================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}