/* =====================================================
   AIWebSkills Auth Popup - Premium UI
   File: /assets/auth.css
===================================================== */

.aiwebskills-open-auth,
.aiwebskills-auth-trigger,
.aws-btn-primary,
.aws-course-pricing-btn,
.aws-course-final-btn-primary,
.aws-enroll-btn {
  cursor: pointer;
}

.aiwebskills-auth-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 999px;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 900;
  background: linear-gradient(135deg, #00c6ff 0%, #2563eb 38%, #7c3aed 72%, #ec4899 100%);
  box-shadow:
    0 7px 0 rgba(15, 23, 42, 0.95),
    0 20px 50px rgba(37, 99, 235, 0.35);
}

/* Modal Overlay */
.aiwebskills-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 99999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.22), transparent 36%),
    radial-gradient(circle at bottom left, rgba(124, 58, 237, 0.20), transparent 38%),
    rgba(2, 6, 23, 0.84);
  backdrop-filter: blur(14px);
}

.aiwebskills-auth-modal.is-open {
  display: flex !important;
}

/* Popup Box */
.aiwebskills-auth-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 34px;
  padding: 34px 32px 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,0.26), transparent 34%),
    radial-gradient(circle at bottom left, rgba(236,72,153,0.12), transparent 34%),
    linear-gradient(180deg, rgba(15,23,42,0.98), rgba(2,6,23,0.99));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 38px 95px rgba(0,0,0,0.58),
    0 20px 70px rgba(37,99,235,0.20),
    inset 0 1px 1px rgba(255,255,255,0.10);
}

.aiwebskills-auth-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 35px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(56,189,248,0.75), rgba(124,58,237,0.60), rgba(236,72,153,0.58));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.8;
}

/* Close Button */
.aiwebskills-auth-close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 3;
}

.aiwebskills-auth-close:hover {
  background: rgba(239,68,68,0.22);
  border-color: rgba(248,113,113,0.45);
  transform: rotate(90deg);
}

/* Header */
.aiwebskills-auth-header {
  margin-bottom: 24px;
  padding-right: 46px;
  position: relative;
  z-index: 2;
}

.aiwebskills-auth-header::before {
  content: "✦";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  margin-bottom: 16px;
  color: #ffffff;
  background: linear-gradient(135deg, #00c6ff, #2563eb 45%, #7c3aed);
  box-shadow:
    0 12px 30px rgba(37,99,235,0.35),
    inset 0 1px 1px rgba(255,255,255,0.25);
}

.aiwebskills-auth-header h2 {
  color: #ffffff !important;
  font-size: 32px;
  line-height: 1.12;
  margin: 0 0 10px;
  font-weight: 950;
  letter-spacing: -0.9px;
}

.aiwebskills-auth-header p {
  color: #cbd5e1 !important;
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0;
}

/* Tabs */
.aiwebskills-auth-tabs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 26px;
  padding: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.065);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.07);
}

.aiwebskills-auth-tab {
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 13px 14px;
  color: #cbd5e1;
  background: transparent;
  font-size: 14px;
  font-weight: 900;
  transition: all 0.25s ease;
}

.aiwebskills-auth-tab:hover {
  color: #ffffff;
}

.aiwebskills-auth-tab.active {
  color: #ffffff;
  background: linear-gradient(135deg, #00c6ff 0%, #2563eb 42%, #7c3aed 100%);
  box-shadow:
    0 5px 0 rgba(15,23,42,0.85),
    0 14px 32px rgba(37,99,235,0.34);
}

/* Panels */
.aiwebskills-auth-panel {
  display: none;
  position: relative;
  z-index: 2;
}

.aiwebskills-auth-panel.active {
  display: block;
}

/* Form */
.aiwebskills-auth-form label {
  display: block;
  color: #e2e8f0;
  font-size: 13.5px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: 0.1px;
}

.aiwebskills-auth-form input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(15,23,42,0.78);
  color: #ffffff;
  padding: 15px 16px;
  margin-bottom: 17px;
  outline: none;
  font-size: 15px;
  line-height: 1.2;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.05),
    0 10px 24px rgba(0,0,0,0.16);
  transition: all 0.25s ease;
}

.aiwebskills-auth-form input::placeholder {
  color: rgba(203, 213, 225, 0.55);
}

.aiwebskills-auth-form input:focus {
  border-color: rgba(96,165,250,0.72);
  background: rgba(15,23,42,0.92);
  box-shadow:
    0 0 0 4px rgba(37,99,235,0.18),
    0 12px 28px rgba(37,99,235,0.16);
}

/* Submit Button */
.aiwebskills-auth-submit {
  width: 100%;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  color: #ffffff;
  padding: 17px 28px;
  font-size: 15.5px;
  font-weight: 950;
  letter-spacing: 0.1px;
  background: linear-gradient(135deg, #00c6ff 0%, #2563eb 38%, #7c3aed 72%, #ec4899 100%);
  box-shadow:
    0 7px 0 rgba(15,23,42,0.95),
    0 22px 55px rgba(37,99,235,0.42),
    0 34px 85px rgba(124,58,237,0.25),
    inset 0 2px 2px rgba(255,255,255,0.32);
  transition: all 0.28s ease;
}

.aiwebskills-auth-submit:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 9px 0 rgba(15,23,42,0.95),
    0 28px 65px rgba(37,99,235,0.52),
    0 42px 95px rgba(236,72,153,0.30),
    inset 0 2px 2px rgba(255,255,255,0.38);
}

/* Messages */
.aiwebskills-auth-message {
  display: none;
  padding: 13px 15px;
  border-radius: 15px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
}

.aiwebskills-auth-message.show {
  display: block;
}

.aiwebskills-auth-error {
  background: rgba(239,68,68,0.13);
  border: 1px solid rgba(239,68,68,0.35);
  color: #fecaca;
}

.aiwebskills-auth-success {
  background: rgba(34,197,94,0.13);
  border: 1px solid rgba(34,197,94,0.35);
  color: #bbf7d0;
}

/* Bottom helper text */
.aiwebskills-auth-small {
  margin-top: 20px;
  color: #cbd5e1;
  text-align: center;
  font-size: 14px;
  line-height: 1.65;
}

.aiwebskills-auth-small a {
  color: #93c5fd;
  font-weight: 900;
  text-decoration: none;
}

.aiwebskills-auth-small a:hover {
  color: #ffffff;
}

/* Dashboard placeholder */
.aiwebskills-dashboard-placeholder {
  max-width: 900px;
  margin: 70px auto;
  padding: 34px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,0.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
  border: 1px solid rgba(255,255,255,0.14);
  color: #ffffff;
  box-shadow: 0 28px 70px rgba(0,0,0,0.35);
}

.aiwebskills-dashboard-placeholder h2 {
  color: #ffffff !important;
  margin-top: 0;
}

.aiwebskills-logout-link {
  display: inline-flex;
  margin-top: 18px;
  padding: 12px 20px;
  border-radius: 999px;
  color: #ffffff !important;
  text-decoration: none;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  font-weight: 800;
}

/* Mobile */
@media (max-width: 600px) {
  .aiwebskills-auth-modal {
    padding: 14px;
  }

  .aiwebskills-auth-box {
    padding: 26px 20px 24px;
    border-radius: 26px;
  }

  .aiwebskills-auth-box::before {
    border-radius: 27px;
  }

  .aiwebskills-auth-header h2 {
    font-size: 26px;
  }

  .aiwebskills-auth-header p {
    font-size: 14.5px;
  }

  .aiwebskills-auth-tabs {
    gap: 7px;
  }

  .aiwebskills-auth-tab {
    padding: 12px 9px;
    font-size: 13px;
  }

  .aiwebskills-auth-form input {
    padding: 14px 14px;
    font-size: 14.5px;
  }

  .aiwebskills-auth-submit {
    padding: 16px 22px;
  }
}
/* Fix input text visibility */

.aiwebskills-auth-form input,
.aiwebskills-auth-form input[type="text"],
.aiwebskills-auth-form input[type="email"],
.aiwebskills-auth-form input[type="password"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
}

.aiwebskills-auth-form input::placeholder {
    color: rgba(255,255,255,0.45) !important;
}
/* Loading state */
.aiwebskills-auth-submit.is-loading,
.aiwebskills-auth-submit:disabled {
  opacity: 0.78;
  cursor: not-allowed;
  transform: none !important;
}

/* =====================================================
   AIWebSkills Auth OTP Verification Styling
===================================================== */

.aiwebskills-otp-intro {
  position: relative;
  z-index: 2;
  margin-bottom: 22px;
  padding: 18px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.18),
    inset 0 1px 1px rgba(255,255,255,0.06);
}

.aiwebskills-otp-intro h3 {
  color: #ffffff !important;
  font-size: 23px;
  line-height: 1.2;
  font-weight: 950;
  margin: 0 0 8px;
  letter-spacing: -0.4px;
}

.aiwebskills-otp-intro p {
  color: #cbd5e1 !important;
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 8px;
}

.aiwebskills-otp-intro strong {
  display: inline-block;
  color: #93c5fd !important;
  font-size: 14.5px;
  line-height: 1.4;
  font-weight: 900;
  word-break: break-all;
}

.aiwebskills-otp-form input[name="otp"] {
  text-align: center;
  font-size: 24px !important;
  font-weight: 950;
  letter-spacing: 8px;
  padding-left: 24px !important;
}

.aiwebskills-resend-otp.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.aiwebskills-otp-back {
  margin-top: 8px !important;
}

@media (max-width: 600px) {
  .aiwebskills-otp-intro {
    padding: 16px 15px;
    border-radius: 18px;
  }

  .aiwebskills-otp-intro h3 {
    font-size: 21px;
  }

  .aiwebskills-otp-form input[name="otp"] {
    font-size: 21px !important;
    letter-spacing: 6px;
  }
}


/* =====================================================
   AIWebSkills Reliable Logout Button Styling
===================================================== */
.aiwebskills-working-logout,
.tutor-dashboard .tutor-dashboard-menu-logout a,
.tutor-dashboard a[href*="logout"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 14px !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.18) !important;
  color: #dc2626 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.aiwebskills-working-logout:hover,
.tutor-dashboard .tutor-dashboard-menu-logout a:hover,
.tutor-dashboard a[href*="logout"]:hover {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(239, 68, 68, 0.24) !important;
}

.tutor-dashboard .tutor-dashboard-menu-logout a i,
.tutor-dashboard a[href*="logout"] i {
  color: inherit !important;
}


/* =====================================================
   AIWebSkills Tutor LMS - Premium My Profile Page
   Version 1.5.4
===================================================== */

body.aiwebskills-profile-page .tutor-dashboard-content,
body.aiwebskills-profile-page .tutor-dashboard-content-inner {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.20), transparent 30%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.16), transparent 34%),
    linear-gradient(135deg, #eef5ff 0%, #f8fbff 46%, #ffffff 100%) !important;
  border-radius: 32px !important;
  padding: 36px !important;
  overflow: hidden !important;
}

body.aiwebskills-profile-page .tutor-dashboard-content h1,
body.aiwebskills-profile-page .tutor-dashboard-content h2,
body.aiwebskills-profile-page .tutor-dashboard-content h3,
body.aiwebskills-profile-page .tutor-dashboard-content .tutor-fs-3,
body.aiwebskills-profile-page .tutor-dashboard-content .tutor-fs-4 {
  color: #0f172a !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  letter-spacing: -0.8px !important;
  margin: 0 0 26px !important;
  text-shadow: 0 2px 0 rgba(255,255,255,0.95), 0 14px 28px rgba(37,99,235,0.10) !important;
}

body.aiwebskills-profile-page .tutor-dashboard-content table {
  width: 100% !important;
  max-width: 980px !important;
  border-collapse: separate !important;
  border-spacing: 0 14px !important;
  padding: 26px !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.28), transparent 34%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.20), transparent 36%),
    linear-gradient(145deg, #07111f 0%, #0f1f45 48%, #0b1020 100%) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.24),
    inset 0 1px 1px rgba(255,255,255,0.10) !important;
  overflow: hidden !important;
}

body.aiwebskills-profile-page .tutor-dashboard-content table tbody,
body.aiwebskills-profile-page .tutor-dashboard-content table tr,
body.aiwebskills-profile-page .tutor-dashboard-content table td,
body.aiwebskills-profile-page .tutor-dashboard-content table th {
  background: transparent !important;
  border: none !important;
}

body.aiwebskills-profile-page .tutor-dashboard-content table tr {
  position: relative !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 20px !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.08),
    0 12px 28px rgba(0,0,0,0.12) !important;
  transition: all 0.25s ease !important;
}

body.aiwebskills-profile-page .tutor-dashboard-content table tr:hover {
  background: rgba(255,255,255,0.135) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.10),
    0 16px 38px rgba(0,0,0,0.18) !important;
}

body.aiwebskills-profile-page .tutor-dashboard-content table td,
body.aiwebskills-profile-page .tutor-dashboard-content table th {
  padding: 18px 22px !important;
  vertical-align: middle !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
}

body.aiwebskills-profile-page .tutor-dashboard-content table tr td:first-child,
body.aiwebskills-profile-page .tutor-dashboard-content table tr th:first-child {
  width: 250px !important;
  min-width: 230px !important;
  border-radius: 18px 0 0 18px !important;
  font-weight: 950 !important;
  letter-spacing: 0.2px !important;
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 34%, #c084fc 66%, #f472b6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.20),
    0 4px 13px rgba(56, 189, 248, 0.34),
    0 10px 24px rgba(124, 58, 237, 0.18) !important;
}

body.aiwebskills-profile-page .tutor-dashboard-content table tr td:last-child,
body.aiwebskills-profile-page .tutor-dashboard-content table tr th:last-child {
  position: relative !important;
  border-radius: 0 18px 18px 0 !important;
  color: #ffffff !important;
  font-weight: 820 !important;
  word-break: break-word !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.40), 0 8px 20px rgba(37, 99, 235, 0.18) !important;
}

body.aiwebskills-profile-page .tutor-dashboard-content table tr td:last-child::before,
body.aiwebskills-profile-page .tutor-dashboard-content table tr th:last-child::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 16px;
  top: 9px;
  bottom: 9px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08);
  z-index: 0;
  pointer-events: none;
}

body.aiwebskills-profile-page .tutor-dashboard-content table tr td:last-child > *,
body.aiwebskills-profile-page .tutor-dashboard-content table tr th:last-child > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Keeps plain text visible above the pseudo-background */
body.aiwebskills-profile-page .tutor-dashboard-content table tr td:last-child,
body.aiwebskills-profile-page .tutor-dashboard-content table tr th:last-child {
  isolation: isolate !important;
}

