/* sms-zmenki.com 2026 redesign: page styles (racun). Built on css/zm2026.css; same breakpoints: 1100px, 900px, 640px, 420px.
 * Pages: register.php (/registracija), registration-success.php (/registracija/uspesna),
 * activation-success.php (/aktivacija/uspesna), login.php (/prijava: the login page; it also takes the
 * header/drawer login POST). All rules are scoped to body.zm-racun. */

/* reCAPTCHA v3 badge: hidden because the registration form shows Google's notice text (.recaptcha_notice) instead. */
.grecaptcha-badge { visibility: hidden; }

/* ---------- Registration form ---------- */
.zm-racun .zm-reg { max-width: 780px; margin: 0 auto; padding: 8px 0 10px; }
.zm-racun .zm-reg__alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.zm-racun .zm-reg__alert::before {
	content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3122C' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.6v.1'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.zm-racun .zm-reg__alert p { font-weight: 700; }

/* Form: flat on the white panel (no card in a card, like the home panel and today's table),
 * rows like the old table (label | control), groups separated by thin pink rules */
.zm-racun .zm-reg__form { margin: 0; padding: 4px 0 12px; }
.zm-racun .zm-reg__row {
	display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 6px 24px;
	margin: 0; padding: 10px 0; border: 0; min-width: 0;
}
/* thin pink rule above a group, like the separators of today's table */
.zm-racun .zm-reg__row--sep, .zm-racun .zm-reg__row--submit { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--zm-pink-300); }
.zm-racun .zm-reg__row--submit { margin-top: 10px; padding-top: 20px; align-items: start; }
.zm-racun .row_5 { display: none; } /* phone number: shown by head.php when "Moj GSM" is ticked */

.zm-racun .zm-reg__label { color: var(--zm-rose-600); font-weight: 700; }
.zm-racun .zm-reg__label .zm-req { color: var(--zm-plum-500); margin-left: 3px; }
.zm-racun .zm-reg__ctrl { min-width: 0; max-width: 420px; }
.zm-racun .zm-reg__ctrl .zm-input, .zm-racun .zm-reg__select { width: 100%; }
.zm-racun .zm-reg__select { max-width: 220px; }

.zm-racun .zm-reg__set { padding-left: 0; padding-right: 0; }
.zm-racun .zm-reg__checks { display: flex; flex-wrap: wrap; gap: 0 28px; }
.zm-racun .zm-reg .zm-check { padding: 11px 0; color: var(--zm-plum-800); }
.zm-racun .zm-reg .zm-check input { margin-top: 1px; }
/* "Moj Inbox" is always on (head.php blocks the click): show it as fixed, not as a broken control */
.zm-racun #lbl_message_opt_0, .zm-racun #opt_message_opt_0 { cursor: default; }

