/* Basic reset for margin and padding */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Style the container */
.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
}

/* Style the date input box */
input[type="date"] {
    width: 100%;
    max-width: 300px;
    height: 40px;
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ===============================
   GLOBAL BUTTON BASE (SAFE)
================================ */

/* Base button styles */
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
  height: 40px;
  font-size: 16px;
  padding: 0 20px;
  background-color: #fdbdbc;
  color: #222;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover state FIX — keeps text visible */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
  background-color: #fdaeb4;
  color: #222; /* CRITICAL FIX */
}

/* ===============================
   FIX ELEMENTOR / THEME HOVER OVERRIDES
================================ */
button:hover,
button:focus {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* ===============================
   OPTIONAL: CTA BUTTON CLASS
================================ */
.ms-cta {
  background-color: #fdbdbc !important;
  color: #222 !important;
}

.ms-cta:hover {
  background-color: #fdaeb4 !important;
  color: #222 !important;
}

/* Style for the recital plan */
#recital-plan h3 {
    color: #333;
    font-size: 18px;
    margin-top: 20px;
}

#recital-plan ul {
    list-style-type: none;
    padding-left: 0;
}

#recital-plan li {
    margin-bottom: 8px;
    font-size: 14px;
}
/* Fix WooCommerce add-to-cart hover so it doesn't disappear */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: #ffe7e6!important; /* Set to your preferred brand color */
    color: #fff !important; /* Keep text readable */
    opacity: 1 !important; /* Prevent fading */
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
}
.pmpro-lesson-nav a {
  background:#333;
  color:#fff;
  padding:8px 14px;
  border-radius:6px;
  text-decoration:none;
}
.pmpro-lesson-nav a:hover {
  background:#000;
}
/* 1) Make the PMPro lesson status area show up on mobile */
@media (max-width: 768px) {
  .pmpro_courses_lesson-status {
    display: flex !important;
    align-items: center;
    gap: 0.5em;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Make sure the checkbox itself is visible and clickable */
  .pmpro_courses_lesson-status input[type="checkbox"] {
    display: inline-block !important;
    width: 1.1em;
    height: 1.1em;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .pmpro_courses_lesson-status label {
    display: inline-block !important;
    pointer-events: auto !important;
  }
}
.spp-pmpro-lessonlist{
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:16px;
  margin:16px 0;
}
.spp-pmpro-lessonlist__title{ margin-bottom:10px; }
.spp-pmpro-lessonlist__items{ margin:0; padding-left:18px; }
.spp-pmpro-lessonlist__item{ margin:6px 0; }
.spp-pmpro-lessonlist__item a{ text-decoration:none; }
.spp-pmpro-lessonlist__item.is-current a{
  font-weight:700;
  text-decoration:underline;
}