/* Template picker CSS (extracted from the inline <style> in functions.php).
   Loaded via <link>?v=UXC_ASSET_VER in admin.php so version bumps force a refresh.
   Text/border colors use the admin theme variables so the picker is visible in
   BOTH light and dark themes (it used to be white-on-white, invisible in light). */

.uxc-template-pane { margin-top: 10px; margin-bottom: 16px; }
.uxc-template-pane-head { position: relative; margin-bottom: 8px; line-height: 2; }
.uxc-template-pane-label { font-size: 13px; font-weight: 500; color: var(--uxc-text-muted, #999); display: inline !important; }
.uxc-template-pane-name { font-size: 15px; font-weight: 700; color: var(--uxc-text-primary, #1a1a1a); display: inline !important; margin-left: 4px; }
.uxc-template-pane-link { margin-left: auto; font-size: 12px; color: #a37a29; text-decoration: none; }
.uxc-template-pane-link:hover { text-decoration: underline; }

.uxc-template-pane-frame { position: relative; width: 100%; height: 520px; overflow: hidden; border-radius: 0; border: 2px solid rgba(204,153,51,.35); background: rgba(127,127,127,.12); }
.uxc-template-pane-frame iframe { position: absolute; top: 0; left: 0; width: var(--uxc-dev-w, 100%); height: var(--uxc-dev-h, 100%); border: 0; transform: scale(var(--uxc-ts, 1)); transform-origin: top left; }

.uxc-template-pane-devices { position: absolute !important; right: 0; top: 50%; transform: translateY(-50%); display: flex !important; flex-direction: row; gap: 4px; }
.uxc-preview-device { cursor: pointer; padding: 5px; border-radius: 5px; color: var(--uxc-text-muted, #999); display: flex; align-items: center; line-height: 0; }
.uxc-preview-device:hover { color: var(--uxc-text-primary, #1a1a1a); background: var(--uxc-hover-bg, rgba(0,0,0,0.05)); }
.uxc-preview-device.uxc-active { color: #a37a29; background: rgba(204,153,51,.12); }

/* Device preview: the frame resizes to the device's width + height (centered). The iframe fills it, so
   the storefront's responsive CSS renders the layout for that width. */
.uxc-template-pane-frame { transition: max-width .25s ease, height .25s ease; }
.uxc-template-pane-frame.uxc-preview-tablet { max-width: 768px; height: 600px; margin: 0 auto; }
.uxc-template-pane-frame.uxc-preview-mobile { max-width: 390px; height: 700px; margin: 0 auto; }

.uxc-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 768px) { .uxc-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.uxc-template-item { border: 2px solid var(--uxc-border-color, #b0b0b0); border-radius: 0; padding: 6px; cursor: pointer; text-align: center; transition: border-color .15s; }
.uxc-template-item:hover { border-color: rgba(204,153,51,.5); }
.uxc-template-item.uxc-active { border-color: #a37a29; background: rgba(204,153,51,.08); }
/* Thumbnail base palette: flips with the admin theme (the inlined SVG reads these vars).
   --uxc-thumb-accent is set inline on the grid from the merchant's shop-color-accent. */
.uxc-template-tile { position: relative; width: 100%; aspect-ratio: 200/130; overflow: hidden; border-radius: 0; background: rgba(127,127,127,.15); --uxc-thumb-bg:#f8fafc; --uxc-thumb-fg:#0f172a; }
.uxc-dark-mode .uxc-template-tile { --uxc-thumb-bg:#0a0a0a; --uxc-thumb-fg:#ffffff; }
.uxc-template-tile svg { width: 100%; height: 100%; display: block; }
.uxc-template-swatch { position: absolute; top: 5px; right: 5px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--uxc-border-color, #b0b0b0); z-index: 2; }
.uxc-template-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; min-width: 0; }
.uxc-template-name { font-size: 13px; font-weight: 600; color: var(--uxc-text-primary, #1a1a1a); line-height: 1.2; text-align: left; overflow-wrap: anywhere; }
.uxc-template-preview { font-size: 12px; color: #a37a29; text-decoration: none; white-space: nowrap; cursor: pointer; }
.uxc-template-preview:hover { text-decoration: underline; }
.uxc-template-customize { font-size: 11px; font-weight: 700; color: #1a1300; background: linear-gradient(180deg, #e6b347, #cc9933); text-decoration: none; white-space: nowrap; cursor: pointer; padding: 4px 9px; border-radius: 6px; margin-left: auto; }
.uxc-template-customize:hover { filter: brightness(1.06); }

#shop-page-template { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(127,127,127,.18); }
.uxc-dark-mode #shop-page-template { border-top-color: rgba(255,255,255,.1); }

/* Template Category as a button group (the <select> is hidden in JS + stays the save value carrier). */
.uxc-industry-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.uxc-industry-btn { font: inherit; font-size: 13px; line-height: 1; color: var(--uxc-text-primary, #1a1a1a); background: transparent; border: 1px solid var(--uxc-border-color, #b0b0b0); border-radius: 0; padding: 8px 14px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.uxc-industry-btn:hover { border-color: rgba(204,153,51,.5); color: var(--uxc-text-primary, #1a1a1a); }
.uxc-industry-btn.uxc-active { border-color: #a37a29; background: rgba(204,153,51,.12); color: var(--uxc-text-primary, #1a1a1a); }