/*
 * Sheet header controls (single chrome):
 * - Dismiss: .bottom-sheet-shell__close — overlay (absolute top-right) unless .bottom-sheet-shell__close--inline.
 * - Back / in-flow header actions: .bottom-sheet-shell__nav.bottom-sheet-shell__nav--back (never absolute).
 */
.bottom-sheet-shell__panel .bottom-sheet-shell__close,
.bottom-sheet-shell__panel .bottom-sheet-shell__nav {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	padding: var(--spacing-xxs-2);
	border-radius: var(--border-radius-pill);
	border: 1px solid var(--background-neutral-light-100);
	opacity: 0.8;
	background: var(--background-neutral-light-1);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	pointer-events: auto;
	transition: background-color var(--transition-base), opacity var(--transition-base);
}

.bottom-sheet-shell__panel .bottom-sheet-shell__close:not(.bottom-sheet-shell__close--inline) {
	position: absolute;
	right: var(--spacing-lg);
	z-index: calc(var(--z-index-modal) + 10);
}

.bottom-sheet-shell__panel .bottom-sheet-shell__close.bottom-sheet-shell__close--inline {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
}

.bottom-sheet-shell__panel .bottom-sheet-shell__close:hover:not(:disabled),
.bottom-sheet-shell__panel .bottom-sheet-shell__nav:hover:not(:disabled) {
	opacity: 1;
}

.bottom-sheet-shell__panel .bottom-sheet-shell__close:focus-visible,
.bottom-sheet-shell__panel .bottom-sheet-shell__nav:focus-visible {
	outline: var(--focus-outline-width) solid var(--focus-outline-color);
	outline-offset: var(--focus-outline-offset);
}

.bottom-sheet-shell__panel .bottom-sheet-shell__close.bottom-sheet-shell__close--inline:disabled,
.bottom-sheet-shell__panel .bottom-sheet-shell__nav:disabled {
	cursor: not-allowed;
	border: var(--button-disabled-border);
	background: var(--button-disabled-background);
	color: var(--button-disabled-color);
}

.payment-method-modal__scrollable:not(.add-payment-method-modal__scrollable) {
    padding: var(--spacing-xl) var(--spacing-m) var(--spacing-m);
}

/* Lesson quick popover (schedule absence): JS backdrop + open class — native ::backdrop/:popover-open fail on old Android WebViews. */
.lesson-quick-popover-backdrop {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-index-popover) - 1);
	background: rgba(52, 54, 70, 0.35);
	touch-action: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.lesson-quick-popover-backdrop--visible {
	opacity: 1;
	pointer-events: auto;
}

.manage-enrolment-view__lesson-quick-popover.lesson-quick-popover--open {
	display: block;
	z-index: var(--z-index-popover);
}

/* Lock sheet scroll while a lesson quick popover is open.
   .is-lesson-quick-popover-open is toggled by popover-anchor.js on the scroll container. */
.bottom-sheet-shell__scrollable.is-lesson-quick-popover-open {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}

.bottom-sheet-shell__scrollable.is-lesson-quick-popover-open .enrolment-lesson-list-view__lessons,
.bottom-sheet-shell__scrollable.is-lesson-quick-popover-open .manage-enrolment-view__lessons {
    pointer-events: none;
}

/* Header */
.enrolment-details-modal__header {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    z-index: calc(var(--z-index-modal) + 10); /* Match close button z-index */
    pointer-events: none;
    overflow: visible;
}

/* Loading State */
.class-details-modal__loading {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-regular-default);
}

/* Content Section: Main container */
.class-details-modal__content,
.leave-review-modal__content,
.enrolment-details-modal__content,
.membership-details-modal__content,
.payment-method-modal__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
	height: 100%;
}

/* Fill scroll area so manage-flow children can use flex: 1 */
.enrolment-details-modal__content,
.membership-details-modal__content {
	min-height: 0;
	flex: 1 1 auto;
}

/* Hero Image Container */
.class-details-modal__hero-image-container,
.enrolment-details-modal__hero-image-container,
.membership-details-modal__hero-image-container {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    z-index: 1;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

.class-details-modal__hero-image-container,
.enrolment-details-modal__hero-image-container {
    height: var(--height-video-mobile);
}

.membership-details-modal__hero-image-container {
    height: 10rem;
}

/* Hero underpaint matches placeholder so panel corner anti-aliasing never reveals white behind the image. */
.bottom-sheet-shell__scrollable [class*="__hero-image-container"],
.bottom-sheet-shell__scrollable [class*="__hero-image"]:not([class*="overlay"]) {
	background: var(--gradient-brand-image-cover);
}

/* Content Container */
.class-details-modal__content-container,
.enrolment-details-modal__content-container,
.membership-details-modal__content-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    align-self: stretch;
    background: var(--color-background-white);
    position: relative;
    z-index: 2; /* Above hero image (z-index: 1) to allow overlap */
}

@media (max-width: 47.99rem) {
	.payment-method-modal__scrollable.add-payment-method-modal__scrollable {
		padding: var(--spacing-m);
	}
}

/* Desktop */
@media (min-width: 48rem) {
    .payment-method-modal__scrollable,
    .payment-method-modal__scrollable.add-payment-method-modal__scrollable {
        padding: var(--spacing-xl);
    }

    .class-details-modal__hero-image-container,
    .enrolment-details-modal__hero-image-container,
    .course-details-modal__hero-image-container {
        height: var(--height-video-desktop);
    }

    .membership-details-modal__hero-image-container {
        height: 12.5rem;
    }
}