/* ===== Загальний контейнер ===== */
.su-cf7db-wrap{
	margin: 0 auto 20px;
}

/* Заголовки */
.su-cf7db-title{
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	color: #2b587a;
}
.su-cf7db-subtitle{
	margin: 0 0 10px;
	font-size: 13px;
	color: #556;
}

/* ===== Верхня пілюля (форма) ===== */
.su-cf7db-topbar{
	display:flex;
	justify-content:center;
	margin: 6px 0 10px;
}

/* ===== Верхній блок ===== */
.su-cf7db-toolbar{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	align-items:center;
	justify-content:center;
	margin: 10px 0 14px;
}

.su-cf7db-filter{
	display:flex;
	gap:8px;
	align-items:center;
	padding: 6px 12px;
	background:#fff;
	border:1px solid #d7dde6;
	border-radius: 999px;
}

.su-cf7db-filter-top{
	background: #eef4ff;
	border-color: #d6e4ff;
}

.su-cf7db-filter label{
	font-size: 13px;
	color:#556;
	margin:0;
	white-space: nowrap;
	display:inline-flex;
	align-items:center;
	gap:6px;
}

/* ===== Селект зі стрілкою ===== */
.su-cf7db-select{
	position: relative;
	display: inline-flex;
	align-items: center;
}

.su-cf7db-filter select{
	border:0;
	background:transparent;
	outline:none;
	font-size: 13px;
	color:#2b587a;
	font-weight:700;
	padding: 2px 22px 2px 0; /* місце під стрілку */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.su-cf7db-select-arrow{
	position:absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color:#2b587a;
	font-size: 16px;
	line-height: 1;
}

/* ===== Пілюлі ===== */
.su-cf7db-pill{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: #eef4ff;
	border: 1px solid #d6e4ff;
	border-radius: 999px;
	font-size: 13px;
	color:#556;
	white-space: nowrap;
}

.su-cf7db-pill b{ font-size: 14px; color: #1f4d9a; }

a.su-cf7db-pill{
	text-decoration: none;
}
a.su-cf7db-pill:hover{
	text-decoration: underline;
}

/* Іконки в пілюлях */
.su-cf7db-pill i,
.su-cf7db-filter i{
	color: #2b587a;
}

/* ===== Таблиця ===== */
.su-cf7db-table-wrap{
	background:#fff;
	border: 1px solid #d7dde6;
	border-radius: 6px;
	overflow: hidden;
}

table.su-cf7db-table{
	width:100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.su-cf7db-table thead th{
	background: #f2f4f7;
	color: #2b3a4a;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .3px;
	border-bottom: 1px solid #d7dde6;
	padding: 10px 10px;
}

.su-cf7db-table td{
	border-bottom: 1px solid #e6ebf2;
	padding: 5px;
	font-size: 14px;
	color: #223;
	vertical-align: top;
}

.su-cf7db-table tbody tr:nth-child(even) td{
	background: #fbfcfe;
}

/* колонки */
.su-cf7db-col-num{
	width: 52px;
	text-align: center;
	white-space: nowrap;
	font-weight: 700;
	color:#223;
}

.su-cf7db-col-name{
	width: 260px;
}

.su-cf7db-col-date{
	width: 104px;
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.su-cf7db-col-product{
	width: auto;
}

/* ПІБ + телефон */
.su-cf7db-person{
	line-height: 1.25;
}
.su-cf7db-person-name{
	font-weight: 600;
}
.su-cf7db-person-phone{
	margin-top: 2px;
	font-size: 12px;
	color: #556;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* щоб текст акуратно влазив */
.su-cf7db-ellipsis{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.su-cf7db-product{
	overflow: hidden;
	overflow-wrap: anywhere;
	white-space: normal;
}
.su-cf7db-product a{
	color: #1b66b1;
	text-decoration: none;
}
.su-cf7db-product a:hover{
	text-decoration: underline;
}

/* Пагінація */
.su-cf7db-pagination{
	margin: 14px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}
.su-cf7db-pagination a,
.su-cf7db-pagination span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 30px;
	padding: 0 10px;
	border-radius: 6px;
	border: 1px solid #d7dde6;
	background: #fff;
	color: #2b587a;
	font-size: 13px;
	text-decoration: none;
}
.su-cf7db-pagination a:hover{ background: #f2f6fb; }
.su-cf7db-pagination .is-active{
	background: #2b587a;
	border-color: #2b587a;
	color: #fff;
	font-weight: 700;
}

.su-cf7db-empty{
	padding: 14px 12px;
	background: #fff;
	border: 1px dashed #c9d4e3;
	border-radius: 6px;
	color: #556;
	text-align: center;
}

@media (max-width: 900px){
	/* на вузьких екранах дозволяємо перенос імені */
	.su-cf7db-ellipsis{ white-space: normal; }
}