/* ==========================================================================
   Course Booking System — timetable / preview restyle
   Applies to [timetable] and [preview] output.

   Markup this targets:
     div.cbs-timetable.preview
       div.cbs-timetable-column
         h2                                 month name
         ul.cbs-timetable-list
           li.cbs-timetable-list-item
             a                              inline background-color + color
               span.new                     hidden
               p.date > time
               p.timeslot > time/span/time
               h3                           course title
               p.attendance                 only when attendance meta set
               p.location                   only when location meta set
               p.trainer                    hidden

   The <a> receives background-color and color as inline styles from the
   course post meta, so colour rules need !important to win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Strip the noise
   -------------------------------------------------------------------------- */

.cbs-timetable span.new,
.cbs-timetable .cbs-timetable-list-item .new {
	display: none !important;
}

.cbs-timetable p.trainer {
	display: none !important;
}

/* Keep it when a course is cancelled or has a substitute — that is
   information a student needs. */
.cbs-timetable p.trainer.trainer-has-substitute {
	display: block !important;
	order: 6 !important;
	margin: 0.5rem 0 0 0 !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	color: #be7f2e !important;
}

/* --------------------------------------------------------------------------
   Grid and month headings
   -------------------------------------------------------------------------- */

.cbs-timetable,
.cbs-timetable.preview {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
	gap: 1.75rem !important;
	padding-bottom: 0 !important;
}

.cbs-timetable .cbs-timetable-column {
	min-width: 0 !important;
}

.cbs-timetable h2 {
	position: relative !important;
	margin: 0 0 1rem 0 !important;
	padding-bottom: 0.625rem !important;
	font-family: 'League Spartan', sans-serif !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #1b2733 !important;
	border-bottom: 1px solid #e3e7ec !important;
}

.cbs-timetable h2::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	bottom: -1px !important;
	width: 42px !important;
	height: 3px !important;
	background: #f0c26e !important;
}

.cbs-timetable ul.cbs-timetable-list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.cbs-timetable ul li.cbs-timetable-list-item {
	margin: 0 0 0.875rem 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */

.cbs-timetable ul li a {
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
	overflow: hidden !important;
	padding: 1.125rem 1.25rem 1.125rem 1.5rem !important;
	background-color: #ffffff !important;
	background-image: none !important;
	color: #1b2733 !important;
	border: 1px solid #e3e7ec !important;
	border-radius: 15px !important;
	box-shadow: 0 1px 2px rgba(27, 39, 51, 0.06) !important;
	text-decoration: none !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.cbs-timetable ul li a::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	bottom: 0 !important;
	z-index: 3 !important;
	width: 4px !important;
	background: #f0c26e !important;
	transition: width 0.18s ease !important;
}

.cbs-timetable ul li a:hover,
.cbs-timetable ul li a:focus-visible {
	opacity: 1 !important;
	transform: translateY(-2px) !important;
	border-color: #f0c26e !important;
	box-shadow: 0 10px 24px rgba(27, 39, 51, 0.12) !important;
}

.cbs-timetable ul li a:hover::before {
	width: 6px !important;
}

.cbs-timetable ul li a:focus-visible {
	outline: 2px solid #be7f2e !important;
	outline-offset: 2px !important;
}

/* Featured-image overlay layer */
.cbs-timetable ul li a > .overlay {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Card contents — ordered date, title, time, location, seats
   -------------------------------------------------------------------------- */

.cbs-timetable p.date {
	order: 1 !important;
	margin: 0 0 0.125rem 0 !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: #be7f2e !important;
}

.cbs-timetable h3 {
	order: 2 !important;
	margin: 0.125rem 0 0.375rem 0 !important;
	font-family: 'League Spartan', sans-serif !important;
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	color: #1b2733 !important;
}

.cbs-timetable ul li a:hover h3 {
	color: #be7f2e !important;
}

.cbs-timetable h3 .dashicons {
	margin-right: 0.25rem !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: #be7f2e !important;
}

.cbs-timetable p.timeslot {
	order: 3 !important;
	margin: 0 !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	color: #6b7684 !important;
}

.cbs-timetable p.timeslot .timeslot-delimiter {
	color: #6b7684 !important;
}

.cbs-timetable p.location {
	order: 4 !important;
	margin: 0.375rem 0 0 0 !important;
	padding-left: 0 !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	color: #6b7684 !important;
}

.cbs-timetable p.attendance {
	order: 5 !important;
	align-self: flex-start !important;
	margin: 0.625rem 0 0 0 !important;
	padding: 0.1875rem 0.625rem !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	color: #1b2733 !important;
	background: rgba(240, 194, 110, 0.28) !important;
	border-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 980px) {

	.cbs-timetable,
	.cbs-timetable.preview {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
		gap: 1.25rem !important;
	}
}

@media only screen and (max-width: 768px) {

	.cbs-timetable,
	.cbs-timetable.preview {
		display: block !important;
	}

	.cbs-timetable .cbs-timetable-column {
		margin-bottom: 1.75rem !important;
	}

	/* Undo the plugin's mobile float on these rows — it breaks the
	   flex-ordered card layout above. */
	.cbs-timetable .timeslot,
	.cbs-timetable .attendance {
		clear: none !important;
		float: none !important;
		margin-left: 0 !important;
		line-height: normal !important;
	}

	.cbs-timetable .attendance {
		margin-top: 0.625rem !important;
	}
}

/* ==========================================================================
   Participants stepper + availability — REPLACEMENT RULES

   In cbs-single-course.css, replace these four rules with the block below:
     1. #course p.availability                    (had display:flex — remove)
     2. #course p.availability span               (wrong element — it's <strong>)
     3. the #course .slide select, input, textarea rule
        (add :not([type="number"]) so the stepper keeps its own width)
     4. #course .action-attendance-quantity       (needs an explicit background
                                                   to beat #course .button)
   ========================================================================== */

/* 1 — the row itself. No flex: the markup uses a <br> to break the line. */
#course p.availability {
	display: block !important;
	margin: 0 0 0.75rem 0 !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.8125rem !important;
	line-height: 1.9 !important;
	color: #6b7684 !important;
}

#course p.availability label {
	margin-right: 0.375rem !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	color: #6b7684 !important;
}

