/* MultiWeather: user location controls (theme-safe, minimal) */

.mw-card[data-mwpl-userloc="1"] { position: relative; }

.mwpl-userloc-inline{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 10px;
	vertical-align: middle;
}

.mwpl-userloc-inline.mwpl-userloc-after{
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 8px 0 0 0;
	gap: 8px;
}

.mwpl-userloc-btn{
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-size: 0.72em; /* ~11-12px on 16px base; override per-card if needed */
	line-height: 1;
	padding: 3px 7px;
	border-radius: 999px;
	cursor: pointer;

	color: inherit;
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.22);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);

	opacity: 0.90;
	transition: opacity 120ms ease, transform 120ms ease;
}

.mwpl-userloc-btn:hover{ opacity: 1; transform: translateY(-1px); }

.mwpl-userloc-btn:focus{
	outline: 2px solid rgba(255,255,255,0.25);
	outline-offset: 2px;
}

.mwpl-userloc-btn:disabled{
	opacity: 0.35;
	cursor: default;
	transform: none;
}

/* Keep the "last updated" row from creating a big bottom gap when buttons are injected there */
.mw-card[data-mwpl-userloc="1"] .mw-timezone-hint{
	margin: 6px 0 0 0 !important;
	padding: 0 !important;
	line-height: 1.2;
}

/* Dial cards (15/16/17/51–55): dock the buttons inside the dial wrapper */
.mw15-dial-wrapper,
.mw16-dial-wrapper,
.mw17-dial-wrapper,
.mw51-dial-wrapper,
.mw52-dial-wrapper,
.mw53-dial-wrapper,
.mw54-dial-wrapper,
.mw55-dial-wrapper{ position: relative !important; }

/* Dial cards: create a little room at bottom (optional but helps) */
.mw-card.card-15,
.mw-card.card-16,
.mw-card.card-17,
.mw-card.card-51,
.mw-card.card-52,
.mw-card.card-53,
.mw-card.card-54,
.mw-card.card-55{
  position: relative;
  padding-bottom: 34px; /* tweak if you want */
}

/* Dock pinned to bottom of the CARD */
.mwpl-userloc-dock{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px; /* 👈 move UP = increase this */
  z-index: 999;
  pointer-events: none;
}

.mwpl-userloc-dock .mwpl-userloc-inline.mwpl-userloc-dial{
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  margin: 0;
  pointer-events: auto;
}


/* Better contrast on both light and dark cards (modern browsers) */
@supports (background: color-mix(in srgb, currentColor 10%, transparent)) {
	.mwpl-userloc-btn{
		background: color-mix(in srgb, currentColor 12%, transparent);
		border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	}
	.mwpl-userloc-btn:focus{
		outline: 2px solid color-mix(in srgb, currentColor 35%, transparent);
	}
}

/* Cards 5/6/7 — put My location (left) + Reset (right) in the top corners */
.mw-card.card-5,
.mw-card.card-6,
.mw-card.card-7 {
  position: relative !important;
}

/* make wrapper just a positioning container */
.mw-card.card-5 .mwpl-userloc-inline,
.mw-card.card-6 .mwpl-userloc-inline,
.mw-card.card-7 .mwpl-userloc-inline {
  position: absolute !important;
  top: 10px !important;     /* tweak */
  left: 0 !important;
  right: 0 !important;
  height: 0 !important;     /* wrapper doesn't take layout space */
  transform: none !important;
  z-index: 99999 !important;
  pointer-events: none !important; /* buttons will be clickable */
}

/* both buttons clickable */
.mw-card.card-5 .mwpl-userloc-inline .mwpl-userloc-btn,
.mw-card.card-6 .mwpl-userloc-inline .mwpl-userloc-btn,
.mw-card.card-7 .mwpl-userloc-inline .mwpl-userloc-btn {
  position: absolute !important;
  pointer-events: auto !important;

  font-size: 0.55em !important;
  padding: 2px 7px !important;
  line-height: 0.75 !important;
  border-radius: 6px !important;
}

