/* ==========================================
   NEXORA SELL PAGE
   PREMIUM UI
========================================== */

:root{

    --navy:#0B1F3A;
    --navy-light:#163A70;

    --gold:#D4AF37;
    --gold-soft:#F5E8B5;

    --white:#FFFFFF;

    --bg:#F7F9FC;

    --text:#1F2937;

    --muted:#72809A;

    --border:rgba(212,175,55,.22);

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:

    radial-gradient(circle at top,#ffffff,#F7F9FC 70%);

    color:var(--text);

    min-height:100vh;

}

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

.page-container{

    max-width:760px;

    margin:auto;

    padding-bottom:100px;

}

/* ==========================
TOP BAR
========================== */

.top-bar{

    position:sticky;

    top:0;

    z-index:999;

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px;

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

    backdrop-filter:blur(18px);

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

}

.back-btn{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:24px;

    color:var(--navy);

    background:#fff;

    border-radius:18px;

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

    box-shadow:

    0 12px 30px rgba(0,0,0,.08);

}

.title-area{

    flex:1;

}

.title-area h2{

    color:var(--navy);

    font-size:26px;

    font-weight:700;

}

.title-area p{

    margin-top:6px;

    color:var(--muted);

    line-height:1.5;

    font-size:14px;

}

/* ==========================
LISTING SELECTOR
========================== */

.listing-selector{

    padding:28px 18px 10px;

}

.listing-selector h3{

    color:var(--navy);

    font-size:24px;

    font-weight:700;

}

.listing-selector p{

    margin-top:8px;

    color:var(--muted);

    line-height:1.6;

    font-size:14px;

}

.listing-options{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-top:24px;

}

/* ==========================
GOODS & SERVICES CARD
========================== */

.listing-card{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.95),
    rgba(247,249,252,.95)
    );

    border-radius:26px;

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

    padding:28px 18px;

    cursor:pointer;

    transition:.28s;

    box-shadow:

    0 16px 38px rgba(11,31,58,.08);

}

.listing-card::before{

    content:"";

    position:absolute;

    top:-60px;

    right:-60px;

    width:140px;

    height:140px;

    background:

    radial-gradient(

    rgba(212,175,55,.18),

    transparent 70%

    );

}

.listing-card:hover{

    transform:translateY(-5px);

}

.listing-card.active{

    background:

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

    border-color:var(--gold);

}

.listing-card.active h4,

.listing-card.active p{

    color:#fff;

}

.listing-card.active .listing-icon{

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

    color:var(--gold);

}

/* ==========================
ICON
========================== */

.listing-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    border-radius:20px;

    font-size:34px;

    background:

    linear-gradient(
    145deg,
    #fff,
    #EEF3F8
    );

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

}

.listing-card h4{

    color:var(--navy);

    font-size:22px;

    font-weight:700;

}

.listing-card p{

    margin-top:10px;

    color:var(--muted);

    font-size:14px;

    line-height:1.6;

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

.product-form{

    padding:20px 18px;

}

/* ==========================
SECTIONS
========================== */

.section{

    margin-bottom:24px;

}

.section label{

    display:block;

    margin-bottom:12px;

    color:var(--navy);

    font-size:15px;

    font-weight:600;

}

/* ==========================
UPLOAD BOX
========================== */

.upload-box{

    position:relative;

    overflow:hidden;

    border:2px dashed rgba(212,175,55,.45);

    border-radius:26px;

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.96),
    rgba(247,249,252,.96)
    );

    transition:.28s;

    cursor:pointer;

}

.upload-box:hover{

    transform:translateY(-3px);

    border-color:var(--gold);

    box-shadow:

    0 16px 40px rgba(11,31,58,.08);

}

.upload-content{

    min-height:170px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:40px 24px;

}

.upload-content span{

    color:var(--muted);

    font-size:15px;

    line-height:1.8;

    font-weight:500;

}



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

#imagePreview{

    display:grid;

    grid-template-columns:

    repeat(auto-fill,minmax(95px,1fr));

    gap:14px;

    margin-top:18px;

}

.preview-wrapper{

    position:relative;

    height:95px;

    border-radius:18px;

    overflow:hidden;

    background:#fff;

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

    box-shadow:

    0 8px 20px rgba(0,0,0,.06);

}