/* 2 — the availability count is a <strong>, colour-coded green/red by CBS */
#course p.availability strong {
	display: inline-block !important;
	min-width: 1.5rem !important;
	margin-left: 0.25rem !important;
	padding: 0.0625rem 0.5rem !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-align: center !important;
	border-radius: 999px !important;
}

#course p.availability strong.green {
	color: #1b2733 !important;
	background: rgba(240, 194, 110, 0.28) !important;
}

#course p.availability strong.red {
	color: #8a3520 !important;
	background: rgba(190, 127, 46, 0.16) !important;
}

/* 3 — number input sized to its content, not the container */
#course .slide select,
#course .slide input[type="text"],
#course .slide textarea {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0.5rem 0.75rem !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.875rem !important;
	color: #1b2733 !important;
	background: #ffffff !important;
	border: 1px solid #e3e7ec !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

#course input.action-attendance,
#course .slide input[type="number"] {
	width: 3.25rem !important;
	max-width: 3.25rem !important;
	height: 26px !important;
	padding: 0 0.375rem !important;
	margin: 0 0.1875rem !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.8125rem !important;
	line-height: 26px !important;
	text-align: center !important;
	vertical-align: middle !important;
	color: #1b2733 !important;
	background: #ffffff !important;
	border: 1px solid #e3e7ec !important;
	border-radius: 6px !important;
	box-shadow: none !important;
}

/* Strip the native spinner — the +/- controls replace it */
#course input.action-attendance::-webkit-outer-spin-button,
#course input.action-attendance::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

#course input.action-attendance {
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}

/* 4 — plain square controls, no gold gradient */
#course a.action-attendance-quantity,
#course .action-attendance-quantity {
	display: inline-block !important;
	width: 26px !important;
	min-width: 26px !important;
	height: 26px !important;
	padding: 0 !important;
	background: #f6f7f9 !important;
	background-image: none !important;
	color: #3d4650 !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	text-align: center !important;
	text-decoration: none !important;
	vertical-align: middle !important;
	border: 1px solid #e3e7ec !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	transform: none !important;
	transition: background 0.15s ease, border-color 0.15s ease !important;
}

#course a.action-attendance-quantity:hover,
#course .action-attendance-quantity:hover {
	background: #ebedf0 !important;
	background-image: none !important;
	color: #1b2733 !important;
	border-color: #c3ccd4 !important;
	box-shadow: none !important;
	transform: none !important;
}

