/* =====================================================
   NEXtasko POST TASK PAGE
===================================================== */


/* =====================================================
   GLOBAL
===================================================== */

* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}


body {
    font-family: "Poppins", sans-serif;
    background: #f6f8fc;
    color: #202124;
    overflow-x: hidden;
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {
    width: 100%;
    min-height: 70px;
}


.navbar-brand {
    font-size: 24px;
    color: #1d4ed8 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.task-window-logo {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    object-fit: contain;
}


.brand-icon {
    margin-right: 7px;
}


.nav-link {
    font-weight: 500;
    margin-left: 12px;
}


.nav-link.active {
    color: #1d4ed8 !important;
}


.navbar .btn-primary {
    border-radius: 8px;
    padding: 9px 20px;
}



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

.page-header {
    width: 100%;
    background: linear-gradient(
        135deg,
        #1d4ed8,
        #2563eb
    );

    padding: 55px 5%;
}


.page-header-content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


.page-header h1 {
    color: white;
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 10px;
}


.page-header p {
    color: rgba(255,255,255,0.9);
    font-size: 16px;
    margin: 0;
    max-width: 700px;
}



/* =====================================================
   MAIN LAYOUT
===================================================== */

.main-wrapper {
    width: 100%;
    max-width: 1500px;

    margin: 40px auto;

    padding-left: 5%;
    padding-right: 5%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(320px, 0.9fr);

    gap: 30px;

    align-items: start;
}



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

.task-card,
.pricing-card {
    background: white;

    border-radius: 16px;

    border: 1px solid #e5e7eb;

    box-shadow:
        0 5px 20px rgba(0,0,0,0.05);

    width: 100%;
}



/* =====================================================
   TASK CARD
===================================================== */

.card-header-custom {
    padding: 28px 32px;

    border-bottom: 1px solid #e5e7eb;
}


.card-header-custom h2 {
    font-size: 22px;
    font-weight: 600;

    margin: 0 0 7px;
}


.card-header-custom h2 i {
    color: #2563eb;
    margin-right: 8px;
}


.card-header-custom p {
    margin: 0;

    color: #6b7280;

    font-size: 14px;
}


.card-body-custom {
    padding: 32px;
}



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

.form-group-custom {
    width: 100%;
    margin-bottom: 25px;
}


.form-group-custom label {
    display: block;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 8px;

    color: #374151;
}


.form-control,
.form-select {
    width: 100%;

    min-height: 48px;

    border: 1px solid #d1d5db;

    border-radius: 9px;

    padding: 11px 14px;

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

    font-size: 14px;

    box-shadow: none;
}


textarea.form-control {
    min-height: 140px;

    resize: vertical;
}


.form-control:focus,
.form-select:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,0.1);
}


.form-group-custom small {
    display: block;

    margin-top: 7px;

    font-size: 12px;

    color: #6b7280;
}


.optional {
    color: #9ca3af;

    font-weight: 400;
}



/* =====================================================
   TWO COLUMN FORM ROW
===================================================== */

.form-grid-2 {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

    width: 100%;
}



/* =====================================================
   BUDGET
===================================================== */

.budget-box {
    width: 100%;

    padding: 24px;

    margin-top: 10px;

    border-radius: 12px;

    background: #eff6ff;

    border: 1px solid #bfdbfe;
}


.budget-title {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 18px;
}


.budget-title > i,
.budget-title > .fa-wallet {
    font-size: 24px;

    color: #2563eb;
}


.budget-title h3 {
    margin: 0;

    font-size: 18px;

    font-weight: 600;
}


.budget-title p {
    margin: 3px 0 0;

    color: #64748b;

    font-size: 13px;
}


.budget-input-wrapper {
    position: relative;

    width: 100%;
}


.budget-input-wrapper span {
    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 18px;

    font-weight: 600;

    color: #374151;
}


.budget-input-wrapper input {
    width: 100%;

    min-height: 55px;

    border: 1px solid #bfdbfe;

    border-radius: 9px;

    padding: 12px 15px 12px 38px;

    font-size: 18px;

    font-weight: 500;
}


.budget-input-wrapper input:focus {
    outline: none;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,0.1);
}


.budget-note {
    margin: 12px 0 0;

    font-size: 12px;

    color: #64748b;
}



/* =====================================================
   POST BUTTON
===================================================== */

.post-button-wrapper {
    margin-top: 28px;

    display: flex;

    justify-content: flex-end;
}


.btn-post-task {
    border: none;

    border-radius: 9px;

    padding: 13px 28px;

    background: #2563eb;

    color: white;

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

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;
}


.btn-post-task:hover {
    background: #1d4ed8;

    transform: translateY(-1px);
}



/* =====================================================
   SMART PRICING CARD
===================================================== */

