/* ==========================================================================
   Deadiacosmetics Reviews - Custom Styles
   ========================================================================== */

:root {
	--dea-primary: #FB61D0;
	--dea-primary-hover: #e84dc0;
	--dea-primary-light: rgba(251, 97, 208, 0.15);
	--dea-text: #1f2937;
	--dea-text-light: #6b7280;
	--dea-text-muted: #9ca3af;
	--dea-border: #e5e7eb;
	--dea-bg: #ffffff;
	--dea-bg-light: #f9fafb;
	--dea-star: #f59e0b;
	--dea-star-empty: #d1d5db;
	--dea-success: #10b981;
	--dea-success-bg: #d1fae5;
	--dea-error: #ef4444;
	--dea-error-bg: #fee2e2;
	--dea-radius: 8px;
	--dea-radius-lg: 12px;
	--dea-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--dea-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   Base Section
   -------------------------------------------------------------------------- */
.dea-reviews {
	/* Full-width breakout from parent container */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 48px 20px;
	background: var(--dea-bg);
	font-family: inherit;
	line-height: 1.6;
	color: var(--dea-text);
	-webkit-font-smoothing: antialiased;
}

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

.dea-reviews__container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.dea-reviews__header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 32px;
}

.dea-reviews__title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--dea-text);
	margin: 0;
}

.dea-reviews__summary-inline {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dea-reviews__average-small {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--dea-text-light);
}

.dea-reviews__total-link {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--dea-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dea-reviews__total-link:hover {
	text-decoration: none;
	color: var(--dea-primary);
}

/* --------------------------------------------------------------------------
   Summary Section
   -------------------------------------------------------------------------- */
.dea-reviews__summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 40px;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--dea-border);
}

@media (max-width: 640px) {
	.dea-reviews__summary {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.dea-reviews__summary-left {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dea-reviews__average-text {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--dea-text);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Stars
   -------------------------------------------------------------------------- */
.dea-reviews__stars {
	display: flex;
	align-items: center;
	gap: 2px;
}

.dea-reviews__star {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: block;
}

.dea-reviews__star--empty {
	opacity: 0.3;
}

.dea-reviews__star--half {
	/* Pro poloviční hvězdičku použijeme clip nebo mask */
	clip-path: inset(0 50% 0 0);
}

/* --------------------------------------------------------------------------
   Distribution
   -------------------------------------------------------------------------- */
.dea-reviews__distribution {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dea-reviews__distribution-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dea-reviews__distribution-label {
	width: 16px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--dea-text);
	text-align: center;
	flex-shrink: 0;
}

.dea-reviews__distribution-star {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: block;
}

.dea-reviews__distribution-bar {
	flex: 1;
	max-width: 280px;
	height: 8px;
	background: var(--dea-bg-light);
	border-radius: 4px;
	overflow: hidden;
}

.dea-reviews__distribution-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--dea-star), #fbbf24);
	border-radius: 4px;
	transition: width 0.3s ease;
}

.dea-reviews__distribution-count {
	min-width: 70px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--dea-primary);
	text-decoration: none;
}

.dea-reviews__distribution-count:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.dea-reviews__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 12px 24px !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	border-radius: var(--dea-radius) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border: none !important;
	margin: 0 !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

.dea-reviews__btn--primary {
	background: var(--dea-primary) !important;
	color: #ffffff !important;
}

.dea-reviews__btn--primary:hover {
	background: var(--dea-primary-hover) !important;
	transform: translateY(-1px) !important;
	box-shadow: var(--dea-shadow) !important;
	color: #ffffff !important;
}

.dea-reviews__btn--primary:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px var(--dea-primary-light) !important;
}

.dea-reviews__btn--secondary {
	background: var(--dea-bg) !important;
	color: var(--dea-text) !important;
	border: 1px solid var(--dea-border) !important;
}

.dea-reviews__btn--secondary:hover {
	background: var(--dea-bg-light) !important;
	border-color: var(--dea-text-muted) !important;
	color: var(--dea-text) !important;
}

.dea-reviews__btn--secondary:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
}

.dea-reviews__btn:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

/* --------------------------------------------------------------------------
   Review List
   -------------------------------------------------------------------------- */
.dea-reviews__list {
	display: flex;
	flex-direction: column;
}

