/* =============================================================
   Delivery UI — order-received panel + My Account downloads.
   Uses only the theme tokens from main.css, so dark mode is automatic.
   Install: wp-content/themes/ecomdigitech/assets/css/delivery.css
   Enqueued by inc/delivery.php on account / order-received / checkout.
   ============================================================= */

/* ---------- Order received: delivery panel ---------- */
.edt-delivery {
	margin: 0 0 28px;
	padding: 24px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-l);
	background: var(--c-surface);
	box-shadow: var(--shadow-m);
	position: relative;
	overflow: hidden;
}
.edt-delivery::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--grad-hero);
}
.edt-delivery-head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.edt-delivery-tick {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--c-success) 16%, transparent);
	color: var(--c-success);
}
.edt-delivery-head h2 {
	margin: 0 0 4px;
	font-size: 1.32rem;
	line-height: 1.25;
	color: var(--c-text);
}
.edt-delivery-head p {
	margin: 0;
	color: var(--c-text-2);
	font-size: .95rem;
}

.edt-delivery-steps {
	list-style: none;
	counter-reset: edtstep;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.edt-delivery-steps li {
	counter-increment: edtstep;
	position: relative;
	padding: 14px 14px 14px 46px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-m);
	background: var(--c-surface-2);
}
.edt-delivery-steps li::before {
	content: counter(edtstep);
	position: absolute;
	left: 14px;
	top: 13px;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: var(--c-primary);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
}
.edt-delivery-steps strong {
	display: block;
	color: var(--c-text);
	font-size: .95rem;
	margin-bottom: 2px;
}
.edt-delivery-steps span {
	color: var(--c-text-2);
	font-size: .88rem;
	line-height: 1.45;
}
.edt-delivery-help {
	margin: 16px 0 0;
	font-size: .88rem;
	color: var(--c-text-3);
}
.edt-delivery-help a { color: var(--c-primary); }

/* ---------- My Account → Downloads ---------- */
.edt-dl-intro { margin: 0 0 20px; }
.edt-dl-intro h2 {
	margin: 0 0 6px;
	font-size: 1.5rem;
	color: var(--c-text);
}
.edt-dl-intro p {
	margin: 0;
	max-width: 62ch;
	color: var(--c-text-2);
	font-size: .95rem;
}

.edt-dl-grid {
	display: grid;
	gap: 14px;
	margin: 0 0 22px;
}
.edt-dl-card {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 14px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-m);
	background: var(--c-surface);
	transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.edt-dl-card:hover {
	border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-border));
	box-shadow: var(--shadow-m);
	transform: translateY(-1px);
}
.edt-dl-media {
	width: 72px;
	height: 72px;
	border-radius: var(--radius-s);
	overflow: hidden;
	background: var(--c-surface-2);
	display: grid;
	place-items: center;
}
.edt-dl-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.edt-dl-ph { color: var(--c-text-3); }

.edt-dl-body { min-width: 0; }
.edt-dl-title {
	margin: 0 0 2px;
	font-size: 1.02rem;
	line-height: 1.3;
	color: var(--c-text);
}
.edt-dl-title a { color: inherit; text-decoration: none; }
.edt-dl-title a:hover { color: var(--c-primary); }
.edt-dl-file {
	margin: 0 0 8px;
	font-size: .84rem;
	color: var(--c-text-3);
	word-break: break-word;
}

.edt-dl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}
.edt-dl-chip {
	font-size: .76rem;
	font-weight: 600;
	line-height: 1;
	padding: 6px 10px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
}
.edt-dl-chip.is-ok {
	background: color-mix(in srgb, var(--c-success) 13%, transparent);
	border-color: color-mix(in srgb, var(--c-success) 32%, transparent);
	color: color-mix(in srgb, var(--c-success) 78%, var(--c-text));
}
.edt-dl-chip.is-warn {
	background: color-mix(in srgb, var(--c-warning) 15%, transparent);
	border-color: color-mix(in srgb, var(--c-warning) 36%, transparent);
	color: color-mix(in srgb, var(--c-warning) 76%, var(--c-text));
}
.edt-dl-chip.is-bad {
	background: color-mix(in srgb, var(--c-danger) 13%, transparent);
	border-color: color-mix(in srgb, var(--c-danger) 34%, transparent);
	color: color-mix(in srgb, var(--c-danger) 78%, var(--c-text));
}

