.supership-settings .supership-tab { padding: 16px 0; }
.supership-settings .supership-inline { margin-left: 8px; font-weight: 600; }
.supership-settings .nav-tab { cursor: pointer; }

.woocommerce-checkout .supership-hidden,
.woocommerce-edit-address .supership-hidden { display: none !important; }

.woocommerce-checkout .form-row.supership-area select {
	width: 100%;
	min-height: 38px;
}

.supership-address-form {
	margin: 24px 0;
	padding: 20px;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	background: #fbfbfb;
}
.supership-address-form .supership-address-title {
	margin: 0 0 6px;
	font-size: 1.15em;
	color: #0073aa;
}
.supership-address-form .supership-address-desc {
	margin: 0 0 16px;
	color: #555;
	font-size: 0.92em;
}
.supership-address-form .form-row {
	margin-bottom: 12px;
}
.supership-address-form select,
.supership-address-form input[type="text"],
.supership-address-form input[type="tel"],
.supership-address-form input[type="email"],
.supership-address-form textarea {
	width: 100%;
	min-height: 38px;
	padding: 6px 10px;
	box-sizing: border-box;
}

/* Pre Order status badge in admin order list */
mark.order-status.status-pre-order {
	background: #e9d8fd;
	color: #6b46c1;
}

/* WC order status "Chưa tạo đơn SuperShip" — amber, dùng cho cột Trạng thái */
mark.order-status.status-chua-tao-don {
	background: #fff3cd;
	color: #856404;
}

/* SuperShip column badge "Chưa tạo đơn" — cùng màu */
mark.order-status.status-supership-disabled {
	background: #fff3cd;
	color: #856404;
}

/* Đã tạo đơn SuperShip — green badge */
mark.order-status.status-supership-created {
	background: #d4edda;
	color: #155724;
}

/* Meta box SuperShip trên trang chi tiết đơn hàng */
.supership-meta-box mark.order-status {
	display: inline-block;
	margin-bottom: 6px;
}
.supership-meta-box .supership-meta-table {
	width: 100%;
	border-collapse: collapse;
	margin: 4px 0 8px;
	font-size: 12px;
}
.supership-meta-box .supership-meta-table td {
	padding: 3px 4px;
	vertical-align: top;
}
.supership-meta-box .supership-meta-table td:first-child {
	color: #666;
	white-space: nowrap;
	width: 70px;
}
.supership-meta-box .supership-meta-note {
	margin: 4px 0;
	color: #666;
	font-size: 12px;
}

/* Hide the standard shipping address block when our SuperShip block replaces it. */
.wp-block-woocommerce-checkout-shipping-address-block.supership-hidden,
.supership-hidden {
	display: none !important;
}

/* Auto-mount container should sit in the flow without extra wrapping. */
.supership-auto-mount {
	display: block;
}

/* ---------- supership/checkout block — styled to match WC block checkout ---------- */
.wp-block-supership-checkout.wc-block-components-checkout-step {
	margin: 24px 0;
	padding: 0;
}
.wp-block-supership-checkout .wc-block-components-checkout-step__heading {
	margin: 0 0 8px;
}
.wp-block-supership-checkout .wc-block-components-checkout-step__title {
	font-size: 1.25em;
	font-weight: 600;
	margin: 0;
	color: #1e1e1e;
}
.wp-block-supership-checkout .wc-block-components-checkout-step__description {
	margin: 0 0 16px;
	color: #5b6577;
	font-size: 0.92em;
}

/* 12-column responsive grid */
.wp-block-supership-checkout .supership-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 16px;
}
.wp-block-supership-checkout .supership-col-12 { grid-column: span 12; }
.wp-block-supership-checkout .supership-col-6  { grid-column: span 6; }
@media (max-width: 600px) {
	.wp-block-supership-checkout .supership-col-6 { grid-column: span 12; }
}

