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

:root {
--navy: #0d1b2a;
--ink: #1a1a1a;
--gold: #b8976a;
--gold-light: #d4b483;
--mist: #c8cfd8;
--white: #f5f3ef;
--glass: rgba(245,243,239,0.06);
--glass-border: rgba(184,151,106,0.22);
--panel: rgba(13,27,42,0.82);
}

html, body {
height: 100%;
font-family: 'Jost', sans-serif;
font-weight: 300;
color: var(--white);
overflow: hidden;
font-size: 1.05rem;
}

.bg{
position: fixed;
inset: 0;
z-index: 0;
background: url(/images/bg-yacht-001.jpg);
background-repeat: no-repeat;
background-size: cover;
}

/* Dark overlay on photo */
.bg::before {
content: '';
position: absolute; 
inset: 0;
background: linear-gradient(
    to right,
    rgba(10,17,28,0.55) 0%,
    rgba(10,17,28,0.35) 45%,
    rgba(10,17,28,0.75) 100%
);
}

/* Ocean wave SVG overlay — repurposed */
.bg::before {
content: '';
position: absolute; 
inset: 0;
background:
    radial-gradient(ellipse 70% 50% at 20% 60%, rgba(184,151,106,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(100,150,200,0.06) 0%, transparent 55%);
}

/* Horizontal lines nautical chart effect */
.bg::after {
content: '';
position: absolute; 
inset: 0;
background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 59px,
    rgba(184,151,106,0.04) 59px,
    rgba(184,151,106,0.04) 60px
);
}

/* Yacht silhouette */
.yacht-silhouette {
position: fixed;
bottom: 0; 
left: 0;
width: 68%;
height: 75%;
z-index: 1;
opacity: 0.13;
background:
    linear-gradient(to top, #b8976a 0%, transparent 70%);
clip-path: polygon(
    0% 100%,
    0% 55%, 5% 52%, 8% 40%, 10% 38%, 15% 36%,
    18% 20%, 19% 18%, 20% 36%, 45% 28%, 55% 26%,
    60% 30%, 65% 32%, 70% 34%, 80% 38%, 85% 40%,
    90% 42%, 95% 44%, 100% 46%, 100% 100%
);
animation: floatYacht 8s ease-in-out infinite;
}

@keyframes floatYacht {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}

/* Left brand column */
.brand-col {
position: fixed;
left: 0; top: 0;
width: 55%;
height: 100%;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 0 9vh 7vw;
}

.brand-tagline {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(0.75rem, 1.1vw, 1rem);
letter-spacing: 0.35em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 1rem;
opacity: 0.8;
}

.brand-name {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(3.5rem, 7vw, 6.5rem);
letter-spacing: 0.12em;
line-height: 0.9;
color: var(--white);
}

.brand-name span {
display: block;
font-size: clamp(0.6rem, 1vw, 0.85rem);
font-family: 'Jost', sans-serif;
font-weight: 200;
letter-spacing: 0.55em;
color: var(--mist);
margin-top: 1.2rem;
text-transform: uppercase;
}

.brand-line {
width: 60px;
height: 1px;
background: linear-gradient(to right, var(--gold), transparent);
margin-bottom: 2rem;
}

/* ── PANEL ── */
.panel-col {
position: fixed;
right: 0; 
top: 0;
width: 25vw;
min-width: 400px;
height: 100%;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
padding: 0 40px;
background: var(--panel);
backdrop-filter: blur(20px) saturate(1.2);
border-left: 1px solid var(--glass-border);
}

.panel-col::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
}

/* ── AUTH BOX ── */
.auth-box {
width: 100%;
max-width: 340px;
}

/* Page header */
.auth-header {
text-align: center;
margin-bottom: 2rem;
}

.auth-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 2.2rem;
font-weight: 300;
letter-spacing: 0.2em;
color: var(--white);
}

.auth-logo-sub {
display: block;
font-size: 0.6rem;
letter-spacing: 0.4em;
color: var(--gold);
text-transform: uppercase;
margin-top: 0.3rem;
font-weight: 200;
}

/* Tab switcher */
.tabs {
display: flex;
border-bottom: 1px solid rgba(184,151,106,0.2);
margin-bottom: 2rem;
}

.tab {
flex: 1;
text-align: center;
padding: 0.7rem 0;
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--mist);
cursor: pointer;
transition: color 0.3s;
position: relative;
user-select: none;
}

.tab::after {
content: '';
position: absolute;
bottom: -1px; left: 20%; right: 20%;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transition: transform 0.3s ease;
}

.tab.active {
color: var(--gold);
}

