/* ═══════════════════════════════════════════
   JM All-Pro Reviews — Frontend Styles
   ═══════════════════════════════════════════ */

:root {
    --jmar-gold: #ffc03d;
    --jmar-gold-dark: #e6a800;
    --jmar-navy: #212d45;
    --jmar-navy-light: #2a3a5c;
    --jmar-charcoal: #4b4f58;
    --jmar-light: #f8f9fb;
    --jmar-white: #ffffff;
    --jmar-border: #e5e7eb;
    --jmar-google: #4285F4;
    --jmar-facebook: #1877F2;
    --jmar-homedepot: #F96302;
    --jmar-green: #16a34a;
    --jmar-radius: 16px;
    --jmar-radius-sm: 10px;
    --jmar-shadow: 0 4px 24px rgba(33,45,69,.08);
    --jmar-shadow-hover: 0 8px 32px rgba(33,45,69,.14);
    --jmar-transition: .25s cubic-bezier(.4,0,.2,1);
}

/* Reset for plugin scope */
.jmar-page { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--jmar-charcoal); line-height: 1.6; }
.jmar-page *, .jmar-page *::before, .jmar-page *::after { box-sizing: border-box; }
.jmar-page h1, .jmar-page h2, .jmar-page h3 { font-family: 'Montserrat', 'Open Sans', sans-serif; }

/* ── HERO ── */
.jmar-hero {
    background: linear-gradient(135deg, var(--jmar-navy) 0%, var(--jmar-navy-light) 50%, #1a2744 100%);
    color: var(--jmar-white);
    padding: 64px 24px;
    text-align: center;
    border-radius: var(--jmar-radius);
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
.jmar-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,192,61,.12) 0%, transparent 60%),
                radial-gradient(circle at 70% 80%, rgba(255,192,61,.08) 0%, transparent 50%);
    pointer-events: none;
}
.jmar-hero-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.jmar-hero-badge { margin-bottom: 24px; }
.jmar-hero-number {
    display: block;
    font-size: 72px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    background: linear-gradient(135deg, var(--jmar-gold), #ffe08a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.jmar-hero-stars { font-size: 28px; margin-top: 8px; }
.jmar-hero-stars .jmar-star { color: var(--jmar-gold); }
.jmar-hero-title {
    font-size: 28px;
    font-weight: 700;
    margin: 16px 0 12px;
    line-height: 1.3;
}
.jmar-hero-sub {
    font-size: 16px;
    opacity: .85;
    margin: 0;
}

/* ── PLATFORM CARDS ── */
.jmar-platforms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
.jmar-platform {
    background: var(--jmar-white);
    border: 1px solid var(--jmar-border);
    border-radius: var(--jmar-radius);
    padding: 28px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--jmar-charcoal);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform var(--jmar-transition), box-shadow var(--jmar-transition);
    box-shadow: var(--jmar-shadow);
    position: relative;
    overflow: hidden;
}
.jmar-platform::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}
.jmar-platform--google::before { background: var(--jmar-google); }
.jmar-platform--facebook::before { background: var(--jmar-facebook); }
.jmar-platform--homedepot::before { background: var(--jmar-homedepot); }

.jmar-platform:hover {
    transform: translateY(-4px);
    box-shadow: var(--jmar-shadow-hover);
}
.jmar-platform-icon { display: flex; align-items: center; justify-content: center; }
.jmar-platform-icon svg { width: 32px; height: 32px; }
.jmar-platform-name {
    font-weight: 700;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.jmar-platform-rating {
    font-size: 28px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    color: var(--jmar-navy);
}
.jmar-star-sm { color: var(--jmar-gold); font-size: 20px; }
.jmar-platform-count {
    font-size: 14px;
    color: #6b7280;
}
.jmar-platform-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--jmar-google);
    margin-top: 4px;
}
.jmar-platform--facebook .jmar-platform-link { color: var(--jmar-facebook); }
.jmar-platform--homedepot .jmar-platform-link { color: var(--jmar-homedepot); }

/* ── FILTERS ── */
.jmar-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 32px;
    padding: 0 16px;
}
.jmar-filter {
    padding: 10px 22px;
    border: 2px solid var(--jmar-border);
    border-radius: 100px;
    background: var(--jmar-white);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    color: var(--jmar-charcoal);
    transition: all var(--jmar-transition);
}
.jmar-filter:hover {
    border-color: var(--jmar-navy);
    color: var(--jmar-navy);
}
.jmar-filter--active {
    background: var(--jmar-navy);
    border-color: var(--jmar-navy);
    color: var(--jmar-white);
}

