/* ==========================================================================
   Shared form utilities
   ========================================================================== */

.visually-hidden{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

.required{
color:#e11d48;
font-weight:600;
}

.optional{
font-weight:400;
color:var(--oc365-color-text-muted, #888);
font-size:0.8125rem;
}

.field-hint{
font-size:0.8125rem;
line-height:1.45;
color:var(--oc365-color-text-muted, #666);
margin:0.35em 0 0;
font-weight:400;
}

.field-hint--legend{
margin-top:-0.25em;
margin-bottom:0.75em;
}

/* ==========================================================================
   Submit listing form
   ========================================================================== */

.submit-listing-form{
width:100%;
margin:0;
padding:clamp(1.5rem, 4vw, 2.5rem);
background:var(--oc365-color-card, #fff);
border:1px solid var(--oc365-color-border, #eee);
border-radius:12px;
box-shadow:0 12px 40px rgba(0,0,0,.06);
}

.form-notice{
width:100%;
margin:0 0 1.5rem;
padding:0.875rem 1.125rem;
border-radius:8px;
font-size:0.875rem;
line-height:1.5;
}

.form-notice--success{
background:#ecfdf5;
border:1px solid #a7f3d0;
color:#065f46;
}

.form-notice--error{
background:#fef2f2;
border:1px solid #fecaca;
color:#991b1b;
}

.form-section{
margin-bottom:2rem;
padding-bottom:2rem;
border-bottom:1px solid var(--oc365-color-border, #eee);
}

.form-section:last-of-type{
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}

.form-section__title{
font-size:1.125rem;
font-weight:600;
color:var(--oc365-color-text, #111);
margin:0 0 1.25rem;
line-height:1.3;
}

.form-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:1.25rem 1.5rem;
align-items:start;
}

.form-group{
display:flex;
flex-direction:column;
gap:0.4rem;
min-width:0;
}

.form-group--full{
grid-column:1 / -1;
}

.form-group label,
.checkbox-group legend{
font-size:0.8125rem;
font-weight:600;
color:var(--oc365-color-text, #333);
line-height:1.4;
}

/* Inputs */
.form-control,
.submit-listing-form .form-control,
.submit-listing-form select.form-control,
.submit-listing-form select.postform{
display:block;
width:100%;
min-height:2.75rem;
padding:0.625rem 0.875rem;
border:1px solid var(--oc365-color-input-border, #d4d4d4);
border-radius:8px;
font-size:0.9375rem;
font-family:var(--oc365-font-body, inherit);
line-height:1.4;
color:var(--oc365-color-text, #111);
background:var(--oc365-color-card, #fff);
transition:border-color 0.2s, box-shadow 0.2s;
box-sizing:border-box;
-webkit-appearance:none;
appearance:none;
}

.submit-listing-form select.form-control,
.submit-listing-form select.postform{
padding-right:2.25rem;
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='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 0.875rem center;
background-size:12px;
cursor:pointer;
}

.form-control--textarea,
.submit-listing-form textarea.form-control{
min-height:7rem;
height:auto;
resize:vertical;
}

.form-control:focus,
.submit-listing-form select:focus{
outline:none;
border-color:var(--oc365-color-primary, #111);
box-shadow:0 0 0 3px color-mix(in srgb, var(--oc365-color-primary, #111) 12%, transparent);
}

.form-control::placeholder{
color:var(--oc365-color-text-muted, #999);
}

/* Date input — consistent height on iOS */
.submit-listing-form input[type="date"].form-control{
min-height:2.75rem;
}

/* File upload */
.file-upload{
display:flex;
align-items:center;
min-height:2.75rem;
padding:0.5rem 0.875rem;
border:1px dashed var(--oc365-color-border, #ccc);
border-radius:8px;
background:var(--oc365-color-bg-alt, #fafafa);
transition:border-color 0.2s, background 0.2s;
}

.file-upload:focus-within{
border-color:var(--oc365-color-primary, #111);
background:var(--oc365-color-card, #fff);
}

.form-control--file,
.submit-listing-form input[type="file"].form-control--file{
width:100%;
min-height:auto;
padding:0;
border:none;
background:transparent;
font-size:0.875rem;
cursor:pointer;
}

.form-control--file::file-selector-button{
margin-right:0.75rem;
padding:0.4rem 0.85rem;
border:1px solid var(--oc365-color-input-border, #ddd);
border-radius:6px;
background:var(--oc365-color-card, #fff);
color:var(--oc365-color-text, #111);
font-size:0.8125rem;
font-weight:600;
cursor:pointer;
}

.form-control--file::file-selector-button:hover{
background:var(--oc365-color-bg-alt, #f4f4f4);
}

/* Word count */
.word-count{
font-size:0.75rem;
color:var(--oc365-color-text-muted, #666);
margin:0.25rem 0 0;
}

.word-count--over{
color:#e11d48;
font-weight:600;
}

/* Discipline checkboxes */
.checkbox-group{
margin:0;
padding:1rem 1.125rem;
border:1px solid var(--oc365-color-border, #e8e8e8);
border-radius:8px;
background:var(--oc365-color-bg-alt, #fafafa);
}

.checkbox-group legend{
padding:0;
margin-bottom:0;
}

.checkbox-list{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:0.625rem 1rem;
}

.checkbox-label{
display:flex;
align-items:flex-start;
gap:0.625rem;
margin:0;
padding:0.625rem 0.75rem;
background:var(--oc365-color-card, #fff);
border:1px solid var(--oc365-color-border, #e8e8e8);
border-radius:8px;
font-size:0.875rem;
font-weight:400;
color:var(--oc365-color-text, #333);
line-height:1.4;
cursor:pointer;
transition:border-color 0.2s, box-shadow 0.2s;
}

.checkbox-label:hover{
border-color:var(--oc365-color-input-border, #ccc);
}

.checkbox-label:has(input:checked){
border-color:var(--oc365-color-primary, #111);
box-shadow:0 0 0 1px var(--oc365-color-primary, #111);
}

.checkbox-label input{
flex-shrink:0;
width:1.125rem;
height:1.125rem;
margin:0.15em 0 0;
accent-color:var(--oc365-color-primary, #111);
cursor:pointer;
}

.checkbox-label__text{
flex:1;
min-width:0;
}

/* Fee amount — toggled via JS */
.form-group--fee[hidden]{
display:none!important;
}

/* Submit */
.form-actions{
margin-top:2rem;
padding-top:1.5rem;
border-top:1px solid var(--oc365-color-border, #eee);
}

.form-actions .submit-btn,
.submit-listing-form .submit-btn,
.contact-form .submit-btn{
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
width:100%;
min-height:48px;
padding:0 1.5rem;
border:none;
border-radius:var(--oc365-radius, 8px);
font-size:1rem;
font-weight:600;
font-family:var(--oc365-font-body, inherit);
line-height:1;
cursor:pointer;
transition:background 0.2s ease, transform 0.1s ease;
}

.form-actions .submit-btn:focus-visible,
.submit-listing-form .submit-btn:focus-visible,
.contact-form .submit-btn:focus-visible{
outline:2px solid var(--oc365-color-primary, #111);
outline-offset:3px;
}

.form-actions .submit-btn:active,
.submit-listing-form .submit-btn:active,
.contact-form .submit-btn:active{
transform:translateY(1px);
}

/* ==========================================================================
   Contact form (unchanged structure, aligned tokens)
   ========================================================================== */

.contact-form .form-group{
margin-bottom:1.125rem;
}

.contact-form label{
display:block;
font-size:0.8125rem;
font-weight:600;
color:var(--oc365-color-text-muted, #444);
margin-bottom:0.4rem;
}

.contact-form input,
.contact-form textarea{
width:100%;
padding:0.625rem 0.875rem;
border:1px solid var(--oc365-color-input-border, #d4d4d4);
border-radius:8px;
font-size:0.9375rem;
font-family:inherit;
color:var(--oc365-color-text, #111);
background:var(--oc365-color-card, #fff);
box-sizing:border-box;
}

.contact-form textarea{
resize:vertical;
min-height:8.75rem;
}

/* ==========================================================================
   Responsive — submit form
   ========================================================================== */

@media (max-width:900px){
.checkbox-list{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

@media (max-width:640px){
.form-grid{
grid-template-columns:1fr;
gap:1.125rem;
}

.form-group--full{
grid-column:1;
}

.checkbox-list{
grid-template-columns:1fr;
}

.submit-listing-form{
padding:1.25rem 1rem;
}

.form-section{
margin-bottom:1.5rem;
padding-bottom:1.5rem;
}

.form-section__title{
font-size:1rem;
margin-bottom:1rem;
}

.form-actions{
margin-top:1.5rem;
padding-top:1.25rem;
}
}

@media (max-width:380px){
.form-control--file::file-selector-button{
display:block;
margin:0 0 0.5rem;
width:100%;
text-align:center;
}
}

/* ==========================================================================
   Tablet+ — slightly wider checkbox grid
   ========================================================================== */

@media (min-width:641px) and (max-width:900px){
.checkbox-list{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

@media (min-width:901px){
.checkbox-list{
grid-template-columns:repeat(3, minmax(0, 1fr));
}
}