* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --dark: #092328;
    --deep-green: #12544F;
    --green: #2A835F;
    --light-green: #8BBB92;
    --white: #ffffff;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: "Inter", sans-serif;
    background: #5b3a2f;
    color: var(--white);

    overflow-x: hidden;
    overflow-y: auto;
}

/* =====================================
   GLAVNI AUTH WRAPPER
===================================== */

.auth-container {
    width: calc(100vw - 36px);
    height: calc(100vh - 36px);

    margin: 18px;

    display: flex;

    gap: 0;

    position: relative;

    overflow: hidden;

    border-radius: 34px;

    background:
        linear-gradient(
            115deg,
            #092328 0%,
            #0e3c3c 46%,
            #176453 54%,
            #2A835F 100%
        );

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.28);
}


/* =====================================
   PANELI
===================================== */

.auth-panel {
    position: relative;

    flex: 1;

    min-width: 0;

    height: 100%;

    overflow: hidden;

    cursor: pointer;

    background: transparent;

    transition:
    flex 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}


/* levi panel */

.login-panel {
    background:
        linear-gradient(
            145deg,
            rgba(9, 35, 40, 0.96),
            rgba(18, 84, 79, 0.88)
        );
}


/* desni panel */

.register-panel {
    background:
        linear-gradient(
            145deg,
            rgba(18, 84, 79, 0.82),
            rgba(42, 131, 95, 0.96)
        );
}


/* mekani spoj između panela */

.login-panel::after {
    content: "";

    position: absolute;

    top: 0;
    right: -40px;

    width: 80px;
    height: 100%;

    z-index: 4;

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            rgba(18, 84, 79, 0),
            rgba(18, 84, 79, 0.55),
            rgba(42, 131, 95, 0)
        );

    filter: blur(16px);
}


/* suptilan glow */

.auth-panel::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        rgba(139, 187, 146, 0.10);

    filter: blur(30px);

    top: -250px;
    right: -180px;

    pointer-events: none;
}


/* =====================================
   GLOBALNI LOGO
===================================== */

.global-logo {
    position: fixed;

    top: 48px;
    left: 58px;

    z-index: 100;

    display: inline-flex;
    align-items: baseline;

    font-size: 24px;
    font-weight: 700;

    letter-spacing: -1.4px;

    user-select: none;
}
.global-logo.on-light .logo-main {
    color: #092328;
}

.global-logo.on-light .logo-accent {
    color: #2A835F;
}
.logo-main {
    color: #ffffff;

    transition: color 0.25s ease;
}

.logo-accent {
    color: var(--light-green);

    transition: color 0.25s ease;
}

.logo-main {
    color: #ffffff;
}

.logo-accent {
    color: var(--light-green);
}


/* =====================================
   SADRŽAJ PANELA
===================================== */

.panel-content {
    width: 100%;
    height: 100%;

    position: relative;

    z-index: 5;

    transition:
        opacity 0.14s ease,
        visibility 0.14s ease;
}

.panel-text {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: min(560px, 78%);

    display: grid;

    grid-template-rows:
        24px
        90px
        95px
        48px;

    row-gap: 12px;

    text-align: center;

    align-items: center;
    justify-items: center;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.14s ease,
        visibility 0.14s ease;
}


/* mali tekst */

.panel-text .small-text {
    width: 100%;

    margin: 0;

    font-size: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--light-green);
}


/* naslov */

.panel-text h2 {
    width: 100%;

    margin: 0;

    font-size: clamp(42px, 4vw, 68px);
    line-height: 1;

    letter-spacing: -3px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    font-weight: 600;
}


/* opis */

.panel-text .description {
    width: 100%;
    max-width: 300px;

    margin: 0;

    font-size: 16px;
    line-height: 1.45;

    color: rgba(255, 255, 255, 0.72);

    display: flex;
    align-items: flex-start;
    justify-content: center;

    text-align: center;
}


/* dugme */

.panel-text .main-button {
    width: 150px;
    height: 48px;

    margin: 0;

    align-self: center;

    border: none;
    border-radius: 14px;

    background: var(--light-green);
    color: var(--dark);

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}


/* =====================================
   TIPOGRAFIJA
===================================== */

.small-text {
    color: var(--light-green);

    font-size: 14px;

    font-weight: 500;

    margin-bottom: 16px;
}

h1 {
    font-size: clamp(42px, 4.5vw, 68px);

    line-height: 0.98;

    letter-spacing: -3.5px;

    margin-bottom: 22px;

    font-weight: 600;
}

.description {
    max-width: 430px;

    font-size: 16px;

    line-height: 1.55;

    color: rgba(255, 255, 255, 0.72);

    margin-bottom: 30px;
}


/* =====================================
   DUGMAD
===================================== */

