/*
 * MotoPress Hotel Booking (Lite) — theme override styles.
 *
 * Loaded AFTER the plugin CSS so these win. We restyle the plugin's output
 * (attributes, price, availability calendar, booking form, search) to match the
 * Halkidiki4Villas design — WITHOUT changing any booking/calendar logic.
 *
 * Class names verified against motopress-hotel-booking-lite templates.
 */

/* ============================================================
   AVAILABILITY SEARCH  (homepage hero: [mphb_availability_search])
   ============================================================ */
.mphb_sc_search-wrapper,
.mphb-search-form { font-family: var(--f-sans); }
/* Plum Guide-style segmented search bar: a solid white pill of segments, each
   with a bold label + grey value, hairline dividers, a hover highlight, and a
   rounded gold Search button. Touch targets >=44px; visible focus (a11y). */
.search-bar .mphb-search-form,
.search-bar .mphb_sc_search-wrapper form {
	display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
}
.search-bar .mphb-search-form .mphb-input-wrapper {
	flex: 1 1 150px; display: flex; flex-direction: column; gap: 2px; justify-content: center;
	padding: 12px 24px; border-right: 1px solid var(--line); text-align: left;
	border-radius: 14px; min-height: 56px; transition: background .15s ease; cursor: pointer;
}
.search-bar .mphb-search-form .mphb-input-wrapper:hover { background: var(--paper-2); }
.search-bar .mphb-search-form .mphb-input-wrapper:last-of-type { border-right: none; }
.search-bar .mphb-search-form label {
	font-size: .82rem; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none;
}
.search-bar .mphb-search-form input,
.search-bar .mphb-search-form select {
	background: transparent; border: none; border-radius: 0; color: var(--ink-soft);
	padding: 0; font: inherit; font-size: .96rem; cursor: pointer; width: 100%;
}
.search-bar .mphb-search-form input::placeholder { color: var(--ink-soft); }
.search-bar .mphb-search-form input:focus,
.search-bar .mphb-search-form select:focus { outline: none; }
.search-bar .mphb-search-form .mphb-input-wrapper:focus-within { background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--gold); }
.search-bar .mphb-search-form button[type="submit"],
.search-bar .mphb_sc_search-wrapper button {
	align-self: center; margin: 5px 6px; min-height: 52px; min-width: 52px; padding: 0 2rem;
	background: var(--gold); color: #1C1710; border: none; border-radius: 14px;
	font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: background .2s ease, transform .15s ease;
	touch-action: manipulation;
}
.search-bar .mphb-search-form button[type="submit"]:hover,
.search-bar .mphb_sc_search-wrapper button:hover { background: #8F6620; transform: translateY(-1px); }
@media (max-width: 760px) {
	.search-bar .mphb-search-form .mphb-input-wrapper { flex-basis: 100%; border-right: none; border-bottom: 1px solid var(--line); }
	.search-bar .mphb-search-form .mphb-input-wrapper:last-of-type { border-bottom: none; }
	.search-bar .mphb-search-form button[type="submit"] { width: calc(100% - 12px); }
}

/* ============================================================
   ATTRIBUTES / DETAILS  (Features & amenities section)
   ul.mphb-single-room-type-attributes > li.mphb-room-type-*
   ============================================================ */
.mphb-single-room-type-attributes {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px;
}
.mphb-single-room-type-attributes > li {
	display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
	padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink);
}
.mphb-single-room-type-attributes .mphb-attribute-title {
	font-weight: 600; color: var(--ink-soft);
}
.mphb-single-room-type-attributes .mphb-attribute-value { color: var(--ink); }
/* Amenities/categories often list many chips — let them wrap nicely */
.mphb-room-type-facilities,
.mphb-room-type-categories { grid-column: 1 / -1; }

/* ============================================================
   GALLERY  (MotoPress renders a WP [gallery]; force it into our grid)
   ============================================================ */
