:root {
  --sip-ink: #0F2A33;
  --sip-ink-rgb: 15, 42, 51;
  --sip-teal: #1F6F8B;
  --sip-teal-rgb: 31, 111, 139;
  --sip-teal-dark: #12414F;
  --sip-muted: #5A6E76;
  --sip-muted-2: #9AA5AA;
  --sip-coral: #F25E3F;
  --sip-coral-rgb: 242, 94, 63;
  --sip-coral-dark: #D94A30;
  --sip-honey: #F4B860;
  --sip-mint: #6FCF97;
  --sip-alert: #C0392B;
  --sip-cream: #FAF6F0;
  --sip-cream-2: #F7EFE4;
  --sip-line: #E8DDC9;
  --sip-card: #FFFFFF;
  --sip-field: #F4F6F7;
  --sip-success: var(--sip-mint);
  --sip-warning: var(--sip-honey);
  --tg-body-font-family: 'Inter', 'Sarabun', 'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tg-heading-font-family: 'Inter', 'Sarabun', 'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tg-body-color: var(--sip-muted);
  --tg-heading-color: var(--sip-ink);
  --tg-theme-primary: var(--sip-coral);
  --tg-theme-secondary: var(--sip-teal);
}

html { background: var(--sip-cream); }
body {
  background: var(--sip-cream) !important;
  color: var(--sip-muted);
  font-family: var(--tg-body-font-family) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--sip-teal); }