.zm-racun .zm-reg__agree { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; max-width: none; }
.zm-racun .zm-reg__agree .zm-check { gap: 10px; }
.zm-racun .zm-reg__terms {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; /* focus ring clears "Strinjam se s" */
	font-weight: 700; color: var(--zm-plum-600);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.zm-racun .zm-reg__terms:focus-visible { outline-offset: 0; } /* ring ends 2px before the label text */
.zm-racun .zm-reg__terms:hover { color: var(--zm-plum-400); text-decoration-thickness: 2px; }

.zm-racun .zm-reg__row--submit .zm-reg__ctrl { max-width: 540px; }
.zm-racun .zm-reg__submit { min-width: 200px; padding: 0 36px; }
.zm-racun .recaptcha_notice { margin: 14px 0 0; text-wrap: pretty; font-size: 13px; line-height: 19px; color: var(--zm-grey-600); }
.zm-racun .recaptcha_notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.zm-racun .recaptcha_notice a:hover { color: var(--zm-plum-600); }

/* ---------- Login page (/prijava): the registration form's rows, two fields ---------- */
.zm-racun .zm-signin { max-width: 680px; }
.zm-racun .zm-signin__alt { margin: 16px 0 0; font-size: 15px; line-height: 22px; color: var(--zm-plum-800); }
.zm-racun .zm-signin__alt a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin-left: 1px;
	font-weight: 700; color: var(--zm-plum-600);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.zm-racun .zm-signin__alt a:hover { color: var(--zm-plum-400); text-decoration-thickness: 2px; }

/* /prijava has its own login form: the header login box (desktop) is hidden there, its place in the header stays */
.zm-signin-page .zm-login { visibility: hidden; }

/* /registracija: the top AdSense slot (3564898894, .zm-ad--side, desktop only) sits above the registration box,
 * the bottom one (3379822794) below it. The top slot keeps its 20px gap below itself, so the box starts at the
 * normal page top whether the slot is shown or hidden (no consent / phone). */
.zm-racun .zm-wrap > .zm-ad--side:first-child { margin: 0 0 20px; }
.zm-racun .zm-wrap > .zm-ad--side:first-child + .zm-box { margin-top: 0; }

/* ---------- Success / activation confirmation ---------- */
.zm-racun .zm-done {
	display: flex; align-items: center; gap: 22px;
	max-width: 780px; margin: 0 auto; padding: 22px 0 18px;
}
.zm-racun .zm-done__icon {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 64px; height: 64px; border-radius: 50%;
	background: var(--zm-gloss-btn);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(128, 7, 77, .28), 0 0 0 5px var(--zm-pink-100);
	color: var(--zm-white);
}
.zm-racun .zm-done__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.zm-racun .zm-done__msg { flex: 1 1 auto; margin: 0; padding: 16px 20px; font-size: 16px; line-height: 25px; }
.zm-racun .zm-done__msg p { font-weight: 600; }

/* ============================ Responsive ============================ */
@media (max-width: 900px) {
	.zm-racun .zm-reg { padding-top: 4px; }
	.zm-racun .zm-reg__row { grid-template-columns: 170px minmax(0, 1fr); gap: 6px 18px; }
}

/* Phone: one column, label above its control, full-width 44px controls and button */
@media (max-width: 640px) {
	.zm-racun .zm-reg { padding: 2px 0 4px; }
	.zm-racun .zm-reg__form { padding: 0 2px 6px; }
	.zm-racun .zm-reg__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 0; }
	.zm-racun .zm-reg__row--sep { margin-top: 6px; padding-top: 14px; }
	.zm-racun .zm-reg__row--submit { margin-top: 8px; padding-top: 18px; }
	.zm-racun .zm-reg__row--submit > .zm-reg__label { display: none; }
	.zm-racun .zm-reg__ctrl, .zm-racun .zm-reg__select,
	.zm-racun .zm-reg__row--submit .zm-reg__ctrl { max-width: none; } /* button + reCAPTCHA notice line up with the inputs */
	.zm-racun .zm-reg__set .zm-reg__label { margin-top: 2px; }
	.zm-racun .zm-reg .zm-check { padding: 11px 0; }
	.zm-racun .zm-reg__submit { display: flex; width: 100%; }
	.zm-racun .recaptcha_notice { margin-top: 12px; }
	.zm-racun .zm-signin__alt { margin-top: 10px; text-align: center; }

	.zm-racun .zm-done { flex-direction: column; align-items: stretch; gap: 16px; padding: 14px 0 8px; text-align: center; }
	.zm-racun .zm-done__icon { align-self: center; width: 56px; height: 56px; }
	.zm-racun .zm-done__icon svg { width: 26px; height: 26px; }
	.zm-racun .zm-done__msg { padding: 14px 16px; text-align: start; font-size: 15px; line-height: 23px; border-left-width: 1px; border-left-color: var(--zm-ok-line); border-top-width: 5px; border-top-color: var(--zm-ok); }
}

@media (max-width: 420px) {
	.zm-racun .zm-reg__checks { gap: 0 22px; }
}