/* =========================================================
   MARHABA CV STUDIO
   ========================================================= */

.cv-studio-page {
    --cv-navy: #07152d;
    --cv-blue: #1256d8;
    --cv-cyan: #18b6d9;
    --cv-purple: #7c3aed;
    --cv-gold: #f4b942;
    --cv-white: #ffffff;
    --cv-light: #f4f7fc;
    --cv-text: #152238;
    --cv-muted: #637083;
    overflow: hidden;
    background: var(--cv-light);
    color: var(--cv-text);
}

.cv-studio-page *,
.cv-studio-page *::before,
.cv-studio-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   HERO
   ========================================================= */

.cv-gallery-hero {
    position: relative;
    min-height: 760px;
    padding: 30px 0 90px;
    overflow: hidden;
    color: var(--cv-white);
    background:
        linear-gradient(
            120deg,
            rgba(5, 15, 38, 0.98),
            rgba(9, 38, 79, 0.96) 54%,
            rgba(31, 31, 94, 0.95)
        );
}

.cv-gallery-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.2;
    background-image:
        radial-gradient(
            circle at 20% 20%,
            rgba(255, 255, 255, 0.23) 1px,
            transparent 1px
        );
    background-size: 34px 34px;
}

.cv-gallery-hero::after {
    position: absolute;
    right: -160px;
    bottom: -280px;
    width: 720px;
    height: 720px;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgba(255, 255, 255, 0.025),
        0 0 0 140px rgba(255, 255, 255, 0.018);
}

.cv-gallery-hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    transform: perspective(700px) rotateX(64deg) scale(1.4);
    transform-origin: bottom;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 62px 62px;
}

.cv-hero-light {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(8px);
    pointer-events: none;
}

.cv-hero-light-one {
    top: 100px;
    left: -140px;
    width: 410px;
    height: 410px;
    background: rgba(18, 86, 216, 0.28);
    animation: cvLightFloat 9s ease-in-out infinite;
}

.cv-hero-light-two {
    top: 50px;
    right: 5%;
    width: 370px;
    height: 370px;
    background: rgba(124, 58, 237, 0.23);
    animation: cvLightFloat 11s ease-in-out infinite reverse;
}

@keyframes cvLightFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(35px, 28px, 0);
    }
}


/* =========================================================
   TOP BAR
   ========================================================= */

.cv-studio-topbar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.065);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(18px);
}

.cv-studio-topbar a,
.cv-studio-topbar > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.cv-studio-topbar a {
    padding: 10px 14px;
    border-radius: 11px;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.cv-studio-topbar a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(-3px);
}

.cv-studio-topbar > span i {
    color: var(--cv-gold);
    font-size: 1.2rem;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.cv-gallery-hero-content {
    position: relative;
    z-index: 3;
    max-width: 990px;
    margin: 105px auto 0;
    text-align: center;
}

.cv-gallery-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    padding: 10px 16px;
    border: 1px solid rgba(244, 185, 66, 0.32);
    border-radius: 999px;
    color: #ffd979;
    background: rgba(244, 185, 66, 0.08);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.cv-gallery-eyebrow i {
    animation: cvStarPulse 2s ease-in-out infinite;
}

@keyframes cvStarPulse {
    0%,
    100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) rotate(8deg);
    }
}

.cv-gallery-hero-content h1 {
    max-width: 900px;
    margin: 0 auto;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(3rem, 6.4vw, 6.3rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.cv-gallery-hero-content h1 span {
    display: block;
    margin-top: 12px;
    color: transparent;
    background: linear-gradient(90deg, #74d9ff, #b7a3ff, #ffd16c);
    background-clip: text;
    -webkit-background-clip: text;
}

.cv-gallery-hero-content > p {
    max-width: 720px;
    margin: 30px auto 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.1rem;
    line-height: 1.8;
}

.cv-gallery-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 35px;
}

.cv-primary-button,
.cv-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 55px;
    padding: 14px 23px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.cv-primary-button {
    color: #07152d;
    background: linear-gradient(135deg, #ffffff, #bfeaff);
    box-shadow: 0 17px 38px rgba(18, 182, 217, 0.18);
}

.cv-primary-button:hover {
    color: #07152d;
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(18, 182, 217, 0.28);
}

.cv-secondary-button {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(14px);
}

.cv-secondary-button:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
    transform: translateY(-4px);
}

.cv-secondary-button .bi-whatsapp {
    color: #5fe79b;
    font-size: 1.15rem;
}


/* =========================================================
   HERO FEATURES
   ========================================================= */

.cv-gallery-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-top: 70px;
}

.cv-gallery-features > div {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 92px;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 17px;
    text-align: left;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(15px);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.cv-gallery-features > div:hover {
    border-color: rgba(116, 217, 255, 0.38);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.cv-gallery-features > div > i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    color: #9be7ff;
    background: rgba(116, 217, 255, 0.1);
    font-size: 1.2rem;
}

.cv-gallery-features span {
    display: grid;
    gap: 3px;
}

.cv-gallery-features strong {
    color: #ffffff;
    font-size: 0.87rem;
}

.cv-gallery-features small {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.72rem;
}


/* =========================================================
   SHARED SECTION HEADING
   ========================================================= */

.cv-template-section,
.cv-process-section,
.cv-payment-notice-section {
    position: relative;
    padding: 100px 0;
}

.cv-template-section {
    background:
        radial-gradient(circle at 12% 10%, rgba(18, 86, 216, 0.08), transparent 28%),
        radial-gradient(circle at 88% 30%, rgba(124, 58, 237, 0.075), transparent 25%),
        linear-gradient(180deg, #f4f7fc, #ffffff);
}

.cv-template-section::before {
    position: absolute;
    top: 40px;
    right: 4%;
    width: 200px;
    height: 200px;
    content: "";
    opacity: 0.32;
    background-image:
        radial-gradient(circle, rgba(18, 86, 216, 0.25) 2px, transparent 2px);
    background-size: 18px 18px;
}

.cv-section-heading {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.cv-section-heading > span {
    display: inline-block;
    margin-bottom: 13px;
    color: var(--cv-blue);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.cv-section-heading h2 {
    margin: 0;
    color: #0d1b34;
    font-family: "Playfair Display", serif;
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.cv-section-heading p {
    max-width: 660px;
    margin: 19px auto 0;
    color: var(--cv-muted);
    font-size: 1rem;
    line-height: 1.75;
}


/* =========================================================
   TEMPLATE CARDS
   ========================================================= */

.cv-template-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 26px;
}

.cv-template-card {
    grid-column: span 2;
    overflow: hidden;
    border: 1px solid rgba(22, 50, 79, 0.09);
    border-radius: 27px;
    background: #ffffff;
    box-shadow: 0 22px 65px rgba(27, 45, 78, 0.1);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.cv-template-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.cv-template-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.cv-template-card:hover {
    border-color: color-mix(
        in srgb,
        var(--template-accent) 35%,
        transparent
    );
    transform: translateY(-10px);
    box-shadow: 0 34px 80px rgba(27, 45, 78, 0.17);
}

.cv-template-preview {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 440px;
    overflow: hidden;
    padding: 42px 32px;
    background:
        radial-gradient(
            circle at 20% 20%,
            color-mix(in srgb, var(--template-accent) 36%, transparent),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            var(--template-primary),
            color-mix(in srgb, var(--template-primary) 72%, #000000)
        );
}

.cv-template-preview::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.14;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 28px 28px;
}

.cv-template-number {
    position: absolute;
    top: 20px;
    right: 22px;
    z-index: 3;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.cv-mini-document {
    position: relative;
    z-index: 2;
    width: 225px;
    height: 318px;
    overflow: hidden;
    padding: 18px;
    border-radius: 5px;
    background: #ffffff;
    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.33),
        0 0 0 1px rgba(255, 255, 255, 0.5);
    transform: rotate(-2deg);
    transition: transform 0.4s ease;
}

.cv-template-card:hover .cv-mini-document {
    transform: rotate(0deg) scale(1.045);
}

.cv-mini-header {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: -18px -18px 17px;
    padding: 18px;
    color: #ffffff;
    background: var(--template-primary);
}

.cv-mini-header > div {
    display: grid;
    gap: 4px;
}

.cv-mini-header strong {
    color: #ffffff;
    font-size: 0.64rem;
    letter-spacing: 0.09em;
}

.cv-mini-header small {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.43rem;
}

.cv-mini-photo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    color: var(--template-primary);
    background: var(--template-secondary);
    font-size: 1.1rem;
}

.cv-mini-body {
    display: grid;
    grid-template-columns: 63px 1fr;
    gap: 15px;
    height: 235px;
}

.cv-mini-body aside {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: -17px 0 -18px -18px;
    padding: 20px 12px;
    background: var(--template-secondary);
}

.cv-mini-body aside span {
    display: block;
    height: 4px;
    border-radius: 99px;
    background: color-mix(
        in srgb,
        var(--template-primary) 35%,
        transparent
    );
}

.cv-mini-body aside span:nth-child(1),
.cv-mini-body aside span:nth-child(4) {
    width: 80%;
    height: 6px;
    margin-top: 6px;
    background: var(--template-accent);
}

.cv-mini-body > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cv-mini-body > div strong {
    display: block;
    width: 54%;
    height: 7px;
    margin: 5px 0 2px;
    border-radius: 99px;
    background: var(--template-accent);
}

.cv-mini-body > div span {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 99px;
    background: #dce2ea;
}

.cv-mini-body > div span:nth-of-type(2),
.cv-mini-body > div span:nth-of-type(5) {
    width: 86%;
}

.cv-mini-body > div span:nth-of-type(3),
.cv-mini-body > div span:nth-of-type(6) {
    width: 65%;
}

.cv-preview-shine {
    position: absolute;
    top: -80%;
    left: -80%;
    z-index: 3;
    width: 48%;
    height: 250%;
    opacity: 0;
    transform: rotate(24deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.28),
        transparent
    );
    transition:
        left 0.7s ease,
        opacity 0.25s ease;
}

.cv-template-card:hover .cv-preview-shine {
    left: 140%;
    opacity: 1;
}

.cv-template-content {
    padding: 27px;
}

.cv-template-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 17px;
}

.cv-template-labels > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
}

.cv-ats-label {
    color: #087249;
    background: #dff8ed;
}

.cv-photo-label {
    color: #42526b;
    background: #edf1f7;
}

.cv-template-content h3 {
    margin: 0;
    color: #101d33;
    font-family: "Playfair Display", serif;
    font-size: 1.55rem;
    font-weight: 800;
}

.cv-template-content > p {
    min-height: 78px;
    margin: 13px 0 18px;
    color: var(--cv-muted);
    font-size: 0.88rem;
    line-height: 1.65;
}

.cv-template-colours {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 21px;
    padding-top: 16px;
    border-top: 1px solid #edf0f5;
}

.cv-template-colours > span {
    width: 17px;
    height: 17px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(13, 27, 52, 0.14);
}

.cv-template-colours small {
    margin-left: 5px;
    color: #7a8597;
    font-size: 0.68rem;
}

.cv-template-content > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 50px;
    padding: 13px 17px;
    border-radius: 13px;
    color: #ffffff;
    background: var(--template-primary);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.cv-template-content > a:hover {
    color: #ffffff;
    background: var(--template-accent);
    transform: translateY(-2px);
    box-shadow: 0 13px 27px rgba(13, 27, 52, 0.16);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.cv-gallery-empty {
    max-width: 650px;
    margin: 0 auto;
    padding: 55px 30px;
    border: 1px dashed rgba(18, 86, 216, 0.25);
    border-radius: 24px;
    text-align: center;
    background: #ffffff;
}

.cv-gallery-empty > i {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 20px;
    color: var(--cv-blue);
    background: rgba(18, 86, 216, 0.09);
    font-size: 2rem;
}

.cv-gallery-empty h3 {
    color: #101d33;
}

.cv-gallery-empty p {
    margin: 0;
    color: var(--cv-muted);
}


/* =========================================================
   PROCESS
   ========================================================= */

.cv-process-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 20%, rgba(24, 182, 217, 0.12), transparent 27%),
        radial-gradient(circle at 92% 80%, rgba(124, 58, 237, 0.12), transparent 28%),
        linear-gradient(135deg, #07152d, #0c2751 55%, #24174d);
}

.cv-process-section .cv-section-heading > span {
    color: #79def7;
}

.cv-process-section .cv-section-heading h2 {
    color: #ffffff;
}

.cv-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.cv-process-grid article {
    position: relative;
    min-height: 270px;
    overflow: hidden;
    padding: 29px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 22px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.065);
    backdrop-filter: blur(15px);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.cv-process-grid article:hover {
    border-color: rgba(121, 222, 247, 0.34);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-8px);
}

.cv-process-grid article > span {
    position: absolute;
    top: 18px;
    right: 20px;
    color: rgba(255, 255, 255, 0.22);
    font-size: 2.3rem;
    font-weight: 900;
}

.cv-process-grid article > i {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    margin-bottom: 37px;
    border-radius: 16px;
    color: #9ae9ff;
    background: rgba(24, 182, 217, 0.12);
    font-size: 1.45rem;
}

.cv-process-grid article h3 {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
}

.cv-process-grid article p {
    margin: 0;
    color: rgba(255, 255, 255, 0.63);
    font-size: 0.84rem;
    line-height: 1.7;
}


/* =========================================================
   PAYMENT NOTICE
   ========================================================= */

.cv-payment-notice-section {
    background:
        linear-gradient(
            120deg,
            rgba(244, 185, 66, 0.07),
            rgba(18, 86, 216, 0.06)
        ),
        #f8faff;
}

.cv-payment-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 27px;
    padding: 38px;
    border: 1px solid rgba(18, 86, 216, 0.12);
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 24px 65px rgba(27, 45, 78, 0.1);
}

.cv-payment-notice > span {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 21px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cv-blue), var(--cv-purple));
    box-shadow: 0 16px 32px rgba(18, 86, 216, 0.24);
    font-size: 1.9rem;
}

.cv-payment-notice small {
    display: block;
    margin-bottom: 6px;
    color: var(--cv-blue);
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.cv-payment-notice h2 {
    margin: 0;
    color: #101d33;
    font-size: 1.55rem;
    font-weight: 800;
}

.cv-payment-notice p {
    max-width: 680px;
    margin: 10px 0 0;
    color: var(--cv-muted);
    font-size: 0.87rem;
    line-height: 1.7;
}

.cv-payment-notice > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 13px 19px;
    border-radius: 13px;
    color: #ffffff;
    white-space: nowrap;
    background: #138b55;
    font-size: 0.83rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.cv-payment-notice > a:hover {
    color: #ffffff;
    background: #0e7547;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(19, 139, 85, 0.23);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {
    .cv-template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cv-template-card,
    .cv-template-card:nth-child(4),
    .cv-template-card:nth-child(5) {
        grid-column: auto;
    }

    .cv-template-card:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 13px);
        margin: 0 auto;
    }

    .cv-gallery-features,
    .cv-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .cv-gallery-hero {
        min-height: auto;
        padding-bottom: 70px;
    }

    .cv-studio-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .cv-gallery-hero-content {
        margin-top: 70px;
        text-align: left;
    }

    .cv-gallery-hero-content h1 {
        font-size: clamp(2.7rem, 14vw, 4.4rem);
    }

    .cv-gallery-hero-content > p {
        margin-left: 0;
    }

    .cv-gallery-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cv-primary-button,
    .cv-secondary-button {
        width: 100%;
    }

    .cv-gallery-features,
    .cv-template-grid,
    .cv-process-grid {
        grid-template-columns: 1fr;
    }

    .cv-template-card,
    .cv-template-card:nth-child(4),
    .cv-template-card:nth-child(5),
    .cv-template-card:last-child {
        grid-column: auto;
        width: 100%;
    }

    .cv-template-preview {
        min-height: 400px;
    }

    .cv-template-section,
    .cv-process-section,
    .cv-payment-notice-section {
        padding: 75px 0;
    }

    .cv-section-heading {
        text-align: left;
    }

    .cv-payment-notice {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .cv-payment-notice > a {
        width: 100%;
    }
}

@media (max-width: 479.98px) {
    .cv-gallery-features {
        grid-template-columns: 1fr;
    }

    .cv-gallery-eyebrow {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
    }

    .cv-mini-document {
        width: 205px;
        height: 290px;
    }

    .cv-template-preview {
        min-height: 370px;
        padding-inline: 20px;
    }

    .cv-template-content {
        padding: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cv-hero-light,
    .cv-gallery-eyebrow i {
        animation: none;
    }

    .cv-template-card,
    .cv-mini-document,
    .cv-preview-shine,
    .cv-process-grid article {
        transition: none;
    }
}





/* =========================================================
   CV TEMPLATE START PAGE
   ========================================================= */

.cv-template-start-page {
    min-height: 100vh;
}

.cv-start-hero {
    position: relative;
    min-height: 690px;
    overflow: hidden;
    padding: 30px 0 90px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 75% 35%,
            color-mix(in srgb, var(--selected-accent) 30%, transparent),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #061329,
            color-mix(in srgb, var(--selected-primary) 76%, #08162f)
        );
}

.cv-start-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.16;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.11) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.11) 1px,
            transparent 1px
        );
    background-size: 48px 48px;
    transform: perspective(800px) rotateX(58deg) scale(1.35);
    transform-origin: bottom;
}

