/**
 * My Account -> Quotations, and the Browse products menu.
 */

/* --- Quotation history --------------------------------------------------- */

.cabina-quotations-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.cabina-quotations-table th {
	padding: 8px 10px;
	background: #eeeeee;
	border: 0;
	color: #000;
	font-size: 11px;
	font-weight: 800;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cabina-quotations-table td {
	padding: 14px 10px;
	border: 0;
	border-bottom: 1px solid #e5e5e5;
	vertical-align: top;
}

.cabina-quotations-table .cabina-quotation-ref {
	font-weight: 700;
	white-space: nowrap;
}

.cabina-quotations-table .cabina-quotation-date,
.cabina-quotations-table .cabina-quotation-total,
.cabina-quotations-table .cabina-quotation-due {
	white-space: nowrap;
}

.cabina-quotation-lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cabina-quotation-lines li + li {
	margin-top: 6px;
}

.cabina-quotation-line-title {
	display: block;
	font-size: 12px;
	line-height: 1.35;
}

.cabina-quotation-line-article {
	display: block;
	color: #6f727d;
	font-size: 11px;
}

/* --- "See more" ----------------------------------------------------------- */

/*
 * A quotation can hold several products and the column grew tall enough to
 * dominate the row, so only the first is shown. The rest sit behind a
 * disclosure that needs no JavaScript.
 *
 * The summary keeps its native display: giving it flex or block stops the click
 * toggling in several browsers. Everything visual goes on the span inside.
 */
.cabina-quotation-more {
	margin-top: 6px;
}

.cabina-quotation-more-toggle {
	display: list-item;
	list-style: none;
	cursor: pointer;
}

.cabina-quotation-more-toggle::-webkit-details-marker,
.cabina-quotation-more-toggle::marker {
	display: none;
	content: "";
}

.cabina-quotation-more-label {
	display: inline-block;
	color: #221F20;
	font-size: 11px;
	font-weight: 700;
	text-decoration: underline;
}

.cabina-quotation-more-label:hover {
	color: #6F727D;
}

.cabina-quotation-more[open] .cabina-quotation-more-label {
	/* Once open the control is the way back, so it says so. */
	font-size: 0;
}

.cabina-quotation-more[open] .cabina-quotation-more-label::after {
	content: "See less";
	font-size: 11px;
}

.cabina-quotation-lines--rest {
	margin-top: 6px;
}

/* --- Addresses ------------------------------------------------------------ */

/*
 * The addresses screen inherits a centred alignment from the theme, which left
 * the headings and the "You have not set up this type of address yet" copy
 * floating in the middle of each column.
 */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .woocommerce-Address,
.woocommerce-account .woocommerce-Address-title,
.woocommerce-account .woocommerce-Address address,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	text-align: left;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.cabina-quotation-download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid #221F20;
	background: #221F20;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.cabina-quotation-download:hover,
.cabina-quotation-download:focus {
	background: #111;
	border-color: #111;
	color: #fff;
}

/* --- Browse products ----------------------------------------------------- */

/*
 * Built on <details> so it needs no JavaScript. The marker is removed because
 * the control is styled as a button, and a disclosure triangle inside a button
 * reads as a mistake.
 */
.cabina-browse {
	position: relative;
	display: inline-block;
	margin-left: 8px;
}

/*
 * The summary keeps its native display. Setting it to flex or inline-flex stops
 * the click toggling the details open in several browsers, which is what made
 * this button appear dead. All the layout goes on the span inside it instead.
 */
.cabina-browse-toggle {
	display: list-item;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.cabina-browse-toggle::-webkit-details-marker,
.cabina-browse-toggle::marker {
	display: none;
	content: "";
}

.cabina-browse-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px;
	border: 1px solid #221F20;
	background: #221F20;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.cabina-browse-label::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

.cabina-browse[open] .cabina-browse-label::after {
	transform: rotate(180deg);
}


.cabina-browse-menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 2px);
	left: 0;
	min-width: 100%;
	margin: 0;
	padding: 4px 0;
	border: 1px solid #d9d9d9;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
	list-style: none;
}

.cabina-browse-menu li {
	margin: 0;
}

.cabina-browse-menu a {
	display: block;
	padding: 9px 16px;
	color: #111;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.cabina-browse-menu a:hover,
.cabina-browse-menu a:focus {
	background: #f4f4f4;
	color: #111;
}

.cabina-no-quotations {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

/*
 * Let the menu out of the notice.
 *
 * The control sits inside a WooCommerce notice, and a notice clips its children
 * so the button core normally floats into it cannot escape the box. The menu is
 * absolutely positioned just below the toggle, which put all but a few pixels of
 * it outside that box - the details element was opening correctly and the menu
 * was being cut off, so the button read as dead.
 *
 * Only the notices carrying this control opt out; every other notice keeps
 * core's clipping. The class covers the Quotations screen on its own, so the
 * menu still escapes if :has() is unavailable.
 */
.woocommerce-message.cabina-no-quotations,
.woocommerce-message:has(.cabina-browse),
.woocommerce-info:has(.cabina-browse),
.woocommerce-error:has(.cabina-browse) {
	overflow: visible;
}

@media (max-width: 767px) {
	.cabina-quotations-table,
	.cabina-quotations-table tbody,
	.cabina-quotations-table tr,
	.cabina-quotations-table td {
		display: block;
		width: 100%;
	}

	.cabina-quotations-table thead {
		display: none;
	}

	.cabina-quotations-table td {
		border-bottom: 0;
		padding: 4px 0;
	}

	.cabina-quotations-table tr {
		padding: 14px 0;
		border-bottom: 1px solid #e5e5e5;
	}

	.cabina-quotations-table td::before {
		content: attr(data-title) ": ";
		font-weight: 700;
	}

	.cabina-quotations-table .cabina-quotation-action::before {
		content: "";
	}
}