/**
 * Dark mode. <html data-theme="dark"> is set before paint from the visitor's
 * choice (the sun/moon switch) or their device setting. Most of the site
 * follows the color tokens; the rules below cover what can't.
 *
 * `:root[data-theme="dark"]` outranks the Customizer's inline :root colors.
 */

:root[data-theme="dark"] {
	color-scheme: dark;

	--bounce-surface: #0d121c;
	--bounce-card: #151c2a;
	--bounce-soft: #1a2232;
	--bounce-cream: #121927;
	--bounce-header: rgba( 13, 18, 28, 0.86 );
	--bounce-night: #080b12;
	--bounce-ink: #eef2f9;
	--bounce-muted: #a3adc0;
	--bounce-line: #283246;
	--bounce-primary-dark: #ff6d68;
	--bounce-shadow: 0 10px 30px rgba( 0, 0, 0, 0.45 );
	--bounce-shadow-lift: 0 18px 44px rgba( 0, 0, 0, 0.55 );
	--bounce-veil-strong: rgba( 13, 18, 28, 0.58 );
	--bounce-veil-soft: rgba( 13, 18, 28, 0.2 );
}

/* ---------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------ */

[data-theme="dark"] body {
	background: var( --bounce-surface );
}

[data-theme="dark"] a:hover {
	color: #fff;
}

/* The hero line under the headline: pure white, to stay readable over the
   video. Its light-mode counterpart is pure black, in style.css. */
[data-theme="dark"] .hero-lede {
	color: #fff;
}

/* Buttons keep the brand red; only the 3D ledge darkens so it doesn't glow. */
[data-theme="dark"] .btn,
[data-theme="dark"] .woocommerce a.button,
[data-theme="dark"] .woocommerce button.button,
[data-theme="dark"] .woocommerce input.button,
[data-theme="dark"] .woocommerce a.button.alt,
[data-theme="dark"] .woocommerce button.button.alt,
[data-theme="dark"] .wp-block-button__link {
	box-shadow: 0 4px 0 #8e1216;
}

[data-theme="dark"] .btn:hover,
[data-theme="dark"] .woocommerce a.button:hover,
[data-theme="dark"] .woocommerce button.button:hover {
	box-shadow: 0 6px 0 #8e1216;
}

[data-theme="dark"] .btn--ghost {
	box-shadow: inset 0 0 0 3px var( --bounce-line );
}

[data-theme="dark"] .btn--ghost:hover {
	box-shadow: inset 0 0 0 3px var( --bounce-ink );
}

[data-theme="dark"] .cta-band .btn {
	color: #c4161d;
}

[data-theme="dark"] .eyebrow {
	background: rgba( 255, 109, 104, 0.14 );
}

/* ---------------------------------------------------------------------------
   Hero and page headers
   ------------------------------------------------------------------------ */