.main-button,
.submit-button {
    border: none;

    font-family: inherit;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.main-button {
    padding: 15px 24px;

    border-radius: 14px;

    background: var(--light-green);

    color: var(--dark);

    font-size: 14px;
}

.main-button:hover {
    transform: translateY(-2px);

    background: #a0caa6;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.14);
}


/* =====================================
   FORME
===================================== */

.form-area {
    position: absolute;

    inset: 0;

    padding: 40px;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;

    visibility: hidden;

    transform: translateY(6px);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;

    z-index: 20;
}

.form-wrapper {
    width: 100%;

    max-width: 430px;
}

.form-wrapper h2 {
    font-size: 46px;

    letter-spacing: -2.5px;

    margin-bottom: 14px;
}

.form-description {
    color: rgba(255,255,255,0.65);

    margin-bottom: 32px;

    line-height: 1.6;
}


/* =====================================
   INPUTI
===================================== */

.input-group {
    margin-bottom: 18px;
}

.input-group label {
    display: block;

    font-size: 13px;

    margin-bottom: 9px;

    color: rgba(255,255,255,0.7);
}

.input-group input {
    width: 100%;

    padding: 17px 18px;

    border-radius: 14px;

    border:
        1px solid rgba(255,255,255,0.12);

    outline: none;

    background:
        rgba(255,255,255,0.07);

    color: white;

    font-family: inherit;

    font-size: 15px;

    transition:
        border 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.input-group input::placeholder {
    color:
        rgba(255,255,255,0.30);
}

.input-group input:focus {
    border-color:
        var(--light-green);

    background:
        rgba(255,255,255,0.10);

    box-shadow:
        0 0 0 4px
        rgba(139,187,146,0.08);
}


/* =====================================
   SUBMIT
===================================== */

.submit-button {
    width: 100%;

    padding: 17px;

    margin-top: 12px;

    border-radius: 14px;

    background: var(--light-green);

    color: var(--dark);

    font-size: 14px;
}

.submit-button:hover {
    transform: translateY(-2px);

    background: #a0caa6;
}


/* =====================================
   NAZAD
===================================== */

.back-button {
    position: absolute;

    left: 40px;
    top: 88px;

    border: none;

    background: transparent;

    color:
        rgba(255,255,255,0.65);

    cursor: pointer;

    font-family: inherit;

    font-size: 14px;

    z-index: 50;

    transition: color 0.2s ease;
}

.back-button:hover {
    color: #ffffff;
}


/* =====================================
   LOGIN ACTIVE
===================================== */

.auth-container.login-active
.login-panel {
    flex: 20;

    cursor: default;
}

.auth-container.login-active
.register-panel {
    flex: 0.001;

    opacity: 0;

    transform: translateX(40px);

    pointer-events: none;
}

.auth-container.login-active
.login-panel
.panel-text {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}

.auth-container.login-active
#loginForm {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* =====================================
   REGISTER ACTIVE
===================================== */

.auth-container.register-active
.register-panel {
    flex: 20;

    cursor: default;
}

.auth-container.register-active
.login-panel {
    flex: 0.001;

    opacity: 0;

    transform: translateX(-40px);

    pointer-events: none;
}

.auth-container.register-active
.register-panel
.panel-text {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}

.auth-container.register-active
#registerForm {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* =====================================
   TABLET / MOBILE
===================================== */

@media (max-width: 760px) {

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
}

    .auth-container {
        width: calc(100vw - 18px);
        height: calc(100vh - 18px);

        margin: 9px;
        padding: 0;

        display: flex;
        flex-direction: row;

        gap: 0;

        border-radius: 26px;

        overflow: hidden;

        background:
            linear-gradient(
                110deg,
                #092328 0%,
                #10463f 48%,
                #1c7158 52%,
                #2A835F 100%
            );
    }

    .auth-panel {
        height: 100%;

        flex: 1;
        min-width: 0;

        border-radius: 0;

        transition:
            flex 0.24s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.14s ease,
            transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .login-panel {
        background:
            linear-gradient(
                150deg,
                rgba(9,35,40,0.98),
                rgba(18,84,79,0.90)
            );
    }

    .register-panel {
        background:
            linear-gradient(
                150deg,
                rgba(18,84,79,0.84),
                rgba(42,131,95,0.97)
            );
    }

    .login-panel::after {
        right: -20px;
        width: 40px;

        filter: blur(12px);
    }

.global-logo {
    top: 30px;
    left: 30px;

    font-size: 19px;
}


    /* =========================
       POČETNI TEKST
    ========================== */

   .panel-text {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: calc(100% - 28px);

    display: grid;

    grid-template-rows:
        64px
        54px
        42px;

    row-gap: 14px;

    text-align: center;

    align-items: center;
    justify-items: center;
}

.panel-text .small-text {
    display: none;
}

.panel-text h2 {
    width: 100%;
    max-width: 155px;

    margin: 0;

    font-size: 27px;
    line-height: 0.95;

    letter-spacing: -1.4px;

    font-weight: 600;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.panel-text .description {
    width: 100%;
    max-width: 145px;

    margin: 0;

    font-size: 10px;
    line-height: 1.35;

    color: rgba(255, 255, 255, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.panel-text .main-button {
    width: 100%;
    max-width: 145px;

    height: 42px;

    margin: 0;

    padding: 0 8px;

    border-radius: 11px;

    font-size: 10px;
}


    /* =========================
       LOGIN ACTIVE
    ========================== */

    .auth-container.login-active
    .login-panel {
        flex: 1 0 100%;
    }

    .auth-container.login-active
    .register-panel {
        flex: 0 0 0;

        opacity: 0;

        transform: translateX(30px);

        pointer-events: none;
    }

    .auth-container.login-active
    .login-panel
    .panel-text {
        opacity: 0;

        visibility: hidden;

        pointer-events: none;
    }


    /* =========================
       REGISTER ACTIVE
    ========================== */

    .auth-container.register-active
    .register-panel {
        flex: 1 0 100%;
    }

    .auth-container.register-active
    .login-panel {
        flex: 0 0 0;

        opacity: 0;

        transform: translateX(-30px);

        pointer-events: none;
    }

    .auth-container.register-active
    .register-panel
    .panel-text {
        opacity: 0;

        visibility: hidden;

        pointer-events: none;
    }


    /* =========================
       FORME
    ========================== */

    .form-area {
        padding: 24px 20px;

        align-items: center;

        transform: translateY(4px);

        transition:
            opacity 0.15s ease,
            transform 0.15s ease,
            visibility 0.15s ease;
    }

    .form-wrapper {
        width: 100%;
        max-width: 340px;
    }

    .form-wrapper h2 {
        font-size: 34px;

        letter-spacing: -1.8px;

        margin-bottom: 10px;
    }

    .form-description {
        font-size: 12px;

        margin-bottom: 24px;
    }

    .input-group {
        margin-bottom: 13px;
    }

    .input-group label {
        font-size: 11px;

        margin-bottom: 7px;
    }

    .input-group input {
        padding: 13px 14px;

        border-radius: 11px;

        font-size: 14px;
    }

    .submit-button {
        padding: 14px;

        border-radius: 11px;

        font-size: 13px;
    }

    .back-button {
        left: 25px;
        top: 66px;

        font-size: 11px;
    }
}


/* =====================================
   SCROLL STRANICE
===================================== */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
}


/* =====================================
   O NASOJ PLATFORMI INDICATOR
===================================== */

.about-indicator {
    width: fit-content;

    margin: 6px auto 28px auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    color: rgba(255, 255, 255, 0.75);

    text-decoration: none;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: -0.2px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.about-indicator:hover {
    color: #ffffff;

    transform: translateY(2px);
}

.indicator-arrow {
    font-size: 18px;
    line-height: 1;
}


/* =====================================
   ABOUT PLATFORM
===================================== */

.about-platform {
    width: 100%;

    background: #ffffff;

    color: #092328;

    padding: 110px 24px 120px;
}

.about-inner {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


/* mali naslov */

.about-eyebrow {
    display: block;

    margin-bottom: 22px;

    color: #2A835F;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.2px;

    text-transform: uppercase;
}


/* glavni naslov */

.about-platform h2 {
    max-width: 850px;

    margin: 0;

    font-size: clamp(48px, 6vw, 82px);

    line-height: 0.98;

    letter-spacing: -4px;

    font-weight: 600;

    color: #092328;
}


/* intro */

.about-intro {
    max-width: 720px;

    margin-top: 36px;

    font-size: 19px;

    line-height: 1.65;

    color: #405156;
}


/* GRID */

.about-grid {
    margin-top: 90px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1px;

    background: #dfe5e3;

    border:
        1px solid #dfe5e3;

    border-radius: 24px;

    overflow: hidden;
}


/* CARD */

.about-card {
    min-height: 300px;

    padding: 40px;

    background: #ffffff;
}

.about-number {
    display: block;

    margin-bottom: 58px;

    color: #8BBB92;

    font-size: 13px;
    font-weight: 600;
}

.about-card h3 {
    max-width: 420px;

    margin-bottom: 18px;

    font-size: 25px;

    line-height: 1.1;

    letter-spacing: -1.2px;

    color: #092328;
}

.about-card p {
    max-width: 430px;

    font-size: 15px;

    line-height: 1.7;

    color: #59676a;
}


/* DONJI DEO */

.about-bottom {
    margin-top: 90px;

    padding-top: 45px;

    border-top:
        1px solid #dfe5e3;

    display: flex;
    justify-content: space-between;

    gap: 50px;
}

.about-bottom p,
.about-bottom strong {
    width: 48%;

    font-size: 18px;

    line-height: 1.55;

    letter-spacing: -0.4px;
}

.about-bottom p {
    color: #617073;

    font-weight: 400;
}

.about-bottom strong {
    color: #092328;

    font-weight: 600;
}


/* =====================================
   ABOUT MOBILE
===================================== */

@media (max-width: 760px) {

    .about-indicator {
        margin-top: 0;
        margin-bottom: 22px;

        font-size: 10px;
    }

    .about-platform {
        padding:
            72px 24px
            80px;
    }

    .about-eyebrow {
        margin-bottom: 18px;

        font-size: 10px;
    }

    .about-platform h2 {
        font-size: 42px;

        line-height: 0.98;

        letter-spacing: -2.6px;
    }

    .about-intro {
        margin-top: 28px;

        font-size: 15px;

        line-height: 1.6;
    }

    .about-grid {
        margin-top: 60px;

        grid-template-columns: 1fr;

        border-radius: 20px;
    }

    .about-card {
        min-height: auto;

        padding: 30px 24px;
    }

    .about-number {
        margin-bottom: 35px;
    }

    .about-card h3 {
        font-size: 22px;

        margin-bottom: 14px;
    }

    .about-card p {
        font-size: 14px;

        line-height: 1.65;
    }

    .about-bottom {
        margin-top: 60px;

        padding-top: 30px;

        flex-direction: column;

        gap: 20px;
    }

    .about-bottom p,
    .about-bottom strong {
        width: 100%;

        font-size: 16px;
    }
.about-indicator {
    bottom: 16px;

    font-size: 12px;
    font-weight: 700;
}

.indicator-arrow {
    font-size: 17px;
}

}
.about-indicator {
    position: absolute;

    left: 50%;
    bottom: 22px;

    transform: translateX(-50%);

    z-index: 80;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 6px;

    color: rgba(255,255,255,0.92);

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: -0.2px;

    animation: aboutPulse 1.8s ease-in-out infinite;
}

.indicator-arrow {
    font-size: 20px;
    line-height: 1;

    animation: arrowMove 1.8s ease-in-out infinite;
}

@keyframes aboutPulse {
    0%,
    100% {
        opacity: 0.72;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.06);
    }
}

@keyframes arrowMove {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

.login-message {
    min-height: 20px;

    margin: -4px 0 12px;

    font-size: 13px;

    text-align: center;

    color: rgba(255,255,255,0.7);
}

.login-message.error {
    color: #ffb4b4;
}

.login-message.success {
    color: #b9e8c0;
}

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .auth-container {
        width: 100%;
        max-width: none;

        height: 88svh;
        min-height: 88svh;

        margin: 0;
        padding: 0;

        border-radius: 0;
        overflow: hidden;
    }

    .auth-panel {
        height: 88svh;
        min-height: 88svh;

        margin: 0;
        border-radius: 0;
    }

    .login-panel,
    .register-panel {
        height: 88svh;
        min-height: 88svh;
    }

    .global-logo {
        top: 18px;
        left: 18px;
    }

    .about-indicator {
        bottom: 18px;
    }

    main {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

}






.preview-signature-right {
    width: 260px;
    margin-top: 28px;
    margin-left: auto;
    text-align: center;
}

.signature-space {
    height: 55px;
}

.signature-line-right {
    width: 100%;
    border-top: 1px solid #222;
    margin-bottom: 8px;
}

.preview-signature-right span {
    font-size: 12px;
    color: #555;
}



/* =====================================
   CENOVNIK
===================================== */

.pricing-section {
    margin-top: 90px;

    padding-top: 45px;

    border-top: 1px solid #dfe5e3;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 70px;

    align-items: start;
}

.pricing-copy {
    max-width: 520px;
}

.pricing-eyebrow {
    display: block;

    margin-bottom: 18px;

    color: #2A835F;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.4px;

    text-transform: uppercase;
}

.pricing-copy h3 {
    margin: 0;

    font-size: clamp(34px, 4vw, 54px);

    line-height: 1;

    letter-spacing: -2.5px;

    font-weight: 600;

    color: #092328;
}

.pricing-copy p {
    max-width: 470px;

    margin-top: 24px;

    font-size: 16px;

    line-height: 1.65;

    color: #59676a;
}


/* OPCIJE */

.pricing-options {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.pricing-card {
    min-height: 245px;

    padding: 28px;

    border: 1px solid #dfe5e3;

    border-radius: 20px;

    background: #ffffff;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;
}

.pricing-card-featured {
    background: #f7faf8;

    border-color: #cfdcd4;
}

.pricing-label {
    display: block;

    margin-bottom: 34px;

    color: #2A835F;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.4px;
}

.pricing-price {
    display: flex;

    align-items: flex-end;

    gap: 6px;
}

.pricing-price strong {
    font-size: clamp(42px, 5vw, 64px);

    line-height: 0.9;

    letter-spacing: -3px;

    font-weight: 600;

    color: #092328;
}

.pricing-price span {
    padding-bottom: 5px;

    font-size: 15px;

    color: #59676a;
}

.pricing-card > p {
    margin-top: 10px;

    font-size: 13px;

    color: #6b797c;
}

.pricing-saving {
    display: block;

    margin-top: auto;

    padding-top: 26px;

    color: #2A835F;

    font-size: 11px;

    font-weight: 500;

    line-height: 1.5;
}


/* MOBILE */

@media (max-width: 760px) {

    .pricing-section {
        margin-top: 60px;

        padding-top: 30px;

        grid-template-columns: 1fr;

        gap: 36px;
    }

    .pricing-copy h3 {
        font-size: 36px;

        letter-spacing: -2px;
    }

    .pricing-copy p {
        margin-top: 18px;

        font-size: 14px;
    }

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

    .pricing-card {
        min-height: auto;

        padding: 24px;
    }

    .pricing-label {
        margin-bottom: 24px;
    }

    .pricing-price strong {
        font-size: 48px;
    }

}

/* =====================================
   REGISTER REQUEST FORM
===================================== */

.register-form-area {
    overflow: hidden;
}

.register-form-wrapper {
    width: 100%;
    max-width: 760px;
    height: calc(100% - 90px);

    display: flex;
    flex-direction: column;
}

.register-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #8BBB92;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.register-form-wrapper h2 {
    margin-bottom: 8px;

    font-size: 40px;
    line-height: 1;

    letter-spacing: -2px;
}

.register-description {
    max-width: 580px;

    margin-bottom: 20px;

    font-size: 13px;
    line-height: 1.5;
}

#registerRequestForm {
    min-height: 0;
    flex: 1;
}

.register-scroll {
    height: 100%;

    padding-right: 8px;
    padding-bottom: 20px;

    overflow-y: auto;
    overscroll-behavior: contain;
}

.register-scroll::-webkit-scrollbar {
    width: 5px;
}

.register-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.register-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
}


/* SECTIONS */

.register-section {
    margin-bottom: 26px;
}

.register-section-title {
    margin-bottom: 13px;

    color: rgba(255,255,255,0.72);

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.8px;
}


/* GRID */

.register-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.register-grid .input-group {
    margin: 0;
}

.register-full {
    grid-column: 1 / -1;
}


/* REGISTER INPUTS */

.register-form-wrapper .input-group label {
    margin-bottom: 6px;

    font-size: 10px;
}

.register-form-wrapper .input-group input {
    padding: 12px 13px;

    border-radius: 10px;

    font-size: 13px;
}


/* LOGO UPLOAD */

.logo-upload {
    width: 100%;

    padding: 18px;

    display: flex;
    align-items: center;

    gap: 14px;

    border:
        1px dashed
        rgba(255,255,255,0.22);

    border-radius: 13px;

    background:
        rgba(255,255,255,0.045);

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.logo-upload:hover {
    background:
        rgba(255,255,255,0.08);

    border-color:
        rgba(139,187,146,0.55);
}

.logo-upload input {
    display: none;
}

.logo-upload-icon {
    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    border-radius: 10px;

    display: grid;
    place-items: center;

    background:
        rgba(139,187,146,0.16);

    color: #b3d7b8;

    font-size: 23px;
    font-weight: 400;
}

.logo-upload strong {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 600;
}

.logo-upload span {
    display: block;

    color:
        rgba(255,255,255,0.48);

    font-size: 10px;
}

.selected-logo-name {
    margin-top: 8px;

    color: #b9e8c0;

    font-size: 10px;
}


/* PLANOVI */

.register-plans {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.register-plan {
    position: relative;

    min-height: 110px;

    padding: 16px;

    border:
        1px solid
        rgba(255,255,255,0.12);

    border-radius: 13px;

    background:
        rgba(255,255,255,0.04);

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.register-plan:hover {
    transform: translateY(-1px);

    border-color:
        rgba(139,187,146,0.45);
}

.register-plan.featured {
    background:
        rgba(139,187,146,0.08);
}

.register-plan input {
    position: absolute;

    top: 15px;
    right: 15px;

    accent-color: #8BBB92;
}

.register-plan > div {
    display: flex;
    flex-direction: column;
}

.plan-name {
    margin-bottom: 17px;

    color:
        rgba(255,255,255,0.58);

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;
}

.register-plan strong {
    color: #ffffff;

    font-size: 22px;

    letter-spacing: -1px;
}

.register-plan small {
    margin-top: 4px;

    color:
        rgba(255,255,255,0.46);

    font-size: 9px;
}


/* PAYMENT INFO */

.register-payment-info {
    margin: 4px 0 18px;

    padding: 14px;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    border:
        1px solid
        rgba(139,187,146,0.18);

    border-radius: 11px;

    background:
        rgba(139,187,146,0.07);
}

.register-info-icon {
    flex: 0 0 auto;

    width: 19px;
    height: 19px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #8BBB92;
    color: #092328;

    font-size: 10px;
    font-weight: 700;
}

.register-payment-info p {
    color:
        rgba(255,255,255,0.64);

    font-size: 10px;
    line-height: 1.55;
}


/* MESSAGE */

.register-message {
    min-height: 18px;

    margin-bottom: 8px;

    text-align: center;

    font-size: 11px;

    color:
        rgba(255,255,255,0.7);
}

.register-message.error {
    color: #ffb4b4;
}

.register-message.success {
    color: #b9e8c0;
}


/* SUBMIT */

.register-submit {
    margin-top: 0;

    position: sticky;
    bottom: 0;

    box-shadow:
        0 -15px 30px
        rgba(18,84,79,0.18);
}


/* =====================================
   REGISTER MOBILE
===================================== */

@media (max-width: 760px) {

    .register-form-area {
        padding:
            62px 16px
            14px;
    }

    .register-form-wrapper {
        max-width: 100%;

        height: 100%;
    }

    .register-eyebrow {
        font-size: 9px;
    }

    .register-form-wrapper h2 {
        font-size: 29px;

        letter-spacing: -1.5px;
    }

    .register-description {
        margin-bottom: 16px;

        font-size: 10px;

        line-height: 1.45;
    }

    .register-scroll {
        padding-right: 4px;
    }

    .register-section {
        margin-bottom: 20px;
    }

    .register-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .register-full {
        grid-column: auto;
    }

    .register-form-wrapper
    .input-group input {
        padding: 11px 12px;

        font-size: 12px;
    }

    .register-plans {
        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }

    .register-plan {
        min-height: 100px;

        padding: 13px;
    }

    .register-plan strong {
        font-size: 18px;
    }

    .logo-upload {
        padding: 14px;
    }

    .register-payment-info {
        padding: 12px;
    }

    .register-submit {
        font-size: 11px;

        padding: 13px;
    }

}





/* =====================================
   BOLJI IZBOR PAKETA
===================================== */

.register-plan {
    position: relative;

    min-height: 128px;

    padding: 0;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.14);

    border-radius: 14px;

    background: rgba(255,255,255,0.04);

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* sakrij standardni radio kružić */

.register-plan > input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.plan-content {
    width: 100%;
    height: 100%;

    min-height: 128px;

    padding: 17px;

    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
}


/* KAD JE IZABRAN */

.register-plan:has(input:checked) {
    border-color: #8BBB92;

    background: rgba(139,187,146,0.14);

    box-shadow:
        inset 0 0 0 1px
        rgba(139,187,146,0.18);
}

.register-plan:has(input:checked)
.plan-name {
    color: #b9dfbf;
}


/* CHECK */

.plan-selected-mark {
    position: absolute;

    top: 13px;
    right: 13px;

    width: 25px;
    height: 25px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: rgba(255,255,255,0.08);

    color: transparent;

    font-size: 12px;
    font-weight: 700;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.register-plan:has(input:checked)
.plan-selected-mark {
    background: #8BBB92;

    color: #092328;
}


/* NAZIV */

.register-plan .plan-name {
    margin-bottom: 16px;

    color: rgba(255,255,255,0.56);

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


/* CENA */

.plan-price-row {
    display: flex;

    align-items: flex-end;

    gap: 5px;
}

.plan-current-price {
    color: #ffffff;

    font-size: 24px;

    line-height: 1;

    letter-spacing: -1.2px;

    font-weight: 600;
}

.plan-currency {
    padding-bottom: 2px;

    color: rgba(255,255,255,0.60);

    font-size: 11px;
}


/* GODIŠNJA STARA CENA */

.yearly-prices {
    display: flex;

    align-items: flex-end;

    gap: 10px;

    flex-wrap: wrap;
}

.old-price {
    position: relative;

    margin-bottom: 2px;

    color: rgba(255,255,255,0.48);

    font-size: 11px;
    font-weight: 500;
}

.old-price::after {
    content: "";

    position: absolute;

    left: -2px;
    right: -2px;

    top: 50%;

    height: 2px;

    background: #e15353;

    transform: rotate(-5deg);
}


/* DONJI TEKST */

.register-plan small {
    margin-top: 8px;

    color: rgba(255,255,255,0.48);

    font-size: 9px;
}


/* HOVER SAMO NA MIŠU */

@media (hover: hover) and (pointer: fine) {

    .register-plan:hover {
        transform: translateY(-2px);

        border-color: rgba(139,187,146,0.55);
    }

}


/* MOBILE */

@media (max-width: 760px) {

    .register-plan {
        min-height: 118px;
    }

    .plan-content {
        min-height: 118px;

        padding: 14px;
    }

    .plan-current-price {
        font-size: 21px;
    }

    .yearly-prices {
        gap: 7px;
    }

    .old-price {
        font-size: 9px;
    }

    .plan-selected-mark {
        width: 22px;
        height: 22px;

        top: 11px;
        right: 11px;

        font-size: 10px;
    }

}






/* =====================================
   REGISTER STEP FLOW - FINAL OVERRIDE
===================================== */

.register-form-wrapper {
    height: auto;
    max-height: none;
}

#registerRequestForm {
    width: 100%;
    min-height: 0;
}

/* više nema dugačkog scroll formulara */
.register-scroll {
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;

    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

/* SAKRIJ SVE KORAKE */
.register-step {
    display: none !important;
}

/* PRIKAŽI SAMO AKTIVNI */
.register-step.active {
    display: block !important;
}

/* stari register-section stil nam ovde ne treba */
.register-step {
    margin-bottom: 0;
}

/* progres */
.register-progress {
    margin-bottom: 24px;
}

/* navigacija */
.register-navigation {
    margin-top: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.register-nav-button {
    min-height: 44px;

    padding: 0 18px;

    border-radius: 11px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

.register-nav-button.back {
    border: 1px solid rgba(255,255,255,0.15);

    background: rgba(255,255,255,0.05);

    color: rgba(255,255,255,0.75);
}

.register-nav-button.next {
    margin-left: auto;

    border: none;

    background: #8BBB92;

    color: #092328;
}

#registerSubmitButton {
    display: none;

    margin: 0 0 0 auto;
}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 760px) {

    .register-form-area {
        overflow: hidden;
    }

    .register-form-wrapper {
        height: auto;

        max-height: none;
    }

    .register-scroll {
        overflow: visible !important;

        height: auto !important;
        max-height: none !important;
    }

    .register-step {
        display: none !important;
    }

    .register-step.active {
        display: block !important;
    }

    .register-navigation {
        margin-top: 18px;
    }

    .register-nav-button,
    #registerSubmitButton {
        min-height: 44px;
    }

}




/* =====================================
   REGISTER NAV BUTTONS - POLISH
===================================== */

.register-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
}

.register-nav-button {
    min-height: 46px;

    padding: 0 22px;

    border-radius: 14px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.register-nav-button.next {
    margin-left: auto;

    min-width: 130px;

    border: none;

    background: #8BBB92;

    color: #092328;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.10);
}

.register-nav-button.next:hover {
    transform: translateY(-1px);

    background: #a0caa6;
}

.register-nav-button.back {
    min-width: 110px;

    border:
        1px solid
        rgba(255,255,255,0.18);

    background:
        rgba(255,255,255,0.05);

    color:
        rgba(255,255,255,0.82);
}

.register-nav-button.back:hover {
    background:
        rgba(255,255,255,0.09);
}



.register-payment-info p {
    font-size: 13px !important;
    line-height: 1.65 !important;

    color:
        rgba(255,255,255,0.82) !important;
}

.register-confirm-text {
    margin-top: 18px;

    font-size: 14px !important;
    line-height: 1.6 !important;

    color:
        rgba(255,255,255,0.82) !important;
}


/* =====================================
   REGISTER BACKGROUND BY STEP
===================================== */

.register-panel {
    transition:
        background 0.45s ease;
}


/* KORAK 1 */

.register-panel.register-step-bg-1 {
    background:
        linear-gradient(
            145deg,
            #12544F,
            #2A835F
        );
}


/* KORAK 2 */

.register-panel.register-step-bg-2 {
    background:
        linear-gradient(
            145deg,
            #0f4946,
            #12544F
        );
}


/* KORAK 3 */

.register-panel.register-step-bg-3 {
    background:
        linear-gradient(
            145deg,
            #12544F,
            #236f57
        );
}


/* KORAK 4 */

.register-panel.register-step-bg-4 {
    background:
        linear-gradient(
            145deg,
            #176453,
            #2A835F
        );
}


/* KORAK 5 */

.register-panel.register-step-bg-5 {
    background:
        linear-gradient(
            145deg,
            #2A835F,
            #6fa77c
        );
}


/* =====================================
   REGISTER NAV - FINAL
===================================== */

.register-navigation {
    margin-top: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.register-nav-button {
    height: 46px;

    padding: 0 20px;

    border-radius: 10px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


/* NAZAD */

.register-nav-button.back {
    min-width: 105px;

    border: 1px solid rgba(255,255,255,0.18);

    background: transparent;

    color: rgba(255,255,255,0.78);
}


/* DALJE */

.register-nav-button.next {
    min-width: 120px;

    margin-left: auto;

    border: 1px solid rgba(255,255,255,0.85);

    background: #ffffff;

    color: #092328;

    box-shadow: none;

    transform: none;
}


/* potpuno bez "napumpanog" hovera */

.register-nav-button.next:hover {
    background: #f2f6f3;

    color: #092328;

    transform: none;

    box-shadow: none;
}

.register-nav-button.back:hover {
    background: rgba(255,255,255,0.07);

    color: #ffffff;
}


/* SUBMIT NA POSLEDNJEM KORAKU */

#registerSubmitButton {
    min-width: 160px;

    height: 46px;

    margin-left: auto;

    padding: 0 20px;

    border-radius: 10px;

    background: #ffffff;

    color: #092328;

    font-size: 12px;
    font-weight: 600;

    box-shadow: none;
}


/* MOBILE */

@media (max-width: 760px) {

    .register-navigation {
        gap: 10px;
    }

    .register-nav-button,
    #registerSubmitButton {
        height: 44px;

        border-radius: 9px;

        font-size: 11px;
    }

    .register-nav-button.back {
        min-width: 95px;
    }

    .register-nav-button.next {
        min-width: 110px;
    }

}


/* =====================================
   REGISTER NEXT BUTTON - FINAL
===================================== */

.register-navigation {
    margin-top: 30px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;
}

.register-nav-button.next {
    width: 180px;
    height: 48px;

    margin-left: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 12px;

    background: #ffffff;

    color: #092328;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.register-nav-button.next:hover {
    background: #f4f7f5;

    transform: translateY(-1px);
}

.register-nav-button.next:active {
    transform: translateY(0);
}


/* NAZAD */

.register-nav-button.back {
    width: 120px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,0.22);

    border-radius: 12px;

    background: transparent;

    color: rgba(255,255,255,0.82);

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;

    cursor: pointer;
}


/* POSLEDNJI KORAK */

#registerSubmitButton {
    width: 220px;
    height: 48px;

    margin-left: auto;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 12px;

    background: #ffffff;

    color: #092328;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;

    box-shadow: none;
}


/* MOBILE */

@media (max-width: 760px) {

    .register-navigation {
        margin-top: 22px;
    }

    .register-nav-button.next {
        width: 150px;
        height: 46px;
    }

    .register-nav-button.back {
        width: 105px;
        height: 46px;
    }

    #registerSubmitButton {
        width: 180px;
        height: 46px;
    }

}


/* =====================================
   PREMIUM MOBILE HERO - FINAL
===================================== */

@media screen and (max-width: 760px) {

    html,
    body {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }


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

    .auth-container {
        width: 100% !important;

        height: 100svh !important;
        min-height: 100svh !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        position: relative;

        border-radius: 0 !important;

        overflow: hidden !important;

        background:
            linear-gradient(
                160deg,
                #092328 0%,
                #12544F 50%,
                #2A835F 100%
            ) !important;
    }


    /* =========================
       LOGO
    ========================== */

    .global-logo {
        position: absolute !important;

        top: 28px !important;
        left: 24px !important;

        z-index: 100;

        font-size: 23px !important;
        font-weight: 700;

        letter-spacing: -1.3px;
    }


    /* =========================
       PANELI
    ========================== */

    .auth-panel {
        width: 100% !important;

        flex: 1 1 50% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        height: auto !important;

        position: relative;

        border-radius: 0 !important;

        overflow: hidden;
    }


    .login-panel {
        background:
            linear-gradient(
                145deg,
                rgba(9,35,40,0.99),
                rgba(18,84,79,0.94)
            ) !important;
    }


    .register-panel {
        background:
            linear-gradient(
                145deg,
                rgba(18,84,79,0.96),
                rgba(42,131,95,0.98)
            ) !important;
    }


    /* ukloni stari vertikalni blend */

    .login-panel::after {
        display: none !important;
    }


    /* suptilan premium glow */

    .auth-panel::before {
        width: 320px !important;
        height: 320px !important;

        top: -190px !important;
        right: -130px !important;

        opacity: 0.7;
    }


    /* =========================
       SADRŽAJ PANELA
    ========================== */

    .panel-content {
        width: 100%;
        height: 100%;
    }


    .panel-text {
        position: absolute !important;

        left: 24px !important;
        right: 24px !important;

        top: 50% !important;

        transform:
            translateY(-50%) !important;

        width: auto !important;
        max-width: none !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: center !important;

        gap: 0 !important;

        text-align: left !important;
    }


    /* prvi panel malo niže zbog loga */

    .login-panel .panel-text {
        top: 57% !important;
    }


    /* =========================
       MALI TEKST
    ========================== */

    .panel-text .small-text {
        display: block !important;

        width: auto !important;

        margin: 0 0 12px !important;

        font-size: 12px !important;
        line-height: 1.3;

        font-weight: 600;

        letter-spacing: 0;

        color:
            rgba(180,220,186,0.88) !important;

        text-align: left !important;
    }


    /* =========================
       NASLOV
    ========================== */

    .panel-text h2 {
        display: block !important;

        width: 100% !important;
        max-width: 330px !important;

        margin: 0 0 14px !important;

        font-size: clamp(
            34px,
            9vw,
            42px
        ) !important;

        line-height: 0.98 !important;

        letter-spacing:
            -2.2px !important;

        font-weight: 600;

        text-align: left !important;
    }


    /* =========================
       OPIS
    ========================== */

    .panel-text .description {
        display: block !important;

        width: 100% !important;
        max-width: 310px !important;

        margin: 0 0 24px !important;

        font-size: 14px !important;
        line-height: 1.5 !important;

        color:
            rgba(255,255,255,0.72)
            !important;

        text-align: left !important;
    }


    /* =========================
       DUGMAD
    ========================== */

    .panel-text .main-button {
        width: 100% !important;
        max-width: 330px !important;

        height: 54px !important;

        margin: 0 !important;

        padding: 0 20px !important;

        border-radius: 14px !important;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 14px !important;
        font-weight: 600;

        letter-spacing: -0.15px;

        background:
            #8BBB92 !important;

        color:
            #092328 !important;

        box-shadow:
            0 12px 32px
            rgba(0,0,0,0.13);
    }


    .panel-text .main-button:active {
        transform:
            scale(0.985);
    }


    /* =========================
       LINIJA IZMEĐU PANELA
    ========================== */

    .login-panel {
        border-bottom:
            1px solid
            rgba(255,255,255,0.08);
    }


    /* =========================
       O PLATFORMI
    ========================== */

    .about-indicator {
        position: absolute !important;

        left: 50% !important;
        bottom: 18px !important;

        transform:
            translateX(-50%)
            !important;

        z-index: 80;

        margin: 0 !important;

        font-size: 12px !important;
        font-weight: 600;

        gap: 4px;

        white-space: nowrap;
    }


    .indicator-arrow {
        font-size: 18px !important;
    }


    /* =========================
       LOGIN ACTIVE
    ========================== */

    .auth-container.login-active
    .login-panel {
        flex:
            1 0 100% !important;

        height:
            100svh !important;
    }


    .auth-container.login-active
    .register-panel {
        flex:
            0 0 0 !important;

        height: 0 !important;

        opacity: 0;

        pointer-events: none;
    }


    /* =========================
       REGISTER ACTIVE
    ========================== */

    .auth-container.register-active
    .register-panel {
        flex:
            1 0 100% !important;

        height:
            100svh !important;
    }


    .auth-container.register-active
    .login-panel {
        flex:
            0 0 0 !important;

        height: 0 !important;

        opacity: 0;

        pointer-events: none;
    }

}





/* =====================================
   MOBILE SLIDE PANELS
===================================== */

@media screen and (max-width: 760px) {

    .auth-container {
        display: flex !important;
        flex-direction: column !important;

        height: 100svh !important;
        min-height: 100svh !important;

        overflow: hidden !important;
    }


    .auth-panel {
        width: 100% !important;

        flex: 1 1 50% !important;

        height: 50svh !important;
        min-height: 0 !important;

        transition:
            flex-basis 0.72s cubic-bezier(0.22, 1, 0.36, 1),
            height 0.72s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.35s ease,
            transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }


    /* =========================
       LOGIN OTVOREN
       GORNJI PANEL IDE NADOLE
    ========================== */

    .auth-container.login-active
    .login-panel {

        flex:
            1 0 100% !important;

        height:
            100svh !important;

        transform:
            translateY(0) !important;
    }


    .auth-container.login-active
    .register-panel {

        flex:
            0 0 0 !important;

        height:
            0 !important;

        min-height:
            0 !important;

        opacity:
            0 !important;

        transform:
            translateY(100%) !important;

        pointer-events:
            none !important;
    }


    /* =========================
       REGISTER OTVOREN
       DONJI PANEL IDE NAGORE
    ========================== */

    .auth-container.register-active
    .register-panel {

        flex:
            1 0 100% !important;

        height:
            100svh !important;

        transform:
            translateY(0) !important;
    }


    .auth-container.register-active
    .login-panel {

        flex:
            0 0 0 !important;

        height:
            0 !important;

        min-height:
            0 !important;

        opacity:
            0 !important;

        transform:
            translateY(-100%) !important;

        pointer-events:
            none !important;
    }


    /* =========================
       FORMA ULAZI MALO KASNIJE
    ========================== */

    .form-area {

        transition:
            opacity 0.35s ease 0.22s,
            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
            visibility 0.35s ease !important;
    }


    .auth-container.login-active
    #loginForm {

        opacity: 1 !important;

        visibility: visible !important;

        transform:
            translateY(0) !important;
    }


    .auth-container.register-active
    #registerForm {

        opacity: 1 !important;

        visibility: visible !important;

        transform:
            translateY(0) !important;
    }

}




/* =====================================
   MOBILE LOGO UVEK VIDLJIV
===================================== */

@media screen and (max-width: 760px) {

    .global-logo {
        position: fixed !important;

        top: 22px !important;
        left: 24px !important;

        z-index: 9999 !important;
    }

}




/* =====================================
   DESKTOP PREMIUM PANEL ANIMATION
===================================== */

@media screen and (min-width: 761px) {

   .auth-panel {
    transition:
        flex 1.25s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.55s ease,
        transform 1.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}


    /* početni tekst ne nestaje momentalno */

    .panel-text {
    opacity: 1;
    filter: blur(0);

    transition:
        opacity 0.5s ease,
        filter 0.55s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear !important;
}


    /* forma sačeka da panel počne da se otvara */

    .form-area {
        transition:
            opacity 0.38s ease 0.28s,
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.22s,
            visibility 0s linear 0.22s !important;
    }


    /* LOGIN */

    .auth-container.login-active
    .login-panel {
        flex: 20 !important;
    }

    .auth-container.login-active
    .register-panel {
        flex: 0.001 !important;

        opacity: 0 !important;

        transform:
            translateX(60px) !important;
    }


    /* REGISTER */

    .auth-container.register-active
    .register-panel {
        flex: 20 !important;
    }

    .auth-container.register-active
    .login-panel {
        flex: 0.001 !important;

        opacity: 0 !important;

        transform:
            translateX(-60px) !important;
    }


    /* FORME */

    .auth-container.login-active
    #loginForm,

    .auth-container.register-active
    #registerForm {
        opacity: 1 !important;

        visibility: visible !important;

        transform:
            translateY(0) !important;
    }

}


/* =====================================
   PREMIUM TEXT / FORM REVEAL
===================================== */

@media screen and (min-width: 761px) {

    .panel-text {
        filter: blur(0);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);

        transition:
            opacity 0.32s ease,
            filter 0.42s ease,
            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0.32s ease !important;
    }


    .auth-container.login-active
    .login-panel
    .panel-text,

    .auth-container.register-active
    .register-panel
    .panel-text {
        opacity: 0 !important;

        filter:
            blur(8px) !important;

        transform:
            translate(-50%, -48%)
            scale(0.985) !important;

        visibility:
            hidden !important;
    }


    .form-area {
        opacity: 0;

        filter:
            blur(10px);

        transform:
            translateY(12px)
            scale(0.985);

        transition:
            opacity 0.45s ease 0.28s,
            filter 0.5s ease 0.24s,
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.22s,
            visibility 0s linear 0.22s !important;
    }


    .auth-container.login-active
    #loginForm,

    .auth-container.register-active
    #registerForm {
        opacity: 1 !important;

        filter:
            blur(0) !important;

        transform:
            translateY(0)
            scale(1) !important;

        visibility:
            visible !important;
    }

}


