/* "Postani član": okvir oko Memlist pristupnice (page-postani-clan.php). Tokeni iz base.css. */

.join { padding-block: 36px 8px; }
.join-head { max-width: 760px; }
.join-lead { margin: 12px 0 0; font-size: 19px; color: var(--izb-ink-2); max-width: 60ch; }

.join-grid { display: grid; gap: 20px; margin-top: 28px; }

/* Koraci */
.join-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.join-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: var(--izb-paper); border-radius: var(--izb-radius-panel); padding: 16px 18px; box-shadow: var(--izb-shadow); }
.join-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--izb-green); color: var(--izb-paper); font: 700 20px/1 var(--izb-font-head); font-variant-numeric: tabular-nums; }
.join-steps h2 { font-size: 19px; margin: 2px 0 2px; }
.join-steps p { margin: 0; color: var(--izb-ink-2); font-size: 16px; }

/* Obrazac */
.join-form { background: var(--izb-paper); border-radius: var(--izb-radius-panel); box-shadow: var(--izb-shadow); padding: 20px 20px 22px; min-width: 0; }
.join-form-title { font-size: 26px; margin: 0 0 12px; }
.join-frame { border-radius: var(--izb-radius-md); overflow: hidden; }
/* Memlist plugin markup: bootstrap-klase bez bootstrapa, iframe ima inline visinu iz postMessage. */
.join-frame .registeruser, .join-frame .registeruser .row, .join-frame .registeruser [class*="col-"] { margin: 0; padding: 0; max-width: none; width: 100%; }
.join-frame iframe { display: block; width: 100% !important; min-height: 560px; border: 0; background: var(--izb-paper); }
/* Pluginov link "Mer om medlemssystemet" i <br> ispod iframea: zamijenjeni linkovima u desnoj koloni. */
.join-frame .registeruser + br, .join-frame .cstm_color_white { display: none; }
.join-frame p:empty { display: none; }

.join-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--izb-line); }
.join-fallback p { margin: 0; color: var(--izb-ink-2); font-size: 15.5px; }
.join-fallback .btn { min-height: 44px; }

/* Desna kolona */
.join-aside { display: grid; gap: 12px; align-content: start; }
.join-box { background: var(--izb-paper); border-radius: var(--izb-radius-panel); padding: 18px 20px; box-shadow: var(--izb-shadow); }
.join-box h2 { font-size: 19px; margin: 0 0 8px; }
.join-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.join-check li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.join-check .icon { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--izb-green); }
.join-privacy { display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; background: var(--izb-green-tint); box-shadow: none; }
.join-privacy > .icon { width: 22px; height: 22px; color: var(--izb-green); margin-top: 2px; }
.join-privacy p { margin: 0; font-size: 15.5px; color: var(--izb-ink); }
.join-privacy .join-links { grid-column: 2; }
.join-links { list-style: none; margin: 0; padding: 0; display: grid; }
.join-links a { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--izb-green); border-bottom: 1px solid var(--izb-line); }
.join-links li:last-child a { border-bottom: 0; }
.join-privacy .join-links a { border: 0; min-height: 40px; }

@media (min-width: 1000px) {
	.join-grid {
		grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
		grid-template-areas: "steps form" "aside form";
		align-items: start;
		gap: 20px 28px;
	}
	.join-steps { grid-area: steps; }
	.join-form { grid-area: form; padding: 24px 28px 26px; }
	.join-aside { grid-area: aside; }
}

@media (max-width: 999px) {
	.join-form { padding: 16px 8px 18px; }
	.join-form-title, .join-fallback { padding-inline: 8px; }
}