.cv-start-hero::after {
    position: absolute;
    top: 140px;
    right: -210px;
    width: 610px;
    height: 610px;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    box-shadow:
        0 0 0 75px rgba(255, 255, 255, 0.025),
        0 0 0 150px rgba(255, 255, 255, 0.018);
}

.cv-start-light {
    position: absolute;
    z-index: 1;
    display: block;
    border-radius: 50%;
    filter: blur(12px);
    pointer-events: none;
}

.cv-start-light-one {
    top: 100px;
    left: -130px;
    width: 370px;
    height: 370px;
    background: color-mix(
        in srgb,
        var(--selected-primary) 35%,
        transparent
    );
    animation: cvStartLight 10s ease-in-out infinite;
}

.cv-start-light-two {
    right: 15%;
    bottom: -150px;
    width: 410px;
    height: 410px;
    background: color-mix(
        in srgb,
        var(--selected-accent) 28%,
        transparent
    );
    animation: cvStartLight 12s ease-in-out infinite reverse;
}

@keyframes cvStartLight {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(35px, -25px, 0) scale(1.08);
    }
}


/* =========================================================
   SELECTED TEMPLATE HERO LAYOUT
   ========================================================= */

.cv-start-layout {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.75fr);
    align-items: center;
    gap: 80px;
    padding-top: 75px;
}

.cv-start-content h1 {
    max-width: 760px;
    margin: 0;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(3.1rem, 5.5vw, 5.6rem);
    font-weight: 800;
    line-height: 0.99;
    letter-spacing: -0.045em;
}

.cv-start-content h1 span {
    display: block;
    margin: 9px 0;
    color: transparent;
    background: linear-gradient(
        90deg,
        #ffffff,
        color-mix(in srgb, var(--selected-accent) 60%, #ffffff)
    );
    background-clip: text;
    -webkit-background-clip: text;
}

.cv-start-content > p {
    max-width: 700px;
    margin: 27px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
    line-height: 1.8;
}

.cv-selected-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.cv-selected-labels span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.73rem;
    font-weight: 700;
    backdrop-filter: blur(12px);
}

.cv-selected-labels i {
    color: color-mix(
        in srgb,
        var(--selected-accent) 55%,
        #ffffff
    );
}


/* =========================================================
   SELECTED CV PREVIEW
   ========================================================= */

.cv-selected-preview {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 470px;
    padding: 48px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 20% 15%,
            color-mix(in srgb, var(--selected-accent) 32%, transparent),
            transparent 42%
        ),
        rgba(255, 255, 255, 0.065);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(19px);
}

.cv-selected-preview::before {
    position: absolute;
    inset: 13px;
    content: "";
    border: 1px dashed rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    pointer-events: none;
}

.cv-selected-preview-label {
    position: absolute;
    top: 24px;
    left: 27px;
    color: rgba(255, 255, 255, 0.57);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.cv-selected-preview .cv-mini-document {
    width: 245px;
    height: 345px;
    transform: rotate(2deg);
    animation: cvSelectedDocument 5s ease-in-out infinite;
}

@keyframes cvSelectedDocument {
    0%,
    100% {
        transform: rotate(2deg) translateY(0);
    }

    50% {
        transform: rotate(-1deg) translateY(-9px);
    }
}

.cv-selected-colours {
    position: absolute;
    right: 25px;
    bottom: 23px;
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(5, 15, 38, 0.54);
    backdrop-filter: blur(12px);
}

.cv-selected-colours span {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
}


/* =========================================================
   CREATION METHOD OPTIONS
   ========================================================= */

.cv-start-options-section {
    position: relative;
    padding: 105px 0;
    background:
        radial-gradient(
            circle at 7% 12%,
            color-mix(in srgb, var(--selected-primary) 10%, transparent),
            transparent 27%
        ),
        radial-gradient(
            circle at 95% 50%,
            color-mix(in srgb, var(--selected-accent) 10%, transparent),
            transparent 28%
        ),
        linear-gradient(180deg, #f3f6fc, #ffffff);
}

.cv-start-options-section::before {
    position: absolute;
    top: 70px;
    right: 5%;
    width: 190px;
    height: 190px;
    content: "";
    opacity: 0.28;
    background-image:
        radial-gradient(
            circle,
            color-mix(in srgb, var(--selected-primary) 35%, transparent) 2px,
            transparent 2px
        );
    background-size: 17px 17px;
}

.cv-start-options {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}

.cv-start-option {
    position: relative;
    overflow: hidden;
    padding: 42px;
    border: 1px solid rgba(18, 43, 80, 0.1);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 25px 70px rgba(25, 45, 78, 0.1);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.cv-start-option::before {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 240px;
    height: 240px;
    content: "";
    border-radius: 50%;
    background: color-mix(
        in srgb,
        var(--selected-accent) 8%,
        transparent
    );
    transition: transform 0.4s ease;
}

.cv-start-option:hover {
    border-color: color-mix(
        in srgb,
        var(--selected-accent) 30%,
        transparent
    );
    transform: translateY(-9px);
    box-shadow: 0 36px 85px rgba(25, 45, 78, 0.16);
}

.cv-start-option:hover::before {
    transform: scale(1.3);
}

.cv-upload-option {
    border-top: 4px solid var(--selected-accent);
}

.cv-manual-option {
    border-top: 4px solid var(--selected-primary);
}

.cv-option-recommended {
    position: absolute;
    top: 23px;
    right: 24px;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--selected-primary);
    background: var(--selected-secondary);
    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.cv-option-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 73px;
    height: 73px;
    margin-bottom: 31px;
    border-radius: 21px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--selected-primary),
        var(--selected-accent)
    );
    box-shadow:
        0 17px 32px
        color-mix(in srgb, var(--selected-primary) 22%, transparent);
    font-size: 1.8rem;
}

.cv-option-icon::after {
    position: absolute;
    inset: -7px;
    content: "";
    border: 1px solid
        color-mix(in srgb, var(--selected-accent) 25%, transparent);
    border-radius: 26px;
}

.cv-start-option > small {
    display: block;
    margin-bottom: 7px;
    color: var(--selected-accent);
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.cv-start-option h2 {
    margin: 0;
    color: #101d33;
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
}

.cv-start-option > p {
    min-height: 82px;
    margin: 17px 0 24px;
    color: #657184;
    font-size: 0.9rem;
    line-height: 1.75;
}

.cv-start-option ul {
    display: grid;
    gap: 13px;
    margin: 0 0 30px;
    padding: 22px 0;
    border-top: 1px solid #e9edf4;
    border-bottom: 1px solid #e9edf4;
    list-style: none;
}

.cv-start-option li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #3d4b60;
    font-size: 0.82rem;
    font-weight: 600;
}

.cv-start-option li i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #087249;
    background: #dff8ed;
    font-size: 0.7rem;
}

.cv-start-option > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 55px;
    padding: 14px 18px;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(
        120deg,
        var(--selected-primary),
        var(--selected-accent)
    );
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.cv-start-option > a:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow:
        0 15px 30px
        color-mix(in srgb, var(--selected-primary) 23%, transparent);
}


/* =========================================================
   METHOD CONFIRMATION
   ========================================================= */

.cv-method-confirmation {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 23px;
    max-width: 1100px;
    margin: 38px auto 0;
    padding: 29px;
    scroll-margin-top: 30px;
    border: 1px solid
        color-mix(in srgb, var(--selected-accent) 24%, transparent);
    border-radius: 22px;
    background:
        linear-gradient(
            120deg,
            color-mix(in srgb, var(--selected-secondary) 45%, #ffffff),
            #ffffff
        );
    box-shadow: 0 20px 48px rgba(25, 45, 78, 0.09);
    animation: cvConfirmationArrival 0.45s ease;
}

@keyframes cvConfirmationArrival {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cv-method-confirmation > span {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 19px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--selected-primary),
        var(--selected-accent)
    );
    font-size: 1.55rem;
}

.cv-method-confirmation small {
    display: block;
    margin-bottom: 6px;
    color: var(--selected-accent);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.cv-method-confirmation h2 {
    margin: 0;
    color: #101d33;
    font-size: 1.4rem;
    font-weight: 800;
}

.cv-method-confirmation p {
    margin: 7px 0 0;
    color: #657184;
    font-size: 0.85rem;
    line-height: 1.65;
}


/* =========================================================
   PRIVACY NOTICE
   ========================================================= */

.cv-start-privacy {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 900px;
    margin: 35px auto 0;
    padding: 20px 23px;
    border: 1px solid rgba(13, 114, 73, 0.14);
    border-radius: 16px;
    color: #285846;
    background: rgba(223, 248, 237, 0.7);
}

.cv-start-privacy i {
    flex: 0 0 auto;
    color: #087249;
    font-size: 1.2rem;
}

.cv-start-privacy p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.65;
}


/* =========================================================
   RESPONSIVE TEMPLATE START
   ========================================================= */

@media (max-width: 991.98px) {
    .cv-start-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .cv-start-content {
        text-align: center;
    }

    .cv-start-content > p {
        margin-right: auto;
        margin-left: auto;
    }

    .cv-selected-labels {
        justify-content: center;
    }

    .cv-selected-preview {
        width: min(100%, 520px);
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) {
    .cv-start-hero {
        min-height: auto;
        padding-bottom: 70px;
    }

    .cv-start-layout {
        padding-top: 65px;
    }

    .cv-start-content {
        text-align: left;
    }

    .cv-start-content h1 {
        font-size: clamp(2.7rem, 14vw, 4.5rem);
    }

    .cv-selected-labels {
        justify-content: flex-start;
    }

    .cv-start-options-section {
        padding: 75px 0;
    }

    .cv-start-options {
        grid-template-columns: 1fr;
    }

    .cv-start-option {
        padding: 32px 27px;
    }

    .cv-start-option > p {
        min-height: 0;
    }
}

@media (max-width: 479.98px) {
    .cv-selected-preview {
        min-height: 420px;
        padding: 35px 20px;
    }

    .cv-selected-preview .cv-mini-document {
        width: 205px;
        height: 290px;
    }

    .cv-option-recommended {
        position: static;
        display: inline-flex;
        margin-bottom: 24px;
    }

    .cv-method-confirmation {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cv-start-light,
    .cv-selected-preview .cv-mini-document,
    .cv-method-confirmation {
        animation: none;
    }
}





/* =========================================================
   CV UPLOAD AND MANUAL ENTRY PAGES
   ========================================================= */

.cv-entry-page {
    min-height: 100vh;
    background: #f3f6fc;
}

.cv-entry-hero {
    position: relative;
    overflow: hidden;
    padding: 30px 0 150px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 80% 20%,
            color-mix(in srgb, var(--selected-accent) 30%, transparent),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #061329,
            color-mix(in srgb, var(--selected-primary) 78%, #08162f)
        );
}

.cv-entry-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.15;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        );
    background-size: 46px 46px;
}

.cv-entry-hero::after {
    position: absolute;
    right: -120px;
    bottom: -260px;
    width: 580px;
    height: 580px;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    box-shadow:
        0 0 0 65px rgba(255, 255, 255, 0.025),
        0 0 0 130px rgba(255, 255, 255, 0.018);
}

.cv-entry-heading {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 75px auto 0;
    text-align: center;
}

.cv-entry-heading h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(3rem, 5.5vw, 5.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.cv-entry-heading h1 span {
    display: block;
    margin: 9px 0;
    color: transparent;
    background: linear-gradient(
        90deg,
        #ffffff,
        color-mix(in srgb, var(--selected-accent) 62%, #ffffff)
    );
    background-clip: text;
    -webkit-background-clip: text;
}

.cv-entry-heading > p {
    max-width: 700px;
    margin: 26px auto 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.8;
}


/* =========================================================
   ENTRY LAYOUT
   ========================================================= */

.cv-entry-content {
    position: relative;
    z-index: 4;
    margin-top: -80px;
    padding: 0 0 110px;
}

.cv-entry-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 355px;
    align-items: start;
    gap: 28px;
}

.cv-entry-form-card {
    overflow: hidden;
    padding: 40px;
    border: 1px solid rgba(21, 42, 74, 0.09);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(20, 39, 70, 0.14);
}

.cv-form-heading {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 35px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e8edf4;
}

.cv-form-heading > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--selected-primary),
        var(--selected-accent)
    );
    box-shadow:
        0 15px 30px
        color-mix(in srgb, var(--selected-primary) 22%, transparent);
    font-size: 1.45rem;
}

.cv-form-heading small {
    display: block;
    margin-bottom: 5px;
    color: var(--selected-accent);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.cv-form-heading h2 {
    margin: 0;
    color: #101d33;
    font-family: "Playfair Display", serif;
    font-size: 1.75rem;
    font-weight: 800;
}

.cv-form-heading p {
    margin: 8px 0 0;
    color: #687487;
    font-size: 0.84rem;
    line-height: 1.65;
}


/* =========================================================
   FORM SECTIONS
   ========================================================= */

.cv-data-form {
    display: grid;
    gap: 28px;
}

.cv-form-section {
    padding: 26px;
    border: 1px solid #e7ebf2;
    border-radius: 20px;
    background: #fbfcfe;
}

.cv-form-section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.cv-form-section-heading > span {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 12px;
    color: #ffffff;
    background: var(--selected-primary);
    font-size: 0.7rem;
    font-weight: 900;
}

.cv-form-section-heading small {
    display: block;
    margin-bottom: 2px;
    color: var(--selected-accent);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.cv-form-section-heading h3 {
    margin: 0;
    color: #14223a;
    font-size: 1rem;
    font-weight: 800;
}

.cv-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.cv-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cv-form-field-full {
    grid-column: 1 / -1;
}

.cv-form-field label,
.cv-upload-zone label,
.cv-photo-upload-card label {
    color: #27364d;
    font-size: 0.78rem;
    font-weight: 800;
}

.cv-form-control {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid #d8dfE9;
    border-radius: 12px;
    outline: none;
    color: #182538;
    background: #ffffff;
    font-size: 0.86rem;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.cv-form-control::placeholder {
    color: #a0a9b7;
}

.cv-form-control:hover {
    border-color: #b8c3d2;
}

.cv-form-control:focus {
    border-color: var(--selected-accent);
    background: #ffffff;
    box-shadow:
        0 0 0 4px
        color-mix(in srgb, var(--selected-accent) 12%, transparent);
}

.cv-form-textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.65;
}

.cv-field-help {
    color: #7a8595;
    font-size: 0.68rem;
    line-height: 1.5;
}

.cv-field-error {
    display: block;
    color: #c0392b;
    font-size: 0.7rem;
    font-weight: 700;
}

.cv-form-errors {
    display: grid;
    gap: 8px;
    padding: 15px 18px;
    border: 1px solid rgba(192, 57, 43, 0.18);
    border-radius: 13px;
    color: #a93226;
    background: #fff0ee;
}

.cv-form-errors p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.78rem;
}


/* =========================================================
   FILE UPLOAD
   ========================================================= */

.cv-upload-zone {
    display: grid;
    place-items: center;
    padding: 42px 25px;
    border: 2px dashed
        color-mix(in srgb, var(--selected-accent) 38%, #dce2eb);
    border-radius: 20px;
    text-align: center;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--selected-secondary) 45%, #ffffff),
            #ffffff
        );
    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.cv-upload-zone:hover {
    border-color: var(--selected-accent);
    background:
        color-mix(in srgb, var(--selected-secondary) 60%, #ffffff);
    transform: translateY(-2px);
}

.cv-upload-zone-icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin-bottom: 17px;
    border-radius: 21px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--selected-primary),
        var(--selected-accent)
    );
    box-shadow:
        0 16px 32px
        color-mix(in srgb, var(--selected-primary) 22%, transparent);
    font-size: 1.75rem;
}

.cv-upload-zone p {
    margin: 5px 0 17px;
    color: #758095;
    font-size: 0.75rem;
}

.cv-form-file-input {
    width: min(100%, 440px);
    padding: 9px;
    border: 1px solid #d8dfe9;
    border-radius: 11px;
    color: #4b586c;
    background: #ffffff;
    font-size: 0.78rem;
}

.cv-form-file-input::file-selector-button {
    margin-right: 12px;
    padding: 9px 13px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: var(--selected-primary);
    font-size: 0.73rem;
    font-weight: 800;
    cursor: pointer;
}

.cv-upload-zone > small {
    margin-top: 13px;
    color: #778397;
    font-size: 0.68rem;
}


/* =========================================================
   PHOTO UPLOAD
   ========================================================= */

.cv-photo-upload-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding: 22px;
    border: 1px dashed
        color-mix(in srgb, var(--selected-accent) 32%, #dce2eb);
    border-radius: 17px;
    background: #ffffff;
}

.cv-photo-upload-card > span {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    color: var(--selected-accent);
    background: var(--selected-secondary);
    font-size: 1.7rem;
}

