/* Registration form — front end.

   Deliberately restrained: this sits inside the Cenote theme on a class page,
   so it borrows the site's type rather than imposing its own, and only takes
   over what it must — field rhythm, error states, and the photo slots. */

.plt-form { max-width: 560px; margin: 24px 0; }


.plt-form__alert {
	background: #fdf2f0; border: 1px solid #f0cdc4; border-left: 3px solid #d05f43;
	color: #96331c; padding: 12px 16px; border-radius: 8px;
	margin-bottom: 20px; font-size: 14px; line-height: 1.5;
}
.plt-form__alert a { color: inherit; font-weight: 600; }

.plt-form__warn,
.plt-form-warn {
	background: #fdf8ec; border: 1px solid #eddfbb; color: #7d5608;
	padding: 14px 18px; border-radius: 8px; font-size: 14px;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields
   but happily fill positioned ones, which is the behaviour we want to catch. */
.plt-form__hp {
	position: absolute !important; left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}

.plt-field { margin-bottom: 18px; }

/* Field captions only.

   .plt-check and .plt-radio are ALSO labels and ALSO direct children of
   .plt-field, so without the exclusions this rule won at (0,1,1) against their
   own (0,1,0) — which is why a checkbox row rendered as a block instead of a
   flex row. Worse, the span rule below exists to redden the required asterisk,
   and a checkbox puts its whole caption in a span: every consent line came out
   in the error colour, on a form whose only other red text means "you got this
   wrong". */
.plt-field > label:not(.plt-check):not(.plt-radio) {
	display: block; font-size: 14px; font-weight: 600;
	color: #2b2b2b; margin-bottom: 6px;
}
.plt-field > label:not(.plt-check):not(.plt-radio) span { color: #d05f43; }

.plt-field input[type="text"],
.plt-field input[type="email"],
.plt-field input[type="password"],
.plt-field input[type="tel"],
.plt-field input[type="number"],
.plt-field select,
.plt-field textarea {
	width: 100%; box-sizing: border-box;
	padding: 11px 13px; font-size: 16px; /* 16px keeps iOS from zooming on focus */
	border: 1px solid #ccd2da; border-radius: 8px;
	background: #fff; color: #1c1f26; line-height: 1.45;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.plt-field textarea { resize: vertical; min-height: 88px; }

.plt-field input:focus,
.plt-field select:focus,
.plt-field textarea:focus {
	border-color: #2f5d8f; box-shadow: 0 0 0 3px #eaf1f9; outline: none;
}

.plt-field.has-error input,
.plt-field.has-error textarea,
.plt-field.has-error select { border-color: #d05f43; background: #fefaf9; }

.plt-field__error {
	margin: 6px 0 0; font-size: 13px; color: #96331c; line-height: 1.45;
}
.plt-field__error a { color: inherit; font-weight: 600; }
.plt-field__help { margin: 6px 0 0; font-size: 13px; color: #7a828f; }

.plt-field__counter {
	margin-top: 5px; font-size: 12px; color: #7a828f; text-align: right;
	font-variant-numeric: tabular-nums;
}
.plt-field__counter.is-over { color: #96331c; font-weight: 600; }

/* Photo slots are typed OR picked, so they look like the editable fields they
   are. The gallery marks anything it cannot find in the folder, which is what
   makes typing safe to allow. */
.plt-field--photo input { font-weight: 600; }
.plt-field--photo input::placeholder { font-weight: 400; }

.plt-form__submit {
	display: inline-block; padding: 13px 30px; border: 0; border-radius: 8px;
	background: #2f5d8f; color: #fff; font-size: 16px; font-weight: 600;
	cursor: pointer; text-decoration: none; transition: background .12s ease;
}
.plt-form__submit:hover,
.plt-form__submit:focus { background: #26496f; color: #fff; }
.plt-form__submit:focus-visible { outline: 2px solid #2f5d8f; outline-offset: 3px; }

.plt-form__done {
	max-width: 560px; margin: 24px 0; padding: 28px;
	background: #f0f7f2; border: 1px solid #d5e9dd; border-radius: 12px;
}
.plt-form__done-title { font-size: 18px; font-weight: 600; color: #1f6540; margin: 0 0 8px; }
.plt-form__done p { margin: 0 0 14px; }

@media (prefers-reduced-motion: reduce) {
	.plt-field input, .plt-field textarea, .plt-field select, .plt-form__submit { transition: none; }
}

/* Radio group. Rendered as a fieldset so the legend names the group for screen
   readers instead of each option floating label-less. */
.plt-field--radio { border: 0; padding: 0; margin: 0 0 18px; }
.plt-field--radio legend {
	font-size: 14px; font-weight: 600; color: #2b2b2b;
	margin-bottom: 8px; padding: 0;
}
.plt-field--radio legend span { color: #d05f43; }

/* Two across.

   A colour choice is the one question on this form answered by comparing rather
   than reading, and in a single column the fourth swatch sits a screen away from
   the first. Side by side they can actually be weighed against each other, and
   the group stops pushing the rest of the form below the fold.

   One column again on a narrow phone: at 375px two cards leave about 90px for
   the label, and „пастелно синьо" wrapped to three lines inside a box built to
   be hit with a thumb. */
.plt-radios {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}

@media (max-width: 480px) {
	.plt-radios { grid-template-columns: 1fr; }
}

/* A radio is a choice BETWEEN options, so each one is a card big enough to hit
   with a thumb and obvious enough to compare against its neighbours.
   margin-bottom is 0 because the grid gap above spaces them now. */
.plt-radio {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 12px; margin-bottom: 0;
	border: 1px solid #d9dee5; border-radius: 8px; background: #fff;
	cursor: pointer; font-size: 15px; line-height: 1.45;
	transition: border-color .12s ease, background .12s ease;
}
.plt-radio:hover { border-color: #2f5d8f; background: #f7fafd; }
.plt-radio:has(input:checked) { border-color: #2f5d8f; background: #eaf1f9; }

/* A checkbox is one yes/no, not an option to weigh against another. Boxed like
   a radio it read as a button — and a button invites a click that DOES
   something, rather than a tick that STATES something. Plain row instead. */
.plt-check {
	display: flex; align-items: flex-start; gap: 10px;
	margin-bottom: 6px; padding: 2px 0;
	cursor: pointer; font-size: 15px; font-weight: 400;
	line-height: 1.45; color: #2b2b2b;
}

.plt-radio input,
.plt-check input {
	margin: 2px 0 0; width: 18px; height: 18px; flex: 0 0 18px; cursor: pointer;
}

/* Consent refused now shows in the text, since there is no longer a box to
   redden. The message underneath still carries the detail. */
.plt-field--consent.has-error .plt-check { color: #96331c; }

.plt-field--teacher { margin-top: -4px; }
.plt-field--teacher .plt-check { font-size: 14px; }

.plt-field input[readonly] { background: #f6f8fa; }

/* ── Login and profile ─────────────────────────────────────────────────────

   The child theme centres `.entry-content` and caps it at 600px, which is right
   for the short marketing copy these pages sit next to and wrong for a form —
   centred labels above left-aligned inputs read as a mistake. Re-aligning the
   form's own text while leaving the block centred in the column keeps both. */

.plt-form,
.plt-form__done,
.plt-profile { text-align: left; margin-left: auto; margin-right: auto; }

.plt-profile { max-width: 560px; }

.plt-form__note {
	background: #f0f7f2; border: 1px solid #d5e9dd; color: #1f6540;
	padding: 12px 16px; border-radius: 8px;
	margin-bottom: 20px; font-size: 14px; line-height: 1.5;
}

.plt-form__aside { margin: 14px 0 0; font-size: 14px; }

.plt-form__actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
	margin: 20px 0 0;
}

.plt-form__link { font-size: 14px; color: #2f5d8f; text-decoration: underline; }
.plt-form__link:hover, .plt-form__link:focus { color: #26496f; }

/* Anchors styled as buttons have to out-specify the theme.

   Cenote sets `.entry-content a { color: …; text-decoration: underline }`, and
   Kirki re-states the same selector in an inline <style> with the accent colour.
   Both are (0,1,1); a bare `.plt-form__submit` is (0,1,0), so the submit button
   rendered as purple underlined text on a blue box. Scoping to `.entry-content`
   and naming the class takes it to (0,2,1) and wins outright — no !important,
   which matters because the accent colour is a Customizer setting and the rule
   it generates will keep changing.

   Buttons that are real <button> elements never had the problem; this is only
   for the ones that are links. */
.entry-content a.plt-form__submit,
.entry-content a.plt-form__submit:link,
.entry-content a.plt-form__submit:visited,
.entry-content a.plt-form__submit:hover,
.entry-content a.plt-form__submit:focus,
.entry-content a.plt-form__submit:active {
	color: #fff; text-decoration: none;
}

.entry-content a.plt-form__link,
.entry-content a.plt-form__link:link,
.entry-content a.plt-form__link:visited,
.entry-content a.plt-form__link:active {
	color: #2f5d8f; text-decoration: underline;
}
.entry-content a.plt-form__link:hover,
.entry-content a.plt-form__link:focus { color: #26496f; text-decoration: underline; }

/* "Запомни ме" — a lone checkbox does not need the label weight the text
   fields carry above it. */
.plt-field--inline { margin-bottom: 22px; }
.plt-field--inline .plt-check { font-size: 14px; }

.plt-profile__switch { font-size: 14px; color: #7a828f; margin: 0 0 18px; }
.plt-profile__switch a { margin-right: 12px; }

.plt-profile__facts {
	display: grid; grid-template-columns: auto 1fr; gap: 8px 18px;
	margin: 0 0 12px; padding: 18px 20px;
	background: #f6f8fa; border: 1px solid #e4e8ee; border-radius: 10px;
	font-size: 15px;
}
.plt-profile__facts dt { font-weight: 600; color: #2b2b2b; margin: 0; }
.plt-profile__facts dd { margin: 0; color: #1c1f26; }

.plt-profile__locked { font-size: 13px; color: #7a828f; margin: 0 0 24px; }

.plt-profile__photos { margin: 28px 0 0; }
.plt-profile__photos h3 { font-size: 16px; margin: 0 0 10px; }
.plt-profile__photos ul { list-style: none; padding: 0; margin: 0 0 12px; }
.plt-profile__photos li {
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
	padding: 9px 0; border-bottom: 1px solid #eef1f5; font-size: 14px;
}
.plt-profile__slot { color: #2b2b2b; }
.plt-profile__picked { font-weight: 600; color: #1f6540; }
.plt-profile__empty { color: #a6adb8; }

/* Colour swatch on a radio.

   The old form showed the four covers as one flat JPEG strip, so the choice
   read as a list of names — and "пепел от рози" is not a colour anyone can
   picture. The values here are sampled from that same strip, so the swatch and
   the printer's stock agree. Checked state uses the ring, not the fill: tinting
   a chosen swatch would misreport the colour being chosen. */
.plt-radio--swatch { align-items: center; }

.plt-swatch {
	flex: 0 0 34px; width: 34px; height: 34px; border-radius: 6px;
	border: 1px solid rgba(22, 25, 31, .14);
	box-shadow: inset 0 1px 2px rgba(22, 25, 31, .06);
}

.plt-radio--swatch:has(input:checked) .plt-swatch {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2f5d8f;
}

/* ── Class page intro ───────────────────────────────────────────────────────
   Sits above the gallery. The theme centres .entry-content, which is right for
   this block — it is prose and a picture, not a form. */
/* Partner card, above the intro.
   Same column as everything else on the page so it reads as part of it rather
   than as a banner bolted on top. The card brings its own background, padding
   and radius from the branding block — the partner chose those — so this only
   places it and gives it room. Sizing of the logo itself lives with the card, in
   PLT_Branding::styles(), because the card renders on pages this stylesheet
   never reaches. */
.plt-classbrand { max-width: 720px; margin: 0 auto 22px; }

.plt-intro { max-width: 720px; margin: 0 auto 28px; }
.plt-intro__title { font-size: 26px; line-height: 1.2; margin: 0 0 4px; }
.plt-intro__class { font-size: 17px; color: #454c57; margin: 0 0 18px; }
.plt-intro__hero { margin: 0 0 18px; }
.plt-intro__hero img { max-width: 100%; height: auto; border-radius: 10px; }
.plt-intro__text { font-size: 17px; line-height: 1.6; margin: 0; }
/* A step darker than the theme's #363b40: these paragraphs are the page's
   explanation and are read in full, often on a phone in daylight. The theme's
   .entry-content colour outranks a bare class, hence the parent in front. */
.plt-intro .plt-intro__text { color: #22262b; }
.plt-intro .plt-intro__text + .plt-intro__text { margin-top: 10px; }

/* The light formatting from Настройки (PLT_Text) inside the page's texts:
   paragraphs, bullet lists, subheadings, bold and links — in the page's own
   type, whatever was typed or pasted. */
:is(.plt-intro__text, .plt-section-head__note, .plt-illus__text) p,
:is(.plt-intro__text, .plt-section-head__note, .plt-illus__text) ul { margin: 0 0 10px; }
:is(.plt-intro__text, .plt-section-head__note, .plt-illus__text) > :last-child { margin-bottom: 0; }
:is(.plt-intro__text, .plt-section-head__note, .plt-illus__text) ul { padding-left: 1.3em; text-align: left; display: inline-block; }
:is(.plt-intro__text, .plt-section-head__note, .plt-illus__text) h3 {
	margin: 14px 0 6px; font-size: 17px; line-height: 1.3; font-weight: 700;
}
:is(.plt-intro__text, .plt-section-head__note, .plt-illus__text) strong { font-weight: 700; color: #16191f; }
:is(.plt-intro__text, .plt-section-head__note, .plt-illus__text) a { color: #2f5d8f; text-decoration: underline; }

/* A design photograph inside the form, explaining the choice under it. */
.plt-illus { margin: 0 0 18px; }
/* 17px, the reading size of the offer page, shared by every paragraph here.
   These are read at the same distance and in the same breath as the inputs
   above and below them, and a step down in size made them look like footnotes
   to the form rather than part of it. A step above the fields’ 16px does not. */
.plt-illus__text { font-size: 17px; line-height: 1.6; color: #4a515c; margin: 0 0 10px; }
.plt-illus img { max-width: 100%; height: auto; border-radius: 8px; display: block; }

/* Photo slot: thumbnail left, label and field right.

   The preview strip is appended after the input by gallery.js, so the natural
   flow put the thumbnail on a third row — a picture of your choice sitting
   below the box, where you read it last. Grid places it left and spanning both
   rows without the markup having to change order. */
.plt-field--photo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
}
.plt-field--photo > label { grid-column: 2; grid-row: 1; margin-bottom: 4px; }
.plt-field--photo > input { grid-column: 2; grid-row: 2; }
.plt-field--photo .plt-field__help,
.plt-field--photo .plt-field__error { grid-column: 2; }
.plt-field--photo .plt-gal__slots { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; }

/* Group photos hold up to five, so a column of thumbnails on the left would
   squeeze the field. That one keeps the strip underneath — and spread across the
   full width rather than huddled at the left, because five squares in a row IS
   the shape of the spread they are choosing for. */
.plt-field--photo.is-multi { display: block; }

.plt-field--photo.is-multi .plt-gal__slots {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin-top: 8px;
}

/* Width comes from the grid track, so the slot only has to stay square. */
.plt-field--photo.is-multi .plt-gal__slot {
	width: auto; height: auto; aspect-ratio: 1 / 1;
}

/* Just picked: the overlay closed and the page scrolled here, so the field says
   so for a moment. Without it the student arrives at a form that looks exactly
   as it did before they chose anything. */
.plt-field--photo.is-just-picked {
	outline: 2px solid #4f9d6f; outline-offset: 6px; border-radius: 4px;
	transition: outline-color .3s ease;
}
@media (prefers-reduced-motion: reduce) {
	.plt-field--photo.is-just-picked { transition: none; }
}

/* ── Section heads ──────────────────────────────────────────────────────────
   The live form named its three parts and said in one sentence what each was
   for. Without them a student meets twelve fields in a column and has to work
   out which end up printed and which are only for us — a question they answer
   by guessing. */
.plt-section-head { margin: 30px 0 16px; padding-top: 20px; border-top: 1px solid #e6e2da; }
.plt-section-head:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }

.plt-section-head__title {
	font-size: 17px; font-weight: 600; line-height: 1.3;
	color: #1c1f26; margin: 0 0 6px;
}
/* Matched to .plt-illus__text — both are the form explaining itself, and a
   student meets them in the same pass as the fields. Leaving this one at 14px
   would have swapped one mismatch for another. */
.plt-section-head__note {
	font-size: 17px; line-height: 1.55; color: #5a626e; margin: 0;
}

/* Closed by default: a class folder is several hundred photographs and most
   visits to this page are to fix a phone number.
   Sits inside the photo section, between its heading and the first slot. The
   section head already draws the divider, so this is a box rather than another
   rule — it has to read as something to press, not as more intro text. */
.plt-profile__gallery {
	margin: 0 0 18px; padding: 0 14px;
	border: 1px solid #e3e7ec; border-radius: 8px; background: #fff;
}
.plt-profile__gallery[open] { padding-bottom: 14px; }
.plt-profile__gallery > summary {
	cursor: pointer; font-weight: 600; font-size: 15px; padding: 12px 0; min-height: 44px;
	box-sizing: border-box; list-style: none; display: flex; align-items: center; gap: 8px;
}
.plt-profile__gallery > summary::-webkit-details-marker { display: none; }
.plt-profile__gallery > summary::before { content: "▸"; color: #6b7280; }
.plt-profile__gallery[open] > summary::before { content: "▾"; }
.plt-profile__gallery > summary:focus-visible { outline: 2px solid #2f5d8f; outline-offset: 2px; }

/* A picture written into a text (PLT_Text's „![описание](12)"). The registration
   page has no zoom dialog, so the anchor is what it looks like: a link to the
   file. Same markup as the offer page, so one mark renders the same on both. */
.plt-text__figure { margin: 16px 0; }
.plt-text__figure a { display: block; border-radius: 8px; overflow: hidden; border: 1px solid #e6e2da; background: #f8fafc; }
.plt-text__img { display: block; width: 100%; height: auto; }