/**
 * Light / dark mode: toggle control and the handful of refinements that the
 * token swap in style.css cannot express on its own.
 *
 * Colour values live in style.css as --lg-* tokens (:root for light,
 * :root[data-theme="dark"] for dark). Nothing here hardcodes a colour except
 * the translucent scrims, which have to stay independent of the theme because
 * they sit on top of photography.
 *
 * @package legacy
 */

/* -------------------------------------------------------------------------
 * 1. Toggle control
 * ---------------------------------------------------------------------- */

.legacy-theme-toggle {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 1.5px solid var(--lg-accent-border);
	border-radius: 999px;
	background-color: rgba(16, 20, 19, 0.32);
	color: var(--lg-accent);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.legacy-theme-toggle:hover,
.legacy-theme-toggle:focus-visible {
	background-color: var(--lg-accent);
	color: var(--lg-on-accent);
	transform: translateY(-1px);
}

.legacy-theme-toggle:focus-visible {
	outline: 2px solid var(--lg-accent);
	outline-offset: 3px;
}

.legacy-theme-toggle .legacy-theme-toggle-icon {
	display: block;
	width: 20px;
	height: 20px;
}

/* Only one of the two icons is ever shown; the other is hidden per mode. */
.legacy-theme-toggle .legacy-theme-toggle-icon--moon {
	display: none;
}

:root[data-theme="dark"] .legacy-theme-toggle .legacy-theme-toggle-icon--sun {
	display: none;
}

:root[data-theme="dark"] .legacy-theme-toggle .legacy-theme-toggle-icon--moon {
	display: block;
}

.legacy-theme-toggle .legacy-theme-toggle-label {
	display: none;
}

/* The auth pages (login, register, verify, password reset) build their own
 * header, so the toggle rides in their top bar next to the back link. */
.login-page-auth .login-auth-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Block variant: sits in the guide dashboard sidebar, where there is no header. */
.legacy-theme-toggle--block {
	width: 100%;
	height: auto;
	justify-content: flex-start;
	gap: 0.75rem;
	padding: 0.95rem 1rem;
	border: 1px solid var(--lg-border);
	border-radius: 10px;
	background-color: transparent;
	color: var(--lg-brand-2);
	font-size: 15px;
	font-weight: 600;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.legacy-theme-toggle--block:hover,
.legacy-theme-toggle--block:focus-visible {
	background-color: var(--lg-gold-surface);
	border-color: var(--lg-accent-border);
	color: var(--lg-brand-2);
	transform: none;
}

.legacy-theme-toggle--block .legacy-theme-toggle-label {
	display: inline;
}

/* -------------------------------------------------------------------------
 * 2. Dark-mode refinements
 * ---------------------------------------------------------------------- */

/* WordPress and plugin-generated content can carry its own fixed light
 * classes outside the theme Sass. Keep those surfaces on the shared palette.
 *
 * Tables are deliberately absent: the content design system (.legacy-content,
 * built from assets/sass/shared/content/_content-system.scss) paints table
 * surfaces from tokens in both modes, and flattening them here would erase the
 * header row's own tint in dark mode. */
:root[data-theme="dark"] .entry-content,
:root[data-theme="dark"] .wp-block-group,
:root[data-theme="dark"] .wp-block-cover:not(.has-background-dim),
:root[data-theme="dark"] .wp-block-media-text {
	background-color: var(--lg-bg);
	border-color: var(--lg-border);
	color: var(--lg-text);
}

:root[data-theme="dark"] .has-white-background-color,
:root[data-theme="dark"] .has-very-light-gray-background-color,
:root[data-theme="dark"] .has-luminous-vivid-amber-background-color {
	background-color: var(--lg-surface) !important;
}

:root[data-theme="dark"] .has-black-color,
:root[data-theme="dark"] .has-very-dark-gray-color {
	color: var(--lg-text) !important;
}

/* Core's colour presets are fixed values, so a block the author gave a light
 * preset background keeps that background in dark mode. Its text has to stay
 * dark to remain readable; the three presets remapped to a dark surface above
 * are deliberately absent from this list, and a block with its own text colour
 * is left exactly as the author set it. */
:root[data-theme="dark"] .legacy-content :is(
	.has-pale-pink-background-color,
	.has-pale-cyan-blue-background-color,
	.has-light-green-cyan-background-color,
	.has-luminous-vivid-orange-background-color,
	.has-cyan-bluish-gray-background-color
):not(.has-text-color),
:root[data-theme="dark"] .legacy-content :is(
	.has-pale-pink-background-color,
	.has-pale-cyan-blue-background-color,
	.has-light-green-cyan-background-color,
	.has-luminous-vivid-orange-background-color,
	.has-cyan-bluish-gray-background-color
):not(.has-text-color) :is(h1, h2, h3, h4, h5, h6, p, li, strong, em, cite, blockquote) {
	color: var(--lg-on-accent);
}

:root[data-theme="dark"] input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
	background-color: var(--lg-surface);
	border-color: var(--lg-border);
	color: var(--lg-text);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
	color: var(--lg-muted);
}

/* WooCommerce outputs many standard light panels from plugin templates. */
:root[data-theme="dark"] .woocommerce,
:root[data-theme="dark"] .woocommerce-page,
:root[data-theme="dark"] .woocommerce-cart-form,
:root[data-theme="dark"] .woocommerce-checkout,
:root[data-theme="dark"] .woocommerce-account,
:root[data-theme="dark"] .woocommerce .woocommerce-MyAccount-navigation,
:root[data-theme="dark"] .woocommerce .woocommerce-MyAccount-content,
:root[data-theme="dark"] .woocommerce .cart_totals,
:root[data-theme="dark"] .woocommerce .woocommerce-checkout-review-order,
:root[data-theme="dark"] .woocommerce form.checkout_coupon,
:root[data-theme="dark"] .woocommerce form.login,
:root[data-theme="dark"] .woocommerce form.register,
:root[data-theme="dark"] .woocommerce table.shop_table,
:root[data-theme="dark"] .woocommerce ul.order_details,
:root[data-theme="dark"] .woocommerce .woocommerce-customer-details address,
:root[data-theme="dark"] .woocommerce div.product .woocommerce-tabs .panel {
	background-color: var(--lg-surface);
	border-color: var(--lg-border);
	color: var(--lg-text);
}

:root[data-theme="dark"] .woocommerce table.shop_table th,
:root[data-theme="dark"] .woocommerce table.shop_table td,
:root[data-theme="dark"] .woocommerce-cart table.cart td,
:root[data-theme="dark"] .woocommerce-cart table.cart th,
:root[data-theme="dark"] .woocommerce-checkout-review-order-table th,
:root[data-theme="dark"] .woocommerce-checkout-review-order-table td {
	border-color: var(--lg-border);
	color: var(--lg-text);
}

:root[data-theme="dark"] .woocommerce-error,
:root[data-theme="dark"] .woocommerce-info,
:root[data-theme="dark"] .woocommerce-message {
	background-color: var(--lg-gold-surface);
	border-color: var(--lg-accent-border);
	color: var(--lg-text);
}

:root[data-theme="dark"] .woocommerce a:not(.button),
:root[data-theme="dark"] .woocommerce-page a:not(.button) {
	color: var(--lg-brand);
}

/* Auth pages use a custom split-screen shell whose light-side gradient is not
 * tokenized in the main Sass. Dark mode needs to repaint the full form side,
 * not just the controls inside it. */
:root[data-theme="dark"] .login-page-body,
:root[data-theme="dark"] .login-page-auth {
	background-color: var(--lg-bg);
	color: var(--lg-text);
}

:root[data-theme="dark"] .login-page-auth .login-form-side {
	background:
		linear-gradient(135deg, var(--lg-glass), var(--lg-glass-soft)),
		var(--lg-bg);
}

:root[data-theme="dark"] .login-page-auth h1,
:root[data-theme="dark"] .login-page-auth .login-form-group label,
:root[data-theme="dark"] .login-page-auth .login-remember,
:root[data-theme="dark"] .login-page-auth .login-forgot-password-link,
:root[data-theme="dark"] .login-page-auth .login-register-link a,
:root[data-theme="dark"] .login-page-auth .login-guide-link a {
	color: var(--lg-brand);
}

:root[data-theme="dark"] .login-page-auth .login-intro,
:root[data-theme="dark"] .login-page-auth .login-register-link,
:root[data-theme="dark"] .login-page-auth .login-guide-link {
	color: var(--lg-muted);
}

:root[data-theme="dark"] .login-page-auth .login-back-home {
	background-color: var(--lg-surface);
	border-color: var(--lg-border);
	color: var(--lg-brand);
	box-shadow: 0 8px 18px var(--lg-shadow-sm);
}

:root[data-theme="dark"] .login-page-auth .login-back-home:hover,
:root[data-theme="dark"] .login-page-auth .login-back-home:focus {
	background-color: var(--lg-brand-surface);
	border-color: var(--lg-brand-border);
	color: var(--lg-white);
}

:root[data-theme="dark"] .login-page-auth .login-form-group input,
:root[data-theme="dark"] .login-page-auth .login-form-group select {
	background-color: var(--lg-surface);
	border-color: var(--lg-accent-muted-border);
	color: var(--lg-text);
}

:root[data-theme="dark"] .login-page-auth .login-password-toggle {
	background-color: var(--lg-brand-a14);
	color: var(--lg-brand);
}

:root[data-theme="dark"] .login-page-auth .login-password-toggle:hover,
:root[data-theme="dark"] .login-page-auth .login-password-toggle:focus {
	background-color: var(--lg-brand-surface);
	color: var(--lg-white);
}

:root[data-theme="dark"] .login-page-auth .login-links {
	border-top-color: var(--lg-border);
}

/* Guide dashboard templates predate the tokenized theme and still paint fixed
 * light panels. Repaint the dashboard shell and reusable dashboard components
 * when the existing theme toggle switches the document to dark mode. */
:root[data-theme="dark"] .guide-dashboard-page {
	background-color: var(--lg-bg);
	color: var(--lg-text);
}

:root[data-theme="dark"] body.page-template-page-templates-template-guide-dashboard-php {
	background-color: var(--lg-bg);
}

:root[data-theme="dark"] .guide-dashboard-sidebar,
:root[data-theme="dark"] .dashboard-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .dashboard-inner-topbar,
:root[data-theme="dark"] .dashboard-empty-state,
:root[data-theme="dark"] .guide-dashboard-profile-page .profile-section,
:root[data-theme="dark"] .guide-dashboard-profile-page .profile-card,
:root[data-theme="dark"] .dashboard-modal-content,
:root[data-theme="dark"] .add-tour-modal-content,
:root[data-theme="dark"] .view-tour-body,
:root[data-theme="dark"] .tour-tourism-card,
:root[data-theme="dark"] .dashboard-tour-row,
:root[data-theme="dark"] .program-row,
:root[data-theme="dark"] .view-tour-program-item,
:root[data-theme="dark"] .view-tour-landmark-tag,
:root[data-theme="dark"] .modal-cancel-btn,
:root[data-theme="dark"] .bookings-filter-bar,
:root[data-theme="dark"] .dashboard-report-card,
:root[data-theme="dark"] .legacy-report-summary-card,
:root[data-theme="dark"] .legacy-report-insight-card,
:root[data-theme="dark"] .legacy-report-chart-wrap,
:root[data-theme="dark"] .bookings-actions-bar,
:root[data-theme="dark"] .bookings-empty-state,
:root[data-theme="dark"] .guide-profile-card,
:root[data-theme="dark"] .guide-profile-form,
:root[data-theme="dark"] .profile-form-card,
:root[data-theme="dark"] .guide-language-row,
:root[data-theme="dark"] .guide-certificate-row,
:root[data-theme="dark"] .dashboard-chart-card .chart-placeholder {
	background-color: var(--lg-surface);
	border-color: var(--lg-border);
	color: var(--lg-text);
	box-shadow: 0 4px 16px var(--lg-shadow-sm);
}

:root[data-theme="dark"] .guide-dashboard-sidebar .dashboard-sidebar-logo,
:root[data-theme="dark"] .guide-dashboard-sidebar .dashboard-sidebar-user,
:root[data-theme="dark"] .dashboard-card .dashboard-card-head,
:root[data-theme="dark"] .dashboard-table-card,
:root[data-theme="dark"] .dashboard-table th,
:root[data-theme="dark"] .dashboard-table td,
:root[data-theme="dark"] .dashboard-table tbody tr,
:root[data-theme="dark"] .best-tour-item,
:root[data-theme="dark"] .activity-item,
:root[data-theme="dark"] .recent-activity-item,
:root[data-theme="dark"] .booking-row,
:root[data-theme="dark"] .tour-card-dashboard,
:root[data-theme="dark"] .tour-tourism-card-footer,
:root[data-theme="dark"] .program-section,
:root[data-theme="dark"] .tour-content-section,
:root[data-theme="dark"] .view-tour-detail-row,
:root[data-theme="dark"] .dashboard-profile-row,
:root[data-theme="dark"] .guide-profile-field,
:root[data-theme="dark"] .legacy-report-chart-head,
:root[data-theme="dark"] .guide-profile-card,
:root[data-theme="dark"] .guide-language-row,
:root[data-theme="dark"] .guide-certificate-row,
:root[data-theme="dark"] .bookings-pagination,
:root[data-theme="dark"] .dashboard-language-switch,
:root[data-theme="dark"] .dashboard-modal-actions {
	border-color: var(--lg-border);
}

:root[data-theme="dark"] .bookings-pagination {
	background-color: var(--lg-surface);
	color: var(--lg-text);
}

:root[data-theme="dark"] .dashboard-language-switch {
	background-color: transparent;
	color: var(--lg-brand);
}

:root[data-theme="dark"] .dashboard-page-title,
:root[data-theme="dark"] .dashboard-inner-page-title,
:root[data-theme="dark"] .dashboard-card-title,
:root[data-theme="dark"] .best-tour-title,
:root[data-theme="dark"] .best-tour-title a,
:root[data-theme="dark"] .activity-text,
:root[data-theme="dark"] .dashboard-sidebar-user-name,
:root[data-theme="dark"] .dashboard-sidebar-link,
:root[data-theme="dark"] .dashboard-sidebar-link-icon svg,
:root[data-theme="dark"] .dashboard-language-switch,
:root[data-theme="dark"] .dashboard-table td,
:root[data-theme="dark"] .dashboard-table td strong,
:root[data-theme="dark"] .dashboard-table a,
:root[data-theme="dark"] .dashboard-empty-state-title,
:root[data-theme="dark"] .guide-dashboard-profile-page h1,
:root[data-theme="dark"] .guide-dashboard-profile-page h2,
:root[data-theme="dark"] .guide-dashboard-profile-page h3,
:root[data-theme="dark"] .add-tour-modal-form label,
:root[data-theme="dark"] .dashboard-modal-content label,
:root[data-theme="dark"] .view-tour-detail-label,
:root[data-theme="dark"] .detail-label,
:root[data-theme="dark"] .view-tour-title,
:root[data-theme="dark"] .view-tour-top-title,
:root[data-theme="dark"] .view-tour-landmarks-title,
:root[data-theme="dark"] .view-tour-program-item h5,
:root[data-theme="dark"] .view-tour-program-meta,
:root[data-theme="dark"] .tour-tourism-card-title a,
:root[data-theme="dark"] .tour-tourism-card-price,
:root[data-theme="dark"] .program-section-title,
:root[data-theme="dark"] .bookings-section-title,
:root[data-theme="dark"] .legacy-report-chart-title,
:root[data-theme="dark"] .legacy-report-summary-card strong,
:root[data-theme="dark"] .legacy-report-insight-card strong,
:root[data-theme="dark"] .legacy-report-change.is-positive,
:root[data-theme="dark"] .booking-date,
:root[data-theme="dark"] .bookings-page-info strong,
:root[data-theme="dark"] .bookings-empty-state h3,
:root[data-theme="dark"] .booking-actions-dots:hover,
:root[data-theme="dark"] .guide-profile-form label,
:root[data-theme="dark"] .guide-profile-card label,
:root[data-theme="dark"] .profile-form-card label {
	color: var(--lg-brand);
	stroke: var(--lg-brand);
}

:root[data-theme="dark"] .stat-card-title,
:root[data-theme="dark"] .stat-card-note,
:root[data-theme="dark"] .dashboard-sidebar-user-role,
:root[data-theme="dark"] .dashboard-card-subtitle,
:root[data-theme="dark"] .best-tour-meta,
:root[data-theme="dark"] .dashboard-table th,
:root[data-theme="dark"] .dashboard-empty-state-text,
:root[data-theme="dark"] .activity-time,
:root[data-theme="dark"] .dashboard-chart-card .chart-y-axis span,
:root[data-theme="dark"] .dashboard-chart-card .chart-months span,
:root[data-theme="dark"] .dashboard-chart-card .chart-legend .legend-text,
:root[data-theme="dark"] .view-tour-detail-value,
:root[data-theme="dark"] .detail-value,
:root[data-theme="dark"] .view-tour-description,
:root[data-theme="dark"] .tour-meta-item,
:root[data-theme="dark"] .tour-tourism-card-placeholder span,
:root[data-theme="dark"] .tour-tourism-card-rating .rating-text,
:root[data-theme="dark"] .guide-dashboard-profile-page p,
:root[data-theme="dark"] .guide-dashboard-profile-page .profile-meta,
:root[data-theme="dark"] .dashboard-report-muted,
:root[data-theme="dark"] .legacy-report-muted,
:root[data-theme="dark"] .legacy-report-summary-card span,
:root[data-theme="dark"] .legacy-report-insight-card span,
:root[data-theme="dark"] .legacy-report-insight-card small,
:root[data-theme="dark"] .bookings-contact-cell .contact-line,
:root[data-theme="dark"] .booking-time,
:root[data-theme="dark"] .bookings-per-page-label,
:root[data-theme="dark"] .bookings-page-info,
:root[data-theme="dark"] .booking-actions-dots,
:root[data-theme="dark"] .bookings-empty-state p,
:root[data-theme="dark"] .guide-profile-readonly-value {
	color: var(--lg-muted);
}

:root[data-theme="dark"] .stat-card-number,
:root[data-theme="dark"] .dashboard-sidebar-logo a,
:root[data-theme="dark"] .dashboard-empty-state-icon,
:root[data-theme="dark"] .stat-card-icon {
	color: var(--lg-accent);
}

:root[data-theme="dark"] .stat-card-icon,
:root[data-theme="dark"] .dashboard-empty-state-icon,
:root[data-theme="dark"] .dashboard-sidebar-link:hover,
:root[data-theme="dark"] .dashboard-language-switch:hover,
:root[data-theme="dark"] .dashboard-language-switch:focus-visible,
:root[data-theme="dark"] .dashboard-notification-btn:hover,
:root[data-theme="dark"] .dashboard-inner-topbar-search,
:root[data-theme="dark"] .best-tour-progress,
:root[data-theme="dark"] .tour-tourism-card-image,
:root[data-theme="dark"] .tour-card-action-btn.edit-btn,
:root[data-theme="dark"] .dashboard-table thead th,
:root[data-theme="dark"] .dashboard-alert-success {
	background-color: var(--lg-gold-surface);
	border-color: var(--lg-accent-soft-border);
}

:root[data-theme="dark"] .dashboard-sidebar-link:hover,
:root[data-theme="dark"] .dashboard-sidebar-link:hover .dashboard-sidebar-link-icon svg,
:root[data-theme="dark"] .dashboard-language-switch:hover,
:root[data-theme="dark"] .dashboard-language-switch:focus-visible {
	color: var(--lg-brand);
	stroke: var(--lg-brand);
}

:root[data-theme="dark"] .dashboard-sidebar-link.active,
:root[data-theme="dark"] .dashboard-main-btn,
:root[data-theme="dark"] .dashboard-back-to-website {
	background-color: var(--lg-accent);
	border-color: var(--lg-accent-border);
	color: var(--lg-on-accent);
}

:root[data-theme="dark"] .dashboard-sidebar-link.active .dashboard-sidebar-link-icon svg {
	stroke: var(--lg-on-accent);
}

:root[data-theme="dark"] .dashboard-back-to-website:hover,
:root[data-theme="dark"] .dashboard-main-btn:hover,
:root[data-theme="dark"] .dashboard-main-btn:focus,
:root[data-theme="dark"] .tour-card-action-btn.view-btn,
:root[data-theme="dark"] .add-program-row-btn,
:root[data-theme="dark"] .add-tour-image-btn,
:root[data-theme="dark"] .modal-submit-btn {
	background-color: var(--lg-accent-hover);
	color: var(--lg-on-accent);
}

:root[data-theme="dark"] .dashboard-table,
:root[data-theme="dark"] .dashboard-table-wrap {
	background-color: var(--lg-surface);
	color: var(--lg-text);
}

:root[data-theme="dark"] .dashboard-table tbody tr:hover,
:root[data-theme="dark"] .dashboard-tour-row:hover,
:root[data-theme="dark"] .tour-card-dashboard:hover,
:root[data-theme="dark"] .tour-tourism-card:hover,
:root[data-theme="dark"] .tour-card-action-btn.edit-btn:hover {
	background-color: var(--lg-surface-muted);
}

:root[data-theme="dark"] .dashboard-chart-card .chart-lines span {
	border-top-color: var(--lg-border);
}

:root[data-theme="dark"] .dashboard-notification-btn {
	color: var(--lg-brand);
}

:root[data-theme="dark"] .bookings-page-btn {
	background-color: var(--lg-surface-muted);
	border-color: var(--lg-border);
	color: var(--lg-brand);
}

:root[data-theme="dark"] .bookings-page-btn:hover,
:root[data-theme="dark"] .bookings-page-btn:focus {
	border-color: var(--lg-accent-border);
	color: var(--lg-accent);
}

:root[data-theme="dark"] .dashboard-inner-topbar-search input,
:root[data-theme="dark"] .guide-dashboard-page input,
:root[data-theme="dark"] .guide-dashboard-page textarea,
:root[data-theme="dark"] .guide-dashboard-page select {
	background-color: var(--lg-surface-muted);
	border-color: var(--lg-border);
	color: var(--lg-text);
}

:root[data-theme="dark"] .guide-dashboard-page select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--lg-brand) 50%),
		linear-gradient(135deg, var(--lg-brand) 50%, transparent 50%);
}

