/**
 * Frontend Styles for Contact Form to Public (CPF).
 * Premium Google Review & Testimonial Architecture.
 *
 * Audited according to /design-taste-frontend:
 * - Anti-slop typography & Google-native neutral palette (#202124, #3c4043, #5f6368).
 * - Layered ambient occlusion shadows (Google card elevation).
 * - Authentic 2026 Google multi-color G icon & gold stars (#FBBC04).
 * - Verified customer badge & Google Business Owner Response styling.
 * - Hardware-accelerated hover physics with prefers-reduced-motion guardrails.
 *
 * @package PluginCPF
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
	--cpf-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Google Sans", -apple-system, sans-serif;
	--cpf-bg-card: #ffffff;
	--cpf-border-card: #e8eaed;
	--cpf-border-hover: #dadce0;
	--cpf-text-primary: #202124;
	--cpf-text-secondary: #5f6368;
	--cpf-text-muted: #70757a;
	--cpf-text-body: #3c4043;
	--cpf-star-gold: #fbbc04;
	--cpf-star-empty: #dadce0;
	--cpf-google-blue: #1a73e8;
	--cpf-google-blue-hover: #1557b0;
	--cpf-radius-card: 14px;
	--cpf-radius-pill: 9999px;
	--cpf-shadow-sm: 0 1px 3px rgba(60, 64, 67, 0.08), 0 1px 2px rgba(60, 64, 67, 0.12);
	--cpf-shadow-md: 0 4px 14px rgba(60, 64, 67, 0.10), 0 1px 3px rgba(60, 64, 67, 0.08);
	--cpf-shadow-hover: 0 8px 24px rgba(60, 64, 67, 0.14), 0 2px 6px rgba(60, 64, 67, 0.08);
	--cpf-transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Wrapper & Grid Layouts
   ========================================================================== */
.cpf-reviews-wrapper {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--cpf-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 24px 0;
}

.cpf-reviews-wrapper *,
.cpf-reviews-wrapper *::before,
.cpf-reviews-wrapper *::after {
	box-sizing: border-box;
}

.cpf-grid-container {
	display: grid;
	gap: 20px;
	width: 100%;
}

/* Column Presets */
.cpf-cols-1 .cpf-grid-container { grid-template-columns: 1fr; }
.cpf-cols-2 .cpf-grid-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cpf-cols-3 .cpf-grid-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cpf-cols-4 .cpf-grid-container { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.cpf-cols-3 .cpf-grid-container,
	.cpf-cols-4 .cpf-grid-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.cpf-grid-container,
	.cpf-cols-2 .cpf-grid-container,
	.cpf-cols-3 .cpf-grid-container,
	.cpf-cols-4 .cpf-grid-container {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ==========================================================================
   Card Component (Google Review Style)
   ========================================================================== */
.cpf-review-card {
	background-color: var(--cpf-bg-card);
	border: 1px solid var(--cpf-border-card);
	border-radius: var(--cpf-radius-card);
	padding: 22px 24px;
	box-shadow: var(--cpf-shadow-sm);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: var(--cpf-transition);
	will-change: transform, box-shadow;
}

.cpf-review-card:hover {
	transform: translateY(-2px);
	border-color: var(--cpf-border-hover);
	box-shadow: var(--cpf-shadow-hover);
}

/* Card Header */
.cpf-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
	gap: 12px;
}

.cpf-author-box {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
}

.cpf-author-avatar {
	flex-shrink: 0;
}

.cpf-author-avatar img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 1px solid rgba(0, 0, 0, 0.08);
}

