/* app.css — สไตล์เสริมจาก Bootstrap 5 (โหลดหลัง site.css) */

/* ---------- สีแบรนด์: ให้ปุ่ม/ลิงก์ของ Bootstrap เป็นโทนแดง Boston ---------- */
.site {
    --bs-primary: #9e1b1e;
    --bs-primary-rgb: 158, 27, 30;
    --bs-link-color: #9e1b1e;
    --bs-link-hover-color: #7a1114;
    --bs-link-color-rgb: 158, 27, 30;
    --bs-link-hover-color-rgb: 122, 17, 20;
    --bs-body-font-family: "Anuphan", system-ui, sans-serif;
}
.site .btn-primary {
    --bs-btn-bg: #9e1b1e;
    --bs-btn-border-color: #9e1b1e;
    --bs-btn-hover-bg: #7a1114;
    --bs-btn-hover-border-color: #7a1114;
    --bs-btn-active-bg: #5e0c10;
    --bs-btn-active-border-color: #5e0c10;
    --bs-btn-disabled-bg: #9e1b1e;
    --bs-btn-disabled-border-color: #9e1b1e;
}
.site .btn-outline-primary {
    --bs-btn-color: #9e1b1e;
    --bs-btn-border-color: #9e1b1e;
    --bs-btn-hover-bg: #9e1b1e;
    --bs-btn-hover-border-color: #9e1b1e;
    --bs-btn-active-bg: #7a1114;
    --bs-btn-active-border-color: #7a1114;
}
.site .nav-pills { --bs-nav-pills-link-active-bg: #9e1b1e; --bs-nav-link-color: #9e1b1e; }
.site .pagination { --bs-pagination-color: #9e1b1e; --bs-pagination-hover-color: #7a1114; --bs-pagination-focus-color: #7a1114; --bs-pagination-active-bg: #9e1b1e; --bs-pagination-active-border-color: #9e1b1e; }
.site .text-primary { color: #9e1b1e !important; }
.site .form-control:focus,
.site .form-select:focus,
.site .form-check-input:focus { border-color: #d48a8c; box-shadow: 0 0 0 .25rem rgba(158, 27, 30, .15); }
.site .form-check-input:checked { background-color: #9e1b1e; border-color: #9e1b1e; }
.site .progress { --bs-progress-bar-bg: #9e1b1e; }
.app-page { background: var(--grey, #f4f5f7); }

/* ---------- header / footer ตามดีไซน์ ---------- */
.site-header { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid var(--line); }
.flex-none { flex: none; }
.btn-brand {
    background: var(--red); color: #fff; font-weight: 600; font-size: 15px;
    padding: 11px 24px; border-radius: 6px; white-space: nowrap; display: inline-block;
}
.btn-brand:hover, .btn-brand:focus { color: #fff; background: var(--red-2); }
.site-menu-btn {
    width: 42px; height: 42px; border: 1px solid var(--line); background: #fff; color: var(--ink);
    border-radius: 6px; font-size: 20px; flex: none;
}
.site-menu-link { padding: 12px 0; border-bottom: 1px solid var(--line); }
.social-btn {
    width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.social-btn:hover { color: #fff; }
.site-header .dropdown-toggle { font-size: 15.5px; }
.site-header nav .navlink { font-size: 16px; white-space: nowrap; }
/* ข้อความใต้ header ไม่ถูกบังเมื่อกดลิงก์ #anchor */
.site section[id] { scroll-margin-top: 80px; }

.hero-card {
    max-width: 720px;
    margin: 0 auto;
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.price-badge { font-size: 1.5rem; font-weight: 700; }

.btn-enroll {
    padding: .9rem 2.5rem;
    font-size: 1.15rem;
    font-weight: 600;
    border-radius: .75rem;
}

/* ปุ่ม Google Sign-In (พื้นขาว ขอบเทา ตามแนวทางแบรนด์ของ Google) */
.btn-google {
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: .5rem;
    font-weight: 500;
}
.btn-google:hover,
.btn-google:focus {
    background: #f8f9fa;
    color: #3c4043;
    border-color: #d2e3fc;
}

/* เส้นคั่น "หรือ" */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #6c757d;
    font-size: .875rem;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid #dee2e6;
}

.course-card {
    border: none;
    border-radius: .9rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.course-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
}

.course-img { height: 170px; object-fit: cover; }
.course-img-placeholder {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
}