:root[data-theme="dark"] .dashboard-inner-topbar-search input::placeholder,
:root[data-theme="dark"] .guide-dashboard-page input::placeholder,
:root[data-theme="dark"] .guide-dashboard-page textarea::placeholder {
	color: var(--lg-muted);
}

:root[data-theme="dark"] .dashboard-modal-close {
	background-color: var(--lg-surface-alt);
	color: var(--lg-brand);
}

:root[data-theme="dark"] .dashboard-modal-close:hover,
:root[data-theme="dark"] .dashboard-modal-close:focus {
	background-color: var(--lg-gold-surface);
	color: var(--lg-brand);
}

:root[data-theme="dark"] .add-tour-modal-image-placeholder,
:root[data-theme="dark"] .view-tour-image {
	background:
		linear-gradient(135deg, var(--lg-brand-deep-surface) 0%, var(--lg-brand-darkest) 100%);
}

:root[data-theme="dark"] .remove-tour-content-row-btn,
:root[data-theme="dark"] .remove-program-row-btn {
	background-color: var(--lg-surface-alt);
	color: var(--lg-danger);
}

:root[data-theme="dark"] .dashboard-alert {
	background-color: var(--lg-danger-surface);
	border-color: var(--lg-danger-border);
	color: var(--lg-danger);
}

