/*
Theme Name:   Avada Child — Fancy Elements
Theme URI:    https://www.sigmasqr.com/
Description:  Child theme for the Fancy Elements site. Holds the element documentation content type, its Avada Dynamic Data fields, and the Fusion Builder elements that render designs, highlights and option tables from that data.
Author:       WP Square
Author URI:   https://www.sigmasqr.com/
Template:     Avada
Version:      1.0.0
Text Domain:  avada-child
*/

/* Styling lives in Avada Theme Options, not here.
   Add CSS below only for things Avada genuinely cannot express. */

/* ---------------------------------------------------------------------------
   Header account link ([fea-storefront]'s fea_sf_header_account_label())

   The header menu has one plain custom link pointing at the account page,
   marked with the fea-header-account class, whose wording fea-storefront
   swaps between "Sign in" / "Dashboard" at render time. A header CTA has to
   read as the one actionable thing in a row of links, and Avada styles menu
   items as text, so it is styled as a button here — using the theme's own
   colour variables so it follows the palette instead of pinning a hex that
   drifts out of date. Moved here from a `wp_head` string-echo in
   fea-storefront.php since it is pure static CSS with nothing dynamic in it;
   this file is already enqueued at the same late priority (20) that hook
   used, so the cascade order against Avada's own menu CSS is unchanged.
   --------------------------------------------------------------------------- */