/* left button */
.mw-card.card-5 .mwpl-userloc-inline .mwpl-userloc-btn:first-child,
.mw-card.card-6 .mwpl-userloc-inline .mwpl-userloc-btn:first-child,
.mw-card.card-7 .mwpl-userloc-inline .mwpl-userloc-btn:first-child {
  left: 6px !important;   /* tweak */
  top: 0 !important;
}

/* right button */
.mw-card.card-5 .mwpl-userloc-inline .mwpl-userloc-btn:last-child,
.mw-card.card-6 .mwpl-userloc-inline .mwpl-userloc-btn:last-child,
.mw-card.card-7 .mwpl-userloc-inline .mwpl-userloc-btn:last-child {
  right: 12px !important;  /* tweak */
  top: 0 !important;
}

/* =========================================================
   Cards 18–21: Center buttons WITHOUT affecting layout
   (prevents thermometer from shifting)
   ========================================================= */

.mw-card.card-18,
.mw-card.card-19,
.mw-card.card-20,
.mw-card.card-21 {
  position: relative !important;
}

/* wrapper becomes an overlay "rail" and takes no space */
.mw-card.card-18 .mwpl-userloc-inline,
.mw-card.card-19 .mwpl-userloc-inline,
.mw-card.card-20 .mwpl-userloc-inline,
.mw-card.card-21 .mwpl-userloc-inline {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 10px !important;      /* adjust if needed */
  height: 0 !important;         /* IMPORTANT: don't push layout */
  transform: none !important;

  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;

  z-index: 99999 !important;
  pointer-events: none !important; /* wrapper ignores clicks */
}

/* buttons clickable + compact */
.mw-card.card-18 .mwpl-userloc-btn,
.mw-card.card-19 .mwpl-userloc-btn,
.mw-card.card-20 .mwpl-userloc-btn,
.mw-card.card-21 .mwpl-userloc-btn {
  pointer-events: auto !important;

  font-size: 10px !important;
  padding: 2px 7px !important;
  line-height: 1.1 !important;
  border-radius: 10px !important;
}

/* =========================================================
   Cards 32–36 — make userloc controls an overlay (no line-box padding)
   ========================================================= */

.mw-card.card-32,
.mw-card.card-33,
.mw-card.card-34,
.mw-card.card-35,
.mw-card.card-36 {
  position: relative !important;
}

/* Overlay wrapper: doesn't participate in layout => no fat gap */
.mw-card.card-32 .mwpl-userloc-inline,
.mw-card.card-33 .mwpl-userloc-inline,
.mw-card.card-34 .mwpl-userloc-inline,
.mw-card.card-35 .mwpl-userloc-inline,
.mw-card.card-36 .mwpl-userloc-inline {
  position: absolute !important;
  left: 26px !important;
  bottom: 5px !important;      /* tweak */
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;    /* wrapper line box gone */
  height: auto !important;

  transform: none !important;
  z-index: 99999 !important;
}

/* Buttons: tiny + tight */
.mw-card.card-32 .mwpl-userloc-btn,
.mw-card.card-33 .mwpl-userloc-btn,
.mw-card.card-34 .mwpl-userloc-btn,
.mw-card.card-35 .mwpl-userloc-btn,
.mw-card.card-36 .mwpl-userloc-btn {
  font-size: 7px !important;
  padding: 1px 6px !important;
  line-height: 1 !important;
  border-radius: 10px !important;
}

/* Optional: keep last-updated from adding extra vertical spacing */
.mw-card.card-32 .mw-timezone-hint,
.mw-card.card-33 .mw-timezone-hint,
.mw-card.card-34 .mw-timezone-hint,
.mw-card.card-35 .mw-timezone-hint,
.mw-card.card-36 .mw-timezone-hint,
.mw-card.card-32 .mw-freshness,
.mw-card.card-33 .mw-freshness,
.mw-card.card-34 .mw-freshness,
.mw-card.card-35 .mw-freshness,
.mw-card.card-36 .mw-freshness {
  margin: 0 !important;
  padding: 20 !important;
}