/* ==========================================
   NEXORA POST REQUEST
========================================== */

:root{

    --navy:#0B1F3A;
    --navy-light:#163A70;
    --gold:#D4AF37;
    --gold-soft:#F5E8B5;
    --white:#FFFFFF;
    --bg:#F6F8FC;
    --text:#24344D;
    --muted:#72809A;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

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

    background:
    linear-gradient(
    180deg,
    #ffffff,
    #F7F9FC
    );

    color:var(--text);

    min-height:100vh;

}

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

.request-header{

    position:sticky;

    top:0;

    z-index:1000;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(212,175,55,.18);

}

.back-btn{

    position:absolute;

    left:18px;

    width:46px;

    height:46px;

    border:none;

    border-radius:14px;

    background:#fff;

    color:var(--navy);

    font-size:18px;

    box-shadow:
    0 10px 28px rgba(0,0,0,.08);

}

.header-title{

    text-align:center;

}

.header-title h2{

    color:var(--navy);

    font-size:20px;

    font-weight:800;

}

.header-title span{

    color:var(--muted);

    font-size:13px;

}

/* ==========================================
   PAGE
========================================== */

.request-page{

    padding:20px;

}

/* ==========================================
   HERO
========================================== */

.hero-card{

    background:
    linear-gradient(
    145deg,
    #fff,
    #F9FBFF
    );

    border-radius:28px;

    padding:28px;

    text-align:center;

    border:1px solid rgba(212,175,55,.25);

    box-shadow:
    0 18px 40px rgba(0,0,0,.06);

    margin-bottom:22px;

}

.hero-icon{

    width:72px;

    height:72px;

    margin:auto;

    margin-bottom:18px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    linear-gradient(
    135deg,
    var(--navy),
    var(--navy-light)
    );

    color:#fff;

    font-size:28px;

}

.hero-card h1{

    color:var(--navy);

    font-size:30px;

    font-weight:700;

    margin-bottom:10px;

}

.hero-card p{

    color:var(--muted);

    line-height:1.7;

    font-size:15px;

}

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

.request-card{

    background:#fff;

    border-radius:28px;

    padding:24px;

    border:1px solid rgba(212,175,55,.20);

    box-shadow:
    0 15px 35px rgba(0,0,0,.06);

}

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

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:var(--navy);

}

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    padding:16px;

    border-radius:18px;

    border:1px solid #D9E1EC;

    background:#FAFCFF;

    font-family:inherit;

    font-size:15px;

    color:var(--text);

    outline:none;

    transition:.25s;

}

.form-group textarea{

    resize:vertical;

    min-height:160px;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    border-color:var(--gold);

    background:#fff;

    box-shadow:
    0 0 0 4px rgba(212,175,55,.15);

}

/* ==========================================
   FILE INPUT
========================================== */

#image{

    padding:14px;

    background:#fff;

}

/* ==========================================
   PREVIEW
========================================== */

.image-preview-container{

    margin-top:16px;

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(90px,1fr));

    gap:12px;

}

.preview-image{

    width:100%;

    height:90px;

    object-fit:cover;

    border-radius:14px;

    border:1px solid #E3E8F2;

}

/* ==========================================
   REMOVE IMAGES
========================================== */

.clear-images-btn{

    display:none;

    margin-top:16px;

    width:100%;

    padding:14px;

    border:none;

    border-radius:16px;

    background:#FBEAEA;

    color:#C62828;

    font-weight:600;

    cursor:pointer;

}

/* ==========================================
   STATUS MESSAGE
========================================== */

.status-message{

    display:none;

    margin-bottom:18px;

    padding:16px;

    border-radius:16px;

    font-size:14px;

    font-weight:600;

}

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

.submit-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    var(--navy),
    var(--navy-light)
    );

    color:#fff;

    font-size:16px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    cursor:pointer;

    box-shadow:
    0 14px 30px rgba(11,31,58,.20);

    transition:.25s;

}

.submit-btn:hover{

    transform:translateY(-2px);

}

.submit-btn:disabled{

    opacity:.7;

    cursor:not-allowed;

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:480px){

    .request-page{

        padding:16px;

    }

    .hero-card{

        padding:22px;

    }

    .request-card{

        padding:18px;

    }

    .hero-card h1{

        font-size:25px;

    }

}

