/*
 * Card style for testimonials (Turnstile fork).
 *
 * Loaded after the plugin's own styles when "Use card style" is ticked on the General tab.
 * Everything is scoped to body.katb-cards, so unticking the option brings back the original look.
 * The colours are set on the General tab ("Card ... color"); katb_card_style_css() in testimonial-basics.php
 * prints them as these variables. The values here are only the fallback.
 */
body.katb-cards {
	--katb-card-bg: #2b2f36;
	--katb-card-border: #3c414a;
	--katb-accent: #4aabbf;
	--katb-text: #e2e4e7;
	--katb-name: #ffffff;
	--katb-muted: #8f98a3;
	--katb-star: #f2c230;
}

/* Spacing between cards */
body.katb-cards .katb_widget_wrap,
body.katb-cards .katb_test_wrap,
body.katb-cards .katb_test_wrap_basic {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

/* The rotator keeps its padding (its script sizes the box) but loses its dark backing, which showed as a black frame */
body.katb-cards .katb_widget_rotator_wrap,
body.katb-cards .katb_widget_rotator_wrap_basic {
	background: transparent !important;
	border: 0 !important;
}

/* The card */
body.katb-cards .katb_widget_box,
body.katb-cards .katb_widget_box_basic,
body.katb-cards .katb_widget_rotator_box,
body.katb-cards .katb_widget_rotator_box_basic,
body.katb-cards .katb_test_box,
body.katb-cards .katb_test_box_basic {
	position: relative;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 22px 64px 20px 26px !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.12)), var(--katb-card-bg) !important;
	border: 1px solid var(--katb-card-border);
	border-left: 3px solid var(--katb-accent);
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	font-size: 15px !important;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
body.katb-cards .katb_widget_box:hover,
body.katb-cards .katb_widget_box_basic:hover,
body.katb-cards .katb_test_box:hover,
body.katb-cards .katb_test_box_basic:hover {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
	transform: translateY(-1px);
}

/* Large faint quote mark in the top corner */
body.katb-cards .katb_widget_box::before,
body.katb-cards .katb_widget_box_basic::before,
body.katb-cards .katb_widget_rotator_box::before,
body.katb-cards .katb_widget_rotator_box_basic::before,
body.katb-cards .katb_test_box::before,
body.katb-cards .katb_test_box_basic::before {
	content: "\201C";
	position: absolute;
	top: 6px;
	right: 20px;
	font: 700 72px/1 Georgia, "Times New Roman", serif;
	color: var(--katb-accent);
	opacity: 0.22;
	pointer-events: none;
}

/* Inner parts carry no background of their own */
body.katb-cards .katb_widget_box *,
body.katb-cards .katb_widget_box_basic *,
body.katb-cards .katb_widget_rotator_box *,
body.katb-cards .katb_test_box *,
body.katb-cards .katb_test_box_basic * {
	background-color: transparent !important;
}

/* Stars */
body.katb-cards .katb_title_rating_wrap {
	margin: 0 0 8px;
	padding: 0;
	border: 0 !important;
}
body.katb-cards .katb_css_rating {
	color: var(--katb-star) !important;
}
body.katb-cards .katb_css_rating svg {
	width: 17px;
	height: 17px;
	margin-right: 2px;
	fill: currentColor;
}

/* Testimonial title, if used */
body.katb-cards .katb_title {
	color: var(--katb-name) !important;
	font-size: 1.1em;
	font-weight: 700;
}

/* Name and date */
body.katb-cards .katb_meta_top,
body.katb-cards .katb_meta_bottom {
	margin: 0 0 10px;
	padding: 0;
	border: 0 !important;
	line-height: 1.4;
}
body.katb-cards .katb_meta_bottom {
	margin: 12px 0 0;
}
body.katb-cards .katb_author {
	color: var(--katb-name) !important;
	font-weight: 700;
	font-size: 1.02em;
	letter-spacing: 0.01em;
}
body.katb-cards .katb_date,
body.katb-cards .katb_location,
body.katb-cards .katb_custom1,
body.katb-cards .katb_custom2 {
	color: var(--katb-muted) !important;
	font-weight: 400;
	font-size: 0.88em;
}

/* The testimonial itself */
body.katb-cards .katb_test_text,
body.katb-cards .katb_test_text p,
body.katb-cards .katb_testimonial_wrap,
body.katb-cards .katb_testimonial_wrap p {
	color: var(--katb-text) !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
}
body.katb-cards .katb_test_text p {
	margin: 0 0 0.7em;
}
body.katb-cards .katb_test_text p:last-child {
	margin-bottom: 0;
}

/* Photo / gravatar */
body.katb-cards .katb_avatar img,
body.katb-cards .katb_widget_avatar img,
body.katb-cards .katb_avatar_img {
	border-radius: 50%;
	border: 2px solid var(--katb-card-border);
}

/* Links and "more" */
body.katb-cards .katb_widget_box a,
body.katb-cards .katb_test_box a {
	color: var(--katb-accent) !important;
}
body.katb-cards .katb_widget_box a:hover,
body.katb-cards .katb_test_box a:hover {
	color: #ffffff !important;
}

/* Turnstile box on the input forms */
.cf-turnstile {
	margin: 10px 0;
}

@media (max-width: 600px) {
	body.katb-cards .katb_widget_box,
	body.katb-cards .katb_widget_box_basic,
	body.katb-cards .katb_widget_rotator_box,
	body.katb-cards .katb_test_box,
	body.katb-cards .katb_test_box_basic {
		padding: 18px 18px 16px 20px !important;
	}
	body.katb-cards .katb_widget_box::before,
	body.katb-cards .katb_test_box::before {
		font-size: 56px;
		right: 12px;
	}
}