.cv-photo-upload-card > div {
    display: grid;
    gap: 7px;
}

.cv-photo-upload-card p {
    margin: 0 0 5px;
    color: #748094;
    font-size: 0.75rem;
    line-height: 1.55;
}


/* =========================================================
   VISIBILITY AND CONSENT
   ========================================================= */

.cv-visibility-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cv-visibility-grid label,
.cv-consent-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 16px;
    border: 1px solid #e1e6ee;
    border-radius: 13px;
    cursor: pointer;
    background: #ffffff;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.cv-visibility-grid label:hover,
.cv-consent-card:hover {
    border-color: color-mix(
        in srgb,
        var(--selected-accent) 32%,
        #dce2eb
    );
    background: color-mix(
        in srgb,
        var(--selected-secondary) 30%,
        #ffffff
    );
}

.cv-form-checkbox {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--selected-accent);
    cursor: pointer;
}

.cv-visibility-grid label > span,
.cv-consent-card > span {
    display: grid;
    gap: 3px;
}

.cv-visibility-grid strong,
.cv-consent-card strong {
    color: #27364d;
    font-size: 0.78rem;
}

.cv-visibility-grid small,
.cv-consent-card small {
    color: #778397;
    font-size: 0.68rem;
    line-height: 1.5;
}

.cv-consent-card {
    padding: 20px;
    border-color:
        color-mix(in srgb, var(--selected-accent) 25%, #dce2eb);
    background:
        color-mix(in srgb, var(--selected-secondary) 32%, #ffffff);
}


/* =========================================================
   SECURITY AND SUBMIT
   ========================================================= */

.cv-form-security-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px 19px;
    border: 1px solid rgba(8, 114, 73, 0.13);
    border-radius: 14px;
    color: #285846;
    background: #eaf9f2;
}

.cv-form-security-note i {
    flex: 0 0 auto;
    color: #087249;
    font-size: 1.15rem;
}

.cv-form-security-note p {
    margin: 0;
    font-size: 0.73rem;
    line-height: 1.6;
}

.cv-form-submit-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 15px 20px;
    border: 0;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(
        110deg,
        var(--selected-primary),
        var(--selected-accent)
    );
    box-shadow:
        0 17px 34px
        color-mix(in srgb, var(--selected-primary) 23%, transparent);
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.cv-form-submit-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.06);
    box-shadow:
        0 22px 40px
        color-mix(in srgb, var(--selected-primary) 29%, transparent);
}

.cv-form-submit-button:disabled {
    opacity: 0.65;
    cursor: wait;
}


/* =========================================================
   ENTRY SIDEBAR
   ========================================================= */

.cv-entry-sidebar {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 18px;
}

.cv-entry-template-card,
.cv-entry-information,
.cv-entry-whatsapp {
    overflow: hidden;
    border: 1px solid rgba(21, 42, 74, 0.09);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 20px 55px rgba(20, 39, 70, 0.1);
}

.cv-entry-template-card {
    padding: 25px;
    text-align: center;
}

.cv-entry-template-card > small {
    color: var(--selected-accent);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.cv-entry-template-card > h2 {
    margin: 7px 0 20px;
    color: #13213a;
    font-family: "Playfair Display", serif;
    font-size: 1.45rem;
    font-weight: 800;
}

.cv-entry-mini-preview {
    display: grid;
    place-items: center;
    min-height: 330px;
    margin-bottom: 19px;
    padding: 28px;
    border-radius: 17px;
    background:
        radial-gradient(
            circle at 20% 20%,
            color-mix(in srgb, var(--selected-accent) 25%, transparent),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            var(--selected-primary),
            color-mix(in srgb, var(--selected-primary) 72%, #000000)
        );
}

.cv-entry-mini-preview .cv-mini-document {
    width: 185px;
    height: 262px;
    transform: rotate(-1deg);
}

.cv-entry-template-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 11px;
    color: var(--selected-primary);
    background: var(--selected-secondary);
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

.cv-entry-template-card > a:hover {
    color: var(--selected-accent);
}

.cv-entry-information {
    padding: 22px;
}

.cv-entry-information h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    color: #17253c;
    font-size: 0.9rem;
    font-weight: 800;
}

.cv-entry-information h3 i {
    color: var(--selected-accent);
}

.cv-entry-information ol,
.cv-entry-information ul {
    display: grid;
    gap: 11px;
    margin: 0;
    padding-left: 19px;
    color: #657184;
}

.cv-entry-information li {
    padding-left: 4px;
    font-size: 0.75rem;
    line-height: 1.55;
}

.cv-entry-whatsapp {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 20px;
    color: #ffffff;
    background: linear-gradient(135deg, #087249, #11a866);
    text-decoration: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.cv-entry-whatsapp:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(8, 114, 73, 0.2);
}

.cv-entry-whatsapp > i {
    font-size: 1.6rem;
}

.cv-entry-whatsapp span {
    display: grid;
    gap: 2px;
}

.cv-entry-whatsapp small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.cv-entry-whatsapp strong {
    color: #ffffff;
    font-size: 0.82rem;
}


/* =========================================================
   ENTRY PAGE RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .cv-entry-layout {
        grid-template-columns: 1fr;
    }

    .cv-entry-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cv-entry-template-card {
        grid-row: span 2;
    }
}

@media (max-width: 767.98px) {
    .cv-entry-hero {
        padding-bottom: 125px;
    }

    .cv-entry-heading {
        margin-top: 65px;
        text-align: left;
    }

    .cv-entry-heading h1 {
        font-size: clamp(2.7rem, 14vw, 4.4rem);
    }

    .cv-entry-heading > p {
        margin-left: 0;
    }

    .cv-entry-form-card {
        padding: 27px 22px;
        border-radius: 22px;
    }

    .cv-form-grid,
    .cv-visibility-grid,
    .cv-entry-sidebar {
        grid-template-columns: 1fr;
    }

    .cv-entry-template-card {
        grid-row: auto;
    }

    .cv-form-field-full {
        grid-column: auto;
    }

    .cv-form-section {
        padding: 21px 18px;
    }

    .cv-photo-upload-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479.98px) {
    .cv-form-heading {
        flex-direction: column;
    }

    .cv-entry-mini-preview {
        min-height: 300px;
    }

    .cv-upload-zone {
        padding: 32px 16px;
    }
}






/* =========================================================
   PRIVATE CV DRAFT PAGE
   ========================================================= */

.cv-draft-page {
    min-height: 100vh;
    background: #f2f5fa;
}

.cv-draft-hero {
    position: relative;
    overflow: hidden;
    padding: 30px 0 150px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 78% 28%,
            color-mix(in srgb, var(--selected-accent) 29%, transparent),
            transparent 31%
        ),
        linear-gradient(
            125deg,
            #061329,
            color-mix(in srgb, var(--selected-primary) 77%, #07162f)
        );
}

.cv-draft-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.15;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.11) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.11) 1px,
            transparent 1px
        );
    background-size: 48px 48px;
}

.cv-draft-hero::after {
    position: absolute;
    right: -180px;
    bottom: -300px;
    width: 650px;
    height: 650px;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    box-shadow:
        0 0 0 72px rgba(255, 255, 255, 0.024),
        0 0 0 144px rgba(255, 255, 255, 0.016);
}

.cv-draft-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 76px auto 0;
    text-align: center;
}

.cv-draft-hero-content h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(3rem, 5.8vw, 5.7rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.cv-draft-hero-content h1 span {
    display: block;
    margin-top: 9px;
    color: transparent;
    background: linear-gradient(
        90deg,
        #ffffff,
        color-mix(in srgb, var(--selected-accent) 62%, #ffffff)
    );
    background-clip: text;
    -webkit-background-clip: text;
}

.cv-draft-hero-content > p {
    max-width: 720px;
    margin: 26px auto 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.8;
}

.cv-draft-reference {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 29px;
    padding: 12px 17px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;
    text-align: left;
    background: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(14px);
}

.cv-draft-reference > span {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 11px;
    color: #ffffff;
    background: color-mix(
        in srgb,
        var(--selected-accent) 42%,
        transparent
    );
}

.cv-draft-reference > div {
    display: grid;
    gap: 2px;
}

.cv-draft-reference small {
    color: rgba(255, 255, 255, 0.57);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.cv-draft-reference strong {
    color: #ffffff;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}


/* =========================================================
   DRAFT LAYOUT
   ========================================================= */

.cv-draft-content {
    position: relative;
    z-index: 4;
    margin-top: -80px;
    padding-bottom: 110px;
}

.cv-draft-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    align-items: start;
    gap: 27px;
}

.cv-draft-main {
    display: grid;
    gap: 25px;
}

.cv-draft-status-card,
.cv-draft-information-card,
.cv-draft-source-card,
.cv-draft-next-section,
.cv-draft-template-summary,
.cv-private-link-warning {
    border: 1px solid rgba(21, 42, 74, 0.09);
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 25px 70px rgba(20, 39, 70, 0.1);
}

.cv-draft-status-card,
.cv-draft-information-card,
.cv-draft-next-section {
    padding: 35px;
}


/* =========================================================
   PROGRESS STATUS
   ========================================================= */

.cv-draft-status-heading {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 29px;
}

.cv-draft-status-heading > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 59px;
    height: 59px;
    border-radius: 17px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--selected-primary),
        var(--selected-accent)
    );
    box-shadow:
        0 15px 30px
        color-mix(in srgb, var(--selected-primary) 22%, transparent);
    font-size: 1.35rem;
}

.cv-draft-status-heading small,
.cv-draft-section-heading small,
.cv-draft-source-card small,
.cv-draft-template-summary > small {
    display: block;
    margin-bottom: 4px;
    color: var(--selected-accent);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.cv-draft-status-heading h2,
.cv-draft-section-heading h2 {
    margin: 0;
    color: #13213a;
    font-family: "Playfair Display", serif;
    font-size: 1.65rem;
    font-weight: 800;
}

.cv-draft-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cv-draft-progress > div {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid #e4e9f0;
    border-radius: 15px;
    background: #f8fafc;
}

.cv-draft-progress > div > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 31px;
    height: 31px;
    border-radius: 10px;
    color: #8994a5;
    background: #e9edf3;
    font-size: 0.8rem;
}

.cv-draft-progress > div > div {
    display: grid;
    gap: 4px;
}

.cv-draft-progress strong {
    color: #344157;
    font-size: 0.75rem;
}

.cv-draft-progress small {
    color: #8993a2;
    font-size: 0.63rem;
    line-height: 1.4;
}

.cv-draft-progress > div.complete {
    border-color: rgba(8, 114, 73, 0.14);
    background: #edf9f3;
}

.cv-draft-progress > div.complete > span {
    color: #ffffff;
    background: #138b55;
}

.cv-draft-progress > div.complete strong {
    color: #1d684a;
}

.cv-draft-progress > div.current {
    border-color:
        color-mix(in srgb, var(--selected-accent) 25%, #e1e6ee);
    background:
        color-mix(in srgb, var(--selected-secondary) 45%, #ffffff);
}

.cv-draft-progress > div.current > span {
    color: #ffffff;
    background: var(--selected-accent);
}


/* =========================================================
   INFORMATION RECEIVED
   ========================================================= */

.cv-draft-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.cv-draft-status-label {
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--selected-primary);
    background: var(--selected-secondary);
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cv-draft-information-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.cv-draft-information-grid > div {
    display: grid;
    gap: 5px;
    min-height: 76px;
    padding: 15px;
    border: 1px solid #e5e9f0;
    border-radius: 13px;
    background: #fafbfd;
}

.cv-draft-information-grid small {
    color: #8390a2;
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.cv-draft-information-grid strong {
    color: #26354b;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.cv-draft-summary {
    margin-top: 20px;
    padding: 20px;
    border-left: 4px solid var(--selected-accent);
    border-radius: 0 14px 14px 0;
    background:
        color-mix(in srgb, var(--selected-secondary) 42%, #ffffff);
}

.cv-draft-summary small {
    display: block;
    margin-bottom: 8px;
    color: var(--selected-accent);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.cv-draft-summary p {
    margin: 0;
    color: #566278;
    font-size: 0.8rem;
    line-height: 1.75;
}


/* =========================================================
   UPLOADED SOURCE DOCUMENT
   ========================================================= */

.cv-draft-source-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 21px;
    padding: 28px;
}

.cv-draft-source-card > span {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--selected-primary),
        var(--selected-accent)
    );
    font-size: 1.7rem;
}

.cv-draft-source-card h2 {
    margin: 0;
    color: #17253c;
    font-size: 1.25rem;
    font-weight: 800;
}

.cv-draft-source-card p {
    margin: 8px 0 13px;
    color: #6e7a8d;
    font-size: 0.78rem;
    line-height: 1.65;
}

.cv-draft-source-card strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--selected-primary);
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}


/* =========================================================
   NEXT CV SECTIONS
   ========================================================= */

.cv-draft-next-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.cv-draft-next-grid article {
    min-height: 160px;
    padding: 20px;
    border: 1px solid #e5e9f0;
    border-radius: 16px;
    background: #fafbfd;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.cv-draft-next-grid article:hover {
    border-color:
        color-mix(in srgb, var(--selected-accent) 27%, #e1e6ee);
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(20, 39, 70, 0.08);
}

.cv-draft-next-grid article > i {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    margin-bottom: 17px;
    border-radius: 13px;
    color: var(--selected-accent);
    background: var(--selected-secondary);
    font-size: 1.05rem;
}

.cv-draft-next-grid h3 {
    margin: 0 0 7px;
    color: #233249;
    font-size: 0.85rem;
    font-weight: 800;
}

.cv-draft-next-grid p {
    margin: 0;
    color: #7a8596;
    font-size: 0.69rem;
    line-height: 1.55;
}

.cv-next-development-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid rgba(18, 86, 216, 0.13);
    border-radius: 13px;
    color: #315080;
    background: #edf4ff;
}

.cv-next-development-notice i {
    flex: 0 0 auto;
    color: #1256d8;
}

.cv-next-development-notice p {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.6;
}


/* =========================================================
   DRAFT SIDEBAR
   ========================================================= */

.cv-draft-sidebar {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 18px;
}

.cv-draft-template-summary {
    padding: 25px;
    text-align: center;
}

.cv-draft-template-summary > h2 {
    margin: 7px 0 20px;
    color: #13213a;
    font-family: "Playfair Display", serif;
    font-size: 1.45rem;
    font-weight: 800;
}

.cv-draft-template-summary .cv-entry-mini-preview {
    margin: 0;
}

.cv-draft-template-summary .cv-mini-photo {
    overflow: hidden;
}

.cv-draft-template-summary .cv-mini-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cv-draft-colours {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
}

.cv-draft-colours > span {
    width: 17px;
    height: 17px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(20, 39, 70, 0.14);
}

.cv-draft-colours small {
    margin-left: 5px;
    color: #818c9d;
    font-size: 0.63rem;
}

.cv-private-link-warning {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 20px;
    border-color: rgba(196, 130, 20, 0.18);
    background: #fff9e9;
}

.cv-private-link-warning > i {
    flex: 0 0 auto;
    color: #b9780e;
    font-size: 1.2rem;
}

.cv-private-link-warning strong {
    display: block;
    margin-bottom: 5px;
    color: #785415;
    font-size: 0.78rem;
}

.cv-private-link-warning p {
    margin: 0;
    color: #8a6b34;
    font-size: 0.68rem;
    line-height: 1.55;
}

.cv-admin-draft-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 13px 17px;
    border-radius: 13px;
    color: #ffffff;
    background: #17253c;
    font-size: 0.77rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 15px 30px rgba(20, 39, 70, 0.15);
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.cv-admin-draft-button:hover {
    color: #ffffff;
    background: var(--selected-primary);
    transform: translateY(-3px);
}


/* =========================================================
   DRAFT RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {
    .cv-draft-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .cv-draft-layout {
        grid-template-columns: 1fr;
    }

    .cv-draft-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cv-draft-template-summary {
        grid-row: span 3;
    }
}

@media (max-width: 767.98px) {
    .cv-draft-hero {
        padding-bottom: 125px;
    }

    .cv-draft-hero-content {
        margin-top: 65px;
        text-align: left;
    }

    .cv-draft-hero-content h1 {
        font-size: clamp(2.7rem, 14vw, 4.5rem);
    }

    .cv-draft-hero-content > p {
        margin-left: 0;
    }

    .cv-draft-reference {
        width: 100%;
    }

    .cv-draft-status-card,
    .cv-draft-information-card,
    .cv-draft-next-section {
        padding: 25px 21px;
    }

    .cv-draft-progress,
    .cv-draft-information-grid,
    .cv-draft-next-grid,
    .cv-draft-sidebar {
        grid-template-columns: 1fr;
    }

    .cv-draft-template-summary {
        grid-row: auto;
    }

    .cv-draft-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .cv-draft-source-card {
        grid-template-columns: 1fr;
    }
}








/* =========================================================
   DRAFT EDITOR BUTTON AND EXTRACTION NOTICES
   ========================================================= */