body.aiwebskills-profile-page .tutor-dashboard-content table tr td:last-child a,
body.aiwebskills-profile-page .tutor-dashboard-content table tr th:last-child a {
  color: #bfdbfe !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

/* Fallback for Tutor LMS profile pages that use div rows instead of a table */
body.aiwebskills-profile-page .tutor-dashboard-content .tutor-row,
body.aiwebskills-profile-page .tutor-dashboard-content .tutor-d-flex,
body.aiwebskills-profile-page .tutor-dashboard-content .tutor-profile-info > div,
body.aiwebskills-profile-page .tutor-dashboard-content .tutor-dashboard-profile-data > div,
body.aiwebskills-profile-page .tutor-dashboard-content .tutor-user-profile-info > div {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 20px !important;
  margin-bottom: 14px !important;
  padding: 16px 20px !important;
}

@media (max-width: 768px) {
  body.aiwebskills-profile-page .tutor-dashboard-content,
  body.aiwebskills-profile-page .tutor-dashboard-content-inner {
    padding: 20px !important;
    border-radius: 22px !important;
  }

  body.aiwebskills-profile-page .tutor-dashboard-content table {
    padding: 16px !important;
    border-radius: 24px !important;
    border-spacing: 0 12px !important;
  }

  body.aiwebskills-profile-page .tutor-dashboard-content table,
  body.aiwebskills-profile-page .tutor-dashboard-content table tbody,
  body.aiwebskills-profile-page .tutor-dashboard-content table tr,
  body.aiwebskills-profile-page .tutor-dashboard-content table td,
  body.aiwebskills-profile-page .tutor-dashboard-content table th {
    display: block !important;
    width: 100% !important;
  }

  body.aiwebskills-profile-page .tutor-dashboard-content table tr {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body.aiwebskills-profile-page .tutor-dashboard-content table td,
  body.aiwebskills-profile-page .tutor-dashboard-content table th {
    padding: 6px 4px !important;
  }

  body.aiwebskills-profile-page .tutor-dashboard-content table tr td:first-child,
  body.aiwebskills-profile-page .tutor-dashboard-content table tr th:first-child {
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 !important;
    margin-bottom: 7px !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
  }

  body.aiwebskills-profile-page .tutor-dashboard-content table tr td:last-child,
  body.aiwebskills-profile-page .tutor-dashboard-content table tr th:last-child {
    border-radius: 15px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
  }

  body.aiwebskills-profile-page .tutor-dashboard-content table tr td:last-child::before,
  body.aiwebskills-profile-page .tutor-dashboard-content table tr th:last-child::before {
    left: 0;
    right: 0;
    top: 4px;
    bottom: 4px;
  }
}

/* AIWebSkills Auth - cleaner login error and forgot password link */
.aiwebskills-forgot-password {
  margin-top: 16px !important;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(37, 99, 235, 0.10);
  border: 1px solid rgba(96, 165, 250, 0.20);
}

.aiwebskills-forgot-password a {
  color: #bfdbfe !important;
  font-weight: 950 !important;
}

.aiwebskills-auth-error {
  border-radius: 18px !important;
  padding: 15px 16px !important;
  font-weight: 750 !important;
}

/* =====================================================
   AIWebSkills Auth Popup - Ultra Glossy 3D Upgrade
   Version 1.5.6
===================================================== */

/* Richer blurred overlay */
.aiwebskills-auth-modal {
  background:
    radial-gradient(circle at 18% 16%, rgba(56, 189, 248, 0.24), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(124, 58, 237, 0.30), transparent 30%),
    radial-gradient(circle at 50% 92%, rgba(236, 72, 153, 0.20), transparent 34%),
    linear-gradient(135deg, rgba(2, 6, 23, 0.92), rgba(15, 23, 42, 0.92)) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

/* Main popup body - deeper 3D glossy card */
.aiwebskills-auth-box {
  max-width: 590px !important;
  border-radius: 38px !important;
  padding: 38px 36px 34px !important;
  overflow: hidden auto !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(56, 189, 248, 0.30), transparent 30%),
    radial-gradient(circle at 100% 18%, rgba(124, 58, 237, 0.35), transparent 34%),
    radial-gradient(circle at 20% 100%, rgba(236, 72, 153, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 20, 50, 0.99) 48%, rgba(2, 6, 23, 1) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 7px 0 rgba(2, 6, 23, 0.95),
    0 42px 120px rgba(0, 0, 0, 0.72),
    0 28px 90px rgba(37, 99, 235, 0.25),
    0 12px 42px rgba(236, 72, 153, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    inset 0 -24px 60px rgba(0, 0, 0, 0.22) !important;
}

/* Glossy shine across the top */
.aiwebskills-auth-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 74px;
  border-radius: 0 0 50% 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04), transparent),
    radial-gradient(ellipse at center, rgba(255,255,255,0.20), transparent 66%);
  opacity: 0.74;
  pointer-events: none;
  z-index: 1;
}

/* Neon gradient border */
.aiwebskills-auth-box::before {
  border-radius: 39px !important;
  padding: 1.5px !important;
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 28%, #7c3aed 58%, #ec4899 82%, #facc15 100%) !important;
  opacity: 0.92 !important;
}

/* Keep content above glossy layer */
.aiwebskills-auth-header,
.aiwebskills-auth-tabs,
.aiwebskills-auth-panel,
.aiwebskills-auth-close {
  position: relative !important;
  z-index: 3 !important;
}

/* Close button - glossy red hover */
.aiwebskills-auth-close {
  width: 43px !important;
  height: 43px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055)) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow:
    0 7px 0 rgba(2, 6, 23, 0.65),
    0 16px 34px rgba(0,0,0,0.30),
    inset 0 1px 1px rgba(255,255,255,0.30) !important;
}

.aiwebskills-auth-close:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color: rgba(248,113,113,0.75) !important;
  box-shadow:
    0 7px 0 rgba(127, 29, 29, 0.85),
    0 18px 38px rgba(239,68,68,0.30),
    inset 0 1px 1px rgba(255,255,255,0.30) !important;
}

/* Header icon - premium cube */
.aiwebskills-auth-header::before {
  width: 46px !important;
  height: 46px !important;
  border-radius: 18px !important;
  margin-bottom: 18px !important;
  background:
    linear-gradient(135deg, #38bdf8 0%, #2563eb 36%, #7c3aed 72%, #ec4899 100%) !important;
  box-shadow:
    0 6px 0 rgba(15,23,42,0.88),
    0 18px 40px rgba(37,99,235,0.42),
    0 24px 60px rgba(124,58,237,0.25),
    inset 0 2px 2px rgba(255,255,255,0.36) !important;
}

.aiwebskills-auth-header h2 {
  font-size: 35px !important;
  line-height: 1.08 !important;
  font-weight: 1000 !important;
  letter-spacing: -1.2px !important;
  background: linear-gradient(135deg, #ffffff 0%, #dbeafe 38%, #bfdbfe 62%, #ffffff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 16px 34px rgba(37, 99, 235, 0.25) !important;
}

.aiwebskills-auth-header p {
  color: #dbeafe !important;
  font-size: 15.8px !important;
  line-height: 1.72 !important;
  max-width: 440px;
}

/* Tabs - raised glass rail */
.aiwebskills-auth-tabs {
  padding: 8px !important;
  gap: 10px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.14),
    0 16px 32px rgba(0,0,0,0.20) !important;
}

.aiwebskills-auth-tab {
  padding: 14px 16px !important;
  color: #cbd5e1 !important;
  font-size: 14.5px !important;
  font-weight: 950 !important;
  letter-spacing: 0.1px !important;
}

.aiwebskills-auth-tab.active {
  background:
    linear-gradient(135deg, #22d3ee 0%, #2563eb 38%, #7c3aed 72%, #ec4899 100%) !important;
  box-shadow:
    0 6px 0 rgba(15,23,42,0.90),
    0 18px 38px rgba(37,99,235,0.36),
    inset 0 2px 2px rgba(255,255,255,0.32) !important;
  transform: translateY(-1px);
}

/* Labels - colorful 3D */
.aiwebskills-auth-form label {
  color: #e0f2fe !important;
  font-size: 13.8px !important;
  font-weight: 950 !important;
  margin-bottom: 9px !important;
  letter-spacing: 0.15px !important;
  text-shadow: 0 6px 16px rgba(56, 189, 248, 0.20) !important;
}

/* Inputs - glossy inset fields */
.aiwebskills-auth-form input,
.aiwebskills-auth-form input[type="text"],
.aiwebskills-auth-form input[type="email"],
.aiwebskills-auth-form input[type="password"] {
  border-radius: 18px !important;
  border: 1px solid rgba(147, 197, 253, 0.22) !important;
  background:
    linear-gradient(145deg, rgba(15,23,42,0.96), rgba(30,41,59,0.76)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  padding: 16px 17px !important;
  margin-bottom: 18px !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.40),
    inset 0 1px 1px rgba(255,255,255,0.08),
    0 12px 28px rgba(0,0,0,0.20) !important;
}

.aiwebskills-auth-form input:hover,
.aiwebskills-auth-form input[type="text"]:hover,
.aiwebskills-auth-form input[type="email"]:hover,
.aiwebskills-auth-form input[type="password"]:hover {
  border-color: rgba(125, 211, 252, 0.42) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.38),
    0 0 0 3px rgba(14,165,233,0.08),
    0 14px 30px rgba(37,99,235,0.14) !important;
}

.aiwebskills-auth-form input:focus,
.aiwebskills-auth-form input[type="text"]:focus,
.aiwebskills-auth-form input[type="email"]:focus,
.aiwebskills-auth-form input[type="password"]:focus {
  border-color: rgba(56, 189, 248, 0.88) !important;
  background:
    linear-gradient(145deg, rgba(15,23,42,1), rgba(30,41,59,0.88)) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.40),
    0 0 0 4px rgba(14,165,233,0.18),
    0 0 0 1px rgba(255,255,255,0.08),
    0 18px 42px rgba(37,99,235,0.26) !important;
}

.aiwebskills-auth-form input::placeholder {
  color: rgba(219, 234, 254, 0.52) !important;
}

/* Primary submit button - stronger 3D gloss */
.aiwebskills-auth-submit {
  position: relative !important;
  overflow: hidden !important;
  padding: 18px 30px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
  letter-spacing: 0.15px !important;
  color: #ffffff !important;
  background:
    linear-gradient(135deg, #22d3ee 0%, #2563eb 32%, #7c3aed 68%, #ec4899 100%) !important;
  box-shadow:
    0 8px 0 rgba(15,23,42,0.96),
    0 24px 58px rgba(37,99,235,0.45),
    0 36px 90px rgba(124,58,237,0.26),
    inset 0 2px 2px rgba(255,255,255,0.36),
    inset 0 -12px 26px rgba(0,0,0,0.16) !important;
}

.aiwebskills-auth-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 46%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.05)) !important;
  pointer-events: none;
}

.aiwebskills-auth-submit::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -30%;
  width: 28%;
  height: 260%;
  transform: rotate(28deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  opacity: 0;
  transition: all 0.55s ease;
  pointer-events: none;
}

.aiwebskills-auth-submit:hover {
  transform: translateY(-4px) scale(1.018) !important;
  box-shadow:
    0 10px 0 rgba(15,23,42,0.96),
    0 30px 70px rgba(37,99,235,0.55),
    0 44px 105px rgba(236,72,153,0.30),
    inset 0 2px 2px rgba(255,255,255,0.42),
    inset 0 -12px 26px rgba(0,0,0,0.14) !important;
}

.aiwebskills-auth-submit:hover::after {
  left: 110%;
  opacity: 1;
}

.aiwebskills-auth-submit:active {
  transform: translateY(2px) scale(0.995) !important;
  box-shadow:
    0 3px 0 rgba(15,23,42,0.96),
    0 18px 42px rgba(37,99,235,0.38),
    inset 0 2px 2px rgba(255,255,255,0.28) !important;
}

/* Message boxes - polished */
.aiwebskills-auth-message.show {
  border-radius: 20px !important;
  padding: 15px 16px !important;
  font-size: 14.3px !important;
  line-height: 1.58 !important;
  font-weight: 800 !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.20),
    inset 0 1px 1px rgba(255,255,255,0.12) !important;
}

.aiwebskills-auth-error {
  background:
    radial-gradient(circle at top left, rgba(248, 113, 113, 0.18), transparent 44%),
    rgba(127, 29, 29, 0.25) !important;
  border: 1px solid rgba(248, 113, 113, 0.38) !important;
  color: #fecaca !important;
}

.aiwebskills-auth-success {
  background:
    radial-gradient(circle at top left, rgba(74, 222, 128, 0.20), transparent 44%),
    rgba(20, 83, 45, 0.28) !important;
  border: 1px solid rgba(74, 222, 128, 0.38) !important;
  color: #bbf7d0 !important;
}

/* Helper links */
.aiwebskills-auth-small,
.aiwebskills-forgot-password {
  color: #dbeafe !important;
}

.aiwebskills-auth-small a,
.aiwebskills-forgot-password a,
.aiwebskills-resend-otp,
.aiwebskills-otp-back {
  color: #93c5fd !important;
  font-weight: 1000 !important;
  text-decoration: none !important;
  text-shadow: 0 8px 18px rgba(37, 99, 235, 0.24) !important;
}

.aiwebskills-auth-small a:hover,
.aiwebskills-forgot-password a:hover,
.aiwebskills-resend-otp:hover,
.aiwebskills-otp-back:hover {
  color: #ffffff !important;
}

.aiwebskills-forgot-password {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(124, 58, 237, 0.10)) !important;
  border: 1px solid rgba(147, 197, 253, 0.24) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 12px 28px rgba(0,0,0,0.16) !important;
}

/* OTP card refinement */
.aiwebskills-otp-intro {
  border-radius: 24px !important;
  padding: 20px !important;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,0.18), transparent 44%),
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,0.22),
    inset 0 1px 1px rgba(255,255,255,0.12) !important;
}

.aiwebskills-otp-intro h3 {
  background: linear-gradient(135deg, #ffffff, #bfdbfe, #ffffff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.aiwebskills-otp-form input[name="otp"] {
  border-radius: 22px !important;
  letter-spacing: 9px !important;
  background:
    linear-gradient(145deg, rgba(2,6,23,0.96), rgba(30,41,59,0.82)) !important;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.44),
    0 18px 44px rgba(37,99,235,0.20) !important;
}

/* Mobile refinement */
@media (max-width: 600px) {
  .aiwebskills-auth-box {
    padding: 30px 22px 26px !important;
    border-radius: 30px !important;
  }

  .aiwebskills-auth-box::before {
    border-radius: 31px !important;
  }

  .aiwebskills-auth-box::after {
    height: 58px !important;
  }

  .aiwebskills-auth-header h2 {
    font-size: 28px !important;
  }

  .aiwebskills-auth-header p {
    font-size: 14.6px !important;
  }

  .aiwebskills-auth-form input,
  .aiwebskills-auth-form input[type="text"],
  .aiwebskills-auth-form input[type="email"],
  .aiwebskills-auth-form input[type="password"] {
    padding: 15px 15px !important;
    font-size: 15px !important;
  }

  .aiwebskills-auth-submit {
    padding: 17px 22px !important;
  }
}


/* =====================================================
   AIWebSkills Auth Popup - Wrapper Line + Close Button Fix
   Version 1.5.7
===================================================== */

