/* =========================================================
OrynDEV — LOGIN PAGE
assets/login.css
========================================================= */

/* =========================================================
RESET
========================================================= */

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

html {
min-height: 100%;
}

body {
min-height: 100vh;
}

/* =========================================================
VARIABLES
========================================================= */

:root {

/* -----------------------------------------------------
   BACKGROUNDS
----------------------------------------------------- */

--background:
    #fdf1de;

--background-secondary:
    #fff9ef;


/* -----------------------------------------------------
   TEXT
----------------------------------------------------- */

--text:
    #2c3e50;

--text-light:
    #6b7785;

--text-muted:
    #9a8062;


/* -----------------------------------------------------
   ACCENT
----------------------------------------------------- */

--primary:
    #c79b65;

--primary-dark:
    #9a6f3d;

--primary-light:
    #f8e4c5;


/* -----------------------------------------------------
   INPUTS
----------------------------------------------------- */

--input-background:
    rgba(
        255,
        255,
        255,
        0.72
    );

--input-background-focus:
    #ffffff;

--input-border:
    rgba(
        44,
        62,
        80,
        0.13
    );

--input-border-focus:
    rgba(
        199,
        155,
        101,
        0.65
    );


/* -----------------------------------------------------
   CARD
----------------------------------------------------- */

--card:
    rgba(
        255,
        249,
        239,
        0.92
    );


/* -----------------------------------------------------
   BORDERS
----------------------------------------------------- */

--border:
    rgba(
        199,
        155,
        101,
        0.22
    );


/* -----------------------------------------------------
   SHADOWS
----------------------------------------------------- */

--card-shadow:
    0
    20px
    60px
    rgba(
        44,
        62,
        80,
        0.10
    );

--button-shadow:
    0
    8px
    20px
    rgba(
        155,
        111,
        61,
        0.18
    );


/* -----------------------------------------------------
   RADIUS
----------------------------------------------------- */

--radius-card:
    28px;

--radius-input:
    11px;

--radius-button:
    11px;

}

/* =========================================================
BODY
========================================================= */

body {

position:
    relative;

display:
    flex;

align-items:
    center;

justify-content:
    center;

padding:
    30px
    0;

overflow-x:
    hidden;

font-family:
    "Poppins",
    sans-serif;

color:
    var(--text);

background:

    radial-gradient(
        circle at 8% 15%,
        rgba(
            199,
            155,
            101,
            0.13
        ),
        transparent 34%
    ),

    radial-gradient(
        circle at 92% 85%,
        rgba(
            44,
            62,
            80,
            0.07
        ),
        transparent 35%
    ),

    var(--background);

}

/* =========================================================
BACKGROUND
========================================================= */

.login-background {

position:
    fixed;

inset:
    0;

z-index:
    0;

overflow:
    hidden;

pointer-events:
    none;

}

.login-background::before {

content:
    "";

position:
    absolute;

width:
    500px;

height:
    500px;

top:
    -220px;

left:
    -180px;

border-radius:
    50%;

background:
    rgba(
        199,
        155,
        101,
        0.12
    );

filter:
    blur(90px);

}

.login-background::after {

content:
    "";

position:
    absolute;

width:
    450px;

height:
    450px;

right:
    -180px;

bottom:
    -200px;

border-radius:
    50%;

background:
    rgba(
        44,
        62,
        80,
        0.07
    );

filter:
    blur(90px);

}

/* =========================================================
LOGIN CONTAINER
========================================================= */

.login-container {

position:
    relative;

z-index:
    1;

width:
    100%;

max-width:
    440px;

padding:
    20px;

}

/* =========================================================
LOGIN CARD
========================================================= */

.login-card {

position:
    relative;

width:
    100%;

padding:
    44px;

background:
    var(--card);

border:
    1px solid
    var(--border);

border-radius:
    var(--radius-card);

box-shadow:
    var(--card-shadow);

backdrop-filter:
    blur(16px);

-webkit-backdrop-filter:
    blur(16px);

animation:
    loginAppear
    0.55s
    cubic-bezier(
        0.22,
        1,
        0.36,
        1
    )
    both;

}

/* =========================================================
LOGIN HEADER
========================================================= */

.login-logo {

display:
    flex;

flex-direction:
    column;

align-items:
    center;

margin-bottom:
    30px;

text-align:
    center;

}

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