.preview-wrapper img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.remove-image{

    position:absolute;

    top:8px;

    right:8px;

    width:28px;

    height:28px;

    border:none;

    border-radius:50%;

    background:#E53935;

    color:#fff;

    cursor:pointer;

    font-size:14px;

    font-weight:700;

}

/* ==========================
INPUTS
========================== */

input,

select,

textarea{

    width:100%;

    border:none;

    outline:none;

    border-radius:22px;

    padding:18px;

    background:#fff;

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

    font-size:15px;

    color:var(--text);

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

    transition:.25s;

    box-shadow:

    0 8px 20px rgba(0,0,0,.04);

}

input:focus,

select:focus,

textarea:focus{

    border-color:var(--gold);

    box-shadow:

    0 0 0 4px rgba(212,175,55,.12);

}

/* ==========================
SELECT
========================== */

select{

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    background-image:

    linear-gradient(45deg,transparent 50%,var(--gold) 50%),

    linear-gradient(135deg,var(--gold) 50%,transparent 50%);

    background-position:

    calc(100% - 22px) calc(50% - 3px),

    calc(100% - 16px) calc(50% - 3px);

    background-size:6px 6px;

    background-repeat:no-repeat;

}

/* ==========================
TEXTAREA
========================== */

textarea{

    min-height:180px;

    resize:vertical;

    line-height:1.7;

}
/* ==========================
PUBLISH BUTTON
========================== */

.publish-btn{

    width:100%;

    border:none;

    border-radius:24px;

    padding:18px;

    margin-top:12px;

    background:

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

    color:#fff;

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

    font-size:17px;

    font-weight:700;

    cursor:pointer;

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

    box-shadow:

    0 18px 40px rgba(11,31,58,.22);

    transition:.28s;

}

.publish-btn:hover{

    transform:translateY(-3px);

}

.publish-btn:active{

    transform:scale(.98);

}

.publish-btn:disabled{

    opacity:.7;

    cursor:not-allowed;

    transform:none;

}

/* ==========================
SUCCESS MODAL
========================== */

.success-modal{

    position:fixed;

    inset:0;

    background:rgba(7,18,38,.72);

    backdrop-filter:blur(8px);

    display:none;

    align-items:center;

    justify-content:center;

    padding:22px;

    z-index:99999;

}

.success-box{

    width:100%;

    max-width:390px;

    background:#fff;

    border-radius:30px;

    padding:36px 28px;

    text-align:center;

    animation:popup .35s ease;

    box-shadow:

    0 30px 70px rgba(0,0,0,.22);

}

.success-box::before{

    content:"✓";

    display:flex;

    align-items:center;

    justify-content:center;

    width:82px;

    height:82px;

    margin:0 auto 22px;

    border-radius:50%;

    background:

    linear-gradient(
    135deg,
    #22C55E,
    #16A34A
    );

    color:#fff;

    font-size:38px;

    font-weight:700;

}

.success-box h2{

    color:var(--navy);

    font-size:28px;

    font-weight:700;

    margin-bottom:12px;

}

.success-box p{

    color:var(--muted);

    font-size:15px;

    line-height:1.8;

    margin-bottom:26px;

}

#successBtn{

    width:100%;

    border:none;

    border-radius:20px;

    padding:16px;

    background:

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

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

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

}

/* ==========================
ANIMATIONS
========================== */