.cv-open-editor-button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    margin-bottom: 24px;
    padding: 19px 21px;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(
        110deg,
        var(--selected-primary),
        var(--selected-accent)
    );
    box-shadow:
        0 17px 34px
        color-mix(in srgb, var(--selected-primary) 22%, transparent);
    text-decoration: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.cv-open-editor-button:hover {
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow:
        0 23px 42px
        color-mix(in srgb, var(--selected-primary) 28%, transparent);
}

.cv-open-editor-button > i:first-child {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.15rem;
}

.cv-open-editor-button > span {
    display: grid;
    gap: 3px;
}

.cv-open-editor-button small {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.cv-open-editor-button strong {
    color: #ffffff;
    font-size: 0.87rem;
}

.cv-extraction-warning,
.cv-extraction-success {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 22px;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(20, 39, 70, 0.07);
}

.cv-extraction-warning {
    border: 1px solid rgba(190, 70, 56, 0.17);
    color: #873d34;
    background: #fff1ef;
}

.cv-extraction-success {
    border: 1px solid rgba(8, 114, 73, 0.15);
    color: #256347;
    background: #eaf9f2;
}

.cv-extraction-warning > i,
.cv-extraction-success > i {
    flex: 0 0 auto;
    font-size: 1.35rem;
}

.cv-extraction-warning strong,
.cv-extraction-success strong {
    display: block;
    margin-bottom: 5px;
    font-size: 0.84rem;
}

.cv-extraction-warning p,
.cv-extraction-success p {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.65;
}

.cv-extraction-warning small {
    display: block;
    margin-top: 6px;
    font-size: 0.67rem;
}

.cv-progress-error {
    border-color: rgba(190, 70, 56, 0.17) !important;
    background: #fff1ef !important;
}

.cv-progress-error > span {
    color: #ffffff !important;
    background: #be4638 !important;
}

.cv-editor-ready-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid rgba(8, 114, 73, 0.13);
    border-radius: 13px;
    color: #285846;
    background: #eaf9f2;
}

.cv-editor-ready-notice p {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.6;
}


/* =========================================================
   COMPLETE CV EDITOR PAGE
   ========================================================= */

.cv-editor-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 5% 25%,
            color-mix(in srgb, var(--selected-accent) 7%, transparent),
            transparent 23%
        ),
        #f2f5fa;
}

.cv-editor-header {
    position: relative;
    overflow: hidden;
    padding: 30px 0 145px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 82% 25%,
            color-mix(in srgb, var(--selected-accent) 30%, transparent),
            transparent 29%
        ),
        linear-gradient(
            125deg,
            #061329,
            color-mix(in srgb, var(--selected-primary) 78%, #07162f)
        );
}

.cv-editor-header::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.15;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        );
    background-size: 48px 48px;
}

.cv-editor-header-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 40px;
    margin-top: 70px;
}

.cv-editor-header-content h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(3rem, 5vw, 5.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.cv-editor-header-content h1 span {
    display: block;
    margin-top: 8px;
    color: transparent;
    background: linear-gradient(
        90deg,
        #ffffff,
        color-mix(in srgb, var(--selected-accent) 62%, #ffffff)
    );
    background-clip: text;
    -webkit-background-clip: text;
}

.cv-editor-header-content p {
    max-width: 670px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.96rem;
    line-height: 1.75;
}

.cv-editor-reference {
    display: grid;
    gap: 5px;
    min-width: 245px;
    padding: 17px 19px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
}

.cv-editor-reference small {
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.cv-editor-reference strong {
    color: #ffffff;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}


/* =========================================================
   EDITOR LAYOUT
   ========================================================= */

.cv-editor-content {
    position: relative;
    z-index: 3;
    margin-top: -75px;
    padding-bottom: 110px;
}

.cv-editor-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    align-items: start;
    gap: 25px;
}

.cv-editor-navigation {
    position: sticky;
    top: 20px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(21, 42, 74, 0.09);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 25px 65px rgba(20, 39, 70, 0.12);
}

.cv-editor-navigation-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8edf4;
}

.cv-editor-navigation-heading > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--selected-primary),
        var(--selected-accent)
    );
}

.cv-editor-navigation-heading > span {
    display: grid;
    gap: 2px;
}

.cv-editor-navigation-heading small {
    color: var(--selected-accent);
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.cv-editor-navigation-heading strong {
    color: #18263e;
    font-size: 0.82rem;
}

.cv-editor-navigation nav {
    display: grid;
    gap: 4px;
    margin-top: 14px;
}

.cv-editor-navigation nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 10px;
    color: #657184;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.cv-editor-navigation nav a:hover,
.cv-editor-navigation nav a.active {
    color: var(--selected-primary);
    background: var(--selected-secondary);
    transform: translateX(3px);
}

.cv-editor-navigation nav i {
    width: 18px;
    color: var(--selected-accent);
}

.cv-editor-save-reminder {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 15px;
    padding: 12px;
    border-radius: 10px;
    color: #74551e;
    background: #fff7df;
}

.cv-editor-save-reminder i {
    flex: 0 0 auto;
}

.cv-editor-save-reminder p {
    margin: 0;
    font-size: 0.62rem;
    line-height: 1.5;
}

.cv-editor-navigation > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 47px;
    margin-top: 14px;
    border: 0;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(
        110deg,
        var(--selected-primary),
        var(--selected-accent)
    );
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.cv-editor-main {
    display: grid;
    gap: 24px;
}


/* =========================================================
   EDITOR SECTIONS
   ========================================================= */

.cv-editor-section {
    padding: 34px;
    scroll-margin-top: 20px;
    border: 1px solid rgba(21, 42, 74, 0.09);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 24px 65px rgba(20, 39, 70, 0.09);
}

.cv-editor-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e8edf4;
}

.cv-editor-section-heading > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 55px;
    height: 55px;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--selected-primary),
        var(--selected-accent)
    );
    box-shadow:
        0 13px 27px
        color-mix(in srgb, var(--selected-primary) 20%, transparent);
    font-size: 1.25rem;
}

.cv-editor-section-heading small {
    display: block;
    margin-bottom: 4px;
    color: var(--selected-accent);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.cv-editor-section-heading h2 {
    margin: 0;
    color: #14223a;
    font-family: "Playfair Display", serif;
    font-size: 1.55rem;
    font-weight: 800;
}

.cv-editor-section-heading p {
    margin: 7px 0 0;
    color: #748094;
    font-size: 0.75rem;
    line-height: 1.6;
}

.cv-editor-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cv-editor-checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 15px;
    border: 1px solid #e2e7ef;
    border-radius: 12px;
    cursor: pointer;
    background: #fafbfd;
}

.cv-editor-checkbox-field > span {
    display: grid;
    gap: 3px;
}

.cv-editor-checkbox-field strong {
    color: #344157;
    font-size: 0.75rem;
}

.cv-editor-checkbox-field small {
    color: #8290a2;
    font-size: 0.64rem;
    line-height: 1.5;
}

.cv-extracted-editor-section textarea {
    min-height: 510px;
    font-family: "Courier New", monospace;
    font-size: 0.77rem;
    line-height: 1.65;
}


/* =========================================================
   FORMSET ITEMS
   ========================================================= */

.cv-formset-list {
    display: grid;
    gap: 17px;
}

.cv-formset-item {
    padding: 22px;
    border: 1px solid #e1e6ee;
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            #fbfcfe,
            #ffffff
        );
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.cv-formset-item:hover {
    border-color:
        color-mix(in srgb, var(--selected-accent) 25%, #dce2eb);
    box-shadow: 0 14px 30px rgba(20, 39, 70, 0.06);
}

.cv-formset-item.is-deleted {
    display: none;
}

.cv-formset-item-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 19px;
    padding-bottom: 13px;
    border-bottom: 1px solid #e7ebf2;
}

.cv-formset-item-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #435168;
    font-size: 0.69rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.cv-formset-item-heading > span i {
    color: var(--selected-accent);
}

.cv-delete-entry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 9px;
    border-radius: 9px;
    color: #a23c32;
    background: #fff0ee;
    font-size: 0.65rem;
    font-weight: 800;
    cursor: pointer;
}

.cv-delete-entry input {
    width: 15px;
    height: 15px;
    accent-color: #b64035;
}

.cv-add-formset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 45px;
    margin-top: 18px;
    padding: 11px 16px;
    border: 1px dashed
        color-mix(in srgb, var(--selected-accent) 40%, #cfd7e3);
    border-radius: 11px;
    color: var(--selected-primary);
    background: var(--selected-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.cv-add-formset-button:hover {
    color: #ffffff;
    background: var(--selected-accent);
    transform: translateY(-2px);
}

.cv-compact-formset .cv-formset-item {
    padding: 18px;
}


/* =========================================================
   FINAL SAVE
   ========================================================= */

.cv-editor-final-save {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 28px;
    border-radius: 22px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 20%,
            color-mix(in srgb, var(--selected-accent) 35%, transparent),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #07152d,
            var(--selected-primary)
        );
    box-shadow: 0 25px 60px rgba(20, 39, 70, 0.18);
}

.cv-editor-final-save > span {
    display: grid;
    place-items: center;
    width: 61px;
    height: 61px;
    border-radius: 18px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 1.45rem;
}

.cv-editor-final-save small {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.cv-editor-final-save h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
}

.cv-editor-final-save p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.72rem;
}

.cv-editor-final-save button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 49px;
    padding: 12px 18px;
    border: 0;
    border-radius: 12px;
    color: #07152d;
    background: #ffffff;
    font-size: 0.74rem;
    font-weight: 900;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.cv-editor-final-save button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   EDITOR RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .cv-editor-layout {
        grid-template-columns: 1fr;
    }

    .cv-editor-navigation {
        position: static;
    }

    .cv-editor-navigation nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cv-editor-navigation nav a {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .cv-editor-header-content {
        grid-template-columns: 1fr;
    }

    .cv-editor-header-content h1 {
        font-size: clamp(2.7rem, 14vw, 4.5rem);
    }

    .cv-editor-reference {
        min-width: 0;
    }

    .cv-editor-navigation nav,
    .cv-editor-fields-grid {
        grid-template-columns: 1fr;
    }

    .cv-editor-section {
        padding: 25px 20px;
    }

    .cv-editor-final-save {
        grid-template-columns: 1fr;
    }

    .cv-editor-final-save button {
        width: 100%;
    }
}

@media (max-width: 479.98px) {
    .cv-editor-section-heading {
        flex-direction: column;
    }

    .cv-formset-item {
        padding: 18px 15px;
    }

    .cv-formset-item-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}






.cv-field-disabled {
    opacity: 0.55;
}

.cv-field-disabled input {
    cursor: not-allowed;
    background: #eef1f5;
}









/* =========================================================
   CV DESIGN CONTROLS AND LIVE A4 PREVIEW
   ========================================================= */

.cv-design-workspace {
    display: grid;
    grid-template-columns: minmax(280px, 0.7fr) minmax(390px, 1.3fr);
    align-items: start;
    gap: 24px;
}

.cv-design-controls {
    display: grid;
    gap: 16px;
}

.cv-design-control-group {
    padding: 20px;
    border: 1px solid #e2e7ef;
    border-radius: 17px;
    background: #fafbfd;
}

.cv-design-control-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e3e8f0;
}

.cv-design-control-heading > i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--selected-accent);
    background: var(--selected-secondary);
    font-size: 1rem;
}

.cv-design-control-heading small {
    display: block;
    margin-bottom: 2px;
    color: var(--selected-accent);
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.cv-design-control-heading h3 {
    margin: 0;
    color: #243249;
    font-size: 0.86rem;
    font-weight: 800;
}

.cv-design-control-group > .cv-form-field + .cv-form-field {
    margin-top: 15px;
}

.cv-design-control-group > .cv-editor-checkbox-field {
    margin-top: 15px;
}


/* =========================================================
   COLOUR CONTROLS
   ========================================================= */

.cv-color-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.cv-color-control {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid #e1e6ee;
    border-radius: 12px;
    text-align: center;
    background: #ffffff;
}

.cv-color-control label {
    color: #435168;
    font-size: 0.67rem;
    font-weight: 800;
}

.cv-color-input {
    width: 100% !important;
    height: 49px !important;
    min-height: 49px !important;
    padding: 4px !important;
    border: 1px solid #d8dfe9 !important;
    border-radius: 10px !important;
    cursor: pointer;
    background: #ffffff;
}

.cv-color-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.cv-color-input::-webkit-color-swatch {
    border: 0;
    border-radius: 7px;
}

.cv-color-input::-moz-color-swatch {
    border: 0;
    border-radius: 7px;
}

.cv-color-control output {
    color: #778397;
    font-family: "Courier New", monospace;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
}


/* =========================================================
   RANGE CONTROLS
   ========================================================= */

.cv-range-control {
    display: grid;
    gap: 9px;
}

.cv-range-control + .cv-range-control {
    margin-top: 17px;
}

.cv-range-control > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cv-range-control label {
    color: #435168;
    font-size: 0.7rem;
    font-weight: 800;
}

.cv-range-control output {
    min-width: 44px;
    padding: 4px 7px;
    border-radius: 7px;
    color: var(--selected-primary);
    text-align: center;
    background: var(--selected-secondary);
    font-size: 0.63rem;
    font-weight: 900;
}

.cv-range-input {
    width: 100%;
    height: 7px;
    min-height: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    background:
        linear-gradient(
            90deg,
            var(--selected-primary),
            var(--selected-accent)
        );
    appearance: none;
    -webkit-appearance: none;
}

.cv-range-input::-webkit-slider-thumb {
    width: 19px;
    height: 19px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    cursor: grab;
    background: var(--selected-accent);
    box-shadow: 0 2px 9px rgba(20, 39, 70, 0.25);
    appearance: none;
    -webkit-appearance: none;
}

.cv-range-input::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    cursor: grab;
    background: var(--selected-accent);
    box-shadow: 0 2px 9px rgba(20, 39, 70, 0.25);
}


/* =========================================================
   LIVE PREVIEW COLUMN
   ========================================================= */

.cv-live-preview-column {
    position: sticky;
    top: 20px;
    overflow: hidden;
    border: 1px solid rgba(21, 42, 74, 0.1);
    border-radius: 19px;
    background: #e7ebf2;
    box-shadow: 0 22px 55px rgba(20, 39, 70, 0.12);
}

.cv-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    color: #ffffff;
    background: #17253c;
}

.cv-preview-toolbar span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.cv-preview-toolbar i {
    color: color-mix(
        in srgb,
        var(--selected-accent) 60%,
        #ffffff
    );
}

.cv-preview-toolbar small {
    color: rgba(255, 255, 255, 0.57);
    font-size: 0.58rem;
}

.cv-a4-preview-frame {
    overflow: auto;
    max-height: 850px;
    padding: 24px;
    background:
        linear-gradient(
            45deg,
            rgba(23, 37, 60, 0.05) 25%,
            transparent 25%
        ),
        linear-gradient(
            -45deg,
            rgba(23, 37, 60, 0.05) 25%,
            transparent 25%
        ),
        linear-gradient(
            45deg,
            transparent 75%,
            rgba(23, 37, 60, 0.05) 75%
        ),
        linear-gradient(
            -45deg,
            transparent 75%,
            rgba(23, 37, 60, 0.05) 75%
        ),
        #dfe4ec;
    background-position:
        0 0,
        0 8px,
        8px -8px,
        -8px 0;
    background-size: 16px 16px;
}


/* =========================================================
   A4 DOCUMENT
   ========================================================= */

.cv-a4-preview {
    --preview-primary: #16324f;
    --preview-accent: #2d6a8a;
    --preview-text: #182433;
    --preview-heading-font: "Inter", sans-serif;
    --preview-body-font: "Inter", sans-serif;
    --preview-heading-size: 24px;
    --preview-body-size: 11px;
    --preview-line-spacing: 1.45;
    --preview-section-spacing: 18px;

    position: relative;
    width: min(100%, 535px);
    min-height: 756px;
    margin: 0 auto;
    overflow: hidden;
    color: var(--preview-text);
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(20, 39, 70, 0.22);
    font-family: var(--preview-body-font);
    font-size: var(--preview-body-size);
    line-height: var(--preview-line-spacing);
}

.cv-preview-header {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 140px;
    padding: 27px 31px;
    color: #ffffff;
    background:
        linear-gradient(
            120deg,
            var(--preview-primary),
            color-mix(in srgb, var(--preview-primary) 70%, #000000)
        );
}

.cv-preview-header > div:last-child {
    min-width: 0;
}

.cv-preview-header h1 {
    margin: 0;
    color: #ffffff;
    font-family: var(--preview-heading-font);
    font-size: var(--preview-heading-size);
    font-weight: 800;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.cv-preview-header p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: calc(var(--preview-body-size) * 1.05);
}

.cv-preview-photo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.72);
    color: var(--preview-primary);
    background: #eef2f7;
    font-size: 2rem;
}

.cv-preview-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cv-preview-photo-circle {
    border-radius: 50%;
}

.cv-preview-photo-rounded {
    border-radius: 17px;
}

.cv-preview-photo-square {
    border-radius: 0;
}

.cv-preview-photo-hidden,
.cv-preview-photo.hidden {
    display: none;
}

