/**
 * Excel Man - enrolment journey polish (2026-10-21)
 *
 * Covers the path a learner takes to buy a course:
 *   /courses/  ->  single course  ->  sign-in modal  ->  /cart/  ->  /checkout/
 * plus two site-wide layout faults found on the same walk-through.
 *
 * Loaded after every other theme and Tutor stylesheet (see
 * excelman_journey_assets() in functions.php), so most rules win on cascade
 * order alone. The !important flags that remain each answer an !important
 * already sitting in style.css or an inline style attribute; they are noted
 * where they occur.
 *
 * Palette is the site's own: accent #388E3C, hover #2E7D32, tint #e8f5e9,
 * line #e8ece8, 16px card radius (see courses.css tokens).
 */

/* ============================================================
   1. SITE-WIDE
   ============================================================ */

/* .site is a flex column, so .site-main (max-width 1200px, margin auto) is
   centred at its shrink-to-fit width instead of filling the column. Every
   page.php page whose content is narrower than the container collapsed:
   /questions/ rendered 557px wide, /checkout/ 988px. courses.css fixed this
   for the course archive only; this is the general case. */
.site > .site-main {
  width: 100%;
}

/* Tutor's primary colour is set to its default blue in Tutor settings and
   printed inline on :root. It leaked onto chevrons, links and focus rings
   across every course screen. :root:root outranks Tutor's :root rule. */
:root:root {
  --tutor-color-primary: #388E3C;
  --tutor-color-primary-rgb: 56, 142, 60;
  --tutor-color-primary-hover: #2E7D32;
}

/* page.php sets `.page-main .page-body { padding-top: 40px }` to sit closer
   under its hero, but style.css's later `.home-section { padding: 72px 24px
   !important }` cancelled it, leaving 100px between the hero and the content
   on every generic page (questions, checkout, dashboard...). Restores the
   intended spacing. */
.page-main > .page-body.home-section {
  padding-top: 40px !important;
}

@media (max-width: 767px) {
  .page-main > .page-body.home-section {
    padding: 24px 0 48px !important;
  }
}

/* The floating pill header sits at top:0 and slid under the WordPress
   toolbar for logged-in admins and instructors. */
@media (min-width: 783px) {
  body.admin-bar .header-float-wrap {
    top: 32px;
  }
}

@media (min-width: 768px) and (max-width: 782px) {
  body.admin-bar .header-float-wrap {
    top: 46px;
  }
}

/* WooCommerce tables inside page.php content. style.css makes every
   `.page-prose table` display:block (so long reference tables can scroll),
   which shrank order, download and account tables to the width of their
   text - the order total sat in a 225px box inside a 1100px card. */
@media (min-width: 768px) {
  .page-prose .woocommerce table.shop_table,
  .page-prose .woocommerce table.woocommerce-table {
    display: table;
    width: 100%;
  }
}

/* Keep the floating helper-bot button off the copyright line. */
@media (min-width: 768px) {
  .footer-bottom-inner {
    padding-right: 96px;
  }
}

/* ============================================================
   2. COURSE ARCHIVE  (/courses/)
   main's 28px margin + the section's 72px padding left a 100px gap between
   the hero and the first row of cards; on a phone three nested paddings
   (16 + 24 + 12px) squeezed each card to 271px of a 375px screen.
   ============================================================ */
body.post-type-archive-courses .site-main.page-main,
body.tax-course-category .site-main.page-main,
body.tax-course-tag .site-main.page-main {
  margin-top: 0;
}

/* !important answers style.css's global `.home-section { padding: 72px 24px
   !important }`. */
.tutor-archive-body.home-section {
  padding-top: 40px !important;
}

@media (max-width: 767px) {
  .tutor-archive-body.home-section {
    padding: 24px 0 40px !important;
  }

  .tutor-archive-body .tutor-col-12 {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================
   3. SINGLE COURSE PAGE
   ============================================================ */

/* Breathing room under the floating header. Tutor's wrap carried 104px,
   which cleared the 87px header by only 17px on desktop and stacked on top
   of the app bar's own offset on phones. */
.single-courses .tutor-wrap.tutor-course-top-info {
  padding-top: 128px;
}

@media (max-width: 767px) {
  .single-courses .tutor-wrap.tutor-course-top-info {
    padding-top: 20px;
  }
}

.single-courses .tutor-course-details-header {
  margin-bottom: 28px;
}

.single-courses .tutor-course-details-title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  line-height: 1.25;
  letter-spacing: -0.3px;
}

/* Category + wishlist/share sit on one quiet line under the title. */
.single-courses .tutor-course-details-top .tutor-row {
  align-items: center;
}

.single-courses .tutor-course-details-info {
  color: #5b6560;
  font-size: 14px;
}

.single-courses .tutor-course-details-actions .tutor-btn-ghost {
  padding: 6px 12px;
  border-radius: 999px;
  color: #2c352c;
  font-size: 14px;
}

.single-courses .tutor-course-details-actions .tutor-btn-ghost:hover {
  background: #e8f5e9;
  color: #2E7D32;
}

/* Thumbnail: hold a 16:9 frame so a slow or missing image reads as an
   intentional placeholder rather than a 16px grey sliver with a broken-image
   glyph (what every course showed when its upload was unavailable). */
.single-courses .tutor-course-thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, #eef5ee, #dcebdc);
}

