/* =============================================================
   demo-gate.css - the lead gate shown in place of the login screen.

   #view-demo-gate stands where #view-login would, so it sits on the same
   z-index layer (.login-view-wrapper is 99999 in layout.css).

   Colours and radii follow .login-card, so the gate and the login screen read
   as one product. Breakpoints stay on the scale css/responsive.css defines
   (768/480).
   ============================================================= */

.demo-gate-view {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(circle at 50% 30%, #0d1e3a 0%, #060b17 100%);
  display: flex;
  justify-content: center;
  padding: 20px;
  /* body is overflow:hidden, so this view is what scrolls - never the card, which
     would put a scrollbar inside the glass panel and cut it off at the bottom. */
  overflow-y: auto;
}

.demo-gate-view.hidden {
  display: none !important;
}

/* A real screenshot of the dashboard, blurred and dimmed, so the visitor can see
   what they are being asked to register for. Dark enough that the card on top
   keeps its contrast. */
.demo-gate-backdrop {
  /* fixed, not absolute: an absolute child of a scroll container scrolls away
     with the content and leaves bare gradient below the fold. */
  position: fixed;
  inset: 0;
  background-image: url("../Image/demo-gate-backdrop.png");
  background-size: cover;
  background-position: center top;
  filter: blur(14px) saturate(0.75);
  transform: scale(1.08); /* hides the soft edge blur leaves behind */
  opacity: 0.38;
  pointer-events: none;
}

.demo-gate-card {
  position: relative; /* stacks above .demo-gate-backdrop */
  z-index: 1;
}

.demo-gate-card {
  width: 100%;
  max-width: 480px;
  /* centres the card while there is room, and scrolls cleanly when there is not -
     align-items:center on the parent would make the top unreachable. */
  margin: auto;
  background: rgba(13, 25, 48, 0.92);
  border: 1px solid rgba(0, 210, 255, 0.25);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 210, 255, 0.15);
  border-radius: 20px;
  padding: 32px 28px;
  color: var(--text-primary);
  animation: demoGateIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes demoGateIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.demo-gate-lang {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -8px;
}

.demo-gate-lang select {
  background: rgba(6, 11, 23, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.8rem;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
}

.demo-gate-header {
  text-align: center;
  margin-bottom: 22px;
}

.demo-gate-header img {
  height: 34px;
  object-fit: contain;
  margin-bottom: 14px;
}

.demo-gate-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.demo-gate-subtitle {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Three short promises: what the visitor gets, and what will not happen to them.
   A row of outlined pills rather than a panel - they are reassurances read in
   passing, not a block of content to stop and work through. */
.demo-gate-promises {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Green rather than the product cyan: cyan is what a selected module chip and the
   submit button look like, and these pills sit right above both - tinting them the
   same would read as something to click. Green also ties them to the shield on the
   privacy line, which makes the same kind of promise. */
.demo-gate-promises li {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(0, 230, 118, 0.38);
  background: rgba(0, 230, 118, 0.1);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Dấu tick vẽ bằng CSS, không thêm thẻ svg vào markup. */
.demo-gate-promises li::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 9px;
  border: solid #00e676;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* ---------- Step 1: the form ---------- */

.demo-gate-group {
  margin-bottom: 16px;
}

.demo-gate-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* Cyan, not red: in this card red means a field is wrong, and a required marker
     is not an error. */
.demo-gate-group label .required {
  color: #00d2ff;
  margin-left: 3px;
}

.demo-gate-group label .optional,
.demo-gate-group label .field-hint {
  margin-left: 6px;
  font-weight: 400;
  color: var(--text-muted);
}

.demo-gate-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.demo-gate-input-wrapper input,
.demo-gate-input-wrapper select {
  width: 100%;
  padding: 12px 16px 12px 42px;
  background: rgba(6, 11, 23, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: #fff;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: all 0.25s ease;
}

.demo-gate-input-wrapper select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* The native arrow disappears with appearance:none, so draw one. Anchored to the
   input wrapper, not the group: in the two-column grid the group is stretched to
   the height of its neighbour, which would drop the arrow below the field. */
.demo-gate-input-wrapper:has(select)::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.demo-gate-input-wrapper:has(select) {
  position: relative;
}

/* Options are drawn by the OS, which ignores the panel colours above. */
.demo-gate-input-wrapper select option {
  background: #0c1527;
  color: #fff;
}

.demo-gate-input-wrapper input::placeholder {
  color: var(--text-muted);
}

.demo-gate-input-wrapper input:focus,
.demo-gate-input-wrapper select:focus {
  border-color: #00d2ff;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.3);
}

/* A bad field stays red even while focused, so the blue glow is overridden too. */
.demo-gate-group.has-error .demo-gate-input-wrapper input,
.demo-gate-group.has-error .demo-gate-input-wrapper input:focus {
  border-color: rgba(255, 82, 82, 0.7);
  box-shadow: 0 0 12px rgba(255, 82, 82, 0.25);
}

.demo-gate-input-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  pointer-events: none;
}

.demo-gate-field-error {
  display: none;
  font-size: 0.76rem;
  color: #ff5252;
  margin-top: 6px;
}

.demo-gate-group.has-error .demo-gate-field-error {
  display: block;
}

/* Modules: tap to pick, several at a time. Cheaper for the visitor than typing,
   and it tells sales what to open the conversation with. */
.demo-gate-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-gate-chip {
  background: rgba(6, 11, 23, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.demo-gate-chip:hover {
  border-color: rgba(0, 210, 255, 0.4);
  color: var(--text-primary);
}

.demo-gate-chip.selected {
  background: rgba(0, 210, 255, 0.14);
  border-color: rgba(0, 210, 255, 0.55);
  color: #00d2ff;
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   anything hidden. Never announced, never tabbed into. */
.demo-gate-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.demo-gate-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 4px 0 18px;
}

.demo-gate-privacy svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #00e676;
}

.demo-gate-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #00d2ff 0%, #0072ff 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 210, 255, 0.4);
  transition: all 0.2s ease;
}

.demo-gate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 210, 255, 0.6);
}

.demo-gate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.demo-gate-secondary {
  display: block;
  width: 100%;
  margin-top: 16px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
  cursor: pointer;
  transition: color 0.2s ease;
}

.demo-gate-secondary:hover {
  color: #00d2ff;
}

.demo-gate-secondary u {
  color: #00d2ff;
  text-underline-offset: 3px;
}

/* ---------- Step 2: the account that was issued ---------- */

.demo-gate-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.4);
}

.demo-gate-success-icon svg {
  width: 28px;
  height: 28px;
  color: #00e676;
}

.demo-gate-cred {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(6, 11, 23, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.demo-gate-cred-label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.demo-gate-cred-value {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #00d2ff;
  word-break: break-all;
}

.demo-gate-copy-btn {
  flex-shrink: 0;
  background: rgba(0, 210, 255, 0.1);
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 8px;
  color: #00d2ff;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-gate-copy-btn:hover {
  background: rgba(0, 210, 255, 0.2);
}

/* The two reassurance lines under the credentials: where the confirmation went,
   and how long the account lasts. Quieter than .demo-gate-note on purpose - they
   are facts to register, not instructions to follow. */
.demo-gate-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.demo-gate-meta.hidden {
  display: none !important;
}

.demo-gate-meta svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--text-muted);
}

.demo-gate-meta b {
  color: var(--text-primary);
  font-weight: 600;
  word-break: break-all;
}

.demo-gate-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary);
  background: rgba(0, 210, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0 18px;
}

