:root {
    --navy: #12345C;
    --navydark: #0A2540;
    --ink: #0B1F3A;
    --gold: #B08D3E;
    --golddark: #8C6D2E;
    --slate: #5B6B82;
    --cloud: #F5F7FA;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Work Sans", sans-serif;
    background: #FFFFFF;
    color: var(--ink);
    overflow-x: hidden;
}

/* Legacy Bootstrap-style visibility toggle still driven by page JS (preloader) */
.d-none { display: none !important; }

section[id] {
    scroll-margin-top: 5.5rem;
}

h1, h2, h3, h4, .font-display {
    font-family: "Merriweather", serif;
}

/* Scroll-in animation */
.animate-this {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}
.animate-this.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Buttons -- reused across hand-written markup, apiClass.php's ajaxList()
   fragment, and businesscard.php/businesscard-old.php includes.
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    color: #fff;
    font-family: "Work Sans", sans-serif;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .8rem 1.9rem;
    border-radius: 999px;
    border: 2px solid var(--navy);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { background: var(--navydark); border-color: var(--navydark); color: #fff; }

.btn-sec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--navy);
    font-family: "Work Sans", sans-serif;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    border: 2px solid var(--navy);
    transition: background .2s ease, color .2s ease;
}
.btn-sec:hover { background: var(--navy); color: #fff; }
.btn-sec img { width: 16px; }

.btn-prime {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    color: var(--ink);
    font-family: "Work Sans", sans-serif;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .8rem 1.9rem;
    border-radius: 999px;
    border: 2px solid var(--gold);
    transition: background .2s ease, border-color .2s ease;
}
.btn-prime:hover { background: var(--golddark); border-color: var(--golddark); }

/* ==========================================================================
   Business card -- apiClass.php's ajaxList() (used by the "Load More"
   button on listing.php) renders fixed markup with these exact class names
   (businesscard/img-fluid/p-3/pb-2/fs-5/fw-bold/opacity-75/mb-2/d-flex/
   gap-2/btn-sec/flex-grow-1/bg_none/px-2). The same classes are reused by
   the hand-written cards on index.php, listing.php and business-details.php
   "similar businesses" markup and by include/businesscard*.php, so every
   one of them is styled here rather than through the PHP/API layer.
   ========================================================================== */
.businesscard {
    position: relative;
    background: #fff;
    border: 1px solid rgba(11, 31, 58, .08);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 16px -4px rgba(11, 31, 58, .12);
    transition: box-shadow .25s ease, transform .25s ease;
    margin: 0 0 1.5rem 0;
}
.businesscard:hover {
    box-shadow: 0 22px 42px -20px rgba(11, 31, 58, .32);
    transform: translateY(-3px);
}
.businesscard .img-fluid { width: 100%; height: 200px; object-fit: cover; display: block; }
.businesscard .p-3 { padding: 1.1rem; }
.businesscard .pb-2 { padding-bottom: .6rem; }
.businesscard .fs-5 {
    font-family: "Merriweather", serif;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--ink);
}
.businesscard .fw-bold { font-weight: 700; }
.businesscard .mt-2 { margin-top: .6rem; display: block; }
.businesscard .opacity-75,
.businesscard .text-black { color: var(--slate); font-size: .85rem; }
.businesscard .mb-2 { margin-bottom: .65rem; }
.businesscard .mb-3 { margin-bottom: .85rem; }
.businesscard .d-flex { display: flex; }
.businesscard .gap-2 { gap: .5rem; }
.businesscard .flex-grow-1 { flex-grow: 1; }
.businesscard .btn-sec {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    padding: .65rem .8rem;
    font-size: .68rem;
    width: 100%;
}
.businesscard .btn-sec:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.businesscard .btn-sec.bg_none,
.businesscard .btn-sec.px-2 {
    background: transparent !important;
    border: 2px solid var(--navy);
    color: var(--navy);
    flex-grow: 0;
    width: 46px;
    padding: 0 !important;
}
.businesscard .btn-sec.bg_none:hover,
.businesscard .btn-sec.px-2:hover { background: var(--navy) !important; }
.businesscard .btn-sec.bg_none img,
.businesscard .btn-sec.px-2 img { width: 16px; }
.businesscard .psdrs { position: relative; }
.businesscard .open {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: .68rem;
    font-weight: 700;
    padding: .3rem .75rem;
    background: var(--gold);
    color: var(--ink);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
    z-index: 2;
}

/* Star rating rows (include/rating.php, include/rating-new.php) */
.rat { align-items: center; }
.rat img { width: 18px; }

/* Reviewer initials avatar */
.profile-alpha {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--navy), var(--gold));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

/* ==========================================================================
   Home search box (index.php hero + listing.php sidebar search)
   ========================================================================== */
.form-box {
    background: #fff;
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 24px 48px -18px rgba(11, 31, 58, .35);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.search-input,
.location-input,
.form-box select {
    width: 100%;
    background: var(--cloud);
    border: 1px solid rgba(11, 31, 58, .1);
    border-radius: 999px;
    padding: .85rem 1.25rem;
    font-size: .9rem;
    font-family: "Work Sans", sans-serif;
    color: var(--ink);
}
.search-input:focus,
.location-input:focus,
.form-box select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(176, 141, 62, .18);
}
.form-search-div { position: relative; width: 100%; }
.category-select { max-height: 300px; }

