/* ================================
   DRAWER
================================ */

.drawer{ position:fixed; inset:0; display:none; z-index:50; }
.drawer.is-open{ display:block; }

.drawer__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }

.drawer__panel{
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:min(420px, 92vw);
  background:rgba(10,10,14,.98);
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  animation: slideIn .25s ease forwards;
}
@keyframes slideIn{ to{ transform:translateX(0); } }

.drawer__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.drawer__body{ padding:16px; flex:1; overflow:auto; }
.drawer__foot{ padding:16px; border-top:1px solid rgba(255,255,255,.10); }
.drawer__title{ font-weight:900; }

/* ================================
   ORIGINAL MODAL (if you still use it)
================================ */

.modal{
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
}
.modal.is-open{ display:block; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
  animation: modalFade .22s ease both;
}

.modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-46%) scale(.98);
  width: min(560px, 92vw);
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(800px 340px at 10% 10%, rgba(215,192,138,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: modalPop .26s ease both;
}

@keyframes modalFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalPop{
  from{ opacity:0; transform: translate(-50%,-44%) scale(.96); filter: blur(8px); }
  to{ opacity:1; transform: translate(-50%,-46%) scale(1); filter:none; }
}

.modal__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modal__body{ padding: 16px; }
.modal__foot{
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

/* ================================
   NOTIFY MODAL (center)
================================ */

.notifyModal{ display:none; }
.notifyModal.is-open{ display:block; }

.notifyModal__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 10060;
}

.notifyModal__panel{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 28px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(700px 280px at 20% 10%, rgba(215,192,138,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  padding: 16px;
  z-index: 10070;
}

.notifyModal__close{
  position:absolute;
  right: 10px;
  top: 10px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.65);
  font-size: 16px;
  cursor: pointer;
  pointer-events: auto !important;
  z-index: 10080;
  touch-action: manipulation;
}

.notifyModal__title{ font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.notifyModal__sub{ margin-top: 6px; color: rgba(255,255,255,.65); font-size: 12px; }

.notifyModal__row{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.notifyModal__row .input{ margin-top:0; flex: 1 1 220px; }

/* ================================
   NOTIFY OVERLAY (top, above countdown)
================================ */

.notifyOverlay{ display:none; }
.notifyOverlay.is-open{ display:block; }

.notifyOverlay__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10040;
}

.notifyOverlay__panel{
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 28px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(700px 280px at 20% 10%, rgba(215,192,138,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  padding: 16px;
  z-index: 10050;
  animation: notifyIn .22s ease-out;
}

@keyframes notifyIn{
  from{ opacity:0; transform: translate(-50%, -70%) scale(.98); filter: blur(8px); }
  to{ opacity:1; transform: translate(-50%, -62%) scale(1); filter: blur(0); }
}

.notifyOverlay__close{
  position:absolute;
  right: 10px;
  top: 10px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.65);
  font-size: 16px;
  cursor: pointer;
  pointer-events: auto !important;
  z-index: 10060;
  touch-action: manipulation;
}

.notifyOverlay__title{
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.notifyOverlay__sub{
  margin-top: 6px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
}
.notifyOverlay__row{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.notifyOverlay__row .input{
  margin-top: 0;
  flex: 1 1 220px;
}
/* CONTACT MODAL (ContactModal used by contact.js) */
.contactModal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.contactModal.is-open{
  display: flex;
}

.contactModal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}

.contactModal__panel{
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  border-radius: var(--r, 22px);
  border: 1px solid var(--line, rgba(255,255,255,.12));
  background: rgba(10,10,14,.72);
  box-shadow: var(--shadow, 0 22px 90px rgba(0,0,0,.55));
  padding: 18px;
}

.contactModal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  background: rgba(255,255,255,.06);
  color: var(--text, rgba(255,255,255,.92));
  cursor: pointer;
}

.contactModal__title{
  margin: 0 44px 6px 0;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 18px;
}

.contactModal__subtitle{
  margin: 0 0 14px;
  color: var(--muted, rgba(255,255,255,.70));
  line-height: 1.6;
  font-size: 13px;
}

.contactModal__form{
  display: grid;
  gap: 10px;
}

.contactModal__label{
  display: grid;
  gap: 6px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, rgba(255,255,255,.70));
}

.contactModal__input,
.contactModal__textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  background: rgba(255,255,255,.04);
  color: var(--text, rgba(255,255,255,.92));
  padding: 12px 12px;
  outline: none;
}

.contactModal__textarea{
  resize: vertical;
  min-height: 120px;
}

.contactModal__status{
  border: 1px solid rgba(215,192,138,.22);
  background: rgba(215,192,138,.08);
  border-radius: 14px;
  padding: 10px 12px;
  color: rgba(255,255,255,.88);
  font-size: 13px;
}

.contactModal__submit{
  margin-top: 4px;
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(215,192,138,.35);
  background: rgba(215,192,138,.10);
  color: rgba(255,255,255,.92);
  padding: 12px 14px;
  cursor: pointer;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
}

.contactModal__submit:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Terms Gate frame inside modal */
.termsFrame{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  height: 320px;            /* scroll area height */
  background: rgba(0,0,0,.25);
}

.termsFrame__iframe{
  width: 100%;
  height: 100%;
  border: 0;
}