/* ==========================================================================
   Course Booking System — course enrollment page
   dodtcsd.com  ·  /course/{slug}/?course_id=NN

   Markup this targets (verified against the live AJAX response, not the
   plugin template — the page is filled in by single-course.js after load):

     div#course.entry-content.course
       h2                        course title, span.weekday, time.timeslot-start,
                                 span.time-delimiter, time.timeslot-end,
                                 span.time-formatted-suffix ("o'clock")
       h3                        price level
       p.intro                   plugin's stock intro copy
       div#initial-slide
       div.slider                slick: 4 slides desktop, 3 / 2 / 1 down-breakpoint
         div.slide[data-date]
           h3                    span.weekday + date
           p > span.trainer      "Trainer: <strong>name</strong>"
           p.availability        <br> + "Availability:" + strong.red|.green
           div.progress-wrapper.red|.green > progress
           p                     login prompt / booking description
           a.button.btn...       Login / Shop / Book
           ── logged-in staff also get: form, select.substitute,
              p.action-attendance steppers, bookings + waitlist tables,
              p.export, p.email, p.note

   Buttons carry Divi's .et_pb_button plus WooCommerce block classes, so
   !important is required to win against both.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

#course.course {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: 'Lexend', sans-serif !important;
}

#course #initial-slide {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Headline block
   -------------------------------------------------------------------------- */

/* The page title already renders above this; the plugin repeats it. */
#course.course > h2 {
	margin: 0 0 0.25rem 0 !important;
	font-family: 'League Spartan', sans-serif !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: #1b2733 !important;
}

#course.course > h2 .weekday,
#course.course > h2 .timeslot-start,
#course.course > h2 .timeslot-end,
#course.course > h2 .time-delimiter {
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	color: #6b7684 !important;
}

/* Translation artifact from cbs_get_time_formatted() */
#course .time-formatted-suffix {
	display: none !important;
}

/* Price level strap line */
#course.course > h3 {
	display: inline-block !important;
	margin: 0 0 1rem 0 !important;
	padding: 0.1875rem 0.75rem !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: #1b2733 !important;
	background: rgba(240, 194, 110, 0.28) !important;
	border-radius: 999px !important;
}

#course p.intro {
	max-width: 68ch !important;
	margin: 0 0 2rem 0 !important;
	font-size: 0.9375rem !important;
	line-height: 1.7 !important;
	color: #3d4650 !important;
}

/* --------------------------------------------------------------------------
   Slider + slides as cards
   -------------------------------------------------------------------------- */

#course .slider {
	margin: 0 -0.5rem 1.5rem !important;
}

#course .slider .slick-track {
	display: flex !important;
	align-items: stretch !important;
}

#course .slider .slick-slide {
	height: auto !important;
}

#course .slider .slick-slide > div {
	height: 100% !important;
}

#course .slide {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	margin: 0 0.5rem !important;
	padding: 1.5rem !important;
	background: #ffffff !important;
	border: 1px solid #e3e7ec !important;
	border-radius: 15px !important;
	box-shadow: 0 1px 2px rgba(27, 39, 51, 0.06) !important;
}

/* Date header on each card */
#course .slide > h3 {
	margin: 0 0 1rem 0 !important;
	padding-bottom: 0.75rem !important;
	font-family: 'League Spartan', sans-serif !important;
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #1b2733 !important;
	border-bottom: 2px solid #f0c26e !important;
}

#course .slide > h3 .weekday {
	display: block !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: #be7f2e !important;
}

#course .slide p {
	margin: 0 0 0.75rem 0 !important;
	font-size: 0.875rem !important;
	line-height: 1.6 !important;
	color: #3d4650 !important;
}

/* --------------------------------------------------------------------------
   Trainer line — note this is span.trainer inside a bare <p>, not p.trainer
   -------------------------------------------------------------------------- */

#course .slide span.trainer {
	display: block !important;
	font-size: 0.8125rem !important;
	color: #6b7684 !important;
}

#course .slide span.trainer strong {
	font-weight: 600 !important;
	color: #1b2733 !important;
}

#course .slide span.trainer-has-substitute,
#course .slide .substitute-note {
	color: #be7f2e !important;
	font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Availability + progress bar
   -------------------------------------------------------------------------- */

#course p.availability {
	display: block !important;
	margin: 0 0 0.375rem 0 !important;
	font-size: 0.8125rem !important;
	line-height: 1.8 !important;
	color: #6b7684 !important;
}

#course p.availability br {
	display: none !important;
}

#course p.availability label {
	margin-right: 0.375rem !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	color: #6b7684 !important;
}

#course p.availability strong {
	display: inline-block !important;
	min-width: 1.5rem !important;
	margin-left: 0.25rem !important;
	padding: 0.0625rem 0.5rem !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-align: center !important;
	border-radius: 999px !important;
}