.dea-reviews__empty {
	padding: 40px 0;
	text-align: center;
	color: var(--dea-text-light);
	font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Single Review
   -------------------------------------------------------------------------- */
.dea-reviews__item {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	padding: 28px 0;
	border-bottom: 1px solid var(--dea-border);
}

.dea-reviews__item:last-child {
	border-bottom: none;
}

@media (max-width: 640px) {
	.dea-reviews__item {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.dea-reviews__item-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dea-reviews__item-author {
	font-size: 1rem;
	font-weight: 600;
	color: var(--dea-text);
	margin: 0;
}

.dea-reviews__item-date {
	font-size: 0.8125rem;
	color: var(--dea-text-muted);
	margin: 0;
}

.dea-reviews__verified {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 4px 10px;
	background: var(--dea-primary-light);
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--dea-primary-hover);
}

.dea-reviews__verified-icon {
	width: 14px;
	height: 14px;
}

.dea-reviews__item-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dea-reviews__item-title {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--dea-text);
	margin: 0;
}

.dea-reviews__item-text {
	font-size: 0.9375rem;
	color: var(--dea-text-light);
	margin: 0;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Attachments
   -------------------------------------------------------------------------- */
.dea-reviews__attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

.dea-reviews__attachment {
	width: 80px;
	height: 100px;
	object-fit: cover;
	border-radius: var(--dea-radius);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dea-reviews__attachment:hover {
	transform: scale(1.05);
	box-shadow: var(--dea-shadow);
}

/* --------------------------------------------------------------------------
   Helpful Voting
   -------------------------------------------------------------------------- */
.dea-reviews__helpful {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--dea-border);
}

.dea-reviews__helpful-label {
	font-size: 0.875rem;
	color: var(--dea-text-light);
	margin: 0;
}

.dea-reviews__helpful-group {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dea-reviews__helpful-input {
	width: 16px;
	height: 16px;
	accent-color: var(--dea-primary);
	cursor: pointer;
}

.dea-reviews__helpful-input:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.dea-reviews__helpful-text {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--dea-text);
	cursor: pointer;
	margin: 0;
}

.dea-reviews__helpful-input:disabled + .dea-reviews__helpful-text {
	cursor: not-allowed;
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Load More
   -------------------------------------------------------------------------- */
.dea-reviews__load-more {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

/* --------------------------------------------------------------------------
   Modal Overlay
   -------------------------------------------------------------------------- */
.dea-reviews__modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.dea-reviews__modal.is-open {
	display: flex;
	opacity: 1;
}

body.dea-modal-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Modal Dialog
   -------------------------------------------------------------------------- */
.dea-reviews__modal-dialog {
	position: relative;
	width: 100%;
	max-width: 800px;
	max-height: 90vh;
	background: var(--dea-bg);
	border-radius: var(--dea-radius-lg);
	box-shadow: var(--dea-shadow-lg);
	overflow: hidden;
	transform: translateY(20px);
	transition: transform 0.2s ease;
}

.dea-reviews__modal.is-open .dea-reviews__modal-dialog {
	transform: translateY(0);
}

.dea-reviews__modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 24px 20px;
	border-bottom: 1px solid var(--dea-border);
}

.dea-reviews__modal-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--dea-text);
	margin: 0 0 4px;
}

.dea-reviews__modal-product {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--dea-primary);
	text-decoration: none;
}

.dea-reviews__modal-product:hover {
	text-decoration: underline;
}

.dea-reviews__modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--dea-radius);
	color: var(--dea-text-muted);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	flex-shrink: 0;
}

.dea-reviews__modal-close:hover {
	background: var(--dea-bg-light);
	color: var(--dea-text);
}

.dea-reviews__modal-close svg {
	width: 14px;
	height: 14px;
}

.dea-reviews__modal-body {
	padding: 24px;
	overflow-y: auto;
	max-height: calc(90vh - 180px);
}

.dea-reviews__modal-footer {
	display: flex;
	gap: 12px;
	padding: 20px 24px;
	border-top: 1px solid var(--dea-border);
	background: var(--dea-bg-light);
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.dea-reviews__form {
	display: flex;
	flex-direction: column;
}

.dea-reviews__form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 640px) {
	.dea-reviews__form-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

.dea-reviews__form-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dea-reviews__form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dea-reviews__form-row--grow {
	flex: 1;
}

.dea-reviews__form-row--grow .dea-reviews__form-textarea {
	flex: 1;
	min-height: 100px;
}

.dea-reviews__form-bottom {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--dea-border);
}

.dea-reviews__modal .dea-reviews__form-label {
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: var(--dea-text) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}

.dea-reviews__modal .dea-reviews__form-label--optional {
	font-weight: 400 !important;
	color: var(--dea-text-muted) !important;
}