.fusion-menu li.fea-header-account > a {
	background-color: var(--awb-color4, #1e73be);
	background-image: none;
	color: var(--awb-color1, #fff) !important;
	border-radius: 50px;
	padding: 6px 18px !important;
	margin-left: 10px;
	align-self: center;
	line-height: 1.6 !important;
	transition: background-image .2s ease;
}

.fusion-menu li.fea-header-account > a .menu-text {
	border: 0 !important;
	padding: 0 !important;
}

.fusion-menu li.fea-header-account:hover > a,
.fusion-menu li.fea-header-account.hover > a,
.fusion-menu li.fea-header-account:focus-within > a,
.fusion-menu li.fea-header-account > a:hover,
.fusion-menu li.fea-header-account > a:focus {
	background-image: linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .18));
	color: var(--awb-color1, #fff) !important;
}

.fusion-menu li.fea-header-account:hover > a .menu-text,
.fusion-menu li.fea-header-account.hover > a .menu-text,
.fusion-menu li.fea-header-account:focus-within > a .menu-text,
.fusion-menu li.fea-header-account > a:hover .menu-text,
.fusion-menu li.fea-header-account > a:focus .menu-text {
	color: var(--awb-color1, #fff) !important;
}

/* ---------------------------------------------------------------------------
   Signed-in account pill (FEA_Account_Menu, inc/class-fea-account-menu.php)

   The pill mirrors the sign-in button above (fea-header-account) so the two
   states read as one control in two moods, with a person icon ahead of the
   name — a bare display name in the link row read as ordinary navigation and
   gave no clear signal that the visitor was actually signed in.

   Text and icon are held white in every state, not just on hover. On the
   account page the item is the current menu item, and Avada colours a current
   item's label with the brand colour — the pill's own fill — which left the
   name invisible against it. Forcing white unconditionally fixes that.

   Every icon — the one on the pill and the two in the dropdown — is a mask
   tinted with currentColor, so each takes the colour of the text beside it
   and follows it through hover and the current-item state. Nothing has a
   baked-in colour of its own. The two data: URIs are the person/door SVGs
   FEA_Account_Menu::icon() used to build at request time (rawurlencode of a
   tiny inline <svg>); baked in literally here since this file can't run PHP —
   if either icon's path ever needs to change, regenerate via that method
   (or an equivalent rawurlencode) rather than hand-editing the escaped string.
   --------------------------------------------------------------------------- */

.fusion-menu li.fea-account-pill > a {
	background-color: var(--awb-color4, #1e73be);
	background-image: none;
	color: var(--awb-color1, #fff) !important;
	border-radius: 50px;
	padding: 6px 18px !important;
	margin-left: 10px;
	align-self: center;
	line-height: 1.6 !important;
	transition: background-image .2s ease;
}

/* Hold the label and its icon white in every state — base, current and hover —
   so the name never dissolves into the pill's own fill. */
.fusion-menu li.fea-account-pill > a,
.fusion-menu li.fea-account-pill > a .menu-text,
.fusion-menu li.fea-account-pill.current-menu-item > a,
.fusion-menu li.fea-account-pill.current-menu-item > a .menu-text {
	color: var(--awb-color1, #fff) !important;
}

/* The person icon rides alongside the label as a currentColor mask, so it is
   exactly the colour of the text next to it in every state. */
.fusion-menu li.fea-account-pill > a .menu-text {
	border: 0 !important;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.fusion-menu li.fea-account-pill > a .menu-text::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2012a5%205%200%201%200-5-5%205%205%200%200%200%205%205Zm0%202c-4%200-9%202-9%206v2h18v-2c0-4-5-6-9-6Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center/contain;
	mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2012a5%205%200%201%200-5-5%205%205%200%200%200%205%205Zm0%202c-4%200-9%202-9%206v2h18v-2c0-4-5-6-9-6Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center/contain;
}

/* Avada tints menu labels on hover with the brand colour, which is this pill's
   own fill; darken the fill with a translucent overlay and hold the text white
   instead so it stays legible. */
.fusion-menu li.fea-account-pill:hover > a,
.fusion-menu li.fea-account-pill.hover > a,
.fusion-menu li.fea-account-pill:focus-within > a,
.fusion-menu li.fea-account-pill > a:hover,
.fusion-menu li.fea-account-pill > a:focus {
	background-image: linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .18));
	color: var(--awb-color1, #fff) !important;
}

.fusion-menu li.fea-account-pill:hover > a .menu-text,
.fusion-menu li.fea-account-pill.hover > a .menu-text,
.fusion-menu li.fea-account-pill:focus-within > a .menu-text,
.fusion-menu li.fea-account-pill > a:hover .menu-text,
.fusion-menu li.fea-account-pill > a:focus .menu-text {
	color: var(--awb-color1, #fff) !important;
}

/* The dropdown is as wide as the pill above it, rather than shrinking to its
   short labels. */
.fusion-menu li.fea-account-pill .awb-menu__sub-ul {
	min-width: 100%;
}

/* An icon ahead of every dropdown label: a person for the account, a door for
   log out. Masks tinted with currentColor, so they match the menu's text and
   follow it on hover. Avada spreads a sub-link's contents with space-between
   (to park a submenu arrow at the far edge); here it would fling the icon and
   label to opposite ends, so the two are pulled back together at the start. */
.fusion-menu li.fea-account-pill .awb-menu__sub-a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

.fusion-menu li.fea-account-pill .awb-menu__sub-a::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2012a5%205%200%201%200-5-5%205%205%200%200%200%205%205Zm0%202c-4%200-9%202-9%206v2h18v-2c0-4-5-6-9-6Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center/contain;
	mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2012a5%205%200%201%200-5-5%205%205%200%200%200%205%205Zm0%202c-4%200-9%202-9%206v2h18v-2c0-4-5-6-9-6Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center/contain;
}

.fusion-menu li.fea-account-pill li.fea-logout .awb-menu__sub-a::before {
	-webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%205h7V3H5C3.9%203%203%203.9%203%205v14c0%201.1.9%202%202%202h7v-2H5V5zm16%207-4-4v3H9v2h8v3l4-4z%22%2F%3E%3C%2Fsvg%3E');
	mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%205h7V3H5C3.9%203%203%203.9%203%205v14c0%201.1.9%202%202%202h7v-2H5V5zm16%207-4-4v3H9v2h8v3l4-4z%22%2F%3E%3C%2Fsvg%3E');
}

/* ---------------------------------------------------------------------------
   Account tabs

   Avada's tab script gives every pane in a vertical tab set a min-height equal
   to the height of the navigation (fusion-tabs.js, on window load):

       jQuery(this).css( "min-height", jQuery(".vertical-tabs .nav-tabs").outerHeight() )

   With five tabs that forces a short pane — Dashboard, Account details — to the
   height of the whole nav, which is where the empty space in the account page
   came from. There is no element option for it: the only escape the script
   itself offers is setting a fixed Content Height, which trades the gap for an
   inner scrollbar. So it is overridden here, and only for this tab set.

   The rule needs !important because the script writes an inline style.
   --------------------------------------------------------------------------- */

.fea-account-tabs.vertical-tabs .tab-content .tab-pane {
	min-height: 0 !important;
}

/* The nav is `width: auto` with `white-space: nowrap`, so its width follows the
   longest label and shifts as sections are renamed. A sidebar should not move,
   so it is pinned — and the content pane, which Avada fixes at 84.5%, is given
   the rest of the row instead of leaving a gap beside it. */
@media only screen and (min-width: 1025px) {

	.fea-account-tabs.vertical-tabs .nav {
		flex: 0 0 232px;
		width: 232px;
	}

	.fea-account-tabs.vertical-tabs .nav-tabs > li .tab-link {
		white-space: normal;
	}

	.fea-account-tabs.vertical-tabs .tab-content {
		flex: 1 1 auto;
		width: auto;
	}
}

/* ---------------------------------------------------------------------------
   Easy Digital Downloads forms in the account area

   EDD renders its own markup — a stack of <p> wrappers inside <fieldset>s — and
   Avada styles the inputs but not the layout. Left alone that is one field per
   full-width row, so the account form ran tall and mostly empty. Avada ships
   equivalent CSS for WooCommerce's markup for the same reason; this is that,
   for EDD.

   Scoped to the account page so the checkout is untouched.
   --------------------------------------------------------------------------- */

.fea-account-tabs .edd_form fieldset {
	border: 1px solid var(--awb-color3);
	border-radius: 10px;
	padding: 22px 24px 6px;
	margin: 0 0 22px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

.fea-account-tabs .edd_form legend {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	padding: 0;
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
	color: var(--awb-color8);
	border: 0;
}

.fea-account-tabs .edd_form fieldset > p {
	margin: 0 0 16px;
}

/* The email address and the display name are the long ones — they get the
   full width; first/last name and the two password boxes pair up. */
.fea-account-tabs #edd_profile_primary_email_wrap,
.fea-account-tabs #edd_profile_display_name_wrap {
	grid-column: 1 / -1;
}

.fea-account-tabs .edd_form label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--awb-color6);
}

.fea-account-tabs .edd_form input[type="text"],
.fea-account-tabs .edd_form input[type="email"],
.fea-account-tabs .edd_form input[type="password"],
.fea-account-tabs .edd_form select {
	width: 100%;
	box-sizing: border-box;
}

.fea-account-tabs .edd_form #edd_profile_submit_wrap {
	grid-column: 1 / -1;
	margin: 0;
}

/* The submit sits in a fieldset of its own. A bordered card around a lone
   button reads as an empty section, so that one keeps the grid and loses
   the frame. */
.fea-account-tabs .edd_form #edd_profile_submit_fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

/* EDD renders its submit as a bare <input type="submit">, which lands on the
   browser default. Dressed to match Avada's own buttons, using the palette
   so Theme Options still drives the colour. */
.fea-account-tabs .edd_form input[type="submit"] {
	background: var(--awb-color4);
	color: var(--awb-color1);
	border: 0;
	border-radius: 4px;
	padding: 12px 26px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: filter .2s ease;
}

.fea-account-tabs .edd_form input[type="submit"]:hover,
.fea-account-tabs .edd_form input[type="submit"]:focus {
	filter: brightness( 0.93 );
}

/* EDD's tables — purchase and download history — sit flush and borderless by
   default; give them the same card the rest of the page uses. */
.fea-account-tabs .edd-table,
.fea-account-tabs #edd_user_history {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--awb-color3);
	border-radius: 10px;
	overflow: hidden;
}