.single-courses .tutor-course-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
}

/* Sidebar price card shares the course-card language. */
.single-courses .tutor-sidebar-card {
  border: 1px solid #e8ece8;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  background: #fff;
}

/* The sign-in modal is rendered inside .tutor-single-course-sidebar, which is
   position:sticky and therefore its own stacking context. The modal's
   z-index:99999 only applied inside that context, so the sticky tab bar, the
   "Show more" fade and the site header all painted over it - the email field
   was hidden behind the Course Info / Reviews tabs. Lifting the sidebar while
   a modal inside it is open puts the whole context above the page. */
.single-courses .tutor-single-course-sidebar:has(.tutor-modal.tutor-is-active) {
  z-index: 100000;
}

/* Instructor avatar: hide the alt text a missing photo spills. */
.tutor-avatar img {
  color: transparent;
  font-size: 0;
}

.tutor-avatar {
  background: #e8f5e9;
}

/* Tabs bar: flatter, aligned with the content card below it. */
.single-courses .tutor-course-details-tab .tutor-is-sticky {
  border-radius: 12px;
}

/* Curriculum accordion: tidy rows, brand-coloured chevrons (via the token
   above), less shouting on the section headers. */
.single-courses .tutor-accordion-item {
  border-radius: 12px;
  overflow: hidden;
}

.single-courses .tutor-accordion-item-header {
  font-size: 15px;
  font-weight: 600;
}

/* ============================================================
   3b. STUDENT DASHBOARD  (/dashboard/)
   ============================================================ */

/* The rail is position:fixed at top:0, so for anyone who sees the WordPress
   toolbar (admins, instructors) the toolbar covered the brand and first
   menu item. */
body.admin-bar .em-dash-rail {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .em-dash-rail {
    top: 46px;
  }
}

/* Stat tiles: six (instructor view) wrapped as five plus one orphan.
   Three per row gives 3 + 3 for instructors and a single row of three for
   students. */
