/* Reset & font */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Alan Sans', sans-serif;
  background-color: #eaf6ff;
  color: #222;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Navbar — DESKTOP */
.navbar {
  position: relative;                 /* behövs för absolut centrering */
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.logo {
  font-size: 1.8rem; font-weight: 700; letter-spacing: -1px; color: #000;
}
.logo span { font-weight: 400; font-size: 1.7rem; color: #1976d2; }
.logo strong { font-weight: 700; font-size: 1.9rem; }

/* Centrera länkarna över hela bredden */
.nav-links {
  position: absolute;
  left: 0; right: 0;                  /* fyller hela navbar-bredden */
  top: 50%; transform: translateY(-50%);
  display: flex; justify-content: center; gap: 1.5rem;
}
.nav-links a { text-decoration: none; color: #222; font-weight: 400; }
.nav-links a:hover { text-decoration: underline; }

/* Placera "Mina URLer" längst till höger (men HTML får ligga kvar i .nav-links) */
.nav-links .btn-black {
  position: absolute;
  right: 2rem;                        /* samma sidmarginal som navbar-padding */
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
}

/* Hamburger döljs på desktop */
.hamburger { display: none; }

.btn-black {
  background: #222; color: #fff; padding: 0.5rem 1rem;
  border-radius: 6px; text-decoration: none; font-weight: 600;
  border: 1px solid #222; transition: all 0.3s ease;
}
.btn-black:hover { background: transparent; color: #222; border: 1px solid #222; }

/* Hero */
.hero { text-align: center; padding: 4rem 1rem; flex: 1; }
.hero h1 { font-size: 2rem; margin-bottom: 2rem; font-weight: 700; }

/* Shortener box */
.shortener-box{
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  background:#fff; border-radius:12px; padding:0.7rem;
  width:90%; max-width:900px; margin:0 auto 1rem auto;
  box-shadow:0 2px 6px rgba(0,0,0,0.08); flex-wrap:wrap;
}
.shortener-box .icon{ background:#fdfd96; padding:0.7rem; border-radius:10px; font-size:1.2rem; }
.shortener-box .icon.active{ background:#ffee58; }
.shortener-box input{
  border:none; padding:0.8rem 1rem; font-size:1rem; outline:none;
  border-radius:8px; background:#f0f0f0; flex:1; min-width:150px;
}
.shortener-box input#longUrl{ flex:2; }
.shortener-box input#alias{ flex:1; max-width:200px; }
.shortener-box button{
  background:#222; color:#fff; border:1px solid #222; padding:0.8rem 1.2rem;
  font-weight:600; border-radius:8px; cursor:pointer; transition:all 0.2s ease;
}
.shortener-box button:hover{ background:transparent; color:#222; border:1px solid #222; }

/* Disclaimer */
.disclaimer{ font-size:0.8rem; color:#555; }
.disclaimer a{ color:#222; text-decoration:underline; }

/* Sticky Footer */
footer{
  margin-top:auto; padding:1rem; background:#fff; font-size:0.9rem;
  color:#444; border-top:1px solid #eee; text-align:center;
}

/* Cookie Popup */
.cookie-popup{
  position:fixed; bottom:1rem; left:1rem;
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:1rem 1.5rem; box-shadow:0 2px 8px rgba(0,0,0,0.15);
  display:none; flex-direction:row; align-items:center; justify-content:space-between;
  gap:1rem; max-width:400px; width:calc(100% - 2rem);
  font-family:'Alan Sans', sans-serif;
}
.cookie-popup span{ font-size:0.9rem; color:#444; line-height:1.4; }
.cookie-ok-btn{
  background:#222; color:#fff; border:none; padding:0.5rem 1.2rem;
  border-radius:6px; font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.3s ease;
}
.cookie-ok-btn:hover{ background:transparent; color:#222; border:1px solid #222; }
.list-group-item {
  word-wrap: break-word;
  overflow-wrap: anywhere; /* modernare */
  white-space: normal;
}
/* --- QR-bildens look --- */
.qr-preview {
  max-width: 180px;
  display: block;
  border-radius: 10px;
  margin: 10px auto 0 auto;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* --- Fyrkantiga knappar (som tidigare) --- */
.btn-sm {
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.15s ease;
  gap: 4px;
}

/* --- Ikonstorlek --- */
.btn-sm i {
  font-size: 1rem;
  line-height: 1;
}

/* --- QR-knapp + pil (split group) --- */
.btn-group .btn-outline-primary {
  border-radius: 6px 0 0 6px !important; /* vänster del */
}

.btn-group .dropdown-toggle-split {
  border-radius: 0 6px 6px 0 !important; /* höger del (pilen) */
  padding: 0 8px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Hovereffekt --- */
.btn-sm:hover i {
  transform: scale(1.1);
}

.btn-sm:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- Dropdown-menyn --- */
.dropdown-menu {
  font-size: 0.85rem;
}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsivitet — MOBIL (oförändrad layout) */
@media (max-width: 768px){
  .navbar{ display:flex; justify-content:space-between; align-items:center; }

  .hamburger{ display:block; background:none; border:none; font-size:1.8rem; cursor:pointer; }

  /* Menyn fälls ner under navbaren */
  .nav-links{
    position:absolute; top:100%; left:0; right:0; transform:none;
    display:none; flex-direction:column; gap:1rem;
    background:#fff; padding:1rem; border-top:1px solid #eee;
  }
  .nav-links.active{ display:flex; }

  .nav-links a{ font-size:1rem; text-align:left; }

  /* Visa Mina URLer-knappen inne i mobilmenyn (på egen rad överst) */
  .nav-links .btn-black{
    position: static; right:auto; top:auto; transform:none;
    width:100%; text-align:center; display:block;
  }

  /* Formulär-stacken */
  .shortener-box{ flex-direction:column; align-items:stretch; gap:0.8rem; }
  .shortener-box .icon{ display:none; }
  .shortener-box input, .shortener-box button{ width:100%; max-width:none; }
  .shortener-box input#alias{ max-width:none; }
}