.pricing-card {
    position: sticky;

    top: 25px;

    overflow: hidden;
}


.pricing-header {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 25px;

    background: #f8fafc;

    border-bottom: 1px solid #e5e7eb;
}


.pricing-icon {
    width: 46px;

    height: 46px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #dbeafe;

    color: #2563eb;

    font-size: 20px;
}


.pricing-header h2 {
    margin: 0;

    font-size: 20px;

    font-weight: 600;
}


.pricing-header p {
    margin: 3px 0 0;

    font-size: 12px;

    color: #6b7280;
}



/* =====================================================
   PRICE ITEMS
===================================================== */

.price-item {
    padding: 22px 25px;

    border-bottom: 1px solid #e5e7eb;
}


.price-label {
    display: flex;

    align-items: center;

    gap: 11px;
}


.price-icon {
    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: #f1f5f9;

    color: #475569;
}


.price-label strong {
    display: block;

    font-size: 14px;
}


.price-label small {
    display: block;

    margin-top: 2px;

    font-size: 11px;

    color: #9ca3af;
}


.price-item h3 {
    margin: 15px 0 0;

    font-size: 24px;

    font-weight: 700;

    color: #1d4ed8;
}


.suggested-item {
    background: #f8fafc;
}



/* =====================================================
   CUSTOMER PRICE PREVIEW
===================================================== */

.customer-price-preview {
    margin: 20px 25px;

    padding: 15px;

    border-radius: 10px;

    background: #f1f5f9;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.customer-price-preview span {
    font-size: 13px;

    font-weight: 500;
}


.customer-price-preview strong {
    font-size: 18px;

    color: #111827;
}



/* =====================================================
   PRICING EXPLANATION
===================================================== */

.pricing-explanation {
    padding: 22px 25px;
}


.pricing-explanation h4 {
    margin: 0 0 14px;

    font-size: 15px;

    font-weight: 600;
}


.pricing-explanation p {
    margin: 8px 0;

    font-size: 12px;

    line-height: 1.6;

    color: #6b7280;
}


.pricing-explanation .final-note {
    color: #2563eb;
}



/* =====================================================
   FOOTER
===================================================== */

.footer {
    width: 100%;

    padding: 25px 5%;

    background: #111827;

    color: #9ca3af;

    text-align: center;

    font-size: 13px;

    margin-top: 50px;
}


.footer strong {
    color: white;
}



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

@media (max-width: 1100px) {

    .main-wrapper {

        grid-template-columns: 1fr;

    }


    .pricing-card {

        position: static;

    }

}