.login-logo-icon {

display:
    flex;

align-items:
    center;

justify-content:
    center;

width:
    92px;

height:
    92px;

margin-bottom:
    18px;

padding:
    6px;

background:
    #ffffff;

border:
    1px solid
    rgba(
        199,
        155,
        101,
        0.20
    );

border-radius:
    22px;

box-shadow:
    0
    10px
    30px
    rgba(
        44,
        62,
        80,
        0.10
    );

}

.login-logo-icon img {

display:
    block;

width:
    100%;

height:
    100%;

object-fit:
    contain;

border-radius:
    16px;

}

/* =========================================================
TITRE
========================================================= */

.login-logo h1 {

color:
    var(--text);

font-size:
    25px;

font-weight:
    700;

line-height:
    1.3;

letter-spacing:
    -0.3px;

}

.login-logo p {

margin-top:
    7px;

color:
    var(--text-light);

font-size:
    13px;

font-weight:
    400;

line-height:
    1.5;

}

/* =========================================================
LOGIN ERROR
========================================================= */

.login-error {

display:
    flex;

align-items:
    center;

gap:
    11px;

width:
    100%;

margin:
    0
    0
    22px;

padding:
    13px
    15px;

background:
    rgba(
        231,
        76,
        60,
        0.055
    );

border:
    1px solid
    rgba(
        192,
        57,
        43,
        0.18
    );

border-radius:
    11px;

color:
    #a93226;

font-size:
    12px;

font-weight:
    500;

line-height:
    1.5;

box-shadow:
    0
    5px
    15px
    rgba(
        192,
        57,
        43,
        0.045
    );

animation:
    loginErrorAppear
    0.35s
    ease
    both;

}

.login-error[hidden] {

display:
    none;

}

.login-error > i {

display:
    flex;

align-items:
    center;

justify-content:
    center;

flex-shrink:
    0;

width:
    24px;

height:
    24px;

color:
    #c0392b;

font-size:
    14px;

}

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

.login-form {

display:
    flex;

flex-direction:
    column;

gap:
    19px;

}

.form-group {

display:
    flex;

flex-direction:
    column;

gap:
    8px;

}

.form-group label {

color:
    var(--text);

font-size:
    12px;

font-weight:
    600;

line-height:
    1.4;

}

/* =========================================================
INPUT WRAPPER
========================================================= */

.input-wrapper,
.password-wrapper {

position:
    relative;

width:
    100%;

}

/* =========================================================
INPUT ICON
========================================================= */

.input-icon,
.password-input-icon {

position:
    absolute;

top:
    50%;

left:
    15px;

z-index:
    2;

width:
    16px;

color:
    #9a8062;

font-size:
    13px;

text-align:
    center;

pointer-events:
    none;

transform:
    translateY(-50%);

transition:
    color
    0.2s
    ease;

}

/* =========================================================
INPUTS
========================================================= */

.form-group input {

display:
    block;

width:
    100%;

height:
    48px;

padding:
    0
    15px
    0
    44px;

background:
    var(--input-background);

border:
    1px solid
    var(--input-border);

border-radius:
    var(--radius-input);

outline:
    none;

color:
    var(--text);

font-family:
    "Poppins",
    sans-serif;

font-size:
    13px;

font-weight:
    400;

transition:
    border-color
    0.2s
    ease,

    box-shadow
    0.2s
    ease,

    background
    0.2s
    ease;

}

.form-group input::placeholder {

color:
    #9aa1a8;

opacity:
    1;

}

.form-group input:hover {

border-color:
    rgba(
        44,
        62,
        80,
        0.22
    );

}

.form-group input:focus {

background:
    var(--input-background-focus);

border-color:
    var(--input-border-focus);

box-shadow:
    0
    0
    0
    3px
    rgba(
        199,
        155,
        101,
        0.12
    );

}

.input-wrapper:focus-within
.input-icon,
.password-wrapper:focus-within
.password-input-icon {

color:
    var(--primary-dark);

}

/* =========================================================
PASSWORD INPUT
========================================================= */

.password-wrapper input {

padding-right:
    52px;

}

/* =========================================================
PASSWORD TOGGLE
========================================================= */

