/*==============================================================
ACMOBOOK POST OPPORTUNITY
FOUNDATION
==============================================================*/

:root{

    --post-primary:#6C63FF;
    --post-primary-dark:#564EF5;
    --post-secondary:#00D4FF;

    --post-success:#10B981;
    --post-warning:#F59E0B;
    --post-danger:#EF4444;

    --post-bg:#F8FAFC;
    --post-card:#FFFFFF;

    --post-border:#E5E7EB;
    --post-border-hover:#D4D4D8;

    --post-heading:#0F172A;
    --post-text:#475569;
    --post-light:#94A3B8;

    --post-radius:24px;
    --post-radius-sm:16px;

    --post-shadow:
    0 15px 45px rgba(15,23,42,.08);

    --post-transition:.35s ease;

}

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

.acmo-post{

    background:var(--post-bg);

    min-height:100vh;

    padding:50px 0 90px;

}

.acmo-post-container{

    width:min(1250px,92%);

    margin:auto;

}

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

.acmo-post-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    margin-bottom:35px;

}

.acmo-post-header h1{

    font-size:46px;

    font-weight:800;

    color:var(--post-heading);

    margin:12px 0;

}

.acmo-post-header p{

    font-size:17px;

    color:var(--post-text);

    max-width:650px;

    line-height:1.8;

}

.acmo-post-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#EEF2FF;

    color:var(--post-primary);

    border-radius:999px;

    padding:10px 18px;

    font-weight:700;

}

.acmo-save-draft{

    border:none;

    background:#fff;

    padding:16px 26px;

    border-radius:18px;

    font-weight:700;

    cursor:pointer;

    box-shadow:var(--post-shadow);

    transition:.3s;

}

.acmo-save-draft:hover{

    transform:translateY(-3px);

}

/*==============================================================
PROGRESS
==============================================================*/

.acmo-progress-card{

    background:#fff;

    border-radius:24px;

    padding:28px;

    box-shadow:var(--post-shadow);

    margin-bottom:40px;

}

.acmo-progress-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.acmo-step-count{

    font-size:15px;

    color:var(--post-text);

}

.acmo-step-count strong{

    color:var(--post-primary);

    font-size:20px;

}

#saveStatus{

    font-size:14px;

    color:var(--post-success);

}

.acmo-progress{

    height:12px;

    border-radius:999px;

    background:#EEF2F7;

    overflow:hidden;

}

.acmo-progress-fill{

    width:14.28%;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
    90deg,
    var(--post-primary),
    var(--post-secondary));

    transition:.5s;

}

/*==============================================================
WIZARD STEPS
==============================================================*/

.wizard-step{

    display:none;

    animation:acmoFade .45s ease;

}

.wizard-step.active{

    display:block;

}

@keyframes acmoFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*==============================================================
SECTION CARD
==============================================================*/

.acmo-card{

    background:#fff;

    border-radius:28px;

    padding:40px;

    box-shadow:var(--post-shadow);

    margin-bottom:30px;

}

.acmo-card-header{

    margin-bottom:35px;

}

.acmo-card-header h2{

    font-size:30px;

    font-weight:800;

    color:var(--post-heading);

    margin-bottom:12px;

}

.acmo-card-header p{

    color:var(--post-text);

    line-height:1.8;

    font-size:16px;

}

/*==============================================================
GRID SYSTEM
==============================================================*/

.acmo-grid{

    display:grid;

    gap:25px;

}

.acmo-grid-2{

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

}

.acmo-grid-3{

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

}

.acmo-grid-4{

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

}

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

.acmo-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.acmo-group label{

    font-size:15px;

    font-weight:700;

    color:var(--post-heading);

}

.acmo-required{

    color:#EF4444;

}

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

.acmo-input,

.acmo-select,

.acmo-textarea{

    width:100%;

    border:2px solid var(--post-border);

    background:#fff;

    border-radius:18px;

    padding:17px 20px;

    font-size:15px;

    color:var(--post-heading);

    transition:.3s;

    outline:none;

}

.acmo-textarea{

    resize:vertical;

    min-height:140px;

}

.acmo-input:focus,

.acmo-select:focus,

.acmo-textarea:focus{

    border-color:var(--post-primary);

    box-shadow:

    0 0 0 5px rgba(108,99,255,.08);

}

/*==============================================================
PLACEHOLDER
==============================================================*/

.acmo-input::placeholder,

.acmo-textarea::placeholder{

    color:#94A3B8;

}

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

.acmo-help{

    color:var(--post-light);

    font-size:13px;

}

/*==============================================================
FIELD ROW
==============================================================*/

.acmo-row{

    display:grid;

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

    gap:25px;

}

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

.acmo-input-wrap{

    position:relative;

}

.acmo-input-wrap i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#94A3B8;

    font-size:18px;

}

.acmo-input-wrap input{

    padding-left:52px;

}

/*==============================================================
CHARACTER COUNTER
==============================================================*/

.acmo-counter{

    text-align:right;

    color:#94A3B8;

    font-size:12px;

    margin-top:8px;

}

