/* =====================================================================
   ท่องเที่ยวเทศบาลเมืองนาสาร — Main Stylesheet
   ธีม: เงาะนาสาร (เขียวใบไม้ · แดงเงาะ · ครีม)  |  Professional edition
   ===================================================================== */
:root {
    --na-green:      #2e7d32;
    --na-green-dark: #1b5e20;
    --na-green-soft: #e8f3e9;
    --na-red:        #e23b2e;
    --na-red-dark:   #c52a1e;
    --na-red-soft:   #fde9e7;
    --na-gold:       #f4a261;
    --na-leaf:       #7cb342;

    --tr-blue:   var(--na-green);   /* alias เดิม -> ธีมใหม่ */
    --tr-green:  var(--na-green);

    --tr-radius: 18px;
    --tr-radius-sm: 12px;
    --tr-shadow: 0 8px 30px rgba(20, 50, 25, .08);
    --tr-shadow-lg: 0 18px 50px rgba(20, 50, 25, .16);
    --tr-bg:     #fbfaf6;
    --tr-card:   #ffffff;
    --tr-text:   #243027;
    --tr-muted:  #6b7a70;
    --tr-border: rgba(20,50,25,.08);
}
[data-bs-theme="dark"] {
    --tr-bg:     #11160f;
    --tr-card:   #1a2118;
    --tr-text:   #e7ede4;
    --tr-muted:  #9bab9d;
    --tr-border: rgba(255,255,255,.08);
    --na-green-soft: #1c2a1d;
    --na-red-soft:   #2a1816;
}

* { scroll-behavior: smooth; }
html { scroll-padding-top: 90px; }
body {
    font-family: 'Sarabun', 'Segoe UI', Tahoma, sans-serif;
    background: var(--tr-bg);
    color: var(--tr-text);
    overflow-x: hidden;
}
h1,h2,h3,h4,.navbar-brand,.brand-text { font-family: 'Poppins','Sarabun',sans-serif; letter-spacing:-.01em; }
.text-primary { color: var(--na-green) !important; }
.bg-primary { background: var(--na-green) !important; }
.btn-primary {
    --bs-btn-bg: var(--na-green); --bs-btn-border-color: var(--na-green);
    --bs-btn-hover-bg: var(--na-green-dark); --bs-btn-hover-border-color: var(--na-green-dark);
    --bs-btn-active-bg: var(--na-green-dark);
    box-shadow: 0 4px 14px rgba(46,125,50,.28);
}
.btn-outline-primary { --bs-btn-color: var(--na-green); --bs-btn-border-color: var(--na-green);
    --bs-btn-hover-bg: var(--na-green); --bs-btn-hover-border-color: var(--na-green); }
.badge.bg-primary { background: var(--na-green) !important; }
a { color: var(--na-green); }
.link-accent { color: var(--na-red); }

