/* ==========================================================
   BizPage Horizon UI
   Complete Stylesheet v3.0

   Mobile-first application design
   ========================================================== */


/* ------------------------------
   Fonts
------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');



/* ------------------------------
   Variables
------------------------------ */

:root {


    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-soft:#eff6ff;


    --success:#10b981;
    --warning:#f59e0b;
    --danger:#ef4444;


    --text:#0f172a;
    --text-muted:#64748b;


    --background:#f8fafc;
    --surface:#ffffff;


    --border:#e2e8f0;


    --radius-sm:10px;
    --radius:18px;
    --radius-lg:28px;


    --shadow-sm:
        0 2px 8px rgba(15,23,42,.05);


    --shadow:
        0 12px 35px rgba(15,23,42,.08);


    --shadow-lg:
        0 25px 70px rgba(15,23,42,.12);


    --container:1200px;


    --transition:.2s ease;


}



/* ------------------------------
   Reset
------------------------------ */


*,
*::before,
*::after {

    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    margin:0;

    font-family:
        "Inter",
        system-ui,
        -apple-system,
        sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.6;

}


body.menu-open {

    overflow:hidden;

}


img {

    max-width:100%;

    height:auto;

}


a {

    text-decoration:none;

    color:inherit;

}


button,
input,
select,
textarea {

    font:inherit;

}



.container {

    width:min(var(--container),92%);

    margin-inline:auto;

}



/* ------------------------------
   Accessibility
------------------------------ */


.skip-link {

    position:absolute;

    top:-100px;

    left:0;

    background:var(--primary);

    color:white;

    padding:.75rem 1rem;

    z-index:9999;

}


.skip-link:focus {

    top:0;

}



/* ------------------------------
   Header
------------------------------ */


.site-header {

    position:sticky;

    top:0;

    z-index:1000;

    background:
        rgba(255,255,255,.92);

    backdrop-filter:blur(16px);

    border-bottom:
        1px solid var(--border);

}



.app-header {

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo svg {

    height:38px;

    width:auto;

    display:block;

}



.desktop-nav {

    display:flex;

    align-items:center;

    gap:28px;

}



.desktop-nav a {

    font-weight:600;

    color:var(--text-muted);

    transition:var(--transition);

}


.desktop-nav a:hover {

    color:var(--primary);

}



.menu-toggle {

    display:none;

    width:42px;

    height:42px;

    border:0;

    background:none;

    cursor:pointer;

}



.menu-toggle span {

    display:block;

    height:3px;

    width:24px;

    margin:5px auto;

    border-radius:10px;

    background:var(--text);

    transition:.2s;

}



@media(max-width:900px){


.desktop-nav {

    display:none;

}


.menu-toggle {

    display:block;

}


}

/* ==========================================================
   Buttons
========================================================== */


.btn,
.primary-button,
.secondary-button {


    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:52px;

    padding:0 1.5rem;

    border-radius:999px;

    border:none;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);

}



.btn-primary,
.primary-button {

    background:var(--primary);

    color:white;

    box-shadow:
        0 8px 20px rgba(37,99,235,.2);

}


.btn-primary:hover,
.primary-button:hover {

    background:var(--primary-dark);

    transform:translateY(-2px);

}



.btn-outline,
.secondary-button {

    background:white;

    color:var(--primary);

    border:1px solid var(--border);

}


.btn-outline:hover,
.secondary-button:hover {

    border-color:var(--primary);

    background:var(--primary-soft);

}



/* ==========================================================
   Forms
========================================================== */


input,
textarea,
select {


    width:100%;

    border:

        1px solid var(--border);

    background:white;

    color:var(--text);

    border-radius:14px;

    padding:.95rem 1rem;

    outline:none;

    transition:var(--transition);

}



input:focus,
textarea:focus,
select:focus {


    border-color:var(--primary);

    box-shadow:

        0 0 0 4px rgba(37,99,235,.12);

}



label {

    display:block;

    font-weight:600;

    margin-bottom:.4rem;

}



.form-group {

    margin-bottom:1.25rem;

}



