/* Custom Styles & Color Palette for Q&A Event App - Embedded Poster Layout */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  font-family: 'Plus Jakarta Sans', sans-serif;
  --color-gold-main: #d99b26;
  --color-gold-hover: #c48a1d;
  --color-gold-light: #f5be59;
}

body {
  background-color: #07090e;
  color: #f3f4f6;
  min-h-screen: 100vh;
  overflow-x: hidden;
}

/* Poster Card Frame Container */
.poster-container {
  background-image: url('/asset/form_question.png');
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  border: 1px solid rgba(217, 155, 38, 0.3);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(217, 155, 38, 0.15);
}

/* Semi-transparent Form Overlay to fit inside poster middle area */
.poster-form-box {
  background: rgba(10, 12, 18, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.poster-input {
  background: rgba(18, 22, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transition: all 0.2s ease-in-out;
}

.poster-input:focus {
  background: rgba(18, 22, 32, 0.98);
  border-color: #d99b26;
  box-shadow: 0 0 14px rgba(217, 155, 38, 0.35);
  outline: none;
}

/* Custom Segmented Pill Radio Buttons */
.segment-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.segment-btn.active {
  background: linear-gradient(135deg, #d99b26 0%, #b88022 100%);
  color: #0d0f15;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(217, 155, 38, 0.35);
}

/* Toast Animation */
.toast-enter {
  animation: slideInDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-exit {
  animation: slideOutUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInDown {
  from {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes slideOutUp {
  from {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
}

/* LED background (full-viewport, proportional to device) */
.led-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('/asset/kv-led.png');
  background-repeat: no-repeat;
  background-position: center top;
  /* Scale image to viewport height while preserving aspect ratio (ideal for tall LED displays).
     If viewport is narrower than the image width, the media query below switches to width-fit. */
  background-size: auto 100vh;
}

@media (max-width: 1152px) {
  .led-bg {
    /* Fit to viewport width on narrow devices while keeping aspect ratio */
    background-size: 100vw auto;
    background-position: center top;
  }
}

/* Admin search/input styles: ensure readable text on light inputs */
.clean-input {
  color: #0d0f15; /* dark text for visibility on light backgrounds */
  background-color: #ffffff; /* keep consistent white input appearance */
  border: 1px solid rgba(15, 17, 21, 0.05);
}
.clean-input::placeholder {
  color: #94a3b8; /* subtle gray placeholder */
  opacity: 1;
}