/**
 * Tourseta Cookie Banner - Custom Styles
 *
 * Based on Figma Design: Tour Operator Website Design System
 *
 * @package Tourseta
 * @since 1.0.0
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
	--tourseta-cookie-primary: var(--wp--preset--color--primary);
	--tourseta-cookie-primary-hover: var(--wp--preset--color--primary);
	--tourseta-cookie-text-dark: #1A1A1A;
	--tourseta-cookie-text-gray: #424242;
	--tourseta-cookie-bg-white: #FFFFFF;
	--tourseta-cookie-bg-light: #F3F4F6;
	--tourseta-cookie-border: #E5E7EB;
	--tourseta-cookie-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
	--tourseta-cookie-radius: 12px;
	--tourseta-cookie-radius-btn: 12px;
	--tourseta-cookie-transition: all 0.2s ease;
}

/* ============================================
   Main Banner Container
   ============================================ */
.tourseta-cookie-banner.cky-consent-container  {
	position: fixed;
	bottom: 20px;
	left: 20px;
	right: 20px;
	width: auto;
	z-index: 9999999;
	background: transparent;
	text-align: center;
}

.tourseta-cookie-banner .tourseta-banner.cky-consent-bar  {
	display: inline-flex;
	align-items: flex-end;
	gap: 79px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 32px;
	background: var(--tourseta-cookie-bg-white);
	border: none;
	box-shadow: none;
	border-radius: 20px;
	width: 100%;
	box-sizing: border-box;
	border-radius: 20px;
	border: 1px solid var(--Neutral-30, #E8E8E8) !important;
	background: var(--Neutral-00, #FFF);
	box-shadow: 0 21px 32px 0 rgba(0, 0, 0, 0.08), 0 4px 12.5px 0 rgba(0, 0, 0, 0.05) !important;
	max-width: 1036px;
	text-align: left;
}

/* ============================================
   Cookie Icon
   ============================================ */
.tourseta-cookie-icon {
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.tourseta-cookie-icon svg {
	width: 20px;
	height: 20px;
}

.tourseta-cookie-icon {
	color: var(--tourseta-cookie-primary);
	/* or any dynamic color you want */
}

/* For paths that originally had fill */
.tourseta-cookie-icon svg path[fill] {
	fill: currentColor !important;
}

/* For paths that originally had stroke */
.tourseta-cookie-icon svg path[stroke] {
	stroke: currentColor !important;
}

/* Revisit button icon - white on orange background */
.cky-btn-revisit {
	color: #ffffff;
}

.cky-btn-revisit svg {
	width: 24px;
	height: 24px;
}

/* Modal header icon */
.tourseta-modal-title-wrapper svg {
	width: 32px;
	height: 32px;
	filter: drop-shadow(0 2px 4px rgba(255, 95, 0, 0.2));
}

/* ============================================
   Banner Content
   ============================================ */
.tourseta-cookie-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.tourseta-cookie-title {
	color: var(--tourseta-cookie-text-dark);
		font-size: 18px;
		font-weight: 700;
		line-height: 1.3;
		margin: 0 0 8px 0;
		display: flex;
		align-items: center;
		align-content: center;
		gap: 10px;
}

.tourseta-cookie-description {
		color: var(--tourseta-cookie-text-gray);
			font-size: 14px;
			line-height: 1.5;
			margin: 0;
			font-weight: 400;
}

.tourseta-cookie-description p {
	margin: 0;
}

/* Cookie Settings Link */
.tourseta-cookie-link {
	color: var(--tourseta-cookie-primary) !important;
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
		background: none;
		border: none !important;
		padding: 0;
		cursor: pointer;
		display: inline;
		line-height: inherit;
		transition: var(--tourseta-cookie-transition);
		text-decoration: underline;
}

.tourseta-cookie-link:hover,
.tourseta-cookie-link:focus {
	color: var(--tourseta-cookie-primary-hover) !important;
	text-decoration: underline;
}

/* ============================================
   Buttons
   ============================================ */
.tourseta-cookie-buttons {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-shrink: 0;
}

.tourseta-btn {
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	padding: 14px 28px;
	border-radius: var(--tourseta-cookie-radius-btn);
	border: none;
	cursor: pointer;
	transition: var(--tourseta-cookie-transition);
	white-space: nowrap;
	font-family: inherit;
	border: none !important;
	height: 44px !important;
}

.tourseta-btn-decline {
	display: flex !important;

	padding: 9px 24px !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 10px !important;

	border: 1px solid #E8E8E8 !important;
		background: var(--tourseta-cookie-bg-light);
			
	color: var(--tourseta-cookie-text-dark) !important;
}

.tourseta-btn-decline:hover,
.tourseta-btn-decline:focus {
	background: #F9F9F9 !important;
	border-color: #D0D0D0 !important;
}



.tourseta-btn-accept:hover,
.tourseta-btn-accept:focus {
	background: var(--tourseta-cookie-primary-hover);

}

.tourseta-btn-secondary {
	background: var(--tourseta-cookie-bg-white) !important;
	color: var(--tourseta-cookie-text-dark) !important;
	border: none !important;
	border: 1px solid #E8E8E8 !important;
}



/* ============================================
   Revisit Button
   ============================================ */
.cky-btn-revisit-wrapper {
	background: var(--tourseta-cookie-primary);
	transition: var(--tourseta-cookie-transition);
}

.cky-btn-revisit-wrapper:hover,
.cky-btn-revisit-wrapper:focus-within {
	background: var(--tourseta-cookie-primary-hover);
}

/* ============================================
   Modal / Preference Center
   ============================================ */
.tourseta-modal .cky-preference-center {
	max-width: 720px;
	border-radius: var(--tourseta-cookie-radius);
}

.tourseta-modal-header.cky-preference-header {
	padding: 24px 32px;

	border: none;
}

.tourseta-modal-title-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tourseta-modal-header .cky-preference-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--tourseta-cookie-text-dark);
	margin: 0;
}

.tourseta-close-btn {
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tourseta-cookie-bg-light);
	border: none;
	border-radius: 50%;
	transition: var(--tourseta-cookie-transition);
	cursor: pointer;
}

