.wafm-panel { width: min(1120px, 100%); margin: 0 auto; padding: clamp(20px, 4vw, 48px); background: #fff; border-radius: 12px; color: #212327; }
.wafm-panel .woocommerce form .form-row input.input-text, .wafm-panel .woocommerce form .form-row textarea { width: 100%; min-height: 44px; border: 1px solid #9ca0ac; padding: 10px 12px; border-radius: 5px; background: #fff; color: #212327; }
.wafm-panel .woocommerce button.button, .wafm-panel .woocommerce a.button { background: #f9cd51; color: #212327; border: 1px solid #f9cd51; border-radius: 8px; padding: 12px 22px; }
.wafm-panel .woocommerce button.button:hover, .wafm-panel .woocommerce a.button:hover { background: #ffe08a; color: #212327; }
.wafm-panel .woocommerce table { width: 100%; }
.wafm-panel .woocommerce form { margin-top: 16px; }
.wafm-account-nav { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 20px; padding: 10px 16px; font-size: 16px; line-height: 1.4; }
.wafm-account-nav a { color: #fff; text-decoration: none; }
.wafm-account-nav a:hover { color: #f9cd51; }
.wafm-account-nav .wafm-account-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 10px 16px; border: 1px solid #f9cd51; border-radius: 8px; background: #f9cd51; color: #212327; }
.wafm-account-nav .wafm-account-button:hover { background: #ffe08a; color: #212327; }
.wafm-account-nav .wafm-account-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 767px) {
  .wafm-panel .woocommerce .col2-set .col-1, .wafm-panel .woocommerce .col2-set .col-2,
  .wafm-panel .woocommerce .form-row-first, .wafm-panel .woocommerce .form-row-last { float: none; width: 100%; }
  .wafm-panel .woocommerce table.shop_table { font-size: 14px; }
}

.wafm-page-wrap { width: min(1120px, calc(100% - 32px)); margin: 32px auto; }
.wafm-register-form { max-width: 820px; }
.wafm-register-form .form-row { box-sizing: border-box; margin-bottom: 16px; }
.wafm-register-form .form-row-wide { clear: both; width: 100%; }
.wafm-register-form .select2-container { width: 100% !important; }
.wafm-register-form .select2-selection { min-height: 44px; padding-top: 7px; }
.wafm-register-form button[type="submit"] { margin-top: 8px; }
.wafm-register-link, .wafm-login-link { margin-top: 18px; }

/* WAFM nav alignment: centre the account buttons on the My Profile button (desktop only) */
@media (min-width: 1025px) { .wafm-account-nav { padding-right: 93px; } }

/* === WAFM mobile fixes === */
body { background-color: #4a4a4a; }
#inner-body { min-height: 100vh; }
@media (max-width: 767px) {
  .tutor-card .tutor-card-body, .tutor-card .tutor-card-footer,
  .tutor-card-md .tutor-card-body, .tutor-card-md .tutor-card-footer { padding-left: 16px; padding-right: 16px; }
  /* stray 30px right margin left content 28px short of the sidebar card */
  .elementor-widget-wrap.elementor-element-populated { margin-right: 0 !important; }
  .wafm-page-wrap { width: calc(100% - 16px); margin: 16px auto; }
  .wafm-panel { padding: 16px 10px; }
}
/* === end WAFM mobile fixes === */

/* === WAFM hero imagery === */
@media (min-width: 1025px) {
  body.home img[src*="Sun"],
  body.home img[src*="Man-702"],
  body.home .elementor-element-a428fb5 { transform: translateY(180px); }
}
/* === end WAFM hero imagery === */

/* === WAFM dashboard Benefits icon === */
li.tutor-dashboard-menu-wafm_benefits > a::before {
  content: ''; display: block; width: 20px; height: 20px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* === end WAFM dashboard Benefits icon === */

/* === WAFM mobile gutters === */
@media (max-width: 767px) {
  .aux-container.aux-fold { padding-left: 8px !important; padding-right: 8px !important; }
  .e-con:has(> .e-con-inner > .elementor-element-wafmpnl),
  .e-con:has(> .elementor-element-wafmpnl) {
    --padding-inline-start: 0px; --padding-inline-end: 0px;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .elementor-element.elementor-element-wafmpnl {
    --padding-inline-start: 10px; --padding-inline-end: 10px;
    --padding-block-start: 16px; --padding-block-end: 16px;
    padding: 16px 10px !important;
  }
  .wafm-account-nav { justify-content: center; gap: 10px; padding-left: 10px; padding-right: 10px; }
}
/* === end WAFM mobile gutters === */

/* === WAFM course panel width === */
@media (max-width: 767px) { .elementor-element-3e44c1e5 > .elementor-widget-container { padding-left: 0 !important; padding-right: 0 !important; } }
/* === end WAFM course panel width === */

/* === WAFM home full-bleed (mobile) === */
@media (max-width: 767px) {
  body.home .aux-container.aux-fold { padding-left: 0 !important; padding-right: 0 !important; }
  body.home .elementor-91 .e-con {
    --padding-inline-start: 0px; --padding-inline-end: 0px;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  body.home img[src*="Man-1"] { transform: translateY(-4px); }
  body.home .elementor-element-04436bd::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background-image: url("https://wateraerobicsformen.co.za/wp-content/uploads/2026/01/Background-BG-1922-x-738-px.png");
    background-size: cover; background-position: 100% 50%; background-repeat: no-repeat;
  }
  body.home .elementor-91 .elementor-widget-button > .elementor-widget-container { padding-left: 0; }
  body.home .elementor-91 .elementor-widget-button .elementor-button-wrapper { text-align: center; margin-top: 18px; }
}
/* === end WAFM home full-bleed === */

/* === WAFM course tabs ===
   Tutor renders .tutor-nav-link white, but the card behind it is white too,
   so Course Info / Reviews were invisible at every width.
   The Elementor Tutor widget prints an inline rule at the same specificity with
   !important, so this needs the extra .tutor-nav-item to outrank it. */
.tutor-nav .tutor-nav-item .tutor-nav-link,
.tutor-nav .tutor-nav-item .tutor-dropdown-item { color: #212327 !important; }
.tutor-nav .tutor-nav-item .tutor-nav-link:hover,
.tutor-nav .tutor-nav-item .tutor-nav-link:focus,
.tutor-nav .tutor-nav-item .tutor-dropdown-item:hover { color: #000 !important; }
.tutor-nav .tutor-nav-item .tutor-nav-link.is-active { color: #212327 !important; }
/* === end WAFM course tabs === */

/* === WAFM course title indent ===
   Section titles sat flush at the container edge while accordion content is
   indented ~20px, so they read as pinned to the screen. Tablet and mobile only. */
@media (max-width: 1024px) {
  .tutor-course-details-widget-title,
  .tutor-course-content-title { padding-left: 20px; }
  /* Tutor sets .tutor-course-details-widget ul{padding-left:0} at (0,2,0) */
  .tutor-course-details-widget ul.etlms-course-widget-list-items { padding-left: 20px; }
  /* pull the label closer to the tick without moving the tick itself */
  /* Tutor puts padding-right:8px on the icon span (21px box around a 13px glyph) */
  .etlms-course-widget-list-item .tutor-list-icon { padding-right: 0 !important; margin-right: 4px !important; }
}
/* === end WAFM course title indent === */

/* === WAFM checkout dropdown height ===
   Select2 renders the country and province boxes at 28px while the text
   inputs beside them are 44px. Doubled to 56px as requested. */
body.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 56px; display: flex; align-items: center;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 56px;
}
/* === end WAFM checkout dropdown height === */

/* === WAFM registration selects ===
   Country overflowed the panel and Province rendered at part width, while the
   text inputs beside them are full width. Constrain both to the form width. */
@media (max-width: 1024px) {
  .wafm-panel .select2-container,
  .wafm-panel select,
  .wafm-panel .woocommerce-input-wrapper {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  }
}
/* === end WAFM registration selects === */

/* === WAFM registration button ===
   The panel form has no .woocommerce ancestor, so the existing yellow button
   rule never matched it. Site palette: yellow #f9cd51, link blue #1bb0ce. */
.wafm-panel button.woocommerce-Button,
.wafm-panel button[name="register"] {
  background: #f9cd51; color: #212327; border: 1px solid #f9cd51;
  border-radius: 8px; padding: 12px 22px; min-height: 44px; font-weight: 600;
  cursor: pointer;
}
.wafm-panel button.woocommerce-Button:hover,
.wafm-panel button[name="register"]:hover { background: #ffe08a; color: #212327; }
.wafm-panel .wafm-login-link a { color: #1bb0ce; }
@media (max-width: 1024px) {
  .wafm-panel .woocommerce-form-row,
  .wafm-panel .wafm-login-link { text-align: center; }
  .wafm-panel button[name="register"] { width: 100%; }
}
/* === end WAFM registration button === */

/* === WAFM form wave ===
   Brand wave inside the form panel itself (login, registration, account,
   checkout), matched via :has-free .wafm-panel. overflow:hidden keeps it
   within the panel radius. Mobile and tablet only. */
@media (max-width: 1024px) {
  /* .elementor-element.elementor-element-wafmpnl sets padding !important at (0,2,0),
     and Elementor .e-con sets overflow from a later stylesheet, so match (0,2,0) */
  /* logged out the panel is a bare div.wafm-panel; logged in it is also an
     Elementor container, so both forms must be covered */
  .wafm-panel,
  .elementor-element.wafm-panel {
    position: relative; overflow: hidden !important; padding-bottom: 125px !important;
  }
  .wafm-panel::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 115px;
    background-image: url("https://wateraerobicsformen.co.za/wp-content/uploads/2026/01/Background-BG-1922-x-738-px.png");
    background-size: 100% 100%; background-position: 50% 100%;
    background-repeat: no-repeat; pointer-events: none;
  }
}
/* === end WAFM form wave === */

/* === WAFM CTA button ===
   Shared yellow CTA used by View Benefits (home) and View Course (benefits). */
.wafm-cta-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; box-sizing: border-box; padding: 12px 22px;
  border: 1px solid #f9cd51; border-radius: 8px;
  background: #f9cd51; color: #212327; text-decoration: none; font-weight: 600;
}
.wafm-cta-button:hover, .wafm-cta-button:focus { background: #ffe08a; color: #212327; }
.wafm-benefits-cta { margin: 0 0 12px; }
@media (max-width: 1024px) {
  .wafm-benefits-cta { text-align: center; }
}
/* === end WAFM CTA button === */

/* WAFM course sidebar CTA */
.tutor-sidebar-card .wafm-benefits-cta {
  margin: 24px 0 0;
}

.tutor-sidebar-card .wafm-cta-button {
  display: flex;
  width: 100%;
}

/* === WAFM benefits page ===
   White panel with the brand wave inside it, at every breakpoint, plus a
   responsive card grid for the benefit list. Declared after the shared
   "form wave" block so it wins on equal specificity. */
.wafm-benefits-panel {
  position: relative;
  overflow: hidden !important;
  padding-bottom: 150px !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.wafm-benefits-panel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  background-image: url("https://wateraerobicsformen.co.za/wp-content/uploads/2026/01/Background-BG-1922-x-738-px.png");
  background-size: 100% 100%;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.wafm-benefits-panel .wafm-benefits-eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1bb0ce;
}

.wafm-benefits-panel .wafm-benefits-heading {
  margin: 0 0 12px;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.15;
  color: #212327;
}

.wafm-benefits-panel .wafm-benefits-intro {
  margin: 0 0 28px;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: #4a4a4a;
}

.wafm-benefits-panel .wafm-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.wafm-benefits-panel .wafm-benefits-grid li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  list-style: none;
  background: #f7f9fb;
  border: 1px solid #e6ebf0;
  border-radius: 10px;
  color: #212327;
  font-weight: 600;
  line-height: 1.3;
}

.wafm-benefits-panel .wafm-benefits-grid li::before {
  content: '\2713';
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1bb0ce;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.wafm-benefits-panel .wafm-benefits-cta {
  margin: 0;
  text-align: center;
}

@media (max-width: 600px) {
  .wafm-benefits-panel {
    padding-bottom: 125px !important;
  }
  .wafm-benefits-panel::after {
    height: 105px;
  }
  .wafm-benefits-panel .wafm-benefits-grid {
    grid-template-columns: 1fr;
  }
  .wafm-benefits-panel .wafm-benefits-cta {
    text-align: center;
  }
  .wafm-benefits-panel .wafm-cta-button {
    width: 100%;
  }
}
/* === end WAFM benefits page === */

/* === WAFM legal pages ===
   Privacy policy and terms reuse the benefits panel (white card + wave) and
   add readable long-form typography inside it. */
.wafm-legal-panel .wafm-legal {
  max-width: 78ch;
}

.wafm-legal-panel .wafm-legal-meta {
  margin: 0 0 24px;
  font-size: 14px;
  color: #9ca0ac;
}

.wafm-legal-panel .wafm-legal h3 {
  margin: 28px 0 8px;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.25;
  color: #212327;
}

.wafm-legal-panel .wafm-legal p {
  margin: 0 0 14px;
  font-size: clamp(15px, 1.5vw, 16px);
  line-height: 1.65;
  color: #4a4a4a;
}

.wafm-legal-panel .wafm-legal ul {
  margin: 0 0 16px;
  padding-left: 20px;
  color: #4a4a4a;
  line-height: 1.65;
}

.wafm-legal-panel .wafm-legal li {
  margin: 0 0 6px;
}

.wafm-legal-panel .wafm-legal strong {
  color: #212327;
}

.wafm-legal-panel .wafm-legal a {
  color: #1bb0ce;
}

.wafm-legal-panel .wafm-benefits-cta {
  margin-top: 8px;
}
/* === end WAFM legal pages === */

/* === WAFM course footer ===
   Thin legal strip printed by wp_footer on the single course page only. */
.wafm-course-footer {
  padding: 10px 16px;
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.wafm-course-footer-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 18px;
  font-size: 13px;
  line-height: 1.4;
  color: #9ca0ac;
}

.wafm-course-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.wafm-course-footer-links a {
  color: #9ca0ac;
  text-decoration: none;
}

.wafm-course-footer-links a:hover,
.wafm-course-footer-links a:focus {
  color: #f9cd51;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .wafm-course-footer-inner {
    justify-content: center;
    text-align: center;
  }
}
/* === end WAFM course footer === */

/* === WAFM draft notice ===
   Small flag at the top of the legal pages while the wording is not final. */
.wafm-legal-panel .wafm-legal-notice {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid #f2dfa6;
  border-left: 4px solid #f9cd51;
  border-radius: 8px;
  background: #fffaec;
  font-size: 14px;
  line-height: 1.55;
  color: #4a4a4a;
}

.wafm-legal-panel .wafm-legal-notice strong {
  color: #212327;
}
/* === end WAFM draft notice === */

/* === WAFM checkout terms ===
   WooCommerce embeds the entire terms page inside a scroll box on checkout.
   Strip the page's panel chrome, wave and CTA so only the wording shows. */
.woocommerce-terms-and-conditions {
  padding: 12px 14px;
  border: 1px solid #e6ebf0;
  border-radius: 8px;
  background: #f7f9fb;
}

.woocommerce-terms-and-conditions .wafm-panel {
  width: 100%;
  margin: 0;
  padding: 0 !important;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible !important;
}

.woocommerce-terms-and-conditions .wafm-benefits-panel::after {
  content: none;
}

.woocommerce-terms-and-conditions .wafm-benefits-eyebrow,
.woocommerce-terms-and-conditions .wafm-benefits-heading,
.woocommerce-terms-and-conditions .wafm-benefits-cta {
  display: none;
}

.woocommerce-terms-and-conditions .wafm-legal {
  max-width: none;
}

.woocommerce-terms-and-conditions .wafm-legal h3 {
  margin: 18px 0 6px;
  font-size: 16px;
}

.woocommerce-terms-and-conditions .wafm-legal p,
.woocommerce-terms-and-conditions .wafm-legal ul,
.woocommerce-terms-and-conditions .wafm-legal-notice {
  font-size: 14px;
}

.wafm-panel .woocommerce-terms-and-conditions-wrapper {
  margin-top: 10px;
}

.wafm-panel .woocommerce-terms-and-conditions-checkbox-text {
  color: #212327;
}

.wafm-panel .woocommerce-terms-and-conditions-link {
  color: #1bb0ce;
}
/* === end WAFM checkout terms === */