.edt-dl-action .edt-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
.edt-dl-foot {
	font-size: .88rem;
	color: var(--c-text-3);
}
.edt-dl-foot a { color: var(--c-primary); }

.edt-dl-empty { text-align: center; padding: 40px 20px; }
.edt-dl-empty h2 { margin: 0 0 8px; color: var(--c-text); }
.edt-dl-empty p {
	margin: 0 auto 18px;
	max-width: 46ch;
	color: var(--c-text-2);
}

/* ---------- Account area: make the default WooCommerce chrome match ---------- */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 14px;
	border-radius: var(--radius-s);
	color: var(--c-text-2);
	text-decoration: none;
	font-weight: 500;
	transition: background var(--t-fast), color var(--t-fast);
}
.woocommerce-MyAccount-navigation li a:hover {
	background: var(--c-surface-2);
	color: var(--c-text);
}
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--c-primary);
	color: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	.edt-dl-card {
		grid-template-columns: 56px 1fr;
		grid-template-areas:
			"media body"
			"action action";
		align-items: start;
	}
	.edt-dl-media { grid-area: media; width: 56px; height: 56px; }
	.edt-dl-body  { grid-area: body; }
	.edt-dl-action { grid-area: action; }
	.edt-dl-action .edt-btn { width: 100%; justify-content: center; }
	.edt-delivery { padding: 18px; }
}

/* ---------- Checkout: immediate-access consent row ---------- */
/* Block checkout styles its own checkbox; this covers the classic fallback
   and gives the consent statement visual weight on both. */
.edt-consent-row,
.wc-block-checkout__additional-fields .wc-block-components-checkbox {
	margin-top: 14px;
}
.edt-consent-row {
	padding: 14px 16px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-m);
	background: var(--c-surface-2);
}
.edt-consent-row label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--c-text-2);
	cursor: pointer;
}
.edt-consent-row input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 2px;
	width: 18px;
	height: 18px;
	accent-color: var(--c-primary);
}
.edt-consent-row .required { color: var(--c-danger); }

/* =============================================================
   WooCommerce BLOCK checkout & cart.

   Written against WooCommerce's own checkout.css, not guessed.
   Three facts drive everything below:

   1. Text inputs and selects are built DIFFERENTLY.
      Text input : the <input> itself carries background, border
                   and height (#fff, 50px).
      Select     : ".wc-blocks-components-select__container" carries
                   the white background; ".__select" inside it has
                   background:none plus the border and height.
      They must therefore be styled on different elements.

   2. The select classes use the prefix "wc-BLOCKS-components-select"
      - plural - while everything else uses "wc-BLOCK-components-*".
      That single letter is why the country and state fields stayed
      white through several attempts.

   3. The address form is flex with "gap: 0 12px" - row gap is ZERO,
      which is why State sat flush against First name.

   Layout rules are unscoped; light mode has the same crowding.
   Colour rules are dark-mode only.
   ============================================================= */

/* ---------- 1. Layout ---------- */

/* Row gap: the block ships 0. */
.wc-block-checkout__billing-fields .wc-block-components-address-form,
.wc-block-checkout__shipping-fields .wc-block-components-address-form,
.wc-block-components-address-form {
	row-gap: 18px !important;
}

/* One height for every control, whichever element carries it. */
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-blocks-components-select__container {
	height: 58px !important;
	box-sizing: border-box !important;
}
.wc-block-components-text-input input,
.wc-blocks-components-select__select {
	padding: 27px 13px 8px !important;
	line-height: 1.25 !important;
}

/* Labels pinned to the top in both control types, so a select and a
   text input never sit at different heights. */
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	top: 10px !important;
	left: 13px !important;
	transform: none !important;
	font-size: 0.74rem !important;
	line-height: 1.1 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* The order note must keep its own height. */
.wc-block-components-textarea {
	min-height: 96px !important;
	height: auto !important;
	padding: 14px 13px !important;
}

/* ---------- 2. Colour: dark mode ---------- */

[data-theme="dark"] .wp-block-woocommerce-checkout,
[data-theme="dark"] .wp-block-woocommerce-cart {
	--edt-field-bg: var(--c-surface);   /* identical to the summary and payment panels */
	--edt-field-border: #33415F;
	color: var(--c-text);
}