/*==============================================================
ERROR
==============================================================*/

.acmo-error{

    color:#EF4444;

    font-size:13px;

    margin-top:8px;

    display:none;

}

.acmo-group.invalid .acmo-input,

.acmo-group.invalid .acmo-select,

.acmo-group.invalid .acmo-textarea{

    border-color:#EF4444;

}

.acmo-group.invalid .acmo-error{

    display:block;

}

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

.acmo-group.valid .acmo-input,

.acmo-group.valid .acmo-select,

.acmo-group.valid .acmo-textarea{

    border-color:#10B981;

}

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

.acmo-divider{

    height:1px;

    background:#EEF2F7;

    margin:35px 0;

}

/*==============================================================
OPTION CARDS
==============================================================*/

.acmo-option-grid{

    display:grid;

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

    gap:20px;

}

.acmo-option{

    position:relative;

    cursor:pointer;

}

.acmo-option input{

    display:none;

}

.acmo-option-card{

    background:#fff;

    border:2px solid var(--post-border);

    border-radius:22px;

    padding:28px 20px;

    text-align:center;

    transition:all .35s ease;

    min-height:170px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.acmo-option-card i{

    font-size:42px;

    color:var(--post-primary);

    margin-bottom:18px;

}

.acmo-option-card h5{

    font-size:17px;

    font-weight:700;

    color:var(--post-heading);

    margin:0;

}

.acmo-option-card span{

    font-size:13px;

    color:var(--post-light);

    margin-top:8px;

}

.acmo-option:hover .acmo-option-card{

    transform:translateY(-6px);

    border-color:var(--post-primary);

    box-shadow:0 18px 45px rgba(108,99,255,.12);

}

.acmo-option input:checked + .acmo-option-card{

    border-color:var(--post-primary);

    background:#EEF2FF;

    box-shadow:0 18px 45px rgba(108,99,255,.18);

}

.acmo-option input:checked + .acmo-option-card::after{

    content:"✓";

    position:absolute;

    top:16px;

    right:16px;

    width:28px;

    height:28px;

    border-radius:50%;

    background:var(--post-primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:14px;

    font-weight:700;

}

/*==============================================================
CHECKBOX CHIPS
==============================================================*/

.acmo-chip-group{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.acmo-chip{

    position:relative;

}

.acmo-chip input{

    display:none;

}

.acmo-chip label{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:999px;

    border:2px solid var(--post-border);

    background:#fff;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

    color:var(--post-heading);

}

.acmo-chip:hover label{

    border-color:var(--post-primary);

}

.acmo-chip input:checked + label{

    background:var(--post-primary);

    color:#fff;

    border-color:var(--post-primary);

}

/*==============================================================
RADIO PILLS
==============================================================*/

.acmo-pill-group{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.acmo-pill{

    position:relative;

}

.acmo-pill input{

    display:none;

}

.acmo-pill label{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 22px;

    border-radius:999px;

    border:2px solid var(--post-border);

    cursor:pointer;

    transition:.3s;

    font-weight:700;

    background:#fff;

}

.acmo-pill:hover label{

    border-color:var(--post-primary);

}

.acmo-pill input:checked + label{

    background:#EEF2FF;

    color:var(--post-primary);

    border-color:var(--post-primary);

}

/*==============================================================
NUMBER STEPPER
==============================================================*/

.acmo-stepper{

    display:flex;

    align-items:center;

    gap:18px;

    width:max-content;

    padding:12px;

    border-radius:20px;

    border:2px solid var(--post-border);

    background:#fff;

}

.acmo-step-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:14px;

    background:#EEF2FF;

    color:var(--post-primary);

    font-size:24px;

    cursor:pointer;

    transition:.3s;

}

.acmo-step-btn:hover{

    background:var(--post-primary);

    color:#fff;

}

.acmo-step-value{

    width:60px;

    text-align:center;

    font-size:24px;

    font-weight:700;

    color:var(--post-heading);

}

/*==============================================================
TOGGLE SWITCH
==============================================================*/

.acmo-switch{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:20px 24px;

    border:2px solid var(--post-border);

    border-radius:20px;

    background:#fff;

}

.acmo-switch-title{

    font-weight:700;

    color:var(--post-heading);

}

.acmo-switch input{

    display:none;

}

.acmo-slider{

    position:relative;

    width:58px;

    height:32px;

    background:#CBD5E1;

    border-radius:999px;

    transition:.3s;

    cursor:pointer;

}

.acmo-slider::before{

    content:"";

    position:absolute;

    width:24px;

    height:24px;

    left:4px;

    top:4px;

    border-radius:50%;

    background:#fff;

    transition:.3s;

}

.acmo-switch input:checked + .acmo-slider{

    background:var(--post-primary);

}

.acmo-switch input:checked + .acmo-slider::before{

    transform:translateX(26px);

}

/*==============================================================
UPLOAD CARD
==============================================================*/

.acmo-upload{

    border:2px dashed var(--post-border);

    border-radius:24px;

    padding:45px;

    text-align:center;

    background:#fff;

    transition:.3s;

    cursor:pointer;

}

.acmo-upload:hover{

    border-color:var(--post-primary);

    background:#F8FAFF;

}

.acmo-upload i{

    font-size:54px;

    color:var(--post-primary);

    margin-bottom:16px;

}

.acmo-upload h4{

    margin:0 0 10px;

    font-size:20px;

    color:var(--post-heading);

}

.acmo-upload p{

    color:var(--post-light);

    margin:0;

}

.acmo-upload input{

    display:none;

}

/*==============================================================
BOTTOM NAVIGATION
==============================================================*/

.wizard-navigation{

    position:sticky;

    bottom:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:20px 30px;

    margin-top:40px;

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

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.6);

    border-radius:24px;

    box-shadow:0 20px 50px rgba(15,23,42,.10);

    z-index:100;

}

/*==============================================================
BUTTONS
==============================================================*/

.wizard-btn,

.wizard-btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:58px;

    padding:0 34px;

    border-radius:18px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.35s ease;

}

.wizard-btn{

    border:none;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--post-primary),
        var(--post-secondary)
    );

    box-shadow:0 15px 35px rgba(108,99,255,.25);

}