/* Remove the extra internal glossy/wrapper line across the popup */
.aiwebskills-auth-box::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Keep only one clean outer neon border and avoid inner pseudo-layer overlaps */
.aiwebskills-auth-box {
  position: relative !important;
  overflow: hidden auto !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

/* Make the close/cancel button clearer and place it firmly at the top-right */
.aiwebskills-auth-close {
  position: absolute !important;
  top: 20px !important;
  right: 22px !important;
  left: auto !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 31px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  background:
    linear-gradient(135deg, rgba(248, 113, 113, 0.98), rgba(220, 38, 38, 0.96)) !important;
  border: 1px solid rgba(254, 202, 202, 0.68) !important;
  box-shadow:
    0 6px 0 rgba(127, 29, 29, 0.92),
    0 18px 38px rgba(239, 68, 68, 0.34),
    0 0 0 5px rgba(239, 68, 68, 0.12),
    inset 0 2px 2px rgba(255, 255, 255, 0.38),
    inset 0 -8px 18px rgba(127, 29, 29, 0.22) !important;
  transform: none !important;
}

.aiwebskills-auth-close:hover {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, #fb7185 0%, #ef4444 45%, #b91c1c 100%) !important;
  border-color: rgba(254, 226, 226, 0.88) !important;
  box-shadow:
    0 8px 0 rgba(127, 29, 29, 0.95),
    0 24px 48px rgba(239, 68, 68, 0.42),
    0 0 0 6px rgba(239, 68, 68, 0.16),
    inset 0 2px 2px rgba(255, 255, 255, 0.44),
    inset 0 -8px 18px rgba(127, 29, 29, 0.20) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

.aiwebskills-auth-close:active {
  transform: translateY(2px) scale(0.98) !important;
  box-shadow:
    0 3px 0 rgba(127, 29, 29, 0.95),
    0 15px 32px rgba(239, 68, 68, 0.34),
    inset 0 2px 2px rgba(255, 255, 255, 0.30) !important;
}

/* Keep header text clear of the close button */
.aiwebskills-auth-header {
  padding-right: 72px !important;
}

/* Mobile close button refinement */
@media (max-width: 600px) {
  .aiwebskills-auth-close {
    top: 14px !important;
    right: 14px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 28px !important;
  }

  .aiwebskills-auth-header {
    padding-right: 54px !important;
  }
}


/* =====================================================
   AIWebSkills Auth Popup - Remove Inner Wrapper/Border Line
   Version 1.5.8
   This keeps only one clean popup container and removes the extra
   internal outline/wrapper effect seen around the form area.
===================================================== */

/* Remove pseudo borders/shine layers that create the unwanted inner wrapper line */
.aiwebskills-auth-modal .aiwebskills-auth-box::before,
.aiwebskills-auth-modal .aiwebskills-auth-box::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep the popup as one clean glossy container */
.aiwebskills-auth-modal .aiwebskills-auth-box {
  position: relative !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid rgba(147, 197, 253, 0.22) !important;
  outline: none !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(56, 189, 248, 0.26), transparent 30%),
    radial-gradient(circle at 100% 18%, rgba(124, 58, 237, 0.30), transparent 34%),
    radial-gradient(circle at 20% 100%, rgba(236, 72, 153, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 20, 50, 0.99) 48%, rgba(2, 6, 23, 1) 100%) !important;
  box-shadow:
    0 7px 0 rgba(2, 6, 23, 0.95),
    0 42px 120px rgba(0, 0, 0, 0.72),
    0 28px 90px rgba(37, 99, 235, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    inset 0 1px 1px rgba(255, 255, 255, 0.13),
    inset 0 -24px 60px rgba(0, 0, 0, 0.20) !important;
}

/* Remove borders/backgrounds from internal wrappers and panels */
.aiwebskills-auth-modal .aiwebskills-auth-panel,
.aiwebskills-auth-modal .aiwebskills-auth-form,
.aiwebskills-auth-modal .aiwebskills-auth-form-wrap,
.aiwebskills-auth-modal .aiwebskills-auth-body,
.aiwebskills-auth-modal .aiwebskills-auth-content,
.aiwebskills-auth-modal .aiwebskills-auth-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove any generated decorative lines on internal form wrappers */
.aiwebskills-auth-modal .aiwebskills-auth-panel::before,
.aiwebskills-auth-modal .aiwebskills-auth-panel::after,
.aiwebskills-auth-modal .aiwebskills-auth-form::before,
.aiwebskills-auth-modal .aiwebskills-auth-form::after,
.aiwebskills-auth-modal .aiwebskills-auth-body::before,
.aiwebskills-auth-modal .aiwebskills-auth-body::after,
.aiwebskills-auth-modal .aiwebskills-auth-content::before,
.aiwebskills-auth-modal .aiwebskills-auth-content::after,
.aiwebskills-auth-modal .aiwebskills-auth-inner::before,
.aiwebskills-auth-modal .aiwebskills-auth-inner::after {
  content: none !important;
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Keep the reset password row clean, not like another wrapper box */
.aiwebskills-auth-modal .aiwebskills-forgot-password {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 0 0 !important;
  margin-top: 16px !important;
}

/* Keep the close/cancel button highly visible and fixed at the top-right */
.aiwebskills-auth-modal .aiwebskills-auth-close {
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
  left: auto !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 31px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  background: linear-gradient(135deg, #fb7185 0%, #ef4444 45%, #b91c1c 100%) !important;
  border: 1px solid rgba(254, 226, 226, 0.85) !important;
  box-shadow:
    0 7px 0 rgba(127, 29, 29, 0.92),
    0 20px 42px rgba(239, 68, 68, 0.38),
    0 0 0 5px rgba(239, 68, 68, 0.12),
    inset 0 2px 2px rgba(255, 255, 255, 0.42),
    inset 0 -8px 18px rgba(127, 29, 29, 0.20) !important;
  transform: none !important;
}

.aiwebskills-auth-modal .aiwebskills-auth-close:hover {
  background: linear-gradient(135deg, #f43f5e 0%, #dc2626 55%, #991b1b 100%) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

@media (max-width: 600px) {
  .aiwebskills-auth-modal .aiwebskills-auth-close {
    top: 14px !important;
    right: 14px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 28px !important;
  }
}


/* =====================================================
   AIWebSkills - Student Dashboard Course Access Card
===================================================== */
.aws-student-course-access {
  margin: 0 0 28px 0;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.28), transparent 32%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.20), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #172554 48%, #111827 100%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 24px 65px rgba(15, 23, 42, 0.22),
    inset 0 1px 1px rgba(255,255,255,0.12);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.aws-student-course-access::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(96,165,250,0.36), transparent 68%);
  pointer-events: none;
}

.aws-student-course-access-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: 24px;
  align-items: center;
}

.aws-student-course-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(147,197,253,0.22);
}

.aws-student-course-access h2 {
  margin: 0 0 10px;
  color: #ffffff !important;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.8px;
}

.aws-student-course-access p {
  max-width: 720px;
  margin: 0;
  color: #dbeafe !important;
  font-size: 15.5px;
  line-height: 1.75;
}

.aws-student-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.aws-student-course-meta span {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  color: #e0f2fe;
  font-size: 13px;
  font-weight: 800;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.aws-student-course-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 240px;
}

.aws-student-course-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 24px;
  border-radius: 999px;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 950;
  text-align: center;
  transition: all 0.25s ease;
}

.aws-student-course-btn-primary {
  background: linear-gradient(135deg, #00c6ff 0%, #2563eb 38%, #7c3aed 72%, #ec4899 100%);
  box-shadow:
    0 7px 0 rgba(15,23,42,0.95),
    0 22px 45px rgba(37,99,235,0.35),
    inset 0 2px 2px rgba(255,255,255,0.32);
}

.aws-student-course-btn-secondary {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08);
}

.aws-student-course-btn:hover {
  transform: translateY(-3px);
}

.aws-course-catalog-intro {
  margin: 40px auto 28px;
  max-width: 1120px;
  padding: 34px 28px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.25), transparent 34%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.16), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #172554 55%, #111827 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 24px 65px rgba(15,23,42,0.18);
}

.aws-course-catalog-intro span {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.aws-course-catalog-intro h1 {
  margin: 0 0 10px;
  color: #ffffff !important;
  font-size: 36px;
  line-height: 1.12;
  font-weight: 950;
}

.aws-course-catalog-intro p {
  margin: 0;
  color: #dbeafe !important;
  font-size: 16px;
  line-height: 1.75;
  max-width: 780px;
}

@media (max-width: 768px) {
  .aws-student-course-access {
    padding: 22px;
    border-radius: 22px;
  }

  .aws-student-course-access-inner {
    grid-template-columns: 1fr;
  }

  .aws-student-course-access h2 {
    font-size: 23px;
  }

  .aws-student-course-actions {
    min-width: 100%;
  }

  .aws-student-course-btn {
    width: 100%;
  }

  .aws-course-catalog-intro {
    margin: 24px 14px 22px;
    padding: 26px 20px;
    border-radius: 24px;
  }

  .aws-course-catalog-intro h1 {
    font-size: 28px;
  }
}


/* =====================================================
   AIWebSkills - Dashboard Browse Training Visibility Fix
===================================================== */
.aws-student-course-access {
  display: block !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto 28px !important;
  padding: 28px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.25), transparent 32%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.18), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #172554 48%, #111827 100%) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    0 24px 65px rgba(15, 23, 42, 0.22),
    inset 0 1px 1px rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.aws-student-course-access::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(96,165,250,0.35), transparent 68%);
  pointer-events: none;
}

.aws-student-course-access-inner {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: 1.5fr auto;
  gap: 24px;
  align-items: center;
}

.aws-student-course-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #bfdbfe !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(147,197,253,0.22);
}

.aws-student-course-access h2 {
  margin: 0 0 10px !important;
  color: #ffffff !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: -0.8px !important;
}

.aws-student-course-access p {
  max-width: 720px;
  margin: 0 !important;
  color: #dbeafe !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
}

.aws-student-course-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.aws-student-course-meta span {
  display: inline-flex !important;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  color: #e0f2fe !important;
  font-size: 13px;
  font-weight: 800;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.aws-student-course-actions {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  min-width: 240px;
}

.aws-student-course-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 24px;
  border-radius: 999px;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 950;
  text-align: center;
  transition: all 0.25s ease;
}

.aws-student-course-btn-primary {
  background: linear-gradient(135deg, #00c6ff 0%, #2563eb 38%, #7c3aed 72%, #ec4899 100%) !important;
  box-shadow:
    0 7px 0 rgba(15,23,42,0.95),
    0 22px 45px rgba(37,99,235,0.35),
    inset 0 2px 2px rgba(255,255,255,0.32) !important;
}

.aws-student-course-btn-secondary {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08) !important;
}

.aiwebskills-browse-training-menu-item a {
  background: linear-gradient(135deg, #06b6d4, #2563eb, #7c3aed) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22) !important;
}

.aiwebskills-browse-training-menu-item a:hover {
  transform: translateX(4px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.30) !important;
}

.aiwebskills-menu-icon {
  display: inline-flex;
  margin-right: 10px;
}

@media (max-width: 768px) {
  .aws-student-course-access {
    padding: 22px !important;
    border-radius: 22px !important;
  }

  .aws-student-course-access-inner {
    grid-template-columns: 1fr !important;
  }

  .aws-student-course-access h2 {
    font-size: 23px !important;
  }

  .aws-student-course-actions {
    min-width: 100% !important;
  }

  .aws-student-course-btn {
    width: 100% !important;
  }
}


/* =====================================================
   AIWebSkills - Student Dashboard Premium Refinements
   Version 1.6.1
===================================================== */

/* Reduce spacing between injected training card and the dashboard */
body.aiwebskills-tutor-dashboard-page .aws-student-course-access {
  margin-bottom: 22px !important;
}

/* Cleaner dashboard section heading */
.aiwebskills-dashboard-section-title {
  max-width: 1120px;
  margin: 0 auto 18px;
  padding: 0 4px;
}

.aiwebskills-dashboard-section-title span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.aiwebskills-dashboard-section-title h2 {
  margin: 0 0 4px !important;
  color: #0f172a !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: -0.7px !important;
}

.aiwebskills-dashboard-section-title p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}

/* Profile welcome/header card polish */
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header-wrap {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 34%),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.18), transparent 36%),
    linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 26px !important;
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.18) !important;
  padding: 28px !important;
  margin-bottom: 26px !important;
  color: #ffffff !important;
}

body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header *,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info *,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header-wrap * {
  box-sizing: border-box !important;
}

/* Remove the ugly square around the initials avatar and keep only the circle */
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header [class*="avatar"],
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info [class*="avatar"],
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header-wrap [class*="avatar"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header .tutor-avatar,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header .tutor-avatar-text,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header img,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info .tutor-avatar,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info .tutor-avatar-text,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info img,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header-wrap .tutor-avatar,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header-wrap .tutor-avatar-text,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header-wrap img {
  border-radius: 50% !important;
  border: 4px solid rgba(255,255,255,0.88) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,0.22),
    0 0 0 8px rgba(255,255,255,0.08) !important;
  overflow: hidden !important;
}

/* Make greeting and name visible */
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header h1,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header h2,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header h3,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header h4,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header h5,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header .tutor-fs-4,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header .tutor-fs-5,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info h1,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info h2,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info h3,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info h4,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info h5,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info .tutor-fs-4,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info .tutor-fs-5 {
  color: #ffffff !important;
  font-weight: 950 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.26) !important;
}

body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header span,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header p,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info span,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info p {
  color: #dbeafe !important;
}

/* Sidebar polish and simplified hidden items */
.aiwebskills-hidden-dashboard-menu-item {
  display: none !important;
}

body.aiwebskills-tutor-dashboard-page .tutor-dashboard-left-menu,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-permalinks {
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 45px rgba(15,23,42,0.10) !important;
}

body.aiwebskills-tutor-dashboard-page .tutor-dashboard-left-menu a,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-permalinks a,
body.aiwebskills-tutor-dashboard-page .aiwebskills-browse-training-menu-item a {
  text-decoration: none !important;
}

body.aiwebskills-tutor-dashboard-page .aiwebskills-browse-training-menu-item a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 18px !important;
  margin: 8px 12px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #06b6d4 0%, #2563eb 48%, #7c3aed 100%) !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  box-shadow:
    0 8px 0 rgba(15,23,42,0.82),
    0 18px 34px rgba(37,99,235,0.24),
    inset 0 1px 1px rgba(255,255,255,0.24) !important;
}

body.aiwebskills-tutor-dashboard-page .aiwebskills-browse-training-menu-item a:hover {
  transform: translateX(4px) translateY(-1px) !important;
  box-shadow:
    0 9px 0 rgba(15,23,42,0.82),
    0 22px 40px rgba(37,99,235,0.34),
    inset 0 1px 1px rgba(255,255,255,0.28) !important;
}

body.aiwebskills-tutor-dashboard-page .aiwebskills-menu-icon {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  flex: 0 0 22px !important;
}

/* Dashboard stat cards */
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content .tutor-dashboard-info-card,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content .tutor-card,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content .tutor-dashboard-card,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content [class*="dashboard-card"] {
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top left, rgba(96,165,250,0.16), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  border: 1px solid rgba(37,99,235,0.08) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,0.08) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content .tutor-dashboard-info-card:hover,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content .tutor-card:hover,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content .tutor-dashboard-card:hover,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content [class*="dashboard-card"]:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 26px 58px rgba(37,99,235,0.14) !important;
}

body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content .tutor-dashboard-info-card h3,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content .tutor-dashboard-info-card h4,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content .tutor-card h3,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content .tutor-card h4,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content [class*="dashboard-card"] h3,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-content [class*="dashboard-card"] h4 {
  color: #0f172a !important;
  font-weight: 950 !important;
}

/* Support card */
.aiwebskills-dashboard-support-card {
  max-width: 1120px;
  margin: 26px auto 0;
  padding: 24px 26px;
  border-radius: 26px;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 24px;
  align-items: center;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,0.16), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(37,99,235,0.10);
  box-shadow: 0 18px 46px rgba(15,23,42,0.08);
}

.aiwebskills-support-copy span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 11px;
  border-radius: 999px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: rgba(37,99,235,0.08);
}

.aiwebskills-support-copy h3 {
  margin: 0 0 6px !important;
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

.aiwebskills-support-copy p {
  margin: 0 !important;
  color: #64748b !important;
  line-height: 1.7 !important;
}

.aiwebskills-support-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.aiwebskills-support-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none !important;
  color: #ffffff !important;
  font-weight: 900;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 12px 24px rgba(37,99,235,0.18);
}

.aiwebskills-support-actions a:nth-child(2) {
  color: #1e3a8a !important;
  background: #eff6ff;
  border: 1px solid rgba(37,99,235,0.12);
  box-shadow: none;
}

@media (max-width: 768px) {
  .aiwebskills-dashboard-section-title,
  .aiwebskills-dashboard-support-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .aiwebskills-dashboard-support-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 22px;
  }

  .aiwebskills-support-actions {
    justify-content: stretch;
  }

  .aiwebskills-support-actions a {
    width: 100%;
  }

  body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header,
  body.aiwebskills-tutor-dashboard-page .tutor-dashboard-profile-info,
  body.aiwebskills-tutor-dashboard-page .tutor-dashboard-header-wrap {
    padding: 22px !important;
    border-radius: 22px !important;
  }
}


