/* 
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100..900;1,100..900&display=swap');

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

/* Bootstrap display utilities mapping for components using them */
.d-none {
    display: none !important;
}
.d-flex {
    display: flex !important;
}
.d-inline-flex {
    display: inline-flex !important;
}
.d-block {
    display: block !important;
}
.d-inline-block {
    display: inline-block !important;
}

.flex-row {
    flex-direction: row !important;
}
.flex-column {
    flex-direction: column !important;
}
.flex-wrap {
    flex-wrap: wrap !important;
}
.flex-nowrap {
    flex-wrap: nowrap !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}
.justify-content-end {
    justify-content: flex-end !important;
}
.justify-content-center {
    justify-content: center !important;
}
.justify-content-between {
    justify-content: space-between !important;
}
.justify-content-around {
    justify-content: space-around !important;
}

.align-items-start {
    align-items: flex-start !important;
}
.align-items-end {
    align-items: flex-end !important;
}
.align-items-center {
    align-items: center !important;
}
.align-items-stretch {
    align-items: stretch !important;
}
.align-content-center {
    align-content: center !important;
}

@media (min-width: 576px) {
    .d-sm-flex {
        display: flex !important;
    }
    .d-sm-inline-flex {
        display: inline-flex !important;
    }
}

@media (min-width: 768px) {
    .d-md-flex {
        display: flex !important;
    }
    .d-md-inline-flex {
        display: inline-flex !important;
    }
    .d-md-inline {
        display: inline !important;
    }
}

/* Bootstrap grid row/col simulation */
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -12px;
    margin-left: -12px;
}
.g-0 { gap: 0 !important; margin: 0 !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
    .col-md-8 {
        flex: 0 0 66.667%;
        max-width: 66.667%;
    }
}