/* ---------- Responsive ---------- */

/* Eight stacked fields make a card taller than a laptop screen. Pairing the four
   short ones cuts roughly 170px and usually removes the scroll altogether. */
@media (min-width: 760px) {
  .demo-gate-card {
    max-width: 640px;
  }

  #demo-gate-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    /* each field keeps its own height; stretching would leave dead space under
       the short one and drag its contents out of place */
    align-items: start;
  }

  #demo-gate-form > .demo-gate-group {
    grid-column: span 1;
  }

  /* more specific than the span-1 rule above, which would otherwise win */
  #demo-gate-form > #demo-gate-group-role,
  #demo-gate-form > #demo-gate-group-modules,
  #demo-gate-form > .demo-gate-privacy,
  #demo-gate-form > #demo-gate-submit,
  #demo-gate-form > #demo-gate-skip {
    grid-column: 1 / -1;
  }

  /* Giữ cụm pill chụm giữa; space-between trên thẻ 640px làm chúng trôi xa nhau. */
  .demo-gate-promises {
    justify-content: center;
  }
}


@media (max-width: 768px) {
  .demo-gate-card {
    padding: 26px 20px;
  }
  .demo-gate-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .demo-gate-view {
    padding: 12px;
  }
  .demo-gate-card {
    padding: 22px 16px;
    border-radius: 16px;
  }
  .demo-gate-cred {
    flex-direction: column;
    align-items: stretch;
  }
  .demo-gate-copy-btn {
    width: 100%;
    padding: 9px 12px;
  }
}