/* ============================================== section edit-listing  ================================================= */
.edit-listing-main                                {padding: 60px 0;max-width: 1036px;margin: 0 auto;}
.edit-create-listing                              {margin: 0;padding: 32px;background-color: var(--white);border-radius: 16px;}
.form-row-section                                 {margin: 0 0 32px 0;padding: 0 0 24px 0;border-bottom: solid 1px var(--gray-01);}
.form-row-section .heading-style-8                {font-family: var(--helvetica-bold);margin: 0 0 24px 0;}
.form-row-section .textarea                       { height: 70px;}
.form-row-section .textarea.overview-text-area    { height: 70px;}
.form-row-section .textarea.description-text-area,.form-row-section .textarea#Description { height: 150px;}
.form-row-section .check-icon                     { position: absolute; right: 14px; top: 14px;}
.upload-area                                      {border: 1px dashed #75797C;margin-bottom: 0; padding-top: 44.5%;height: 100%; text-align: center;cursor: pointer;border-radius: 12px;}
.upload-area .upload-area-inner                   {position: absolute;left: 50%;top: 50%;width: 100%;transform: translate(-50%, -50%);}
.upload-area img                                  {width: 40px !important;height: 40px !important;}
.upload-area video                                  {width: 40px !important;height: 40px !important;}
.upload-area p span                               {color: var(--blue-01);}
.instructions                                     {margin-bottom: 20px;margin-top: 10px;}
#file-input                                       {display: none;}
.upload-preview                                   {margin: 0;padding: 0;position: relative;padding-top: 44.5%;height: 100%;}
.upload-preview img        {width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;border-radius: 12px;}
.upload-preview video {width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;}
.upload-preview span{position: absolute; bottom: -28px; left: 50%;transform: translateX(-50%); font-size: 13px; line-height: 14px; color: black; margin: 10px 0;}
.close-icon                                       { position: absolute; z-index: 1; right: 12px; top:12px; border:0; background: none;} 
.close-icon img                                   { width: 24px; height: 24px; position: relative; }

/* ============================================== section create-listing  ================================================= */
.create-listing-heading                           { padding-block: 24px;}
.create-advert-main                               {padding: 60px 0; margin: 0 auto; }
.create-advert-step                               { width: 32.5%; background-color: var(--white); border-radius: 16px; padding: 30px;}
.content-panel                                    {display: none;}
.content-panel.active                             {display: block;}
.step-wizard                                      {margin: 0 0 60px 0;position: relative;}
.step-wizard .progress                            { position: absolute;top: 0;left: 23px;width:2px;height: calc(100% - 50px);background: none;}
.step-wizard .progressbar                         {position: absolute;background-color: var(--blue-01);opacity: 1;height: 0%;width: 2px;transition: width 0.6s ease;}
.step-wizard .progressbar.empty                   {opacity: 1;width: 2px;height: 100%;background-color: #E6E7E7;}
.step-wizard ul                                   {}
.step-wizard li                                   { margin: 0; padding: 0 0 50px 0;}
.step-wizard li:last-child                        { padding-bottom: 0;}
.step-wizard li .step                             {display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: bold;line-height: 30px;width: 48px;height: 48px;border-radius: 50%;border: 1px solid;border-color: #E6E7E7;background: #ffffff;transition: background-color 0.6s ease, border-color 0.6s ease;flex-shrink: 0;}
.step-wizard li .step img                         { width: 24px;}
.step-wizard li span                              { color: #75797C;font-family: var(--helvetica-bold); font-size: 14px;}
.step-wizard li .title                            {width: 100%;padding-top: 2px;font-family: var(--helvetica-bold);}
.step-wizard li.active-tab .step                  {border-color: var(--blue-01);color: var(--blue-01);}
.step-wizard li.done .title                       {color: #3b5343;}
.step-wizard li.done .step                        {color: white;background-color: var(--blue-01);border-color: var(--blue-01);}
.step-wizard li.done .step img                    { filter: brightness(100);}
.step-wizard li>button                            {background: none;border: none;display: flex;gap: 16px;width: 100%;position: relative;cursor: pointer;text-align: left;}
.step-wizard li>button p                          {color: #5A5D60;margin-top: 5px;}
.step-content                                     {flex: 1;}
.step-wizard-content                              {display: none;transition: all 0.3s ease;}
.step-wizard-content.active                       {display: block;}
.blue-text                                        { color: var(--blue-01);}
.edit-create-listing .icon-btn                    { background-color: #F5F6F6; margin-bottom: 20px;}
.create-advert-img                                { border-radius: 24px; margin: 0; padding: 0;}

/* link */
.verify-link {
  color: var(--blue-01);
  font-size: 16px;
  line-height: 24px;
  font-family: var(--helvetica-reg);
}

.verify-link.disabled {
  color: #AEB1B2;
}

.tooltip-wrap{position: relative;}
.tooltip-wrap span{visibility: hidden; min-width:140px;padding:2px 5px;text-align: center; font-size: 14px; position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);background-color: var(--blue-01);color: var(--white);border-radius: 4px;}
.tooltip-wrap:hover span{visibility: visible;}
.tooltip-wrap span::after{
  content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    margin-left: -5px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--blue-01) transparent transparent transparent;
}
.form-row-section .input-wrap{margin-bottom:0;}
.form-row-section .row{row-gap: 24px;}

/* ======================================================== Media Query ================================================= */
@media screen and (max-width:1600px)              {}
@media screen and (max-width:1500px)              {}
@media screen and (max-width:1400px)              {}
@media screen and (max-width:1199px)              {
.form-row-section .check-icon                     { top: 8px;}
.edit-create-listing                              { padding: 28px; }
.create-advert-step                               { padding: 28px; }
.create-advert-main                               { padding: 50px 0;}
.step-wizard li>button                            { gap: 10px;}
.create-advert-main .upload-area{padding-top: 85%;}
}
@media screen and (max-width:991px)               {
  .edit-create-listing                            { padding: 22px; }
  .create-advert-step                             { width: 100%;}
  .step-wizard                                    { margin-bottom: 0px;}
  .step-wizard li                                 { padding-bottom: 20px;}
  .create-advert-img                              { display: none;}
  .create-advert-step                             { padding: 20px;}
  .create-advert-main                             { padding: 40px 0;}
  .create-advert-main .upload-area {padding-top: 57%;}

}
@media screen and (max-width:767px)               {
    .form-row-section .check-icon                 { top: 5px;}
    .edit-create-listing                          { padding: 16px; }
    .step-wizard li .step                         { width: 36px; height: 36px;}
    .step-wizard li .step img                     { width: 20px;}
    .step-wizard .progress                        {left: 17px;}
    .create-advert-main                           { padding: 30px 0;}
  .form-row-section .row {row-gap: 20px;}
}
@media screen and (max-width:575px)               {
  .form-row-section .textarea {
      height: 60px;
    }
  
    .form-row-section .textarea.overview-text-area {
      height: 60px;
    }
  
    .form-row-section .textarea.description-text-area,
    .form-row-section .textarea#Description {
      height: 100px;
    }
}
