/* 
 * Premium Q&A Styles 
 * Modern, clean typography and responsive flexbox layouts
 */

#wc-qa-tab-container {
	margin-top: 2rem;
	color: #374151;
	font-size: 15px !important;
}

#wc-qa-tab-container h2 {
	font-size: 1.75rem !important;
	font-weight: 700;
	color: #111827;
	margin-bottom: 1.5rem;
}
#wc-qa-tab-container h3 {
	font-size: 1.5rem !important;
	font-weight: 700;
	color: #111827;
	margin-bottom: 1.5rem;
}

/* Question Cards */
.wc-qa-question {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 24px;
	background: #ffffff;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	transition: box-shadow 0.2s ease;
	position: relative; /* Stacking context */
}
.wc-qa-question:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}

.wc-qa-q-header, .wc-qa-answer {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.wc-qa-q-header {
	position: relative;
}
/* Vertical line connecting Q box to answers list, only when answers exist */
.wc-qa-q-header:has(+ .wc-qa-answers)::after {
	content: '';
	position: absolute;
	top: 44px; /* Bottom of Q box */
	left: 21px; /* Center of Q box */
	width: 2px;
	bottom: -12px; /* Reach top of answers container */
	background: #cbd5e1;
}

/* Q&A Icon Boxes */
.wc-qa-icon-box {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	z-index: 2;
}
.wc-qa-icon-q {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	font-size: 18px !important;
	color: #4f46e5;
	background: #eef2ff;
	border: 1.5px solid #c7d2fe;
}
.wc-qa-icon-a {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	font-size: 15px !important;
	color: #16a34a;
	background: #f0fdf4;
	border: 1.5px solid #bbf7d0;
}
.wc-qa-q-header {
	position: relative;
}

.wc-qa-q-content-wrap, .wc-qa-a-content-wrap {
	flex: 1;
	min-width: 0;
}

#wc-qa-tab-container .wc-qa-q-text, 
#wc-qa-tab-container .wc-qa-a-text {
	font-size: 16px !important;
	font-weight: 500;
	line-height: 1.6;
	margin-bottom: 8px;
	color: #1f2937;
	display: flex;
	align-items: flex-start;
}
#wc-qa-tab-container .wc-qa-a-text {
	font-size: 15px !important;
	font-weight: 400;
	color: #4b5563;
}
.wc-qa-text-body {
	flex: 1;
}

/* Metadata */
#wc-qa-tab-container .wc-qa-meta {
	font-size: 13px !important;
	color: #6b7280 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px 16px !important;
	align-items: center !important;
	margin-top: 4px !important;
}
#wc-qa-tab-container .wc-qa-author {
	font-weight: 600 !important;
	color: #374151 !important;
}

/* Voting SVGs */
#wc-qa-tab-container .wc-qa-voting {
	display: flex !important;
	gap: 12px !important;
	align-items: center !important;
}
#wc-qa-tab-container .wc-qa-vote {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	text-decoration: none !important;
	color: #6b7280 !important;
	transition: all 0.2s ease !important;
	border: 1px solid transparent !important;
	padding: 2px 6px !important;
	border-radius: 4px !important;
	background: transparent !important;
}
#wc-qa-tab-container .wc-qa-vote svg {
	display: inline-block !important;
	vertical-align: middle !important;
	stroke: currentColor !important;
	transition: transform 0.2s ease !important;
}
#wc-qa-tab-container .wc-qa-vote:hover svg {
	transform: scale(1.15) translateY(-1px) !important;
}
/* Upvote / Downvote Colors */
#wc-qa-tab-container .wc-qa-vote-up:hover, 
#wc-qa-tab-container .wc-qa-vote-up.voted {
	color: #10b981 !important;
}
#wc-qa-tab-container .wc-qa-vote-up:hover svg, 
#wc-qa-tab-container .wc-qa-vote-up.voted svg {
	fill: #10b981 !important;
}

#wc-qa-tab-container .wc-qa-vote-down:hover, 
#wc-qa-tab-container .wc-qa-vote-down.voted {
	color: #ef4444 !important;
}
#wc-qa-tab-container .wc-qa-vote-down:hover svg, 
#wc-qa-tab-container .wc-qa-vote-down.voted svg {
	fill: #ef4444 !important;
}

#wc-qa-tab-container .wc-qa-report {
	color: #9ca3af !important;
	text-decoration: none !important;
	transition: color 0.2s !important;
	font-size: 13px !important;
}
#wc-qa-tab-container .wc-qa-report:hover {
	color: #ef4444 !important;
	text-decoration: underline !important;
}

