/* =====================================================
   HAVILAHTECH WHATSAPP AI BUSINESS TOOLKIT
   MAIN STYLESHEET
===================================================== */


/* =====================================================
   VARIABLES
===================================================== */

:root {

  --black: #171717;
  --black-soft: #242424;

  --white: #ffffff;

  --background: #f7f5f1;

  --text: #191919;
  --muted: #707070;

  --border: #e5e2dc;

  --red: #c72c2c;
  --red-dark: #a51f1f;

  --red-light: #faeeee;

  --green: #198754;
  --green-light: #e9f7f0;

  --gold: #d3a53d;

}


/* =====================================================
   RESET
===================================================== */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


html {

  scroll-behavior: smooth;

}


body {

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  background: var(--background);

  color: var(--text);

  line-height: 1.55;

}


button,
a {

  font: inherit;

}


button {

  cursor: pointer;

}


a {

  text-decoration: none;

  color: inherit;

}


/* =====================================================
   CONTAINER
===================================================== */

.container {

  width: min(
    1180px,
    calc(100% - 40px)
  );

  margin-left: auto;

  margin-right: auto;

}


/* =====================================================
   HEADER
===================================================== */

.topbar {

  position: sticky;

  top: 0;

  z-index: 100;

  background: rgba(
    255,
    255,
    255,
    0.97
  );

  border-bottom: 1px solid var(--border);

  backdrop-filter: blur(12px);

}


.topbar-inner {

  min-height: 76px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}


/* Brand */

.brand {

  display: inline-flex;

  align-items: center;

  gap: 12px;

}


.brand img {

  width: 44px;

  height: 44px;

  object-fit: contain;

}


.brand-text strong {

  display: block;

  font-size: 15px;

  line-height: 1.1;

  letter-spacing: -0.02em;

}


.brand-text span {

  display: block;

  color: var(--muted);

  font-size: 11px;

  margin-top: 3px;

}


/* Support mini */

.support-mini {

  color: var(--muted);

  font-size: 13px;

  font-weight: 700;

}


.online-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--green);

  display: inline-block;

  margin-right: 6px;

}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.main-layout {

  display: grid;

  grid-template-columns:
    285px
    minmax(0, 1fr);

  gap: 30px;

  padding-top: 30px;

  padding-bottom: 60px;

}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar {

  position: sticky;

  top: 106px;

  align-self: start;

}


.sidebar-card {

  background: var(--white);

  border: 1px solid var(--border);

  border-radius: 18px;

  padding: 20px;

  margin-bottom: 16px;

  box-shadow:
    0 8px 30px
    rgba(
      20,
      20,
      20,
      0.035
    );

}


/* Eyebrow */

.eyebrow {

  color: var(--muted);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.12em;

}


/* Progress */

.progress-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 8px;

  margin-bottom: 8px;

  font-size: 13px;

}


.progress-header span {

  color: var(--muted);

}


.progress-bar {

  width: 100%;

  height: 7px;

  background: #ece9e3;

  border-radius: 999px;

  overflow: hidden;

}


.progress-fill {

  height: 100%;

  background: var(--red);

  border-radius: 999px;

  transition:
    width 0.3s ease;

}


/* Navigation */

.lesson-navigation {

  display: grid;

  gap: 5px;

  margin-top: 18px;

}


.lesson-nav-item {

  width: 100%;

  border: 0;

  background: transparent;

  display: grid;

  grid-template-columns:
    34px
    1fr;

  align-items: center;

  gap: 10px;

  text-align: left;

  padding: 11px 9px;

  border-radius: 12px;

  color: var(--muted);

}


.lesson-nav-item:hover {

  background: #f5f3ef;

}


.lesson-nav-item.active {

  background: var(--red-light);

  color: var(--text);

}


.lesson-number {

  width: 30px;

  height: 30px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--white);

  border: 1px solid var(--border);

  font-size: 10px;

  font-weight: 800;

}


.lesson-nav-item.completed
.lesson-number {

  background: var(--green);

  border-color: var(--green);

  color: white;

}


.lesson-nav-content strong {

  display: block;

  font-size: 12px;

  line-height: 1.25;

}


.lesson-nav-content small {

  display: block;

  color: var(--muted);

  font-size: 10px;

  margin-top: 3px;

}


/* Sidebar support */

.support-card {

  background: var(--black);

  color: white;

  border-color: var(--black);

}


.support-question {

  width: 32px;

  height: 32px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--black-soft);

  margin-bottom: 12px;

  font-weight: 800;

}


.support-card h3 {

  font-size: 14px;

  margin-bottom: 7px;

}


.support-card p {

  color: #bcbcbc;

  font-size: 12px;

  margin-bottom: 16px;

}


/* =====================================================
   HERO
===================================================== */

.hero {

  background: var(--black);

  color: white;

  border-radius: 22px;

  padding: 35px 38px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  overflow: hidden;

  position: relative;

}


