.oat-reviews{ padding: 56px 24px; }
.oat-reviews-title{ text-align: center; font-size: 1.3rem; margin: 0 0 28px; color: #1e3a52; }

.oat-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; max-width: 1000px; margin: 0 auto; }
.oat-card{
	display: flex; gap: 16px; background: #fff;
	border: 1px solid #D6EAF8; border-radius: 20px; padding: 20px;
	box-shadow: 0 4px 16px rgba(10,30,50,.04);
}
.oat-card.oat-hidden{ display: none; }
.oat-card.oat-solo{ grid-column: 1 / -1; max-width: 480px; justify-self: center; }

.oat-avatar{ width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #D6EAF8; flex: 0 0 auto; }
.oat-avatar-initials{ display: flex; align-items: center; justify-content: center; background: #F8FAFC; color: #4a6b82; font-weight: 600; }

.oat-stars{ color: #A8823C; letter-spacing: 2px; margin-bottom: 6px; }
.oat-text{ margin: 0 0 10px; color: #1e3a52; line-height: 1.55; font-size: .93rem; overflow-wrap: anywhere; }
.oat-name{ margin: 0; font-size: .82rem; color: #4a6b82; overflow-wrap: anywhere; }
.oat-role{ color: #7a94a8; }

/* Formatted review content (paragraphs, lists, quotes) */
.oat-text p{ margin: 0 0 .7em; }
.oat-text > :last-child{ margin-bottom: 0; }
.oat-text ul, .oat-text ol{ margin: 0 0 .7em 1.2em; padding: 0; }
.oat-text blockquote{ margin: 0 0 .7em; padding-left: 12px; border-left: 3px solid #D6EAF8; color: #4a6b82; }
.oat-text img{ max-width: 100%; height: auto; border-radius: 10px; }

/* Links inside review cards */
.oat-site{
	margin-left: .35em; font-size: .95em; color: #A8823C;
	text-decoration: underline; text-underline-offset: 3px;
}
.oat-site:hover{ color: #96743a; }
.oat-text a{
	color: #A8823C; text-decoration: underline; text-underline-offset: 3px;
}
.oat-text a:hover{ color: #96743a; }

.oat-more{ text-align: center; margin-top: 24px; }

/* Sort + rating filter */
.oat-toolbar{ display: flex; gap: 18px 40px; justify-content: center; flex-wrap: wrap; max-width: 1000px; margin: 0 auto 56px; }
.oat-tool{ display: flex; align-items: center; gap: 12px; font-size: .82rem; color: #4a6b82; }
.oat-tool select{
	padding: 9px 18px; border: 1px solid #D6EAF8; border-radius: 999px;
	background: #fff; color: #1e3a52; font: inherit; cursor: pointer;
}
.oat-tool select:focus{ outline: none; border-color: #A8823C; }
.oat-empty{ text-align: center; color: #7a94a8; font-size: .9rem; margin: 8px 0 0; }

.oat-leave-wrap{ text-align: center; margin: 28px 0 8px; }
.oat-leave-link{
	font-size: .9rem; color: #4a6b82;
	text-decoration: underline; text-underline-offset: 3px;
	opacity: .8;
}
.oat-leave-link:hover{ opacity: 1; color: #1e3a52; }

.oat-form-wrap{ max-width: 520px; margin: 20px auto 0; }
.oat-form{ background: #fff; border: 1px solid #D6EAF8; border-radius: 20px; padding: 24px; }
.oat-field{ display: block; margin-bottom: 14px; font-size: .85rem; }
.oat-field span{ display: block; margin-bottom: 4px; color: #33526b; font-weight: 600; }
.oat-field input, .oat-field select, .oat-field textarea{
	width: 100%; box-sizing: border-box; padding: 9px 12px;
	border: 1px solid #D6EAF8; border-radius: 12px; font: inherit;
	background: #F8FAFC; color: #1e3a52;
}
.oat-field input[type="file"] {
	padding: 6px; background: #fff;
}
.oat-field input:focus, .oat-field select:focus, .oat-field textarea:focus{
	outline: none; border-color: #A8823C; background: #fff;
}

.oat-btn{
	display: inline-block; padding: 9px 22px; border-radius: 999px;
	border: 1px solid #D6EAF8; background: #fff; color: #1e3a52;
	cursor: pointer; font: inherit;
}
.oat-btn:hover{ background: #F8FAFC; }
.oat-btn-primary{ background: #A8823C; border-color: #A8823C; color: #fff; }
.oat-btn-primary:hover{ background: #96743a; }

.oat-status{ margin: 6px 0 0; font-size: .8rem; min-height: 1em; }
.oat-ok{ color: #2e7d32; }
.oat-err{ color: #c62828; }

@media (max-width: 700px){
	.oat-grid{ grid-template-columns: 1fr; }
	.oat-card.oat-solo{ grid-column: auto; max-width: none; justify-self: stretch; }
}

/* Spacing guard: many themes reset margin/padding on div, section and article,
   which collapses the card padding and the space around the controls. */
section.oat-reviews{ padding: 56px 24px !important; }
section.oat-reviews .oat-toolbar{ margin: 0 auto 56px !important; }
section.oat-reviews .oat-grid{ margin: 0 auto !important; }
section.oat-reviews .oat-card{ padding: 20px !important; }
section.oat-reviews .oat-more{ margin-top: 24px !important; }
section.oat-reviews .oat-leave-wrap{ margin: 28px 0 8px !important; }
section.oat-reviews .oat-form-wrap{ margin: 20px auto 0 !important; }
section.oat-reviews .oat-form{ padding: 24px !important; }