/*────────────────────────────────────────────
  providers.css  ‑  shared UI styles
  (LubOnTime login screen)
────────────────────────────────────────────*/

/* === Google Font imports === */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Roboto:wght@500&display=swap");

:root {
  /* palette */
  --red: #ed0000;
  --gray: #374649;
  --blue: #0066e2;
  --sky: #E4F6FF;
}

.left {
	flex:0 0 38%;
	display:flex;
	flex-direction:column;
	box-sizing:border-box;
	margin:30px;
}

.btn {
  width: 390px;
  height: 42px;
  line-height: 42px;
  padding: 0 64px;

  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;           /* per spec */
  letter-spacing: 0.46px;
  text-align: center;
  text-decoration: none;

  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.btn:active{opacity:.85;}
.btn:disabled,

.btn-contained {
  border: none;
  color: #ffffff;
  background: var(--red);
}
.btn-contained:hover   { background: #d40000; }
.btn-contained[aria-disabled="true"] {
  background: #cccccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-outline {
  background:transparent;
  color:var(--red);
  border:2px solid var(--red);
}

/* hover / focus — invert for emphasis */
.btn-outline:hover,
.btn-outline:focus-visible{
  background:var(--red);
  color:#ffffff;
}

.btn-outline[aria-disabled="true"]{
  border-color:#cccccc;
  color:#cccccc;
  cursor:not-allowed;
  opacity:.6;
}

.btn-group{
  gap:18px;
  align-items:center;
  display:flex;
  flex-direction:column;
}

.lub-logo{
	width:284px;
	height:102px;
	margin-top:100px;
}

.tot-logo{
  width:180px;
  height:120px;
  align-self: flex-end;
  margin-top:auto;
}

.headline {
  justify-content:center;
  display:flex;
  flex-direction:column;
  max-width: 284px;           /* Figma spec */
  font-family: "Nunito", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 138%;          /* 40 × 1.38 ≈ 55.2 px */
  letter-spacing: 0;
  color: var(--gray);
}
.headline .accent {
  color: var(--red);
}

.mid{
  flex:1;
  display:flex;
  flex-direction:column;  
  margin: 0 auto;
  padding-bottom: 20%;
  justify-content:center;
  gap:80px;
}

.tagline {
  max-width: 609px;           /* spec */
  font-family: "Nunito", sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0;
  color: var(--gray);
  align-items: flex-end;
  margin: 0 auto;
  padding-bottom: 100px;
}
.tagline strong {
  color: var(--blue);
  font-weight: 700;           /* emphasise keyword */
}

footer{
  font-family: "Arial", sans-serif;
	text-align:center;
  padding-bottom: 30px;
  font-size:14px;
  color:var(--gray);
  opacity:.8;
}
footer a{color:inherit;text-decoration:none;margin:0 .45rem}
footer a:hover{text-decoration:underline}