/* ==========================================================
   EP4 Launch Downtime Notice - Banner + Modal
   Loaded on easyprompter.pro.html and easyprompter.free.html.
   Class names keep their ep4-beta / beta-invite prefixes so the
   existing vex modal theme and JS selectors keep matching.
   ========================================================== */

/* === Banner === */
.ep4-beta-banner {
   position: relative;
   z-index: 30;
   background: rgba(17, 24, 39, 0.97);
   border-bottom: 3px solid #f59e0b;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   animation: ep4BannerSlide 0.5s ease-out
}

@keyframes ep4BannerSlide {
   from {
      transform: translateY(-100%)
   }

   to {
      transform: translateY(0)
   }
}

.ep4-beta-banner-content {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   max-width: 1280px;
   margin: 0 auto;
   padding: 12px 52px;
   gap: 16px;
   text-align: left
}

.ep4-beta-label-group {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   flex: 0 0 auto
}

.ep4-beta-warning-icon {
   width: 20px;
   height: 20px;
   color: #f59e0b;
   flex: 0 0 auto
}

.ep4-beta-badge {
   background: #fbbf24;
   color: #3b1d06;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.5px;
   padding: 4px 11px;
   border-radius: 3px;
   text-transform: uppercase;
   white-space: nowrap
}

.ep4-beta-text {
   min-width: 0;
   flex: 1 1 auto;
   color: rgba(255, 255, 255, 0.92);
   font-size: 14px;
   font-weight: 400;
   line-height: 1.45
}

.ep4-beta-strong {
   color: #f9fafb;
   font-size: inherit;
   font-weight: 600;
   letter-spacing: 0.1px
}

.ep4-beta-sub {
   display: block;
   margin-left: 0;
   color: rgba(255, 255, 255, 0.78);
   font-size: inherit;
   font-weight: 400
}

.ep4-beta-cta {
   background: rgba(255, 255, 255, 0.08);
   color: #fff !important;
   border: 1px solid rgba(255, 255, 255, 0.14);
   padding: 7px 12px;
   border-radius: 6px;
   font-size: 13px;
   font-weight: 600;
   text-transform: none;
   letter-spacing: 0.1px;
   transition: all 0.2s ease;
   white-space: nowrap;
   min-width: auto !important
}

.ep4-beta-cta::after {
   content: '\203A';
   margin-left: 7px;
   color: #fbbf24;
   font-size: 18px;
   font-weight: 700;
   line-height: 0;
   vertical-align: -1px
}

.ep4-beta-cta:hover {
   background: rgba(255, 255, 255, 0.16);
   color: #fff;
   border-color: rgba(255, 255, 255, 0.28)
}

.ep4-beta-dismiss {
   position: absolute;
   right: 14px;
   top: 8px;
   background: none;
   border: 0;
   -webkit-appearance: none;
   appearance: none;
   font-family: inherit;
   color: rgba(255, 255, 255, 0.6);
   font-size: 22px;
   line-height: 1;
   cursor: pointer;
   padding: 0 5px;
   transition: color 0.2s;
   min-width: auto !important
}

.ep4-beta-dismiss:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px
}

.ep4-beta-dismiss:hover {
   color: #fff
}

@media (prefers-reduced-motion: reduce) {
   .ep4-beta-banner {
      animation: none
   }

   .ep4-beta-cta,
   .ep4-beta-dismiss,
   .ep4-beta-join-btn {
      transition: none !important
   }

   .ep4-beta-cta:hover,
   .ep4-beta-join-btn:hover {
      transform: none !important
   }
}

/* Marketing home: the notice is the first item in normal document flow. */
.ep4-beta-banner-inline {
   position: static;
   animation: none;
   z-index: auto;
   border-top: 0;
   border-bottom: 3px solid #f59e0b
}

.ep4-beta-banner-inline .ep4-beta-banner-content {
   padding-top: 12px;
   padding-bottom: 12px
}

.modal-blur .ep4-beta-banner.ep4-beta-banner-inline {
   display: block
}

