/**
 * WeProCTA Frontend Styles
 * * Includes:
 * 1. Variables & Shared
 * 2. Mobile "Pill" Navigation
 * 3. Desktop Floating Button
 * 4. Inline Widgets (Hours, Grids)
 * 5. Animations & Responsiveness
 */

:root {
	/* Dynamic Brand Color (Overridden by PHP wp_add_inline_style) */
	--weprocta-brand: #C5A869; 
	
	/* Neutral Palette */
	--weprocta-dark: #1d2327;
	--weprocta-text: #3c434a;
	--weprocta-bg: #ffffff;
	
	/* Physical Properties */
	--weprocta-shadow: 0 8px 30px rgba(0,0,0,0.12);
	--weprocta-radius: 50px;
	--weprocta-zindex: 99999; /* High enough to float, low enough to not block Admin Bar */
}

/* =========================================
   1. Shared Icon Styles
   ========================================= */
.weprocta-icon svg,
.card-icon svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* =========================================
   2. Interactive Mobile Navigation (The "Pill" Bar)
   ========================================= */
.weprocta-mobile-bar {
	display: none; /* Desktop default: Hidden */
	position: fixed;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	max-width: 95%;
	z-index: var(--weprocta-zindex);
	
	/* iPhone Home Bar Safety */
	padding-bottom: env(safe-area-inset-bottom);
	
	/* Allow clicking through the invisible wrapper */
	pointer-events: none; 
}

/* The Floating Capsule Container */
.weprocta-mobile-pills {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	padding: 6px;
	border-radius: var(--weprocta-radius);
	box-shadow: var(--weprocta-shadow);
	
	/* Reset List Styles */
	list-style: none !important;
	margin: 0 !important;
	
	gap: 6px;
	pointer-events: auto; /* Re-enable clicks on the bar itself */
	border: 1px solid rgba(0,0,0,0.04);
}

/* Individual Item Wrapper */
.weprocta-pill-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto; /* Don't stretch by default */
	transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	
	/* Reset List Styles */
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* The Link/Button Inside */
.weprocta-pill-link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	padding: 10px 14px;
	border-radius: 40px;
	color: var(--weprocta-text);
	transition: all 0.3s ease;
	background: transparent;
	position: relative;
	overflow: hidden;
	line-height: 1;
}

/* Icon Style */
.weprocta-pill-link .weprocta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888; /* Inactive Icon Color */
	transition: color 0.3s ease;
}

/* Label Style (Hidden by default on inactive) */
.weprocta-pill-link .weprocta-label {
	max-width: 0;
	opacity: 0;
	white-space: nowrap;
	overflow: hidden;
	margin-left: 0;
	font-size: 13px;
	font-weight: 600;
	transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	transform: translateX(10px);
}

/* --- ACTIVE STATE (The Animation) --- */