.cv-preview-page-body {
    display: grid;
    grid-template-columns: minmax(135px, 0.34fr) minmax(0, 0.66fr);
    min-height: 616px;
}

.cv-preview-sidebar {
    padding: 27px 22px;
    color: #ffffff;
    background:
        color-mix(
            in srgb,
            var(--preview-primary) 91%,
            #ffffff
        );
}

.cv-preview-main-column {
    padding: 28px 27px;
    background: #ffffff;
}

.cv-preview-sidebar section,
.cv-preview-main-column section {
    margin-bottom: var(--preview-section-spacing);
}

.cv-preview-sidebar h2,
.cv-preview-main-column h2 {
    margin: 0 0 10px;
    font-family: var(--preview-heading-font);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cv-preview-sidebar h2 {
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: calc(var(--preview-body-size) * 1.05);
}

.cv-preview-main-column h2 {
    padding-bottom: 6px;
    border-bottom: 2px solid var(--preview-accent);
    color: var(--preview-primary);
    font-size: calc(var(--preview-body-size) * 1.15);
}

.cv-preview-sidebar p {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.77);
    font-size: calc(var(--preview-body-size) * 0.78);
    overflow-wrap: anywhere;
}

.cv-preview-main-column p {
    margin: 0;
    color: var(--preview-text);
    font-size: var(--preview-body-size);
}

.cv-preview-main-column article {
    margin-bottom: 14px;
}

.cv-preview-main-column article strong {
    display: block;
    color: var(--preview-primary);
    font-family: var(--preview-heading-font);
    font-size: calc(var(--preview-body-size) * 1.08);
}

.cv-preview-main-column article small {
    display: block;
    margin: 3px 0 6px;
    color: var(--preview-accent);
    font-size: calc(var(--preview-body-size) * 0.78);
    font-weight: 700;
}

.cv-preview-watermark {
    position: absolute;
    right: 13px;
    bottom: 10px;
    color: rgba(20, 39, 70, 0.2);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.12em;
}


/* =========================================================
   PREVIEW LAYOUT VARIATIONS
   ========================================================= */

.cv-preview-layout-two_column_right .cv-preview-page-body {
    grid-template-columns: minmax(0, 0.66fr) minmax(135px, 0.34fr);
}

.cv-preview-layout-two_column_right .cv-preview-sidebar {
    grid-column: 2;
    grid-row: 1;
}

.cv-preview-layout-two_column_right .cv-preview-main-column {
    grid-column: 1;
    grid-row: 1;
}

.cv-preview-layout-single_column .cv-preview-page-body {
    display: block;
}

.cv-preview-layout-single_column .cv-preview-sidebar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    min-height: auto;
    padding: 20px 28px;
    background:
        color-mix(
            in srgb,
            var(--preview-primary) 94%,
            #ffffff
        );
}

.cv-preview-layout-single_column .cv-preview-sidebar section {
    margin: 0;
}

.cv-preview-layout-single_column .cv-preview-main-column {
    padding: 27px 31px;
}


/* =========================================================
   DESIGN RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {
    .cv-design-workspace {
        grid-template-columns: 1fr;
    }

    .cv-live-preview-column {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .cv-color-control-grid {
        grid-template-columns: 1fr;
    }

    .cv-a4-preview-frame {
        padding: 14px;
    }

    .cv-a4-preview {
        min-width: 480px;
    }
}




/* =========================================================
   COMPACT DESIGN PANEL WITH STICKY LIVE PREVIEW
   ========================================================= */

.cv-editor-page {
    overflow: visible;
}

.cv-design-editor-section {
    overflow: visible;
}

.cv-design-workspace {
    grid-template-columns:
        minmax(480px, 0.95fr)
        minmax(460px, 1.05fr);
    align-items: start;
    gap: 20px;
}

.cv-design-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 13px;
}

.cv-design-control-group {
    height: 100%;
    padding: 16px;
}

.cv-design-control-heading {
    margin-bottom: 14px;
    padding-bottom: 11px;
}

.cv-design-control-heading > i {
    width: 35px;
    height: 35px;
}

.cv-design-control-group .cv-form-control {
    min-height: 43px;
    padding: 9px 11px;
}

.cv-design-control-group > .cv-form-field + .cv-form-field {
    margin-top: 11px;
}

.cv-color-control-grid {
    gap: 7px;
}

.cv-color-control {
    padding: 8px;
}

.cv-color-input {
    height: 40px !important;
    min-height: 40px !important;
}

.cv-range-control + .cv-range-control {
    margin-top: 12px;
}

.cv-live-preview-column {
    position: sticky;
    top: 12px;
    z-index: 10;
    max-height: calc(100vh - 24px);
}

.cv-a4-preview-frame {
    max-height: calc(100vh - 72px);
    overflow: auto;
}

.cv-a4-preview {
    line-height: var(--preview-line-spacing) !important;
}

.cv-preview-sidebar section,
.cv-preview-main-column section {
    margin-bottom: var(--preview-section-spacing) !important;
}

.cv-preview-header h1 {
    font-size: var(--preview-heading-size) !important;
}

.cv-preview-sidebar,
.cv-preview-main-column,
.cv-preview-main-column p {
    font-size: var(--preview-body-size) !important;
}


/* Keep slider values clearly visible */

.cv-range-control output {
    min-width: 58px;
    color: #ffffff;
    background: linear-gradient(
        110deg,
        var(--selected-primary),
        var(--selected-accent)
    );
}


/* =========================================================
   SMALLER DESKTOPS
   ========================================================= */

@media (max-width: 1399.98px) {
    .cv-design-workspace {
        grid-template-columns:
            minmax(400px, 0.9fr)
            minmax(420px, 1.1fr);
    }

    .cv-design-controls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1099.98px) {
    .cv-design-workspace {
        grid-template-columns: 1fr;
    }

    .cv-design-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cv-live-preview-column {
        position: sticky;
        top: 10px;
        max-height: calc(100vh - 20px);
    }
}

@media (max-width: 767.98px) {
    .cv-design-controls {
        grid-template-columns: 1fr;
    }

    .cv-live-preview-column {
        position: static;
        max-height: none;
    }

    .cv-a4-preview-frame {
        max-height: 720px;
    }
}







.cv-preview-achievements {
    margin-top: 6px !important;
    padding-left: 8px;
    border-left: 2px solid var(--preview-accent);
}

.cv-preview-custom-section p {
    white-space: normal;
}

.cv-preview-sidebar p,
.cv-preview-main-column p {
    overflow-wrap: anywhere;
}









/* =========================================================
   EDITOR FULL PREVIEW BUTTON
   ========================================================= */

.cv-editor-final-save {
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto
        auto;
}

.cv-editor-preview-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 49px;
    padding: 12px 17px;
    border: 1px solid rgba(255, 255, 255, 0.27);
    border-radius: 12px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.cv-editor-preview-button:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-3px);
}


/* =========================================================
   FULL CV PREVIEW PAGE
   ========================================================= */

.cv-full-preview-page {
    --cv-primary: #16324f;
    --cv-accent: #2d6a8a;
    --cv-text: #182433;
    --cv-heading-font: "Inter", sans-serif;
    --cv-body-font: "Inter", sans-serif;
    --cv-heading-size: 26px;
    --cv-body-size: 11px;
    --cv-line-spacing: 1.45;
    --cv-section-spacing: 20px;

    min-height: 100vh;
    overflow: visible;
    background: #e9edf3;
}

.cv-full-preview-header {
    position: relative;
    overflow: hidden;
    padding: 30px 0 145px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 82% 25%,
            color-mix(in srgb, var(--cv-accent) 30%, transparent),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #061329,
            color-mix(in srgb, var(--cv-primary) 76%, #07162f)
        );
}

.cv-full-preview-header::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.15;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        );
    background-size: 48px 48px;
}

.cv-full-preview-heading {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 40px;
    margin-top: 70px;
}

.cv-full-preview-heading h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(3rem, 5vw, 5.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.cv-full-preview-heading h1 span {
    display: block;
    margin-top: 8px;
    color: transparent;
    background: linear-gradient(
        90deg,
        #ffffff,
        color-mix(in srgb, var(--cv-accent) 65%, #ffffff)
    );
    background-clip: text;
    -webkit-background-clip: text;
}

.cv-full-preview-heading p {
    max-width: 680px;
    margin: 23px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.96rem;
    line-height: 1.75;
}

.cv-preview-reference-card {
    display: grid;
    gap: 5px;
    min-width: 250px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
}

.cv-preview-reference-card small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.cv-preview-reference-card strong {
    color: #ffffff;
    font-size: 0.8rem;
}

.cv-preview-reference-card span {
    justify-self: start;
    margin-top: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #d8f8ea;
    background: rgba(39, 190, 118, 0.17);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
}


/* =========================================================
   PREVIEW LAYOUT AND ACTIONS
   ========================================================= */

.cv-full-preview-content {
    position: relative;
    z-index: 3;
    margin-top: -75px;
    padding-bottom: 110px;
}

.cv-full-preview-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 25px;
}

.cv-preview-actions {
    position: sticky;
    top: 20px;
    padding: 21px;
    border: 1px solid rgba(20, 39, 70, 0.1);
    border-radius: 21px;
    background: #ffffff;
    box-shadow: 0 25px 65px rgba(20, 39, 70, 0.12);
}

.cv-preview-action-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e6eaf1;
}

.cv-preview-action-heading > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--cv-primary),
        var(--cv-accent)
    );
}

.cv-preview-action-heading > div {
    display: grid;
    gap: 2px;
}

.cv-preview-action-heading small {
    color: var(--cv-accent);
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.cv-preview-action-heading strong {
    color: #1e2d45;
    font-size: 0.8rem;
}

.cv-preview-actions ul {
    display: grid;
    gap: 11px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
}

.cv-preview-actions li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #647186;
    font-size: 0.69rem;
    line-height: 1.5;
}

.cv-preview-actions li i {
    flex: 0 0 auto;
    color: #138b55;
}

.cv-preview-edit-button,
.cv-preview-payment-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin-top: 10px;
    padding: 11px 13px;
    border-radius: 11px;
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.cv-preview-edit-button {
    color: var(--cv-primary);
    background: #edf1f7;
}

.cv-preview-edit-button:hover {
    color: var(--cv-accent);
    transform: translateY(-2px);
}

.cv-preview-payment-button {
    color: #ffffff;
    background: linear-gradient(
        110deg,
        var(--cv-primary),
        var(--cv-accent)
    );
    box-shadow:
        0 13px 25px
        color-mix(in srgb, var(--cv-primary) 20%, transparent);
}

.cv-preview-payment-button:hover {
    color: #ffffff;
    transform: translateY(-3px);
}

.cv-preview-private-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    border-radius: 10px;
    color: #765717;
    background: #fff7df;
}

.cv-preview-private-notice p {
    margin: 0;
    font-size: 0.61rem;
    line-height: 1.5;
}


/* =========================================================
   A4 FINAL DOCUMENT
   ========================================================= */

.cv-final-document-wrapper {
    overflow: auto;
    padding: 35px;
    border: 1px solid rgba(20, 39, 70, 0.1);
    border-radius: 23px;
    background:
        linear-gradient(
            45deg,
            rgba(23, 37, 60, 0.05) 25%,
            transparent 25%
        ),
        linear-gradient(
            -45deg,
            rgba(23, 37, 60, 0.05) 25%,
            transparent 25%
        ),
        #d9dee7;
    background-size: 18px 18px;
    box-shadow: 0 25px 70px rgba(20, 39, 70, 0.12);
}

.cv-final-document {
    position: relative;
    width: 794px;
    min-height: 1123px;
    margin: 0 auto;
    overflow: hidden;
    color: var(--cv-text);
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(20, 39, 70, 0.25);
    font-family: var(--cv-body-font);
    font-size: var(--cv-body-size);
    line-height: var(--cv-line-spacing);
}

.cv-final-header {
    display: flex;
    align-items: center;
    gap: 27px;
    min-height: 180px;
    padding: 38px 45px;
    color: #ffffff;
    background:
        linear-gradient(
            120deg,
            var(--cv-primary),
            color-mix(in srgb, var(--cv-primary) 70%, #000000)
        );
}

.cv-final-name h1 {
    margin: 0;
    color: #ffffff;
    font-family: var(--cv-heading-font);
    font-size: var(--cv-heading-size);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.cv-final-name p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: calc(var(--cv-body-size) * 1.2);
}

.cv-final-photo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 112px;
    height: 112px;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.72);
    color: var(--cv-primary);
    background: #eef2f7;
    font-size: 2.7rem;
}

.cv-final-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cv-final-photo-circle {
    border-radius: 50%;
}

.cv-final-photo-rounded {
    border-radius: 22px;
}

.cv-final-photo-square {
    border-radius: 0;
}

.cv-final-body {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    min-height: 943px;
}

.cv-final-sidebar {
    padding: 37px 30px;
    color: #ffffff;
    background:
        color-mix(
            in srgb,
            var(--cv-primary) 92%,
            #ffffff
        );
}

.cv-final-main-column {
    padding: 40px 42px;
    background: #ffffff;
}

.cv-final-sidebar section,
.cv-final-main-column section {
    margin-bottom: var(--cv-section-spacing);
}

.cv-final-sidebar h2,
.cv-final-main-column h2 {
    margin: 0 0 12px;
    font-family: var(--cv-heading-font);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.cv-final-sidebar h2 {
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: calc(var(--cv-body-size) * 1.15);
}

.cv-final-main-column h2 {
    padding-bottom: 7px;
    border-bottom: 2px solid var(--cv-accent);
    color: var(--cv-primary);
    font-size: calc(var(--cv-body-size) * 1.35);
}

.cv-final-sidebar p {
    margin: 0 0 7px;
    color: rgba(255, 255, 255, 0.79);
    font-size: calc(var(--cv-body-size) * 0.9);
    overflow-wrap: anywhere;
}

.cv-final-sidebar article {
    margin-bottom: 12px;
}

.cv-final-sidebar article strong {
    display: block;
    color: #ffffff;
    font-size: calc(var(--cv-body-size) * 0.92);
}

.cv-final-sidebar article small {
    display: block;
    color: rgba(255, 255, 255, 0.68);
    font-size: calc(var(--cv-body-size) * 0.78);
}

.cv-final-main-column section > p {
    margin: 0;
    color: var(--cv-text);
}

.cv-final-main-column article {
    margin-bottom: 19px;
}

.cv-final-main-column article h3 {
    margin: 0;
    color: var(--cv-primary);
    font-family: var(--cv-heading-font);
    font-size: calc(var(--cv-body-size) * 1.2);
    font-weight: 800;
}

.cv-final-main-column article > strong {
    display: block;
    margin-top: 3px;
    color: var(--cv-accent);
    font-size: calc(var(--cv-body-size) * 0.94);
}

.cv-final-main-column article > p {
    margin: 8px 0 0;
    color: var(--cv-text);
}

.cv-final-entry-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.cv-final-entry-heading small {
    flex: 0 0 auto;
    color: var(--cv-accent);
    font-size: calc(var(--cv-body-size) * 0.82);
    font-weight: 700;
}

.cv-final-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: #778397;
    font-size: calc(var(--cv-body-size) * 0.82);
}

.cv-final-achievements {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 3px solid var(--cv-accent);
    color: var(--cv-text);
    background:
        color-mix(in srgb, var(--cv-accent) 7%, #ffffff);
}


/* =========================================================
   LAYOUT OPTIONS
   ========================================================= */

.cv-final-layout-two_column_right .cv-final-body {
    grid-template-columns: minmax(0, 1fr) 255px;
}

.cv-final-layout-two_column_right .cv-final-sidebar {
    grid-column: 2;
    grid-row: 1;
}

.cv-final-layout-two_column_right .cv-final-main-column {
    grid-column: 1;
    grid-row: 1;
}

.cv-final-layout-single_column .cv-final-body {
    display: block;
}

.cv-final-layout-single_column .cv-final-sidebar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    min-height: auto;
    padding: 26px 44px;
}

.cv-final-layout-single_column .cv-final-sidebar section {
    margin: 0;
}

.cv-final-layout-single_column .cv-final-main-column {
    padding: 38px 48px;
}


/* =========================================================
   TEMPLATE 1 — ATS PROFESSIONAL
   ========================================================= */

.cv-final-template-ats_professional {
    border-top: 8px solid var(--cv-primary);
}

.cv-final-template-ats_professional .cv-final-header {
    min-height: 145px;
    padding: 30px 48px;
    color: var(--cv-text);
    background: #ffffff;
    border-bottom: 3px solid var(--cv-primary);
}

.cv-final-template-ats_professional .cv-final-name h1 {
    color: var(--cv-primary);
}

.cv-final-template-ats_professional .cv-final-name p {
    color: var(--cv-accent);
}

.cv-final-template-ats_professional .cv-final-sidebar {
    color: var(--cv-text);
    background: #f1f4f7;
    border-right: 1px solid #d9dfe7;
}

.cv-final-template-ats_professional .cv-final-sidebar h2 {
    color: var(--cv-primary);
    border-color: var(--cv-accent);
}