@keyframes popup{

    from{

        opacity:0;

        transform:

        translateY(20px)

        scale(.94);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

        translateY(18px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}

.section{

    animation:fadeUp .45s ease;

}

/* ==========================
SCROLLBAR
========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:rgba(212,175,55,.45);

    border-radius:999px;

}

::-webkit-scrollbar-track{

    background:#f5f5f5;

}

/* ==========================
RESPONSIVE
========================== */

@media(max-width:768px){

    .listing-options{

        grid-template-columns:1fr;

    }

    .listing-card{

        padding:24px 18px;

    }

    .listing-icon{

        width:64px;

        height:64px;

        font-size:30px;

    }

    .title-area h2{

        font-size:22px;

    }

    .listing-selector h3{

        font-size:22px;

    }

    .success-box{

        border-radius:26px;

    }

}

@media(max-width:480px){

    .page-container{

        padding-bottom:90px;

    }

    .top-bar{

        padding:16px;

    }

    .back-btn{

        width:46px;

        height:46px;

        border-radius:16px;

    }

    .listing-selector{

        padding:22px 16px 10px;

    }

    .product-form{

        padding:18px 16px;

    }

    .section{

        margin-bottom:20px;

    }

    input,
    select,
    textarea{

        padding:16px;

        border-radius:18px;

    }

    .publish-btn{

        border-radius:18px;

    }

}
/*=========================================
  NEXORA ADD PRODUCT
  PART 1 - PAGE LAYOUT
=========================================*/

:root{

    --primary:#142B47;
    --primary-light:#1C3D67;

    --gold:#C9A54B;
    --gold-light:#E1C16E;

    --background:#f6f8fc;

    --white:#ffffff;

    --text:#1f2937;

    --muted:#64748b;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--background);

    color:var(--text);

    padding-bottom:40px;

}

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

.page-container{

    width:100%;

    max-width:760px;

    margin:auto;

}

/*========================
TOP BAR
========================*/

.top-bar{

    position:sticky;

    top:0;

    z-index:100;

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 18px;

    background:#ffffff;

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

}

.back-btn{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#eef4ff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:20px;

    font-weight:700;

    transition:.25s;

}

.back-btn:hover{

    transform:scale(1.05);

}

.title-area{

    flex:1;

}

.title-area h2{

    font-size:26px;

    font-weight:900;

    color:#142B47;

    letter-spacing:-.5px;

}

.title-area h2::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    background:#E1C16E;

    border-radius:999px;

    margin-top:6px;

}

.title-area p{

    margin-top:8px;

    color:#64748b;

    font-size:13px;

    line-height:1.6;

}

/*========================
LISTING SELECTOR
========================*/

.listing-selector{

    padding:20px 16px 10px;

}

.listing-selector h3{

    font-size:22px;

    font-weight:800;

    color:#142B47;

}

.listing-selector p{

    margin-top:6px;

    color:#64748b;

    font-size:14px;

    line-height:1.6;

}

/*========================
GOODS / SERVICES
========================*/

.listing-options{

    display:grid;

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

    gap:14px;

    margin-top:18px;

}

.listing-card{

    position:relative;

    background:#ffffff;

    border:1.5px solid #E1C16E;

    border-radius:22px;

    padding:18px;

    overflow:hidden;

    cursor:pointer;

    transition:.25s ease;

    box-shadow:

    0 8px 22px rgba(15,23,42,.08);

}

.listing-card::after{

    content:"";

    position:absolute;

    width:90px;

    height:90px;

    right:-45px;

    top:-45px;

    border-radius:50%;

    background:rgba(225,193,110,.12);

}

.listing-card:hover{

    transform:translateY(-4px);

}

.listing-card.active{

    background:#142B47;

    border-color:#C9A54B;

}

.listing-card.active h4,

.listing-card.active p{

    color:#ffffff;

}

.listing-card.active .listing-icon{

    background:#ffffff;

    color:#142B47;

}

/*========================
ICON
========================*/

.listing-icon{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef4ff;

    border-radius:16px;

    font-size:26px;

    margin-bottom:14px;

    position:relative;

    z-index:2;

}

.listing-card h4{

    position:relative;

    z-index:2;

    color:#142B47;

    font-size:19px;

    font-weight:800;

    margin-bottom:6px;

}

.listing-card p{

    position:relative;

    z-index:2;

    color:#64748b;

    font-size:13px;

    line-height:1.5;

}

/*========================
SECTION SPACING
========================*/

.product-form{

    padding:18px 16px 30px;

}

.section{

    margin-bottom:22px;

}

.section label{

    display:block;

    margin-bottom:10px;

    color:#142B47;

    font-size:14px;

    font-weight:700;

}
/*=========================================
  NEXORA ADD PRODUCT
  PART 2 - FORM
=========================================*/

/*========================
UPLOAD BOX
========================*/

.upload-box{

    background:#ffffff;

    border:1.5px solid #E1C16E;

    border-radius:22px;

    box-shadow:
    0 8px 22px rgba(15,23,42,.08);

    overflow:hidden;

    transition:.25s;

}

.upload-box:hover{

    transform:translateY(-3px);

    border-color:#C9A54B;

}

.upload-content{

    min-height:170px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    padding:28px;

    cursor:pointer;

}

.upload-content span{

    color:#64748b;

    font-size:14px;

    font-weight:600;

    text-align:center;

    line-height:1.7;

}


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

#imagePreview{

    display:grid;

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

    gap:12px;

    margin-top:16px;

}