/* Category quick-links (index.php) */
.findnearslide { display: flex; flex-wrap: wrap; gap: .75rem; }
.findnearslide-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid rgba(11, 31, 58, .08);
    border-radius: 1rem;
    padding: 1rem .5rem;
    width: 108px;
    text-align: center;
    box-shadow: 0 2px 16px -4px rgba(11, 31, 58, .1);
    transition: transform .2s ease, box-shadow .2s ease;
}
.findnearslide-item a:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(11,31,58,.3); }
.findnearslide-item img {
    height: 28px;
    width: 28px;
    background: var(--navy);
    border-radius: 999px;
    padding: 7px;
    box-sizing: border-box;
}
.findnearslide-item a:hover img { background: var(--gold); }
.findnearslide-item p {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink);
}

/* Category tabs + "Food" dropdown (index.php Most Searched Categories) */
.category-tab {
    cursor: pointer;
    padding: .7rem 1.1rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    transition: background .2s ease, color .2s ease;
}
.category-tab:hover { background: rgba(176, 141, 62, .12); }
.category-tab.active { background: var(--navy); color: #fff; }

.dropdown { position: relative; display: inline-block; }
.food-btn {
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    padding: .7rem 1.4rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.food-btn::after {
    content: '';
    border: 5px solid transparent;
    border-top-color: #fff;
    margin-top: 3px;
}
.dropdown-menu.fooddropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 24px 48px -18px rgba(11, 31, 58, .35);
    padding: .5rem;
    min-width: 200px;
    list-style: none;
    margin: 0;
    z-index: 30;
    display: none;
}
.dropdown-menu.fooddropdown.show { display: block; }
.dropdown-item { list-style: none; }
.dropdown-item .category-tab { display: block; width: 100%; margin: 0; }

/* ==========================================================================
   CSS-only radio tabs ("How does it work?" section on index.php / about.php)
   ========================================================================== */
.tab_new { padding: 1.5rem; border-radius: 1.25rem; background: var(--cloud); }
.tabs-wrapper { max-width: 100%; }
.tabs-wrapper input { display: none; }
.tabs-wrapper label {
    white-space: nowrap;
    cursor: pointer;
    padding: .9rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    color: var(--ink);
    transition: background .2s ease, color .2s ease;
}
.tabs-wrapper label:hover,
.tabs-wrapper input:checked + label {
    background-color: var(--navy);
    color: #fff;
}
.tab-content { display: none; }
.tabs-wrapper:has(#mobile-optimised:checked) ~ .content-wrapper .tab-content[data-tab="mobile-optimised"],
.tabs-wrapper:has(#explore-listing:checked) ~ .content-wrapper .tab-content[data-tab="explore-listing"],
.tabs-wrapper:has(#click-to-call:checked) ~ .content-wrapper .tab-content[data-tab="click-to-call"] {
    display: block;
}

/* ==========================================================================
   Owl Carousel chrome overrides
   ========================================================================== */
.owl-carousel .owl-dots { text-align: center; margin-top: 1.25rem; }
.owl-carousel .owl-dots .owl-dot span {
    background: rgba(11, 31, 58, .18);
    width: 8px;
    height: 8px;
    margin: 0 4px;
}
.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span { background: var(--gold); }
.hide-dot .owl-dots { display: none; }
.owl-carousel .item { padding: .25rem; }

/* ==========================================================================
   Business detail gallery + lightbox
   ========================================================================== */
.gallery { display: flex; flex-wrap: wrap; gap: 14px; }
.gallery img {
    max-height: 320px;
    border-radius: 1rem;
    flex-grow: 1;
    flex-shrink: 0;
    object-fit: cover;
    cursor: pointer;
    transition: filter .3s;
}
.gallery img:hover { filter: brightness(60%); }

dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    outline: none;
    border: none;
    background: #fff;
    padding: 10px;
    border-radius: 1rem;
    box-shadow: 0 20px 45px -15px rgba(11, 31, 58, .5);
}
dialog::backdrop { background: rgba(11, 31, 58, .6); backdrop-filter: blur(2px); }
dialog img {
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 180px);
    object-fit: contain;
    border-radius: .75rem;
}

/* Add-review star input widget */
#ratings { align-items: center; display: flex; flex-flow: row-reverse; justify-content: center; }
#ratings input { display: none; }
#ratings input:checked ~ label::before { color: var(--gold); }
#ratings label::before {
    content: "\2605";
    color: #d8dde5;
    font-size: 32px;
    padding: 0 4px;
    transition: 200ms ease all;
}
#ratings label:hover { cursor: pointer; }
#ratings label:hover::before,
#ratings label:hover ~ label::before { color: var(--gold); }

/* ==========================================================================
   Raw blog HTML content (fullpost.php)
   ========================================================================== */
.blog-content { font-size: 1.02rem; line-height: 1.8; color: rgba(11, 31, 58, .78); }
.blog-content h1, .blog-content h2, .blog-content h3,
.blog-content h4, .blog-content h5, .blog-content h6 {
    font-family: "Merriweather", serif;
    color: var(--ink);
    line-height: 1.3;
    margin-top: 1.75em;
    margin-bottom: .6em;
}
.blog-content h1 { font-size: 1.7rem; }
.blog-content h2 { font-size: 1.45rem; }
.blog-content h3 { font-size: 1.2rem; }
.blog-content h4, .blog-content h5, .blog-content h6 { font-size: 1.05rem; }
.blog-content p { margin-bottom: 1.1em; }
.blog-content ul, .blog-content ol { margin: 1em 0 1.2em 1.4em; }
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { margin-bottom: .4em; }
.blog-content a { color: var(--navy); text-decoration: underline; }
.blog-content strong, .blog-content b { font-weight: 700; color: var(--ink); }
.blog-content blockquote {
    border-left: 4px solid var(--gold);
    padding-left: 1em;
    margin: 1.2em 0;
    color: rgba(11, 31, 58, .6);
    font-style: italic;
}
.blog-content img { margin: 1em 0; max-width: 100%; border-radius: .75rem; }