/* Text input: the input element is the field. */
[data-theme="dark"] .wc-block-components-text-input input,
[data-theme="dark"] .wc-block-components-textarea {
	background-color: var(--edt-field-bg) !important;
	border: 1px solid var(--edt-field-border) !important;
	border-radius: var(--radius-s) !important;
	color: var(--c-text) !important;
}

/* Select: the container is the field, the select sits transparent inside it. */
[data-theme="dark"] .wc-blocks-components-select__container {
	background: var(--edt-field-bg) !important;
	border-radius: var(--radius-s) !important;
}
[data-theme="dark"] .wc-blocks-components-select__select {
	background: transparent !important;
	border: 1px solid var(--edt-field-border) !important;
	border-radius: var(--radius-s) !important;
	color: var(--c-text) !important;
}

/* Every label the same tone, both control types. */
[data-theme="dark"] .wc-block-components-text-input label,
[data-theme="dark"] .wc-blocks-components-select__label {
	color: var(--c-text-3) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
	color: var(--c-text-3) !important;
	opacity: 1;
}

[data-theme="dark"] .wc-block-components-text-input input:focus,
[data-theme="dark"] .wc-blocks-components-select__select:focus {
	border-color: var(--c-primary) !important;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 32%, transparent) !important;
	outline: none !important;
}

/* Chrome autofill repaints the field white with black text. */
[data-theme="dark"] .wp-block-woocommerce-checkout input:-webkit-autofill,
[data-theme="dark"] .wp-block-woocommerce-checkout input:-webkit-autofill:hover,
[data-theme="dark"] .wp-block-woocommerce-checkout input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--c-text) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--c-surface) inset !important;
	caret-color: var(--c-text);
}

/* Dropdown arrow. */
[data-theme="dark"] .wc-blocks-components-select__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A9B7CE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 16px !important;
	padding-right: 42px !important;
}
[data-theme="dark"] .wc-blocks-components-select svg {
	fill: var(--c-text-2) !important;
	stroke: var(--c-text-2);
}
/* The native option list is painted by the OS; give it a matching base. */
[data-theme="dark"] .wc-blocks-components-select__select option {
	background: var(--c-surface-2) !important;
	color: var(--c-text) !important;
}

/* ---------- 3. Panels ---------- */

[data-theme="dark"] .wc-block-components-checkbox,
[data-theme="dark"] .wc-block-components-checkbox label,
[data-theme="dark"] .wc-block-components-radio-control__label,
[data-theme="dark"] .wc-block-components-radio-control__description,
[data-theme="dark"] .wc-block-components-checkout-step__description,
[data-theme="dark"] .wc-block-components-panel__button {
	color: var(--c-text-2) !important;
}
[data-theme="dark"] .wc-block-components-checkbox__input,
[data-theme="dark"] .wc-block-components-radio-control__input {
	accent-color: var(--c-primary);
}

[data-theme="dark"] .wc-block-components-radio-control__option,
[data-theme="dark"] .wc-block-components-radio-control-accordion-option,
[data-theme="dark"] .wc-block-components-radio-control-accordion-content,
[data-theme="dark"] .wc-block-components-radio-control {
	background: var(--c-surface) !important;
	border-color: var(--edt-field-border) !important;
	box-shadow: none !important;
}
[data-theme="dark"] .wc-block-components-radio-control__option::before,
[data-theme="dark"] .wc-block-components-radio-control__option::after,
[data-theme="dark"] .wc-block-components-radio-control-accordion-option::before,
[data-theme="dark"] .wc-block-components-radio-control-accordion-option::after {
	border-color: var(--edt-field-border) !important;
	background: transparent !important;
}
[data-theme="dark"] .wc-block-components-radio-control-accordion-option {
	border-radius: var(--radius-m) !important;
	overflow: hidden;
}

[data-theme="dark"] .wc-block-components-title,
[data-theme="dark"] .wc-block-components-checkout-step__title,
[data-theme="dark"] .wc-block-components-totals-item__label,
[data-theme="dark"] .wc-block-components-totals-item__value,
[data-theme="dark"] .wc-block-components-product-name {
	color: var(--c-text) !important;
}

