/*
 * Ski For Life Membership — styles for the parts the plugin adds to the member area.
 * The page design (cards, buttons, type, colours) lives in the theme; these rules use its variables.
 */

/* Playback progress: a thin bar under a film card and on the "continue" card. */
.sfl-film-progress { display: block; height: 4px; border-radius: 999px; background: var(--sfl-line, #DCE8F4); overflow: hidden; }
.sfl-film-progress span { display: block; height: 100%; border-radius: 999px; background: var(--sfl-coral, #F2808C); }
.sfl-continue .sfl-film-progress { width: min(100%, 320px); background: rgba(255, 255, 255, .28); }

/* Player: where the film resumes, and the audio player for podcast episodes. */
.sfl-player__resume { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(16, 40, 74, .78); color: #fff; font: 600 13px/1.4 var(--sfl-font, sans-serif); }
.sfl-player.is-playing .sfl-player__resume { display: none; }
.sfl-player--audio { align-items: flex-end; padding: 24px; }
.sfl-player--audio::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 40, 74, .1) 30%, rgba(16, 40, 74, .8) 100%); }
.sfl-player--audio audio { width: 100%; }

/* My build: home or gym. */
.sfl-form--version { margin: 0; }
.sfl-version { display: flex; gap: 8px; }
.sfl-version .sfl-pill { border: 0; }
.sfl-version .sfl-pill.is-on { background: var(--sfl-navy, #10284A); color: #fff; box-shadow: none; }
.sfl-version .sfl-pill:focus-visible { outline: 2px solid var(--sfl-navy, #10284A); outline-offset: 3px; }

/* Live: "Remind me" is a one-button form. */
.sfl-inline-form { margin: 0 0 0 auto; flex: none; }
.sfl-inline-form .sfl-button.is-on { background: var(--sfl-ok-bg, #E3F3EA); color: var(--sfl-ok, #1F7A4D); box-shadow: none; }

/* Join: yearly or monthly. */
.sfl-join__interval { margin: 0 0 20px; }
.sfl-join__interval[hidden] { display: none; }

/* Trip card: first day and last day side by side where there is room, the place and the button underneath. */
.sfl-trip-card .sfl-form--inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(200px, 40%), 1fr)); gap: 12px 16px; align-items: start; }
.sfl-trip-card .sfl-form--inline > .sfl-alert,
.sfl-trip-card .sfl-form--inline > .sfl-field:has(#sfl-trip-trip_place),
.sfl-trip-card .sfl-form--inline > button { grid-column: 1 / -1; }
.sfl-trip-card .sfl-form--inline > button { justify-self: start; }

/* My club rows with fewer cards (a module switched off). */
.sfl-dash__row--1 { grid-template-columns: minmax(0, 1fr); }
.sfl-dash__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sfl-dash__row--1 > .sfl-card .sfl-textlink, .sfl-dash__row--2 > .sfl-card .sfl-textlink { margin-top: auto; }

/* The final "delete my account" confirmation. */
.sfl-alert .sfl-form { margin-top: 12px; }

@media (max-width: 767px) {
	.sfl-dash__row--2 { grid-template-columns: minmax(0, 1fr); }
	.sfl-inline-form { margin-left: 0; }
}

/* Join: more than two plans on sale are shown as pills. */
.sfl-join__plans { margin: 0 0 20px; }

/* A closed player holds a message and buttons: on a phone it grows to fit them and keeps clear of the label. */
@media (max-width: 600px) {
	.sfl-player--locked { aspect-ratio: auto; min-height: 250px; padding: 60px 0 12px; }
	.sfl-player--locked .sfl-player__lock { padding: 0 20px; gap: 10px; }
}

/* Member tabs on a narrow screen scroll sideways: fade the edge so it is clear there is more. */
@media (max-width: 767px) {
	nav.sfl-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
	nav.sfl-tabs ul::after { content: ""; flex: 0 0 12px; } /* room for the last tab to clear the fade */
}

/* Join: the pay button is off for a plan the member already holds. */
.sfl-join__submit .sfl-button[disabled] { opacity: .45; cursor: not-allowed; }
.sfl-join [data-sfl-covered][hidden] { display: none; }
.sfl-join [data-sfl-covered] { margin-bottom: 16px; }

/*
 * Public page blocks kept up to date by core/public-blocks.php (14/10 changes, Figma 317:1218).
 */

/* "Your coaches" card: Sven and Lou side by side, faces from the top. */
.sfl-coach-card__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sfl-coach-card img { object-position: center top; }

/* Story film poster before the film has its video link: a link to the Sven & Lou page, arrow instead of play. */
a.sfl-story-card--link, a.sfl-story-card--link:hover, a.sfl-story-card--link:focus { color: #fff; text-decoration: none; }
.sfl-story-card--link .sfl-story-card__play { padding-left: 0; }

/* Members only, in place of a session someone cannot open (317:1288 desktop, 317:1303 mobile). */
.sfl-members-block { max-width: 760px; padding: 32px 36px 34px; border-radius: 24px; background: var(--sfl-navy); color: #fff; }
.sfl-members-block .sfl-members-block__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 12px/1 var(--sfl-font); letter-spacing: .14em; text-transform: uppercase; color: var(--sfl-coral); }
.sfl-members-block .sfl-members-block__title { margin: 0 0 12px; font: 700 28px/1.2 var(--sfl-font-h); letter-spacing: -.01em; color: #fff; }
.sfl-members-block .sfl-members-block__text { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.sfl-members-block__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.sfl-members-block__signin { font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; }
.sfl-members-block__signin:hover { text-decoration: underline; }
@media (max-width: 767px) {
	.sfl-members-block { padding: 24px 22px 26px; }
	.sfl-members-block .sfl-members-block__title { font-size: 24px; }
	.sfl-members-block__actions { flex-direction: column; align-items: stretch; }
	.sfl-members-block__actions .sfl-button { justify-content: center; }
}

/* Contact and partner forms: the ticked consent box. The form widget's field background (default #fff) is more
   specific than the theme's rule; without this the white tick sits on white. */
.sfl-b-form .elementor-field-group .elementor-acceptance-field:checked { background-color: var(--sfl-navy) !important; }

/* Ask Sven & Lou: the member's own questions and their answers. */
.sfl-my-questions { display: grid; gap: 16px; margin: 0 0 32px; }
.sfl-my-question .sfl-h6 { margin: 4px 0 8px; }
.sfl-my-question__answer { margin-top: 12px; padding: 16px 18px; border-radius: 14px; background: var(--sfl-ice, #EEF5FB); }
.sfl-my-question__answer p:last-child { margin-bottom: 0; }

/* Spam protection (core/spam.php, assets/spam.js): the hidden field robots fill in, and the Google / Cloudflare box */
.sfl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sfl-captcha { margin: 0 0 16px; }
.sfl-captcha__msg { margin: -8px 0 16px; color: #b42318; font-size: 14px; line-height: 1.4; }
.elementor-form .sfl-captcha__msg { width: 100%; margin: 0 0 12px; }

/* "View the site as" (core/security.php): staff see which view they are in */
.sfl-view-as-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 99999; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; background: #0F1E3D; color: #fff; font-size: 14px; line-height: 1.4; box-shadow: 0 6px 24px rgba(15,30,61,.25); text-align: center; }
.sfl-view-as-bar a { color: #fff; text-decoration: underline; margin-left: 6px; }

/* Account → Membership & billing: the member's own payments, each with its receipt (core/transactions-admin.php).
   Two classes deep: the theme's own table rules (borders, striped rows) are more specific than one. */
.sfl-paylist { margin: 4px 0 8px; }
.sfl-paylist .sfl-h6 { margin: 0 0 8px; }
.sfl-paylist .sfl-paylist__table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 14px; line-height: 1.45; color: var(--sfl-navy, #10284A); }
.sfl-paylist .sfl-paylist__table th, .sfl-paylist .sfl-paylist__table td { padding: 10px 12px 10px 0; border: 0; border-bottom: 1px solid var(--sfl-line, #DCE8F4); background: none; vertical-align: top; text-align: left; }
.sfl-paylist .sfl-paylist__table th { padding-top: 0; padding-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--sfl-muted, #4E5A6E); }
.sfl-paylist .sfl-paylist__table tr:last-child td { border-bottom: 0; }
.sfl-paylist .sfl-paylist__table th:last-child, .sfl-paylist .sfl-paylist__table td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.sfl-paylist .sfl-paylist__table .sfl-paylist__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sfl-paylist__sub { display: block; font-size: 13px; color: var(--sfl-muted, #4E5A6E); }
@media (max-width: 600px) {
	.sfl-paylist .sfl-paylist__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.sfl-paylist .sfl-paylist__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--sfl-line, #DCE8F4); }
	.sfl-paylist .sfl-paylist__table tr:last-child { border-bottom: 0; }
	.sfl-paylist .sfl-paylist__table td { padding: 0; border: 0; }
	.sfl-paylist .sfl-paylist__table td:nth-child(1) { grid-column: 1 / -1; font-size: 13px; color: var(--sfl-muted, #4E5A6E); }
	.sfl-paylist .sfl-paylist__table td:last-child { grid-column: 1 / -1; text-align: left; }
}

/* Trip Protection lines on the home page and Sven & Lou cards: a link to the clinic's Trip Protection page (core/public-blocks.php). */
.sfl-trip-link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sfl-trip-link:hover, .sfl-trip-link:focus-visible { text-decoration-thickness: 2px; }

/* Journal "Get the letter": the message for a wrong address takes its own line instead of squeezing the e-mail box (the theme keeps the row on one line). */
.sfl-b-letter:has(.sfl-b-letter__err) { flex-wrap: wrap; }
.sfl-b-letter:has(.sfl-b-letter__err) input[type="email"] { flex: 1 1 0; min-width: 0; } /* the box and the button still share the first line */

/* The journal while its first articles are written: a section that lists posts and has none stays out of sight. */
section.e-con.e-parent:has(.sfl-no-posts) { display: none !important; }

/* Members sign in, reached from the Research page's "Join the research panel": the free sign-up comes first. */
.sfl-signin__panel { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 20px 0 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(15, 39, 71, 0.12); }

/* Pricing cards: the lines under a line (the membership's build-up modules) get a short dash. */
.sfl-b-plan__list ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sfl-b-plan__list li li { font-size: 14px; }
.sfl-b-plan__list a, .sfl-b-value__list a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sfl-b-plan__list a:hover, .sfl-b-value__list a:hover, .sfl-b-plan__list a:focus-visible, .sfl-b-value__list a:focus-visible { text-decoration-color: var(--sfl-coral); }
.sfl-b-plan__list li li::before { top: .68em; width: 8px; height: 2px; border-radius: 1px; }

/* Under the pricing cards: what the membership is worth, the step up from the build-up, the next live Q&As. */
.sfl-b-value { margin-top: 24px; padding: 28px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--sfl-line); color: var(--sfl-navy); }
.sfl-b-value__title { margin: 0 0 14px; font: 700 20px/1.3 var(--sfl-font-h); color: var(--sfl-navy); }
.sfl-b-value__list { list-style: none; margin: 0; padding: 0; }
.sfl-b-value__list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--sfl-line); font-size: 15px; line-height: 1.45; }
.sfl-b-value__list strong { flex: none; text-align: right; font-weight: 700; }
.sfl-b-value__total { margin: 14px 0 0; font: 700 17px/1.4 var(--sfl-font-h); }
.sfl-b-value__note { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--sfl-muted); }
.sfl-b-value__live { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sfl-line); }
.sfl-b-value__live ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; }
.sfl-b-value__live li strong { margin-right: 6px; }
.sfl-b-value__live li span { color: var(--sfl-muted); }
@media (max-width: 767px) {
	.sfl-b-value { padding: 22px 18px; }
	.sfl-b-value__list li { flex-direction: column; gap: 2px; }
	.sfl-b-value__list strong { text-align: left; }
}

/* Offers (Ski For Life → Offers): their lines above the pricing cards, and the gift pages on Join. */
.sfl-b-offers { display: grid; gap: 10px; margin-bottom: 24px; }
.sfl-b-offer { margin: 0; padding: 14px 20px; border-radius: 16px; background: var(--sfl-ice); color: var(--sfl-navy); font-size: 15px; line-height: 1.5; }
.sfl-b-offer a { margin-left: 10px; font-weight: 700; color: var(--sfl-navy); white-space: nowrap; }
.sfl-gift__done, .sfl-gift__redeem { max-width: 640px; margin: 0 auto; }
.sfl-gift__code { display: flex; flex-direction: column; gap: 4px; margin: 18px 0; padding: 16px 20px; border-radius: 14px; background: var(--sfl-ice); }
.sfl-gift__code span { font-size: 13px; color: var(--sfl-muted); }
.sfl-gift__code strong { font: 700 22px/1.2 var(--sfl-font-h); letter-spacing: .06em; color: var(--sfl-navy); }
.sfl-gift__message { margin: 16px 0; padding: 12px 18px; border-left: 3px solid var(--sfl-coral); font-style: italic; color: var(--sfl-navy); }
/* The gift pages use the join form's layout, but not its wrapper: the join script would hide their summary card. */
.sfl-gift { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 767px) {
	.sfl-gift .sfl-join__form { padding: 32px 24px; border-radius: 24px; }
	.sfl-gift .sfl-stripe-note { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* What members say, in the value box under the pricing cards (Settings → Membership). */
.sfl-b-value__quotes { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sfl-line); }
.sfl-b-value__quotes figure { margin: 12px 0 0; }
.sfl-b-value__quotes blockquote { margin: 0; font-size: 16px; line-height: 1.5; font-style: italic; color: var(--sfl-navy); }
.sfl-b-value__quotes figcaption { margin-top: 4px; font-size: 14px; color: var(--sfl-muted); }

/* Under the locked "Members" cards beneath a film: what joining opens. */
.sfl-unlock-line { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--sfl-navy); }
.sfl-unlock-line a { margin-left: 6px; font-weight: 700; color: var(--sfl-navy); white-space: nowrap; }