/* ICCAD-EXPO 2026 popup — mobile-first, desktop layout mirrors the 2:1 design artwork */
#expo-popup-root[hidden] { display: none; }
#expo-popup-root *, #expo-popup-root *::before, #expo-popup-root *::after { box-sizing: border-box; }
#expo-popup-root label, #expo-popup-root input, #expo-popup-root textarea, #expo-popup-root button, #expo-popup-root p, #expo-popup-root h2, #expo-popup-root hr, #expo-popup-root form { margin: 0; line-height: 1.2; font-family: inherit; }
#expo-popup-root .expo-popup-content input, #expo-popup-root .expo-popup-content textarea { min-height: 0; max-width: 100%; }
#expo-popup-root { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 10px; font-family: Roboto, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#expo-popup-root .expo-popup-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 22, .72); backdrop-filter: blur(4px); }
#expo-popup-root .expo-popup { position: relative; display: flex; flex-direction: column; width: min(420px, calc(100% - 28px)); max-height: calc(100vh - 20px); overflow: auto; background: #fff; box-shadow: 0 24px 90px rgba(0,0,0,.35); }
#expo-popup-root .expo-popup-close { position: absolute; top: 8px; right: 8px; z-index: 3; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; color: #272727; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 12px #0003; }

/* photo (hidden on mobile, shown on desktop) */
#expo-popup-root .expo-popup-visual { display: none; }

/* content */
#expo-popup-root .expo-popup-content { padding: 16px 18px 18px; background: #fff; }
#expo-popup-root h2 { margin: 0; color: #17191e; font-size: clamp(30px, 8vw, 40px); font-weight: 900; line-height: 1.05; letter-spacing: -.045em; white-space: nowrap; }
#expo-popup-root h2 span { color: #d71920; }
#expo-popup-root .expo-popup-meet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
#expo-popup-root .expo-popup-schedule { display: inline-flex; align-items: center; gap: 10px; color: #17191e; font-size: 17px; font-weight: 500; text-decoration: none; }
#expo-popup-root .expo-popup-schedule svg { width: 24px; height: 24px; fill: none; stroke: #d71920; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#expo-popup-root .expo-popup-booth { padding: 5px 16px; border: 1px solid #ff5a60; border-radius: 5px; background: linear-gradient(#e11d25, #b50b12); box-shadow: inset 0 0 0 2px rgba(120,0,6,.35); color: #fff; font-size: 17px; font-weight: 500; white-space: nowrap; }
#expo-popup-root .expo-popup-rule { height: 2px; margin: 12px 0 10px; border: 0; background: #e11d25; }
#expo-popup-root .expo-popup-details { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; color: #17191e; font-size: 14px; font-weight: 600; }
#expo-popup-root .expo-popup-details > span { display: inline-flex; align-items: center; gap: 8px; }
#expo-popup-root .expo-popup-details svg { width: 24px; height: 24px; flex: 0 0 auto; }
#expo-popup-root .expo-popup-divider { display: none; width: 2px; background: #17191e; }

#expo-popup-root .expo-popup-content form { display: grid; gap: 7px; }
#expo-popup-root .expo-popup-content label { display: grid; gap: 3px; color: #222; font-size: 12px; font-weight: 500; }
#expo-popup-root .expo-popup-req { color: #d71920; font-weight: 700; }
#expo-popup-root .expo-popup-content input, #expo-popup-root .expo-popup-content textarea { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid #ecc5c7; border-radius: 5px; background: rgba(255,255,255,.9); color: #222; font: inherit; font-size: 14px; font-weight: 400; outline: none; }
#expo-popup-root .expo-popup-content input:focus, #expo-popup-root .expo-popup-content textarea:focus { border-color: #c20e17; box-shadow: 0 0 0 3px #c20e171a; }
#expo-popup-root .expo-popup-content textarea { height: 48px; resize: none; }
#expo-popup-root .expo-popup-actions { display: flex; align-items: center; gap: 12px; }
#expo-popup-root .expo-popup-submit { flex: 0 0 auto; border: 0; border-radius: 5px; padding: 10px 18px; background: #d71920; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
#expo-popup-root .expo-popup-submit:hover { background: #a20a12; }
#expo-popup-root .expo-popup-submit:disabled { opacity: .65; cursor: wait; }
#expo-popup-root .expo-popup-status { min-height: 16px; margin: 0; color: #333; font-size: 12px; }
#expo-popup-root .expo-popup-status.is-success { color: #187245; }
#expo-popup-root .expo-popup-status.is-error { color: #b00020; }

