/* FirstMagency Client Reviews - Frontend */
.fmk-cr-wrap{
	--fmk-bg:#ffffff;
	--fmk-card:#ffffff;
	--fmk-border:rgba(15,23,42,.08);
	--fmk-shadow: 0 14px 40px rgba(15,23,42,.08);
	--fmk-shadow2: 0 10px 22px rgba(15,23,42,.08);
	--fmk-radius: 18px;
	--fmk-accent:#16a34a;
	--fmk-accent2:#0ea5e9;
	--fmk-text:#0f172a;
	--fmk-muted:rgba(15,23,42,.65);
	font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	background: var(--fmk-bg);
	color: var(--fmk-text);
	border: 1px solid var(--fmk-border);
	border-radius: calc(var(--fmk-radius) + 6px);
	padding: 18px;
	box-shadow: var(--fmk-shadow2);
	width: var(--fmk-wrap-w, 100%);
	max-width: var(--fmk-wrap-maxw, 1400px);
	min-height: var(--fmk-wrap-minh, auto);
	margin: 24px auto;
}

.fmk-cr-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom: 10px;
}

.fmk-cr-title{
	margin:0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: .1px;
}

.fmk-cr-actions{display:flex; gap:8px;}
.fmk-cr-nav{
	width:40px; height:40px;
	border-radius: 12px;
	border:1px solid var(--fmk-border);
	background: #fff;
	box-shadow: 0 8px 18px rgba(15,23,42,.06);
	cursor:pointer;
	font-size: 22px;
	line-height: 1;
	display:flex;
	align-items:center;
	justify-content:center;
	transition: transform .15s ease, box-shadow .15s ease;
}
.fmk-cr-nav:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(15,23,42,.10); }
.fmk-cr-nav:active{ transform: translateY(0px) scale(.98); }

.fmk-cr-slider{
	position: relative;
	overflow: hidden;
	padding: 12px 6px 4px;
}

.fmk-cr-track{
	display:flex;
	gap: 14px;
	overflow-x:auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 10px;
	padding-bottom: 10px;
	-webkit-overflow-scrolling: touch;
}
.fmk-cr-track::-webkit-scrollbar{height:10px;}
.fmk-cr-track::-webkit-scrollbar-thumb{background: rgba(15,23,42,.10); border-radius: 999px;}
.fmk-cr-track::-webkit-scrollbar-track{background: transparent;}

.fmk-cr-card{
	scroll-snap-align: start;
	background: var(--fmk-card);
	border: 1px solid var(--fmk-border);
	border-radius: var(--fmk-radius);
	box-shadow: var(--fmk-shadow);
	padding: 14px 14px 12px;
	min-width: var(--fmk-card-w, 320px);
	max-width: var(--fmk-card-maxw, 360px);
	min-height: var(--fmk-card-minh, auto);
	flex: 0 0 auto;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fmk-cr-card:hover{
	transform: translateY(-2px);
	box-shadow: 0 18px 48px rgba(15,23,42,.12);
	border-color: rgba(22,163,74,.25);
}
.fmk-cr-card:focus{outline: 3px solid rgba(22,163,74,.25); outline-offset: 2px;}

.fmk-cr-card-top{display:flex; gap:12px; align-items:center; margin-bottom: 10px;}
.fmk-cr-avatar{
	width:62px; height:62px;
	border-radius: 16px;
	overflow:hidden;
	border: 1px solid var(--fmk-border);
	box-shadow: 0 10px 24px rgba(15,23,42,.08);
	background: linear-gradient(135deg, rgba(22,163,74,.10), rgba(14,165,233,.10));
	flex: 0 0 auto;
}
.fmk-cr-avatar img{width:100%; height:100%; object-fit:cover; display:block;}

.fmk-cr-meta{min-width:0;}
.fmk-cr-name{font-weight: 800; font-size: 16px; margin-bottom: 2px;}
.fmk-cr-country{color: var(--fmk-muted); font-weight: 600; font-size: 13px; margin-bottom: 6px;}

.fmk-cr-stars{display:flex; gap:4px; align-items:center;}
.fmk-cr-star svg{width:18px; height:18px; fill: rgba(15,23,42,.18);}
.fmk-cr-star.is-on svg{fill: #f59e0b;}

.fmk-cr-msg{
	color: rgba(15,23,42,.80);
	font-weight: 500;
	font-size: 14.5px;
	line-height: 1.85;
	margin-top: 2px;
}
.fmk-cr-msg p{margin:0 0 8px;}
.fmk-cr-msg p:last-child{margin-bottom:0;}

.fmk-cr-audio{
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed rgba(15,23,42,.12);
	display:flex;
	justify-content:flex-start;
	align-items:center;
	gap:10px;
}
.fmk-cr-audio audio{display:none; width: 100%;}
.fmk-cr-audio-btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid rgba(22,163,74,.25);
	background: rgba(22,163,74,.06);
	color: var(--fmk-text);
	cursor:pointer;
	box-shadow: 0 10px 24px rgba(22,163,74,.10);
	transition: transform .15s ease, box-shadow .15s ease;
}
.fmk-cr-audio-btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(22,163,74,.16); }
.fmk-cr-audio-btn:active{ transform: translateY(0px) scale(.99); }

