/* Editor: template picker + v2 live preview iframe */
.tp-hint { font-size: .8rem; margin: -6px 0 12px; color: var(--text-light); line-height: 1.5; }
.tp-tools { position: sticky; top: -1px; z-index: 2; background: #fff; padding: 4px 0 10px; }
#tpSearch { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid #eadfe4; font: inherit; font-size: .88rem; background: #fffafb; }
#tpSearch:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(212,120,144,.15); }
.tp-chips { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.tp-chips::-webkit-scrollbar { display: none; }
.tp-chip { flex: none; border: 1px solid #eadfe4; background: #fff; color: var(--text); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: .78rem; cursor: pointer; transition: .2s; white-space: nowrap; }
.tp-chip:hover { border-color: var(--rose); }
.tp-chip[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: #fff; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.tp-card { display: grid; gap: 6px; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--text); min-width: 0; }
.tp-thumb { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #f3ecee; box-shadow: 0 0 0 1px rgba(0,0,0,.06); transition: box-shadow .2s, transform .2s; }
.tp-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tp-card:hover .tp-thumb { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 10px 22px rgba(42,28,34,.12); }
.tp-card.is-active .tp-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rose); }
.tp-card:focus-visible { outline: none; } .tp-card:focus-visible .tp-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); }
.tp-badge { position: absolute; top: 7px; left: 7px; font-style: normal; font-size: .62rem; font-weight: 600; letter-spacing: .04em; background: rgba(255,255,255,.92); color: var(--dark); padding: 2px 7px; border-radius: 99px; }
.tp-check { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border-radius: 50%; background: var(--rose); color: #fff; display: grid; place-items: center; font-style: normal; font-size: .8rem; }
.tp-name { font-size: .82rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-sw { display: flex; align-items: center; gap: 3px; min-width: 0; }
.tp-sw i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); flex: none; }
.tp-sw em { font-style: normal; font-size: .7rem; color: var(--text-light); margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-empty { grid-column: 1 / -1; font-size: .85rem; color: var(--text-light); padding: 12px 0; }
.tp-more { margin-top: 14px; font-size: .82rem; } .tp-more a { color: var(--rose-dark); }
.tp-classic > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; margin-bottom: 0; }
.tp-classic > summary::-webkit-details-marker { display: none; }
.tp-classic > summary::before { content: '›'; display: inline-block; transition: transform .2s; }
.tp-classic[open] > summary::before { transform: rotate(90deg); }
.tp-classic > summary small { font-family: var(--font-sans); font-weight: 400; font-size: .75rem; color: var(--text-light); }
.tp-bar-info { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.tp-change { border: 1px solid rgba(0,0,0,.12); background: #fff; border-radius: 99px; padding: 4px 12px; font: inherit; font-size: .78rem; cursor: pointer; color: var(--dark); }
.tp-change:hover { border-color: var(--rose); }
/* v2 preview: the iframe owns the scrolling */
.preview-frame.is-v2 { min-height: 0; position: relative; }
.preview-frame.is-v2 .tp-frame { display: block; border: 0; background: #fff; transform-origin: 0 0; }
.preview-frame.is-v2.mobile .tp-frame { width: 100%; height: 100%; }
.preview-frame.is-v2::after { content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--rose); opacity: 0; transition: width .6s ease, opacity .3s; pointer-events: none; }
.preview-frame.is-v2.tp-busy::after { width: 70%; opacity: 1; }
.tp-frame[hidden], .invitation[hidden], #colorSection[hidden] { display: none !important; }
@media (max-width: 900px) {
  .tp-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .preview-frame.is-v2.mobile { max-width: 390px; }
}

/* per-template fields (js/editor-fields.js) */
.ef-off { display: none !important; }
.ef-note { font-size: .8rem; line-height: 1.5; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(201, 169, 110, .12); border: 1px solid rgba(201, 169, 110, .35); color: var(--text, #333); }
.ef-hint { font-size: .8rem; line-height: 1.5; margin: -4px 0 12px; color: var(--text-light, #777); }
.ef-hint.ef-warn { color: #9a5b00; }
.ef-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ef-item { border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: 10px; background: rgba(255, 255, 255, .6); display: flex; flex-direction: column; gap: 8px; }
.ef-menu { padding: 8px; }
.ef-row { display: flex; gap: 8px; align-items: center; }
.ef-row input { min-width: 0; }
.ef-s-date { flex: 0 0 32%; }
.ef-s-title, .ef-m-name { flex: 1 1 auto; }
.ef-m-note { flex: 0 0 30%; }
.ef-item input, .ef-item textarea { width: 100%; box-sizing: border-box; }
.ef-row input { width: auto; }
.ef-photo { display: flex; gap: 8px; align-items: center; }
.ef-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.ef-thumb[hidden], .ef-photo [hidden] { display: none !important; }
.ef-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ef-actions [hidden] { display: none !important; }

/* classic skins: live preview = real guest page in an iframe (js/editor-live.js) */
.preview-frame.cp-on { position: relative; min-height: 0; }
.preview-frame.cp-on > .invitation { display: none !important; }
.preview-frame.cp-on .cp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; display: block; transition: opacity .18s ease; }
.preview-frame.cp-on .cp-frame.is-loading { opacity: 0; pointer-events: none; }
.preview-frame.cp-on::after { content: ''; position: absolute; z-index: 3; top: 0; left: 0; height: 3px; width: 0; background: var(--rose); opacity: 0; transition: width .6s ease, opacity .3s; pointer-events: none; }
.preview-frame.cp-on.tp-busy::after { width: 70%; opacity: 1; }
.toggle-row .toggle-hint { display: block; font-size: .74rem; color: var(--text-light, #8a7a80); margin-top: 2px; line-height: 1.4; }
@media (max-width: 900px) {
  .preview-frame.cp-on.mobile { max-width: 390px; }
  body.m-preview .editor-panel { display: none; }
  body.m-preview .preview-area { height: calc(100vh - 60px); height: calc(100dvh - 60px); }
  body.m-preview .preview-frame-wrap { padding: 10px; }
}

/* 2026-10-07: lịch trình nhà trai / nhà gái + bảng màu dress code (v2) */
.ef-sched .ef-row select { flex: 0 0 38%; min-width: 0; }
.ef-sched .ef-row input[type="date"], .ef-sched .ef-row input[type="time"] { flex: 1 1 0; }
.ef-sched .ef-sc-title { flex: 1 1 auto; }
.ef-colors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ef-color { display: inline-flex; align-items: center; gap: 2px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 10px; padding: 3px 3px 3px 5px; background: rgba(255, 255, 255, .6); }
.ef-color input[type="color"] { width: 40px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ef-color .btn-icon { width: 28px; height: 28px; }
.ef-sched input, .ef-sched select { padding: 8px 10px; border: 1px solid #f0d8e0; border-radius: 8px; font-size: .85rem; background: #fff8f9; color: var(--dark, #333); font-family: inherit; }
.ef-sched input:focus, .ef-sched select:focus { outline: none; border-color: var(--gold, #c9a84c); box-shadow: 0 0 0 3px rgba(201, 168, 76, .15); background: #fff; }