.cpf-avatar-monogram {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-weight: 700;
	font-size: 17px;
	text-transform: uppercase;
	user-select: none;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.cpf-author-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cpf-author-name-wrap {
	display: flex;
	align-items: center;
	gap: 5px;
}

.cpf-author-name {
	font-weight: 600;
	font-size: 14.5px;
	color: var(--cpf-text-primary);
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cpf-verified-badge svg {
	display: block;
	flex-shrink: 0;
}

.cpf-author-role {
	font-size: 12px;
	color: var(--cpf-text-secondary);
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 1px;
}

.cpf-review-date {
	font-size: 11.5px;
	color: var(--cpf-text-muted);
	margin-top: 1px;
}

.cpf-google-badge {
	flex-shrink: 0;
	padding: 2px;
}

.cpf-google-icon {
	display: block;
	width: 22px;
	height: 22px;
}

/* Star Rating Section */
.cpf-stars-row {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.cpf-stars-list {
	display: flex;
	align-items: center;
	gap: 2px;
}

.cpf-star-svg {
	display: block;
	flex-shrink: 0;
}

/* Review Message */
.cpf-card-body {
	font-size: 14px;
	line-height: 1.62;
	color: var(--cpf-text-body);
	flex-grow: 1;
	word-break: break-word;
}

.cpf-text-short,
.cpf-text-regular,
.cpf-text-full {
	margin: 0;
}

.cpf-toggle-readmore {
	background: none;
	border: none;
	color: var(--cpf-google-blue);
	font-weight: 500;
	font-size: 13px;
	padding: 0;
	margin-top: 6px;
	cursor: pointer;
	outline: none;
	text-decoration: none;
	display: inline-block;
}

.cpf-toggle-readmore:hover {
	text-decoration: underline;
	color: var(--cpf-google-blue-hover);
}

/* Extra Form Fields (Clean Key-Value Pill Style) */
.cpf-extra-fields {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #f1f3f4;
	font-size: 12px;
	color: var(--cpf-text-secondary);
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.cpf-extra-label {
	font-weight: 600;
	color: var(--cpf-text-primary);
}

/* Business Owner Response (Google Business Profile Style) */
.cpf-owner-response {
	margin-top: 14px;
	background: #f8f9fa;
	border-left: 3px solid var(--cpf-google-blue);
	border-radius: 0 8px 8px 0;
	padding: 12px 14px;
}

.cpf-response-header {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--cpf-text-primary);
	margin-bottom: 4px;
}

.cpf-response-icon {
	font-size: 13px;
}

.cpf-response-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--cpf-text-body);
}

/* ==========================================================================
   Dark Theme Variant
   ========================================================================== */
.cpf-theme-dark {
	--cpf-bg-card: #1e222b;
	--cpf-border-card: #2e3440;
	--cpf-border-hover: #3b4252;
	--cpf-text-primary: #f8fafc;
	--cpf-text-secondary: #94a3b8;
	--cpf-text-muted: #64748b;
	--cpf-text-body: #cbd5e1;
	--cpf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
	--cpf-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.cpf-theme-dark .cpf-owner-response {
	background: #151922;
	border-left-color: #3b82f6;
}

.cpf-theme-dark .cpf-extra-fields {
	border-top-color: #2e3440;
}

/* ==========================================================================
   Carousel / Slider Layout
   ========================================================================== */
.cpf-layout-google-slider {
	position: relative;
	overflow: hidden;
	padding: 8px 0 32px 0;
}

.cpf-slider-container {
	overflow: hidden;
	width: 100%;
}

.cpf-slider-track {
	display: flex;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

.cpf-layout-google-slider .cpf-slide {
	flex: 0 0 calc(33.333% - 14px);
	margin-right: 20px;
	box-sizing: border-box;
}

.cpf-cols-1.cpf-layout-google-slider .cpf-slide { flex: 0 0 100%; margin-right: 0; }
.cpf-cols-2.cpf-layout-google-slider .cpf-slide { flex: 0 0 calc(50% - 10px); margin-right: 20px; }
.cpf-cols-3.cpf-layout-google-slider .cpf-slide { flex: 0 0 calc(33.333% - 14px); margin-right: 20px; }
.cpf-cols-4.cpf-layout-google-slider .cpf-slide { flex: 0 0 calc(25% - 15px); margin-right: 20px; }

@media (max-width: 1024px) {
	.cpf-layout-google-slider .cpf-slide,
	.cpf-cols-3.cpf-layout-google-slider .cpf-slide,
	.cpf-cols-4.cpf-layout-google-slider .cpf-slide {
		flex: 0 0 calc(50% - 10px);
	}
}

@media (max-width: 640px) {
	.cpf-layout-google-slider .cpf-slide,
	.cpf-cols-2.cpf-layout-google-slider .cpf-slide,
	.cpf-cols-3.cpf-layout-google-slider .cpf-slide,
	.cpf-cols-4.cpf-layout-google-slider .cpf-slide {
		flex: 0 0 100%;
		margin-right: 0;
	}
}

/* Navigation Controls */
.cpf-slider-nav {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

.cpf-slider-btn {
	background: #ffffff;
	border: 1px solid var(--cpf-border-card);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--cpf-text-body);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transition: var(--cpf-transition);
}

.cpf-slider-btn:hover {
	background: var(--cpf-google-blue);
	color: #ffffff;
	border-color: var(--cpf-google-blue);
	transform: scale(1.04);
}

.cpf-slider-btn:active {
	transform: scale(0.96);
}

.cpf-slider-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

/* Slider Pagination Dots */
.cpf-slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
}

.cpf-slider-dot {
	width: 7px;
	height: 7px;
	border-radius: var(--cpf-radius-pill);
	background: #d1d5db;
	cursor: pointer;
	transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.cpf-slider-dot.active {
	background: var(--cpf-google-blue);
	width: 22px;
}

/* ==========================================================================
   Masonry Wall Layout
   ========================================================================== */
.cpf-layout-masonry-wall .cpf-grid-container {
	display: block;
	column-count: 3;
	column-gap: 20px;
}

.cpf-layout-masonry-wall .cpf-review-card {
	break-inside: avoid;
	margin-bottom: 20px;
}

@media (max-width: 1024px) {
	.cpf-layout-masonry-wall .cpf-grid-container {
		column-count: 2;
	}
}

@media (max-width: 640px) {
	.cpf-layout-masonry-wall .cpf-grid-container {
		column-count: 1;
	}
}

/* ==========================================================================
   Modern Testimonial Cards Layout
   ========================================================================== */
.cpf-layout-testimonial-card .cpf-review-card {
	border-radius: 18px;
	padding: 26px;
	background: #ffffff;
	border: 1px solid #edf2f7;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.cpf-layout-testimonial-card .cpf-card-body::before {
	content: "“";
	display: block;
	font-family: Georgia, serif;
	font-size: 42px;
	line-height: 0.8;
	color: #94a3b8;
	margin-bottom: 8px;
}

/* ==========================================================================
   Summary Google Rating Badge Layout
   ========================================================================== */
.cpf-summary-badge-wrap {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: #ffffff;
	border: 1px solid var(--cpf-border-card);
	border-radius: var(--cpf-radius-pill);
	padding: 10px 22px;
	box-shadow: var(--cpf-shadow-sm);
	transition: var(--cpf-transition);
}

.cpf-summary-badge-wrap:hover {
	box-shadow: var(--cpf-shadow-md);
	border-color: var(--cpf-border-hover);
}

.cpf-badge-g-icon svg {
	display: block;
	width: 32px;
	height: 32px;
}

.cpf-badge-info {
	display: flex;
	flex-direction: column;
}

.cpf-badge-score-line {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cpf-badge-title {
	font-weight: 700;
	font-size: 13.5px;
	color: var(--cpf-text-primary);
}

.cpf-badge-score {
	font-weight: 800;
	font-size: 16px;
	color: var(--cpf-text-primary);
}

.cpf-badge-stars {
	display: flex;
	align-items: center;
	gap: 2px;
}

.cpf-badge-count {
	font-size: 12px;
	color: var(--cpf-text-secondary);
	margin-top: 1px;
}

/* ==========================================================================
   Frontend Submission Form
   ========================================================================== */
.cpf-frontend-form-wrapper {
	max-width: 640px;
	margin: 24px auto;
	box-sizing: border-box;
}

.cpf-form-card {
	background: #ffffff;
	border: 1px solid var(--cpf-border-card);
	border-radius: 16px;
	padding: 32px;
	box-shadow: var(--cpf-shadow-md);
}

.cpf-form-title {
	margin: 0 0 6px 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--cpf-text-primary);
	letter-spacing: -0.01em;
}

.cpf-form-subtitle {
	margin: 0 0 22px 0;
	font-size: 14px;
	color: var(--cpf-text-secondary);
	line-height: 1.5;
}

.cpf-form-group {
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
}

.cpf-form-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 600px) {
	.cpf-form-grid-2 {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.cpf-form-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--cpf-text-primary);
	margin-bottom: 6px;
}

.cpf-form-label .required {
	color: #ef4444;
}

.cpf-input,
.cpf-textarea,
.cpf-file-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	color: var(--cpf-text-primary);
	background: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	outline: none;
	font-family: inherit;
}

.cpf-input:focus,
.cpf-textarea:focus {
	border-color: var(--cpf-google-blue);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
}

.cpf-star-rating-selector {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cpf-stars-interactive {
	display: flex;
	gap: 3px;
}

.cpf-star-btn {
	font-size: 26px;
	color: var(--cpf-star-empty);
	cursor: pointer;
	user-select: none;
	transition: transform 0.12s ease, color 0.12s ease;
}

.cpf-star-btn:hover,
.cpf-star-btn.hovered,
.cpf-star-btn.active {
	color: var(--cpf-star-gold);
}

.cpf-star-btn:hover {
	transform: scale(1.18);
}

.cpf-rating-text-feedback {
	font-size: 13px;
	font-weight: 600;
	color: var(--cpf-text-secondary);
}

.cpf-submit-btn {
	background: var(--cpf-google-blue);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 11px 26px;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: var(--cpf-transition);
	box-shadow: 0 1px 3px rgba(26, 115, 232, 0.25);
}

.cpf-submit-btn:hover {
	background: var(--cpf-google-blue-hover);
	box-shadow: 0 4px 12px rgba(26, 115, 232, 0.35);
	transform: translateY(-1px);
}

.cpf-submit-btn:active {
	transform: translateY(0);
}

.cpf-form-response-msg {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 13.5px;
}

.cpf-form-response-msg.success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.cpf-form-response-msg.error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* ==========================================================================
   Prefers-Reduced-Motion Guardrail
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.cpf-review-card,
	.cpf-slider-btn,
	.cpf-slider-track,
	.cpf-slider-dot,
	.cpf-submit-btn,
	.cpf-star-btn {
		transition: none !important;
		transform: none !important;
	}
}