/* Breakpoints */
:root {
    /* Spacing scale */
    --ptr-spacer-xs: 4px;
    --ptr-spacer-sm: 8px;
    --ptr-spacer-md: 16px;
    --ptr-spacer-lg: 24px;
    --ptr-spacer-xl: 32px;

    /* Colors */
    --ptr-color-primary: #e01a2b;
    --ptr-color-dark: #000000;
    --ptr-color-grey: #efefef;

    /* Font sizes */
    --ptr-fs-sm: 14px;
    --ptr-fs-md: 18px;

    /* Border radius */
    --ptr-border-radius-xs: 2px;
    --ptr-border-radius-sm: 4px;
    --ptr-border-radius-md: 8px;
    --ptr-border-radius-lg: 16px;

}

.petitioner {
    /* wrapper */
    --ptr-spacing-x: var(--ptr-spacer-md);
    --ptr-spacing-y: var(--ptr-spacer-md);
    --ptr-wrapper-bg: white;
    --ptr-wrapper-radius: var(--ptr-border-radius-lg);

    /* input related */
    --ptr-input-border-width: 1px;
    --ptr-input-border-color: #a1a1a1;
    --ptr-input-border-color-active: #00000;
    --ptr-input-border-radius: var(--ptr-border-radius-md);
    --ptr-input-spacing-y: 0.7rem;
    --ptr-input-spacing-x: var(--ptr-spacer-md);
    --ptr-input-line-height: 40px;

    /* label related */
    --ptr-label-font-size: var(--ptr-fs-sm);

    /* button */
    --ptr-btn-font-size: var(--ptr-fs-md);
    --ptr-btn-bg: var(--ptr-color-primary);
    --ptr-btn-bg-hover: var(--ptr-color-dark);
    --ptr-button-border-width: var(--ptr-input-border-width);
    --ptr-button-border-color: transparent;
    --ptr-button-border-color-active: var(--ptr-color-dark);
    --ptr-button-border-radius: var(--ptr-border-radius-md);

    /* progress bar */
    --ptr-progress-height: var(--ptr-spacer-sm);
    --ptr-progress-bg: var(--ptr-color-grey);
    --ptr-progress-radius: var(--ptr-spacer-xs);
    --ptr-progress-inner-bg: var(--ptr-color-primary);

    /* misc */
    --ptr-transition-duration: 0.2s;

    padding: var(--ptr-spacing-y) var(--ptr-spacing-x);
    background-color: var(--ptr-wrapper-bg);
    border-radius: var(--ptr-wrapper-radius);
    box-sizing: border-box;
}

.petitioner__input {
    display: flex;
    flex-direction: column;
    gap: var(--ptr-spacer-xs);
    margin-bottom: var(--ptr-spacer-sm);
}

.petitioner__input label {
    font-size: var(--ptr-label-font-size);
}

.petitioner__input input:not([type="checkbox"]),
.petitioner__input textarea {
    outline: none;
    border-radius: var(--ptr-input-border-radius);
    border-color: var(--ptr-input-border-color);
    border-width: var(--ptr-input-border-width);
    padding: var(--ptr-input-spacing-y) var(--ptr-input-spacing-x);
    border-style: solid;
    font-size: var(--ptr-label-font-size);
    line-height: var(--ptr-input-line-height);
}

.petitioner__input input:not([type="checkbox"]):focus,
.petitioner__input textarea:focus {
    border-color: var(--ptr-input-border-color-active);
}

.petitioner__input select {
    outline: none;
    border-radius: var(--ptr-input-border-radius);
    border: var(--ptr-input-border-width) solid var(--ptr-input-border-color);
    padding: var(--ptr-input-spacing-y) var(--ptr-input-spacing-x);
    font-size: var(--ptr-label-font-size);
    background-color: var(--ptr-wrapper-bg);
    color: var(--ptr-color-dark);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ptr-input-spacing-x) center;
    background-size: 1rem;
    cursor: pointer;
    transition:
        border-color var(--ptr-transition-duration),
        background-color var(--ptr-transition-duration);
    line-height: var(--ptr-input-line-height);
}

.petitioner__input select:focus {
    border-color: var(--ptr-input-border-color-active);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.petitioner__input select:hover {
    background-color: var(--ptr-color-grey);
}

.petitioner__input select::placeholder {
    color: #aaa;
}

.petitioner__input--checkbox {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-top: var(--ptr-spacer-md);
    margin-bottom: var(--ptr-spacer-md);
}

.petitioner__input--checkbox label {
    order: 1;
    display: inline-block;
    width: auto;
    transform: translateY(-3%);
}

.petitioner__input--checkbox label:hover {
    cursor: pointer;
}

.petitioner__input--checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: var(--ptr-fs-md);
    height: var(--ptr-fs-md);
    border: var(--ptr-input-border-width) solid var(--ptr-input-border-color);
    border-radius: var(--ptr-border-radius-xs);
    background-color: var(--ptr-wrapper-bg);
    display: inline-block;
    cursor: pointer;
    transition:
        background-color var(--ptr-transition-duration),
        border-color var(--ptr-transition-duration);
    padding: 0;
    flex-shrink: 0;
}

.petitioner__input--checkbox input[type="checkbox"]:checked {
    background-color: var(--ptr-color-primary);
    border-color: var(--ptr-color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 6.707l-1.413-1.414L9.5 14.664 5.128 10.293 3.714 11.707 9.5 17.5z'/%3E%3C/svg%3E");
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
}

.petitioner__input--checkbox input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.petitioner__btn {
    margin-top: var(--ptr-spacer-xs);
    outline: none;
    border-radius: var(--ptr-button-border-radius);
    border-color: var(--ptr-button-border-color);
    border-width: var(--ptr-button-border-width);
    padding: var(--ptr-input-spacing-y) var(--ptr-input-spacing-x);
    border-style: solid;
    width: 100%;
    background-color: var(--ptr-color-grey);
    transition: 0.1s;
    margin-bottom: var(--ptr-spacer-md);
}

.petitioner__btn--submit {
    font-size: var(--ptr-fs-md);
    background-color: var(--ptr-color-primary);
    color: white;
}

.petitioner__btn--submit:hover {
    background-color: var(--ptr-color-dark);
}

.petitioner__btn--letter {
    font-size: var(--ptr-fs-sm);
    background-color: var(--ptr-color-grey);
    color: var(--ptr-color-dark);
}

.petitioner__btn--letter:hover {
    background-color: var(--ptr-color-dark);
    color: white;
}

.petitioner__btn:active,
.petitioner__btn:focus {
    border-color: var(--ptr-button-border-color-active);
}

.petitioner__btn:hover {
    cursor: pointer;
}

.petitioner__title {
    padding: 0;
    margin: 0 0 var(--ptr-spacer-md) 0;
    font-size: 24px;
}


.petitioner__response {
    display: none;
}

.petitioner__response h3 {
    margin: 0;
    padding: 0;
}

.petitioner--submitted form {
    display: none;
}

.petitioner--submitted .petitioner__response {
    display: block;
}

.petitioner--loading form {
    pointer-events: none;
    opacity: 0.8;
    cursor: progress;
}

.petitioner .petitioner-disclaimer-text {
    font-size: 12px;
}

.grecaptcha-badge {
    visibility: hidden;
}

.petitioner-turnstile-container iframe {
    width: 100%;
}