/* WBNT Uthyrning – kundvyernas layout.
 *
 * REGEL: den här filen gör LAYOUT, aldrig utseende. Inga färger, inga typsnitt,
 * ingen knappstyling – allt sådant ärvs från butikens tema. Inga selektorer mot
 * ett visst temas klasser heller; bara egna wbnt-uh-*.
 *
 * Skälet är att pluginet säljs till butiker vi inte känner till. En layout som
 * TÅL stora knappar fungerar överallt; en som förutsätter små gör det inte.
 *
 * Vill en butik ändra: avregistrera handtaget 'wbnt-uh' eller skriv över
 * reglerna i temat. Markupen ändras genom att lägga egna mallar i
 * yourtheme/wbnt-uthyrning/.
 */

/* ---- Bokningsrutan på produktsidan ---- */

.wbnt-uh-boka {
	margin-bottom: 1.5em;
	padding: 1em;
	border: 1px solid;
	/* Ärver textfärgen och tonas ned – ingen egen palett. */
	border-color: currentColor;
	opacity: 1;
	border-radius: 4px;
}

.wbnt-uh-boka > * + * {
	margin-top: 0.75em;
}

.wbnt-uh-falt {
	display: block;
}

.wbnt-uh-falt input {
	display: block;
	width: 100%;
	max-width: 22em;
}

.wbnt-uh-falt input[type="number"] {
	max-width: 7em;
}

.wbnt-uh-korgrad {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid;
	border-color: currentColor;
}

/* Egen [hidden]-regel. Webbläsarens är från UA-stilmallen och förlorar mot
   display:flex ovan hur låg vikt vår egen selektor än har, så utan den här
   syns korgraden även när den är dold. Vissa teman råkar ha en egen
   !important-regel som täcker över det - men då hänger pluginet på temat. */
.wbnt-uh-korgrad[hidden] {
	display: none;
}

/* ---- Min bokning ---- */

.wbnt-uh-korg-lista {
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
}

.wbnt-uh-post {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em 1.25em;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1em 0;
	border-bottom: 1px solid;
	border-color: currentColor;
}

/* Namn och period tar den plats som finns; åtgärderna får aldrig klämmas. */
.wbnt-uh-post-info {
	flex: 1 1 16em;
	min-width: 0;
}

.wbnt-uh-post-atgarder {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 0.75em;
	align-items: center;
}

.wbnt-uh-post-atgarder form {
	display: flex;
	gap: 0.5em;
	align-items: center;
	margin: 0;
}

/* Antalsfältet ska inte växa med flex-raden – det rymmer ett par siffror. */
.wbnt-uh-post-atgarder input[type="number"] {
	flex: 0 0 auto;
	width: 5em;
	min-width: 0;
}

.wbnt-uh-post-period,
.wbnt-uh-post-pris {
	display: block;
}

.wbnt-uh-summa {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	justify-content: space-between;
	padding: 0.75em 0;
	font-weight: 700;
}

.wbnt-uh-skicka-rad {
	margin-top: 1.5em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
}

.wbnt-uh-skicka-rad form {
	margin: 0;
}

/* Att tömma är inte nästa steg i flödet, så knappen ska inte se ut som det.
 * Färgen ärvs från temat via currentColor - ingen egen palett att hålla
 * synkad, och den syns lika bra på mörk som ljus bakgrund.
 *
 * SELEKTORN ÄR MEDVETET TUNG. Sjrentals tema målar varje knapp i Mitt konto
 * blå med `.woocommerce-account .woocommerce-MyAccount-content .button`, tre
 * klasser. En enklare selektor förlorade tyst, och då stod två likadana blå
 * knappar bredvid varandra - varav den ena raderar allt. Elementnamnet plus
 * tre klasser väger tyngre utan att ta till !important, som hade låst
 * utseendet för temat i framtiden. */
.wbnt-uh-skicka-rad button.wbnt-uh-tom.button {
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
	opacity: 0.7;
}

.wbnt-uh-skicka-rad button.wbnt-uh-tom.button:hover,
.wbnt-uh-skicka-rad button.wbnt-uh-tom.button:focus {
	background: transparent;
	color: inherit;
	opacity: 1;
}

