/* ============================================
   EyEBooM 體驗頁 /try/ 頁面殼（卡 #1077）
   header 與表單樣式沿用官網共用 CSS；這裡只處理殼自己的版面與洽詢對話框。
   ============================================ */

body.try-shell {
    margin: 0;
    background: var(--bg-dark);
    font-family: 'Noto Sans TC', sans-serif;
    /* 內容在 #root 內自己捲動，視窗本身不捲 */
    overflow: hidden;
}

/* 其他頁的 header 是透明底、往下捲一段才加深（靠 window 捲動事件，門檻各頁不同）；
   這頁視窗不捲，且編輯器頁底色淺，透明 header 上的白字看不見，所以一律深色底 */
.try-shell .header {
    background: rgba(6, 22, 26, 0.96);
}

/* bundle 掛載點：讓出 fixed header 的高度；bundle 根容器 h-full 填滿這裡。
   bundle 的 CSS（CMS 共用 index.css）在 base 層設了 html, body, #root { height: 100% }：
   fixed 元素同時有 top、bottom 與 height 時 bottom 會被忽略，#root 就會多出 header 高度、底部被裁掉，
   所以這裡要明確把 height 還原成 auto，讓 top／bottom 決定高度 */
.try-shell #root {
    position: fixed;
    inset: var(--nav-height) 0 0;
    height: auto;
}

/* ── 洽詢正式版對話框：深色底，與官網頁尾聯絡區塊同一套表單樣式 ── */
.try-contact {
    /* 原生 <dialog> 靠 margin: auto 置中；bundle 的 Tailwind 全域重置把所有元素 margin 歸零，要補回來 */
    margin: auto;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: var(--bg-dark);
    color: var(--text-white);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    overflow: auto;
}

.try-contact::backdrop {
    background: rgba(6, 22, 26, 0.6);
    backdrop-filter: blur(2px);
}

.try-contact-body {
    padding: 28px;
}

.try-contact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.try-contact-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.try-contact-close {
    padding: 4px 8px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.try-contact-close:hover {
    color: var(--text-white);
}

.try-contact-desc {
    margin: 8px 0 20px;
    color: var(--text-gray);
    font-size: 15px;
    line-height: 1.7;
}

/* 輸入框字級至少 16px：iOS Safari 對更小的字級會在聚焦時自動放大整頁 */
.try-contact .form-group input,
.try-contact .form-group textarea {
    font-size: 16px;
}

.try-contact .form-group input {
    height: 44px;
}

@media (max-width: 600px) {
    .try-contact-body {
        padding: 20px;
    }

    .try-contact .form-row {
        grid-template-columns: 1fr;
    }
}