#course p.availability strong.green {
	color: #1b2733 !important;
	background: rgba(240, 194, 110, 0.28) !important;
}

#course p.availability strong.red {
	color: #8a3520 !important;
	background: rgba(190, 127, 46, 0.16) !important;
}

#course .progress-wrapper {
	margin: 0 0 1rem 0 !important;
	line-height: 0 !important;
}

#course .progress-wrapper progress {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 100% !important;
	height: 6px !important;
	border: none !important;
	border-radius: 999px !important;
	background: #eef0f3 !important;
	overflow: hidden !important;
}

#course .progress-wrapper progress::-webkit-progress-bar {
	background: #eef0f3 !important;
	border-radius: 999px !important;
}

#course .progress-wrapper progress::-webkit-progress-value {
	background: #be7f2e !important;
	border-radius: 999px !important;
}

#course .progress-wrapper progress::-moz-progress-bar {
	background: #be7f2e !important;
	border-radius: 999px !important;
}

#course .progress-wrapper.red progress::-webkit-progress-value {
	background: #b4573a !important;
}

#course .progress-wrapper.red progress::-moz-progress-bar {
	background: #b4573a !important;
}

/* --------------------------------------------------------------------------
   Notices inside a card — login prompt, booking description, cancelled/past
   -------------------------------------------------------------------------- */

#course .slide p.description,
#course .slide p.booking-description {
	padding: 0.75rem 1rem !important;
	font-size: 0.8125rem !important;
	color: #6b7684 !important;
	background: #f6f7f9 !important;
	border-radius: 10px !important;
}

#course .course-cancelled,
#course .course-past {
	padding: 0.75rem 1rem !important;
	font-weight: 600 !important;
	color: #8a3520 !important;
	background: rgba(190, 127, 46, 0.12) !important;
	border-left: 3px solid #be7f2e !important;
}

/* Push the action button to the bottom so cards line up */
#course .slide > a.button,
#course .slide > .button {
	margin-top: auto !important;
}

/* --------------------------------------------------------------------------
   Buttons — match .rf-button--primary
   -------------------------------------------------------------------------- */

#course .button,
#course .btn,
#course a.shop-button,
#course .action-booking,
#course .action-waitlist {
	display: inline-block !important;
	align-self: flex-start !important;
	padding: 0.9rem 2rem !important;
	background: linear-gradient(90deg, #be7f2e 0%, #f6d06f 50%, #be7f2e 100%) !important;
	background-image: linear-gradient(90deg, #be7f2e 0%, #f6d06f 50%, #be7f2e 100%) !important;
	color: #1a1a1a !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-align: center !important;
	text-transform: none !important;
	text-decoration: none !important;
	border: none !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
	cursor: pointer !important;
	transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}

#course .button:hover,
#course .btn:hover,
#course a.shop-button:hover,
#course .action-booking:hover,
#course .action-waitlist:hover {
	background-image: linear-gradient(135deg, #a87a1f 0%, #c9962e 50%, #e8c15a 100%) !important;
	color: #1a1a1a !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35) !important;
}

/* Divi injects an arrow pseudo-element into .et_pb_button */
#course .button::after,
#course .btn::after {
	display: none !important;
}

/* Destructive actions should not look like the primary CTA */
#course .action-booking-delete,
#course .action-waitlist-delete,
#course .action-abo-delete {
	padding: 0.5rem 1.125rem !important;
	background: #f6f7f9 !important;
	background-image: none !important;
	color: #3d4650 !important;
	font-size: 0.8125rem !important;
	border: 1px solid #e3e7ec !important;
	box-shadow: none !important;
}

#course .action-booking-delete:hover,
#course .action-waitlist-delete:hover,
#course .action-abo-delete:hover {
	background: #ebedf0 !important;
	background-image: none !important;
	color: #1b2733 !important;
	transform: none !important;
	box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Staff-only controls — grouped so they read as an admin panel
   -------------------------------------------------------------------------- */

#course .slide form {
	margin: 0 0 1rem 0 !important;
	padding: 1rem !important;
	background: #f6f7f9 !important;
	border-radius: 10px !important;
}

#course .slide select,
#course .slide input[type="text"],
#course .slide textarea {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0.5rem 0.75rem !important;
	font-family: 'Lexend', sans-serif !important;
	font-size: 0.875rem !important;
	color: #1b2733 !important;
	background: #ffffff !important;
	border: 1px solid #e3e7ec !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

