/* ===== ROOT COLORS ===== */

:root {

    --ink-black: #06141B;

    --cornsilk: #F7F1CF;

    --ash-grey: #CCD0CF;

    --tropical-teal: #3B7285;

    --cerulean: #3B7285;

}

/* ===== PAGE ===== */

body {
    min-height: 100vh;
    margin: 0;

    display: flex;
    justify-content: center;

    padding: 40px 0;

    background: var(--ink-black);

    overflow-y: auto;
}

/* decorative dotted texture */

body::before {

    content: "";

    position: absolute;

    top: -120px;

    right: -120px;

    width: 420px;

    height: 420px;

    background-image: radial-gradient(rgba(247,241,207,0.18) 2px, transparent 2px);

    background-size: 18px 18px;

    opacity: 0.6;

    pointer-events: none;

}

/* ===== MAIN CARD ===== */

.card{

margin: 10%;

}



.vsebina,
body > div:not(.tipka-nazaj):not(.tipka-nazaj-register) {
    width: min(90%, 700px);

    background: var(--cornsilk);

    border-radius: 28px;

    padding: 40px;

    margin: auto 0;
}

/* teal brush decorations */

body > div:not(.tipka-nazaj):not(.tipka-nazaj-register)::before,

body > div:not(.tipka-nazaj):not(.tipka-nazaj-register)::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 140px;

    background: rgba(59,114,133,0.18);

    border-radius: 30px;

    transform: rotate(-8deg);

    filter: blur(0.3px);

}

body > div:not(.tipka-nazaj):not(.tipka-nazaj-register)::before {

    top: 18px;

    right: 18px;

}

body > div:not(.tipka-nazaj):not(.tipka-nazaj-register)::after {

    bottom: 18px;

    left: 18px;

    width: 140px;

    height: 90px;

}

/* ===== HOME BUTTON ===== */

.tipka-nazaj,

.tipka-nazaj-register {

    position: fixed;

    top: 26px;

    left: 26px;

    z-index: 20;

}

.tipka-nazaj a,

.tipka-nazaj-register a {

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: var(--tropical-teal);

    box-shadow: 0 10px 22px rgba(0,0,0,0.35);

    transition: transform .2s ease, background .2s ease;

}

.tipka-nazaj a:hover,

.tipka-nazaj-register a:hover {

    transform: translateY(-2px);

    background: #4a8ea6;

}

.tipka-nazaj img,

.tipka-nazaj-register img {

    width: 28px;

    height: 28px;

    filter: brightness(0) invert(1);

}

/* ===== TYPOGRAPHY ===== */

h2 {

    margin: 0 0 12px;

    text-align: center;

    font-size: 48px;

    line-height: 1.05;

    color: var(--ink-black);

    position: relative;

}

h2::after {

    content: "";

    display: block;

    width: 84px;

    height: 5px;

    margin: 14px auto 0;

    border-radius: 999px;

    background: var(--tropical-teal);

}

p {

    margin: 0 0 26px;

    text-align: center;

    color: #2b2b2b;

    font-size: 16px;

    line-height: 1.55;

}

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

form {

    display: flex;

    flex-direction: column;

}

input[type="text"],

input[type="email"],

input[type="password"],

input[type="number"],

input[type="date"] {

    width: 100%;

    box-sizing: border-box;

    padding: 16px 18px;

    margin-bottom: 14px;

    border: 2px solid var(--ash-grey);

    border-radius: 14px;

    background: #fff;

    font-size: 16px;

    color: var(--ink-black);

    transition: border-color .25s ease, box-shadow .25s ease, transform .12s ease;

}

input::placeholder {

    color: #7c878b;

}

input:focus {

    outline: none;

    border-color: var(--tropical-teal);

    box-shadow: 0 0 0 4px rgba(59,114,133,0.16);

    transform: translateY(-1px);

}

/* first row side-by-side */

#fname, #lname {

    width: calc(50% - 8px);

    display: inline-block;

}

#fname {

    margin-right: 12px;

}

/* helper separators */

.separator {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 18px 0 10px;

}

.separator::before,

.separator::after {

    content: "";

    flex: 1;

    height: 2px;

    background: rgba(59,114,133,0.35);

    border-radius: 999px;

}

.separator span {

    color: var(--tropical-teal);

    font-size: 22px;

    line-height: 1;

}

/* checkboxes */

.zapomniSiMe {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    text-align: left;

    /* margin: 0 5 0 0 ; */

}

.zapomniSiMe input {

    width: 18px;

    height: 18px;

    margin: 0;

}

.zapomniSiMe a {

    color: var(--tropical-teal);

    text-decoration: none;

}

.zapomniSiMe a:hover {

    text-decoration: underline;

}

/* buttons */

button {

    width: 100%;

    padding: 16px 18px;

    border: none;

    border-radius: 14px;

    background: #f0d99b;

    color: var(--ink-black);

    font-size: 18px;

    font-weight: 800;

    cursor: pointer;

    box-shadow: 0 8px 18px rgba(0,0,0,0.16);

    transition: transform .18s ease, box-shadow .18s ease, background .2s ease;

    position: relative;

}

button:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 22px rgba(0,0,0,0.22);

}

button:active {

    transform: translateY(0);

}

/* primary submit arrow */

button[type="submit"]::after {

    content: "→";

    position: absolute;

    right: 18px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 22px;

}

/* Google button */

#googleLogin {

    margin-top: 12px;

    background: var(--ink-black);

    color: #fff;

}

#googleLogin:hover {

    background: var(--tropical-teal);

}

/* login separator text */

.or-divider {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 18px 0 10px;

}

.or-divider::before,

.or-divider::after {

    content: "";

    flex: 1;

    height: 2px;

    background: rgba(59,114,133,0.35);

    border-radius: 999px;

}

.or-divider span {

    color: #444;

    font-size: 14px;

}

/* bottom link */

.preusmeritev {

    margin-top: 24px;

    margin-bottom: 0;

}

.preusmeritev a {

    color: var(--tropical-teal);

    font-weight: 700;

    text-decoration: none;

}

.preusmeritev a:hover {

    text-decoration: underline;

}

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

@media (max-width: 720px) {

    body {

        align-items: flex-start;

        padding: 96px 14px 24px;

    }

    body > div:not(.tipka-nazaj):not(.tipka-nazaj-register) {

        width: 100%;

        padding: 28px 22px 24px;

        border-radius: 22px;

    }

    h2 {

        font-size: 38px;

    }

    #fname, #lname {

        width: 100%;

        margin-right: 0;

    }

    .tipka-nazaj,

    .tipka-nazaj-register {

        top: 18px;

        left: 18px;

    }

    .tipka-nazaj a,

    .tipka-nazaj-register a {

        width: 56px;

        height: 56px;

    }

}