/* RRT Label Configurator — plain CSS, no build step.
 *
 * TheUnframer.com's real upload-configurator.css + the relevant chunk of
 * custom.css are copied BYTE-FOR-BYTE into configurator-base.css /
 * configurator-components.css (Pete: "copy means copy" — not ported,
 * not reinterpreted, an actual file copy). This markup uses the REAL,
 * UNPREFIXED class names from that copy (.configurator-grid,
 * .configurator-sidebar, .configurator-main, .config-card) — not
 * renamed/rrt-prefixed versions — specifically so the copied layout
 * rules actually apply (an earlier rrt-prefixed version silently broke
 * the whole grid/sidebar/sticky-preview layout, which is what "looking
 * really stupid" turned out to be). This file is only:
 *   1. mobile `order:` values for the few sidebar cards that are new in
 *      this plugin (the copy's own mobile reordering is keyed to IDs
 *      like #photo-upload-container that don't exist here);
 *   2. a few deliberate, explicitly-requested visibility overrides on
 *      top of the untouched copy (see below) — never edits to the
 *      copied files themselves;
 *   3. this plugin's own canvas/stage/zone preview (the part Pete
 *      confirmed is already right) and the contact-info card.
 *
 * Colors/font: Pete wants this to look and feel almost identical to
 * TheUnframer.com, not just structurally similar — same customer base,
 * same tool, same trust signal — so these are TheUnframer's own actual
 * colors (purple #991e21 / gradient highlight #7a181b) and its own font
 * (Poppins), not Red Rocks' separate brand kit.
 */

/* --- deliberate overrides on top of the untouched quote-module-card
   copy: Pete wants the customer to "open with the add text/logo
   choices available" from the start, rather than TheUnframer's own
   gated default (hidden until a photo is uploaded, which doesn't apply
   here — there's no "photo" step in this tool). The copied file itself
   is never edited for this; these overrides live here instead, so the
   copy stays diffable against the source. */
#quote-module-card {
	display: block !important;
}

/* The tabs/textarea/font-drum/logo-panel content itself — also hidden
   by default in the source until #quote-toggle is checked via JS. */
#text-layers-wrap {
	display: block !important;
}

/* These two are ALSO separately gated behind JS in the source (the
   textarea via its own inline display:none, the font-drum/sliders via
   the plain .quote-options class needing JS to add a .visible class) —
   missed on the first pass, which is why the actual typing box and font
   picker were still invisible even after #text-layers-wrap itself was
   force-shown. */
#textarea-wrapper {
	display: block !important;
}

.quote-options {
	display: block !important;
}

/* The pills (ART-LOGO / ADD TEXT) ARE the tab switcher now — Pete: the
   checkboxes went away and the separate "EDIT ..." button row was
   removed, folding both into one row of pills that do what the EDIT
   buttons used to do. New markup/class (not part of the TheUnframer
   copy), styled to match the pills' original look, with a deliberately
   strong "selected" state. (A third pill, Cartoon Balloon, existed here
   too until 2026-10-21 — removed, see label-configurator.js's header
   comment.) */