.alert {

    padding:1rem;

    border-radius:14px;

    margin-bottom:1rem;

}


.alert-success {

    background:#dcfce7;

    color:#166534;

}


.alert-error {

    background:#fee2e2;

    color:#991b1b;

}



/* ==========================================================
   Mobile Menu Drawer
========================================================== */


.mobile-menu {

    position:fixed;

    top:72px;

    right:0;

    width:290px;

    height:calc(100vh - 72px);

    background:white;

    box-shadow:

        -20px 0 50px rgba(0,0,0,.12);

    transform:translateX(110%);

    transition:.25s ease;

    z-index:999;


}



.mobile-menu.open {

    transform:translateX(0);

}



.mobile-menu-inner {

    padding:1.5rem;

    display:flex;

    flex-direction:column;

    gap:.5rem;

}



.mobile-menu-inner a {

    padding:1rem;

    border-radius:14px;

    font-weight:600;

}



.mobile-menu-inner a:hover {

    background:var(--background);

}



/* ==========================================================
   Homepage Hero
========================================================== */


.home-hero {


    margin-inline:

        calc(50% - 50vw);


    background:

        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        );


    color:white;

    padding:

        4rem 1rem;


}



.home-hero-inner {


    width:min(720px,92%);

    margin:auto;

    text-align:center;


}



.hero-location {


    display:inline-flex;

    background:

        rgba(255,255,255,.15);

    border-radius:999px;

    padding:.45rem 1rem;

    font-size:.9rem;

    margin-bottom:1.5rem;


}



.home-hero h1 {


    font-size:

        clamp(2.2rem,6vw,3.6rem);


    line-height:1.1;

    letter-spacing:-1.5px;

    margin-bottom:1rem;


}



.hero-subtitle {


    font-size:1.1rem;

    opacity:.9;

    margin-bottom:2rem;


}



/* Search bar */


.main-search {


    background:white;

    border-radius:22px;

    padding:.35rem;

    display:flex;

    max-width:650px;

    margin:auto;

    box-shadow:

        0 20px 50px rgba(0,0,0,.2);


}



.main-search input {


    border:0;

    flex:1;

    box-shadow:none;

    padding:1rem 1.2rem;


}



.main-search input:focus {


    box-shadow:none;

}



.main-search button {


    background:var(--primary);

    color:white;

    border:0;

    border-radius:18px;

    padding:0 2rem;

    font-weight:700;

    cursor:pointer;


}



.quick-links {


    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:.75rem;

    margin-top:1.5rem;


}



.quick-links a {


    padding:.55rem 1rem;

    border-radius:999px;

    background:

        rgba(255,255,255,.15);

    color:white;

    font-size:.9rem;


}


.quick-links a:hover {


    background:white;

    color:var(--primary);


}

/* ==========================================================
   Sections
========================================================== */


.home-section,
.search-section,
.bizpage,
.dashboard,
.register-section,
.auth-section {

    padding:3rem 0;

}



.section-title {

    font-size:2rem;

    letter-spacing:-.5px;

    margin-bottom:1.5rem;

}



/* ==========================================================
   Feature / Why Cards
========================================================== */


.why-section,
.feature-grid {


    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(250px,1fr));


    gap:1.25rem;

    margin:3rem 0;


}



.why-card,
.feature-card {


    background:white;

    border:

        1px solid var(--border);


    border-radius:var(--radius);

    padding:1.5rem;

    box-shadow:var(--shadow-sm);


}



.why-card h3,
.feature-card h3 {


    margin-bottom:.6rem;

    color:var(--primary);


}



.why-card p,
.feature-card p {


    color:var(--text-muted);


}



/* ==========================================================
   Business Grid
========================================================== */


.biz-grid,
.modern-business-grid {


    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(280px,1fr));


    gap:1.5rem;


}



.biz-card,
.modern-business-card {


    display:block;

    background:white;

    border:

        1px solid var(--border);


    border-radius:var(--radius);

    overflow:hidden;

    color:inherit;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);


}



.biz-card:hover,
.modern-business-card:hover {


    transform:translateY(-4px);

    box-shadow:var(--shadow);


}



