/*================================================================================
	Thai Font Styles - Kanit
	ใช้สำหรับทั้ง Project เพื่อให้ฟอนต์ไทยแสดงผลสวยงามและทันสมัย
================================================================================*/

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i%7COpen+Sans:300,300i,400,400i,600,600i,700,700i');

/* Modern Thai Font - Base Styles */
/* ภาษาไทยใช้ Kanit, ภาษาอังกฤษใช้ Montserrat/Open Sans จาก template */
/* ใช้ font stack ที่มีทั้งสองฟอนต์ - Browser จะเลือกอัตโนมัติตาม unicode */
body, html {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* กำหนดให้ Kanit ใช้เฉพาะกับตัวอักษรภาษาไทย (U+0E00-0E7F) */
@font-face {
    font-family: 'Kanit Thai';
    src: url('https://fonts.gstatic.com/s/kanit/v15/nKKZ-Go6G5tXcraBGwCKd6xBDFs.woff2') format('woff2');
    unicode-range: U+0E00-0E7F, U+200C-200D, U+25CC;
    font-display: swap;
}

/* สำหรับหน้าเว็บที่มี lang="th" - ใช้ font stack ที่มี Kanit */
body:lang(th), 
html:lang(th) {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Headings - ใช้ font stack ที่มีทั้ง template font และ Kanit */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Card Styles - ใช้ font stack ที่มีทั้ง template font และ Kanit */
.card-title {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.25rem;
}

.card-subtitle {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.95rem;
}

/* Form Controls - ใช้ font stack ที่มีทั้ง template font และ Kanit */
input, textarea, select {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px !important;
    padding: 12px 16px !important;
    height: auto;
}

input::placeholder, textarea::placeholder {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
}

label {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
}

.form-control {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px !important;
}

/* Form Icon Positioning - Override theme CSS */
.has-icon-left input.form-control,
.has-icon-left textarea.form-control {
    padding-left: 45px !important;
}

fieldset.has-icon-left {
    position: relative !important;
}

/* Fix icon positioning to center - override theme defaults with highest specificity */
fieldset.has-icon-left .form-control-position,
fieldset.form-group.has-icon-left .form-control-position,
fieldset.position-relative.has-icon-left .form-control-position,
.form-group.position-relative.has-icon-left .form-control-position,
.has-icon-left .form-control-position,
.position-relative.has-icon-left .form-control-position,
.has-icon-left .form-control ~ .form-control-position,
fieldset.position-relative.has-icon-left .form-control-position {
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
    -moz-transform: translateY(-50%) !important;
    -ms-transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    display: flex !important;
    -webkit-display: flex !important;
    align-items: center !important;
    -webkit-align-items: center !important;
    justify-content: center !important;
    -webkit-justify-content: center !important;
    line-height: 1 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Specific fix for username and password fields that have small text below */
#username ~ .form-control-position,
#password ~ .form-control-position,
#confirm_password ~ .form-control-position {
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
    -moz-transform: translateY(-50%) !important;
    -ms-transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    display: flex !important;
    -webkit-display: flex !important;
    align-items: center !important;
    -webkit-align-items: center !important;
    justify-content: center !important;
    -webkit-justify-content: center !important;
    line-height: 1 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

fieldset.has-icon-left .form-control {
    margin-bottom: 0 !important;
}

/* Fix icon inside form-control-position */
fieldset.has-icon-left .form-control-position i,
.has-icon-left .form-control-position i,
.position-relative.has-icon-left .form-control-position i,
.has-icon-left .form-control ~ .form-control-position i,
fieldset.position-relative.has-icon-left .form-control-position i {
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    vertical-align: middle !important;
    width: auto !important;
    height: auto !important;
}

/* Buttons - ใช้ font stack ที่มีทั้ง template font และ Kanit */
.btn {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    padding: 12px 24px;
    font-weight: 500;
}

button {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
}

/* Alerts - ใช้ font stack ที่มีทั้ง template font และ Kanit */
.alert {
    margin-top: 15px;
    padding: 14px 20px;
    border-radius: 4px;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

/* Helper Text */
.form-text {
    font-size: 14px;
}

/* Card Body */
.card-body {
    font-size: 14px;
}

/* Terms Label - Smaller font */
label[for="terms"] {
    font-size: 14px !important;
    font-weight: 400;
}

/* Location Status */
#locationStatus {
    font-size: 14px;
    margin-top: 5px;
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Spinner */
.spinner-border-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* Navbar Styles - ใช้ font stack ที่มีทั้ง template font และ Kanit */
.navbar-brand,
.brand-text {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
}

.nav-link,
.navbar-nav .nav-link {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.user-name,
.dropdown-user .user-name {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.dropdown-menu,
.dropdown-item {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.navbar-nav .dropdown-menu {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Sidebar/Main Menu Styles - ใช้ font stack ที่มีทั้ง template font และ Kanit */
.main-menu,
.menu-fixed,
.menu-dark,
.menu-accordion,
.navigation,
.navigation-main,
.navigation-header,
.nav-item,
.nav-item a,
.nav-item .menu-title,
.menu-title,
.navigation li,
.navigation li a,
.navigation li span {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Menu Header */
.navigation-header {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
}

.navigation-header span {
    font-family: 'Montserrat', 'Open Sans', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
}