/* Answers Section - Tree Line Layout */
.wc-qa-answers {
	margin-top: 12px;
	margin-left: 21px; /* Align line with center of Q box */
	padding-left: 28px; 
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: relative;
	z-index: 1;
}
/* Trunk line inside answers container */
.wc-qa-answers::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0; /* Align with center of Q box (margin-left: 21px) */
	width: 2px;
	bottom: 0;
	background: #cbd5e1;
}
.wc-qa-answer {
	position: relative;
	z-index: 2; /* Force child elements to render on top of parent border */
}
/* Horizontal branch for each answer */
.wc-qa-answer::before {
	content: '';
	position: absolute;
	top: 17px; /* center of A box (36/2 - 1) */
	left: -28px; /* align exactly with the trunk vertical line */
	width: 28px; /* span exactly from trunk to A box */
	height: 2px;
	background: #cbd5e1;
	z-index: 1;
}
/* Cover to hide the vertical line below the last visible answer's branch */
.wc-qa-answer.wc-qa-last-visible::after {
	content: '';
	position: absolute;
	top: 19px; /* Just below the branch */
	left: -29px; /* Center over the trunk line (which is at -28px) */
	width: 4px; /* Cover the 2px line completely */
	bottom: -40px; /* Extend past bottom of card/container */
	background: #ffffff; /* White background of the card */
	z-index: 3; /* Guaranteed to overlay the parent vertical line */
}
.wc-qa-hidden-answer {
	display: none;
}
.wc-qa-answer-form-wrap {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px dashed #e5e7eb;
}
#wc-qa-tab-container .wc-qa-toggle-answer-form {
	display: inline-flex !important;
	align-items: center !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #4f46e5 !important;
	text-decoration: none !important;
	background: #eef2ff !important;
	padding: 10px 20px !important;
	border-radius: 8px !important;
	transition: all 0.2s ease !important;
}
#wc-qa-tab-container .wc-qa-toggle-answer-form:hover {
	background: #e0e7ff !important;
	color: #4338ca !important;
}

.wc-qa-answer-form-container {
	margin-top: 16px;
	padding: 20px;
	background: #f9fafb;
	border: 1px solid #f3f4f6;
	border-radius: 8px;
}

/* Read More */
#wc-qa-tab-container .wc-qa-read-more, 
#wc-qa-tab-container .wc-qa-read-less, 
#wc-qa-tab-container .wc-qa-show-more-answers {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #3b82f6 !important;
	text-decoration: none !important;
}
#wc-qa-tab-container .wc-qa-read-more:hover, 
#wc-qa-tab-container .wc-qa-read-less:hover, 
#wc-qa-tab-container .wc-qa-show-more-answers:hover {
	text-decoration: underline !important;
}
.wc-qa-show-more-answers-wrap {
	padding-top: 10px;
}

/* Premium Form Styling */
.wc-qa-premium-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 32px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	margin-top: 40px;
}
#wc-qa-tab-container hr {
	display: none;
}

.wc-qa-form-row-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.wc-qa-ask-form-container form p,
.wc-qa-answer-form p {
	margin-bottom: 20px;
}

#wc-qa-tab-container .wc-qa-ask-form-container form label,
#wc-qa-tab-container .wc-qa-answer-form label {
	display: block !important;
	margin-bottom: 8px !important;
	font-weight: 600 !important;
	color: #374151 !important;
	font-size: 15px !important;
}

#wc-qa-tab-container .wc-qa-ask-form-container form input[type="text"],
#wc-qa-tab-container .wc-qa-ask-form-container form input[type="email"],
#wc-qa-tab-container .wc-qa-ask-form-container form textarea,
#wc-qa-tab-container .wc-qa-answer-form input[type="text"],
#wc-qa-tab-container .wc-qa-answer-form input[type="email"],
#wc-qa-tab-container .wc-qa-answer-form textarea {
	width: 100% !important;
	padding: 12px 16px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	background-color: #f9fafb !important;
	box-sizing: border-box !important;
	transition: all 0.2s ease !important;
	font-family: inherit !important;
	font-size: 15px !important;
	color: #111827 !important;
}

/* Explicit placeholder styling to bypass theme overrides */
#wc-qa-tab-container .wc-qa-ask-form-container form input::placeholder,
#wc-qa-tab-container .wc-qa-ask-form-container form textarea::placeholder,
#wc-qa-tab-container .wc-qa-answer-form input::placeholder,
#wc-qa-tab-container .wc-qa-answer-form textarea::placeholder {
	font-size: 15px !important;
	color: #9ca3af !important;
	opacity: 1 !important;
}

/* Readonly fields styling to replace inline styles */
#wc-qa-tab-container input[readonly],
#wc-qa-tab-container textarea[readonly] {
	background-color: #f3f4f6 !important;
	color: #6b7280 !important;
	cursor: not-allowed !important;
}

/* Legible size for "No questions" text */
#wc-qa-tab-container .wc-qa-questions-list > p {
	font-size: 15px !important;
	color: #4b5563 !important;
	margin-bottom: 24px !important;
}

#wc-qa-tab-container .wc-qa-ask-form-container form input:focus,
#wc-qa-tab-container .wc-qa-ask-form-container form textarea:focus,
#wc-qa-tab-container .wc-qa-answer-form input:focus,
#wc-qa-tab-container .wc-qa-answer-form textarea:focus {
	outline: none !important;
	border-color: #6366f1 !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

.wc-qa-submit-row {
	margin-bottom: 0 !important;
}

#wc-qa-tab-container button[type="submit"],
#wc-qa-tab-container .button.alt,
#wc-qa-tab-container .wc-qa-btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	height: auto !important;
	padding: 12px 28px !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	text-align: center !important;
}

#wc-qa-tab-container button[type="submit"]:hover,
#wc-qa-tab-container .button.alt:hover,
#wc-qa-tab-container .wc-qa-btn-primary:hover {
	opacity: 0.9 !important;
}

.wc-qa-form-message {
	margin-top: 16px;
	font-weight: 500;
}
#wc-qa-tab-container .wc-qa-login-prompt {
	background: #f3f4f6 !important;
	padding: 24px !important;
	border-radius: 8px !important;
	text-align: center !important;
}
#wc-qa-tab-container .wc-qa-login-prompt p {
	margin-bottom: 16px !important;
	font-size: 16px !important;
	color: #4b5563 !important;
}