/* ==========================================================================
   HomeServicePro — Professional Theme
   ========================================================================== */

:root {
    --primary: #0e2a47;
    --primary-2: #1a3f66;
    --primary-soft: #eef4fb;
    --accent: #ff7a00;
    --accent-2: #ffa726;
    --accent-soft: #fff3e6;
    --success: #16a34a;
    --whatsapp: #25d366;
    --danger: #dc2626;
    --ink: #1e293b;
    --muted: #64748b;
    --line: #e6ecf3;
    --bg: #f5f8fc;
    --card-shadow: 0 6px 24px rgba(14, 42, 71, 0.07);
    --radius: 16px;
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
}

a { text-decoration: none; }

h1, h2, h3, h4, h5 { font-weight: 700; color: var(--primary); letter-spacing: -0.01em; }

/* ---------- Buttons ---------- */
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 12px;
    padding: 0.65rem 1.4rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255, 122, 0, .35); }

.btn-navy {
    background: var(--primary);
    color: #fff;
    border: none;
    font-weight: 600;
    border-radius: 12px;
    padding: 0.65rem 1.4rem;
}
.btn-navy:hover { background: var(--primary-2); color: #fff; }

.btn-outline-navy {
    border: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 600;
    border-radius: 12px;
    padding: 0.55rem 1.3rem;
}
.btn-outline-navy:hover { background: var(--primary); color: #fff; }

/* Colorful CALL button */
.btn-call {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #ff5f6d, #ffc371);
    background-size: 180% 180%;
    color: #fff !important;
    font-weight: 800;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.25rem;
    letter-spacing: .02em;
    box-shadow: 0 8px 20px rgba(255, 95, 109, .4);
    animation: callGradient 4s ease infinite;
    transition: transform .15s ease;
}
.btn-call:hover { transform: translateY(-2px) scale(1.02); color: #fff; }

@keyframes callGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn-call-green {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    background-size: 180% 180%;
    box-shadow: 0 8px 20px rgba(17, 153, 142, .4);
}

/* Floating call button (mobile) */
.floating-call {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 1000;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #ff5f6d, #ffc371);
    background-size: 200% 200%;
    box-shadow: 0 8px 24px rgba(255, 95, 109, .5);
    animation: callGradient 4s ease infinite, pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 95, 109, .55); }
    70% { box-shadow: 0 0 0 18px rgba(255, 95, 109, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 95, 109, 0); }
}

/* ---------- Navbar ---------- */
.topbar {
    background: #081c33;
    color: #cfe0f2;
    font-size: .82rem;
}
.navbar-main {
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.navbar-main .nav-link { color: var(--ink); font-weight: 500; }
.navbar-main .nav-link:hover { color: var(--accent); }
.brand-logo {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.brand-logo .mark {
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}

/* ---------- Hero ---------- */
.hero {
    background:
        radial-gradient(1000px 500px at 80% -10%, rgba(255, 122, 0, .18), transparent 60%),
        radial-gradient(800px 500px at 10% 110%, rgba(25, 118, 210, .18), transparent 60%),
        linear-gradient(135deg, #0e2a47 0%, #143a63 100%);
    color: #fff;
    padding: 4.5rem 0 5rem;
    position: relative;
    overflow: hidden;
}
.hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); }
.hero .lead { color: #cfe0f2; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff; border-radius: 999px; padding: .35rem .9rem; font-size: .85rem;
}
.search-panel {
    background: #fff;
    border-radius: 18px;
    padding: 1.1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.search-panel .form-control, .search-panel .form-select {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .7rem 1rem;
    font-size: .95rem;
}
.trust-strip { display: flex; gap: 1.4rem; flex-wrap: wrap; color: #cfe0f2; font-size: .9rem; }
.trust-strip i { color: var(--accent-2); }

/* ---------- Cards ---------- */
.card { border: none; border-radius: var(--radius); box-shadow: var(--card-shadow); }
.category-card {
    background: #fff; border-radius: var(--radius); padding: 1.4rem 1rem;
    text-align: center; transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: var(--card-shadow); height: 100%;
}
.category-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(14,42,71,.14); }
.category-card .icon {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto .8rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

.business-card { height: 100%; overflow: hidden; }
.business-card .cover { height: 150px; object-fit: cover; background: var(--primary-soft); }
.business-card .logo {
    width: 58px; height: 58px; border-radius: 14px; object-fit: cover;
    border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15);
    margin-top: -30px; background: #fff;
}
.verified-badge { color: var(--success); }
.featured-flag {
    background: linear-gradient(135deg, #ffd54f, #ffa726);
    color: #5c3a00; font-weight: 700; font-size: .72rem;
    padding: .2rem .6rem; border-radius: 999px;
}

.section-title { margin-bottom: 1.6rem; }
.section-title .eyebrow { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }

/* ---------- Business detail ---------- */
.rating-stars { color: #f59e0b; }
.badge-soft { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.contact-sidebar .list-group-item { border: none; padding: .85rem 1rem; }

/* ---------- Footer ---------- */
.footer { background: #081c33; color: #b7c9dd; margin-top: 4rem; }
.footer h6 { color: #fff; font-weight: 700; }
.footer a { color: #b7c9dd; }
.footer a:hover { color: var(--accent-2); }
.footer .bottom { border-top: 1px solid rgba(255,255,255,.1); }

/* ---------- Misc ---------- */
.avatar-circle {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    background: var(--primary); color: #fff; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700;
}
.breadcrumb-soft { font-size: .85rem; }
.text-accent { color: var(--accent) !important; }
.bg-soft { background: var(--bg); }
.rounded-4 { border-radius: 20px !important; }

.cta-band {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    border-radius: 24px; color: #fff; padding: 3rem;
}
.cta-band h2 { color: #fff; }

.pagination .page-link { color: var(--primary); border-radius: 10px; margin: 0 3px; border: 1px solid var(--line); }
.pagination .active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Dashboard / admin */
.sidebar {
    background: #fff; border-right: 1px solid var(--line);
    min-height: calc(100vh - 70px);
}
.sidebar .nav-link { color: var(--ink); font-weight: 500; border-radius: 10px; padding: .6rem .9rem; }
.sidebar .nav-link:hover { background: var(--primary-soft); color: var(--primary); }
.sidebar .nav-link.active { background: var(--primary); color: #fff; }
.sidebar .nav-link i { width: 20px; text-align: center; }
.stat-card { border-radius: var(--radius); box-shadow: var(--card-shadow); border: none; }
.stat-card .stat-icon { width: 48px; height: 48px; border-radius: 14px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

@media (max-width: 768px) {
    .hero { padding: 3rem 0; }
}