/**
 * SSC Form Base Styles - Speinshart / MetForm look
 * Border-bottom-only inputs with left stripe, round checkboxes/radios, Roboto labels.
 *
 * @package SSC_Proposal
 */

/* ========== Wrappers (position for ::before stripe) ========== */
.ssc-form-field,
.ssc-form-group,
.ssc-info-item,
.ssc-input-shell {
    position: relative;
}

/* Preferred stripe target: dedicated shell around the actual control */
.ssc-input-shell::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    height: 15px;
    width: 1px;
    background: #000;
}

/* Disable legacy wrapper stripe when a dedicated shell is present */
.ssc-form-field:has(.ssc-input-shell)::before,
.ssc-form-group:has(.ssc-input-shell)::before,
.ssc-info-item:has(.ssc-input-shell)::before {
    content: none;
}

/* Legacy stripe fallback for markup that has no dedicated input shell */
.ssc-form-field:has(input[type="text"]):not(:has(.ssc-participant-item))::before,
.ssc-form-field:has(input[type="email"])::before,
.ssc-form-field:has(input[type="number"])::before,
.ssc-form-field:has(input[type="datetime-local"])::before,
.ssc-form-field:has(select)::before,
.ssc-form-field:has(textarea)::before,
.ssc-form-group:has(input[type="text"])::before,
.ssc-form-group:has(input[type="email"])::before,
.ssc-form-group:has(input[type="datetime-local"])::before,
.ssc-form-group:has(select)::before,
.ssc-form-group:has(textarea)::before,
.ssc-info-item:has(input)::before,
.ssc-info-item:has(select)::before,
.ssc-info-item:has(textarea)::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    height: 15px;
    width: 1px;
    background: #000;
}

/* Fallback for browsers without :has() - add class .ssc-has-input to wrapper */
.ssc-form-field.ssc-has-input::before,
.ssc-form-group.ssc-has-input::before,
.ssc-info-item.ssc-has-input::before,
.ssc-input-shell.ssc-has-input::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    height: 15px;
    width: 1px;
    background: #000;
}

/* ========== Labels ========== */
.ssc-form-field label,
.ssc-form-group label,
.ssc-info-label,
.ssc-form-field .ssc-info-label,
.ssc-form-group .ssc-info-label {
    font-family: Roboto, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #000;
    display: block;
    margin-bottom: 5px;
}

.ssc-form-field .required,
.ssc-form-group .required {
    color: #d63638;
}

/* ========== Inputs, Selects, Textareas (border-bottom only) ========== */
.ssc-form-field input[type="text"],
.ssc-form-field input[type="email"],
.ssc-form-field input[type="number"],
.ssc-form-field input[type="datetime-local"],
.ssc-form-field select,
.ssc-form-field textarea,
.ssc-form-field input[type="file"],
.ssc-form-group input[type="text"],
.ssc-form-group input[type="email"],
.ssc-form-group input[type="datetime-local"],
.ssc-form-group select,
.ssc-form-group textarea,
.ssc-input-shell input[type="text"],
.ssc-input-shell input[type="email"],
.ssc-input-shell input[type="number"],
.ssc-input-shell input[type="datetime-local"],
.ssc-input-shell input[type="file"],
.ssc-input-shell select,
.ssc-input-shell textarea,
.ssc-input,
input.ssc-input,
select.ssc-input,
textarea.ssc-input,
.ssc-status-page .ssc-info-item input,
.ssc-status-page .ssc-info-item select,
.ssc-status-page .ssc-info-item textarea {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0;
    background: transparent;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    box-sizing: border-box;
}

.ssc-form-field textarea,
.ssc-form-group textarea,
.ssc-input-shell textarea,
textarea.ssc-input {
    resize: vertical;
    min-height: 100px;
}

div.mf-input-wrapper > textarea.mf-input,
.ssc-form-field textarea,
.ssc-form-group textarea,
.ssc-input-shell textarea {
    min-height: 80px;
}

/* Focus */
.ssc-form-field input:focus,
.ssc-form-field select:focus,
.ssc-form-field textarea:focus,
.ssc-form-group input:focus,
.ssc-form-group select:focus,
.ssc-form-group textarea:focus,
.ssc-input-shell input:focus,
.ssc-input-shell select:focus,
.ssc-input-shell textarea:focus,
.ssc-input:focus {
    outline: 0;
    border-bottom-color: rgba(66, 133, 244, 0.47);
}

/* Placeholder */
.ssc-form-field input::placeholder,
.ssc-form-field textarea::placeholder,
.ssc-form-group input::placeholder,
.ssc-form-group textarea::placeholder,
.ssc-input-shell input::placeholder,
.ssc-input-shell textarea::placeholder,
.ssc-input::placeholder {
    color: #c9c1c1;
    font-weight: 400;
    font-size: 14px;
}