/* Business card image placeholder */


.business-photo-placeholder {


    height:160px;

    display:flex;

    align-items:center;

    justify-content:center;


    background:

        linear-gradient(
            135deg,
            #dbeafe,
            #bfdbfe
        );


    color:var(--primary);

    font-size:3rem;


}



.business-card-content,
.biz-card {


    padding:1.25rem;


}



.biz-card-header,
.business-title-row {


    display:flex;

    justify-content:space-between;

    gap:1rem;

    align-items:flex-start;


}



.biz-card h2,
.business-title-row h3 {


    font-size:1.15rem;

    line-height:1.3;


}



.badge,
.status-badge {


    background:#dcfce7;

    color:#166534;

    padding:.3rem .65rem;

    border-radius:999px;

    font-size:.75rem;

    font-weight:700;

    white-space:nowrap;


}



.biz-location,
.business-location {


    color:var(--text-muted);

    margin:.75rem 0;

}



.biz-rating,
.business-rating {


    display:flex;

    align-items:center;

    gap:.5rem;


}



.stars {


    color:#f59e0b;

    letter-spacing:1px;


}



.count {


    color:var(--text-muted);

    font-size:.9rem;


}



/* ==========================================================
   Search Page
========================================================== */


.search-form {


    background:white;

    padding:1.5rem;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

    margin-bottom:2rem;


}



.search-input-group {


    display:flex;

    gap:.75rem;


}



.search-input-group input {


    flex:1;


}



.search-input-group button {


    width:auto;


}



.search-filters {


    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:1rem;


}



/* ==========================================================
   Business Profile
========================================================== */


.biz-header {


    text-align:center;

    margin-bottom:2rem;


}



.biz-header h1 {


    font-size:2.4rem;

    letter-spacing:-.8px;


}



.biz-contact {


    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:1.5rem;


}



.biz-about {


    background:white;

    border-radius:var(--radius);

    padding:2rem;

    box-shadow:var(--shadow-sm);

    border:

        1px solid var(--border);


}



.rating-display {


    text-align:center;

    margin:2rem 0;


}



.big-rating {


    font-size:3rem;

    font-weight:800;

    color:var(--primary);


}



/* ==========================================================
   Reviews
========================================================== */


.review-list {


    display:flex;

    flex-direction:column;

    gap:1rem;


}



.review-card {


    background:white;

    border:

        1px solid var(--border);


    border-radius:var(--radius);

    padding:1.25rem;


}



.review-header {


    display:flex;

    justify-content:space-between;

    margin-bottom:.75rem;


}



.review-header time {


    color:var(--text-muted);

    font-size:.85rem;


}



.review-form-section,
.contact-form-section {


    background:white;

    padding:2rem;

    border-radius:var(--radius);

    margin-top:2rem;

    box-shadow:var(--shadow-sm);


}



/* ==========================================================
   Dashboard
========================================================== */


.dashboard {


    max-width:1000px;

    margin:auto;


}



.dash-grid {


    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(300px,1fr));


    gap:1.5rem;


}



.dash-card {


    background:white;

    border:

        1px solid var(--border);


    border-radius:var(--radius);

    padding:1.5rem;

    box-shadow:var(--shadow-sm);


}



.stat-row {


    display:flex;

    justify-content:space-between;

    padding:.75rem 0;

    border-bottom:

        1px solid var(--border);


}



/* Upload gallery */


.upload-zone {


    border:

        2px dashed var(--border);


    padding:2rem;

    text-align:center;

    border-radius:var(--radius);


}



.gallery-grid {


    display:grid;

    grid-template-columns:

        repeat(auto-fill,minmax(120px,1fr));


    gap:1rem;

    margin-top:1rem;


}



.gallery-item {


    aspect-ratio:1;

    border-radius:14px;

    overflow:hidden;


}



.gallery-item img {


    width:100%;

    height:100%;

    object-fit:cover;


}

/* ==========================================================
   Footer
========================================================== */