.cv-final-template-ats_professional .cv-final-sidebar p,
.cv-final-template-ats_professional .cv-final-sidebar strong,
.cv-final-template-ats_professional .cv-final-sidebar small {
    color: var(--cv-text);
}


/* =========================================================
   TEMPLATE 2 — MODERN CORPORATE
   ========================================================= */

.cv-final-template-modern_corporate .cv-final-header {
    position: relative;
    background:
        linear-gradient(
            115deg,
            var(--cv-primary) 0 72%,
            var(--cv-accent) 72% 100%
        );
}

.cv-final-template-modern_corporate .cv-final-header::after {
    position: absolute;
    right: 35px;
    bottom: 18px;
    content: "MARHABA SERVICES";
    color: rgba(255, 255, 255, 0.2);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
}


/* =========================================================
   TEMPLATE 3 — TECHNICAL DEVELOPER
   ========================================================= */

.cv-final-template-technical_developer .cv-final-header {
    border-bottom: 5px solid var(--cv-accent);
    background:
        linear-gradient(
            120deg,
            #090f1d,
            var(--cv-primary)
        );
}

.cv-final-template-technical_developer .cv-final-header::after {
    margin-left: auto;
    content: "</>";
    color: var(--cv-accent);
    font-family: monospace;
    font-size: 55px;
    font-weight: 900;
    opacity: 0.55;
}

.cv-final-template-technical_developer .cv-final-sidebar {
    background: #101827;
}

.cv-final-template-technical_developer .cv-final-main-column h2,
.cv-final-template-technical_developer .cv-final-main-column h3 {
    font-family: "Courier New", monospace;
}


/* =========================================================
   TEMPLATE 4 — ELEGANT EXECUTIVE
   ========================================================= */