[data-theme="dark"] .hero,
[data-theme="dark"].bounce-fresh .hero,
[data-theme="dark"] .bounce-fresh .hero {
	background:
		radial-gradient( 58% 60% at 82% 2%, rgba( 43, 168, 224, 0.22 ) 0%, rgba( 43, 168, 224, 0 ) 62% ),
		radial-gradient( 46% 52% at 8% 88%, rgba( 124, 194, 67, 0.14 ) 0%, rgba( 124, 194, 67, 0 ) 64% ),
		radial-gradient( 40% 44% at 42% 28%, rgba( 139, 69, 230, 0.16 ) 0%, rgba( 139, 69, 230, 0 ) 70% ),
		linear-gradient( 180deg, #0f1522 0%, #0d121c 100% );
}

[data-theme="dark"] .page-hero,
[data-theme="dark"] .bounce-fresh .page-hero {
	background:
		radial-gradient( 60% 120% at 88% 0%, rgba( 43, 168, 224, 0.18 ) 0%, rgba( 43, 168, 224, 0 ) 66% ),
		radial-gradient( 50% 120% at 6% 100%, rgba( 139, 69, 230, 0.16 ) 0%, rgba( 139, 69, 230, 0 ) 68% ),
		linear-gradient( 180deg, #111827 0%, #0d121c 100% );
}

[data-theme="dark"] .hero-video video {
	filter: blur( 7px ) saturate( 1.2 ) brightness( 0.85 );
}

[data-theme="dark"] .hero-placeholder {
	background: repeating-linear-gradient( 45deg, #1f2738, #1f2738 22px, #192030 22px, #192030 44px );
}

/* The fun layer's pill and headline shadow. */
[data-theme="dark"] .eyebrow {
	background:
		linear-gradient( #221a24, #221a24 ) padding-box,
		var( --party-rainbow, linear-gradient( 90deg, #ff6d68, #ff6d68 ) ) border-box;
}

[data-theme="dark"] .hero h1 em,
[data-theme="dark"] .section-head h2 em,
[data-theme="dark"] .page-hero h1 em {
	filter: drop-shadow( 0 3px 0 rgba( 0, 0, 0, 0.5 ) );
}

/* ---------------------------------------------------------------------------
   Header menu on phones
   ------------------------------------------------------------------------ */

[data-theme="dark"] .main-nav.is-open,
[data-theme="dark"] .main-nav .sub-menu {
	background: var( --bounce-card );
}

/* ---------------------------------------------------------------------------
   Forms everywhere (theme, WooCommerce classic and block checkout)
   ------------------------------------------------------------------------ */

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .select2-container .select2-selection--single,
[data-theme="dark"] .wc-block-components-text-input input,
[data-theme="dark"] .wc-block-components-textarea,
[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__select,
[data-theme="dark"] .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
	background-color: var( --bounce-soft ) !important;
	color: var( --bounce-ink ) !important;
	border-color: var( --bounce-line ) !important;
}

[data-theme="dark"] ::placeholder {
	color: #7f8aa0;
}

[data-theme="dark"] .select2-container .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .wc-block-components-text-input label,
[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__label,
[data-theme="dark"] .wc-block-components-combobox .wc-block-components-combobox-control label {
	color: var( --bounce-muted ) !important;
}

[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .components-form-token-field__suggestions-list,
[data-theme="dark"] .wc-block-components-combobox .components-form-token-field__suggestions-list {
	background: var( --bounce-card ) !important;
	color: var( --bounce-ink ) !important;
	border-color: var( --bounce-line ) !important;
}

/* ---------------------------------------------------------------------------
   WooCommerce: shop, cart, checkout
   ------------------------------------------------------------------------ */

[data-theme="dark"] .woocommerce ul.products li.product .price,
[data-theme="dark"] .woocommerce div.product p.price,
[data-theme="dark"] .woocommerce div.product span.price {
	color: var( --bounce-ink );
}

[data-theme="dark"] .woocommerce table.shop_table,
[data-theme="dark"] .woocommerce table.shop_table th,
[data-theme="dark"] .woocommerce table.shop_table td {
	border-color: var( --bounce-line );
}

[data-theme="dark"] .woocommerce-checkout #payment,
[data-theme="dark"] .woocommerce-checkout #payment div.payment_box {
	background: var( --bounce-soft );
	color: var( --bounce-ink );
}

[data-theme="dark"] .woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var( --bounce-soft );
}

/* Block cart and checkout mostly inherit; these panels carry their own. */
[data-theme="dark"] .wc-block-components-sidebar-layout .wc-block-components-main,
[data-theme="dark"] .wc-block-components-sidebar,
[data-theme="dark"] .wc-block-checkout__sidebar,
[data-theme="dark"] .wc-block-components-order-summary,
[data-theme="dark"] .wc-block-components-totals-wrapper,
[data-theme="dark"] .wc-block-components-panel,
[data-theme="dark"] .wc-block-components-radio-control__option,
[data-theme="dark"] .wc-block-components-radio-control-accordion-option,
[data-theme="dark"] .wc-block-components-checkout-step,
[data-theme="dark"] .wp-block-woocommerce-checkout-order-summary-block {
	border-color: var( --bounce-line ) !important;
	color: var( --bounce-ink );
}

[data-theme="dark"] .wp-block-woocommerce-checkout-order-summary-block,
[data-theme="dark"] .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
[data-theme="dark"] .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	background: var( --bounce-card ) !important;
	box-shadow: inset 0 0 0 1.5px var( --bounce-muted ) !important;
}

[data-theme="dark"] .wc-block-components-radio-control__input,
[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	background: var( --bounce-soft ) !important;
	border-color: #6b7690 !important;
}

[data-theme="dark"] .wc-block-components-radio-control__input:checked::before {
	background: var( --bounce-ink ) !important;
}

[data-theme="dark"] .wc-block-components-radio-control__input:checked {
	border-color: var( --bounce-ink ) !important;
}

/* Ticked boxes fill with the brand red in dark mode too, so the state reads the
   same way in both. The rule above keeps the unticked box visible. */
[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var( --bounce-primary ) !important;
	border-color: var( --bounce-primary ) !important;
}

[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: #fff;
}

[data-theme="dark"] .wc-block-components-product-metadata,
[data-theme="dark"] .wc-block-components-formatted-money-amount,
[data-theme="dark"] .wc-block-components-product-name,
[data-theme="dark"] .wc-block-components-totals-item__label,
[data-theme="dark"] .wc-block-components-checkout-step__title,
[data-theme="dark"] .wc-block-components-title {
	color: var( --bounce-ink ) !important;
}

[data-theme="dark"] .wc-block-components-product-metadata__description,
[data-theme="dark"] .wc-block-components-checkout-step__description,
[data-theme="dark"] .wc-block-components-totals-item__description {
	color: var( --bounce-muted ) !important;
}

[data-theme="dark"] .wc-block-components-order-summary-item__quantity {
	background: var( --bounce-card ) !important;
	color: var( --bounce-ink ) !important;
	box-shadow: 0 0 0 2px var( --bounce-line ) !important;
	border-color: var( --bounce-line ) !important;
}

[data-theme="dark"] .wc-block-components-order-summary-item__image img,
[data-theme="dark"] .wc-block-cart-item__image img {
	border-radius: 10px;
}

/* ---------------------------------------------------------------------------
   Soft-yellow notes whose text used the ink color
   ------------------------------------------------------------------------ */

[data-theme="dark"] .account-credit,
[data-theme="dark"] .acct-register-offer,
[data-theme="dark"] .bb-referral-ready {
	background: rgba( 255, 201, 60, 0.14 ) !important;
	color: #ffe7a3 !important;
}

[data-theme="dark"] .acct-countdown {
	color: #1d2330;
}

/* ---------------------------------------------------------------------------
   Account pages
   ------------------------------------------------------------------------ */

[data-theme="dark"] .acct-pill {
	background: #243049;
	color: #c6cee0;
}

[data-theme="dark"] .acct-pill.is-processing,
[data-theme="dark"] .acct-pill.is-on-hold {
	background: rgba( 30, 144, 255, 0.18 );
	color: #8cc8ff;
}

[data-theme="dark"] .acct-pill.is-completed {
	background: rgba( 51, 194, 77, 0.18 );
	color: #8fe3a0;
}

[data-theme="dark"] .acct-pill.is-pending {
	background: rgba( 255, 201, 60, 0.16 );
	color: #ffd97a;
}

[data-theme="dark"] .acct-pill.is-cancelled,
[data-theme="dark"] .acct-pill.is-refunded {
	background: rgba( 255, 80, 80, 0.16 );
	color: #ff9d9a;
}

/* Notices are light green/blue/red cards with dark text out of the box, so
   they need their own dark versions everywhere, not just in the account. */
[data-theme="dark"] .woocommerce-message,
[data-theme="dark"] .woocommerce-info,
[data-theme="dark"] .woocommerce-error {
	background: var( --bounce-soft );
	border-color: var( --bounce-line );
	color: var( --bounce-ink );
}

[data-theme="dark"] .woocommerce-message {
	background: rgba( 51, 194, 77, 0.14 );
	border-color: rgba( 51, 194, 77, 0.35 );
}

[data-theme="dark"] .woocommerce-error {
	background: rgba( 255, 80, 80, 0.14 );
	border-color: rgba( 255, 80, 80, 0.35 );
}

[data-theme="dark"] .woocommerce-message::before,
[data-theme="dark"] .woocommerce-info::before,
[data-theme="dark"] .woocommerce-error::before {
	color: var( --bounce-ink );
}

[data-theme="dark"] .bb-keep-shopping {
	color: var( --bounce-ink ) !important;
}

[data-theme="dark"] .woocommerce-account .woocommerce-info,
[data-theme="dark"] .woocommerce-account .woocommerce-message,
[data-theme="dark"] .woocommerce-account .woocommerce-error {
	background: var( --bounce-soft );
	color: var( --bounce-ink );
}

[data-theme="dark"] .woocommerce-MyAccount-navigation a:hover {
	background: var( --bounce-soft );
}

[data-theme="dark"] .acct-hello {
	background:
		radial-gradient( 60% 140% at 100% 0%, rgba( 255, 201, 60, 0.28 ) 0%, rgba( 255, 201, 60, 0 ) 60% ),
		radial-gradient( 50% 120% at 0% 100%, rgba( 43, 168, 224, 0.3 ) 0%, rgba( 43, 168, 224, 0 ) 65% ),
		linear-gradient( 135deg, var( --bounce-primary ) 0%, #9c1419 100% );
}

[data-theme="dark"] .acct-hello .btn {
	color: #c4161d;
}

[data-theme="dark"] .woocommerce-account #customer_login .u-column2 {
	background:
		radial-gradient( 70% 120% at 100% 0%, rgba( 255, 201, 60, 0.1 ) 0%, rgba( 255, 201, 60, 0 ) 60% ),
		var( --bounce-card );
}

/* ---------------------------------------------------------------------------
   Booking plugin: unit page, checkout guard, contact, referral
   ------------------------------------------------------------------------ */

[data-theme="dark"] .bb-cal-day:hover:not( .is-disabled ) {
	background: rgba( 255, 109, 104, 0.2 );
}

[data-theme="dark"] .bb-cal-day.is-disabled {
	color: #56607a;
}

[data-theme="dark"] .bb-key-dot.is-taken {
	border-color: #4a5570;
}

[data-theme="dark"] .bb-mode:has( input:checked ) {
	background: rgba( 255, 109, 104, 0.12 );
}

[data-theme="dark"] .bb-deposit-note {
	background: rgba( 51, 194, 77, 0.12 );
	border-color: rgba( 51, 194, 77, 0.35 );
	color: #9ee6ad;
}

[data-theme="dark"] .bb-deposit-note strong {
	color: #c6f3cf;
}

[data-theme="dark"] .bb-bundle-note {
	background: rgba( 255, 201, 60, 0.12 );
	border-color: rgba( 255, 201, 60, 0.35 );
	color: #ffe29a;
}

[data-theme="dark"] .bb-hint.is-warning,
[data-theme="dark"] .bb-out-of-area {
	color: #ffa27a;
}

[data-theme="dark"] .bb-order-hint {
	background: rgba( 255, 109, 104, 0.12 );
	border-color: rgba( 255, 109, 104, 0.35 );
	color: #ffb4a8;
}

[data-theme="dark"] .bb-pot-panel {
	background: rgba( 255, 109, 104, 0.1 );
	color: var( --bounce-ink );
}

[data-theme="dark"] .bb-pot-title {
	color: #ff9d8e;
}

[data-theme="dark"] .bb-pot-ack {
	border-color: rgba( 255, 109, 104, 0.4 );
}

[data-theme="dark"] .bb-contact-field input[type="text"],
[data-theme="dark"] .bb-contact-field input[type="email"],
[data-theme="dark"] .bb-contact-field input[type="tel"],
[data-theme="dark"] .bb-contact-field textarea,
[data-theme="dark"] .bb-contact-radio span,
[data-theme="dark"] .bb-referral-link input,
[data-theme="dark"] .acct-refer-link input {
	background: var( --bounce-soft ) !important;
	color: var( --bounce-ink ) !important;
	border-color: var( --bounce-line ) !important;
}

[data-theme="dark"] .bb-contact-radio input:checked + span {
	background: var( --bounce-primary ) !important;
	border-color: var( --bounce-primary ) !important;
	color: #fff !important;
}

[data-theme="dark"] .bb-contact-sent {
	background: rgba( 51, 194, 77, 0.12 );
	border-color: rgba( 51, 194, 77, 0.35 );
	color: #9ee6ad;
}

[data-theme="dark"] .bb-contact-error {
	background: rgba( 255, 80, 80, 0.12 );
	border-color: rgba( 255, 80, 80, 0.35 );
	color: #ffb0ab;
}

/* ---------------------------------------------------------------------------
   Images that read poorly on dark
   ------------------------------------------------------------------------ */

[data-theme="dark"] .custom-logo {
	filter: drop-shadow( 0 2px 8px rgba( 0, 0, 0, 0.35 ) );
}