.password-toggle {

position:
    absolute;

top:
    50%;

right:
    8px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

width:
    34px;

height:
    34px;

padding:
    0;

border:
    none;

border-radius:
    8px;

background:
    transparent;

color:
    #9a8062;

font-size:
    13px;

cursor:
    pointer;

transform:
    translateY(-50%);

transition:
    background
    0.2s
    ease,

    color
    0.2s
    ease,

    transform
    0.2s
    ease;

}

.password-toggle:hover {

background:
    rgba(
        199,
        155,
        101,
        0.10
    );

color:
    var(--primary-dark);

}

.password-toggle:active {

transform:
    translateY(-50%)
    scale(
        0.94
    );

}

.password-toggle:focus-visible {

outline:
    2px solid
    rgba(
        199,
        155,
        101,
        0.45
    );

outline-offset:
    2px;

}

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

.btn-submit {

display:
    flex;

align-items:
    center;

justify-content:
    center;

gap:
    10px;

width:
    100%;

height:
    48px;

margin-top:
    3px;

padding:
    0
    20px;

border:
    1px solid
    rgba(
        154,
        111,
        61,
        0.20
    );

border-radius:
    var(--radius-button);

background: #5DADE2;

color:
    #ffffff;

font-family:
    "Poppins",
    sans-serif;

font-size:
    13px;

font-weight:
    600;

cursor:
    pointer;

box-shadow:
    var(--button-shadow);

transition:
    transform
    0.2s
    ease,

    box-shadow
    0.2s
    ease,

    background
    0.2s
    ease;

}

.btn-submit i {

font-size:
    12px;

transition:
    transform
    0.2s
    ease;

}

.btn-submit:hover {

background: #5DADE2;

box-shadow:
    0
    11px
    25px
    rgba(
        155,
        111,
        61,
        0.24
    );

transform:
    translateY(-1px);

}

.btn-submit:hover i {

transform:
    translateX(3px);

}

.btn-submit:active {

transform:
    translateY(0);

box-shadow:
    0
    5px
    12px
    rgba(
        155,
        111,
        61,
        0.16
    );

}

.btn-submit:focus-visible {

outline:
    2px solid
    rgba(
        155,
        111,
        61,
        0.45
    );

outline-offset:
    3px;

}

/* =========================================================
PERMISSION NOTIFICATION
========================================================= */

.permission-notification {

position:
    fixed;

top:
    24px;

right:
    24px;

z-index:
    99999;

display:
    flex;

align-items:
    flex-start;

gap:
    13px;

width:
    min(
        calc(
            100vw - 40px
        ),
        390px
    );

padding:
    15px
    17px;

overflow:
    hidden;

background:
    rgba(
        253,
        241,
        222,
        0.97
    );

border:
    1px solid
    rgba(
        199,
        155,
        101,
        0.25
    );

border-radius:
    12px;

box-shadow:
    0
    12px
    35px
    rgba(
        44,
        62,
        80,
        0.13
    );

backdrop-filter:
    blur(10px);

-webkit-backdrop-filter:
    blur(10px);

opacity:
    0;

visibility:
    hidden;

transform:
    translateX(
        calc(
            100% + 30px
        )
    );

transition:
    opacity
    0.35s
    ease,

    transform
    0.35s
    cubic-bezier(
        0.22,
        1,
        0.36,
        1
    ),

    visibility
    0.35s
    ease;

}

.permission-notification[hidden] {

display:
    flex;

}

.permission-notification.show {

opacity:
    1;

visibility:
    visible;

transform:
    translateX(
        0
    );

}

/* =========================================================
NOTIFICATION ICON
========================================================= */

.permission-notification-icon {

display:
    flex;

align-items:
    center;

justify-content:
    center;

flex-shrink:
    0;

width:
    36px;

height:
    36px;

border-radius:
    9px;

background:
    var(--primary-light);

color:
    var(--primary-dark);

font-size:
    14px;

}

/* =========================================================
NOTIFICATION CONTENT
========================================================= */

.permission-notification-content {

flex:
    1;

min-width:
    0;

}

.permission-notification-title {

margin:
    0
    0
    3px;

color:
    var(--text);

font-size:
    12px;

font-weight:
    700;

line-height:
    1.4;

}