.site-footer {


    margin-top:4rem;

    background:#0f172a;

    color:white;

    padding:3rem 0;


}



.footer-grid {


    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:2rem;

    flex-wrap:wrap;


}



.footer-brand p {


    color:#cbd5e1;

    margin-bottom:.4rem;


}



.site-footer nav ul {


    display:flex;

    gap:1.25rem;

    list-style:none;

    padding:0;

    margin:0;


}



.site-footer a {


    color:#cbd5e1;

}


.site-footer a:hover {


    color:white;


}



/* ==========================================================
   Pagination
========================================================== */


.pagination {


    display:flex;

    justify-content:center;

    gap:.5rem;

    margin-top:2rem;


}



.page-link {


    display:flex;

    align-items:center;

    justify-content:center;

    min-width:42px;

    height:42px;

    border-radius:12px;

    background:white;

    border:

        1px solid var(--border);

    color:var(--text);

    font-weight:600;


}



.page-link.active {


    background:var(--primary);

    color:white;

    border-color:var(--primary);


}



/* ==========================================================
   Admin Tables
========================================================== */


.admin-dashboard {


    padding:3rem 0;


}



.admin-grid {


    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(350px,1fr));


    gap:1.5rem;


}



.admin-panel {


    background:white;

    border:

        1px solid var(--border);

    border-radius:var(--radius);

    padding:1.5rem;

    box-shadow:var(--shadow-sm);


}



.table-wrapper {


    overflow-x:auto;


}



.admin-table {


    width:100%;

    border-collapse:collapse;


}



.admin-table th,
.admin-table td {


    padding:.85rem;

    text-align:left;

    border-bottom:

        1px solid var(--border);


}



.admin-table th {


    background:var(--background);

    font-weight:700;


}



.btn-sm {


    min-height:36px;

    padding:0 .9rem;

    font-size:.85rem;


}



.btn-success {


    background:var(--success);

    color:white;


}



.btn-danger {


    background:var(--danger);

    color:white;


}



/* ==========================================================
   Empty States
========================================================== */


.empty-state {


    background:white;

    border:

        1px dashed var(--border);

    border-radius:var(--radius);

    padding:3rem 1.5rem;

    text-align:center;

    color:var(--text-muted);


}



/* ==========================================================
   Error Pages
========================================================== */


.error-page {


    min-height:60vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;


}



.error-page h1 {


    font-size:4rem;

    color:var(--primary);


}



/* ==========================================================
   Responsive Cleanup
========================================================== */


@media(max-width:900px){


    .main-search {


        flex-direction:column;

        background:transparent;

        box-shadow:none;

        gap:.75rem;


    }


    .main-search input {


        background:white;

        border-radius:16px;

        min-height:56px;


    }


    .main-search button {


        min-height:56px;

        border-radius:16px;


    }


    .biz-card-header,
    .business-title-row {


        flex-direction:column;


    }


    .footer-grid {


        flex-direction:column;

        text-align:center;

        align-items:center;


    }


    .site-footer nav ul {


        justify-content:center;

        flex-wrap:wrap;


    }


}



@media(max-width:600px){


    .home-hero {


        padding:3rem 1rem;


    }



    .home-hero h1 {


        font-size:2.1rem;


    }



    .home-section,
    .search-section,
    .bizpage,
    .dashboard,
    .register-section,
    .auth-section {


        padding:2rem 0;


    }



    .search-input-group {


        flex-direction:column;


    }



    .search-input-group button {


        width:100%;


    }



    .biz-header h1 {


        font-size:1.9rem;


    }



    .why-section,
    .feature-grid,
    .biz-grid,
    .modern-business-grid {


        grid-template-columns:1fr;


    }


}



/* ==========================================================
   Small UI Polish
========================================================== */


::selection {


    background:var(--primary);

    color:white;


}



::-webkit-scrollbar {


    width:10px;


}



::-webkit-scrollbar-track {


    background:#f1f5f9;


}



::-webkit-scrollbar-thumb {


    background:#94a3b8;

    border-radius:999px;


}



::-webkit-scrollbar-thumb:hover {


    background:#64748b;


}