.preview-wrapper{

    position:relative;

    width:100%;

    aspect-ratio:1;

    overflow:hidden;

    border-radius:16px;

    background:#ffffff;

    border:1.5px solid #E1C16E;

    box-shadow:
    0 6px 18px rgba(0,0,0,.08);

}

.preview-wrapper img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.remove-image{

    position:absolute;

    top:6px;

    right:6px;

    width:28px;

    height:28px;

    border:none;

    border-radius:50%;

    background:#dc2626;

    color:#ffffff;

    cursor:pointer;

    font-size:14px;

    font-weight:700;

}

/*========================
INPUTS
========================*/

input,

select,

textarea{

    width:100%;

    padding:16px 18px;

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

    font-size:15px;

    color:#1f2937;

    background:#ffffff;

    border:1.5px solid #E1C16E;

    border-radius:18px;

    outline:none;

    transition:.25s;

    box-shadow:
    0 4px 12px rgba(15,23,42,.05);

}

input::placeholder,

textarea::placeholder{

    color:#94a3b8;

}

input:focus,

select:focus,

textarea:focus{

    border-color:#C9A54B;

    box-shadow:
    0 0 0 4px rgba(201,165,75,.12);

}

/*========================
SELECT
========================*/

select{

    appearance:none;

    -webkit-appearance:none;

    cursor:pointer;

    background-image:

    linear-gradient(45deg,transparent 50%,#C9A54B 50%),

    linear-gradient(135deg,#C9A54B 50%,transparent 50%);

    background-position:

    calc(100% - 22px) calc(50% - 3px),

    calc(100% - 16px) calc(50% - 3px);

    background-size:6px 6px;

    background-repeat:no-repeat;

}

/*========================
TEXTAREA
========================*/

textarea{

    min-height:170px;

    resize:vertical;

    line-height:1.7;

}

/*========================
HELP TEXT
========================*/

.field-note{

    margin-top:8px;

    font-size:12px;

    color:#64748b;

    line-height:1.5;

}

/*========================
DIVIDER
========================*/

.form-divider{

    height:1px;

    margin:28px 0;

    background:linear-gradient(
        to right,
        transparent,
        #E1C16E,
        transparent
    );

}

/*=========================================
  NEXORA ADD PRODUCT
  PART 3 - BUTTONS, MODAL & RESPONSIVE
=========================================*/

/*========================
PUBLISH BUTTON
========================*/

.publish-btn{

    width:100%;

    height:56px;

    margin-top:10px;

    border:none;

    border-radius:18px;

    background:#142B47;

    color:#ffffff;

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

    font-size:16px;

    font-weight:800;

    letter-spacing:.3px;

    cursor:pointer;

    transition:.25s;

    border:1.5px solid #C9A54B;

    box-shadow:

    0 8px 18px rgba(20,43,71,.18);

}

.publish-btn:hover{

    transform:translateY(-2px);

    background:#18365a;

}

.publish-btn:active{

    transform:scale(.98);

}

.publish-btn:disabled{

    opacity:.65;

    cursor:not-allowed;

}

/*========================
SUCCESS MODAL
========================*/

.success-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(8px);

    z-index:9999;

    padding:24px;

}

.success-box{

    width:100%;

    max-width:380px;

    background:#ffffff;

    border-radius:24px;

    padding:32px 24px;

    text-align:center;

    border:1.5px solid #E1C16E;

    box-shadow:

    0 20px 45px rgba(15,23,42,.18);

    animation:popup .3s ease;

}

.success-box::before{

    content:"✓";

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    border-radius:50%;

    background:#22c55e;

    color:#ffffff;

    font-size:34px;

    font-weight:700;

}

.success-box h2{

    color:#142B47;

    font-size:24px;

    font-weight:800;

    margin-bottom:10px;

}

.success-box p{

    color:#64748b;

    font-size:14px;

    line-height:1.7;

    margin-bottom:22px;

}

#successBtn{

    width:100%;

    height:52px;

    border:none;

    border-radius:16px;

    background:#142B47;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    border:1.5px solid #C9A54B;

}