/* =====================================
   DESKTOP REGISTER INPUT POLISH - LARGE
===================================== */

@media screen and (min-width: 761px) {

    .register-form-wrapper {
        max-width: 940px;
    }

    .register-form-wrapper .input-group label {
        font-size: 13px;

        margin-bottom: 9px;

        color:
            rgba(255,255,255,0.82);
    }

    .register-form-wrapper .input-group input {
        min-height: 60px;

        padding:
            17px 18px;

        font-size: 15px;

        border-radius: 13px;

        border:
            1px solid
            rgba(255,255,255,0.20);

        background:
            rgba(255,255,255,0.10);
    }

    .register-form-wrapper
    .input-group input::placeholder {
        color:
            rgba(255,255,255,0.42);
    }

    .register-grid {
        gap: 18px;
    }

    .register-section-title {
        font-size: 12px;

        margin-bottom: 18px;

        color:
            rgba(255,255,255,0.82);
    }

}


@media screen and (min-width: 761px) {

    .register-description {
        max-width: 720px;

        margin-bottom: 24px;

        font-size: 15px !important;
        line-height: 1.55 !important;

        color:
            rgba(255,255,255,0.76) !important;
    }

}


@media screen and (min-width: 761px) {

    .back-button {
        top: 84px;
        left: 38px;

        font-size: 16px !important;
        font-weight: 700;

        color:
            rgba(255,255,255,0.68) !important;

        padding: 6px 0;

        opacity: 1;

        transition:
            color 0.2s ease,
            opacity 0.2s ease,
            transform 0.2s ease;
    }

    .back-button:hover {
        color: #ffffff !important;

        transform:
            translateX(-2px);
    }

}