@media (min-width: 768px) {
  .tutor-dashboard-content-inner > .tutor-row:has(> :nth-child(4)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* style.css's stat-tile rule `.tutor-dashboard-content-inner .tutor-card >
   div` (flex row, wrap, 14px padding) also matched the course cards on
   Enrolled Courses, collapsing each thumbnail to a 28px strip and laying the
   card body out as a wrapped row. Course cards get their own layout back. */
.tutor-dashboard-content-inner .tutor-card.tutor-course-card > .em-course-thumb {
  display: block;
  padding: 0;
}

.tutor-dashboard-content-inner .tutor-card.tutor-course-card > .tutor-card-body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  padding: 20px 20px 16px;
}

.tutor-dashboard-content-inner .tutor-card.tutor-course-card .tutor-course-name {
  margin-bottom: 16px;
}

/* Course progress line: "0/16" and "0% Complete" ran together. */
.tutor-dashboard-content .tutor-course-card .tutor-course-progress > div:first-child {
  gap: 8px;
  font-size: 13px;
}

/* Cover photo: Tutor's stock purple artwork is replaced by the brand tint
   until the learner uploads their own. */
#tutor_cover_area[style*="cover-photo"] {
  background-image: linear-gradient(135deg, #2E7D32, #66BB6A) !important; /* inline style */
}

/* Lesson player sidebar: the topic chevron is absolutely positioned 16px
   from the right and sat on top of the "0/4" lesson count. Tutor reserves
   44px for it; style.css's `padding: 14px 18px` took that space away. */
body.tutor-lesson-screen .tutor-course-topic .tutor-accordion-item-header {
  padding-right: 44px;
}

/* ============================================================
   4. SIGN-IN MODAL (all Tutor screens)
   ============================================================ */
.tutor-login-modal .tutor-modal-content {
  border-radius: 20px;
}

.tutor-login-modal .tutor-form-control {
  min-height: 46px;
  border-radius: 10px;
  border-color: #dfe5df;
}

.tutor-login-modal .tutor-form-control:focus {
  border-color: #388E3C;
  box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.15);
}

.tutor-login-modal .tutor-btn-primary {
  min-height: 46px;
  border-radius: 999px;
}

/* ============================================================
   5. WOOCOMMERCE NOTICES (cart, checkout, and any page that prints them -
   the "added to your cart" notice also followed learners onto the affiliate
   dashboard)
   style.css stretches .wc-forward to width:100% !important, so the
   "Continue shopping" link inside an "added to your cart" notice became a
   full-width green slab under the text. Notices are now a single row:
   message on the left, compact action on the right.
   ============================================================ */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 20px;
  padding: 14px 18px 14px 48px;
  border: 1px solid #d7e9d8;
  border-left-width: 1px;
  border-top-width: 1px;
  border-radius: 12px;
  background: #f4faf4;
  color: #2c352c;
  font-size: 14.5px;
  line-height: 1.5;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  color: #388E3C;
}

.woocommerce .woocommerce-message .wc-forward,
.woocommerce .woocommerce-info .wc-forward {
  order: 2;
  width: auto !important;          /* style.css: width 100% !important */
  margin: 0 0 0 auto !important;
  padding: 8px 18px !important;    /* style.css: 16px 32px !important */
  font-size: 13.5px !important;    /* style.css: 16px !important */
  float: none !important;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: none !important;
}

/* ============================================================
   6. CART  (/cart/)
   ============================================================ */

/* Hero sits flush under the header like every other page. page-cart.php's
   container used to add 40px on top of main's 28px margin, leaving a blank
   band above the green hero (170px of it on a phone). */
.woo-cart-page.site-main {
  margin-top: 0;
}

.woo-cart-page > .woo-cart-section {
  padding-top: 0;
}

/* Two-column cart. style.css made .woocommerce a flex row, which also turned
   the notices wrapper into a column - the "added to cart" notice was squeezed
   into a 229px strip on the left and the totals card was pushed off the
   right edge of the screen. A grid lets notices span the full row. */
@media (min-width: 992px) {
  .woocommerce-cart .excelman-cart-inner .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 0 32px;
    align-items: start;
  }

  .woocommerce-cart .excelman-cart-inner .woocommerce > * {
    grid-column: 1 / -1;
  }

  .woocommerce-cart .excelman-cart-inner .woocommerce > .woocommerce-cart-form {
    grid-column: 1;
    width: auto !important;        /* style.css: 70% !important */
  }

  .woocommerce-cart .excelman-cart-inner .woocommerce > .cart-collaterals {
    grid-column: 2;
    width: auto !important;        /* style.css: 30% !important */
    position: sticky;
    top: 110px;
  }
}

.excelman-cart-inner {
  padding: 40px 24px 72px;
}

@media (max-width: 767px) {
  .excelman-cart-inner {
    padding: 24px 0 48px;
  }
}

.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
}

/* Give the course name the room; price/qty/subtotal only need their digits.
   The name was wrapping to three lines in a 90px column. */
@media (min-width: 768px) {
  .woocommerce-cart table.cart .product-remove,
  .woocommerce-cart table.cart .product-thumbnail,
  .woocommerce-cart table.cart .product-price,
  .woocommerce-cart table.cart .product-quantity,
  .woocommerce-cart table.cart .product-subtotal {
    width: 1%;
    white-space: nowrap;
  }

  .woocommerce-cart table.cart th,
  .woocommerce-cart table.cart td {
    padding-left: 12px;
    padding-right: 12px;
  }

  .woocommerce-cart table.cart td.product-name {
    font-weight: 600;
  }
}

.woocommerce-cart table.cart td.actions .coupon {
  display: flex;
  gap: 8px;
  align-items: center;
}

.woocommerce-cart table.cart td.actions .coupon .button {
  width: auto;
  white-space: nowrap;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
  flex: 1 1 auto;
  width: 170px;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #dfe5df;
  border-radius: 10px;
}

/* Totals: plain rows divided by a hairline instead of boxes inside boxes. */
.woocommerce-cart .cart_totals table.shop_table {
  border: 0;
  border-collapse: collapse;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid #eef1ee;
  background: none;
}

.woocommerce-cart .cart_totals table.shop_table td {
  text-align: right;
}

.woocommerce-cart .cart_totals table.shop_table .order-total th,
.woocommerce-cart .cart_totals table.shop_table .order-total td {
  border-bottom: 0;
  font-size: 17px;
  font-weight: 700;
  color: #0d1f0d;
}

/* Empty cart: one centred message and one clear next step. */
.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .return-to-shop {
  grid-column: 1 / -1;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.woocommerce-cart .wc-empty-cart-message .cart-empty {
  justify-content: center;
  padding-left: 18px;
}

.woocommerce-cart .wc-empty-cart-message .cart-empty::before {
  display: none;
}

.woocommerce-cart .return-to-shop .button {
  display: inline-block !important; /* style.css: block !important */
  width: auto !important;           /* style.css: width 100% !important */
  white-space: nowrap;
}

/* ============================================================
   7. CHECKOUT  (/checkout/)
   Billing details on the left, a sticky order summary on the right, form
   fields that match the sign-up page instead of browser defaults.
   ============================================================ */
@media (min-width: 992px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto auto 1fr;
    gap: 0 40px;
    align-items: start;
  }

  .woocommerce-checkout form.checkout > * {
    grid-column: 1 / -1;
  }

  .woocommerce-checkout form.checkout > #customer_details {
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  .woocommerce-checkout form.checkout > #order_review_heading {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }

  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
    grid-row: 3;
    position: sticky;
    top: 110px;
  }

  /* The two WooCommerce columns become one: col-2 only carries the empty
     shipping/additional-fields wrappers for a digital course. */
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 {
    float: none;
    width: 100%;
  }
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
  padding: 28px;
  border: 1px solid #e8ece8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields > h3 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: #0d1f0d;
}

.woocommerce-checkout .woocommerce-billing-fields > h3::after,
.woocommerce-checkout #order_review_heading::after {
  content: none;
}

/* Two fields per row on wide screens, one on phones. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row {
  grid-column: 1 / -1;
  float: none;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first {
  grid-column: 1;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
  grid-column: 2;
}

@media (max-width: 575px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
    grid-column: 1;
  }
}

.woocommerce-checkout form.checkout .form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2c352c;
}

.woocommerce-checkout form.checkout .input-text,
.woocommerce-checkout form.checkout select,
.woocommerce-checkout form.checkout .select2-container .select2-selection--single {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #dfe5df;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-checkout form.checkout .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 24px;
}

.woocommerce-checkout form.checkout .select2-container .select2-selection--single .select2-selection__arrow {
  top: 10px;
  right: 8px;
}

.woocommerce-checkout form.checkout .input-text:focus,
.woocommerce-checkout form.checkout select:focus {
  outline: none;
  border-color: #388E3C;
  box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.15);
}

/* Validation colours. WooCommerce fires a change event on load, so every
   empty required field turned red before the learner had typed anything,
   and every optional one turned green. Fields stay neutral until a submit
   attempt has produced an error notice, then the invalid ones turn red. */
.woocommerce-checkout form.checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout form.checkout .form-row.woocommerce-validated .select2-container .select2-selection,
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid .select2-container .select2-selection {
  border-color: #dfe5df;
}

.woocommerce-checkout form.checkout:has(.woocommerce-NoticeGroup-checkout) .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout form.checkout:has(.woocommerce-NoticeGroup-checkout) .form-row.woocommerce-invalid .select2-container .select2-selection {
  border-color: #d97070;
}

.woocommerce-checkout form.checkout .woocommerce-invalid label {
  color: #2c352c;
}

/* Order summary: the table was display:block, so it only stretched as wide
   as its text and left two-thirds of its card empty. */
.woocommerce-checkout #order_review table.shop_table {
  display: table;
  width: 100%;
  margin: 0 0 20px;
  border: 0;
  border-collapse: collapse;
  font-size: 14.5px;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #eef1ee;
  background: none;
  color: #2c352c;
}

.woocommerce-checkout #order_review table.shop_table thead th {
  padding-top: 0;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #5b6560;
}

.woocommerce-checkout #order_review table.shop_table td:last-child,
.woocommerce-checkout #order_review table.shop_table th:last-child {
  text-align: right;
}

.woocommerce-checkout #order_review table.shop_table .order-total th,
.woocommerce-checkout #order_review table.shop_table .order-total td {
  border-bottom: 0;
  font-size: 17px;
  font-weight: 700;
  color: #0d1f0d;
}

/* Payment box: one bordered option and a full-width primary button. */
.woocommerce-checkout #payment {
  padding: 0;
  border-radius: 0;
  background: none;
}

.woocommerce-checkout #payment ul.payment_methods {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding: 14px 16px;
  border: 1px solid #d7e9d8;
  border-radius: 12px;
  background: #f4faf4;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 600;
}

.woocommerce-checkout #payment ul.payment_methods li img {
  order: -1;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 6px;
  color: transparent;
  font-size: 0;
}

.woocommerce-checkout #payment div.payment_box {
  margin: 8px 0 0;
  padding: 0;
  background: none;
  color: #5b6560;
  font-size: 13.5px;
}

.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}

.woocommerce-checkout #payment div.payment_box p {
  margin: 0;
}

.woocommerce-checkout #payment .place-order {
  margin: 0;
  padding: 0;
}

.woocommerce-checkout #payment #place_order {
  float: none;
  width: 100%;
  min-height: 50px;
  border-radius: 999px;
  background: #388E3C;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.woocommerce-checkout #payment #place_order:hover {
  background: #2E7D32;
}

/* Coupon toggle: quieter, it is optional. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: #fff;
  border-color: #e8ece8;
}

@media (max-width: 767px) {
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review {
    padding: 20px;
  }

  .woocommerce-checkout #order_review_heading {
    margin-top: 28px;
  }
}