/* ============================================
   BIM Forms — Centralized Form System
   ============================================
   High specificity selectors (input.bim-input,
   select.bim-select, textarea.bim-textarea) to
   override WordPress theme and Elementor styles.

   CRITICAL: WordPress/Elementor apply aggressive
   rules to form elements. We use element-qualified
   selectors and !important on key properties.
   ============================================ */

/* ── BASE RESET ── */
input.bim-input,
input.bim-cost-label-input,
input.bim-cost-amount-input,
input.bim-rate-input,
input.bim-alt-url-input,
input.bim-product-price-input,
select.bim-select,
textarea.bim-textarea,
textarea.bim-alt-url-note,
.bim-input,
.bim-cost-label-input,
.bim-cost-amount-input,
.bim-rate-input,
.bim-alt-url-input,
.bim-product-price-input,
.bim-select,
.bim-textarea,
.bim-alt-url-note {
    box-sizing: border-box;
    font-family: var(--bim-font);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    margin: 0;
}

/* ============================================
   TEXT INPUTS — .bim-input
   `body` prefix bumps specificity to (0,1,2)
   so plugin wins over WordPress/Elementor
   input[type="text"] rules at (0,1,1).
   ============================================ */
body input.bim-input,
body .bim-input {
    width: 100%;
    background-color: var(--bim-surface) !important;
    border: 1px solid var(--bim-border) !important;
    border-radius: var(--bim-radius-sm) !important;
    font-size: var(--bim-text-base);
    padding: var(--bim-space-2) var(--bim-space-3);
    font-weight: 700;
    color: var(--bim-text-secondary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

body input.bim-input:focus,
body .bim-input:focus {
    outline: none !important;
    border-color: var(--bim-accent) !important;
    box-shadow: 0 0 0 1px var(--bim-accent) !important;
}

body input.bim-input::placeholder,
body .bim-input::placeholder {
    color: var(--bim-text-faint);
    font-weight: 500;
}

/* ============================================
   COST INPUTS — .bim-cost-label-input
   ============================================ */
input.bim-cost-label-input,
.bim-cost-label-input {
    width: 100%;
    background-color: var(--bim-surface) !important;
    border: 1px solid var(--bim-border) !important;
    border-radius: var(--bim-radius-sm) !important;
    font-size: var(--bim-text-base);
    padding: var(--bim-space-2) var(--bim-space-3);
    font-weight: 700;
    color: var(--bim-text-secondary);
    transition: border-color 0.2s;
}

input.bim-cost-label-input:focus,
.bim-cost-label-input:focus {
    outline: none !important;
    border-color: var(--bim-accent) !important;
    box-shadow: 0 0 0 1px var(--bim-accent) !important;
}

/* ============================================
   AMOUNT INPUTS — .bim-cost-amount-input
   ============================================ */
input.bim-cost-amount-input,
.bim-cost-amount-input {
    width: 100%;
    background-color: var(--bim-surface) !important;
    border: 1px solid var(--bim-border) !important;
    border-radius: var(--bim-radius-sm) !important;
    font-size: var(--bim-text-base);
    padding: var(--bim-space-2) var(--bim-space-3);
    padding-left: 1.75rem;
    font-weight: 700;
    color: var(--bim-text-primary);
    transition: border-color 0.2s;
}

input.bim-cost-amount-input:focus,
.bim-cost-amount-input:focus {
    outline: none !important;
    border-color: var(--bim-accent) !important;
    box-shadow: 0 0 0 1px var(--bim-accent) !important;
}

/* ── Amount Variants ── */
.bim-cost-amount-input.bim-gestion-input {
    font-weight: 900;
    color: var(--bim-success);
}

.bim-cost-amount-input.bim-discount-input {
    font-weight: 900;
    color: var(--bim-accent);
}

/* ============================================
   RATE INPUT — .bim-rate-input
   ============================================ */
input.bim-rate-input,
.bim-rate-input {
    width: 4rem;
    background-color: var(--bim-surface) !important;
    border: 1px solid var(--bim-border) !important;
    border-radius: var(--bim-radius-sm) !important;
    font-size: var(--bim-text-base);
    text-align: center;
    font-weight: 900;
    padding: var(--bim-space-1);
    color: var(--bim-text-primary);
}

input.bim-rate-input:focus,
.bim-rate-input:focus {
    outline: none !important;
    border-color: var(--bim-accent) !important;
    box-shadow: 0 0 0 1px var(--bim-accent) !important;
}

/* ============================================
   INPUT PREFIX — Icon + $ symbol
   ============================================ */
.bim-input-icon {
    position: relative;
}

.bim-input-icon-full {
    width: 100%;
}

.bim-input-prefix {
    position: absolute;
    left: var(--bim-space-3);
    /* Fixed top instead of 50% — JS injects .bim-validation-error inside
       .bim-input-icon (after the input), making the container grow taller.
       top: 50% would then point past the input center. Pinning to 1.125rem
       (padding-top 0.5rem + half line-height ~0.625rem) keeps it anchored
       to the input regardless of what gets injected below. */
    top: 1.125rem;
    transform: translateY(-50%);
    color: var(--bim-text-faint);
    font-size: var(--bim-text-base);
    font-weight: 700;
    pointer-events: none;
    display: flex;
    align-items: center;
    line-height: 1;
}

.bim-input-with-prefix {
    padding-left: 2rem !important;
}

/* ============================================
   SELECT — .bim-select
   ============================================ */
select.bim-select,
.bim-select {
    width: 100%;
    background-color: var(--bim-surface) !important;
    border: 1px solid var(--bim-border) !important;
    border-radius: var(--bim-radius) !important;
    font-size: var(--bim-text-base);
    padding: var(--bim-space-3);
    color: var(--bim-text-secondary);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s;
}

select.bim-select:focus,
.bim-select:focus {
    outline: none !important;
    border-color: var(--bim-accent) !important;
    box-shadow: 0 0 0 1px var(--bim-accent) !important;
}

/* ============================================
   TEXTAREA — .bim-textarea
   ============================================ */
textarea.bim-textarea,
.bim-textarea {
    width: 100%;
    background-color: var(--bim-bg-input) !important;
    border: 1px solid var(--bim-border) !important;
    border-radius: var(--bim-radius) !important;
    font-size: var(--bim-text-base);
    padding: var(--bim-space-3);
    color: var(--bim-text-secondary);
    font-weight: 500;
    resize: none;
    font-family: var(--bim-font);
    transition: border-color 0.2s;
}

textarea.bim-textarea:focus,
.bim-textarea:focus {
    outline: none !important;
    border-color: var(--bim-accent) !important;
    box-shadow: 0 0 0 1px var(--bim-accent) !important;
}

textarea.bim-textarea::placeholder,
.bim-textarea::placeholder {
    color: var(--bim-text-faint);
    font-weight: 500;
}

/* ── Textarea Variant: Private Note ── */
textarea.bim-textarea.bim-private-note,
.bim-textarea.bim-private-note {
    background-color: var(--bim-surface) !important;
    border-color: var(--bim-danger-light) !important;
}

/* ============================================
   LABELS — .bim-fixed-cost-label
   ============================================ */
.bim-fixed-cost-label {
    display: block;
    font-size: var(--bim-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bim-text-muted);
    margin-bottom: 0.375rem;
}

/* ============================================
   VALIDATION STATES
   ============================================ */

/* Invalid field — danger border + soft glow ring.
   Hard double-border replaced with a glow so it
   reads as "pay attention here" not "you failed". */
.bim-field-invalid {
    border-color: var(--bim-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* Validation error pill — compact, annotative.
   inline-flex so it's only as wide as the message,
   feels attached to the field rather than a banner. */
.bim-validation-error {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: var(--bim-space-2);
    padding: 0.25rem 0.5rem 0.25rem 0.375rem;
    background: rgba(239, 68, 68, 0.07);
    border-radius: var(--bim-radius-sm);
    font-size: var(--bim-text-xs);
    font-weight: 600;
    color: var(--bim-danger);
    line-height: 1.4;
    animation: bimShake 0.3s;
}

/* ! badge — draws the eye before the text loads */
.bim-validation-error::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    background: var(--bim-danger);
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.5625rem;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
}

/* Field-level error — same pill, no animation (used for
   file upload errors injected differently by JS) */
.bim-field-error {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem 0.25rem 0.375rem;
    background: rgba(239, 68, 68, 0.07);
    border-radius: var(--bim-radius-sm);
    font-size: var(--bim-text-xs);
    font-weight: 600;
    color: var(--bim-danger);
    line-height: 1.4;
}

.bim-field-error::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    background: var(--bim-danger);
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.5625rem;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
}

/* File upload error — hidden by default, shown by JS */
.bim-file-error {
    display: none;
    margin-top: var(--bim-space-2);
}

/* ============================================
   DISABLED STATE
   ============================================ */
input.bim-input:disabled,
input.bim-cost-label-input:disabled,
input.bim-cost-amount-input:disabled,
select.bim-select:disabled,
textarea.bim-textarea:disabled,
.bim-input:disabled,
.bim-select:disabled,
.bim-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bim-bg) !important;
}

