/* ═══════════════════════════════════════════════════════════════════
   YoyoScore — Custom Styles
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --ys-primary: #4f46e5;     /* indigo */
    --ys-primary-dark: #3730a3;
    --ys-accent: #06b6d4;      /* cyan */
    --ys-gradient: linear-gradient(135deg, var(--ys-primary), var(--ys-accent));
    --ys-gradient-dark: linear-gradient(135deg, var(--ys-primary-dark), #0891b2);
}

/* ── Override Bootstrap primary ───────────────────────────────────── */
.btn-primary {
    background: var(--ys-primary);
    border-color: var(--ys-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--ys-primary-dark);
    border-color: var(--ys-primary-dark);
}
.btn-outline-primary {
    color: var(--ys-primary);
    border-color: var(--ys-primary);
}
.btn-outline-primary:hover {
    background: var(--ys-primary);
    border-color: var(--ys-primary);
    color: #fff;
}
.text-primary { color: var(--ys-primary) !important; }
.bg-primary  { background: var(--ys-primary) !important; }

/* ── Typography ───────────────────────────────────────────────────── */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1e293b;
}

.brand-icon {
    font-size: 1.4rem;
    vertical-align: middle;
}

/* ── Navbar ────────────────────────────────────────────────────────── */
.navbar {
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,.92) !important;
}

/* ── Hero section ─────────────────────────────────────────────────── */
.hero-section {
    background: var(--ys-gradient);
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}
.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* ── CTA section ──────────────────────────────────────────────────── */
.cta-section {
    background: var(--ys-gradient-dark);
}

/* ── Score preview card on landing ────────────────────────────────── */
.score-preview-card {
    background: #fff;
    max-width: 340px;
    margin: 0 auto;
}

/* ── Composite score card ─────────────────────────────────────────── */
.composite-card {
    background: var(--ys-gradient);
    color: #fff;
    border-radius: 1rem;
}
.composite-card .text-muted { color: rgba(255,255,255,.7) !important; }
.composite-score {
    font-size: 5rem;
    line-height: 1;
}
.score-ring {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(rgba(255,255,255,.9) calc(var(--pct) * 1%), rgba(255,255,255,.15) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.score-ring::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: var(--ys-primary);
}

/* ── Progress bars ────────────────────────────────────────────────── */
.progress {
    border-radius: 6px;
    background: #e2e8f0;
}
.progress-bar {
    border-radius: 6px;
    transition: width .6s ease;
}

/* ── Pricing cards ────────────────────────────────────────────────── */
.pricing-card {
    transition: transform .2s ease, box-shadow .2s ease;
    border-radius: .75rem;
    overflow: hidden;
}
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.1) !important;
}
.pricing-card-featured {
    border: 2px solid var(--ys-primary) !important;
    box-shadow: 0 8px 30px rgba(79,70,229,.15) !important;
}

/* ── Dashboard table ──────────────────────────────────────────────── */
.table th {
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #64748b;
}

/* ── Cards (global) ───────────────────────────────────────────────── */
.card {
    border-radius: .75rem;
}

/* ── Print styles for results PDF ─────────────────────────────────── */
@media print {
    .navbar, footer, .btn, .breadcrumb { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}