/*
 * Triform — Frontend Stylesheet
 * Minimal, theme-agnostic. Override via CSS custom properties.
 */

:root {
    --triform-primary:        #2271b1;
    --triform-primary-hover:  #135e96;
    --triform-border:         #dcdcde;
    --triform-border-focus:   #2271b1;
    --triform-radius:         4px;
    --triform-font:           inherit;
    --triform-font-size:      1rem;
    --triform-line-height:    1.5;
    --triform-input-bg:       #fff;
    --triform-input-color:    #2c3338;
    --triform-label-color:    #2c3338;
    --triform-label-weight:   600;
    --triform-required-color: #d63638;
    --triform-success-bg:     #edfaef;
    --triform-success-color:  #1a7928;
    --triform-success-border: #68de7c;
    --triform-error-bg:       #fcf0f1;
    --triform-error-color:    #8a2424;
    --triform-error-border:   #f86368;
    --triform-gap:            1rem;
    --triform-btn-padding:    0.6em 1.4em;
}

/* -----------------------------------------------------------------------
   Wrapper
   ----------------------------------------------------------------------- */

.triform-form-wrap {
    font-family: var(--triform-font);
    font-size:   var(--triform-font-size);
    line-height: var(--triform-line-height);
    color:       var(--triform-input-color);
    max-width:   100%;
}

/* -----------------------------------------------------------------------
   Status messages
   ----------------------------------------------------------------------- */

.triform-success-message,
.triform-error-message {
    padding:       0.75em 1em;
    border-radius: var(--triform-radius);
    margin-bottom: var(--triform-gap);
    border:        1px solid transparent;
}

.triform-success-message {
    background:   var(--triform-success-bg);
    color:        var(--triform-success-color);
    border-color: var(--triform-success-border);
}

.triform-error-message {
    background:   var(--triform-error-bg);
    color:        var(--triform-error-color);
    border-color: var(--triform-error-border);
}

/* -----------------------------------------------------------------------
   Fields grid
   ----------------------------------------------------------------------- */

.triform-fields {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--triform-gap);
}

.triform-field-wrap {
    box-sizing: border-box;
    display:    flex;
    flex-direction: column;
    gap:        0.35em;
}

/* Width modifiers */
.triform-width-full  { width: 100%; }
.triform-width-half  { width: calc(50% - var(--triform-gap) / 2); }
.triform-width-third { width: calc(33.333% - var(--triform-gap) * 2 / 3); }