.tourseta-close-btn:hover,
.tourseta-close-btn:focus {
	background: #E5E7EB;
}

/* Modal Body */
.tourseta-modal-body {
	padding: 24px 32px;
}

.tourseta-modal-content.cky-preference-content-wrapper {
	color: var(--tourseta-cookie-text-gray);
	font-size: 14px !important;
	line-height: 1.5;
	margin-bottom: 0px;
	border: none;
}

.tourseta-modal-content p {
	margin: 0 0 12px 0;
}

.tourseta-modal-content p:last-child {
	margin-bottom: 0;
}

/* Accordion */
.tourseta-accordion .cky-accordion {
	border: 1px solid var(--tourseta-cookie-border);
	border-radius: var(--tourseta-cookie-radius-btn);
	margin-bottom: 12px;
	overflow: hidden;
}



.tourseta-accordion .cky-accordion:last-child {
	margin-bottom: 0;
}


/* Hide default close button */
.tourseta-banner .cky-banner-btn-close {
	display: none;
}

.tourseta-accordion .cky-accordion-header {
	padding: 16px 20px;
}

.tourseta-accordion .cky-accordion-btn {
	font-size: 16px;
	font-weight: 600;
	color: var(--tourseta-cookie-text-dark);
}

.tourseta-accordion .cky-accordion-chevron i::before {
	border-color: var(--tourseta-cookie-primary);
}

/* Modal Footer */
.tourseta-modal-footer {
	padding: 20px 32px;
	border:none;
}

.tourseta-footer-buttons.cky-prefrence-btn-wrapper  {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	border: none;
}

/* ============================================
   Accessibility & Focus States
   ============================================ */
.tourseta-btn:focus-visible,
.tourseta-cookie-link:focus-visible,
.tourseta-close-btn:focus-visible {
	outline: 2px solid var(--tourseta-cookie-primary);
	outline-offset: 2px;
}

/* Screen reader only text */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ============================================
   Overlay & Visibility States
   ============================================ */
.cky-overlay {
	background: rgba(0, 0, 0, 0.5);
}

.cky-hide {
	display: none;
}

/* ============================================
   Animations
   ============================================ */
.tourseta-cookie-banner {
	animation: slideUpBanner 0.4s ease-out;
}

@keyframes slideUpBanner {
	from {
		transform: translateY(calc(100% + 20px));
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Mobile animation - slides from bottom without offset */
@media (max-width: 768px) {
	@keyframes slideUpBanner {
		from {
			transform: translateY(100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
}

.tourseta-modal.cky-modal-open {
	animation: fadeInModal 0.3s ease-out;
}

@keyframes fadeInModal {
	from {
		opacity: 0;
		transform: translate(-50%, -48%) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
	
}

/* Mobile (768px and below) */
@media (max-width: 768px) {

	.tourseta-cookie-banner.cky-consent-container {
			position: fixed;
			bottom: 0px;
			left: 0px;
			right: 0px;
			width: 100%;
			z-index: 9999999;
			background: transparent;
			text-align: center;
			/* border-radius: 0px; */
		}
	.tourseta-cookie-banner {
		bottom: 0;
		left: 0;
		right: 0;
	}

		button.tourseta-btn.tourseta-btn-decline.cky-btn-reject {
			width: 40%;
		}
	
		button.tourseta-btn.tourseta-btn-accept.cky-btn-accept.tour-button {
			width: 60%;
		}

	.tourseta-banner {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px !important;
		
		border-radius: 20px 20px 0 0 !important;
		gap: 24px !important;
	}

	.tourseta-cookie-icon {
		align-self: flex-start;
		align-items: center;
	}

	.tourseta-cookie-icon svg {
		width: 36px;
		height: 36px;
	}

	.tourseta-cookie-content {
		align-items: flex-start;
	}

	.tourseta-modal-title-wrapper svg {
		width: 24px;
		height: 24px;
	}

	.tourseta-cookie-buttons {
		width: 100%;
	
		
	}

	

	.tourseta-modal-header,
	.tourseta-modal-body,
	.tourseta-modal-footer {
		padding-left: 20px;
		padding-right: 20px;
	}

	.tourseta-footer-buttons {
		flex-direction: column-reverse;
		width: 100%;
	}

	.tourseta-footer-buttons .tourseta-btn {
		width: 100%;
	}
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
	.tourseta-banner {
		padding: 20px;
		gap: 16px;
	}

	.tourseta-cookie-icon svg {
		width: 32px;
		height: 32px;
	}

	.tourseta-cookie-title {
		font-size: 16px;
	}

	.tourseta-cookie-description {
		font-size: 13px;
	}

	.tourseta-btn {
		padding: 12px 20px;
		font-size: 14px;
	}

	.tourseta-modal-header .cky-preference-title {
		font-size: 20px;
	}
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
	.tourseta-cookie-banner,
	.cky-btn-revisit-wrapper,
	.tourseta-modal {
		display: none;
	}
}