/*
 * Cncartbuy Core front-end base styles: mobile first, minimal, scoped to .cncb-ui (the wrapper the plugin puts around
 * everything it renders). Every selector sits inside :where(), so its specificity is 0: any theme rule overrides it.
 * No fixed widths: only width:100% / max-width. Turn it off with add_filter( 'cncb_front_css', '__return_false' ).
 */
:where(.cncb-ui) { box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; }
:where(.cncb-ui) *, :where(.cncb-ui) *::before, :where(.cncb-ui) *::after { box-sizing: border-box; }
:where(.cncb-ui) img, :where(.cncb-ui) video, :where(.cncb-ui) iframe { max-width: 100%; height: auto; }
:where(.cncb-ui) pre, :where(.cncb-ui) code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Forms: one column, full width, 16px text (stops iOS zooming in), 44px touch targets. */
:where(.cncb-ui) label { display: block; max-width: 100%; }
:where(.cncb-ui) input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"]),
:where(.cncb-ui) select,
:where(.cncb-ui) textarea { display: block; width: 100%; max-width: 100%; min-height: 44px; font-size: 16px; }
:where(.cncb-ui) input[type="file"] { display: block; width: 100%; max-width: 100%; min-height: 44px; font-size: 16px; }
:where(.cncb-ui) input[type="checkbox"], :where(.cncb-ui) input[type="radio"] { width: 24px; height: 24px; margin: 0 .5em 0 0; vertical-align: middle; }
:where(.cncb-ui) label:has(> input[type="checkbox"], > input[type="radio"]) { display: flex; align-items: center; min-height: 44px; }
:where(.cncb-ui) button, :where(.cncb-ui) input[type="submit"], :where(.cncb-ui) input[type="button"],
:where(.cncb-ui) .cb-button, :where(.cncb-ui) .cb-btn { min-height: 44px; min-width: 44px; max-width: 100%; padding: .6em 1.1em; white-space: normal; }
:where(.cncb-ui) .cncb-pager a, :where(.cncb-ui) .cb-list a, :where(.cncb-ui) summary { display: inline-block; min-height: 44px; line-height: 44px; }
:where(.cncb-ui) a.cb-button, :where(.cncb-ui) a.cb-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
/* Customer code (1.0.0-rc1): the code and address wrap on 360px screens; the login / register pair wraps instead of overflowing. */
:where(.cncb-ui) .cncb-code-links { display: flex; flex-wrap: wrap; gap: .5rem; }
:where(.cncb-ui) .cncb-code-links .cb-button { flex: 1 1 8rem; }
:where(.cncb-ui) .cncb-customer-code strong, :where(.cncb-ui) .cncb-own-code p { overflow-wrap: anywhere; word-break: break-word; }
:where(.cncb-ui) .cncb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tables: fit the screen; under 600px every row becomes a card (cells carry data-label). */
:where(.cncb-ui) table { width: 100%; max-width: 100%; border-collapse: collapse; }
:where(.cncb-ui) th, :where(.cncb-ui) td { overflow-wrap: anywhere; vertical-align: top; }
@media (max-width: 600px) {
	:where(.cncb-ui) table, :where(.cncb-ui) tbody, :where(.cncb-ui) tfoot, :where(.cncb-ui) tr, :where(.cncb-ui) th, :where(.cncb-ui) td { display: block; width: 100%; }
	:where(.cncb-ui) thead { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
	:where(.cncb-ui) tr { margin: 0 0 .75rem; padding: .25rem .5rem; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; }
	:where(.cncb-ui) td[data-label]::before { content: attr(data-label); display: block; font-weight: 600; font-size: .85em; opacity: .7; }
	:where(.cncb-ui) td, :where(.cncb-ui) th { border: 0; padding: .35rem 0; text-align: left; }
	:where(.cncb-ui) .cncb-fee-calc, :where(.cncb-ui) .cncb-calc__form { display: block; }
}

/*
 * 1.0.0-rc9 (BUG-139): checkbox groups (seller center: API key permissions, webhook events). One full-width row per checkbox,
 * the text wraps inside the screen, every row is at least 44px high. Deliberate exception to the :where() rule above: these few
 * selectors carry a class specificity so that a theme's generic "label:has(> input[type=checkbox]) { display: inline-flex }"
 * cannot make the rows wider than the screen again. fieldset needs min-width: 0 (browsers default it to min-content).
 */
.cncb-ui fieldset.cncb-checks { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; margin: 0 0 1rem; padding: 0; border: 0; }
.cncb-ui fieldset.cncb-checks > legend { padding: 0; margin: 0 0 .25rem; font-weight: 600; }
.cncb-ui .cncb-checks > label.cncb-check { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; margin: 0; font-weight: 400; }
.cncb-ui .cncb-checks > label.cncb-check > input { flex: none; margin: 0; }
.cncb-ui .cncb-checks > label.cncb-check > span { flex: 1 1 0%; min-width: 0; overflow-wrap: anywhere; }

/*
 * 1.0.0-rc13: built-in captcha (security question). Its root carries .cncb-ui, so it is styled inside theme dialogs too.
 * Specificity 0 (:where): the theme wins. Consent links (.cncb-consent-link) and .screen-reader-text are styled by the theme.
 */
:where(.cncb-ui):where(.cncb-captcha) { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 1rem; max-width: 100%; }
:where(.cncb-ui) :where(.cncb-captcha__label) { font-weight: 600; overflow-wrap: anywhere; }
:where(.cncb-ui) :where(.cncb-captcha__input) { box-sizing: border-box; min-height: 44px; font-size: 16px; padding: .5rem .75rem; width: 100%; max-width: 12rem; }
:where(.cncb-ui) :where(.cncb-captcha__hint) { font-size: .875em; opacity: .8; }