/* Floating-label inputs (matches WC block checkout) */
.wp-block-supership-checkout .supership-field {
	position: relative;
	margin: 0;
}
.wp-block-supership-checkout .supership-field input,
.wp-block-supership-checkout .supership-field select,
.wp-block-supership-checkout .supership-field textarea {
	width: 100%;
	min-height: 50px;
	padding: 18px 12px 6px 12px;
	border: 1px solid #50575e;
	border-radius: 4px;
	background: #fff;
	font-size: 16px;
	line-height: 1.4;
	box-sizing: border-box;
	color: #1e1e1e;
	font-family: inherit;
}
.wp-block-supership-checkout .supership-field textarea {
	min-height: 70px;
	resize: vertical;
}
.wp-block-supership-checkout .supership-field select {
	padding-right: 30px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231e1e1e' d='M5 6L0 0h10z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
.wp-block-supership-checkout .supership-field label {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #757575;
	font-size: 16px;
	pointer-events: none;
	transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
	background: transparent;
	max-width: calc(100% - 24px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wp-block-supership-checkout .supership-field.is-active label,
.wp-block-supership-checkout .supership-field input:focus + label,
.wp-block-supership-checkout .supership-field select:focus + label,
.wp-block-supership-checkout .supership-field textarea:focus + label,
.wp-block-supership-checkout .supership-field input:not(:placeholder-shown) + label,
.wp-block-supership-checkout .supership-field textarea:not(:placeholder-shown) + label {
	top: 12px;
	font-size: 11px;
	color: #1e1e1e;
}
.wp-block-supership-checkout .supership-field select + label {
	/* Selects always show the first option's text — keep the label permanently floated up. */
	top: 11px;
	font-size: 11px;
	color: #1e1e1e;
	background: #fff;
	padding: 0 4px;
}
.wp-block-supership-checkout .supership-field select {
	padding-top: 22px;
	padding-bottom: 6px;
}
.wp-block-supership-checkout .supership-field input:focus,
.wp-block-supership-checkout .supership-field select:focus,
.wp-block-supership-checkout .supership-field textarea:focus {
	outline: 2px solid #007cba;
	outline-offset: -1px;
	border-color: #007cba;
}

/* ============================================================
   supership/full-checkout — standalone checkout block
   ============================================================ */
.wp-block-supership-full-checkout,
.supership-full-checkout-placeholder {
	display: block;
	width: 100%;
}
.supership-full-checkout {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 16px 80px;
	color: #1e1e1e;
	font-family: inherit;
}
.supership-full-checkout__title {
	text-align: center;
	font-size: 1.8em;
	font-weight: 500;
	margin: 0 0 32px;
}
.supership-full-checkout__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 40px;
	align-items: start;
}
@media (max-width: 900px) {
	.supership-full-checkout__layout {
		grid-template-columns: 1fr;
	}
	.supership-full-checkout__summary { order: -1; }
}

/* Sections (white cards with title) */
.supership-section {
	margin: 0 0 24px;
}
.supership-section__title {
	font-size: 1.05em;
	font-weight: 600;
	margin: 0 0 12px;
	color: #1e1e1e;
}
.supership-section__body { display: block; }
.supership-section--note .supership-field { margin-top: 0; }

/* Row layout */
.supership-full-checkout .supership-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}
.supership-full-checkout .supership-row--single {
	grid-template-columns: 1fr;
}
.supership-full-checkout .supership-row > div { min-width: 0; }

/* Field (floating label) */
.supership-full-checkout .supership-field {
	position: relative;
	margin-bottom: 12px;
}
.supership-full-checkout .supership-field input,
.supership-full-checkout .supership-field select,
.supership-full-checkout .supership-field textarea {
	width: 100%;
	min-height: 50px;
	padding: 18px 12px 6px 12px;
	border: 1px solid #b9bcc1;
	border-radius: 4px;
	background: #fff;
	font-size: 15px;
	line-height: 1.4;
	box-sizing: border-box;
	color: #1e1e1e;
	font-family: inherit;
}
.supership-full-checkout .supership-field textarea {
	min-height: 70px;
	resize: vertical;
	padding-top: 22px;
}
.supership-full-checkout .supership-field select {
	padding-right: 32px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23606060' d='M5 6L0 0h10z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
.supership-full-checkout .supership-field label {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #757575;
	font-size: 15px;
	pointer-events: none;
	background: transparent;
	transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
	max-width: calc(100% - 24px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.supership-full-checkout .supership-field.is-active label,
.supership-full-checkout .supership-field input:focus + label,
.supership-full-checkout .supership-field select:focus + label,
.supership-full-checkout .supership-field textarea:focus + label,
.supership-full-checkout .supership-field input:not(:placeholder-shown) + label,
.supership-full-checkout .supership-field textarea:not(:placeholder-shown) + label {
	top: 11px;
	font-size: 11px;
	color: #1e1e1e;
}

/* Selects always show option text — keep the label permanently at the top so it never overlaps. */
.supership-full-checkout .supership-field select ~ label,
.supership-full-checkout .supership-field:has(select) label {
	top: 11px;
	font-size: 11px;
	color: #1e1e1e;
	background: #fff;
	padding: 0 4px;
}
/* Push the select's text down so the floated label doesn't overlap with the first option. */
.supership-full-checkout .supership-field select {
	padding-top: 22px;
	padding-bottom: 6px;
}
.supership-full-checkout .supership-field input:focus,
.supership-full-checkout .supership-field select:focus,
.supership-full-checkout .supership-field textarea:focus {
	outline: 2px solid #1e1e1e;
	outline-offset: -1px;
	border-color: #1e1e1e;
}

/* Radio rows (shipping + payment) */
.supership-full-checkout .supership-radio {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #b9bcc1;
	border-radius: 4px;
	margin-bottom: 8px;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.supership-full-checkout .supership-radio.is-selected {
	border-color: #1e1e1e;
	background: #fafafa;
}
.supership-full-checkout .supership-radio input { margin: 0; }
.supership-full-checkout .supership-radio__label { flex: 1; }
.supership-full-checkout .supership-radio__price {
	color: #1e1e1e;
	font-weight: 500;
}

/* Action bar */
.supership-full-checkout .supership-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
	flex-wrap: wrap;
	gap: 12px;
}
.supership-back-link {
	color: #5b6577;
	text-decoration: none;
	font-size: 0.95em;
}
.supership-back-link:hover { text-decoration: underline; }
.supership-place-order {
	background: #d8612b;
	color: #fff;
	border: 0;
	padding: 14px 28px;
	font-size: 1em;
	font-weight: 600;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.supership-place-order:hover:not(:disabled) { background: #b8501f; }
.supership-place-order:disabled { opacity: 0.6; cursor: not-allowed; }

/* Order summary (right column) */
.supership-full-checkout__summary {
	background: #fafafa;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 20px;
	position: sticky;
	top: 20px;
}
.supership-summary__title {
	font-size: 1.05em;
	font-weight: 600;
	margin: 0 0 16px;
}
.supership-summary__items {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 16px;
}
.supership-summary__item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 8px 0;
}
.supership-summary__thumb {
	position: relative;
	display: block;
	width: 56px;
	height: 56px;
}
.supership-summary__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #e0e0e0;
}
.supership-summary__qty {
	position: absolute;
	top: -6px;
	right: -6px;
	background: #5b6577;
	color: #fff;
	border-radius: 50%;
	min-width: 20px;
	height: 20px;
	font-size: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
}
.supership-summary__info strong { display: block; font-weight: 500; font-size: 0.95em; }
.supership-summary__desc {
	font-size: 0.8em;
	color: #5b6577;
	margin: 4px 0 0;
}
.supership-summary__price { font-weight: 500; }
.supership-summary__totals { display: block; }
.supership-summary__row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	color: #5b6577;
}
.supership-summary__total {
	display: flex;
	justify-content: space-between;
	font-size: 1.25em;
	font-weight: 600;
	padding-top: 12px;
	border-top: 1px solid #e0e0e0;
	margin-top: 8px;
}

/* Loading / empty / error */
.supership-checkout-loading,
.supership-checkout-empty {
	text-align: center;
	padding: 60px 20px;
	color: #5b6577;
}
.supership-error-notice {
	background: #fdecea;
	border: 1px solid #f5c6cb;
	color: #b21f2d;
	padding: 12px 16px;
	border-radius: 4px;
	margin: 0 0 24px;
}

/* Full-block editor preview */
.supership-full-editor {
	background: #fafafa;
	padding: 24px;
	border: 1px dashed #c4cad2;
	border-radius: 6px;
	text-align: center;
}
.supership-full-editor h2 { margin: 0 0 8px; }
.supership-full-editor p { color: #5b6577; margin: 0 0 8px; }

/* Editor preview */
.supership-block-editor {
	padding: 18px 22px;
	border: 1px dashed #c4cad2;
	border-radius: 4px;
	background: #fafafa;
}
.supership-block-editor__title { margin: 0 0 6px; font-size: 1.15em; color: #1e1e1e; }
.supership-block-editor__desc { margin: 0 0 14px; color: #555; }
.supership-block-editor__preview {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
.supership-block-editor__preview .supership-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.supership-block-editor__preview .supership-mock {
	border: 1px solid #c4cad2;
	border-radius: 4px;
	background: #fff;
	padding: 12px;
	color: #888;
	font-size: 0.88em;
}
.supership-block-editor__preview .supership-mock-full { width: 100%; }
.supership-block-editor__hint { color: #888; font-style: italic; font-size: 0.9em; margin: 12px 0 0; }