html { scroll-behavior: smooth; }
/* "Cooperate with us" page. RTL, responsive; dark mode follows the theme switcher (.active-dark-mode). */
.collab-lead { max-width: 820px; margin-inline: auto; line-height: 2; }
.collab-h2 { font-size: 24px; margin-bottom: 16px; }
.collab-note { color: var(--color-body); margin-bottom: 20px; }
.collab-list { list-style: none; padding: 0; margin: 0; }
.collab-list li { padding: 10px 0; border-bottom: 1px solid var(--color-border); line-height: 1.9; }
.collab-list li:last-child { border-bottom: 0; }
.collab-steps { padding-inline-start: 22px; line-height: 2; }
.collab-steps li { margin-bottom: 8px; }

.collab-form { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 10px; padding: 28px; }
.collab-group { border: 0; padding: 0; margin: 0 0 32px; min-width: 0; }
.collab-group > legend { font-size: 19px; font-weight: 700; color: var(--color-heading); padding: 0 0 12px; margin-bottom: 16px; border-bottom: 2px solid var(--color-primary); float: none; width: 100%; }
.collab-field { margin-bottom: 16px; border: 0; padding: 0; min-width: 0; }
.collab-label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--color-heading); float: none; width: auto; font-size: 15px; }
.collab-req { color: var(--color-danger); }
.collab-opt { color: var(--color-body); font-weight: 400; font-size: 13px; }
.collab-help { display: block; color: var(--color-body); margin-top: 4px; font-size: 13px; }
.collab-error { color: var(--color-danger); font-size: 14px; margin-top: 4px; }
.collab-field.has-error .form-control, .collab-field.has-error .collab-select { border-color: var(--color-danger); }
.collab-form .form-control, .collab-form .collab-select { height: auto; min-height: 48px; padding: 10px 14px; }
.collab-form textarea.form-control { min-height: 120px; }
.collab-form input[type="file"] { width: 100%; padding: 8px 0; }

.collab-checks > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; }
.collab-checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; padding: 4px 0; }

/* one checkbox only: the theme hides the native input and draws a blue square (label::before) with a white tick
   (label::after). Here that square is made a bit larger for touch screens; the native input stays invisible. */
.collab-consent-row { position: relative; }
.collab-consent-row input[type="checkbox"] { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; top: 2px; inset-inline-start: 0; cursor: pointer; z-index: 1; }
.collab-consent-row input[type="checkbox"] ~ label { display: block; position: relative; margin: 0; padding: 0 36px 0 0; line-height: 1.9; font-size: 14px; cursor: pointer; }
.collab-consent-row input[type="checkbox"] ~ label::before { top: 2px; right: 0; width: 24px; height: 24px; border: 2px solid var(--color-border); border-radius: 6px; }
.collab-consent-row input[type="checkbox"] ~ label::after { top: 5px; right: 9px; width: 7px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; border-radius: 1px; transform: rotate(45deg); }
.collab-consent-row input[type="checkbox"]:focus-visible ~ label::before { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.collab-field.has-error .collab-consent-row input[type="checkbox"] ~ label::before { border-color: var(--color-danger); }
.active-dark-mode .collab-consent-row input[type="checkbox"] ~ label::before { background-color: transparent; border-color: #ffffff66; }
.active-dark-mode .collab-consent-row input[type="checkbox"]:checked ~ label::before { background-color: var(--color-primary); border-color: var(--color-primary); }
.collab-privacy { color: var(--color-body); font-size: 14px; line-height: 1.9; margin: 8px 0 20px; }
.collab-alert { margin-bottom: 24px; }
.collab-alert:focus { outline: 2px solid var(--color-primary); }

/* honeypot: visually hidden but still rendered (some bots skip display:none fields). Do not use a large negative
   `left`: on an RTL page that creates a huge horizontal scroll area. */
.collab-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.collab-form :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.active-dark-mode .collab-form { background: var(--color-darker); border-color: #ffffff26; }
.active-dark-mode .collab-label, .active-dark-mode .collab-group > legend { color: var(--color-white); }
.active-dark-mode .collab-list li { border-color: #ffffff26; }

@media (max-width: 575px) {
    .collab-form { padding: 18px 14px; }
    .collab-h2 { font-size: 21px; }
}

.collab-stage .title { font-size: 20px; margin-bottom: 4px; }
.collab-grades { color: var(--color-primary); font-weight: 600; margin-bottom: 10px; }
.collab-subjects { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.collab-subjects li { background: var(--color-primary-light); border-radius: 20px; padding: 3px 12px; font-size: 14px; color: var(--color-heading); }

/* 5-step chain: numbered cards joined by arrows (RTL: flows right to left) */
.collab-chain { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.collab-chain li { position: relative; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 10px; padding: 18px 14px; text-align: center; display: block; }
.collab-chain li:not(:last-child)::after { content: "\2190"; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); color: var(--color-primary); font-size: 20px; }
.collab-chain-no { display: block; width: 34px; height: 34px; line-height: 34px; margin: 0 auto 10px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; }
.collab-chain-title { display: block; font-weight: 700; font-size: 17px; color: var(--color-heading); line-height: 1.6; }
.collab-chain-text { display: block; margin-top: 6px; color: var(--color-body); font-size: 14px; line-height: 1.9; }
.active-dark-mode .collab-chain-title { color: var(--color-white); }
@media (max-width: 991px) {
    .collab-chain { grid-template-columns: 1fr; }
    .collab-chain li:not(:last-child)::after { content: "\2193"; left: 50%; top: auto; bottom: -22px; transform: translateX(-50%); }
}
.active-dark-mode .collab-chain li { background: var(--color-darker); border-color: #ffffff26; }
.active-dark-mode .collab-subjects li { background: #ffffff1a; color: var(--color-white); }

.collab-form .form-control { font-size: 15px; color: var(--color-heading); }
/* native selects (the theme's bootstrap-select wrapper is removed by the page script) */
.collab-form select.collab-select { display: block; width: 100%; min-height: 48px; border: 2px solid var(--color-border); border-radius: 6px; background-color: var(--color-white); padding: 10px 14px; font-size: 15px; color: var(--color-heading); appearance: auto; -webkit-appearance: menulist; -moz-appearance: menulist; opacity: 1; }
.collab-field.has-error select.collab-select { border-color: var(--color-danger); }
.active-dark-mode .collab-form .form-control, .active-dark-mode .collab-form select.collab-select { color: var(--color-white); background-color: #ffffff12; }
.collab-form select.collab-select { background-image: none; }