/* =====================================
   MOBILE PREMIUM BLUR + SLOWER REVEAL
===================================== */

@media screen and (max-width: 760px) {

    /* POČETNI TEKST */

  /* =====================================
   MOBILE TEXT BLUR - OBA SMERA
===================================== */

.panel-text {
    opacity: 1 !important;

    filter:
        blur(0) !important;

    visibility:
        visible !important;

    transition:
        opacity 0.60s ease,
        filter 0.70s ease,
        transform 0.80s cubic-bezier(0.22, 1, 0.36, 1)
        !important;
}


/* KAD SE OTVARA LOGIN / REGISTER */

.auth-container.login-active
.login-panel
.panel-text,

.auth-container.register-active
.register-panel
.panel-text {

    opacity:
        0 !important;

    filter:
        blur(12px) !important;

    transform:
        translateY(-50%)
        scale(0.975)
        translateY(-10px)
        !important;

    visibility:
        visible !important;

    pointer-events:
        none !important;
}


    /* KAD OTVORIMO LOGIN ILI REGISTER */

    .auth-container.login-active
    .login-panel
    .panel-text,

    .auth-container.register-active
    .register-panel
    .panel-text {

        opacity: 0 !important;

        filter:
            blur(10px) !important;

        transform:
            translateY(-50%)
            scale(0.985)
            translateY(-8px) !important;

        visibility:
            hidden !important;
    }


    /* FORME SU U STARTU BLAGO ZAMUĆENE */

    .form-area {
        opacity: 0;

        filter:
            blur(10px);

        transform:
            translateY(16px)
            scale(0.985);

        transition:
            opacity 0.5s ease 0.28s,
            filter 0.6s ease 0.24s,
            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.22s,
            visibility 0s linear 0.22s !important;
    }


    /* LOGIN FORMA */

    .auth-container.login-active
    #loginForm {

        opacity: 1 !important;

        filter:
            blur(0) !important;

        transform:
            translateY(0)
            scale(1) !important;

        visibility:
            visible !important;
    }


    /* REGISTER FORMA */

    .auth-container.register-active
    #registerForm {

        opacity: 1 !important;

        filter:
            blur(0) !important;

        transform:
            translateY(0)
            scale(1) !important;

        visibility:
            visible !important;
    }


    /* SPORIJE ŠIRENJE PANELA */

    .auth-panel {
        transition:
            flex-basis 0.95s cubic-bezier(0.22, 1, 0.36, 1),
            height 0.95s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.45s ease,
            transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

}




