/* Public page editor, online payments, gift vouchers & loyalty, feedback (views/website.js, payments.js, vouchers.js, feedback.js). */
.web-wrap .otabs { margin-bottom: 14px; }
.web-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.web-stats .kpi b { font-size: 24px; } .web-url { font-size: 16px !important; overflow-wrap: anywhere; } .web-stats .kpi span { overflow-wrap: anywhere; }
.web-k { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.web-grid.full { grid-template-columns: 1fr; } .web-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web-grid > .card { min-width: 0; } .web-grid .card h3 { margin-bottom: 12px; }
.web-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.web-two .fld, .web-wrap .form { min-width: 0; }
.web-save { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 35%); }
.web-prev { position: sticky; top: 70px; }
.phone { border: 10px solid var(--green); border-radius: 30px; overflow: hidden; height: min(680px, 70vh); background: var(--oat); }
.phone iframe, .web-device iframe { width: 100%; height: 100%; border: 0; display: block; background: #F3EFE6; }
.web-prevbar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 12px; }
.web-device { margin: 0 auto; border: 10px solid var(--green); border-radius: 28px; overflow: hidden; height: 76vh; transition: width .2s; max-width: 100%; }
.web-device.phone { width: 390px; } .web-device.tablet { width: 820px; } .web-device.desktop { width: 100%; border-radius: 12px; border-width: 6px; }
.web-img { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.web-img img, .web-img-empty { width: 120px; height: 80px; object-fit: cover; border-radius: 16px 16px 6px 6px; border: 1px solid var(--line); }
.web-img-empty { display: grid; place-items: center; color: var(--mute); background: var(--panel2); }
.web-secs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.web-secs li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.web-secs li span { flex: 1; font-weight: 700; min-width: 0; }
.web-toggles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.web-tog { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .web-tog small { display: block; }
.web-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.web-gal figure { margin: 0; position: relative; } .web-gal img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px 16px 6px 6px; }
.web-gal figcaption { display: flex; justify-content: space-between; margin-top: 4px; }
.web-add { display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 1; border: 2px dashed var(--line2); border-radius: 16px 16px 6px 6px; color: var(--mute); cursor: pointer; font-weight: 700; }
.web-add:hover { border-color: var(--clay); color: var(--ink); }
.web-slug { display: flex; align-items: center; gap: 6px; min-width: 0; } .web-slug span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; } .web-slug input { flex: 1; min-width: 0; }
.help-box.ok { border-color: var(--sage); background: var(--ok-bg); color: var(--ok); } .help-box.warn { border-color: var(--straw); background: var(--straw-bg); color: var(--straw-ink); }
.ok-txt { color: var(--ok); }
.pay-modes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pay-mode { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line2); border-radius: 12px; cursor: pointer; background: var(--panel); }
.pay-mode.on { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(227, 145, 94, .18); }
.pay-mode input { width: auto; margin-top: 4px; accent-color: var(--clay); flex: none; } .pay-mode small { display: block; }
.fld.inline { flex-direction: row; align-items: center; gap: 6px; } .fld.inline input { width: auto; }
.nps-k .nps-bar { display: flex; height: 6px; border-radius: 6px; overflow: hidden; background: var(--line); margin-top: 8px; }
.nps-k .nps-bar i { display: block; height: 100%; } .nps-bar .p { background: var(--ok); } .nps-bar .m { background: var(--straw); } .nps-bar .d { background: var(--bad); }
.nps-k.ok b { color: var(--ok); } .nps-k.bad b { color: var(--bad); }
.fb-ans { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); } .fb-ans:last-child { border-bottom: 0; }
.fb-ans p { margin: 4px 0 0; } .fb-ans .b { min-width: 30px; text-align: center; }
.fb-q { display: grid; grid-template-columns: 24px minmax(0, 1fr) 190px auto auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.fb-q input[data-o] { grid-column: 2 / 4; }
.fb-list { margin: 8px 0 10px; padding-inline-start: 18px; font-size: 14px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
@media (max-width: 1100px) { .web-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .web-grid, .web-grid.three { grid-template-columns: 1fr; } .web-prev { position: static; } }
@media (max-width: 760px) {
  .web-two, .web-k { grid-template-columns: 1fr; } .web-stats { grid-template-columns: 1fr 1fr; }
  .fb-q { grid-template-columns: 20px minmax(0, 1fr) auto; } .fb-q select { grid-column: 2 / -1; } .fb-q input[data-o] { grid-column: 2 / -1; }
  .web-device.tablet { width: 100%; } .phone { height: 60vh; }
}