.hero::after {

  content: "";

  position: absolute;

  width: 220px;

  height: 220px;

  border: 1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  border-radius: 50%;

  right: -80px;

  top: -80px;

}


.hero-label {

  color: #e8c878;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.12em;

}


.hero h1 {

  max-width: 700px;

  margin-top: 8px;

  margin-bottom: 10px;

  font-size:
    clamp(
      29px,
      4vw,
      46px
    );

  line-height: 1.04;

  letter-spacing: -0.045em;

}


.hero h1 span {

  color: #e8c878;

}


.hero p {

  max-width: 650px;

  color: #c9c9c9;

  font-size: 14px;

}


.hero-symbol {

  min-width: 110px;

  width: 110px;

  height: 110px;

  border: 1px solid
    rgba(
      255,
      255,
      255,
      0.15
    );

  border-radius: 24px;

  display: grid;

  place-items: center;

  font-size: 29px;

  font-weight: 900;

  letter-spacing: -0.08em;

  transform: rotate(5deg);

  z-index: 1;

}


.hero-symbol span {

  color: #e8c878;

}


/* =====================================================
   MOBILE PROGRESS
===================================================== */

.mobile-progress {

  display: none;

}


/* =====================================================
   LESSON CARD
===================================================== */

.lesson-card {

  margin-top: 22px;

  background: white;

  border: 1px solid var(--border);

  border-radius: 20px;

  overflow: hidden;

  box-shadow:
    0 8px 30px
    rgba(
      20,
      20,
      20,
      0.035
    );

}


/* Lesson header */

.lesson-header {

  padding: 27px 30px;

  display: flex;

  align-items: flex-start;

  gap: 16px;

}


.step-badge {

  width: 45px;

  height: 45px;

  flex: 0 0 45px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background: var(--red-light);

  color: var(--red);

  font-size: 12px;

  font-weight: 900;

}


.lesson-header h2 {

  margin-top: 3px;

  margin-bottom: 3px;

  font-size:
    clamp(
      22px,
      3vw,
      30px
    );

  line-height: 1.1;

  letter-spacing: -0.035em;

}


.lesson-subtitle {

  color: var(--muted);

  font-size: 13px;

}


/* =====================================================
   VIDEO
===================================================== */

.video-container {

  width: 100%;

  aspect-ratio: 16 / 9;

  background: #111;

}


.video-container iframe {

  width: 100%;

  height: 100%;

  border: 0;

  display: block;

}


/* =====================================================
   LESSON BODY
===================================================== */

.lesson-body {

  padding: 24px 30px 30px;

}


.lesson-body > p {

  color: #4d4d4d;

  font-size: 14px;

  margin-bottom: 20px;

}


/* =====================================================
   RESOURCE BOX
===================================================== */

.resource-box {

  border: 1px solid var(--border);

  border-radius: 15px;

  padding: 18px;

  background: #faf9f6;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;

}


.resource-label {

  color: var(--muted);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.12em;

}


.resource-box h3 {

  margin-top: 4px;

  margin-bottom: 3px;

  font-size: 15px;

}


.resource-box p {

  color: var(--muted);

  font-size: 12px;

}


.resource-arrow {

  color: var(--red);

  font-size: 22px;

}


.prompt-box {

  background: #fbf8ef;

}


.prompt-box .btn {

  flex-shrink: 0;

}


/* =====================================================
   TESTING GRID
===================================================== */

.testing-grid {

  display: grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap: 10px;

  margin-bottom: 22px;

}


.testing-item {

  padding: 15px;

  border: 1px solid var(--border);

  border-radius: 13px;

}


.testing-item > span {

  display: block;

  color: var(--red);

  font-size: 10px;

  font-weight: 900;

}


.testing-item strong {

  display: block;

  font-size: 12px;

  margin-top: 5px;

  margin-bottom: 4px;

}


.testing-item p {

  color: var(--muted);

  font-size: 11px;

}


/* =====================================================
   BUTTONS
===================================================== */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  border-radius: 10px;

  padding: 11px 16px;

  border: 1px solid transparent;

  font-size: 12px;

  font-weight: 800;

  transition:
    transform 0.15s ease,
    background 0.15s ease;

}


.btn:hover {

  transform: translateY(-1px);

}


.btn-primary {

  background: var(--red);

  color: white;

}


.btn-primary:hover {

  background: var(--red-dark);

}


.btn-dark {

  background: var(--black);

  color: white;

}


.btn-light {

  background: white;

  color: var(--black);

  border-color: var(--border);

}


.btn-outline {

  background: white;

  color: var(--black);

  border-color: var(--border);

}


.full-width {

  width: 100%;

}


/* =====================================================
   LESSON ACTIONS
===================================================== */

.lesson-actions {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  flex-wrap: wrap;

}


