/* =====================================================================
   Modals: age gate, registration, login, email sent, cookie preferences
   ===================================================================== */
.modal { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--t-med) var(--ease); }
.modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 560px; margin: auto;
  background: var(--c-bg); border: 1px solid var(--c-line); padding: 47px;
  display: flex; flex-direction: column; gap: 32px; color: var(--c-white);
  opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.9);
}
.modal__dialog:focus { outline: none; }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal--gate { z-index: 260; }
.modal--gate .modal__backdrop { background: rgba(7, 6, 12, .9); }
.modal__dialog--age { max-width: 660px; align-items: center; text-align: center; }
.modal__dialog--register { max-width: 860px; }
.modal__dialog--login { max-width: 560px; }
.modal__dialog--email { max-width: 560px; }
.modal__dialog--cookies { max-width: 780px; gap: 24px; }
.modal__dialog--cookies .form { gap: 24px; }
.modal__state { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.modal__state[hidden] { display: none; }

.modal__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.modal__header--end { justify-content: flex-end; }
.modal__title-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.modal__eyebrow { font: 700 12px/var(--lh-osw) var(--f-osw); letter-spacing: 2px; color: var(--c-orange); text-transform: uppercase; }
.modal__title { font: 700 36px/var(--lh-osw) var(--f-osw); color: var(--c-white); }
.modal__dialog--register .modal__title, .modal__dialog--cookies .modal__title { font-size: 38px; }
.modal__title-part--accent { color: var(--c-orange); }
.modal__text { font: 400 14px/1.5 var(--f-plex); color: var(--c-gray); }
.modal__text-link { font: 700 13px/1 var(--f-osw); letter-spacing: .5px; color: var(--c-orange); text-decoration: underline; text-underline-offset: 3px; }
.modal__close { width: 40px; height: 40px; flex: none; border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center; font: 700 22px/1 var(--f-osw); color: var(--c-white); transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-med) var(--ease-out); }
.modal__close:hover { border-color: var(--c-orange); color: var(--c-orange); transform: rotate(90deg); }
.modal__rule { height: 1px; background: var(--c-line); margin: 0; width: 100%; }

/* Age gate */
.gate__brand { font: 700 18px/var(--lh-osw) var(--f-osw); letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-white); }
.gate__badge { width: 80px; height: 80px; border: 3px solid var(--c-orange); display: flex; align-items: center; justify-content: center; font: 700 36px/1 var(--f-osw); color: var(--c-orange); animation: badge-pulse 2.4s var(--ease) infinite; }
.gate__badge--muted { animation: none; border-color: var(--c-line); color: var(--c-gray); }
@keyframes badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,0,.35); } 50% { box-shadow: 0 0 0 14px rgba(255,90,0,0); } }
.gate__eyebrow { font: 700 12px/var(--lh-osw) var(--f-osw); letter-spacing: 2px; text-transform: uppercase; color: var(--c-orange); }
.gate__title { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gate__title-line { font: 700 44px/1.1 var(--f-osw); letter-spacing: -.5px; color: var(--c-white); }
.gate__title-line--accent { font-size: 52px; color: var(--c-orange); }
.gate__text { font: 400 14px/1.5 var(--f-plex); color: var(--c-gray); text-align: center; }
.gate__actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.modal--gate .btn--secondary { color: var(--c-white); }

/* Registration / login form specifics */
.form__row--3 > .field { flex: 1; }
.consent { background: var(--c-input); border: 1px solid var(--c-line); padding: 15px; display: flex; flex-direction: column; gap: 12px; }
.consent .field__error { margin-top: -6px; margin-left: 28px; }
.form__actions--cookies { gap: 12px; align-items: stretch; }

/* Email sent */
.sent { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.sent__icon { width: 64px; height: 64px; border: 2px solid var(--c-orange); display: flex; align-items: center; justify-content: center; color: var(--c-orange); }
.sent__icon svg { animation: check-draw .6s var(--ease-out) .2s both; }
@keyframes check-draw { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.sent__title { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.sent__title-line { font: 700 38px/var(--lh-osw) var(--f-osw); color: var(--c-white); }
.sent__title-line--accent { color: var(--c-orange); }
.sent__text { font: 400 14px/1.5 var(--f-plex); color: var(--c-gray); }
.sent__hint { font: 400 12px/1.4 var(--f-plex); color: var(--c-gray); }
.sent .btn { width: 100%; }

/* Cookie preferences */
.prefs { display: flex; flex-direction: column; }
.prefs__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0 19px; border-bottom: 1px solid var(--c-line); }
.prefs__row:last-child { border-bottom: 0; }
.prefs__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.prefs__title { font: 700 14px/var(--lh-osw) var(--f-osw); color: var(--c-white); }
.prefs__num { font-size: 20px; color: var(--c-orange); }
.prefs__text { font: 400 13px/1.4 var(--f-plex); color: var(--c-gray); }
.prefs__control { flex: none; display: flex; align-items: center; }
.prefs__always { border: 1px solid var(--c-orange); padding: 6px 10px; font: 700 10px/1.5 var(--f-osw); color: var(--c-orange); }

@media (max-width: 767px) {
  .modal { padding: 0; align-items: stretch; }
  .modal__dialog { max-width: none; min-height: 100%; margin: 0; padding: 19px 20px; gap: 24px; border-left: 0; border-right: 0; }
  .modal__dialog--age { justify-content: center; gap: 28px; }
  .modal__state { gap: 28px; }
  .modal__header { flex-direction: column-reverse; gap: 12px; }
  .modal__header--end { flex-direction: row; }
  .modal__header .modal__close { align-self: flex-end; }
  .modal__title { font-size: 32px; line-height: 1.1; }
  .modal__dialog--register .modal__title, .modal__dialog--cookies .modal__title { font-size: 32px; }
  .modal__title-part { display: block; }
  .modal__title-part--accent { font-size: 36px; }
  .form__row { flex-direction: column; }
  .form { gap: 24px; }
  .gate__title-line { font-size: 36px; }
  .gate__title-line--accent { font-size: 42px; }
  .sent__title-line { font-size: 32px; }
  .sent__title-line--accent { font-size: 36px; }
  .sent__hint { font-size: 13px; }
  .prefs__row { flex-direction: column; align-items: stretch; gap: 12px; }
  .prefs__info { flex-direction: column-reverse; }
  .prefs__control { position: absolute; right: 0; }
  .prefs__row { position: relative; }
  .prefs__title { padding-right: 100px; }
}