/* "Молба за постъпване" (parts/application.php): the kindergarten's paper form on the desk – its logo on top, its
   boxes, the dotted lines to write on – and beside it a path of stepping stones down to the house. A stone turns
   green when its part of the form is filled, and the site's snail (it looks right) crawls down the path to the last
   one filled, nose first: turned down when it goes down, up when it goes back. */

.ap { position: relative; padding: 20px 0 110px; overflow-x: clip; }
.ap-wrap { padding: 0 30px; }
.ap-intro { max-width: 860px; margin: 0 auto 30px; }
.ap-desk { position: relative; max-width: 1000px; margin: 0 auto; padding-left: 130px; }

/* the paper */
.ap-sheet { position: relative; padding: 34px 50px 46px; border-radius: 6px; background: #fffdf8; box-shadow: 0 30px 44px -30px rgba(70, 40, 20, .45), 0 0 0 1px rgba(120, 90, 50, .06); transition: translate .8s cubic-bezier(.3, .7, .3, 1), opacity .6s; }
.ap-js .ap:not(.is-in) .ap-sheet { translate: 0 40px; opacity: 0; }
.ap-logo { display: block; width: 150px; height: auto; margin: 0 auto 26px; }

/* its boxes, each in a colour of the site */
.ap .app { gap: 22px; }
.ap .app-part { --c: #ff5736; position: relative; gap: 14px; padding: 20px 24px 24px; border: 2px solid #e4dccd; border-radius: 14px; transition: border-color .4s, background .4s; }
.ap .app-part[data-part='parents'] { --c: #52aae8; }
.ap .app-part[data-part='siblings'] { --c: #8763be; }
.ap .app-part[data-part='more'] { --c: #ff7b05; }
.ap .app-part[data-part='sign'] { --c: #2e8fd6; }
.ap .app-part[data-part='send'] { --c: #7ad068; border-style: dashed; }
.ap .app-part.is-filled { border-color: color-mix(in srgb, var(--c) 45%, #e4dccd); background: color-mix(in srgb, var(--c) 4%, transparent); }
.ap .app-title { font: 400 28px/1.2 'Cabin Sketch', 'Neucha', Arial, sans-serif; color: var(--c); }
.bg .ap .app-title, .bg .ap .app-subtitle { font-family: 'Neucha', Arial, sans-serif; }
.ap .app-note { font: 400 14px/1.5 'Open Sans', Arial, sans-serif; color: #7c857f; opacity: 1; }
.ap .app-box { border: 0; padding: 0; gap: 12px; }
.ap .app-subtitle { padding: 0; font: 400 22px/1.2 'Cabin Sketch', Arial, sans-serif; color: #3c4741; }
.ap .app-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap .app-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 34px; }
.ap .app-grid--sib { grid-template-columns: 2fr .7fr .9fr 2fr; }

/* the lines to write on: dotted like the paper's, solid in the box's colour while writing. As on the paper form, the
   parent writes on the line and what to write stands small under it (the client, 2026-11-12: the words above the
   line confused her) */
.ap .app-label { font: 700 12px/1.3 'Open Sans', Arial, sans-serif; letter-spacing: .03em; color: #7c857f; }
.ap .app-field { display: flex; flex-direction: column; gap: 5px; }
.ap .app-field > .app-label { order: 2; font: 600 12.5px/1.35 'Open Sans', Arial, sans-serif; letter-spacing: .01em; color: #8a8174; text-align: center; transition: color .2s; }
.ap .app-field:focus-within > .app-label { color: var(--c); }
.ap .app-grid { row-gap: 22px; }
.ap .app-box { row-gap: 18px; }
.ap .app-field input, .ap .app-field textarea { height: auto; padding: 8px 4px 5px; border: 0; border-bottom: 2px dotted #a99f8d; border-radius: 0; background: transparent none; font: 400 16px/1.4 'Open Sans', Arial, sans-serif; color: #3c4741; box-shadow: none; transition: border-color .2s; }
.ap .app-field input:focus, .ap .app-field textarea:focus { outline: none; border-bottom: 2px solid var(--c); }
.ap .app-field.is-invalid input, .ap .app-field.is-invalid textarea { border-bottom: 2px solid #e0452b; box-shadow: none; }
.ap .app-field.is-invalid .app-label { color: #e0452b; }
.ap .app-field textarea { min-height: 38px; }

/* the boxes to tick, as on the paper */
.ap .app-choice legend { font: 700 12px/1.3 'Open Sans', Arial, sans-serif; letter-spacing: .03em; color: #7c857f; }
.ap .app-radio { position: relative; padding: 6px 12px 6px 34px; border-radius: 10px; font: 400 15px/1.35 'Open Sans', Arial, sans-serif; color: #3c4741; transition: background .2s; }
.ap .app-radio:hover { background: color-mix(in srgb, var(--c) 8%, transparent); }
.ap .app-radio input { position: absolute; opacity: 0; }
.ap .app-radio span::before { content: ''; position: absolute; left: 8px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid #8e877a; border-radius: 4px; background: #fff; transition: background .2s, border-color .2s; }
.ap .app-radio input:checked + span::before { border-color: var(--c); background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ap .app-radio input:focus-visible + span::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.ap .app-add { font: 700 14px/1.3 'Open Sans', Arial, sans-serif; color: var(--c); }
.ap .app-consent { font: 400 15px/1.5 'Open Sans', Arial, sans-serif; color: #3c4741; }
.ap .app-consent a { color: #2e8fd6; text-decoration: underline; }
.ap .app-consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #7ad068; cursor: pointer; }
.ap .app-consent.is-invalid { color: #e0452b; }
.ap .app-error { font: 700 15px/1.4 'Open Sans', Arial, sans-serif; }

/* the signatures: a lined slip of paper to sign on, as at the bottom of the paper form; the ink is the site's blue */
/* (also here the words under what they name: the slip, "Майка – имена и подпис" under it, then the line for the names) */
.ap .app-sign { display: flex; flex-direction: column; gap: 6px; }
.ap .app-sign > .app-label { order: 1; font: 600 12.5px/1.35 'Open Sans', Arial, sans-serif; letter-spacing: .01em; color: #8a8174; text-align: center; }
.ap .app-sign > .app-field { order: 2; margin-top: 12px; }
.ap .app-sign__pad { height: 160px; border: 0; border-radius: 4px; background: #fffef9 repeating-linear-gradient(transparent 0 31px, rgba(82, 170, 232, .12) 31px 32px); box-shadow: inset 0 0 0 2px #e4dccd; transition: box-shadow .3s; }
.ap .app-sign__pad:hover, .ap .app-sign__pad:focus-within { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 55%, #e4dccd); }
.ap .app-sign__pad::after { border-bottom: 2px dotted #bdb3a2; }
.ap .app-sign.is-signed .app-sign__pad { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, #e4dccd); }
.ap .app-sign.is-invalid .app-sign__pad { box-shadow: inset 0 0 0 2px #e0452b, 0 0 0 3px rgba(224, 69, 43, .12); }
.ap .app-sign__hint { font: italic 400 15px/1 'Open Sans', Arial, sans-serif; }
.ap .app-sign__clear { font: 700 12px/1.3 'Open Sans', Arial, sans-serif; color: var(--c); border-color: color-mix(in srgb, var(--c) 35%, #fff); }
.ap .app-send { margin-top: 4px; }
.ap .app-send:disabled { opacity: .6; cursor: wait; }

/* sent: the card that stays, with the house */
.ap .app-done { position: relative; padding: 30px 10px 10px; text-align: center; }
.ap .app-done .app-title { font-size: 38px; color: #7ad068; }
.ap .app-done p { max-width: 560px; margin: 14px auto 0; font: 400 17px/1.6 'Open Sans', Arial, sans-serif; color: #3c4741; }
.ap .app-done::before { content: ''; display: block; width: 150px; height: 140px; margin: 0 auto 10px; background: url('../images/house.svg') no-repeat center / contain; }

/* the path beside the paper: stones by each part, the snail, the house at the end (wide screens) */
.ap-lane { position: absolute; left: 0; top: 0; bottom: 0; width: 96px; display: none; }
.ap-lane::before { content: ''; position: absolute; left: 47px; top: 40px; bottom: 90px; width: 4px; background: repeating-linear-gradient(#d9cfbe 0 6px, transparent 6px 14px); border-radius: 2px; }
.ap-stone { position: absolute; left: 22px; width: 54px; height: 30px; margin-top: -15px; border-radius: 50%; background: radial-gradient(ellipse at 40% 35%, #e6ded0, #c9bda8); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08), 0 3px 4px rgba(80, 60, 30, .15); transition: background .5s, scale .4s cubic-bezier(.34, 1.6, .64, 1); }
.ap-stone.is-on { background: radial-gradient(ellipse at 40% 35%, #b9eaa9, #7ad068); scale: 1.08; }
.ap-stone::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 8px; margin: -6px 0 0 -7px; border: solid #fff; border-width: 0 0 3px 3px; rotate: -45deg; opacity: 0; transition: opacity .3s; }
.ap-stone.is-on::after { opacity: 1; }
.ap-snail { position: absolute; left: 13px; top: 0; z-index: 2; width: 70px; height: auto; max-width: none; translate: 0 var(--y, 0px); rotate: 90deg; transition: translate 1.4s cubic-bezier(.45, 0, .3, 1), rotate .5s cubic-bezier(.34, 1.4, .64, 1); }
.ap-snail.is-up { rotate: -90deg; }
.ap-house { position: absolute; left: 0; bottom: 0; width: 96px; height: auto; max-width: none; }
.ap-sent .ap-snail { rotate: 0deg; }

@media only screen and (min-width: 1100px) {
	.ap-lane { display: block; }
}
@media only screen and (max-width: 1099px) {
	.ap-desk { padding-left: 0; }
	/* without the path every box has its stone by the title */
	.ap .app-part:not(.app-part--send) .app-title::before { content: ''; display: inline-block; width: 26px; height: 15px; margin-right: 10px; border-radius: 50%; background: #d4c9b5; vertical-align: 4px; transition: background .4s; }
	.ap .app-part.is-filled .app-title::before { background: #7ad068; }
}
@media only screen and (max-width: 860px) {
	.ap .app-grid--4, .ap .app-grid--sib { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ap .app-grid--2 { grid-template-columns: minmax(0, 1fr); }
}
@media only screen and (max-width: 768px) {
	.ap { padding-bottom: 80px; }
	.ap-wrap { padding: 0 12px; }
	.ap-sheet { padding: 24px 14px 30px; }
	.ap-logo { width: 120px; margin-bottom: 18px; }
	.ap .app-part { padding: 16px 14px 18px; }
	.ap .app-title { font-size: 24px; }
	.ap .app-grid { grid-template-columns: minmax(0, 1fr); }
	.ap .app-grid--sib { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	/* a phone: the line comes nearer to its label, and the boxes to tick are big enough for a finger */
	.ap .app-field input, .ap .app-field textarea { padding: 3px 2px 6px; font-size: 16px; }
	.ap .app-radio { padding: 9px 12px 9px 38px; }
	.ap .app-radio span::before { width: 22px; height: 22px; margin-top: -11px; }
	.ap .app-send { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	.ap *, .ap *::before, .ap *::after { transition: none !important; }
	.ap-sheet { translate: none !important; opacity: 1 !important; }
}