:root {
    --paper: #fffaf2;
    --ink: #4a3b2f;
    --green: #3f7d3a;
    --green-soft: #e4f2dc;
    --pink: #e8628a;
    --pink-soft: #fde6ee;
    --yellow-soft: #fff4cc;
    --sky-soft: #e3f1fb;
    --lilac-soft: #efe6fb;
    --radius: 1.25rem;
}

body {
    font-family: "Sarabun", system-ui, sans-serif;
    color: var(--ink);
    background: var(--paper);
    background-image:
        radial-gradient(circle at 10% 0%, #fde6ee 0, transparent 35%),
        radial-gradient(circle at 95% 10%, #e4f2dc 0, transparent 30%),
        radial-gradient(circle at 50% 100%, #e3f1fb 0, transparent 40%);
    background-attachment: fixed;
}

h1, h2, h3, h4, .brand, .display-font { font-family: "Mali", "Sarabun", cursive; }
a { color: var(--green); }

.site-nav { background: rgba(255, 250, 242, .92); backdrop-filter: blur(8px); border-bottom: 1px dashed #e6d7c3; }
.brand { color: var(--green) !important; font-weight: 700; }
.site-footer { background: #fff; border-top: 1px dashed #e6d7c3; }

.btn-soft-green { background: var(--green-soft); color: var(--green); border: 1px solid #cfe6c3; }
.btn-soft-green:hover { background: #d3eac6; color: var(--green); }
.btn-main { background: var(--green); color: #fff; border: none; border-radius: 999px; padding: .65rem 1.6rem; font-weight: 600; box-shadow: 0 6px 16px rgba(63, 125, 58, .25); }
.btn-main:hover { background: #336a2f; color: #fff; }
.btn-pink { background: var(--pink); color: #fff; border: none; border-radius: 999px; }
.btn-pink:hover { background: #d84c76; color: #fff; }

.card-soft { background: #fff; border: none; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(120, 90, 50, .08); }
.section-title { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.section-title i { font-size: 1.4rem; color: var(--pink); }

/* hero */
.hero { padding: 3rem 0 2rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); color: var(--green); }
.hero .lead { font-size: 1.15rem; }
.blob { border-radius: 2rem; overflow: hidden; box-shadow: 0 16px 40px rgba(120, 90, 50, .18); transform: rotate(-1.5deg); }

/* course card */
.course-card { transition: transform .2s, box-shadow .2s; overflow: hidden; height: 100%; }
.course-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(120, 90, 50, .15); }
.course-card .cover { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 500; }
.chip-green { background: var(--green-soft); color: var(--green); }
.chip-pink { background: var(--pink-soft); color: #b8345c; }
.chip-yellow { background: var(--yellow-soft); color: #8a6a00; }
.chip-sky { background: var(--sky-soft); color: #23638f; }
.chip-lilac { background: var(--lilac-soft); color: #6a3fa0; }
.price-tag { font-family: "Mali", cursive; font-size: 1.6rem; color: var(--pink); font-weight: 700; }

/* course detail */
.detail-hero { position: relative; border-radius: 2rem; overflow: hidden; }
.detail-hero img { width: 100%; max-height: 440px; object-fit: cover; }
.detail-hero .overlay { position: absolute; inset: auto 0 0 0; padding: 2rem; background: linear-gradient(transparent, rgba(40, 30, 20, .7)); color: #fff; }
.detail-hero h1 { text-shadow: 0 2px 8px rgba(0, 0, 0, .3); }

.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 1rem; cursor: zoom-in; transition: transform .2s; }
.gallery img:hover { transform: scale(1.03); }

/* timeline */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ""; position: absolute; left: .55rem; top: .5rem; bottom: .5rem; border-left: 3px dotted #d9c7ae; }
.tl-item { position: relative; margin-bottom: 1.25rem; }
.tl-dot { position: absolute; left: -1.5rem; top: .9rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; border: 3px solid var(--pink); display: grid; place-items: center; }
.tl-item:nth-child(4n+2) .tl-dot { border-color: var(--green); }
.tl-item:nth-child(4n+3) .tl-dot { border-color: #8b5cf6; }
.tl-item:nth-child(4n+4) .tl-dot { border-color: #f59e0b; }
.tl-time { font-family: "Mali", cursive; font-weight: 700; color: var(--green); white-space: nowrap; }
.tl-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 1rem; cursor: zoom-in; }
.tl-icon { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--yellow-soft); color: #b07d00; font-size: 1.2rem; flex-shrink: 0; }

/* sessions */
.session-row { border: 2px dashed #eadbc6; border-radius: 1rem; padding: 1rem; background: #fff; }
.session-row.full { opacity: .65; }
.seat-bar { height: .65rem; border-radius: 999px; background: #f1e8db; overflow: hidden; }
.seat-bar > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8fd18a, var(--green)); }
.seat-bar.warn > div { background: linear-gradient(90deg, #ffc46b, #f08b2b); }
.seat-bar.full > div { background: linear-gradient(90deg, #f59ab3, var(--pink)); }

.map-frame { width: 100%; height: 320px; border: 0; border-radius: 1rem; }
.sticky-side { position: sticky; top: 5rem; }

.step { display: flex; gap: .75rem; align-items: flex-start; }
.step .num { width: 2rem; height: 2rem; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.qr-box { background: #fff; border: 2px solid #0e3e6b; border-radius: 1rem; padding: 1rem; display: inline-block; }
.qr-box .pp-head { background: #0e3e6b; color: #fff; margin: -1rem -1rem 1rem; padding: .5rem; border-radius: .8rem .8rem 0 0; font-weight: 700; letter-spacing: .05em; }
#qrcode img, #qrcode canvas { margin: auto; }

.form-control, .form-select { border-radius: .8rem; }
.form-control:focus, .form-select:focus { border-color: #9ccf94; box-shadow: 0 0 0 .2rem rgba(63, 125, 58, .15); }

.lightbox img { max-height: 85vh; width: auto; max-width: 100%; }
.validation-summary-valid { display: none; }
.input-validation-error { border-color: #dc3545; }

/* QR Code */
.qr-code img, .qr-code canvas { width: 260px !important; height: 260px !important; image-rendering: pixelated; margin: auto; }
.qr-stage:fullscreen { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; }
.qr-stage:fullscreen .qr-code img, .qr-stage:fullscreen .qr-code canvas { width: min(75vh, 85vw) !important; height: min(75vh, 85vw) !important; }
.qr-stage:fullscreen .qr-title { font-size: 2.5rem !important; color: var(--green); }
.qr-stage:fullscreen .qr-hint { font-size: 1.5rem !important; }

.site-qr { cursor: pointer; transition: transform .2s, box-shadow .2s; max-width: 100%; }
.site-qr:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(120, 90, 50, .15); }
.qr-inline img, .qr-inline canvas { width: 110px !important; height: 110px !important; image-rendering: pixelated; }


/* ================= Mobile / responsive ================= */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
img { max-width: 100%; }
.qr-code img, .qr-code canvas { width: min(260px, 62vw) !important; height: min(260px, 62vw) !important; }
#qrcode img, #qrcode canvas { max-width: 100%; height: auto !important; }

/* แถบจองด้านล่างหน้าคอร์ส (มือถือ) */
.mobile-book-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px);
    border-top: 1px dashed #e6d7c3; box-shadow: 0 -6px 20px rgba(120, 90, 50, .1);
}
.mobile-book-bar .btn-main { padding: .55rem 1.1rem; white-space: nowrap; }

@media (max-width: 991.98px) {
    .sticky-side { position: static; }
    .detail-hero img { max-height: 300px; }
    .detail-hero .overlay { padding: 1.25rem; }
}

@media (max-width: 767.98px) {
    .hero { padding: 1.5rem 0 1rem; }
    .hero .lead { font-size: 1rem; }
    .blob { transform: none; border-radius: 1.25rem; }
    .card-soft.p-4, .card-soft.p-md-5 { padding: 1.1rem !important; }
    .detail-hero { border-radius: 1.25rem; }
    .detail-hero h1 { font-size: 1.5rem; }
    .detail-hero img { max-height: 240px; }
    .section-title h2 { font-size: 1.2rem; }
    .tl-item .fs-5 { font-size: 1.05rem !important; }
    .map-frame { height: 240px; }
    .price-tag { font-size: 1.35rem; }
    .gallery img { border-radius: .75rem; }
    .booking-summary img { aspect-ratio: 21/9 !important; }
    .qr-box { padding: .75rem; }
    .site-qr { display: flex !important; }
    /* iOS ไม่ซูมเมื่อแตะช่องกรอก */
    .form-control, .form-select, .form-control-sm { font-size: 16px; }
    .btn { touch-action: manipulation; }

    /* ตารางหลังบ้าน → การ์ดซ้อนกันบนมือถือ */
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr { display: block; width: 100%; }
    .table-stack tr { background: #fff; border: 1px solid #eee3d3; border-radius: 1rem; padding: .6rem .85rem; margin-bottom: .75rem; }
    .table-stack td { display: flex; justify-content: space-between; align-items: center; gap: .75rem; border: 0; padding: .25rem 0 !important; text-align: right; }
    .table-stack td::before { content: attr(data-label); color: #9a8b7a; font-size: .85rem; text-align: left; flex-shrink: 0; }
    .table-stack td:not([data-label])::before { display: none; }
    .table-stack td.td-main, .table-stack td.td-block { display: block; text-align: left; }
    .table-stack td.td-main { font-size: 1.02rem; padding-bottom: .4rem !important; border-bottom: 1px dashed #eee3d3; margin-bottom: .2rem; }
    .table-stack td.td-actions { justify-content: flex-end; flex-wrap: wrap; padding-top: .5rem !important; }
    .table-stack td[colspan] { display: block; text-align: center; }
    .table-responsive:has(.table-stack) { overflow: visible; }
    .admin-main h1.h3 { font-size: 1.3rem; }
    .nav-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .nav-pills .nav-link { white-space: nowrap; }
}

@media (max-width: 374.98px) {
    .container { padding-left: .75rem; padding-right: .75rem; }
    .hero h1 { font-size: 1.75rem; }
    .btn-main { padding: .55rem 1.1rem; }
    .mobile-book-bar .price-tag { font-size: 1.15rem !important; }
    .mobile-book-bar .btn-main { padding: .5rem .8rem; font-size: .9rem; }
    .chip { font-size: .78rem; }
}