/* @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); */


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


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

:root {
    --primary-orange: #ff7e4b;
    --primary-purple: #7B68EE;
    --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 : #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; */
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
    padding-top: 75px;
    color: var(--text-dark);
    overflow-x: hidden;
}

.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;
}




/* 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;
}