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

:root {
    --cv-crimson: #DC143C;
    --cv-crimson-dark: #B01030;
    --cv-navy: #0F172A;
    --cv-blue: #2563EB;
    --cv-bg: #F8FAFC;
    --cv-border: #E5E7EB;
    --cv-text: #475569;
    --cv-muted: #94A3B8;
    --cv-radius: 16px;
}

.cv-page {
    font-family: Inter, system-ui, sans-serif;
    background: var(--cv-bg);
    color: var(--cv-text);
    min-height: 70vh;
}

.cv-page h1, .cv-page h2, .cv-page h3, .cv-page h4 {
    color: var(--cv-navy);
    letter-spacing: -.02em;
}

.cv-hero-mini {
    background: linear-gradient(135deg, #0F172A 0%, #1e293b 55%, #7f1d1d 140%);
    color: #fff;
    padding: 2.25rem 0;
}

.cv-hero-mini .lead { color: rgba(255,255,255,.78); }

.cv-shell {
    padding: 1.5rem 0 3rem;
}

.cv-progress {
    height: .45rem;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: .75rem;
}

.cv-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--cv-crimson), var(--cv-blue));
    width: 10%;
    transition: width .35s ease;
}

.cv-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.25rem;
}

.cv-step-pill {
    border: 1px solid var(--cv-border);
    background: #fff;
    color: var(--cv-muted);
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}

.cv-step-pill.is-active {
    background: var(--cv-navy);
    border-color: var(--cv-navy);
    color: #fff;
}

.cv-step-pill.is-done {
    border-color: rgba(22,163,74,.35);
    color: #16a34a;
}

.cv-panel {
    background: #fff;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius);
    box-shadow: 0 8px 30px rgba(15,23,42,.05);
    padding: 1.35rem;
}

.cv-panel__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.cv-panel__hint {
    font-size: .9rem;
    color: var(--cv-muted);
    margin-bottom: 1.1rem;
}

.cv-btn-primary {
    background: linear-gradient(135deg, var(--cv-crimson), #e11d48);
    border: none;
    color: #fff !important;
    font-weight: 600;
    border-radius: 12px;
    padding: .7rem 1.25rem;
    box-shadow: 0 8px 20px rgba(220,20,60,.22);
    transition: transform .2s ease, box-shadow .2s ease;
}

.cv-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(220,20,60,.3);
    color: #fff !important;
}

.cv-btn-secondary {
    border: 1.5px solid var(--cv-navy);
    color: var(--cv-navy) !important;
    background: transparent;
    font-weight: 600;
    border-radius: 12px;
    padding: .7rem 1.25rem;
}

.cv-btn-secondary:hover {
    background: var(--cv-navy);
    color: #fff !important;
}

.cv-repeat-card {
    border: 1px dashed var(--cv-border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: .85rem;
    background: #fbfdff;
}

.cv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    min-height: 2.5rem;
    border: 1px solid var(--cv-border);
    border-radius: 12px;
    padding: .45rem;
    background: #fff;
}

.cv-tag {
    background: #eff6ff;
    color: var(--cv-blue);
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .8rem;
    font-weight: 600;
}

.cv-tag button {
    border: 0;
    background: transparent;
    color: inherit;
    margin-left: .2rem;
}

