/* Reset */
  *, *::before, *::after { box-sizing: border-box; }

/* 1. Root-variabel */
:root {
  --vh: 1vh;
}

/* 2. Bakgrund+höjd på html och body */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size:1.05rem;
  font-weight:600;
  height: calc(var(--vh) * 100);
  background: radial-gradient(
    ellipse at top,
    #3e2f0a 0%,
    #1a1400 40%,
    #000 100%
  );
  background-size: cover;
  background-position: top center;
  color: #fff;

  /* Safe-area */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);

  overflow: hidden; /* tar bort onödig scroll */
}

body.index .logo-img {
  /* Minska top-marginalen — justera värdet till det som känns lagom */
  margin: 0.25rem auto 0.5rem;
  padding-bottom: 1rem;
}

  /* Page container full height */
  .page-container {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    height: 100%;
    padding: 1rem;
    padding-top:3rem;
  }

  /* Auth panel */
  .auth-panel {
    padding: 1rem;
    padding-top: 0;
    width: 100%;
    max-width: 480px;
    position: relative;
  }

  /* Logo & profile centered by default */
  .logo-img { display: block; max-width: 140px; width: auto; margin: 0.5rem auto 1.5rem; }
  .profile-img { display: block; width: 80px; height: 80px; border-radius:50%; border:3px solid #fff; margin:0 auto 1rem; object-fit:cover; }

  /* Headings and text */
  h2 { text-align: center; font-size: 1.4rem; margin: 2rem 0; }

  h3 { text-align: center; font-size: 1.2rem; margin:0; color: #d39e0b;}
  
  p   { text-align: center; margin-bottom:1rem; font-size:1.1rem; }

  .hidden { display:none !important; }

  /* Toasts */
  .toast-container {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 0.5rem);
    left: 50%; transform: translateX(-50%);
    z-index:1000; pointer-events:none;
  }
  .toast { display:inline-block; padding:0.5rem 0.75rem; border-radius:.5rem; margin-top:.5rem; opacity:0; transition:opacity .3s; color:#fff; max-width:200px; word-wrap:break-word; text-align:center; }
  .toast.show    { opacity:1; }
  .toast.success { background:rgba(40,167,69,.9); }
  .toast.error   { background:rgba(183,28,28,.9); }
  .toast.warning { background-color: #f0ad4e; color: #fff;}

  .toast.warning {
  background: rgba(240, 173, 78, 0.9) !important;
  color: #fff !important;
  }

  /* Inputs */
  .input-style { background:#4c3a10; color:#fff; border:1px solid #a88d22; width:100%; padding:.75rem 1rem; border-radius:.75rem; padding-left:2.5rem; font-size:1rem; }
  .input-icon  { position:absolute; left:1rem; top:0; bottom:0; display:flex; align-items:center; color:#e0d6b3; pointer-events:none; }

.input-style {
  font-weight: 600;
}
.input-style::placeholder {
  font-weight: 600;
}

  /* Buttons */
  .btn-primary, .btn { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; padding:1rem; font-weight:600; border-radius:.75rem; font-size:1.05rem; background:linear-gradient(to bottom,#d4af37,#b08925); color:#1a1400; border:1px solid #fceabb; box-shadow:inset 0 0 0 1px #fff6d0aa; transition:transform .2s,box-shadow .3s; margin-bottom:1rem; cursor:pointer; }
  .btn-primary:hover, .btn:hover { transform:scale(1.01); box-shadow:0 0 6px #fff6d0; }
  .btn-danger { background:#6b0000; color:#fff; border:1px solid #aa2222; }

  /* Divider */
  .divider { display:flex; align-items:center; margin:1.5rem 0; }
  .divider::before, .divider::after { content:''; flex:1; height:1px; background:#735816; }
  .divider span { margin:0 .5rem; color:#e0d6b3; font-size:.875rem; }

  /* Google icon & spinner */
  .google-icon { width:1rem; height:1rem; }
  .spinner { border:3px solid rgba(255,255,255,.3); border-top:3px solid #fff1b8; border-radius:50%; width:1rem; height:1rem; animation:spin 1s linear infinite; }
  @keyframes spin { to{transform:rotate(360deg);} }

  /* Dropdowns */
  .select-wrapper { position:relative; width:100%; margin-bottom:1.25rem; }
  .select-wrapper select { width:100%; padding:1rem; background:#5a4712; color:#fff; border:2px solid #a88d22; border-radius:.75rem; appearance:none; font-size:1.05rem; font-weight:600; }
  .select-wrapper::after { content:"▼"; position:absolute; top:50%; right:1rem; transform:translateY(-50%); pointer-events:none; }

  /* Booking list */
  .booking-list { list-style:none; padding:0; margin-top:1rem; }
  .booking-list li { display:flex; align-items:center; border-bottom:1px solid #a88d22; padding:.75rem 0; }
  .booking-list span.timer { margin-left:auto; margin-right:0; font-variant-numeric:tabular-nums; }
  .booking-list button { 
    background:none; 
    border:none; 
    color:#f87171; 
    cursor:pointer; 
    font-size: 1.5rem;        /* större kors */
    line-height: 1;           /* ser till att höjden följer fonten */
    padding: 0.5rem;          /* ökar klickytan till ~44×44px */
    border-radius: 0.25rem;   /* rundar hörnen lite om du vill */
    touch-action: manipulation;/* optimerar för touch */
  }

    /* Gör varje <li> i booking-list till flex-container */
  .booking-list li {
    display: flex;
    align-items: center;
  }
  /* Skjut knappen längst ut till höger */
  .booking-list li button {
    margin-left: auto;
  }

  #confirmedBookings li span {
  color: #4caf50;
}
#confirmedBookings li.expired span {
  color: red;
  text-decoration: line-through;
}
.timer.expired {
  color: red;
  text-decoration: line-through;
}

  /* Dölj timer-spans i Pending & Confirmed lists men inte i Seated */
  #userBookings .timer,
  #confirmedBookings .timer {
    display: none !important;
  }

#seated-header {
  display: none;
}

  /* Definiera keyframes för pulse */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 10px 5px rgba(255, 215, 0, 0.7);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  }
}

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  border: 2px solid rgba(0,0,0,0.1);
  border-left-color: currentColor;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
  animation: spin 0.6s linear infinite;
}


/* Klassen som ger dropdownen glöd och pulsering */
.select-wrapper.highlight select {
  animation: pulse 2s infinite;
}


  /* Mobile adjustments */
  @media (max-width:640px) {
    /* Only dashboard should fix logo/profile; index stays centered */
    body.dashboard .logo-img {
      position:fixed; top:calc(env(safe-area-inset-top)); left:1rem; width:80px; margin:0;
    }
    body.dashboard .profile-img {
      position:fixed; top:calc(env(safe-area-inset-top)); right:1rem; width:80px; margin:0;
    }
  body.dashboard .page-container {
    /* Minska eller öka den sista siffran för att flytta Welcome upp/ner */
    padding-top: calc(env(safe-area-inset-top) + 0);
    overflow: hidden;
  }
  body.dashboard .auth-panel {
  margin-top: calc(env(safe-area-inset-top) + 0);
}

    #signOutBtn   { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); width:90%; max-width:220px; }
  }