/* ============================================================
   Business page v2  —  scoped to  body.biz-v2  (see frontend/business_details.php)
   Only restyles the business detail page; nothing else on the site is affected.
   Uses the site's own design tokens (--navy-950, --teal-500, --amber-500, --line ...).
   ============================================================ */

.biz-v2 {
    --biz-teal: var(--teal-500, #228175);
    --biz-teal-soft: #E7F4F1;
    --biz-navy: var(--navy-950, #0F1B2D);
    --biz-ink-soft: var(--ink-soft, #5A6472);
    --biz-line: rgba(15, 27, 45, .08);
    --biz-shadow: 0 10px 34px rgba(15, 27, 45, .07);
}

/* ---------- Hero ---------- */
.biz-v2 .biz-hero {
    padding: 54px 0 104px;
    background-color: var(--biz-navy);
    background-image:
        radial-gradient(900px 420px at 88% -12%, rgba(42, 157, 143, .55), transparent 62%),
        radial-gradient(700px 380px at -4% 115%, rgba(34, 129, 117, .30), transparent 60%),
        linear-gradient(155deg, #0F1B2D 15%, #12363C 120%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.biz-v2 .biz-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .11) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
    opacity: .55;
    pointer-events: none;
}
.biz-v2 .biz-hero-decor { color: rgba(255, 255, 255, .05); }
.biz-v2 .biz-hero-top { gap: 22px; align-items: center; margin-top: 10px; }

.biz-v2 .biz-hero-avatar {
    width: 108px;
    height: 108px;
    border-radius: 26px;
    background: #fff;
    border: 4px solid rgba(255, 255, 255, .35);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .35);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.biz-v2 .biz-hero-avatar img { object-fit: contain; padding: 8px; background: #fff; }
.biz-v2 .biz-hero-avatar i { font-size: 2.4rem; color: var(--biz-teal); }

.biz-v2 .biz-hero h1 {
    font-size: clamp(1.75rem, 4.4vw, 3rem);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 8px 0 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
.biz-v2 .biz-hero-eyebrow {
    background: rgba(244, 162, 97, .16);
    border: 1px solid rgba(244, 162, 97, .35);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.biz-v2 .biz-hero .biz-meta { margin-top: 16px; }
.biz-v2 .biz-meta-chip {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
    padding: 7px 14px;
    font-weight: 500;
}

.biz-v2 .biz-hero-actions { margin-top: 26px; gap: 12px; }
.biz-v2 .biz-hero-actions .btn {
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.biz-v2 .biz-hero-actions .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .34); }
.biz-v2 .biz-hero .muted { color: #B7C4D2; }
.biz-v2 .biz-hero .muted a { color: #7ADBCB; font-weight: 600; }

/* ---------- Stats strip (overlaps the hero) ---------- */
.biz-v2 .biz-stats-wrap { position: relative; z-index: 3; margin-top: -60px; }
.biz-v2 .biz-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.biz-v2 .biz-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 14px 36px rgba(15, 27, 45, .12);
    border: 1px solid var(--biz-line);
    min-width: 0;
}
.biz-v2 .biz-stat-ic {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--biz-teal-soft);
    color: var(--biz-teal);
    font-size: 1.2rem;
}
.biz-v2 .biz-stat strong {
    display: block;
    font-family: var(--font-display, inherit);
    color: var(--biz-navy);
    font-size: 1.05rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.biz-v2 .biz-stat small { display: block; color: var(--biz-ink-soft); font-size: .78rem; margin-top: 2px; }
.biz-v2 .biz-stat.is-ok .biz-stat-ic { background: #E4F6EC; color: #1C7C4B; }
.biz-v2 .biz-stat.is-ok strong { color: #1C7C4B; }
.biz-v2 .biz-stat.is-warn .biz-stat-ic { background: #FDF0DC; color: #B36A12; }

/* ---------- Layout ---------- */
.biz-v2 .section { padding-top: 26px; }
.biz-v2 .detail-grid { grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr); gap: 28px; margin-top: 8px; }
.biz-v2 .biz-aside { position: sticky; top: 92px; align-self: start; }

/* ---------- Cards ---------- */
.biz-v2 .info-card {
    background: #fff;
    border: 1px solid var(--biz-line);
    border-radius: 20px;
    padding: 26px 28px;
    margin-bottom: 22px;
    box-shadow: var(--biz-shadow);
}
.biz-v2 .info-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 1.16rem;
    color: var(--biz-navy);
}
.biz-v2 .info-card h3::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 22px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--biz-teal), var(--amber-500, #F4A261));
}
.biz-v2 .info-card p { line-height: 1.7; color: #334155; }
.biz-v2 .biz-aside .info-card:first-child { border-top: 4px solid var(--biz-teal); }

/* ---------- Contact card ---------- */
.biz-v2 .biz-aside .bp-contact-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 10px;
    margin: 10px 0 14px;
    padding: 16px 8px;
    background: linear-gradient(180deg, #F8FAFC, #F1F5F9);
    border-radius: 16px;
}
.biz-v2 .biz-aside .bp-cicon { width: 78px; min-width: 0; }
.biz-v2 .biz-aside .bp-cicon b { width: 52px; height: 52px; }
.biz-v2 .social-links { border-top-style: dashed; }
.biz-v2 .social-links a { width: 40px; height: 40px; box-shadow: 0 4px 10px rgba(15, 27, 45, .18); }

/* ---------- Chips ---------- */
.biz-v2 .service-tag {
    background: var(--biz-teal-soft);
    color: #14524B;
    border: 1px solid rgba(34, 129, 117, .18);
    padding: 7px 15px;
    font-weight: 600;
}
.biz-v2 .service-tag i { color: var(--biz-teal); }
.biz-v2 .facility-tag { background: #F3F5F8; color: #334155; border-color: var(--biz-line); }

/* ---------- Gallery ---------- */
.biz-v2 .gallery-thumb { border-radius: 14px; overflow: hidden; box-shadow: 0 6px 16px rgba(15, 27, 45, .10); }

/* ---------- Reviews ---------- */
.biz-v2 .review-item { padding: 20px 0; }
.biz-v2 .review-item .reviewer { font-size: 1rem; }
.biz-v2 .star-rating i.filled { color: #F5B301; }

/* ---------- Business information cards (Passport + full profile) ---------- */
.biz-v2 .bp-card .bp-row { padding: 11px 0; border-bottom: 1px solid #EEF2F6; align-items: flex-start; justify-content: space-between; text-align: left; gap: 4px 16px; }
.biz-v2 .bp-card .bp-row:last-of-type { border-bottom: 0; }
.biz-v2 .bp-card .bp-row-label { color: var(--biz-ink-soft); font-size: .88rem; }
.biz-v2 .bp-tile {
    background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
    border: 1px solid var(--biz-line);
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(15, 27, 45, .05);
}
.biz-v2 .biz-aside .bp-card { border-top: 4px solid var(--amber-500, #F4A261); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
    .biz-v2 .biz-stat { animation: bizRise .5s ease both; }
    .biz-v2 .biz-stat:nth-child(2) { animation-delay: .05s; }
    .biz-v2 .biz-stat:nth-child(3) { animation-delay: .10s; }
    .biz-v2 .biz-stat:nth-child(4) { animation-delay: .15s; }
}
@keyframes bizRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Tablet / phone ---------- */
@media (max-width: 1000px) {
    .biz-v2 .biz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .biz-v2 .detail-grid { grid-template-columns: 1fr; }
    .biz-v2 .biz-aside { position: static; }
}
@media (max-width: 600px) {
    .biz-v2 .biz-hero { padding: 30px 0 84px; }
    .biz-v2 .biz-hero-avatar { width: 76px; height: 76px; border-radius: 20px; border-width: 3px; }
    .biz-v2 .biz-hero-avatar i { font-size: 1.7rem; }
    .biz-v2 .biz-hero-top { gap: 14px; align-items: flex-start; }
    .biz-v2 .biz-stats-wrap { margin-top: -52px; }
    .biz-v2 .biz-stats { gap: 10px; }
    .biz-v2 .biz-stat { padding: 12px; gap: 10px; border-radius: 14px; }
    .biz-v2 .biz-stat-ic { width: 38px; height: 38px; border-radius: 12px; font-size: 1rem; }
    .biz-v2 .biz-stat strong { font-size: .92rem; white-space: normal; }
    .biz-v2 .bp-card .bp-row { flex-direction: column; }
    .biz-v2 .biz-stat small { font-size: .7rem; }
    .biz-v2 .info-card { padding: 20px 18px; border-radius: 16px; }
    .biz-v2 .biz-hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}