/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.add-more-condition-btn {
   padding: 8px 15px;
   background: #bce3b1;
   border-radius: 10px;
   font-size: 13px;
   cursor: pointer;
}

.repeater-field {
   margin-top: 10px;
   margin-bottom: 20px;
}

.remove-condition-btn {
   padding: 8px 15px;
   background: #e49292;
   border-radius: 10px;
   cursor: pointer;
}

.tutor-table-responsive {
   width: 100%;
}

#add-condition.disabled {
   pointer-events: none;
   cursor: not-allowed;
}

.tutor-select {
   font-size: 14px;
   line-height: 2;
   color: #2c3338;
   border-color: #8c8f94;
   box-shadow: none;
   border-radius: 3px;
   padding: 0 24px 0 8px;
   min-height: 30px;
   max-width: 25rem;
   -webkit-appearance: none;
   appearance: none;
   background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
   background-size: 16px 16px;
   cursor: pointer;
   vertical-align: middle;
}

#repeater-fileds {
   font-size: 13px;
}

#tutor-certificate-modal .tutor-form-label {
   text-align: left;
}

#tutor-certificate-modal .tutor-modal-body {
   overflow-y: scroll;
   height: 19rem;
}

#tutor-certificate-modal .tutor-btn-primary {
   background-color: #007cba;
   margin-top: 25px;
}



.certificate-loader-header {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.certificate-loader {
   width: 50px;
   padding: 8px;
   aspect-ratio: 1;
   border-radius: 50%;
   background: #007cba;
   --_m:
      conic-gradient(#0000 10%, #000),
      linear-gradient(#000 0 0) content-box;
   -webkit-mask: var(--_m);
   mask: var(--_m);
   -webkit-mask-composite: source-out;
   mask-composite: subtract;
   animation: l3 1s infinite linear;
}

@keyframes l3 {
   to {
      transform: rotate(1turn)
   }
}


.preview-button {
   margin: 0 5px;
   padding: 5px 15px;
   border: 1px solid #ddd;
   border-radius: 4px;
   background: #f8f8f8;
   cursor: pointer;
   color: #3c434a;
   position: relative;
}

.preview-popover {
   display: none;
   position: fixed;
   z-index: 1000;
   background: white;
   border: 1px solid #ddd;
   border-radius: 4px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   padding: 15px;
   max-width: 400px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: 0;
   transition: all 0.3s ease-out;
}

.preview-popover.active {
   display: block;
   animation: popIn 0.3s ease-out forwards;
}

@keyframes popIn {
   0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.7);
   }

   100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
   }
}

.preview-popover-content {
   position: relative;

}

.preview-button.loading {
   color: transparent;
}

.preview-button.loading::after {
   content: '';
   position: absolute;
   width: 16px;
   height: 16px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border: 2px solid #f3f3f3;
   border-top: 2px solid #007cba;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   0% {
      transform: translate(-50%, -50%) rotate(0deg);
   }

   100% {
      transform: translate(-50%, -50%) rotate(360deg);
   }
}

.close-popover {
   position: absolute;
   right: 5px;
   top: -6px;
   cursor: pointer;
   font-size: 13px;
   color: #fff;
   padding: 5px;
   background: rgba(0, 0, 0, 0.7);
   border-radius: 50%;
   width: 14px;
   height: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
}

#tutor-certificate-modal .tutor-modal-window {
   max-width: 730px;
}

#popover-preview-image {
   max-width: 100%;
   height: auto;
   display: block;
}

@keyframes l3 {
   to {
      transform: rotate(1turn)
   }
}

@media screen and (max-width: 768px) {
   .tutor-select {
      font-size: 14px !important;
      min-height: 34px !important;
      margin-bottom: 10px;
   }
}

/* Multi-certificate popup styles */
.tlms-certs-popup-list {
   text-align: left;
   padding: 36px 36px 50px 36px !important;
   /* Increased padding, especially bottom */
}

.tutor-modal-certificate .tutor-modal-body {
   text-align: left !important;
   padding: 0 !important;
   height: auto !important;
   /* Ensure body expands */
}

.tlms-certs-popup-list h3 {
   font-size: 26px;
   font-weight: 600;
   margin-bottom: 32px;
   color: #111827;
   padding-left: 2px;
}

.tlms-certs-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   /* 3 columns */
   gap: 20px;
   padding: 4px;
   align-items: flex-start;
   /* Only expand the cards that need it */
}

@media (max-width: 991px) {
   .tlms-certs-grid {
      grid-template-columns: 1fr 1fr;
      /* 2 columns on tablets */
   }
}

@media (max-width: 600px) {
   .tlms-certs-grid {
      grid-template-columns: 1fr;
      /* 1 column on mobile */
   }
}

.tlms-cert-card {
   display: flex;
   flex-direction: column;
   /* Vertical layout for better text space */
   align-items: center;
   text-align: center;
   background: #ffffff;
   border: 1px solid #f1f5f9;
   border-radius: 12px;
   padding: 20px 14px;
   text-decoration: none !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
}

.tlms-cert-card:hover {
   border-color: #cbd5e1;
   box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   transform: translateY(-4px);
}

.tlms-cert-icon {
   width: 80px;
   /* Slightly larger icon for vertical layout */
   height: 58px;
   background-color: #f8fafc;
   border-radius: 8px;
   margin-bottom: 12px;
   /* Bottom margin instead of right */
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border: 1px solid #f1f5f9;
}

.tlms-cert-icon img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.tlms-cert-name {
   font-size: 15px;
   font-weight: 500;
   color: #374151;
   line-height: 1.4;
   overflow-wrap: anywhere;
   word-break: break-word;
   min-width: 0;
}

.tlms-cert-card:hover .tlms-cert-name {
   color: #000;
}

.tlms-certs-popup-list .tutor-btn-block {
   width: 100%;
   justify-content: center;
}

#tutor-certificate-modal .tutor-modal-content {
   border-radius: 20px;
   max-width: 1100px !important;
   border: none;
   max-height: 95vh;
   /* Almost full screen height */
   overflow-y: auto !important;
   min-height: 400px;
   /* Ensure it has some substance */
}

/* Completely hide all scrollbars within the multi-certificate modal while allowing scroll */
#tutor-certificate-modal,
#tutor-certificate-modal *,
#tutor-certificate-modal .tutor-modal-window,
#tutor-certificate-modal .tutor-modal-content {
   scrollbar-width: none !important;
   /* Firefox */
   -ms-overflow-style: none !important;
   /* IE/Edge */
}

#tutor-certificate-modal::-webkit-scrollbar,
#tutor-certificate-modal *::-webkit-scrollbar,
#tutor-certificate-modal .tutor-modal-window::-webkit-scrollbar,
#tutor-certificate-modal .tutor-modal-content::-webkit-scrollbar {
   display: none !important;
   /* Chrome/Safari */
}

.tutor-modal-close-o {
   top: 24px !important;
   right: 24px !important;
}

/* Loading spinner for certificate popup */
.tlms-certs-loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 40px 20px;
   gap: 16px;
}

.tlms-certs-loading p {
   color: #6b7280;
   font-size: 14px;
   margin: 0;
}

.tlms-spinner {
   width: 40px;
   height: 40px;
   border: 3px solid #e5e7eb;
   border-top-color: #3b82f6;
   border-radius: 50%;
   animation: tlms-spin 0.8s linear infinite;
}

@keyframes tlms-spin {
   to {
      transform: rotate(360deg);
   }
}