a:hover { color: var(--sip-coral); }
:focus-visible { outline: 3px solid rgba(31, 111, 139, .35); outline-offset: 3px; }
.main-area { background: var(--sip-cream); }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Header */
.tg-header__top, .mobile-login-btn { display: none !important; }
.sip-header__bar {
  background: #fff !important;
  border-bottom: 1px solid rgba(15, 42, 51, .06);
  box-shadow: none !important;
  padding: 0 !important;
  position: relative;
  z-index: 80;
}
.sticky-menu.sip-header__bar { box-shadow: 0 8px 24px rgba(15, 42, 51, .08) !important; }
.sip-header__container { max-width: 1200px; }
.sip-nav {
  min-height: 72px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.sip-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.sip-logo img { width: 158px; max-height: 54px; object-fit: contain; }
.sip-header .navigation { gap: 18px; }
.sip-header .navigation > li > a {
  color: var(--sip-ink) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 24px 0 !important;
}
.sip-header .navigation > li > a.router-link-active,
.sip-header .navigation > li > a.router-link-exact-active { color: var(--sip-coral) !important; }
.sip-header-search {
  align-items: center;
  width: min(300px, 25vw);
  border: 1px solid #dbe4e8;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.sip-header-search input {
  width: 100%;
  height: 44px;
  border: 0;
  padding: 0 0 0 18px;
  font-size: 14px;
  color: var(--sip-ink);
  background: transparent;
}
.sip-header-search button {
  width: 48px;
  height: 44px;
  border: 0;
  color: var(--sip-teal);
  background: transparent;
}
.sip-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.sip-btn, .btn, .header-logout {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px !important;
  border: 1.5px solid transparent !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.sip-btn:hover, .btn:hover { transform: translateY(-1px); }
.sip-btn--primary, .btn-two, .btn:not(.btn-border):not(.sip-btn--outline) {
  background: var(--sip-coral) !important;
  color: #fff !important;
  border-color: var(--sip-coral) !important;
  box-shadow: 0 8px 16px rgba(242, 94, 63, .16) !important;
}
.sip-btn--primary:hover, .btn-two:hover { background: var(--sip-coral-dark) !important; color: #fff !important; }
.sip-btn--outline, .btn-border {
  background: #fff !important;
  color: var(--sip-teal) !important;
  border-color: var(--sip-teal) !important;
  box-shadow: none !important;
}
.sip-auth-btn {
  min-width: 108px;
  min-height: 40px;
  border-radius: 12px !important;
  padding: 8px 15px !important;
  font-size: 14px;
}
.sip-icon-btn, .sip-menu-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--sip-coral) !important;
  border-radius: 15px !important;
  color: var(--sip-coral) !important;
  background: #fff !important;
  position: relative;
}
.sip-search-link { border-color: transparent !important; color: var(--sip-teal) !important; }
.sip-menu-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex-direction: column;
  gap: 3.5px;
  border-radius: 13px !important;
  padding: 0;
}
.sip-menu-btn span { display: block; width: 18px; height: 2.25px; border-radius: 999px; background: currentColor; transition: width 0.2s ease; }
.sip-menu-btn span:nth-child(2) { width: 12px; }
.sip-menu-btn:hover span { width: 18px; }
.tg-header__area .sip-menu-btn { display: none; }
@media (max-width: 1199.98px) {
  .tg-header__area .sip-menu-btn { display: inline-flex; }
}
.sip-count-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sip-coral);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
}
.sip-profile-dropdown {
  position: relative;
  z-index: 100;
}
.sip-profile-pill {
  min-width: 92px;
  max-width: 132px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  background: #F25E3F;
  color: #fff !important;
  padding: 0 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sip-profile-pill:hover,
.sip-profile-pill:focus-visible {
  background: #D94A30;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(242, 94, 63, .18);
}
.sip-profile-pill__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sip-profile-pill i {
  flex: 0 0 auto;
  font-size: 11px;
}
.sip-profile-pill__caret {
  transition: transform .16s ease;
}
.sip-profile-pill__caret--open {
  transform: rotate(180deg);
}
.sip-profile-menu {
  position: absolute;
  top: calc(100% + 24px);
  right: 0;
  width: min(300px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(15, 42, 51, .08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(15, 42, 51, .16), 0 2px 8px rgba(15, 42, 51, .08);
  padding: 18px 0 0;
  z-index: 1000;
}
.sip-profile-menu__item {
  width: 100%;
  display: flex !important;
  align-items: center;
  gap: 14px;
  border: 0;
  background: transparent;
  color: #747474 !important;
  padding: 10px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  transition: background .16s ease, color .16s ease;
}
.sip-profile-menu__item:hover,
.sip-profile-menu__item:focus-visible {
  background: #FFF1EC;
  color: #4f4f4f !important;
}
.sip-profile-menu__item i {
  width: 22px;
  flex: 0 0 22px;
  color: #F25E3F;
  font-size: 14px;
  text-align: center;
}
.sip-profile-menu__divider {
  height: 1px;
  margin-top: 18px;
  background: #dedede;
}
.sip-profile-menu__logout {
  min-height: 78px;
  padding-top: 16px;
  padding-bottom: 20px;
}

/* Mobile menu */
.sip-mobile-menu { z-index: 99999 !important; }
.sip-mobile-menu__panel {
  /* width: min(86vw, 340px) !important; */
  background: var(--sip-cream) !important;
  padding: 20px 16px 18px !important;
  border-radius: 0 !important;
  box-shadow: 12px 0 36px rgba(15, 42, 51, .18) !important;
}
.sip-mobile-menu__close {
  top: 18px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  color: #000 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  padding: 0 !important;
}
.sip-mobile-menu__close i,
.sip-mobile-menu__close span {
  display: none !important;
}
.sip-mobile-menu__logo { margin: 0 0 14px !important; padding: 0 !important; }
.sip-mobile-menu__logo img { width: 100px !important; max-height: none !important; }
.sip-mobile-menu__auth { display: grid; gap: 8px; margin-bottom: 18px; }
.sip-mobile-menu__auth .sip-btn { width: 100%; min-height: 40px; border-radius: 12px !important; font-size: 14px; }
.sip-mobile-menu__member { margin-bottom: 16px; }
.sip-member-card { display: flex; align-items: center; gap: 8px; color: var(--sip-ink); }
.sip-member-card strong, .sip-member-card small { display: block; }
.sip-member-card strong { font-size: 14px; }
.sip-member-card small { color: var(--sip-muted); margin-top: 2px; font-size: 11px; }
.sip-mobile-menu__links .navigation { display: grid !important; gap: 12px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
.sip-mobile-menu__links .navigation li { border: 0 !important; }
.sip-mobile-menu__links .navigation li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  color: var(--sip-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  border: 0 !important;
}
.sip-mobile-menu__links .navigation li > a::before { display: none !important; }
.sip-mobile-menu__links .navigation i { width: 20px; color: #66787e; font-size: 14px; text-align: center; }
.sip-mobile-menu__logout { margin-top: 22px; width: 100%; min-height: 38px; border: 0; border-radius: 10px; color: #fff; background: var(--sip-ink); font-size: 13px; font-weight: 700; }
.sip-mobile-menu__backdrop { background: rgba(0, 0, 0, .72) !important; }

/* General page rhythm */
.section-py-120, .section-pb-120, .all-courses-area, .checkout__area, .pricing__area, .dashboard__area, .singUp-area, .courses__details-area {
  padding-top: 34px !important;
  padding-bottom: 72px !important;
}
.breadcrumb__area { display: none !important; }
.section__title .sub-title, .sub-title, .status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  padding: 5px 13px !important;
  background: #FFF1EC !important;
  color: var(--sip-coral) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}
.section__title .title, .title, h1, h2, h3, h4, h5 { color: var(--sip-ink) !important; letter-spacing: -.02em; }
.section__title .title { font-size: clamp(28px, 5vw, 40px) !important; font-weight: 700 !important; line-height: 1.12 !important; }
.section__title p, .desc { color: #8b9aa0 !important; line-height: 1.55; }
.api-state {
  border: 1px solid var(--sip-line) !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  color: var(--sip-muted) !important;
  box-shadow: 0 10px 24px rgba(15, 42, 51, .04);
}
.api-state--error { color: var(--sip-alert) !important; background: #FFF1EC !important; border-color: #ffc9bc !important; }

/* Skeleton loaders */
@keyframes sip-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sip-skel-shimmer {
  background: linear-gradient(100deg, var(--sip-cream-2) 30%, #FFFFFF 50%, var(--sip-cream-2) 70%) !important;
  background-size: 200% 100% !important;
  animation: sip-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) { .sip-skel-shimmer { animation: none; } }
.sip-skeleton { display: grid; gap: 16px; }
.sip-skel-line { height: 14px; width: 100%; }
.sip-skel-line--title { height: 20px; width: 65%; }
.sip-skel-line--label { height: 12px; width: 32%; }
.sip-skel-line--input { height: 46px; border-radius: 12px; }
.sip-skel-line--w70 { width: 70%; }
.sip-skel-line--w60 { width: 60%; }
.sip-skel-line--w55 { width: 55%; }
/* list */
.sip-skel-row { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--sip-line); border-radius: 20px; background: var(--sip-card); }
.sip-skel-row__body { flex: 1; display: grid; gap: 10px; min-width: 0; }
.sip-skel-thumb { width: 84px; height: 84px; border-radius: 16px; flex: none; }
/* form */
.sip-skeleton--form { justify-items: center; }
.sip-skel-avatar { width: 120px; height: 120px; border-radius: 50%; }
.sip-skel-card { width: 100%; display: grid; gap: 18px; padding: 24px; border: 1px solid var(--sip-line); border-radius: 22px; background: var(--sip-card); }
.sip-skel-field { display: grid; gap: 8px; width: 100%; }
/* detail */
.sip-skel-banner { height: 220px; border-radius: 20px; }

/* Forms and auth cards */
.singUp-area { background: var(--sip-cream) !important; }
.singUp-wrap, .checkout__form-wrap, .order-summary, .dashboard__content-wrap, .courses-widget, .access-box, .certificate-card, .notification-card {
  border: 1px solid rgba(15, 42, 51, .08) !important;
  border-radius: 22px !important;
  background: var(--sip-card) !important;
  box-shadow: 0 4px 14px rgba(15, 42, 51, .06) !important;
}
.singUp-wrap { padding: clamp(28px, 6vw, 54px) !important; }
.form-grp { margin-bottom: 18px; }
.form-grp label { color: var(--sip-ink); font-weight: 700; margin-bottom: 8px; }
.form-grp input, .form-grp textarea, .form-grp select, .form-control, .form-select {
  width: 100%;
  min-height: 60px;
  border: 1.5px solid #dbe2e6 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--sip-ink) !important;
  font-weight: 500;
  padding: 12px 18px !important;
  box-shadow: none !important;
}
.form-grp input::placeholder { color: #c8ced2; }
.account__divider { margin: 32px 0 26px; padding: 0; display: flex; align-items: center; gap: 12px; color: #8b9aa0; font-weight: 600; }
.account__divider::before, .account__divider::after { content: ''; height: 1px; flex: 1; background: #d7dde0; position: static; width: auto; }
.account__divider span { position: static !important; padding: 0 !important; background: transparent !important; }
.account__switch { text-align: center; margin-top: 18px; }
.social-auth { grid-template-columns: repeat(3, 1fr); gap: 16px !important; }
.social-auth__button {
  min-height: 70px;
  justify-content: center;
  border-radius: 11px !important;
  font-size: 0 !important;
}
.social-auth__icon { margin: 0 !important; width: 34px !important; height: 34px !important; font-size: 20px !important; }
.social-auth__button:nth-child(2) { background: #2377e8 !important; border-color: #2377e8 !important; }
.social-auth__button:nth-child(2) .social-auth__icon { background: transparent !important; }
.social-auth__button:nth-child(3) { background: #60d36e !important; border-color: #60d36e !important; }
.social-auth__button:nth-child(3) .social-auth__icon { background: transparent !important; }
.provider-token-box { border: 1px dashed #dbe2e6; background: #f8fbfc !important; }
.interest-chip { background: #fff; color: var(--sip-ink); font-weight: 700; }
.interest-chip:has(input:checked) { border-color: var(--sip-coral); background: #FFF1EC; color: var(--sip-coral); }

/* Banner/home */
.banner-area {
  padding: 0 !important;
  min-height: 0 !important;
  background: linear-gradient(120deg, #142846, #e37968) !important;
}
.banner-area .container { max-width: 100%; padding: 0; }
.banner__content { max-width: 1120px; margin: 0 auto; padding: 34px 24px; color: #fff; }
.banner__content .sub-title { background: transparent !important; color: #fff !important; padding: 0 !important; }
.banner__content .title { color: #fff !important; font-size: clamp(28px, 5vw, 54px) !important; }
.banner__content p { color: rgba(255,255,255,.86) !important; max-width: 560px; }
.banner__images { display: none !important; }
.skill-status {
  background: var(--sip-teal-dark) !important;
  color: #fff;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: 0 6px 16px rgba(15, 42, 51, .12);
}
.skill-status h4 { color: #fff !important; }
.skill-status p { color: rgba(255,255,255,.72); }
.skill-status .status-chip { background: rgba(255,255,255,.12) !important; color: #fff !important; }

/* Course cards/list */
.courses__grid-wrap { row-gap: 22px; }
.courses__item {
  border: 1px solid rgba(15, 42, 51, .08) !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: transparent !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.courses__item:hover { transform: translateY(-2px); border-color: var(--sip-coral) !important; box-shadow: 0 0 0 2px rgba(242,94,63,.18), 0 12px 24px rgba(15,42,51,.08) !important; }
.courses__item-thumb { border-radius: 10px !important; overflow: hidden; background: #62787f !important; min-height: 206px; display: block; margin: 0; }
.courses__item-thumb a { display: block; height: 100%; }
.courses__item-thumb img { width: 100%; height: 100%; min-height: 206px; object-fit: cover; opacity: .38; filter: grayscale(.4); }
.courses__item-content { padding: 13px 0 8px !important; background: transparent !important; }
.courses__item-content .title { font-size: 19px !important; line-height: 1.25 !important; font-weight: 700 !important; margin: 6px 0 8px !important; }
.courses__item-content .title a { color: var(--sip-ink) !important; }
.courses__item-content p { color: #7c8f95; font-size: 14px; margin-bottom: 8px; }
.courses__item-meta { gap: 10px 14px !important; margin: 0 !important; color: #798b91; }
.courses__item-meta li { font-size: 13px !important; font-weight: 600 !important; color: #798b91 !important; }
.courses__item-tag span { background: #FFF1EC !important; color: var(--sip-coral) !important; border-radius: 999px !important; font-weight: 700 !important; padding: 4px 10px !important; }
.avg-rating i { color: var(--sip-warning) !important; }
.courses__item-bottom { border: 0 !important; padding: 4px 0 0 !important; }
.courses__item-bottom .button a { color: var(--sip-teal) !important; font-weight: 700; }
.courses__item-bottom .price { color: var(--sip-coral) !important; font-size: 15px !important; }
.courses-top-wrap { margin-bottom: 22px !important; }
.courses__sidebar { margin-top: 0 !important; }
.courses-widget { padding: 22px !important; }

/* Course detail / lesson */
.courses__details-thumb, .lesson-placeholder, .lesson__video-wrap video {
  border-radius: 0 !important;
  overflow: hidden;
  background: #d9d9d9 !important;
  box-shadow: none !important;
}
.courses__details-thumb img { width: 100%; max-height: 320px; object-fit: cover; opacity: .45; filter: grayscale(.5); }
.courses__details-content, .lesson__details-content { background: #fff; padding: 24px; }
.courses__details-content > .title { font-size: clamp(26px, 6vw, 42px) !important; font-weight: 700 !important; }
.courses__details-sidebar .courses__details-widget { border: 1px solid var(--sip-line) !important; border-radius: 22px !important; background: #FFFFFF !important; box-shadow: 0 4px 14px rgba(15, 42, 51, .06) !important; }
.lesson-list .course-item, .course-item {
  border-bottom: 1px solid var(--sip-line) !important;
  color: #71848a;
  font-weight: 600;
}
.lesson__area { background: var(--sip-cream) !important; }
.lesson__content { background: #fff !important; padding: 22px !important; border-right: 1px solid var(--sip-line); }
.lesson__video-wrap-top { background: #fff !important; border-bottom: 1px solid var(--sip-line); }
.lesson-placeholder { min-height: 250px !important; background: #d7d7d7 !important; color: var(--sip-ink) !important; }
.lesson-placeholder::before {
  content: '▶';
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #202020;
  font-size: 38px;
  padding-left: 5px;
  margin-bottom: 18px;
}
.lesson-button.active { background: #fff9ef !important; border: 1px solid var(--sip-line) !important; border-radius: 12px; padding: 14px !important; }
.progress { height: 9px !important; background: #e4e8ea !important; border-radius: 999px !important; }
.progress-bar { background: var(--sip-teal) !important; border-radius: 999px; }

/* Packages / checkout / notifications */
.package-card {
  border: 1px solid var(--sip-line) !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.package-card.recommended { border-color: var(--sip-coral) !important; box-shadow: 0 0 0 1px rgba(242, 94, 63, .28) !important; }
.package-card h3 { color: var(--sip-coral) !important; font-size: 30px !important; font-weight: 700 !important; }
.package-card h2 { color: var(--sip-coral) !important; font-size: 38px !important; font-weight: 700 !important; }
.package-features { border-top: 1px solid var(--sip-line); padding-top: 18px; }
.package-features li { color: #7c8f95; font-weight: 600; }
.package-features i { color: var(--sip-success); }
.package-features li.is-excluded { color: #b3bfc3; }
.package-features li.is-excluded i { color: #c3ccd0; }
.order-summary h2 { color: var(--sip-coral) !important; font-size: 38px !important; }
.notification-list { gap: 14px !important; }
.notification-card.unread { border-color: var(--sip-coral) !important; background: #fff7f3 !important; }

/* Footer */
.sip-footer { background: var(--sip-teal-dark) !important; color: #fff; }
.sip-footer__top { background: transparent !important; padding: 32px 0 32px !important; }
.sip-footer__container { display: grid; gap: 30px; }
.sip-footer__brand { text-align: center; }
.sip-footer__logo img { width: 150px; }
.sip-footer__brand p { margin-top: 12px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 500; }
.sip-footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sip-footer__section h2 { color: #fff !important; font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.sip-footer__section li + li { margin-top: 9px; }
.sip-footer__section a { color: rgba(255,255,255,.86); font-size: 12px; font-weight: 500; }
.sip-footer__section a:hover { color: #fff; }
.sip-footer__bottom { background: #f6fbff !important; padding: 14px 0 !important; text-align: center; }
.sip-footer__bottom p { margin: 0; color: #52646a; font-size: 11px; font-weight: 600; }
.sip-footer__legal { color: #52646a; font-size: 11px; font-weight: 600; }

@media (max-width: 767.98px) {
  .footer__area.sip-footer .sip-footer__top {
    padding: 38px 0 28px !important;
  }

  .footer__area.sip-footer .sip-footer__container {
    gap: 22px;
  }

  .footer__area.sip-footer .sip-footer__logo img {
    width: 120px;
  }

  .footer__area.sip-footer .sip-footer__brand p {
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.45;
  }

  .footer__area.sip-footer .sip-footer__grid {
    gap: 18px;
  }

  .footer__area.sip-footer .sip-footer__section h2 {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.25;
  }

  .footer__area.sip-footer .sip-footer__section li + li {
    margin-top: 8px;
  }

  .footer__area.sip-footer .sip-footer__section a {
    font-size: 10px;
    line-height: 1.35;
  }

  .footer__area.sip-footer .sip-footer__bottom {
    padding: 10px 0 !important;
  }

  .footer__area.sip-footer .sip-footer__bottom p,
  .footer__area.sip-footer .sip-footer__legal {
    font-size: 10px;
    line-height: 1.45;
  }
}

@media (max-width: 430px) {
  .footer__area.sip-footer .sip-footer__grid {
    gap: 16px;
  }

  .footer__area.sip-footer .sip-footer__section h2 {
    font-size: 11px;
  }

  .footer__area.sip-footer .sip-footer__section a {
    font-size: 10px;
  }
}

@media (max-width: 1199.98px) {
  .sip-nav { min-height: 76px; }
  .sip-logo img { width: 146px; }
  .sip-header__container { padding-inline: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* Auth reference screens */
/* .sip-auth-page .singUp-area { padding-top: 64px !important; } */
.sip-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  color: var(--sip-ink);
  font-size: 22px;
}
/* Inline back button in the lesson top bar sits in a horizontal flex header —
   drop the stacked-layout bottom margin so it aligns with the logo. */
.sip-lesson-header .sip-back-link {
  margin-bottom: 0;
}
.sip-auth-card__brand { text-align: center; margin-bottom: 26px; }
.sip-auth-card__brand img { width: 190px; max-width: 64%; }
.sip-auth-card__brand p { margin: 12px 0 0; color: #53666c; font-weight: 500; }
.sip-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 8px;
  border-radius: 12px;
  background: #edf3f7;
  margin-bottom: 24px;
}
.sip-auth-tabs a {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #9AA5AA;
  font-size: 20px;
  font-weight: 700;
}
.sip-auth-tabs a.active {
  background: #fff;
  color: #222;
  box-shadow: 0 2px 10px rgba(15, 42, 51, .08);
}
.sip-label-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sip-label-row a { color: #71848a; font-weight: 700; }

/* Home reference */
.sip-hero { background: #153341 !important; }
.sip-hero__slide { min-height: 170px; position: relative; display: flex; align-items: center; background: linear-gradient(110deg, #23365c 0%, #492d51 45%, #df806f 100%); }
.sip-hero__slide .container { position: relative; width: 100%; }
.sip-hero__content { max-width: 640px; padding: 24px 34px; }
.sip-hero__content h1 { color: #fff !important; font-size: clamp(24px, 5vw, 40px); line-height: 1.25; font-weight: 700; margin: 0; }
.sip-eyebrow { color: rgba(255,255,255,.92); font-weight: 700; margin-bottom: 8px; }
.sip-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: rgba(15,42,51,.6); font-size: 44px; line-height: 1; }
.sip-hero__arrow--left { left: 6px; }
.sip-hero__arrow--right { right: 6px; }
.sip-home-feed { padding-top: 24px !important; }
.skill-status h2 { color: #fff !important; font-size: clamp(21px, 5vw, 34px); font-weight: 700; margin: 12px 0 8px; }
.skill-status h2::first-letter { color: var(--sip-coral); }
.sip-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sip-section-heading h2 { margin: 0; color: var(--sip-ink) !important; font-size: clamp(26px, 5vw, 36px); font-weight: 700; }
.sip-chip-link { display: inline-flex; align-items: center; justify-content: center; min-width: 106px; min-height: 38px; padding: 8px 14px; border: 1.5px solid var(--sip-teal); border-radius: 999px; color: var(--sip-teal); font-weight: 700; font-size: 14px; background: #fff; }
.sip-category-tabs { display: flex; gap: 12px; overflow-x: auto; padding: 0 0 18px; margin-bottom: 4px; scrollbar-width: none; }
.sip-category-tabs::-webkit-scrollbar { display: none; }
.sip-category-tabs a { flex: 0 0 auto; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 999px; background: #fff; color: #7a8b91; font-weight: 700; box-shadow: 0 1px 4px rgba(15,42,51,.04); }
.sip-category-tabs a.active { background: var(--sip-coral); color: #fff; }
.sip-course-card { position: relative; padding: 0 !important; }
.sip-course-card .courses__item-thumb { position: relative; }
.sip-card-category { position: absolute; left: 12px; top: 12px; display: inline-flex; border-radius: 999px; padding: 5px 9px; background: #FFF1EC; color: var(--sip-coral); font-size: 11px; font-weight: 700; }
.sip-premium-mark { color: #2e65ff; font-size: 12px; font-weight: 700; }

/* Course detail reference */
.sip-course-detail-page .courses__details-area { padding: 0 0 0 !important; }
.sip-course-detail__media { position: relative; min-height: 286px; background: #667a80; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sip-course-detail__media img { width: 100%; height: 286px; object-fit: cover; opacity: .36; filter: grayscale(.55); }
.sip-floating-back { position: absolute; left: 24px; top: 28px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; color: var(--sip-ink); font-size: 22px; }
.sip-course-detail__summary { padding: 30px 20px 24px; }
.sip-course-detail__summary h1 { font-size: clamp(26px, 5vw, 42px); font-weight: 700; line-height: 1.18; margin: 18px 0 10px; }
.sip-inline-meta { gap: 10px 14px !important; margin-bottom: 14px !important; }
.sip-benefit-list { display: grid; gap: 8px; padding: 0; margin: 14px 0 20px; list-style: none; color: #70858b; font-weight: 600; }
.sip-benefit-list i { color: var(--sip-success); margin-right: 8px; }
.sip-course-actions { display: grid; gap: 12px; margin-top: 16px; }
.sip-detail-section { background: #fff; padding: 28px 0 64px; }
.sip-detail-section > .container { padding-left: 20px; padding-right: 20px; }
.sip-accordion { border-bottom: 1px solid var(--sip-line); padding-bottom: 20px; margin-bottom: 26px; }
.sip-accordion summary { cursor: pointer; color: var(--sip-ink); font-size: 22px; font-weight: 700; list-style: none; }
.sip-accordion summary::-webkit-details-marker { display: none; }
.sip-accordion summary::before { content: ''; display: inline-block; width: 4px; height: 30px; margin-right: 14px; vertical-align: middle; border-radius: 999px; background: var(--sip-ink); }
.sip-accordion p { margin-top: 16px; color: #778a90; font-weight: 500; line-height: 1.7; }
.sip-curriculum__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.sip-curriculum__heading h2 { font-size: 23px; font-weight: 700; margin: 0; }
.sip-curriculum__heading h2::before { content: ''; display: inline-block; width: 4px; height: 30px; margin-right: 14px; vertical-align: middle; border-radius: 999px; background: var(--sip-ink); }
.sip-curriculum__heading strong { color: var(--sip-teal); font-size: 20px; }
.sip-curriculum .lesson-list { margin: 0; padding: 0; }
/* Flex, not a fixed grid: badges are v-if'd, so a row has 4-6 children and any
   fixed track list misplaces the duration/icon on rows that skip a badge. */
.sip-curriculum .course-item { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; padding: 15px 0 !important; }
.sip-curriculum .course-item > i { flex: 0 0 16px; text-align: center; }
.sip-lesson-index { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: #f5f1eb; color: #9ca7aa; font-weight: 700; }
.sip-lesson-title { flex: 1 1 auto; min-width: 0; color: #73868c; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.sip-free-badge { border-radius: 999px; background: #f6f1e8; color: #71848a; padding: 3px 8px; font-size: 12px; font-weight: 700; }
.sip-quiz-badge { border-radius: 999px; background: #fdeee9; color: var(--sip-coral); padding: 3px 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sip-curriculum .fa-play { color: var(--sip-success); }
@media (min-width: 992px) {
  /* Constrain the inner containers, not the summary panel itself — the panel is
     the white background and must stay full-bleed, or it pins left of centre. */
  .sip-course-detail__summary > .container, .sip-detail-section .container { max-width: 860px; }
}

/* Package reference */
.sip-package-title { max-width: 720px; margin-inline: auto; }
.sip-package-title .sub-title { background: var(--sip-teal) !important; color: #fff !important; font-size: 17px !important; padding: 8px 26px !important; }
.sip-package-title .title { font-size: clamp(30px, 6vw, 46px) !important; margin: 14px 0 8px; }
.sip-package-stack { display: grid; gap: 22px; max-width: 720px; margin: 0 auto; }
.sip-package-stack .package-card { position: relative; }
.sip-package-stack .package-card small { color: var(--sip-ink); font-weight: 700; }
.sip-package-stack .package-card > p { color: #819198; font-weight: 500; }
.sip-price-note { margin-top: -18px; color: #71848a !important; font-weight: 700 !important; }
.sip-recommended-ribbon { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); border-radius: 999px; padding: 7px 18px; background: var(--sip-coral); color: #fff; font-weight: 700; white-space: nowrap; }
.package-features .muted { color: #849399; }
.package-features .muted i { color: #6f858b; }

/* Lesson reference */
.sip-lesson-page .lesson__area { padding: 0 !important; }
.sip-learning__topbar { height: 72px; display: flex; align-items: center; padding: 0 24px; background: var(--sip-cream); }
.sip-learning__topbar a { color: var(--sip-ink); font-size: 22px; }
.sip-learning__video { position: relative; min-height: 300px; background: #d7d7d7; display: grid; place-items: center; }
.sip-learning__video video { width: 100%; max-height: 520px; display: block; background: #d7d7d7; }
.sip-learning__video .lesson-placeholder { width: 100%; min-height: 300px !important; }
.sip-video-progress { position: absolute; left: 22px; right: 22px; bottom: 44px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.75); overflow: hidden; }
.sip-video-progress span { display: block; width: 36%; height: 100%; border-radius: inherit; background: #505050; }
.sip-current-lesson { padding: 20px 22px; background: #fff; border-bottom: 8px solid var(--sip-cream); }
.sip-current-lesson h1 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.sip-current-lesson p { margin: 0; color: var(--sip-teal); font-weight: 700; }
.sip-learning__body { background: #fff; padding: 24px 0 72px; }
.sip-learning__body > .container > h2 { font-size: clamp(23px, 5vw, 34px); font-weight: 700; margin-bottom: 16px; }
.sip-learning .lesson-list .course-item { padding: 0 !important; }
.sip-learning .lesson-button { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; width: 100%; padding: 15px 0 !important; border: 0; background: transparent; text-align: left; }
.sip-learning .lesson-button.active { margin: 8px 0; padding: 14px !important; }
.sip-learning .lesson-button:disabled { cursor: not-allowed; opacity: .9; }
.sip-learning .sip-lesson-title small { display: block; margin-top: 4px; color: var(--sip-coral); font-size: 12px; }
.sip-complete { color: var(--sip-success); font-weight: 700; }
.sip-learning-progress { display: grid; gap: 8px; margin-top: 22px; color: #71848a; font-weight: 700; }
@media (min-width: 992px) {
  .sip-learning__body .container, .sip-current-lesson { max-width: 860px; margin-inline: auto; }
}

/* Profile reference */
.sip-profile-card { max-width: 680px; margin: 0 auto; border: 1px solid var(--sip-line); border-radius: 22px; background: #FFFFFF; overflow: hidden; box-shadow: 0 6px 18px rgba(15,42,51,.06); }
.sip-profile-card__hero { text-align: center; padding: 34px 24px; background: linear-gradient(135deg, #fdf9f2, #fff); border-bottom: 1px solid var(--sip-line); }
.sip-profile-card__hero img { width: 112px; height: 112px; border-radius: 999px; object-fit: cover; border: 5px solid #fff; box-shadow: 0 8px 18px rgba(15,42,51,.12); }
.sip-profile-card__hero h1 { margin: 16px 0 4px; font-size: 28px; font-weight: 700; }
.sip-profile-card__hero p { margin: 0; color: #71848a; font-weight: 600; }
.sip-profile-list { display: grid; margin: 0; padding: 0; }
.sip-profile-list div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--sip-line); }
.sip-profile-list dt { color: var(--sip-ink); font-weight: 700; }
.sip-profile-list dd { margin: 0; color: #71848a; font-weight: 600; }
.sip-profile-card .sip-course-actions { padding: 22px; }

/* Mobile overflow guard from smoke pass */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }
.sip-auth-page .container, .sip-auth-page .row, .sip-auth-page [class*="col-"] { min-width: 0; }
.sip-auth-card {
  width: min(100%, 500px);
  max-width: 500px;
  margin-inline: auto;
  overflow: hidden;
}
.sip-auth-card.singUp-wrap { padding: clamp(22px, 4vw, 38px) !important; }
.sip-auth-card .account__form, .sip-auth-card .form-grp, .sip-auth-card input { min-width: 0; max-width: 100%; }
.sip-auth-card .social-auth { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100%; }
.sip-auth-card .social-auth__button { width: 100% !important; min-width: 0 !important; padding-inline: 8px !important; }

@media (max-width: 374.98px) {
  .sip-logo img { width: 104px; }
  .sip-auth-btn { min-width: 76px; min-height: 34px; font-size: 10px; padding-inline: 7px !important; }
  .sip-icon-btn, .sip-menu-btn { width: 38px; height: 38px; min-width: 38px; }
  .sip-menu-btn { width: 36px; height: 36px; min-width: 36px; border-radius: 11px !important; }
  .sip-menu-btn span { width: 16px; height: 2px; }
  .sip-menu-btn span:nth-child(2) { width: 11px; }
  .sip-menu-btn:hover span { width: 16px; }
}

@media (max-width: 430px) {
  .sip-header .sip-logo img { width: 112px; }
  .sip-header .sip-auth-btn { max-width: 88px; min-height: 34px; font-size: 11px; padding-inline: 7px !important; }
  .sip-header .sip-header-actions { gap: 4px; }
}

/* Registration social buttons: brand-accurate stacked CTAs */
.sip-auth-card .social-auth--brand-buttons {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin-bottom: 18px;
}
.sip-auth-card .social-auth--brand-buttons .social-auth__button {
  min-height: 64px;
  width: 100% !important;
  justify-content: flex-start;
  gap: 22px;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 14px 26px !important;
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 12px 26px rgba(15, 42, 51, .08) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.sip-auth-card .social-auth--brand-buttons .social-auth__button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 15px 30px rgba(15, 42, 51, .12) !important;
  filter: brightness(.99);
}
.sip-auth-card .social-auth--brand-buttons .social-auth__button:disabled {
  cursor: not-allowed;
  opacity: .78;
}
.sip-auth-card .social-auth--brand-buttons .social-auth__icon {
  flex: 0 0 38px;
  width: 38px !important;
  height: 38px !important;
  display: grid;
  place-items: center;
  margin: 0 !important;
  border-radius: 999px;
  background: transparent !important;
}
.sip-auth-card .social-auth--brand-buttons .social-auth__icon img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.sip-auth-card .social-auth--brand-buttons .social-auth__label {
  min-width: 0;
  white-space: nowrap;
}
.sip-auth-card .social-auth--brand-buttons .social-auth__icon--facebook {
  background: #fff !important;
}
.sip-auth-card .social-auth--brand-buttons .social-auth__icon--facebook img,
.sip-auth-card .social-auth--brand-buttons .social-auth__icon--line img {
  width: 28px;
  height: 28px;
}
.sip-auth-card .social-auth--brand-buttons .social-auth__icon--google img {
  width: 34px;
  height: 34px;
}
.sip-auth-card .social-auth--brand-buttons .social-auth__button--facebook {
  background: #1877f2 !important;
  color: #fff !important;
}
.sip-auth-card .social-auth--brand-buttons .social-auth__button--google {
  background: #fff !important;
  color: #747775 !important;
  border: 1px solid #eef1f3 !important;
}
.sip-auth-card .social-auth--brand-buttons .social-auth__button--line {
  background: #06c755 !important;
  color: #fff !important;
}
.sip-auth-card .social-auth--brand-buttons .social-auth__button--line .social-auth__icon {
  background: #fff !important;
}
@media (max-width: 374.98px) {
  .sip-auth-card .social-auth--brand-buttons .social-auth__button {
    gap: 12px;
    padding-inline: 14px !important;
    font-size: 15px !important;
  }
}

/* Screenshot matching pass: mobile-first SkillSip flows */
.sip-header__bar { min-height: 86px; }
.sip-nav { min-height: 86px; }
.sip-header__container { max-width: 100%; }
.sip-logo img { width: 158px; }
.sip-btn, .btn, .header-logout { border-radius: 13px !important; }
.sip-btn--outline, .btn-border { border-width: 1.5px !important; }
.sip-btn--primary, .btn-two, .btn:not(.btn-border):not(.sip-btn--outline) { box-shadow: 0 5px 10px rgba(242, 94, 63, .12) !important; }

.sip-flow-section {
  min-height: 52vh;
  padding: 34px 0 96px;
  background: var(--sip-cream);
}
.sip-flow-container {
  max-width: 540px;
}
.sip-flow-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.sip-flow-topbar .sip-back-link,
.sip-edit-profile-page .sip-back-link {
  margin-bottom: 0;
}
.sip-later-link {
  border: 0;
  background: transparent;
  color: var(--sip-coral);
  font-weight: 700;
  font-size: 17px;
  padding: 8px 0;
}
.sip-flow-card {
  width: 100%;
  border: 1px solid rgba(15, 42, 51, .07);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 42, 51, .06);
  padding: 32px;
}
.sip-info-callout {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1.5px solid #ead9bb;
  border-radius: 16px;
  padding: 18px 18px 16px;
  margin-bottom: 26px;
  color: var(--sip-ink);
  background: #fffdf9;
}
.sip-info-callout__icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--sip-teal);
  color: #fff;
  font-size: 14px;
  margin-top: 2px;
}
.sip-info-callout h1 {
  margin: 0 0 4px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
}
.sip-info-callout p {
  margin: 0;
  color: #8a989f;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
.sip-form-stack {
  display: grid;
  gap: 18px;
}
.sip-form-stack .form-grp {
  margin-bottom: 0;
}
.form-grp label {
  color: #242729;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 9px;
}
.form-grp input,
.form-grp textarea,
.form-grp select,
.form-control,
.form-select {
  min-height: 58px;
  border-color: #d8e0e5 !important;
  border-radius: 11px !important;
  color: var(--sip-ink) !important;
  font-size: 16px;
  font-weight: 600;
}
.form-grp input::placeholder,
.form-grp textarea::placeholder {
  color: #cfd4d8;
  font-weight: 600;
}
.sip-flow-actions {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}
.sip-flow-actions .btn,
.sip-save-profile-btn {
  min-height: 56px;
  border-radius: 13px !important;
  font-size: 17px;
  font-weight: 700 !important;
}
.sip-saved-message {
  margin: 16px 0 0;
  text-align: center;
  color: var(--sip-success);
  font-weight: 700;
}

.sip-interest-card {
  padding: 32px;
}
.sip-interest-card__header,
.sip-profile-section-head {
  text-align: center;
  margin-bottom: 26px;
}
.sip-interest-card__header h1,
.sip-profile-section-head h2 {
  margin: 0 0 8px;
  color: var(--sip-ink) !important;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.sip-interest-card__header p,
.sip-profile-section-head p {
  margin: 0 auto 22px;
  max-width: 390px;
  color: #84949a;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}
.sip-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.sip-category-option {
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid #dfe6ea;
  border-radius: 14px;
  background: #fff;
  color: #232628;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.sip-category-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sip-category-option__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f5f8fa;
  color: #91a1aa;
  font-size: 22px;
}
.sip-category-option__icon i,
.sip-category-option__emoji {
  display: inline-block;
  line-height: 1;
}
.sip-category-option__emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.sip-category-option__label {
  color: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.sip-category-option--active {
  border-color: var(--sip-coral);
  box-shadow: 0 0 0 1px rgba(242, 94, 63, .08);
}
.sip-category-option--active .sip-category-option__icon {
  background: #e9eef1;
  color: #000;
}
.sip-category-option:focus-within {
  outline: 3px solid rgba(31, 111, 139, .25);
  outline-offset: 3px;
}

.sip-page-title {
  margin: 18px 0 28px;
  color: #111 !important;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
}
.sip-edit-profile-form {
  display: grid;
  gap: 18px;
}
.sip-avatar-editor {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto -4px;
}
.sip-avatar-editor__halo {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eadfc8;
}
.sip-avatar-editor__halo img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  border-radius: 999px;
}
.sip-avatar-editor__button {
  position: absolute;
  right: 0;
  bottom: 6px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1.5px solid #E8DDC9;
  border-radius: 999px;
  background: #fff;
  color: var(--sip-coral);
  font-size: 17px;
  box-shadow: 0 3px 8px rgba(15, 42, 51, .08);
}
.sip-profile-fields-card,
.sip-profile-interest-card {
  padding: 26px 28px;
}
.sip-profile-section-head {
  text-align: left;
  margin-bottom: 22px;
}
.sip-profile-section-head h2 {
  font-size: 22px;
}
.sip-profile-section-head p {
  margin: 0;
}
.sip-save-profile-btn {
  margin-top: 0;
}

/* Compact onboarding/profile form typography and controls (2 visual steps down). */
.sip-onboarding-page .sip-back-link,
.sip-edit-profile-page .sip-back-link {
  width: 36px;
  height: 36px;
  font-size: 18px;
}
.sip-onboarding-page .sip-later-link {
  font-size: 14px;
}
.sip-onboarding-page .sip-info-callout h1 {
  font-size: 16px;
}
.sip-onboarding-page .sip-info-callout p,
.sip-onboarding-page .sip-interest-card__header p,
.sip-edit-profile-page .sip-profile-section-head p,
.sip-onboarding-page .text-muted,
.sip-edit-profile-page .text-muted,
.sip-edit-profile-page .sip-interests-status,
.sip-onboarding-page .sip-saved-message,
.sip-edit-profile-page .sip-saved-message,
.sip-onboarding-page .api-state,
.sip-edit-profile-page .api-state {
  font-size: 13px;
}
.sip-onboarding-page .form-grp label,
.sip-edit-profile-page .form-grp label,
.sip-onboarding-page .form-grp input,
.sip-edit-profile-page .form-grp input,
.sip-onboarding-page .form-grp textarea,
.sip-edit-profile-page .form-grp textarea,
.sip-onboarding-page .form-grp select,
.sip-edit-profile-page .form-grp select,
.sip-onboarding-page .form-control,
.sip-edit-profile-page .form-control,
.sip-onboarding-page .form-select,
.sip-edit-profile-page .form-select {
  font-size: 14px;
}
.sip-onboarding-page .form-grp input,
.sip-edit-profile-page .form-grp input,
.sip-onboarding-page .form-grp textarea,
.sip-edit-profile-page .form-grp textarea,
.sip-onboarding-page .form-grp select,
.sip-edit-profile-page .form-grp select,
.sip-onboarding-page .form-control,
.sip-edit-profile-page .form-control,
.sip-onboarding-page .form-select,
.sip-edit-profile-page .form-select {
  min-height: 50px;
}
.sip-onboarding-page .sip-flow-actions .btn,
.sip-edit-profile-page .sip-save-profile-btn {
  min-height: 48px;
  border-radius: 11px !important;
  font-size: 14px;
  padding: 8px 16px !important;
}
.sip-onboarding-page .sip-interest-card__header h1,
.sip-edit-profile-page .sip-page-title,
.sip-edit-profile-page .sip-profile-section-head h2 {
  font-size: 18px;
}
.sip-onboarding-page .status-chip,
.sip-edit-profile-page .status-chip {
  font-size: 11px !important;
  padding: 4px 10px !important;
}
.sip-onboarding-page .sip-category-option,
.sip-edit-profile-page .sip-category-option {
  min-height: 72px;
  gap: 10px;
  padding: 12px;
}
.sip-onboarding-page .sip-category-option__icon,
.sip-edit-profile-page .sip-category-option__icon {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  font-size: 18px;
}
.sip-onboarding-page .sip-category-option__label,
.sip-edit-profile-page .sip-category-option__label {
  font-size: 13px;
}
.sip-edit-profile-page .sip-avatar-editor__button {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

/* Mobile drawer: right-side panel matching the supplied menu references */
.tgmobile__menu-box.sip-mobile-menu__panel {
  left: auto !important;
  right: 0 !important;
  width: min(87.5vw, 344px) !important;
  max-width: none !important;
  height: 100vh !important;
  padding: 34px 18px 22px !important;
  overflow-y: auto;
  transform: translateX(101%);
  transition: transform .28s ease;
}
.mobile-menu-visible .tgmobile__menu-box.sip-mobile-menu__panel {
  transform: translateX(0);
}
.sip-mobile-menu__logo {
  margin-bottom: 20px !important;
}
.sip-mobile-menu__logo img {
  width: 132px !important;
}
.sip-mobile-menu__close {
  top: 36px !important;
  right: 18px !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  color: #000 !important;
  position: relative !important;
}
.sip-mobile-menu__close::before,
.sip-mobile-menu__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 21px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}
.sip-mobile-menu__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.sip-mobile-menu__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.sip-mobile-menu__auth {
  gap: 10px;
  margin: 22px 0 52px;
}
.sip-mobile-menu__auth .sip-btn {
  min-height: 46px;
  border-radius: 12px !important;
  font-size: 14px;
}
.sip-mobile-menu__links .navigation {
  gap: 14px !important;
}
.sip-mobile-menu__links .navigation li > a {
  gap: 12px;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: -.02em;
}
.sip-mobile-menu__links .navigation i {
  width: 20px;
  color: #63747a;
  font-size: 14px;
}
.sip-mobile-menu__divider {
  height: 1px;
  background: #ded2bc;
  margin: 2px 0 1px;
}
.sip-mobile-menu__member {
  margin: 10px 0 26px;
  text-align: center;
}
.sip-member-profile {
  display: grid;
  justify-items: center;
  color: #111;
}
.sip-member-profile__avatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  margin-bottom: 12px;
}
.sip-member-profile__avatar img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  border-radius: 999px;
}
.sip-member-profile__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #080808;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}
.sip-member-profile__name i {
  color: #617b99;
  font-size: 13px;
}
.sip-member-profile__plan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff4ed;
  color: var(--sip-coral);
  font-size: 12px;
  font-weight: 700;
}
.sip-member-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 12px 0 0;
  padding: 14px 8px;
  border-radius: 12px;
  background: #fff;
}
.sip-member-stats div {
  text-align: center;
}
.sip-member-stats dt {
  color: var(--sip-teal);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.sip-member-stats dd {
  margin: 3px 0 0;
  color: var(--sip-teal);
  font-size: 11px;
  font-weight: 500;
}
.sip-mobile-menu__logout {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  width: 100%;
  min-height: 38px;
  border-radius: 0;
  color: #ed4252;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}
.sip-mobile-menu__logout::before {
  content: '\f2f5';
  font-family: 'Font Awesome 5 Free';
  font-weight: 800;
  font-size: 14px;
}

/* Home/course proportions from mobile references */
.sip-home-feed .container { max-width: 540px; }
.sip-home-feed { padding-top: 22px !important; }
.skill-status {
  border-radius: 11px !important;
  padding: 20px 18px 16px !important;
  text-align: center;
}
.skill-status h2 {
  font-size: 21px !important;
  line-height: 1.35;
}
.skill-status .btn {
  min-height: 44px;
  border-radius: 8px !important;
}
.sip-section-heading h2 {
  font-size: 25px !important;
  line-height: 1.1;
}
.sip-section-heading p {
  font-size: 12px;
}
.sip-chip-link {
  min-width: 96px;
  min-height: 36px;
  border-radius: 9px;
}
.sip-course-row {
  row-gap: 18px;
}
.sip-course-card {
  border-radius: 11px !important;
  border-color: transparent !important;
  background: transparent !important;
}
.sip-course-card--premium,
.sip-course-card:hover {
  border-color: var(--sip-coral) !important;
  box-shadow: 0 0 0 2px rgba(242, 94, 63, .15), 0 8px 18px rgba(15, 42, 51, .08) !important;
}
.sip-course-card .courses__item-thumb {
  min-height: 182px;
  border-radius: 9px !important;
}
.sip-course-card .courses__item-thumb img {
  min-height: 182px;
}
.sip-course-card .courses__item-content {
  padding: 10px 0 8px !important;
}
.sip-card-category {
  left: 10px;
  top: 10px;
  padding: 4px 9px;
  font-size: 10px;
}

@media (min-width: 768px) {
  .sip-flow-container { max-width: 640px; }
  .sip-flow-card { border-radius: 22px; }
  .sip-home-feed .container { max-width: 1180px; }
}

@media (max-width: 430px) {
  .sip-header .sip-logo img { width: 114px; }
  .sip-header .sip-auth-btn { max-width: none; min-width: 104px; min-height: 40px; font-size: 13px; padding-inline: 14px !important; }
  .sip-header .sip-header-actions { gap: 6px; }
}

@media (max-width: 390px) {
  .sip-header .sip-logo img { width: 100px; }
  .sip-header .sip-auth-btn { min-width: 88px; min-height: 36px; font-size: 12px; padding-inline: 10px !important; }
  .sip-flow-container { padding-left: 18px !important; padding-right: 18px !important; }
  .sip-flow-card { padding: 24px; }
  .sip-category-option { min-height: 76px; padding: 12px 10px; }
  .sip-category-option__icon { width: 42px; height: 42px; flex-basis: 42px; font-size: 19px; }
  .sip-category-option__label { font-size: 13px; }
}

/* Shared fallback avatar mark from the reference UI */
.sip-droplet-avatar {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 58% 58% 58% 10% / 58% 58% 58% 10%;
  background: linear-gradient(180deg, #fb7659 0%, #ef6a4f 100%);
  color: #fff;
  transform: rotate(-45deg);
}
.sip-droplet-avatar i {
  transform: rotate(45deg);
  font-size: 14px;
}
.sip-member-profile__avatar .sip-droplet-avatar {
  width: 74px;
  height: 74px;
}
.sip-member-profile__avatar .sip-droplet-avatar i {
  font-size: 14px;
}

/* Purchase flow reference (screens 10-13): course pricing, enrolled state, packages */
.sip-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.sip-price strong { color: var(--sip-coral); font-size: 30px; font-weight: 700; line-height: 1; }
.sip-price s { color: #9aa9af; font-size: 16px; font-weight: 600; }
.sip-price .sip-premium-mark { font-size: 14px; }
.sip-price--center { justify-content: center; }
.sip-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.sip-course-detail .courses__item-tag span {
  background: var(--sip-teal) !important;
  color: #fff !important;
}
.sip-course-detail__media--photo { background: #23323a; }
.sip-course-detail__media--photo img { opacity: 1; filter: none; }
.sip-course-actions .btn, .sip-bottom-cta .btn { min-height: 54px; font-size: 17px; }
.sip-enrolled-banner {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 12px;
  background: #def4e6;
  color: #1f8e57;
  font-size: 17px;
  font-weight: 700;
}
.sip-course-actions .btn.sip-btn--success {
  background: #3AA76D !important;
  border-color: #3AA76D !important;
  color: #fff !important;
  box-shadow: 0 5px 10px rgba(29, 166, 115, .16) !important;
}
.sip-course-actions .btn.sip-btn--success:hover { background: #2E8C5D !important; border-color: #2E8C5D !important; }
.sip-progress-percent { color: var(--sip-ink); font-size: 22px; }
.sip-progress-note { margin: -4px 0 10px; color: #8a989f; font-size: 14px; font-weight: 600; }
.sip-free-badge { background: #e4f3ee; color: #2f9d85; }
.sip-curriculum .fa-lock { color: #b9c4c8; font-size: 14px; }
.sip-bottom-cta { display: grid; gap: 12px; margin-top: 36px; }
.sip-bottom-cta .sip-price { margin-bottom: 4px; }
.sip-course-detail .btn-border,
.sip-packages-page .btn-border {
  color: var(--sip-coral) !important;
  border-color: var(--sip-coral) !important;
}
.package-card p.sip-price-prefix { margin: 2px 0 0; color: #8a989f; font-size: 14px; font-weight: 600; }
.package-card h2 small { color: #8a989f; font-size: 16px; font-weight: 600; }
.package-features .muted i { color: var(--sip-coral); }

/* Continue pass: member home tab strip + mobile catalog pagination */
.sip-member-category-strip {
  background: #fff;
  border-top: 1px solid rgba(15, 42, 51, .04);
  border-bottom: 1px solid rgba(15, 42, 51, .06);
}
.sip-member-category-strip .container {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.sip-member-category-strip .container::-webkit-scrollbar { display: none; }
.sip-member-category-strip a {
  flex: 0 0 auto;
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 17px;
  border-radius: 8px;
  background: #f8f5ef;
  color: #8a9498;
  font-size: 13px;
  font-weight: 700;
}
.sip-member-category-strip a.active,
.sip-member-category-strip a.router-link-exact-active {
  background: var(--sip-coral);
  color: #fff;
}
.sip-card-price {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.sip-card-price small {
  color: #9b9b9b;
  font-size: 11px;
  font-weight: 600;
  text-decoration: line-through;
}
.sip-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 34px 0 8px;
}
.sip-pagination a,
.sip-pagination span {
  min-width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #1e2e33;
  font-size: 13px;
  font-weight: 700;
}
.sip-pagination a.active {
  background: var(--sip-coral);
  color: #fff;
}
.sip-pagination a:first-child,
.sip-pagination a:last-child {
  color: #879095;
  font-size: 22px;
  font-weight: 500;
}
.sip-pagination .sip-pagination__arrow {
  color: #879095;
  font-size: 22px;
  font-weight: 500;
}
.sip-pagination .sip-pagination__arrow--disabled {
  cursor: not-allowed;
  opacity: .45;
}

/* Next screenshot set: course detail + package selection fidelity */
.sip-course-detail-page .courses__details-area {
  background: #f7f9fb;
}
.sip-course-detail__media {
  min-height: 184px;
  height: 184px;
  background: #5f7379;
}
.sip-course-detail__media img {
  height: 184px;
  max-height: none;
  opacity: .38;
  filter: grayscale(.45);
}
.sip-course-detail__media--photo,
.sip-course-detail--premium .sip-course-detail__media--photo {
  background: #17252b;
}
.sip-course-detail__media--photo img,
.sip-course-detail--premium .sip-course-detail__media--photo img {
  height: 184px;
  opacity: 1;
  filter: none;
}
.sip-media-placeholder {
  width: 88px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(15, 42, 51, .12);
  color: rgba(255, 255, 255, .12);
  font-size: 48px;
}
.sip-floating-back {
  left: 16px;
  top: 18px;
  color: #15272d;
  background: transparent;
}
.sip-course-detail__summary {
  background: #fff;
}
.sip-course-detail__summary .courses__item-tag,
.sip-course-detail__summary > .courses__item-tag {
  display: inline-flex;
  margin-bottom: 15px;
}
.sip-course-detail .courses__item-tag span {
  background: #FFF1EC !important;
  color: var(--sip-coral) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.sip-price-row .courses__item-tag {
  margin: 0;
}
.sip-course-detail__summary h1 {
  margin: 0 0 8px;
  color: var(--sip-ink) !important;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.sip-course-detail__summary .sip-inline-meta,
.sip-detail-section .sip-inline-meta {
  gap: 8px 12px !important;
  padding-bottom: 0;
  margin-bottom: 11px !important;
}
.sip-course-detail__summary .sip-inline-meta li,
.sip-detail-section .sip-inline-meta li {
  color: #87979d !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.sip-course-detail__summary .sip-inline-meta i,
.sip-detail-section .sip-inline-meta i {
  color: var(--sip-coral) !important;
}
.sip-benefit-list {
  gap: 8px;
  margin: 10px 0 17px;
  color: #82939a;
  font-size: 14px;
  font-weight: 700;
}
.sip-benefit-list i {
  color: #6FCF97;
}
.sip-course-actions {
  gap: 8px;
  margin-top: 14px;
}
.sip-course-detail--free .sip-course-actions:has(.sip-enrolled-banner) {
  gap: 8px;
  padding: 14px;
  border: 1.5px solid #20d697;
  border-radius: 14px;
  background: #edfff7;
}
.sip-course-detail--free .sip-course-actions .sip-enrolled-banner {
  min-height: 28px;
  background: transparent;
  color: #168c65;
  font-size: 15px;
}
.sip-course-actions .btn,
.sip-bottom-cta .btn {
  min-height: 44px;
  border-radius: 7px !important;
  font-size: 15px;
}
.sip-course-actions .btn.sip-btn--success {
  background: #18c987 !important;
  border-color: #18c987 !important;
}
.sip-course-actions .btn.sip-btn--premium,
.sip-bottom-cta .btn.sip-btn--premium {
  background: #5e75e8 !important;
  border-color: #5e75e8 !important;
  box-shadow: 0 7px 15px rgba(94, 117, 232, .22) !important;
}
.sip-price strong {
  color: var(--sip-coral);
  font-size: 22px;
}
.sip-price s {
  font-size: 13px;
}
.sip-price .sip-premium-mark {
  color: #6381ef;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.sip-detail-section {
  margin-top: 8px;
  padding: 0 0 0;
  background: #fff;
  border-top: 1px solid #f1eee8;
}
.sip-detail-section > .container {
  padding-top: 22px;
  padding-bottom: 0;
}
.sip-accordion {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E8DDC9 !important;
}
.sip-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 19px;
}
.sip-accordion summary::before {
  width: 4px;
  height: 28px;
  margin-right: 10px;
  background: var(--sip-ink);
}
.sip-accordion summary::after {
  content: '\f106';
  font-family: 'Font Awesome 5 Free';
  font-weight: 800;
  margin-left: auto;
  color: var(--sip-ink);
  font-size: 12px;
}
.sip-accordion p {
  margin-top: 10px;
  color: #82939a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}
.sip-curriculum__heading {
  align-items: start;
  margin-bottom: 3px;
}
.sip-curriculum__heading h2 {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  line-height: 1.2;
}
.sip-curriculum__heading h2::before {
  width: 4px;
  height: 40px;
  margin-right: 11px;
}
.sip-curriculum__heading strong {
  color: var(--sip-teal);
  font-size: 17px;
  font-weight: 700;
  padding-top: 4px;
}
.sip-progress-percent {
  min-width: 48px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #f3f6f8;
  color: #8c9aa0 !important;
  font-size: 17px !important;
}
.sip-progress-note {
  margin: -8px 0 14px 15px;
  color: #8fa0a7;
  font-size: 12px;
}
.sip-curriculum .course-item {
  gap: 8px;
  padding: 13px 0 !important;
  border-bottom-color: #E8DDC9 !important;
}
.sip-lesson-index {
  width: 22px;
  height: 22px;
  background: #f6f2ec;
  color: #9da9ae;
  font-size: 12px;
}
.sip-lesson-title {
  color: #8a989f;
  font-size: 13px;
  font-weight: 700;
}
.sip-free-badge {
  padding: 2px 6px;
  background: #edf1ee;
  color: #6d7d83;
  font-size: 11px;
}
.sip-curriculum .item-meta {
  flex: 0 0 auto;
  margin-left: auto;
  color: #87979d;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.sip-curriculum .fa-play {
  color: #6FCF97;
  font-size: 14px;
}
.sip-curriculum .fa-lock {
  color: #718188;
  font-size: 12px;
}
.sip-attachment-note {
  flex: 1 0 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: -3px 0 0 30px;
  color: var(--sip-coral);
  font-size: 12px;
  font-weight: 700;
}
.sip-attachment-note i { color: var(--sip-coral); }
.sip-curriculum .fa-check-circle { color: #6FCF97; font-size: 15px; }
.sip-lesson--clickable { cursor: pointer; }
.sip-lesson--clickable:hover .sip-lesson-title { color: #0F2A33; }
.sip-lesson--clickable:focus-visible {
  outline: 2px solid #6FCF97;
  outline-offset: 2px;
  border-radius: 6px;
}
.sip-lesson--done .sip-lesson-title { color: #5b6b71; }
.sip-bottom-cta {
  margin: 42px -18px 0;
  padding: 27px 18px 28px;
  border-top: 1px solid #e8edf0;
  background: #fff;
}
.sip-bottom-cta .sip-price strong {
  color: #111;
  font-size: 23px;
}
.sip-bottom-cta .btn {
  min-height: 48px;
  border-radius: 7px !important;
}

.sip-packages-page .pricing__area {
  background: var(--sip-cream) !important;
  padding-top: 24px !important;
}
.sip-package-title {
  margin-bottom: 24px !important;
}
.sip-package-title .sub-title {
  min-width: 220px;
  background: var(--sip-teal) !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 7px 22px !important;
}
.sip-package-title .title {
  font-size: 25px !important;
  line-height: 1.2 !important;
  margin: 12px 0 6px;
}
.sip-package-title p {
  color: #8b9aa0 !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.sip-package-stack {
  max-width: 100%;
  gap: 22px;
}
.sip-package-stack .package-card {
  border: 1px solid #E8DDC9 !important;
  border-radius: 12px !important;
  padding: 24px 24px 23px !important;
  background: #FFFFFF !important;
}
.sip-package-stack .package-card.recommended {
  border-color: var(--sip-coral) !important;
  box-shadow: 0 0 0 1px rgba(242, 94, 63, .12) !important;
}
.sip-package-stack .package-card small {
  color: var(--sip-ink);
  font-size: 12px;
  font-weight: 700;
}
.sip-package-stack .package-card h3 {
  margin: 4px 0 3px;
  color: var(--sip-coral) !important;
  font-size: 25px !important;
  line-height: 1.15;
}
.sip-package-stack .package-card > p {
  margin: 0 0 13px;
  color: #87979d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.package-card p.sip-price-prefix {
  margin: 0 0 4px;
  font-size: 11px;
}
.sip-package-stack .package-card h2 {
  margin: 0 0 18px;
  color: var(--sip-coral) !important;
  font-size: 31px !important;
  line-height: 1;
}
.package-card h2 small {
  color: var(--sip-ink);
  font-size: 13px;
}
.sip-price-note {
  margin-top: -12px !important;
  margin-bottom: 15px !important;
  font-size: 12px !important;
}
.package-features {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  padding-top: 14px;
  border-top-color: #e6dcca;
}
.package-features li {
  display: flex;
  align-items: start;
  gap: 9px;
  color: #83939a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.package-features i {
  color: #6FCF97;
  margin-top: 2px;
}
.package-features .muted i {
  color: #738289;
}
.sip-package-stack .package-card .btn {
  min-height: 43px;
  border-radius: 7px !important;
  font-size: 16px;
}
.sip-recommended-ribbon {
  top: -12px;
  padding: 5px 15px;
  font-size: 12px;
}

@media (min-width: 768px) {
  .sip-course-detail__media,
  .sip-course-detail__media img,
  .sip-course-detail__media--photo img { height: 300px; min-height: 300px; }
  .sip-media-placeholder { width: 120px; height: 96px; font-size: 64px; }
  .sip-course-detail__summary,
  .sip-detail-section .container { max-width: 760px; }
}

/* Order summary and payment history screens (14-17) */
.sip-checkout-page,
.sip-payments-page {
  background: var(--sip-cream);
}
.sip-order-section,
.sip-payments-section {
  padding: 38px 0 76px;
  background: var(--sip-cream);
}
.sip-order-container,
.sip-payments-container {
  max-width: 540px;
}
.sip-order-container > .sip-back-link,
.sip-payments-container > .sip-back-link {
  margin: 0 0 34px;
}
.sip-order-card {
  border: 1px solid rgba(15, 42, 51, .07);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 42, 51, .06);
  padding: 38px 40px 40px;
}
.sip-order-card h1 {
  margin: 0 0 26px;
  color: var(--sip-ink) !important;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.25;
}
.sip-order-card h1.sip-order-title--accent {
  color: var(--sip-coral) !important;
}
.sip-order-plan-card {
  border: 1.5px solid #E8DDC9;
  border-radius: 16px;
  background: #fffdf9;
  padding: 21px 30px 19px;
  margin-bottom: 28px;
}
.sip-order-plan-card small {
  color: var(--sip-ink);
  font-size: 16px;
  font-weight: 700;
}
.sip-order-plan-card h2 {
  margin: 5px 0 3px;
  color: var(--sip-coral) !important;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
}
.sip-order-plan-card p {
  margin: 0;
  color: #819198;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
}
.sip-order-course-card {
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid #E8DDC9;
}
.sip-order-course-card__thumb {
  position: relative;
  min-height: 242px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: #60777f;
  margin-bottom: 22px;
}
.sip-order-course-card__thumb img {
  width: 100%;
  height: 242px;
  object-fit: cover;
  opacity: .44;
  filter: grayscale(.4);
}
.sip-order-course-card__thumb .sip-media-placeholder {
  color: rgba(255,255,255,.11);
}
.sip-order-course-card__thumb .sip-card-category {
  left: 13px;
  top: 12px;
  font-size: 13px;
  padding: 7px 14px;
  background: var(--sip-coral);
  color: #fff;
}
.sip-order-course-card h2 {
  margin: 0 0 9px;
  color: var(--sip-ink) !important;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sip-order-course-meta {
  gap: 15px !important;
  margin-bottom: 17px !important;
}
.sip-order-course-meta li {
  color: #71848a !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}
.sip-order-course-meta i {
  color: #71848a !important;
  font-size: 18px;
}
.sip-order-course-meta .avg-rating i {
  color: #F4B860 !important;
}
.sip-order-course-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}
.sip-order-course-price strong {
  color: var(--sip-coral);
  font-size: 26px;
  font-weight: 700;
}
.sip-order-course-price s {
  color: #8e9aa0;
  font-size: 18px;
  font-weight: 600;
}
.sip-order-totals {
  display: grid;
  gap: 18px;
  margin: 0;
}
.sip-order-totals div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 18px;
}
.sip-order-totals dt,
.sip-order-totals dd {
  margin: 0;
  color: #101010;
  line-height: 1.2;
}
.sip-order-totals dt {
  font-size: 18px;
  font-weight: 500;
}
.sip-order-totals dd {
  font-size: 26px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.sip-order-totals dd span {
  margin-left: 9px;
  font-size: 16px;
  font-weight: 500;
}
.sip-order-totals--grand {
  margin-top: 25px;
}
.sip-order-totals--grand dt,
.sip-order-totals--grand dd {
  font-weight: 700;
}
.sip-coupon-row {
  margin: 7px 0 28px;
}
.sip-coupon-field {
  width: 210px;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #dbe2e6;
  border-radius: 12px;
  background: #fff;
  padding: 0 11px 0 18px;
}
.sip-coupon-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 18px;
  font-weight: 700;
  outline: 0;
}
.sip-coupon-field input::placeholder {
  color: #d3d7db;
  font-weight: 600;
}
.sip-coupon-field button {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
.sip-pay-button {
  min-height: 70px;
  margin-top: 36px;
  border-radius: 12px !important;
  font-size: 25px;
  font-weight: 700 !important;
}
.sip-checkout-result {
  margin-bottom: 16px;
  color: var(--sip-success) !important;
}

.sip-payments-container h1 {
  margin: 0 0 27px;
  color: #111 !important;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.25;
}
.sip-payment-list {
  display: grid;
  gap: 27px;
}
.sip-payment-card {
  border: 1.5px solid #E8DDC9;
  border-radius: 14px;
  background: #fffdf9;
  padding: 20px 18px 18px;
}
.sip-payment-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.sip-payment-card dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}
.sip-payment-card dt,
.sip-payment-card dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}
.sip-payment-card dt {
  color: #5A6E76;
  font-weight: 600;
}
.sip-payment-card dd {
  color: var(--sip-ink);
  font-weight: 700;
  text-align: right;
}
.sip-payment-card dl div:last-child {
  margin-top: 5px;
}
.sip-payment-card__amount {
  color: var(--sip-ink) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

@media (max-width: 430px) {
  .sip-order-container,
  .sip-payments-container { padding-left: 24px !important; padding-right: 24px !important; }
  .sip-order-card { padding: 32px 30px 34px; }
  .sip-order-plan-card { padding: 18px 22px; }
  .sip-order-plan-card h2 { font-size: 28px; }
  .sip-order-plan-card p { font-size: 16px; }
  .sip-order-totals dt { font-size: 16px; }
  .sip-order-totals dd { font-size: 23px; }
  .sip-order-totals dd span { font-size: 14px; }
  .sip-coupon-field { width: 170px; min-height: 52px; }
  .sip-pay-button { min-height: 60px; font-size: 21px; }
  .sip-order-course-card__thumb { min-height: 206px; }
  .sip-order-course-card__thumb img { height: 206px; }
  .sip-order-course-card h2 { font-size: 20px; }
  .sip-order-course-meta li { font-size: 14px !important; }
  .sip-order-course-price strong { font-size: 23px; }
  .sip-order-course-price s { font-size: 16px; }
  .sip-payment-card dt,
  .sip-payment-card dd { font-size: 14px; }
}

/* Learning/certification/notifications screens (18-22) */
.sip-my-courses-page,
.sip-certificates-page,
.sip-certificate-detail-page,
.sip-notifications-page {
  background: var(--sip-cream);
}
.sip-my-courses-section,
.sip-certificate-section,
.sip-notifications-section {
  padding: 28px 0 78px;
  background: var(--sip-cream);
}
.sip-my-courses-container > .sip-back-link,
.sip-certificate-container > .sip-back-link,
.sip-notifications-container > .sip-back-link {
  margin: 0 0 22px;
}
.sip-my-courses-container h1,
.sip-certificate-container > h1 {
  margin: 0;
  color: #111 !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.sip-course-filter-tabs {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  margin: 15px 0 16px;
  scrollbar-width: none;
}
.sip-course-filter-tabs::-webkit-scrollbar { display: none; }
.sip-course-filter-tabs button {
  min-height: 39px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #141414;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
}
.sip-course-filter-tabs button.active {
  background: var(--sip-coral);
  color: #fff;
}
.sip-course-filter-tabs span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 4px;
  border-radius: 999px;
  background: #fff;
  color: var(--sip-coral);
  font-size: 11px;
}
.sip-my-course-list {
  display: grid;
  gap: 16px;
}

@media (min-width: 992px) {
  .sip-my-course-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.sip-my-course-card {
  overflow: hidden;
  border: 1px solid #E8DDC9;
  border-radius: 10px;
  background: #FFFFFF;
}
.sip-my-course-card.is-completed {
  border-color: #6FCF97;
  background: #eaffef;
}
.sip-my-course-card__thumb {
  display: grid;
  min-height: 165px;
  height: 165px;
  place-items: center;
  overflow: hidden;
  background: #60777f;
}
.sip-my-course-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sip-my-course-card__body {
  padding: 10px 14px 12px;
}
.sip-my-course-card__meta-row,
.sip-my-course-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.sip-my-course-card__meta-row .sip-card-category {
  position: static;
  background: var(--sip-coral);
  color: #fff;
  font-size: 10px;
  padding: 4px 9px;
}
.sip-my-course-rating {
  color: #7d8c92;
  font-size: 11px;
  font-weight: 700;
}
.sip-my-course-rating i { color: #F4B860; }
.sip-my-course-card h2 {
  margin: 8px 0 10px;
  color: var(--sip-ink) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.sip-my-course-card h2 a { color: inherit; }
.sip-my-course-card p {
  margin: 0 0 5px;
  color: #83949b;
  font-size: 12px;
  font-weight: 600;
}
.sip-my-course-card__progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe2e6;
}
.sip-my-course-card__progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #6FCF97;
}
.sip-my-course-card__footer strong {
  color: #73858c;
  font-size: 13px;
  font-weight: 700;
}
.sip-round-play {
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #18c987;
  color: #fff !important;
  font-size: 20px;
}
.sip-round-play i.fa-play { margin-left: 3px; }
.sip-round-play--complete {
  background: #fff8e6;
  color: #F4B860 !important;
}

/* Lesson video screen */
.sip-learning__topbar {
  height: 72px;
  padding: 0 18px;
  background: var(--sip-cream);
}
.sip-learning__topbar a {
  color: var(--sip-ink);
  font-size: 21px;
}
.sip-learning__video {
  min-height: 215px;
  background: #d9d9d9;
}
.sip-learning__video video,
.sip-learning__video .lesson-placeholder {
  min-height: 215px !important;
}
.sip-learning__video .lesson-placeholder::before {
  width: 78px;
  height: 78px;
  background: #202020;
  font-size: 36px;
}
.sip-video-progress {
  left: 22px;
  right: 22px;
  bottom: 28px;
  height: 4px;
  background: rgba(255,255,255,.85);
}
.sip-video-progress span {
  width: 36%;
  background: #4b4b4b;
}
.sip-current-lesson {
  padding: 18px 20px;
  border-bottom: 8px solid var(--sip-cream);
}
.sip-current-lesson h1 {
  font-size: 16px;
  line-height: 1.3;
}
.sip-current-lesson p {
  color: var(--sip-teal);
  font-size: 13px;
}
.sip-learning__body {
  padding: 26px 0 76px;
  background: #fff;
}
.sip-learning__body .container { max-width: 540px; }
.sip-learning__body > .container > h2 {
  margin-bottom: 15px;
  font-size: 21px;
  line-height: 1.25;
}
.sip-learning .sip-course-actions {
  margin-bottom: 25px;
}
.sip-learning .sip-course-actions .btn {
  min-height: 46px;
  border-radius: 7px !important;
}
.sip-learning .sip-accordion {
  border: 0 !important;
  margin-bottom: 22px;
  padding-bottom: 0;
}
.sip-learning .sip-accordion summary {
  font-size: 18px;
}
.sip-learning .sip-accordion p {
  display: none;
}
.sip-learning .lesson-button.active {
  border: 1px solid #E8DDC9 !important;
  background: #fffbf3 !important;
  border-radius: 8px;
}
.sip-learning .lesson-button.active .sip-lesson-index {
  background: #fff;
  color: var(--sip-coral);
}
.sip-learning .lesson-button.active .sip-lesson-title {
  color: var(--sip-ink);
}
.sip-learning .sip-lesson-title small {
  color: var(--sip-coral);
  font-size: 12px;
  font-weight: 700;
}
.sip-learning-progress { display: none; }

/* Certificate list/detail */
.sip-certificate-container > h1 {
  margin-bottom: 30px;
  font-size: 25px;
}
.sip-certificate-list {
  display: grid;
  gap: 16px;
  min-height: 420px;
}
.sip-certificate-tile {
  min-height: 154px;
  display: grid;
  align-content: center;
  justify-items: start;
  border: 1.5px solid #E8DDC9;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15,42,51,.05);
  padding: 25px;
}
.sip-certificate-tile i {
  color: var(--sip-teal);
  font-size: 50px;
  margin-bottom: 10px;
}
.sip-certificate-tile span {
  color: var(--sip-teal);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
}
.sip-certificate-tile strong {
  margin-top: 8px;
  color: var(--sip-coral);
  font-size: 16px;
  font-weight: 700;
}
.sip-certificate-preview {
  border-radius: 13px;
  background: #fff;
  padding: 18px 20px 22px;
  margin-bottom: 24px;
}
.sip-certificate-preview__image {
  min-height: 285px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fdfdfd;
  box-shadow: inset 0 0 12px rgba(15,42,51,.04);
  margin-bottom: 20px;
}
.sip-certificate-preview__image .sip-media-placeholder {
  background: #dadada;
  color: #fff;
  width: 172px;
  height: 138px;
  font-size: 96px;
}
.sip-certificate-preview p {
  margin: 0;
  text-align: center;
  color: #252525;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}
.sip-certificate-preview strong {
  font-weight: 700;
}
.sip-about-course-title {
  margin: 0 0 16px;
  color: #111 !important;
  font-size: 22px;
  font-weight: 500;
}
.sip-certificate-course-card {
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 4px;
}
.sip-certificate-course-card__thumb {
  height: 267px;
  background: #d7d7d7;
}
.sip-certificate-course-card__thumb img {
  width: 100%;
  height: 267px;
  object-fit: cover;
  opacity: .45;
  filter: grayscale(.5);
}
.sip-certificate-course-card__body {
  padding: 28px 24px 20px;
}
.sip-certificate-course-card .sip-price strong {
  font-size: 27px;
}
.sip-certificate-course-card h3 {
  margin: 28px 0 12px;
  color: var(--sip-ink) !important;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.sip-certificate-course-card .courses__item-tag span {
  background: #FFF1EC !important;
  color: var(--sip-coral) !important;
  border-radius: 999px !important;
}

/* Notifications */
.sip-notifications-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 29px 0 24px;
  border-bottom: 1px solid #dedede;
  padding-bottom: 30px;
}
.sip-notifications-head .account-list-page__title {
  margin: 0;
  border-bottom: 0;
  padding-bottom: 0;
}
.sip-notifications-head button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #6f8087;
  font-size: 14px;
  font-weight: 700;
}
.sip-notification-list {
  display: grid;
  gap: 12px;
}
.sip-notification-card {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  border: 1.5px solid transparent;
  border-radius: 13px;
  background: #fff;
  padding: 17px 17px;
}
.sip-notification-card.unread {
  border-color: var(--sip-coral);
}
.sip-notification-card__icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #faf6f0;
  color: #657981;
  font-size: 19px;
}
.sip-notification-card.unread .sip-notification-card__icon {
  color: var(--sip-coral);
}
.sip-notification-card h2,
.sip-notification-card p {
  margin: 0;
  color: var(--sip-ink) !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}
.sip-notification-card p {
  margin-top: 2px;
}
.sip-notification-card time {
  display: block;
  margin-top: 9px;
  color: #75878e;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 430px) {
  .sip-course-filter-tabs button { padding-inline: 14px; font-size: 12px; }
  .sip-my-course-card__thumb,
  .sip-my-course-card__thumb img { min-height: 154px; height: 154px; }
  .sip-notification-card { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .sip-notification-card__icon { width: 48px; height: 48px; }
  .sip-notification-card h2,
  .sip-notification-card p { font-size: 15px; }
}

@media (max-width: 390px) {
  .sip-header__container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .sip-header .sip-logo img {
    width: 78px;
  }

  .sip-header .sip-auth-btn {
    min-width: 84px;
    min-height: 36px;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 12px;
  }
}

/* Social image buttons sourced from public/assets/img/social. */
.sip-auth-card .social-auth--asset-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 15px !important;
}

.sip-auth-card .social-auth--asset-buttons .social-auth__button {
  min-height: 0;
  overflow: hidden;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sip-auth-card .social-auth--asset-buttons .social-auth__button--google { order: 1; }
.sip-auth-card .social-auth--asset-buttons .social-auth__button--facebook { order: 2; }
.sip-auth-card .social-auth--asset-buttons .social-auth__button--line { order: 3; }

.sip-auth-card .social-auth--asset-buttons .social-auth__asset {
  width: 100% !important;
  height: auto !important;
  flex: 1 1 auto;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: transparent !important;
}

.sip-auth-card .social-auth--asset-buttons .social-auth__asset img,
.sip-auth-card .social-auth--asset-buttons .social-auth__icon--google img,
.sip-auth-card .social-auth--asset-buttons .social-auth__icon--facebook img,
.sip-auth-card .social-auth--asset-buttons .social-auth__icon--line img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.sip-auth-card .social-auth--asset-buttons .social-auth__label {
  display: none;
}

/* Show/hide password toggle inside auth password fields (matches Figma login). */
.sip-auth-card .sip-password-field {
  position: relative;
}

.sip-auth-card .sip-password-field input {
  padding-right: 48px !important;
}

.sip-auth-card .sip-password-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sip-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.sip-auth-card .sip-password-toggle:hover,
.sip-auth-card .sip-password-toggle:focus-visible {
  color: var(--sip-ink);
}

/* Auth inputs show the literal value/placeholder (no capitalize transform). */
.sip-auth-card .form-grp input,
.sip-auth-card .form-grp input::placeholder {
  text-transform: none !important;
}

/* Learning page state UI: premium mark, premium title, certificate callout
   (matches the Figma เข้าเรียน states — free-preview vs owned vs completed). */
.sip-learning-title--premium {
  color: #5e75e8;
}

.sip-learning-premium-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -8px 0 18px;
  color: #5e75e8;
  font-size: 15px;
  font-weight: 700;
}

.sip-learning-certificate {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 20px;
  padding: 20px 22px;
  border: 1.5px solid var(--sip-success);
  border-radius: 16px;
  background: #e9faf1;
  color: var(--sip-ink);
  text-decoration: none;
}

.sip-learning-certificate:hover {
  background: #ddf6e9;
}

.sip-learning-certificate__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--sip-success);
}

.sip-learning-certificate__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
  line-height: 1.4;
}

.sip-learning-certificate__text strong {
  font-size: 17px;
  font-weight: 700;
}

/* Course detail desktop/tablet sizing.
   The screenshot-matched mobile styles are intentionally tiny; desktop needs
   a larger card, type scale, and hero ratio instead of stretching edge-to-edge. */
@media (min-width: 576px) {
  .sip-course-detail-page {
    background: #f4f6f7 !important;
  }

  .sip-course-detail-page .courses__details-area {
    padding: 34px 18px 76px !important;
    background: transparent !important;
  }

  .sip-course-detail {
    width: min(100%, 900px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(15, 42, 51, .08);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 52px rgba(15, 42, 51, .10);
  }

  .sip-course-detail-page .container,
  .sip-course-detail__summary,
  .sip-detail-section > .container,
  .sip-detail-section .container {
    width: 100%;
    max-width: 780px !important;
    margin-inline: auto;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .sip-course-detail__media,
  .sip-course-detail__media img,
  .sip-course-detail__media--photo img {
    min-height: 300px;
    height: 300px;
  }

  .sip-course-detail__media img,
  .sip-course-detail__media--photo img {
    object-fit: cover;
    object-position: center;
  }

  .sip-floating-back {
    left: 26px;
    top: 26px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: #35464c;
    font-size: 18px;
    box-shadow: 0 8px 22px rgba(15, 42, 51, .16);
  }

  .sip-course-detail__summary {
    padding-top: 32px;
    padding-bottom: 28px;
  }

  .sip-price-row {
    gap: 18px;
    margin-bottom: 18px;
  }

  .sip-price {
    gap: 10px;
  }

  .sip-price strong {
    font-size: 32px;
  }

  .sip-price s {
    font-size: 16px;
  }

  .sip-price .sip-premium-mark {
    margin-left: 12px;
    font-size: 14px;
  }

  .sip-course-detail .courses__item-tag span {
    padding: 7px 13px !important;
    font-size: 12px !important;
  }

  .sip-course-detail__summary h1 {
    margin-bottom: 12px;
    font-size: 22px !important;
    line-height: 1.2;
  }

  .sip-course-detail__summary .sip-inline-meta,
  .sip-detail-section .sip-inline-meta {
    gap: 10px 18px !important;
    margin-bottom: 15px !important;
  }

  .sip-course-detail__summary .sip-inline-meta li,
  .sip-detail-section .sip-inline-meta li {
    font-size: 14px !important;
  }

  .sip-benefit-list {
    gap: 9px;
    margin: 16px 0 22px;
    font-size: 15px;
  }

  .sip-course-actions {
    width: 100%;
    max-width: 520px;
    margin: 20px auto 0;
    text-align: center;
  }

  .sip-course-actions .btn,
  .sip-bottom-cta .btn {
    min-height: 54px;
    border-radius: 10px !important;
    font-size: 16px;
  }

  .sip-detail-section {
    margin-top: 10px;
    border-top-color: #edf0f2;
  }

  .sip-detail-section > .container {
    padding-top: 30px;
  }

  .sip-accordion {
    margin-bottom: 28px;
    padding-bottom: 24px;
  }

  .sip-accordion summary {
    font-size: 22px;
  }

  .sip-accordion summary::before {
    height: 34px;
  }

  .sip-accordion p {
    max-width: 700px;
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.7;
  }

  .sip-curriculum__heading {
    margin-bottom: 10px;
  }

  .sip-curriculum__heading h2 {
    font-size: 22px;
  }

  .sip-curriculum__heading h2::before {
    height: 36px;
  }

  .sip-curriculum__heading strong {
    font-size: 18px;
  }

  .sip-curriculum .course-item {
    grid-template-columns: 34px minmax(0, 1fr) auto 64px 18px;
    gap: 12px;
    padding: 16px 0 !important;
  }

  .sip-lesson-index {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .sip-lesson-title {
    font-size: 15px;
    line-height: 1.35;
  }

  .sip-free-badge {
    padding: 3px 8px;
    font-size: 12px;
  }

  .sip-curriculum .item-meta {
    font-size: 13px;
  }

  .sip-curriculum .fa-play,
  .sip-curriculum .fa-lock {
    font-size: 15px;
  }

  .sip-bottom-cta {
    width: 100%;
    max-width: 520px;
    margin: 44px auto 0;
    padding: 28px 0 34px;
    border-top: 1px solid #edf0f2;
    text-align: center;
  }

  .sip-bottom-cta .sip-price strong {
    font-size: 28px;
  }
}

@media (min-width: 992px) {
  .sip-course-detail {
    width: min(100%, 960px);
  }

  .sip-course-detail-page .container,
  .sip-course-detail__summary,
  .sip-detail-section > .container,
  .sip-detail-section .container {
    max-width: 820px !important;
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  .sip-course-detail__media,
  .sip-course-detail__media img,
  .sip-course-detail__media--photo img {
    min-height: 360px;
    height: 360px;
  }
}

/* SkillSip design-system course cards
   Reconciles the remaining SkillGro card template with the handoff: white
   12px cards, 150px media, coral category pill, honey rating, compact Sarabun
   type, and soft coral hover ring. */
.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three),
.sip-course-card {
  position: relative !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--sip-line) !important;
  border-radius: 12px !important;
  background: var(--sip-card) !important;
  box-shadow: 0 1px 3px rgba(15, 42, 51, .08) !important;
  filter: none !important;
  transform: none !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three):hover,
.sip-course-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--sip-coral) !important;
  box-shadow: 0 0 0 3px rgba(242, 94, 63, .10), 0 12px 24px rgba(15, 42, 51, .08) !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-thumb,
.sip-course-card .courses__item-thumb {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  height: 150px !important;
  min-height: 150px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #A9B6BB !important;
  box-shadow: none !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-thumb a,
.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .shine__animate-link,
.sip-course-card .courses__item-thumb a,
.sip-course-card .shine__animate-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-thumb img,
.sip-course-card .courses__item-thumb img {
  display: block !important;
  width: 100% !important;
  height: 150px !important;
  min-height: 150px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-content,
.sip-course-card .courses__item-content {
  padding: 12px 14px 14px !important;
  background: var(--sip-card) !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-meta,
.sip-course-card .courses__item-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px 14px !important;
  min-height: 20px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--sip-muted) !important;
  flex-wrap: wrap !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-meta li,
.sip-course-card .courses__item-meta li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--sip-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-tag,
.sip-course-card .courses__item-tag {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 2 !important;
  margin: 0 !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-tag a,
.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-tag span,
.sip-course-card .courses__item-tag a,
.sip-course-card .courses__item-tag span,
.sip-card-category,
.sip-course-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: var(--sip-coral) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .avg-rating,
.sip-course-card .avg-rating {
  margin-left: auto !important;
  color: var(--sip-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .avg-rating i,
.sip-course-card .avg-rating i {
  color: var(--sip-honey) !important;
  letter-spacing: 0 !important;
  margin-right: 3px !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-content .title,
.sip-course-card .courses__item-content .title,
.sip-course-card h2,
.sip-course-card h3 {
  margin: 0 0 8px !important;
  color: var(--sip-ink) !important;
  font-family: var(--tg-body-font-family) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-content .title a,
.sip-course-card .courses__item-content .title a,
.sip-course-card h2 a,
.sip-course-card h3 a {
  display: inline !important;
  color: inherit !important;
  background-image: none !important;
  text-decoration: none !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .author,
.sip-course-card .author,
.sip-course-card p {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 0 9px !important;
  color: var(--sip-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .author a,
.sip-course-card .author a {
  flex: 0 0 auto !important;
  color: var(--sip-ink) !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .author a:hover,
.sip-course-card .author a:hover {
  color: var(--sip-coral) !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-bottom,
.sip-course-card .courses__item-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-bottom .button a,
.sip-course-card .courses__item-bottom .button a {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border: 1.5px solid var(--sip-teal) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--sip-teal) !important;
  font-family: var(--tg-body-font-family) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-bottom .button a:hover,
.sip-course-card .courses__item-bottom .button a:hover {
  border-color: var(--sip-coral) !important;
  background: var(--sip-coral) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-bottom .price,
.sip-course-card .courses__item-bottom .price,
.sip-card-price {
  margin: 0 !important;
  color: var(--sip-coral) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: right !important;
}

.courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-bottom .price del,
.sip-course-card .courses__item-bottom .price del,
.sip-card-price small,
.sip-price s {
  margin-right: 4px !important;
  color: var(--sip-muted-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
}

.sip-course-card--premium,
.sip-course-card.sip-course-card--premium,
.courses__item.shine__animate-item.sip-course-card--premium {
  border-width: 1.5px !important;
  border-color: var(--sip-coral) !important;
  box-shadow: 0 0 0 3px rgba(242, 94, 63, .10), 0 1px 3px rgba(15, 42, 51, .08) !important;
}

.sip-premium-mark {
  color: #2E65FF !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.sip-continue-progress,
.sip-my-course-card__progress,
.latest-course-card__progress,
.achievement-card__progress {
  height: 7px !important;
  border-radius: 999px !important;
  background: #eef1f2 !important;
}

.sip-continue-progress span,
.sip-my-course-card__progress span,
.latest-course-card__progress span,
.achievement-card__progress span {
  background: var(--sip-mint) !important;
}

.sip-round-play {
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
  background: var(--sip-mint) !important;
  font-size: 14px !important;
}

@media (max-width: 767.98px) {
  .courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-thumb,
  .courses__item.shine__animate-item:not(.courses__item-two):not(.courses__item-three) .courses__item-thumb img,
  .sip-course-card .courses__item-thumb,
  .sip-course-card .courses__item-thumb img {
    height: 150px !important;
    min-height: 150px !important;
  }
}

/* Courses filter sidebar */
.sip-filter-sidebar {
  position: sticky;
  top: 104px;
}

.sip-filter-card {
  position: relative;
  overflow: hidden;
  padding: 22px !important;
  border: 1px solid rgba(242, 94, 63, .16) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(242, 94, 63, .14), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 253, 250, .94)) !important;
  box-shadow: 0 18px 42px rgba(15, 42, 51, .08) !important;
}

.sip-filter-card::after {
  content: "";
  position: absolute;
  inset: auto -42px -56px auto;
  width: 136px;
  height: 136px;
  border-radius: 999px;
  background: rgba(31, 111, 139, .08);
  pointer-events: none;
}

.sip-filter-card__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 42, 51, .08);
}

.sip-filter-card__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: var(--sip-coral);
  color: #fff;
  box-shadow: 6px 6px 0 var(--sip-coral-dark);
}

.sip-filter-card__header p {
  margin: 0 0 2px;
  color: var(--sip-coral);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sip-filter-card .widget-title {
  margin: 0 !important;
  color: var(--sip-ink) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

.sip-filter-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 15px;
}

.sip-filter-field {
  display: grid;
  gap: 8px;
  margin: 0;
}

.sip-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sip-ink);
  font-size: 13px;
  font-weight: 700;
}

.sip-filter-label i {
  width: 16px;
  color: var(--sip-coral);
  text-align: center;
}

.sip-filter-card .form-control,
.sip-filter-card .form-select {
  min-height: 50px;
  width: 100%;
  border: 1px solid rgba(15, 42, 51, .10) !important;
  border-radius: 14px !important;
  background-color: #fff !important;
  color: var(--sip-ink) !important;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(15, 42, 51, .04) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sip-filter-card .form-control::placeholder {
  color: rgba(116, 135, 141, .72);
}

.sip-filter-card .form-control:focus,
.sip-filter-card .form-select:focus {
  border-color: var(--sip-coral) !important;
  box-shadow: 0 0 0 4px rgba(242, 94, 63, .14), 0 8px 20px rgba(15, 42, 51, .05) !important;
  transform: translateY(-1px);
}

.sip-filter-actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.sip-filter-submit {
  min-height: 50px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--sip-coral-dark) !important;
  border-radius: 999px !important;
  background: var(--sip-coral) !important;
  color: #fff !important;
  box-shadow: 5px 5px 0 var(--sip-coral-dark) !important;
  font-weight: 700 !important;
}

.sip-filter-submit:hover,
.sip-filter-submit:focus-visible {
  background: var(--sip-coral-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.sip-filter-clear {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(31, 111, 139, .08);
  color: var(--sip-teal);
  font-weight: 700;
  transition: background .18s ease, color .18s ease;
}

.sip-filter-clear:hover,
.sip-filter-clear:focus-visible {
  background: var(--sip-teal);
  color: #fff;
}

@media (max-width: 991.98px) {
  .sip-filter-sidebar {
    position: static;
    margin: 0 0 28px;
  }

  .sip-course-search-field {
    display: none;
  }
}

/* Shared empty states */
.sip-empty-state {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
  padding: clamp(34px, 6vw, 58px) clamp(22px, 5vw, 46px);
  border: 1px solid rgba(242, 94, 63, .18);
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 4%, rgba(242, 94, 63, .14), transparent 28%),
    radial-gradient(circle at 94% 104%, rgba(31, 111, 139, .10), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 253, 250, .94));
  box-shadow: 0 18px 42px rgba(15, 42, 51, .08);
  text-align: center;
}

.sip-empty-state::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -58px;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: rgba(31, 111, 139, .08);
  pointer-events: none;
}

.sip-empty-state__icon {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  display: inline-grid;
  place-items: center;
  border-radius: 23px;
  background: var(--sip-coral);
  color: #fff;
  box-shadow: 8px 8px 0 var(--sip-coral-dark);
  font-size: 28px;
}

.sip-empty-state__eyebrow {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  color: var(--sip-coral);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sip-empty-state h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--sip-ink) !important;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.18;
}

.sip-empty-state__description {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 0;
  color: #5A6E76;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
}

.sip-empty-state__actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.sip-empty-state__action {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--sip-coral-dark) !important;
  border-radius: 999px !important;
  padding: 12px 24px;
  background: var(--sip-coral) !important;
  color: #fff !important;
  box-shadow: 5px 5px 0 var(--sip-coral-dark) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
}

button.sip-empty-state__action {
  cursor: pointer;
}

.sip-empty-state__action:hover,
.sip-empty-state__action:focus-visible {
  background: var(--sip-coral-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: translateY(1px);
}

/* Error and not-found pages */
.sip-error-page {
  min-height: 62vh;
  padding: clamp(52px, 8vw, 108px) 0 clamp(68px, 10vw, 128px);
  background:
    radial-gradient(circle at 12% 10%, rgba(242, 94, 63, .10), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(31, 111, 139, .12), transparent 26%),
    var(--sip-cream) !important;
}

.sip-error-state {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, .82fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 58px);
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(15, 42, 51, .08);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 253, 250, .93)),
    var(--sip-card);
  box-shadow: 0 24px 64px rgba(15, 42, 51, .10);
}

.sip-error-state::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(31, 111, 139, .18);
  border-radius: 24px;
  pointer-events: none;
}

.sip-error-state__visual,
.sip-error-state__content {
  position: relative;
  z-index: 1;
}

.sip-error-state__visual {
  min-height: 250px;
  display: grid;
  place-items: center;
}

.sip-error-state__image {
  width: min(100%, 360px);
  height: auto;
  filter: drop-shadow(0 18px 24px rgba(15, 42, 51, .10));
}

.sip-error-state__orb {
  position: absolute;
  display: block;
  border-radius: 999px;
  pointer-events: none;
}

.sip-error-state__orb--coral {
  top: 8%;
  left: 10%;
  width: 62px;
  height: 62px;
  background: rgba(242, 94, 63, .16);
}

.sip-error-state__orb--teal {
  right: 12%;
  bottom: 10%;
  width: 88px;
  height: 88px;
  background: rgba(31, 111, 139, .12);
}

.sip-error-state__content {
  text-align: left;
}

.sip-error-state__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 12px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #FFF1EC;
  color: var(--sip-coral);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
}

.sip-error-state__code {
  margin: 0 0 8px;
  color: var(--sip-teal);
  font-size: clamp(54px, 12vw, 104px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.07em;
}

.sip-error-state h1 {
  max-width: 560px;
  margin: 0;
  color: var(--sip-ink) !important;
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.12;
}

.sip-error-state__description {
  max-width: 580px;
  margin: 16px 0 0;
  color: #5A6E76;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.72;
}

.sip-error-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.sip-error-state__action {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px !important;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

button.sip-error-state__action {
  cursor: pointer;
}

.sip-error-state__action--primary {
  border: 1px solid var(--sip-coral-dark) !important;
  background: var(--sip-coral) !important;
  color: #fff !important;
  box-shadow: 5px 5px 0 var(--sip-coral-dark) !important;
}

.sip-error-state__action--secondary {
  border: 1.5px solid var(--sip-teal) !important;
  background: #fff !important;
  color: var(--sip-teal) !important;
}

.sip-error-state__action:hover,
.sip-error-state__action:focus-visible {
  transform: translateY(1px);
}

.sip-error-state__action--primary:hover,
.sip-error-state__action--primary:focus-visible {
  background: var(--sip-coral-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.sip-error-state__action--secondary:hover,
.sip-error-state__action--secondary:focus-visible {
  background: var(--sip-teal) !important;
  color: #fff !important;
}

@media (max-width: 991.98px) {
  .sip-error-state {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sip-error-state__content {
    text-align: center;
  }

  .sip-error-state__visual {
    min-height: 190px;
  }

  .sip-error-state__image {
    width: min(100%, 300px);
  }

  .sip-error-state h1,
  .sip-error-state__description {
    margin-inline: auto;
  }

  .sip-error-state__actions {
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .sip-error-page {
    padding-top: 34px;
  }

  .sip-error-state {
    border-radius: 24px;
    padding: 28px 20px;
  }

  .sip-error-state::before {
    inset: 10px;
    border-radius: 18px;
  }

  .sip-error-state__visual {
    min-height: 150px;
  }

  .sip-error-state__image {
    width: min(100%, 240px);
  }

  .sip-error-state__actions {
    display: grid;
    width: 100%;
  }

  .sip-error-state__action {
    width: 100%;
  }
}

/* Course detail screenshot parity: narrow mobile app view */
@media (max-width: 575.98px) {
  html:has(.sip-course-detail-page),
  body:has(.sip-course-detail-page) {
    background: #f8f3ea;
  }

  .sip-course-detail-page {
    min-height: 100vh;
    background: #f8f3ea !important;
  }

  .sip-course-detail-page .courses__details-area {
    padding: 0 !important;
    background: #f8f3ea !important;
  }

  .sip-course-detail {
    width: 100%;
    /* max-width: 430px; */
    margin: 0 auto;
    background: #f8f3ea;
  }

  .sip-course-detail__media,
  .sip-course-detail__media img,
  .sip-course-detail__media--photo img {
    min-height: 146px;
    height: 146px;
  }

  .sip-course-detail__media {
    background: #60757b;
  }

  .sip-course-detail__media img {
    object-fit: cover;
    opacity: .36;
    filter: grayscale(.48);
  }

  .sip-course-detail__media--photo img {
    opacity: .54;
    filter: grayscale(.35);
  }

  .sip-media-placeholder {
    width: 68px;
    height: 52px;
    border-radius: 8px;
    background: rgba(15, 42, 51, .12);
    color: rgba(255, 255, 255, .12);
    font-size: 38px;
  }

  .sip-floating-back {
    left: 12px;
    top: 16px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #1b2b30;
    font-size: 12px;
    box-shadow: none;
  }

  .sip-course-detail__summary {
    padding: 22px 12px 12px;
    background: #fff;
  }

  .sip-price-row {
    gap: 8px;
    margin-bottom: 12px;
  }

  .sip-price {
    gap: 5px;
  }

  .sip-price strong {
    font-size: 17px;
    letter-spacing: -.02em;
  }

  .sip-price s {
    font-size: 9px;
    font-weight: 700;
  }

  .sip-price .sip-premium-mark {
    font-size: 9px;
  }

  .sip-course-detail .courses__item-tag span {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    padding: 4px 9px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .sip-course-detail__summary h1 {
    margin: 0 0 7px;
    font-size: 12.5px !important;
    line-height: 1.35;
    letter-spacing: -.01em;
  }

  .sip-course-detail__summary .sip-inline-meta,
  .sip-detail-section .sip-inline-meta {
    gap: 5px 8px !important;
    margin-bottom: 9px !important;
  }

  .sip-course-detail__summary .sip-inline-meta li,
  .sip-detail-section .sip-inline-meta li {
    font-size: 8.5px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  .sip-course-detail__summary .sip-inline-meta i,
  .sip-detail-section .sip-inline-meta i {
    margin-right: 2px !important;
    font-size: 8.5px !important;
  }

  .sip-benefit-list {
    gap: 4px;
    margin: 8px 0 11px;
    font-size: 10px;
    line-height: 1.35;
  }

  .sip-benefit-list i {
    margin-right: 4px;
    font-size: 10px;
  }

  .sip-course-actions {
    gap: 9px;
    margin-top: 11px;
  }

  .sip-course-actions .btn,
  .sip-bottom-cta .btn {
    min-height: 30px;
    height: 30px;
    padding: 0 12px !important;
    border-radius: 5px !important;
    font-size: 10px;
    line-height: 30px;
    box-shadow: 0 4px 10px rgba(242, 94, 63, .16) !important;
  }

  .sip-course-detail .btn-border {
    background: #fff !important;
    box-shadow: none !important;
  }

  .sip-detail-section {
    margin-top: 8px;
    border-top: 1px solid #eee9df;
    background: #fff;
  }

  .sip-detail-section > .container {
    max-width: 430px;
    padding: 13px 12px 0 !important;
  }

  .sip-accordion {
    margin-bottom: 13px;
    padding-bottom: 11px;
    border-bottom: 1px solid #e9ddcb !important;
  }

  .sip-accordion summary {
    gap: 7px;
    font-size: 11px;
    line-height: 1.2;
  }

  .sip-accordion summary::before,
  .sip-curriculum__heading h2::before {
    width: 3px;
    height: 18px;
    margin-right: 8px;
  }

  .sip-accordion summary::after {
    font-size: 8px;
  }

  .sip-accordion p {
    margin-top: 9px;
    font-size: 9px;
    line-height: 1.62;
    font-weight: 600;
  }

  .sip-curriculum__heading {
    align-items: center;
    margin-bottom: 2px;
  }

  .sip-curriculum__heading h2 {
    font-size: 11px;
    line-height: 1.25;
  }

  .sip-curriculum__heading strong {
    padding-top: 0;
    font-size: 11px;
  }

  .sip-progress-note {
    margin: -2px 0 7px 12px;
    font-size: 8.5px;
  }

  .sip-curriculum .course-item {
    grid-template-columns: 18px minmax(0, 1fr) auto 34px 10px;
    gap: 5px;
    min-height: 31px;
    padding: 7px 0 !important;
    border-bottom-color: #E8DDC9 !important;
  }

  .sip-lesson-index {
    width: 16px;
    height: 16px;
    font-size: 8px;
  }

  .sip-lesson-title {
    font-size: 9px;
    line-height: 1.25;
    font-weight: 700;
  }

  .sip-free-badge {
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 7px;
    line-height: 1;
  }

  .sip-curriculum .item-meta {
    font-size: 8px;
    line-height: 1.2;
  }

  .sip-curriculum .fa-play,
  .sip-curriculum .fa-lock {
    font-size: 8px;
  }

  .sip-attachment-note {
    gap: 4px;
    margin-top: 0;
    font-size: 8px;
    line-height: 1.2;
  }

  .sip-bottom-cta {
    margin: 23px -12px 0;
    padding: 26px 12px 22px;
    gap: 9px;
    border-top: 1px solid #e6eaec;
    background: #fff;
  }

  .sip-bottom-cta .sip-price {
    justify-content: center;
    margin-bottom: 1px;
  }

  .sip-bottom-cta .sip-price strong {
    color: #111;
    font-size: 17px;
  }
}

/* Account dashboard shared pages */
.account-list-page {
  min-width: 0;
  background: transparent !important;
}

.account-list-page__title {
  margin: 29px 0 24px;
  border-bottom: 1px solid #dedede;
  color: #222222 !important;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  padding-bottom: 30px;
}

.account-list-page .sip-course-filter-tabs {
  margin-top: 0;
}

@media (max-width: 991.98px) {
  .account-list-page__title {
    margin-top: 16px;
    padding-bottom: 21px;
  }

  .sip-notifications-head {
    margin-top: 16px;
    padding-bottom: 21px;
  }
}

@media (max-width: 575.98px) {
  .account-list-page .sip-my-course-list,
  .account-list-page .sip-certificate-list {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile header one-step smaller */
@media (max-width: 767.98px) {
  .sip-header__bar,
  .sip-nav {
    min-height: 64px;
  }

  .sip-header__container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .sip-header .sip-logo img {
    width: 96px;
    max-height: 32px;
  }

  .sip-header .sip-header-actions {
    gap: 5px;
  }

  .sip-header .sip-auth-btn {
    min-width: 86px;
    min-height: 34px;
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 12px;
  }

  .sip-header .sip-icon-btn,
  .sip-header .sip-menu-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px !important;
  }

  .sip-header .sip-menu-btn {
    gap: 3px;
  }

  .sip-header .sip-menu-btn span {
    width: 15px;
    height: 2px;
  }

  .sip-header .sip-menu-btn span:nth-child(2) {
    width: 10px;
  }

  .sip-header .sip-menu-btn:hover span {
    width: 15px;
  }
}

@media (max-width: 390px) {
  .sip-header__bar,
  .sip-nav {
    min-height: 58px;
  }

  .sip-header .sip-logo img {
    width: 76px;
    max-height: 28px;
  }

  .sip-header .sip-auth-btn {
    min-width: 78px;
    min-height: 32px;
    font-size: 11px;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Student review dashboard */
.sip-student-review-page .dashboard__content-wrap.sip-review-panel {
  padding: clamp(22px, 4vw, 34px) !important;
}
.sip-review-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--sip-line);
}
.sip-review-hero .sub-title {
  margin-bottom: 12px;
}
.sip-review-hero h1 {
  margin: 0 0 8px;
  color: var(--sip-ink) !important;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  line-height: 1.1;
}
.sip-review-hero p {
  max-width: 560px;
  margin: 0;
  color: #7a8c92;
  font-weight: 500;
  line-height: 1.6;
}
.sip-review-hero .sip-chip-link {
  flex: 0 0 auto;
  gap: 8px;
}
.sip-review-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.sip-review-stat {
  border: 1px solid var(--sip-line);
  border-radius: 18px;
  padding: 18px 20px;
  background: #fff;
}
.sip-review-stat span {
  display: block;
  margin-bottom: 4px;
  color: var(--sip-coral);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.sip-review-stat p {
  margin: 0;
  color: #71848a;
  font-size: 13px;
  font-weight: 700;
}
.sip-review-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.sip-review-toolbar h2 {
  margin: 0;
  color: var(--sip-ink) !important;
  font-size: 22px;
  font-weight: 700;
}
.sip-review-toolbar span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff0eb;
  color: var(--sip-coral);
  font-size: 13px;
  font-weight: 700;
}
.sip-review-list {
  display: grid;
  gap: 16px;
}
.sip-review-card {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(15, 42, 51, .08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 42, 51, .04);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sip-review-card:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 94, 63, .42);
  box-shadow: 0 14px 28px rgba(15, 42, 51, .08);
}
.sip-review-card__media {
  position: relative;
  min-height: 138px;
  overflow: hidden;
  border-radius: 16px;
  background: #657b82;
}
.sip-review-card__media img {
  width: 100%;
  height: 100%;
  min-height: 138px;
  object-fit: cover;
  opacity: .45;
  filter: grayscale(.35);
}
.sip-review-card__media span {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 10px;
  background: #FFF1EC;
  color: var(--sip-coral);
  font-size: 11px;
  font-weight: 700;
}
.sip-review-card__body {
  min-width: 0;
  display: grid;
  gap: 10px;
}
.sip-review-card__top,
.sip-review-card__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.sip-review-course {
  display: inline-block;
  color: var(--sip-ink) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}
.sip-review-course:hover {
  color: var(--sip-coral) !important;
}
.sip-review-card__top p {
  margin: 4px 0 0;
  color: #8a989f;
  font-size: 13px;
  font-weight: 600;
}
.sip-review-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(24, 201, 137, .12);
  color: var(--sip-success);
  font-size: 12px;
  font-weight: 700;
}
.sip-review-rating {
  gap: 8px;
}
.sip-review-rating .rating {
  color: var(--sip-warning) !important;
  font-size: 14px;
}
.sip-review-rating span {
  color: #5A6E76;
  font-size: 13px;
  font-weight: 600;
}
.sip-review-comment {
  margin: 0;
  color: #667a80;
  font-weight: 500;
  line-height: 1.6;
}
.sip-review-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sip-teal);
  font-size: 13px;
  font-weight: 700;
}
.sip-review-actions {
  flex: 0 0 auto;
  gap: 8px !important;
}
.sip-review-actions a {
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #eef7f9 !important;
  color: var(--sip-teal) !important;
}
.sip-review-actions a:hover {
  background: var(--sip-teal) !important;
  color: #fff !important;
}
.sip-review-actions a:nth-child(2) {
  background: #fff0eb !important;
  color: var(--sip-coral) !important;
}
.sip-review-actions a:nth-child(2):hover {
  background: var(--sip-coral) !important;
  color: #fff !important;
}
@media (max-width: 767.98px) {
  .sip-review-hero,
  .sip-review-card__top,
  .sip-review-card__footer {
    flex-direction: column;
  }
  .sip-review-hero .sip-chip-link,
  .sip-review-actions {
    width: 100%;
  }
  .sip-review-stats,
  .sip-review-card {
    grid-template-columns: 1fr;
  }
  .sip-review-card__media {
    min-height: 180px;
  }
  .sip-review-actions {
    justify-content: flex-start !important;
  }
}
@media (max-width: 430px) {
  .sip-review-stats {
    gap: 10px;
  }
  .sip-review-stat {
    padding: 16px;
  }
  .sip-review-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Course detail mobile readability override.
   Keep the screenshot-like mobile card layout, but restore readable Thai type sizes. */
@media (max-width: 575.98px) {
  .sip-course-detail-page .sip-course-detail__summary {
    padding: 24px 18px 18px;
  }

  .sip-course-detail-page .sip-course-detail__summary h1 {
    margin-bottom: 10px;
    font-size: 26px !important;
    line-height: 1.3;
  }

  .sip-course-detail-page .sip-course-detail__summary .sip-inline-meta,
  .sip-course-detail-page .sip-detail-section .sip-inline-meta {
    gap: 8px 12px !important;
    margin-bottom: 12px !important;
  }

  .sip-course-detail-page .sip-course-detail__summary .sip-inline-meta li,
  .sip-course-detail-page .sip-detail-section .sip-inline-meta li {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .sip-course-detail-page .sip-course-detail__summary .sip-inline-meta i,
  .sip-course-detail-page .sip-detail-section .sip-inline-meta i {
    font-size: 14px !important;
  }

  .sip-course-detail-page .sip-benefit-list {
    gap: 8px;
    margin: 12px 0 16px;
    font-size: 15px;
    line-height: 1.5;
  }

  .sip-course-detail-page .sip-benefit-list i {
    font-size: 15px;
  }

  .sip-course-detail-page .sip-course-detail .courses__item-tag span {
    min-height: 26px;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }

  .sip-course-detail-page .sip-course-actions .btn,
  .sip-course-detail-page .sip-bottom-cta .btn {
    min-height: 44px;
    height: auto;
    border-radius: 7px !important;
    font-size: 15px;
    line-height: 1.3;
  }

  .sip-course-detail-page .sip-detail-section > .container {
    padding: 22px 20px 0 !important;
  }

  .sip-course-detail-page .sip-accordion {
    margin-bottom: 22px;
    padding-bottom: 18px;
  }

  .sip-course-detail-page .sip-accordion summary {
    gap: 10px;
    font-size: 21px;
    line-height: 1.25;
  }

  .sip-course-detail-page .sip-accordion summary::before,
  .sip-course-detail-page .sip-curriculum__heading h2::before {
    width: 4px;
    height: 30px;
    margin-right: 12px;
  }

  .sip-course-detail-page .sip-accordion summary::after {
    font-size: 12px;
  }

  .sip-course-detail-page .sip-accordion p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.75;
  }

  .sip-course-detail-page .sip-curriculum__heading {
    margin-bottom: 8px;
  }

  .sip-course-detail-page .sip-curriculum__heading h2 {
    font-size: 20px;
    line-height: 1.25;
  }

  .sip-course-detail-page .sip-curriculum__heading strong {
    font-size: 18px;
  }

  .sip-course-detail-page .sip-progress-note {
    margin: -2px 0 12px 16px;
    font-size: 13px;
    line-height: 1.4;
  }

  .sip-course-detail-page .sip-curriculum .course-item {
    grid-template-columns: 28px minmax(0, 1fr) auto 58px 16px;
    gap: 8px;
    min-height: 52px;
    padding: 13px 0 !important;
  }

  .sip-course-detail-page .sip-lesson-index {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .sip-course-detail-page .sip-lesson-title {
    font-size: 15px;
    line-height: 1.45;
  }

  .sip-course-detail-page .sip-free-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.1;
  }

  .sip-course-detail-page .sip-curriculum .item-meta {
    font-size: 13px;
    line-height: 1.3;
  }

  .sip-course-detail-page .sip-curriculum .fa-play,
  .sip-course-detail-page .sip-curriculum .fa-lock,
  .sip-course-detail-page .sip-curriculum .fa-check-circle {
    font-size: 14px;
  }

  .sip-course-detail-page .sip-attachment-note {
    gap: 6px;
    margin-top: 0;
    font-size: 13px;
    line-height: 1.3;
  }
}

/* Bug USER: tapping the mobile search icon turns the header into an inline
   text input (back arrow + field + search), instead of jumping to /courses. */
.sip-header__container { position: relative; }
.sip-mobile-search {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
  background: #fff;
}
.sip-mobile-search__back {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sip-ink);
  font-size: 18px;
}
.sip-mobile-search__form {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  height: 46px;
  border: 1px solid #dbe4e8;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.sip-mobile-search__form input {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0 16px;
  font-size: 15px;
  color: var(--sip-ink);
  background: transparent;
}
.sip-mobile-search__form button {
  flex: 0 0 auto;
  width: 50px;
  height: 100%;
  border: 0;
  color: var(--sip-coral);
  background: transparent;
  font-size: 16px;
}

/* Design handoff final reconciliation (2026-07-02)
   Loaded last so older screenshot-matching and SkillGro compatibility passes do
   not drift away from the SkillSip design-system tokens. */
.sip-header__bar {
  min-height: 72px !important;
  background: #fff !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 3px rgba(15, 42, 51, .06) !important;
}

.sticky-menu.sip-header__bar {
  box-shadow: 0 1px 3px rgba(15, 42, 51, .08) !important;
}

.sip-header__container {
  max-width: 1160px !important;
}

.sip-nav {
  min-height: 72px !important;
  gap: 18px !important;
}

.sip-logo img {
  width: 150px !important;
  max-height: 48px !important;
}

.sip-header .navigation > li > a {
  color: var(--sip-ink) !important;
  font-family: var(--tg-body-font-family) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.sip-header-search {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
}

.sip-header-search input {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.sip-header-search button {
  width: 44px !important;
  height: 44px !important;
  color: var(--sip-teal) !important;
  font-size: 18px !important;
}

.sip-btn,
.btn,
.header-logout {
  min-height: 44px !important;
  border-radius: 12px !important;
  padding: 11px 26px !important;
  font-family: var(--tg-body-font-family) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.sip-auth-btn {
  min-height: 40px !important;
  border-radius: 11px !important;
  padding: 9px 20px !important;
  font-size: 14px !important;
}

.sip-btn--primary,
.btn-two,
.btn:not(.btn-border):not(.sip-btn--outline) {
  background: var(--sip-coral) !important;
  border-color: var(--sip-coral) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(242, 94, 63, .22) !important;
}

.sip-btn--primary:hover,
.btn-two:hover,
.btn:not(.btn-border):not(.sip-btn--outline):hover {
  background: var(--sip-coral-dark) !important;
  border-color: var(--sip-coral-dark) !important;
}

.sip-btn--outline,
.btn-border {
  background: #fff !important;
  border-color: var(--sip-teal) !important;
  color: var(--sip-teal) !important;
}

.sip-btn--outline:hover,
.btn-border:hover {
  background: var(--sip-teal) !important;
  color: #fff !important;
}

.sip-btn[disabled],
.btn[disabled],
button:disabled.sip-btn,
button:disabled.btn {
  cursor: not-allowed !important;
  background: #f4f6f7 !important;
  border-color: #d7dde0 !important;
  color: var(--sip-muted-2) !important;
  box-shadow: none !important;
  transform: none !important;
}

.sip-profile-pill {
  min-width: 188px !important;
  max-width: 240px !important;
  height: 46px !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  border-radius: 999px !important;
  background: var(--sip-coral) !important;
  padding: 5px 11px 5px 7px !important;
  box-shadow: 0 6px 14px rgba(242, 94, 63, .18) !important;
}

.sip-profile-pill:hover,
.sip-profile-pill:focus-visible {
  background: var(--sip-coral-dark) !important;
  box-shadow: 0 8px 18px rgba(242, 94, 63, .22) !important;
}

.sip-profile-pill__avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 13px;
}

.sip-profile-pill__text {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}

.sip-profile-pill__name {
  color: #fff;
  font-family: var(--tg-body-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.05;
}

.sip-profile-pill__plan {
  color: rgba(255, 255, 255, .78);
  font-family: Inter, var(--tg-body-font-family);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
}

.sip-profile-pill__caret {
  margin-left: auto;
  color: rgba(255, 255, 255, .82);
  font-size: 10px !important;
}

.sip-member-category-strip,
.sip-category-chip-bar {
  background: #fff !important;
  border-top: 1px solid rgba(15, 42, 51, .04) !important;
  border-bottom: 1px solid rgba(15, 42, 51, .06) !important;
}

.sip-member-category-strip a,
.sip-category-tabs a,
.sip-course-filter-tabs button {
  border-radius: 999px !important;
  background: #f4f6f7 !important;
  color: var(--sip-muted) !important;
  font-family: var(--tg-body-font-family) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.sip-member-category-strip a.active,
.sip-member-category-strip a.router-link-exact-active,
.sip-category-tabs a.active,
.sip-course-filter-tabs button.active {
  background: var(--sip-coral) !important;
  color: #fff !important;
}

.form-grp label,
.sip-filter-label {
  color: var(--sip-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.form-grp input,
.form-grp textarea,
.form-grp select,
.form-control,
.form-select,
.sip-coupon-field,
.sip-filter-card .form-control,
.sip-filter-card .form-select {
  min-height: 48px !important;
  border: 1.5px solid var(--sip-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--sip-ink) !important;
  font-family: var(--tg-body-font-family) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 10px 14px !important;
}

.form-grp input::placeholder,
.form-grp textarea::placeholder,
.form-control::placeholder {
  color: var(--sip-muted-2) !important;
  font-weight: 400 !important;
}

.form-grp input:focus,
.form-grp textarea:focus,
.form-grp select:focus,
.form-control:focus,
.form-select:focus,
.sip-filter-card .form-control:focus,
.sip-filter-card .form-select:focus {
  border-color: var(--sip-teal) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 139, .16) !important;
  transform: none !important;
}

.singUp-wrap,
.checkout__form-wrap,
.order-summary,
.dashboard__content-wrap,
.courses-widget,
.access-box,
.certificate-card,
.notification-card,
.package-card,
.sip-order-plan-card,
.sip-payment-card,
.sip-flow-card,
.sip-order-card,
.sip-certificate-tile {
  border: 1px solid var(--sip-line) !important;
  border-radius: 14px !important;
  background: var(--sip-card) !important;
  box-shadow: 0 1px 3px rgba(15, 42, 51, .08) !important;
}

.package-card.recommended,
.sip-package-stack .package-card.recommended {
  border: 1.5px solid var(--sip-coral) !important;
  box-shadow: 0 0 0 3px rgba(242, 94, 63, .10), 0 1px 3px rgba(15, 42, 51, .08) !important;
}

.api-state--error {
  color: var(--sip-alert) !important;
}

@media (max-width: 575.98px) {
  .sip-profile-pill {
    min-width: 46px !important;
    width: 46px !important;
    padding: 6px !important;
    justify-content: center !important;
  }

  .sip-profile-pill__text,
  .sip-profile-pill__caret {
    display: none !important;
  }
}