/* ============================================================
PREMIUM WEB
AUTHENTICATION STYLESHEET
============================================================ */


/* ============================================================
1. VARIABLES / RESET
============================================================ */

:root {
--black: #0c0c0c;
--dark: #151515;

--white: #ffffff;

--light: #f7f7f7;
--light-soft: #fbfbfb;

--gray-dark: #666666;
--gray: #999999;
--gray-light: #dddddd;

--gold: #d4af37;
--gold-light: #f2dc7d;

--green: #198754;
--red: #d83b3b;

--border: rgba(15, 15, 15, 0.09);

--shadow:
0 25px 70px rgba(0, 0, 0, 0.12);

--radius: 22px;

--transition: 0.3s ease;
}


* {
margin: 0;
padding: 0;

box-sizing: border-box;
}


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


html {
scroll-behavior: smooth;
}


body {
min-height: 100vh;

background: var(--light);

color: var(--black);

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

-webkit-font-smoothing: antialiased;
}


a {
text-decoration: none;
}


button,
input {
font-family: inherit;
}


/* ============================================================
2. MAIN AUTH LAYOUT
============================================================ */

.auth-page {
width: 100%;
min-height: 100vh;

display: grid;

grid-template-columns:
minmax(320px, 0.85fr)
minmax(500px, 1.15fr);

background:
var(--light);
}


/* ============================================================
3. LEFT BRAND PANEL
============================================================ */

.auth-brand-panel {
position: relative;

min-height: 100vh;

padding:
42px 50px;

display: flex;

flex-direction: column;

justify-content: space-between;

overflow: hidden;

background:
linear-gradient(
145deg,
rgba(0, 0, 0, 0.84),
rgba(0, 0, 0, 0.92)
),
url(
"https://images.unsplash.com/photo-1498050108023-c5249f4df085"
)
center / cover
no-repeat;

color: var(--white);
}


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

position: absolute;

width: 420px;
height: 420px;

top: -210px;
right: -190px;

border-radius: 50%;

background:
radial-gradient(
circle,
rgba(212, 175, 55, 0.16),
transparent 70%
);

pointer-events: none;
}


.auth-brand-panel::after {
content: "";

position: absolute;

width: 300px;
height: 300px;

left: -160px;
bottom: -140px;

border-radius: 50%;

background:
radial-gradient(
circle,
rgba(255,255,255,0.05),
transparent 70%
);

pointer-events: none;
}


/* ============================================================
4. LOGO
============================================================ */

.auth-logo {
position: relative;

z-index: 2;

width: fit-content;

display: inline-flex;

align-items: center;

color: var(--white);

font-family:
"Cinzel",
serif;

font-size: 21px;

font-weight: 800;

letter-spacing: 2.3px;

text-transform: uppercase;

transition:
transform var(--transition);
}


.auth-logo span {
margin-right: 4px;

color: var(--gold);
}


.auth-logo::after {
content: "";

position: absolute;

left: 0;
bottom: -7px;

width: 38px;
height: 2px;

background:
linear-gradient(
90deg,
var(--gold),
var(--gold-light)
);

transition:
width var(--transition);
}


.auth-logo:hover {
transform:
translateY(-2px);
}


.auth-logo:hover::after {
width: 100%;
}


/* ============================================================
5. LEFT CONTENT
============================================================ */

.auth-brand-content {
position: relative;

z-index: 2;

max-width: 500px;
}


.auth-badge {
display: inline-flex;

align-items: center;

margin-bottom: 18px;

padding:
6px 12px;

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

border-radius:
999px;

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

color:
var(--gold-light);

font-size: 9.5px;

font-weight: 600;

letter-spacing: 1.2px;

text-transform: uppercase;
}


.auth-brand-content h1 {
max-width: 470px;

margin-bottom: 15px;

color: var(--white);

font-size:
clamp(
30px,
3.6vw,
46px
);

font-weight: 650;

line-height: 1.2;

letter-spacing: -1px;
}


.auth-brand-content p {
max-width: 440px;

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

font-size: 12.5px;

line-height: 1.8;
}


/* ============================================================
6. RETURN LINK
============================================================ */

.auth-back-link {
position: relative;

z-index: 2;

width: fit-content;

display: inline-flex;

align-items: center;

gap: 9px;

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

font-size: 11px;

font-weight: 500;

transition:
color var(--transition),
transform var(--transition);
}


.auth-back-link i {
color: var(--gold);

font-size: 10px;
}


.auth-back-link:hover {
color: var(--white);

transform:
translateX(-3px);
}


/* ============================================================
7. RIGHT FORM PANEL
============================================================ */

.auth-form-panel {
min-height: 100vh;

padding:
60px 45px;

display: flex;

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

background:
linear-gradient(
135deg,
#f6f6f6,
#ffffff
);
}


/* ============================================================
8. AUTH CARD
============================================================ */

