/* Magical LifeSkills — harmonize legacy markup site-wide */

.m7-page-shell,
.clsbody {
  min-height: 50vh;
}

/* Fixed header offset */
.m7-page-shell > .container:first-child,
.m7-page-shell > .container-fluid:first-child,
.clsbody > .container:first-child,
.clsbody > .container-fluid:first-child,
body.centered-nav > .demo:first-child,
body.centered-nav > section:first-of-type,
body.centered-nav > .m7-pricing-page {
  padding-top: 5.5rem;
}

.m7-reg-body .m7-reg-page,
.m7-home,
.m7-sel-page,
main[class*="m7-"] {
  padding-top: 0;
}

/* Typography */
.m7-page-shell h1,
.m7-page-shell h2,
.m7-page-shell h3,
.m7-page-shell .homepage_h3,
.m7-page-shell .about-title,
.clsbody h1,
.clsbody h2,
.clsbody h3,
.clsbody .homepage_h3,
.clsbody .about-title {
  font-family: var(--m7-font-display) !important;
  color: var(--m7-ink) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.m7-page-shell .homepage_h3,
.clsbody .homepage_h3 {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem) !important;
  margin-bottom: 1rem !important;
}

.m7-page-shell p,
.m7-page-shell .homepage_p,
.m7-page-shell li,
.clsbody p,
.clsbody .homepage_p,
.clsbody li {
  font-family: var(--m7-font-sans) !important;
  color: var(--m7-muted);
  font-weight: 600;
  line-height: 1.65;
}

.m7-page-shell a:not(.m7-btn):not(.m7-plan-card__buy):not(.free_trial_1):not(.m7-cta),
.clsbody a:not(.m7-btn):not(.m7-plan-card__buy):not(.free_trial_1):not(.m7-cta) {
  color: var(--m7-sky);
  font-weight: 700;
}

/* Legacy CTA buttons */
.m7-page-shell a[style*="background-color"],
.clsbody a[style*="background-color"],
.m7-page-shell .btn_start,
.m7-page-shell .btn2_start,
.clsbody .btn_start,
.clsbody .btn2_start {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--m7-font-sans) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  border-radius: var(--m7-radius-pill) !important;
  padding: 0.75rem 1.5rem !important;
  background: linear-gradient(135deg, var(--m7-coral), #ff8e53) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.m7-page-shell a[style*="background-color"]:hover,
.clsbody a[style*="background-color"]:hover,
.m7-page-shell .btn_start:hover,
.clsbody .btn_start:hover {
  transform: translateY(-2px);
  color: #fff !important;
}

/* Bootstrap forms */
.m7-page-shell .form-control,
.clsbody .form-control,
.m7-page-shell select.form-control,
.clsbody select.form-control {
  font-family: var(--m7-font-sans) !important;
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--m7-ink) !important;
  border: 1.5px solid rgba(99, 179, 237, 0.28) !important;
  border-radius: 14px !important;
  padding: 0.65rem 0.9rem !important;
  box-shadow: none !important;
  background: #fff !important;
  min-height: 46px;
}

.m7-page-shell .form-control:focus,
.clsbody .form-control:focus {
  border-color: var(--m7-sky) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.2) !important;
}

.m7-page-shell .form-group label,
.m7-page-shell .control-label,
.clsbody .form-group label,
.clsbody .control-label {
  font-family: var(--m7-font-sans) !important;
  font-weight: 700 !important;
  color: var(--m7-ink) !important;
  margin-bottom: 0.35rem;
}

.m7-page-shell .btn-primary,
.m7-page-shell .btn-info,
.clsbody .btn-primary,
.clsbody .btn-info {
  font-family: var(--m7-font-sans) !important;
  font-weight: 700 !important;
  border-radius: var(--m7-radius-pill) !important;
  border: none !important;
  background: linear-gradient(135deg, var(--m7-coral), #ff8e53) !important;
  padding: 0.65rem 1.25rem !important;
}

.m7-page-shell .panel,
.clsbody .panel {
  border: 1.5px solid rgba(99, 179, 237, 0.18) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden;
}

.m7-page-shell .panel-heading,
.clsbody .panel-heading {
  font-family: var(--m7-font-display) !important;
  background: linear-gradient(135deg, rgba(255, 154, 158, 0.12), rgba(161, 196, 253, 0.12)) !important;
  border-bottom: 1px solid rgba(99, 179, 237, 0.12) !important;
  color: var(--m7-ink) !important;
}

/* Account / dashboard cards */
.m7-page-shell .email-signature,
.clsbody .email-signature {
  background: #fff !important;
  border: 1.5px solid rgba(183, 148, 244, 0.2) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
  margin-bottom: 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.m7-page-shell .email-signature:hover,
.clsbody .email-signature:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12) !important;
}

