:root{
    --bg:#f6f8fc;
    --text:#18212f;
    --muted:#667085;
    --line:#e7ecf3;
    --white:#ffffff;
    --brand:#1f5eff;
    --brand2:#7c3aed;
    --brand-dark:#153f9f;
    --accent:#0ea5e9;
    --soft:#eef4ff;
    --soft2:#f5f2ff;
    --shadow:0 20px 50px rgba(15, 23, 42, .08);
    --shadow-sm:0 10px 24px rgba(15, 23, 42, .06);
    --radius:24px;
    --radius-md:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',sans-serif;color:var(--text);background:var(--white)}
img{max-width:100%}
a{text-decoration:none}

.top-strip{
    background:linear-gradient(90deg,#15274d,#1f5eff,#7c3aed);
    padding:10px 0;
}
.top-links a{color:#fff;margin-left:16px;opacity:.92}
.top-links a:hover{opacity:1}
.main-navbar{
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(14px);
    box-shadow:0 8px 30px rgba(15,23,42,.06);
    position:sticky;top:0;z-index:1000;
}
.navbar-brand{display:flex;align-items:center;gap:12px;font-size:25px;font-weight:800;color:var(--text)!important}
.brand-logo{
    width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-size:18px;
    box-shadow:0 12px 28px rgba(31,94,255,.25)
}
.navbar-brand small{display:block;font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.nav-link{font-weight:600;color:#344054!important;padding:14px 12px!important}
.nav-link:hover{color:var(--brand)!important}
.mega-box{min-width:300px}
.dropdown-item{padding:12px 14px;border-radius:14px;font-weight:600}
.dropdown-item:hover{background:#f4f7ff;color:var(--brand)}
.btn-brand{
    border:none;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2));
    border-radius:999px;padding:12px 22px;font-weight:700;box-shadow:0 14px 32px rgba(31,94,255,.24)
}
.btn-brand:hover{color:#fff;filter:brightness(.95)}
.btn-outline-brand{
    border:1.5px solid #c9d7ff;color:var(--brand);background:#fff;border-radius:999px;padding:10px 18px;font-weight:700
}
.btn-outline-brand:hover{background:#f2f6ff;color:var(--brand)}
.btn-light-soft{
    border:none;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);color:#fff;border-radius:999px;padding:12px 22px;font-weight:700
}
.btn-light-soft:hover{background:#fff;color:var(--brand)}
.hero{
    padding:88px 0 95px;
    background:
      radial-gradient(circle at top left, rgba(14,165,233,.22), transparent 30%),
      radial-gradient(circle at top right, rgba(124,58,237,.22), transparent 32%),
      linear-gradient(135deg,#0f172a,#1d4ed8 55%, #6d28d9);
    color:#fff;
}
.eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;
    background:rgba(255,255,255,.12);backdrop-filter:blur(10px);color:#fff;
    letter-spacing:.02em
}
.eyebrow.light{background:rgba(255,255,255,.14)}
.hero h1{font-size:clamp(2.2rem,5vw,4.3rem);line-height:1.04;font-weight:800;margin:18px 0 18px}
.hero h1 span{color:#cfe1ff}
.hero p{font-size:18px;line-height:1.85;max-width:760px;color:rgba(255,255,255,.88)}
.hero-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-pills span{
    background:rgba(255,255,255,.12);padding:10px 14px;border-radius:999px;font-weight:600;font-size:14px
}
.glass-card{
    padding:14px;border-radius:32px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)
}

.search-panel-wrap{margin-top:-36px;position:relative;z-index:5}
.search-panel{
    background:#fff;border-radius:26px;box-shadow:var(--shadow);padding:28px;border:1px solid #eef2f7
}
.search-box-ui{display:flex;gap:10px}
.search-box-ui .form-control{min-height:58px;border-radius:999px;padding:0 18px;border:1px solid var(--line)}

.section-space{padding:84px 0}
.section-label{
    display:inline-block;padding:8px 14px;border-radius:999px;background:#edf4ff;color:var(--brand);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px
}
.section-label.alt{background:#fff1f2;color:#e11d48}
.section-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.1;margin-bottom:12px}
.section-subtitle{max-width:860px;margin:0 auto;color:var(--muted);font-size:16px;line-height:1.9}
.bg-ice{background:#f7faff}

.info-card,.place-card,.detail-shell,.detail-side,.content-box,.stat-card,.cta-box,.toolbar,.search-panel,.empty-box{
    background:#fff;border:1px solid #edf1f7;border-radius:26px;box-shadow:var(--shadow-sm)
}
.info-card{overflow:hidden;transition:.25s ease;color:inherit}
.info-card:hover{transform:translateY(-6px);color:inherit}
.info-card-img,.place-card-img{width:100%;height:220px;object-fit:cover}
.info-card h3,.place-card h3{font-size:24px;font-weight:800;margin-bottom:10px}
.info-card p,.place-card p{color:var(--muted);line-height:1.8}
.count-badge{
    min-width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#eef4ff;color:var(--brand);font-weight:800
}
.card-link{font-weight:700;color:var(--brand)}
.mini-tag{
    display:inline-block;padding:7px 12px;border-radius:999px;background:#f3f0ff;color:#6d28d9;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px
}
.meta-line{color:#475467;font-size:14px;margin-bottom:10px;display:flex;gap:8px;align-items:center}

.cta-box{padding:34px;background:linear-gradient(135deg,#eff6ff,#f5f3ff)}
.cta-box h2{font-size:36px;font-weight:800;margin-bottom:10px}
.cta-box p{color:var(--muted);line-height:1.8}

.inner-hero{
    padding:72px 0;
    background:linear-gradient(135deg,#111827,#1d4ed8,#7c3aed);
    color:#fff
}
.inner-hero h1{font-size:clamp(2rem,4vw,3.4rem);font-weight:800;margin:18px 0 12px}
.inner-hero p{font-size:17px;line-height:1.9;max-width:900px;color:rgba(255,255,255,.88)}
.toolbar{padding:18px}
.shadow-lite{box-shadow:var(--shadow-sm)}
.empty-box{padding:24px;color:var(--muted);font-weight:600}

.detail-main-image{width:100%;height:360px;object-fit:cover;border-top-left-radius:26px;border-top-right-radius:26px}
.detail-shell .info-block{margin-top:26px;padding-top:22px;border-top:1px solid #eef2f7}
.detail-shell h3,.detail-side h3{font-size:28px;font-weight:800;margin-bottom:12px}
.detail-shell h4{font-size:21px;font-weight:800;margin-bottom:10px}
.detail-shell p{color:#344054;line-height:1.9}
.detail-side{padding:28px;position:sticky;top:100px}
.quick-list{list-style:none;padding:0;margin:0}
.quick-list li{padding:14px 0;border-bottom:1px solid #eef2f7;display:flex;flex-direction:column;gap:6px}
.quick-list li span{font-size:13px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.quick-list li strong, .quick-list li a{color:var(--text);font-weight:700}

.site-footer{
    background:#0f172a;color:rgba(255,255,255,.84);padding:64px 0 24px;margin-top:40px
}
.footer-brand{font-size:28px;font-weight:800;color:#fff}
.footer-text{line-height:1.8;color:rgba(255,255,255,.74)}
.site-footer h5{color:#fff;font-size:17px;font-weight:800;margin-bottom:16px}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:10px}
.footer-links a{color:rgba(255,255,255,.74)}
.footer-links a:hover{color:#fff}
.footer-bottom{margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:rgba(255,255,255,.6)}

.login-body,.admin-body{background:#f4f7fb}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:100%;max-width:480px;background:#fff;border-radius:28px;box-shadow:var(--shadow);padding:34px;border:1px solid #ecf1f7}
.login-logo{
    width:72px;height:72px;border-radius:22px;display:grid;place-items:center;margin:0 auto;
    background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-size:28px;font-weight:800
}
.admin-wrap{display:flex;min-height:100vh}
.admin-sidebar{
    width:280px;background:#0f172a;color:#fff;padding:26px 22px;position:sticky;top:0;height:100vh
}
.admin-brand{font-size:28px;font-weight:800}
.admin-subtitle{font-size:13px;color:rgba(255,255,255,.6);margin-top:4px;margin-bottom:30px}
.admin-nav{display:flex;flex-direction:column;gap:8px}
.admin-nav a{
    display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;
    color:rgba(255,255,255,.8);font-weight:600
}
.admin-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.admin-content{flex:1;padding:30px}
.admin-header{
    display:flex;justify-content:space-between;align-items:center;gap:20px;
    background:#fff;border-radius:24px;border:1px solid #edf1f7;padding:20px 24px;box-shadow:var(--shadow-sm);margin-bottom:24px
}
.stat-card{padding:24px}
.stat-card span{font-size:14px;color:var(--muted);font-weight:700}
.stat-card h3{font-size:42px;font-weight:800;margin:10px 0 0}
.content-box{padding:24px}
.admin-table th{white-space:nowrap;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#667085}
.admin-table td{vertical-align:middle}
.form-control,.form-select{min-height:48px;border-radius:16px;border:1px solid #dde5f0}
textarea.form-control{min-height:auto}

@media (max-width: 991px){
    .admin-wrap{display:block}
    .admin-sidebar{position:relative;width:100%;height:auto}
    .detail-side{position:static}
}
@media (max-width: 767px){
    .hero{padding:72px 0 88px}
    .search-box-ui{flex-direction:column}
    .admin-header{flex-direction:column;align-items:flex-start}
    .section-space{padding:64px 0}
}
:root {
    --primary: #a63f14;
    --primary-dark: #7a2b0c;
    --secondary: #f59e0b;
    --accent: #ffedd5;
    --light-bg: #fff8f1;
    --cream: #fff4e6;
    --text-dark: #2b1b12;
    --text-soft: #7b5e4b;
    --card-shadow: 0 14px 35px rgba(95, 39, 12, 0.12);
    --radius-lg: 22px;
    --radius-md: 16px;
}

/* body */
body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
    background: linear-gradient(180deg, #fffaf5 0%, #fff7ed 100%);
    margin: 0;
    padding: 0;
}

/* topbar */
.topbar {
    background: linear-gradient(90deg, #5a1f0a, #8c2f10, #d97706);
    color: #fff;
    font-size: 14px;
    padding: 8px 0;
}

    .topbar a {
        color: #fff;
        font-weight: 500;
    }

/* navbar */
.main-navbar {
    background: rgba(255, 250, 245, 0.96);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 25px rgba(122, 43, 12, 0.08);
    position: sticky;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid rgba(217, 119, 6, 0.10);
}

.navbar-brand {
    font-weight: 800;
    font-size: 28px;
    color: var(--primary) !important;
    letter-spacing: -0.5px;
}

.brand-mini {
    display: block;
    font-size: 11px;
    color: #8b6b57;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: -4px;
}

.nav-link {
    font-weight: 600;
    color: #5b4335 !important;
    padding: 14px 12px !important;
    transition: all 0.25s ease;
}

    .nav-link:hover,
    .nav-link.active {
        color: var(--primary) !important;
    }

/* logo circle */
.brand-icon,
.logo-icon,
.site-logo-icon,
.vh-logo,
.logo-badge {
    background: linear-gradient(135deg, #a63f14, #f59e0b);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(166, 63, 20, 0.22);
}

/* buttons */
.btn-theme {
    background: linear-gradient(90deg, #a63f14, #d97706);
    color: #fff;
    border: 0;
    border-radius: 50px;
    padding: 12px 22px;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(166, 63, 20, 0.22);
}

    .btn-theme:hover {
        color: #fff;
        background: linear-gradient(90deg, #7a2b0c, #b45309);
    }

.btn-outline-theme {
    border: 2px solid #fff;
    color: #fff;
    border-radius: 50px;
    padding: 12px 22px;
    font-weight: 600;
}

    .btn-outline-theme:hover {
        background: #fff;
        color: var(--primary);
    }

/* section headings */
.section-title {
    font-size: 34px;
    font-weight: 800;
    color: #3b1f12;
    margin-bottom: 10px;
}

.section-subtitle {
    color: var(--text-soft);
    max-width: 820px;
    margin: 0 auto 30px;
    line-height: 1.8;
}

.badge-title {
    display: inline-block;
    background: #ffedd5;
    color: #9a3412;
    font-weight: 700;
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 13px;
    margin-bottom: 14px;
}

/* cards */
.shadow-card,
.card,
.info-card,
.category-card {
    background: linear-gradient(180deg, #ffffff, #fffaf5);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(122, 43, 12, 0.08);
    border: 1px solid rgba(217, 119, 6, 0.10);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .shadow-card:hover,
    .card:hover,
    .info-card:hover,
    .category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 38px rgba(122, 43, 12, 0.14);
    }

/* hero section */
.hero-section,
.hero,
.home-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(90,31,10,0.92), rgba(166,63,20,0.86), rgba(245,158,11,0.72)), url('https://images.unsplash.com/photo-1561361058-c24cecae35ca?q=80&w=1600&auto=format&fit=crop') center center/cover no-repeat !important;
    color: #fff;
    border-radius: 0 0 30px 30px;
}

    .hero-section::before,
    .hero::before,
    .home-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255,255,255,0.12), transparent 22%), radial-gradient(circle at bottom left, rgba(255,240,220,0.08), transparent 28%);
        pointer-events: none;
    }

    .hero-section .container,
    .hero .container,
    .home-hero .container {
        position: relative;
        z-index: 2;
    }

    .hero-section h1,
    .hero h1,
    .home-hero h1 {
        color: #fff;
        font-weight: 800;
        letter-spacing: -1px;
        text-shadow: 0 2px 12px rgba(0,0,0,0.14);
    }

    .hero-section p,
    .hero p,
    .home-hero p {
        color: rgba(255,255,255,0.92);
    }

.hero-badge,
.hero-chip,
.hero-tag {
    display: inline-block;
    background: rgba(255, 237, 213, 0.16);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff7ed;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

/* search box in hero */
.hero-search,
.search-panel,
.search-box {
    background: rgba(255, 248, 241, 0.14);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 18px 40px rgba(0,0,0,0.10);
    backdrop-filter: blur(10px);
    border-radius: 24px;
}

    .hero-search .form-control,
    .search-panel .form-control,
    .search-box .form-control {
        border-radius: 14px;
        border: 1px solid rgba(166, 63, 20, 0.12);
        min-height: 52px;
    }

/* hero right image/card */
.hero-visual,
.hero-card,
.hero-image-box {
    background: linear-gradient(180deg, rgba(255,244,230,0.14), rgba(255,237,213,0.09));
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 20px 45px rgba(60, 20, 5, 0.18);
    border-radius: 28px;
    backdrop-filter: blur(8px);
}

/* icons / pills */
.icon-circle,
.service-icon,
.category-icon {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #9a3412;
    box-shadow: 0 10px 18px rgba(245, 158, 11, 0.14);
}

/* footer */
.footer {
    background: linear-gradient(180deg, #4a1d0b, #6b2a0d, #8c3a10);
    color: rgba(255,255,255,0.92);
    padding: 60px 0 20px;
}

    .footer h5 {
        color: #fff;
        font-weight: 700;
        margin-bottom: 18px;
    }

    .footer a {
        color: rgba(255,255,255,0.82);
        transition: all 0.2s ease;
    }

        .footer a:hover {
            color: #ffd8a8;
            padding-left: 4px;
        }

/* section backgrounds */
.warm-section {
    background: linear-gradient(180deg, #fffaf5, #fff1e6);
}

.soft-orange-section {
    background: linear-gradient(180deg, #fff7ed, #fffaf5);
}

/* tables/list rows if used */
.table,
.list-group-item {
    border-color: rgba(217, 119, 6, 0.10);
}

/* admin / login buttons also keep warm theme */
.btn-primary,
.btn-success {
    background: linear-gradient(90deg, #a63f14, #d97706) !important;
    border: none !important;
}

    .btn-primary:hover,
    .btn-success:hover {
        background: linear-gradient(90deg, #7a2b0c, #b45309) !important;
    }

/* responsive */
@media (max-width: 768px) {
    .section-title {
        font-size: 28px;
    }

    .hero-section h1,
    .hero h1,
    .home-hero h1 {
        font-size: 2.2rem !important;
        line-height: 1.15;
    }
}