/* =============================================================================
   Rental Filter Grid — Stylesheet
   ============================================================================= */

/* Font is loaded dynamically by PHP based on the Settings page selection. */

:root {
	--rfg-accent:        #2d1b69;
	--rfg-accent-hover:  #4338ca;
	--rfg-text:          #1a1a2e;
	--rfg-text-muted:    #6b7280;
	--rfg-text-light:    #9ca3af;
	--rfg-border:        #e5e7eb;
	--rfg-bg:            #ffffff;
	--rfg-bg-page:       #f9fafb;
	--rfg-radius:        12px;
	--rfg-sidebar-width: 260px;
	--rfg-gap:           24px;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.rfg-wrapper {
	display:     flex;
	gap:         var(--rfg-gap);
	align-items: flex-start;
	font-family: 'Fredoka', sans-serif;
	font-weight: 400;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.rfg-sidebar {
	flex:          0 0 var(--rfg-sidebar-width);
	width:         var(--rfg-sidebar-width);
	background:    var(--rfg-bg);
	border:        1px solid var(--rfg-border);
	border-radius: var(--rfg-radius);
	padding:       20px 18px;
	position:      sticky;
	top:           90px;   /* adjust if your header height differs */
	max-height:    calc(100vh - 110px);
	overflow-y:    auto;   /* scrollbar only appears when content overflows */
}

.rfg-sidebar-header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   16px;
}

.rfg-sidebar-heading {
	font-family: 'Fredoka', sans-serif;
	font-size:   1.25rem;
	font-weight: 600;
	color:       var(--rfg-text);
	margin:      0;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.rfg-clear-all {
	background:            none;
	border:                none;
	padding:               0;
	cursor:                pointer;
	font-family:           'Fredoka', sans-serif;
	font-size:             0.875rem;
	font-weight:           500;
	color:                 var(--rfg-accent);
	text-decoration:       underline;
	text-underline-offset: 2px;
}

.rfg-clear-all:hover {
	color: var(--rfg-accent-hover);
}

/* ── Filter sections ─────────────────────────────────────────────────────── */

.rfg-filter-section {
	border-top: 1px solid var(--rfg-border);
	padding:    8px 0;
}

.rfg-filter-section:first-of-type {
	border-top: none;
}

.rfg-section-toggle {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	width:           100%;
	background:      none;
	border:          none;
	padding:         4px 0 10px;
	cursor:          pointer;
	font-family:     'Fredoka', sans-serif;
	font-size:       1rem;
	font-weight:     500;
	color:           var(--rfg-text);
	text-align:      left;
	line-height:     1.3;
	gap:             10px;
}

.rfg-section-toggle:hover,
.rfg-section-toggle:focus {
	color:      var(--rfg-accent);
	background: transparent;
}

/* Icon badge */
.rfg-tax-icon {
	flex-shrink:   0;
	width:         32px;
	height:        32px;
	border-radius: 8px;
	display:       flex;
	align-items:   center;
	justify-content: center;
}

/* Label fills remaining space between icon and chevron */
.rfg-tax-label {
	flex: 1;
}

.rfg-chevron {
	flex-shrink: 0;
	color:       var(--rfg-text-muted);
	transition:  transform 0.2s ease;
}

.rfg-toggle-closed .rfg-chevron {
	transform: rotate(180deg);
}

/* Collapsed state */
.rfg-section-body.rfg-section-collapsed {
	display: none;
}

/* ── Checkboxes ──────────────────────────────────────────────────────────── */

.rfg-section-body {
	padding-bottom: 4px;
}

.rfg-checkbox-label {
	display:     flex;
	align-items: center;
	gap:         8px;
	padding:     5px 0;
	cursor:      pointer;
	font-family: 'Fredoka', sans-serif;
	font-size:   0.9375rem;
	font-weight: 400;
	color:       var(--rfg-text);
	line-height: 1.3;
	user-select: none;
}

.rfg-checkbox-label:hover {
	color: var(--rfg-accent);
}

.rfg-checkbox {
	width:        15px;
	height:       15px;
	flex-shrink:  0;
	accent-color: var(--rfg-accent);
	cursor:       pointer;
}

.rfg-term-name {
	flex: 1;
}

.rfg-term-count {
	color:     var(--rfg-text-light);
	font-size: 0.875rem;
}

/* Hierarchical child term indentation */
.rfg-child-terms {
	padding-left: 20px;
}

.rfg-child-terms .rfg-child-terms {
	padding-left: 16px;
}

/* ── Main content area ───────────────────────────────────────────────────── */

.rfg-main {
	flex:      1;
	min-width: 0;
}

.rfg-results-header {
	font-family:   'Fredoka', sans-serif;
	font-size:     0.9375rem;
	font-weight:   400;
	color:         var(--rfg-text-muted);
	margin-bottom: 16px;
	margin-top:    0;
}

.rfg-results-header strong {
	color:       var(--rfg-text);
	font-weight: 600;
}

/* ── Card grid ───────────────────────────────────────────────────────────── */

.rfg-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap:                   20px;
	transition:            opacity 0.2s ease;
}

.rfg-grid.rfg-loading {
	opacity:        0.45;
	pointer-events: none;
}

/* ── Rental card ─────────────────────────────────────────────────────────── */

.rfg-card {
	background:     var(--rfg-bg);
	border:         1px solid var(--rfg-border);
	border-radius:  var(--rfg-radius);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	transition:     box-shadow 0.2s ease, transform 0.2s ease;
}

.rfg-card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
	transform:  translateY(-2px);
}

