.apaou-customer-fields {
    margin-bottom: 15px;
}

.apaou-customer-fields label.pewc-field-label {
    margin-top: 15px;
    display: block;
}

/* subfield headings (colour, font size, font family, alignment, line height)
   are smaller than the main field label */
.apaou-customer-fields .apaou-customer-field-wrapper .pewc-field-label {
    font-size: 0.85em;
}

.woocommerce-product-gallery img {
    margin: 0 auto !important;
}

.apaou-font-loading {
    color: blue;
}
.apaou-font-error {
    color: red;
}
.selectGFontContainer .select2-results__option {
    margin-bottom: 0;
}
.apaou-text-layer {
  text-align: center;
  z-index: 999
}
.apaou-text-preview-field {
  margin: 2em 0;
  padding: 2em;
  border: 1px solid #ccc;
  background: #f9f9f9;
}
.apaou-customer-fields {
	margin-top: 2rem
}

/*.pewc-item-advanced-preview .pewc-text-counter-container {
    margin-top:inherit; // commented out in 1.3.2, remove later
}*/
.pewc-product-extra-groups .pewc-item:not(.pewc-item-checkbox):not(.pewc-item-products-radio-list) .apaou-customer-fields label.apaou-justify-label {
    display: inline-block !important;
    width: 42px;
    margin-right: 8px;
}
.apaou-customer-fields .pewc-text-swatch {
    display: inline;
}
.apaou-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2em
}
.apaou-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2em
}
.apaou-grid-2 .select2-container,
.apaou-grid-3 .select2-container,
.apaou-customer-fields--inline .select2-container {
    width: 100% !important
}

/* 1.3.2, Table group layout */
table.pewc-product-extra-groups .apaou-customer-field-wrapper { text-align: left; margin-bottom: 30px; }
table.pewc-product-extra-groups tr.pewc-item-advanced-preview td { vertical-align: top; }

/* 2.0.0, "Subfields on same row" - the template wraps the text input (plus its
   char counter and description) in .apaou-inline-main and adds the --inline
   modifier to the customer subfields container; JS adds .apaou-inline-row to
   the parent .pewc-item-field-wrapper. The input, font select and alignment
   swatches then all sit on one row. !important guards against theme layout
   rules on .pewc-item / .pewc-item-field-wrapper children. */
.pewc-item.pewc-item-advanced-preview .pewc-item-field-wrapper.apaou-inline-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 1em 2em !important;
}
/* the label spans the row; the input column and the subfields share the rest */
.pewc-item-advanced-preview .apaou-inline-row > .pewc-field-label {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 0 !important;
}
.pewc-item-advanced-preview .apaou-inline-row > .apaou-inline-main {
    flex: 0 1 calc( 50% - 1em ) !important;
    min-width: 0 !important;
}
/* the subfields container is itself a flex row for the font select + swatches */
.pewc-item-advanced-preview .apaou-inline-row > .apaou-customer-fields--inline {
    flex: 1 1 calc( 50% - 1em ) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 1em !important;
    margin: 0 !important;
    grid-template-columns: none !important;
}
/* input, counter and description stack in the input column, each full width */
.pewc-item-advanced-preview .apaou-inline-main > .pewc-advanced-preview-field {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}
.pewc-item-advanced-preview .apaou-inline-main > .pewc-text-counter-container,
.pewc-item-advanced-preview .apaou-inline-main > .pewc-description {
    margin: 0.25em 0 0 !important;
}
/* keep hidden inputs out of every flex context in this field */
.pewc-item-advanced-preview .apaou-inline-row input[type="hidden"] {
    display: none !important;
}
.pewc-item-advanced-preview .apaou-customer-fields--inline > .apaou-customer-field-wrapper {
    margin: 0 !important;
}
.pewc-item-advanced-preview .apaou-customer-fields--inline .pewc-field-label {
    margin-top: 0 !important;
}
/* the font select grows to fill its share of the row */
.pewc-item-advanced-preview .apaou-customer-fields--inline > .apaou-customer-field-wrapper:first-child {
    flex: 1 1 160px !important;
    min-width: 0 !important;
}
.pewc-item-advanced-preview .apaou-customer-fields--inline .apaou-font-family-field {
    width: 100%;
}
/* the alignment swatches take only the space they need and stay on one line,
   with a small gap between the three icon buttons */
.pewc-item-advanced-preview .apaou-customer-fields--inline > .apaou-customer-field-wrapper:last-child {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}
/* the JS refines the label to the exact input height; give the swatch a
   sensible default first so there is no flash of oversized icons before JS
   runs */