#course .slide select:focus,
#course .slide input:focus,
#course .slide textarea:focus {
	outline: 2px solid #be7f2e !important;
	outline-offset: 1px !important;
	border-color: #be7f2e !important;
}

/* Participant stepper — compact, no gradient */
#course input.action-attendance,
#course .slide input[type="number"] {
	width: 3.25rem !important;
	max-width: 3.25rem !important;
	height: 26px !important;
	padding: 0 0.375rem !important;
	margin: 0 0.1875rem !important;
	font-size: 0.8125rem !important;
	line-height: 26px !important;
	text-align: center !important;
	vertical-align: middle !important;
	border-radius: 6px !important;
}

#course input.action-attendance::-webkit-outer-spin-button,
#course input.action-attendance::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

#course input.action-attendance {
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}

#course a.action-attendance-quantity,
#course .action-attendance-quantity {
	display: inline-block !important;
	width: 26px !important;
	min-width: 26px !important;
	height: 26px !important;
	padding: 0 !important;
	background: #f6f7f9 !important;
	background-image: none !important;
	color: #3d4650 !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	text-align: center !important;
	vertical-align: middle !important;
	border: 1px solid #e3e7ec !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	transform: none !important;
}

#course a.action-attendance-quantity:hover,
#course .action-attendance-quantity:hover {
	background: #ebedf0 !important;
	background-image: none !important;
	color: #1b2733 !important;
	border-color: #c3ccd4 !important;
	box-shadow: none !important;
	transform: none !important;
}

#course p.bookings-headline,
#course p.waitlist-headline,
#course p.cancellations-headline {
	margin: 1.25rem 0 0.5rem 0 !important;
	font-family: 'League Spartan', sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: #6b7684 !important;
}

#course table.bookings-table,
#course table.waitlist-table,
#course table.cancellations-table {
	width: 100% !important;
	margin: 0 0 0.75rem 0 !important;
	font-size: 0.8125rem !important;
	border-collapse: collapse !important;
	border: 1px solid #e3e7ec !important;
	border-radius: 10px !important;
	overflow: hidden !important;
}

#course table.bookings-table th,
#course table.waitlist-table th,
#course table.cancellations-table th {
	padding: 0.5rem 0.75rem !important;
	font-weight: 600 !important;
	text-align: left !important;
	color: #1b2733 !important;
	background: #f6f7f9 !important;
	border-bottom: 1px solid #e3e7ec !important;
}

#course table.bookings-table td,
#course table.waitlist-table td,
#course table.cancellations-table td {
	padding: 0.5rem 0.75rem !important;
	color: #3d4650 !important;
	border-bottom: 1px solid #eef0f3 !important;
}

#course p.export a,
#course p.email a {
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	color: #be7f2e !important;
	text-decoration: none !important;
}

#course p.export a:hover,
#course p.email a:hover {
	color: #1b2733 !important;
	text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   Slick controls
   -------------------------------------------------------------------------- */

#course .slick-prev,
#course .slick-next {
	width: 40px !important;
	height: 40px !important;
	z-index: 5 !important;
	background: #ffffff !important;
	border: 1px solid #e3e7ec !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 6px rgba(27, 39, 51, 0.12) !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

#course .slick-prev:hover,
#course .slick-next:hover {
	background: #ffffff !important;
	border-color: #f0c26e !important;
	box-shadow: 0 4px 12px rgba(27, 39, 51, 0.18) !important;
}

#course .slick-prev::before,
#course .slick-next::before {
	color: #1b2733 !important;
	font-size: 18px !important;
	opacity: 1 !important;
}

#course .slick-disabled {
	opacity: 0.35 !important;
	cursor: default !important;
}

#course .slick-dots {
	margin-top: 0.5rem !important;
}

#course .slick-dots li button::before {
	font-size: 9px !important;
	color: #c3ccd4 !important;
	opacity: 1 !important;
}

#course .slick-dots li.slick-active button::before {
	color: #be7f2e !important;
	opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   Loaders
   -------------------------------------------------------------------------- */

#course-loader div,
#ajax-loader div {
	background: #be7f2e !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 768px) {

	#course.course > h2 {
		font-size: 1.25rem !important;
	}

	#course .slide {
		padding: 1.25rem !important;
	}

	#course .button,
	#course .btn,
	#course a.shop-button {
		width: 100% !important;
		align-self: stretch !important;
	}

	#course table.bookings-table,
	#course table.waitlist-table,
	#course table.cancellations-table {
		display: block !important;
		overflow-x: auto !important;
	}
}