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

:root{
--black:#080808;
--violet:#8d76ff;
--gold:#d4af37;
--champagne:#eadfcf;
--white:#fff;
--muted:rgba(255,255,255,.68);
}

body{
min-height:100vh;
font-family:'Poppins',sans-serif;
color:var(--white);
background:
linear-gradient(135deg,rgba(7,7,10,.94),rgba(19,15,24,.9)),
url("../assets/images/cybermuse-bg.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
overflow-x:hidden;
}

a{
color:inherit;
text-decoration:none;
}

button,
input,
select,
textarea{
font:inherit;
}

.glow{
position:fixed;
border-radius:50%;
filter:blur(120px);
pointer-events:none;
z-index:-1;
}

.glowViolet{
width:380px;
height:380px;
background:rgba(141,118,255,.2);
top:-120px;
left:-120px;
}

.glowGold{
width:450px;
height:450px;
background:rgba(212,175,55,.14);
right:-150px;
bottom:-150px;
}

.museHeader{
height:78px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 6%;
background:rgba(8,8,10,.94);
border-bottom:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(16px);
position:sticky;
top:0;
z-index:100;
}

.brand{
display:flex;
align-items:center;
gap:8px;
font-family:'Space Grotesk',sans-serif;
font-weight:700;
font-size:1.05rem;
letter-spacing:4px;
}

.brand img{
width:50px;
height:50px;
object-fit:contain;
}

.backLink{
padding:12px 18px;
border:1px solid rgba(255,255,255,.22);
font-size:.68rem;
letter-spacing:2px;
text-transform:uppercase;
}

.musePage{
width:min(100%,950px);
margin:auto;
padding:70px 22px 90px;
}

.formIntro{
max-width:720px;
margin-bottom:45px;
}

.smallTitle{
font-size:.68rem;
letter-spacing:5px;
text-transform:uppercase;
color:#f5d98d;
margin-bottom:16px;
}

.formIntro h1{
font-family:'Space Grotesk',sans-serif;
font-size:clamp(3.5rem,9vw,6.5rem);
line-height:.9;
letter-spacing:-4px;
text-transform:uppercase;
margin-bottom:22px;
}

.formIntro h1 span{
display:block;
color:transparent;
-webkit-text-stroke:1px rgba(255,255,255,.75);
}

.formIntro p{
line-height:1.8;
color:var(--muted);
}

#museForm{
display:flex;
flex-direction:column;
gap:20px;
}

.formSection{
padding:30px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(18px);
}

.sectionHeading{
display:flex;
gap:15px;
align-items:flex-start;
padding-bottom:20px;
margin-bottom:24px;
border-bottom:1px solid rgba(255,255,255,.1);
}

.sectionHeading>span{
width:42px;
height:42px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.2);
color:var(--champagne);
flex-shrink:0;
}

.sectionHeading h2{
font-family:'Space Grotesk',sans-serif;
font-size:1.8rem;
text-transform:uppercase;
}

.sectionHeading p{
margin-top:5px;
font-size:.85rem;
color:var(--muted);
}

.photoGuide{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-bottom:18px;
}

.photoGuide span{
padding:12px;
text-align:center;
border:1px solid rgba(255,255,255,.1);
font-size:.65rem;
letter-spacing:1.5px;
text-transform:uppercase;
}

.dropZone{
min-height:220px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:25px;
text-align:center;
border:1px dashed rgba(255,255,255,.3);
background:rgba(255,255,255,.035);
cursor:pointer;
}

.dropZone.dragging{
border-color:var(--champagne);
background:rgba(234,223,207,.08);
}

.uploadIcon{
width:55px;
height:55px;
display:grid;
place-items:center;
margin-bottom:15px;
border:1px solid rgba(255,255,255,.2);
font-size:1.8rem;
color:var(--champagne);
}

.dropZone h3{
font-family:'Space Grotesk',sans-serif;
text-transform:uppercase;
}

.dropZone p{
margin-top:7px;
font-size:.75rem;
color:var(--muted);
}

.uploadButton{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:18px;
padding:14px 22px;
background:var(--white);
color:var(--black);
font-size:.68rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
}

.previewGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:18px;
}

.previewCard{
position:relative;
aspect-ratio:4/5;
overflow:hidden;
background:#111;
}

.previewCard img{
width:100%;
height:100%;
object-fit:cover;
}

.removeImage{
position:absolute;
top:8px;
right:8px;
width:32px;
height:32px;
border:0;
background:rgba(0,0,0,.75);
color:white;
font-size:1.2rem;
}

.coverBadge{
position:absolute;
left:8px;
bottom:8px;
padding:7px 9px;
background:var(--champagne);
color:#111;
font-size:.55rem;
font-weight:700;
text-transform:uppercase;
}

.imageCount{
margin-top:12px;
font-size:.68rem;
color:var(--muted);
}

.privacyNotice{
padding:16px;
margin-bottom:22px;
border-left:3px solid var(--gold);
background:rgba(212,175,55,.08);
font-size:.84rem;
line-height:1.7;
color:var(--muted);
}

.privacyNotice strong{
display:block;
color:var(--champagne);
}

.formGrid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.inputGroup{
display:flex;
flex-direction:column;
gap:8px;
}

.fullWidth{
grid-column:1/-1;
}

.inputGroup label{
font-size:.66rem;
letter-spacing:1.8px;
text-transform:uppercase;
}

.inputGroup input,
.inputGroup select,
.inputGroup textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.05);
color:white;
outline:none;
border-radius:0;
}

