/* ==========================================================================
   Great Dubai - card rails and card design
   ==========================================================================
   Lifted out of general_modul/frontend/index.blade.php, where it lived in a
   page <style> block. The card partials it styles (car_card_4,
   property_card_2_home, job_card_home, classified_card_3_home) are included by
   other pages too, and those pages rendered them unstyled - the per-emirate
   page at /uae/{slug} showed full-width borderless property cards because
   .prop-grid and .pcard were only ever declared on the homepage.

   Any page that renders those partials should link this file.
   ========================================================================== */

/* ============================================
   PROPERTY CARD (Main Sample Design)
   ============================================ */

/* ============================================
   ROOT VARIABLES (Required for all styles)
   ============================================ */
:root {
	--bd: #e2e8f0;
	/* Border color */
	--rl: 16px;
	/* Main card border radius */
	--rp: 20px;
	/* Badge & tag radius */
	--sh2: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
	/* Card hover shadow */
	--ga: #6b21a8;
	/* Price color (purple) */
	--ink: #1e293b;
	/* Text / title color */
	--muted: #94a3b8;
	/* Subtle icons */
	--muted2: #64748b;
	/* Sub-text & location color */
	--danger: #ef4444;
	/* Favorite heart active color */
	--indigo: #4338ca;
	/* Amenities text color */
	--grad: linear-gradient(135deg, #6366f1, #a855f7);
	/* Featured gradient */
}

/* ============================================
   CARD RAILS
   Desktop shows five across. Under 768px the row turns into a horizontal
   snap-scrolling rail, so a section costs one card's height instead of
   four stacked ones - the home page was nearly 11,000px tall.
   ============================================ */
.gd-rail {
	display: grid !important;
	/* !important: .prop-grid is declared later in this sheet with
	   auto-fill columns and would otherwise win the tie. */
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: 18px;
	margin-left: 0;
	margin-right: 0;
}

/* The cards carry their own bootstrap column classes; neutralise them
   so the grid decides the widths. */
.gd-rail > * {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	margin-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Below 1200 the rail scrolls sideways instead of wrapping. Any column
   count that does not divide five leaves an orphan on its own row, and
   the whole point is to stop these sections eating vertical space. */
@media (max-width: 1199.98px) {
	.gd-rail {
		display: flex !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 12px;
		/* bleed to the screen edges so the next card peeks in */
		margin-left: -12px;
		margin-right: -12px;
		padding: 2px 12px 12px;
		scroll-padding-left: 12px;
		scrollbar-width: none;
	}

	.gd-rail::-webkit-scrollbar {
		display: none;
	}

	.gd-rail > * {
		flex: 0 0 62% !important;
		max-width: 222px !important;
		scroll-snap-align: start;
	}

	/* Shorter, smaller cards on the rail - the media and the inner
	   padding are what made them tall. */
	.gd-rail .car-top-section {
		height: 124px !important;
	}

	.gd-rail .car-top-section img {
		height: 124px !important;
		object-fit: cover;
	}

	.gd-rail .car-content {
		padding: 11px 12px !important;
	}

	.gd-rail .pcard-thumb {
		height: 118px !important;
	}

	.gd-rail .pcard-body {
		padding: 10px 12px !important;
	}

	.gd-rail .pcard-actions {
		padding: 0 12px 12px !important;
		gap: 6px;
	}

	.gd-rail .pcard-actions .btn {
		padding: 8px 6px;
		font-size: 11.5px;
	}

	.gd-rail-wrap.is-scrollable .gd-rail-nav {
		display: inline-flex;
	}
}

/* ---- section spacing --------------------------------------------
   Every card section is `<section class="fullwidths my-5" style="margin-top:30px">`.
   Bootstrap's my-5 is 3rem !important, so it beat the inline 30px the
   markup actually asks for and left 48px of dead space above each
   heading. Set it once, here. */
section.fullwidths.my-5 {
	/* The page wrapper stops adjacent margins collapsing, so these add
	   up - only the top margin sets the gap between two sections. */
	margin-top: 26px !important;
	margin-bottom: 0 !important;
}

/* The "View more" block ends each section with mb-5. The section has no
   bottom padding, so that 48px collapsed straight out of it and set the
   gap instead of the section's own margin. */
/* Same story for the auction block, which is a section in its own right
   and also ends with an mb-5 "View more". */
section.fullwidths.my-5 > .container-fluid > *:last-child,
section.fullwidths.my-5 > *:last-child,
section.container-fluid.my-4 > *:last-child,
section.container-fluid.my-4 > .row > *:last-child {
	margin-bottom: 0 !important;
}

section.container-fluid.my-4 {
	margin-bottom: 0 !important;
}

@media (max-width: 767.98px) {
	section.fullwidths.my-5 {
		margin-top: 18px !important;
	}
}

/* ===== One card, four contexts ===================================
   Every card on the home page is built to the property card's spec so
   the page reads as one system. Measured off .pcard:

     shell    white, 1px #e2e8f0, 16px radius
     media    178px tall, badge absolute at 10/10
     badge    rgba(26,138,75,.9), #fff, 10.5px/700, 4px 9px, pill
     body     padding 14px 15px
     price    #6b21a8, 20px/800, 4px below; suffix #64748b 12.5px/500
     title    #1e293b, 13.5px/600, line-height 1.4, two lines
     meta     #64748b, 12px
     chips    #eef1fa on #4338ca, 11px/600, 3px 8px, pill
     actions  8px gap
     buttons  12.5px/700, 9px 12px, 10px radius; outline + gradient
   ================================================================= */

/* ---- shell ------------------------------------------------------- */
.gd-rail .new-car-card,
.gd-rail .job-card,
section.container-fluid.my-4 .car-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	overflow: hidden;
	box-shadow: none;
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.gd-rail .new-car-card:hover,
.gd-rail .job-card:hover,
section.container-fluid.my-4 .car-card:hover {
	border-color: #cbd5e1 !important;
	box-shadow: 0 10px 24px -12px rgba(16, 24, 40, 0.22);
	transform: translateY(-2px);
}

/* ---- media ------------------------------------------------------- */
.gd-rail .car-top-section,
section.container-fluid.my-4 .car-card .card-auction-img {
	height: 178px !important;
	background: #f1f5f9 !important;
	border-radius: 15px 15px 0 0 !important;
	overflow: hidden;
}

.gd-rail .car-image-wrapper,
.gd-rail .car-image {
	width: 100% !important;
	height: 100% !important;
}

/* Contain, not cover: the placeholder logo was being cropped to
   "reatDuba" and running past the card edge. */
.gd-rail .car-image {
	object-fit: contain !important;
	padding: 10px;
}

section.container-fluid.my-4 .car-card .card-auction-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 10px;
}

/* ---- badge ------------------------------------------------------- */
.gd-rail .car-badge,
section.container-fluid.my-4 .car-card .ribbon {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	padding: 4px 9px !important;
	border-radius: 20px !important;
	background: rgba(26, 138, 75, 0.9) !important;
	color: #ffffff !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	/* the auction ribbon was a rotated banner hanging off the corner */
	transform: none !important;
	box-shadow: none !important;
}

section.container-fluid.my-4 .car-card .ribbon.bg-danger {
	background: rgba(185, 28, 28, 0.92) !important;
}

/* ---- body -------------------------------------------------------- */
.gd-rail .car-content,
.gd-rail .job-card,
section.container-fluid.my-4 .car-card .utf-listing-content {
	padding: 14px 15px !important;
}

/* Price first, exactly like the property card. */
.gd-rail .car-content {
	display: flex;
	flex-direction: column;
}

.gd-rail .car-price-row {
	order: 1;
	margin: 0 0 4px !important;
}

.gd-rail .car-title-link {
	order: 2;
}

.gd-rail .car-specs-pills {
	order: 3;
	margin: 0 0 10px !important;
}

.gd-rail .car-actions {
	order: 4;
	margin-top: auto;
}

/* ---- price ------------------------------------------------------- */
.gd-rail .price-main,
section.container-fluid.my-4 .car-card .text-center .price-text {
	color: #6b21a8 !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	margin: 0 !important;
}

.gd-rail .price-main .period,
section.container-fluid.my-4 .car-card .text-center .price-text span {
	color: #64748b !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* ---- title ------------------------------------------------------- */
.gd-rail .car-title,
.gd-rail .job-title,
section.container-fluid.my-4 .car-card .new-car-title {
	color: #1e293b !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	margin: 0 0 6px !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: left !important;
}

/* ---- meta line --------------------------------------------------- */
.gd-rail .job-meta-location,
section.container-fluid.my-4 .car-card .price-text {
	color: #64748b !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

section.container-fluid.my-4 .car-card .price-text span {
	color: #94a3b8 !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ---- chips ------------------------------------------------------- */
.gd-rail .spec-pill,
.gd-rail .job-tag {
	background: #eef1fa !important;
	border: none !important;
	color: #4338ca !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 3px 8px !important;
	border-radius: 20px !important;
}

.gd-rail .job-tag.urgent {
	background: #fef2f2 !important;
	color: #b91c1c !important;
}

/* ---- actions ----------------------------------------------------- */
.gd-rail .car-actions {
	display: flex !important;
	gap: 8px !important;
	padding: 0 !important;
}

/* One button size for every card. Height is explicit rather than
   padding-derived: the car icon buttons carry their own 44px box and
   stretched the "Book now" beside them to match, so the car buttons
   came out 13px taller than the property ones. */
.pcard-actions .btn,
.gd-rail .btn-book-now,
.gd-rail .btn-icon-box,
section.container-fluid.my-4 .car-card .new-btn-auc {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	height: 36px !important;
	min-height: 0 !important;
	padding: 0 12px !important;
	border-radius: 10px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pcard-actions,
.gd-rail .car-actions {
	align-items: center !important;
}

.gd-rail .btn-icon-box {
	width: 36px !important;
	padding: 0 !important;
}

.gd-rail .btn-book-now,
section.container-fluid.my-4 .car-card .new-btn-auc {
	flex: 1;
	background: linear-gradient(135deg, #7c3dae 0%, #2e4bbd 52%, #0164b6 100%) !important;
	border: none !important;
	color: #ffffff !important;
}

.gd-rail .btn-icon-box {
	flex: 0 0 auto;
	background: #ffffff !important;
	border: 1px solid #e4e8ef !important;
	color: #1f2a3b !important;
}

.gd-rail .btn-icon-box:hover {
	border-color: #7c3daf !important;
	color: #7c3daf !important;
}

.gd-rail .btn-book-now:hover,
section.container-fluid.my-4 .car-card .new-btn-auc:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(124, 61, 175, 0.45);
}

/* ---- job card: same anatomy, no media ---------------------------- */
.gd-rail .job-grid,
.gd-rail .job-card-link {
	height: 100%;
}

.gd-rail .job-card {
	display: flex;
	flex-direction: column;
}

.gd-rail .job-logo-wrapper {
	background: #f1f5f9;
	border-color: #e2e8f0;
	flex-shrink: 0;
}

.gd-rail .job-metadata {
	margin-top: auto;
	border-top: 1px solid #eef2f7;
	padding-top: 10px;
}

/* Location line and spec row, matched to .pcard-loc / .pcard-specs. */
.gd-rail .job-loc {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 10px;
	color: #64748b !important;
	font-size: 12px;
}

.gd-rail .job-loc svg {
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
}

.gd-rail .job-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 10px;
}

.gd-rail .job-specs span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #1e293b !important;
	font-size: 12.5px;
	font-weight: 600;
}

.gd-rail .job-specs svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
}

.gd-rail .job-tag.featured {
	background: rgba(26, 138, 75, 0.12) !important;
	color: #15803d !important;
}

.gd-rail .job-salary-sub {
	color: #64748b !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
}

.gd-rail .job-salary-na {
	color: #64748b !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

/* !important: the job partial sets `.job-card-link * { color: inherit
   !important }` to kill link blue, which also swallowed the price. */
.gd-rail .job-meta-salary {
	color: #6b21a8 !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
}

/* The footer is location | salary on one line; at 20px the salary needs
   the room, so the location gives way first. */
.gd-rail .job-meta-row {
	align-items: baseline;
}

@media (max-width: 991.98px) {
	.gd-rail .job-meta-salary {
		font-size: 17px !important;
	}
}

/* "AED 7,000" was breaking after "AED" in a 218px rail card. */
.gd-rail .job-meta-salary {
	white-space: nowrap;
}

@media (max-width: 460px) {
	.gd-rail .job-meta-salary {
		font-size: 15.5px !important;
	}
}

/* ---- auction spec block ------------------------------------------ */
section.container-fluid.my-4 .car-card .border-end,
section.container-fluid.my-4 .car-card .border-end-2 {
	border-color: #eef2f7 !important;
}

section.container-fluid.my-4 .car-card .utf-listing-content .row {
	align-items: flex-end;
}

/* The three bootstrap columns never fitted a ~290px card: the labels
   collided into "ODOMETERENGINE" and the bid ran past the card's right
   edge. Lay the specs out as a two column grid with the bid and button
   as a full width footer - the property card's shape. */
section.container-fluid.my-4 .car-card .utf-listing-content > .row {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 2px 12px;
	margin: 0 !important;
}

section.container-fluid.my-4 .car-card .utf-listing-content > .row > [class*="col-"] {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
	border: none !important;
}

section.container-fluid.my-4 .car-card .utf-listing-content > .row > .text-center {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px !important;
	border-top: 1px solid #eef2f7 !important;
	text-align: left !important;
}

/* Lift the inner row's two cells straight into that footer. */
section.container-fluid.my-4 .car-card .text-center > .row {
	display: contents;
}

section.container-fluid.my-4 .car-card .text-center > .row > [class*="col-"] {
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
}

section.container-fluid.my-4 .car-card .text-center .price-text {
	white-space: nowrap;
	font-size: 20px !important;
	text-align: left !important;
}

/* Equal height cards across the row. Scoped to the row that holds the
   cards - as a blanket rule it also turned each spec column into a flex
   row, which is what collided the labels into "ODOMETERENGINE". */
section.container-fluid.my-4 .gd-rail > [class*="col-"] {
	display: flex;
}

section.container-fluid.my-4 .car-card,
section.container-fluid.my-4 .car-card > .utf-listing-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

section.container-fluid.my-4 .car-card .utf-listing-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

section.container-fluid.my-4 .car-card .utf-listing-content > .row {
	margin-top: auto;
}

/* col-md-3 left the auction card 164px wide on a tablet and col-6 the
   same on a phone - far too narrow for its three column spec grid. */
/* Width is the rail's job now that the auction row is a .gd-rail. */

/* ---- "View more" rhythm -------------------------------------------
   The wrappers carry a mix of mb-5 / mt-3 mb-5, and the last-child rule
   above zeroes the bottom one - so the button sat right on the cards in
   the auction section and right on the footer at the end of the page.
   Let the button own its spacing so every section matches. */
.new-btn-index {
	display: inline-block;
	margin-top: 22px !important;
	margin-bottom: 22px !important;
}

/* Some wrappers add mt-3 on top of that, some do not, which is why the
   gap ran from 22px to 58px across the page. Zero them and let the
   button be the single source of the spacing. */
section.fullwidths.my-5 .col-md-12.mb-5,
section.container-fluid.my-4 .col-md-12.mb-5 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ---- rail arrows ------------------------------------------------ */

.gd-rail-wrap {
	position: relative;
}

.gd-rail-nav {
	position: absolute;
	top: 30%;
	transform: translateY(-50%);
	z-index: 5;
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #e4e8ef;
	border-radius: 50%;
	background: #ffffff;
	color: #2e4bbd;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(16, 24, 40, 0.18);
	transition: opacity 0.18s ease, visibility 0.18s ease, background-color 0.18s ease;
}

.gd-rail-nav svg {
	width: 16px;
	height: 16px;
}

.gd-rail-nav:active {
	background: #f3f5fa;
}

.gd-rail-nav.prev {
	left: -2px;
}

.gd-rail-nav.next {
	right: -2px;
}

.gd-rail-nav.is-off {
	opacity: 0;
	visibility: hidden;
}

/* ============================================
   PROPERTY GRID LAYOUT
   ============================================ */
.prop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 25px;
}

/* ============================================
   PROPERTY CARD CONTAINER
   ============================================ */
.pcard {
	background: #ffffff;
	border: 1px solid var(--bd);
	border-radius: var(--rl);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.pcard:hover {
	box-shadow: var(--sh2);
	transform: translateY(-3px);
}

.pcard.featured {
	border-color: rgba(124, 61, 175, .3);
	box-shadow: 0 0 0 2.5px rgba(124, 61, 175, .08);
}

/* ============================================
   THUMBNAIL & BADGES
   ============================================ */
.pcard-thumb {
	position: relative;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: linear-gradient(135deg, #E8E4F4, #DDE6F5);
}

.pcard-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.pcard:hover .pcard-thumb img {
	transform: scale(1.04);
}

.pcard-no-img {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #E8E4F4, #DDE6F5);
}

.pfeat-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--grad);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: var(--rp);
	z-index: 2;
}

.pcard-badge {
	position: absolute;
	font-size: 10.5px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: var(--rp);
	backdrop-filter: blur(4px);
	z-index: 2;
}

.pcard-badge--rent {
	top: 12px;
	left: 12px;
	background: #1e8e5a;
	color: #fff;
}

.pcard-badge--sale {
	top: 12px;
	left: 12px;
	background: #0f5db8;
	color: #fff;
}

.pcard-badge--install {
	top: 12px;
	left: 12px;
	background: #f4805a;
	color: #fff;
}

.pfav {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	backdrop-filter: blur(4px);
	z-index: 2;
	transition: background .2s ease;
}

.pfav svg {
	width: 15px;
	height: 15px;
	stroke: var(--muted);
	fill: none;
}

.pfav:hover svg {
	stroke: var(--danger);
}

.pfav.saved svg {
	stroke: var(--danger);
	fill: var(--danger);
}

/* ============================================
   BODY CONTENT
   ============================================ */
.pcard-body {
	padding: 16px 16px 12px;
	flex: 1;
}

.pcard-price {
	font-size: 20px;
	font-weight: 800;
	color: var(--ga);
	margin-bottom: 4px;
	letter-spacing: -.02em;
}

.pcard-price-sub {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--muted2);
	margin-left: 2px;
}

.pcard-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
}

