@import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700|Source+Sans+Pro:300,400,700&display=swap");

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html, body.login-page {
  min-height: 100vh; /* bättre än 100% för full viewport-höjd */
  font-family: 'Source Sans Pro', sans-serif;
  background: linear-gradient(#000, #111);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 40px; /* ger luft upptill */
}


/* LOGIN WRAPPER */
.card-wrap {
  width: 100%;
  max-width: 450px;

}

/* LOGIN CARD */
.login-card {
  background: #111;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  text-align: center;
}

@media (max-width: 600px) {
  .login-card {
    margin: 0 12px;
  }
}

/* HEADING */
#login-title {
  font-size: 1.6rem;
  margin-bottom: 25px;
  font-weight: 600;
}

#login-title img.hat {
  width: 32px !important;
  height: auto !important;
  max-width: 32px !important;
  display: inline-block !important;
}

.head-icon {
  width: 38px;
  height: 38px;
  margin-right: 6px;
  border-radius: 50%;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.head-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* ALERTS */
.alert {
  background-color: #000;
  margin-bottom: 15px;
  padding: 16px 16px 16px 22px; /* 6px extra till vänster */
  border-radius: 0 5px 5px 0;
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
  transform: translateY(-8px);
  opacity: 0;
  animation: slideDown 0.4s ease-out forwards;
}

.alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;        /* fast bredd direkt */
  border-radius: 4px;
  height: 0;         /* börjar osynlig */
  background: var(--alert-color);
  animation: drawBar 0.4s ease-out 0.4s forwards;
}

.alert.success { --alert-color: #4CAF50; }
.alert.error   { --alert-color: #f00; }
.alert.info    { --alert-color: #0af; }


@keyframes slideDown {
  0% {
    transform: translateY(12px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes drawBar {
  0%   { height: 0; }
  100% { height: 100%; }
}


/* FORM FIELDS */
.field {
  text-align: left;
  margin-bottom: 20px;
}

.field label {
  font-size: 0.9rem;
  margin-bottom: 6px;
  display: block;
}

.field input {
  width: 100%;
  padding: 10px;
  border: 1px solid #757575;
  border-radius: 6px;
  background: #111;
  color: #fff !important;
  font-size: 1rem;
}


.field input:focus:not([type="checkbox"]),
.field input:-webkit-autofill:not([type="checkbox"]),
.field input:-webkit-autofill:focus:not([type="checkbox"]) {
  background: #111 !important;
  border-color: #3ddb54;
  outline: none;
  color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px #111 inset; /* täcker vit autofyll */
  transition: background-color 5000s ease-in-out 0s; /* förhindrar blink */
}


.field input:-webkit-autofill:not([type="checkbox"]) {
    -webkit-text-fill-color: #fff !important; /* tvingar vit text */
}



/* BUTTONS */
button.primary {
  width: 100%;
  background: #15d354;
  border: none;
  padding: 12px;
  border-radius: 6px;
  color: #000;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  display: inline-block;
}


button.primary:hover {
  background: #1fdf64;
  transform: scale(1.1);
}

/* SOCIAL LOGIN */
button.social {
  width: 100%;
  background: none;
  color: #fff;
  padding: 10px;
  border: 1px solid #757575;
  border-radius: 6px;
  font-size: 0.95rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

button.social:hover {
  border: 1px solid #fff;
}

/* DIVIDER */
.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #ccc;
  font-size: 0.9rem;
  margin: 10px 0 20px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #333;
}

.divider span {
   margin: 0 10px;
}

/* LINKS UNDER FORM */
.meta {
  margin-top: 15px;
  font-size: 0.85rem;
  color: #bbb;
  text-align: center;
}

.meta p{
	display:block;
	margin-top:12px;}

.meta a, .field a{
  text-decoration: underline;
    color: #bbb;
}

.meta a:hover, .field a:hover {
  color:#15d354;
}

.meta a.a2, .login-card a.a2{
	display: inline-block;
	text-decoration: none;
	color: white;
	font-weight:bold;
	transition: transform 0.3s ease;
}

.meta a.a2:hover, .login-card a.a2:hover{
	transform: scale(1.1);
}


/* FOOTER NEUTRALISERING */
body.login-page .footers {
  display: none !important;
}



/* Social login icons */
button.social .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

button.social svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.fb-logo,
.discord-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}


.social.is-loading {
  opacity: .6;
  pointer-events: none;
  position: relative;
}

/*
.social.is-loading::after {
  content: "⏳";
  position: absolute;
  right: 12px;
}
*/

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes successPulse {
  0%   { box-shadow: 0 0 0 rgba(0,255,0,0.0); }
  50%  { box-shadow: 0 0 12px rgba(0,255,0,0.35); }
  100% { box-shadow: 0 0 0 rgba(0,255,0,0.0); }
}


.field.checkbox {
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 10; /* 👈 Lyft hela checkbox-fältet */
}

.field.checkbox label.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  position: relative;
  z-index: 10;
}

.field.checkbox input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  cursor: pointer;
  accent-color: #15d354;
  appearance: auto;
  -webkit-appearance: checkbox;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
  z-index: 100; /* 👈 Öka z-index rejält */
}


button.social:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dot-loader {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(37, 176, 155, 0.2);
  border-top: 3px solid #25b09b;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
  position: relative;
}
.dot-loader::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 3px solid transparent;
  border-bottom: 3px solid #1a8b76;
  border-radius: 50%;
  animation: spin 1.2s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }



body.receipt {font-family:Arial,sans-serif;background:#fff;color:#000;}
.receipt{max-width:800px;margin:40px auto;padding:20px;background:#fff;border-radius:12px;box-shadow:0 0 10px rgba(0,0,0,0.1);}
.receipt table{width:100%;border-collapse:collapse;margin-top:15px;}
.receipt th, .receipt td{padding:10px;border-bottom:1px solid #ddd;text-align:left;}
.receipt .buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;        /* mellanrum mellan knapparna */
  max-width: 600px; /* valfri maxbredd */
  margin: 0 auto;   /* centrerar hela knappraden */
  padding: 1rem;
}

.receipt .buttons button {
	color:#fff;
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
  font-weight:700;
  cursor: pointer;
  border:none;
  border-radius:99px;
  transition: all 0.25s ease; 
}
.receipt .buttons button:hover{scale:1.1;transform: translateY(-.5px);}
.receipt .print{background:#262626;}
.receipt .dash{background:#15d354;}
.receipt .dash:hover{background:#1fdf64;}
.receipt .print:hover{background:#000;}

@media print {
  .buttons {
    display: none !important;
  }
}

@media (max-width:768px){

body.receipt{
  padding:12px;
}

.receipt{
  margin:10px auto;
  padding:18px;
  box-shadow:none;
}

.receipt table,
.receipt tbody,
.receipt tr,
.receipt th,
.receipt td{
  display:block;
  width:100%;
}

.receipt tr{
  margin-bottom:14px;
  border-bottom:1px solid #eee;
  padding-bottom:8px;
}

.receipt th{
  width:auto;
  font-size:13px;
  color:#666;
  border:none;
  padding:0;
}

.receipt td{
  font-size:16px;
  padding:4px 0 8px;
  border:none;
}

.receipt .buttons{
  flex-direction:column;
  gap:10px;
}

.receipt .buttons button{
  width:100%;
  font-size:16px;
  padding:14px;
}

.receipt td,
.receipt th{
  word-break: break-word;
  overflow-wrap: anywhere;
}

.receipt{
  max-width:800px;
  margin:20px auto;
  padding:20px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
  overflow-wrap:anywhere;
}

.receipt td,
.receipt th{
  word-break:break-word;
}

}