/* =====================================================
   AIWebSkills - Tutor LMS Course Page Premium Styling
   Version 1.6.2
===================================================== */

body.aiwebskills-tutor-course-page {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 32%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.08), transparent 34%),
    #f3f7ff !important;
}

body.aiwebskills-tutor-course-page .site-content,
body.aiwebskills-tutor-course-page #content,
body.aiwebskills-tutor-course-page main,
body.aiwebskills-tutor-course-page .content-area {
  background: transparent !important;
}

body.aiwebskills-tutor-course-page .tutor-course-details-page,
body.aiwebskills-tutor-course-page .tutor-course-single-content-wrapper,
body.aiwebskills-tutor-course-page .tutor-container,
body.aiwebskills-tutor-course-page .tutor-container-fluid {
  max-width: 1180px !important;
}

/* Course title and meta */
body.aiwebskills-tutor-course-page h1,
body.aiwebskills-tutor-course-page .tutor-course-details-title,
body.aiwebskills-tutor-course-page .entry-title {
  color: #0f172a !important;
  font-size: clamp(30px, 3vw, 48px) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -1.4px !important;
  margin-bottom: 18px !important;
}

body.aiwebskills-tutor-course-page .tutor-course-details-header,
body.aiwebskills-tutor-course-page .tutor-course-details-header-meta,
body.aiwebskills-tutor-course-page .tutor-course-details-ratings,
body.aiwebskills-tutor-course-page .tutor-meta,
body.aiwebskills-tutor-course-page .tutor-course-details-info {
  color: #475569 !important;
}

body.aiwebskills-tutor-course-page .tutor-avatar,
body.aiwebskills-tutor-course-page .tutor-avatar img,
body.aiwebskills-tutor-course-page .tutor-course-details-header .tutor-avatar,
body.aiwebskills-tutor-course-page .tutor-course-details-header img.avatar {
  border-radius: 999px !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18) !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
}

/* Hide Wishlist on the course page for a simpler student experience */
body.aiwebskills-tutor-course-page .tutor-course-wishlist,
body.aiwebskills-tutor-course-page .tutor-course-wishlist-btn,
body.aiwebskills-tutor-course-page .tutor-course-favorite-btn,
body.aiwebskills-tutor-course-page .tutor-course-favorite-btn {
  display: none !important;
}

/* Course thumbnail */
body.aiwebskills-tutor-course-page .tutor-course-thumbnail,
body.aiwebskills-tutor-course-page .tutor-course-details-thumbnail,
body.aiwebskills-tutor-course-page .tutor-course-details-page .tutor-ratio,
body.aiwebskills-tutor-course-page .tutor-course-details-page .tutor-video-player-wrapper {
  padding: 10px !important;
  border-radius: 30px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(239,246,255,0.92)) !important;
  border: 1px solid rgba(37, 99, 235, 0.12) !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12) !important;
  overflow: hidden !important;
}

body.aiwebskills-tutor-course-page .tutor-course-thumbnail img,
body.aiwebskills-tutor-course-page .tutor-course-details-thumbnail img,
body.aiwebskills-tutor-course-page .tutor-course-details-page .tutor-ratio img,
body.aiwebskills-tutor-course-page .tutor-course-details-page video,
body.aiwebskills-tutor-course-page .tutor-course-details-page iframe {
  border-radius: 22px !important;
  width: 100% !important;
  display: block !important;
  box-shadow: 0 16px 40px rgba(15,23,42,0.12) !important;
}

/* Course sidebar card */
body.aiwebskills-tutor-course-page .tutor-course-sidebar-card,
body.aiwebskills-tutor-course-page .tutor-course-sidebar-card-pricing,
body.aiwebskills-tutor-course-page .tutor-single-course-sidebar .tutor-card,
body.aiwebskills-tutor-course-page aside .tutor-card,
body.aiwebskills-tutor-course-page .tutor-course-details-page .tutor-card {
  border-radius: 28px !important;
  border: 1px solid rgba(37, 99, 235, 0.10) !important;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.11) !important;
  overflow: hidden !important;
}

body.aiwebskills-tutor-course-page .tutor-course-sidebar-card .tutor-card-body,
body.aiwebskills-tutor-course-page .tutor-course-sidebar-card-body,
body.aiwebskills-tutor-course-page .tutor-single-course-sidebar .tutor-card-body,
body.aiwebskills-tutor-course-page aside .tutor-card-body {
  padding: 28px !important;
}

body.aiwebskills-tutor-course-page .tutor-course-sidebar-card h3,
body.aiwebskills-tutor-course-page .tutor-course-sidebar-card h4,
body.aiwebskills-tutor-course-page aside h3,
body.aiwebskills-tutor-course-page aside h4 {
  color: #0f172a !important;
  font-weight: 950 !important;
  letter-spacing: -0.4px !important;
}

/* Progress */
body.aiwebskills-tutor-course-page .tutor-progress-bar,
body.aiwebskills-tutor-course-page .tutor-progress-bar-wrap,
body.aiwebskills-tutor-course-page .tutor-course-progress-bar {
  height: 10px !important;
  border-radius: 999px !important;
  background: #e0e7ff !important;
  overflow: hidden !important;
}

body.aiwebskills-tutor-course-page .tutor-progress-value,
body.aiwebskills-tutor-course-page .tutor-progress-bar span,
body.aiwebskills-tutor-course-page .tutor-course-progress-bar span {
  border-radius: 999px !important;
  background: linear-gradient(135deg, #00c6ff, #2563eb, #7c3aed, #ec4899) !important;
}

/* Main course action button */
body.aiwebskills-tutor-course-page .tutor-btn-primary,
body.aiwebskills-tutor-course-page .tutor-course-sidebar-card .tutor-btn,
body.aiwebskills-tutor-course-page .tutor-course-single-sidebar-wrapper .tutor-btn,
body.aiwebskills-tutor-course-page .tutor-course-sidebar-card button[type="submit"],
body.aiwebskills-tutor-course-page .tutor-course-sidebar-card a.tutor-btn {
  border: none !important;
  min-height: 50px !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #00c6ff 0%, #2563eb 38%, #7c3aed 72%, #ec4899 100%) !important;
  box-shadow:
    0 7px 0 rgba(15,23,42,0.95),
    0 22px 44px rgba(37, 99, 235, 0.28),
    inset 0 2px 2px rgba(255,255,255,0.30) !important;
  transition: all 0.25s ease !important;
}

body.aiwebskills-tutor-course-page .tutor-btn-primary:hover,
body.aiwebskills-tutor-course-page .tutor-course-sidebar-card .tutor-btn:hover,
body.aiwebskills-tutor-course-page .tutor-course-single-sidebar-wrapper .tutor-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 9px 0 rgba(15,23,42,0.95),
    0 28px 58px rgba(37, 99, 235, 0.34),
    inset 0 2px 2px rgba(255,255,255,0.34) !important;
}

/* Tutor LMS Complete Course controls are intentionally left visible. */

/* Course info tabs */
body.aiwebskills-tutor-course-page .tutor-course-details-tab,
body.aiwebskills-tutor-course-page .tutor-course-details-tab .tutor-is-sticky,
body.aiwebskills-tutor-course-page .tutor-nav,
body.aiwebskills-tutor-course-page .tutor-nav-tabs {
  border: none !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 42px rgba(15,23,42,0.08) !important;
  overflow: hidden !important;
}

body.aiwebskills-tutor-course-page .tutor-nav-link,
body.aiwebskills-tutor-course-page .tutor-course-details-tab .tutor-nav-link {
  color: #475569 !important;
  font-weight: 900 !important;
  border: none !important;
  padding: 16px 22px !important;
}

body.aiwebskills-tutor-course-page .tutor-nav-link.is-active,
body.aiwebskills-tutor-course-page .tutor-nav-link.active,
body.aiwebskills-tutor-course-page .tutor-course-details-tab .tutor-nav-link.is-active {
  color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: inset 0 -3px 0 #2563eb !important;
}

/* Course content blocks */
body.aiwebskills-tutor-course-page .tutor-course-details-content,
body.aiwebskills-tutor-course-page .tutor-course-details-widget,
body.aiwebskills-tutor-course-page .tutor-course-benefits-wrap,
body.aiwebskills-tutor-course-page .tutor-course-target-audience,
body.aiwebskills-tutor-course-page .tutor-course-material-includes-wrap,
body.aiwebskills-tutor-course-page .tutor-course-requirements-wrap {
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(37, 99, 235, 0.08) !important;
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.08) !important;
  padding: 28px !important;
  margin-bottom: 26px !important;
}

body.aiwebskills-tutor-course-page .tutor-course-details-content h2,
body.aiwebskills-tutor-course-page .tutor-course-details-content h3,
body.aiwebskills-tutor-course-page .tutor-course-details-widget h2,
body.aiwebskills-tutor-course-page .tutor-course-details-widget h3,
body.aiwebskills-tutor-course-page .tutor-course-content-title,
body.aiwebskills-tutor-course-page .tutor-segment-title {
  color: #0f172a !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 18px !important;
}

/* Checklist style for benefits, materials and requirements */
body.aiwebskills-tutor-course-page .tutor-course-details-content ul,
body.aiwebskills-tutor-course-page .tutor-course-details-widget ul,
body.aiwebskills-tutor-course-page aside ul,
body.aiwebskills-tutor-course-page .tutor-single-course-sidebar ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

body.aiwebskills-tutor-course-page .tutor-course-details-content ul li,
body.aiwebskills-tutor-course-page .tutor-course-details-widget ul li,
body.aiwebskills-tutor-course-page aside ul li,
body.aiwebskills-tutor-course-page .tutor-single-course-sidebar ul li {
  position: relative !important;
  padding: 10px 0 10px 36px !important;
  color: #1e293b !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  border-bottom: 1px solid rgba(15,23,42,0.06) !important;
}

body.aiwebskills-tutor-course-page .tutor-course-details-content ul li:last-child,
body.aiwebskills-tutor-course-page .tutor-course-details-widget ul li:last-child,
body.aiwebskills-tutor-course-page aside ul li:last-child,
body.aiwebskills-tutor-course-page .tutor-single-course-sidebar ul li:last-child {
  border-bottom: none !important;
}

body.aiwebskills-tutor-course-page .tutor-course-details-content ul li::before,
body.aiwebskills-tutor-course-page .tutor-course-details-widget ul li::before,
body.aiwebskills-tutor-course-page aside ul li::before,
body.aiwebskills-tutor-course-page .tutor-single-course-sidebar ul li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 11px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #00c6ff, #2563eb, #7c3aed) !important;
  box-shadow: 0 8px 16px rgba(37,99,235,0.22) !important;
}

/* Course Content / Curriculum accordion */
body.aiwebskills-tutor-course-page .tutor-course-content-list,
body.aiwebskills-tutor-course-page .tutor-course-topics-wrap,
body.aiwebskills-tutor-course-page .tutor-accordion,
body.aiwebskills-tutor-course-page .tutor-course-topic {
  border: none !important;
  background: transparent !important;
}

body.aiwebskills-tutor-course-page .tutor-accordion-item,
body.aiwebskills-tutor-course-page .tutor-course-topic {
  margin-bottom: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(37, 99, 235, 0.10) !important;
  background: #ffffff !important;
  box-shadow: 0 15px 36px rgba(15,23,42,0.07) !important;
  overflow: hidden !important;
}

body.aiwebskills-tutor-course-page .tutor-accordion-item-header,
body.aiwebskills-tutor-course-page .tutor-course-topic-title,
body.aiwebskills-tutor-course-page .tutor-course-topic-single-header {
  min-height: 64px !important;
  padding: 18px 22px !important;
  color: #1d4ed8 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  background:
    linear-gradient(135deg, rgba(239,246,255,0.95), rgba(255,255,255,0.95)) !important;
}

body.aiwebskills-tutor-course-page .tutor-course-topic-item,
body.aiwebskills-tutor-course-page .tutor-course-content-list-item,
body.aiwebskills-tutor-course-page .tutor-accordion-item-body li {
  border-bottom: 1px solid rgba(15,23,42,0.06) !important;
  padding: 13px 18px !important;
  background: #ffffff !important;
}

body.aiwebskills-tutor-course-page .tutor-course-topic-item:last-child,
body.aiwebskills-tutor-course-page .tutor-course-content-list-item:last-child,
body.aiwebskills-tutor-course-page .tutor-accordion-item-body li:last-child {
  border-bottom: none !important;
}

body.aiwebskills-tutor-course-page .tutor-course-topic-item a,
body.aiwebskills-tutor-course-page .tutor-course-content-list-item a,
body.aiwebskills-tutor-course-page .tutor-accordion-item-body a {
  color: #0f172a !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

body.aiwebskills-tutor-course-page .tutor-course-topic-item:hover,
body.aiwebskills-tutor-course-page .tutor-course-content-list-item:hover,
body.aiwebskills-tutor-course-page .tutor-accordion-item-body li:hover {
  background: #eff6ff !important;
}

/* Sidebar instructor/material/requirements card polish */
body.aiwebskills-tutor-course-page aside,
body.aiwebskills-tutor-course-page .tutor-single-course-sidebar {
  position: relative !important;
}

body.aiwebskills-tutor-course-page aside .tutor-avatar,
body.aiwebskills-tutor-course-page .tutor-single-course-sidebar .tutor-avatar {
  width: 54px !important;
  height: 54px !important;
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
}

/* Keep lesson list icons from becoming check circles inside curriculum */
body.aiwebskills-tutor-course-page .tutor-course-topic-item::before,
body.aiwebskills-tutor-course-page .tutor-course-content-list-item::before,
body.aiwebskills-tutor-course-page .tutor-accordion-item-body li::before {
  display: none !important;
}

/* Responsive course page */
@media (max-width: 991px) {
  body.aiwebskills-tutor-course-page .tutor-course-details-page,
  body.aiwebskills-tutor-course-page .tutor-container,
  body.aiwebskills-tutor-course-page .tutor-container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.aiwebskills-tutor-course-page .tutor-course-details-content,
  body.aiwebskills-tutor-course-page .tutor-course-details-widget,
  body.aiwebskills-tutor-course-page .tutor-course-sidebar-card,
  body.aiwebskills-tutor-course-page .tutor-single-course-sidebar .tutor-card {
    border-radius: 22px !important;
    padding: 22px !important;
  }

  body.aiwebskills-tutor-course-page .tutor-course-thumbnail,
  body.aiwebskills-tutor-course-page .tutor-course-details-thumbnail {
    border-radius: 22px !important;
    padding: 7px !important;
  }

  body.aiwebskills-tutor-course-page .tutor-course-thumbnail img,
  body.aiwebskills-tutor-course-page .tutor-course-details-thumbnail img {
    border-radius: 17px !important;
  }
}

@media (max-width: 600px) {
  body.aiwebskills-tutor-course-page h1,
  body.aiwebskills-tutor-course-page .tutor-course-details-title,
  body.aiwebskills-tutor-course-page .entry-title {
    font-size: 28px !important;
  }

  body.aiwebskills-tutor-course-page .tutor-course-details-content ul li,
  body.aiwebskills-tutor-course-page .tutor-course-details-widget ul li,
  body.aiwebskills-tutor-course-page aside ul li {
    padding-left: 32px !important;
    font-size: 14.5px !important;
  }

  body.aiwebskills-tutor-course-page .tutor-accordion-item-header,
  body.aiwebskills-tutor-course-page .tutor-course-topic-title,
  body.aiwebskills-tutor-course-page .tutor-course-topic-single-header {
    font-size: 16px !important;
    padding: 16px !important;
  }
}


/* =====================================================
   AIWebSkills - Clear Course/Lesson Navigation Bar
===================================================== */
.aiwebskills-learning-nav {
  width: min(1120px, calc(100% - 32px));
  margin: 26px auto 18px !important;
  padding: 22px 24px;
  border-radius: 26px;
  display: grid;
  grid-template-columns: 1.35fr auto;
  gap: 20px;
  align-items: center;
  color: #ffffff;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.26), transparent 34%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.18), transparent 35%),
    linear-gradient(135deg, #0f172a 0%, #172554 52%, #111827 100%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 22px 60px rgba(15, 23, 42, 0.22),
    inset 0 1px 1px rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
  z-index: 10;
}

.aiwebskills-learning-nav::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -85px;
  top: -95px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.34), transparent 68%);
  pointer-events: none;
}