/* Smal skärm: ingenting ska tvingas stå i rad. */
@media (max-width: 480px) {
	.wbnt-uh-post,
	.wbnt-uh-post-atgarder {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Antalsfältet i "Min bokning": etiketten är synlig sedan 0.32.2 – en naken
   sifferruta sa inte vad den styrde. Bara layout; färg och form ärvs av temat. */
.wbnt-uh-antal-falt {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.wbnt-uh-antal-falt input {
	width: 4.5em;
}

/* Satskomponenter i bokningsrutan: "Ingår" och valbara tillbehör. Kvoten
   ("3 per st") står dämpad efter namnet – den förklarar, den är inte valet. */
.wbnt-uh-ingar ul {
	margin: 0.2em 0 0.8em;
	padding-left: 1.4em;
}

.wbnt-uh-komponenter {
	margin: 0 0 0.8em;
}

.wbnt-uh-komponent {
	display: block;
	margin: 0.2em 0;
}

.wbnt-uh-kvot {
	opacity: 0.7;
	font-size: 0.9em;
	margin-left: 0.4em;
}

/* Variantvalet under en ikryssad komponent – t.ex. vilka kodproppar. Indraget
   visar att raderna hör till kryssrutan ovanför; målsiffran räknar ned men
   hindrar ingenting. */
.wbnt-uh-kompvarianter {
	margin: 0.2em 0 0.6em 1.6em;
	padding-left: 0.8em;
	border-left: 2px solid currentColor;
}

.wbnt-uh-kompvarianter[hidden] {
	display: none;
}

.wbnt-uh-mal {
	margin: 0.3em 0;
	opacity: 0.75;
	font-size: 0.9em;
}

.wbnt-uh-kompvariant {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0.15em 0;
}

.wbnt-uh-kompvariant input {
	width: 4em;
}

.wbnt-uh-kodnamn {
	min-width: 6em;
}

.wbnt-uh-kodsaldo {
	opacity: 0.7;
	font-size: 0.9em;
}

/* ---- Mina bokningar: flikar per status -----------------------------------
 *
 * Inga egna färger. Ramar och markeringar ritas med currentColor och
 * genomskinlighet, så vyn följer temat i stället för att slåss med det - en
 * hårdkodad ljusgrå ram blir en tydlig skarv på en mörk bakgrund. Samma
 * mönster som resten av sviten (temaoberoende kundvyer). */

.wbnt-uh-flikar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	margin: 0 0 1.25em;
	border-bottom: 1px solid;
	border-color: color-mix(in srgb, currentColor 25%, transparent);
}

.wbnt-uh-flik {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0.9em;
	text-decoration: none;
	color: inherit;
	opacity: 0.65;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.wbnt-uh-flik:hover,
.wbnt-uh-flik:focus {
	opacity: 1;
	color: inherit;
}

.wbnt-uh-flik.ar-vald {
	opacity: 1;
	font-weight: 600;
	border-bottom-color: currentColor;
}

/* Antalet ska läsas som en upplysning, inte som en knapp. */
.wbnt-uh-flikantal {
	font-size: 0.85em;
	font-weight: normal;
	padding: 0.05em 0.5em;
	border-radius: 10px;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.wbnt-uh-tomflik {
	opacity: 0.7;
	margin: 1.5em 0;
}

/* ---- Mina bokningar: korten ---- */

.wbnt-uh-bokning {
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 6px;
	padding: 14px 16px;
	margin: 0 0 16px;
}

.wbnt-uh-bokning-rubrik {
	margin: 0 0 6px;
}

.wbnt-uh-statusmarke {
	font-weight: normal;
	font-size: 0.85em;
	background: color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 10px;
	padding: 2px 10px;
	margin-left: 6px;
}

.wbnt-uh-bokning-meta {
	margin: 0 0 4px;
	opacity: 0.8;
}

.wbnt-uh-bokningstabell {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}

.wbnt-uh-bokningstabell th,
.wbnt-uh-bokningstabell td {
	padding: 4px 6px;
	text-align: left;
}

.wbnt-uh-bokningstabell thead tr,
.wbnt-uh-bokningstabell tbody tr {
	border-bottom: 1px solid;
	border-color: color-mix(in srgb, currentColor 15%, transparent);
}

.wbnt-uh-bokningstabell .wbnt-uh-hoger {
	text-align: right;
}

.wbnt-uh-bokningstabell .wbnt-uh-summacell {
	padding: 6px;
	font-weight: 600;
}

.wbnt-uh-styckpris {
	opacity: 0.75;
}

/* Kundens periodändring på en skickad bokning. Hopfälld som förval: de flesta
   öppnar aldrig bokningen för att ändra datum, och en utfälld kalender i varje
   kort hade gjort listan svår att överblicka. */
.wbnt-uh-andra-period {
	margin: 10px 0 4px;
}

.wbnt-uh-andra-period summary {
	cursor: pointer;
	opacity: 0.8;
}

.wbnt-uh-andra-period form {
	margin: 0.75em 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
}

.wbnt-uh-andra-not {
	flex: 1 1 100%;
	margin: 0;
	opacity: 0.75;
	font-size: 0.9em;
}

/* Hyresenheten efter priset ("/dygn"). Dämpad och mindre - den förklarar
   priset, den är inte en del av siffran. */
.wbnt-uh-prisenhet {
	opacity: 0.75;
	font-size: 0.8em;
	font-weight: 400;
	margin-left: 0.15em;
}

/* Rubrik när korgen innehåller flera perioder. Syns bara då - har allt samma
   datum vore rubriken brus. */
.wbnt-uh-periodrubrik {
	margin: 1.5em 0 0;
	padding-bottom: 0.3em;
	font-weight: 600;
	font-size: 0.95em;
	border-bottom: 2px solid currentColor;
	opacity: 0.85;
}

.wbnt-uh-periodrubrik:first-child {
	margin-top: 0;
}

/* Datumen i periodrubriken får en egen platta, så etiketten ("Bokningens
   period") och själva datumen inte flyter ihop till en enda textrad.
 *
 * Tonen kommer ur currentColor, inte ur en egen färg - då fungerar den lika
 * bra på ljust som mörkt tema. Samma mönster som statusmärket och flikarnas
 * antalsbricka; ingen ny palett att hålla synkad. */
.wbnt-uh-perioddatum {
	display: inline-block;
	padding: 0.05em 0.5em;
	border-radius: 4px;
	background: color-mix(in srgb, currentColor 14%, transparent);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* "samt" mellan två delar av spännvidden. Dämpad - den binder ihop datumen,
   den är inte ett datum. */
.wbnt-uh-spannskarv {
	opacity: 0.6;
	margin-inline: 0.25em;
	font-style: italic;
}

/* Radens datumrad: plattorna ska vara lite tystare här än i rubrikerna. Rubriken
   sammanfattar, raden upprepar - och en upprepning ska inte skrika lika högt. */
.wbnt-uh-post-period .wbnt-uh-perioddatum {
	background: color-mix(in srgb, currentColor 9%, transparent);
	font-size: 0.95em;
}

/* ---- Periodraden i butiken ----

   Raden ska läsas som en ram runt listan, inte som ännu ett filter bland
   andra: perioden avgör vad hela sidan betyder. Därför egen yta och ram i
   stället för att flyta med sorteringen.

   currentColor genomgående - pluginet vet inte vilket tema det sitter i, och
   en hårdkodad färg blir förr eller senare fel mot någons bakgrund. */
.wbnt-uh-periodrad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	margin: 0 0 2em;
	padding: 1.1em 1.25em;
	border: 1px solid;
	border-color: currentColor;
	border-radius: 6px;
}

.wbnt-uh-periodrad__falt {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.wbnt-uh-periodrad__etikett {
	font-weight: 600;
}

.wbnt-uh-periodrad__kryss {
	display: flex;
	align-items: center;
	gap: 0.4em;
	white-space: nowrap;
}

/* Beskeden bryter rad för sig: de hör till raden men ska inte klämmas in
   mellan fälten när utrymmet tryter. */
.wbnt-uh-periodrad__vald,
.wbnt-uh-periodrad__hjalp {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.9em;
	opacity: 0.85;
}

.wbnt-uh-periodrad__rensa {
	margin-left: 0.75em;
}

@media (max-width: 600px) {
	.wbnt-uh-periodrad__falt {
		flex-basis: 100%;
	}
}

/* Beskedet på produktkortet. Ledigt och upptaget skiljs med VIKT och en prick,
   inte med grönt och rött: pluginet vet inte vilka färger butiken har, och
   grönt/rött ensamt är dessutom oläsligt för den som är färgblind. */
.wbnt-uh-kortlage {
	margin: 0.2em 0 0.6em;
	font-size: 0.9em;
	display: flex;
	align-items: center;
	gap: 0.45em;
}

.wbnt-uh-kortlage::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	border: 1px solid currentColor;
	flex: 0 0 auto;
}

.wbnt-uh-kortlage--ledig::before {
	background: currentColor;
}

.wbnt-uh-kortlage--upptagen {
	opacity: 0.7;
}

/* ---- Prisuppställningen i bokningsrutan ----

   En hyra är en offert: raderna först, summan sist och avskild. Två kolumner
   med etikett till vänster och belopp till höger, som på ett kvitto - beloppen
   ska gå att jämföra lodrätt utan att ögat behöver leta. */
.wbnt-uh-pris__rubrik {
	display: block;
	margin-bottom: 0.4em;
}

.wbnt-uh-pris {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.25em 1.5em;
	margin: 0;
}

.wbnt-uh-pris dt {
	margin: 0;
	opacity: 0.8;
}

.wbnt-uh-pris dd {
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Skiljelinjen är ett eget element över BÅDA kolumnerna. Ram på summaraderna
   bröts mitt itu av kolumnavståndet - två streck med ett hål emellan. */
.wbnt-uh-pris__linje {
	grid-column: 1 / -1;
	border-top: 1px solid;
	border-color: currentColor;
	margin-top: 0.35em;
	opacity: 0.5;
}

/* Summan satt i halvfet - det är den siffran kunden tar med sig. */
.wbnt-uh-pris dt.wbnt-uh-pris__summa,
.wbnt-uh-pris dd.wbnt-uh-pris__summa {
	font-weight: 700;
	opacity: 1;
}