/*
 * Brina — seller entry pages: phone/tablet responsive layer.
 * Loaded only on Seller Portal (2962), Seller Application (3020) and Seller
 * sign-in (3524); every rule is scoped to body.page-id-<id>.
 *
 * Root cause: the Bricks pages carry desktop-only settings (52/48 and 50/46
 * percentage columns, 70px column gaps, repeat(4,1fr)/repeat(3,1fr)/
 * repeat(2,1fr) grids, calc(50% - 8px) fields, a min-width:330px card inside
 * an overflow:hidden wrapper) with no breakpoint overrides. Bricks only adds
 * flex-wrap on phones, which cannot help children with percentage widths.
 *
 * Desktop (>= 1200px): NO rules — the approved desktop is unchanged.
 * Ids are Bricks element ids from the page data (stable unless the element
 * is deleted/recreated in the builder).
 */

/* ==================================================================
 * 1. Seller Portal — tablet (768–1199): stop the hero card clipping.
 *    The 330px min-width card overflowed its 48% wrapper (overflow:hidden)
 *    by 67px at 768 and 6px at 1024.
 * ================================================================== */
@media (max-width: 1199px) {
	body.page-id-2962 #brxe-bftmme {
		min-width: 0;
	}
}

/* Tablet portrait: the 48% card column left ~230px of card content (the
   status pill overflowed its box) and the four step cards ~110px of text. */
@media (min-width: 768px) and (max-width: 1023px) {
	body.page-id-2962 #brxe-oyymxq {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		column-gap: 0;
		row-gap: 40px;
	}
	body.page-id-2962 #brxe-bmhqny,
	body.page-id-2962 #brxe-zolsoz {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	body.page-id-2962 #brxe-zolsoz {
		min-height: 0;
		padding: 28px;
	}
	body.page-id-2962 #brxe-czodtq {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==================================================================
 * 2. Seller Portal — phone (<= 767): one deliberate column.
 * ================================================================== */
@media (max-width: 767px) {
	body.page-id-2962 #brxe-dmzjrr,
	body.page-id-2962 #brxe-qhmqzh,
	body.page-id-2962 #brxe-mltntp,
	body.page-id-2962 #brxe-eqnlwa,
	body.page-id-2962 #brxe-kuaait {
		padding-left: 20px;
		padding-right: 20px;
	}
	body.page-id-2962 #brxe-dmzjrr { padding-top: 36px; padding-bottom: 48px; }
	body.page-id-2962 #brxe-qhmqzh,
	body.page-id-2962 #brxe-mltntp { padding-top: 48px; padding-bottom: 48px; }
	body.page-id-2962 #brxe-eqnlwa { padding-top: 56px; padding-bottom: 56px; }
	body.page-id-2962 #brxe-kuaait { padding-top: 48px; padding-bottom: 56px; }

	/* Hero: text column, then the "Everything you need to sell" card. */
	body.page-id-2962 #brxe-oyymxq {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		column-gap: 0;
		row-gap: 32px;
	}
	body.page-id-2962 #brxe-bmhqny,
	body.page-id-2962 #brxe-zolsoz {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	body.page-id-2962 #brxe-bmhqny { row-gap: 18px; }
	body.page-id-2962 #brxe-vbelhc {
		max-width: 100%;
		font-size: 42px;
		line-height: 1.07;
		letter-spacing: -1px;
		text-wrap: balance;
	}
	body.page-id-2962 #brxe-cpfusz {
		max-width: 100%;
		font-size: 17px;
		line-height: 1.55;
	}
	body.page-id-2962 #brxe-wzqdmt {
		width: 100%;
		flex-wrap: wrap;
		gap: 12px;
	}
	body.page-id-2962 #brxe-wzqdmt > .brxe-button {
		flex: 1 1 160px;
		min-width: 0;
		min-height: 48px;
		justify-content: center;
		text-align: center;
	}
	body.page-id-2962 #brxe-nodqja {
		max-width: 100%;
		font-size: 14px;
		line-height: 1.5;
	}
	body.page-id-2962 #brxe-zolsoz {
		min-height: 0;
		padding: 16px;
		overflow: visible;
	}
	body.page-id-2962 #brxe-bftmme {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding: 22px 20px;
	}
	body.page-id-2962 #brxe-hdojvi { font-size: 22px; text-wrap: balance; }
	body.page-id-2962 #brxe-bftmme .brxe-block { min-width: 0; }
	body.page-id-2962 #brxe-uydkgi { flex-wrap: wrap; row-gap: 8px; }

	/* Section headings */
	body.page-id-2962 #brxe-rrkimu,
	body.page-id-2962 #brxe-gmxfcu { font-size: 30px; line-height: 1.15; }
	body.page-id-2962 #brxe-zldzmd,
	body.page-id-2962 #brxe-nkccxs { font-size: 30px; line-height: 1.15; }

	/* Card grids → one column */
	body.page-id-2962 #brxe-czodtq,
	body.page-id-2962 #brxe-bvjnsl {
		grid-template-columns: minmax(0, 1fr);
		grid-gap: 16px;
	}
	body.page-id-2962 #brxe-czodtq > .brxe-block,
	body.page-id-2962 #brxe-bvjnsl > .brxe-block {
		min-width: 0;
		min-height: 0; /* desktop 230/250px card heights left empty space */
		padding: 22px;
		row-gap: 10px;
	}
	body.page-id-2962 #brxe-czodtq > .brxe-block > * {
		text-align: left;
	}

	/* Trust section → stacked */
	body.page-id-2962 #brxe-mndudi {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		column-gap: 0;
		row-gap: 32px;
	}
	body.page-id-2962 #brxe-gfhlez,
	body.page-id-2962 #brxe-qzzwma {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	body.page-id-2962 #brxe-qzzwma { padding: 24px 20px; }

	/* Closing CTA */
	body.page-id-2962 #brxe-okqvaa { padding: 36px 20px; }
	body.page-id-2962 #brxe-nkccxs,
	body.page-id-2962 #brxe-wjaxmz { max-width: 100%; }
	body.page-id-2962 #brxe-bznefr {
		width: 100%;
		flex-wrap: wrap;
		gap: 12px;
	}
	body.page-id-2962 #brxe-bznefr > .brxe-button {
		flex: 1 1 160px;
		min-width: 0;
		min-height: 48px;
		justify-content: center;
		text-align: center;
	}
}