.fea-account-tabs .edd-table th,
.fea-account-tabs #edd_user_history th {
	background: var(--awb-color2);
	text-align: left;
	font-size: 13px;
	letter-spacing: .02em;
}

.fea-account-tabs .edd-table th,
.fea-account-tabs .edd-table td,
.fea-account-tabs #edd_user_history th,
.fea-account-tabs #edd_user_history td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--awb-color3);
}

.fea-account-tabs .edd-table tr:last-child td,
.fea-account-tabs #edd_user_history tr:last-child td {
	border-bottom: 0;
}

/* Licence cards, from [fea_licenses]. */
.fea-account-tabs .fea-licence {
	border: 1px solid var(--awb-color3);
	border-radius: 10px;
	padding: 20px 22px;
	margin: 0 0 18px;
}

.fea-account-tabs .fea-licence__product {
	margin: 0 0 8px;
	font-size: 15px;
}

.fea-account-tabs .fea-licence__key code {
	display: inline-block;
	padding: 7px 12px;
	background: var(--awb-color2);
	border-radius: 6px;
	font-size: 14px;
	letter-spacing: .04em;
	word-break: break-all;
}

.fea-account-tabs .fea-licence__meta {
	margin: 10px 0 16px;
	font-size: 14px;
	color: var(--awb-color6);
}