/* ── REVIEW CARDS GRID ── */
.jmar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.jmar-card {
    background: var(--jmar-white);
    border: 1px solid var(--jmar-border);
    border-radius: var(--jmar-radius);
    padding: 28px;
    box-shadow: var(--jmar-shadow);
    transition: transform var(--jmar-transition), box-shadow var(--jmar-transition), opacity .3s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.jmar-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--jmar-shadow-hover);
}
.jmar-card.jmar-card--hidden {
    display: none;
}

/* Card top: source badge + verified */
.jmar-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.jmar-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--jmar-white);
}
.jmar-source-badge svg { width: 16px; height: 16px; flex-shrink: 0; }
.jmar-source--google { background: var(--jmar-google); }
.jmar-source--facebook { background: var(--jmar-facebook); }
.jmar-source--homedepot { background: var(--jmar-homedepot); }

.jmar-card-verified {
    font-size: 12px;
    font-weight: 600;
    color: var(--jmar-green);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Stars */
.jmar-card-stars { font-size: 20px; line-height: 1; }
.jmar-star { display: inline-block; }
.jmar-star--full { color: var(--jmar-gold); }
.jmar-star--half { color: var(--jmar-gold); opacity: .6; }
.jmar-star--empty { color: #d1d5db; }

/* Meta */
.jmar-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.jmar-card-author { color: var(--jmar-navy); font-size: 15px; }
.jmar-card-location {
    color: #6b7280;
    font-size: 13px;
}
.jmar-card-location::before {
    content: '·';
    margin-right: 8px;
}
.jmar-card-date {
    color: #9ca3af;
    font-size: 13px;
}
.jmar-card-date::before {
    content: '·';
    margin-right: 8px;
}

/* Service tag */
.jmar-card-service {
    font-size: 13px;
    color: var(--jmar-navy);
}
.jmar-service-label {
    font-weight: 600;
    opacity: .7;
}

/* Review text */
.jmar-card-text {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 15px;
    line-height: 1.7;
    color: var(--jmar-charcoal);
    quotes: none;
}
.jmar-card-text::before { content: '\201C'; color: var(--jmar-gold); font-size: 24px; font-weight: 700; margin-right: 4px; }

.jmar-card-recommend {
    font-size: 15px;
    font-style: italic;
    color: var(--jmar-green);
    font-weight: 600;
    margin: 0;
}
.jmar-card-recommend::before {
    content: '\2714\00a0';
}

/* Owner response */
.jmar-card-response {
    background: var(--jmar-light);
    border-left: 3px solid var(--jmar-gold);
    border-radius: 0 var(--jmar-radius-sm) var(--jmar-radius-sm) 0;
    padding: 16px 20px;
    font-size: 14px;
    margin-top: 4px;
}
.jmar-card-response strong {
    display: block;
    font-size: 13px;
    color: var(--jmar-navy);
    margin-bottom: 6px;
}
.jmar-card-response p {
    margin: 0;
    color: #6b7280;
    line-height: 1.6;
}

/* ── CTA ── */
.jmar-cta {
    background: linear-gradient(135deg, var(--jmar-navy), var(--jmar-navy-light));
    color: var(--jmar-white);
    text-align: center;
    padding: 56px 24px;
    border-radius: var(--jmar-radius);
    margin-bottom: 48px;
}
.jmar-cta h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
}
.jmar-cta p {
    font-size: 16px;
    opacity: .85;
    margin: 0 0 28px;
}
.jmar-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.jmar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    transition: all var(--jmar-transition);
    min-width: 200px;
}
.jmar-btn--primary {
    background: var(--jmar-gold);
    color: var(--jmar-navy);
}
.jmar-btn--primary:hover {
    background: var(--jmar-gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255,192,61,.4);
}
.jmar-btn--secondary {
    background: transparent;
    color: var(--jmar-white);
    border: 2px solid rgba(255,255,255,.3);
}
.jmar-btn--secondary:hover {
    border-color: var(--jmar-white);
    background: rgba(255,255,255,.1);
}

/* ── AI SUMMARY (visible but subtle) ── */
.jmar-ai-summary {
    background: var(--jmar-light);
    border: 1px solid var(--jmar-border);
    border-radius: var(--jmar-radius);
    padding: 32px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
}
.jmar-ai-summary h2 {
    font-size: 18px;
    color: var(--jmar-navy);
    margin: 0 0 12px;
}
.jmar-ai-summary ul {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}
.jmar-ai-summary li {
    padding: 6px 0;
    border-bottom: 1px solid var(--jmar-border);
}
.jmar-ai-summary li:last-child { border-bottom: none; }
.jmar-ai-summary a {
    color: var(--jmar-google);
    text-decoration: none;
    font-weight: 600;
}
.jmar-ai-summary a:hover { text-decoration: underline; }