.fmk-cr-audio-ic svg{width:20px; height:20px; fill: var(--fmk-accent);}
.fmk-cr-audio-txt{font-weight:800; font-size: 13px;}
.fmk-cr-audio.is-empty{opacity:.6}

.fmk-cr-write{
	margin-top: 12px;
	border-top: 1px solid rgba(15,23,42,.08);
	padding-top: 14px;
}

.fmk-cr-write-btn{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	border-radius: 16px;
	border: 1px solid rgba(15,23,42,.10);
	background: linear-gradient(135deg, rgba(22,163,74,.10), rgba(14,165,233,.08));
	padding: 12px 14px;
	cursor:pointer;
	font-weight: 900;
	font-size: 15px;
	box-shadow: 0 12px 28px rgba(15,23,42,.08);
	transition: transform .15s ease, box-shadow .15s ease;
}
.fmk-cr-plus{
	width:28px; height:28px;
	border-radius: 12px;
	display:inline-flex; align-items:center; justify-content:center;
	background: rgba(22,163,74,.18);
	color: rgba(15,23,42,.85);
	font-size: 18px;
}
.fmk-cr-write-btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 36px rgba(15,23,42,.12); }
.fmk-cr-write-btn:active{ transform: translateY(0px) scale(.99); }

.fmk-cr-form{
	margin-top: 12px;
	border: 1px solid rgba(15,23,42,.08);
	border-radius: 18px;
	padding: 14px;
	background: rgba(255,255,255,.75);
	box-shadow: 0 16px 40px rgba(15,23,42,.08);
}

.fmk-cr-form-grid{
	display:grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.fmk-cr-field label{display:block; font-weight: 900; font-size: 13px; margin-bottom: 6px;}
.fmk-cr-field input[type="text"],
.fmk-cr-field select,
.fmk-cr-field textarea,
.fmk-cr-field input[type="file"]{
	width:100%;
	border:1px solid rgba(15,23,42,.12);
	border-radius: 14px;
	padding: 10px 12px;
	background:#fff;
	outline:none;
	box-shadow: 0 10px 22px rgba(15,23,42,.06);
	font-family: inherit;
}
.fmk-cr-field textarea{resize: vertical; min-height: 110px;}
.fmk-cr-field.is-wide{grid-column: 1 / -1;}
.fmk-cr-hint{display:block; margin-top: 6px; color: rgba(15,23,42,.60); font-weight: 600; font-size: 12px;}

.fmk-cr-audio-rec{display:flex; align-items:center; gap:10px; margin-bottom: 8px;}
.fmk-cr-rec-btn{
	border-radius: 14px;
	border: 1px solid rgba(14,165,233,.25);
	background: rgba(14,165,233,.08);
	padding: 10px 12px;
	cursor:pointer;
	font-weight: 900;
	box-shadow: 0 10px 22px rgba(14,165,233,.10);
}
.fmk-cr-rec-btn.is-on{
	border-color: rgba(239,68,68,.30);
	background: rgba(239,68,68,.10);
	box-shadow: 0 10px 22px rgba(239,68,68,.14);
}
.fmk-cr-rec-state{font-weight: 800; color: rgba(15,23,42,.65); font-size: 13px;}

.fmk-cr-submit-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 12px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.fmk-cr-submit{
	border-radius: 16px;
	border: 0;
	padding: 12px 16px;
	background: linear-gradient(135deg, rgba(22,163,74,1), rgba(14,165,233,1));
	color:#fff;
	font-weight: 900;
	cursor:pointer;
	box-shadow: 0 16px 34px rgba(22,163,74,.25);
}
.fmk-cr-submit:disabled{opacity:.7; cursor:not-allowed;}
.fmk-cr-note{color: rgba(15,23,42,.60); font-weight:700; font-size: 13px;}
.fmk-cr-result{margin-top: 10px; font-weight: 900; font-size: 14px;}

.fmk-cr-empty{
	padding: 14px;
	background: rgba(15,23,42,.04);
	border: 1px dashed rgba(15,23,42,.12);
	border-radius: 18px;
	color: rgba(15,23,42,.70);
	font-weight: 800;
}

@media (max-width: 860px){
	.fmk-cr-form-grid{grid-template-columns: 1fr;}
	.fmk-cr-card{min-width: 84vw; max-width: 84vw;}
}