/* Form inputs - vysoká specificita pro přepsání šablony */
.dea-reviews__modal .dea-reviews__form input[type="text"].dea-reviews__form-input,
.dea-reviews__modal .dea-reviews__form input[type="email"].dea-reviews__form-input,
.dea-reviews__modal .dea-reviews__form textarea.dea-reviews__form-textarea {
	width: 100% !important;
	max-width: 100% !important;
	padding: 12px 14px !important;
	font-size: 0.9375rem !important;
	font-family: inherit !important;
	line-height: 1.5 !important;
	color: var(--dea-text) !important;
	background: var(--dea-bg) !important;
	border: 1px solid var(--dea-border) !important;
	border-radius: var(--dea-radius) !important;
	box-shadow: none !important;
	margin: 0 !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.dea-reviews__modal .dea-reviews__form input[type="text"].dea-reviews__form-input:focus,
.dea-reviews__modal .dea-reviews__form input[type="email"].dea-reviews__form-input:focus,
.dea-reviews__modal .dea-reviews__form textarea.dea-reviews__form-textarea:focus {
	outline: none !important;
	border-color: var(--dea-primary) !important;
	box-shadow: 0 0 0 3px var(--dea-primary-light) !important;
}

.dea-reviews__modal .dea-reviews__form input.dea-reviews__form-input::placeholder,
.dea-reviews__modal .dea-reviews__form textarea.dea-reviews__form-textarea::placeholder {
	color: var(--dea-text-muted) !important;
	opacity: 1 !important;
}

.dea-reviews__modal .dea-reviews__form textarea.dea-reviews__form-textarea {
	min-height: 100px !important;
	resize: vertical !important;
	height: auto !important;
}

.dea-reviews__form-hint {
	font-size: 0.8125rem;
	color: var(--dea-text-muted);
	margin-top: 4px;
}

.dea-reviews__form-hint a {
	color: var(--dea-primary);
	text-decoration: none;
}

.dea-reviews__form-hint a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Rating Input
   -------------------------------------------------------------------------- */
/* Rating Picker */
.dea-reviews__rating-picker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: var(--dea-bg-light);
	border-radius: var(--dea-radius);
	border: 1px solid var(--dea-border);
}

.dea-reviews__rating-picker .dea-reviews__rating-star {
	width: 32px;
	height: 32px;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.15s ease;
	filter: grayscale(100%) opacity(0.3);
}

.dea-reviews__rating-picker .dea-reviews__rating-star.is-active {
	filter: grayscale(0%) opacity(1);
}

.dea-reviews__rating-picker .dea-reviews__rating-star.is-hover {
	filter: grayscale(0%) opacity(0.8);
}

.dea-reviews__rating-picker .dea-reviews__rating-star:hover {
	transform: scale(1.2);
}

.dea-reviews__rating-picker .dea-reviews__rating-star img {
	width: 100%;
	height: 100%;
	display: block;
}

/* Rating value display */
.dea-reviews__rating-picker::after {
	content: attr(data-rating) " / 5";
	margin-left: 12px;
	padding-left: 12px;
	border-left: 1px solid var(--dea-border);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--dea-text);
	min-width: 40px;
}

/* --------------------------------------------------------------------------
   Dropzone
   -------------------------------------------------------------------------- */
.dea-reviews__dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 20px 16px;
	background: var(--dea-bg-light);
	border: 2px dashed var(--dea-border);
	border-radius: var(--dea-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.dea-reviews__dropzone:hover {
	border-color: var(--dea-primary);
	background: var(--dea-primary-light);
}

.dea-reviews__dropzone-icon {
	width: 32px;
	height: 32px;
	color: var(--dea-text-muted);
}

.dea-reviews__dropzone-text {
	font-size: 0.875rem;
	color: var(--dea-text-light);
	text-align: center;
	margin: 0;
}

.dea-reviews__dropzone-text strong {
	color: var(--dea-primary);
}

.dea-reviews__dropzone-hint {
	font-size: 0.75rem;
	color: var(--dea-text-muted);
	margin: 0;
}

.dea-reviews__dropzone input[type="file"] {
	display: none;
}

/* --------------------------------------------------------------------------
   Checkbox
   -------------------------------------------------------------------------- */
.dea-reviews__modal .dea-reviews__checkbox {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
}

.dea-reviews__modal .dea-reviews__checkbox input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	margin: 2px 0 0 0 !important;
	padding: 0 !important;
	accent-color: var(--dea-primary) !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

.dea-reviews__modal .dea-reviews__checkbox-label {
	font-size: 0.875rem !important;
	color: var(--dea-text-light) !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.dea-reviews__modal .dea-reviews__checkbox-label a {
	color: var(--dea-primary) !important;
	text-decoration: none !important;
}

.dea-reviews__modal .dea-reviews__checkbox-label a:hover {
	text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   Notice
   -------------------------------------------------------------------------- */
.dea-reviews__notice {
	display: none;
	padding: 16px 20px;
	border-radius: var(--dea-radius);
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: center;
	margin-top: 16px;
	animation: noticeSlideIn 0.3s ease;
}

@keyframes noticeSlideIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dea-reviews__notice.is-visible {
	display: block;
}

.dea-reviews__notice--success {
	background: #ecfdf5;
	color: #047857;
	border: 2px solid #10b981;
}

.dea-reviews__notice--success::before {
	content: "✓ ";
}

.dea-reviews__notice--error {
	background: #fef2f2;
	color: #b91c1c;
	border: 2px solid #ef4444;
}

.dea-reviews__notice--error::before {
	content: "✕ ";
}

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