@media screen and (max-width: 760px) {

    .input-group input,
    .input-group select,
    .input-group textarea,

    .register-form-wrapper input,
    .register-form-wrapper select,
    .register-form-wrapper textarea {
        font-size: 16px !important;
    }

}



/* =====================================
   PDV IZBOR - REGISTRACIJA
===================================== */

.vat-choice {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.vat-option {
    flex: 1;
    position: relative;
    cursor: pointer;
}

.vat-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vat-option span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.10);

    color: rgba(255, 255, 255, 0.82);

    font-size: 15px;
    font-weight: 500;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.vat-option:hover span {
    background: rgba(255, 255, 255, 0.14);
}

.vat-option input:checked + span {
    background: #8BBB92;
    border-color: #8BBB92;
    color: #092328;
}

.vat-option input:focus-visible + span {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}




/* =====================================
   KORAK 3 - PDV / LOGO
===================================== */

.register-step[data-step="3"] .logo-upload {
    margin-top: 20px;
}

.register-step[data-step="3"] .selected-logo-name {
    margin-top: 8px;
}






/* =====================================
   REGISTRACIJA - PREGLED PODATAKA
===================================== */

.register-review-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.35fr);
    gap: 44px;
    align-items: start;
}

.register-review-card {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}

.review-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;

    padding: 12px 16px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.review-row:last-child {
    border-bottom: none;
}

.review-row span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
}

.review-row strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;

    text-align: right;
    word-break: break-word;
}


/* MOBILE */

@media screen and (max-width: 760px) {

    .register-review-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .register-review-card {
        width: 100%;
    }

    .review-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 11px 14px;
    }

    .review-row strong {
        text-align: left;
    }

}


/* =====================================
   MOBILE - KORAK 5 PREGLED PODATAKA
===================================== */

@media screen and (max-width: 760px) {

    .register-step[data-step="5"] {
        height: 100%;
        min-height: 0;
    }

    .register-step[data-step="5"] .register-review-layout {
        display: flex;
        flex-direction: column;
        gap: 14px;

        height: 100%;
        min-height: 0;
    }

    .register-step[data-step="5"] .register-review-card {
        max-height: 42svh;
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .register-step[data-step="5"] .review-row {
        padding: 9px 12px;
        gap: 2px;
    }

    .register-step[data-step="5"] .review-row span {
        font-size: 11px;
    }

    .register-step[data-step="5"] .review-row strong {
        font-size: 12px;
    }

}


/* =====================================
   REMEMBER DEVICE
===================================== */


.remember-device {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin: 14px 0 8px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 500;

    cursor: pointer;

    user-select: none;
}

.remember-device span {
    color: #ffffff;
    opacity: 0.92;

    line-height: 1.3;
}


/* sakrij običan checkbox */

.remember-device input {
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    width: 42px;
    height: 24px;

    margin: 0;

    flex-shrink: 0;

    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;

    background: rgba(255,255,255,0.14);

    cursor: pointer;

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


/* kružić u switch-u */

.remember-device input::before {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 6px rgba(0,0,0,0.18);

    transition:
        transform 0.22s ease;
}


/* uključeno */

.remember-device input:checked {
    background: #2A835F;

    border-color: rgba(255,255,255,0.28);

    box-shadow:
        0 0 0 3px rgba(42,131,95,0.18);
}


/* pomeri kružić */

.remember-device input:checked::before {
    transform: translateX(18px);
}


/* hover */

.remember-device:hover span {
    opacity: 1;
}

.remember-device:hover input {
    border-color: rgba(255,255,255,0.35);
}

@media (max-width: 760px) {

    input,
    textarea,
    select,
    button {
        font-size: 16px;
    }

    input,
    textarea,
    select {
        -webkit-text-size-adjust: 100%;
    }

}

/* =====================================
   PRODUCT DEMO
===================================== */

.product-demo {
    margin-top: 76px;
    width: 100%;
}

.product-demo-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 34px;
    text-align: center;
}

.product-demo-eyebrow {
    display: block;
    max-width: 820px;
    color: #092328;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -1.8px;
}

.product-demo-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 236px;
    padding: 4px;
    border: 1px solid #dfe5e3;
    border-radius: 999px;
    background: #f5f8f6;
    isolation: isolate;
}

.product-demo-switch-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: 999px;
    background: #092328;
    box-shadow: 0 4px 14px rgba(9, 35, 40, 0.14);
    transform: translateX(0);
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.25s ease;
    z-index: -1;
}

.product-demo-switch.is-mobile .product-demo-switch-indicator {
    transform: translateX(100%);
}

.product-demo-tab {
    position: relative;
    z-index: 2;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #617073;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        color 0.25s ease,
        transform 0.2s ease;
}

.product-demo-tab:hover {
    color: #092328;
}

.product-demo-tab:active {
    transform: scale(0.98);
}

.product-demo-tab.is-active {
    color: #ffffff;
}

.product-demo-stage {
    position: relative;
    width: 100%;
    min-height: 700px;
    display: grid;
    place-items: center;
    overflow: visible;
    border: none;
    border-radius: 0;
    background: #ffffff;
}

.product-demo-stage::before {
    content: none;
}

.product-demo-view {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 54px 48px 92px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(18px) scale(0.965);
    filter: blur(7px);
    transition:
        opacity 0.38s ease,
        transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.42s ease,
        visibility 0s linear 0.52s;
}

.product-demo-view.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition:
        opacity 0.42s ease 0.08s,
        transform 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.04s,
        filter 0.44s ease 0.04s,
        visibility 0s linear 0s;
}

/* LAPTOP */

.demo-laptop {
    width: min(930px, 90%);
    transform: translateY(-2px);
}

.demo-laptop-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(9, 35, 40, 0.20);
    border-radius: 19px 19px 10px 10px;
    background: #111718;
    box-shadow:
        0 34px 70px rgba(9, 35, 40, 0.18),
        0 7px 20px rgba(9, 35, 40, 0.10);
}

.demo-laptop-camera {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 4px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    z-index: 3;
}

.demo-video {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    background: #edf2ef;
}

.demo-laptop-screen .demo-video {
    border-radius: 11px 11px 5px 5px;
}

.demo-laptop-base {
    position: relative;
    width: 108%;
    height: 17px;
    margin-left: -4%;
    border-radius: 2px 2px 18px 18px;
    background:
        linear-gradient(
            180deg,
            #dfe4e2 0%,
            #bcc5c1 48%,
            #e8ecea 100%
        );
    box-shadow: 0 13px 18px rgba(9, 35, 40, 0.12);
}

.demo-laptop-base::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 96%;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 0 0 100% 100%;
    background: #aeb8b4;
}

.demo-laptop-base span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 88px;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 0 0 8px 8px;
    background: #aeb8b4;
}

/* PHONE */

.demo-phone {
     width: min(320px, 72vw);
    transform: translateY(-2px);
}

.demo-phone-frame {
    position: relative;
    aspect-ratio: 9 / 19.5;
    padding: 8px;
    overflow: hidden;
    border: 1px solid rgba(9, 35, 40, 0.23);
    border-radius: 47px;
    background: #101617;
    box-shadow:
        0 34px 72px rgba(9, 35, 40, 0.22),
        0 8px 22px rgba(9, 35, 40, 0.10);
}

.demo-phone-frame::before,
.demo-phone-frame::after {
    content: "";
    position: absolute;
    right: -3px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #20292a;
}

.demo-phone-frame::before {
    top: 26%;
    height: 64px;
}

.demo-phone-frame::after {
    top: 39%;
    height: 42px;
}

.demo-phone-island {
    position: absolute;
    top: 17px;
    left: 50%;
    width: 74px;
    height: 22px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #0a0d0e;
    z-index: 4;
    box-shadow: 0 1px 1px rgba(255,255,255,0.06) inset;
}