/* ============================================
   NUMBER INPUT — Hide spinners
   ============================================ */
input[type="number"].bim-cost-amount-input::-webkit-inner-spin-button,
input[type="number"].bim-cost-amount-input::-webkit-outer-spin-button,
input[type="number"].bim-rate-input::-webkit-inner-spin-button,
input[type="number"].bim-rate-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].bim-cost-amount-input,
input[type="number"].bim-rate-input {
    -moz-appearance: textfield;
}

/* ============================================
   ALTERNATIVE PRODUCT INPUTS
   Generic form inputs for alternative products
   ============================================ */

/* URL Input - extends base input styling */
input.bim-alt-url-input,
input[type="url"].bim-alt-url-input {
    width: 100%;
    background-color: var(--bim-surface) !important;
    border: 1px solid var(--bim-border) !important;
    border-radius: var(--bim-radius-sm) !important;
    font-size: var(--bim-text-base);
    padding: var(--bim-space-2) var(--bim-space-3);
    font-weight: 600;
    color: var(--bim-text-secondary);
    font-family: var(--bim-font) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    margin: 0;
}

input.bim-alt-url-input:focus,
input[type="url"].bim-alt-url-input:focus {
    outline: none !important;
    border-color: var(--bim-accent) !important;
    box-shadow: 0 0 0 1px var(--bim-accent) !important;
}

