/* Reuses the ParaPar theme's CSS variables (--pp-red, --pp-ink, etc.)
   where available, with safe fallbacks so this also works standalone. */
:root {
	--hr-red: var(--pp-red, #FA3131);
	--hr-red-dark: var(--pp-red-dark, #DA1F1F);
	--hr-ink: var(--pp-ink, #23262A);
	--hr-slate: var(--pp-slate, #4A5157);
	--hr-mist: var(--pp-mist, #EEF0EF);
	--hr-line: var(--pp-line, #DEDBD3);
	--hr-font-display: var(--pp-font-display, 'Space Grotesk', sans-serif);
	--hr-font-body: var(--pp-font-body, 'Inter', sans-serif);
	--hr-font-mono: var(--pp-font-mono, 'Space Mono', monospace);
}

.parapar-hr-page { font-family: var(--hr-font-body); color: var(--hr-ink); }
.parapar-hr-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Hero */
.parapar-hr-hero { position: relative; }
.parapar-hr-hero img { width: 100%; max-height: 560px; object-fit: cover; }
.parapar-hr-hero-overlay {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
	padding: 60px 24px 32px; color: #fff;
}
.parapar-hr-hero-overlay h1 { color: #fff; font-family: var(--hr-font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 6px; }
.parapar-hr-hero-tagline { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0; white-space: pre-line; }
.parapar-hr-cta-link {
	display: inline-block; margin-top: 16px; background: var(--hr-red); color: #fff;
	font-family: var(--hr-font-display); font-weight: 600; padding: 12px 24px; border-radius: 6px;
}
.parapar-hr-cta-link:hover { background: var(--hr-red-dark); }

.parapar-hr-summary-line {
	background: var(--hr-mist); font-family: var(--hr-font-mono); font-size: 0.85rem;
	padding: 14px 24px; text-align: center;
}

/* Sections */
.parapar-hr-section { padding: 56px 24px; }
.parapar-hr-section h2 { font-family: var(--hr-font-display); font-size: 1.6rem; margin: 0 0 16px; }
.parapar-hr-host-sign { font-family: var(--hr-font-display); font-style: italic; margin-top: 16px; }

/* Gallery */
.parapar-hr-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.parapar-hr-gallery img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; }

/* Lightbox */
.parapar-hr-lightbox {
	position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9999;
	display: none; align-items: center; justify-content: center;
}
.parapar-hr-lightbox.is-open { display: flex; }
.parapar-hr-lightbox img { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: 4px; }
.parapar-hr-lightbox-close {
	position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff;
	font-size: 2rem; line-height: 1; cursor: pointer;
}
.parapar-hr-lightbox-prev, .parapar-hr-lightbox-next {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: rgba(255,255,255,0.15); border: none; color: #fff; width: 48px; height: 48px;
	border-radius: 50%; font-size: 1.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.parapar-hr-lightbox-prev:hover, .parapar-hr-lightbox-next:hover { background: rgba(255,255,255,0.3); }
.parapar-hr-lightbox-prev { left: 20px; }
.parapar-hr-lightbox-next { right: 20px; }
.parapar-hr-lightbox-counter {
	position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
	color: rgba(255,255,255,0.75); font-family: var(--hr-font-mono); font-size: 0.85rem;
}
@media (max-width: 600px) {
	.parapar-hr-lightbox-prev, .parapar-hr-lightbox-next { width: 38px; height: 38px; font-size: 1.4rem; }
	.parapar-hr-lightbox-prev { left: 8px; } .parapar-hr-lightbox-next { right: 8px; }
}

/* Amenities / practical info lists */
.parapar-hr-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.parapar-hr-list li { padding-left: 22px; position: relative; }
.parapar-hr-list li::before { content: '✓'; position: absolute; left: 0; color: var(--hr-red); font-weight: 700; }

/* Map */
.parapar-hr-map iframe { width: 100%; height: 360px; border: 0; border-radius: 8px; }
.parapar-hr-location-list { list-style: none; padding: 0; margin-bottom: 20px; }
.parapar-hr-location-list li { padding: 6px 0; border-bottom: 1px solid var(--hr-line); }

/* Calendar */
.parapar-hr-booking-section { background: var(--hr-mist); }
.parapar-hr-booking-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 780px) { .parapar-hr-booking-grid { grid-template-columns: 1fr; } }

#parapar-hr-calendar { background: #fff; border-radius: 10px; padding: 20px; border: 1px solid var(--hr-line); }
.parapar-hr-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.parapar-hr-cal-header button { background: var(--hr-mist); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; }
.parapar-hr-cal-month { font-family: var(--hr-font-display); font-weight: 600; }
.parapar-hr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.parapar-hr-cal-heading { text-align: center; font-family: var(--hr-font-mono); font-size: 0.7rem; color: var(--hr-slate); padding-bottom: 6px; }
.parapar-hr-cal-day {
	aspect-ratio: 1; border: none; background: var(--hr-mist); border-radius: 6px; cursor: pointer;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	font-family: var(--hr-font-body); font-size: 0.8rem;
}
.parapar-hr-cal-day .price { font-family: var(--hr-font-mono); font-size: 0.6rem; color: var(--hr-slate); }
.parapar-hr-cal-day:hover:not(:disabled) { background: #fde0e0; }
.parapar-hr-cal-day.is-past, .parapar-hr-cal-day.is-booked { background: transparent; color: #ccc; cursor: not-allowed; text-decoration: line-through; }
.parapar-hr-cal-day.is-checkin, .parapar-hr-cal-day.is-checkout { background: var(--hr-red); color: #fff; }
.parapar-hr-cal-day.is-checkin .price, .parapar-hr-cal-day.is-checkout .price { color: rgba(255,255,255,0.85); }
.parapar-hr-cal-day.is-in-range { background: #fde0e0; }
.parapar-hr-cal-legend { display: flex; gap: 16px; margin-top: 14px; font-size: 0.78rem; color: var(--hr-slate); }
.parapar-hr-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.parapar-hr-cal-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.parapar-hr-cal-legend .dot.available { background: var(--hr-mist); border: 1px solid var(--hr-line); }
.parapar-hr-cal-legend .dot.booked { background: #ddd; }

/* Booking summary + form */
#parapar-hr-summary { background: #fff; border-radius: 10px; padding: 20px; border: 1px solid var(--hr-line); margin-bottom: 20px; }
.parapar-hr-summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-family: var(--hr-font-mono); font-size: 0.85rem; }
.parapar-hr-summary-total { border-top: 1px solid var(--hr-line); margin-top: 6px; padding-top: 10px; font-weight: 700; font-size: 1rem; }
.parapar-hr-warning { color: var(--hr-red); }
.parapar-hr-min-stay { color: var(--hr-slate); font-size: 0.85rem; }

#parapar-hr-booking-form { background: #fff; border-radius: 10px; padding: 20px; border: 1px solid var(--hr-line); }
#parapar-hr-booking-form h3 { font-family: var(--hr-font-display); margin-top: 0; }
#parapar-hr-booking-form input, #parapar-hr-booking-form textarea {
	width: 100%; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--hr-line); border-radius: 6px; box-sizing: border-box; font-size: 14px;
}
.parapar-hr-submit {
	background: var(--hr-red); color: #fff; border: none; font-family: var(--hr-font-display); font-weight: 600;
	padding: 13px 26px; border-radius: 6px; cursor: pointer; width: 100%;
}
.parapar-hr-submit:hover:not(:disabled) { background: var(--hr-red-dark); }
.parapar-hr-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.parapar-hr-form-response { margin-top: 10px; font-size: 0.85rem; }
.parapar-hr-form-response.success { color: #1a7f37; }
.parapar-hr-form-response.error { color: var(--hr-red); }
.parapar-hr-fine-print { font-size: 0.78rem; color: var(--hr-slate); margin-top: 10px; }