/* ============================================================
1. ROOT
============================================================ */

:root {
--auth-black: #0b0b0b;
--auth-dark: #151515;

--auth-white: #ffffff;

--auth-bg: #f6f6f6;
--auth-input: #fafafa;

--auth-text: #222222;
--auth-gray: #707070;
--auth-light-gray: #a0a0a0;

--auth-border: #dddddd;

--auth-gold: #d4af37;
--auth-gold-light: #f1d875;

--auth-red: #c93535;
--auth-green: #16804b;

--auth-radius: 14px;
--auth-card-radius: 24px;

--auth-transition: 0.3s ease;
}


/* ============================================================
2. RESET
============================================================ */

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


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


body {
width: 100%;
min-height: 100vh;

background: var(--auth-bg);

color: var(--auth-text);

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

-webkit-font-smoothing: antialiased;
}


a {
text-decoration: none;
}


button,
input {
font: inherit;
}


button {
border: none;
}


/* ============================================================
3. AUTH PAGE
============================================================ */

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

display: grid;

grid-template-columns:
minmax(360px, 0.9fr)
minmax(520px, 1.1fr);

background: var(--auth-bg);
}


/* ============================================================
4. LEFT BRAND PANEL
============================================================ */

.auth-brand-panel {
position: relative;

min-height: 100vh;

padding: 42px 52px;

display: flex;
flex-direction: column;
justify-content: space-between;

overflow: hidden;

color: var(--auth-white);

background:
linear-gradient(
145deg,
rgba(4, 4, 4, 0.87),
rgba(10, 10, 10, 0.94)
),
url(
"https://images.unsplash.com/photo-1498050108023-c5249f4df085"
)
center / cover
no-repeat;
}


/* GOLD LIGHT EFFECT */

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

position: absolute;

width: 450px;
height: 450px;

top: -250px;
right: -210px;

border-radius: 50%;

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

pointer-events: none;
}


/* SECOND LIGHT EFFECT */

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

position: absolute;

width: 330px;
height: 330px;

bottom: -190px;
left: -170px;

border-radius: 50%;

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

pointer-events: none;
}


/* ============================================================
5. LOGO
============================================================ */

.auth-logo {
position: relative;
z-index: 2;

width: fit-content;

display: inline-flex;
align-items: center;

color: var(--auth-white);

font-family:
"Cinzel",
serif;

font-size: 20px;

font-weight: 800;

letter-spacing: 2px;

text-transform: uppercase;

transition:
transform var(--auth-transition);
}


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

color: var(--auth-gold);
}


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

position: absolute;

left: 0;
bottom: -7px;

width: 38px;
height: 2px;

border-radius: 20px;

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

transition:
width var(--auth-transition);
}


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


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


/* ============================================================
6. BRAND CONTENT
============================================================ */

.auth-brand-content {
position: relative;
z-index: 2;

width: 100%;
max-width: 500px;
}


.auth-badge {
width: fit-content;

display: inline-flex;
align-items: center;

margin-bottom: 17px;

padding: 6px 12px;

color: var(--auth-gold-light);

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

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

border-radius: 999px;

font-size: 9px;

font-weight: 600;

letter-spacing: 1.2px;

text-transform: uppercase;
}


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

margin-bottom: 15px;

color: var(--auth-white);

font-size:
clamp(
30px,
3.5vw,
45px
);

font-weight: 650;

line-height: 1.2;

letter-spacing: -1px;
}


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

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

font-size: 12px;

line-height: 1.8;
}


/* ============================================================
7. BACK HOME
============================================================ */

.auth-back-link {
position: relative;
z-index: 2;

width: fit-content;

display: inline-flex;

align-items: center;

gap: 8px;

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

font-size: 10.5px;

font-weight: 500;

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


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

font-size: 10px;
}


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

transform: translateX(-3px);
}


/* ============================================================
8. RIGHT FORM PANEL
============================================================ */

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

