/* bizzio-sync-admin.css */

.form-table th {
    width: 200px;
}

/* Toggle Switch Styles */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  vertical-align: middle;
  margin-left: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Текст ON/OFF в toggle */
.slider:after {
  content: 'OFF';
  position: absolute;
  right: 6px;
  top: 4px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}

input:checked + .slider:after {
  content: 'ON';
  right: auto;
  left: 6px;
}

/* Пример за dashicons икона */
.wc-action-button-resend_order::after {
	font-family: Dashicons;
	/* content: "\f346"; dashicons-upload */
  /* content: "\f504"; dashicons-cloud-upload */
  /* Bizzio icon */
  content:  "\f13b";
	color: #ffffff;
  background-color: #0073aa;
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  font-size: 18px;
}

/* При грешка можете да промените цвета */
.wc-action-button-resend_order.error::after {
	color: #dc3232;
}

/* Batch Stock Update Button Styling */
.column-update_batch_stock {
	width: 120px;
	text-align: center;
}

.column-update_batch_stock .button {
	padding: 4px 10px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 4px;
	white-space: nowrap;
	transition: all 0.2s ease;
}

.column-update_batch_stock .button:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.column-update_batch_stock .button:active {
	transform: translateY(0);
}

/* Loading state */
.column-update_batch_stock .button.loading {
	opacity: 0.6;
	pointer-events: none;
}

.column-update_batch_stock .button.loading::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	margin-left: 5px;
	animation: batch-spinner 0.6s linear infinite;
}

@keyframes batch-spinner {
	to { transform: rotate(360deg); }
}

/* Sync Options Styling */
.bizzio-sync-admin .sync-option-row { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 12px 15px; 
    border-bottom: 1px solid #f0f0f1; 
    margin-bottom: 0;
}
.bizzio-sync-admin .sync-option-row:last-of-type { border-bottom: none; }
.bizzio-sync-admin .sync-option-label { flex: 1; padding-right: 20px; }
.bizzio-sync-admin .sync-option-label strong { display: block; font-size: 14px; margin-bottom: 3px; }
.bizzio-sync-admin .sync-option-label small { color: #646970; font-size: 12px; line-height: 1.4; }
.bizzio-sync-admin .highlight-yellow { background: #fffcf0; border-left: 4px solid #ffb900; }
.bizzio-sync-admin .highlight-purple { background: #fcf9ff; border-left: 4px solid #9c27b0; }
.bizzio-sync-admin .postbox { background: #fff; border: 1px solid #ccd0d4; box-shadow: 0 1px 1px rgba(0,0,0,.04); margin-bottom: 20px; }
.bizzio-sync-admin .postbox h3 { border-bottom: 1px solid #eee; margin: 0 0 15px 0; padding: 0 0 10px 0; }
.bizzio-sync-admin .cli-status { margin-top: 10px; padding: 10px; background: #f8f9fa; border-radius: 4px; border: 1px solid #e5e5e5; }

/* Admin Bar Spinner */
.spin {
    animation: bizzio-spin 2s infinite linear;
    display: inline-block;
}

@keyframes bizzio-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}

