/* Colisly Parcel Forwarding, front styles */

.colisly-front-table {
	width: 100%;
}

/* Tracking numbers are long unbreakable strings that set a minimum width the
   table cannot go under, which pushed the last column out of the account
   column. Only this one is allowed to break: applying it to every cell would
   chop up dates and references too. */
.colisly-front-table .colisly-col-tracking {
	min-width: 6em;
	overflow-wrap: anywhere;
}

/* Fees advanced on a parcel, under its number. */
.colisly-front-table .colisly-advanced {
	display: inline-block;
	font-weight: normal;
	opacity: .85;
}

/* Whatever is left over stays reachable rather than being clipped. */
.colisly-table-wrap {
	container-type: inline-size;
	overflow-x: auto;
}

/* WooCommerce stacks .shop_table_responsive only under a 768px viewport, but
   what constrains these tables is the account column, not the window: at a
   1600px viewport the six parcel columns still had to fit in 680px, so the
   last one sat off-screen behind a scrollbar nobody thinks to look for. The
   same stacking is applied here on the container's own width, reusing the
   data-title attributes the markup already carries. Guarded above 768px so it
   never fights WooCommerce's own rule. */
@media (min-width: 769px) {
	@container (max-width: 860px) {
		.colisly-front-table thead {
			display: none;
		}

		.colisly-front-table tr {
			display: block;
		}

		/* Stacked, each parcel is a block of its own and needs to read as
		   one, otherwise six labelled lines per parcel run into the next. */
		.colisly-front-table tbody tr {
			margin-bottom: 1.75em;
		}

		.colisly-front-table tbody tr:last-child {
			margin-bottom: 0;
		}

		.colisly-front-table td {
			display: flex;
			gap: 1em;
			justify-content: space-between;
			text-align: right;
			width: auto;
		}

		.colisly-front-table td::before {
			content: attr(data-title);
			flex: 0 0 auto;
			font-weight: 600;
			text-align: left;
		}
	}
}

.colisly-documents-list {
	list-style: disc;
	margin-left: 1.5em;
}

.colisly-doc-date {
	color: #767676;
	font-size: 0.9em;
}

.colisly-request-form .colisly-discount-note,
.colisly-request-form .colisly-discount,
.colisly-front-table .colisly-discount,
.colisly-request-form .colisly-promo-code .is-ok {
	color: #1d7a3a;
}

.colisly-request-form .colisly-promo-code .is-error {
	color: #b32d2e;
}

.colisly-request-form .colisly-promo-code input {
	max-width: 12em;
	text-transform: uppercase;
}

.colisly-request-form .colisly-note {
	color: #767676;
	font-size: 0.9em;
}

/*
 * The actions column holds a link and a form side by side. A form is a block
 * by default, which would have dropped "Cancel" onto its own line under
 * "Pay" and read as a second, unrelated control.
 */
.colisly-inline-form {
	display: inline-block;
	margin: 0;
}

.colisly-address {
	font-style: normal;
	line-height: 1.5;
	margin-bottom: 0.5em;
}

/*
 * Invoices sit under the declaration lines of the same parcel: a small
 * block, its own margin, so it reads as part of that parcel and not as a
 * new section.
 */
.colisly-invoices {
	margin: 0.5em 0 1.5em;
}

.colisly-invoices .colisly-documents-list {
	margin-bottom: 0.5em;
}

/*
 * Parcels view tabs: two links, the current one underlined, so the split
 * between the stock and the rest reads as a choice and not as a menu.
 */
/* The address to shop with: the one block a client copies every week. */
.colisly-my-address {
	background: rgba(0, 0, 0, .035);
	border-left: 4px solid currentColor;
	border-radius: 6px;
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
}

.colisly-my-address-title {
	font-weight: 600;
	margin: 0 0 .5em;
}

.colisly-my-address-lines {
	font-style: normal;
	line-height: 1.5;
	margin: 0 0 .75em;
}

.colisly-my-address-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1em;
	margin: 0;
}

.colisly-copy.is-copied {
	opacity: .7;
}

.colisly-view-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	margin: 0 0 1em;
}

.colisly-view-tab {
	border-bottom: 2px solid transparent;
	padding-bottom: 0.2em;
	text-decoration: none;
}

.colisly-view-tab-current {
	border-bottom-color: currentColor;
	font-weight: 600;
}

.colisly-pagination {
	align-items: center;
	display: flex;
	gap: 1em;
	justify-content: space-between;
	margin-top: 1em;
}

.colisly-pagination-state {
	color: #767676;
	font-size: 0.9em;
}