.inputGroup input,
.inputGroup select{
height:54px;
padding:0 15px;
}

.inputGroup textarea{
min-height:140px;
padding:15px;
resize:vertical;
}

.inputGroup input:focus,
.inputGroup select:focus,
.inputGroup textarea:focus{
border-color:var(--champagne);
}

.inputGroup select option{
background:#17141c;
}

.inputGroup small{
font-size:.64rem;
color:rgba(255,255,255,.45);
}

.consentSection{
display:flex;
flex-direction:column;
gap:12px;
}

.checkRow{
display:flex;
gap:12px;
align-items:flex-start;
padding:14px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.09);
}

.checkRow input{
width:19px;
height:19px;
accent-color:var(--gold);
flex-shrink:0;
}

.checkRow span{
font-size:.8rem;
line-height:1.6;
color:var(--muted);
}

.submitBtn{
width:100%;
height:62px;
border:0;
background:white;
color:#111;
font-size:.74rem;
font-weight:700;
letter-spacing:2.5px;
text-transform:uppercase;
cursor:pointer;
}

.submitBtn:disabled{
opacity:.5;
cursor:not-allowed;
}

.progressContainer{
display:none;
height:5px;
background:rgba(255,255,255,.1);
overflow:hidden;
}

.progressBar{
width:0;
height:100%;
background:linear-gradient(90deg,var(--violet),var(--champagne),var(--gold));
transition:.3s;
}

.formStatus{
text-align:center;
font-size:.75rem;
color:var(--muted);
}

.formStatus.success{
color:#9ef0b4;
}

.formStatus.error{
color:#ff9aad;
}

.successModal{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
padding:22px;
background:rgba(0,0,0,.72);
backdrop-filter:blur(14px);
z-index:1000;
}

.successBox{
width:100%;
max-width:460px;
padding:38px 26px;
background:linear-gradient(135deg,#f5efe6,#ddd0bf);
color:#111;
text-align:center;
}

.successIcon{
width:70px;
height:70px;
display:grid;
place-items:center;
margin:0 auto 20px;
background:#111;
color:var(--champagne);
font-size:2rem;
}

.successBox h2{
font-family:'Space Grotesk',sans-serif;
font-size:2.2rem;
text-transform:uppercase;
margin-bottom:14px;
}

.successBox p{
line-height:1.7;
color:#555;
}

.successBox a{
display:flex;
align-items:center;
justify-content:center;
height:52px;
margin-top:22px;
background:#111;
color:white;
font-size:.68rem;
letter-spacing:2px;
text-transform:uppercase;
}

@media(max-width:700px){

body{
background-attachment:scroll;
}

.museHeader{
height:72px;
padding:0 16px;
}

.brand{
font-size:.85rem;
letter-spacing:3px;
gap:4px;
}

.brand img{
width:44px;
height:44px;
}

.backLink{
padding:10px;
font-size:.56rem;
letter-spacing:1px;
}

.musePage{
padding:50px 16px 70px;
}

.formIntro{
margin-bottom:35px;
}

.formIntro h1{
font-size:3.4rem;
letter-spacing:-3px;
}

.formSection{
padding:22px 16px;
}

.sectionHeading h2{
font-size:1.45rem;
}

.photoGuide,
.formGrid{
grid-template-columns:1fr;
}

.fullWidth{
grid-column:auto;
}

.previewGrid{
grid-template-columns:repeat(2,1fr);
}

.submitBtn{
height:58px;
}

}
/* NATIONAL ID */

.idUploadBox{
min-height:150px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:7px;
border:1px dashed rgba(255,255,255,.3);
background:rgba(255,255,255,.04);
cursor:pointer;
text-align:center;
}

.idUploadBox:hover{
border-color:var(--champagne);
}

.idUploadIcon{
font-size:2rem;
color:var(--champagne);
}

.idUploadBox strong{
font-size:.75rem;
letter-spacing:2px;
text-transform:uppercase;
}

.idPreview{
display:none;
width:100%;
margin-top:10px;
max-height:260px;
object-fit:contain;
background:#111;
}
/* ==========================================
   SEXUAL ORIENTATION FIELD
========================================== */

#sexualOrientation{
width:100%;
height:58px;
padding:0 45px 0 17px;

border:1px solid rgba(255,255,255,.14);
border-radius:0;
outline:none;

background:
linear-gradient(
45deg,
transparent 50%,
rgba(255,255,255,.65) 50%
),
linear-gradient(
135deg,
rgba(255,255,255,.65) 50%,
transparent 50%
),
rgba(255,255,255,.055);

background-position:
calc(100% - 20px) 25px,
calc(100% - 14px) 25px;

background-size:6px 6px;
background-repeat:no-repeat;

color:#fff;

appearance:none;
-webkit-appearance:none;

transition:.3s;
}

#sexualOrientation:focus{
border-color:var(--champagne);
background-color:rgba(255,255,255,.085);

box-shadow:
0 0 0 3px rgba(234,223,207,.07);
}

#sexualOrientation option{
background:#17141c;
color:#fff;
}


/* ORIENTATION PUBLIC CONSENT */

.checkRow:has(#orientationPublicConsent){
border-left:3px solid var(--gold);
background:rgba(212,175,55,.07);
}

.checkRow:has(#orientationPublicConsent) span{
color:rgba(255,255,255,.78);
}


/* MOBILE */

@media(max-width:700px){

#sexualOrientation{
height:54px;

background-position:
calc(100% - 20px) 23px,
calc(100% - 14px) 23px;
}

}