/* ตัวแปรสีสำหรับทั้งเว็บไซต์ */
:root {
    /* สีหลัก (Primary Colors) */
    --primary-purple: #7a55b0;        /* สีม่วงเข้มจากภาพ - สีหลักของแบรนด์ */
    --primary-light-purple: #d9a3d8;  /* สีม่วงอ่อน/ชมพูอมม่วงจากภาพ */
    --primary-dark-purple: #5a3d8c;   /* สีม่วงเข้มสำหรับเน้นและโฟกัส */
    
    /* สีรอง (Secondary Colors) */
    --secondary-lavender: #e4c7e3;    /* สีม่วงอ่อนมากสำหรับพื้นหลังและการเน้น */
    --secondary-orchid: #b076c4;      /* สีม่วงกลางสำหรับองค์ประกอบสนับสนุน */
    
    /* สีสนับสนุน (Accent Colors) */
    --accent-teal: #4ecdc4;           /* สีฟ้าอมเขียว - คู่สีตรงข้ามของม่วง */
    --accent-gold: #ffc857;           /* สีทอง/เหลืองทอง - สำหรับ CTA และเน้นความสำคัญ */
    
    /* สีเรียบ (Neutral Colors) */
    --neutral-white: #ffffff;
    --neutral-light: #f7f5fa;         /* สีพื้นหลังอ่อนๆ ที่มีความเป็นม่วง */
    --neutral-gray: #e2dfe8;          /* สีเทาอมม่วงอ่อนๆ */
    --neutral-dark: #413c4f;          /* สีเทาเข้มอมม่วง */
    --neutral-black: #21142d;         /* สีดำอมม่วงสำหรับข้อความ */
    
    /* สีฟังก์ชัน (Functional Colors) */
    --success: #52c41a;               /* สีเขียวสำหรับสถานะสำเร็จ */
    --warning: #faad14;               /* สีเหลืองสำหรับการเตือน */
    --error: #ff4d4f;                 /* สีแดงสำหรับข้อผิดพลาด */
    --info: #1890ff;                  /* สีฟ้าสำหรับข้อมูล */
    
    /* สีเฉดความเข้ม-อ่อน (Gradient Colors) */
    --gradient-purple: linear-gradient(135deg, #7a55b0, #5a3d8c);   /* ไล่โทนสีม่วงเข้ม */
    --gradient-lavender: linear-gradient(135deg, #d9a3d8, #b076c4); /* ไล่โทนสีม่วงอ่อน */
    --gradient-mix: linear-gradient(135deg, #7a55b0, #d9a3d8);      /* ไล่โทนจากม่วงเข้มไปม่วงอ่อน */
    
    /* สีเฉพาะส่วน (Component-specific Colors) */
    --navbar-bg: var(--primary-purple);
    --navbar-text: var(--neutral-white);
    --footer-bg: var(--primary-dark-purple);
    --footer-text: var(--neutral-white);
    --button-primary-bg: var(--primary-light-purple);
    --button-primary-text: var(--primary-dark-purple);
    --button-secondary-bg: var(--neutral-white);
    --button-secondary-text: var(--primary-purple);
    --card-bg: var(--neutral-white);
    --card-border: var(--neutral-gray);
    --card-shadow: rgba(122, 85, 176, 0.2);
}

/* Global Styles */
body {
    font-family: 'Prompt', sans-serif;
}

/* ===============================================
   Navbar Styles - ธีมสีม่วง D Care Clinic
   =============================================== */
.layout-navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1050;
    background: var(--navbar-bg) !important; /* ใช้ตัวแปรสีแทน */
    box-shadow: 0 4px 20px var(--card-shadow);
    transition: all 0.3s ease;
    padding: 8px 0;
}

/* เอฟเฟกต์เส้นตกแต่งด้านล่าง navbar */
.layout-navbar::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.2), transparent, rgba(255,255,255,0.2));
}

.navbar-brand {
    position: relative;
    z-index: 1051;
}

