/* ==========================================================================
   UserSell Hub — Instagram insights fields on the "new ad" form
   Markup: views/front/insights-form.php   Behaviour: assets/front/insights.js
   Layout rules:
     • mobile first: one column, 48px tap targets, 16px text (no iOS zoom);
     • ≥ 720px: two columns; "wide" fields (many pills) take the whole row;
     • the "?" help bubble sits right next to its label (never floats away).
   ========================================================================== */

/* ---------- Colour tokens (change the brand look here only) ---------- */
.usig-box {
	--usig-brand: #8134af;        /* purple of the Instagram gradient */
	--usig-brand-2: #dd2a7b;      /* pink end of the gradient */
	--usig-ok: #0a8a60;
	--usig-err: #e11d48;
	--usig-line: #e5e7eb;
	--usig-text: #1f2937;
	--usig-muted: #6b7280;
}

/* ---------- Card ---------- */
.usig-box { box-sizing: border-box; margin: 22px 0; padding: 18px; border: 1px solid var(--usig-line); border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04); font-size: 14px; line-height: 1.7; color: var(--usig-text); text-align: start; }
.usig-box *  { box-sizing: border-box; }
.usig-box[hidden] { display: none !important; }

/* ---------- Header ---------- */
.usig-head { display: flex; gap: 12px; align-items: flex-start; }
.usig-badge { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af 75%, #515bd4); }
.usig-title { display: block; font-size: 16px; font-weight: 700; color: #111827; }
.usig-sub   { display: block; font-size: 13px; color: var(--usig-muted); margin-top: 2px; }

/* ---------- Progress bar ("12 of 19 fields filled") ---------- */
.usig-progress { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 12px; color: var(--usig-muted); }
.usig-progress__bar { flex: 1; height: 6px; border-radius: 99px; background: #eef0f6; overflow: hidden; }
.usig-progress__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--usig-brand), var(--usig-brand-2)); transition: width .25s; }
.usig-progress.is-done { color: var(--usig-ok); font-weight: 700; }

/* ---------- Groups (audience / performance / account / sale) ---------- */
.usig-group { border: 0; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid #f0f1f4; min-width: 0; }
.usig-group legend { display: flex; align-items: center; gap: 6px; float: none; width: auto; margin: 0; padding: 0; padding-inline-end: 8px; border: 0; font-size: 14px; font-weight: 700; color: var(--usig-brand); }
.usig-ico { font-size: 16px; line-height: 1; }

/* ---------- Grid ---------- */
.usig-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 10px; }
.usig-field { min-width: 0; }
.usig-field[hidden] { display: none !important; }   /* e.g. monthly revenue until "monetized = yes" */
@media (min-width: 720px) {
	.usig-box { padding: 22px; }
	.usig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
	.usig-field--wide { grid-column: 1 / -1; }
}

/* ---------- Label + help bubble (bubble right after the text) ---------- */
.usig-field label { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #374151; }
.usig-req { color: var(--usig-err); margin-inline-start: 3px; font-weight: 700; }
.usig-help { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #eef0f6; color: #4b5563; font-size: 12px; font-weight: 700; line-height: 1; cursor: help; user-select: none; transition: background .15s, color .15s; }
.usig-help:hover, .usig-help:focus, .usig-help.is-open { background: var(--usig-brand); color: #fff; outline: none; }

/* ---------- Text / number inputs ---------- */
.usig-box select, .usig-box input[type=text] { width: 100% !important; max-width: none; height: 48px; margin: 0; padding: 0 14px; border: 1px solid #d6d9e0; border-radius: 12px; background: #fff; color: #111827; font: inherit; font-size: 16px; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.usig-box select:focus, .usig-box input:focus { border-color: var(--usig-brand); box-shadow: 0 0 0 3px rgba(129,52,175,.15); outline: none; }
.usig-box input::placeholder { color: #9ca3af; font-size: 14px; }
.usig-input { position: relative; }
.usig-input.has-affix input { padding-inline-end: 62px; }      /* room for the "%" / "USD" suffix */
.usig-affix { position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-50%); color: var(--usig-muted); font-size: 12px; font-weight: 600; pointer-events: none; }

/* ---------- Tap buttons (replace dropdowns) ---------- */
.usig-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.usig-box .usig-pill { appearance: none; -webkit-appearance: none; width: auto; height: auto; min-height: 44px; margin: 0; padding: 8px 16px; border: 1px solid #d6d9e0 !important; border-radius: 999px !important; background: #fff !important; color: #374151 !important; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; text-transform: none; cursor: pointer; box-shadow: none !important; transition: background .15s, border-color .15s, color .15s; }
.usig-box .usig-pill:hover { border-color: var(--usig-brand) !important; color: var(--usig-brand) !important; }
.usig-box .usig-pill.is-on { background: linear-gradient(135deg, var(--usig-brand), var(--usig-brand-2)) !important; border-color: transparent !important; color: #fff !important; }
.usig-box .usig-pill:focus-visible { outline: 3px solid rgba(129,52,175,.3); outline-offset: 2px; }
@media (max-width: 719px) {
	/* On phones a Yes/No pair or a short list shares the row evenly. */
	.usig-pills { gap: 6px; }
	.usig-box .usig-pill { flex: 1 1 auto; padding: 8px 12px; }
}

/* ---------- Validation ---------- */
.usig-err { display: none; margin-top: 5px; font-size: 12px; color: var(--usig-err); }
.usig-field.is-error .usig-err { display: block; }
.usig-field.is-error input, .usig-field.is-error select { border-color: var(--usig-err) !important; box-shadow: 0 0 0 3px rgba(225,29,72,.12) !important; }
.usig-field.is-error .usig-pills .usig-pill { border-color: #fda4af !important; }
.usig-alert { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff1f2; border: 1px solid #fecdd3; color: #be123c; font-size: 13px; }
.usig-alert[hidden] { display: none !important; }

/* ---------- Help tooltip (one element on <body>; bottom sheet on phones) ---------- */
#usig-tooltip { position: fixed; z-index: 999999; max-width: 320px; padding: 11px 13px; border-radius: 12px; background: #111827; color: #f9fafb; font-size: 13px; line-height: 1.8; font-weight: 400; text-align: start; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; }
#usig-tooltip.is-visible { opacity: 1; visibility: visible; }
#usig-tooltip b { color: #fff; }
#usig-tooltip small { color: #cbd5e1; }
#usig-tooltip .usig-tip-close { display: none; }
@media (max-width: 639px) {
	#usig-tooltip { left: 12px !important; right: 12px; top: auto !important; bottom: 14px; max-width: none; padding: 14px 16px; font-size: 14px; pointer-events: auto; }
	#usig-tooltip .usig-tip-close { display: block; margin-top: 8px; color: #9ca3af; font-size: 12px; }
}

/* Searchable country picker (country-select.js). The native select stays in the form as the value. */
.us-country { position: relative; }
.us-country__search { width: 100%; }
.us-country__native { position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.us-country__list { position: absolute; z-index: 50; inset-inline: 0; top: 100%; max-height: 260px; overflow-y: auto; margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--card, #fff); color: inherit; border: 1px solid rgba(127, 127, 127, .3); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.us-country__list[hidden] { display: none; }
.us-country__list li { padding: 8px 12px; cursor: pointer; }
.us-country__list li:hover, .us-country__list li.is-on { background: rgba(127, 127, 127, .12); }