/*========================
ANIMATIONS
========================*/

@keyframes popup{

    from{

        opacity:0;

        transform:translateY(18px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.section{

    animation:fadeUp .35s ease;

}

/*========================
SCROLLBAR
========================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#C9A54B;

    border-radius:999px;

}

::-webkit-scrollbar-track{

    background:#f3f4f6;

}

/*========================
RESPONSIVE
========================*/

@media(max-width:768px){

    .listing-options{

        grid-template-columns:1fr;

    }

}

@media(max-width:480px){

    .page-container{

        max-width:100%;

    }

    .top-bar{

        padding:14px;

    }

    .title-area h2{

        font-size:22px;

    }

    .listing-selector{

        padding:18px 14px 8px;

    }

    .product-form{

        padding:16px 14px 30px;

    }

    .listing-card{

        padding:16px;

    }

    .listing-icon{

        width:52px;

        height:52px;

        font-size:22px;

    }

    input,

    select,

    textarea{

        font-size:14px;

        padding:15px 16px;

    }

    .publish-btn{

        height:54px;

    }

    .success-box{

        padding:28px 20px;

        border-radius:22px;

    }

}
/* ==========================================
   RECTANGULAR UI OVERRIDE
========================================== */

/* Main cards */

.listing-card,
.upload-box,
.preview-wrapper,
.success-box{

    border-radius:0 !important;

}

/* Form fields */

input,
select,
textarea{

    border-radius:0 !important;

}

/* Buttons */

.publish-btn,
#successBtn{

    border-radius:0 !important;

}

/* Back button */

.back-btn{

    border-radius:0 !important;

}

/* Listing icons */

.listing-icon{

    border-radius:0 !important;

}

/* Image remove button */

.remove-image{

    border-radius:0 !important;

}

/* Success checkmark */

.success-box::before{

    border-radius:0 !important;

}

/* Top bar */

.top-bar{

    border-radius:0 !important;

}

/* Upload preview images */

#imagePreview img{

    border-radius:0 !important;

}

/* Inputs */

input,
select,
textarea{

    padding:18px;

    border:2px solid #C9A54B;

}

/* Cards */

.listing-card{

    border:2px solid #C9A54B;

    box-shadow:0 6px 18px rgba(20,43,71,.08);

}

/* Upload area */

.upload-box{

    border:2px solid #C9A54B;

}

/* Publish button */

.publish-btn{

    height:58px;

    border:2px solid #C9A54B;

}

/* Success modal */

.success-box{

    border:2px solid #C9A54B;

}
/*==================================
CUSTOM CATEGORY SELECT
==================================*/

.custom-select{

    width:100%;

    height:58px;

    border:2px solid #C9A54B;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    cursor:pointer;

    transition:.25s;

    user-select:none;

}

.custom-select:hover{

    border-color:#142B47;

}

.custom-select.active{

    border-color:#142B47;

    box-shadow:0 0 0 4px rgba(20,43,71,.08);

}

#selectedCategory{

    font-size:15px;

    font-weight:600;

    color:#1f2937;

}

.select-arrow{

    font-size:18px;

    color:#C9A54B;

    transition:.25s;

}

.custom-select.active .select-arrow{

    transform:rotate(180deg);

}

/*==================================
CATEGORY MODAL
==================================*/

.category-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    align-items:flex-end;

    justify-content:center;

    z-index:99999;

    backdrop-filter:blur(6px);

}

.category-modal.show{

    display:flex;

}

/*==================================
BOTTOM SHEET
==================================*/

.category-sheet{

    width:100%;

    max-width:700px;

    height:80vh;

    background:#fff;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    animation:slideUp .25s ease;

}

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

.category-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:20px;

    background:#142B47;

    color:#fff;

}

.category-header h3{

    font-size:22px;

    font-weight:800;

}

