/* =========================================================
 * Light theme override สำหรับ registerfree (Tailwind dark → Light Aurora)
 * โหลด *หลัง* Tailwind CDN เพื่อ override ผ่าน specificity + !important
 * ========================================================= */

:root {
    --fh-primary: #0d6efd;
    --fh-secondary: #8A2BE2;
    --fh-bg: #f0f2f5;
    --fh-card: #ffffff;
    --fh-text: #343a40;
    --fh-text-muted: #6c757d;
    --fh-border: rgba(13, 110, 253, 0.18);
}

body {
    background-color: var(--fh-bg) !important;
    color: var(--fh-text) !important;
    font-family: 'Prompt', sans-serif !important;
}

/* Background grid + glow → ใช้สี primary แทน */
.bg-grid {
    background-image:
        linear-gradient(to right, rgba(13, 110, 253, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(13, 110, 253, 0.04) 1px, transparent 1px) !important;
}
.glow-bg { opacity: .55; }
.glow-1 { background: rgba(13, 110, 253, 0.15) !important; }

/* ===== Navbar ===== */
nav {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(222, 226, 230, 0.5) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
nav .text-white { color: var(--fh-text) !important; }

/* ===== Surface dark → light ===== */
.bg-\[\#040A18\],
.bg-\[\#040A18\]\/80,
[class*="bg-[#040A18"] {
    background-color: var(--fh-card) !important;
}

.bg-\[\#0A152C\],
.bg-\[\#0A152C\]\/80,
[class*="bg-[#0A152C"],
[class*="from-[#0A152C"] {
    background: rgba(255, 255, 255, 0.85) !important;
    background-image: none !important;
}

.bg-gray-900,
.bg-gray-900\/50,
.bg-gray-900\/80,
.to-gray-900 {
    background-color: rgba(248, 249, 250, 0.85) !important;
}

.bg-gray-800,
.bg-gray-800\/50 {
    background-color: rgba(233, 236, 239, 0.85) !important;
}

/* ===== Text ===== */
.text-white { color: var(--fh-text) !important; }
.text-gray-300 { color: #495057 !important; }
.text-gray-400 { color: var(--fh-text-muted) !important; }
.text-gray-500 { color: #868e96 !important; }

/* Accent colors เก็บแต่ปรับเฉด */
.text-blue-400, .text-blue-500 { color: var(--fh-primary) !important; }
.text-purple-400, .text-purple-500 { color: var(--fh-secondary) !important; }
.text-green-400 { color: #198754 !important; }
.text-orange-400 { color: #fd7e14 !important; }
.text-yellow-300, .text-yellow-500 { color: #b8860b !important; }
.text-red-400, .text-red-500 { color: #dc3545 !important; }

/* ===== Borders ===== */
.border-gray-700, .border-gray-800,
[class*="border-gray-7"], [class*="border-gray-8"] {
    border-color: var(--fh-border) !important;
}
.border-white\/5 { border-color: rgba(13, 110, 253, 0.1) !important; }

/* Highlight borders (เลือก/hover) */
.border-blue-500,
.peer-checked\:border-blue-500:where(input[type="radio"]:checked ~ *),
.hover\:border-blue-500\/50:hover {
    border-color: var(--fh-primary) !important;
}
.border-blue-500\/30 { border-color: rgba(13, 110, 253, 0.4) !important; }
.border-purple-500\/30, .border-purple-500\/40 { border-color: rgba(138, 43, 226, 0.4) !important; }
.border-green-500\/30 { border-color: rgba(25, 135, 84, 0.4) !important; }
.border-yellow-500\/30 { border-color: rgba(184, 134, 11, 0.4) !important; }
.border-red-500\/30 { border-color: rgba(220, 53, 69, 0.4) !important; }

/* ===== Form inputs ===== */
input, select, textarea {
    background-color: #ffffff !important;
    color: var(--fh-text) !important;
    border-color: var(--fh-border) !important;
}
input::placeholder, textarea::placeholder { color: #adb5bd !important; }
input:focus, select:focus, textarea:focus {
    border-color: var(--fh-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, 0.15) !important;
    outline: none !important;
}

/* ===== Alert tints ===== */
.bg-blue-500\/10, .bg-blue-500\/20, .bg-blue-900\/20 {
    background-color: rgba(13, 110, 253, 0.1) !important;
}
.bg-purple-500\/10, .bg-purple-500\/20 {
    background-color: rgba(138, 43, 226, 0.1) !important;
}
.bg-green-500\/10 { background-color: rgba(25, 135, 84, 0.1) !important; }
.bg-yellow-500\/10 { background-color: rgba(255, 193, 7, 0.12) !important; }
.bg-red-500\/10 { background-color: rgba(220, 53, 69, 0.1) !important; }

/* ===== Buttons ===== */
.bg-blue-600 { background-color: var(--fh-primary) !important; color: #fff !important; }
.hover\:bg-blue-500:hover { background-color: #3d8bfd !important; }
.bg-purple-600 { background-color: var(--fh-secondary) !important; color: #fff !important; }
.hover\:bg-purple-500:hover { background-color: #9a4ce8 !important; }

/* Glow shadow ของ form card → subtle blue */
[class*="shadow-\[0_0_50px_rgba(168\,85\,247"] {
    box-shadow: 0 8px 40px rgba(13, 110, 253, 0.12) !important;
}
[class*="shadow-\[0_0_15px_rgba(37\,99\,235"] {
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.18) !important;
}

/* ปุ่ม "back" / "เปลี่ยนบริการ" ที่เป็นพื้นเทา */
button.bg-gray-900,
a.bg-gray-800 {
    background-color: #ffffff !important;
    color: var(--fh-text) !important;
    border-color: var(--fh-border) !important;
}
button.bg-gray-900:hover,
a.bg-gray-800:hover {
    background-color: #f1f3f5 !important;
}

/* Marker bullets */
.marker\:text-gray-600 > * { color: var(--fh-text-muted) !important; }

/* ===== Disabled button state (สำคัญ — ต้องเห็นชัดว่ากดไม่ได้) ===== */
button:disabled,
button.opacity-50,
.opacity-50 {
    background: #adb5bd !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.65 !important;
    box-shadow: none !important;
    filter: grayscale(40%);
}

button:disabled:hover,
button.opacity-50:hover {
    background: #adb5bd !important;
    transform: none !important;
}

/* Checkbox / Radio accent สีฟ้า */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--fh-primary) !important;
    cursor: pointer !important;
}