.pcard-loc {
	font-size: 12px;
	color: var(--muted2);
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 12px;
}

.pcard-specs {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.pcard-specs span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink);
}

.pcard-specs svg {
	color: var(--muted2);
}

.pcard-amens {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.pamen {
	font-size: 11.5px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 12px;
	background: #f1f3f9;
	color: #475569;
}

/* ============================================
   PROPERTY CARD (Main Sample Design)
   ============================================ */
.prop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.pcard {
	background: #fff;
	border: 1px solid var(--bd);
	border-radius: var(--rl);
	overflow: hidden;
	transition: box-shadow .18s, transform .18s;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.pcard:hover {
	box-shadow: var(--sh2);
	transform: translateY(-2px);
}

.pcard.featured {
	border-color: rgba(124, 61, 175, .3);
	box-shadow: 0 0 0 2.5px rgba(124, 61, 175, .08);
}

.pcard-thumb {
	position: relative;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: linear-gradient(135deg, #E8E4F4, #DDE6F5);
}

.pcard-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s;
}

.pcard:hover .pcard-thumb img {
	transform: scale(1.04);
}

.pcard-no-img {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #E8E4F4, #DDE6F5);
}

.pfeat-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--grad);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: var(--rp);
}

.pcard-badge {
	position: absolute;
	font-size: 10.5px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: var(--rp);
	backdrop-filter: blur(4px);
}

