/* ══════════════════════════════════════════════════════════════════
   WAPF Override Styles for artprintstopia.com — Product #21079
   Served from Replit, loaded via <link> in WordPress functions.php

   DOM NOTES (critical for selector accuracy):
   - #upload-tool-root and #product-21079 are SIBLINGS
   - React moves WAPF content into #wapf-light-dom-slot inside
     #upload-tool-root, so #product-21079 is NOT an ancestor
   - .wapf-product-totals is OUTSIDE #wapf_21079, it's a sibling
   - After React moves content, the ancestry is:
       #upload-tool-root > #wapf-light-dom-slot > form.cart >
         #wapf_21079 (fields)
         .wapf-product-totals (sibling of #wapf_21079)
   ══════════════════════════════════════════════════════════════════ */

/* Hide WooCommerce product form off-screen (pricing JS still works) */
#product-21079 .add-to-cart-container {
    position: absolute !important;
    left: -9999px !important;
}

/* Hide WAPF fields controlled by our React app */
.field-66987488c2164,
.field-66987488c2135,
.field-66987488c2153 {
    display: none !important;
}

/* ── Base font ── */
#wapf_21079,
#wapf_21079 * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ── Field spacing — compact with subtle divider lines ── */
#wapf_21079 .wapf-field-container {
    margin-bottom: 0 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #eee !important;
}
#wapf_21079 .wapf-field-container:last-child,
#wapf_21079 .wapf-field-container:nth-last-child(1),
#wapf_21079 .wapf-field-container:last-of-type {
    border-bottom: none !important;
}
/* No separator on hidden fields */
.field-66987488c2164,
.field-66987488c2135,
.field-66987488c2153 {
    border-bottom: none !important;
    padding: 0 !important;
}
/* No separator on description/paragraph fields (the info block at top) */
#wapf_21079 .wapf-field-container.wapf-field-p {
    border-bottom: none !important;
}
/* No separator on the Hang/Float field (last visible before hidden fields + Product Total) */
#wapf_21079 .wapf-field-container:nth-last-child(4) {
    border-bottom: none !important;
}

/* ── Labels ── */
#wapf_21079 .wapf-field-label {
    margin-bottom: 2px !important;
}
#wapf_21079 .wapf-field-label label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 3px !important;
    display: block !important;
}

/* Required asterisk in brand gold */
#wapf_21079 .wapf-field-label .required {
    color: #D6A41B !important;
    text-decoration: none !important;
    border: none !important;
}

/* ── Text swatches — compact ── */
#wapf_21079 .wapf-swatch--text {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 4px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #444 !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    margin: 0 4px 4px 0 !important;
}
#wapf_21079 .wapf-swatch--text:hover {
    border-color: #6a9b91 !important;
    background: rgba(106,155,145,0.04) !important;
}
#wapf_21079 .wapf-swatch--text.wapf-checked {
    border-color: #6a9b91 !important;
    background: rgba(106,155,145,0.08) !important;
    color: #2d5a50 !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 1px #6a9b91 !important;
}

/* ── Select dropdowns — compact ── */
#wapf_21079 select.wapf-input {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 5px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    background: #fff !important;
    width: 100% !important;
    appearance: auto !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease !important;
    height: auto !important;
}
#wapf_21079 select.wapf-input:focus {
    border-color: #6a9b91 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(106,155,145,0.15) !important;
}

/* ══════════════════════════════════════════════════════════════════
   CHECKBOXES — compact, minimal bottom spacing
   ══════════════════════════════════════════════════════════════════ */
#wapf_21079 .wapf-field-true-false .wapf-field-input > div.wapf-checkable,
#wapf_21079 .wapf-field-checkboxes .wapf-field-input > div.wapf-checkable {
    font-size: 14px !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    clear: none !important;
}
#wapf_21079 .wapf-field-true-false .wapf-input-label,
#wapf_21079 .wapf-field-checkboxes .wapf-input-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 12px !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #444 !important;
    background: #fff !important;
    box-sizing: border-box !important;
}
#wapf_21079 .wapf-field-true-false .wapf-input-label:hover,
#wapf_21079 .wapf-field-checkboxes .wapf-input-label:hover {
    border-color: #6a9b91 !important;
    background: rgba(106,155,145,0.04) !important;
}
#wapf_21079 .wapf-field-true-false input[type="checkbox"],
#wapf_21079 .wapf-field-checkboxes input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
    accent-color: #6a9b91 !important;
    cursor: pointer !important;
    position: static !important;
    opacity: 1 !important;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
}
#wapf_21079 .wapf-field-true-false .wapf-custom,
#wapf_21079 .wapf-field-checkboxes .wapf-custom {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
#wapf_21079 .wapf-field-true-false .wapf-label-text,
#wapf_21079 .wapf-field-checkboxes .wapf-label-text {
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* ── Description/highlight paragraphs — compact ── */
#wapf_21079 .wapf-field-p .wapf-field-input > div {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #555 !important;
    background: #f8f8f7 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    border: 1px solid #eee !important;
}
#wapf_21079 .wapf-field-p .wapf-field-input a {
    color: #6a9b91 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
#wapf_21079 .wapf-field-p .wapf-field-input a:hover {
    text-decoration: underline !important;
}

/* ── Tooltip icon ── */
#wapf_21079 .wapf-tt-icon svg {
    width: 14px !important;
    height: 14px !important;
    fill: #6a9b91 !important;
    opacity: 0.7 !important;
    vertical-align: middle !important;
}

/* ── Pricing hint — darker for readability ── */
#wapf_21079 .wapf-pricing-hint {
    font-size: 12px !important;
    color: #777 !important;
    font-weight: 400 !important;
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT TOTALS — tight, compact
   ══════════════════════════════════════════════════════════════════ */
div.wapf-product-totals[data-product-id="21079"] {
    background: linear-gradient(135deg, rgba(106,155,145,0.12) 0%, rgba(106,155,145,0.06) 100%) !important;
    border: 1.5px solid rgba(106,155,145,0.35) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    margin-top: 8px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    display: flex !important;
    align-items: center !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
}
div.wapf-product-totals[data-product-id="21079"] .wapf--inner {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
div.wapf-product-totals[data-product-id="21079"] .wapf--inner > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
}
div.wapf-product-totals[data-product-id="21079"] span {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
    white-space: nowrap !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
div.wapf-product-totals[data-product-id="21079"] span.amount {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}
div.wapf-product-totals[data-product-id="21079"] p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* ── Text input fields — compact ── */
#wapf_21079 input[type="text"].wapf-input {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 5px 12px !important;
    font-size: 14px !important;
    color: #333 !important;
    width: 100% !important;
    transition: border-color 0.15s ease !important;
}
#wapf_21079 input[type="text"].wapf-input:focus {
    border-color: #6a9b91 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(106,155,145,0.15) !important;
}

/* ── Kill any extra WAPF wrapper margins/padding ── */
#wapf_21079 .wapf-field-input {
    margin: 0 !important;
    padding: 0 !important;
}
#wapf_21079 .wapf-field-description {
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Remove margin from last field before product totals ── */
#wapf_21079 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}