:root[data-theme="dark"] .dashboard-alert-success {
	color: var(--lg-success);
	border-color: var(--lg-success-border);
	background-color: var(--lg-success-surface);
}

:root[data-theme="dark"] .status-badge,
:root[data-theme="dark"] .booking-status {
	border-color: var(--lg-border);
}

/* Gold faces whose text colour is inherited rather than declared alongside the
 * background. Ink on gold in both modes, matching every other gold button. */
.tour-details-sec .wrraper .more-details-side .more-info-wrap .tour-tabs .tab-btn.active .description,
.guide-details-sec .wrraper .more-details-side .more-info-wrap .guide-tabs .tab-btn.active .description,
.profile-tabs-sec .wrap .profile-tabs-wrap .profile-tabs .tab-btn.active .description {
	color: var(--lg-on-accent);
}

/* The circular gallery arrows flip to brand green on hover, so their icon has
 * to flip back to a light ink at the same moment. */
.more-tours-sec .arrows-wrap button:hover i {
	color: var(--lg-white);
}

/* The Trips card controls sit on gold over dark photography. In dark mode the
 * arrow rings use the theme ink tokens for clearer contrast without changing
 * the light-mode styling. */
:root[data-theme="dark"] .experiences-sec .travel-slider .travel-card .travel-content .travel-btn .tick,
:root[data-theme="dark"] .experiences-sec .travel-slider .travel-card .travel-content .travel-btn i {
	color: var(--lg-on-accent);
}