/* ==========================================================
   NEXORA — CYBERMUSE-INSPIRED RESPONSIVE THEME
   MOBILE • TABLET • DESKTOP
   Square geometry • dark editorial • champagne accents
========================================================== */

:root{
    --nx-bg:#08070c;
    --nx-bg-2:#17121c;
    --nx-panel:rgba(255,255,255,.045);
    --nx-panel-strong:rgba(255,255,255,.075);
    --nx-line:rgba(255,255,255,.11);
    --nx-line-gold:rgba(234,223,207,.26);
    --nx-text:#ffffff;
    --nx-muted:rgba(255,255,255,.62);
    --nx-muted-2:rgba(255,255,255,.78);
    --nx-champagne:#eadfcf;
    --nx-gold:#d4af37;
    --nx-danger:#ff9aad;
    --nx-success:#a9efbd;
}

html,
body{
    min-height:100%;
    background:
        radial-gradient(circle at 10% 5%,rgba(141,118,255,.12),transparent 28%),
        radial-gradient(circle at 90% 75%,rgba(212,175,55,.08),transparent 30%),
        linear-gradient(135deg,var(--nx-bg),var(--nx-bg-2) 60%,#29221f) !important;
    color:var(--nx-text) !important;
}

body{
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

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

button,
input,
select,
textarea,
a{
    -webkit-tap-highlight-color:transparent;
}

button,
input,
select,
textarea{
    border-radius:0 !important;
}

input,
select,
textarea{
    background:rgba(255,255,255,.045) !important;
    color:#fff !important;
    border:1px solid var(--nx-line) !important;
    box-shadow:none !important;
    outline:none !important;
}

input::placeholder,
textarea::placeholder{
    color:rgba(255,255,255,.38) !important;
}

input:focus,
select:focus,
textarea:focus{
    border-color:rgba(234,223,207,.48) !important;
    box-shadow:0 0 0 2px rgba(234,223,207,.06) !important;
}

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

::-webkit-scrollbar{
    width:5px;
    height:5px;
}
::-webkit-scrollbar-track{
    background:#09080c;
}
::-webkit-scrollbar-thumb{
    background:rgba(234,223,207,.35);
    border-radius:0;
}

@media (min-width:768px) and (max-width:1199px){
    body{
        font-size:15px;
    }
}

@media (min-width:1200px){
    body{
        font-size:16px;
    }
}


/* ================= POST REQUEST ================= */
.request-header{
    background:rgba(8,7,12,.94) !important;
    border-bottom:1px solid var(--nx-line) !important;
    backdrop-filter:blur(18px) !important;
}
.back-btn{
    border-radius:0 !important;
    background:rgba(255,255,255,.055) !important;
    color:var(--nx-champagne) !important;
    border:1px solid var(--nx-line) !important;
    box-shadow:none !important;
}
.header-title h2,
.hero-card h1,
.form-group label{
    color:#fff !important;
}
.header-title span,
.hero-card p{
    color:var(--nx-muted) !important;
}
.request-page{
    width:min(100%,900px) !important;
    margin:auto !important;
}
.hero-card,
.request-card{
    border-radius:0 !important;
    background:var(--nx-panel) !important;
    border:1px solid var(--nx-line) !important;
    box-shadow:none !important;
    backdrop-filter:blur(14px) !important;
}
.hero-icon{
    border-radius:0 !important;
    background:rgba(234,223,207,.10) !important;
    color:var(--nx-champagne) !important;
    border:1px solid rgba(234,223,207,.22) !important;
}
.preview-image{
    border-radius:0 !important;
    border:1px solid var(--nx-line) !important;
}
.clear-images-btn,
.status-message{
    border-radius:0 !important;
}
.clear-images-btn{
    background:rgba(255,154,173,.10) !important;
    color:var(--nx-danger) !important;
    border:1px solid rgba(255,154,173,.28) !important;
}
.submit-btn{
    border-radius:0 !important;
    background:#fff !important;
    color:#111 !important;
    box-shadow:none !important;
}
@media(max-width:767px){
    .request-page{padding:14px 0 !important;}
    .hero-card,.request-card{border-left:0 !important;border-right:0 !important;padding:20px 15px !important;}
    .hero-card h1{font-size:1.75rem !important;}
}
@media(min-width:768px) and (max-width:1199px){
    .request-page{padding:28px 24px !important;}
}
@media(min-width:1200px){
    .request-page{padding:42px 0 !important;}
}