.tab.active::after {
transform: scaleX(1);
}

/* Forms */
.form-view { display: none; }
.form-view.active { display: block; }

.field {
    position: relative;
    margin-bottom: 1.1rem;
}

.field label {
display: block;
font-size: 0.58rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.45rem;
}

.field input {
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(184,151,106,0.2);
border-radius: 2px;
padding: 0.75rem 1rem;
color: var(--white);
font-family: 'Jost', sans-serif;
font-weight: 300;
font-size: 0.85rem;
outline: none;
transition: border-color 0.25s, background 0.25s;
letter-spacing: 0.05em;
}

.field input::placeholder { color: rgba(200,207,216,0.3); }

.field input:focus {
border-color: var(--gold);
background: rgba(184,151,106,0.06);
}

.error-block{
color: #CD5C5C;
margin-bottom: 0;
font-size: 1rem;
}

/* Row of two */
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
}

/* Checkbox row */
.check-row {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0.8rem 0 1.4rem;
position: relative;
}

.check-row .error-block{
position: absolute;
top: 20px;
}

.check-row input[type="checkbox"] {
margin: 4px 0px 5px;
accent-color: var(--gold);
width: 13px; height: 13px;
cursor: pointer;
}

.check-row label {
font-size: 0.68rem;
color: var(--mist);
letter-spacing: 0.05em;
cursor: pointer;
margin-bottom: 0;
}

.check-row a {
color: var(--gold-light);
text-decoration: none;
}

/* CTA button */
.btn-primary {
width: 100%;
padding: 0.85rem;
background: linear-gradient(135deg, var(--gold) 0%, #9a7c52 100%);
border: none;
border-radius: 2px;
color: #0d1b2a;
font-family: 'Jost', sans-serif;
font-weight: 400;
font-size: 0.65rem;
letter-spacing: 0.4em;
text-transform: uppercase;
cursor: pointer;
transition: opacity 0.25s, transform 0.2s;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}

.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }

/* Divider */
.divider {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.2rem;
}
.divider::before, .divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(184,151,106,0.18);
}
.divider span {
font-size: 0.58rem;
letter-spacing: 0.2em;
color: rgba(200,207,216,0.4);
text-transform: uppercase;
}

/* Social buttons */
.sso-buttons {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-bottom: 1.5rem;
}

.btn-sso {
width: 100%;
padding: 0.7rem 1rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(184,151,106,0.18);
border-radius: 2px;
color: var(--white);
font-family: 'Jost', sans-serif;
font-weight: 300;
font-size: 0.72rem;
letter-spacing: 0.12em;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 0.7rem;
}

.btn-sso:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(184,151,106,0.38);
}

.btn-sso svg {
width: 16px; height: 16px;
flex-shrink: 0;
}

/* Forgot / footer links */
.auth-footer {
text-align: center;
font-size: 0.8rem;
color: rgba(200,207,216,0.45);
letter-spacing: 0.08em;
}

.auth-footer a {
color: var(--gold-light);
text-decoration: none;
transition: color 0.2s;
}

.auth-footer a:hover { color: var(--white); }

/* Gold ornament */
.ornament {
text-align: center;
margin-bottom: 1.5rem;
opacity: 0.5;
}
.ornament svg { width: 50px; height: 10px; }

/* Animate in */
@keyframes slideUp {
from { opacity: 0; transform: translateY(18px); }
to   { opacity: 1; transform: translateY(0); }
}

.auth-box { animation: slideUp 0.7s cubic-bezier(.22,.68,0,1) both; }
.brand-col { animation: slideUp 1s 0.2s cubic-bezier(.22,.68,0,1) both; }


.modal{
color: #444;
padding-left: 0;
font-size: 1rem;
padding: 30px;
}

.modal-body *{
font-family: 'Jost', sans-serif !important;
}

.modal-title{
text-align: center;
font-family: 'Jost', sans-serif !important;
font-weight: bold;
}

.form-alerts{
margin-bottom: 30px;
}

.form-control-feedback{
display: none;
}


#form-register-username-suggest{
    color: var(--gold-light);
    font-size: 0.9rem;
    float: right;
    position: absolute;
    right: 0;
    top: -4px;
}

.page-prompt{
    text-align: center;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}


.iti__selected-country,
.iti__selected-country:hover
{
   background: var(--gold) !important;
}

.iti__dropdown-content{
    background: var(--navy);
}

.iti__country{
    font-size: 0.9rem;
}

.iti--allow-dropdown{
    width: 100%;
}

.has-error .iti__flag-container{
    top: -55px;
}