.demo-phone-frame .demo-video {
    border-radius: 39px;
}

.product-demo-caption {
    margin: 24px auto 0;
    color: #718083;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

/* Demo ide pre kartica, zato smanjujemo razmak kartica */
.product-demo + .about-grid {
    margin-top: 84px;
}

@media (max-width: 900px) {
    .product-demo-stage { min-height: 570px; }
    .product-demo-view { padding: 42px 28px 70px; }
    .demo-laptop { width: min(730px, 90%); }
}

@media (max-width: 760px) {
    .product-demo {
        margin-top: 52px;
    }

    .product-demo-header {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
        text-align: center;
    }

    .product-demo-eyebrow {
        max-width: 330px;
        font-size: 27px;
        line-height: 1.06;
        letter-spacing: -1.3px;
    }

    .product-demo-switch {
        width: min(100%, 320px);
        max-width: 320px;
        margin-inline: auto;
        align-self: center;
    }

    .product-demo-tab {
        height: 40px;
        font-size: 12px;
    }

    .product-demo-stage {
        min-height: 440px;
        border-radius: 0;
    }

    .product-demo-view {
        padding: 30px 14px 60px;
    }

    .demo-laptop {
        width: 90%;
    }

    .demo-laptop-screen {
        padding: 6px;
        border-radius: 12px 12px 7px 7px;
    }

    .demo-laptop-screen .demo-video {
        border-radius: 7px 7px 3px 3px;
    }

    .demo-laptop-base {
        height: 10px;
        border-radius: 1px 1px 12px 12px;
    }

    .demo-laptop-base span {
        width: 54px;
        height: 3px;
    }

    .demo-phone {
        width: min(190px, 54vw);
    }

    .demo-phone-frame {
        padding: 6px;
        border-radius: 34px;
    }

    .demo-phone-frame .demo-video {
        border-radius: 28px;
    }

    .demo-phone-island {
        top: 13px;
        width: 54px;
        height: 17px;
    }

    .product-demo-caption {
        margin-top: 18px;
        font-size: 12px;
    }

    .product-demo + .about-grid {
        margin-top: 58px;
    }
}

@media (max-width: 420px) {
    .product-demo-stage {
        min-height: 390px;
    }

    .product-demo-view {
        padding: 24px 12px;
    }

    .demo-phone {
        width: 174px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-demo-view,
    .product-demo-switch-indicator,
    .product-demo-tab {
        transition: none !important;
    }
}



.auth-container {
    width: calc(100% - 16px);
    height: calc(100svh - 16px);

    margin: 8px auto;

    display: flex;
    gap: 0;

    position: relative;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            115deg,
            #092328 0%,
            #0e3c3c 46%,
            #176453 54%,
            #2A835F 100%
        );

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.28);
}

