/*
 * TLA Partner Hub — Advertise area (1.0.312).
 * One page for included placements and paid campaigns: hero + "Who you'll
 * reach", Your campaigns, the four-step create flow, and the focused
 * booking pages. Colours come from the --tla-ph-* tokens, so light and dark
 * follow html[data-tla-theme]. Buttons use .tla-adv-btn, which the 0.9.48
 * compact-button rules in frontend.css exclude.
 */

.tla-adv {
	--adv-radius: 16px;
	--adv-blue: #0a63d6;
	--adv-blue-2: #0a90f6;
	--adv-green: #0b8a55;
	--adv-amber: #b25e00;
	--adv-violet: #6e22ff;
	--adv-card: var(--tla-ph-surface, #fff);
	--adv-line: var(--tla-ph-border, rgba(10, 0, 50, .1));
	--adv-soft: var(--tla-ph-soft, #f0f0f8);
	box-sizing: border-box;
	color: var(--tla-ph-text, #0d0d1a);
	font-family: var(--tla-ph-font, Inter, system-ui, sans-serif);
	margin: 0 auto;
	max-width: 1200px;
	padding: 28px 24px 56px;
	width: 100%;
}
.tla-adv *, .tla-adv *::before, .tla-adv *::after { box-sizing: border-box; }
.tla-adv h1, .tla-adv h2, .tla-adv h3 { color: var(--tla-ph-heading, #060614); letter-spacing: -.02em; margin: 0; text-transform: none; }
.tla-adv p { margin: 0; }
.tla-adv [hidden] { display: none !important; }
.tla-adv .is-adv-off { display: none !important; }
.tla-adv-sr { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; }
.tla-adv, .tla-adv-step, .tla-adv-anchor, #tla-adv-step-artwork, #tla-adv-step-review, #tla-adv-formats { scroll-margin-top: calc(var(--tla-ph-header-clearance, 96px) + 72px); }
.tla-adv .tla-ph-flash-notice { margin: 0 0 18px; }

/* Buttons and chips */
.tla-adv-btn {
	align-items: center; border: 1px solid transparent; border-radius: 999px; cursor: pointer; display: inline-flex; font-family: inherit;
	font-size: 15px; font-weight: 700; gap: 8px; justify-content: center; letter-spacing: 0; line-height: 1.2; min-height: 44px;
	padding: 0 20px; text-decoration: none !important; text-transform: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.tla-adv-btn.is-primary { background: linear-gradient(135deg, var(--adv-blue), var(--adv-blue-2)); box-shadow: 0 8px 22px rgba(10, 99, 214, .25); color: #fff !important; }
.tla-adv-btn.is-primary:hover { box-shadow: 0 10px 26px rgba(10, 99, 214, .34); transform: translateY(-1px); }
.tla-adv-btn.is-quiet { background: var(--adv-card); border-color: var(--adv-line); color: var(--tla-ph-heading, #060614) !important; }
.tla-adv-btn.is-quiet:hover { border-color: var(--adv-blue-2); color: var(--adv-blue) !important; }
.tla-adv-btn.is-large { font-size: 16px; min-height: 52px; padding: 0 28px; }
.tla-adv-btn:disabled { box-shadow: none; cursor: not-allowed; opacity: .45; transform: none; }
.tla-adv-btn:focus-visible, .tla-adv-format:focus-visible, .tla-adv-steps a:focus-visible { outline: 3px solid rgba(10, 144, 246, .45); outline-offset: 2px; }

.tla-adv-chip { align-items: center; border-radius: 999px; display: inline-flex; font-size: 13px; font-weight: 600; gap: 6px; padding: 6px 12px; }
.tla-adv-chip.is-included { background: rgba(11, 138, 85, .1); color: var(--adv-green); }
.tla-adv-chip .dashicons { font-size: 16px; height: 16px; width: 16px; }
.tla-adv-tag { align-self: flex-start; border-radius: 999px; display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .01em; line-height: 1.3; padding: 4px 10px; }
.tla-adv-tag.is-included { background: rgba(11, 138, 85, .12); color: var(--adv-green); }
.tla-adv-tag.is-paid { background: rgba(10, 99, 214, .1); color: var(--adv-blue); }
.tla-adv-tag.is-in-use { background: var(--adv-soft); color: var(--tla-ph-muted, #5a5a7a); }
.tla-adv-eyebrow, .tla-adv-step-label { color: var(--adv-blue); display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em; margin-bottom: 8px; text-transform: uppercase; }

/* Hero + who you'll reach */
.tla-adv-hero { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.tla-adv-hero h1 { font-size: clamp(1.7rem, 2.8vw, 2.35rem); font-weight: 800; line-height: 1.15; max-width: 18ch; }
.tla-adv-hero-copy > p { color: var(--tla-ph-muted, #5a5a7a); font-size: 1.05rem; line-height: 1.6; margin-top: 12px; max-width: 56ch; }
.tla-adv-hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.tla-adv-reach { background: var(--adv-card); border: 1px solid var(--adv-line); border-radius: var(--adv-radius); padding: 18px 18px 14px; }
.tla-adv-reach h2 { font-size: 1rem; font-weight: 800; }
.tla-adv-reach-total { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px !important; }
.tla-adv-reach-total strong { color: var(--tla-ph-heading, #060614); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.tla-adv-reach-total span { color: var(--tla-ph-muted, #5a5a7a); font-size: 13px; }
.tla-adv-reach ul { list-style: none; margin: 0; padding: 0; }
.tla-adv-reach li { border-top: 1px solid var(--adv-line); display: flex; font-size: 14px; justify-content: space-between; padding: 7px 0; }
.tla-adv-reach li b { color: var(--tla-ph-heading, #060614); font-weight: 700; }
.tla-adv-reach-fit { border-top: 1px solid var(--adv-line); color: var(--tla-ph-text, #0d0d1a); font-size: 13px; line-height: 1.5; padding-top: 8px; }
.tla-adv-reach small { color: var(--tla-ph-muted, #5a5a7a); display: block; font-size: 11px; margin-top: 10px; }
.tla-adv-offer { align-items: center; background: linear-gradient(135deg, rgba(223, 41, 211, .08), rgba(10, 144, 246, .08)); border: 1px solid rgba(110, 34, 255, .2); border-radius: 12px; display: flex; gap: 10px; margin-top: 12px; padding: 10px 12px; }
.tla-adv-offer b { color: var(--adv-violet); font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.tla-adv-offer span { font-size: 13px; line-height: 1.4; }

/* Sections */
.tla-adv-section { margin-top: 40px; }
.tla-adv-section-head { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 14px; }
.tla-adv-section-head h2 { font-size: 1.35rem; font-weight: 800; }
.tla-adv-count { color: var(--tla-ph-muted, #5a5a7a); font-size: 14px; font-weight: 600; }
.tla-adv-lead { color: var(--tla-ph-muted, #5a5a7a); font-size: 15px; line-height: 1.55; margin: 16px 0 8px !important; max-width: 70ch; }

.tla-adv-empty { align-items: center; border: 1px dashed var(--adv-line); border-radius: var(--adv-radius); display: flex; gap: 14px; padding: 20px; }
.tla-adv-empty .dashicons { color: var(--adv-blue-2); font-size: 28px; height: 28px; width: 28px; }
.tla-adv-empty strong { color: var(--tla-ph-heading, #060614); display: block; font-size: 15px; }
.tla-adv-empty p { color: var(--tla-ph-muted, #5a5a7a); font-size: 14px; margin-top: 2px; }

/* Campaign cards */
.tla-adv-campaigns { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tla-adv-campaign { background: var(--adv-card); border: 1px solid var(--adv-line); border-left: 4px solid var(--adv-line); border-radius: var(--adv-radius); display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; }
.tla-adv-campaign.is-action { border-left-color: #e08a00; }
.tla-adv-campaign.is-review { border-left-color: var(--adv-blue-2); }
.tla-adv-campaign.is-scheduled { border-left-color: var(--adv-violet); }
.tla-adv-campaign.is-live { border-left-color: #11a868; }
.tla-adv-campaign-head { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; }
.tla-adv-campaign-head strong { color: var(--tla-ph-heading, #060614); display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.tla-adv-campaign-head small { color: var(--tla-ph-muted, #5a5a7a); display: block; font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
.tla-adv-status { border-radius: 999px; flex: 0 0 auto; font-size: 12px; font-weight: 700; line-height: 1.3; max-width: 55%; padding: 4px 10px; text-align: right; }
.tla-adv-status.is-action { background: rgba(224, 138, 0, .14); color: var(--adv-amber); }
.tla-adv-status.is-review { background: rgba(10, 144, 246, .12); color: var(--adv-blue); }
.tla-adv-status.is-scheduled { background: rgba(110, 34, 255, .1); color: var(--adv-violet); }
.tla-adv-status.is-live { background: rgba(17, 168, 104, .13); color: var(--adv-green); }
.tla-adv-status.is-done, .tla-adv-status.is-closed { background: var(--adv-soft); color: var(--tla-ph-muted, #5a5a7a); }
.tla-adv-campaign-meta { display: grid; gap: 6px; margin: 0; }
.tla-adv-campaign-meta div { display: grid; gap: 8px; grid-template-columns: 82px minmax(0, 1fr); }
.tla-adv-campaign-meta dt { color: var(--tla-ph-muted, #5a5a7a); font-size: 12px; font-weight: 600; margin: 0; }
.tla-adv-campaign-meta dd { font-size: 13px; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.tla-adv-campaign-note { align-items: flex-start; background: rgba(224, 138, 0, .08); border-radius: 10px; display: flex; font-size: 13px; gap: 8px; line-height: 1.45; padding: 8px 10px; }
.tla-adv-campaign-note .dashicons { color: var(--adv-amber); font-size: 16px; height: 16px; width: 16px; }
.tla-adv-campaign-actions { align-items: center; border-top: 1px solid var(--adv-line); display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; }
.tla-adv-campaign-actions form { margin: 0; }
.tla-adv-campaign-actions .tla-adv-btn { font-size: 14px; min-height: 40px; }
.tla-adv-upload { display: grid; gap: 8px; width: 100%; }
.tla-adv-upload label { display: grid; font-size: 13px; font-weight: 600; gap: 6px; }
.tla-adv-upload input[type="file"] { font-size: 13px; max-width: 100%; }
.tla-adv-upload small { color: var(--tla-ph-muted, #5a5a7a); font-size: 12px; line-height: 1.4; }
.tla-adv-results { background: var(--adv-soft); border-radius: 12px; padding: 10px 12px; }
.tla-adv-results > span { color: var(--tla-ph-muted, #5a5a7a); display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.tla-adv-results dl { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.tla-adv-results dt { color: var(--tla-ph-muted, #5a5a7a); font-size: 11px; margin: 0; }
.tla-adv-results dd { color: var(--tla-ph-heading, #060614); font-size: 15px; font-weight: 800; margin: 0; }
.tla-adv-results p { font-size: 12px; margin-top: 8px !important; }
.tla-adv-past { margin-top: 16px; }
.tla-adv-past > summary { color: var(--tla-ph-muted, #5a5a7a); cursor: pointer; font-size: 14px; font-weight: 600; margin-bottom: 12px; }

/* Step bar */
.tla-adv-steps { counter-reset: none; display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.tla-adv-steps li { margin: 0; min-width: 0; }
.tla-adv-steps a, .tla-adv-step-static { align-items: center; background: var(--adv-card); border: 1px solid var(--adv-line); border-radius: 12px; color: var(--tla-ph-muted, #5a5a7a) !important; display: flex; font-size: 14px; font-weight: 600; gap: 10px; height: 100%; padding: 10px 12px; text-decoration: none !important; }
.tla-adv-steps b { align-items: center; background: var(--adv-soft); border-radius: 50%; color: var(--tla-ph-muted, #5a5a7a); display: inline-flex; flex: 0 0 26px; font-size: 13px; font-weight: 800; height: 26px; justify-content: center; width: 26px; }
.tla-adv-steps span { min-width: 0; }
.tla-adv-steps li.is-current a, .tla-adv-steps li.is-current .tla-adv-step-static { border-color: var(--adv-blue-2); box-shadow: 0 0 0 3px rgba(10, 144, 246, .12); color: var(--tla-ph-heading, #060614) !important; }
.tla-adv-steps li.is-current b { background: linear-gradient(135deg, var(--adv-blue), var(--adv-blue-2)); color: #fff; }
.tla-adv-steps li.is-done b { background: rgba(11, 138, 85, .14); color: var(--adv-green); }
.tla-adv-steps a:hover { border-color: var(--adv-blue-2); }

/* Format cards */
.tla-adv-group { margin-top: 26px; }
.tla-adv-group > h3 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
.tla-adv-format-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tla-adv-format { background: var(--adv-card); border: 1px solid var(--adv-line); border-radius: var(--adv-radius); color: inherit !important; display: flex; flex-direction: column; overflow: hidden; text-decoration: none !important; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
a.tla-adv-format:hover { border-color: var(--adv-blue-2); box-shadow: 0 12px 30px rgba(10, 0, 50, .1); transform: translateY(-2px); }
.tla-adv-format .tla-ph-mockup { background: var(--adv-soft); margin: 0; padding: 14px 18px 10px; }
.tla-adv-format .tla-ph-mockup svg { margin: 0 auto; max-height: 120px; max-width: 220px; }
.tla-adv-format-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.tla-adv-format-body strong { color: var(--tla-ph-heading, #060614); font-size: 16px; font-weight: 700; line-height: 1.3; margin-top: 4px; }
.tla-adv-format-spec { color: var(--tla-ph-muted, #5a5a7a); font-size: 13px; font-weight: 600; }
.tla-adv-format-copy { color: var(--tla-ph-text, #0d0d1a); font-size: 13px; line-height: 1.5; }
.tla-adv-format-body small { color: var(--tla-ph-muted, #5a5a7a); font-size: 12px; line-height: 1.4; }
.tla-adv-format-go { color: var(--adv-blue); font-size: 14px; font-weight: 700; margin-top: auto; padding-top: 6px; }
.tla-adv-format.is-in-use { opacity: .75; }

.tla-adv-assurance { align-items: flex-start; border-top: 1px solid var(--adv-line); display: flex; gap: 10px; margin-top: 40px; padding-top: 18px; }
.tla-adv-assurance .dashicons { color: var(--adv-green); }
.tla-adv-assurance p { color: var(--tla-ph-muted, #5a5a7a); font-size: 13px; line-height: 1.55; }
.tla-adv-assurance strong { color: var(--tla-ph-heading, #060614); }
.tla-adv-classic { font-size: 12px; margin-top: 12px !important; }
.tla-adv-classic a { color: var(--tla-ph-muted, #5a5a7a); }

/* Focused booking page */
.tla-adv.is-focused > .tla-adv-steps { background: var(--tla-ph-bg, #f7f7fc); margin: 14px -6px 0; padding: 8px 6px; position: sticky; top: var(--tla-ph-header-clearance, 96px); z-index: 20; }
.tla-adv-back { color: var(--adv-blue) !important; display: inline-block; font-size: 14px; font-weight: 600; text-decoration: none !important; }
.tla-adv-back:hover { text-decoration: underline !important; }
.tla-adv-recap { align-items: start; background: var(--adv-card); border: 1px solid var(--adv-line); border-radius: var(--adv-radius); display: grid; gap: 22px; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); margin-top: 16px; padding: 20px; }
.tla-adv-recap-mockup { margin: 0; }
.tla-adv-recap-mockup .tla-ph-mockup { background: var(--adv-soft); border-radius: 12px; margin: 0; padding: 12px; }
.tla-adv-recap-mockup figcaption { color: var(--tla-ph-muted, #5a5a7a); font-size: 12px; margin-top: 6px; text-align: center; }
.tla-adv-recap-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tla-adv-recap-copy .tla-adv-step-label { margin-bottom: 0; }
.tla-adv-recap-copy h1 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 800; line-height: 1.2; }
.tla-adv-recap-copy > p { color: var(--tla-ph-muted, #5a5a7a); font-size: 15px; line-height: 1.55; }
.tla-adv-spec { margin-top: 4px; }
.tla-adv-spec > summary { color: var(--adv-blue); cursor: pointer; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.tla-adv-note, .tla-adv-help { color: var(--tla-ph-muted, #5a5a7a); font-size: 13px; line-height: 1.5; }
.tla-adv-focus-body { margin-top: 18px; }

/* Included form, focused: the classic Creative Studio form, slimmed down */
.tla-adv .tla-ph-creative-studio.is-focused { background: none; min-height: 0; padding: 0; }
.tla-adv .tla-ph-creative-studio.is-focused > .tla-ph-shell-inner { max-width: none; padding: 0; }
.tla-adv .tla-ph-creative-studio.is-focused .tla-ph-update-editor { border-radius: var(--adv-radius); margin: 0; }
.tla-adv .tla-ph-creative-studio.is-focused .tla-ph-update-form-actions > div { display: none; }
.tla-adv .tla-ph-creative-studio.is-focused .tla-ph-update-form-actions { justify-content: flex-end; }
.tla-adv-design-block { background: rgba(224, 138, 0, .08); border-radius: 10px; font-size: 14px; line-height: 1.5; padding: 10px 12px; }

/* Artwork choice (both flows) */
.tla-adv-field-label { color: var(--tla-ph-heading, #060614); display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.tla-adv-choice-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tla-adv-choice { align-items: flex-start; background: var(--adv-card); border: 1px solid var(--adv-line); border-radius: 12px; cursor: pointer; display: flex; gap: 10px; margin: 0 !important; padding: 12px; }
.tla-adv-choice input { accent-color: var(--adv-blue); flex: 0 0 auto; margin: 3px 0 0 !important; }
.tla-adv-choice b { color: var(--tla-ph-heading, #060614); display: block; font-size: 14px; font-weight: 700; }
.tla-adv-choice small { color: var(--tla-ph-muted, #5a5a7a); display: block; font-size: 12px; line-height: 1.4; margin-top: 2px; }
.tla-adv-choice:has(input:checked) { border-color: var(--adv-blue-2); box-shadow: 0 0 0 3px rgba(10, 144, 246, .12); }
.tla-adv-design-note { background: var(--adv-soft); border-radius: 10px; font-size: 13px; line-height: 1.5; margin-top: 10px !important; padding: 10px 12px; }
.tla-adv-design-note p { margin-bottom: 10px !important; }

/* Paid focused flow */
.tla-adv .tla-ph-promotion-workspace.tla-adv-paid { background: none; min-height: 0; padding: 0; }
.tla-adv-step { background: var(--adv-card); border: 1px solid var(--adv-line); border-radius: var(--adv-radius); margin-top: 16px; padding: 20px; }
.tla-adv-step-head { align-items: flex-start; display: flex; gap: 14px; margin-bottom: 16px; }
.tla-adv-step-head > span { align-items: center; background: linear-gradient(135deg, var(--adv-blue), var(--adv-blue-2)); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 32px; font-size: 15px; font-weight: 800; height: 32px; justify-content: center; }
.tla-adv-step-head h2 { font-size: 1.2rem; font-weight: 800; }
.tla-adv-step-head p { color: var(--tla-ph-muted, #5a5a7a); font-size: 14px; line-height: 1.5; margin-top: 4px; }
.tla-adv-fieldset { border: 0; margin: 0 0 16px; min-width: 0; padding: 0; }
.tla-adv-fieldset > legend { color: var(--tla-ph-heading, #060614); font-size: 14px; font-weight: 700; margin-bottom: 8px; padding: 0; }
.tla-adv-page-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tla-adv-check { align-items: center; border: 1px solid var(--adv-line); border-radius: 10px; cursor: pointer; display: flex; font-size: 14px; gap: 10px; margin: 0 !important; padding: 10px 12px; }
.tla-adv-check input { accent-color: var(--adv-blue); margin: 0 !important; }
.tla-adv-check:has(input:checked) { background: rgba(10, 144, 246, .06); border-color: var(--adv-blue-2); }
.tla-adv-field-error { color: #b42318; font-size: 13px; font-weight: 600; margin-top: 8px !important; }
.tla-adv-date { max-width: 320px; }
.tla-adv-form { display: grid; gap: 16px; }
/* The classic Promotions Centre lays both forms out as a 3-column grid. */
.tla-adv-paid .tla-adv-form { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.tla-adv-paid .tla-adv-audience { display: block; }
.tla-adv-fields { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tla-adv-fields > *, .tla-adv-fields .tla-ph-creative-copy-fields, .tla-adv-fields .tla-ph-creative-banner-fields { grid-column: 1 / -1; }
.tla-adv-fields .tla-ph-creative-copy-fields { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.tla-adv-fields .tla-ph-creative-copy-fields > .tla-ph-promotion-field { grid-column: auto; }
.tla-adv-fields #tla-adv-cta { max-width: 360px; }
.tla-adv-paid .tla-ph-promotion-field { display: grid; gap: 6px; }
.tla-adv-paid .tla-ph-promotion-field label { color: var(--tla-ph-heading, #060614); font-size: 14px; font-weight: 700; }
.tla-adv-paid .tla-ph-promotion-field input, .tla-adv-paid .tla-ph-promotion-field select, .tla-adv-paid .tla-ph-promotion-field textarea { background: var(--adv-card); border: 1px solid var(--adv-line); border-radius: 10px; color: var(--tla-ph-text, #0d0d1a); font: inherit; font-size: 15px; min-height: 44px; padding: 10px 12px; width: 100%; }
.tla-adv-paid .tla-ph-promotion-field textarea { min-height: 96px; resize: vertical; }
.tla-adv-paid .tla-ph-promotion-field small { color: var(--tla-ph-muted, #5a5a7a); font-size: 12px; line-height: 1.4; }
.tla-adv-upload-field { margin-top: 10px; }
.tla-adv-file { align-items: center; border: 1px dashed var(--adv-blue-2); border-radius: 12px; cursor: pointer; display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; }
.tla-adv-file .dashicons { color: var(--adv-blue-2); }
.tla-adv-file b { color: var(--tla-ph-heading, #060614); font-size: 14px; }
.tla-adv-file small { color: var(--tla-ph-muted, #5a5a7a); font-size: 13px; overflow-wrap: anywhere; }
.tla-adv-more > summary { color: var(--adv-blue); cursor: pointer; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.tla-adv-audience .tla-ph-custom-audience-fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 12px; }
.tla-adv-audience .tla-ph-custom-audience-fields > details { grid-column: 1 / -1; }
.tla-adv-filter-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 12px; }
.tla-adv-paid .tla-ph-promotion-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.tla-adv-calc { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.tla-adv-calc [data-tla-promotion-error]:empty { display: none; }
.tla-adv-calc [data-tla-promotion-error] { color: #b42318; font-size: 13px; font-weight: 600; }
.tla-adv-audience.is-fixed { margin-bottom: 14px; }
.tla-adv-audience.is-fixed .tla-adv-btn { font-size: 13px; min-height: 36px; }
.tla-adv-summary { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tla-adv-summary > div { background: var(--adv-soft); border-radius: 12px; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.tla-adv-summary > div span { color: var(--tla-ph-muted, #5a5a7a); font-size: 12px; font-weight: 600; }
.tla-adv-summary > div strong { color: var(--tla-ph-heading, #060614); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.tla-adv-summary > div small { color: var(--tla-ph-muted, #5a5a7a); font-size: 12px; line-height: 1.35; }
.tla-adv-summary > div.is-price { background: linear-gradient(135deg, rgba(10, 99, 214, .1), rgba(10, 144, 246, .06)); }
.tla-adv-summary > div.is-price strong { color: var(--adv-blue); }
.tla-adv-summary > p, .tla-adv-summary > .tla-ph-promotion-active-filters { color: var(--tla-ph-muted, #5a5a7a); font-size: 13px; grid-column: 1 / -1; line-height: 1.5; }
.tla-adv-summary > p:empty { display: none; }
.tla-adv-pricing-wait { color: var(--tla-ph-muted, #5a5a7a); font-size: 14px; }
.tla-adv-confirm { align-items: flex-start; display: flex; font-size: 14px; gap: 10px; line-height: 1.5; margin: 16px 0 0 !important; }
.tla-adv-confirm input { accent-color: var(--adv-blue); margin: 4px 0 0 !important; }
.tla-adv-submit-row { align-items: center; display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 16px; }
.tla-adv-submit-row p { color: var(--tla-ph-muted, #5a5a7a); flex: 1 1 260px; font-size: 13px; line-height: 1.5; }
.tla-adv-paid .tla-ph-preview-zone.is-locked { cursor: default; opacity: .45; }
.tla-adv-paid .tla-ph-issue-summary { margin-top: 12px; }

/* Dark mode: tinted chips need lighter text */
html[data-tla-theme="dark"] .tla-adv { --adv-blue: #5cb5ff; --adv-green: #4fd39a; --adv-amber: #f0b45a; --adv-violet: #b99bff; }
html[data-tla-theme="dark"] .tla-adv-btn.is-primary { background: linear-gradient(135deg, #0a63d6, #0a90f6); }
html[data-tla-theme="dark"] .tla-adv.is-focused > .tla-adv-steps { background: var(--tla-ph-bg, #010012); }
html[data-tla-theme="dark"] .tla-adv-field-error, html[data-tla-theme="dark"] .tla-adv-calc [data-tla-promotion-error] { color: #ff8a80; }

/* Tablet */
@media (max-width: 960px) {
	.tla-adv-hero { grid-template-columns: 1fr; }
	.tla-adv-reach { max-width: 520px; }
	.tla-adv-summary { grid-template-columns: 1fr 1fr; }
	.tla-adv-summary > div.is-price { grid-column: 1 / -1; }
}

/* Phones: full width, no boxed panels (matches the 1.0.308 full-bleed rule) */
@media (max-width: 767px) {
	.tla-adv { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; padding: 18px 16px 40px; width: auto; }
	.tla-adv-hero h1 { font-size: 1.55rem; }
	.tla-adv-hero-copy > p { font-size: 1rem; }
	.tla-adv-hero-actions .tla-adv-btn { width: 100%; }
	.tla-adv-section { margin-top: 30px; }
	.tla-adv-campaigns, .tla-adv-format-grid { grid-template-columns: 1fr; }
	.tla-adv-steps { gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tla-adv-steps a, .tla-adv-step-static { flex-direction: column; font-size: 11px; gap: 4px; padding: 8px 4px; text-align: center; }
	.tla-adv-steps span { line-height: 1.2; }
	.tla-adv-format { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
	.tla-adv-format .tla-ph-mockup { align-self: stretch; display: flex; align-items: center; padding: 10px 8px; }
	.tla-adv-format .tla-ph-mockup svg { max-width: 80px; }
	.tla-adv-format-body { padding: 12px 14px 14px; }
	.tla-adv-format-copy { display: none; }
	.tla-adv-recap { grid-template-columns: 1fr; padding: 16px; }
	.tla-adv-step, .tla-adv-recap, .tla-adv-reach { border-left: 0; border-radius: 0; border-right: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; padding-left: 16px; padding-right: 16px; }
	.tla-adv-recap-mockup { max-width: 260px; }
	.tla-adv-step { padding-bottom: 18px; padding-top: 18px; }
	.tla-adv-fields, .tla-adv-fields .tla-ph-creative-copy-fields { grid-template-columns: 1fr; }
	.tla-adv-summary { grid-template-columns: 1fr 1fr; }
	.tla-adv-submit-row .tla-adv-btn { width: 100%; }
	.tla-adv-results dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tla-adv-campaign-meta div { grid-template-columns: 74px minmax(0, 1fr); }
	.tla-adv.is-focused > .tla-adv-steps { margin: 12px calc(50% - 50vw) 0; padding: 8px 16px; }
}