.fea-account-tabs .fea-licence form {
	margin: 0;
}

@media only screen and (max-width: 640px) {

	.fea-account-tabs .edd_form fieldset {
		grid-template-columns: 1fr;
		padding: 18px 18px 4px;
	}
}

/* ---------------------------------------------------------------------------
   Order receipt ([edd_receipt])

   Layout only — the download action reuses Avada's button classes. Colour
   tokens mirror the brand green used across the licence emails and pricing.
   --------------------------------------------------------------------------- */
.fea-receipt {
	--fea-green: #65bd7d;
	--fea-green-dark: #4fa869;
	--fea-ink: #0f0f0f;
	--fea-muted: #5b6b60;
	--fea-line: #e6ebe7;
	--fea-tint: #f2f9f4;
	color: var(--fea-ink);
}

.fea-receipt__head {
	margin-bottom: 24px;
}

.fea-receipt__eyebrow {
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 11px;
	font-weight: 700;
	color: var(--fea-green-dark);
	margin-bottom: 6px;
}

.fea-receipt__title {
	margin: 0 0 6px;
	font-size: 30px;
	font-weight: 800;
	color: var(--fea-ink);
}

.fea-receipt__sub {
	margin: 0;
	color: var(--fea-muted);
	font-size: 14px;
}

.fea-receipt__grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 24px;
	align-items: start;
}

.fea-card {
	background: #fff;
	border: 1px solid var(--fea-line);
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 1px 2px rgba(15, 15, 15, .04);
}

.fea-card__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.fea-card__label {
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 11px;
	font-weight: 700;
	color: var(--fea-muted);
}

.fea-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	background: var(--fea-tint);
	color: var(--fea-green-dark);
	border: 1px solid #d8ecdd;
}

.fea-key {
	background: var(--fea-tint);
	border: 1px solid #d8ecdd;
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 12px;
}

.fea-key__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--fea-muted);
	margin-bottom: 6px;
}

.fea-key__code {
	font-family: "Courier New", Courier, monospace;
	font-size: 15px;
	letter-spacing: .5px;
	color: var(--fea-ink);
	word-break: break-all;
}

.fea-card__h {
	margin: 22px 0 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--fea-ink);
}

.fea-product {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--fea-line);
}

.fea-product__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--fea-ink);
}

.fea-product__meta {
	margin-top: 2px;
	font-size: 13px;
	color: var(--fea-muted);
}