/* Bootstrap Spacing & Text Utilities */
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.me-1 { margin-right: 4px !important; }
.me-2 { margin-right: 8px !important; }
.ms-1 { margin-left: 4px !important; }
.ms-2 { margin-left: 8px !important; }
.ms-4 { margin-left: 16px !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.px-3 { padding-left: 12px !important; padding-right: 12px !important; }
.fw-bold { font-weight: 700 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-normal { font-weight: 400 !important; }
.text-muted { color: #6c757d !important; }
.text-dark { color: #212529 !important; }
.text-white { color: #fff !important; }
.text-danger { color: #dc3545 !important; }
.small { font-size: 0.875em !important; }
.rounded-5 { border-radius: 50px !important; }
.rounded-circle { border-radius: 50% !important; }
.bg-primary { background-color: #545DDF !important; }
.bg-dark { background-color: #212529 !important; }
.bg-opacity-50 { background-color: rgba(0,0,0,0.5) !important; }

#root {
    display: block;
    width: 100%;
}

/* Prevent footer content from hiding behind the fixed mobile bottom nav */
@media (max-width: 767.98px) {
    body {
        padding-bottom: 70px;
    }
}

:root {
    --primary-orange: #ff7e4b;
    --primary-black: #1C1C1C;
    --primary-purple: #7B68EE;
    --secondary-color: #8A8A8A;
    --purple-bluish: #455CD8;
    --tag-color: #F6F7FA;
    --bg-gradient: linear-gradient(135deg, #7B68EE 0%, #a18cd1 100%);
    --text-dark: #333;
    --text-light: #777;
    --border-color: #eee;
    --active-pill-bg: #E0E7FF;
    --active-pill-text: #4F46E5;
    --primary-color: #545DDF;
    --primary-rgb: 84, 93, 223;
    /* --primary-color : #545dde; */
    --brand-bg: #4f56ac;
    --brand-orange: #ff7e4b;
    --text-dark: #1a1a1a;
    --text-gray: #666;
    --bg-light: #f4f5f7;
    --card-border: #e6e6e6;
}

body {
    font-family: 'Poppins', sans-serif !important;
    background-color: var(--bg-light);
    /* padding-top: 75px; */
    padding-top: 0;
    color: var(--text-dark);
    overflow-x: hidden;
}

.detect-location-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eaf4ff;
    color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    z-index: 9999;
}

.detect-location-btn:hover {
    background: #d0e8ff;
    color: var(--brand-orange);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}




.f-11 {
    font-size: 11px !important;
}

/* universal pills */

.up-o {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.up-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
}

.up-label input {
    display: none;
}

.up {
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 6px 12px;
    /* min-width: 45px;
    height: 40px; */
    cursor: pointer;
    background: #fff;
    color: #333;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.up-label input:checked+.up {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    font-weight: 600;
    color: white;
}

.up-o input[type="radio"]:checked,
.up-o input[type="checkbox"] {
    accent-color: var(--brand-orange) !important;
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.up-o input[type="checkbox"] {
    height: 15px;
    width: 15px;
}

.ft {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 10px;
}

.pp-form__cta-100 {
    appearance: none;
    color: rgb(255, 255, 255);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    border-radius: 20px;
    outline: none;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-orange {
    background-color: var(--brand-orange) !important;
}

.bg-green {
    background-color: #28a745 !important;
}

/* height */

.h-40 {
    height: 40px !important;
}


/* Input Fields */

.custom-group {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 5px;
    background: #fff;
    transition: all 0.25s ease;
}

.custom-group:hover {
    border-color: #d1d5db;
}

.custom-group:focus-within {
    border-color: #4f2dbf;
}

.input-group-select {
    border: none;
    outline: none;
    padding: 5px 10px;
    font-size: 14px;
    background: #f9fafb;
    cursor: pointer;
    min-width: 60px;
}

.input-group-select :focus {
    outline: none;
    box-shadow: none;
}

.input-group-select {
    border-right: 1px solid #e5e7eb;
}

.custom-input-p {
    flex: 1;
    border: none;
    outline: none;
    padding: 6px 12px;
    font-size: 14px;
}

.custom-input-p:focus {
    outline: none;
    box-shadow: none;
}

.custom-input-p::placeholder {
    color: #706d6d;
    font-size: 13px;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border: none !important;
    box-shadow: none !important;
}


.input-wrapper input {
    flex: 1 !important;
    padding: 10px 12px 6px 12px !important;
}

.input-wrapper label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #706d6d;
    background: #fff;
    padding: 0 4px;
    transition: 0.2s ease all;
    pointer-events: none;
}

.custom-input-p:focus+label,
.custom-input-p:not(:placeholder-shown)+label {
    top: 0;
    font-size: 12px;
    color: #4f2dbf;
}

.custom-input-p:focus+label .mandatory {
    color: red;
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinner[type=number] {
    -moz-appearance: textfield;
}



/* UNIVERSAL DB SLEECT OPTION */

.custom-select-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    cursor: pointer;
}

.custom-select-field {
    padding: 14px 30px 6px 12px !important;
}




/* select 2 */

.select2-container--default .select2-selection--single {
    height: 35px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 3px 14px;
    font-size: 14px;
    transition: all 0.25s ease;
    background: #fff;
}

.select2-container--default .select2-selection--single:hover {
    border-color: #c7c9d9;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #4f2dbf;
    box-shadow: 0 0 0 4px rgba(79, 45, 191, 0.08);
}

.select2-selection__arrow {
    height: 100% !important;
    right: 12px !important;
}

.select2-dropdown {
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    padding: 8px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 5px 12px;
    font-size: 14px;
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #4f2dbf;
    box-shadow: 0 0 0 3px rgba(79, 45, 191, 0.08);
}

.select2-results__option {
    border-radius: 8px;
    padding: 3px 8px;
    transition: all 0.2s ease;
    font-size: 16px !important;
}

.select2-results__option--highlighted {
    background-color: #f5f3ff !important;
    color: #4f2dbf !important;
}

.select2-results__option--selected {
    background-color: #ede9fe !important;
    color: var(--primary-color) !important;
}

.select2-container *:focus {
    outline: none !important;
}


/* ddd */

.custom-item.active {
    background: #f1f5ff;
    border-left: 3px solid #4f46e5;
}


/* font size */

.fs-10 {
    font-size: 10px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-22 {
    font-size: 22px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-26 {
    font-size: 26px !important;
}

.fs-28 {
    font-size: 28px !important;
}

.fs-32 {
    font-size: 32px !important;
}

.fs-34 {
    font-size: 34px !important;
}

.fs-36 {
    font-size: 36px !important;
}



/* COlor */

.sub-tc {
    color: #303030 !important;
}

.sub-or {
    color: var(--brand-orange) !important;
}



/* padding */

/* p- bottom */

.pb-20 {
    padding-bottom: 20px !important;
}

/* Padding x */

.px-15 {
    padding: 15px 0 !important;
}

/* Padding x */

.px-15 {
    padding: 15px 0 !important;
}

/* Padding x */

.py-15 {
    padding: 0 15px !important;
}








/* margin */

.ms-60 {
    margin-left: 60px !important;
}






/* list */

.list-tick li {}

/* font weight */

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

/* border */

.b-1-primary {
    border: 1px solid var(--primary-color);
}

/* card custom*/

.card-custom {
    background-color: #fff;
    padding: 30px !important;
}

.custom-card-new {
    background-color: #fff;
    padding: 30px !important;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    max-width: 90%;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .custom-card-new {
        padding: 20px !important;
    }
}


/* check card with icon */

.icon-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 7px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s ease;
    background: #fff;
}

.icon-checkbox-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--brand-orange);
}

.icon-checkbox-row .icon-wrap {
    width: 34px;
    height: 34px;
    background: #f3f4f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-checkbox-row .option-text {
    font-weight: 500;
    color: #374151;
}


/* post property  skelton */

.form-loader {
    padding: 20px;
}

.skeleton-title,
.skeleton-input {
    background: linear-gradient(90deg,
            #eee 25%,
            #f5f5f5 37%,
            #eee 63%);
    background-size: 400% 100%;
    animation: shimmer 1.2s ease infinite;
    border-radius: 6px;
    margin-bottom: 15px;
}

.skeleton-title {
    height: 24px;
    width: 40%;
}

.skeleton-input {
    height: 50px;
    width: 100%;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: -100% 0
    }
}






/* converting */

/* Wrapper */
.posting-upgrade-wrapper {
    text-align: left;
}

/* Header */
.posting-header {
    text-align: center;
    margin-bottom: 18px;
}

.posting-icon {
    width: 48px;
    height: 48px;
    background: #fff3e8;
    color: #ff7a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 10px;
    font-size: 20px;
}

.posting-header h5 {
    margin: 0;
    font-weight: 700;
}

.posting-header p {
    font-size: 13px;
    margin-top: 4px;
    color: #6b7280;
}

/* Input */
.posting-field {
    margin-top: 14px;
}

.posting-field label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.posting-field input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    font-size: 14px;
}

.posting-field input:focus {
    border-color: #ff7a1a;
    outline: none;
}

/* Role Cards */
.role-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.role-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: 0.2s;
}

.role-card:hover {
    border-color: #ff7a1a;
    background: #fffaf5;
}

.role-card input {
    display: none;
}

.role-card input:checked+.role-content {
    background: #fff3e8;
    border-radius: 10px;
}

/* Role content */
.role-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.role-content i {
    font-size: 18px;
    color: #ff7a1a;
}

.role-content strong {
    display: block;
    font-size: 14px;
}

.role-content span {
    font-size: 12px;
    color: #6b7280;
}

/* Buttons */
.btn-posting-confirm {
    background: #ff7a1a;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
}

.btn-posting-confirm:hover {
    background: #ff8f3a;
}

.btn-posting-cancel {
    background: #f3f4f6;
    color: #111;
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
}




/* steps  new css */

.post-steps-section {
    background: #ffffff;
}

.step-section-title {
    color: var(--primary-color);
    font-family: 'Poetsen One', cursive;
    font-size: 32px;
}

.step-icon {
    width: 208px;
    height: 208px;
    background: #D9D9D9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.step-icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.step-label {
    color: var(--brand-orange);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.step-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #000000;
}

.step-desc {
    font-size: 15px;
    color: #000000;
    line-height: 1.6;
    max-width: 360px;
    margin: 0 auto;
}

.step-desc-index {
    font-size: 13px !important;
    color: #000000;
    line-height: 1.6;
    max-width: 360px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .step-section-title {
        font-size: 22px;
    }

    .step-icon {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 991px) {

    .step-icon {
        width: 140px;
        height: 140px;
    }

    .step-section-title {
        font-size: 26px;
    }

    .step-title {
        font-size: 16px;
    }

    .step-desc-index {
        font-size: 12.5px;
    }
}


@media (max-width: 576px) {

    .post-steps-section {
        padding: 40px 0;
    }

    .step-section-title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .step-box {
        padding: 15px 10px;
    }

    .step-icon {
        width: 160px;
        height: 160px;
        margin-bottom: 10px;
    }

    .step-label {
        font-size: 14px;
    }

    .step-title {
        font-size: 15px;
    }

    .step-desc-index {
        font-size: 12px;
        max-width: 100%;
    }
}