/**
 * FIP WooCommerce Customer Dashboard Styles
 *
 * Minimal styling for the custom WooCommerce my-account templates
 * Using Tailwind CSS classes in templates whenever possible
 *
 * @package fip-woocommerce
 */

/* Essential WooCommerce Overrides */
.woocommerce {
	max-width: clamp(260px, 91vw, 1080px) !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
}

/* Password Strength Meter Styles */
.password-strength-progress {
	transition: width 0.3s ease, background-color 0.3s ease;
}

.password-req-char,
.password-req-letter,
.password-req-number {
	transition: background-color 0.3s ease;
}

.password-strength-text {
	transition: color 0.3s ease;
}

/* Tooltip Styles */
.fip-tooltip-content {
	position: fixed !important;
}

/* Tooltip Arrow */
.fip-tooltip-content::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

/* Top position arrow (points down) */
.fip-tooltip-icon[data-tooltip-position="top"] .fip-tooltip-content::before {
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 5px 5px 0 5px;
	border-color: var(--wp--preset--color--grey-800) transparent transparent transparent;
}

/* Bottom position arrow (points up) */
.fip-tooltip-icon[data-tooltip-position="bottom"] .fip-tooltip-content::before {
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 0 5px 5px 5px;
	border-color: transparent transparent var(--wp--preset--color--grey-800) transparent;
}

/* Left position arrow (points right) */
.fip-tooltip-icon[data-tooltip-position="left"] .fip-tooltip-content::before {
	right: -5px;
	top: 50%;
	transform: translateY(-50%);
	border-width: 5px 0 5px 5px;
	border-color: transparent transparent transparent var(--wp--preset--color--grey-800);
}

/* Right position arrow (points left) */
.fip-tooltip-icon[data-tooltip-position="right"] .fip-tooltip-content::before {
	left: -5px;
	top: 50%;
	transform: translateY(-50%);
	border-width: 5px 5px 5px 0;
	border-color: transparent var(--wp--preset--color--grey-800) transparent transparent;
}

/* Copy to Clipboard Styles */
.copy-icon {
	transition: all 0.2s ease;
}

.copy-icon:hover {
	opacity: 0.7;
}

.copy-icon:active {
	transform: scale(0.95);
}

/* Hidden textarea for clipboard fallback */
.copy-fallback-textarea {
	position: fixed;
	top: 0;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}

/* Copy Tooltip */
.copy-tooltip {
	position: absolute;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	color: var(--wp--preset--color--white);
	z-index: 9999;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: var(--wp--preset--shadow--xs);
	transform: translateX(-50%);
}

.copy-tooltip-success {
	background-color: var(--wp--preset--color--success-700);
}

.copy-tooltip-error {
	background-color: var(--wp--preset--color--danger-700);
}

/* Tooltip Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
	to {
		opacity: 0;
		transform: translateX(-50%) translateY(-5px);
	}
}

.copy-tooltip.fade-in {
	animation: fadeIn 0.2s ease-in-out;
}

.copy-tooltip.fade-out {
	animation: fadeOut 0.2s ease-in-out;
}


/* WooCommerce */
.woocommerce-page form .form-row select {
	background-position: calc(100% - 8px) 50%;
}

/* Funinport theme for flatpicker calendar */
.flatpickr-calendar {
	--calendar-header-height: 44px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-100);
	border-radius: 8px;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.flatpickr-months .flatpickr-month {
	background: var(--wp--preset--color--teal-600);
	color: var(--wp--preset--color--white);
	border-radius: 8px 8px 0 0;
	height: var(--calendar-header-height);
}

.flatpickr-current-month {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	height: var(--calendar-header-height);
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
	background: var(--wp--preset--color--teal-600);
	color: var(--wp--preset--color--white);
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
	border-bottom-color: var(--wp--preset--color--white);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
	border-top-color: var(--wp--preset--color--white);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--wp--preset--color--white);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
	fill: rgba(255, 255, 255, 0.8);
}

span.flatpickr-weekday {
	color: var(--wp--preset--color--grey-600);
	font-weight: 600;
}

.flatpickr-day {
	color: var(--wp--preset--color--grey-700);
	border-radius: 6px;
}

.flatpickr-day:hover {
	background: var(--wp--preset--color--teal-100);
	border-color: var(--wp--preset--color--teal-100);
	color: var(--wp--preset--color--teal-600);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
	background: var(--wp--preset--color--teal-600);
	border-color: var(--wp--preset--color--teal-600);
	color: var(--wp--preset--color--white);
}

.flatpickr-day.today {
	border-color: var(--wp--preset--color--teal-600);
	color: var(--wp--preset--color--teal-600);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
	background: var(--wp--preset--color--teal-600);
	border-color: var(--wp--preset--color--teal-600);
	color: var(--wp--preset--color--white);
}

.flatpickr-day.inRange {
	background: var(--wp--preset--color--teal-100);
	border-color: var(--wp--preset--color--teal-100);
	color: var(--wp--preset--color--teal-600);
	box-shadow: -5px 0 0 var(--wp--preset--color--teal-100), 5px 0 0 var(--wp--preset--color--teal-100);
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
	color: var(--wp--preset--color--grey-300);
	background: transparent;
	border-color: transparent;
	cursor: not-allowed;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	height: var(--calendar-header-height);
	display: flex;
	align-items: center;
}