/* ปรับแต่งโลโก้ */
.app-brand-logo {
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.app-brand-logo:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.app-brand-text {
    color: var(--navbar-text) !important;
    font-size: 1.25rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

/* ปรับแต่งปุ่มแฮมเบอร์เกอร์ */
.navbar-toggler {
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    cursor: pointer;
    z-index: 1051;
    transition: all 0.3s ease;
    padding: 0;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navbar-toggler:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}

.navbar-toggler i {
    color: var(--navbar-text);
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.navbar-toggler[aria-expanded="true"] i {
    transform: rotate(90deg);
}

/* สำหรับมือถือ */
@media (max-width: 991.98px) {
    /* สไตล์สำหรับ Navbar Collapse */
    #navbar-collapse {
        display: none !important; /* ซ่อนเมนูเริ่มต้น */
    }
    
    /* แสดงเมนูเมื่อมีคลาส show */
    #navbar-collapse.show {
        display: block !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(122, 85, 176, 0.97) !important; /* สีม่วงจากภาพ */
        backdrop-filter: blur(10px);
        padding: 1.5rem !important;
        border-radius: 0 0 20px 20px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
        z-index: 9999 !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    /* ปุ่มปิด */
    .btn-close {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        background: rgba(255,255,255,0.2) !important;
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 1051 !important;
        opacity: 1 !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    }
    
    .btn-close:hover {
        transform: rotate(90deg) !important;
        background: rgba(255,255,255,0.25) !important;
    }
    
    /* สไตล์สำหรับ Nav Item */
    .navbar-nav {
        width: 100% !important;
        margin-top: 1rem !important;
    }
    
    .navbar-nav .nav-link {
        padding: 1rem 1.5rem !important;
        text-align: center !important;
        color: var(--navbar-text) !important;
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,0.15) !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
        border: 1px solid rgba(255,255,255,0.05) !important;
    }
    
    .navbar-nav .nav-link:hover {
        background: rgba(255,255,255,0.25) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
    }
    
    .login-btn {
        margin: 1rem auto !important;
        display: inline-block !important;
        width: auto !important;
        min-width: 200px !important;
        padding: 1rem 2rem !important;
        background: var(--primary-light-purple) !important;
        color: var(--primary-dark-purple) !important;
        border-radius: 50px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        box-shadow: 0 5px 20px rgba(217, 163, 216, 0.4) !important;
    }
    
    .login-btn:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 25px rgba(217, 163, 216, 0.5) !important;
    }
    
    /* Animation */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .navbar-collapse.show .nav-link {
        animation: fadeInUp 0.5s forwards;
        animation-delay: calc(var(--item-index, 0) * 0.08s);
    }
    
    .navbar-nav .nav-link:nth-child(1) { --item-index: 1; }
    .navbar-nav .nav-link:nth-child(2) { --item-index: 2; }
    .navbar-nav .nav-link:nth-child(3) { --item-index: 3; }
    .navbar-nav .nav-link:nth-child(4) { --item-index: 4; }
    .navbar-nav .nav-link:nth-child(5) { --item-index: 5; }
    .navbar-nav .nav-link:nth-child(6) { --item-index: 6; }
    .navbar-nav .nav-link:nth-child(7) { --item-index: 7; }
    .navbar-nav .nav-link:nth-child(8) { --item-index: 8; }
}

/* สำหรับ Desktop */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    
    .btn-close {
        display: none;
    }
    
    .navbar-nav {
        flex-direction: row;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1.25rem;
        color: var(--navbar-text) !important;
        position: relative;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .navbar-nav .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--primary-light-purple);
        transition: all 0.3s ease;
        transform: translateX(-50%);
        opacity: 0;
    }
    
    .navbar-nav .nav-link:hover {
        color: var(--navbar-text) !important;
        transform: translateY(-2px);
    }
    
    .navbar-nav .nav-link:hover::after {
        width: 70%;
        opacity: 1;
    }
    
    .login-btn {
        background: var(--primary-light-purple);
        color: var(--primary-dark-purple) !important;
        border-radius: 50px;
        padding: 0.6rem 1.5rem !important;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(217, 163, 216, 0.3);
        margin-left: 1rem;
        position: relative;
        overflow: hidden;
    }
    
    /* เอฟเฟกต์เรืองแสง */
    .login-btn::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        z-index: -1;
        background: var(--gradient-lavender);
        background-size: 300% 300%;
        animation: gradientShift 3s ease infinite;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 50px;
    }
    
    @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
    .login-btn:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 8px 25px rgba(217, 163, 216, 0.4);
    }
    
    .login-btn:hover::before {
        opacity: 1;
    }
    
    /* เอฟเฟกต์ Glow */
    .login-btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50px;
        opacity: 0;
        transition: all 0.3s ease;
    }
    
    .login-btn:hover::after {
        opacity: 1;
        animation: glow 1.5s infinite alternate;
    }
    
    @keyframes glow {
        0% { box-shadow: 0 0 5px rgba(217, 163, 216, 0.3); }
        100% { box-shadow: 0 0 20px rgba(217, 163, 216, 0.6); }
    }
}

/* Scroll Effect - เปลี่ยนสไตล์ Navbar เมื่อเลื่อนลง */
.navbar-scrolled {
    padding: 5px 0;
    background: var(--primary-dark-purple) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}