@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800&family=Pacifico&display=swap');

:root{
    --bg:#0b2239;         /* kolor stołów */
    --seat:#1f7a8c;       /* wolne */
    --seat-hover:#289bb0;
    --seat-selected:#ffd166;
    --seat-taken:#8b8b8b;
    --grid:#e9eef3;
    --text:#0b2239;
    --btn:#14a44d;
    --btn-hover:#0f8f42;

}

html,body{background-color:#e0d9c9;margin:0;font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;color:#111}
body {
    background:#e0d9c9;
}    
.container{max-width:1100px;margin:24px auto;padding:16px}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family:"Nunito"
}
.brand__logo {
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    height: 80px;      
}
.brand__logo img {
    height: 80px;
}    

.brand__name {
    font-weight: 800;
    letter-spacing: .3px;
    font-size: 32px;
    padding-top: 0px;
    color: #333;
}
.ribbon {
    display: inline-block;
    padding: 8px 14px;
    background: #a31b1b;
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    box-shadow: 0 8px 5px rgba(180, 49, 49, 0.25);
}

.welcome {
    padding:20px 0;
}


footer a, .regulamin, .list-group a {
  color: var(--green);
  font-weight: 800;
  text-decoration: none;
}

#events {
    border-top:1px solid #e0e0e0;
    border-bottom:1px solid #e0e0e0;
    padding:10px 0;
}

.list-group {width:100%;}
.list-group img {width:100%;border-radius:10px;}
.list-group h3 {float:left;}
.list-group h4 {float:right;}
.list-group .btn {float:right;padding:4px 10px;background-color: var(--btn);color:#fff;border-radius: 4px;font-weight: 300;}
.list-group .btn:hover {background-color: var(--btn-hover);}


.card{background:#fff;border:1px solid #f1e2b3;border-radius:12px;padding:14px 16px;box-shadow:0 3px 10px rgba(20,42,78,.06)}

.wrap{display:grid;grid-template-columns: 1fr 360px;gap:18px;align-items:start;margin-top:20px;}


.hall{position:relative;background:linear-gradient(180deg,#fff,#f5f9fc);border:1px solid #f1e2b3;border-radius:14px;min-height:960px;overflow:hidden;padding:20px;}
.stage{inset:16px;outline:1px dashed #d8e2ec;border-radius:12px;z-index:100;text-align:center;margin:20px 100px;padding:20px 0;font-weight:bold;}
.exit {clear:both;inset:16px;outline:2px dashed #d8e2ec;border-radius:12px;z-index:100;text-align:center;width:200px;padding:10px 0;position: relative;top:20px;left:calc(50% - 101px);margin-bottom:10px;font-weight:bold;}

.board{background:var(--bg);box-shadow:0 4px 14px rgba(1,27,56,.18);position:relative;z-index:1001;height:50px!important;width:50px!important;}
.collapse {border-collapse: collapse;}
.text-center {text-align:center!important;}

.left {float:left;}
.right {float:right}
.text-end {text-align: right;}

.round{position:absolute;width:120px;height:120px;border-radius:999px;background:var(--bg);box-shadow:0 4px 14px rgba(1,27,56,.18)}

.seat{width:34px;height:34px;border-radius:50%;background:var(--seat);display:inline-grid;place-items:center;font-size:11px;color:#fff;cursor:pointer;user-select:none;transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease;cursor: pointer;}
.seat:hover{transform:translateY(-1px) scale(1.02);background:var(--seat-hover)}
.seat.taken{background:var(--seat-taken);cursor:not-allowed}
.seat.selected{background:var(--seat-selected);color:#222;box-shadow:0 0 0 2px #997a00 inset}

.legend{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
    .legend .dot{width:14px;height:14px;border-radius:50%}
    .card{background:#fff;border:1px solid #f1e2b3;border-radius:12px;padding:14px 16px;box-shadow:0 3px 10px rgba(20,42,78,.06)}
    .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
    button{appearance:none;border:0;background:#0b66ff;color:#fff;padding:14px 14px;border-radius:6px;font-weight:300;cursor:pointer;text-transform: uppercase;}
    button.confirm {background:#00a050;}
    button:disabled{background:#b7c7ed;cursor:not-allowed}
    .muted{color:#56637a;font-size:13px}
    .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;margin-top:6px}
    .tag{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;border-radius:999px;border:1px solid #e1e7ef;background:#f7fafd;font-size:12px;color:#2b3d55}
    .summary {padding:10px 0;border-top:1px solid #f1e2b3;border-bottom:1px solid #f1e2b3;margin:10px 0;}
    .summary strong {float:right;}
    .form {display:grid; gap:8px;margin:10px 0;}
    .input {padding: 8px 4px;border:1px solid #dde3ea;border-radius:3px;font-size:1em;}
    .border-bottom {border-bottom: 1px solid #25507a;}
    .flex {display:flex;gap:10px};
    .flex div {text-align:left;}
    #thankyou-text {text-align:left;padding: 6px;}
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(11, 34, 57, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      transition: opacity .25s ease;
    }
    .overlay.hidden { 
      opacity: 0;
      pointer-events: none;
    }

    .modal {
      background: #fff;
      border-radius: 16px;
      padding: 24px 32px;
      max-width: 820px;
      width: 90%;
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
      text-align: center;
      animation: popIn .25s ease;
    }
    .modal h2 { margin: 0 0 10px; color: #0b2239; }
    .modal p { color: #333; line-height: 1.5; }
    .modal button {
      margin-top: 20px;
      background: #0b66ff;
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 10px 20px;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s;
    }
    .modal button:hover { background: #094ed4; }

    @keyframes popIn {
      from { transform: scale(0.8); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }

  /* Płótno na wierzchu, bez blokowania interakcji */
  #fw-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -100;
  }
  /* Preferencje dostępności: ogranicz efekty przy reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    #fw-canvas { display: none; }
  }    

  .consents {
  padding: 10px;
  background: #fffdf6;
  border: 1px dashed #f1e2b3;
  border-radius: 16px;
  font-size:14px;
}
.consents div {padding-bottom:10px;}

footer a, .regulamin {
  color: var(--green);
  font-weight: 800;
  text-decoration: none;
}

    /* drobna responsywność */
    @media (max-width: 960px){
      .wrap{grid-template-columns:1fr}
      .hall{min-height:620px;padding:10px;}
      .board{background:var(--bg);box-shadow:0 4px 14px rgba(1,27,56,.18);position:relative;z-index:1001;height:30px!important;width:30px!important;}
      .stage{inset:16px;outline:1px dashed #d8e2ec;border-radius:12px;z-index:100;text-align:center;margin:20px 50px;padding:20px 0;}

.brand__name {
  font-weight: 800;
  letter-spacing: .3px;
  font-size: 24px;
  padding-top: 10px;
  color: #333;
}

    }
@media (max-width: 600px) {
  .flex {
    flex-direction: column;
  }
}

.is-invalid {border:2px solid #F00!important}