/* ads_ui.css: the Advertise (billboard ordering) app. Scoped under .adx / .adx-*; iOS-style, touch-first (44px targets). */
.adx { display: flex; flex-direction: column; gap: 12px; padding: 6px 16px 18px; color: #1c1c1e; font-family: -apple-system, "SF Pro Text", "Plus Jakarta Sans", system-ui, sans-serif; }
.adx-fine { font-size: 13px; line-height: 1.4; color: rgba(60, 60, 67, .72); margin: 2px 0; }
.adx-fine.mono { font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.adx-err { color: #d70015; font-size: 13px; margin: 0; }
.adx-title { font-size: 17px; font-weight: 700; margin: 4px 0 0; }
.adx-b { margin: 8px 16px 0; padding: 11px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4; background: #fff4d6; color: #5a4300; }
.adx-b.bad { background: #ffe3e0; color: #7a0c00; } .adx-b.good { background: #dff7e6; color: #0a4d22; } .adx-b.warn { background: #fff0d1; color: #6a4300; }
.adx-b .adx-btn { margin-top: 8px; }
.adx-btn { min-height: 44px; padding: 0 18px; border-radius: 13px; border: 0; background: rgba(120, 120, 128, .16); color: #007aff; font: 600 16px/1 inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.adx-btn.pri { background: #007aff; color: #fff; } .adx-btn[disabled], .adx-btn.pri[disabled] { opacity: .4; pointer-events: none; }
.adx-nav { display: flex; gap: 10px; padding: 8px 16px 20px; } .adx-nav .adx-btn { flex: 1; }
.adx-hero { text-align: left; border: 0; border-radius: 20px; padding: 18px; color: #fff; cursor: pointer; background: linear-gradient(135deg, #b99cff, #ff5c8a); display: flex; flex-direction: column; gap: 4px; min-height: 92px; box-shadow: 0 8px 22px rgba(255, 92, 138, .3); }
.adx-hero b { font-size: 20px; } .adx-hero span { font-size: 14px; opacity: .92; }
.adx-row { display: flex; align-items: center; justify-content: space-between; text-align: left; border: 0; background: #fff; border-radius: 16px; padding: 14px 16px; min-height: 60px; cursor: pointer; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); }
.adx-row b { display: block; font-size: 16px; } .adx-row small { color: rgba(60, 60, 67, .6); font-size: 13px; } .adx-row em { font-style: normal; font-weight: 700; color: #007aff; }
.adx-steps { display: flex; gap: 6px; padding: 8px 16px 0; } .adx-steps i { flex: 1; height: 4px; border-radius: 3px; background: rgba(120, 120, 128, .25); } .adx-steps i.done { background: #34c759; } .adx-steps i.cur { background: #007aff; }
.adx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adx-card { border: 2px solid transparent; background: #fff; border-radius: 18px; padding: 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.adx-card.sel { border-color: #007aff; box-shadow: 0 0 0 4px rgba(0, 122, 255, .15); } .adx-card b { font-size: 16px; } .adx-card small { font-size: 12.5px; color: rgba(60, 60, 67, .65); line-height: 1.35; }
.adx-mini { background: linear-gradient(135deg, #5ac8fa, #af52de); border: 3px solid #3a3a3c; border-radius: 4px; margin: 4px auto; } .adx-mini.l { width: 100%; max-width: 120px; aspect-ratio: 2/1; } .adx-mini.p { width: 54px; aspect-ratio: 2/3; }
.adx-seg { display: grid; grid-template-columns: 1fr 1fr; background: rgba(120, 120, 128, .16); border-radius: 11px; padding: 2px; } .adx-seg button { min-height: 40px; border: 0; background: none; border-radius: 9px; font: 600 14px/1.1 inherit; color: #1c1c1e; cursor: pointer; padding: 0 6px; } .adx-seg button.sel { background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.adx-map { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #2e9bd6, #1a6aa6); } .adx-land { position: absolute; left: 6%; top: 14%; width: 88%; height: 70%; background: #4c9a63; border-radius: 42% 58% 38% 62% / 55% 42% 58% 45%; opacity: .85; }
.adx-dot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid #fff; background: #ff9f0a; padding: 0; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.adx-dot::after { content: ""; position: absolute; inset: -9px; } .adx-dot.portrait { background: #af52de; border-radius: 8px; width: 22px; height: 22px; margin: -11px 0 0 -11px; } .adx-dot.sel { background: #34c759; box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 2px 8px rgba(0, 0, 0, .35); transform: scale(1.2); z-index: 2; } .adx-dot.off { opacity: .25; pointer-events: none; }
.adx-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(60, 60, 67, .7); } .adx-legend span { width: 11px; height: 11px; border-radius: 50%; background: #ff9f0a; display: inline-block; margin-left: 8px; } .adx-legend span.p { background: #af52de; border-radius: 3px; }
.adx-pick { background: #fff; border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; } .adx-pick b { font-size: 16px; } .adx-pick small { color: rgba(60, 60, 67, .65); font-size: 13px; } .adx-pick span { font-weight: 700; color: #007aff; }
.adx-list { background: #fff; border-radius: 14px; overflow: hidden; max-height: 240px; overflow-y: auto; } .adx-line { width: 100%; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 0; background: none; padding: 0 14px; font: 15px/1.2 inherit; text-align: left; cursor: pointer; border-bottom: .5px solid rgba(60, 60, 67, .2); } .adx-line.sel { background: rgba(0, 122, 255, .1); } .adx-line em { font-style: normal; font-weight: 700; color: #007aff; } .adx-line[disabled] { opacity: .4; }
.adx-stepper { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 16px 0 4px; } .adx-stepper button { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #007aff; color: #fff; font-size: 30px; cursor: pointer; } .adx-stepper button[disabled] { opacity: .35; } .adx-stepper div { text-align: center; min-width: 70px; } .adx-stepper b { font-size: 44px; display: block; line-height: 1; } .adx-stepper small { color: rgba(60, 60, 67, .7); }
.adx-total { text-align: center; background: #fff; border-radius: 16px; padding: 14px; } .adx-total b { font-size: 30px; display: block; } .adx-total small { color: rgba(60, 60, 67, .7); }
.adx-lbl { font-size: 13px; font-weight: 600; margin-top: 6px; } .adx-lbl small { font-weight: 400; color: rgba(60, 60, 67, .6); margin-left: 6px; }
.adx-in { width: 100%; min-height: 46px; border: 0; border-radius: 12px; background: #fff; padding: 0 14px; font-size: 17px; color: #000; box-sizing: border-box; }
.adx-chk { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; padding: 6px 0; } .adx-chk input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: #007aff; }
.adx-imgs { display: grid; gap: 8px; } .adx-img { position: relative; display: flex; gap: 10px; background: #fff; border-radius: 14px; padding: 8px; align-items: center; } .adx-img img { width: 96px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; background: #ddd; }
.adx-img .meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .adx-img b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adx-img small { color: rgba(60, 60, 67, .65); font-size: 12px; }
.adx-img .rm { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(120, 120, 128, .2); font-size: 20px; cursor: pointer; } .adx-anch { display: inline-flex; gap: 4px; } .adx-anch button { border: 0; background: rgba(120, 120, 128, .16); border-radius: 8px; min-height: 30px; padding: 0 9px; font-size: 12px; cursor: pointer; } .adx-anch button.sel { background: #007aff; color: #fff; }
.adx-file { position: relative; overflow: hidden; } .adx-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; font-size: 0; }
/* billboard preview */
.adx-mock { position: relative; margin: 6px auto 24px; width: 100%; max-width: 360px; } .adx-mock .face { position: relative; background: #1d1d1f; border: 6px solid #48484a; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.adx-mock.landscape .face { aspect-ratio: 2/1; } .adx-mock.portrait { max-width: 200px; } .adx-mock.portrait .face { aspect-ratio: 2/3; }
.adx-mock .face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; } .adx-mock .face img.on { opacity: 1; }
.adx-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #8e8e93; font-weight: 700; }
.adx-mock .post { position: absolute; bottom: -20px; width: 9px; height: 20px; background: #636366; } .adx-mock .post.l { left: 22%; } .adx-mock .post.r { right: 22%; }
.adx-sum { background: #fff; border-radius: 14px; padding: 4px 14px; } .adx-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: .5px solid rgba(60, 60, 67, .2); font-size: 14.5px; } .adx-sum > div:last-child { border: 0; } .adx-sum span { color: rgba(60, 60, 67, .7); } .adx-sum b { text-align: right; } .adx-sum .tot b { font-size: 18px; }
.adx-paypal { min-height: 52px; border: 0; border-radius: 14px; background: #ffc439; color: #111; font-size: 17px; cursor: pointer; display: block; width: 100%; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); } .adx-paypal i { font-weight: 800; color: #003087; } .adx-paypal[disabled] { opacity: .55; pointer-events: none; }
.adx-ord { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; border: 0; background: #fff; border-radius: 16px; padding: 8px 12px; cursor: pointer; text-align: left; } .adx-ord .th { width: 64px; height: 40px; border-radius: 8px; background: #ddd; overflow: hidden; flex: none; } .adx-ord .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adx-ord .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .adx-ord b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adx-ord small { color: rgba(60, 60, 67, .65); font-size: 12.5px; }
.adx-pill { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: rgba(120, 120, 128, .16); white-space: nowrap; } .adx-pill.pending_review, .adx-pill.paid { background: #fff0d1; color: #8a5a00; } .adx-pill.approved, .adx-pill.live { background: #dff7e6; color: #0a6b2e; } .adx-pill.rejected, .adx-pill.refunded { background: #ffe3e0; color: #a1180a; }
.adx-tl { list-style: none; margin: 4px 0; padding: 0; display: flex; justify-content: space-between; gap: 4px; } .adx-tl li { flex: 1; text-align: center; font-size: 11.5px; color: rgba(60, 60, 67, .55); display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.adx-tl li i { width: 18px; height: 18px; border-radius: 50%; background: rgba(120, 120, 128, .25); display: block; } .adx-tl li.done i { background: #34c759; } .adx-tl li.cur i { background: #007aff; box-shadow: 0 0 0 4px rgba(0, 122, 255, .2); } .adx-tl li.done, .adx-tl li.cur { color: #1c1c1e; font-weight: 600; } .adx-tl small { font-weight: 400; color: rgba(60, 60, 67, .6); }
@media (min-width: 700px) { .adx-mock.landscape { max-width: 420px; } }
@media (prefers-reduced-motion: reduce) { .adx-mock .face img { transition: none; } }

/* LQA mobile pass: 44px targets, safe areas, no overflow */
.adx { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); overflow-wrap: anywhere; }
.adx-nav { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.adx-seg button { min-height: 44px; }
.adx-anch { flex-wrap: wrap; } .adx-anch button { min-height: 44px; min-width: 44px; }
.adx-img { padding-right: 56px; } .adx-img .rm { width: 44px; height: 44px; top: 6px; right: 6px; }
.adx-two > * { min-width: 0; } .adx-sum > div { flex-wrap: wrap; } .adx-ord { min-width: 0; }
@media (orientation: landscape) and (max-height: 500px) { .adx-hero { min-height: 72px; } .adx-card { min-height: 0; } .adx-stepper { padding-top: 8px; } .adx-mock.landscape { max-width: 260px; } .adx-mock.portrait { max-width: 120px; } }