padding: 45px;

display: flex;

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

background:
radial-gradient(
circle at top right,
rgba(212, 175, 55, 0.055),
transparent 32%
),
linear-gradient(
145deg,
#f6f6f6,
#ffffff
);
}


/* ============================================================
9. REGISTER CARD
============================================================ */

.auth-card {
width: 100%;
max-width: 470px;

padding: 34px;

background: var(--auth-white);

border:
1px solid
rgba(0, 0, 0, 0.075);

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

box-shadow:
0 25px 70px
rgba(0, 0, 0, 0.09);
}


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


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

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


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

margin-bottom: 7px;

color: #b38c13;

font-size: 9px;

font-weight: 700;

letter-spacing: 1.4px;

text-transform: uppercase;
}


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

color: var(--auth-black);

font-size: 24px;

font-weight: 650;

line-height: 1.3;

letter-spacing: -0.4px;
}


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

font-size: 10.5px;

line-height: 1.65;
}


/* ============================================================
11. FORM
============================================================ */

.auth-form {
width: 100%;
}


.form-group {
width: 100%;

margin-bottom: 15px;
}


.form-group label {
display: block;

margin-bottom: 6px;

color: #363636;

font-size: 10px;

font-weight: 600;
}


/* ============================================================
12. FIRST NAME / LAST NAME
============================================================ */

.form-row {
width: 100%;

display: grid;

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

gap: 13px;
}


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

.input-wrapper {
position: relative;

width: 100%;
}


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

padding:
0 44px
0 40px;

outline: none;

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

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

background:
var(--auth-input);

color:
var(--auth-text);

font-size: 11px;

font-weight: 400;

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


.input-wrapper input::placeholder {
color: #a6a6a6;

font-size: 10.5px;
}


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


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

border-color: var(--auth-gold);

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


/* ============================================================
14. LEFT INPUT ICON
============================================================ */

.input-icon {
position: absolute;

top: 50%;
left: 14px;

transform: translateY(-50%);

color: #949494;

font-size: 11px;

pointer-events: none;

transition:
color var(--auth-transition);
}


.input-wrapper:focus-within
.input-icon {
color: #b38c13;
}


/* ============================================================
15. PASSWORD EYE
============================================================ */

.password-toggle {
position: absolute;

top: 50%;
right: 8px;

width: 34px;
height: 34px;

transform: translateY(-50%);

display: flex;

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

padding: 0;

background: transparent;

border-radius: 50%;

color: #898989;

font-size: 11px;

cursor: pointer;

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


.password-toggle:hover {
color: var(--auth-black);

background: #eeeeee;
}


.password-toggle:active {
transform:
translateY(-50%)
scale(0.94);
}


/* ============================================================
16. TERMS
============================================================ */

.remember-row {
width: 100%;

display: flex;

align-items: flex-start;

gap: 9px;

margin:
3px 0 19px;

color: #606060;

cursor: pointer;
}


.remember-row input {
flex-shrink: 0;

width: 14px;
height: 14px;

margin-top: 2px;

accent-color:
var(--auth-gold);

cursor: pointer;
}


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

line-height: 1.65;
}


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

font-weight: 600;

text-decoration: underline;

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

text-underline-offset: 2px;

transition:
color var(--auth-transition);
}


.terms-row a:hover {
color: #a77f08;
}


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

.auth-message {
display: none;

width: 100%;

margin-bottom: 14px;

padding: 10px 12px;

border-radius: 10px;

font-size: 9.5px;

line-height: 1.55;
}


/* ERROR */

.auth-message.error {
display: block;

color: #a92d2d;

background:
rgba(201, 53, 53, 0.07);

border:
1px solid
rgba(201, 53, 53, 0.18);
}


/* SUCCESS */

.auth-message.success {
display: block;

color: #146b41;

background:
rgba(22, 128, 75, 0.07);

border:
1px solid
rgba(22, 128, 75, 0.18);
}