.rrt-pill-tab {
	display: inline-block;
	border: none;
	padding: 0.3rem 0.08rem;
	background: linear-gradient( 135deg, var( --rrt-primary ), var( --rrt-primary-dark ) );
	color: #fff;
	border-radius: 6px;
	font-size: 0.42rem;
	font-weight: 400;
	font-family: 'Luckiest Guy', cursive;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: 0 2px 7px rgba( 153, 30, 33, 0.35 );
	line-height: 1.25;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Pete, 2026-10-21: "we missed the yellow strip box that tells us
   where we are (a highlight box?)" — TheUnframer's own tab bar marks
   the active tab with a strong amber highlight (.text-tab-btn.active in
   its custom.css: background #f59e0b, dark brown text), a much clearer
   "you are here" cue than this pill's previous same-red-family active
   state. Ported that exact treatment here — applies equally to
   whichever pill is active (Art-Logo or Add Text), "same for the logo
   add thing". */
.rrt-pill-tab.active {
	background: linear-gradient( 135deg, #f59e0b, #d97e06 );
	color: #3d1c00;
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px #f59e0b, 0 4px 14px rgba( 245, 158, 11, 0.55 );
	transform: scale( 1.06 );
}

.rrt-label-configurator {
	--rrt-primary: #991e21;
	--rrt-primary-dark: #7a181b;
	--rrt-accent: #7a181b;
	--rrt-text: #333333;
	--rrt-heading-font: 'Poppins', sans-serif;
	--rrt-body-font: 'Poppins', sans-serif;

	max-width: 1400px;
	margin: 0 auto;
	padding: 0.5rem 1rem 2rem;
	font-family: var( --rrt-body-font );
	color: var( --rrt-text );
}

.rrt-lc-heading {
	font-family: var( --rrt-heading-font );
	font-weight: 500;
	font-size: 1.2rem;
	color: var( --rrt-primary );
	margin: 0 0 14px;
}

.rrt-lc-hint {
	font-size: 0.82rem;
	color: #777;
	margin: 14px 0 0;
}

/* --- mobile card order: the copied configurator-base.css already makes
   .configurator-sidebar `display:contents` on mobile (so its children
   can be freely reordered) and already handles .configurator-main's own
   mobile positioning — this just assigns `order` to the few sidebar
   cards that are new in this plugin, same technique, same breakpoint. --- */

@media ( max-width: 991px ) {
	/* Pete, 2026-10-21: "make the window about the same size as the
	   canvas preview window on the unframer configurator, it fits well
	   on mobile" — originally a mobile-only max-height:50vh safety
	   ceiling here. 2026-10-25: superseded by a general (not
	   breakpoint-limited) max-height:45vh on .rrt-lc-stage itself further
	   down this file (the "4oz window too tall" fix) — that rule, being
	   later in the cascade, already wins at every width including this
	   one, so the old mobile-only duplicate was removed rather than left
	   as dead/confusing code. */

	.rrt-lc-card--size {
		order: 1;
	}

	.rrt-lc-card--design {
		order: 2;
	}

	.configurator-main {
		order: 3;
	}

	.rrt-lc-card--contact {
		order: 4;
	}

	/* Pete, 2026-10-25: "are our buttons too small?... what's going to
	   happen on mobile?" — several controls were sized tight specifically
	   to fit on one row on desktop (18-22px step buttons, a 0.42rem-font
	   tab button), well under the ~44px touch target Apple/Google both
	   recommend. Bumped up here, mobile-only — desktop stays exactly as
	   compact as before; some rows may wrap on narrow screens now, which
	   is the accepted trade-off for making them reliably tappable.
	   !important is required since these are inline-styled in the PHP
	   markup (inc/quote-module-card.part.php) — inline styles always win
	   over an external stylesheet otherwise; same justified use already
	   established for .font-drum-rotator elsewhere in this file. */
	.slider-step-btn {
		width: 38px !important;
		height: 38px !important;
		font-size: 1.1rem !important;
	}

	.rrt-pill-tab {
		font-size: 0.75rem !important;
		padding: 0.6rem 0.4rem !important;
	}

	#quote-add-btn,
	#quote-remove-btn,
	#logo-add-btn,
	#logo-remove-btn,
	#logo-upload-btn,
	#art-picker-btn {
		font-size: 0.85rem !important;
		padding: 0.5rem 0.75rem !important;
	}

}

/* Pete, 2026-10-26 (asked more than once): "thumbs larger, window needs
   to be wider/same width as the column and deeper too, and easier to
   scroll" — replaces the old fixed-px thumbnail size (50px, bumped to
   58px on mobile only) with a responsive one that fills whatever width
   the panel actually has. positionArtPanel() (label-configurator.js) now
   sets #art-picker-panel's width to match #quote-module-card's own
   rendered width (the real column width) instead of a fixed 240px/290px,
   so thumbnails scale up automatically with the column — no more
   guessing another fixed px number that turns out "still not big
   enough." !important needed since both are inline-styled in the PHP
   markup (inc/quote-module-card.part.php), same justified pattern
   already used elsewhere in this file. */
.art-picker-item {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
}

#art-picker-panel {
	max-height: 60vh !important;
	-webkit-overflow-scrolling: touch;
}

/* NOTE: .config-card itself has NO styling in the real source either —
   it's a bare semantic wrapper there too, so it's left alone here rather
   than inventing a card/box look that doesn't exist in the copy. Only
   this plugin's OWN two new cards (size picker, contact info) get a
   light box treatment, via their own modifier classes, so the real
   quote-module-card's appearance is never touched. */
.rrt-lc-card--size,
.rrt-lc-card--contact {
	background: #fff;
	border: 1px solid #e3ddd2;
	border-radius: 10px;
	padding: 18px;
}

/* --- form basics --- */

.rrt-lc-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 14px;
}