/* Stack to full width on small screens */
@media (max-width: 600px) {
    .triform-width-half,
    .triform-width-third {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------
   Labels
   ----------------------------------------------------------------------- */

.triform-field-wrap > label {
    font-weight: var(--triform-label-weight);
    color:       var(--triform-label-color);
    font-size:   0.9375em;
}

.triform-required {
    color:       var(--triform-required-color);
    margin-left: 0.2em;
}

/* -----------------------------------------------------------------------
   Inputs, selects, textareas
   ----------------------------------------------------------------------- */

.triform-input {
    display:       block;
    width:         100%;
    box-sizing:    border-box;
    padding:       0.5em 0.75em;
    font-family:   var(--triform-font);
    font-size:     var(--triform-font-size);
    line-height:   var(--triform-line-height);
    color:         var(--triform-input-color);
    background:    var(--triform-input-bg);
    border:        1px solid var(--triform-border);
    border-radius: var(--triform-radius);
    transition:    border-color 0.15s ease, box-shadow 0.15s ease;
    appearance:    none;
    -webkit-appearance: none;
}

.triform-input:focus {
    outline:      none;
    border-color: var(--triform-border-focus);
    box-shadow:   0 0 0 2px rgba(34, 113, 177, 0.2);
}

.triform-textarea {
    resize:     vertical;
    min-height: 8em;
}

.triform-select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232c3338' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 0.75em center;
    background-size:     10px 7px;
    padding-right:       2.25em;
    cursor:              pointer;
}

/* -----------------------------------------------------------------------
   Checkbox & Radio groups
   ----------------------------------------------------------------------- */

.triform-checkbox-group,
.triform-radio-group {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
    gap:                   0.4em 1em;
}

@media (max-width: 480px) {
    .triform-checkbox-group,
    .triform-radio-group {
        grid-template-columns: 1fr;
    }
}

.triform-checkbox-label,
.triform-radio-label {
    display:     flex;
    align-items: flex-start;
    gap:         0.5em;
    font-weight: normal;
    cursor:      pointer;
    min-width:   0;
    word-break:  break-word;
}

.triform-checkbox,
.triform-radio {
    flex-shrink:   0;
    width:         1.1em;
    height:        1.1em;
    margin-top:    0.15em;
    accent-color:  var(--triform-primary);
    cursor:        pointer;
}

/* -----------------------------------------------------------------------
   Per-field validation error state
   ----------------------------------------------------------------------- */

.triform-field-error > label {
    color: var(--triform-required-color);
}

.triform-field-error .triform-input,
.triform-field-error .triform-textarea,
.triform-field-error .triform-select {
    border-color: var(--triform-required-color);
    box-shadow:   0 0 0 1px var(--triform-required-color);
}

.triform-field-error .triform-input:focus,
.triform-field-error .triform-textarea:focus,
.triform-field-error .triform-select:focus {
    border-color: var(--triform-required-color);
    box-shadow:   0 0 0 2px rgba(214, 54, 56, 0.2);
}

.triform-field-error .triform-checkbox-group,
.triform-field-error .triform-radio-group {
    border:        1px solid var(--triform-required-color);
    border-radius: var(--triform-radius);
    padding:       0.5em 0.75em;
}

.triform-field-error-text {
    display:    block;
    font-size:  0.8125em;
    line-height: 1.4;
    color:      var(--triform-required-color);
    margin-top: 0.2em;
}

/* -----------------------------------------------------------------------
   Field description (helper text under input)
   ----------------------------------------------------------------------- */

.triform-field-description {
    display:    block;
    font-size:  0.8125em;
    line-height: 1.4;
    color:      var(--triform-label-color);
    opacity:    0.75;
    margin-top: 0.15em;
}

/* -----------------------------------------------------------------------
   Submit button
   ----------------------------------------------------------------------- */

.triform-submit-row {
    margin-top: calc(var(--triform-gap) * 0.5);
    width:      100%;
}

.triform-submit-btn {
    display:       inline-block;
    padding:       var(--triform-btn-padding);
    font-family:   var(--triform-font);
    font-size:     var(--triform-font-size);
    font-weight:   600;
    line-height:   var(--triform-line-height);
    color:         #fff;
    background:    var(--triform-primary);
    border:        1px solid transparent;
    border-radius: var(--triform-radius);
    cursor:        pointer;
    transition:    background 0.15s ease, opacity 0.15s ease;
    text-decoration: none;
    appearance:    none;
    -webkit-appearance: none;
}

.triform-submit-btn:hover,
.triform-submit-btn:focus {
    background: var(--triform-primary-hover);
    outline:    none;
}

.triform-submit-btn:disabled,
.triform-submit-btn.triform-loading {
    opacity: 0.65;
    cursor:  not-allowed;
}

/* -----------------------------------------------------------------------
   Honeypot — keep absolutely off-screen
   (intentionally matches the inline style for defence-in-depth)
   ----------------------------------------------------------------------- */

.triform-honeypot {
    position: absolute;
    left:     -9999px;
    height:   1px;
    width:    1px;
    overflow: hidden;
    opacity:  0;
}

/* -----------------------------------------------------------------------
   Stripe Payment Element
   ----------------------------------------------------------------------- */

.triform-stripe-element {
    padding-top:    0.7em;
    padding-bottom: 0.7em;
    min-height:     2.6em;
}

.triform-stripe-error {
    color:      var(--triform-required-color);
    font-size:  0.8125em;
    margin-top: 0.4em;
    min-height: 1.2em;
}