.category-header button{

    width:42px;

    height:42px;

    border:none;

    background:#fff;

    color:#142B47;

    cursor:pointer;

    font-size:20px;

    font-weight:700;

}

/*==================================
CATEGORY LIST
==================================*/

.category-list{

    flex:1;

    overflow-y:auto;

    background:#f7f8fb;

}

.category-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 22px;

    background:#fff;

    border-bottom:1px solid #ececec;

    font-size:16px;

    font-weight:600;

    color:#1f2937;

    cursor:pointer;

    transition:.2s;

}

.category-item:hover{

    background:#eef4ff;

}

.category-item.selected{

    background:#142B47;

    color:#fff;

}

.category-item.selected::after{

    content:"✓";

    margin-left:auto;

    font-size:18px;

    font-weight:700;

    color:#E1C16E;

}

/*==================================
SCROLLBAR
==================================*/

.category-list::-webkit-scrollbar{

    width:6px;

}

.category-list::-webkit-scrollbar-thumb{

    background:#C9A54B;

}

/*==================================
ANIMATION
==================================*/

@keyframes slideUp{

    from{

        transform:translateY(100%);

    }

    to{

        transform:translateY(0);

    }

}
/* GOODS & SERVICES CARDS */

.listing-card{
    position:relative;
    overflow:hidden;
    padding:28px 24px;
    border-radius:28px !important;
    background:#fff;
    border:2px solid #F1E3B3;
    box-shadow:0 12px 35px rgba(20,43,71,.08);
    transition:.3s ease;
}

.listing-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 45px rgba(20,43,71,.12);
}

/* Active card */

.listing-card.active{
    background:#FFF9ED;          /* Light champagne */
    border-color:#D8B55B;
}

.listing-card.active h4{
    color:#142B47;
}

.listing-card.active p{
    color:#5F6B7A;
}

/* Decorative champagne glow */

.listing-card::after{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    right:-80px;
    top:-80px;
    border-radius:50%;
    background:radial-gradient(
        rgba(216,181,91,.18),
        transparent 70%
    );
}
/* Cards */
.listing-card,
.upload-box,
.success-box{
    border-radius:30px !important;
}

/* Inputs */
input,
select,
textarea,
.custom-select{
    border-radius:20px !important;
}

/* Buttons */
.publish-btn,
#successBtn{
    border-radius:20px !important;
}

/* Back button */
.back-btn{
    border-radius:18px !important;
}

/* Image previews */
.preview-wrapper{
    border-radius:20px !important;
}

.preview-wrapper img{
    border-radius:18px;
}

/* Remove image button */
.remove-image{
    border-radius:50%;
}

/* Category bottom sheet */
.category-sheet{
    border-top-left-radius:30px;
    border-top-right-radius:30px;
}

/* Category header */
.category-header{
    border-top-left-radius:30px;
    border-top-right-radius:30px;
}
.listing-icon{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:#FFF9ED;
    color:#C9A54B;
    font-size:30px;
    margin-bottom:18px;
    border:1px solid rgba(201,165,75,.25);
}

.listing-card.active .listing-icon{
    background:#F7E7B7;
    color:#142B47;
}
.upload-icon{

    font-size:54px;

    color:#C9A54B;

    margin-bottom:18px;

    display:block;

}
.success-actions{
display:flex;
gap:12px;
margin-top:20px;
}

.success-actions button{
flex:1;
padding:14px;
border:none;
border-radius:8px;
font-size:15px;
font-weight:600;
cursor:pointer;
}

#postAnotherBtn{
background:#1877f2;
color:#fff;
}

#leaveBtn{
background:#f1f1f1;
color:#333;
}
#postAnotherBtn{
background:#102A56;
color:#fff;
border:none;
font-weight:600;
}

#postAnotherBtn:hover{
background:#0C2145;
}


/* ==========================================================
   NEXORA — CYBERMUSE-INSPIRED RESPONSIVE VISUAL SYSTEM
   Mobile • Tablet • Desktop
   Dark editorial • champagne accents • square geometry
========================================================== */

