/**
 * WooCommerce content pages: My Account, Checkout, Order received.
 *
 * These are plain shortcode pages, and page.php drops them into a Bootstrap
 * .container-fluid - which is full width. Nothing else constrains them, so the
 * login and register columns ran the whole width of the screen. The cart only
 * escaped this because .cabina-cart-page carries its own max-width.
 *
 * 1170px matches the Elementor kit container the header, breadcrumb, footer and
 * About Us all use, so these pages line up with the rest of the site.
 */

.woocommerce-account #main > .container-fluid,
.woocommerce-checkout #main > .container-fluid,
.woocommerce-order-received #main > .container-fluid {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
}

/* --- Login / Register ---------------------------------------------------- */

/*
 * These are single-column forms on their own pages, so they are held to a
 * readable measure rather than stretched across 1170px.
 */
.cabina-account-form {
	max-width: 440px;
	margin: 0 auto;
	padding: 8px 0 40px;
}

/*
 * With the page title removed from these two pages, the space it occupied would
 * otherwise be left behind - the theme's container carries its own top padding
 * for a heading that is no longer printed.
 */
.page-template-default.woocommerce-page .cabina-account-form,
body:has(.cabina-account-form) #main > .container-fluid {
	padding-top: 8px;
}

/*
 * Notices are centred on these pages, per the client: with no page title above
 * it, a left-aligned error such as "Unknown email address" floated on its own
 * far from the form it belongs to.
 */
.cabina-account-form + .woocommerce-notices-wrapper,
body:has(.cabina-account-form) .woocommerce-error,
body:has(.cabina-account-form) .woocommerce-message,
body:has(.cabina-account-form) .woocommerce-info {
	max-width: 440px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.cabina-account-form__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.cabina-account-form__intro {
	margin: 0 0 22px;
	color: #6f727d;
	font-size: 14px;
	text-align: left;
}

.cabina-account-form .form-row,
.cabina-account-form .woocommerce-form-row {
	display: block;
	margin: 0 0 16px;
	padding: 0;
}

.cabina-account-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
}

.cabina-account-form input[type="text"],
.cabina-account-form input[type="email"],
.cabina-account-form input[type="password"] {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #d8d8d8;
	background: #fff;
}

.cabina-account-form button {
	min-width: 140px;
	height: 44px;
	padding: 0 24px;
	border: 1px solid #221f20;
	background: #221f20;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}

.cabina-account-form button:hover {
	background: #414349;
	border-color: #414349;
}

.cabina-account-form__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 14px 0 0;
	font-size: 13px;
}

.cabina-account-form__meta label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 400;
}

.cabina-account-form__meta input[type="checkbox"] {
	width: auto;
	height: auto;
	margin: 0;
}

/* The cross-link between the two pages. */
.cabina-account-form__switch {
	margin: 26px 0 0;
	padding-top: 18px;
	border-top: 1px solid #ededed;
	font-size: 14px;
	text-align: center;
}

.cabina-account-form__switch a {
	font-weight: 700;
	text-decoration: underline;
}

.cabina-quotation-signin a {
	font-weight: 700;
	text-decoration: underline;
}

/* --- Login / Register ---------------------------------------------------- */

.woocommerce-account .woocommerce-form-login,
.woocommerce-account form.register {
	max-width: 100%;
}

/* Give the two columns some air between them rather than butting together. */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	padding-right: 15px;
	padding-left: 15px;
}

@media (max-width: 767px) {
	.woocommerce-account .u-column1,
	.woocommerce-account .u-column2 {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
	}

	.woocommerce-account .u-column2 {
		margin-top: 34px;
	}
}