.watch-link {

  color: var(--muted);

  font-size: 12px;

  font-weight: 700;

}


.btn-completed {

  background: var(--green-light);

  color: var(--green);

  border-color: #c8ead9;

}


/* =====================================================
   PAGINATION
===================================================== */

.lesson-pagination {

  padding: 20px 2px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  color: var(--muted);

  font-size: 11px;

}


.pagination-btn {

  border: 1px solid var(--border);

  background: white;

  color: var(--black);

  border-radius: 9px;

  padding: 9px 13px;

  font-size: 11px;

  font-weight: 800;

}


.pagination-next {

  background: var(--black);

  color: white;

  border-color: var(--black);

}


.pagination-btn:disabled {

  opacity: 0.4;

  cursor: not-allowed;

}


/* =====================================================
   COMPLETION CARD
===================================================== */

.completion-card {

  display: flex;

  align-items: center;

  gap: 18px;

  background: var(--green-light);

  border: 1px solid #d5ebdf;

  border-radius: 18px;

  padding: 23px;

  margin-bottom: 22px;

}


.completion-icon {

  width: 45px;

  height: 45px;

  flex: 0 0 45px;

  border-radius: 50%;

  background: var(--green);

  color: white;

  display: grid;

  place-items: center;

  font-weight: 900;

}


.completion-card h2 {

  margin-top: 3px;

  margin-bottom: 3px;

  font-size: 20px;

  letter-spacing: -0.03em;

}


.completion-card p:last-child {

  color: #547263;

  font-size: 12px;

}


/* =====================================================
   SUPPORT SECTION
===================================================== */

.support-section {

  margin-top: 8px;

  padding: 28px;

  background: white;

  border: 1px solid var(--border);

  border-radius: 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

}


.support-section h2 {

  margin-top: 4px;

  margin-bottom: 5px;

  font-size: 22px;

  letter-spacing: -0.035em;

}


.support-section p:last-child {

  max-width: 610px;

  color: var(--muted);

  font-size: 12px;

}


.support-actions {

  display: flex;

  gap: 9px;

  flex-wrap: wrap;

  flex-shrink: 0;

}


/* =====================================================
   FOOTER
===================================================== */

.footer {

  background: white;

  border-top: 1px solid var(--border);

}


.footer-inner {

  min-height: 70px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: var(--muted);

  font-size: 10px;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {


  .main-layout {

    grid-template-columns: 1fr;

  }


  .sidebar {

    position: static;

  }


  .lesson-navigation {

    grid-template-columns:
      repeat(
        4,
        1fr
      );

  }


  .lesson-nav-item {

    grid-template-columns: 1fr;

    justify-items: center;

    text-align: center;

    padding: 9px 5px;

  }


  .lesson-nav-content strong {

    font-size: 10px;

  }


  .lesson-nav-content small {

    display: none;

  }


  .support-card {

    display: none;

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 640px) {


  .container {

    width:
      calc(
        100% - 24px
      );

  }


  .topbar-inner {

    min-height: 66px;

  }


  .brand img {

    width: 36px;

    height: 36px;

  }


  .brand-text strong {

    font-size: 13px;

  }


  .brand-text span {

    font-size: 10px;

  }


  .support-mini {

    font-size: 11px;

  }


  .main-layout {

    padding-top: 12px;

    padding-bottom: 35px;

    gap: 12px;

  }


  .sidebar {

    display: none;

  }


  .mobile-progress {

    display: block;

    padding:
      2px
      2px
      12px;

  }


  .hero {

    padding:
      25px
      22px;

    border-radius: 17px;

  }


  .hero h1 {

    font-size: 30px;

  }


  .hero p {

    font-size: 12px;

  }


  .hero-symbol {

    display: none;

  }


  .lesson-card {

    margin-top: 8px;

    border-radius: 16px;

  }


  .lesson-header {

    padding: 20px;

  }


  .step-badge {

    width: 39px;

    height: 39px;

    flex-basis: 39px;

  }


  .lesson-body {

    padding:
      19px
      20px
      22px;

  }


  .resource-box {

    align-items: flex-start;

    flex-direction: column;

  }


  .resource-arrow {

    display: none;

  }


  .testing-grid {

    grid-template-columns: 1fr;

  }


  .lesson-actions {

    align-items: stretch;

    flex-direction: column-reverse;

  }


  .lesson-actions .btn {

    width: 100%;

  }


  .watch-link {

    text-align: center;

  }


  .lesson-pagination {

    padding:
      13px
      1px;

  }


  .lesson-pagination > span {

    display: none;

  }


  .support-section {

    padding: 21px;

    align-items: flex-start;

    flex-direction: column;

  }


  .support-actions {

    width: 100%;

  }


  .support-actions .btn {

    flex: 1;

  }


  .footer-inner {

    min-height: 62px;

    flex-direction: column;

    justify-content: center;

    gap: 2px;

  }

}