/* ==================================================================
 * 3. Seller Application — phone (<= 767).
 *    Six 68px progress entries stacked to 451px, pushing the active form
 *    below the first viewport (heading at y=837 on a 390×844 phone).
 *    Phone presentation: summary ("Step 1 of 6 / Account / Next: Business",
 *    rendered by brina-seller-application-stepper.js from the existing
 *    classes) + a six-segment bar made from the SAME progress elements.
 *    Their text stays in the accessibility tree (visually hidden).
 *    States reuse the page's colours: completed #15803D, current #2563EB.
 * ================================================================== */
.brina-app-stepper-summary { display: none; }

@media (max-width: 767px) {
	body.page-id-3020 #brxe-xgpacv {
		padding-left: 20px;
		padding-right: 20px;
	}

	body.page-id-3020 .brina-app-stepper-summary {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		column-gap: 12px;
		row-gap: 2px;
		width: 100%;
		min-width: 0;
		grid-column: 1 / -1;
		margin-bottom: 12px;
	}
	body.page-id-3020 .brina-app-stepper-summary__count {
		order: 1;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.4;
		color: #2563EB;
		letter-spacing: 0.02em;
	}
	body.page-id-3020 .brina-app-stepper-summary__next {
		order: 2;
		font-size: 13px;
		line-height: 1.4;
		color: #64748B;
		text-align: right;
	}
	body.page-id-3020 .brina-app-stepper-summary__label {
		order: 3;
		flex: 1 0 100%;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.3;
		color: #111827;
	}

	body.page-id-3020 #brxe-pwbhmk {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		column-gap: 6px;
		row-gap: 0;
		padding: 18px 0 22px;
	}
	body.page-id-3020 #brxe-pwbhmk > [id^="brina-progress-"] {
		position: relative;
		width: auto;
		min-width: 0;
		height: 6px;
		padding: 0;
		border-radius: 999px;
		background-color: #E2E8F0;
		overflow: hidden;
	}
	body.page-id-3020 #brxe-pwbhmk > .brina-progress-completed { background-color: #15803D; }
	body.page-id-3020 #brxe-pwbhmk > .brina-progress-current { background-color: #2563EB; }
	/* Keep the per-step text for assistive technology; hide it visually. */
	body.page-id-3020 #brxe-pwbhmk > [id^="brina-progress-"] > * {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	/* Form: desktop 2-column field grids and calc(50% - 8px) fields → one column. */
	body.page-id-3020 #brxe-wihptd .brx-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	body.page-id-3020 #brxe-wihptd .brx-grid > * { min-width: 0; }
	body.page-id-3020 #brxe-cpluji, body.page-id-3020 #brxe-kedafw,
	body.page-id-3020 #brxe-adosij, body.page-id-3020 #brxe-dnkucq,
	body.page-id-3020 #brxe-rwpzvd,
	body.page-id-3020 #brxe-lpqxfd, body.page-id-3020 #brxe-jdlbxm,
	body.page-id-3020 #brxe-ftnncd, body.page-id-3020 #brxe-pjindd,
	body.page-id-3020 #brxe-irttld, body.page-id-3020 #brxe-ipfdfd,
	body.page-id-3020 #brxe-mfmrha, body.page-id-3020 #brxe-bwuwju {
		width: 100%;
	}
	body.page-id-3020 #brxe-xfgknf, body.page-id-3020 #brxe-qnesri,
	body.page-id-3020 #brxe-ikqdru, body.page-id-3020 #brxe-rfwfms,
	body.page-id-3020 #brxe-xuucgd, body.page-id-3020 #brxe-ubiuel,
	body.page-id-3020 #brxe-yncyzc, body.page-id-3020 #brxe-tjjkzt,
	body.page-id-3020 #brxe-gicwwh, body.page-id-3020 #brxe-gdkobt,
	body.page-id-3020 #brxe-gzyhdg {
		flex-wrap: wrap;
		row-gap: 12px;
	}
	/* Step cards: 28px desktop padding → 20px. */
	body.page-id-3020 #brxe-uezyyy, body.page-id-3020 #brxe-ekrole,
	body.page-id-3020 #brxe-uaegfq, body.page-id-3020 #brxe-ndvjgu,
	body.page-id-3020 #brxe-dhygsq, body.page-id-3020 #brxe-bbqton {
		padding: 20px;
	}
	/* A 15%-wide button (≈50px on a phone). */
	body.page-id-3020 #brxe-aqsihg {
		width: auto;
		min-height: 44px;
	}
	/* Primary/secondary step buttons: 44px tap targets. */
	body.page-id-3020 #brxe-wihptd .bricks-button {
		min-height: 44px;
	}
}