.pewc-item-advanced-preview .apaou-customer-fields--inline .pewc-text-swatch {
    display: inline-flex !important;
    align-items: stretch !important;
    height: auto !important;
}
.pewc-product-extra-groups .pewc-item.pewc-item-advanced-preview .apaou-customer-fields--inline .pewc-text-swatch label.apaou-justify-label,
.pewc-product-extra-groups .pewc-item.pewc-item-advanced-preview .apaou-customer-fields--inline .pewc-text-swatch .pewc-radio-form-label.apaou-justify-label {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 2.6em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.pewc-product-extra-groups .pewc-item.pewc-item-advanced-preview .apaou-customer-fields--inline .pewc-text-swatch label.apaou-justify-label img {
    display: block !important;
    width: 18px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: auto !important;
    vertical-align: middle !important;
}
/* ── 2.0.0, interactive text preview ── */
body.apaou-no-select {
    user-select: none;
    -webkit-user-select: none;
}
/* fills layer_parent and hosts the unclipped overlay + handles. NOT
   overflow:hidden - the drag/rotate/resize handles on the overlay sit just
   outside the layer's edges and must stay visible. The real text layer is
   kept inside bounds by clamp_to_bounds() (and clipped to a drawn area by
   .apaou-area-clip below) */
.apaou-layer-clip {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* per-field clip-path scoped to just this field's "Set preview area" boundary.
   Clips only the real text layer (its child); the overlay + handles are a
   sibling on .apaou-layer-clip, so they stay visible */
.apaou-area-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
/* the visible, unclipped mirror of the real text layer's box - carries every
   drag/rotate/resize handle and every interact.js binding. No text of its own */
.apaou-layer-overlay {
    position: absolute;
    transform: translate( -50%, -50% );
    box-sizing: border-box;
    pointer-events: auto;
    touch-action: none;
    cursor: move;
    border: 1px dashed rgba( 0, 0, 0, 0.35 );
    background: rgba( 127, 127, 127, 0.06 );
    z-index: 1000;
    min-width: 24px;
    min-height: 18px;
    transition: opacity 0.15s ease;
}
.apaou-layer-overlay:hover,
.apaou-layer-overlay.apaou-interactive-active {
    border-color: rgba( 0, 0, 0, 0.6 );
    background: rgba( 127, 127, 127, 0.12 );
}
/* the real text layer stays click-through even when interactive - all
   pointer interaction happens on the overlay that mirrors it */
.apaou-text-layer.apaou-interactive-enabled {
    pointer-events: none;
}
/* corner handles for the "resize = scale font size" gesture, on the overlay */
.apaou-resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid rgba( 0, 0, 0, 0.45 );
    border-radius: 2px;
    touch-action: none;
    pointer-events: auto;
    z-index: 2;
}
.apaou-resize-handle-se {
    right: -6px;
    bottom: -6px;
    cursor: nwse-resize;
}
.apaou-resize-handle-nw {
    left: -6px;
    top: -6px;
    cursor: nwse-resize;
}
/* shows the customer where they can drag/resize/rotate to, when the admin has
   drawn a custom area - purely visual, doesn't intercept clicks. clip-path
   (set in scripts.js) does the shaping */
.apaou-area-boundary {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    background: rgba( 0, 100, 200, 0.12 );
    box-shadow: inset 0 0 0 1px rgba( 0, 100, 200, 0.6 );
    z-index: 15;
    transition: opacity 0.15s ease;
}
/* the tint is only a hint for an empty field - transparent once there's text */
.apaou-area-boundary.apaou-area-boundary-hidden {
    opacity: 0;
}
/* the field itself is currently hidden by a condition/variation - the preview
   area tint (and, if present, the drag/resize/rotate overlay) must not show
   over an image for a field the customer can't even see */
.apaou-area-boundary.apaou-condition-hidden,
.apaou-layer-overlay.apaou-condition-hidden,
.apaou-reset-handle.apaou-condition-hidden {
    display: none;
}
/* the interactive controls (overlay + handles, Reset button) are meaningless
   until there's text to position - hidden and non-interactive until then */
.apaou-hidden-until-text {
    opacity: 0;
    pointer-events: none;
}
.apaou-rotate-handle {
    position: absolute;
    top: -28px;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #fff;
    border: 1px solid rgba( 0, 0, 0, 0.45 );
    border-radius: 50%;
    cursor: alias;
    touch-action: none;
    pointer-events: auto;
    z-index: 2;
}
.apaou-rotate-handle::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 14px;
    background: rgba( 0, 0, 0, 0.45 );
    transform: translateX( -50% );
}
/* positioned relative to the product image itself so it stays fixed in the
   corner regardless of the text layer's position/size/rotation */
.apaou-reset-handle {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    background: #fff;
    border: 1px solid rgba( 0, 0, 0, 0.45 );
    border-radius: 3px;
    cursor: pointer;
    touch-action: none;
    z-index: 1001;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}
.apaou-reset-handle:hover {
    background: #f0f0f0;
}
/* when several interactive fields share one product image, only the active
   field's Reset button is shown - see apaou_set_active_field() in scripts.js */
.apaou-reset-handle.apaou-inactive-field {
    display: none;
}
.apaou-reset-handle.pewc-hidden-field {
    display: none;
}