/*
Theme Name: megabet333 TH
Theme URI: https://megabet333b.com/
Author: megabet333
Description: Custom Thai theme for megabet333b.com. Layout preserved byte-for-byte from the original static build; all routing, content and schema live in functions.php / content.php.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: megabet333-th
*/

:root {
    --main-color: #dc3545;
    --dark-color: #32373c;
    --bg-color: #f9f9f9;
    --text-color: #333;
}
body { margin: 0; font-family: 'Prompt', sans-serif; line-height: 1.7; color: var(--text-color); background: #fff; padding-bottom: 0; }
img { max-width: 100%; height: auto; display: block; border-radius: 8px; }
a { text-decoration: none; color: var(--main-color); transition: 0.3s; }
a:hover { color: #a71d2a; }

h1 { font-size: 28px; color: #111; line-height: 1.4; margin-bottom: 20px; }
h2 { font-size: 24px; color: #222; line-height: 1.4; margin-top: 40px; margin-bottom: 15px; border-left: 5px solid var(--main-color); padding-left: 15px; }
h3 { font-size: 20px; color: #444; margin-top: 25px; margin-bottom: 10px; }
p { margin-bottom: 15px; font-size: 16px; color: #555; text-align: justify; }

.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
.row { display: flex; flex-wrap: wrap; margin: -15px; align-items: center; }
.col { padding: 15px; box-sizing: border-box; width: 100%; }

.btn { display: inline-block; background-color: var(--main-color); color: #fff !important; padding: 10px 20px; border-radius: 6px; font-weight: bold; text-align: center; }
.btn-dark { background-color: var(--dark-color); }
.btn-outline { background-color: transparent; border: 2px solid var(--main-color); color: var(--main-color) !important; }
.btn-outline:hover { background-color: var(--main-color); color: #fff !important; }
.align-center { text-align: center; }

header { border-bottom: 1px solid #eee; padding: 15px 0; background: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.header-logo { max-height: 50px; width: auto; display: inline-block; }
.nav-menu { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.nav-menu a { color: #333; font-weight: 600; font-size: 16px; }
.nav-menu a:hover { color: var(--main-color); }

.hero-images { margin-bottom: 30px; }
.hero-images img { box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: 100%; }
.content-image { margin: 40px 0 20px 0; box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: 100%; }

footer { background: var(--bg-color); padding: 40px 0 20px 0; margin-top: 50px; border-top: 1px solid #eee; }
.footer-logo { max-height: 40px; margin-bottom: 20px; display: inline-block; }
.footer-text { text-align: center; padding-top: 20px; margin-top: 20px; border-top: 1px solid #ddd; color: #888; font-size: 14px; }

.mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 999; justify-content: space-around; padding: 8px 0; padding-bottom: env(safe-area-inset-bottom, 8px); }
.mobile-bottom-nav a { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: #666; font-weight: bold; gap: 4px; }
.mobile-bottom-nav a.active { color: var(--main-color); }
.mobile-bottom-nav svg { width: 22px; height: 22px; fill: currentColor; }

/* --- Logo: inline SVG wordmark until the real file is in the media library --- */
.site-logo { display: inline-block; line-height: 0; }
.mb-logo-svg { height: 50px; width: auto; max-width: 100%; display: block; }
.site-logo-img { max-height: 50px; width: auto; display: block; }
.site-footer-logo { display: inline-block; line-height: 0; margin-bottom: 20px; }
.site-footer-logo .mb-logo-svg,
.site-footer-logo-img { height: 40px; max-height: 40px; }

/* --- Image placeholders: keep the exact slot the real artwork will occupy --- */
.img-ph {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ph-ratio, 16 / 9);
    border-radius: 8px;
    border: 2px dashed #e0c2c6;
    background:
        repeating-linear-gradient(45deg, rgba(220,53,69,0.035) 0 12px, rgba(220,53,69,0.075) 12px 24px),
        var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: 16px;
}
.img-ph b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #b9666f;
    line-height: 1.5;
    max-width: 90%;
}
.img-ph b i { display: block; font-style: normal; font-weight: 500; font-size: 11px; color: #a99; margin-top: 6px; letter-spacing: 0.5px; }
.hero-images .img-ph { box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.content-image-ph { margin: 40px 0 20px 0; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }

/* --- Small helpers used by the rebuilt pages --- */
.mb-cta { margin-top: 30px; }
.mb-cta .btn { font-size: 18px; padding: 15px 40px; }
.faq-intro { margin: 0 0 24px; padding: 16px 18px; background: color-mix(in srgb, var(--main-color) 6%, #fff); border-left: 4px solid var(--main-color); border-radius: 0 8px 8px 0; }
.mb-note { background: var(--bg-color); border-left: 5px solid var(--main-color); border-radius: 0 8px 8px 0; padding: 15px 20px; margin: 25px 0; }
.mb-note p:last-child { margin-bottom: 0; }
.mb-table-wrap { overflow-x: auto; margin: 20px 0; }
.mb-table { width: 100%; border-collapse: collapse; min-width: 420px; }
.mb-table th, .mb-table td { border: 1px solid #eee; padding: 10px 12px; text-align: left; font-size: 15px; }
.mb-table th { background: var(--bg-color); color: #222; font-weight: 700; }

@media(min-width: 768px) {
    .col-20 { width: 20%; }
    .col-25 { width: 25%; }
    .col-33 { width: 33.3333%; }
    .col-40 { width: 40%; }
    .col-50 { width: 50%; }
    .col-60 { width: 60%; }
    .hidden-desktop { display: none !important; }
    .header-buttons { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
}

@media(max-width: 767px) {
    body { padding-bottom: 60px; }
    .hidden-mobile { display: none !important; }
    .container { padding: 15px; }
    h1 { font-size: 24px; }
    h2 { font-size: 20px; border-left-width: 4px; }
    h3 { font-size: 18px; }
    .mobile-bottom-nav { display: flex; }
    header { padding: 10px 0; }
    .header-logo { max-height: 40px; }
    .mb-logo-svg, .site-logo-img { height: 38px; max-height: 38px; }
    .row { margin: -10px; }
    .col { padding: 10px; }
    footer { padding-bottom: 80px; }
}