.cv-final-template-elegant_executive {
    border: 10px solid
        color-mix(in srgb, var(--cv-accent) 28%, #ffffff);
}

.cv-final-template-elegant_executive .cv-final-header {
    justify-content: center;
    text-align: center;
    background: #ffffff;
    border-bottom: 2px solid var(--cv-accent);
}

.cv-final-template-elegant_executive .cv-final-name h1 {
    color: var(--cv-primary);
    font-family: "Playfair Display", serif;
}

.cv-final-template-elegant_executive .cv-final-name p {
    color: var(--cv-accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cv-final-template-elegant_executive .cv-final-sidebar {
    color: var(--cv-text);
    background: #f6f1e8;
}

.cv-final-template-elegant_executive .cv-final-sidebar h2 {
    color: var(--cv-primary);
    border-color: var(--cv-accent);
}

.cv-final-template-elegant_executive .cv-final-sidebar p,
.cv-final-template-elegant_executive .cv-final-sidebar strong,
.cv-final-template-elegant_executive .cv-final-sidebar small {
    color: var(--cv-text);
}


/* =========================================================
   TEMPLATE 5 — CREATIVE CONTEMPORARY
   ========================================================= */

.cv-final-template-creative_contemporary .cv-final-header {
    position: relative;
    min-height: 205px;
    padding-left: 65px;
    background:
        radial-gradient(
            circle at 88% 30%,
            var(--cv-accent) 0 80px,
            transparent 81px
        ),
        linear-gradient(
            125deg,
            var(--cv-primary),
            color-mix(in srgb, var(--cv-primary) 68%, #000000)
        );
}

.cv-final-template-creative_contemporary .cv-final-header::before {
    position: absolute;
    right: 120px;
    bottom: -25px;
    width: 100px;
    height: 100px;
    content: "";
    border: 18px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.cv-final-template-creative_contemporary .cv-final-sidebar {
    background:
        linear-gradient(
            180deg,
            var(--cv-primary),
            color-mix(in srgb, var(--cv-primary) 72%, #000000)
        );
}

.cv-final-template-creative_contemporary .cv-final-main-column h2 {
    display: inline-block;
    padding: 7px 13px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: var(--cv-accent);
}


/* =========================================================
   WATERMARK
   ========================================================= */

.cv-final-watermark {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-content: center;
    text-align: center;
    pointer-events: none;
    transform: rotate(-32deg);
}

.cv-final-watermark span,
.cv-final-watermark strong,
.cv-final-watermark small {
    display: block;
    color:
        color-mix(
            in srgb,
            var(--cv-primary) 14%,
            transparent
        );
}

.cv-final-watermark span {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.2em;
}

.cv-final-watermark strong {
    font-size: 100px;
    font-weight: 900;
    line-height: 0.9;
}

.cv-final-watermark small {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 900;
}


/* =========================================================
   PAYMENT INFORMATION
   ========================================================= */

.cv-preview-payment-information {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    margin-top: 25px;
    padding: 30px;
    scroll-margin-top: 30px;
    border: 1px solid rgba(20, 39, 70, 0.1);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(20, 39, 70, 0.09);
}

.cv-preview-payment-information > span {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 19px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--cv-primary),
        var(--cv-accent)
    );
    font-size: 1.6rem;
}

.cv-preview-payment-information small {
    display: block;
    margin-bottom: 5px;
    color: var(--cv-accent);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.cv-preview-payment-information h2 {
    margin: 0;
    color: #17253c;
    font-size: 1.35rem;
    font-weight: 800;
}

.cv-preview-payment-information p {
    margin: 8px 0 0;
    color: #6c788b;
    font-size: 0.78rem;
    line-height: 1.65;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {
    .cv-editor-final-save {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cv-editor-preview-button,
    .cv-editor-final-save button {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    .cv-full-preview-layout {
        grid-template-columns: 1fr;
    }

    .cv-preview-actions {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .cv-full-preview-heading {
        grid-template-columns: 1fr;
    }

    .cv-preview-reference-card {
        min-width: 0;
    }

    .cv-final-document-wrapper {
        padding: 17px;
    }

    .cv-preview-payment-information {
        grid-template-columns: 1fr;
    }

    .cv-editor-final-save {
        grid-template-columns: 1fr;
    }
}








/* =========================================================
   BANK TRANSFER PAYMENT PAGE
   ========================================================= */

.cv-bank-payment-page {
    min-height: 100vh;
    overflow: visible;
    background:
        radial-gradient(
            circle at 8% 35%,
            color-mix(in srgb, var(--selected-accent) 7%, transparent),
            transparent 24%
        ),
        #f2f5fa;
}

.cv-bank-payment-hero {
    position: relative;
    overflow: hidden;
    padding: 30px 0 145px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 82% 25%,
            color-mix(in srgb, var(--selected-accent) 30%, transparent),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #061329,
            color-mix(in srgb, var(--selected-primary) 77%, #07162f)
        );
}

.cv-bank-payment-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.15;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        );
    background-size: 48px 48px;
}

.cv-bank-payment-heading {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 72px auto 0;
    text-align: center;
}

.cv-bank-payment-heading h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(3rem, 5.5vw, 5.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.cv-bank-payment-heading h1 span {
    display: block;
    margin-top: 8px;
    color: transparent;
    background: linear-gradient(
        90deg,
        #ffffff,
        color-mix(in srgb, var(--selected-accent) 65%, #ffffff)
    );
    background-clip: text;
    -webkit-background-clip: text;
}

.cv-bank-payment-heading p {
    max-width: 700px;
    margin: 24px auto 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.96rem;
    line-height: 1.75;
}

.cv-bank-payment-content {
    position: relative;
    z-index: 3;
    margin-top: -75px;
    padding-bottom: 110px;
}

.cv-bank-payment-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 26px;
}


/* =========================================================
   BANK DETAILS
   ========================================================= */

.cv-bank-details-card,
.cv-payment-proof-card,
.cv-payment-status-card,
.cv-payment-unlocked-card {
    border: 1px solid rgba(20, 39, 70, 0.1);
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 25px 70px rgba(20, 39, 70, 0.12);
}

.cv-bank-details-card {
    position: sticky;
    top: 20px;
    overflow: hidden;
    padding: 30px;
}

.cv-bank-details-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 21px;
    border-bottom: 1px solid #e5eaf1;
}

.cv-bank-details-heading > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 57px;
    height: 57px;
    border-radius: 17px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--selected-primary),
        var(--selected-accent)
    );
    box-shadow:
        0 14px 28px
        color-mix(in srgb, var(--selected-primary) 21%, transparent);
    font-size: 1.3rem;
}

.cv-bank-details-heading small {
    display: block;
    margin-bottom: 3px;
    color: var(--selected-accent);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.cv-bank-details-heading h2 {
    margin: 0;
    color: #18263e;
    font-family: "Playfair Display", serif;
    font-size: 1.45rem;
    font-weight: 800;
}

.cv-bank-detail-list {
    display: grid;
    gap: 11px;
}

.cv-bank-detail-list > div {
    position: relative;
    display: grid;
    gap: 5px;
    min-height: 73px;
    padding: 14px;
    border: 1px solid #e3e8ef;
    border-radius: 13px;
    background: #fafbfd;
}

.cv-bank-detail-list small {
    color: #7d899a;
    font-size: 0.59rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cv-bank-detail-list strong {
    max-width: calc(100% - 75px);
    color: #26354c;
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

.cv-bank-detail-list button {
    position: absolute;
    top: 50%;
    right: 11px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    color: var(--selected-primary);
    background: var(--selected-secondary);
    font-size: 0.6rem;
    font-weight: 800;
    cursor: pointer;
    transform: translateY(-50%);
}

.cv-bank-transfer-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 15px;
    border: 1px solid rgba(190, 133, 25, 0.14);
    border-radius: 12px;
    color: #74551e;
    background: #fff7df;
}

.cv-bank-transfer-warning i {
    flex: 0 0 auto;
    color: #b77a0f;
}

.cv-bank-transfer-warning p {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.55;
}


/* =========================================================
   PAYMENT PROOF FORM
   ========================================================= */

.cv-payment-proof-card {
    padding: 35px;
}

.cv-payment-proof-card .cv-form-heading {
    margin-bottom: 28px;
}

.cv-payment-proof-card .cv-form-file-input {
    width: 100%;
}


/* =========================================================
   PAYMENT STATUS
   ========================================================= */

.cv-payment-status-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    margin-bottom: 25px;
    padding: 27px;
}

.cv-payment-status-card > span {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    color: #ffffff;
    font-size: 1.4rem;
}

.cv-payment-status-card small {
    display: block;
    margin-bottom: 4px;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.cv-payment-status-card h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
}

.cv-payment-status-card p {
    margin: 8px 0 0;
    color: #677488;
    font-size: 0.76rem;
    line-height: 1.65;
}

.cv-payment-status-card.status-pending {
    border-color: rgba(185, 125, 19, 0.17);
    background: #fffaf0;
}

.cv-payment-status-card.status-pending > span {
    background: #c08416;
}

.cv-payment-status-card.status-pending small,
.cv-payment-status-card.status-pending h2 {
    color: #805b19;
}

.cv-payment-status-card.status-verified,
.cv-payment-status-card.status-paid_in_office,
.cv-payment-status-card.status-complimentary {
    border-color: rgba(8, 114, 73, 0.16);
    background: #effaf4;
}

.cv-payment-status-card.status-verified > span,
.cv-payment-status-card.status-paid_in_office > span,
.cv-payment-status-card.status-complimentary > span {
    background: #138b55;
}

.cv-payment-status-card.status-verified small,
.cv-payment-status-card.status-verified h2,
.cv-payment-status-card.status-paid_in_office small,
.cv-payment-status-card.status-paid_in_office h2,
.cv-payment-status-card.status-complimentary small,
.cv-payment-status-card.status-complimentary h2 {
    color: #176143;
}

.cv-payment-status-card.status-rejected {
    border-color: rgba(190, 70, 56, 0.17);
    background: #fff1ef;
}

.cv-payment-status-card.status-rejected > span {
    background: #be4638;
}

.cv-payment-status-card.status-rejected small,
.cv-payment-status-card.status-rejected h2 {
    color: #873d34;
}

.cv-payment-status-card.status-needs_clarification {
    border-color: rgba(33, 103, 173, 0.17);
    background: #eef6ff;
}

.cv-payment-status-card.status-needs_clarification > span {
    background: #2167ad;
}

.cv-payment-status-card.status-needs_clarification small,
.cv-payment-status-card.status-needs_clarification h2 {
    color: #285b8e;
}

.cv-payment-admin-message {
    margin-top: 13px;
    padding: 13px 15px;
    border-left: 3px solid currentColor;
    border-radius: 0 10px 10px 0;
    background: rgba(255, 255, 255, 0.65);
}

.cv-payment-admin-message strong {
    display: block;
    font-size: 0.7rem;
}

.cv-payment-admin-message p {
    margin-top: 4px;
}


/* =========================================================
   PAYMENT UNLOCKED
   ========================================================= */

.cv-payment-unlocked-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 32px;
    border-color: rgba(8, 114, 73, 0.16);
    background:
        linear-gradient(
            120deg,
            #effaf4,
            #ffffff
        );
}

.cv-payment-unlocked-card > i {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    color: #ffffff;
    background: #138b55;
    font-size: 1.65rem;
}

.cv-payment-unlocked-card small {
    display: block;
    margin-bottom: 4px;
    color: #138b55;
    font-size: 0.59rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.cv-payment-unlocked-card h2 {
    margin: 0;
    color: #175d41;
    font-size: 1.4rem;
    font-weight: 800;
}

.cv-payment-unlocked-card p {
    margin: 7px 0 0;
    color: #547565;
    font-size: 0.75rem;
    line-height: 1.6;
}

.cv-payment-unlocked-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 11px;
    color: #ffffff;
    background: #138b55;
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
}


/* =========================================================
   PAYMENT RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .cv-bank-payment-layout {
        grid-template-columns: 1fr;
    }

    .cv-bank-details-card {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .cv-bank-payment-heading {
        text-align: left;
    }

    .cv-bank-payment-heading h1 {
        font-size: clamp(2.7rem, 14vw, 4.5rem);
    }

    .cv-bank-payment-heading p {
        margin-left: 0;
    }

    .cv-payment-proof-card,
    .cv-bank-details-card {
        padding: 25px 21px;
    }

    .cv-payment-status-card,
    .cv-payment-unlocked-card {
        grid-template-columns: 1fr;
    }

    .cv-payment-unlocked-card a {
        justify-content: center;
        width: 100%;
    }
}





.cv-preview-download-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(110deg, #087249, #13a563);
    box-shadow: 0 14px 28px rgba(8, 114, 73, 0.22);
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.cv-preview-download-button:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 19px 35px rgba(8, 114, 73, 0.28);
}



/* Hide supermarket navigation and footer on CV Studio pages */

body:has(.cv-studio-page) .site-header,
body:has(.cv-studio-page) footer.site-footer {
    display: none !important;
}





/* =========================================================
   EXECUTIVE PROFESSIONAL SIDEBAR CV
   ========================================================= */

.cv-executive-document {
    position: relative;
    display: grid;
    grid-template-columns: 32% 68%;
    width: 100%;
    max-width: 794px;
    min-height: 1123px;
    margin: 0 auto;
    overflow: hidden;
    color: var(--cv-text, #292929);
    background: #ffffff;
    box-shadow: 0 28px 75px rgba(15, 23, 42, 0.18);
    font-family: var(--cv-body-font, "Inter", sans-serif);
    font-size: var(--cv-body-size, 10px);
    line-height: var(--cv-line-spacing, 1.5);
}

/* DARK LEFT SIDEBAR */

.cv-executive-sidebar {
    min-width: 0;
    padding: 0 25px 42px;
    color: #d3d3d3;
    background: var(--cv-primary, #1d1d1b);
}

.cv-executive-photo {
    display: grid;
    place-items: center;
    width: calc(100% + 50px);
    height: 270px;
    margin-left: -25px;
    overflow: hidden;
    color: #707070;
    background:
        linear-gradient(
            145deg,
            #eeeeee,
            #bcbcbc
        );
    font-size: 5rem;
}

.cv-executive-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.cv-executive-identity {
    padding: 29px 0 18px;
}

.cv-executive-identity h1 {
    margin: 0;
    color: #ffffff;
    font-family: var(--cv-heading-font, "Inter", sans-serif);
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.cv-executive-identity h1::first-line {
    font-weight: 700;
}

.cv-executive-identity p {
    margin: 18px 0 0;
    color: #dddddd;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.cv-executive-contact {
    padding-bottom: 21px;
}

.cv-executive-contact p {
    margin: 0 0 6px;
    color: #bfbfbf;
    font-size: 0.67rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.cv-executive-sidebar section {
    position: relative;
    margin-top: 31px;
}

.cv-executive-sidebar section::before {
    position: absolute;
    top: 38px;
    bottom: 0;
    left: 3px;
    width: 1px;
    border-left: 1px dotted rgba(255, 255, 255, 0.58);
    content: "";
}

.cv-executive-sidebar section h2 {
    margin: 0 0 22px;
    color: #ffffff;
    font-family: var(--cv-heading-font, "Inter", sans-serif);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.cv-executive-sidebar section > p,
.cv-executive-sidebar section > article,
.cv-executive-sidebar .cv-executive-progress {
    margin-left: 13px;
}

.cv-executive-sidebar section p {
    color: #c9c9c9;
    font-size: 0.68rem;
    line-height: 1.72;
}

.cv-executive-sidebar section p strong {
    color: #f2f2f2;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cv-executive-sidebar section article {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.cv-executive-sidebar section article strong {
    color: #f3f3f3;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cv-executive-sidebar section article small {
    margin-top: 3px;
    color: #bdbdbd;
    font-size: 0.61rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* SKILL AND LANGUAGE BARS */

.cv-executive-progress {
    margin-bottom: 12px;
}

.cv-executive-progress > span {
    display: block;
    margin-bottom: 5px;
    color: #d5d5d5;
    font-size: 0.65rem;
    line-height: 1.25;
}

.cv-executive-progress > div {
    position: relative;
    width: 100%;
    height: 5px;
    overflow: hidden;
    background: #767676;
}

.cv-executive-progress > div i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: 72%;
    background: #f3f3f3;
}

.cv-executive-progress .cv-level-beginner,
.cv-executive-progress .cv-level-basic,
.cv-executive-progress .cv-level-elementary {
    width: 30%;
}

.cv-executive-progress .cv-level-intermediate {
    width: 55%;
}

.cv-executive-progress .cv-level-good {
    width: 65%;
}

.cv-executive-progress .cv-level-advanced,
.cv-executive-progress .cv-level-very_good {
    width: 80%;
}

.cv-executive-progress .cv-level-fluent,
.cv-executive-progress .cv-level-expert {
    width: 92%;
}

.cv-executive-progress .cv-level-native {
    width: 100%;
}

/* WHITE MAIN CV AREA */

.cv-executive-main {
    min-width: 0;
    padding: 40px 34px 55px;
    background:
        linear-gradient(
            180deg,
            rgba(250, 250, 250, 0.35),
            transparent 180px
        ),
        #ffffff;
}

.cv-executive-main section {
    margin-bottom: var(--cv-section-spacing, 28px);
}

.cv-executive-main section > h2 {
    position: relative;
    margin: 0 0 25px;
    padding-bottom: 10px;
    color: #222222;
    font-family: var(--cv-heading-font, "Inter", sans-serif);
    font-size: calc(var(--cv-heading-size, 18px) * 0.72);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cv-executive-main section > h2::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: #2b2b2b;
    content: "";
}

.cv-executive-main section article {
    margin-bottom: 25px;
    break-inside: avoid;
}

.cv-executive-main section article:last-child {
    margin-bottom: 0;
}

.cv-executive-main h3 {
    margin: 0 0 5px;
    color: #222222;
    font-family: var(--cv-heading-font, "Inter", sans-serif);
    font-size: calc(var(--cv-body-size, 10px) + 1.5px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.cv-executive-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 7px;
    margin-bottom: 11px;
    color: #555555;
    font-size: calc(var(--cv-body-size, 10px) - 2px);
    line-height: 1.4;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.cv-executive-meta strong {
    color: #3b3b3b;
    font-weight: 700;
}

.cv-executive-meta span:not(:last-child)::after,
.cv-executive-meta strong:not(:last-child)::after {
    margin-left: 7px;
    color: #828282;
    content: "|";
}

.cv-executive-main p {
    margin: 0 0 11px;
    color: var(--cv-text, #292929);
    font-size: var(--cv-body-size, 10px);
    line-height: var(--cv-line-spacing, 1.55);
}

.cv-executive-achievements {
    position: relative;
    margin-top: 9px;
    padding-left: 15px;
    color: var(--cv-text, #292929);
    font-size: var(--cv-body-size, 10px);
    line-height: calc(var(--cv-line-spacing, 1.55) + 0.15);
}

.cv-executive-achievements::before {
    position: absolute;
    top: 6px;
    left: 1px;
    width: 5px;
    height: 5px;
    background: #242424;
    border-radius: 50%;
    content: "";
}

/* WATERMARK */

.cv-executive-document .cv-final-watermark {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(15, 23, 42, 0.12);
    pointer-events: none;
    transform: rotate(-31deg);
}

.cv-executive-document .cv-final-watermark span {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.cv-executive-document .cv-final-watermark strong {
    font-size: clamp(4rem, 10vw, 7rem);
    line-height: 0.95;
}

.cv-executive-document .cv-final-watermark small {
    margin-top: 12px;
    font-size: 0.9rem;
    font-weight: 700;
}

/* RESPONSIVE PREVIEW */

@media (max-width: 991.98px) {
    .cv-executive-document {
        grid-template-columns: 34% 66%;
    }

    .cv-executive-sidebar {
        padding-right: 18px;
        padding-left: 18px;
    }

    .cv-executive-photo {
        width: calc(100% + 36px);
        height: 235px;
        margin-left: -18px;
    }

    .cv-executive-main {
        padding: 32px 25px 45px;
    }
}

@media (max-width: 767.98px) {
    .cv-final-document-wrapper {
        overflow-x: auto;
    }

    .cv-executive-document {
        width: 720px;
        min-width: 720px;
        min-height: 1018px;
        transform-origin: top left;
    }
}

/* PRINT */

@media print {
    .cv-executive-document {
        width: 210mm;
        max-width: none;
        min-height: 297mm;
        box-shadow: none;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .cv-executive-main section article {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}




/* Professional walking businessman */

.cv-walking-professional {
    position: fixed;
    z-index: 90;
    bottom: 24px;
    left: 0;
    width: 112px;
    height: 238px;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 16px 16px rgba(15, 23, 42, 0.25));
    transform: translate3d(-140px, 0, 0);
    transition: opacity 0.35s ease;
    will-change: transform;
}

.cv-walking-professional.is-visible {
    opacity: 1;
}

.cv-walking-professional img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    animation: cv-professional-walk 0.72s ease-in-out infinite alternate;
}

.cv-walking-professional.is-returning img {
    transform: scaleX(-1);
}

.cv-walking-professional-shadow {
    position: absolute;
    right: 20%;
    bottom: 2px;
    left: 20%;
    z-index: 1;
    height: 12px;
    background: rgba(15, 23, 42, 0.23);
    border-radius: 50%;
    filter: blur(5px);
    animation: cv-professional-shadow 0.72s ease-in-out infinite alternate;
}

@keyframes cv-professional-walk {
    from {
        translate: 0 0;
        rotate: -0.7deg;
    }

    to {
        translate: 0 -7px;
        rotate: 0.7deg;
    }
}

@keyframes cv-professional-shadow {
    from {
        opacity: 0.8;
        transform: scaleX(1);
    }

    to {
        opacity: 0.45;
        transform: scaleX(0.82);
    }
}

@media (max-width: 767.98px) {
    .cv-walking-professional {
        bottom: 12px;
        width: 78px;
        height: 166px;
        opacity: 0.82;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cv-walking-professional img,
    .cv-walking-professional-shadow {
        animation: none;
    }
}






.cv-walking-professional {
    position: fixed;
    z-index: 90;
    top: 90px;
    right: 18px;
    left: auto;
    bottom: auto;
    width: 105px;
    height: 223px;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 14px 14px rgba(15, 23, 42, 0.16));
    transform: translate3d(0, 0, 0);
    transition: opacity 0.4s ease;
    will-change: transform;
}

.cv-walking-professional.is-visible {
    opacity: 0.58;
}

.cv-walking-professional img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    animation: cv-professional-walk 0.72s ease-in-out infinite alternate;
}

.cv-walking-professional-shadow {
    position: absolute;
    right: 20%;
    bottom: 2px;
    left: 20%;
    z-index: 1;
    height: 10px;
    background: rgba(15, 23, 42, 0.15);
    border-radius: 50%;
    filter: blur(5px);
    animation: cv-professional-shadow 0.72s ease-in-out infinite alternate;
}

@media (max-width: 767.98px) {
    .cv-walking-professional {
        right: 7px;
        width: 70px;
        height: 149px;
    }

    .cv-walking-professional.is-visible {
        opacity: 0.42;
    }
}








.cv-walking-professional {
    position: fixed;
    z-index: 90;
    top: 90px;
    right: 18px;
    bottom: auto;
    left: auto;
    width: 105px;
    height: 223px;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 14px 14px rgba(15, 23, 42, 0.16));
    transform: translate3d(0, 0, 0);
    transition: opacity 0.4s ease;
    will-change: transform;
}

.cv-walking-professional.is-visible {
    opacity: 0.58;
}







/* =========================================================
   CV EDITOR VALIDATION ERROR NAVIGATION
   ========================================================= */

.cv-editor-navigation nav a.has-errors {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            #dc2626,
            #991b1b
        ) !important;
    border-color: #ef4444 !important;
    box-shadow:
        0 10px 25px
        rgba(220, 38, 38, 0.24);
}

.cv-editor-navigation nav a.has-errors i {
    color: #ffffff !important;
}

.cv-navigation-error-count {
    display: inline-grid;
    place-items: center;
    min-width: 23px;
    height: 23px;
    margin-left: auto;
    padding: 0 6px;
    color: #991b1b;
    background: #ffffff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.cv-editor-section.has-validation-errors {
    position: relative;
    border-color: #ef4444 !important;
    box-shadow:
        0 0 0 3px rgba(239, 68, 68, 0.12),
        0 18px 45px rgba(127, 29, 29, 0.08);
}

.cv-editor-section.has-validation-errors::before {
    position: absolute;
    top: 0;
    right: 22px;
    z-index: 3;
    padding: 7px 13px;
    color: #ffffff;
    background: #dc2626;
    border-radius: 0 0 10px 10px;
    content: "Please correct this section";
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cv-field-error,
.cv-form-errors,
.errorlist {
    color: #b91c1c !important;
    font-weight: 700;
}

.cv-form-field:has(.cv-field-error) input,
.cv-form-field:has(.cv-field-error) select,
.cv-form-field:has(.cv-field-error) textarea,
.cv-form-field input.is-invalid,
.cv-form-field select.is-invalid,
.cv-form-field textarea.is-invalid,
.cv-form-field input[aria-invalid="true"],
.cv-form-field select[aria-invalid="true"],
.cv-form-field textarea[aria-invalid="true"] {
    border-color: #dc2626 !important;
    background-color: #fff7f7 !important;
    box-shadow:
        0 0 0 3px
        rgba(220, 38, 38, 0.1) !important;
}

.cv-form-field:has(.cv-field-error) label {
    color: #b91c1c;
    font-weight: 800;
}




.cv-editor-preview-panel {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
}





/* =========================================================
   CV TEMPLATE SWITCHER
   ========================================================= */

.cv-template-switcher {
    margin-bottom: 34px;
    padding: 26px;
    background:
        linear-gradient(
            135deg,
            rgba(30, 41, 59, 0.98),
            rgba(15, 23, 42, 0.98)
        );
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.18);
}

.cv-template-switcher-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 23px;
}

.cv-template-switcher-heading > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    color: #0f172a;
    background: #fbbf24;
    border-radius: 14px;
    font-size: 1.2rem;
}

.cv-template-switcher-heading small {
    color: #fbbf24;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.cv-template-switcher-heading h2 {
    margin: 4px 0 7px;
    color: #ffffff;
    font-size: 1.25rem;
}

.cv-template-switcher-heading p {
    max-width: 780px;
    margin: 0;
    color: #cbd5e1;
    font-size: 0.86rem;
    line-height: 1.6;
}

.cv-template-switcher-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.cv-template-switch-option {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    margin: 0;
    padding: 13px;
    color: inherit;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 17px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.cv-template-switch-option:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(251, 191, 36, 0.55);
    transform: translateY(-3px);
}

.cv-template-switch-option.selected {
    background: rgba(16, 185, 129, 0.13);
    border-color: #34d399;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.08);
}

.cv-template-switch-preview {
    position: relative;
    min-height: 125px;
    overflow: hidden;
    background: #ffffff;
    border-radius: 9px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.cv-switch-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 31%;
    background: var(--switch-primary, #1e293b);
}

.cv-switch-content {
    position: absolute;
    top: 20px;
    right: 9px;
    left: 39%;
    display: grid;
    gap: 8px;
}

.cv-switch-content i {
    display: block;
    height: 4px;
    background: #cbd5e1;
    border-radius: 10px;
}

.cv-switch-content i:first-child {
    width: 75%;
    height: 7px;
    background: var(--switch-accent, #2563eb);
}

.cv-switch-content i:nth-child(3) {
    width: 82%;
}

.cv-switch-content i:nth-child(4) {
    width: 63%;
}

.cv-switch-photo {
    position: absolute;
    top: 10px;
    left: 7px;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    color: var(--switch-primary, #1e293b);
    background: #ffffff;
    border-radius: 50%;
    font-size: 0.7rem;
}

.cv-template-switch-details {
    min-width: 0;
}

.cv-template-switch-details small {
    color: #fbbf24;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.cv-template-switch-option.selected
.cv-template-switch-details small {
    color: #6ee7b7;
}

.cv-template-switch-details h3 {
    margin: 4px 0 6px;
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.25;
}

.cv-template-switch-details p {
    display: -webkit-box;
    margin: 0 0 10px;
    overflow: hidden;
    color: #cbd5e1;
    font-size: 0.68rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.cv-template-switch-details button,
.cv-template-current-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 0.66rem;
    font-weight: 800;
}

.cv-template-switch-details button {
    color: #0f172a;
    background: #fbbf24;
    border: 0;
}

.cv-template-switch-details button:hover {
    background: #fcd34d;
}

.cv-template-current-button {
    color: #064e3b;
    background: #6ee7b7;
}

.cv-template-locked-notice {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px;
    color: #fecaca;
    background: rgba(127, 29, 29, 0.35);
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: 15px;
}

.cv-template-locked-notice > i {
    font-size: 1.5rem;
}

.cv-template-locked-notice div {
    flex: 1;
}

.cv-template-locked-notice strong {
    display: block;
    color: #ffffff;
}

.cv-template-locked-notice p {
    margin: 3px 0 0;
    font-size: 0.76rem;
}

.cv-template-locked-notice > span {
    padding: 8px 11px;
    color: #0f172a;
    background: #fbbf24;
    border-radius: 9px;
    font-size: 0.72rem;
    font-weight: 800;
}

@media (max-width: 1199.98px) {
    .cv-template-switcher-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .cv-template-switcher {
        padding: 19px;
    }

    .cv-template-switcher-grid {
        grid-template-columns: 1fr;
    }

    .cv-template-switch-option {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .cv-template-locked-notice {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}



/* Full-preview template selection */

.cv-full-template-selection {
    padding: 32px 0 0;
    background:
        linear-gradient(
            180deg,
            #eef3f8,
            #f8fafc
        );
}

.cv-full-template-selection
.cv-template-switcher {
    margin-bottom: 0;
}





/* =========================================================
   FOLLOWING CV EDITOR PREVIEW
   ========================================================= */

.cv-design-workspace,
.cv-design-editor-section {
    overflow: visible;
}

.cv-live-preview-column {
    align-self: flex-start;
}

.cv-live-preview-placeholder {
    display: block;
    min-height: 650px;
    visibility: hidden;
}

.cv-live-preview-column.cv-preview-following {
    position: fixed !important;
    top: 18px;
    right: 20px;
    z-index: 1050;
    width: var(--cv-following-preview-width, 390px);
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 36px);
    padding: 13px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(248, 250, 252, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 18px;
    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(14px);
}

.cv-live-preview-column.cv-preview-following
.cv-preview-toolbar {
    position: sticky;
    top: -13px;
    z-index: 5;
    margin: -13px -13px 12px;
    padding: 13px 15px;
    background: rgba(15, 23, 42, 0.97);
    border-radius: 18px 18px 0 0;
}

.cv-live-preview-column.cv-preview-following
.cv-a4-preview-frame {
    margin: 0;
}

.cv-live-preview-column.cv-preview-following::-webkit-scrollbar {
    width: 8px;
}

.cv-live-preview-column.cv-preview-following::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 20px;
}

.cv-live-preview-column.cv-preview-following::-webkit-scrollbar-thumb {
    background: #64748b;
    border-radius: 20px;
}

.cv-live-preview-column.cv-preview-following::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

@media (max-width: 1199.98px) {
    .cv-live-preview-column.cv-preview-following {
        position: static !important;
        width: auto;
        max-width: none;
        max-height: none;
        padding: 0;
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    .cv-live-preview-placeholder {
        display: none;
    }
}






/* =========================================================
   FOLLOWING CV EDITOR PREVIEW
   ========================================================= */

.cv-design-workspace,
.cv-design-editor-section {
    overflow: visible;
}

.cv-live-preview-column {
    align-self: flex-start;
}

.cv-live-preview-placeholder {
    display: block;
    min-height: 650px;
    visibility: hidden;
}

.cv-live-preview-column.cv-preview-following {
    position: fixed !important;
    top: 18px;
    right: 20px;
    z-index: 1050;
    width: var(--cv-following-preview-width, 390px);
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 36px);
    padding: 13px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(248, 250, 252, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 18px;
    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(14px);
}

.cv-live-preview-column.cv-preview-following
.cv-preview-toolbar {
    position: sticky;
    top: -13px;
    z-index: 5;
    margin: -13px -13px 12px;
    padding: 13px 15px;
    background: rgba(15, 23, 42, 0.97);
    border-radius: 18px 18px 0 0;
}

.cv-live-preview-column.cv-preview-following
.cv-a4-preview-frame {
    margin: 0;
}

.cv-live-preview-column.cv-preview-following::-webkit-scrollbar {
    width: 8px;
}

.cv-live-preview-column.cv-preview-following::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 20px;
}

.cv-live-preview-column.cv-preview-following::-webkit-scrollbar-thumb {
    background: #64748b;
    border-radius: 20px;
}

.cv-live-preview-column.cv-preview-following::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

@media (max-width: 1199.98px) {
    .cv-live-preview-column.cv-preview-following {
        position: static !important;
        width: auto;
        max-width: none;
        max-height: none;
        padding: 0;
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    .cv-live-preview-placeholder {
        display: none;
    }
}





/* =========================================================
   PREVENT FOLLOWING PREVIEW FROM COVERING THE FORM
   ========================================================= */

@media (min-width: 1400px) {
    .cv-live-preview-column.cv-preview-following {
        width: 380px !important;
        min-width: 380px !important;
        max-width: 380px !important;
        right: 18px !important;
        box-sizing: border-box;
    }

    body:has(
        .cv-live-preview-column.cv-preview-following
    )
    .cv-editor-main {
        box-sizing: border-box;
        padding-right: 410px !important;
        transition: padding-right 0.25s ease;
    }

    body:has(
        .cv-live-preview-column.cv-preview-following
    )
    .cv-design-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(
        .cv-live-preview-column.cv-preview-following
    )
    .cv-live-preview-placeholder {
        display: none !important;
    }

    body:has(
        .cv-live-preview-column.cv-preview-following
    )
    .cv-editor-section {
        max-width: 100%;
    }
}

@media (max-width: 1399.98px) {
    .cv-live-preview-column.cv-preview-following {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .cv-live-preview-placeholder {
        display: none !important;
    }

    .cv-editor-main {
        padding-right: 0 !important;
    }
}





/* =========================================================
   FLASHY CV TEMPLATE SWITCHER
   ========================================================= */

.cv-template-switcher {
    position: relative;
    margin-bottom: 32px;
    padding: 30px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(66, 133, 255, 0.2),
            transparent 35%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(255, 183, 3, 0.16),
            transparent 34%
        ),
        linear-gradient(145deg, #111a2d 0%, #1c2940 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    box-shadow: 0 24px 65px rgba(10, 22, 45, 0.2);
}

.cv-template-switcher::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -100px;
    width: 280px;
    height: 280px;
    pointer-events: none;
    background: rgba(72, 117, 255, 0.12);
    border-radius: 50%;
    filter: blur(10px);
}

.cv-template-switcher-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 26px;
}

.cv-template-switcher-heading > span {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    color: #101a2e;
    background: linear-gradient(135deg, #ffd44d, #ffad0d);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 14px 32px rgba(255, 178, 19, 0.24);
    font-size: 1.6rem;
}

.cv-template-switcher-heading small {
    display: block;
    margin-bottom: 5px;
    color: #ffc12a;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.cv-template-switcher-heading h2 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 900;
}

.cv-template-switcher-heading p {
    max-width: 850px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.65;
}

.cv-template-options {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.cv-template-option-form {
    display: block;
    min-width: 0;
    margin: 0;
}

.cv-template-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 105px;
    padding: 14px;
    overflow: hidden;
    color: #182238;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(237, 243, 253, 0.96)
        );
    border: 2px solid transparent;
    border-radius: 20px;
    box-shadow:
        0 12px 30px rgba(3, 12, 31, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.cv-template-option:not(.disabled):not(:disabled):hover {
    z-index: 2;
    color: #101a2e;
    transform: translateY(-6px) scale(1.015);
    border-color: #ffba16;
    background: linear-gradient(145deg, #ffffff, #fff7dc);
    box-shadow:
        0 21px 42px rgba(3, 12, 31, 0.3),
        0 0 0 4px rgba(255, 186, 22, 0.13);
}

.cv-template-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cv-template-option:has(
    input[type="radio"]:focus-visible
) {
    outline: 4px solid rgba(255, 193, 42, 0.35);
    outline-offset: 3px;
}

.cv-template-option.active,
.cv-template-option:has(
    input[type="radio"]:checked
) {
    color: #ffffff;
    border-color: #ffc12a;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 202, 54, 0.3),
            transparent 40%
        ),
        linear-gradient(145deg, #26375a, #162138);
    box-shadow:
        0 20px 42px rgba(3, 12, 31, 0.38),
        0 0 0 4px rgba(255, 193, 42, 0.14);
}

.cv-template-option-preview {
    position: relative;
    display: flex;
    width: 67px;
    height: 82px;
    flex: 0 0 67px;
    overflow: hidden;
    background: #ffffff;
    border: 3px solid rgba(16, 26, 46, 0.1);
    border-radius: 9px;
    box-shadow: 0 9px 18px rgba(9, 19, 38, 0.2);
    transition: transform 0.25s ease;
}

.cv-template-option:hover .cv-template-option-preview {
    transform: rotate(-2deg) scale(1.05);
}

.cv-template-mini-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 22px;
    background: linear-gradient(135deg, #26385c, #3b6ed4);
}

.cv-template-mini-body {
    display: grid;
    grid-template-columns: 23px 1fr;
    gap: 5px;
    width: 100%;
    margin-top: 22px;
    padding: 6px 5px;
}

.cv-template-mini-body span:first-child {
    display: block;
    min-height: 47px;
    background:
        repeating-linear-gradient(
            to bottom,
            #dce5f2 0,
            #dce5f2 3px,
            transparent 3px,
            transparent 8px
        );
    border-radius: 3px;
}

.cv-template-mini-body span:last-child {
    display: block;
    min-height: 47px;
    background:
        repeating-linear-gradient(
            to bottom,
            #aebbd0 0,
            #aebbd0 3px,
            transparent 3px,
            transparent 9px
        );
    border-radius: 3px;
}

/* Different mini-preview appearances */

.cv-template-option-preview.template-ats_professional {
    border-radius: 4px;
}

.cv-template-option-preview.template-ats_professional
.cv-template-mini-header {
    height: 16px;
    background: #17324f;
}

.cv-template-option-preview.template-modern_corporate
.cv-template-mini-header {
    background: linear-gradient(135deg, #172554, #3478f6);
}

.cv-template-option-preview.template-technical_developer {
    background: #edf9fb;
}

.cv-template-option-preview.template-technical_developer
.cv-template-mini-header {
    background: linear-gradient(135deg, #101827, #00a6a6);
}

.cv-template-option-preview.template-elegant_executive {
    background: #fffaf3;
    border-radius: 2px;
}

.cv-template-option-preview.template-elegant_executive
.cv-template-mini-header {
    height: 17px;
    background: linear-gradient(135deg, #4a3529, #b38a61);
}

.cv-template-option-preview.template-creative_contemporary
.cv-template-mini-header {
    background: linear-gradient(135deg, #4c1d95, #d946ef);
}

.cv-template-option-details {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}

.cv-template-option-details strong {
    color: inherit;
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.25;
}

.cv-template-option-details small {
    color: #6c7890;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.3;
}

.cv-template-option.active
.cv-template-option-details small,
.cv-template-option:has(
    input[type="radio"]:checked
)
.cv-template-option-details small {
    color: rgba(255, 255, 255, 0.68);
}

.cv-template-select-indicator {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    color: #ffffff;
    background: linear-gradient(135deg, #3478f6, #705dfc);
    border-radius: 50%;
    box-shadow: 0 8px 17px rgba(52, 120, 246, 0.28);
    transition: transform 0.25s ease;
}

.cv-template-option:hover
.cv-template-select-indicator {
    transform: translateX(3px) scale(1.08);
}

.cv-template-option.active
.cv-template-select-indicator,
.cv-template-option:has(
    input[type="radio"]:checked
)
.cv-template-select-indicator {
    color: #172238;
    background: linear-gradient(135deg, #ffd84f, #ffad0d);
}

.cv-template-current-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    color: #182238;
    background: linear-gradient(135deg, #ffd84f, #ffad0d);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(255, 178, 13, 0.25);
}

.cv-template-lock-notice {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    padding: 15px 17px;
    color: #ffe39a;
    background: rgba(255, 188, 31, 0.1);
    border: 1px solid rgba(255, 193, 42, 0.3);
    border-radius: 16px;
}

.cv-template-lock-notice > i {
    font-size: 1.35rem;
}

.cv-template-lock-notice strong {
    display: block;
    color: #ffffff;
}

.cv-template-lock-notice p {
    margin: 3px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.83rem;
}

.cv-template-option.disabled,
.cv-template-option:disabled {
    cursor: not-allowed;
}

.cv-template-option.disabled:not(.active),
.cv-template-option:disabled:not(.active) {
    opacity: 0.52;
    filter: grayscale(0.35);
}

.cv-template-empty-message {
    grid-column: 1 / -1;
    padding: 20px;
    color: #ffffff;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 16px;
}

/* Selection animation */

@keyframes cv-template-selected-pulse {
    0% {
        box-shadow:
            0 20px 42px rgba(3, 12, 31, 0.38),
            0 0 0 0 rgba(255, 193, 42, 0.45);
    }

    70% {
        box-shadow:
            0 20px 42px rgba(3, 12, 31, 0.38),
            0 0 0 12px rgba(255, 193, 42, 0);
    }

    100% {
        box-shadow:
            0 20px 42px rgba(3, 12, 31, 0.38),
            0 0 0 4px rgba(255, 193, 42, 0.14);
    }
}

.cv-template-option:has(
    input[type="radio"]:checked
) {
    animation: cv-template-selected-pulse 0.55s ease;
}

/* Responsive layout */

@media (max-width: 1200px) {
    .cv-template-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .cv-template-switcher {
        padding: 21px 16px;
        border-radius: 21px;
    }

    .cv-template-switcher-heading {
        gap: 14px;
    }

    .cv-template-switcher-heading > span {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        border-radius: 15px;
        font-size: 1.2rem;
    }

    .cv-template-options {
        grid-template-columns: 1fr;
    }

    .cv-template-option {
        min-height: 96px;
    }
}





/* =========================================================
   COMPACT CV TEMPLATE DROPDOWN
   ========================================================= */

.cv-compact-template-switcher {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    width: 100%;
    margin: 0 0 25px;
    padding: 16px 18px;
    overflow: visible;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(69, 121, 255, 0.18),
            transparent 38%
        ),
        linear-gradient(135deg, #121c31, #202e49);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(11, 22, 43, 0.2);
}

.cv-compact-template-information {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cv-compact-template-icon {
    display: grid;
    place-items: center;
    width: 51px;
    height: 51px;
    flex: 0 0 51px;
    color: #172238;
    background: linear-gradient(135deg, #ffda50, #ffad0d);
    border-radius: 15px;
    box-shadow: 0 10px 24px rgba(255, 178, 13, 0.25);
    font-size: 1.25rem;
}

.cv-compact-template-information div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.cv-compact-template-information small {
    margin-bottom: 2px;
    color: #ffc12b;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.cv-compact-template-information strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-compact-template-information p {
    margin: 3px 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
}

.cv-template-dropdown {
    position: relative;
    flex: 0 0 auto;
}

.cv-template-dropdown > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 11px 17px;
    color: #172238;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, #ffda50, #ffae0e);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    box-shadow: 0 11px 25px rgba(255, 178, 13, 0.22);
    font-size: 0.82rem;
    font-weight: 900;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.cv-template-dropdown > summary::-webkit-details-marker {
    display: none;
}

.cv-template-dropdown > summary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(255, 178, 13, 0.32);
}

.cv-template-dropdown > summary .bi-chevron-down {
    transition: transform 0.25s ease;
}

.cv-template-dropdown[open]
> summary
.bi-chevron-down {
    transform: rotate(180deg);
}

/*
The dropdown opens inside the normal page layout.
It therefore pushes the next section down instead of covering it.
*/

.cv-template-dropdown-content {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 1000;
    width: min(520px, calc(100vw - 45px));
    max-height: 480px;
    padding: 17px;
    overflow-y: auto;
    color: #172238;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dce4f0;
    border-radius: 19px;
    box-shadow:
        0 30px 70px rgba(8, 20, 44, 0.32),
        0 0 0 5px rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(16px);
}

.cv-template-dropdown-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 13px;
    padding: 2px 3px 13px;
    border-bottom: 1px solid #e3e9f2;
}

.cv-template-dropdown-heading div {
    display: flex;
    flex-direction: column;
}

.cv-template-dropdown-heading small {
    color: #a36300;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.cv-template-dropdown-heading strong {
    color: #162238;
    font-size: 1rem;
}

.cv-template-dropdown-heading > span {
    padding: 6px 10px;
    color: #274b96;
    background: #eaf1ff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    white-space: nowrap;
}

.cv-template-dropdown-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.cv-template-dropdown-form {
    display: block;
    margin: 0;
}

.cv-template-dropdown-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 69px;
    margin: 0;
    padding: 9px 11px;
    color: #172238;
    text-align: left;
    cursor: pointer;
    appearance: none;
    background: #f5f8fd;
    border: 2px solid transparent;
    border-radius: 13px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.cv-template-dropdown-option:hover {
    z-index: 2;
    color: #172238;
    transform: translateX(3px);
    background: #ffffff;
    border-color: #8aabf2;
    box-shadow: 0 9px 20px rgba(25, 57, 113, 0.12);
}

.cv-template-dropdown-option.active,
.cv-template-dropdown-option:has(
    input[type="radio"]:checked
) {
    color: #ffffff;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 200, 39, 0.27),
            transparent 42%
        ),
        linear-gradient(135deg, #263b63, #17243e);
    border-color: #ffbf23;
    box-shadow: 0 10px 23px rgba(15, 32, 61, 0.23);
}

.cv-template-dropdown-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cv-template-dropdown-thumbnail {
    position: relative;
    display: block;
    width: 43px;
    height: 51px;
    flex: 0 0 43px;
    overflow: hidden;
    background: #ffffff;
    border: 2px solid #dfe6f1;
    border-radius: 6px;
    box-shadow: 0 5px 11px rgba(18, 36, 69, 0.15);
}

.cv-template-dropdown-thumbnail i {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 14px;
    background: linear-gradient(135deg, #213a67, #3679ed);
}

.cv-template-dropdown-thumbnail b {
    position: absolute;
    top: 20px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    background:
        repeating-linear-gradient(
            to bottom,
            #b7c5db 0,
            #b7c5db 2px,
            transparent 2px,
            transparent 6px
        );
}

.cv-template-dropdown-thumbnail.template-ats_professional i {
    background: #17324f;
}

.cv-template-dropdown-thumbnail.template-modern_corporate i {
    background: linear-gradient(135deg, #172554, #3478f6);
}

.cv-template-dropdown-thumbnail.template-technical_developer i {
    background: linear-gradient(135deg, #101827, #04a7a7);
}

.cv-template-dropdown-thumbnail.template-elegant_executive i {
    background: linear-gradient(135deg, #4a3529, #bb9165);
}

.cv-template-dropdown-thumbnail.template-creative_contemporary i {
    background: linear-gradient(135deg, #4c1d95, #d946ef);
}

.cv-template-dropdown-name {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.cv-template-dropdown-name strong {
    overflow: hidden;
    color: inherit;
    font-size: 0.86rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-template-dropdown-name small {
    overflow: hidden;
    color: #758197;
    font-size: 0.68rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-template-dropdown-option.active
.cv-template-dropdown-name small,
.cv-template-dropdown-option:has(
    input[type="radio"]:checked
)
.cv-template-dropdown-name small {
    color: rgba(255, 255, 255, 0.65);
}

.cv-template-dropdown-check {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    color: #ffffff;
    background: linear-gradient(135deg, #357cf4, #6e5dfc);
    border-radius: 50%;
    font-size: 0.75rem;
}

.cv-template-dropdown-option.active
.cv-template-dropdown-check,
.cv-template-dropdown-option:has(
    input[type="radio"]:checked
)
.cv-template-dropdown-check {
    color: #172238;
    background: linear-gradient(135deg, #ffda50, #ffad0d);
}

.cv-template-dropdown-option:disabled {
    cursor: default;
}

.cv-template-dropdown-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 13px 0 0;
    padding: 10px;
    color: #5f6e86;
    background: #eef3fa;
    border-radius: 10px;
    font-size: 0.7rem;
    line-height: 1.45;
}

.cv-template-dropdown-notice i {
    color: #3975dd;
}

.cv-compact-template-locked {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    color: #ffd974;
    background: rgba(255, 193, 42, 0.1);
    border: 1px solid rgba(255, 193, 42, 0.25);
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 650px) {
    .cv-compact-template-switcher {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .cv-template-dropdown {
        width: 100%;
    }

    .cv-template-dropdown > summary {
        width: 100%;
    }

    .cv-template-dropdown-content {
        right: auto;
        left: 0;
        width: 100%;
    }
}