.fea-product__price {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.fea-download {
	margin-top: 18px;
	padding: 16px;
	background: var(--fea-tint);
	border: 1px solid #d8ecdd;
	border-radius: 10px;
}

.fea-download__btns {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fea-download__btn .fusion-button-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Downloads tab: a highlighted clickable link (not a solid button), so it
   reads like the sign-out link on the account page rather than a CTA. */
.fea-download-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--awb-color4, #65bd7d) !important;
	text-decoration: none;
}

.fea-download-link:hover,
.fea-download-link:focus {
	text-decoration: underline;
}

.fea-download-link .fea-receipt-dl-icon {
	vertical-align: middle;
}

.fea-receipt-dl-icon {
	vertical-align: middle;
}


/* Order receipt download links (EDD's receipt-files.php, included from the
   core edd/receipt block — edd_download_file_link is EDD's own class, not
   theme markup, so it can't carry a custom class; scoped via its .ul parent
   instead, which only wraps receipt file lists, not the Downloads tab.
   Plain link styling didn't read as "this triggers a file download" here,
   so this is a solid button (unlike .fea-download-link's subtler treatment)
   with the same download glyph used on the account Downloads tab. */
   .edd_purchase_receipt_files {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.edd_purchase_receipt_files .edd_download_file {
	margin: 0 0 8px;
}

.edd_purchase_receipt_files .edd_download_file_link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px 10px 12px;
	background: var(--awb-color4, #65bd7d);
	color: #fff !important;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	border-radius: 6px;
	text-decoration: none !important;
	transition: filter .15s ease;
}

.edd_purchase_receipt_files .edd_download_file_link:hover,
.edd_purchase_receipt_files .edd_download_file_link:focus {
	filter: brightness(0.9);
	color: #fff !important;
}

.edd_purchase_receipt_files .edd_download_file_link::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a1 1 0 0 1 1 1v9.59l2.3-2.3a1 1 0 0 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.42l2.3 2.3V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a1 1 0 0 1 1 1v9.59l2.3-2.3a1 1 0 0 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.42l2.3 2.3V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") no-repeat center / contain;
}


.fea-summary .fea-card__label {
	margin-bottom: 14px;
}

.fea-summary__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 14px;
}

.fea-summary__row dt {
	color: var(--fea-muted);
	margin: 0;
}

.fea-summary__row dd {
	margin: 0;
	font-weight: 600;
	color: var(--fea-ink);
	text-align: right;
}

.fea-summary__divider {
	height: 1px;
	background: var(--fea-line);
	margin: 10px 0;
}

.fea-summary__row--total dt,
.fea-summary__row--total dd {
	font-weight: 800;
}

.fea-summary__status {
	color: var(--fea-green-dark) !important;
}

@media only screen and (max-width: 860px) {

	.fea-receipt__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Checkout — brought in line with the "Order detail" receipt design.
   Reuses the same tokens, cards and summary sidebar so the purchase flow and
   the receipt read as one system. Scoped to #edd_checkout_wrap so it only
   touches the EDD [download_checkout] output, not the Avada page chrome.
   ========================================================================== */
#edd_checkout_wrap {
	--fea-green: #65bd7d;
	--fea-green-dark: #4fa869;
	--fea-ink: #0f0f0f;
	--fea-muted: #5b6b60;
	--fea-line: #e6ebe7;
	--fea-tint: #f2f9f4;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
	color: var(--fea-ink);
}

/* The purchase form is the main column (left); the cart is the summary
   sidebar (right), mirroring the receipt's main + summary layout. Explicit
   grid placement flips them, since EDD prints the cart first in the source. */
/* Form wrapper is just a full-width container now; the cards are the two
   fieldset boxes inside it. */
#edd_checkout_form_wrap {
	float: none;
	width: auto;
	margin: 0;
}

/* Order summary sits full width on top. */
#edd_checkout_cart_form {
	margin: 0;
	background: #fff;
	border: 1px solid var(--fea-line);
	border-radius: 14px;
	padding: 20px 24px;
	box-shadow: 0 1px 2px rgba(15, 15, 15, .04);
}