.ssc-form-field input::-webkit-input-placeholder,
.ssc-form-field textarea::-webkit-input-placeholder,
.ssc-form-group input::-webkit-input-placeholder,
.ssc-form-group textarea::-webkit-input-placeholder,
.ssc-input-shell input::-webkit-input-placeholder,
.ssc-input-shell textarea::-webkit-input-placeholder {
    color: #c9c1c1;
    font-weight: 400;
    font-size: 14px;
}

.ssc-form-field input::-moz-placeholder,
.ssc-form-field textarea::-moz-placeholder,
.ssc-form-group input::-moz-placeholder,
.ssc-form-group textarea::-moz-placeholder,
.ssc-input-shell input::-moz-placeholder,
.ssc-input-shell textarea::-moz-placeholder {
    color: #c9c1c1;
    font-weight: 400;
    font-size: 14px;
}

.ssc-form-field input::-ms-input-placeholder,
.ssc-form-field textarea::-ms-input-placeholder,
.ssc-form-group input::-ms-input-placeholder,
.ssc-form-group textarea::-ms-input-placeholder,
.ssc-input-shell input::-ms-input-placeholder,
.ssc-input-shell textarea::-ms-input-placeholder {
    color: #c9c1c1;
    font-weight: 400;
    font-size: 14px;
}

/* Select dropdown arrow (custom, no native) - optional */
.ssc-form-field select,
.ssc-form-group select,
.ssc-input-shell select,
select.ssc-input {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
}

/* ========== Checkbox (round circle, Speinshart style) ========== */
.ssc-checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}

.ssc-checkbox-label input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ssc-checkbox-label span:not(.required) {
    padding-left: 40px;
    position: relative;
    font-weight: 400;
    font-size: 14px;
}

.ssc-checkbox-label span:not(.required)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    border: 1px solid #000;
    border-radius: 50%;
    display: block;
    height: 25px;
    width: 25px;
    background-color: #F2F2F2;
    box-sizing: border-box;
}

.ssc-checkbox-label input[type="checkbox"]:checked + span:not(.required)::before {
    background: radial-gradient(circle, black 45%, #F2F2F2 55%);
    border: 1px solid #000;
}

/* ========== Radio (round circle, same as checkbox) ========== */
.ssc-radio-label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 10px 0;
    position: relative;
}

.ssc-radio-label input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ssc-radio-label span {
    padding-left: 40px;
    position: relative;
    font-weight: 400;
    font-size: 14px;
}

.ssc-radio-label span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #000;
    border-radius: 50%;
    display: block;
    height: 25px;
    width: 25px;
    background-color: #F2F2F2;
}

.ssc-radio-label input[type="radio"]:checked + span::before {
    background: radial-gradient(circle, black 45%, #F2F2F2 55%);
    border: 1px solid #000;
}

/* ========== Arrow button (Speinshart sp-arrow-button pattern) ========== */
/* 40px black circle + chevron, text to the right. Use on <a> or <button>. */
.ssc-arrow-button {
    background: none;
    margin: 0;
    padding: 0 0 0 55px;
    position: relative;
    display: inline-flex;
    flex-direction: row;
    height: 40px;
    align-items: center;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    transition: padding 0.3s ease, color 0.3s ease, font-weight 0.3s ease;
    box-shadow: none;
}

.ssc-arrow-button:hover {
    padding-left: 60px;
    font-weight: 600;
    color: #000;
    background: transparent;
}

.ssc-arrow-button:before {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    top: 0;
    left: 0;
    display: block;
    margin: 0;
    opacity: 1;
    box-shadow: none;
    transition: background-color 0.3s ease;
}

.ssc-arrow-button:after {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background-color: #fff;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="none" stroke="black" stroke-width="2" d="m17.071 27.352 7.071-7.07-7.071-7.072"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="none" stroke="black" stroke-width="2" d="m17.071 27.352 7.071-7.07-7.071-7.072"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    top: 0;
    left: 0;
    display: block;
    transition: background-color 0.3s ease;
    margin: 0;
    opacity: 1;
}

.ssc-arrow-button:hover:before {
    background-color: #00A89D;
}

.ssc-arrow-button:hover:after {
    background-color: #fff;
}

/* ========== Buttons (Speinshart: black, optional arrow) ========== */
.ssc-submit-button,
.ssc-button-primary,
.ssc-form-actions .ssc-button {
    background: #000;
    color: #fff;
    border: none;
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}

.ssc-submit-button:hover,
.ssc-button-primary:hover {
    background: #333;
}

.ssc-submit-button:disabled,
.ssc-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ssc-form-actions {
    margin-top: 30px;
    text-align: center;
}

/* ========== Description / helper text ========== */
.ssc-form-field .description,
.ssc-form-group .description {
    margin-top: 5px;
    font-size: 12px;
    color: #666;
    font-style: italic;
}

.ssc-form-field .word-count,
.ssc-form-group .word-count {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #666;
}