/* ── FLOATING BADGE ── */
.jmar-floating-badge {
    position: fixed;
    z-index: 9999;
    background: var(--jmar-white);
    border: 1px solid var(--jmar-border);
    border-radius: var(--jmar-radius);
    padding: 12px 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    text-decoration: none;
    color: var(--jmar-charcoal);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: transform var(--jmar-transition), box-shadow var(--jmar-transition);
    cursor: pointer;
}
.jmar-floating-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.jmar-floating--bottom-right { bottom: 24px; right: 24px; }
.jmar-floating--bottom-left { bottom: 24px; left: 24px; }

.jmar-fb-stars { font-size: 16px; }
.jmar-fb-stars .jmar-star { color: var(--jmar-gold); }
.jmar-fb-score {
    font-size: 24px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    color: var(--jmar-navy);
    line-height: 1;
}
.jmar-fb-count {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

/* ── INLINE BADGE ── */
.jmar-inline-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--jmar-white);
    border: 1px solid var(--jmar-border);
    border-radius: 100px;
    padding: 8px 20px;
    text-decoration: none;
    color: var(--jmar-charcoal);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--jmar-shadow);
    transition: all var(--jmar-transition);
}
.jmar-inline-badge:hover {
    box-shadow: var(--jmar-shadow-hover);
    transform: translateY(-1px);
}
.jmar-ib-stars .jmar-star { color: var(--jmar-gold); font-size: 16px; }
.jmar-ib-score { color: var(--jmar-navy); font-weight: 800; }
.jmar-ib-sep { color: var(--jmar-border); }
.jmar-ib-count { color: #6b7280; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .jmar-grid { grid-template-columns: 1fr; }
    .jmar-platforms { grid-template-columns: 1fr; gap: 14px; }
    .jmar-hero { padding: 48px 20px; }
    .jmar-hero-number { font-size: 56px; }
    .jmar-hero-title { font-size: 22px; }
    .jmar-card { padding: 20px; }
    .jmar-cta { padding: 40px 20px; }
    .jmar-cta h2 { font-size: 22px; }
    .jmar-btn { min-width: unset; width: 100%; }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .jmar-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 480px) {
    .jmar-hero-number { font-size: 48px; }
    .jmar-hero-title { font-size: 20px; }
    .jmar-hero-stars { font-size: 22px; }
    .jmar-filters { gap: 8px; }
    .jmar-filter { padding: 8px 16px; font-size: 13px; }
    .jmar-floating-badge { bottom: 16px; right: 16px; padding: 10px 14px; }
    .jmar-fb-score { font-size: 20px; }
    .jmar-card-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
    .jmar-card-location::before, .jmar-card-date::before { display: none; }
    .jmar-ai-summary { padding: 20px; }
}

/* ── ANIMATION (safe: cards always visible, animation is enhancement only) ── */
@media (prefers-reduced-motion: no-preference) {
    .jmar-card.jmar-animate {
        animation: jmarFadeUp .5s ease both;
    }
    .jmar-card.jmar-animate:nth-child(2) { animation-delay: .05s; }
    .jmar-card.jmar-animate:nth-child(3) { animation-delay: .1s; }
    .jmar-card.jmar-animate:nth-child(4) { animation-delay: .15s; }
    .jmar-card.jmar-animate:nth-child(5) { animation-delay: .2s; }
    .jmar-card.jmar-animate:nth-child(6) { animation-delay: .25s; }
    .jmar-card.jmar-animate:nth-child(7) { animation-delay: .3s; }
    .jmar-card.jmar-animate:nth-child(8) { animation-delay: .35s; }
    .jmar-platform.jmar-animate {
        animation: jmarFadeUp .5s ease both;
    }
    .jmar-platform.jmar-animate:nth-child(2) { animation-delay: .1s; }
    .jmar-platform.jmar-animate:nth-child(3) { animation-delay: .2s; }
}

@keyframes jmarFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Print styles */
@media print {
    .jmar-floating-badge { display: none; }
    .jmar-hero { background: #333 !important; -webkit-print-color-adjust: exact; }
    .jmar-card { break-inside: avoid; }
}