/* --- Order summary (cart) ------------------------------------------------- */
#edd_checkout_cart_wrap::before {
	content: "Order Summary";
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 11px;
	font-weight: 700;
	color: var(--fea-muted);
	margin-bottom: 14px;
}

table#edd_checkout_cart {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}

table#edd_checkout_cart thead {
	display: none;
}

/* Lay the cart out as flex rows instead of table columns, so the item price
   and the Total amount always share the same right edge (table colspan math
   kept pulling the Total 50px short of the price). */
table#edd_checkout_cart,
table#edd_checkout_cart tbody,
table#edd_checkout_cart tfoot,
table#edd_checkout_cart tr {
	display: block;
	width: 100%;
}

table#edd_checkout_cart tbody td,
table#edd_checkout_cart tfoot th {
	display: block;
	border: 0;
	background: none;
	padding: 0;
	font-size: 14px;
}

/* Item row: name on the left, price on the right. */
table#edd_checkout_cart .edd_cart_item {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 10px 0;
	border-top: 1px solid var(--fea-line);
}

table#edd_checkout_cart .edd_cart_item:first-child {
	border-top: 0;
	padding-top: 0;
}

table#edd_checkout_cart .edd_cart_item_name {
	flex: 1;
}

.edd_checkout_cart_item_title {
	font-weight: 700;
	color: var(--fea-ink);
}

table#edd_checkout_cart .edd_cart_item_price {
	font-weight: 700;
	white-space: nowrap;
	text-align: right;
}

table#edd_checkout_cart .edd_cart_actions {
	display: none;
}

/* The reassurance blurb shares the total's row: description on the left,
   "Total: $29.00" on the right — flush under the item price. */
table#edd_checkout_cart .edd_cart_total {
	display: flex;
	align-items: center;
	padding: 14px 0 0;
	margin-top: 10px;
	border-top: 1px solid var(--fea-line);
	font-weight: 800;
	color: var(--fea-ink);
	text-align: left;
}

table#edd_checkout_cart .edd_cart_total .fea-cart-reassurance {
	margin-right: auto;
	padding-right: 28px;
	max-width: 64%;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	color: var(--fea-muted);
}

table#edd_checkout_cart tfoot .edd_cart_total .edd_cart_amount {
	margin-left: 6px;
	color: var(--fea-green-dark);
}

@media only screen and (max-width: 600px) {

	table#edd_checkout_cart .edd_cart_total {
		display: block;
		text-align: right;
	}

	table#edd_checkout_cart .edd_cart_total::before {
		display: block;
		max-width: none;
		margin: 0 0 10px;
		padding: 0;
		text-align: left;
	}
}

/* --- Purchase form ------------------------------------------------------- */
/* Personal info and Billing Details sit side by side; everything else
   (required notice, payment, submit) spans the full width of the card. */
#edd_purchase_form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

#edd_purchase_form > * {
	grid-column: 1 / -1;
}

#edd_purchase_form > #edd_checkout_user_info {
	grid-column: 1;
}

#edd_purchase_form > #edd_cc_address {
	grid-column: 2;
}

#edd_purchase_form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/* Personal info, Billing Details and Payment each read as their own box.
   flow-root contains the floated legend below; floating the legend takes it
   out of the fieldset's "legend slot" so the card's top border renders as one
   continuous rounded edge instead of the broken notch. */
#edd_purchase_form > #edd_checkout_user_info,
#edd_purchase_form > #edd_cc_address,
#edd_purchase_form > #edd_cc_fields {
	display: flow-root;
	background: #fff;
	border: 1px solid var(--fea-line);
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 1px 2px rgba(15, 15, 15, .04);
}

#edd_purchase_form fieldset:last-of-type {
	margin-bottom: 0;
}

#edd_purchase_form legend {
	float: left;
	width: 100%;
	border: 0;
	padding: 0 0 12px;
	margin: 0 0 16px;
	border-bottom: 1px solid var(--fea-line);
	font-size: 16px;
	font-weight: 700;
	color: var(--fea-ink);
}