/* Image area — user's version */
.rfg-card-image-wrap {
	position:     relative;
	display:      flex;
	aspect-ratio: 4 / 3;
	overflow:     hidden;
	background:   var(--rfg-bg);
}

.rfg-card-image {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.3s ease;
}

/* Placeholder shown when no image is available */
.rfg-card-placeholder {
	width:            100%;
	height:           100%;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	background:       #f3f4f6;
	color:            #d1d5db;
}

/* Price badge overlaid on image */
.rfg-card-price {
	position:        absolute;
	bottom:          10px;
	right:           10px;
	background:      rgba(45, 27, 105, 0.88);
	color:           #ffffff;
	font-family:     'Fredoka', sans-serif;
	font-size:       0.9rem;
	font-weight:     600;
	padding:         4px 12px;
	border-radius:   20px;
	backdrop-filter: blur(4px);
	letter-spacing:  0.02em;
}

/* Card body */
.rfg-card-body {
	padding:        16px;
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.rfg-card-title {
	margin:      0;
	font-family: 'Fredoka', sans-serif;
	font-size:   1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.rfg-card-title a {
	color:           var(--rfg-text);
	text-decoration: none;
}

.rfg-card-title a:hover {
	color: var(--rfg-accent);
}

/* Size meta line */
.rfg-card-size {
	margin:     0;
	font-size:  0.875rem;
	color:      var(--rfg-text-muted);
	font-style: italic;
}

/* Description */
.rfg-card-excerpt {
	margin:      0;
	font-size:   0.9rem;
	color:       var(--rfg-text-muted);
	line-height: 1.5;
	flex:        1;

	display:            -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

/* View Details link */
.rfg-card-link {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	font-family:     'Fredoka', sans-serif;
	font-size:       0.9375rem;
	font-weight:     500;
	color:           var(--rfg-accent);
	text-decoration: none;
	margin-top:      6px;
}

.rfg-card-link:hover {
	color:                 var(--rfg-accent-hover);
	text-decoration:       underline;
	text-underline-offset: 2px;
}

/* ── No results ──────────────────────────────────────────────────────────── */

.rfg-no-results {
	grid-column: 1 / -1;
	text-align:  center;
	color:       var(--rfg-text-muted);
	padding:     48px 0;
	font-size:   1rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.rfg-wrapper {
		flex-direction: column;
	}

	.rfg-sidebar {
		flex:       unset;
		width:      100%;
		position:   static;
		max-height: none;
		overflow-y: visible;
	}

	.rfg-grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
}

@media (max-width: 480px) {
	.rfg-grid {
		grid-template-columns: 1fr 1fr;
	}
}