/* ---------- NAVBAR (glass) ---------- */
.trcms-navbar {
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 2px 20px rgba(20,50,25,.07);
    border-bottom: 1px solid var(--tr-border);
    padding-top:.6rem; padding-bottom:.6rem;
}
[data-bs-theme="dark"] .trcms-navbar { background: rgba(26,33,24,.85); }
.navbar-brand { display:flex; align-items:center; gap:.55rem; font-weight:700; }
.navbar-brand .brand-mascot { width:38px; height:38px; object-fit:contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
.brand-text { font-size:1.12rem; line-height:1.05; background:linear-gradient(120deg,var(--na-green),var(--na-red)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.brand-sub { font-size:.62rem; color:var(--tr-muted); font-weight:600; letter-spacing:.04em; -webkit-text-fill-color: var(--tr-muted); }
.trcms-navbar .nav-link { font-weight:600; color:var(--tr-text); border-radius:10px; padding:.45rem .8rem !important; transition:.2s; }
.trcms-navbar .nav-link:hover { color:var(--na-green) !important; background:var(--na-green-soft); }
.trcms-navbar .nav-link.active { color:#fff !important; background:var(--na-green); }
.search-suggest { max-height:340px; overflow:auto; border:0; box-shadow:var(--tr-shadow-lg); border-radius:var(--tr-radius-sm); }
.search-suggest .dropdown-item { white-space:normal; border-radius:8px; padding:.5rem .7rem; }

/* ---------- HERO ---------- */
.hero-section {
    position:relative;
    background:
        radial-gradient(900px 420px at 15% -10%, rgba(124,179,66,.55), transparent 60%),
        radial-gradient(800px 500px at 100% 0%, rgba(226,59,46,.40), transparent 55%),
        linear-gradient(135deg, var(--na-green-dark), var(--na-green) 55%, #3a9d4f);
    background-size:cover; background-position:center;
    padding:5.5rem 0 6.5rem; overflow:hidden;
}
.hero-section::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:70px;
    background:var(--tr-bg);
    -webkit-mask:radial-gradient(40px at 50% 0,transparent 98%,#000) repeat-x; mask:radial-gradient(40px at 50% 0,transparent 98%,#000) repeat-x;
    -webkit-mask-size:80px 70px; mask-size:80px 70px;
}
.hero-section .container{ position:relative; z-index:2; }
.hero-badge{ display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.2); color:#fff; padding:.3rem .9rem; border-radius:50px; font-size:.82rem; font-weight:600; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25); }
.hero-title { color:#fff; font-weight:800; text-shadow:0 4px 24px rgba(0,0,0,.28); animation:fadeInUp .7s ease; font-size:clamp(1.9rem,4vw,3.1rem); }
.hero-title .accent{ color:#ffe08a; }
.hero-subtitle { color:rgba(255,255,255,.95); animation:fadeInUp .9s ease; }
.hero-search { max-width:680px; animation:fadeInUp 1.05s ease; }
.hero-search .input-group{ border-radius:50px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.22); }
.hero-search .input-group-text,.hero-search .form-control{ padding-top:.85rem; padding-bottom:.85rem; border:0; }
.hero-search .btn{ border-radius:0 50px 50px 0; padding-inline:1.6rem; font-weight:600; background:var(--na-red); border-color:var(--na-red); }
.hero-search .btn:hover{ background:var(--na-red-dark); border-color:var(--na-red-dark); }
.hero-tag { background:rgba(255,255,255,.18); color:#fff; text-decoration:none; margin:.18rem; padding:.3rem .8rem; transition:.2s; backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.22); font-weight:500; }
.hero-tag:hover { background:#fff; color:var(--na-green); }
/* มาสคอตในฮีโร่ (แสดงเฉพาะจอกว้างพอ ไม่ให้ทับเนื้อหา) */
.hero-mascot { position:absolute; bottom:54px; width:200px; z-index:1; pointer-events:none;
    animation:floaty 4s ease-in-out infinite; filter:drop-shadow(0 12px 22px rgba(0,0,0,.28)); display:none; }
@media (min-width:1200px){ .hero-mascot{ display:block; right:calc((100vw - 1130px) / 2); } }
@media (min-width:1500px){ .hero-mascot{ width:240px; right:calc((100vw - 1280px) / 2); } }

/* ---------- SECTION ---------- */
.section-head { position:relative; padding-left:1rem; }
.section-head::before{ content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:5px; border-radius:5px; background:linear-gradient(var(--na-green),var(--na-red)); }
.section-eyebrow{ color:var(--na-red); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }

/* ---------- CATEGORY TILES ---------- */
.category-tile { position:relative; background:var(--tr-card); border-radius:var(--tr-radius); padding:2.2rem 1.5rem; text-align:center; color:var(--tr-text); box-shadow:var(--tr-shadow); border:1px solid var(--tr-border); transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s; overflow:hidden; }
.category-tile::after{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,var(--na-green),var(--na-red)); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.category-tile:hover { transform:translateY(-8px); box-shadow:var(--tr-shadow-lg); }
.category-tile:hover::after{ transform:scaleX(1); }
.category-icon { width:84px; height:84px; margin:0 auto; border-radius:24px; display:flex; align-items:center; justify-content:center; font-size:2.3rem; color:#fff; box-shadow:0 10px 24px rgba(46,125,50,.3); transition:transform .3s; }
.category-tile:hover .category-icon{ transform:rotate(-6deg) scale(1.06); }
.category-tile:nth-child(1) .category-icon{ background:linear-gradient(135deg,#e23b2e,#f4744a); box-shadow:0 10px 24px rgba(226,59,46,.32); }
.category-tile:nth-child(2) .category-icon{ background:linear-gradient(135deg,#2e7d32,#66bb6a); }
.category-tile:nth-child(3) .category-icon{ background:linear-gradient(135deg,#f4a261,#e9c46a); box-shadow:0 10px 24px rgba(244,162,97,.32); }

/* ---------- PLACE CARD ---------- */
.place-card { border-radius:var(--tr-radius); overflow:hidden; background:var(--tr-card); border:1px solid var(--tr-border)!important; transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s; }
.place-card:hover { transform:translateY(-6px); box-shadow:var(--tr-shadow-lg); }
.card-img-wrap { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--na-green-soft); }
.card-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.place-card:hover .card-img-wrap img { transform:scale(1.08); }
.category-badge { position:absolute; top:12px; left:12px; background:rgba(255,255,255,.95); color:var(--na-green-dark); font-weight:600; padding:.4rem .7rem; box-shadow:0 4px 12px rgba(0,0,0,.12); backdrop-filter:blur(4px); }
.stretched-card-title { color:var(--tr-text); text-decoration:none; font-weight:600; }
.stretched-card-title:hover { color:var(--na-green); }
.rating-stars .bi { color:#ffb703; }
.card-title{ line-height:1.35; }

/* ---------- WEATHER ---------- */
.weather-widget { background:linear-gradient(135deg,var(--na-green),#3a9d4f); color:#fff; border-radius:var(--tr-radius); box-shadow:var(--tr-shadow); overflow:hidden; position:relative; }
.weather-widget::before{ content:""; position:absolute; right:-30px; top:-30px; width:130px; height:130px; background:rgba(255,255,255,.12); border-radius:50%; }
.weather-widget h3,.weather-widget *{ color:#fff; position:relative; }
.weather-temp { font-size:2.8rem; font-weight:800; line-height:1; }
.weather-meta { font-size:.85rem; opacity:.92; }

/* ---------- NEWS / NEARBY ROWS ---------- */
.news-thumb { width:92px; height:66px; object-fit:cover; border-radius:12px; flex-shrink:0; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.news-row{ padding:.4rem; border-radius:12px; transition:.2s; }
.news-row:hover{ background:var(--na-green-soft); }
.news-row:hover h3{ color:var(--na-green); }
.nearby-thumb { width:54px; height:54px; object-fit:cover; border-radius:12px; flex-shrink:0; }
.nearby-row{ padding:.4rem; }
.nearby-row:hover { background:var(--na-green-soft); border-radius:12px; }

/* ---------- DETAIL ---------- */
.detail-cover { max-height:480px; border-radius:var(--tr-radius)!important; }
.cover-img { height:480px; object-fit:cover; }
.cover-overlay { position:absolute; inset:auto 0 0 0; padding:2rem 1.75rem 1.5rem; background:linear-gradient(transparent, rgba(0,0,0,.78)); }
.cover-overlay h1{ color:#fff; font-weight:800; }
.detail-description { line-height:1.95; color:var(--tr-text); }
.card{ border-color:var(--tr-border)!important; }
.info-list li { padding:.55rem 0; border-bottom:1px dashed var(--tr-border); }
.info-list li:last-child{ border-bottom:0; }
.sticky-info { position:sticky; top:90px; }
.gallery-item img { aspect-ratio:1; object-fit:cover; cursor:pointer; transition:transform .25s; border-radius:12px; }
.gallery-item:hover img { transform:scale(1.05); }
.star-input { font-size:1.6rem; color:#dfe3dc; cursor:pointer; }
.star-input .bi.active, .star-input .bi:hover { color:#ffb703; }
.breadcrumb-item a{ color:var(--na-green); text-decoration:none; }
.review-form{ background:var(--na-green-soft); border-color:transparent!important; }

/* ---------- FOOTER ---------- */
.trcms-footer { background:var(--tr-card); border-top:3px solid; border-image:linear-gradient(90deg,var(--na-green),var(--na-red)) 1; position:relative; }
.footer-mascot{ position:absolute; right:5%; top:-70px; width:96px; animation:floaty 4s ease-in-out infinite; filter:drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
@media (max-width:767px){ .footer-mascot{ display:none; } }
.footer-links li { padding:.28rem 0; }
.footer-links a { color:var(--tr-muted); text-decoration:none; transition:.2s; }
.footer-links a:hover { color:var(--na-green); padding-left:4px; }
.social-icon { width:40px; height:40px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:var(--na-green-soft); color:var(--na-green); transition:.25s; }
.social-icon:hover { background:var(--na-green); color:#fff; transform:translateY(-3px); }
.footer-bottom { background:var(--na-green-dark); color:rgba(255,255,255,.9); }

/* ---------- BACK TO TOP ---------- */
.back-to-top { position:fixed; right:22px; bottom:22px; width:48px; height:48px; border-radius:14px; display:none; align-items:center; justify-content:center; z-index:1030; box-shadow:var(--tr-shadow-lg); }
.back-to-top.show { display:flex; }

/* ---------- MASCOT (ทั่วไป) ---------- */
.mascot-empty{ width:140px; opacity:.95; margin-bottom:.5rem; animation:floaty 4s ease-in-out infinite; }
.mascot-404{ width:200px; animation:floaty 4s ease-in-out infinite; }
.mascot-float{ position:fixed; left:18px; bottom:18px; width:74px; z-index:1020; cursor:pointer; animation:floaty 4s ease-in-out infinite; filter:drop-shadow(0 6px 10px rgba(0,0,0,.2)); transition:transform .3s; }
.mascot-float:hover{ transform:scale(1.12) rotate(-5deg); }
@media (max-width:575px){ .mascot-float{ width:56px; } }

/* ---------- LOADING SKELETON ---------- */
.skeleton { background:linear-gradient(90deg, rgba(20,50,25,.06) 25%, rgba(20,50,25,.12) 37%, rgba(20,50,25,.06) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:10px; }
@keyframes shimmer { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }

/* ---------- ANIMATIONS ---------- */
@keyframes fadeInUp { from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;} }
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.fade-in { animation:fadeInUp .6s ease both; }

/* ---------- MISC ---------- */
.error-404 .display-1{ color:var(--na-red); font-weight:800; }
.badge.text-bg-light{ background:var(--na-green-soft)!important; color:var(--na-green-dark)!important; }
::selection{ background:var(--na-red); color:#fff; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:991px){
    .hero-section { padding:3.5rem 0 4.5rem; }
    .cover-img, .detail-cover { height:300px; max-height:300px; }
    .sticky-info { position:static; }
}
@media (max-width:575px){
    .hero-title { font-size:1.75rem; }
    .cover-img, .detail-cover { height:220px; max-height:220px; }
}