/* Verfügbarkeitsabfrage auf den Ubud-Villenseiten (Entwurf 26.09.2026). Hängt ohne Abstand am farbigen Balken (bloc-73),
   nur Rand in Villenfarbe. Kalender = book.bali.place-Kalender (calendar.css, erzeugt). */
.villa-availability{border:1px solid var(--villa);border-top:0;background:transparent}
/* Ab 992 px steht links die Menülinie (#bloc-1) - dort kein zweiter Rand daneben. */
@media (min-width:992px){.villa-availability{border-left:0}}
.villa-availability>.container{padding-top:28px;padding-bottom:30px}
.bp-avail{--ink:#303832;--line:#deded8;--muted:#7c847e;color:var(--ink);font-family:"Bali Raleway ExtraLight","Bali Raleway","Raleway",sans-serif}
.bp-avail-grid{display:grid;grid-template-columns:minmax(170px,300px) minmax(230px,300px) minmax(260px,1fr) 170px;gap:24px;align-items:end}
/* Summary: one fixed-width box (260 px) centred between guests and "Book" - the date field never changes width between states;
   hint/price lines never wrap (Thomas 26.9.: at 1280 both sentences broke), status lines may. */
.bp-avail-summary{justify-self:center;width:260px;white-space:nowrap}
.bp-avail-summary .bp-avail-status{white-space:normal}
/* 2.10.2026: längere Sprachen (Deutsch) brechen den Hinweis um, statt in den Knopf zu ragen – Englisch passt weiter in eine Zeile */
.bp-avail-summary .bp-avail-hint{white-space:normal}
.bp-avail .field{margin:0;min-width:0;position:relative}
.bp-avail .field label{display:block;margin:0 0 8px 3px;color:var(--muted);font:400 10px/normal "Bali Raleway","Raleway",sans-serif;letter-spacing:1.2px;text-transform:uppercase}
.bp-avail .date-range-trigger{border-radius:9px;min-height:48px;height:48px;padding:0 12px;display:flex;align-items:center}
.bp-avail .date-range-trigger small{display:none}
.bp-avail .date-range-trigger span{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-avail .date-range-popover{width:554px;max-width:calc(100vw - 40px);border-radius:9px}
.bp-avail .guest-count-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bp-avail .guest-count-fields select{width:100%;height:48px;min-height:48px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:400 13px "Bali Raleway","Raleway",sans-serif}
.bp-avail-summary{min-height:48px;display:flex;flex-direction:column;justify-content:flex-end}
.bp-avail-summary p{margin:0}
.bp-avail-hint{color:var(--muted);font:400 14px/1.4 "Bali Raleway ExtraLight","Raleway",sans-serif}
.bp-avail-hint span{font-size:13px}
.bp-avail-stay{color:var(--muted);font:400 13px/1.3 "Bali Raleway","Raleway",sans-serif;margin-bottom:2px!important}
.bp-avail-price{color:var(--ink);font:400 30px/1.1 "Bali Cormorant Light","Cormorant Garamond",serif;white-space:nowrap}
.bp-avail-price small{display:block;margin-top:3px;color:var(--muted);font:400 13px/1.3 "Bali Raleway ExtraLight","Raleway",sans-serif}
.bp-avail-status{color:var(--ink);font:400 22px/1.15 "Bali Cormorant Light","Cormorant Garamond",serif}
.bp-avail-action{display:flex;justify-content:flex-end}
/* Book / Find other dates / Try again share one width, so nothing shifts between states. */
.bp-avail-action>*{width:100%}
.bp-avail-book,.bp-avail-ghost{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 16px;border:1px solid var(--villa);border-radius:7px;font:700 16px/1 "RalewayThin-ExtraLight","Bali Raleway ExtraLight","Raleway",sans-serif;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s}
/* Colours with !important: www's general link rules (style.css a / a:hover) would otherwise win on hover. */
.bp-avail .bp-avail-book{background:var(--villa);color:#fafaf8!important}
.bp-avail .bp-avail-book:hover,.bp-avail .bp-avail-book:focus-visible{background:#fafaf8;color:var(--villa)!important}
.bp-avail-book.is-disabled{opacity:.35;cursor:default;pointer-events:none}
.bp-avail .bp-avail-ghost{background:transparent;color:var(--villa)!important}
.bp-avail-ghost:hover{background:color-mix(in srgb,var(--villa) 8%,transparent)}
.bp-avail-book:focus-visible,.bp-avail-ghost:focus-visible{outline:2px solid var(--villa);outline-offset:2px}
@media (max-width:1259.98px){
	.bp-avail-grid{grid-template-columns:1fr 1fr;row-gap:22px}
	.bp-avail-action>*{width:auto;min-width:170px}
	.bp-avail-summary{justify-self:start;width:auto}
}
@media (max-width:420px){
	.bp-avail-summary{white-space:normal}
}
@media (max-width:767.98px){
	.villa-availability>.container{padding-top:22px;padding-bottom:24px}
	.bp-avail-grid{grid-template-columns:1fr;gap:18px}
	.bp-avail-summary{justify-self:stretch}
	.bp-avail .date-range-popover{width:100%;max-width:none}
	.bp-avail-action,.bp-avail-book,.bp-avail-ghost{width:100%}
}
/* 29.09.2026 (Thomas, Punkt 2 „B“ + Punkt 4 „1 · Getöntes Band“, nur Handy): eingeklappt nur ein Feld „Check dates & price right here“ in Villenfarbe mit Kalender-
   Symbol; nach der Datumswahl schieben sich Gäste, Preis und „Book now“ auf. Ab 768 px bleibt alles wie bisher (Hülle .bp-avail-more ist dort unsichtbar). */
@media (min-width:768px){.bp-avail-more,.bp-avail-more-in{display:contents}}
@media (max-width:767.98px){
	.bp-avail-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s cubic-bezier(.3,.7,.2,1),opacity .4s ease .1s}
	.bp-avail-more[data-open="true"]{grid-template-rows:1fr;opacity:1}
	.bp-avail-more-in{min-height:0;overflow:hidden;display:grid;gap:18px}
	.bp-avail-more[data-open="true"] .bp-avail-more-in{overflow:visible}
	.bp-avail-grid.is-folded{gap:0}
	.bp-avail-grid.is-folded .date-range-field>label{display:none}
	/* Thomas 29.9.: gefüllter Knopf wirkte wie ein Seitenwechsel → Eingabefeld, zentriert, Text „Check dates & price right here“; seit „wir behalten die kräftige
	   villenfarbe und ändern das eingabefeld dahingehend“ weißes Feld auf kräftigem Villenfarb-Grund (statt Ausstattungsbalken) */
	.bp-avail-grid.is-folded .date-range-trigger{height:52px;min-height:52px;justify-content:center;background:#fff;border:0;color:var(--villa)}
	.bp-avail-grid.is-folded .date-range-trigger span{color:var(--villa);font:500 15.5px/1 "RalewayThin-Medium","Bali Raleway","Raleway",sans-serif;letter-spacing:.01em;overflow:visible}
	.bp-avail-grid.is-folded .date-range-trigger span::before{content:"";display:inline-block;width:18px;height:18px;margin-right:10px;vertical-align:-3px;background:currentColor;
		-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;
		mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat}
	.villa-availability{background:var(--villa);border-color:var(--villa)}
	.villa-availability>.container{padding-top:22px;padding-bottom:22px}
	/* aufgeklappt auf der kräftigen Farbe: Beschriftungen und Preis weiß, Felder weiß, „Book now“ weiß mit Schrift in Villenfarbe */
	.villa-availability .bp-avail{--muted:#fff;--ink:#fff;color:#fff}
	/* Thomas 29.9.: „alle schriften da drin müssen dann natürlich hell und gut lesbar werden“ */
	.villa-availability .bp-avail .field label{color:#fff!important;font-weight:600;opacity:1}
	.villa-availability .bp-avail-hint,.villa-availability .bp-avail-hint span,.villa-availability .bp-avail-stay,.villa-availability .bp-avail-price,
	.villa-availability .bp-avail-price small,.villa-availability .bp-avail-status{color:#fff!important;font-family:"RalewayThin-Medium","Bali Raleway","Raleway",sans-serif}
	.villa-availability .bp-avail-price{font-family:"Bali Cormorant Light","Cormorant Garamond",serif}
	.villa-availability .bp-avail-stay,.villa-availability .bp-avail-price small{font-weight:500}
	.villa-availability .bp-avail .date-range-trigger{border-color:#fff;background:#fff;color:var(--villa)}
	.villa-availability .bp-avail .date-range-trigger span{color:var(--villa)}
	.villa-availability .bp-avail .guest-count-fields select{border-color:#fff;color:#303832}
	.villa-availability .bp-avail .bp-avail-book{background:#fff;border-color:#fff;color:var(--villa)!important}
	.villa-availability .bp-avail .bp-avail-book.is-disabled{opacity:.55}
	.villa-availability .bp-avail .bp-avail-ghost{border-color:#fff;color:#fff!important}
	.villa-availability .bp-avail .date-range-popover{--ink:#303832;--muted:#7c847e;color:#303832}
}
@media (max-width:767.98px) and (prefers-reduced-motion:reduce){.bp-avail-more{transition:none}}