/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* =========================================================================
 * Card action button — homepage rental card loops.
 *
 * Scope: limited to the two homepage rental card loops so the surrounding
 * site (hero CTAs, filter buttons, other Bricks primary buttons) is not
 * affected.
 *
 * Structure (footer row per card):
 *   #brxe-cjweev  (All Rentals)       -> .brxe-ynbutr
 *   #brxe-znqaxd  (Filtered Rentals)  -> .brxe-rxclmv (AJAX; same 3 children)
 *   #brxe-xzrlxg / #brxe-iagtso (Buy) -> .brxe-jbutkl
 *   Children: .brxe-heading (title), .brxe-text (price), .brxe-button.
 *
 * Mobile: flex + wrap so the button can drop to full width.
 * Tablet/desktop (768px+): CSS grid — title in column 1 (spans rows), price
 * and button stacked in column 2 (price above button).
 * ========================================================================= */

#brxe-cjweev .brxe-ynbutr,
#brxe-znqaxd .brxe-rxclmv,
#brxe-xzrlxg .brxe-jbutkl,
#brxe-iagtso .brxe-jbutkl {
	flex-wrap: wrap;
	row-gap: 12px;
	column-gap: 12px;
	align-items: center;
}

#brxe-cjweev .brxe-ynbutr > .brxe-button,
#brxe-znqaxd .brxe-rxclmv > .brxe-button,
#brxe-xzrlxg .brxe-jbutkl > .brxe-button,
#brxe-iagtso .brxe-jbutkl > .brxe-button {
	flex: 0 0 100%;
	order: 10;
	margin-top: 4px;
}

#brxe-cjweev .brxe-ynbutr > .brxe-button,
#brxe-znqaxd .brxe-rxclmv > .brxe-button,
#brxe-xzrlxg .brxe-jbutkl > .brxe-button,
#brxe-iagtso .brxe-jbutkl > .brxe-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	height: auto;
	padding: 10px 18px;
	box-sizing: border-box;
	background-color: #ffd64f;
	color: #363636;
	border: 1px solid #ffd64f;
	border-radius: 6px;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.3px;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease-out,
	            border-color 0.15s ease-out,
	            color 0.15s ease-out,
	            transform 0.15s ease-out,
	            box-shadow 0.15s ease-out;
}

#brxe-cjweev .brxe-ynbutr > .brxe-button:hover,
#brxe-cjweev .brxe-ynbutr > .brxe-button:focus-visible,
#brxe-znqaxd .brxe-rxclmv > .brxe-button:hover,
#brxe-znqaxd .brxe-rxclmv > .brxe-button:focus-visible,
#brxe-xzrlxg .brxe-jbutkl > .brxe-button:hover,
#brxe-xzrlxg .brxe-jbutkl > .brxe-button:focus-visible,
#brxe-iagtso .brxe-jbutkl > .brxe-button:hover,
#brxe-iagtso .brxe-jbutkl > .brxe-button:focus-visible {
	background-color: #ffc71f;
	border-color: #ffc71f;
	color: #1f1f1f;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(255, 199, 31, 0.28);
	outline: none;
}

#brxe-cjweev .brxe-ynbutr > .brxe-button:active,
#brxe-znqaxd .brxe-rxclmv > .brxe-button:active,
#brxe-xzrlxg .brxe-jbutkl > .brxe-button:active,
#brxe-iagtso .brxe-jbutkl > .brxe-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(255, 199, 31, 0.25);
}

@media (max-width: 767px) {
	#brxe-cjweev .brxe-ynbutr > .brxe-button,
	#brxe-znqaxd .brxe-rxclmv > .brxe-button,
	#brxe-xzrlxg .brxe-jbutkl > .brxe-button,
	#brxe-iagtso .brxe-jbutkl > .brxe-button {
		min-height: 42px;
		padding: 9px 16px;
		font-size: 13.5px;
	}
}

@media (min-width: 768px) {
	#brxe-cjweev .brxe-ynbutr,
	#brxe-znqaxd .brxe-rxclmv,
	#brxe-xzrlxg .brxe-jbutkl,
	#brxe-iagtso .brxe-jbutkl {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		column-gap: 12px;
		row-gap: 10px;
		align-items: start;
	}

	#brxe-cjweev .brxe-ynbutr > .brxe-heading,
	#brxe-znqaxd .brxe-rxclmv > .brxe-heading,
	#brxe-xzrlxg .brxe-jbutkl > .brxe-heading,
	#brxe-iagtso .brxe-jbutkl > .brxe-heading {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: start;
	}

	#brxe-cjweev .brxe-ynbutr > .brxe-text,
	#brxe-znqaxd .brxe-rxclmv > .brxe-text,
	#brxe-xzrlxg .brxe-jbutkl > .brxe-text,
	#brxe-iagtso .brxe-jbutkl > .brxe-text {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		text-align: right;
	}

	#brxe-cjweev .brxe-ynbutr > .brxe-button,
	#brxe-znqaxd .brxe-rxclmv > .brxe-button,
	#brxe-xzrlxg .brxe-jbutkl > .brxe-button,
	#brxe-iagtso .brxe-jbutkl > .brxe-button {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
		align-self: start;
		width: auto;
		min-width: 7.5rem;
		max-width: 100%;
		flex: unset;
		order: unset;
		margin-top: 0;
	}
}

/* =========================================================================
 * Card action button color — homepage + buy archive loops.
 *
 * Scope: limited to the rental and buy card grids so only property-card
 * "Inquire" buttons change. Use !important because Bricks page CSS is printed
 * after this stylesheet in the document head.
 * ========================================================================= */

#brxe-cjweev .brxe-ynbutr > .brxe-button,
#brxe-znqaxd .brxe-rxclmv > .brxe-button,
#brxe-cjweev .brxe-block > .brxe-button,
#brxe-znqaxd .brxe-block > .brxe-button,
#brxe-xzrlxg .brxe-block > .brxe-button,
#brxe-iagtso .brxe-block > .brxe-button {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
}

#brxe-cjweev .brxe-ynbutr > .brxe-button:hover,
#brxe-cjweev .brxe-ynbutr > .brxe-button:focus-visible,
#brxe-znqaxd .brxe-rxclmv > .brxe-button:hover,
#brxe-znqaxd .brxe-rxclmv > .brxe-button:focus-visible,
#brxe-cjweev .brxe-block > .brxe-button:hover,
#brxe-cjweev .brxe-block > .brxe-button:focus-visible,
#brxe-znqaxd .brxe-block > .brxe-button:hover,
#brxe-znqaxd .brxe-block > .brxe-button:focus-visible,
#brxe-xzrlxg .brxe-block > .brxe-button:hover,
#brxe-xzrlxg .brxe-block > .brxe-button:focus-visible,
#brxe-iagtso .brxe-block > .brxe-button:hover,
#brxe-iagtso .brxe-block > .brxe-button:focus-visible {
	background-color: #1f1f1f !important;
	color: #ffffff !important;
	border-color: #1f1f1f !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28) !important;
}

#brxe-cjweev .brxe-ynbutr > .brxe-button:active,
#brxe-znqaxd .brxe-rxclmv > .brxe-button:active,
#brxe-cjweev .brxe-block > .brxe-button:active,
#brxe-znqaxd .brxe-block > .brxe-button:active,
#brxe-xzrlxg .brxe-block > .brxe-button:active,
#brxe-iagtso .brxe-block > .brxe-button:active {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}