.m7-page-shell .email-signature .title,
.clsbody .email-signature .title {
  font-family: var(--m7-font-display) !important;
  color: var(--m7-ink) !important;
}

.m7-page-shell .email-signature .signature-icon,
.clsbody .email-signature .signature-icon {
  color: var(--m7-coral) !important;
}

/* Legacy pricing tables */
.m7-page-shell .pricingTable,
.clsbody .pricingTable {
  border: 1.5px solid rgba(99, 179, 237, 0.2) !important;
  border-radius: 24px !important;
  box-shadow: var(--m7-shadow) !important;
  background: #fff !important;
  height: auto !important;
  min-height: 0 !important;
  float: none !important;
  overflow: hidden;
}

.m7-page-shell .pricingTable .title,
.clsbody .pricingTable .title {
  font-family: var(--m7-font-display) !important;
  color: var(--m7-ink) !important;
}

.m7-page-shell .pricingTable-signup .read,
.clsbody .pricingTable-signup .read {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--m7-font-sans) !important;
  font-weight: 700 !important;
  border-radius: var(--m7-radius-pill) !important;
  background: linear-gradient(135deg, var(--m7-coral), #ff8e53) !important;
  color: #fff !important;
  padding: 0.75rem 1.5rem !important;
  position: static !important;
  text-decoration: none !important;
}

/* Marketing sections (about, partners, blog) */
.m7-page-shell .about-section,
.m7-page-shell .get-started,
.m7-page-shell .aboutskill,
.clsbody .about-section,
.clsbody .get-started,
.clsbody .aboutskill {
  padding: 2rem 0;
}

.m7-page-shell .about-section h1,
.m7-page-shell .about-section h2,
.clsbody .about-section h1,
.clsbody .about-section h2 {
  color: var(--m7-ink) !important;
}

.m7-page-shell .tACenter[style*="F16101"],
.clsbody .tACenter[style*="F16101"] {
  color: var(--m7-coral-strong) !important;
}

/* Curriculum skill boxes */
.m7-page-shell .icon_hvr_img_box,
.clsbody .icon_hvr_img_box {
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  transition: transform 0.2s ease;
}

.m7-page-shell .icon_hvr_img_box:hover,
.clsbody .icon_hvr_img_box:hover {
  transform: translateY(-4px);
}

/* Payment status pages */
.m7-page-shell .payment-success,
.m7-page-shell .payment-failure,
.clsbody .payment-success,
.clsbody .payment-failure {
  max-width: 640px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 24px;
  border: 1.5px solid rgba(99, 179, 237, 0.18);
  box-shadow: var(--m7-shadow);
  text-align: center;
}

/* Hide broken legacy gift header if any remain */
.site-navbar.site-navbar-target {
  display: none !important;
}

/* Cookie banner */
.cookiealert {
  font-family: var(--m7-font-sans) !important;
  border-radius: 16px 16px 0 0 !important;
}

.cookiealert .btn-primary {
  border-radius: var(--m7-radius-pill) !important;
}

@media (max-width: 767px) {
  .m7-page-shell > .container:first-child,
  .clsbody > .container:first-child {
    padding-top: 4.75rem;
  }
}

