/*
* REL ES - Custom styles for Randstad Spain
*/

/* ========================================
   CSS VARIABLES OVERRIDE
   ======================================== */

/* Badge Icon Size Utilities */
.rel_size-\[12px\] {
	height: 12px;
	width: 12px;
	display: inline-flex;
}

.rel_size-\[16px\] {
	height: 16px;
	width: 16px;
	display: inline-flex;
}

/* Icon SVG color inheritance */
.rel-icon svg {
	fill: currentColor;
}

.rel_icon-button svg {
	fill: currentColor;
}

/* Info-variant badge classes */
.rel_bg-feedback-info-variant {
	background-color: var(--background-container-02);
}

.rel_bg-feedback-info-variant-inverse {
	background-color: var(--background-feedback-info-inverse);
}

.rel_text-on-bg-feedback-info-variant {
	color: var(--text-on-bg-container-02);
}

.rel_text-on-bg-feedback-info-variant-inverse {
	color: var(--text-on-bg-feedback-info-inverse);
}

.rel_icon-on-bg-feedback-info-variant {
	color: var(--icon-on-bg-container-02);
}

.rel_icon-on-bg-feedback-info-variant-inverse {
	color: var(--icon-on-bg-feedback-info-inverse);
}

/* Card component */

.rel-card {
	border-color: var(--color-zodiac-blue-300, #656c85);
}

.rel_shadow-zodiac-blue-300 {
	--tw-shadow: inset 0 0 0 var(--border-weight-default)
		var(--color-zodiac-blue-300);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rel_mt-auto {
	margin-top: auto;
}

.rel_mt-6 {
	margin-top: var(--spacing-06);
}

.rel_es_p-4 {
	padding: var(--spacing-04);
}

.rel_pt-6 {
	padding-top: var(--spacing-06);
}

.rel_es_py-\[2px\] {
	padding-top: 2px;
	padding-bottom: 2px;
}

.rel_text-ellipsis-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rel_es_filter:focus-visible {
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	outline-offset: var(--outline-focus-ring-weight);
	outline-style: solid;
	outline-width: var(--outline-focus-ring-weight);
}
.rel_es_filter:hover {
	--tw-shadow: 0 0 0 1px var(--border-trigger-hover);
	box-shadow: inset var(--tw-shadow);
}

.popover,
.popover::before {
	background-color: var(--background-default, #ffffff);
}

.rel_icon-button:focus-visible {
	outline-offset: calc(var(--outline-focus-ring-weight) * 1);
}
.rel_button-clean-filter {
	font-family: var(--text-paragraph-md-font);
	font-size: var(--text-paragraph-md-size);
	font-weight: var(--text-paragraph-md-font-weight);
	letter-spacing: var(--text-paragraph-md-letter-spacing);
	line-height: var(--text-paragraph-md-line-height);
}

.rel_button-clean-filter > svg {
	width: 16px;
	height: 16px;
}
.rel_es_color-inherit {
	color: inherit !important;
}

.rel_bg-inherit {
	background: inherit;
}

.rel_pl-3 {
	padding-left: var(--spacing-03);
}

/* Accessibility: override px sizes with rem so icon buttons scale with browser text zoom (WCAG 1.4.4) */
.rel_icon-button--xs {
	height: 1rem;
	width: 1rem;
}
.rel_icon-button--xs > svg {
	height: 0.75rem;
	width: 0.75rem;
}
.rel_icon-button--sm {
	height: 2rem;
	width: 2rem;
}
.rel_icon-button--sm > svg {
	height: 1rem;
	width: 1rem;
}
.rel_icon-button--md {
	height: 2.25rem;
	width: 2.25rem;
}
.rel_icon-button--md > svg {
	height: 1.25rem;
	width: 1.25rem;
}
.rel_icon-button--lg {
	height: 3rem;
	width: 3rem;
}
.rel_icon-button--lg > svg {
	height: 2rem;
	width: 2rem;
}

/* Popover: hide when inactive to prevent layout expansion */
[data-rs-popover][aria-hidden="true"] {
	display: none;
}
[data-rs-popover][aria-hidden="false"],
[data-rs-popover].popover--active {
	display: block;
}

/* ComboBox component */
.rel_combobox-wrapper .rel_form-field__control.rel_combo-box-focus {
	overflow: visible !important;
}
.rel_combobox__clear {
	display: none;
}
.rel_combobox__clear.is-visible {
	display: flex;
}
.rel_combobox__status-icon {
	pointer-events: none;
	color: var(--components-forms-text-on-bg-input-error);
}
.rel_combobox-wrapper .rel_form-field__control--input-text {
	padding-right: calc(
		var(--components-forms-padding-input-left-right) + 36px
	);
}
.rel_combobox-wrapper
.rel_combo-box-error
.rel_form-field__control--input-text {
	padding-right: calc(
		var(--components-forms-padding-input-left-right) + 68px
	);
}

/* RadioGroup component */
.rel_form-field .rel_form-field__control:indeterminate {
	background-color: var(--components-forms-bg-input-default);
	border-color: var(--components-forms-border-input-default);
}
.rel_form-field .rel_form-field__control:hover,
.rel_form-field .rel_form-field__control:focus {
	box-shadow: none;
	border-color: var(--components-forms-border-input-hover);
	border-width: 2px;
}
/* Estilos necesarios para Combobox que chocan con los de RadioGroup */
.rel_combobox-wrapper .rel_form-field__control:hover,
.rel_combobox-wrapper .rel_form-field__control:focus {
	outline: 2px solid var(--components-forms-border-input-hover);
	outline-offset: -1px;
	border-color: var(--components-forms-border-input-default);
	border-width: var(--border-weight-default);
}
.rel_form-field .rel_form-field__control:checked {
	background-color: var(--components-forms-icon-on-bg-input-filled);
	border-width: 6px;
}
.rel_form-field:not(.rel_form-field--disabled):not(.rel_form-field--readonly)
	.rel_form-field__control:checked:hover,
.rel_form-field:not(.rel_form-field--disabled):not(.rel_form-field--readonly)
	.rel_form-field__control:checked:focus:not(:focus-visible) {
	background-color: var(--components-forms-bg-input-default);
	border-width: 2px;
	box-shadow: inset 0 0 0 4px var(--components-forms-bg-input-default),
		inset 0 0 0 100px var(--components-forms-icon-on-bg-input-accent);
}
.rel_form-field--error .rel_form-field__control:hover,
.rel_form-field--error .rel_form-field__control:focus {
	border-color: var(--components-forms-border-input-error-hover);
}
.rel_form-field--error .rel_form-field__control:checked {
	background-color: var(--components-forms-bg-input-input-filled-error);
}
.rel_form-field--error .rel_form-field__control:indeterminate {
	border-color: var(--components-forms-border-input-error);
}
.rel_form-field--error:not(.rel_form-field--disabled):not(.rel_form-field--readonly)
	.rel_form-field__control:checked:hover,
.rel_form-field--error:not(.rel_form-field--disabled):not(.rel_form-field--readonly)
	.rel_form-field__control:checked:focus:not(:focus-visible) {
	box-shadow: inset 0 0 0 4px var(--components-forms-bg-input-default),
		inset 0 0 0 100px var(--components-forms-icon-on-bg-input-filled-error);
}
.rel_form-field--disabled .rel_form-field__control:hover,
.rel_form-field--disabled .rel_form-field__control:focus,
.rel_form-field--readonly .rel_form-field__control:hover,
.rel_form-field--readonly .rel_form-field__control:focus {
	--tv-shadow: none;
	--tw-shadow-colored: none;
	border-color: var(--components-forms-border-input-disabled);
}
.rel_form-field--disabled .rel_form-field__control:checked {
	background-color: var(--components-forms-icon-on-bg-input-disabled);
}
.rel_form-field--readonly .rel_form-field__control:checked {
	background-color: var(--components-forms-icon-on-bg-input-read-only);
}
.rel_form-field--disabled .rel_form-field__control:indeterminate,
.rel_form-field--readonly .rel_form-field__control:indeterminate {
	background-color: var(--components-forms-bg-input-disabled);
	border-color: var(--components-forms-border-input-disabled);
}
.rel_transition-border {
	transition-duration: 0.15s;
	transition-property: border;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 501px) {
	.md\:rel_block {
		display: block;
	}

	.rel_es_p-4 {
		padding: var(--spacing-08);
	}
}

@media (min-width: 501px) and (max-width: 768px) {
	/*
	Sobreescritura de comportamientos de clases para pantallas entre 501px y 768px.
	La necesidad viene provocada porque los breakpoints de Orbit no son suficientes para nuestros diseños.
	Orbit breakpoints: sm:0px, md:501px, lg:941px, xl:1281px.

	Ejemplos:
	- https://tailwindcss.com/docs/responsive-design
	- https://getbootstrap.com/docs/5.0/layout/breakpoints/
	*/

	/* Grid responsive utilities */
	.md\:rel_grid-cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 941px) {
	.lg\:rel_py-10 {
		padding-bottom: var(--spacing-10);
		padding-top: var(--spacing-10);
	}
}

.rel_text-lowercase {
	text-transform: lowercase;
}

.rel_popover {
	max-width: calc(336px + 2 * (var(--spacing-06)));
}

/* TabBar background prop */
.rel_bg-\[var\(--bg-trigger-pressed\)\] {
	background-color: var(--bg-trigger-pressed);
}

.active\:rel_bg-\[var\(--bg-trigger-pressed\)\]:active {
	background-color: var(--bg-trigger-pressed);
}

.focus\:rel_bg-\[var\(--bg-trigger-pressed\)\]:focus,
.focus-visible\:rel_bg-\[var\(--bg-trigger-pressed\)\]:focus-visible {
	background-color: var(--bg-trigger-pressed);
}
.rel_tab-list__arrow .rel_icon-button:hover {
	background-color: var(--bg-tertiary-hover);
}

/* =========================================================
   REL Slider Component
   ========================================================= */

/* .rel_w-full covers width: 100% */

.rel_slider-label {
	display: block;
	margin-bottom: var(--spacing-02);
	color: var(--color-grey-900);
}

/* .rel_flex + align-items: flex-end not available as base class */
.rel_slider-controls {
	display: flex;
	align-items: flex-end;
	gap: var(--spacing-04);
}

/* .rel_flex-1 + .rel_relative + .rel_overflow-visible cover most of this */
.rel_slider-track {
	padding-top: 3.5rem;
	padding-bottom: 0.7rem;
}

/* .rel_absolute + .rel_whitespace-nowrap + .rel_z-10 + .rel_text-paragraph-md cover most */
.rel_slider-tooltip {
	top: -2px;
	transform: translateX(-50%);
	padding: var(--spacing-02) var(--spacing-04);
	border-radius: var(--radius-02);
	background-color: var(--components-slider-bg-tooltip);
	color: var(--components-slider-text-on-bg-tooltip);
}

.rel_slider-tooltip::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 12px;
	height: 12px;
	background-color: var(--components-slider-bg-tooltip);
}

/* .rel_w-full covers width */
.rel_slider-input {
	height: 2px;
	border-radius: var(--radius-01);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.rel_slider-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	background: var(--components-slider-bg-range-dot);
	cursor: pointer;
}

.rel_slider-input::-moz-range-thumb {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	background: var(--components-slider-bg-range-dot);
	cursor: pointer;
	border: none;
}

.rel_slider-input:hover::-webkit-slider-thumb {
	background: white;
	box-shadow: inset 0 0 0 2px var(--components-slider-bg-range-dot);
}

.rel_slider-input:hover::-moz-range-thumb {
	background: white;
	box-shadow: inset 0 0 0 2px var(--components-slider-bg-range-dot);
}

.rel_slider-input:focus-visible {
	outline: none;
}

.rel_slider-input:focus-visible::-webkit-slider-thumb {
	background: var(--components-slider-bg-range-dot);
	box-shadow: 0 0 0 2px var(--components-slider-bg-range-dot), 0 0 0 4px white,
		0 0 0 6px var(--components-slider-border-focus-ring);
}

.rel_slider-input:focus-visible::-moz-range-thumb {
	background: var(--components-slider-bg-range-dot);
	box-shadow: 0 0 0 2px var(--components-slider-bg-range-dot), 0 0 0 4px white,
		0 0 0 6px var(--components-slider-border-focus-ring);
}

/* .rel_flex + .rel_justify-between + .rel_mt-2 + .rel_text-paragraph-md + .rel_text-on-bg-default-default cover most */
.rel_slider-labels {
	color: var(--text-on-bg-default-default);
}

/* .rel_mt-2 + .rel_text-paragraph-sm cover most */
.rel_slider-helper {
	color: var(--color-grey-600);
}

.rel_text-action {
	color: var(--color-mariner-default);
}
.rel_form-field--readonly .rel_form-field__control--input-text {
	background-color: transparent;
}

/* =========================================================
   Modal: iOS Safari safe-area fix.
   rel_h-screen uses 100vh which on Safari iOS includes the
   browser chrome. Use dvh where supported, and add
   safe-area-inset-bottom padding to the footer.
   ========================================================= */

/* Override h-screen / max-h-screen with dvh on browsers that support it */

@supports (height: 100dvh) {
	[data-rel-modal-overlay],
	[data-rel-modal-dialog] {
		height: 100dvh;
	}
	[data-rel-modal-dialog] {
		max-height: 100dvh;
	}
}

@media (min-width: 1024px) {
	@supports (height: 100dvh) {
		[data-rel-modal-dialog] {
			height: auto;
			max-height: calc(100dvh - 80px);
		}
	}
}

/* iOS Safari: pad footer so buttons clear the browser nav bar */
@supports (padding-bottom: env(safe-area-inset-bottom)) {

	@media (max-width: 1023px) {
		[data-rel-modal-footer] {
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
}

.rel_border-idle {
	border-color: var(--border-trigger-idle);
}

.disabled\:rel_filters-button:disabled {
	background-color: var(--bg-primary-disabled);
	border-color: var(--bg-primary-disabled);
	color: var(--on-bg-primary-disabled);
	cursor: not-allowed;
	pointer-events: auto;
}

.disabled\:rel_filters-button:disabled > svg {
	color: var(--icon-on-bg-primary-disabled);
}

.disabled\:rel_filters-button:disabled [role="status"] {
	background-color: var(--on-bg-primary-disabled);
	color: var(--bg-primary-disabled);
}