/* desktop: exact 2:1 artwork layout, everything scales with popup width (cqw) */
@media (min-width: 960px) {
  #expo-popup-root { padding: 16px; }
  #expo-popup-root .expo-popup {
    display: block; overflow: visible; container-type: inline-size;
    width: min(1020px, 88vw, calc((100vh - 96px) * 2)); max-height: none; aspect-ratio: 2 / 1; background: #fdfdfe;
  }
  #expo-popup-root .expo-popup::before { content: ''; position: absolute; left: 0; top: 0; width: 14cqw; height: 5.5cqw; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, #dfe2e6 .14cqw, transparent .22cqw) 0 0 / 1cqw 1cqw; -webkit-mask-image: linear-gradient(90deg,#000,transparent); mask-image: linear-gradient(90deg,#000,transparent); }
  #expo-popup-root .expo-popup-close { top: 1cqw; right: 1cqw; width: 2.6cqw; height: 2.6cqw; min-width: 32px; min-height: 32px; font-size: max(24px, 2cqw); }
  #expo-popup-root .expo-popup-visual { display: block; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 55.75%; height: auto; background: #101b2e url('images/expo-popup-visual.jpg') 0 0 / 100% 100% no-repeat; }
  #expo-popup-root .expo-popup-content { position: relative; z-index: 1; width: 54cqw; padding: 4.3cqw 0 2cqw 3.55cqw; background: none; }
  #expo-popup-root h2 { font-size: 5.85cqw; line-height: 1.05; letter-spacing: -.05em; }
  #expo-popup-root .expo-popup-meet { flex-wrap: nowrap; gap: 1.4cqw; margin-top: 1cqw; }
  #expo-popup-root .expo-popup-schedule { gap: 1.3cqw; font-size: 2.3cqw; }
  #expo-popup-root .expo-popup-schedule svg { width: 2.4cqw; height: 2.4cqw; }
  #expo-popup-root .expo-popup-booth { padding: 0 2cqw; height: 3.3cqw; display: inline-flex; align-items: center; border-radius: .35cqw; font-size: 2.55cqw; margin-left: .2cqw; }
  #expo-popup-root .expo-popup-rule { width: 41cqw; height: .2cqw; margin: 1.9cqw 0 .9cqw; }
  #expo-popup-root .expo-popup-details { flex-wrap: nowrap; gap: 0; margin: 0; font-size: 1.95cqw; }
  #expo-popup-root .expo-popup-details > span { gap: .9cqw; }
  #expo-popup-root .expo-popup-details svg { width: 2.8cqw; height: 2.8cqw; }
  #expo-popup-root .expo-popup-divider { display: block; min-height: 0; height: 2.7cqw; margin: 0 2cqw 0 1.9cqw; width: .14cqw; }
  #expo-popup-root .expo-popup-content form { gap: .8cqw; margin-top: .9cqw; }
  #expo-popup-root .expo-popup-content label { gap: .3cqw; width: 40cqw; font-size: max(11px, 1.2cqw); }
  #expo-popup-root .expo-popup-content input, #expo-popup-root .expo-popup-content textarea { padding: 0 .9cqw; font-size: max(11px, 1.25cqw); }
  #expo-popup-root .expo-popup-content input { height: 2.9cqw; }
  #expo-popup-root .expo-popup-content textarea { height: 4.2cqw; padding-top: .7cqw; }
  #expo-popup-root .expo-popup-actions { width: 40cqw; gap: 1.2cqw; }
  #expo-popup-root .expo-popup-submit { padding: 0 2cqw; height: 2.9cqw; font-size: max(12px, 1.2cqw); }
  #expo-popup-root .expo-popup-status { font-size: max(11px, 1.05cqw); min-height: 0; }
}