/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Checkbox scaling for better visibility */
input[type=checkbox]#expertise_ownership_confirmation {
    -webkit-transform: scale(3, 3);
    transform: scale(3, 3);
}

/* Variant card patterns */
.position-fields {
    position: relative;
    overflow: hidden;
}

.position-fields::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
    /* sit above the element background so patterns are visible */
}

.position-fields>* {
    position: relative;
    z-index: 2;
}

/* Gold: soft diagonal hatch */
.variant-pattern-gold::before {
    background-image: repeating-linear-gradient(135deg, rgba(245, 158, 11, 0.10) 0 6px, rgba(255, 255, 255, 0) 6px 12px);
}

/* Silver: subtle horizontal hatch */
.variant-pattern-silver::before {
    background-image: repeating-linear-gradient(0deg, rgba(100, 116, 139, 0.06) 0 4px, rgba(255, 255, 255, 0) 4px 8px);
}

/* Unedles: distinct warm hatch (rose) */
.variant-pattern-unedles::before {
    background-image: repeating-linear-gradient(45deg, rgba(244, 114, 182, 0.08) 0 6px, rgba(255, 255, 255, 0) 6px 12px);
}

/* Diamond: sparkle effect using layered gradients */
.variant-pattern-diamond::before {
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95) 0 1px, rgba(255, 255, 255, 0.0) 2px),
        radial-gradient(circle at 75% 30%, rgba(255, 255, 255, 0.9) 0 1px, rgba(255, 255, 255, 0.0) 2px),
        radial-gradient(circle at 40% 75%, rgba(255, 255, 255, 0.85) 0 1px, rgba(255, 255, 255, 0.0) 2px),
        repeating-linear-gradient(45deg, rgba(56, 189, 248, 0.04) 0 8px, rgba(255, 255, 255, 0) 8px 16px);
    background-size: auto, auto, auto, 16px 16px;
    background-blend-mode: screen;
}