.auth-card {
width: 100%;

max-width: 470px;

padding:
36px;

background:
var(--white);

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

border-radius:
var(--radius);

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


.auth-card-register {
max-width: 540px;
}


.auth-card-small {
max-width: 440px;
}


/* ============================================================
9. AUTH HEADING
============================================================ */

.auth-heading {
margin-bottom: 26px;
}


.auth-small-label {
display: inline-block;

margin-bottom: 7px;

color: var(--gold);

font-size: 9.5px;

font-weight: 700;

letter-spacing: 1.5px;

text-transform: uppercase;
}


.auth-heading h2 {
margin-bottom: 7px;

color: var(--black);

font-size: 25px;

font-weight: 650;

line-height: 1.3;

letter-spacing: -0.4px;
}


.auth-heading p {
color: var(--gray-dark);

font-size: 11.5px;

line-height: 1.65;
}


/* ============================================================
10. FORM
============================================================ */

.auth-form {
width: 100%;
}


.form-group {
width: 100%;

margin-bottom: 17px;
}


.form-group label {
display: inline-block;

margin-bottom: 7px;

color: #333333;

font-size: 10.5px;

font-weight: 600;
}


/* ============================================================
11. TWO COLUMN FORM ROW
============================================================ */

.form-row {
display: grid;

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

gap: 13px;
}


/* ============================================================
12. INPUT WRAPPER
============================================================ */

.input-wrapper {
position: relative;

width: 100%;
}


.input-wrapper input {
width: 100%;
height: 47px;

padding:
0 46px
0 41px;

border:
1px solid
#dddddd;

border-radius:
13px;

outline: none;

background:
#fafafa;

color:
#222222;

font-size: 11.5px;

transition:
border-color var(--transition),
background var(--transition),
box-shadow var(--transition);
}


.input-wrapper input::placeholder {
color:
#aaaaaa;
}


.input-wrapper input:hover {
border-color:
#c8c8c8;
}


.input-wrapper input:focus {
background:
var(--white);

border-color:
var(--gold);

box-shadow:
0 0 0 3px
rgba(212,175,55,0.10);
}


/* ============================================================
13. INPUT ICON
============================================================ */

.input-icon {
position: absolute;

top: 50%;
left: 15px;

transform:
translateY(-50%);

color:
#969696;

font-size: 12px;

pointer-events: none;

transition:
color var(--transition);
}


.input-wrapper:focus-within
.input-icon {
color:
var(--gold);
}


/* ============================================================
14. PASSWORD EYE ICON
============================================================ */

.password-toggle {
position: absolute;

top: 50%;
right: 9px;

width: 33px;
height: 33px;

transform:
translateY(-50%);

display: flex;

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

border: none;

border-radius: 50%;

background:
transparent;

color:
#8d8d8d;

font-size: 12px;

cursor: pointer;

transition:
background var(--transition),
color var(--transition);
}


.password-toggle:hover {
background:
#f0f0f0;

color:
var(--black);
}


.password-toggle:focus-visible {
outline:
2px solid
rgba(212,175,55,0.45);

outline-offset:
2px;
}


/* ============================================================
15. PASSWORD LABEL ROW
============================================================ */

.password-label-row {
display: flex;

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

gap: 15px;
}


.forgot-link {
margin-bottom: 7px;

color: var(--gray-dark);

font-size: 9.5px;

font-weight: 500;

transition:
color var(--transition);
}


.forgot-link:hover {
color: var(--gold);
}


/* ============================================================
16. REMEMBER / TERMS CHECKBOX
============================================================ */

.remember-row {
width: fit-content;

display: flex;

align-items: flex-start;

gap: 9px;

margin:
4px 0 20px;

color:
#555555;

cursor: pointer;
}


.remember-row input {
width: 14px;
height: 14px;

margin-top: 1px;

accent-color:
var(--gold);

cursor: pointer;
}


.remember-row span {
font-size: 10px;

line-height: 1.55;
}


.terms-row {
width: 100%;
}


.terms-row a {
color: var(--black);

font-weight: 600;

text-decoration: underline;

text-decoration-color:
rgba(0,0,0,0.20);

text-underline-offset:
2px;
}


.terms-row a:hover {
color: var(--gold);
}


/* ============================================================
17. AUTH MESSAGE
============================================================ */

.auth-message {
display: none;

width: 100%;

margin-bottom: 15px;

padding:
10px 12px;

border-radius:
10px;

font-size: 10px;

line-height: 1.5;
}


.auth-message.error {
display: block;

background:
rgba(216,59,59,0.08);

border:
1px solid
rgba(216,59,59,0.18);

color:
#b42828;
}


.auth-message.success {
display: block;

background:
rgba(25,135,84,0.08);

border:
1px solid
rgba(25,135,84,0.18);

color:
#146c43;
}


/* ============================================================
18. SUBMIT BUTTON
============================================================ */

.auth-submit-btn {
width: 100%;
min-height: 47px;

padding:
11px 18px;

display: flex;

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

gap: 9px;

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

border-radius:
999px;

background:
var(--black);

color:
var(--white);

font-size: 11.5px;

font-weight: 650;

cursor: pointer;

transition:
background var(--transition),
color var(--transition),
border-color var(--transition),
transform var(--transition),
box-shadow var(--transition);
}


.auth-submit-btn i {
font-size: 10px;

transition:
transform var(--transition);
}


.auth-submit-btn:hover {
background:
var(--gold);

border-color:
var(--gold);

color:
var(--black);

transform:
translateY(-2px);

box-shadow:
0 10px 25px
rgba(212,175,55,0.17);
}


.auth-submit-btn:hover i {
transform:
translateX(3px);
}


.auth-submit-btn:disabled {
opacity: 0.55;

cursor: not-allowed;

transform: none;
}


/* ============================================================
19. DIVIDER
============================================================ */

.auth-divider {
width: 100%;

margin:
23px 0;

display: flex;

align-items: center;

gap: 12px;
}


.auth-divider::before,
.auth-divider::after {
content: "";

flex: 1;

height: 1px;

background:
#e7e7e7;
}


.auth-divider span {
color:
#aaaaaa;

font-size: 9.5px;

text-transform: uppercase;
}


/* ============================================================
20. SWITCH LOGIN / REGISTER
============================================================ */

.auth-switch {
margin-top: 22px;

color:
var(--gray-dark);

text-align: center;

font-size: 10.5px;

line-height: 1.6;
}


.auth-switch a {
margin-left: 3px;

color:
var(--black);

font-weight: 700;

transition:
color var(--transition);
}


.auth-switch a:hover {
color:
var(--gold);
}


/* ============================================================
21. FOCUS / ACCESSIBILITY
============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible {
outline:
2px solid
rgba(212,175,55,0.45);

outline-offset:
2px;
}


::selection {
background:
var(--gold);

color:
var(--black);
}


/* ============================================================
22. TABLET
============================================================ */

@media (max-width: 1000px) {

.auth-page {
grid-template-columns:
0.75fr
1.25fr;
}


.auth-brand-panel {
padding:
35px 30px;
}


.auth-form-panel {
padding:
45px 28px;
}


.auth-brand-content h1 {
font-size:
32px;
}

}


/* ============================================================
23. MOBILE
============================================================ */

@media (max-width: 760px) {

.auth-page {
display: block;

min-height: 100vh;
}


.auth-brand-panel {
min-height: auto;

padding:
25px 20px 30px;

display: block;
}


.auth-logo {
font-size: 17px;
}


.auth-brand-content {
margin-top:
50px;

max-width:
100%;

text-align:
center;
}


.auth-badge {
margin-bottom:
13px;

font-size:
8.5px;
}


.auth-brand-content h1 {
max-width:
500px;

margin-left:
auto;

margin-right:
auto;

font-size:
29px;
}


.auth-brand-content p {
max-width:
460px;

margin:
0 auto;

font-size:
11.5px;
}


.auth-back-link {
margin-top:
35px;

font-size:
10px;
}


.auth-form-panel {
min-height: auto;

padding:
35px 18px
50px;
}


.auth-card,
.auth-card-register,
.auth-card-small {
max-width:
540px;

padding:
29px 24px;

border-radius:
19px;
}


.auth-heading h2 {
font-size:
22px;
}


.form-row {
grid-template-columns:
1fr;
}

}


/* ============================================================
24. SMALL PHONES
============================================================ */

@media (max-width: 480px) {

.auth-brand-panel {
padding:
22px 17px 27px;
}


.auth-brand-content {
margin-top:
42px;
}


.auth-brand-content h1 {
font-size:
26px;
}


.auth-brand-content p {
font-size:
11px;
}


.auth-form-panel {
padding:
28px 14px
40px;
}


.auth-card,
.auth-card-register,
.auth-card-small {
padding:
25px 18px;
}


.auth-heading {
margin-bottom:
22px;
}


.auth-heading h2 {
font-size:
20px;
}


.auth-heading p {
font-size:
10.5px;
}


.input-wrapper input {
height:
45px;

font-size:
11px;
}


.auth-submit-btn {
min-height:
45px;
}

}


/* ============================================================
25. VERY SMALL PHONES
============================================================ */

@media (max-width: 360px) {

.auth-logo {
font-size:
15px;
}


.auth-brand-content h1 {
font-size:
23px;
}


.auth-card,
.auth-card-register,
.auth-card-small {
padding:
22px 15px;
}


.password-label-row {
align-items:
flex-start;

flex-direction:
column;

gap:
0;
}


.forgot-link {
margin-top:
-3px;

margin-bottom:
8px;
}

}


/* ============================================================
26. REDUCED MOTION
============================================================ */

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

*,
*::before,
*::after {
animation-duration:
0.01ms !important;

animation-iteration-count:
1 !important;

transition-duration:
0.01ms !important;

scroll-behavior:
auto !important;
}

}