/* ==========================================================================
   WL Form Access — style.css
   ========================================================================== */

/* ── Access code field wrapper ── */

.wpcf7-form-control-wrap[data-name="limit-access"] {
    display: block;
    text-align: center;
    margin: 2rem auto 2.5rem;
    max-width: 420px;
}


/* ── Access code input ── */

input[name="limit-access"] {
    display: block;
    width: 100%;
    padding: 0.85rem 1.25rem !important;
    font-size: 1.15rem;
    font-family: inherit;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    color: #1a1a1a;
    background: #fff;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    height: 2.5rem !important;
}

input[name="limit-access"]:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

input[name="limit-access"]::placeholder {
    color: #9ca3af;
    letter-spacing: 0.02em;
    text-transform: none;
}


/* ── Valid / invalid border states (set by JS) ── */

input[name="limit-access"][style*="rgb(76, 175, 80)"] {
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}

input[name="limit-access"][style*="rgb(231, 76, 60)"] {
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}