@media only screen and (max-width: 768px) {
   .ep4-beta-banner-content {
      flex-direction: column;
      padding: 12px 40px;
      gap: 10px;
      text-align: center
   }

   .ep4-beta-text {
      font-size: 13px
   }

   .ep4-beta-sub {
      margin-left: 0
   }

   .ep4-beta-cta {
      width: auto;
      text-align: center
   }

   .ep4-beta-dismiss {
      right: 10px
   }
}

.modal-blur .ep4-beta-banner {
   display: none
}

/* --ep4-banner-h is published by the notice script on load and resize. */
.ep4-banner-visible nav.menu {
   top: var(--ep4-banner-h, 62px)
}

.ep4-banner-visible .edit-page {
   padding-top: calc(90px + var(--ep4-banner-h, 62px))
}

.ep4-banner-visible .page-prompter nav.menu,
.page-prompter .ep4-banner-visible nav.menu,
.page-prompter.ep4-banner-visible nav.menu {
   top: 0 !important
}

.page-prompter .ep4-beta-banner,
.page-prompter .vex.beta-invite {
   display: none !important
}

.page-prompter.modal-blur .prompter-page,
.page-prompter.modal-blur .menu {
   filter: none !important;
   pointer-events: auto !important
}

/* === Modal === */
.vex.vex-theme-ep.beta-invite .vex-content {
   border: 1px solid rgba(99, 102, 241, 0.25);
   border-radius: 12px;
   background: #0c0a1a;
   overflow: hidden;
   position: relative
}

.vex.vex-theme-ep.beta-invite .vex-content::before {
   content: '';
   position: absolute;
   width: 500px;
   height: 500px;
   top: -200px;
   left: -100px;
   background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
   pointer-events: none;
   z-index: 0
}

.vex.vex-theme-ep.beta-invite .vex-content::after {
   content: '';
   position: absolute;
   width: 400px;
   height: 400px;
   bottom: -150px;
   right: -100px;
   background: radial-gradient(circle, rgba(6, 182, 212, 0.3) 0%, transparent 70%);
   pointer-events: none;
   z-index: 0
}

.ep-modal.beta-invite-modal {
   position: relative;
   padding: 0 50px
}

