/*================================================
Template name: AIPRO HTML Mobile Template
Version: 1.0.0
Author: Website Stock       
Author url: https://themeforest.net/user/website_stock/portfolio  

[ Table of Contents ]

01: ai-assistants CSS
02: assistants-tab CSS
03: ticket-booked CSS
04: ticket-detail CSS
05: dark-mode CSS

==================================================*/
/*===========================================================
01: ai-assistants CSS
=============================================================*/
.ai-assistants {
  margin-bottom: 70px;
}

/*===========================================================
02: assistants-tab CSS
=============================================================*/
.assistants-tab .assistants-filter-btns {
  overflow-y: auto;
  width: 100%;
  margin: 24px 0;
  position: sticky;
  top: 0;
}

.assistants-tab .assistants-filter-btns button {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 100px;
  border: 2px solid #E0E7F2;
  box-sizing: border-box;
  text-transform: capitalize;
}

.assistants-tab .assistants-filter-btns .active button {
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #fff;
  border-image: var(--primary-gradient);
  border-image-slice: 0;
  background-origin: border-box;
}

.assistants-tab .card-title p {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-text);
  text-transform: capitalize;
}

.assistants-tab .card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.assistants-tab .cards {
  background-color: #FAFAFA;
  border-radius: 16px;
  padding: 20px;
}

.assistants-tab .cards .image {
  height: 64px;
  width: 64px;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid #E0E7F2;
}

.assistants-tab .cards h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-text);
  padding-top: 16px;
  padding-bottom: 4px;
}

.assistants-tab .cards p {
  font-size: 14px;
  color: #616161;
}

/*===========================================================
03: ticket-booked CSS
=============================================================*/
.reviewModal .modal-body ul li.on .star-yellow {
  display: block;
}

.reviewModal .modal-body ul li .star-yellow,
.reviewModal .modal-body ul li.on .star-gray {
  display: none;
}

.reviewModal .modal-body .msg {
  margin-top: 32px;
  margin-bottom: 56px;
}

.reviewModal .modal-body h6 {
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-text);
  margin-bottom: 8px;
}

.reviewModal .modal-body textarea {
  display: block;
  width: 100%;
  height: 132px;
  border-radius: 24px;
  border: 1px solid var(--primary);
  padding: 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--secondary-text);
  outline: none;
}

.reviewModal .modal-body textarea::placeholder {
  font-size: 16px;
  font-weight: 500;
  color: var(--secondary-text);
}

/*===========================================================
04: ticket-detail CSS
=============================================================*/
.ticket-detail .details-body {
  padding: 0 24px 32px 24px;
}

.ticket-detail .title h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-text);
}

.ticket-detail .sub-title h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-text);
}

.ticket-detail .border-b {
  border-bottom: 1px solid var(--additional2);
}

.ticket-detail .border-t {
  border-top: 1px solid var(--additional2);
}

.invoice-number p {
  font-size: 16px;
  font-weight: 500;
  color: var(--primary-text);
}

.invoice-number span {
  display: inline-block;
  font-size: 12px;
  padding: 4px 16px;
  border-radius: 50px;
  background: #FFF2ED;
  color: var(--additional5);
}

.order-card .item .image {
  width: 107px;
  height: 82px;
}

.order-card .content h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-text);
}

.order-card .content .rating {
  font-size: 12px;
  font-weight: 600;
  color: var(--warning);
}

.order-card .content .rating span {
  color: var(--secondary-text);
}

.order-card .content .location {
  color: var(--gray-90);
  font-size: 12px;
  font-weight: 500;
}

.customer-info ul li:not(:last-child) {
  margin-bottom: 16px;
}

.customer-info ul li p {
  font-size: 16px;
  font-weight: 500;
  color: var(--secondary-text);
}

.customer-info ul li p:last-child {
  color: var(--primary-text);
}

.customer-info ul li p.success {
  color: var(--success);
}

.price p {
  font-size: 16px;
  font-weight: 500;
  color: var(--gray-70);
}

.price p span {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-text);
}

.promo-price p span {
  color: var(--alert);
}

/*===========================================================
05: dark-mode CSS
=============================================================*/
.dark-mode .ticket-tab .nav-tabs .nav-link,
.dark-mode .assistants-tab .card-title p,
.dark-mode .ticket-card .content h4,
.dark-mode .ticket-card .card-footer h3,
.dark-mode .ticket-card .card-footer a,
.dark-mode .ticket-card .card-footer button,
.dark-mode .invoice-number p,
.dark-mode .order-card .content h4,
.dark-mode .ticket-detail .title h4,
.dark-mode .customer-info ul li p:last-child,
.dark-mode .price p span {
  color: white;
}

.dark-mode .assistants-tab .cards {
  background: var(--gray-90);
}

.dark-mode .assistants-tab .cards p {
  color: var(--gray-60);
}

.dark-mode .assistants-tab .cards h4,
.dark-mode .ticket-card .card-title p,
.dark-mode .ticket-card .content .location,
.dark-mode .ticket-card .content .rating span,
.dark-mode .ticket-card .card-footer p,
.dark-mode .reviewModal .modal-body textarea::placeholder {
  color: var(--gray-40);
}

.dark-mode .ticket-card .content .location img {
  filter: brightness(0) saturate(100%) invert(94%) sepia(7%) saturate(191%) hue-rotate(162deg) brightness(91%) contrast(94%);
}

.dark-mode .order-card .content .location {
  color: var(--secondary-text);
}

.dark-mode .promo-price p span {
  color: var(--alert);
}

.dark-mode .assistants-tab .cards .image,
.dark-mode .assistants-tab .assistants-filter-btns button {
  border-color: var(--gray-80);
}

.dark-mode .reviewModal .modal-body textarea {
  background: var(--gray-80);
  color: white;
}