:root[data-theme="dark"] .experiences-sec .travel-slider .travel-card .travel-content .travel-btn i {
	border-color: var(--lg-on-accent);
}

:root[data-theme="dark"] .experiences-sec .filters .splide-arrows .splide__arrow i {
	color: var(--lg-on-accent);
}

/* The auth kicker pill is deep green on pale gold in light mode. Translucent
 * gold over a dark canvas turns muddy, so give it a solid gold-tinted surface
 * and keep the green/gold pairing intact. */
:root[data-theme="dark"] .login-page-auth .login-kicker {
	background-color: var(--lg-gold-surface);
	color: var(--lg-brand);
}

/* Chrome paints its own background on autofilled fields, which reads as a
 * bright block in dark mode. Mask it with an inset shadow the size of the box. */
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:hover,
:root[data-theme="dark"] input:-webkit-autofill:focus,
:root[data-theme="dark"] textarea:-webkit-autofill,
:root[data-theme="dark"] select:-webkit-autofill {
	-webkit-text-fill-color: var(--lg-text);
	-webkit-box-shadow: 0 0 0 1000px var(--lg-surface) inset;
	box-shadow: 0 0 0 1000px var(--lg-surface) inset;
	caret-color: var(--lg-text);
}

/* Hero and card photography carries its own brightness; easing it back keeps
 * the page from glowing against a dark canvas. */
:root[data-theme="dark"] .hero-sec img,
:root[data-theme="dark"] .tour-card img,
:root[data-theme="dark"] .guide-card img,
:root[data-theme="dark"] .trip-image img,
:root[data-theme="dark"] .tour-tourism-card img {
	filter: brightness(0.92);
}

/* Photo overlays need more scrim in dark mode so white captions stay readable. */
:root[data-theme="dark"] .shadow-after::after,
:root[data-theme="dark"] .overlay::after {
	background-color: var(--lg-scrim);
}

::-moz-selection {
	background-color: var(--lg-accent);
	color: var(--lg-on-accent);
}

::selection {
	background-color: var(--lg-accent);
	color: var(--lg-on-accent);
}

/* Native dropdown lists render with the OS palette; colour-scheme on :root
 * handles most of it, these cover the browsers that need it spelled out. */
:root[data-theme="dark"] select option,
:root[data-theme="dark"] select optgroup {
	background-color: var(--lg-surface);
	color: var(--lg-text);
}

/* The toggle animates the whole page; honour a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {

	.legacy-theme-toggle,
	body {
		transition: none;
	}
}