.permission-notification-message {

margin:
    0;

color:
    #596773;

font-size:
    11px;

font-weight:
    400;

line-height:
    1.5;

}

/* =========================================================
NOTIFICATION CLOSE
========================================================= */

.permission-notification-close {

display:
    flex;

align-items:
    center;

justify-content:
    center;

flex-shrink:
    0;

width:
    24px;

height:
    24px;

padding:
    0;

border:
    none;

border-radius:
    6px;

background:
    transparent;

color:
    #9a8062;

font-size:
    11px;

cursor:
    pointer;

transition:
    background
    0.2s
    ease,

    color
    0.2s
    ease;

}

.permission-notification-close:hover {

background:
    rgba(
        44,
        62,
        80,
        0.06
    );

color:
    var(--text);

}

.permission-notification-close:focus-visible {

outline:
    2px solid
    rgba(
        199,
        155,
        101,
        0.45
    );

outline-offset:
    2px;

}

/* =========================================================
NOTIFICATION PROGRESS
========================================================= */

.permission-notification-progress {

position:
    absolute;

right:
    0;

bottom:
    0;

left:
    0;

width:
    100%;

height:
    2px;

background:
    var(--primary);

border-radius:
    0
    0
    12px
    12px;

transform-origin:
    left;

}

.permission-notification.show
.permission-notification-progress {

animation:
    notificationProgress
    6s
    linear
    forwards;

}

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

.login-footer {

margin-top:
    25px;

padding-top:
    20px;

border-top:
    1px solid
    rgba(
        44,
        62,
        80,
        0.09
    );

text-align:
    center;

}

.login-footer p {

color:
    var(--text-light);

font-size:
    11px;

font-weight:
    400;

line-height:
    1.5;

}

/* =========================================================
ANIMATION — LOGIN
========================================================= */

@keyframes loginAppear {

from {

    opacity:
        0;

    transform:
        translateY(
            20px
        )
        scale(
            0.98
        );

}

to {

    opacity:
        1;

    transform:
        translateY(
            0
        )
        scale(
            1
        );

}

}

/* =========================================================
ANIMATION — ERROR
========================================================= */

@keyframes loginErrorAppear {

from {

    opacity:
        0;

    transform:
        translateY(
            -8px
        );

}

to {

    opacity:
        1;

    transform:
        translateY(
            0
        );

}

}

/* =========================================================
ANIMATION — NOTIFICATION
========================================================= */

@keyframes notificationProgress {

from {

    transform:
        scaleX(
            1
        );

}

to {

    transform:
        scaleX(
            0
        );

}

}

/* =========================================================
RESPONSIVE — TABLETTE
========================================================= */

@media (
max-width: 600px
) {

body {

    padding:
        20px
        0;

}


.login-container {

    padding:
        15px;

}


.login-card {

    padding:
        35px
        28px;

    border-radius:
        22px;

}


.login-logo-icon {

    width:
        82px;

    height:
        82px;

    border-radius:
        19px;

}


.login-logo h1 {

    font-size:
        23px;

}

}

/* =========================================================
RESPONSIVE — MOBILE
========================================================= */

@media (
max-width: 420px
) {

body {

    padding:
        15px
        0;

}


.login-container {

    padding:
        10px;

}


.login-card {

    padding:
        30px
        21px;

    border-radius:
        20px;

}


.login-logo {

    margin-bottom:
        26px;

}


.login-logo-icon {

    width:
        76px;

    height:
        76px;

    margin-bottom:
        15px;

    border-radius:
        18px;

}


.login-logo h1 {

    font-size:
        21px;

}


.login-logo p {

    max-width:
        260px;

    font-size:
        12px;

}


.login-form {

    gap:
        17px;

}


.form-group input {

    height:
        46px;

    font-size:
        12px;

}


.btn-submit {

    height:
        46px;

    font-size:
        12px;

}


.permission-notification {

    top:
        15px;

    right:
        15px;

    width:
        calc(
            100vw - 30px
        );

}

}

/* =========================================================
ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS
========================================================= */

@media (
prefers-reduced-motion: reduce
) {

*,
*::before,
*::after {

    animation-duration:
        0.01ms !important;

    animation-iteration-count:
        1 !important;

    scroll-behavior:
        auto !important;

    transition-duration:
        0.01ms !important;

}

}