.aiwebskills-learning-nav-copy,
.aiwebskills-learning-nav-actions {
  position: relative;
  z-index: 2;
}

.aiwebskills-learning-nav-copy span {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  margin-bottom: 9px;
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(147,197,253,0.22);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.aiwebskills-learning-nav-copy h3 {
  margin: 0 0 6px !important;
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  letter-spacing: -0.55px;
}

.aiwebskills-learning-nav-copy p {
  margin: 0 !important;
  max-width: 680px;
  color: #dbeafe !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

.aiwebskills-learning-nav-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.aiwebskills-learning-nav-btn {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.24s ease;
}

.aiwebskills-learning-nav-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #00c6ff 0%, #2563eb 40%, #7c3aed 76%, #ec4899 100%);
  box-shadow:
    0 6px 0 rgba(15,23,42,0.92),
    0 16px 35px rgba(37,99,235,0.32),
    inset 0 2px 2px rgba(255,255,255,0.30);
}

.aiwebskills-learning-nav-secondary {
  color: #e0f2fe !important;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08);
}

.aiwebskills-learning-nav-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}

/* Add a compact sticky shortcut on lesson/course pages for quick dashboard return */
body.aiwebskills-tutor-lesson-page .aiwebskills-learning-nav,
body.aiwebskills-tutor-course-page .aiwebskills-learning-nav,
body.aiwebskills-browse-training-page .aiwebskills-learning-nav {
  animation: aiwebskillsNavIn 0.35s ease both;
}

@keyframes aiwebskillsNavIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 820px) {
  .aiwebskills-learning-nav {
    width: min(100% - 24px, 1120px);
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
    margin-top: 18px !important;
  }

  .aiwebskills-learning-nav-actions {
    justify-content: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .aiwebskills-learning-nav-btn {
    width: 100%;
  }
}


/* =====================================================
   AIWebSkills - In Progress Courses Dashboard Card Polish
===================================================== */

body.aiwebskills-progress-cards-page .tutor-dashboard-content h2,
body.aiwebskills-progress-cards-page .tutor-dashboard-content h3,
body.aiwebskills-enrolled-courses-page .tutor-dashboard-content h2,
body.aiwebskills-enrolled-courses-page .tutor-dashboard-content h3 {
  color: #0f172a !important;
  font-weight: 950 !important;
  letter-spacing: -0.5px !important;
}

.aiwebskills-progress-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  padding: 24px !important;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,0.18), transparent 34%),
    radial-gradient(circle at bottom right, rgba(236,72,153,0.14), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
  border: 1px solid rgba(37,99,235,0.10) !important;
  box-shadow:
    0 24px 65px rgba(15,23,42,0.10),
    inset 0 1px 1px rgba(255,255,255,0.65) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Keep the course card clean - no extra inner circle/wrapper overlay */
.aiwebskills-progress-card::before,
.aiwebskills-progress-card::after {
  display: none !important;
  content: none !important;
}

.aiwebskills-progress-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 32px 80px rgba(37,99,235,0.16),
    inset 0 1px 1px rgba(255,255,255,0.70) !important;
}

.aiwebskills-progress-card img {
  border-radius: 18px !important;
  object-fit: cover !important;
  object-position: center !important;
  box-shadow: 0 18px 38px rgba(15,23,42,0.18) !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
}

.aiwebskills-progress-card .tutor-ratings,
.aiwebskills-progress-card .tutor-ratings-stars,
.aiwebskills-progress-card [class*="rating"],
.aiwebskills-progress-card [class*="Rating"],
.aiwebskills-hide-course-rating {
  display: none !important;
}

.aiwebskills-progress-card h2,
.aiwebskills-progress-card h3,
.aiwebskills-progress-card h4,
.aiwebskills-progress-card a,
.aiwebskills-progress-card [class*="title"] {
  color: #0f172a !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

.aiwebskills-progress-card p,
.aiwebskills-progress-card span,
.aiwebskills-progress-card div {
  font-family: inherit;
}

.aiwebskills-progress-card .aiwebskills-progress-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 10px 0 14px !important;
}

.aiwebskills-progress-card .aiwebskills-progress-badges span {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  color: #1d4ed8 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  background: rgba(37,99,235,0.08) !important;
  border: 1px solid rgba(37,99,235,0.12) !important;
}

.aiwebskills-progress-card .aiwebskills-progress-badges span:first-child {
  color: #047857 !important;
  background: rgba(16,185,129,0.10) !important;
  border-color: rgba(16,185,129,0.18) !important;
}

.aiwebskills-progress-card [class*="progress"] {
  border-radius: 999px !important;
}

.aiwebskills-progress-card progress,
.aiwebskills-progress-card .tutor-progress-bar,
.aiwebskills-progress-card .tutor-progress-value,
.aiwebskills-progress-card [class*="progress-bar"] {
  min-height: 8px !important;
  border-radius: 999px !important;
}

.aiwebskills-progress-card .tutor-progress-bar,
.aiwebskills-progress-card [class*="progress-bar"] {
  background: rgba(15,23,42,0.10) !important;
  overflow: hidden !important;
}

.aiwebskills-progress-card .tutor-progress-value,
.aiwebskills-progress-card [class*="progress-value"] {
  background: linear-gradient(135deg, #00c6ff, #2563eb 45%, #7c3aed 100%) !important;
}

.aiwebskills-progress-card .aiwebskills-progress-actions {
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: 18px !important;
  position: relative !important;
  z-index: 3 !important;
}

.aiwebskills-progress-continue-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14.5px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #00c6ff 0%, #2563eb 40%, #7c3aed 76%, #ec4899 100%) !important;
  box-shadow:
    0 7px 0 rgba(15,23,42,0.90),
    0 18px 38px rgba(37,99,235,0.28),
    inset 0 2px 2px rgba(255,255,255,0.28) !important;
  transition: transform 0.24s ease, filter 0.24s ease !important;
}

.aiwebskills-progress-continue-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) !important;
}

@media (max-width: 768px) {
  .aiwebskills-progress-card {
    padding: 18px !important;
    border-radius: 22px !important;
  }

  .aiwebskills-progress-card img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 16px !important;
  }

  .aiwebskills-progress-card .aiwebskills-progress-actions,
  .aiwebskills-progress-continue-btn {
    width: 100% !important;
  }
}


/* =====================================================
   AIWebSkills - Progress Card Wrapper Cleanup Fix
===================================================== */
body.aiwebskills-progress-cards-page .aiwebskills-progress-card {
  isolation: isolate !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 32%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.10), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
}

body.aiwebskills-progress-cards-page .aiwebskills-progress-card::before,
body.aiwebskills-progress-cards-page .aiwebskills-progress-card::after,
body.aiwebskills-progress-cards-page .aiwebskills-progress-card .aiwebskills-progress-card::before,
body.aiwebskills-progress-cards-page .aiwebskills-progress-card .aiwebskills-progress-card::after {
  display: none !important;
  content: none !important;
}

body.aiwebskills-progress-cards-page .aiwebskills-progress-card .aiwebskills-progress-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

body.aiwebskills-progress-cards-page .aiwebskills-progress-card .aiwebskills-progress-actions:not(:last-of-type),
body.aiwebskills-progress-cards-page .aiwebskills-progress-card .aiwebskills-progress-badges:not(:last-of-type) {
  display: none !important;
}

body.aiwebskills-progress-cards-page .aiwebskills-progress-card img {
  max-width: 260px !important;
}

@media (max-width: 768px) {
  body.aiwebskills-progress-cards-page .aiwebskills-progress-card img {
    max-width: 100% !important;
  }
}


/* =====================================================
   AIWebSkills - Course Content Module Count/Arrow Fix
   Fixes overlap between 0/5 lesson count and expand arrow
===================================================== */

/* Topic header should reserve clean space for title, count and arrow */
body.aiwebskills-tutor-course-page .tutor-course-topic-single-header,
body.aiwebskills-tutor-course-page .tutor-accordion-item-header,
body.aiwebskills-tutor-lesson-page .tutor-course-topic-single-header,
body.aiwebskills-tutor-lesson-page .tutor-accordion-item-header,
body.aiwebskills-tutor-course-page .tutor-course-topic-title,
body.aiwebskills-tutor-lesson-page .tutor-course-topic-title {
  position: relative !important;
}

/* Tutor often places the title, 0/5 count and arrow in a row */
body.aiwebskills-tutor-course-page .tutor-course-topic-single-header .tutor-row,
body.aiwebskills-tutor-course-page .tutor-accordion-item-header .tutor-row,
body.aiwebskills-tutor-lesson-page .tutor-course-topic-single-header .tutor-row,
body.aiwebskills-tutor-lesson-page .tutor-accordion-item-header .tutor-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Let the module title wrap naturally without colliding with right-side controls */
body.aiwebskills-tutor-course-page .tutor-course-topic-single-header .tutor-col,
body.aiwebskills-tutor-course-page .tutor-accordion-item-header .tutor-col,
body.aiwebskills-tutor-lesson-page .tutor-course-topic-single-header .tutor-col,
body.aiwebskills-tutor-lesson-page .tutor-accordion-item-header .tutor-col {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.aiwebskills-tutor-course-page .tutor-course-topic-title,
body.aiwebskills-tutor-course-page .tutor-accordion-item-header .tutor-fs-5,
body.aiwebskills-tutor-lesson-page .tutor-course-topic-title,
body.aiwebskills-tutor-lesson-page .tutor-accordion-item-header .tutor-fs-5 {
  line-height: 1.35 !important;
  padding-right: 10px !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Lesson count such as 0/5 should be readable and separated from the arrow */
body.aiwebskills-tutor-course-page .tutor-course-topic-summary,
body.aiwebskills-tutor-lesson-page .tutor-course-topic-summary,
body.aiwebskills-tutor-course-page .tutor-accordion-item-header .tutor-col-auto,
body.aiwebskills-tutor-lesson-page .tutor-accordion-item-header .tutor-col-auto {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

body.aiwebskills-tutor-course-page .tutor-course-topic-summary,
body.aiwebskills-tutor-lesson-page .tutor-course-topic-summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  padding: 5px 9px !important;
  margin-right: 12px !important;
  border-radius: 999px !important;
  color: #1d4ed8 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.14) !important;
}

/* Expand/collapse arrow gets its own clear space */
body.aiwebskills-tutor-course-page .tutor-accordion-item-header-icon,
body.aiwebskills-tutor-course-page .tutor-course-topic-toggle,
body.aiwebskills-tutor-course-page .tutor-icon-angle-down,
body.aiwebskills-tutor-course-page .tutor-icon-angle-up,
body.aiwebskills-tutor-lesson-page .tutor-accordion-item-header-icon,
body.aiwebskills-tutor-lesson-page .tutor-course-topic-toggle,
body.aiwebskills-tutor-lesson-page .tutor-icon-angle-down,
body.aiwebskills-tutor-lesson-page .tutor-icon-angle-up {
  flex: 0 0 26px !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 2px !important;
  color: #2563eb !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

/* If Tutor positions the arrow absolutely, move it away from the lesson count */
body.aiwebskills-tutor-course-page .tutor-course-topic-single-header > i,
body.aiwebskills-tutor-course-page .tutor-accordion-item-header > i,
body.aiwebskills-tutor-lesson-page .tutor-course-topic-single-header > i,
body.aiwebskills-tutor-lesson-page .tutor-accordion-item-header > i {
  right: 18px !important;
}

/* Give right-side room when the header uses absolute controls */
body.aiwebskills-tutor-course-page .tutor-course-topic-single-header,
body.aiwebskills-tutor-course-page .tutor-accordion-item-header,
body.aiwebskills-tutor-lesson-page .tutor-course-topic-single-header,
body.aiwebskills-tutor-lesson-page .tutor-accordion-item-header {
  padding-right: 28px !important;
}

/* Mobile tightening so the title, count and arrow fit cleanly */
@media (max-width: 768px) {
  body.aiwebskills-tutor-course-page .tutor-course-topic-single-header,
  body.aiwebskills-tutor-course-page .tutor-accordion-item-header,
  body.aiwebskills-tutor-lesson-page .tutor-course-topic-single-header,
  body.aiwebskills-tutor-lesson-page .tutor-accordion-item-header {
    padding: 16px 18px !important;
    padding-right: 16px !important;
    min-height: 78px !important;
  }

  body.aiwebskills-tutor-course-page .tutor-course-topic-title,
  body.aiwebskills-tutor-course-page .tutor-accordion-item-header .tutor-fs-5,
  body.aiwebskills-tutor-lesson-page .tutor-course-topic-title,
  body.aiwebskills-tutor-lesson-page .tutor-accordion-item-header .tutor-fs-5 {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  body.aiwebskills-tutor-course-page .tutor-course-topic-summary,
  body.aiwebskills-tutor-lesson-page .tutor-course-topic-summary {
    min-width: 38px !important;
    padding: 4px 8px !important;
    margin-right: 8px !important;
    font-size: 11px !important;
  }

  body.aiwebskills-tutor-course-page .tutor-accordion-item-header-icon,
  body.aiwebskills-tutor-course-page .tutor-course-topic-toggle,
  body.aiwebskills-tutor-course-page .tutor-icon-angle-down,
  body.aiwebskills-tutor-course-page .tutor-icon-angle-up,
  body.aiwebskills-tutor-lesson-page .tutor-accordion-item-header-icon,
  body.aiwebskills-tutor-lesson-page .tutor-course-topic-toggle,
  body.aiwebskills-tutor-lesson-page .tutor-icon-angle-down,
  body.aiwebskills-tutor-lesson-page .tutor-icon-angle-up {
    flex-basis: 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
  }
}


/* =====================================================
   AIWebSkills - Forced Tutor Course Content Header Fix
   Separates lesson count like 0/5 from expand arrow
===================================================== */
body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix,
body.aiwebskills-tutor-lesson-page .aiwebskills-topic-header-forced-fix,
.aiwebskills-topic-header-forced-fix {
  position: relative !important;
  min-height: 74px !important;
  padding: 20px 96px 20px 24px !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  gap: 12px !important;
}

body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix .tutor-course-topic-title,
body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix .tutor-accordion-item-header-title,
body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix .tutor-fs-5,
body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix h3,
body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix h4,
body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix a,
body.aiwebskills-tutor-lesson-page .aiwebskills-topic-header-forced-fix .tutor-course-topic-title,
body.aiwebskills-tutor-lesson-page .aiwebskills-topic-header-forced-fix .tutor-accordion-item-header-title,
body.aiwebskills-tutor-lesson-page .aiwebskills-topic-header-forced-fix .tutor-fs-5,
body.aiwebskills-tutor-lesson-page .aiwebskills-topic-header-forced-fix h3,
body.aiwebskills-tutor-lesson-page .aiwebskills-topic-header-forced-fix h4,
body.aiwebskills-tutor-lesson-page .aiwebskills-topic-header-forced-fix a,
.aiwebskills-topic-header-forced-fix .tutor-course-topic-title,
.aiwebskills-topic-header-forced-fix .tutor-accordion-item-header-title,
.aiwebskills-topic-header-forced-fix .tutor-fs-5,
.aiwebskills-topic-header-forced-fix h3,
.aiwebskills-topic-header-forced-fix h4,
.aiwebskills-topic-header-forced-fix a {
  max-width: calc(100% - 108px) !important;
  padding-right: 0 !important;
  line-height: 1.32 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.aiwebskills-tutor-course-page .aiwebskills-topic-count-forced-fix,
body.aiwebskills-tutor-lesson-page .aiwebskills-topic-count-forced-fix,
.aiwebskills-topic-count-forced-fix {
  position: absolute !important;
  right: 52px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 28px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.10) !important;
}

body.aiwebskills-tutor-course-page .aiwebskills-topic-arrow-forced-fix,
body.aiwebskills-tutor-lesson-page .aiwebskills-topic-arrow-forced-fix,
.aiwebskills-topic-arrow-forced-fix {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 21 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.12) !important;
  margin: 0 !important;
  float: none !important;
}

/* If Tutor places a default arrow after the counter, push it out clearly */
.aiwebskills-topic-count-forced-fix + i,
.aiwebskills-topic-count-forced-fix + svg,
.aiwebskills-topic-count-forced-fix + span,
.aiwebskills-topic-count-forced-fix + button {
  margin-left: 18px !important;
}

@media (max-width: 768px) {
  body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix,
  body.aiwebskills-tutor-lesson-page .aiwebskills-topic-header-forced-fix,
  .aiwebskills-topic-header-forced-fix {
    min-height: 86px !important;
    padding: 18px 92px 18px 20px !important;
  }

  body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix .tutor-course-topic-title,
  body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix .tutor-accordion-item-header-title,
  body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix .tutor-fs-5,
  body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix h3,
  body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix h4,
  body.aiwebskills-tutor-course-page .aiwebskills-topic-header-forced-fix a,
  .aiwebskills-topic-header-forced-fix .tutor-course-topic-title,
  .aiwebskills-topic-header-forced-fix .tutor-accordion-item-header-title,
  .aiwebskills-topic-header-forced-fix .tutor-fs-5,
  .aiwebskills-topic-header-forced-fix h3,
  .aiwebskills-topic-header-forced-fix h4,
  .aiwebskills-topic-header-forced-fix a {
    max-width: calc(100% - 104px) !important;
    font-size: 17px !important;
  }

  body.aiwebskills-tutor-course-page .aiwebskills-topic-count-forced-fix,
  body.aiwebskills-tutor-lesson-page .aiwebskills-topic-count-forced-fix,
  .aiwebskills-topic-count-forced-fix {
    right: 48px !important;
    min-width: 38px !important;
    height: 26px !important;
    font-size: 11px !important;
    padding: 0 7px !important;
  }

  body.aiwebskills-tutor-course-page .aiwebskills-topic-arrow-forced-fix,
  body.aiwebskills-tutor-lesson-page .aiwebskills-topic-arrow-forced-fix,
  .aiwebskills-topic-arrow-forced-fix {
    right: 14px !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
  }
}


/* =====================================================
   AIWebSkills - Enrolled Courses Single Action Button Fix
   Removes the duplicated oversized injected Continue Learning pill
   and styles Tutor LMS native Start/Continue button only.
===================================================== */
.aiwebskills-progress-card .aiwebskills-progress-actions,
.aiwebskills-progress-card .aiwebskills-progress-continue-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.aiwebskills-progress-card .aiwebskills-native-continue-btn,
.aiwebskills-progress-card a.tutor-btn,
.aiwebskills-progress-card .tutor-btn,
body.aiwebskills-enrolled-courses-page .tutor-dashboard-content a.tutor-btn,
body.aiwebskills-enrolled-courses-page .tutor-dashboard-content .tutor-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 12px 22px !important;
  border-radius: 14px !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(37,99,235,0.28) !important;
  box-shadow: 0 12px 26px rgba(37,99,235,0.12) !important;
}

.aiwebskills-progress-card .aiwebskills-native-continue-btn:hover,
.aiwebskills-progress-card a.tutor-btn:hover,
.aiwebskills-progress-card .tutor-btn:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #00c6ff 0%, #2563eb 44%, #7c3aed 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 34px rgba(37,99,235,0.24) !important;
}

/* =====================================================
   AIWebSkills - Enrolled Course Card Premium 3D Styling
   Version: 1.7.0
   Focus: Student Dashboard > Enrolled Courses card
===================================================== */

body.aiwebskills-enrolled-courses-page .tutor-dashboard-content {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.12), transparent 34%),
    linear-gradient(135deg, #f7fbff 0%, #eef5ff 52%, #fff7fb 100%) !important;
  border-radius: 30px !important;
}

