@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Josefin+Sans:wght@400;500;600&display=swap');

.vin-page {
    --color-primary: #1c1917;
    --color-on-primary: #ffffff;
    --color-accent: #a16207;
    --color-background: #fafaf9;
    --color-foreground: #0c0a09;
    --color-muted-foreground: #57534e;
    --color-border: #d6d3d1;
    --color-card: #ffffff;
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: "Josefin Sans", "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.vin-page h1,
.vin-page h2,
.vin-page h3,
.vin-page .card-title {
    font-family: Cinzel, Georgia, serif;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-foreground);
}

.vin-kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.vin-cover {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.vin-cover .s_parallax_bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
}

.vin-cover .o_we_bg_filter {
    position: absolute;
    inset: 0;
}

.vin-cover .container {
    position: relative;
    z-index: 2;
}

.vin-login-card {
    background: var(--color-card);
}

.vin-page .oe_login_form .form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.vin-page .oe_login_form .form-control {
    min-height: 44px;
}

.vin-page .btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    min-height: 44px;
}

.vin-page .btn-primary:hover,
.vin-page .btn-primary:focus {
    background: #292524;
    border-color: #292524;
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.vin-page .btn-link {
    color: var(--color-muted-foreground);
    min-height: 44px;
}

.vin-page .s_three_columns .card-img-top {
    height: 220px;
    object-fit: cover;
}

.vin-page a {
    color: var(--color-foreground);
}

.vin-page a:hover {
    color: var(--color-accent);
}

@media (max-width: 767.98px) {
    .vin-cover {
        min-height: auto;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .vin-cover h1 {
        font-size: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vin-page * {
        transition: none !important;
    }
}