/* =====================================
   FAQ
===================================== */
.faq-section { margin-top:110px; padding-top:56px; border-top:1px solid #dfe5e3; display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:88px; align-items:start; }
.faq-heading { position:sticky; top:110px; max-width:470px; }
.faq-eyebrow { display:block; margin-bottom:18px; color:#2A835F; font-size:12px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
.faq-heading h3 { margin:0; color:#092328; font-size:clamp(38px,4vw,56px); line-height:.98; font-weight:600; letter-spacing:-2.8px; }
.faq-heading p { max-width:430px; margin-top:24px; color:#59676a; font-size:16px; line-height:1.65; }
.faq-list { border-top:1px solid #dfe5e3; }
.faq-item { border-bottom:1px solid #dfe5e3; }
.faq-item summary { position:relative; min-height:86px; padding:26px 58px 26px 0; display:flex; align-items:center; list-style:none; color:#092328; font-size:18px; line-height:1.35; font-weight:600; letter-spacing:-.45px; cursor:pointer; transition:color .2s ease,padding-left .25s ease; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::marker { display:none; }
.faq-item summary:hover { color:#2A835F; padding-left:4px; }
.faq-icon { position:absolute; top:50%; right:2px; width:34px; height:34px; transform:translateY(-50%); border:1px solid #d4ddda; border-radius:50%; background:#f7faf8; transition:transform .32s cubic-bezier(.22,1,.36,1),background .2s ease,border-color .2s ease; }
.faq-icon::before,.faq-icon::after { content:""; position:absolute; top:50%; left:50%; width:12px; height:1.5px; border-radius:999px; background:#12544F; transform:translate(-50%,-50%); transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .25s ease; }
.faq-icon::after { transform:translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-icon { transform:translateY(-50%) rotate(180deg); background:#092328; border-color:#092328; }
.faq-item[open] .faq-icon::before,.faq-item[open] .faq-icon::after { background:#fff; }
.faq-item[open] .faq-icon::after { opacity:0; }
.faq-answer { overflow:hidden; }
.faq-answer p { max-width:650px; padding:0 58px 30px 0; color:#617073; font-size:15px; line-height:1.75; }
.faq-item[open] summary { color:#12544F; }
@media (max-width:900px) { .faq-section { grid-template-columns:1fr; gap:44px; } .faq-heading { position:static; max-width:680px; } }
@media (max-width:760px) { .faq-section { margin-top:72px; padding-top:38px; gap:34px; } .faq-eyebrow { margin-bottom:14px; font-size:10px; } .faq-heading h3 { font-size:36px; line-height:1; letter-spacing:-2px; } .faq-heading p { margin-top:18px; font-size:14px; line-height:1.6; } .faq-item summary { min-height:74px; padding:22px 50px 22px 0; font-size:16px; line-height:1.4; } .faq-item summary:hover { padding-left:0; } .faq-icon { right:0; width:30px; height:30px; } .faq-icon::before,.faq-icon::after { width:10px; } .faq-answer p { padding:0 42px 24px 0; font-size:14px; line-height:1.7; } }
@media (prefers-reduced-motion:reduce) { .faq-item summary,.faq-icon,.faq-icon::before,.faq-icon::after { transition:none !important; } }

/* =====================================
   SITE FOOTER
===================================== */

.site-footer {
    width: 100%;
    padding: 64px 24px 28px;
    background: #092328;
    color: #ffffff;
}

.site-footer-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.site-footer-brand {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 42px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.site-footer-logo {
    display: inline-flex;
    align-items: baseline;
    text-decoration: none;
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.site-footer-logo span {
    color: #ffffff;
}

.site-footer-logo strong {
    color: #8BBB92;
    font-weight: 700;
}

.site-footer-brand p {
    max-width: 420px;
    color: rgba(255,255,255,0.58);
    font-size: 14px;
    line-height: 1.6;
    text-align: right;
}

.site-footer-links {
    padding: 34px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
}

.site-footer-links a,
.site-footer-bottom a {
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    font-size: 13px;
    transition: color .2s ease;
}

.site-footer-links a:hover,
.site-footer-bottom a:hover {
    color: #8BBB92;
}

.site-footer-bottom {
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: rgba(255,255,255,0.40);
    font-size: 12px;
}

@media (max-width: 760px) {
    .site-footer {
        padding: 48px 24px 24px;
    }

    .site-footer-brand {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        padding-bottom: 30px;
    }

    .site-footer-brand p {
        max-width: 320px;
        text-align: left;
        font-size: 13px;
    }

    .site-footer-links {
        padding: 28px 0;
        flex-direction: column;
        gap: 16px;
    }

    .site-footer-links a {
        font-size: 14px;
    }

    .site-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}


/* =====================================
   TRIAL PLAN
===================================== */
.register-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.register-plan-trial {
    border-color: rgba(139,187,146,0.42);
    background: rgba(139,187,146,0.08);
}

.register-plan-trial .plan-name {
    color: #b9dfbf;
}

.register-plan-trial .plan-current-price {
    font-size: 22px;
}

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

    .register-plan-trial {
        grid-column: 1 / -1;
        min-height: 92px;
    }

    .register-plan-trial .plan-content {
        min-height: 92px;
    }
}


/* =====================================
   DOKUMENTI NA POČETNOJ
===================================== */

.document-links-section {
    margin-top: 96px;
    padding-top: 48px;
    border-top: 1px solid #dfe5e3;
}

.documents-heading {
    max-width: 760px;
}

.documents-eyebrow {
    display: block;
    margin-bottom: 16px;
    color: #2A835F;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.document-links-section .documents-heading h2 {
    max-width: 760px;
    margin: 0;
    color: #092328;
    font-size: clamp(38px, 4.6vw, 60px);
    line-height: 1;
    letter-spacing: -3px;
    font-weight: 600;
}

.documents-heading > p {
    max-width: 680px;
    margin-top: 22px;
    color: #59676a;
    font-size: 16px;
    line-height: 1.65;
}

/* 4 kartice u jednoj liniji na računaru */
.document-links-grid {
    margin-top: 38px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.document-link-card {
    min-height: 260px;
    padding: 26px 24px 22px;
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    border: 1px solid #dfe5e3;
    border-radius: 20px;

    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);

    color: #092328;
    text-decoration: none;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

/* diskretan premium glow, bez generičnih ikonica/brojeva */
.document-link-card::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    top: -85px;
    right: -75px;

    border-radius: 50%;
    background: rgba(139, 187, 146, 0.14);
    filter: blur(2px);

    transition:
        transform 0.28s ease,
        opacity 0.28s ease;
}

.document-link-card::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(42, 131, 95, 0.75) 35%,
        rgba(139, 187, 146, 0.85) 65%,
        transparent 100%
    );

    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s ease;
}

.document-link-card:hover {
    transform: translateY(-4px);
    border-color: #c6d8cd;
    background: #ffffff;
    box-shadow: 0 20px 44px rgba(9, 35, 40, 0.075);
}

.document-link-card:hover::before {
    transform: scale(1.15);
    opacity: 0.9;
}

.document-link-card:hover::after {
    transform: scaleX(1);
}

.document-link-card > div {
    position: relative;
    z-index: 1;
}

.document-link-card h3 {
    max-width: 220px;
    margin: 0 0 14px;

    color: #092328;
    font-size: 23px;
    line-height: 1.08;
    letter-spacing: -1.05px;
    font-weight: 600;
}

.document-link-card p {
    max-width: 240px;
    margin: 0;

    color: #667477;
    font-size: 13px;
    line-height: 1.65;
}

.document-card-link {
    margin-top: auto;
    padding-top: 24px;

    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #2A835F;
    font-size: 12px;
    font-weight: 600;
}

.document-card-link span {
    display: inline-block;
    font-size: 15px;
    transition: transform 0.2s ease;
}

.document-link-card:hover .document-card-link span {
    transform: translateX(4px);
}

/* Tablet: 2 x 2 */
@media (max-width: 1050px) {
    .document-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-link-card h3,
    .document-link-card p {
        max-width: none;
    }
}

/* Telefon: 1 kolona */
@media (max-width: 760px) {
    .document-links-section {
        margin-top: 60px;
        padding-top: 30px;
    }

    .document-links-section .documents-heading h2 {
        font-size: 36px;
        letter-spacing: -2px;
    }

    .documents-heading > p {
        margin-top: 18px;
        font-size: 14px;
    }

    .document-links-grid {
        margin-top: 30px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .document-link-card {
        min-height: 190px;
        padding: 23px 22px 20px;
        border-radius: 18px;
    }

    .document-link-card h3 {
        font-size: 22px;
    }

    .document-link-card p {
        font-size: 13px;
    }
}


/* =====================================
   SEO STRANICE DOKUMENATA
===================================== */

body.seo-document-page {
    min-height: 100vh;
    background: #ffffff;
    color: #092328;
}

.seo-page-header {
    width: 100%;
    border-bottom: 1px solid #e5ebe8;
    background: rgba(255,255,255,0.96);
}

.seo-page-header-inner {
    width: min(1180px, calc(100% - 48px));
    min-height: 82px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.seo-page-logo {
    display: inline-flex;
    align-items: baseline;

    color: #092328;
    text-decoration: none;

    font-size: 23px;
    font-weight: 700;
    letter-spacing: -1.3px;
}

.seo-page-logo strong {
    color: #2A835F;
}

.seo-page-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.seo-page-nav a {
    color: #536366;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.seo-page-nav a:hover {
    color: #2A835F;
}

.seo-page-nav .seo-nav-cta {
    padding: 11px 16px;
    border-radius: 11px;
    background: #092328;
    color: #ffffff;
}

.seo-page-nav .seo-nav-cta:hover {
    color: #ffffff;
    background: #12544F;
}

.seo-page-main {
    width: 100%;
}

.seo-hero {
    padding: 105px 24px 90px;
    background:
        radial-gradient(circle at 88% 10%, rgba(139,187,146,0.20), transparent 34%),
        linear-gradient(180deg, #f8fbf9 0%, #ffffff 100%);
}

.seo-hero-inner,
.seo-content-inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.seo-breadcrumbs {
    margin-bottom: 46px;
    color: #748083;
    font-size: 12px;
}

.seo-breadcrumbs a {
    color: #2A835F;
    text-decoration: none;
}

.seo-kicker {
    display: block;
    margin-bottom: 20px;

    color: #2A835F;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

body.seo-document-page .seo-hero h1 {
    max-width: 900px;
    margin: 0;

    color: #092328;
    font-size: clamp(48px, 7vw, 82px);
    line-height: 0.98;
    letter-spacing: -4.2px;
    font-weight: 600;
}

.seo-hero-lead {
    max-width: 760px;
    margin-top: 30px;

    color: #435458;
    font-size: 19px;
    line-height: 1.7;
}

.seo-hero-actions {
    margin-top: 34px;

    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.seo-primary-button,
.seo-secondary-button {
    min-height: 48px;
    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.seo-primary-button {
    background: #2A835F;
    color: #ffffff;
}

.seo-primary-button:hover {
    background: #12544F;
}

.seo-secondary-button {
    border: 1px solid #d8e2dc;
    background: #ffffff;
    color: #092328;
}

.seo-content {
    padding: 84px 24px 110px;
}

.seo-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.7fr);
    gap: 78px;
    align-items: start;
}

.seo-article h2 {
    margin: 70px 0 18px;
    color: #092328;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.04;
    letter-spacing: -2.2px;
}

.seo-article h2:first-child {
    margin-top: 0;
}

.seo-article h3 {
    margin: 32px 0 12px;
    color: #092328;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

.seo-article p {
    margin: 0 0 18px;
    color: #516165;
    font-size: 16px;
    line-height: 1.8;
}

.seo-article ul,
.seo-article ol {
    margin: 22px 0 28px 22px;
    color: #516165;
}

.seo-article li {
    margin-bottom: 10px;
    padding-left: 5px;
    font-size: 15px;
    line-height: 1.65;
}

.seo-note {
    margin: 30px 0;
    padding: 22px 24px;

    border: 1px solid #dbe6df;
    border-radius: 16px;

    background: #f7faf8;
    color: #45575a;

    font-size: 14px;
    line-height: 1.7;
}

.seo-side-card {
    position: sticky;
    top: 28px;

    padding: 26px;

    border: 1px solid #dfe5e3;
    border-radius: 20px;

    background: #f8fbf9;
}

.seo-side-card span {
    display: block;
    margin-bottom: 12px;

    color: #2A835F;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.seo-side-card h2 {
    margin: 0 0 14px;

    color: #092328;
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: -1.2px;
}

.seo-side-card p {
    margin: 0 0 20px;

    color: #59676a;
    font-size: 13px;
    line-height: 1.65;
}

.seo-side-card a {
    width: 100%;
}

.seo-related {
    margin-top: 85px;
    padding-top: 45px;
    border-top: 1px solid #dfe5e3;
}

.seo-related-header {
    max-width: 650px;
}

.seo-related-header span {
    display: block;
    margin-bottom: 12px;

    color: #2A835F;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.seo-related-header h2 {
    margin: 0;

    color: #092328;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -1.8px;
}

.seo-related-grid {
    margin-top: 28px;

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

.seo-related-card {
    min-height: 170px;
    padding: 22px;

    display: flex;
    flex-direction: column;

    border: 1px solid #dfe5e3;
    border-radius: 16px;

    color: #092328;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.seo-related-card:hover {
    transform: translateY(-2px);
    border-color: #b8cec0;
}

.seo-related-card strong {
    margin-bottom: 10px;
    font-size: 18px;
}

.seo-related-card p {
    margin: 0;
    color: #647174;
    font-size: 13px;
    line-height: 1.55;
}

.seo-related-card span {
    margin-top: auto;
    padding-top: 20px;
    color: #2A835F;
    font-size: 12px;
    font-weight: 600;
}

.seo-faq {
    margin-top: 80px;
}

.seo-faq > h2 {
    margin-bottom: 26px;
}

.seo-faq details {
    border-top: 1px solid #dfe5e3;
}

.seo-faq details:last-child {
    border-bottom: 1px solid #dfe5e3;
}

.seo-faq summary {
    padding: 22px 0;
    cursor: pointer;

    color: #092328;
    font-size: 16px;
    font-weight: 600;
}

.seo-faq details p {
    max-width: 760px;
    padding-bottom: 22px;
}

.seo-page-footer {
    padding: 42px 24px;
    border-top: 1px solid #e5ebe8;
    background: #f8fbf9;
}

.seo-page-footer-inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.seo-page-footer p {
    color: #6a777a;
    font-size: 12px;
}

.seo-page-footer nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.seo-page-footer a {
    color: #536366;
    text-decoration: none;
    font-size: 12px;
}

@media (max-width: 760px) {
    .seo-page-header-inner {
        width: calc(100% - 36px);
        min-height: 70px;
    }

    .seo-page-logo {
        font-size: 20px;
    }

    .seo-page-nav a:not(.seo-nav-cta) {
        display: none;
    }

    .seo-page-nav .seo-nav-cta {
        padding: 10px 13px;
        font-size: 11px;
    }

    .seo-hero {
        padding: 68px 20px 62px;
    }

    .seo-breadcrumbs {
        margin-bottom: 32px;
    }

    body.seo-document-page .seo-hero h1 {
        font-size: 46px;
        line-height: 0.98;
        letter-spacing: -2.8px;
    }

    .seo-hero-lead {
        margin-top: 24px;
        font-size: 16px;
        line-height: 1.6;
    }

    .seo-content {
        padding: 60px 20px 80px;
    }

    .seo-content-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .seo-side-card {
        position: static;
    }

    .seo-article h2 {
        margin-top: 52px;
        font-size: 32px;
        letter-spacing: -1.6px;
    }

    .seo-article p {
        font-size: 15px;
        line-height: 1.7;
    }

    .seo-related {
        margin-top: 60px;
    }

    .seo-related-grid {
        grid-template-columns: 1fr;
    }

    .seo-related-card {
        min-height: 150px;
    }

    .seo-page-footer-inner {
        flex-direction: column;
    }
}



/* =====================================
   SCREENSHOT / PREVIEW BLOKOVI
===================================== */

.seo-preview-section {
    padding: 0 24px 26px;
    background: #ffffff;
}

.seo-preview-inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.seo-preview-copy {
    max-width: 760px;
    padding-top: 74px;
}

.seo-preview-eyebrow {
    display: block;
    margin-bottom: 14px;

    color: #2A835F;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.seo-preview-copy h2 {
    margin: 0;

    color: #092328;
    font-size: clamp(34px, 4.5vw, 52px);
    line-height: 1.02;
    letter-spacing: -2.5px;
    font-weight: 600;
}

.seo-preview-copy p {
    max-width: 650px;
    margin-top: 18px;

    color: #5f6d70;
    font-size: 15px;
    line-height: 1.7;
}

.seo-preview-layout {
    margin-top: 36px;

    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.65fr);
    gap: 28px;
    align-items: stretch;
}

.seo-preview-frame {
    min-width: 0;

    overflow: hidden;

    border: 1px solid #dfe5e3;
    border-radius: 22px;

    background: #f6f9f7;

    box-shadow:
        0 22px 55px rgba(9, 35, 40, 0.08);
}

.seo-preview-toolbar {
    height: 52px;
    padding: 0 18px;

    display: flex;
    align-items: center;
    gap: 7px;

    border-bottom: 1px solid #e3e9e6;
    background: #ffffff;
}

.seo-preview-toolbar > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #d8dfdc;
}

.seo-preview-address {
    min-width: 0;
    margin-left: 9px;

    color: #83908d;
    font-size: 10px;
    font-weight: 500;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seo-preview-canvas {
    min-height: 520px;
    padding: 26px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    position: relative;

    background:
        radial-gradient(circle at 50% 0%, rgba(139,187,146,0.10), transparent 45%),
        #f5f8f6;
}

.seo-preview-canvas img {
    display: block;

    width: 100%;
    max-width: 690px;
    height: auto;

    border-radius: 6px;

    background: #ffffff;

    box-shadow:
        0 14px 36px rgba(9,35,40,0.12);
}

/* lep placeholder dok korisnik ne ubaci screenshot */
.seo-preview-frame.is-missing .seo-preview-canvas::before {
    content: attr(data-placeholder);
    min-height: 420px;
    width: 100%;

    display: grid;
    place-items: center;

    border: 1px dashed #cddbd2;
    border-radius: 14px;

    background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,252,251,0.92));

    color: #8a9793;
    font-size: 13px;
    font-weight: 600;
}

.seo-preview-benefits {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
}

.seo-preview-benefit {
    padding: 24px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border: 1px solid #dfe5e3;
    border-radius: 18px;

    background: #fbfdfc;
}

.seo-preview-benefit strong {
    margin-bottom: 9px;

    color: #092328;
    font-size: 16px;
    letter-spacing: -0.4px;
}

.seo-preview-benefit span {
    color: #697679;
    font-size: 12px;
    line-height: 1.6;
}

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

    .seo-preview-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
    }
}

@media (max-width: 760px) {
    .seo-preview-section {
        padding: 0 20px 10px;
    }

    .seo-preview-copy {
        padding-top: 54px;
    }

    .seo-preview-copy h2 {
        font-size: 32px;
        letter-spacing: -1.6px;
    }

    .seo-preview-copy p {
        font-size: 14px;
    }

    .seo-preview-layout {
        margin-top: 26px;
        gap: 14px;
    }

    .seo-preview-frame {
        border-radius: 18px;
    }

    .seo-preview-toolbar {
        height: 44px;
        padding: 0 14px;
    }

    .seo-preview-canvas {
        min-height: 300px;
        padding: 14px;
    }

    .seo-preview-frame.is-missing .seo-preview-canvas::before {
        min-height: 280px;
    }

    .seo-preview-benefits {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .seo-preview-benefit {
        padding: 20px;
    }
}




/* =====================================
   SEO FAKTURA — IPS QR BLOK
===================================== */

.seo-qr-feature {
    padding: 28px 24px 0;
    background: #ffffff;
}

.seo-qr-feature-inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 34px 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 56px;

    border-top: 1px solid #e3e9e6;
    border-bottom: 1px solid #e3e9e6;
}

.seo-qr-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: #2A835F;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.seo-qr-feature-copy h2 {
    max-width: 720px;
    margin: 0;
    color: #092328;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.08;
    letter-spacing: -1.7px;
    font-weight: 600;
}

.seo-qr-feature-copy > p {
    max-width: 760px;
    margin: 14px 0 0;
    color: #5b696c;
    font-size: 15px;
    line-height: 1.7;
}

.seo-qr-feature-meta {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.seo-qr-feature-meta span {
    position: relative;
    padding-left: 13px;
    color: #405156;
    font-size: 12px;
    font-weight: 600;
}

.seo-qr-feature-meta span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8BBB92;
    transform: translateY(-50%);
}

.seo-qr-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e2e8e5;
    border-radius: 16px;
    background: #ffffff;
}

.seo-qr-mini .seo-qr-code {
    width: 104px;
    height: 104px;
    padding: 4px;
    background: #ffffff;
}

.seo-qr-mini .seo-qr-code svg {
    display: block;
    width: 100%;
    height: 100%;
    shape-rendering: crispEdges;
}

.seo-qr-mini > span {
    color: #2A835F;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

@media (max-width: 760px) {
    .seo-qr-feature {
        padding: 18px 20px 0;
    }

    .seo-qr-feature-inner {
        padding: 28px 0;
        grid-template-columns: 1fr auto;
        gap: 22px;
        align-items: start;
    }

    .seo-qr-feature-copy h2 {
        font-size: 27px;
        letter-spacing: -1.3px;
    }

    .seo-qr-feature-copy > p {
        font-size: 14px;
        line-height: 1.65;
    }

    .seo-qr-feature-meta {
        margin-top: 16px;
        gap: 9px 14px;
    }

    .seo-qr-feature-meta span {
        font-size: 10px;
    }

    .seo-qr-mini {
        padding: 9px;
        border-radius: 12px;
    }

    .seo-qr-mini .seo-qr-code {
        width: 76px;
        height: 76px;
    }

    .seo-qr-mini > span {
        font-size: 8px;
    }
}

@media (max-width: 520px) {
    .seo-qr-feature-inner {
        grid-template-columns: 1fr;
    }

    .seo-qr-mini {
        width: fit-content;
        flex-direction: row;
        gap: 10px;
    }

    .seo-qr-mini .seo-qr-code {
        width: 64px;
        height: 64px;
    }
}

/* Različit položaj dekorativnog kruga za svaku karticu */
.document-link-card:nth-child(1)::before {
    top: -85px;
    right: -75px;
    bottom: auto;
    left: auto;
}

.document-link-card:nth-child(2)::before {
    top: -85px;
    left: -75px;
    right: auto;
    bottom: auto;
}

.document-link-card:nth-child(3)::before {
    bottom: -85px;
    left: -75px;
    top: auto;
    right: auto;
}

.document-link-card:nth-child(4)::before {
    bottom: -85px;
    right: -75px;
    top: auto;
    left: auto;
}



/* =====================================
   FLUID BOUNDARY V3
   Samo dve boje i jedna živa granica. Bez glow/senke/traka.
===================================== */

.auth-container {
    isolation: isolate;
}

.fluid-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    opacity: 1;
    transition: opacity .28s ease;
}

.fluid-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.fluid-svg-mobile {
    display: none;
}

/* SVG je pozadina samo u početnom prikazu. */
.auth-container:not(.login-active):not(.register-active) .login-panel,
.auth-container:not(.login-active):not(.register-active) .register-panel {
    background: transparent;
}

/* U početnom prikazu nema starog ravnog blur spoja. */
.auth-container:not(.login-active):not(.register-active) .login-panel::after {
    display: none;
}

.auth-panel {
    z-index: 1;
}

.auth-panel .panel-content,
.auth-panel .form-area {
    z-index: 5;
}

/* Kada se otvori forma, vraća se originalni panel i fluid nestaje. */
.auth-container.login-active .fluid-background,
.auth-container.register-active .fluid-background {
    opacity: 0;
}

@media (max-width: 760px) {
    .fluid-svg-desktop {
        display: none;
    }

    .fluid-svg-mobile {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fluid-background animate {
        display: none;
    }
}


/* =====================================
   FLUID BOUNDARY V4 — CLEAN OVERRIDES
   Uklanja sve stare glow/blend pseudo-slojeve i osigurava
   da je SVG granica vidljiva i na mobilnom rasporedu.
===================================== */

/* Nema starih senki, glow-a ni blend traka ni u jednom stanju. */
.auth-panel::before,
.auth-panel::after,
.login-panel::before,
.login-panel::after,
.register-panel::before,
.register-panel::after {
    content: none !important;
    display: none !important;
    background: none !important;
    filter: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

/* Početni ekran: boju crta samo fluid SVG, paneli su potpuno providni. */
.auth-container:not(.login-active):not(.register-active) .login-panel,
.auth-container:not(.login-active):not(.register-active) .register-panel {
    background: transparent !important;
    box-shadow: none !important;
}

/* I sam wrapper nema dekorativnu senku preko sredine. */
.auth-container:not(.login-active):not(.register-active) {
    box-shadow: none;
}

/* Fluid ostaje iza sadržaja, ali iznad osnovne pozadine. */
.fluid-background {
    z-index: 0 !important;
    filter: none !important;
    box-shadow: none !important;
}

.fluid-svg,
.fluid-svg path {
    filter: none !important;
}

.auth-panel {
    z-index: 1 !important;
}

/* Kada se otvori forma, SVG nestaje a postojeće boje panela se vraćaju. */
.auth-container.login-active .fluid-background,
.auth-container.register-active .fluid-background {
    opacity: 0 !important;
    visibility: hidden;
}

@media (max-width: 760px) {
    /* Mobilni početni ekran je 2 panela jedan iznad drugog.
       Zato desktop vertikalni SVG potpuno gasimo, a horizontalni forsiramo. */
    .auth-container:not(.login-active):not(.register-active) .fluid-svg-desktop {
        display: none !important;
    }

    .auth-container:not(.login-active):not(.register-active) .fluid-svg-mobile {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Kasniji mobile CSS u originalu ima background !important,
       pa ga ovde eksplicitno uklanjamo samo na početnom ekranu. */
    .auth-container:not(.login-active):not(.register-active) .login-panel,
    .auth-container:not(.login-active):not(.register-active) .register-panel {
        background: transparent !important;
    }

    .auth-container:not(.login-active):not(.register-active) {
        background: transparent !important;
    }
}

/* =====================================
   FLUID BOUNDARY V5 — FINAL POLISH
   1) uklanja statičnu mobilnu liniju između panela
   2) mekši povratak početnog teksta nakon zatvaranja forme
===================================== */

/* Početni tekst se u oba smera vraća kroz isti miran fade/blur/scale. */
.panel-text {
    opacity: 1;
    filter: blur(0);
    visibility: visible;
    transition:
        opacity .46s ease .12s,
        filter .58s ease .08s,
        transform .68s cubic-bezier(.22, 1, .36, 1) .06s,
        visibility 0s linear 0s !important;
}

/* Ne gasimo tekst sa display/instant visibility dok je forma otvorena.
   Ostaje neklikabilan, ali browser ima stanje iz kog može lepo da ga vrati. */
.auth-container.login-active .login-panel .panel-text,
.auth-container.register-active .register-panel .panel-text {
    opacity: 0 !important;
    filter: blur(7px) !important;
    visibility: visible !important;
    pointer-events: none !important;
}

@media screen and (min-width: 761px) {
    .auth-container.login-active .login-panel .panel-text,
    .auth-container.register-active .register-panel .panel-text {
        transform: translate(-50%, -50%) scale(.985) !important;
    }

    .auth-container:not(.login-active):not(.register-active) .panel-text {
        transform: translate(-50%, -50%) scale(1) !important;
    }
}

@media screen and (max-width: 760px) {
    /* Ovo je bila tanka nepokretna linija tačno između dva mobilna panela. */
    .login-panel,
    .register-panel {
        border-top: 0 !important;
        border-bottom: 0 !important;
        outline: 0 !important;
    }

    /* Na mobilnom tekst se vraća tek mrvicu nakon što panel legne na mesto. */
    .panel-text {
        transition:
            opacity .52s ease .16s,
            filter .62s ease .12s,
            transform .72s cubic-bezier(.22, 1, .36, 1) .08s,
            visibility 0s linear 0s !important;
    }

    .auth-container.login-active .login-panel .panel-text,
    .auth-container.register-active .register-panel .panel-text {
        opacity: 0 !important;
        filter: blur(8px) !important;
        visibility: visible !important;
        transform: translateY(-50%) scale(.985) translateY(-6px) !important;
    }

    .auth-container:not(.login-active):not(.register-active) .panel-text {
        opacity: 1 !important;
        filter: blur(0) !important;
        visibility: visible !important;
        transform: translateY(-50%) scale(1) !important;
    }

    /* Bez sub-pixel ivice na samom preseku SVG-a. */
    .fluid-svg-mobile {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

/* =====================================
   FLUID BOUNDARY V6 — ULTRA SMOOTH TEXT RETURN
   Jači, simetričan blur pri ulasku i povratku na početni ekran.
===================================== */

.panel-text {
    transition:
        opacity .62s cubic-bezier(.22, 1, .36, 1) .10s,
        filter .82s cubic-bezier(.22, 1, .36, 1) .04s,
        transform .82s cubic-bezier(.22, 1, .36, 1) .04s,
        visibility 0s linear 0s !important;
    will-change: opacity, filter, transform;
}

.auth-container.login-active .login-panel .panel-text,
.auth-container.register-active .register-panel .panel-text {
    opacity: 0 !important;
    filter: blur(18px) !important;
    visibility: visible !important;
    pointer-events: none !important;
}

@media screen and (min-width: 761px) {
    .auth-container.login-active .login-panel .panel-text,
    .auth-container.register-active .register-panel .panel-text {
        transform: translate(-50%, -50%) scale(.955) !important;
    }

    .auth-container:not(.login-active):not(.register-active) .panel-text {
        opacity: 1 !important;
        filter: blur(0) !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }
}

@media screen and (max-width: 760px) {
    .panel-text {
        transition:
            opacity .68s cubic-bezier(.22, 1, .36, 1) .14s,
            filter .88s cubic-bezier(.22, 1, .36, 1) .08s,
            transform .88s cubic-bezier(.22, 1, .36, 1) .08s,
            visibility 0s linear 0s !important;
    }

    .auth-container.login-active .login-panel .panel-text,
    .auth-container.register-active .register-panel .panel-text {
        opacity: 0 !important;
        filter: blur(20px) !important;
        transform: translateY(-50%) scale(.95) translateY(-8px) !important;
    }

    .auth-container:not(.login-active):not(.register-active) .panel-text {
        opacity: 1 !important;
        filter: blur(0) !important;
        transform: translateY(-50%) scale(1) !important;
    }
}

/* =========================================================
   REGISTRACIJA - PREPOZNAVANJE BANKE
========================================================= */
.register-bank-detected {
    display: block;
    margin-top: 7px;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    line-height: 1.45;
}

.register-bank-detected.is-found {
    color: #b9f6cf;
}

.register-bank-detected.is-error {
    color: #ffd0cc;
}