.pcard-badge--rent {
	top: 10px;
	left: 10px;
	background: rgba(26, 138, 75, .9);
	color: #fff;
}

.pcard-badge--sale {
	top: 10px;
	left: 10px;
	background: rgba(15, 93, 184, .9);
	color: #fff;
}

.pcard-badge--install {
	top: 10px;
	left: 10px;
	background: rgba(244, 128, 90, .9);
	color: #fff;
}

.pfav {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	backdrop-filter: blur(4px);
}

.pfav svg {
	width: 15px;
	height: 15px;
	stroke: var(--muted);
	fill: none;
}

.pfav:hover svg {
	stroke: var(--danger);
}

.pfav.saved svg {
	stroke: var(--danger);
	fill: var(--danger);
}

.pcard-body {
	padding: 14px 15px;
	flex: 1;
}

.pcard-price {
	font-size: 20px;
	font-weight: 800;
	color: var(--ga);
	margin-bottom: 4px;
	letter-spacing: -.02em;
}

.pcard-price-sub {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--muted2);
	margin-left: 4px;
}

.pcard-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
}

.pcard-loc {
	font-size: 12px;
	color: var(--muted2);
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 10px;
}

.pcard-specs {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.pcard-specs span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink);
}

.pcard-specs svg {
	color: var(--muted2);
}