.rrt-lc-field:last-child {
	margin-bottom: 0;
}

.rrt-lc-field label,
.rrt-config-label {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var( --rrt-primary );
	margin-bottom: 0.25rem;
}

.rrt-lc-field input[type="text"],
.rrt-lc-field input[type="email"],
.rrt-lc-field input[type="tel"],
.rrt-lc-field select,
.rrt-lc-field textarea {
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-family: inherit;
	font-size: 1rem;
	color: var( --rrt-text );
}

.rrt-lc-field input:focus,
.rrt-lc-field select:focus,
.rrt-lc-field textarea:focus {
	outline: none;
	border-color: var( --rrt-primary );
	box-shadow: 0 0 0 3px rgba( 153, 30, 33, 0.15 );
}

/* --- "+ Add" buttons (same pill shape as TheUnframer's add-text-label-btn,
   used for both "Add logo" and "Add text" — this plugin has no separate
   big dropzone step since there's no "main photo" to upload, the label
   template itself is always present; logo/text are just overlay layers,
   same role as TheUnframer's quote-module logo/text toggle buttons) --- */

.rrt-lc-add-buttons {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
}

.rrt-lc-btn-add {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0.5rem 0.85rem;
	background: linear-gradient( 135deg, var( --rrt-primary ) 0%, var( --rrt-primary-dark ) 100% );
	color: #fff;
	border: none;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 2px 7px rgba( 153, 30, 33, 0.32 );
	transition: filter 0.15s, box-shadow 0.15s;
}

.rrt-lc-btn-add:hover {
	filter: brightness( 1.12 );
	box-shadow: 0 3px 12px rgba( 153, 30, 33, 0.48 );
}

.rrt-lc-btn-add svg {
	width: 14px;
	height: 14px;
}

/* --- layer list: one row per added logo/text --- */

.rrt-lc-layers {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rrt-lc-layer {
	border: 1px solid #e3ddd2;
	border-radius: 8px;
	padding: 10px 12px;
}

.rrt-lc-layer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.rrt-lc-layer-label {
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var( --rrt-primary );
}

.rrt-lc-layer-remove {
	border: none;
	background: #eee;
	color: #666;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
}

.rrt-lc-layer-remove:hover {
	background: #e2b8b8;
	color: var( --rrt-primary-dark );
}

.rrt-lc-layer-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.rrt-lc-layer-row:last-child {
	margin-bottom: 0;
}

.rrt-lc-layer-thumb {
	width: 32px;
	height: 32px;
	object-fit: contain;
	border: 1px solid #eee;
	border-radius: 4px;
	flex: 0 0 auto;
}

.rrt-lc-layer-text {
	flex: 1 1 auto;
	padding: 7px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.92rem;
}

.rrt-lc-layer-font {
	flex: 0 0 auto;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 0.85rem;
	max-width: 110px;
}

/* --- sliders (ported from custom.css's .style-slider / .slider-with-btns) --- */

.rrt-slider-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.1rem;
}