.cv-template-card {
    border: 2px solid var(--cv-border);
    border-radius: 14px;
    padding: 1rem;
    cursor: pointer;
    height: 100%;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.cv-template-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

.cv-template-card.is-selected {
    border-color: var(--cv-crimson);
    box-shadow: 0 0 0 3px rgba(220,20,60,.12);
}

.cv-preview-wrap {
    position: sticky;
    top: 1rem;
}

.cv-preview-paper {
    background: #fff;
    border: 1px solid var(--cv-border);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(15,23,42,.1);
    min-height: 640px;
    overflow: hidden;
    transform-origin: top center;
}

.cv-preview-scale {
    width: 100%;
    overflow: auto;
    max-height: calc(100vh - 140px);
    padding: .5rem;
    background: #e2e8f0;
    border-radius: var(--cv-radius);
}

/* ===== Preview / PDF shared template styles ===== */
.cv-doc { font-family: Inter, Arial, sans-serif; color: #1f2937; font-size: 12px; line-height: 1.45; }
.cv-doc h1 { margin: 0 0 4px; font-size: 22px; color: #0f172a; }
.cv-doc h2 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid #cbd5e1; padding-bottom: 4px; color: #0f172a; }
.cv-doc h3 { margin: 0; font-size: 12.5px; color: #0f172a; }
.cv-doc p { margin: 0 0 8px; }
.cv-doc ul { margin: 4px 0 10px; padding-left: 16px; }
.cv-doc .muted { color: #64748b; }
.cv-doc .item { margin-bottom: 10px; }
.cv-doc .row-between { display: flex; justify-content: space-between; gap: 8px; }

/* ATS */
.cv-ats { padding: 28px 32px; background: #fff; color: #000; }
.cv-ats h1 { font-size: 24px; text-transform: uppercase; letter-spacing: .04em; }
.cv-ats .contact { margin-bottom: 14px; color: #222; }
.cv-ats h2 { border-bottom: 1px solid #000; margin-top: 14px; }

/* Template picker swatches */
.cv-template-card__swatch {
    height: 8px;
    border-radius: 999px;
    margin-bottom: .65rem;
    background: #cbd5e1;
}
.cv-template-card__swatch--ats { background: linear-gradient(90deg, #111, #999); }
.cv-template-card__swatch--tech { background: linear-gradient(90deg, #0B1220, #14B8A6); }
.cv-template-card__swatch--designer { background: linear-gradient(90deg, #2563EB, #DC143C); }
.cv-template-card__swatch--corporate { background: linear-gradient(90deg, #1E3A5F, #C9A227); }
.cv-template-card__swatch--engineer { background: linear-gradient(90deg, #1C2B2D, #0D9488); }
.cv-template-card__swatch--educator { background: linear-gradient(90deg, #B45309, #FDE68A); }
.cv-template-card__swatch--marketing { background: linear-gradient(90deg, #DC143C, #FECDD3); }

/* Tech / sidebar family */
.cv-sidebar { display: flex; min-height: 640px; }
.cv-sidebar__left {
    width: 34%;
    background: #0B1220;
    color: #e2e8f0;
    padding: 22px 16px;
}
.cv-sidebar__right { width: 66%; padding: 22px 18px; background: #fff; }
.cv-sidebar__left h2 { color: #fff; border-bottom-color: rgba(20,184,166,.55); }
.cv-sidebar__photo {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    border: 3px solid #14B8A6; display: block; margin: 0 auto 14px;
}
.cv-sidebar .accent { color: #14B8A6; }
.cv-sidebar--corporate .cv-sidebar__left { background: #1E3A5F; }
.cv-sidebar--corporate .cv-sidebar__photo { border-color: #C9A227; }
.cv-sidebar--corporate .accent,
.cv-sidebar--corporate .cv-sidebar__left .role { color: #C9A227; }
.cv-sidebar--corporate .cv-sidebar__left h2 { border-bottom-color: rgba(201,162,39,.55); }
.cv-sidebar--engineer .cv-sidebar__left { background: #1C2B2D; }
.cv-sidebar--engineer .cv-sidebar__photo { border-color: #0D9488; }
.cv-sidebar--engineer .accent { color: #0D9488; }
.cv-sidebar--engineer .cv-sidebar__left h2 { border-bottom-color: rgba(13,148,136,.55); }

/* Card family */
.cv-card-tpl { padding: 18px; background: #f8fafc; }
.cv-card-tpl__inner {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15,23,42,.08);
    padding: 22px;
}
.cv-card-tpl__header {
    border-left: 4px solid #DC143C;
    padding-left: 12px;
    margin-bottom: 14px;
}
.cv-card-tpl h2 { color: #2563EB; border-bottom-color: #dbeafe; }
.cv-card-tpl--educator { background: #FFFBF5; }
.cv-card-tpl--educator .cv-card-tpl__header { border-left-color: #B45309; }
.cv-card-tpl--educator h2 { color: #B45309; border-bottom-color: #FDE68A; }
.cv-card-tpl--marketing { background: #FFF5F5; }
.cv-card-tpl--marketing .cv-card-tpl__header { border-left-color: #DC143C; }
.cv-card-tpl--marketing h2 { color: #9F1239; border-bottom-color: #FECDD3; }

/* Keep legacy class hooks */
.cv-modern { display: flex; min-height: 640px; }
.cv-creative { padding: 18px; background: #f8fafc; }

.cv-photo-preview {
    width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid #e5e7eb;
}

.cv-success-banner {
    border-radius: var(--cv-radius);
    background: linear-gradient(120deg, rgba(220,20,60,.08), rgba(37,99,235,.1));
    border: 1px solid var(--cv-border);
    padding: 1.25rem 1.5rem;
}

@media (max-width: 991.98px) {
    .cv-preview-wrap { position: static; margin-top: 1.25rem; }
    .cv-preview-scale { max-height: none; }
}