.pcard-amens {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.pamen {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: var(--rp);
	background: #EEF1FA;
	color: var(--indigo);
}

.pcard-actions {
	display: flex;
	gap: 8px;
	padding: 0 15px 14px;
}

.pcard-actions .btn {
	flex: 1;
	font-size: 12.5px;
}

/* The card markup asks for .btn-outline / .btn-grad, but those live in
   property.css which the home page never loads - so both buttons
   rendered as plain dark text on a transparent background. */
.pcard-actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 12px;
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pcard-actions .btn-outline {
	background: #ffffff;
	border: 1.5px solid #e4e8ef;
	color: #1f2a3b;
}

.pcard-actions .btn-outline:hover {
	border-color: #7c3daf;
	color: #7c3daf;
}

.pcard-actions .btn-grad {
	background: linear-gradient(135deg, #7c3dae 0%, #2e4bbd 52%, #0164b6 100%);
	color: #ffffff;
	box-shadow: 0 6px 16px -4px rgba(124, 61, 175, 0.4);
}

.pcard-actions .btn-grad:hover {
	box-shadow: 0 8px 20px -4px rgba(124, 61, 175, 0.5);
}

.pcard-actions .btn:hover {
	transform: translateY(-1px);
}

/* ---- property card actions ------------------------------------------------
   "Request Viewing" plus "Call Agent" need 269px; a card in a rail is 218-238px
   wide, so the pair used to run past the edge and get clipped. flex could not
   shrink them because a flex item's default min-width:auto floors it at
   min-content, and the labels are nowrap.

   Anywhere: let them shrink. In a rail: the secondary action keeps only its
   icon, which is the same shape the car card uses. */
.pcard-actions > .btn {
	min-width: 0;
}

.gd-rail .pcard-actions {
	gap: 6px !important;
}

.gd-rail .pcard-actions .pcard-btn-call {
	flex: 0 0 auto !important;
	width: 40px;
	padding-left: 0 !important;
	padding-right: 0 !important;
	gap: 0 !important;
}

.gd-rail .pcard-actions .pcard-btn-call .pcard-btn-label {
	display: none;
}

.gd-rail .pcard-actions .pcard-btn-view {
	flex: 1 1 auto !important;
	min-width: 0;
}

.gd-rail .pcard-actions .pcard-btn-view .pcard-btn-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}