/*
 * Grovidex Customer Account — shared address-book styles.
 *
 * Mobile-first, per the locked breakpoints (Phase 2 §19 / reinforced
 * mid-build): base rules target the smallest screens, then widen at
 * 480px / 768px / 1024px. 768px is also the locked Add/Edit modal
 * breakpoint (Phase 2 Addendum §3): below it, the form is full-screen/
 * bottom-sheet; at and above it, a centered modal.
 *
 * Load-order note (part of the locked legacy-CSS override strategy):
 * this file is enqueued at a later wp_enqueue_scripts priority than a
 * typical snippet-plugin's default registration (see
 * AssetsServiceProvider), so on equal specificity it wins the cascade
 * simply by loading later. The one exception is the targeted override
 * block at the bottom of this file, aimed specifically at the
 * previously-flagged legacy unscoped negative-margin header-offset
 * hack — that block uses !important deliberately and narrowly, not as
 * a general pattern anywhere else in this file.
 */

/*
 * Defensive isolation for the Add/Edit modal — added after a live
 * report of the modal rendering with no visible panel background,
 * padding, or input styling specifically at checkout, overlapping the
 * page underneath instead of appearing as a proper full-screen overlay.
 *
 * Leading hypothesis (from the screenshot, not confirmed via DevTools
 * yet): the checkout selector — and this modal, rendered alongside it —
 * now lives inside WooCommerce's own checkout <form> DOM subtree (a
 * deliberate fix; see Integration\CheckoutIntegration's docblock for
 * why). `position: fixed` moves an element out of normal layout flow,
 * but NOT out of the DOM tree for CSS cascade purposes — ancestor-
 * scoped theme/WooCommerce selectors (e.g. anything targeting
 * `.woocommerce-checkout input` or `.col-1 .form-row`) can still
 * cascade onto and override this modal's own rules, even though it
 * visually "floats" above the page once opened.
 *
 * `all: revert` resets every inherited/cascaded property on this
 * subtree back to the browser's UA-default stylesheet, removing that
 * entire class of interference regardless of which specific ancestor
 * rule was the culprit. This MUST be the first rule in the file: at
 * equal specificity (one class + universal selector vs. one class),
 * CSS resolves ties by source order, so every other rule anywhere else
 * in this file — including .grovidex-button far below, which the modal's
 * own Save/Cancel buttons also use — needs to come after this to
 * correctly re-apply on top of the reset. Scoped to `--open` only, so
 * it never touches the modal's always-in-DOM closed state.
 */
.grovidex-address-form--open,
.grovidex-address-form--open * {
	all: revert;
}

/*
 * box-sizing: border-box, re-applied immediately after the revert above
 * (same selector, same specificity, later in source order — so it wins
 * the same way every other individually-declared property below does).
 * Without this, .grovidex-address-form__panel's `width: 100%; height:
 * 100%; padding: 1.25rem;` combination renders wider/taller than its
 * fixed-position, inset:0 parent — the browser's content-box default
 * adds padding on top of the specified size instead of inside it —
 * which is the confirmed cause of the modal rendering visibly larger
 * than the viewport on mobile.
 */
.grovidex-address-form--open,
.grovidex-address-form--open * {
	box-sizing: border-box;
}

.grovidex-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.grovidex-icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.125em;
	fill: none;
}

/* ---------------------------------------------------------------- */
/* Buttons                                                            */
/* ---------------------------------------------------------------- */

.grovidex-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.65em 1.1em;
	border-radius: 8px;
	border: 1px solid #d0d5dd;
	background: #fff;
	color: #1f2937;
	cursor: pointer;
}

.grovidex-button--primary {
	border-color: transparent;
	background: #1f6f43;
	color: #fff;
}

/* ---------------------------------------------------------------- */
/* Badges                                                             */
/* ---------------------------------------------------------------- */

.grovidex-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.2em 0.65em;
	border-radius: 999px;
	background: #eef1f4;
	color: #374151;
}

.grovidex-badge--type {
	background: #e6f0ff;
	color: #1d4ed8;
}

.grovidex-badge--default {
	background: #e7f6ec;
	color: #15803d;
}

/* ---------------------------------------------------------------- */
/* Address card                                                       */
/* ---------------------------------------------------------------- */

.grovidex-address-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	border: 1px solid #e2e5e9;
	border-radius: 10px;
	background: #fff;
}

.grovidex-address-card--selected {
	border-color: #1f6f43;
	box-shadow: 0 0 0 1px #1f6f43;
}

.grovidex-address-card__select {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
}

.grovidex-address-card__radio {
	width: 1.15rem;
	height: 1.15rem;
}

.grovidex-address-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding-right: 1.75rem; /* keeps clear of the radio in the top-right */
}

