@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Raleway:wght@300;400;500;600&display=swap');

:root {
    --color-main: #2B4865;
    --color-brown: #C78665;
    --color-lightblue: #607EAA;
    --color-pera-lightgrey: #777777;
    --color-white: #ffffff;
    --color-bglightblue: #EFF4FE;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: var(--color-main);
    background-color: var(--color-bglightblue);
    background-image: url('../assets/images/bg/bg.png'); /* Relative to css/ folder */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-slider {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 244, 254, 0.8); /* Slight overlay based on var(--color-bglightblue) */
}

.display-table {
    width: 100%;
    display: flex;
    justify-content: center;
}

.display-table-cell {
    width: 100%;
    max-width: 450px;
    padding: 20px;
}

.login-box-container {
    background: #fff;
    padding: 50px 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 4px solid var(--color-main);
}

.login-box .title {
    font-family: 'Playfair Display', serif;
    color: var(--color-main);
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 15px;
}

.login-box p {
    font-family: 'Raleway', sans-serif;
    color: var(--color-pera-lightgrey);
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 1.5;
}

.form-control {
    height: 50px;
    background: #fdfdfd;
    border: 1px solid #e0e0e0;
    color: var(--color-main);
    font-size: 16px;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Raleway', sans-serif;
}

.form-control:focus {
    border-color: var(--color-brown);
    background: #fff;
    box-shadow: none;
}

.btn-primary {
    background-color: var(--color-main);
    border: 2px solid var(--color-main);
    color: var(--color-white);
    padding: 10px 30px;
    font-size: 18px;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    text-transform: capitalize;
    width: 100%;
    transition: 0.2s ease;
    border-radius: 0; /* Theme mostly uses square or slightly rounded, sticking to square for elegance */
    cursor: pointer;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-white) !important;
    color: var(--color-main) !important;
    border-color: var(--color-main) !important;
}

.icon-heart {
    color: var(--color-brown);
    font-size: 40px;
    margin-bottom: 20px;
    display: inline-block;
}

/* Helper to ensure nice mobile view */
@media (max-width: 576px) {
    .login-box-container {
        padding: 30px 20px;
    }
    .login-box .title {
        font-size: 32px;
    }
}