/* Enrolled course tabs */
body.aiwebskills-enrolled-courses-page .tutor-dashboard-content .tutor-nav,
body.aiwebskills-enrolled-courses-page .tutor-dashboard-content [class*="tutor-nav"] {
  border-radius: 22px !important;
}

/* Outer enrolled course card */
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 270px minmax(280px, 1fr) !important;
  align-items: center !important;
  gap: 30px !important;
  width: min(100%, 920px) !important;
  min-height: 290px !important;
  padding: 30px !important;
  margin: 22px 0 26px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(56, 189, 248, 0.30), transparent 32%),
    radial-gradient(circle at 86% 80%, rgba(236, 72, 153, 0.20), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,0.96), rgba(242,247,255,0.90) 52%, rgba(255,248,252,0.92)) !important;
  border: 1px solid rgba(96, 165, 250, 0.20) !important;
  box-shadow:
    0 28px 80px rgba(15, 23, 42, 0.14),
    0 12px 32px rgba(37, 99, 235, 0.10),
    inset 0 1px 1px rgba(255,255,255,0.85) !important;
  isolation: isolate !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.70);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06));
  pointer-events: none;
  z-index: -1;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96,165,250,0.34), rgba(124,58,237,0.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Course image */
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card img {
  width: 100% !important;
  max-width: 260px !important;
  height: 160px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.22),
    0 0 0 8px rgba(255,255,255,0.55) !important;
}

/* Course title */
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card h1,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card h2,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card h3,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card h4,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card a:not(.aiwebskills-native-continue-btn):not(.tutor-btn) {
  color: #0f172a !important;
  font-weight: 950 !important;
  letter-spacing: -0.35px !important;
  line-height: 1.22 !important;
  text-decoration: none !important;
}

/* Badges */
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  margin: 14px 0 14px !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-progress-badges span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #1d4ed8 !important;
  background: linear-gradient(135deg, rgba(219,234,254,0.95), rgba(237,233,254,0.95)) !important;
  border: 1px solid rgba(37,99,235,0.16) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 8px 18px rgba(37,99,235,0.10) !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-progress-badges span:first-child {
  color: #047857 !important;
  background: linear-gradient(135deg, #d1fae5, #ecfeff) !important;
  border-color: rgba(16,185,129,0.18) !important;
}

/* Lesson/progress text */
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card p,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card span,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card div {
  color: #0f172a;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card * {
  box-sizing: border-box;
}

/* Progress bar */
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .tutor-progress-bar,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card [class*="progress"] {
  border-radius: 999px !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .tutor-progress-bar,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .tutor-progress-bar-wrap,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card [class*="progress"][style] {
  min-height: 8px !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .tutor-progress-filled,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card [class*="progress"][class*="fill"],
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card [class*="progress"][class*="bar"] > span {
  background: linear-gradient(135deg, #00c6ff, #2563eb 48%, #a855f7) !important;
  border-radius: 999px !important;
  box-shadow: 0 5px 14px rgba(37,99,235,0.28) !important;
}

/* Golden glossy Continue Learning button - native Tutor LMS button only */
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .aiwebskills-native-continue-btn,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card a.tutor-btn,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .tutor-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  width: auto !important;
  min-width: 210px !important;
  padding: 15px 28px !important;
  margin-top: 18px !important;
  border-radius: 18px !important;
  color: #3b2200 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  text-decoration: none !important;
  background:
    linear-gradient(135deg, #fff7bf 0%, #facc15 28%, #f59e0b 58%, #d97706 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.95) !important;
  box-shadow:
    0 7px 0 #92400e,
    0 18px 38px rgba(245, 158, 11, 0.34),
    inset 0 2px 2px rgba(255,255,255,0.65),
    inset 0 -2px 2px rgba(146,64,14,0.18) !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .aiwebskills-native-continue-btn::before,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card a.tutor-btn::before,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .tutor-btn::before {
  content: "";
  position: absolute;
  left: 10%;
  top: 7px;
  width: 80%;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent);
  opacity: 0.85;
  pointer-events: none;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .aiwebskills-native-continue-btn:hover,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card a.tutor-btn:hover,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .tutor-btn:hover {
  color: #2a1700 !important;
  transform: translateY(-3px) !important;
  box-shadow:
    0 9px 0 #92400e,
    0 24px 48px rgba(245, 158, 11, 0.44),
    inset 0 2px 2px rgba(255,255,255,0.72),
    inset 0 -2px 2px rgba(146,64,14,0.18) !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .aiwebskills-native-continue-btn:active,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card a.tutor-btn:active,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .tutor-btn:active {
  transform: translateY(3px) !important;
  box-shadow:
    0 3px 0 #92400e,
    0 12px 25px rgba(245, 158, 11, 0.32),
    inset 0 2px 2px rgba(255,255,255,0.62) !important;
}

/* Hide rating on enrolled course card */
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .aiwebskills-hide-course-rating,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .tutor-ratings,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .tutor-ratings-stars,
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card [class*="rating"],
body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card [class*="Rating"] {
  display: none !important;
}

@media (max-width: 900px) {
  body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 20px !important;
    padding: 24px !important;
  }

  body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card img {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }

  body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .aiwebskills-native-continue-btn,
  body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card a.tutor-btn,
  body.aiwebskills-enrolled-courses-page .aiwebskills-progress-card .tutor-btn {
    width: 100% !important;
    min-width: 100% !important;
  }
}


/* =====================================================
   AIWebSkills - Targeted Empty Topic Pill Removal
   Removes only the blank pill between the 0/5 counter and arrow.
===================================================== */
.aiwebskills-hide-empty-topic-pill,
body.aiwebskills-tutor-course-page .aiwebskills-hide-empty-topic-pill,
body.aiwebskills-tutor-lesson-page .aiwebskills-hide-empty-topic-pill {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* Keep the real arrow close after the empty pill is removed. */
body.aiwebskills-tutor-course-page .aiwebskills-topic-count-forced-fix,
body.aiwebskills-tutor-lesson-page .aiwebskills-topic-count-forced-fix,
.aiwebskills-topic-count-forced-fix {
  right: 50px !important;
}

body.aiwebskills-tutor-course-page .aiwebskills-topic-arrow-forced-fix,
body.aiwebskills-tutor-lesson-page .aiwebskills-topic-arrow-forced-fix,
.aiwebskills-topic-arrow-forced-fix {
  right: 16px !important;
}


/* =====================================================
   AIWebSkills - Precise Tutor LMS Blank Pill Removal
   Hides only the middle empty control between lesson count and arrow.
===================================================== */
.aiwebskills-remove-middle-blank-pill,
body.aiwebskills-tutor-course-page .aiwebskills-remove-middle-blank-pill,
body.aiwebskills-tutor-lesson-page .aiwebskills-remove-middle-blank-pill {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

/* Make kept real arrow clean, not pill-like. */
.aiwebskills-real-topic-arrow-keep,
body.aiwebskills-tutor-course-page .aiwebskills-real-topic-arrow-keep,
body.aiwebskills-tutor-lesson-page .aiwebskills-real-topic-arrow-keep {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #2563eb !important;
}


/* =====================================================
   AIWebSkills - Compact Dashboard Welcome Hero
   Version 1.6.9
===================================================== */
body.aiwebskills-tutor-dashboard-page .aiwebskills-dashboard-hero {
  max-width: 1120px;
  margin: 0 auto 24px !important;
  padding: 26px 28px;
  border-radius: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) auto;
  gap: 28px;
  align-items: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.30), transparent 32%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.22), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #172554 48%, #111827 100%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 26px 70px rgba(15, 23, 42, 0.22),
    inset 0 1px 1px rgba(255,255,255,0.14);
}

body.aiwebskills-tutor-dashboard-page .aiwebskills-dashboard-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 42%, transparent 72%);
  pointer-events: none;
  opacity: 0.75;
}

body.aiwebskills-tutor-dashboard-page .aiwebskills-dashboard-hero::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -90px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(96,165,250,0.38), transparent 68%);
  pointer-events: none;
}

.aiwebskills-dashboard-hero-welcome,
.aiwebskills-dashboard-hero-actions {
  position: relative;
  z-index: 2;
}

.aiwebskills-dashboard-hero-welcome {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.aiwebskills-dashboard-hero-avatar {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 25px;
  font-weight: 950;
  letter-spacing: 0.5px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.28), transparent 35%),
    linear-gradient(135deg, #0ea5e9 0%, #2563eb 48%, #7c3aed 100%);
  border: 4px solid rgba(255,255,255,0.88);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.26),
    0 0 0 8px rgba(255,255,255,0.08),
    inset 0 2px 2px rgba(255,255,255,0.26);
}

.aiwebskills-dashboard-hero-copy {
  min-width: 0;
}

.aiwebskills-dashboard-hero-kicker {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #bfdbfe;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(147,197,253,0.22);
}

.aiwebskills-dashboard-hero h2 {
  margin: 0 0 7px !important;
  color: #ffffff !important;
  font-size: 30px !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: -0.9px !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.28);
}

.aiwebskills-dashboard-hero p {
  max-width: 680px;
  margin: 0 !important;
  color: #dbeafe !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.aiwebskills-dashboard-hero-actions {
  display: grid;
  gap: 12px;
  min-width: 250px;
}

.aiwebskills-dashboard-hero-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none !important;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 950;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.aiwebskills-dashboard-hero-btn:hover {
  transform: translateY(-3px);
}

.aiwebskills-dashboard-hero-btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #00c6ff 0%, #2563eb 38%, #7c3aed 72%, #ec4899 100%);
  box-shadow:
    0 7px 0 rgba(15,23,42,0.95),
    0 22px 45px rgba(37,99,235,0.35),
    inset 0 2px 2px rgba(255,255,255,0.32);
}

.aiwebskills-dashboard-hero-btn-secondary {
  color: #ffffff !important;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10);
}

.aiwebskills-dashboard-hero-btn-light {
  color: #bfdbfe !important;
  background: rgba(15,23,42,0.30);
  border: 1px solid rgba(147,197,253,0.16);
}

/* Hide old Tutor welcome card once the new compact hero is present */
body.aiwebskills-tutor-dashboard-page .aiwebskills-native-welcome-hidden {
  display: none !important;
}

/* The old course access card is no longer used, but hide any duplicate if cached */
body.aiwebskills-tutor-dashboard-page .aws-student-course-access:not(.aiwebskills-keep-old-card) {
  display: none !important;
}

body.aiwebskills-tutor-dashboard-page .aiwebskills-dashboard-section-title {
  margin-top: 6px !important;
}

@media (max-width: 860px) {
  body.aiwebskills-tutor-dashboard-page .aiwebskills-dashboard-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
    border-radius: 24px;
  }

  .aiwebskills-dashboard-hero-actions {
    min-width: 100%;
  }
}

@media (max-width: 600px) {
  .aiwebskills-dashboard-hero-welcome {
    align-items: flex-start;
    gap: 14px;
  }

  .aiwebskills-dashboard-hero-avatar {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    font-size: 21px;
    border-width: 3px;
  }

  .aiwebskills-dashboard-hero h2 {
    font-size: 23px !important;
  }

  .aiwebskills-dashboard-hero p {
    font-size: 14px !important;
  }

  .aiwebskills-dashboard-hero-btn {
    width: 100%;
  }
}


/* =====================================================
   AIWebSkills - Dashboard Top Layout Refinements
   Version 1.7.5
===================================================== */

/* Hide the repeated Student Workspace badge below the hero */
body.aiwebskills-tutor-dashboard-page .aiwebskills-dashboard-section-title span {
  display: none !important;
}

