/* --- Root Variables --- */
:root {
    --primary-color: #0369a1;
    --accent-color: #73b6ff;
    --bg-light: #f8fafc;
    --card-bg: #e8f1f8;
}

body {
    background: linear-gradient(180deg, #e0f2fe 0%, #ffffff 100%);
    background-attachment: fixed;
    font-family: 'Sarabun', sans-serif;
    color: #334155;
}

.container-custom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- Navbar --- */
.custom-nav { background: #73b6ff; }
.nav-logo { height: 50px; transition: 0.3s; }
.nav-link { font-weight: bold; color: #000 !important; }
.search-box input { background: #c6fcff; }

/* --- Feature Cards --- */
.feature-card {
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #ddd;
}
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.card-img-wrapper { height: 200px; overflow: hidden; }
.card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.feature-card:hover .card-img-wrapper img { transform: scale(1.15); }
.card-link { text-decoration: none; color: inherit; }

/* --- Gallery & Lightbox --- */
.section-title { color: var(--primary-color); font-weight: bold; text-align: center; }
.gallery-item {
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.img-trigger img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: 0.5s; }
.img-caption {
    position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.6);
    color: #fff; text-align: center; padding: 10px; font-size: 0.9rem; opacity: 0; transition: 0.3s;
}
.gallery-item:hover .img-caption { opacity: 1; }
.gallery-item:hover img { transform: scale(1.1); }

/* Lightbox Logic */
.lightbox-toggle { display: none; }
.lightbox-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 9999; display: none;
    justify-content: center; align-items: center; padding: 20px;
}
.lightbox-overlay label { position: absolute; width: 100%; height: 100%; cursor: zoom-out; }
.lightbox-overlay img { max-width: 90%; max-height: 85vh; border: 5px solid #fff; border-radius: 10px; z-index: 10000; }
.lightbox-toggle:checked + .lightbox-overlay { display: flex; animation: fadeIn 0.3s; }

/* --- Character Selection --- */
.char-display { height: 400px; display: flex; align-items: center; justify-content: center; }
.char-animate { animation: charSlideUp 0.6s ease-out; }
.thumb {
    width: 80px; height: 80px; border-radius: 12px; border: 3px solid #ddd;
    cursor: pointer; overflow: hidden; transition: 0.3s;
}
.thumb.active { border-color: var(--primary-color); transform: scale(1.1); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* --- Animations --- */
@keyframes charSlideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .char-display { height: 280px; }
    .section-title { font-size: 1.5rem; }
    .nav-logo { height: 40px; }
}

.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgb(90 110 130) !important;
}