/* Fields start below the floated legend. */
#edd_purchase_form > #edd_checkout_user_info > legend ~ *,
#edd_purchase_form > #edd_cc_address > legend ~ *,
#edd_purchase_form > #edd_cc_fields > legend ~ * {
	clear: left;
}

#edd_purchase_form label {
	font-size: 13px;
	font-weight: 600;
	color: var(--fea-muted);
}

#edd_purchase_form input[type="text"],
#edd_purchase_form input[type="email"],
#edd_purchase_form input[type="tel"],
#edd_purchase_form input[type="password"],
#edd_purchase_form select,
#edd_purchase_form .edd-stripe-new-card input,
#edd_purchase_form .StripeElement {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--fea-line);
	border-radius: 10px;
	padding: 11px 12px;
	font-size: 14px;
	background: #fff;
	box-shadow: none;
}

/* Field rows fill the box width. */
#edd_purchase_form .edd-blocks-form__group,
#edd_purchase_form p,
#edd_purchase_form [id$="-wrap"] {
	width: 100%;
}

/* Tighten the gap under the required-fields notice. */
#edd_purchase_form .edd-required-fields-notice {
	margin: 0;
	font-size: 13px;
}

#edd_purchase_form input:focus,
#edd_purchase_form select:focus,
#edd_purchase_form .StripeElement--focus {
	outline: none;
	border-color: var(--fea-green);
	box-shadow: 0 0 0 3px rgba(101, 189, 125, .15);
}

/* Discount field + payment icons sit at the top of the form card. */
.edd-discount-code-wrap,
#edd_show_discount,
.edd_discount {
	margin-bottom: 16px;
}

/* --- Final total + submit ------------------------------------------------ */
#edd_final_total_wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	margin: 0 0 14px;
	background: var(--fea-tint);
	border: 1px solid #d8ecdd;
	border-radius: 10px;
	font-weight: 700;
	color: var(--fea-ink);
}

#edd_final_total_wrap .edd_cart_amount {
	color: var(--fea-green-dark);
	font-weight: 800;
}

#edd_purchase_form #edd-purchase-button,
#edd_purchase_form .edd-submit.button {
	width: 100%;
	background: var(--fea-green) !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 13px 22px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #fff !important;
	text-shadow: none !important;
	transition: background .15s ease;
}

#edd_purchase_form #edd-purchase-button:hover,
#edd_purchase_form .edd-submit.button:hover {
	background: var(--fea-green-dark) !important;
}

@media only screen and (max-width: 860px) {

	#edd_checkout_wrap {
		grid-template-columns: 1fr;
	}

	#edd_checkout_form_wrap {
		grid-column: 1;
		grid-row: 1;
	}

	#edd_checkout_cart_form {
		grid-column: 1;
		grid-row: 2;
		position: static;
	}

	#edd_purchase_form {
		grid-template-columns: 1fr;
	}

	#edd_purchase_form > #edd_checkout_user_info,
	#edd_purchase_form > #edd_cc_address {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ---------------------------------------------------------------------------
   "Current Plan" disabled-button state

   Both rule sets style an EDD purchase-link button as non-clickable once the
   signed-in customer already owns that plan. Each comes from a filter on
   EDD's own purchase-link/shortcode output (fea_ls_current_plan_html() in
   fea-license-server.php; the [fea_fancy_pricing_plan] wrapper in
   fea-storefront.php) rather than one fixed template, so the button — and
   this CSS — can end up anywhere a purchase link renders, including the
   header's mini buttons. That is every-page in practice, which is why these
   live here instead of in a conditionally-enqueued file: previously each was
   its own unconditional `wp_head` echo, always printed on every request, so
   moving them here is a direct, identical-behaviour relocation.
   --------------------------------------------------------------------------- */

.fea-ls-current-plan-btn {
	opacity: .6;
	cursor: not-allowed !important;
	pointer-events: none;
}

.fea-pro-plan-button[href="#"],
.fea-sf-plan-btn-current {
	opacity: .6;
	cursor: not-allowed !important;
	pointer-events: none;
}