/* Tighten the dashboard heading now that the repeated badge is hidden */
body.aiwebskills-tutor-dashboard-page .aiwebskills-dashboard-section-title {
  margin-top: 4px !important;
  margin-bottom: 18px !important;
}

/* Remove any black bullet/dot before the injected Browse Training sidebar item */
body.aiwebskills-tutor-dashboard-page .aiwebskills-browse-training-menu-item,
body.aiwebskills-tutor-dashboard-page li.aiwebskills-browse-training-menu-item,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-left-menu .aiwebskills-browse-training-menu-item,
body.aiwebskills-tutor-dashboard-page .tutor-dashboard-permalinks .aiwebskills-browse-training-menu-item {
  list-style: none !important;
  list-style-type: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

body.aiwebskills-tutor-dashboard-page .aiwebskills-browse-training-menu-item::marker,
body.aiwebskills-tutor-dashboard-page li.aiwebskills-browse-training-menu-item::marker {
  content: '' !important;
  display: none !important;
  font-size: 0 !important;
}

/* Ensure the hero actions only contain two clean dashboard actions */
body.aiwebskills-tutor-dashboard-page .aiwebskills-dashboard-hero-actions {
  align-content: center !important;
}

/* Remove old third dashboard button if cached JS still renders it briefly */
body.aiwebskills-tutor-dashboard-page .aiwebskills-dashboard-hero-btn-light {
  display: none !important;
}


/* =====================================================
   AIWebSkills - Browse Training Course Card Styling
   Version 1.7.6
   Scope: /browse-training/ Tutor LMS course listing only
===================================================== */

body.aiwebskills-browse-training-page {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 32%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.08), transparent 36%),
    #f4f8ff !important;
}

body.aiwebskills-browse-training-page .tutor-wrap,
body.aiwebskills-browse-training-page .tutor-container,
body.aiwebskills-browse-training-page .tutor-course-list,
body.aiwebskills-browse-training-page .tutor-course-filter-wrapper,
body.aiwebskills-browse-training-page .tutor-courses-wrap {
  position: relative;
}

body.aiwebskills-browse-training-page .aiwebskills-browse-course-card,
body.aiwebskills-browse-training-page .tutor-course-card,
body.aiwebskills-browse-training-page .tutor-card.tutor-course-card,
body.aiwebskills-browse-training-page .tutor-course-loop {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  padding: 16px !important;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 32%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.13), transparent 38%),
    linear-gradient(145deg, #ffffff 0%, #f7fbff 48%, #eef5ff 100%) !important;
  border: 1px solid rgba(37, 99, 235, 0.12) !important;
  box-shadow:
    0 24px 65px rgba(15, 23, 42, 0.14),
    0 8px 22px rgba(37, 99, 235, 0.08),
    inset 0 1px 1px rgba(255,255,255,0.95) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}

body.aiwebskills-browse-training-page .aiwebskills-browse-course-card::before,
body.aiwebskills-browse-training-page .tutor-course-card::before,
body.aiwebskills-browse-training-page .tutor-course-loop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.72) 38%, transparent 72%);
  transform: translateX(-115%);
  transition: transform 0.7s ease;
  pointer-events: none;
  z-index: 1;
}

body.aiwebskills-browse-training-page .aiwebskills-browse-course-card:hover,
body.aiwebskills-browse-training-page .tutor-course-card:hover,
body.aiwebskills-browse-training-page .tutor-course-loop:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
  box-shadow:
    0 34px 85px rgba(15, 23, 42, 0.18),
    0 18px 42px rgba(37, 99, 235, 0.12),
    inset 0 1px 1px rgba(255,255,255,0.98) !important;
}

body.aiwebskills-browse-training-page .aiwebskills-browse-course-card:hover::before,
body.aiwebskills-browse-training-page .tutor-course-card:hover::before,
body.aiwebskills-browse-training-page .tutor-course-loop:hover::before {
  transform: translateX(115%);
}

body.aiwebskills-browse-training-page .aiwebskills-browse-course-card > *,
body.aiwebskills-browse-training-page .tutor-course-card > *,
body.aiwebskills-browse-training-page .tutor-course-loop > * {
  position: relative;
  z-index: 2;
}

body.aiwebskills-browse-training-page .aiwebskills-browse-course-card img,
body.aiwebskills-browse-training-page .tutor-course-card img,
body.aiwebskills-browse-training-page .tutor-course-loop img,
body.aiwebskills-browse-training-page .tutor-course-thumbnail img,
body.aiwebskills-browse-training-page .tutor-card-image img {
  width: 100% !important;
  min-height: 190px !important;
  max-height: 230px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.16),
    0 0 0 6px rgba(255,255,255,0.55) !important;
}

body.aiwebskills-browse-training-page .tutor-course-thumbnail,
body.aiwebskills-browse-training-page .tutor-card-image,
body.aiwebskills-browse-training-page .tutor-course-loop-header,
body.aiwebskills-browse-training-page .tutor-course-header {
  border-radius: 24px !important;
  overflow: visible !important;
  margin-bottom: 20px !important;
}

body.aiwebskills-browse-training-page .aiwebskills-browse-card-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  color: #1d4ed8 !important;
  background: linear-gradient(135deg, rgba(219,234,254,0.95), rgba(237,233,254,0.95)) !important;
  border: 1px solid rgba(59,130,246,0.18) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 8px 18px rgba(37,99,235,0.08) !important;
}

body.aiwebskills-browse-training-page .tutor-card-body,
body.aiwebskills-browse-training-page .tutor-course-body,
body.aiwebskills-browse-training-page .tutor-course-loop-body {
  padding: 12px 4px 4px !important;
}

body.aiwebskills-browse-training-page .aiwebskills-browse-course-card h3,
body.aiwebskills-browse-training-page .aiwebskills-browse-course-card h2,
body.aiwebskills-browse-training-page .tutor-course-card h3,
body.aiwebskills-browse-training-page .tutor-course-card h2,
body.aiwebskills-browse-training-page .tutor-course-name,
body.aiwebskills-browse-training-page .tutor-course-loop-title,
body.aiwebskills-browse-training-page .tutor-course-loop-title a,
body.aiwebskills-browse-training-page .tutor-course-card a[href*="/courses/"]:not(.tutor-btn):not(.aiwebskills-browse-course-btn) {
  color: #0f172a !important;
  font-size: 21px !important;
  line-height: 1.35 !important;
  font-weight: 950 !important;
  letter-spacing: -0.45px !important;
  text-decoration: none !important;
}

body.aiwebskills-browse-training-page .tutor-course-loop-title a:hover,
body.aiwebskills-browse-training-page .tutor-course-name a:hover,
body.aiwebskills-browse-training-page .tutor-course-card a[href*="/courses/"]:not(.tutor-btn):hover {
  color: #2563eb !important;
}

body.aiwebskills-browse-training-page .tutor-meta,
body.aiwebskills-browse-training-page .tutor-course-meta,
body.aiwebskills-browse-training-page .tutor-course-details,
body.aiwebskills-browse-training-page .tutor-course-author,
body.aiwebskills-browse-training-page .tutor-loop-author,
body.aiwebskills-browse-training-page .tutor-course-loop-meta {
  color: #475569 !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
}

body.aiwebskills-browse-training-page .tutor-avatar,
body.aiwebskills-browse-training-page .tutor-avatar-text,
body.aiwebskills-browse-training-page .tutor-avatar img {
  box-shadow: 0 8px 20px rgba(37,99,235,0.16) !important;
  border: 2px solid rgba(255,255,255,0.9) !important;
}

body.aiwebskills-browse-training-page .tutor-ratings,
body.aiwebskills-browse-training-page .tutor-ratings-stars,
body.aiwebskills-browse-training-page [class*="rating"],
body.aiwebskills-browse-training-page [class*="Rating"] {
  display: none !important;
}

body.aiwebskills-browse-training-page .tutor-meta i,
body.aiwebskills-browse-training-page .tutor-meta svg,
body.aiwebskills-browse-training-page .tutor-course-meta i,
body.aiwebskills-browse-training-page .tutor-course-meta svg {
  color: #2563eb !important;
}

body.aiwebskills-browse-training-page .aiwebskills-browse-course-btn,
body.aiwebskills-browse-training-page .tutor-course-card .tutor-btn,
body.aiwebskills-browse-training-page .tutor-course-loop .tutor-btn,
body.aiwebskills-browse-training-page .tutor-course-card a.tutor-btn,
body.aiwebskills-browse-training-page .tutor-course-loop a.tutor-btn,
body.aiwebskills-browse-training-page .tutor-course-card a[class*="button"],
body.aiwebskills-browse-training-page .tutor-course-card button {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 22px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 244, 180, 0.75) !important;
  color: #1f1300 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0.1px !important;
  background:
    linear-gradient(135deg, #fff7c2 0%, #facc15 30%, #f59e0b 66%, #b45309 100%) !important;
  box-shadow:
    0 7px 0 rgba(120, 53, 15, 0.90),
    0 20px 38px rgba(245, 158, 11, 0.30),
    inset 0 2px 2px rgba(255,255,255,0.72) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

body.aiwebskills-browse-training-page .aiwebskills-browse-course-btn::before,
body.aiwebskills-browse-training-page .tutor-course-card .tutor-btn::before,
body.aiwebskills-browse-training-page .tutor-course-loop .tutor-btn::before,
body.aiwebskills-browse-training-page .tutor-course-card a[class*="button"]::before,
body.aiwebskills-browse-training-page .tutor-course-card button::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 12%;
  right: 12%;
  height: 36%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.08));
  pointer-events: none;
}

body.aiwebskills-browse-training-page .aiwebskills-browse-course-btn:hover,
body.aiwebskills-browse-training-page .tutor-course-card .tutor-btn:hover,
body.aiwebskills-browse-training-page .tutor-course-loop .tutor-btn:hover,
body.aiwebskills-browse-training-page .tutor-course-card a[class*="button"]:hover,
body.aiwebskills-browse-training-page .tutor-course-card button:hover {
  transform: translateY(-3px) !important;
  color: #1f1300 !important;
  box-shadow:
    0 9px 0 rgba(120, 53, 15, 0.90),
    0 28px 52px rgba(245, 158, 11, 0.40),
    inset 0 2px 2px rgba(255,255,255,0.78) !important;
}

body.aiwebskills-browse-training-page .tutor-card-footer,
body.aiwebskills-browse-training-page .tutor-course-card-footer,
body.aiwebskills-browse-training-page .tutor-course-loop-footer {
  padding: 18px 4px 4px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
  margin-top: 18px !important;
}

body.aiwebskills-browse-training-page .tutor-course-wishlist,
body.aiwebskills-browse-training-page .tutor-course-bookmark,
body.aiwebskills-browse-training-page [class*="wishlist"],
body.aiwebskills-browse-training-page [class*="bookmark"] {
  border-radius: 999px !important;
}

@media (max-width: 768px) {
  body.aiwebskills-browse-training-page .tutor-course-card,
  body.aiwebskills-browse-training-page .tutor-course-loop,
  body.aiwebskills-browse-training-page .aiwebskills-browse-course-card {
    border-radius: 24px !important;
    padding: 13px !important;
  }

  body.aiwebskills-browse-training-page .tutor-course-card img,
  body.aiwebskills-browse-training-page .tutor-course-loop img,
  body.aiwebskills-browse-training-page .aiwebskills-browse-course-card img {
    min-height: 165px !important;
    max-height: 205px !important;
    border-radius: 18px !important;
  }

  body.aiwebskills-browse-training-page .tutor-course-card h3,
  body.aiwebskills-browse-training-page .tutor-course-card h2,
  body.aiwebskills-browse-training-page .tutor-course-loop-title,
  body.aiwebskills-browse-training-page .tutor-course-loop-title a,
  body.aiwebskills-browse-training-page .tutor-course-name {
    font-size: 19px !important;
  }
}


/* =====================================================
   AIWebSkills Auth v1.7.8 - Safe Enrolled Course Equal Cards
   CSS only touches cards marked by the Auth plugin on enrolled-courses.
   It does not hide Tutor dashboard navigation tabs.
===================================================== */
body.aiwebskills-enrolled-courses-page .tutor-dashboard-content .tutor-nav,
body.aiwebskills-enrolled-courses-page .tutor-dashboard-content [class*="tutor-nav"],
body.aiwebskills-enrolled-courses-page .tutor-dashboard-content .tutor-dashboard-inline-links {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
  width: 100% !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-grid > .aiwebskills-enrolled-equal-card,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 560px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 26px !important;
  margin: 0 !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 32%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.12), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  border: 1px solid rgba(37, 99, 235, 0.12) !important;
  box-shadow:
    0 24px 62px rgba(15, 23, 42, 0.12),
    inset 0 1px 1px rgba(255,255,255,0.96) !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card * {
  box-sizing: border-box !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-image-frame {
  width: 100% !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  margin: 0 0 22px !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(239,246,255,0.96)) !important;
  border: 1px solid rgba(37, 99, 235, 0.10) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10), inset 0 1px 1px rgba(255,255,255,0.95) !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card .aiwebskills-enrolled-image,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 166px !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 18px !important;
  display: block !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-level-badge {
  width: fit-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 18px !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.45px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-level-beginner {
  color: #047857 !important;
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.30) !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-level-intermediate {
  color: #92400e !important;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-title,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card .tutor-course-name,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card .tutor-course-loop-title,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card .tutor-course-title,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card h1,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card h2,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card h3,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card a[href*="/courses/"] {
  display: block !important;
  color: #0f172a !important;
  font-size: 21px !important;
  line-height: 1.28 !important;
  font-weight: 950 !important;
  letter-spacing: -0.45px !important;
  text-decoration: none !important;
  margin: 0 0 18px !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card .aiwebskills-enrolled-title {
  min-height: 82px !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-hide-rating {
  display: none !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card .tutor-course-progress,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card [class*="progress"]:not(.aiwebskills-enrolled-level-badge) {
  border-radius: 999px !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card .tutor-progress-value,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card .tutor-progress-bar span,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card .tutor-course-progress-bar span {
  background: linear-gradient(135deg, #00c6ff, #2563eb, #7c3aed, #ec4899) !important;
  border-radius: 999px !important;
}

body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-action-btn,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card .tutor-btn,
body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card a[class*="button"] {
  width: min(100%, 260px) !important;
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: auto !important;
  padding: 14px 22px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(255, 244, 180, 0.75) !important;
  color: #1f1300 !important;
  text-decoration: none !important;
  font-size: 15.5px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #fff7c2 0%, #facc15 32%, #f59e0b 68%, #b45309 100%) !important;
  box-shadow: 0 7px 0 rgba(120, 53, 15, 0.92), 0 20px 38px rgba(245, 158, 11, 0.30), inset 0 2px 2px rgba(255,255,255,0.72) !important;
}

@media (max-width: 980px) {
  body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card {
    min-height: auto !important;
  }
}

@media (max-width: 640px) {
  body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card {
    padding: 20px !important;
    border-radius: 24px !important;
  }

  body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-image-frame {
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    border-radius: 22px !important;
  }

  body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-action-btn,
  body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card .tutor-btn,
  body.aiwebskills-enrolled-courses-page .aiwebskills-enrolled-equal-card a[class*="button"] {
    width: 100% !important;
  }
}


/* =====================================================
   AIWebSkills Auth v1.8.5 - Popup, OTP and Message Polish
   Safe override section. Keeps the existing login flow.
===================================================== */

body.aiwebskills-auth-open {
  overflow: hidden !important;
}

.aiwebskills-auth-modal {
  padding: 18px !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(59, 130, 246, 0.34), transparent 32%),
    radial-gradient(circle at 88% 20%, rgba(236, 72, 153, 0.20), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(245, 158, 11, 0.12), transparent 40%),
    rgba(2, 6, 23, 0.88) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

.aiwebskills-auth-box {
  max-width: 570px !important;
  padding: 28px 28px 26px !important;
  border-radius: 30px !important;
  color: #e5eefc !important;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.96) 48%, rgba(30, 27, 75, 0.96)) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 48px rgba(37, 99, 235, 0.18) !important;
}

.aiwebskills-auth-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), transparent 30%, rgba(255,255,255,0.05));
  opacity: .6;
}

.aiwebskills-auth-brand-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.aiwebskills-auth-logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
  background: linear-gradient(135deg, #facc15, #fb923c);
  box-shadow: 0 12px 28px rgba(245, 158, 11, .28);
}

.aiwebskills-auth-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.26);
}

.aiwebskills-auth-header,
.aiwebskills-auth-tabs,
.aiwebskills-auth-panel,
.aiwebskills-auth-close {
  position: relative;
  z-index: 2;
}

.aiwebskills-auth-header h2 {
  margin: 0 0 8px !important;
  color: #ffffff !important;
  font-size: clamp(25px, 4.2vw, 34px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
}

.aiwebskills-auth-header p {
  max-width: 470px;
  margin: 0 !important;
  color: #cbd5e1 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.aiwebskills-auth-close {
  top: 16px !important;
  right: 16px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  color: #e2e8f0 !important;
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28) !important;
}

.aiwebskills-auth-close:hover {
  transform: translateY(-1px);
  background: rgba(239, 68, 68, .18) !important;
  border-color: rgba(248, 113, 113, .42) !important;
}

.aiwebskills-auth-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
  padding: 6px !important;
  margin: 22px 0 20px !important;
  border-radius: 18px !important;
  background: rgba(2, 6, 23, 0.48) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

.aiwebskills-auth-tab {
  min-height: 46px !important;
  border-radius: 14px !important;
  color: #cbd5e1 !important;
  font-weight: 850 !important;
  background: transparent !important;
  border: 0 !important;
}

.aiwebskills-auth-tab.active {
  color: #0f172a !important;
  background: linear-gradient(135deg, #facc15, #fb923c) !important;
  box-shadow: 0 13px 30px rgba(245, 158, 11, .26) !important;
}

.aiwebskills-auth-panel {
  display: none !important;
  padding: 0 !important;
}

.aiwebskills-auth-panel.active {
  display: block !important;
  animation: aiwebskillsAuthPanelIn .22s ease both;
}

@keyframes aiwebskillsAuthPanelIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.aiwebskills-auth-form label {
  display: block !important;
  margin: 13px 0 7px !important;
  color: #e2e8f0 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.aiwebskills-auth-form input {
  width: 100% !important;
  min-height: 49px !important;
  border-radius: 15px !important;
  padding: 12px 15px !important;
  color: #f8fafc !important;
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  outline: none !important;
  box-shadow: 0 0 0 0 rgba(96, 165, 250, 0) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease !important;
}

.aiwebskills-auth-form input::placeholder {
  color: #64748b !important;
}

.aiwebskills-auth-form input:focus {
  border-color: rgba(96, 165, 250, 0.82) !important;
  background: rgba(15, 23, 42, 0.92) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.20) !important;
}

.aiwebskills-field-note {
  margin: 7px 0 2px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.45;
}

.aiwebskills-auth-submit {
  width: 100% !important;
  min-height: 54px !important;
  margin-top: 18px !important;
  border-radius: 16px !important;
  border: 0 !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #facc15 0%, #fb923c 52%, #f97316 100%) !important;
  box-shadow:
    0 8px 0 rgba(120, 53, 15, .95),
    0 20px 42px rgba(249, 115, 22, .26) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.aiwebskills-auth-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow:
    0 10px 0 rgba(120, 53, 15, .95),
    0 24px 50px rgba(249, 115, 22, .32) !important;
}

.aiwebskills-auth-submit:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    0 4px 0 rgba(120, 53, 15, .95),
    0 13px 28px rgba(249, 115, 22, .22) !important;
}