@media (max-width: 768px) {

    .page-header {

        padding: 40px 6%;

    }


    .page-header h1 {

        font-size: 30px;

    }


    .main-wrapper {

        padding-left: 4%;
        padding-right: 4%;

        margin-top: 25px;

    }


    .card-body-custom {

        padding: 22px;

    }


    .card-header-custom {

        padding: 22px;

    }


    .form-grid-2 {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .post-button-wrapper {

        justify-content: stretch;

    }


    .btn-post-task {

        width: 100%;

    }

}


@media (max-width: 480px) {

    .main-wrapper {

        padding-left: 3%;
        padding-right: 3%;

    }


    .page-header h1 {

        font-size: 26px;

    }


    .pricing-header {

        padding: 20px;

    }


    .price-item {

        padding: 20px;

    }

}

/* Task-Window visual refresh */
:root{--tw-navy:#0b2450;--tw-blue:#153f7a;--tw-gold:#d5a638;--tw-page:#f5f8fc}
body{background:var(--tw-page);color:#1b2940}
.navbar{min-height:120px!important;border-bottom:1px solid rgba(213,166,56,.28)!important;box-shadow:0 3px 18px rgba(11,36,80,.07)}
.navbar-brand{color:var(--tw-navy)!important;font-size:24px!important;letter-spacing:-.5px}
.task-window-logo{width:98px!important;height:98px!important}
.nav-link{border-radius:8px;padding:8px 12px!important;color:#42536c!important}
.nav-link:hover,.nav-link.active{background:#eaf2ff!important;color:var(--tw-blue)!important}
.page-header{padding:64px 5%!important;background:radial-gradient(circle at 85% 10%,#2e67b5 0,transparent 28%),linear-gradient(135deg,#071b3d,#174982)!important;border-bottom:3px solid var(--tw-gold)}
.page-header h1{font-size:42px!important}.page-header p{font-size:17px!important}
.task-card,.pricing-card{border:1px solid #e0e8f4!important;border-radius:18px!important;box-shadow:0 15px 35px rgba(11,36,80,.10)!important}
.card-header-custom{background:linear-gradient(135deg,#fff,#f5f9ff);border-bottom:1px solid #e5edf7!important;border-radius:18px 18px 0 0}
.card-header-custom h2,.section-title{color:var(--tw-navy)}
.section-title{border-left:4px solid var(--tw-gold);padding-left:10px;margin-bottom:16px}
.form-control,.form-select{border-color:#ced9e7!important;border-radius:10px!important}
.form-control:focus,.form-select:focus{border-color:#3971b9!important;box-shadow:0 0 0 3px rgba(57,113,185,.14)!important}
.budget-box{background:linear-gradient(135deg,#edf5ff,#fffaf0)!important;border-color:#d9e5f5!important}
.btn-post-task{background:linear-gradient(135deg,#dcb65a,#bd8c22)!important;color:#15243d!important;box-shadow:0 8px 18px rgba(158,113,20,.2)}
.btn-post-task:hover{background:linear-gradient(135deg,#eccb78,#c38e1e)!important}
.pricing-header{background:linear-gradient(135deg,#eff5ff,#fff)!important}.pricing-icon{background:#f8edc9!important;color:#a27418!important}
.suggested-item{background:#f8fbff!important}.price-item h3{color:var(--tw-blue)!important}.final-note{color:#b17e16!important}
.footer{background:#071b3d!important;border-top:3px solid var(--tw-gold);color:#dce7f7!important}
@media(max-width:768px){.page-header{padding:45px 6%!important}.page-header h1{font-size:32px!important}.task-window-logo{width:74px!important;height:74px!important}.main-wrapper{margin:26px auto!important}}


/* Built-in client help widget */
.help-chat{position:fixed;right:24px;bottom:24px;z-index:500;font-family:"Poppins",sans-serif}
.help-chat-toggle{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:13px 19px;background:linear-gradient(135deg,#dcb65a,#bd8c22);color:#15243d;font-weight:700;box-shadow:0 12px 28px rgba(11,36,80,.25);cursor:pointer}
.help-chat-panel{position:absolute;right:0;bottom:62px;width:min(360px,calc(100vw - 32px));background:#fff;border:1px solid #dce6f4;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(7,27,61,.22);opacity:0;visibility:hidden;transform:translateY(12px);transition:.2s ease}
.help-chat.is-open .help-chat-panel{opacity:1;visibility:visible;transform:translateY(0)}
.help-chat-header{display:flex;justify-content:space-between;gap:15px;padding:17px 18px;background:linear-gradient(135deg,#071b3d,#174982);color:#fff}
.help-chat-header strong,.help-chat-header span{display:block}.help-chat-header strong{font-size:17px}.help-chat-header span{margin-top:2px;font-size:12px;color:#dce8fb}
.help-chat-close{border:0;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.help-chat-body{padding:17px}.help-chat-message{margin:0 0 13px;color:#3e4f67;font-size:14px;line-height:1.55}
.help-chat-options{display:grid;gap:8px}.help-chat-options button{text-align:left;background:#f5f9ff;border:1px solid #d8e5f5;border-radius:9px;padding:10px 12px;color:#153f7a;font:600 13px "Poppins",sans-serif;cursor:pointer}.help-chat-options button:hover{background:#eaf2ff;border-color:#9ebce3}
.help-chat-answer{margin:14px 0 0;padding:11px 12px;border-left:3px solid #d5a638;background:#fffbf0;color:#3e4f67;font-size:13px;line-height:1.55}
@media(max-width:600px){.help-chat{right:16px;bottom:16px}.help-chat-toggle{padding:12px 16px}}


/* Warm cream surface palette */
body{background:#f8f4ea!important}
.navbar{background:#fffdf7!important}
.task-card,.pricing-card{background:#fffdf8!important}
.card-header-custom{background:linear-gradient(135deg,#fffdf8,#faf4e5)!important}
.pricing-header{background:linear-gradient(135deg,#faf4e5,#fffdf8)!important}
.form-control,.form-select{background:#fffefb!important}
.help-chat-panel{background:#fffdf8!important}
.help-chat-options button{background:#fbf6e9!important}

.navbar-brand .logo-tagline{padding-left:13px;border-left:1px solid rgba(213,166,56,.65);font-size:15px;line-height:1.28;letter-spacing:.2px;color:#8a6418;font-weight:750}
@media(max-width:768px){.navbar-brand .logo-tagline{font-size:13px;padding-left:10px}}

.navbar-brand .logo-tagline{display:flex;flex-direction:column;gap:1px;padding-left:14px;border-left:1px solid rgba(213,166,56,.7);letter-spacing:.1px;white-space:nowrap}
.navbar-brand .logo-tagline em{font-family:Georgia,serif;font-size:16px;line-height:1.05;color:#5f6d80;font-weight:500}.navbar-brand .logo-tagline strong{font-size:17px;line-height:1.1;letter-spacing:.35px;color:#a87819;text-transform:uppercase}