/* ============================================================
18. CREATE ACCOUNT BUTTON
============================================================ */

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

padding: 11px 18px;

display: flex;

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

gap: 9px;

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

border-radius: 999px;

background: var(--auth-black);

color: var(--auth-white);

font-size: 10.5px;

font-weight: 650;

cursor: pointer;

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


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

transition:
transform var(--auth-transition);
}


.auth-submit-btn:hover {
transform: translateY(-2px);

color: var(--auth-black);

background: var(--auth-gold);

border-color: var(--auth-gold);

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


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


.auth-submit-btn:active {
transform: translateY(0);
}


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

cursor: not-allowed;

transform: none;

box-shadow: none;
}


/* ============================================================
19. LOGIN SWITCH
============================================================ */

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

color: var(--auth-gray);

text-align: center;

font-size: 9.5px;

line-height: 1.6;
}


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

color: var(--auth-black);

font-weight: 700;

transition:
color var(--auth-transition);
}


.auth-switch a:hover {
color: #a77f08;
}


/* ============================================================
20. LOGIN PAGE SUPPORT
============================================================ */

.password-label-row {
display: flex;

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

gap: 15px;
}


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

color: var(--auth-gray);

font-size: 9px;

font-weight: 500;

transition:
color var(--auth-transition);
}


.forgot-link:hover {
color: #a77f08;
}


/* ============================================================
21. DIVIDER SUPPORT
============================================================ */

.auth-divider {
width: 100%;

margin: 22px 0;

display: flex;

align-items: center;

gap: 12px;
}


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

flex: 1;

height: 1px;

background: #e6e6e6;
}


.auth-divider span {
color: #a2a2a2;

font-size: 9px;

text-transform: uppercase;
}


/* ============================================================
22. FOCUS
============================================================ */

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

outline-offset: 2px;
}


/* ============================================================
23. TEXT SELECTION
============================================================ */

::selection {
color: var(--auth-black);

background: var(--auth-gold);
}


/* ============================================================
24. TABLET
============================================================ */

@media (max-width: 1050px) {

.auth-page {
grid-template-columns:
minmax(300px, 0.75fr)
minmax(470px, 1.25fr);
}


.auth-brand-panel {
padding:
36px 32px;
}


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


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

}


/* ============================================================
25. MOBILE
============================================================ */

@media (max-width: 780px) {

.auth-page {
display: block;

min-height: 100vh;
}


/* BRAND TOP */

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

padding:
23px 20px 29px;

display: block;
}


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


.auth-brand-content {
max-width: 520px;

margin:
45px auto 0;

text-align: center;
}


.auth-badge {
margin-bottom: 12px;
}


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

margin:
0 auto 12px;

font-size: 27px;

line-height: 1.25;
}


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

margin: 0 auto;

font-size: 10.5px;
}


.auth-back-link {
margin-top: 30px;
}


/* FORM */

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

padding:
32px 18px
45px;
}


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

padding: 28px 24px;

border-radius: 20px;
}


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


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


/* NAME + LAST NAME STACK */

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

gap: 0;
}

}


/* ============================================================
26. SMALL PHONE
============================================================ */

@media (max-width: 480px) {

.auth-brand-panel {
padding:
20px 17px 26px;
}


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


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


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


.auth-form-panel {
padding:
25px 13px
38px;
}


.auth-card,
.auth-card-register {
padding:
24px 18px;

border-radius: 18px;
}


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


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


.form-group {
margin-bottom: 14px;
}


.input-wrapper input {
height: 45px;

font-size: 10.5px;
}


.input-wrapper input::placeholder {
font-size: 10px;
}


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

font-size: 10px;
}

}


/* ============================================================
27. VERY SMALL PHONE
============================================================ */

@media (max-width: 360px) {

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


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


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


.remember-row span {
font-size: 9px;
}

}


/* ============================================================
28. 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;
}

}