.aiwebskills-auth-submit.is-loading,
.aiwebskills-auth-submit:disabled {
  opacity: .78 !important;
  cursor: wait !important;
  transform: none !important;
}

.aiwebskills-auth-small {
  margin-top: 15px !important;
  color: #cbd5e1 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

.aiwebskills-auth-small a {
  color: #facc15 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.aiwebskills-auth-small a:hover {
  color: #fde68a !important;
  text-decoration: underline !important;
}

.aiwebskills-auth-message {
  display: none;
  position: relative;
  margin: 0 0 14px !important;
  padding: 13px 14px 13px 44px !important;
  border-radius: 15px !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1.55 !important;
  text-align: left !important;
  border: 1px solid transparent !important;
}

.aiwebskills-auth-message.show {
  display: block !important;
  animation: aiwebskillsAuthMessageIn .2s ease both;
}

@keyframes aiwebskillsAuthMessageIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.aiwebskills-auth-message::before {
  position: absolute;
  top: 13px;
  left: 14px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 950;
}

.aiwebskills-auth-error {
  color: #fecaca !important;
  background: rgba(127, 29, 29, 0.38) !important;
  border-color: rgba(248, 113, 113, 0.34) !important;
  box-shadow: 0 12px 34px rgba(127, 29, 29, .18) !important;
}

.aiwebskills-auth-error::before {
  content: "!";
  color: #7f1d1d;
  background: #fecaca;
}

.aiwebskills-auth-success {
  color: #bbf7d0 !important;
  background: rgba(20, 83, 45, 0.38) !important;
  border-color: rgba(74, 222, 128, 0.34) !important;
  box-shadow: 0 12px 34px rgba(20, 83, 45, .16) !important;
}

.aiwebskills-auth-success::before {
  content: "✓";
  color: #14532d;
  background: #bbf7d0;
}

.aiwebskills-otp-intro {
  position: relative;
  margin: 0 0 18px !important;
  padding: 20px 18px !important;
  text-align: center !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at top, rgba(250, 204, 21, .13), transparent 55%),
    rgba(15, 23, 42, 0.62) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22) !important;
}

.aiwebskills-otp-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #0f172a;
  font-size: 23px;
  font-weight: 900;
  background: linear-gradient(135deg, #facc15, #fb923c);
  box-shadow: 0 16px 36px rgba(245, 158, 11, .25);
}

.aiwebskills-otp-intro h3 {
  margin: 0 0 7px !important;
  color: #ffffff !important;
  font-size: 23px !important;
  line-height: 1.2 !important;
}

.aiwebskills-otp-intro p {
  margin: 0 0 8px !important;
  color: #cbd5e1 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.aiwebskills-otp-intro strong {
  display: inline-block !important;
  max-width: 100%;
  margin: 0 0 8px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  overflow-wrap: anywhere;
  color: #bfdbfe !important;
  background: rgba(37, 99, 235, 0.16) !important;
  border: 1px solid rgba(96, 165, 250, 0.26) !important;
}

.aiwebskills-otp-intro span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
}

.aiwebskills-otp-form input[name="otp"] {
  height: 62px !important;
  text-align: center !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: 12px !important;
  padding-left: 26px !important;
  color: #ffffff !important;
}

.aiwebskills-otp-form input[name="otp"].is-complete {
  border-color: rgba(74, 222, 128, .78) !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .16) !important;
}

.aiwebskills-resend-otp,
.aiwebskills-otp-back a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.aiwebskills-forgot-password {
  margin-top: 17px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

@media (max-width: 560px) {
  .aiwebskills-auth-modal {
    align-items: flex-start !important;
    padding: 12px !important;
    overflow-y: auto !important;
  }

  .aiwebskills-auth-box {
    max-height: none !important;
    margin: 8px 0 18px !important;
    padding: 23px 17px 20px !important;
    border-radius: 24px !important;
  }

  .aiwebskills-auth-brand-row {
    padding-right: 42px;
    align-items: flex-start;
  }

  .aiwebskills-auth-kicker {
    font-size: 10px;
    line-height: 1.35;
  }

  .aiwebskills-auth-tabs {
    margin: 18px 0 16px !important;
  }

  .aiwebskills-auth-form input {
    min-height: 47px !important;
  }

  .aiwebskills-otp-form input[name="otp"] {
    height: 58px !important;
    font-size: 24px !important;
    letter-spacing: 8px !important;
    padding-left: 20px !important;
  }
}


/* v1.8.7: compact registration fields */
.aiwebskills-password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.aiwebskills-password-wrap input {
  padding-right: 78px !important;
  width: 100%;
}

.aiwebskills-password-toggle {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.25);
}

.aiwebskills-password-toggle:hover {
  filter: brightness(1.04);
}

#aiwebskills_phone::placeholder {
  color: rgba(226, 232, 240, 0.48);
}


/* =====================================================
   AIWebSkills Auth v1.8.9 - Mobile View Polish
   Improves popup height, scrolling, spacing and touch comfort.
===================================================== */

.aiwebskills-auth-modal,
.aiwebskills-auth-box,
.aiwebskills-auth-box * {
  box-sizing: border-box !important;
}

.aiwebskills-auth-box {
  overscroll-behavior: contain !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 204, 21, .55) rgba(15, 23, 42, .7);
}

.aiwebskills-auth-box::-webkit-scrollbar {
  width: 7px;
}

.aiwebskills-auth-box::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, .72);
  border-radius: 999px;
}

.aiwebskills-auth-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(250, 204, 21, .85), rgba(249, 115, 22, .85));
  border-radius: 999px;
}

.aiwebskills-auth-form input,
.aiwebskills-auth-submit,
.aiwebskills-auth-tab,
.aiwebskills-password-toggle,
.aiwebskills-resend-otp,
.aiwebskills-otp-back a,
.aiwebskills-switch-login,
.aiwebskills-switch-register {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

@media (max-width: 640px) {
  body.aiwebskills-auth-open {
    position: fixed !important;
    width: 100% !important;
    min-height: 100% !important;
  }

  .aiwebskills-auth-modal {
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100vw !important;
    min-height: 100vh !important;
    min-height: calc(var(--aiwebskills-vh, 1vh) * 100) !important;
    padding: max(10px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.28), transparent 35%),
      radial-gradient(circle at 100% 8%, rgba(236, 72, 153, 0.16), transparent 34%),
      rgba(2, 6, 23, 0.92) !important;
  }

  .aiwebskills-auth-box {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    max-height: calc((var(--aiwebskills-vh, 1vh) * 100) - 22px) !important;
    margin: 0 auto !important;
    padding: 18px 14px 16px !important;
    border-radius: 22px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow:
      0 20px 58px rgba(0, 0, 0, 0.62),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset,
      0 0 34px rgba(37, 99, 235, 0.15) !important;
  }

  .aiwebskills-auth-close {
    top: 11px !important;
    right: 11px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 22px !important;
    z-index: 20 !important;
  }

  .aiwebskills-auth-brand-row {
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-right: 44px !important;
  }

  .aiwebskills-auth-logo-mark {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    flex: 0 0 auto !important;
  }

  .aiwebskills-auth-kicker {
    min-height: 28px !important;
    padding: 5px 9px !important;
    font-size: 9.5px !important;
    letter-spacing: .055em !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .aiwebskills-auth-header {
    margin-bottom: 12px !important;
    padding-right: 0 !important;
  }

  .aiwebskills-auth-header h2 {
    max-width: 88% !important;
    margin-bottom: 6px !important;
    font-size: 23px !important;
    line-height: 1.13 !important;
    letter-spacing: -0.03em !important;
  }

  .aiwebskills-auth-header p {
    font-size: 12.8px !important;
    line-height: 1.48 !important;
  }

  .aiwebskills-auth-tabs {
    position: sticky !important;
    top: -1px !important;
    z-index: 10 !important;
    margin: 14px 0 13px !important;
    padding: 5px !important;
    gap: 6px !important;
    border-radius: 15px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .aiwebskills-auth-tab {
    min-height: 41px !important;
    border-radius: 12px !important;
    font-size: 12.8px !important;
  }

  .aiwebskills-auth-form label {
    margin: 9px 0 5px !important;
    font-size: 12.5px !important;
  }

  .aiwebskills-auth-form input {
    min-height: 45px !important;
    border-radius: 13px !important;
    padding: 10px 13px !important;
    font-size: 16px !important;
  }

  .aiwebskills-field-note {
    margin: 5px 0 0 !important;
    font-size: 11.4px !important;
    line-height: 1.38 !important;
  }

  .aiwebskills-password-wrap input {
    padding-right: 70px !important;
  }

  .aiwebskills-password-toggle {
    right: 7px !important;
    min-height: 31px !important;
    padding: 6px 10px !important;
    font-size: 11.2px !important;
    box-shadow: none !important;
  }

  .aiwebskills-auth-submit {
    min-height: 49px !important;
    margin-top: 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    box-shadow:
      0 6px 0 rgba(120, 53, 15, .95),
      0 16px 32px rgba(249, 115, 22, .24) !important;
  }

  .aiwebskills-auth-submit:hover:not(:disabled) {
    transform: none !important;
  }

  .aiwebskills-auth-small {
    margin-top: 12px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .aiwebskills-auth-message {
    margin-bottom: 10px !important;
    padding: 11px 12px 11px 39px !important;
    border-radius: 13px !important;
    font-size: 12.2px !important;
    line-height: 1.45 !important;
  }

  .aiwebskills-auth-message::before {
    top: 11px !important;
    left: 12px !important;
    width: 19px !important;
    height: 19px !important;
    font-size: 12px !important;
  }

  .aiwebskills-otp-intro {
    margin-bottom: 13px !important;
    padding: 15px 12px !important;
    border-radius: 18px !important;
  }

  .aiwebskills-otp-icon {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 9px !important;
    border-radius: 15px !important;
    font-size: 20px !important;
  }

  .aiwebskills-otp-intro h3 {
    font-size: 20px !important;
    margin-bottom: 5px !important;
  }

  .aiwebskills-otp-intro p {
    font-size: 12.8px !important;
    line-height: 1.45 !important;
  }

  .aiwebskills-otp-intro strong {
    max-width: 100% !important;
    padding: 7px 9px !important;
    font-size: 12.2px !important;
    border-radius: 13px !important;
  }

  .aiwebskills-otp-intro span {
    font-size: 11.3px !important;
  }

  .aiwebskills-otp-form input[name="otp"] {
    height: 54px !important;
    font-size: 22px !important;
    letter-spacing: 7px !important;
    padding-left: 18px !important;
    font-variant-numeric: tabular-nums !important;
  }

  .aiwebskills-resend-otp,
  .aiwebskills-otp-back a {
    min-height: 33px !important;
    padding: 7px 11px !important;
    font-size: 12px !important;
  }

  .aiwebskills-forgot-password {
    margin-top: 13px !important;
    padding-top: 11px !important;
  }
}

@media (max-width: 380px) {
  .aiwebskills-auth-modal {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .aiwebskills-auth-box {
    padding: 16px 11px 14px !important;
    border-radius: 19px !important;
  }

  .aiwebskills-auth-header h2 {
    font-size: 21px !important;
  }

  .aiwebskills-auth-header p {
    font-size: 12.2px !important;
  }

  .aiwebskills-auth-tab {
    font-size: 12px !important;
  }

  .aiwebskills-auth-submit {
    font-size: 13.2px !important;
  }

  .aiwebskills-otp-form input[name="otp"] {
    font-size: 20px !important;
    letter-spacing: 5px !important;
    padding-left: 15px !important;
  }
}

@media (max-height: 700px) and (max-width: 640px) {
  .aiwebskills-auth-header p {
    display: none !important;
  }

  .aiwebskills-auth-brand-row {
    margin-bottom: 7px !important;
  }

  .aiwebskills-auth-tabs {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .aiwebskills-auth-form label {
    margin-top: 7px !important;
  }

  .aiwebskills-auth-submit {
    margin-top: 11px !important;
  }
}