.rrt-slider-name {
	font-size: 0.72rem;
	font-weight: 600;
	color: var( --rrt-primary );
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.rrt-style-slider {
	flex: 1;
	accent-color: var( --rrt-primary );
}

.rrt-slider-with-btns {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* --- live preview stage --- */

.rrt-lc-stage {
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	/* Pete, 2026-10-25: "on the 4 oz, the window is too tall..." ->
	   "the 4 oz box isn't showing all the dotted area" (fixed with
	   width:auto + align-self:center, letting the box shrink both
	   dimensions to fit max-height instead of just cropping) -> "8 oz is
	   now too small, hard to work with... keep what we had before... for
	   4 oz" — that fix affected BOTH sizes since it lived on the shared
	   base rule; 8oz needs its old full-width behavior back. Moved the
	   shrink-to-fit treatment to .rrt-lc-stage--narrow, added by JS
	   (loadSize() in label-configurator.js) only when 4oz is selected —
	   8oz stays plain width:100% as it always was. */
	width: 100%;
	max-height: 55vh;
	border: 1px solid #e3ddd2;
	border-radius: 8px;
	background: #fff;
	/* Pete, 2026-10-20: grab-to-pan (see label-configurator.js) drives
	   scrolling itself via scrollTop — touch-action:none stops the browser
	   from ALSO trying to handle the touch gesture natively, which would
	   otherwise fight the JS and cause jittery double-scrolling. */
	touch-action: none;
	cursor: grab;
}

.rrt-lc-stage.rrt-lc-panning {
	cursor: grabbing;
}

/* 4oz-only: narrower template image makes the same fixed vertical
   content render at a much taller aspect ratio than 8oz, so it's the
   one that actually needs to shrink both dimensions (not just get
   height-cropped) to show the full dotted zone within max-height. */
.rrt-lc-stage.rrt-lc-stage--narrow {
	width: auto;
	max-width: 100%;
	align-self: center;
	/* Pete, 2026-10-25: "rework the 4 oz, so it's wider" — 4oz's aspect
	   ratio (narrow template image, same fixed vertical content as 8oz)
	   is around 0.66 (taller than wide) vs 8oz's ~1.03 (near square), so
	   the shared 55vh cap above simply doesn't give it enough vertical
	   room to reach a comparable width — it was hitting that ceiling
	   much sooner. A taller cap just for this size lets it render wider
	   before the height constraint kicks in. */
	max-height: 75vh;
}

/* Pete, 2026-10-19: "scroll outside on the side that loads with the same
   size as before" — .rrt-lc-stage above is the VISIBLE box, kept at its
   original (mobile-safe) height. This inner wrapper is the full
   scrollable content (reaches the mountain logo) — taller than its
   parent by design, which is what makes .rrt-lc-stage scroll at all. */
.rrt-lc-stage-inner {
	position: relative;
	width: 100%;
}

/* Pete, 2026-10-21: "red strip box/white lettering inside the top edge
   of the window" — position:sticky (not absolute) is the part that
   actually matters here: .rrt-lc-stage itself is the scrolling box
   (overflow-y:auto), and an absolutely-positioned child scrolls away
   with the rest of its content same as anything else — confirmed via a
   real screenshot where the strip scrolled off along with the initial
   pulled-back-toward-the-logo view. Sticky keeps it pinned to the top
   of the VISIBLE window regardless of scroll position. pointer-events:
   none so it never blocks grab-to-pan or dragging a logo/text layer
   underneath it. */
.rrt-lc-instructions {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #991e21;
	color: #fff;
	/* Pete, 2026-10-25: "way too [hard to] read, change font to a more
	   normal font" — Bangers (a bold comic-book display face) swapped
	   for the site's own normal body font. */
	font-family: var( --rrt-body-font );
	font-weight: 600;
	font-size: 1.05rem; /* Pete, 2026-10-25: "larger/taller if possible" — was 0.875rem */
	letter-spacing: 0.01em;
	text-align: center;
	padding: 0.5rem 0.5rem;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Pete, 2026-10-25: "when it gets to the top... make the lettering
   banner above pop/flash brightish to get attention" — timed from
   label-configurator.js to land right as the auto-slide-up scroll
   animation finishes (see loadSize()). Class added + removed by JS
   each time so it can replay on every size switch, not just once. */
@keyframes rrt-lc-banner-flash {
	0%, 100% { filter: brightness( 1 ); }
	25%, 75% { filter: brightness( 1.7 ); }
	50% { filter: brightness( 2.1 ); }
}
.rrt-lc-instructions.rrt-lc-flash {
	animation: rrt-lc-banner-flash 0.9s ease-in-out 2;
}

.rrt-lc-bg {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

.rrt-lc-zone {
	position: absolute;
	outline: 2px dashed rgba( 153, 30, 33, 0.55 );
	outline-offset: -2px;
	touch-action: none;
}

/* Logo: left/top % + translate(-50%,-50%) — true center-point anchoring,
   matching the real site's logo positioning exactly. */
.rrt-lc-logo-layer {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	cursor: grab;
	user-select: none;
	touch-action: none;
	max-width: none;
}

/* Text: position (left/bottom/top/transform) is set entirely inline by
   renderTextGroup() per the real site's own convention (bottom-anchored,
   translateX only) — this just supplies the non-positional defaults. */
.preview-text-layer {
	cursor: grab;
	user-select: none;
	touch-action: none;
}

.rrt-lc-logo-layer.rrt-dragging,
.preview-text-layer.rrt-dragging {
	cursor: grabbing;
}

/* .preview-text-layer's own base rules (position/line-height/white-space/
   max-width:72%) come from the copied configurator-components.css. Width/
   max-width/position are all set per-element inline by
   renderTextGroup() in label-configurator.js (ported from the real
   site's renderLayerOnEl() — max-width is driven live by the TEXT WIDTH
   slider, not a fixed value), which always wins over this static rule —
   only text-align is left as a plain CSS default here. */
.preview-text-layer {
	text-align: center;
}

/* The copied base rule's `padding: 0.4em 0.6em` exists so text sitting
   inside the whitebox/blackbox background styles has breathing room
   from the box edge — but it scales WITH font size, and for our default
   "dropshadow" style (plain text, no background box) it was eating well
   over 100px per side at large font sizes, wrapping text to a second
   line long before the zone actually ran out of room. Not needed at all
   without a background box, so zeroed out for just that style —
   style-whitebox/style-blackbox keep the original padding. */
.preview-text-layer.style-dropshadow {
	padding: 0;
}

/* --- buttons --- */

.rrt-lc-btn-primary {
	border: none;
	border-radius: 999px;
	padding: 13px 26px;
	font-family: inherit;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	background: var( --rrt-primary );
	color: #fff;
	width: 100%;
}

.rrt-lc-btn-primary:hover {
	background: var( --rrt-primary-dark );
}

.rrt-lc-status {
	font-size: 0.9rem;
	min-height: 1.2em;
	margin-top: 10px;
	white-space: pre-line;
}

/* Pete, 2026-10-29: "Harry, I love it!" — Harry icon next to the box-mockup
   love button, same mascot as the spinner below. */
#rrt-lc-box-love-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	overflow: visible;
}
.rrt-lc-love-icon-wrap {
	display: inline-flex;
	flex: none;
	padding: 5px;
	overflow: visible;
	will-change: filter;
	filter: drop-shadow( 0 0 2px #fff ) drop-shadow( 0 0 3px #fff ) drop-shadow( 0 0 5px #fff );
}
.rrt-lc-love-icon {
	display: block;
	width: 36px;
	height: auto;
}

/* Pete, 2026-10-28: "a spinning Harry icon, just like the file uploader on
   theunframer.com" — same mascot/animation, ported from
   TheUnframer-WP's .harry-spinner + @keyframes harry-spin-inline. No
   filter:invert(1) here (TheUnframer's lives on a dark dropzone; this
   panel's background is light, so Harry's own black line art already
   reads fine as-is). */
.rrt-lc-spinner {
	display: none;
	width: 48px;
	height: auto;
	margin: 10px auto 0;
	opacity: 0.85;
}

.rrt-lc-spinner.is-visible {
	display: block;
	animation: rrt-lc-harry-spin 1.3s linear infinite;
}

@keyframes rrt-lc-harry-spin {
	from { transform: rotate( 0deg ); }
	to   { transform: rotate( 360deg ); }
}

.rrt-lc-status.is-error {
	color: #a1222f;
}

.rrt-lc-status.is-success {
	color: #1a7a3c;
}

/* --- text color palette ---
   .color-row / .color-swatch / .selected are the real site's OWN swatch
   component (copied verbatim into configurator-components.css) — it just
   only ever shipped white/black variants, never wired up. These 5
   data-color values are new, RRT-specific (toffee-appropriate: brand red,
   gold, brown, cream, slate) — the deviation is the palette, not the
   component. */
.color-swatch[ data-color="red" ]   { background: #991e21; }
.color-swatch[ data-color="gold" ]  { background: #c89b3c; }
.color-swatch[ data-color="brown" ] { background: #5c3a21; }
.color-swatch[ data-color="cream" ] { background: #fdf6e3; box-shadow: inset 0 0 0 1px #cbd5e0; }
.color-swatch[ data-color="slate" ] { background: #708090; }

/* The "slide into your own color" picker — a native <input type="color">
   styled to sit in the same row, same size, as the fixed swatches above. */
#text-color-custom {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border: 2.5px solid transparent;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	background: none;
	flex-shrink: 0;
	transition: transform 0.12s, border-color 0.12s;
}
#text-color-custom:hover {
	transform: scale( 1.15 );
}
#text-color-custom.selected {
	border-color: #991e21;
	transform: scale( 1.18 );
}
#text-color-custom::-webkit-color-swatch-wrapper {
	padding: 0;
	border-radius: 50%;
}
#text-color-custom::-webkit-color-swatch {
	border: none;
	border-radius: 50%;
}

/* Pete, 2026-10-17: "no arrow or indication on the drum scroll button" —
   root cause (confirmed by enumerating every matching stylesheet rule via
   a headless test): redrockstoffee.com's own Elementor Kit has a global
   reset, `.elementor-kit-4045 button { background-color: var(--e-global-
   color-accent); border-style: none; ... }`, which is MORE specific than
   .font-drum-rotator's own rule in quote-module-style.part.php (1 class +
   1 type beats 1 class alone), so it silently overrode the white
   background/red border with the site's orange brand button look and no
   border — the button was there and clickable, just invisible as a
   button, with no room left for the chevron icon to read clearly either.
   Can't raise the copied .part.php rule's own specificity without
   diverging from the real site's source, so this one deviation uses
   !important — a plugin needing to win over the host theme/kit's global
   button reset is exactly what it's for. */
.font-drum-rotator {
	background: #fff !important;
	border: 1.5px solid #991e21 !important;
}
.font-drum-rotator svg {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------
   3D box mockup — Pete, 2026-10-25: "visual helper... looking at it
   from the front on a 30 degree up angle and 30 degree angle to the
   left." Plain CSS 3D transforms on 3 flat divs (top/front/left end
   cap — the only faces ever visible from this one FIXED angle; this is
   not a rotatable viewer). --box-tilt/--box-turn are the two numbers to
   hand-tune the camera; --box-w/--box-d/--box-h are set per-size by
   computeBoxFaces() in label-configurator.js. All three faces share the
   standard "CSS cube" recipe: centered on the box's middle via
   top:50%/left:50%/negative margin, then pushed out along their own
   local Z axis by half the box's size on that axis.

   2026-10-25 (same day): moved from an always-visible inline block into
   a popup (see .rrt-lc-box-modal below) opened by
   #rrt-lc-box-preview-btn — the custom properties below now live on
   .rrt-lc-box-modal-panel instead of a standalone wrapper.
   -------------------------------------------------------------------- */

.rrt-lc-box-preview-btn {
	margin-top: 1.5rem;
}

/* `:not([hidden])` on purpose, not a bare `display:flex` — an author
   rule of equal specificity to the browser's own `[hidden]{display:
   none}` would win by cascade order and silently defeat `hidden`. */
.rrt-lc-box-modal:not( [hidden] ) {
	position: fixed;
	inset: 0;
	/* Pete, 2026-10-25: "the dropdown arrow fo the font selector... is
	   visible in popupbox and actually functions to move font drum below
	   the popup" — configurator-base.css (the TheUnframer copy this
	   plugin's built on) uses z-index values up to 100000 for its own
	   dropdowns/overlays elsewhere on the page; 1000 was nowhere near
	   high enough to actually sit on top of that, so the font drum's own
	   arrow was rendering (and receiving clicks) right through the
	   popup. Set well above anything else on the page instead of trying
	   to track down and out-number every individual control. */
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.rrt-lc-box-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
}

.rrt-lc-box-modal-panel {
	--box-tilt: 30deg; /* Pete, 2026-10-25: "roll forward... look at the top flat on" — now live, drag-driven (vertical) same as --box-turn (horizontal) */
	--box-turn: 30deg; /* turned left/right — live, drag-driven */
	position: relative;
	background: #fff;
	border-radius: 12px;
	padding: 1.25rem;
	width: 100%;
	max-width: 680px; /* Pete, 2026-10-25: widened again to match another BOX_PX_PER_INCH bump (46 -> 58) */
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.3 );
}

.rrt-lc-box-modal-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.rrt-lc-box-modal-actions .rrt-lc-btn-primary,
.rrt-lc-box-modal-actions .rrt-lc-btn-secondary {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	padding: 10px 12px;
	font-size: 0.85rem;
}

.rrt-lc-btn-secondary {
	border: 1.5px solid var( --rrt-primary );
	border-radius: 999px;
	padding: 13px 26px;
	font-family: inherit;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	background: #fff;
	color: var( --rrt-primary );
}
.rrt-lc-btn-secondary:hover {
	background: var( --rrt-primary-dark );
	border-color: var( --rrt-primary-dark );
	color: #fff;
}

/* Pete, 2026-10-25: "remove the - and + on either end... a grab/smoosh
   to slide it" — replaced the range slider with a direct drag on the box
   itself (see the pointer handlers on #rrt-lc-box-perspective in
   label-configurator.js). */
.rrt-lc-box-drag-hint {
	margin: 0 0 0.35rem;
	text-align: center;
	font-size: 0.75rem;
	color: #777;
}

.rrt-lc-box-perspective.rrt-lc-box-dragging {
	cursor: grabbing;
}

.rrt-lc-box-perspective {
	cursor: grab;
	touch-action: none; /* same reason #rrt-lc-zone sets this — a drag gesture here shouldn't also try to scroll the page */
	/* Pete, 2026-10-25: generous padding, not a precise bounding-box
	   calc — the tilted scene's real on-screen footprint is awkward to
	   compute exactly, and overflow:visible lets it show fully anyway;
	   this just keeps the surrounding layout from collapsing around it.
	   Padding's a bit more generous than the minimum so the glossy-white
	   box still reads as "on" the dark backdrop even swung to the
	   slider's extremes, not cut off at the backdrop's own edge. */
	position: relative;
	padding: 4.5rem 1.5rem; /* Pete, 2026-10-25: "package box doesn't hit edges" after the bigger BOX_PX_PER_INCH — was 3.3rem top/bottom */
	margin: 0.75rem 0;
	border-radius: 10px;
	/* Pete, 2026-10-25: "our background the logo red color, but a
	   infinity horizon look" — a studio-cyclorama/"infinity cove" sweep:
	   a bright band where the floor would curve seamlessly up into the
	   wall (roughly 60% down), fading out to a near-black red at the
	   edges for depth, all within the brand red family (--rrt-primary
	   #991e21 sits in the middle of this range) rather than neutral gray. */
	background: radial-gradient( ellipse 150% 70% at 50% 60%, #c0302b 0%, #991e21 30%, #5a1012 62%, #210505 100% );
	perspective: 1400px;
	display: flex;
	justify-content: center;
	overflow: visible;
}

.rrt-lc-box-scene {
	position: relative;
	width: var( --box-w );
	height: var( --box-h );
	transform-style: preserve-3d;
	/* Pete, 2026-10-25: was showing the blank bottom instead of the top —
	   rotateX's sign was backwards (positive tilted the camera to look
	   UP at the underside, not DOWN onto the top). Negated so a positive
	   --box-tilt now reads as "looking down from above", matching its
	   own comment above. */
	transform: rotateX( calc( -1 * var( --box-tilt ) ) ) rotateY( calc( -1 * var( --box-turn ) ) );
}

.rrt-lc-box-face {
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fdfdfb; /* glossy white box stock, showing through any unlabeled margin */
	/* Pete, 2026-10-25: "a little more grey to the edges/corners of the
	   3d box" — an inset blur (no spread) naturally concentrates where
	   two edges meet, i.e. the corners, fading toward the middle of each
	   face — a cheap stand-in for ambient occlusion that reads as real
	   dimension/form instead of flat pasted-on faces. */
	/* Pete, 2026-10-25: "take the edges/color back to halfway between
	   what it was" (16px/0.3 -> 8px/0.15) -> "box edges seem a little
	   too grey again" — pulled back further. */
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.06 ), inset 0 0 5px rgba( 60, 60, 60, 0.09 );
	overflow: hidden;
}

.rrt-lc-box-top {
	width: var( --box-w );
	height: var( --box-d );
	margin: calc( -0.5 * var( --box-d ) ) 0 0 calc( -0.5 * var( --box-w ) );
	transform: rotateX( 90deg ) translateZ( calc( 0.5 * var( --box-h ) ) );
	/* a soft sheen, brightest toward the viewer's side of the top edge */
	background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.85 ), rgba( 255, 255, 255, 0 ) 60% );
}

.rrt-lc-box-front {
	width: var( --box-w );
	height: var( --box-h );
	margin: calc( -0.5 * var( --box-h ) ) 0 0 calc( -0.5 * var( --box-w ) );
	transform: translateZ( calc( 0.5 * var( --box-d ) ) );
}

/* Pete, 2026-10-25: added a right end cap once the swing slider could
   turn the box far enough to expose that side too — same plain glossy
   white as the left one, mirrored (rotateY sign flipped, gradient
   direction flipped to match which side catches the light). */
.rrt-lc-box-endcap-left,
.rrt-lc-box-endcap-right {
	width: var( --box-d );
	height: var( --box-h );
	margin: calc( -0.5 * var( --box-h ) ) 0 0 calc( -0.5 * var( --box-d ) );
	/* bare glossy white, no label ever reaches the end caps */
}
.rrt-lc-box-endcap-left {
	transform: rotateY( -90deg ) translateZ( calc( 0.5 * var( --box-w ) ) );
	background-image: linear-gradient( to right, rgba( 0, 0, 0, 0.05 ), rgba( 255, 255, 255, 0.5 ) 70% );
}
.rrt-lc-box-endcap-right {
	transform: rotateY( 90deg ) translateZ( calc( 0.5 * var( --box-w ) ) );
	background-image: linear-gradient( to left, rgba( 0, 0, 0, 0.05 ), rgba( 255, 255, 255, 0.5 ) 70% );
}

/* The printed label strip is narrower than the box (confirmed with
   Pete) — centered by JS (left offset computed in computeBoxFaces()),
   leaving bare .rrt-lc-box-face background showing on both sides. */
.rrt-lc-box-label-strip {
	position: absolute;
	top: 0;
	overflow: hidden;
}

.rrt-lc-box-label-img {
	position: absolute;
	left: 0;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

/* Pete, 2026-10-25: "the label itself need to be the regular label
   color... a light butter yellow" through several rounds (cougar
   natural -> lavender bug with multiply blend -> flat alpha wash that
   traded paper color against ink legibility -> a sepia filter that
   still wasn't the real original colors) -> "start from scratch...
   for that part of the image" — every CSS-only trick applies uniformly
   to every pixel, so it could never color ONLY the paper while leaving
   the logo's true printed colors alone. Real fix: the template JPGs
   themselves are pre-tinted at build time (scratchpad's
   tint-template.php, GD-based — recolors only near-white background
   pixels, leaves ink/logo colors untouched) and the 3D mockup loads
   that version (template_tinted_url in rrt-label-configurator.php)
   instead of applying any live CSS effect at all. No tint
   div/filter/blend needed here anymore — the image already carries its
   correct color. */

/* The live clone of #rrt-lc-zone (see mirrorZoneToBox() in
   label-configurator.js) — purely decorative, never interactive. */
.rrt-lc-zone-mirror {
	/* Pete, 2026-10-25: "two lines of type and the bottom line was
	   partially missing the bottoms of the letters" — text grows upward
	   from a bottom anchor and is allowed to sit slightly past the dashed
	   line in the real editor too (clampGroupToZone() in
	   label-configurator.js), just never clipped there since #rrt-lc-zone
	   itself has no overflow:hidden. This did, cutting off descenders.
	   Dropped to match — anything that overflows now clips only at
	   .rrt-lc-box-label-strip's edge (the actual print panel boundary),
	   same as what would really get printed. */
	position: absolute;
	pointer-events: none;
}

.rrt-lc-zone-mirror-inner {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: top left;
	pointer-events: none;
}

@media ( max-width: 991px ) {
	.rrt-lc-box-perspective {
		padding: 3rem 0.5rem; /* same top/bottom bump as the desktop rule above */
	}
}