/* 1. Expand the Item */
.weprocta-pill-item.is-active .weprocta-pill-link {
	background-color: var(--weprocta-brand);
	color: #fff;
	padding-right: 18px; /* Extra padding for visual balance */
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 2. Color the Icon White */
.weprocta-pill-item.is-active .weprocta-pill-link .weprocta-icon {
	color: #fff;
}

/* 3. Reveal the Text */
.weprocta-pill-item.is-active .weprocta-pill-link .weprocta-label {
	max-width: 150px; /* Arbitrary limit for slide animation */
	opacity: 1;
	margin-left: 8px;
	transform: translateX(0);
}

/* --- Email Shield Fallback ---
   When wepro-core Email Shield obfuscates a mailto link, the <a> becomes
   <span class="wes"> until the inline JS decoder restores it. These rules
   keep the active pill styled during that brief window. */
.weprocta-pill-item.is-active > .wes {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	padding-right: 18px;
	border-radius: 40px;
	background-color: var(--weprocta-brand);
	color: #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	font-size: 16px;
}


/* =========================================
   3. Desktop Floating Pills
   ========================================= */
.weprocta-floating-wrapper {
	display: none;
	position: fixed;
	bottom: 90px;
	right: 40px;
	z-index: var(--weprocta-zindex);
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.weprocta-fab-main {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--weprocta-brand);
	color: #fff;
	border: none;
	box-shadow: 0 4px 15px rgba(0,0,0,0.15);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s;
	padding: 0;
}

.weprocta-fab-main:hover { transform: scale(1.1); }

.weprocta-icon-close { display: none; }
.weprocta-floating-wrapper.is-open .weprocta-icon-open { display: none; }
.weprocta-floating-wrapper.is-open .weprocta-icon-close { display: block; }
.weprocta-floating-wrapper.is-open .weprocta-fab-main { background: var(--weprocta-dark); }

.weprocta-floating-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 15px;
	
	/* Animation State: Hidden */
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.weprocta-floating-wrapper.is-open .weprocta-floating-menu {
	/* Animation State: Visible */
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.weprocta-floating-menu li {
	display: flex;
	justify-content: flex-end;
	margin: 0 !important;
	padding: 0 !important;
}

.weprocta-fab-item {
	display: inline-flex;
	align-items: center;
	background: #fff;
	padding: 12px 24px;
	border-radius: var(--weprocta-radius);
	box-shadow: var(--weprocta-shadow);
	text-decoration: none !important;
	color: var(--weprocta-text);
	font-weight: 600;
	font-size: 15px;
	transition: transform 0.2s, box-shadow 0.2s, color 0.2s;
	white-space: nowrap;
}

.weprocta-fab-item:hover {
	transform: translateX(-5px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
	color: var(--weprocta-brand);
}

/* FIX: Ensure generic icon color rule applies to all, including WhatsApp */
.weprocta-fab-item .weprocta-icon { margin-left: 12px; color: var(--weprocta-brand); }

/* Removed specific WhatsApp color override so it uses brand color */
/* .weprocta-fab-item.weprocta-btn-whatsapp .weprocta-icon { color: #25D366; } */

/* Email Shield Fallback for desktop floating menu */
.weprocta-floating-menu .wes {
	display: inline-flex;
	align-items: center;
	padding: 12px 24px;
	background: #fff;
	border-radius: var(--weprocta-radius);
	box-shadow: var(--weprocta-shadow);
	text-decoration: none;
	color: var(--weprocta-text);
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	cursor: pointer;
}


/* =========================================
   4. Media Queries
   ========================================= */
@media (min-width: 769px) {
	.weprocta-floating-wrapper { display: flex; }
	.weprocta-mobile-bar { display: none !important; }
}

@media (max-width: 768px) {
	.weprocta-floating-wrapper { display: none !important; }
	.weprocta-mobile-bar { display: block; }
}

/* Pill Bar mode: Show mobile-style bar on desktop too */
.weprocta-desktop-pill .weprocta-mobile-bar {
	display: block !important;
}

/* Print Friendly: Hide elements when printing */
@media print {
	.weprocta-floating-wrapper,
	.weprocta-mobile-bar,
	.weprocta-side-cta {
		display: none !important;
	}
}


/* =========================================
   Side CTA — Luxury Floating Tab
   ========================================= */
.weprocta-side-cta {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--weprocta-zindex);

	/* Visual — Luxury Gold Tab */
	background: color-mix(in srgb, var(--weprocta-brand) 65%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff !important;
	text-decoration: none !important;

	/* Dimensions — Thin & Elegant */
	padding: 18px 9px;
	writing-mode: vertical-rl;
	text-orientation: mixed;

	/* Typography — Refined */
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;

	/* Depth */
	box-shadow: 2px 0 15px rgba(0, 0, 0, 0.08);

	/* Interaction */
	transition: padding 0.3s cubic-bezier(0.25, 1, 0.5, 1),
	            box-shadow 0.3s ease,
	            background-color 0.3s ease;
	cursor: pointer;
}

/* Left position */
.weprocta-side-cta--left {
	left: 0;
	border-radius: 0 6px 6px 0;
}

/* Right position */
.weprocta-side-cta--right {
	right: 0;
	border-radius: 6px 0 0 6px;
}

/* Hover — slide out + deeper shadow */
.weprocta-side-cta--left:hover {
	padding-left: 14px;
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.13);
}
.weprocta-side-cta--right:hover {
	padding-right: 14px;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.13);
}

.weprocta-side-cta:hover {
	color: #fff !important;
}

/* Focus — accessible keyboard outline */
.weprocta-side-cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
	box-shadow: 0 0 0 4px var(--weprocta-brand), 4px 0 24px rgba(0, 0, 0, 0.15);
}