.grovidex-address-card__name {
	margin: 0;
	font-weight: 600;
	font-size: 0.9375rem;
}

.grovidex-address-card__phone,
.grovidex-address-card__lines {
	margin: 0;
	font-size: 0.875rem;
	color: #4b5563;
	line-height: 1.5;
}

.grovidex-address-card__actions {
	display: flex;
	gap: 1rem;
	padding-top: 0.65rem;
	margin-top: 0.15rem;
	border-top: 1px solid #edf0f2;
}

.grovidex-address-card__action {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: none;
	border: none;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #1f6f43;
	cursor: pointer;
}

.grovidex-address-card__action[data-grovidex-action="delete-address"] {
	color: #6b7280;
}

/* ---------------------------------------------------------------- */
/* Empty state                                                        */
/* ---------------------------------------------------------------- */

.grovidex-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	padding: 2.5rem 1.25rem;
	border: 1px dashed #d0d5dd;
	border-radius: 10px;
}

.grovidex-empty-state__icon {
	font-size: 1.75rem;
	color: #9ca3af;
	margin-bottom: 0.25rem;
}

.grovidex-empty-state__title {
	margin: 0;
	font-weight: 600;
}

.grovidex-empty-state__body {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	color: #6b7280;
}

/* ---------------------------------------------------------------- */
/* My Addresses page shell                                            */
/* ---------------------------------------------------------------- */

.grovidex-my-addresses__header {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.grovidex-my-addresses__title {
	margin: 0;
	font-size: 1.25rem;
}

.grovidex-my-addresses__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

/* ---------------------------------------------------------------- */
/* Add/Edit form — full-screen below 768px, centered modal at/above   */
/* ---------------------------------------------------------------- */

.grovidex-address-form {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
}

.grovidex-address-form--open {
	display: block;
}

.grovidex-address-form__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.5);
}

.grovidex-address-form__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	max-height: 100%;
	background: #fff;
	overflow-y: auto;
	padding: 1.25rem;
}

.grovidex-address-form__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.grovidex-address-form__title {
	margin: 0;
	font-size: 1.125rem;
}

.grovidex-address-form__close {
	background: none;
	border: none;
	padding: 0.25rem;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: #4b5563;
}

.grovidex-address-form__field-group {
	border: none;
	padding: 0;
	margin: 0 0 1rem;
}

.grovidex-address-form__legend {
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
	padding: 0;
}

.grovidex-address-form__radio {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-right: 1rem;
	font-size: 0.875rem;
}

.grovidex-address-form__field {
	margin-bottom: 0.9rem;
}

.grovidex-address-form__field label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.grovidex-address-form__field input,
.grovidex-address-form__field select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.75em;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	font-size: 0.9375rem;
}

.grovidex-address-form__field input:disabled {
	background: #f3f4f6;
	color: #6b7280;
}

.grovidex-address-form__error {
	display: block;
	min-height: 1.1em;
	font-size: 0.75rem;
	color: #dc2626;
	margin-top: 0.25rem;
}

.grovidex-address-form__checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	margin: 0.5rem 0 1.25rem;
}

.grovidex-address-form__footer {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid #edf0f2;
}

/* ---------------------------------------------------------------- */
/* 480px and up                                                       */
/* ---------------------------------------------------------------- */

@media (min-width: 480px) {
	.grovidex-my-addresses__header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ---------------------------------------------------------------- */
/* 768px and up — locked modal breakpoint (Phase 2 Addendum §3)       */
/* ---------------------------------------------------------------- */

@media (min-width: 768px) {
	.grovidex-my-addresses__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.grovidex-address-form__panel {
		width: 32rem;
		height: auto;
		max-height: 85vh;
		margin: 6vh auto 0;
		border-radius: 12px;
	}
}

/* ---------------------------------------------------------------- */
/* 1024px and up                                                      */
/* ---------------------------------------------------------------- */

@media (min-width: 1024px) {
	.grovidex-my-addresses__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------------------------------------------------------------- */
/* Legacy override — targeted, narrow, documented                     */
/*                                                                    */
/* Countering the previously-flagged legacy unscoped negative-margin  */
/* header-offset hack, which was reported to clip nav/card content on */
/* mobile. Written defensively at the container level, since the      */
/* exact legacy selector/rule text was not preserved verbatim from the*/
/* earlier (pre-rebuild) review — if the legacy snippet is still      */
/* active after this plugin goes live and clipping persists, the      */
/* documented recommendation remains: disable that legacy CSS snippet */
/* rather than layering further overrides indefinitely.               */
/* ---------------------------------------------------------------- */

.woocommerce-MyAccount-content .grovidex-my-addresses,
.woocommerce-checkout .grovidex-checkout-selector {
	margin-top: 0 !important;
	overflow: visible !important;
}