input.bim-alt-url-input::placeholder,
input[type="url"].bim-alt-url-input::placeholder {
    color: var(--bim-text-faint);
    font-weight: 500;
}

/* Textarea Note - extends base textarea with compact sizing */
textarea.bim-alt-url-note {
    width: 100%;
    background-color: var(--bim-bg-input) !important;
    border: 1px solid var(--bim-border) !important;
    border-radius: var(--bim-radius) !important;
    font-size: var(--bim-text-base);
    padding: var(--bim-space-3);
    color: var(--bim-text-secondary);
    font-weight: 500;
    min-height: 2.5rem;
    resize: vertical;
    font-family: var(--bim-font) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    margin: 0;
    overflow-y: hidden;
}

textarea.bim-alt-url-note:focus {
    outline: none !important;
    border-color: var(--bim-accent) !important;
    box-shadow: 0 0 0 1px var(--bim-accent) !important;
}

textarea.bim-alt-url-note::placeholder {
    color: var(--bim-text-faint);
    font-weight: 500;
}

/* Character Counter - form utility */
.bim-char-count {
    font-size: var(--bim-text-xs);
    color: var(--bim-text-faint);
    font-weight: 600;
    text-align: right;
    margin-top: var(--bim-space-1);
    display: block;
    transition: color var(--bim-transition-base);
}

.bim-char-count-warning {
    color: var(--bim-warning);
    font-weight: 700;
}

/* ============================================
   PRODUCT PRICE INPUT — .bim-product-price-input
   (Variant of amount input with special styling)
   ============================================ */
