/* ======================================================
   Tom Select – RTL Layout & Overlap Fix
   ====================================================== */

.req_pg .ts-control {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    direction: rtl;

    /* padding */
    padding: 10px !important;
    padding-right: 10px !important;
}

.req_pg .ts-wrapper.form-select, .ts-wrapper.single {
    --ts-pr-caret: 1rem;
}

/* input (search) */
.req_pg .ts-control input {
    flex: 1 1 auto !important;
    min-width: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* selected item */
.req_pg .ts-control .item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* selected image */
.req_pg .ts-control .item img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}


.req_pg .ts-dropdown {
    direction: rtl;
}

.req_pg .ts-dropdown-content {
    background: #fff;
}

.req_pg .ts-wrapper .clear-button {
    font-size: 18px;
    line-height: 1;
    color: #999;
    cursor: pointer;
}

.req_pg .ts-wrapper .clear-button:hover {
    color: #d00;
}

/* hide default arrow */
.req_pg .ts-wrapper.single .ts-control .ts-dropdown-arrow,
.req_pg .ts-wrapper.single .ts-control::before {
    display: none !important;
}

/* custom arrow */
.req_pg .ts-wrapper.single .ts-control::after {
    content: '';
    position: absolute;
    left: 12px;  
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    pointer-events: none;
}


.req_pg .avatar-content .img-upload {
    position: relative;
}
.req_pg .avatar-content .img-upload .img-edit {
    display: block;
    position: relative;
    border: 2px dashed rgba(153, 153, 153, 0.2);
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
    color: var(--cr-main);
}
.req_pg .avatar-content .img-upload .img-edit .image-upload {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.req_pg .avatar-content .img-upload .img-edit label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.req_pg .avatar-content .img-upload .img-edit label .cont {
  padding: 5px 10px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8588235294);
  font-size: 12px;
  color: #ccc;
}
.req_pg .avatar-content .img-upload .img-preview {
  position: relative;
  height: 100px;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #fff;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.031372549);
  overflow: hidden;
}
.req_pg .avatar-content .img-upload .img-preview .image-preview {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.req_pg .avatar-content .img-upload .img-preview .image-preview {
  background-size: contain;
}
.req_pg .avatar-content .img-upload.same-box .img-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  pointer-events: none;
  box-shadow: none;
  z-index: 10;
  border: 0;
}
.req_pg .avatar-content .img-upload.same-box .img-preview .image-preview {
    background-size: cover;
    border-radius: 10px;
    /* background-color: #fff; */
}


.req_pg .form_box {
    position: relative;
    padding: 50px;
    background-color: #fff;
    margin-bottom: 50px;
}

.req_pg .form_box .form_body .form-group label,
.modal .form-group label  {
    font-weight: bold;
    margin-bottom: 10px;
}

.req_pg .form_box .form_body .form-group .form-control ,
.modal .form-group .form-control {
    min-height: 50px;
    font-size: 15px ;
    /* background-color: #f9f9f9f7; */
}



/* --------------- design cards --------------- */
.req_pg .design-cards {
  position: relative;
}
.req_pg .design-cards .design-card {
  position: relative;
}
.req_pg .design-cards .design-card .float-check {
  position: absolute;
  right: 0;
  top: -25px;
  color: #fff;
  background-color: var(--cr-main);
  width: 30px;
  height: 80px;
  transform: rotate(-45deg);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 7px;
  opacity: 0;
}
.req_pg .design-cards .design-card .float-check i {
  transform: rotate(45deg);
}
.req_pg .design-cards .design-card .form-check:not(.form-check-st1) {
  position: relative;
  padding: 0;
  margin: 0;
}
.req_pg .design-cards .design-card .form-check:not(.form-check-st1) .form-check-input {
  display: none;
}
.req_pg .design-cards .design-card .form-check:not(.form-check-st1) .form-check-label {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 15px 10px;
  text-align: center;
  /* background: radial-gradient(63.39% 76.31% at 23.41% -10.27%, rgba(111, 17, 183, 0.08) 10%, rgba(255, 234, 96, 0) 83%), #FFFFFF; */
  border: 1px solid rgba(109, 11, 147, 0.12);
  /* box-shadow: 0px 4px 20px rgba(109, 11, 147, 0.08); */
  border-radius: 20px;
  margin-top: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.req_pg .design-cards .design-card .form-check:not(.form-check-st1) .form-check-label img  {
    width: 70px;
    height: 70px;
}
.req_pg .design-cards .design-card .form-check:not(.form-check-st1) .form-check-label .float-price {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background-color: var(--cr-sub);
  color: #fff;
  border-radius: 50%;
  padding: 5px;
}
.req_pg .design-cards .design-card .form-check:not(.form-check-st1) .form-check-input:checked ~ .form-check-label {
  border-color: var(--cr-main);
  background-color: rgba(68, 3, 118, 0.0666666667);
}
.req_pg .design-cards .design-card .form-check:not(.form-check-st1) .form-check-input:checked ~ .form-check-label .float-check {
  opacity: 1;
}
.req_pg .design-cards .design-card .gold-silver {
  position: absolute;
  top: 45px;
  left: 15px;
}
.req_pg .design-cards .design-card .gold-silver .form-check-st1 .form-check-input {
  right: 10px;
}
.req_pg .design-cards .design-card .gold-silver .form-check-st1 .form-check-label {
  min-height: 30px;
  border-radius: 30px;
  padding-inline-start: 40px;
}
.req_pg .design-cards.grid-5 {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}
.req_pg .design-cards.grid-5 .design-card {
  width: fit-content;
}

.req_pg .student-body {
    display: none;
}

.req_pg .student-item.is-open .student-body {
    display: block;
}

.req_pg .list-flex li {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 12px 0;
}

.req_pg .cr-sub {
    color: var(--mainColor);
}