.syou-cf,
.syou-cf * { box-sizing:border-box; }

.syou-cf {
    --syou-blue:#0C8EF1;
    --syou-dark:#020817;
    --syou-text:#161616;
    --syou-muted:#6f6f6f;
    --syou-line:#e0e0e0;
    width:100%;
    margin:0 auto;
    color:var(--syou-text);
    font-family:"Bai Jamjuree",Arial,sans-serif;
}

.syou-cf button,
.syou-cf input,
.syou-cf select,
.syou-cf textarea { font:inherit; }

.syou-cf__fields {
    display:grid;
    gap:24px;
}

.syou-cf__field {
    display:block;
    min-width:0;
    margin:0;
}

.syou-cf__label {
    display:block;
    margin:0 0 8px;
    color:var(--syou-text);
    font-weight:600;
    line-height:1.35;
}

.syou-cf__required-star { color:#da1e28; }

.syou-cf__control,
.syou-cf__select,
.syou-cf__textarea,
.syou-cf input.syou-cf__control,
.syou-cf select.syou-cf__select,
.syou-cf textarea.syou-cf__textarea {
    display:block;
    width:100%;
    min-height:54px;
    margin:0;
    padding:14px 16px;
    border:1px solid #c6c6c6;
    border-radius:0;
    background:#fff;
    color:var(--syou-text);
    font-family:"Bai Jamjuree",Arial,sans-serif;
    font-size:16px;
    line-height:1.35;
    outline:0;
    box-shadow:none;
    transition:border-color .2s,box-shadow .2s,background-color .2s;
}

.syou-cf__textarea {
    min-height:160px;
    resize:vertical;
}

.syou-cf__select {
    appearance:auto;
}

.syou-cf__control::placeholder,
.syou-cf__textarea::placeholder {
    color:#8d8d8d;
    opacity:1;
}

.syou-cf__control:hover,
.syou-cf__select:hover,
.syou-cf__textarea:hover {
    border-color:#8d8d8d;
}

.syou-cf__control:focus,
.syou-cf__select:focus,
.syou-cf__textarea:focus {
    border-color:var(--syou-blue);
    box-shadow:0 0 0 1px var(--syou-blue);
}

.syou-cf__field.is-invalid .syou-cf__control,
.syou-cf__field.is-invalid .syou-cf__select,
.syou-cf__field.is-invalid .syou-cf__textarea {
    border-color:#da1e28;
    box-shadow:0 0 0 1px #da1e28;
}

.syou-cf__field-error {
    display:block;
    min-height:0;
    margin-top:5px;
    color:#da1e28;
    font-size:12px;
    line-height:1.35;
}

.syou-cf__field-error:empty { display:none; }

.syou-cf__consent-field {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:10px;
    align-items:start;
    position:relative;
    margin:4px 0 0;
    cursor:pointer;
}

.syou-cf__consent-field .syou-cf__field-error {
    grid-column:2;
}

.syou-cf__consent-input {
    position:absolute;
    width:1px;
    height:1px;
    margin:0;
    opacity:0;
    pointer-events:none;
}

.syou-cf__consent-box {
    position:relative;
    display:block;
    width:20px;
    height:20px;
    margin-top:1px;
    border:1px solid #8d8d8d;
    background:transparent;
    transition:.2s;
}

.syou-cf__consent-input:focus-visible + .syou-cf__consent-box {
    outline:2px solid var(--syou-blue);
    outline-offset:2px;
}

.syou-cf__consent-input:checked + .syou-cf__consent-box {
    border-color:var(--syou-blue);
    background:var(--syou-blue);
}

.syou-cf__consent-input:checked + .syou-cf__consent-box::after {
    content:"";
    position:absolute;
    left:50%;
    top:46%;
    width:28%;
    height:52%;
    transform:translate(-50%,-50%) rotate(45deg);
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
}

.syou-cf__consent-text {
    min-width:0;
    color:#525252;
    font-size:13px;
    line-height:1.55;
}

.syou-cf__consent-text p { margin:0; }

.syou-cf__consent-text a {
    color:var(--syou-blue);
    text-decoration:underline;
    text-underline-offset:2px;
}

.syou-cf__consent-field.is-invalid .syou-cf__consent-box {
    border-color:#da1e28;
}

.syou-cf__required-note {
    margin:0;
    color:var(--syou-muted);
    font-size:12px;
}

.syou-cf__button-wrap {
    margin-top:28px;
}

.syou-cf__button,
.syou-cf button.syou-cf__button,
.syou-cf button[type="submit"].syou-cf__button {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    width:100%;
    min-height:70px;
    margin:0;
    padding:18px 24px;
    border:0;
    border-radius:0;
    background:var(--syou-dark);
    color:#fff;
    font-family:"IBM Plex Mono",monospace;
    font-size:13px;
    line-height:1;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background-color .2s,color .2s,opacity .2s;
    box-shadow:none;
}

.syou-cf__button:hover,
.syou-cf__button:focus {
    background:var(--syou-blue);
    color:#fff;
}

.syou-cf__button svg {
    width:1em;
    height:1em;
    fill:currentColor;
}

.syou-cf__button.is-loading {
    pointer-events:none;
    opacity:.72;
}

.syou-cf__spinner {
    display:none;
    width:18px;
    height:18px;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:syou-cf-spin .7s linear infinite;
}

.syou-cf__button.is-loading svg,
.syou-cf__button.is-loading > span {
    display:none;
}

.syou-cf__button.is-loading .syou-cf__spinner {
    display:block;
}

@keyframes syou-cf-spin {
    to { transform:rotate(360deg); }
}

.syou-cf__message {
    min-height:22px;
    margin-top:16px;
    font-size:14px;
    line-height:1.5;
}

.syou-cf__message.is-error { color:#da1e28; }
.syou-cf__message.is-success { color:#198038; }

.syou-cf__honeypot {
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
}

@media (max-width:767px) {
    .syou-cf__fields { gap:20px; }

    .syou-cf__control,
    .syou-cf__select,
    .syou-cf__textarea,
    .syou-cf input.syou-cf__control,
    .syou-cf select.syou-cf__select,
    .syou-cf textarea.syou-cf__textarea {
        min-height:50px;
        padding:13px 14px;
        font-size:15px;
    }

    .syou-cf__textarea { min-height:140px; }

    .syou-cf__button,
    .syou-cf button.syou-cf__button {
        min-height:58px;
        padding:15px 18px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .syou-cf *,
    .syou-cf *::before,
    .syou-cf *::after {
        scroll-behavior:auto !important;
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}
