/**
 * Photo Reviews for WooCommerce - Front-end Styles v2.1
 */

/* ── Upload area ─────────────────────────────────────── */
.xyno-upload-area > label { display:block; font-weight:600; margin-bottom:4px; }
.xyno-upload-hint { display:block; font-size:.84em; color:#888; margin-bottom:8px; }

.xyno-drop-zone {
	display:block;            /* must be block — inline/span breaks absolute child */
	border:2px dashed #c3c3c3; border-radius:8px; padding:24px 16px;
	text-align:center; cursor:pointer; position:relative;
	transition:border-color .2s, background .2s;
	background:#fafafa;
	user-select:none;
}
.xyno-drop-zone.xyno-drag-over { border-color:#7F54B3; background:#f3edfd; }
/* File input covers entire zone — z-index above label so clicks reach it */
.xyno-file-input {
	position:absolute; top:0; left:0; right:0; bottom:0;
	opacity:0; cursor:pointer; width:100%; height:100%; z-index:3;
}
.xyno-drop-label {
	pointer-events:none; display:flex; flex-direction:column;
	align-items:center; gap:6px; color:#666; font-size:.9em; position:relative; z-index:1;
}
.xyno-drop-icon { font-size:2em; line-height:1; }
.xyno-drop-label small { font-size:.8em; color:#aaa; }

/* ── Crop modal ──────────────────────────────────────── */
#xyno-crop-modal {
	display:none; position:fixed; inset:0; z-index:999999;
	background:rgba(0,0,0,.84); align-items:center; justify-content:center;
	padding:12px;
}
.xyno-crop-box {
	background:#fff; border-radius:12px; width:100%; max-width:540px;
	max-height:94vh; overflow-y:auto; display:flex; flex-direction:column;
}
.xyno-crop-head {
	display:flex; justify-content:space-between; align-items:center;
	padding:14px 18px 10px; border-bottom:1px solid #f0f0f0;
	font-size:.95em; font-weight:600;
}
#xyno-crop-counter { font-size:.8em; color:#aaa; font-weight:400; }
.xyno-crop-canvas-wrap {
	background:#111; max-height:52vh; overflow:hidden;
}
.xyno-crop-canvas-wrap img { display:block; max-width:100%; }
.xyno-crop-ratios {
	display:flex; gap:8px; padding:12px 18px; flex-wrap:wrap;
}
.xyno-ratio-btn {
	padding:5px 13px; border:1px solid #ddd; border-radius:5px;
	cursor:pointer; font-size:.82em; background:#fff; transition:all .15s;
}
.xyno-ratio-btn:hover { border-color:#7F54B3; color:#7F54B3; }
.xyno-ratio-btn.active { background:#7F54B3; color:#fff; border-color:#7F54B3; }
.xyno-crop-actions {
	display:flex; gap:10px; justify-content:flex-end; padding:12px 18px 16px;
	border-top:1px solid #f0f0f0;
}
#xyno-crop-skip {
	padding:9px 18px; border:1px solid #ddd; border-radius:6px;
	cursor:pointer; background:#f8f8f8; font-size:.88em;
}
#xyno-crop-apply {
	padding:9px 20px; background:#7F54B3; color:#fff; border:none;
	border-radius:6px; cursor:pointer; font-weight:700; font-size:.88em;
}
#xyno-crop-apply:hover { background:#6a46a0; }

.xyno-preview-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.xyno-preview-thumb { width:72px; height:72px; border-radius:6px; overflow:hidden; border:2px solid #e2d8f7; position:relative; }
.xyno-preview-thumb img, .xyno-preview-thumb video { width:100%; height:100%; object-fit:cover; }

/* Crop modal */
#xyno-crop-modal { display:none; }

/* ── Media gallery (in review) ───────────────────────── */
.xyno-media-gallery { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.xyno-media-thumb {
	position:relative; width:110px; height:80px; border-radius:8px;
	overflow:hidden; cursor:pointer; border:1px solid #e0e0e0;
	transition:transform .15s, box-shadow .15s;
}
.xyno-media-thumb:hover { transform:scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,.15); }
.xyno-thumb-img { width:100%; height:100%; object-fit:cover; display:block; }
.xyno-zoom-icon, .xyno-play-icon {
	position:absolute; bottom:5px; right:5px;
	background:rgba(0,0,0,.5); color:#fff;
	border-radius:4px; padding:2px 6px; font-size:10px; line-height:1.5;
	pointer-events:none;
}
.xyno-play-icon { bottom:50%; right:50%; transform:translate(50%,50%); border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:12px; }

/* ── Verified badge ──────────────────────────────────── */
.xyno-verified-badge {
	display:inline-flex; align-items:center; gap:4px;
	margin:5px 0; font-size:.76em; font-weight:600;
	color:#1a7f37; background:#e6f4ea; border:1px solid #b7dfbe;
	border-radius:99px; padding:2px 10px;
}

/* ── Stars — match WooCommerce exactly ───────────────── */
/* WC uses .star-rating with :before pseudo-elements and font-size:1em */
.xyno-star-display {
	position:relative; display:inline-block;
	font-family:star; font-size:1em; line-height:1;
	height:1.5em; width:6.25em; /* same ratio as WC */
}
.xyno-stars-filled {
	position:absolute; top:0; left:0; overflow:hidden;
	white-space:nowrap; color:inherit;
}
.xyno-stars-empty { color:#d3ced2; }
/* Big number in summary */
.xyno-big-number { font-size:2.6em; font-weight:700; line-height:1; letter-spacing:-.02em; }

/* ── Edit button ─────────────────────────────────────── */
.xyno-edit-btn {
	background:none; border:1px solid #c9b8e8; color:#7F54B3;
	border-radius:99px; cursor:pointer; font-size:.8em;
	padding:3px 12px; margin-top:8px; display:inline-block;
	transition:background .15s;
}
.xyno-edit-btn:hover { background:#f3edfd; }

/* ── Edit modal ──────────────────────────────────────── */
.xyno-edit-modal {
	position:fixed; inset:0; background:rgba(0,0,0,.65);
	z-index:99999; display:flex; align-items:center; justify-content:center;
	padding:16px;
}
.xyno-modal-inner {
	background:#fff; border-radius:14px; padding:0;
	width:100%; max-width:600px; max-height:92vh;
	overflow-y:auto; box-shadow:0 12px 48px rgba(0,0,0,.25);
	display:flex; flex-direction:column;
}
.xyno-modal-header {
	padding:18px 22px 14px; border-bottom:1px solid #f0f0f0;
	display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; z-index:2;
}
.xyno-modal-header h3 { margin:0; font-size:1.05em; font-weight:700; }
.xyno-modal-close { background:none; border:none; cursor:pointer; font-size:1.4em; color:#999; padding:0 4px; line-height:1; }
.xyno-modal-close:hover { color:#333; }
.xyno-modal-body { padding:18px 22px; flex:1; }
.xyno-modal-footer { padding:14px 22px 18px; border-top:1px solid #f0f0f0; display:flex; justify-content:flex-end; gap:10px; position:sticky; bottom:0; background:#fff; }

.xyno-form-group { margin-bottom:16px; }
.xyno-form-group > label { display:block; font-weight:600; font-size:.85em; color:#444; margin-bottom:6px; }
.xyno-form-group select,
.xyno-form-group textarea { width:100%; padding:9px 11px; border:1.5px solid #ddd; border-radius:7px; font-size:.9em; transition:border .15s; }
.xyno-form-group select:focus,
.xyno-form-group textarea:focus { border-color:#7F54B3; outline:none; }
.xyno-form-group textarea { min-height:100px; resize:vertical; }

/* Star picker (replaces <select> in modal) */
.xyno-star-picker { display:flex; gap:4px; align-items:center; }
.xyno-star-pick { font-size:1.8em; cursor:pointer; color:#ddd; transition:color .1s, transform .1s; line-height:1; background:none; border:none; padding:0; }
.xyno-star-pick.xyno-star-on { color:#f0a500; }
.xyno-star-pick.xyno-star-hover { color:#f0c040; transform:scale(1.1); }
.xyno-star-label { font-size:.82em; color:#888; margin-left:6px; }

/* Existing media grid in modal */
.xyno-edit-media-grid { display:flex; flex-wrap:wrap; gap:8px; }
.xyno-edit-media-item {
	position:relative; width:88px; height:88px; border-radius:8px;
	overflow:hidden; border:2px solid #eee;
}
.xyno-edit-media-item img,
.xyno-edit-media-item video { width:100%; height:100%; object-fit:cover; }
.xyno-remove-media {
	position:absolute; top:3px; right:3px;
	background:rgba(0,0,0,.6); color:#fff; border:none;
	border-radius:50%; width:22px; height:22px; font-size:12px;
	cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1;
}
/* New files preview inside modal */
.xyno-modal-new-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.xyno-new-badge {
	position:absolute; top:3px; left:3px; background:#7F54B3; color:#fff;
	font-size:9px; font-weight:700; border-radius:3px; padding:1px 4px;
}
.xyno-new-preview-item { position:relative; width:88px; height:88px; border-radius:8px; overflow:hidden; border:2px solid #c9b8e8; }
.xyno-new-preview-item img,
.xyno-new-preview-item video { width:100%; height:100%; object-fit:cover; }

/* Modal file input area */
.xyno-modal-drop {
	border:2px dashed #ddd; border-radius:8px; padding:14px;
	text-align:center; cursor:pointer; position:relative; font-size:.85em; color:#888;
}
.xyno-modal-file-input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }

.xyno-cancel-btn { padding:9px 18px; background:#f0f0f0; border:none; border-radius:7px; cursor:pointer; font-size:.9em; }
.xyno-cancel-btn:hover { background:#e4e4e4; }
.xyno-submit-btn { padding:9px 22px; background:#7F54B3; color:#fff; border:none; border-radius:7px; cursor:pointer; font-size:.9em; font-weight:700; }
.xyno-submit-btn:hover { background:#6a46a0; }
.xyno-submit-btn:disabled { opacity:.6; cursor:not-allowed; }

.xyno-msg { border-radius:6px; padding:9px 13px; margin-top:10px; font-size:.86em; }
.xyno-msg-success { background:#e6f4ea; color:#1a7f37; border:1px solid #b7dfbe; }
.xyno-msg-error   { background:#fde8e8; color:#9b1c1c; border:1px solid #f5bebe; }

/* ── Vote buttons ────────────────────────────────────── */
.xyno-vote-wrap { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.xyno-helpful-label { font-size:.8em; color:#aaa; }
.xyno-vote-btn {
	background:none; border:1px solid #e0e0e0; border-radius:99px;
	padding:3px 13px; cursor:pointer; font-size:.82em;
	transition:background .15s, border-color .15s;
}
.xyno-vote-btn:hover { background:#f8f4ff; border-color:#c9b8e8; }

/* ── Rating summary ──────────────────────────────────── */
#xyno-review-header { margin:20px 0 14px; }
.xyno-rating-summary {
	display:flex; flex-wrap:wrap; gap:18px;
	border:1px solid #ececec; border-radius:12px;
	padding:18px 20px; margin-bottom:14px;
	align-items:center;
}
.xyno-summary-left { text-align:center; min-width:60px; }
.xyno-summary-right { display:flex; flex-direction:column; gap:4px; }
.xyno-review-count { font-size:.8em; color:#999; margin-top:3px; }

.xyno-bars { flex:1; min-width:160px; }
.xyno-bar-row {
	display:flex; align-items:center; gap:8px; margin-bottom:5px;
	cursor:pointer; border-radius:5px; padding:3px 5px;
	transition:background .12s;
}
.xyno-bar-row:hover, .xyno-bar-row:focus { background:#f7f4fd; outline:none; }
.xyno-bar-label { font-size:.78em; width:22px; text-align:right; flex-shrink:0; color:#555; }
.xyno-bar-track { flex:1; height:8px; background:#eee; border-radius:4px; overflow:hidden; }
.xyno-bar-fill  { height:100%; border-radius:4px; transition:width .5s ease; }
.xyno-bar-count { font-size:.75em; width:20px; flex-shrink:0; color:#aaa; }

/* ── Filter ──────────────────────────────────────────── */
.xyno-filter-wrap { margin-bottom:16px; }
.xyno-filter-select {
	width:100%;             /* FULL WIDTH — no max-width cap */
	padding:9px 14px;
	border-radius:7px;
	border:1.5px solid #ddd;
	font-size:.9em;
	cursor:pointer;
	appearance:auto;
}
.xyno-filter-select:focus { border-color:#7F54B3; outline:none; }

/* ── Pagination ──────────────────────────────────────── */
#xyno-pagination { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.xyno-page-btn { padding:5px 13px; border:1px solid #ddd; background:#fff; border-radius:6px; cursor:pointer; font-size:.85em; transition:background .1s; }
.xyno-page-btn:hover { background:#f7f4fd; }
.xyno-page-btn.xyno-page-active { background:#7F54B3; color:#fff; border-color:#7F54B3; }

/* ── Loading ─────────────────────────────────────────── */
.xyno-loading { opacity:.4; pointer-events:none; transition:opacity .2s; }

/* ── No reviews ──────────────────────────────────────── */
.xyno-no-reviews { color:#aaa; font-style:italic; padding:12px 0; }

/* ══════════════════════════════════════════════════════
   PRODUCT PAGE LAYOUTS
══════════════════════════════════════════════════════ */

.xyno-layout-wrap { margin:0; padding:0; }

/* --- Layout 1: Default (inherits WooCommerce list) --- */
/* no extra rules — WC .commentlist handles it */

/* --- Layout 2: Cards grid --- */
.xyno-page-layout-cards .commentlist,
.xyno-page-layout-cards .xyno-review-list {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
	gap:18px;
	list-style:none; padding:0; margin:0;
}
.xyno-page-layout-cards .review.comment {
	background:#fff; border:1px solid #ececec; border-radius:12px;
	padding:18px; box-shadow:0 2px 8px rgba(0,0,0,.05);
	transition:box-shadow .2s;
}
.xyno-page-layout-cards .review.comment:hover { box-shadow:0 6px 20px rgba(0,0,0,.1); }
.xyno-page-layout-cards .comment_container { display:flex; flex-direction:column; gap:10px; }
.xyno-page-layout-cards .avatar { border-radius:50%; width:40px!important; height:40px!important; }
.xyno-page-layout-cards .comment-text { flex:1; }

/* --- Layout 3: Minimal list --- */
.xyno-page-layout-minimal .commentlist,
.xyno-page-layout-minimal .xyno-review-list { list-style:none; padding:0; margin:0; }
.xyno-page-layout-minimal .review.comment {
	padding:14px 0; border-bottom:1px solid #f2f2f2;
	display:flex; gap:12px; align-items:flex-start;
}
.xyno-page-layout-minimal .review.comment:last-child { border-bottom:none; }
.xyno-page-layout-minimal .avatar { border-radius:50%; width:36px!important; height:36px!important; flex-shrink:0; }
.xyno-page-layout-minimal .comment-text { flex:1; }
.xyno-page-layout-minimal p.meta { margin:0 0 4px; font-size:.8em; color:#aaa; }
.xyno-page-layout-minimal .description { font-size:.9em; }
.xyno-page-layout-minimal .xyno-media-gallery .xyno-media-thumb { width:70px; height:50px; }

/* --- Layout 4: Magazine (big first + grid) --- */
.xyno-page-layout-magazine .commentlist,
.xyno-page-layout-magazine .xyno-review-list { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.xyno-page-layout-magazine .review.comment:first-child {
	grid-column:1/-1;
	background:linear-gradient(135deg,#faf8ff,#fff);
	border:1px solid #e2d8f7; border-radius:14px; padding:22px;
}
.xyno-page-layout-magazine .review.comment:first-child .xyno-media-gallery .xyno-media-thumb { width:180px; height:130px; }
.xyno-page-layout-magazine .review.comment:not(:first-child) {
	background:#fff; border:1px solid #ececec; border-radius:10px; padding:16px;
}
@media (min-width:640px) {
	.xyno-page-layout-magazine .commentlist,
	.xyno-page-layout-magazine .xyno-review-list { grid-template-columns:1fr 1fr; }
	.xyno-page-layout-magazine .review.comment:first-child { grid-column:1/-1; }
}

/* --- Layout 5: Slider --- */
.xyno-layout-slider { position:relative; overflow:hidden; }
.xyno-slider-viewport { overflow:hidden; border-radius:12px; }
.xyno-slider-track {
	display:flex; transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.xyno-slide-card {
	flex:0 0 calc(50% - 10px); min-width:calc(50% - 10px); margin-right:20px;
	background:#fff; border:1px solid #ececec; border-radius:12px;
	padding:18px; box-shadow:0 2px 8px rgba(0,0,0,.04);
	box-sizing:border-box;
}
@media (max-width:600px) {
	.xyno-slide-card { flex:0 0 calc(100%); min-width:100%; margin-right:0; }
}
.xyno-slider-prev, .xyno-slider-next {
	position:absolute; top:50%; transform:translateY(-50%); z-index:10;
	background:#fff; border:1px solid #ddd; border-radius:50%;
	width:36px; height:36px; display:flex; align-items:center; justify-content:center;
	cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.1); font-size:14px;
	transition:background .15s;
}
.xyno-slider-prev:hover, .xyno-slider-next:hover { background:#f3edfd; }
.xyno-slider-prev { left:6px; }
.xyno-slider-next { right:6px; }
.xyno-slider-dots { display:flex; justify-content:center; gap:6px; margin-top:12px; }
.xyno-slider-dot {
	width:8px; height:8px; border-radius:50%; background:#ddd; border:none;
	cursor:pointer; padding:0; transition:background .2s, transform .2s;
}
.xyno-slider-dot.active { background:#7F54B3; transform:scale(1.3); }

/* ══════════════════════════════════════════════════════
   SHORTCODE LAYOUTS
══════════════════════════════════════════════════════ */

.xyno-prp-shortcode-wrap { margin:20px 0; }
.xyno-review-list { list-style:none; padding:0; margin:0; }

/* Shortcode: grid */
.xyno-sc-grid .xyno-review-list {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
	gap:16px;
}
.xyno-sc-grid .review.comment {
	background:#fff; border:1px solid #ececec; border-radius:10px;
	padding:16px; box-shadow:0 2px 6px rgba(0,0,0,.05);
}

/* Shortcode: masonry-ish (CSS columns) */
.xyno-sc-masonry .xyno-review-list {
	columns:2; column-gap:16px;
}
.xyno-sc-masonry .review.comment {
	break-inside:avoid; background:#fff;
	border:1px solid #ececec; border-radius:10px;
	padding:16px; margin-bottom:16px;
	box-shadow:0 2px 6px rgba(0,0,0,.05);
}
@media (max-width:480px) { .xyno-sc-masonry .xyno-review-list { columns:1; } }

/* Shortcode: carousel (re-uses slider styles) */
.xyno-sc-carousel .xyno-layout-slider { padding:0 46px; }

/* Common shortcode review card internals */
.xyno-sc-grid .review.comment .comment_container,
.xyno-sc-masonry .review.comment .comment_container { display:flex; flex-direction:column; gap:8px; }
.xyno-sc-grid .avatar,
.xyno-sc-masonry .avatar { border-radius:50%; width:36px!important; height:36px!important; }
.xyno-sc-grid p.meta,
.xyno-sc-masonry p.meta { font-size:.8em; color:#aaa; margin:0 0 4px; }