/* ── Blog & legacy marketing prose (visual harmonization) ── */
.clsbody > section.about-section,
.clsbody > section.aboutskill,
.clsbody > section.get-started {
  max-width: min(1100px, calc(100% - 2rem));
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1.25rem;
  padding: 2rem 1.5rem !important;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 24px;
  border: 1.5px solid rgba(99, 179, 237, 0.12);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.clsbody > section.about-section:first-of-type,
.clsbody > section.aboutskill:first-of-type {
  margin-top: 0.5rem;
}

.clsbody .aboutskill__content {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.clsbody .aboutskill__desc {
  flex: 1 1 280px;
}

.clsbody .aboutskill__desc img,
.clsbody .aboutskill__content img.img-fluid {
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.clsbody h1.tACenter,
.clsbody h1[style*="F16101"],
.clsbody h2[style*="F16101"],
.clsbody h3[style*="F16101"] {
  font-family: var(--m7-font-display) !important;
  color: var(--m7-coral-strong) !important;
  font-weight: 700 !important;
}

.clsbody h3[style*="color: blue"],
.clsbody h3[style*="color:blue"] {
  color: var(--m7-sky) !important;
  font-family: var(--m7-font-display) !important;
}

.clsbody .btn-primary.buynow,
.clsbody a.btn-primary,
.clsbody .btn.buynow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--m7-font-sans) !important;
  font-weight: 700 !important;
  border-radius: var(--m7-radius-pill) !important;
  padding: 0.75rem 1.5rem !important;
  background: linear-gradient(135deg, var(--m7-coral), #ff8e53) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clsbody .btn-primary.buynow:hover,
.clsbody a.btn-primary:hover {
  transform: translateY(-2px);
  color: #fff !important;
}

/* Legacy loading overlays inside m7 body */
body.m7-body #loading:not(.m7-page-loader),
body.m7-body .loading[style*="loading_icon"] {
  background: rgba(255, 248, 240, 0.92) !important;
  background-image: none !important;
  backdrop-filter: blur(8px);
}

/* Tables in legacy content */
.clsbody table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid rgba(99, 179, 237, 0.15);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.clsbody table th {
  background: linear-gradient(135deg, rgba(255, 154, 158, 0.12), rgba(161, 196, 253, 0.12));
  font-family: var(--m7-font-display) !important;
  color: var(--m7-ink) !important;
}

/* Split sections on marketing pages */
.m7-split {
  align-items: center;
  gap: 2.5rem;
}

.m7-split__img {
  width: 100%;
  height: auto;
  display: block;
}

.m7-split__img--banner {
  border-radius: clamp(16px, 2vw, 24px);
}

/* ── Marketing mode (no style.css / magical_seven_style) ── */
body.m7-body.m7-page-shell,
body.m7-body > .m7-page-shell {
  overflow-x: hidden;
}

.m7-page-shell img,
main[class*="m7-"] img {
  max-width: 100%;
  height: auto;
}

.m7-page-shell .section-title,
.clsbody .section-title {
  font-family: var(--m7-font-display) !important;
  color: var(--m7-ink) !important;
}

.m7-page-shell .row::before,
.m7-page-shell .row::after,
.clsbody .row::before,
.clsbody .row::after {
  display: table;
  content: " ";
}

.m7-page-shell .clearfix::after,
.clsbody .clearfix::after {
  clear: both;
  display: table;
  content: " ";
}

/* Blog prose utilities (replaces studentparentstyle.css on blog pages) */
.clsbody .featured p,
.clsbody .lH20 li strong {
  color: var(--m7-coral-strong) !important;
}

.clsbody ul.lH40 li {
  line-height: 2.5;
}

.clsbody ul.lH20 li {
  line-height: 1.45;
}

.clsbody .fWBold {
  font-weight: 700;
}

.clsbody .nopad {
  color: var(--m7-ink);
  text-align: justify;
}

.clsbody .category_heading1 {
  text-align: center;
  color: var(--m7-coral-strong) !important;
}

.clsbody .tACenter {
  text-align: center;
}

.clsbody .lSDisc {
  list-style: disc;
}

.clsbody .get-started-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.92), rgba(255, 142, 83, 0.88));
}

.clsbody .get-started-content p {
  font-size: 1.15rem;
  color: #fff !important;
  margin-bottom: 1rem;
  font-weight: 600;
}

.clsbody .get-started-content .buynow {
  background: #fff !important;
  color: var(--m7-coral-strong) !important;
  padding: 0.85rem 2rem !important;
}

.clsbody section.aboutskill li,
.clsbody section.about-section li {
  font-size: 1rem;
}

.clsbody section.aboutskill p,
.clsbody section.about-section p {
  font-size: 1rem;
}