/* =========================================================
   MODAL CLUB
   ========================================================= */

.modal-club[hidden]{
  display:none !important;
}


.modal-club{
  position:fixed;
  inset:0;

  z-index:9999;

  display:flex;
  align-items:flex-start;
  justify-content:center;

  overflow-y:auto;

  padding:var(--space-6);

  -webkit-overflow-scrolling:touch;
}

/* =========================================================
   OVERLAY
   ========================================================= */

.modal-club__overlay{
  position:absolute;
  inset:0;

  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(4px);
}


/* =========================================================
   WINDOW
   ========================================================= */

.modal-club__window{
  position:relative;
  z-index:2;

  width:100%;
  max-width:520px;
  max-height:calc(100dvh - 48px);

  border-radius:var(--radius-xl);

  background:var(--color-bg);
  color:var(--color-text);

  border:1px solid var(--color-border);

  overflow:hidden;
  overflow:auto;

  box-shadow:0 30px 80px rgba(0,0,0,0.35);
}


/* =========================================================
   CLOSE
   ========================================================= */

.modal-club__close{
  position:absolute;

  top:12px;
  right:12px;

  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:999px;

  background:rgba(255,255,255,0.06);

  color:var(--color-text);

  cursor:pointer;

  font-size:1.2rem;
  line-height:1;

  transition:0.2s ease;
}

.modal-club__close:hover{
  background:rgba(255,255,255,0.12);
}


/* =========================================================
   CONTENT
   ========================================================= */

.modal-club__content{
  padding:var(--space-16);
}


/* =========================================================
   TITLE
   ========================================================= */

.modal-club__title{
  margin:0 0 var(--space-6);

  text-align:center;

  font-size:clamp(1.6rem,4vw,2.2rem);
  line-height:1;

  color:var(--color-primary);
}


/* =========================================================
   IMAGE
   ========================================================= */

.modal-club__image{
  width:100%;
  aspect-ratio:16/9;

  object-fit:cover;

  display:block;

  border-radius:var(--radius-lg);

  margin-bottom:var(--space-8);
}


/* =========================================================
   TEXT
   ========================================================= */

.modal-club__text{
  margin:0 0 var(--space-8);

  text-align:center;

  color:var(--color-muted);

  line-height:1.5;
}


/* =========================================================
   FORM
   ========================================================= */

.modal-club__form{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}


/* =========================================================
   INPUTS
   ========================================================= */

.modal-club__form input[type="text"],
.modal-club__form input[type="email"]{
  width:100%;

  box-sizing:border-box;

  padding:14px 16px;

  border-radius:var(--radius-md);

  border:1px solid var(--color-border);

  background:var(--color-surface);

  color:var(--color-text);

  font-size:1rem;

  outline:none;

  transition:border-color .2s ease,
             background .2s ease;
}
.modal-club__form input:focus{
  border-color:var(--color-primary);
}


/* =========================================================
   BUTTON
   ========================================================= */

.modal-club__form .button{
  width:100%;
}


/* =========================================================
   CONSENT
   ========================================================= */

.modal-club .form-consent{
  margin-top:var(--space-2);
}

.modal-club .form-consent__row{
  display:flex;
  align-items:flex-start;

  gap:12px;

  text-align:left;

  font-size:.82rem;
  line-height:1.45;

  color:var(--color-muted);
}

.modal-club .form-consent__row + .form-consent__row{
  margin-top:var(--space-4);
}

.modal-club .form-consent__row input{
  flex:0 0 16px;

  width:16px;
  height:16px;

  margin-top:2px;
}

.modal-club .form-consent__row span{
  flex:1;
}

.modal-club .form-consent__row a{
  color:var(--color-primary);
  text-decoration:none;
}

.modal-club .form-consent__row a:hover{
  text-decoration:underline;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:640px){

  .modal-club{
    padding:var(--space-4);
  }

  .modal-club__content{
    padding:var(--space-8);
  }

  .modal-club__title{
    font-size:1.6rem;
  }

  .modal-club__text{
    font-size:.95rem;
  }

}

.modal-club__honeypot{
  position:absolute !important;
  left:-9999px !important;
  opacity:0 !important;
  pointer-events:none !important;
}