.villa-gallery .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.villa-gallery .gallery-item { margin: 0 !important; width: auto !important; float: none !important; }
.villa-gallery .gallery-icon {
	aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--paper-2); margin: 0;
}
.villa-gallery .gallery-icon a { display: block; width: 100%; height: 100%; }
.villa-gallery .gallery-icon img {
	width: 100% !important; height: 100% !important; object-fit: cover;
	border: none !important; transition: transform .5s ease;
}
.villa-gallery .gallery-item:hover .gallery-icon img { transform: scale(1.05); }
.villa-gallery .gallery-caption { display: none; }
@media (max-width: 900px) { .villa-gallery .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .villa-gallery .gallery { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   PRICE  (Prices section)
   ============================================================ */
.mphb-price { font-family: var(--f-serif); font-size: 1.5rem; color: var(--ink); font-weight: 600; }
.mphb-price .mphb-price-period,
.mphb-price-text { color: var(--ink-soft); font-size: .95rem; font-family: var(--f-sans); font-weight: 400; }
.mphb-price-breakdown-wrapper { color: var(--ink-soft); font-size: .95rem; }

/* ============================================================
   AVAILABILITY CALENDAR  (jQuery datepick inline calendar)
   Neutralise the plugin's dark datepicker theme and re-skin to our palette.
   Tip: also set a LIGHT calendar theme in
   MotoPress → Settings → Rooms/Calendar (e.g. "Light green" or "Minimal").
   ============================================================ */
.villa-availability .mphb-datepick,
.villa-availability .datepick { border: none; background: transparent; font-family: var(--f-sans); width: 100%; }

/* Header bar (month nav) */
.villa-availability .datepick-month-header,
.villa-availability .mphb-datepick .datepick-month-header {
	background: var(--sea) !important; color: #fff !important;
	border: none !important; border-radius: 10px 10px 0 0; padding: 10px !important;
}
.villa-availability .datepick-month-header select { color: var(--ink); background: var(--paper); border-radius: 6px; }
.villa-availability .datepick-cmd,
.villa-availability a.datepick-cmd { color: #fff !important; text-decoration: none; }

/* Month tables */
.villa-availability .datepick-month { border: 1px solid var(--line); border-top: none; background: var(--paper); }
.villa-availability .datepick-month table { border-collapse: collapse; width: 100%; }
.villa-availability .datepick-month th {
	color: var(--ink-soft); font-weight: 600; font-size: .72rem; text-transform: uppercase;
	padding: 8px 0; background: var(--paper-2);
}
.villa-availability .datepick-month td { border: 1px solid var(--line); padding: 0; }
.villa-availability .datepick-month td a,
.villa-availability .datepick-month td span {
	display: block; padding: 7px 0 6px; text-align: center; font-variant-numeric: tabular-nums;
	color: var(--ink);
}
/* Booked / unavailable days */
.villa-availability .mphb-date-unavailable span,
.villa-availability td.datepick-unselectable span {
	background: color-mix(in srgb, #9c4a40 16%, transparent);
	color: #b25b50; text-decoration: line-through;
}
/* Available days */
.villa-availability .mphb-date-available a {
	background: color-mix(in srgb, var(--sea) 10%, transparent); color: var(--sea-deep);
}
.villa-availability .mphb-date-available a:hover { background: color-mix(in srgb, var(--sea) 22%, transparent); }
/* Per-day price shown lighter under the date number */
.villa-availability .datepick-month td .mphb-price,
.villa-availability .datepick-month td .price,
.villa-availability .mphb-calendar-price {
	display: block; font-size: .6rem; font-weight: 400; line-height: 1.1; margin-top: 2px;
	color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.villa-availability .mphb-date-available a .mphb-price { color: var(--sea-deep); }

/* ============================================================
   BOOKINGS RUN ONLY VIA THE BOOK NOW REQUEST FORM
   Hide MotoPress's own booking/checkout entry points wherever the plugin
   renders them (search results listings, shortcodes) so every path funnels
   to the villa page → Book now → request form.
   ============================================================ */
.mphb-booking-form,
.mphb-reserve-room-section,
.mphb-book-button,
.mphb_sc_checkout-form { display: none !important; }

/* ============================================================
   BOOKING / RESERVATION FORM  (Book this villa section)
   ============================================================ */
.mphb_sc_checkout-form input,
.villa-book-form input, .villa-book-form select, .villa-book-form textarea {
	background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px;
	color: var(--ink); padding: .7em .8em; font: inherit; width: 100%; box-sizing: border-box;
}
.villa-book-form label { display: block; font-weight: 600; color: var(--ink); font-size: .82rem; margin-bottom: 4px; }
.villa-book-form p { margin: 0 0 12px; }
.villa-book-form button,
.villa-book-form input[type="submit"],
.mphb-book-button, .mphb_sc_checkout-form button[type="submit"] {
	background: var(--gold); color: #1C1710; border: none; border-radius: 14px; width: 100%;
	font-weight: 600; padding: .95em 1.6em; cursor: pointer; transition: background .2s ease;
	touch-action: manipulation; min-height: 52px; margin-top: 4px;
}
.villa-book-form button:hover,
.mphb-book-button:hover { background: #8F6620; }
/* Price breakdown / totals inside the card */
.villa-book-form .mphb-price, .villa-book-form .mphb-booking-details, .villa-book-form .mphb-total-price {
	color: var(--ink);
}

/* Old placeholder look (kept for pages where the plugin block is truly empty) */
.mphb-mount {
	border: 1px dashed var(--line); border-radius: var(--radius); padding: 26px;
	text-align: center; color: var(--ink-soft); background: var(--paper); font-size: .95rem;
}

@media (max-width: 640px) {
	.mphb-single-room-type-attributes { grid-template-columns: 1fr; }
}