/*=====================================*/
/* Site Custom CSS - United Theme  */
/* Customized for a modern, purple style  */
/*=====================================*/

/*-------------------------------------*/
/* 1. General & Typography  */
/*-------------------------------------*/

/* 調整背景色和文字顏色，使用柔和的中性色 */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #F5F5F5; /* 暖白色背景 */
    color: #333333; /* 深灰色文字 */
}

/* 調整連結顏色 */
a {
    color: #6C63AC; /* 柔和的紫色 */
}

    a:hover,
    a:focus {
        color: #4C4580; /* 滑鼠移入時的深紫色 */
    }

/*-------------------------------------*/
/* 2. Navigation & Header  */
/*-------------------------------------*/

/* 調整主導覽列顏色 */
.navbar-default {
    background-color: #8B7EAC; /* 主紫色背景 */
    border-color: #6C63AC;
}

    .navbar-default .navbar-brand,
    .navbar-default .navbar-nav > li > a {
        color: #ffffff; /* 白色文字 */
    }

        .navbar-default .navbar-nav > .active > a,
        .navbar-default .navbar-nav > .active > a:hover,
        .navbar-default .navbar-nav > .active > a:focus,
        .navbar-default .navbar-nav > li > a:hover,
        .navbar-default .navbar-nav > li > a:focus {
            color: #ffffff;
            background-color: #6C63AC; /* 滑鼠移入或激活時的深紫色 */
        }

/*-------------------------------------*/
/* 3. Buttons & UI Elements  */
/*-------------------------------------*/

/* 調整主按鈕樣式 */
.btn-primary {
    background-color: #8B7EAC;
    border-color: #6C63AC;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #6C63AC;
        border-color: #4C4580;
    }

/* 移除過多的圓角 */
.btn,
.form-control,
.panel,
.panel-heading,
.well,
.nav-tabs,
.pagination > li > a,
.pagination > li > span {
    border-radius: 4px; /* 稍微減小圓角 */
}

/* 1. 調整所有卡片/面板的通用樣式 */
.panel, .well {
    /* 移除 United 主題的舊樣式並添加現代風格 */
    background-color: #ffffff; /* 確保卡片背景是白色 */
    border: 1px solid #dddddd; /* 加上淺灰色邊框 */
    border-radius: 4px; /* 統一圓角 */
    box-shadow: 0 2px 4px rgba(0,0,0,.08); /* 增加柔和陰影 */
    margin-bottom: 20px; /* 確保卡片間有足夠的間距 */
}

/* 2. 調整卡片標題/內容的樣式 */
.panel-body, .well-body {
    padding: 15px; /* 增加內邊距 */
}

/* 3. 調整圖片下方的文字顏色 */
/* .panel .panel-body p, .well p */
/* 上面的選擇器可能不夠精確，可以嘗試這個更廣泛的 */
.panel p, .well p {
    color: #666666; /* 使用柔和的深灰色 */
    margin-bottom: 5px; /* 調整行距 */
    font-size: 14px; /* 調整字體大小 */
    line-height: 1.4; /* 調整行高，讓文字更易讀 */
}

/* 4. 調整底部的按鈕區域 */
.panel-footer, .well-footer {
    padding: 10px 15px; /* 增加內邊距 */
    background-color: transparent; /* 移除背景色 */
    border-top: none; /* 移除頂部邊框線 */
    text-align: center; /* 讓按鈕居中 */
}

/* 調整表單控制項 */
.form-control {
    border-color: #cccccc;
    box-shadow: none; /* 移除預設陰影 */
}

    .form-control:focus {
        border-color: #8B7EAC;
        box-shadow: 0 0 0 0.2rem rgba(139, 126, 172, .25); /* 添加焦點陰影 */
    }

/*-------------------------------------*/
/* 4. Badges & Labels  */
/*-------------------------------------*/

/* 調整狀態標籤的顏色 */
.label-info, .badge-info {
    background-color: #D9B4C7; /* 淺粉色 */
}

.label-warning, .badge-warning {
    background-color: #FFF8E1; /* 淺米黃色 */
}

.label-danger, .badge-danger {
    background-color: #C0798C; /* 稍深的粉色 */
}

.label-success, .badge-success {
    background-color: #B5AACC; /* 淺灰紫色 */
}

@media (max-width: 767px) {
    /* 增加課程區塊底部的間距 */
    .panel,
    .well,
    .col-md-4,
    .card { /* 替換成您實際的容器類別 */
        margin-bottom: 30px !important; /* 在手機上設定較大的底部間距 */
    }
}

@media (max-width: 991px) {
    /* 增加課程區塊底部的間距 */
    .panel,
    .well,
    .col-md-4,
    .card { /* 替換成您實際的容器類別 */
        margin-bottom: 30px !important; /* 在手機上設定較大的底部間距 */
    }
}}