.ep-modal.beta-invite-modal .ep4-beta-label {
   font-size: 11px;
   letter-spacing: 5px;
   background: linear-gradient(135deg, #6366f1, #06b6d4);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 22px;
   text-transform: uppercase;
   font-weight: 700
}

.ep-modal.beta-invite-modal h1 {
   margin-top: 25px
}

.ep-modal.beta-invite-modal h2 {
   font-size: 22px;
   margin-bottom: 10px;
   color: #e2e8f0;
   font-weight: 400
}

.ep-modal.beta-invite-modal .ep4-warn-box {
   background: rgba(245, 158, 11, 0.12);
   border-left: 3px solid #f59e0b;
   border-radius: 6px;
   padding: 14px 18px;
   margin: 0 auto 28px;
   max-width: 420px;
   text-align: left;
   font-size: 14px;
   line-height: 1.6;
   color: #fde68a
}

.ep-modal.beta-invite-modal .ep4-warn-box strong {
   color: #fff;
   font-weight: 600
}

.ep-modal.beta-invite-modal .ep4-info-box {
   background: #172033;
   border-left: 3px solid #3b82f6;
   border-radius: 6px;
   padding: 14px 18px;
   margin: 0 auto 28px;
   max-width: 420px;
   text-align: left;
   font-size: 14px;
   line-height: 1.6;
   color: #dbeafe
}

.ep-modal.beta-invite-modal ul {
   text-align: left;
   max-width: 380px;
   margin: 0 auto;
   padding: 0
}

.ep-modal.beta-invite-modal ul li {
   color: #e2e8f0;
   margin-bottom: 10px;
   font-size: 15px;
   font-weight: 400
}

.ep-modal.beta-invite-modal ul li i {
   color: #818cf8;
   margin-right: 10px;
   font-size: 13px
}

.ep4-beta-join-btn {
   background: linear-gradient(135deg, #6366f1, #06b6d4) !important;
   border: none !important;
   color: #fff !important;
   padding: 14px 48px !important;
   font-size: 15px !important;
   font-weight: 600 !important;
   letter-spacing: 2px;
   border-radius: 8px !important;
   transition: all 0.3s ease !important;
   box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
   margin: 26px 0 10px !important
}

.ep4-beta-join-btn:hover {
   box-shadow: 0 6px 28px rgba(99, 102, 241, 0.5);
   transform: translateY(-2px)
}

.ep4-beta-fine {
   font-size: 12px !important;
   color: #94a3b8 !important;
   margin-top: 16px;
   margin-bottom: 24px !important
}

.ep4-beta-fine a {
   color: #fff !important;
   text-decoration: underline
}

.ep4-beta-fine a:hover {
   color: #fff !important;
   text-decoration: underline
}

/* ==========================================================
   EP4 Migrate Notice - shown on legacy.easyprompter.com only.
   Same banner and modal chassis as the downtime notice, keyed
   indigo instead of amber so it reads as an invitation, not a
   warning. Markup lives in the app pages and index.html; logic
   in scripts/ep4-migrate.js.
   ========================================================== */
.ep4-migrate-banner {
   border-bottom-color: #6366f1
}

.ep4-migrate-banner .ep4-beta-warning-icon {
   color: #818cf8
}

.ep4-migrate-banner .ep4-beta-badge {
   /* Indigo to deep indigo: white text stays above 4.5:1 across the whole
      gradient. The cyan end of the modal gradient would fall to 2.4:1. */
   background: linear-gradient(135deg, #6366f1, #4f46e5);
   color: #fff
}

.ep4-migrate-banner .ep4-beta-cta::after {
   color: #a5b4fc
}

.ep4-migration-complete {
   background: #111827;
   border-bottom-color: #2563eb
}

.ep4-migration-complete .ep4-beta-badge {
   background: #1d4ed8;
   color: #fff
}

.ep4-migration-complete .ep4-beta-sub a {
   color: #bfdbfe;
   text-decoration: underline
}

.ep4-migration-complete .ep4-beta-cta {
   background: #2563eb;
   border-color: #3b82f6
}

.ep4-migration-complete .ep4-beta-cta:hover {
   background: #1d4ed8;
   border-color: #60a5fa
}

/* --- Dialog fit and centering (downtime and migrate modals) ---
   The stock vex theme anchors the dialog 100px from the top and autofocuses
   its OK button; on a short viewport the overlay then scrolls to the button
   and the top of the dialog is cut off. Centre it when it fits, scroll from
   the top when it does not, and drop the OK button: the close icon and the
   primary link are the two actions. */
.vex.vex-theme-ep.beta-invite {
   display: flex;
   flex-direction: column;
   padding: 16px 0
}

.vex.vex-theme-ep.beta-invite .vex-content {
   margin: auto;
   max-width: calc(100% - 32px)
}

/* Only once scripts/ep4-migrate.js has made the dialog keyboard-closable
   (Escape, focusable close control). The downtime modal on www is never
   hardened, so it keeps vex's OK button as its keyboard exit. */
.vex.vex-theme-ep.beta-invite[data-ep4-a11y="1"] .vex-dialog-buttons {
   display: none
}

.ep-modal.beta-invite-modal h1 {
   margin-top: 14px;
   margin-bottom: 4px
}

.ep-modal.beta-invite-modal .ep4-beta-label {
   margin-bottom: 12px
}

.ep-modal.beta-invite-modal h2 {
   margin-top: 6px;
   margin-bottom: 6px
}

.ep-modal.beta-invite-modal .ep4-warn-box,
.ep-modal.beta-invite-modal .ep4-info-box {
   margin-bottom: 16px
}

.ep-modal.beta-invite-modal ul li {
   margin-bottom: 6px;
   padding-left: 24px;
   text-indent: -24px
}

.ep-modal.beta-invite-modal ul li i {
   display: inline-block;
   width: 24px;
   margin-right: 0;
   text-indent: 0
}

.ep4-beta-join-btn {
   margin: 14px 0 4px !important
}

.ep4-beta-fine {
   margin-top: 8px;
   margin-bottom: 14px !important
}

@media only screen and (max-width: 768px) {
   .ep-modal.beta-invite-modal {
      padding: 0 22px
   }
}