.wizard-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 25px 50px rgba(108,99,255,.30);

}

.wizard-btn:active{

    transform:scale(.98);

}

.wizard-btn-outline{

    background:#fff;

    color:var(--post-heading);

    border:2px solid var(--post-border);

}

.wizard-btn-outline:hover{

    border-color:var(--post-primary);

    color:var(--post-primary);

    transform:translateY(-2px);

}

/*==============================================================
LOADING
==============================================================*/

.acmo-loading{

    position:relative;

    overflow:hidden;

}

.acmo-loading::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.6),

        transparent

    );

    animation:loading 1.2s infinite;

}

@keyframes loading{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(100%);

    }

}

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

.acmo-success{

    padding:18px 22px;

    border-radius:18px;

    background:#ECFDF5;

    color:#10B981;

    border:1px solid #A7F3D0;

    font-weight:700;

}

/*==============================================================
WARNING
==============================================================*/

.acmo-warning{

    padding:18px 22px;

    border-radius:18px;

    background:#FFFBEB;

    color:#D97706;

    border:1px solid #FCD34D;

    font-weight:700;

}

/*==============================================================
ERROR
==============================================================*/

.acmo-danger{

    padding:18px 22px;

    border-radius:18px;

    background:#FEF2F2;

    color:#DC2626;

    border:1px solid #FCA5A5;

    font-weight:700;

}

/*==============================================================
BADGES
==============================================================*/

.acmo-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    background:#EEF2FF;

    color:var(--post-primary);

}

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

.wizard-step{

    animation:stepFade .45s ease;

}

@keyframes stepFade{

    from{

        opacity:0;

        transform:translateX(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*==============================================================
CARD HOVER
==============================================================*/

.acmo-card{

    transition:.35s ease;

}

.acmo-card:hover{

    transform:translateY(-3px);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94A3B8;

}

/*==============================================================
TABLET
==============================================================*/

@media(max-width:992px){

    .acmo-post-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .acmo-grid-4{

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

    }

    .acmo-grid-3{

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

    }

    .acmo-grid-2{

        grid-template-columns:1fr;

    }

    .acmo-row{

        grid-template-columns:1fr;

    }

}

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

@media(max-width:768px){

    .acmo-post{

        padding:25px 0 120px;

    }

    .acmo-post-header h1{

        font-size:32px;

    }

    .acmo-card{

        padding:24px;

        border-radius:20px;

    }

    .acmo-progress-card{

        padding:20px;

    }

    .acmo-option-grid{

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

    }

    .wizard-navigation{

        left:15px;

        right:15px;

        bottom:15px;

        padding:16px;

        gap:15px;

    }

    .wizard-btn,

    .wizard-btn-outline{

        flex:1;

        height:52px;

        font-size:15px;

        padding:0 18px;

    }

}

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

@media(max-width:480px){

    .acmo-option-grid{

        grid-template-columns:1fr;

    }

    .acmo-post-container{

        width:94%;

    }

    .acmo-card-header h2{

        font-size:24px;

    }

}

.main-category-grid{

display:grid;

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

gap:24px;

margin-top:30px;

}

.main-category-card{

background:#fff;

border:2px solid #eef2ff;

border-radius:22px;

padding:30px;

cursor:pointer;

transition:.35s;

text-align:center;

}

.main-category-card:hover{

transform:translateY(-8px);

border-color:#6C63FF;

}

.main-category-card.active{

border-color:#6C63FF;

background:#f5f7ff;

}

.subcategory-wrapper{

margin-top:60px;

}

.subcategory-grid{

display:flex;

flex-wrap:wrap;

gap:14px;

margin-top:20px;

}

.subcategory-chip{

border:none;

background:#eef2ff;

padding:12px 22px;

border-radius:50px;

cursor:pointer;

font-weight:600;

}

.subcategory-chip.active{

background:linear-gradient(135deg,#6C63FF,#00D4FF);

color:#fff;

}