:root{
    --nx-bg:#08070c;
    --nx-bg2:#17121c;
    --nx-panel:rgba(255,255,255,.045);
    --nx-panel-strong:rgba(255,255,255,.075);
    --nx-line:rgba(255,255,255,.11);
    --nx-gold-line:rgba(234,223,207,.28);
    --nx-text:#fff;
    --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{
    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-bg2) 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,.52) !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;
}


/* ==========================================================
   ADD PRODUCT / SELL PAGE
========================================================== */

.page-container{
    width:min(100%,980px) !important;
    max-width:980px !important;
    margin:auto !important;
    padding-bottom:110px !important;
}

.top-bar{
    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;
}

.title-area h2,
.listing-selector h3,
.listing-card h4,
.section label,
.success-box h2{
    color:#fff !important;
}

.title-area p,
.listing-selector p,
.listing-card p,
.upload-content span,
.success-box p{
    color:var(--nx-muted) !important;
}

.listing-card{
    border-radius:0 !important;
    background:var(--nx-panel) !important;
    border:1px solid var(--nx-line) !important;
    box-shadow:none !important;
}

.listing-card::before{
    border-radius:0 !important;
    opacity:.25;
}

.listing-card.active{
    background:linear-gradient(135deg,#0b090d,#19131c) !important;
    border-color:rgba(234,223,207,.34) !important;
}

.listing-icon{
    border-radius:0 !important;
    background:rgba(234,223,207,.08) !important;
    color:var(--nx-champagne) !important;
    border:1px solid rgba(234,223,207,.20) !important;
}

.upload-box{
    border-radius:0 !important;
    background:var(--nx-panel) !important;
    border:1px dashed rgba(234,223,207,.34) !important;
    box-shadow:none !important;
}

.upload-box:hover{
    transform:none !important;
    border-color:var(--nx-champagne) !important;
    box-shadow:none !important;
}

.preview-wrapper{
    border-radius:0 !important;
    background:#050505 !important;
    border:1px solid var(--nx-line) !important;
    box-shadow:none !important;
}

.remove-image{
    border-radius:0 !important;
    background:rgba(255,154,173,.92) !important;
    color:#111 !important;
}

.publish-btn{
    border-radius:0 !important;
    background:#fff !important;
    color:#111 !important;
    border:1px solid #fff !important;
    box-shadow:none !important;
}

.success-modal{
    background:rgba(0,0,0,.86) !important;
    backdrop-filter:blur(14px) !important;
}

.success-box{
    border-radius:0 !important;
    background:#141118 !important;
    border:1px solid var(--nx-line) !important;
    box-shadow:none !important;
}

.success-box::before{
    border-radius:0 !important;
    background:var(--nx-champagne) !important;
    color:#111 !important;
}

#successBtn{
    border-radius:0 !important;
    background:#fff !important;
    color:#111 !important;
    border:1px solid #fff !important;
}

/* modal/sheets that may exist later in file */
.modal,
.category-modal,
.condition-modal{
    background:rgba(0,0,0,.86) !important;
    backdrop-filter:blur(14px) !important;
}

.modal-content,
.category-sheet,
.condition-sheet{
    border-radius:0 !important;
    background:#141118 !important;
    color:#fff !important;
    border:1px solid var(--nx-line) !important;
}

/* MOBILE */
@media(max-width:767px){

    .page-container{
        width:100% !important;
        padding-bottom:90px !important;
    }

    .top-bar{
        padding:12px !important;
    }

    .listing-selector,
    .product-form{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .listing-options{
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    .listing-card{
        padding:20px 15px !important;
    }

    .upload-content{
        min-height:145px !important;
        padding:28px 16px !important;
    }

    #imagePreview{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    .preview-wrapper{
        height:92px !important;
    }
}

/* TABLET */
@media(min-width:768px) and (max-width:1199px){

    .page-container{
        max-width:920px !important;
    }

    .listing-options{
        grid-template-columns:repeat(2,1fr) !important;
    }

    .product-form{
        padding:28px !important;
    }

    #imagePreview{
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    }
}

/* DESKTOP */
@media(min-width:1200px){

    .page-container{
        max-width:1120px !important;
    }

    .listing-selector,
    .product-form{
        max-width:980px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .listing-options{
        grid-template-columns:repeat(2,1fr) !important;
        gap:20px !important;
    }

    #imagePreview{
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    }
}