/* Inner text */
.weprocta-side-cta__text {
	display: block;
}

/* Visibility — desktop only (default) */
.weprocta-side-cta--desktop-only {
	display: block;
}
.weprocta-side-cta--mobile-only {
	display: none;
}

@media (max-width: 768px) {
	.weprocta-side-cta--desktop-only {
		display: none !important;
	}
	.weprocta-side-cta--mobile-only {
		display: block !important;
	}
}


/* =========================================
   5. Smart Hours Accordion
   ========================================= */
.weprocta-hours-wrapper {
	font-family: inherit;
	font-size: 15px;
	color: var(--weprocta-text);
	max-width: 400px;
	margin: 10px 0;
	border: 1px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: transparent;
}

.weprocta-hours-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 12px 15px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: inherit;
	color: inherit;
	transition: background-color 0.2s;
}
.weprocta-hours-toggle:hover { background-color: rgba(0,0,0,0.02); }

.weprocta-status-indicator { font-weight: 700; display: inline-flex; align-items: center; font-size: 14px; }
.weprocta-status-indicator.open { color: #047481; }
.weprocta-status-indicator.closed { color: #c53030; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background-color: currentColor; }

.weprocta-toggle-icon svg { transition: transform 0.3s ease; fill: #aaa; }
.weprocta-hours-wrapper.is-expanded .weprocta-toggle-icon svg { transform: rotate(180deg); }

.weprocta-hours-body { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; }
.weprocta-hours-wrapper.is-expanded .weprocta-hours-body { max-height: 500px; opacity: 1; border-top: 1px solid #eee; }

.weprocta-hours-body table { width: 100%; border-collapse: collapse; margin: 0; }
.weprocta-hours-body td { padding: 8px 15px; font-size: 14px; color: #666; border-bottom: 1px solid #f0f0f0; }
.weprocta-hours-body tr:last-child td { border-bottom: none; }
.weprocta-hours-body tr.is-today td { color: var(--weprocta-text); font-weight: 700; background-color: rgba(0,0,0,0.02); }


/* =========================================
   6. Inline Grid
   ========================================= */
.weprocta-inline-panel { margin: 30px 0; }
.weprocta-inline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
.weprocta-inline-header h3 { margin: 0; font-size: 20px; color: var(--weprocta-dark); }

.weprocta-status-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; display: inline-flex; align-items: center; }
.weprocta-status-badge.open { background: #e6fffa; color: #047481; }
.weprocta-status-badge.closed { background: #fff5f5; color: #c53030; }

.weprocta-inline-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 15px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Stray elements from wpautop / Avada (safety net — PHP already strips whitespace) */
.weprocta-inline-grid > p,
.weprocta-inline-grid > br {
	display: none !important;
}

/* Card styling — <a> cards + Email Shield <span.wes> (before JS decoder runs) */
.weprocta-inline-grid > a.weprocta-inline-card,
.weprocta-inline-grid > span.wes {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	min-height: 0 !important;
	box-sizing: border-box !important;
	flex: none !important;
	float: none !important;
	margin: 0 !important;
	background: #fff !important;
	padding: 15px 20px !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
	text-decoration: none !important;
	color: var(--weprocta-text) !important;
	border: 1px solid #f0f0f0 !important;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
	line-height: 1.4 !important;
	font-size: inherit !important;
	cursor: pointer;
}

@media (max-width: 768px) {
	.weprocta-inline-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	.weprocta-inline-grid { grid-template-columns: 1fr !important; }
}

.weprocta-inline-grid > a.weprocta-inline-card:hover,
.weprocta-inline-grid > span.wes:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
	border-color: var(--weprocta-brand) !important;
	color: var(--weprocta-dark) !important;
}

.weprocta-inline-grid .card-icon {
	margin-right: 12px !important;
	color: var(--weprocta-brand) !important;
	display: flex !important;
	align-items: center !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

.weprocta-inline-grid > a:hover .card-icon,
.weprocta-inline-grid > span.wes:hover .card-icon {
	color: var(--weprocta-dark) !important;
}

.weprocta-inline-grid .card-label {
	font-weight: 600 !important;
	font-size: 15px !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}