/* Order summary is ONE bordered box. Painting a background on the
   inner blocks as well is what pushed a strip of colour past the
   border down the left-hand edge. */
[data-theme="dark"] .wc-block-components-sidebar {
	background: var(--c-surface) !important;
	border: 1px solid var(--edt-field-border) !important;
	border-radius: var(--radius-m) !important;
	overflow: hidden;
}
[data-theme="dark"] .wc-block-components-sidebar .wc-block-components-order-summary,
[data-theme="dark"] .wc-block-components-sidebar .wc-block-components-totals-wrapper,
[data-theme="dark"] .wc-block-components-sidebar .wc-block-components-panel,
[data-theme="dark"] .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: transparent !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-color: var(--edt-field-border) !important;
}
[data-theme="dark"] .wc-block-components-product-metadata,
[data-theme="dark"] .wc-block-components-product-details,
[data-theme="dark"] .wc-block-components-order-summary-item__description {
	color: var(--c-text-3) !important;
}

[data-theme="dark"] .wc-block-components-checkout-place-order-button {
	background: var(--c-primary) !important;
	color: #fff !important;
	border-radius: var(--radius-pill) !important;
}
[data-theme="dark"] .wc-block-components-checkout-place-order-button:hover {
	background: var(--c-primary-hover) !important;
}

[data-theme="dark"] .wc-block-components-validation-error,
[data-theme="dark"] .wc-block-components-validation-error p {
	color: #FCA5A5 !important;
}

/* =============================================================
   Field order.

   The complaint: the name fields sat BETWEEN Country and State,
   splitting the one pair that belongs together.

   CSS cannot move a field from the Billing address block into the
   Contact information block - they are separate containers, and
   `order` only reorders within one flex parent. But the address
   form IS flex (WooCommerce sets display:flex;flex-wrap:wrap), so
   the fields can be reordered inside it, and the now-meaningless
   "Billing address" heading can be dropped so everything reads as
   one continuous section under Contact information.

   Result:  Email
            First name | Last name
            Country    | State

   Class names verified against WooCommerce's checkout.js, which
   builds them as `wc-block-components-address-form__${field.key}`.
   ============================================================= */

.wc-block-components-address-form__first_name { order: 1 !important; }
.wc-block-components-address-form__last_name  { order: 2 !important; }
.wc-block-components-address-form__country    { order: 3 !important; }
.wc-block-components-address-form__state      { order: 4 !important; }
.wc-block-components-address-form__phone      { order: 5 !important; }

/* WooCommerce spaces these rows with margin-top:12px on each field,
   EXCEPT the country select, which it explicitly resets to 0:

     .wc-block-checkout__form .wc-blocks-components-select { margin-top:12px }
     ...address-form__country .wc-blocks-components-select { margin-top:0 }

   That 12px difference is exactly why Country sat higher than State.
   Zero every margin and let row-gap do all the vertical spacing, so
   every row is identical and every pair lines up. */
.wc-block-checkout__form .wc-blocks-components-select,
.wc-block-checkout__billing-fields .wc-block-components-address-form > *,
.wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-text-input,
.wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-state-input,
.wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-country-input,
.wc-block-checkout__billing-fields .wc-block-components-address-form .wc-blocks-components-select {
	margin-top: 0 !important;
}

/* Country and State: the same flex basis WooCommerce gives First and
   Last name, so both rows are identical. flex-grow means that if a
   country has no state field (the UK, for instance) Country fills the
   row rather than leaving a hole. */
.wc-block-components-address-form__country,
.wc-block-components-address-form__state {
	flex: 1 0 calc(50% - 12px) !important;
	max-width: 100% !important;
}

/* Phone sits alone on its row: half width, left aligned. No grow, so
   it keeps to its half instead of stretching across. */
.wc-block-components-address-form__phone {
	flex: 0 1 calc(50% - 12px) !important;
	max-width: calc(50% - 12px) !important;
	margin-right: auto !important;
}

/* There is no address left in "Billing address" - company, street,
   city and postcode are all gone - so the heading is now noise
   between the email field and the name fields.
   Delete these two rules if you would rather keep it. */
.wc-block-checkout__billing-fields .wc-block-components-checkout-step__heading {
	display: none !important;
}
.wc-block-checkout__billing-fields {
	margin-top: 0 !important;
	padding-top: 0 !important;
}