input.bim-product-price-input,
input[type="number"].bim-product-price-input,
.bim-product-price-input {
    width: 100%;
    background-color: var(--bim-surface) !important;
    border: 1px solid var(--bim-border) !important;
    border-radius: var(--bim-radius-sm) !important;
    font-size: var(--bim-text-base);
    padding: var(--bim-space-2) var(--bim-space-3);
    padding-left: 1.75rem;
    font-weight: 700;
    color: var(--bim-text-primary);
    font-family: var(--bim-font) !important;
    transition: border-color 0.2s;
}

input.bim-product-price-input:focus,
input[type="number"].bim-product-price-input:focus,
.bim-product-price-input:focus {
    outline: none !important;
    border-color: var(--bim-accent) !important;
    box-shadow: 0 0 0 1px var(--bim-accent) !important;
}

/* Hide spinners for product price input */
input[type="number"].bim-product-price-input::-webkit-inner-spin-button,
input[type="number"].bim-product-price-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].bim-product-price-input {
    -moz-appearance: textfield;
}

/* ============================================
   FILE INPUT — .bim-screenshot-input
   ============================================ */
input.bim-file-input,
input[type="file"].bim-file-input,
.bim-file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

/* ============================================
   CUSTOM CHECKBOX — .bim-use-alt-product
   Styled checkbox for alternative product toggle
   ============================================ */

/* Container label */
.bim-alt-product-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--bim-space-2);
    cursor: pointer;
    user-select: none;
}

/* Separator dot */
.bim-toggle-separator {
    color: var(--bim-text-faint);
    font-size: var(--bim-text-lg);
    line-height: 1;
}

/* Hide native checkbox */
input.bim-use-alt-product[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Custom checkbox - positioned relative to label */
.bim-alt-product-inline-toggle {
    position: relative;
}

input.bim-use-alt-product[type="checkbox"] + .bim-alt-toggle-label {
    position: relative;
    padding-left: calc(1.125rem + var(--bim-space-2));
}

/* Custom checkbox visual */
input.bim-use-alt-product[type="checkbox"] + .bim-alt-toggle-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--bim-border);
    border-radius: var(--bim-radius-sm);
    background-color: var(--bim-surface);
    transition: all var(--bim-transition-base);
    box-sizing: border-box;
}

/* Checkmark */
input.bim-use-alt-product[type="checkbox"] + .bim-alt-toggle-label::after {
    content: '';
    position: absolute;
    left: 0.375rem;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 0.375rem;
    height: 0.625rem;
    border: solid var(--bim-surface);
    border-width: 0 2px 2px 0;
    transform-origin: center;
    transition: transform var(--bim-transition-base);
    box-sizing: border-box;
}

/* Checked state */
input.bim-use-alt-product[type="checkbox"]:checked + .bim-alt-toggle-label::before {
    background-color: var(--bim-warning);
    border-color: var(--bim-warning);
    box-shadow: 0 0 0 3px var(--bim-warning-light);
}

input.bim-use-alt-product[type="checkbox"]:checked + .bim-alt-toggle-label::after {
    transform: translateY(-60%) rotate(45deg) scale(1);
}

/* Hover state */
.bim-alt-product-inline-toggle:hover input.bim-use-alt-product[type="checkbox"]:not(:checked) + .bim-alt-toggle-label::before {
    border-color: var(--bim-warning);
    background-color: var(--bim-warning-light);
}

/* Focus state */
input.bim-use-alt-product[type="checkbox"]:focus-visible + .bim-alt-toggle-label::before {
    outline: 2px solid var(--bim-warning);
    outline-offset: 2px;
}

/* Label text */
.bim-alt-toggle-label {
    font-size: var(--bim-text-sm);
    font-weight: 600;
    color: var(--bim-text-secondary);
    transition: color var(--bim-transition-base);
}

.bim-alt-product-inline-toggle:hover .bim-alt-toggle-label {
    color: var(--bim-warning);
}

input.bim-use-alt-product[type="checkbox"]:checked + .bim-alt-toggle-label {
    color: var(--bim-warning);
    font-weight: 700;
}

/* ============================================
   HONEYPOT — Anti-spam hidden field
   Visually hidden from humans, traps bots.
   Works on any form in any context.
   ============================================ */
.bim-honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}