/* sms-zmenki.com 2026 redesign: page styles (profil). Built on css/zm2026.css; same breakpoints: 1100px, 900px, 640px, 420px.
 * profile.php: framed photo + definition rows, "O meni", and the pink phone with the SMS form on its screen
 * (UI states driven by js/jquery.send.sms.js: #sendOK, #sendERROR, #sendERROR_IP, #sendERROR_BAN, #error01, #prov_error).
 * Everything is scoped to body.zm-profil / .zm-prof / .zm-phone / .zm-sms / .zm-sms-box. */

/* ---------- Profile: photo + data ---------- */
.zm-prof {
	display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start;
}
.zm-prof__photo {
	padding: 4px; border: 1px solid var(--zm-grey-line); border-radius: var(--zm-radius-sm);
	background: var(--zm-white); box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 2px 8px rgba(128, 7, 77, .06);
}
.zm-prof__photo img {
	display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
	object-fit: cover; object-position: 50% 25%;
	border-radius: 2px; background: #EDE3E7;
}
.zm-prof__info { min-width: 0; padding-top: 4px; }
.zm-prof__dl { grid-template-columns: 156px minmax(0, 1fr); gap: 8px 0; font-size: 16px; line-height: 24px; }
.zm-prof__dl dt { padding-right: 16px; color: var(--zm-rose-600); }
.zm-prof__dl .zm-prof__lead {
	padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--zm-pink-300);
	font-family: var(--zm-font-head); font-size: 20px; line-height: 26px;
}
.zm-prof__dl dd.zm-prof__lead { color: var(--zm-plum-600); font-weight: 700; }
.zm-prof__city::first-letter { text-transform: uppercase; }
.zm-prof__about { margin-top: 24px; max-width: 70ch; }
.zm-prof__about .zm-h3 { margin-bottom: 6px; }
.zm-prof__about .zm-text { margin: 0; font-size: 16px; line-height: 26px; overflow-wrap: anywhere; }

/* ---------- Box "Pošlji mi brezplačno sporočilo" (.zm-sms-box) with the pink phone ---------- */
.zm-sms.zm-panel {
	padding-top: 28px; padding-bottom: 38px;
	background: radial-gradient(closest-side, rgba(251, 228, 236, .95), rgba(251, 228, 236, 0)) 50% 55% / 760px 720px no-repeat;
}

.zm-phone {
	position: relative; /* containing block of the key (.zm-phone__keywell) and the chin */
	width: 100%; max-width: 356px; margin: 0 auto;
	padding: 0 16px 98px;
	border: 1px solid #C46F98;
	border-radius: 58px 58px 64px 64px / 52px 52px 60px 60px;
	background:
		radial-gradient(120% 46% at 26% 0%, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .18) 46%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .5) 2.5%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, .22) 96%, rgba(160, 40, 100, .14) 100%),
		linear-gradient(180deg, #F8D3E3 0%, #F1B6CF 26%, #EBA5C4 60%, #E497BA 88%, #DB8AB0 100%);
	box-shadow:
		inset 0 2px 1px rgba(255, 255, 255, .9),
		inset 0 0 0 4px rgba(255, 255, 255, .22),
		inset 0 -6px 10px rgba(150, 30, 90, .22),
		0 1px 0 rgba(255, 255, 255, .8),
		0 22px 34px -16px rgba(100, 2, 59, .55),
		0 3px 6px rgba(100, 2, 59, .16);
}
/* Side keys: volume on the left, power on the right */
.zm-phone::before, .zm-phone::after {
	content: ""; position: absolute; width: 4px; border: 1px solid #C46F98;
	background: linear-gradient(90deg, #D98BB0, #F3C2D7);
}
.zm-phone::before { left: -5px; top: 132px; height: 58px; border-right: 0; border-radius: 3px 0 0 3px; }
.zm-phone::after { right: -5px; top: 108px; height: 36px; border-left: 0; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #F3C2D7, #D98BB0); }

/* earpiece + camera above the screen */
.zm-phone__top { display: flex; align-items: center; justify-content: center; gap: 14px; height: 40px; }
.zm-phone__speaker {
	width: 78px; height: 10px; border-radius: 6px; border: 1px solid #B66A90;
	background:
		radial-gradient(circle, #5B3A4D 0.9px, rgba(91, 58, 77, 0) 1.4px) 1px 0 / 4px 4px,
		linear-gradient(180deg, #F7E3EC, #D9A8C0);
	box-shadow: inset 0 1px 2px rgba(80, 10, 50, .35), 0 1px 0 rgba(255, 255, 255, .8);
}
.zm-phone__cam {
	order: 2; width: 9px; height: 9px; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #8A8FB0 0, #2A2440 45%, #120E1A 100%);
	box-shadow: 0 0 0 2px rgba(180, 90, 135, .45), 0 1px 0 2px rgba(255, 255, 255, .5);
}

/* dark screen frame */
.zm-phone__bezel {
	padding: 14px 12px 20px;
	border-radius: 30px 30px 34px 34px;
	background:
		linear-gradient(118deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .05) 34%, rgba(255, 255, 255, 0) 34.2%),
		linear-gradient(180deg, #3B3540 0%, #221E26 40%, #1A171D 70%, #2B2630 100%);
	box-shadow:
		0 0 0 2px rgba(150, 50, 100, .32),
		0 1px 0 2px rgba(255, 255, 255, .45),
		inset 0 1px 0 rgba(255, 255, 255, .16),
		inset 0 -2px 4px rgba(0, 0, 0, .5);
}
.zm-phone__screen {
	border-radius: 7px;
	background: linear-gradient(180deg, #FFF7FA 0%, #FCEAF1 100%);
	box-shadow: 0 0 0 1px #0D0B0F, inset 0 1px 6px rgba(100, 2, 59, .12);
}
.zm-phone__status {
	display: flex; align-items: center; gap: 7px;
	height: 26px; padding: 0 6px 0 9px;
	border-radius: 7px 7px 0 0;
	background: linear-gradient(180deg, #44546E 0%, #2C3950 55%, #212C40 100%);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35);
	font-family: var(--zm-font-head); font-weight: 700; font-size: 11px; line-height: 14px; color: #E9EEF7;
	font-variant-numeric: tabular-nums;
}
.zm-phone__signal { width: 17px; height: 12px; fill: #E9EEF7; }
.zm-phone__net { letter-spacing: .08em; color: #C6D0E2; }
.zm-phone__battery {
	position: relative; margin-left: auto;
	width: 24px; height: 12px; padding: 1.5px;
	border: 1.5px solid #CFE6FF; border-radius: 3px;
}
.zm-phone__battery::after { content: ""; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: #CFE6FF; }
.zm-phone__battery span {
	display: block; height: 100%; border-radius: 1px;
	background: repeating-linear-gradient(90deg, #5FC7FF 0 3px, transparent 3px 4px);
}
.zm-phone__time {
	padding: 2px 6px; border-radius: 3px;
	background: #0E0E10; color: #FFD447; font-size: 12px; letter-spacing: .02em;
}

.zm-phone__display {
	display: flex; flex-direction: column;
	min-height: 322px; padding: 14px 13px 16px;
}
.zm-phone__form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.zm-phone__field { display: flex; flex-direction: column; gap: 5px; }
.zm-phone__label {
	font-family: var(--zm-font-head); font-weight: 700; font-size: 13px; line-height: 17px;
	letter-spacing: .03em; text-transform: uppercase; color: var(--zm-plum-800);
}
.zm-phone .zm-input, .zm-phone .zm-select, .zm-phone .zm-textarea {
	font-size: 16px; /* no zoom-on-focus on phones */
	background-color: var(--zm-white);
	box-shadow: inset 0 2px 3px rgba(181, 76, 136, .14);
}
.zm-phone .zm-input { font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.zm-phone .zm-textarea { min-height: 112px; resize: none; line-height: 22px; }
.zm-phone .zm-input[aria-invalid="true"], .zm-phone .zm-select[aria-invalid="true"] { border-color: var(--zm-error); background-color: #FFF7F8; }

/* inline field errors (operator, GSM number) */
.zm-phone__err, .zm-phone #error01 {
	display: none; margin: 2px 0 0; padding-left: 22px; position: relative;
	font-size: 13px; line-height: 18px; font-weight: 700; color: var(--zm-error);
}
.zm-phone__err::before {
	content: "!"; position: absolute; left: 0; top: 1px;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--zm-error); color: var(--zm-white);
	font-size: 11px; line-height: 16px; text-align: center;
}

/* the "POŠLJI SMS" key, sitting in a well on the chin below the screen */
.zm-phone__chin {
	position: absolute; left: 50%; bottom: 17px; transform: translateX(-50%);
	width: calc(66% + 12px); height: 64px; border-radius: 16px;
	background: linear-gradient(180deg, rgba(160, 40, 100, .16), rgba(160, 40, 100, .06));
	box-shadow: inset 0 2px 4px rgba(120, 20, 75, .35), 0 1px 0 rgba(255, 255, 255, .65);
}
.zm-phone__keywell { position: absolute; left: 50%; bottom: 23px; width: 66%; transform: translateX(-50%); z-index: 1; }
.zm-phone__key {
	display: block; width: 100%; height: 50px; margin: 0; padding: 0 12px;
	border: 1px solid #6C0B44; border-radius: 11px;
	background: var(--zm-gloss-btn);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 #6C0B44, 0 5px 8px rgba(80, 0, 40, .3);
	color: var(--zm-white); text-shadow: 0 1px 0 rgba(60, 0, 35, .55);
	font-family: var(--zm-font-head); font-weight: 700; font-size: 17px; line-height: 20px; letter-spacing: .06em; text-transform: uppercase;
	cursor: pointer; -webkit-appearance: none; appearance: none;
	transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.zm-phone__key:hover { background: var(--zm-gloss-btn-hover); }
.zm-phone__key:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 #6C0B44, 0 2px 4px rgba(80, 0, 40, .3); }
.zm .zm-phone__key:focus-visible { outline: 3px solid var(--zm-plum-900); outline-offset: 3px; }
.zm-phone__key[disabled] { cursor: progress; transform: translateY(2px); background: var(--zm-gloss-btn-active); box-shadow: inset 0 2px 4px rgba(40, 0, 20, .35); letter-spacing: .03em; opacity: .9; }

/* ---------- SMS result states on the screen (#fallbackMSG comes before #sendSMS in the DOM) ---------- */
.zm-sms-msg { display: none; text-align: center; color: var(--zm-plum-800); }
.zm-sms-msg p { margin: 0; }
.zm-sms-msg:focus { outline: none; }
.zm-sms-msg:focus-visible { outline: 2px solid var(--zm-plum-400); outline-offset: 4px; border-radius: 4px; }
/* icon disc above a message */
.zm-sms-msg--ok::before, .zm-sms-msg--stop::before, .zm-sms-msg--ban::before {
	content: ""; display: block; width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
	background-position: center; background-repeat: no-repeat; background-size: 30px 30px;
}
.zm-sms-msg--ok::before {
	background-color: #9B1061;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"), var(--zm-gloss-btn);
	background-size: 30px 30px, 100% 100%;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 8px rgba(100, 2, 59, .3);
}
.zm-sms-msg--stop::before {
	background-color: var(--zm-pink-200);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B1061' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M9.5 2.5h5'/%3E%3C/svg%3E");
	box-shadow: inset 0 0 0 2px var(--zm-rose-300);
}
.zm-sms-msg--ban::before {
	background-color: var(--zm-error-bg);
	background-image: 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.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
	box-shadow: inset 0 0 0 2px var(--zm-error-line);
}

/* OK: confirmation + the "DA" reply as an SMS bubble */
.zm-sms-msg--ok { font-size: 15px; line-height: 22px; color: var(--zm-text); }
.zm-sms-msg__title { margin-bottom: 8px !important; font-family: var(--zm-font-head); font-weight: 700; font-size: 18px; line-height: 24px; color: var(--zm-plum-600); }
.zm-sms-msg__da {
	display: inline-block; position: relative; min-width: 84px; margin-top: 14px; padding: 8px 20px 9px;
	border-radius: 16px 16px 4px 16px;
	background: var(--zm-gloss-btn); color: var(--zm-white);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 8px rgba(100, 2, 59, .28);
	font-family: var(--zm-font-head); font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: .08em;
	text-shadow: 0 1px 0 rgba(60, 0, 35, .5);
}

/* Generic send error: shown above the form, which stays usable */
.zm-sms-msg--error {
	position: relative; margin-bottom: 12px; padding: 9px 10px 9px 38px;
	border: 1px solid var(--zm-error-line); border-left: 4px solid var(--zm-error); border-radius: var(--zm-radius-sm);
	background: var(--zm-error-bg); text-align: left;
	font-size: 14px; line-height: 20px; font-weight: 700; color: var(--zm-error);
}
.zm-sms-msg--error::before {
	content: "!"; position: absolute; left: 10px; top: 10px;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--zm-error); color: var(--zm-white);
	font-size: 12px; line-height: 18px; text-align: center;
}

/* Daily limit / blocked number: the form is gone, the message fills the screen */
.zm-sms-msg--stop, .zm-sms-msg--ban { font-family: var(--zm-font-head); font-weight: 700; font-size: 18px; line-height: 25px; }
.zm-sms-msg--ban { color: var(--zm-error); }

/* When the form is hidden (sent / limit / blocked), centre the message on the screen */
.zm-phone__display:has(> #sendSMS[style*="none"]) > #fallbackMSG {
	flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 8px 6px 12px;
}
.zm-phone:has(#sendSMS[style*="none"]) .zm-phone__chin { /* no key any more: a plain round home key */
	bottom: 26px; width: 46px; height: 46px; border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, rgba(160, 40, 100, .14), rgba(160, 40, 100, .05));
}

/* ============================ Responsive ============================ */
@media (max-width: 1100px) {
	.zm-prof { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 900px) {
	.zm-prof { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
	.zm-prof__dl { grid-template-columns: 136px minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.zm-prof { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.zm-prof__photo { width: min(280px, 78%); margin: 4px auto 0; }
	.zm-prof__info { padding-top: 0; }
	/* labels and values stay side by side here (short labels), like today's mobile page */
	.zm-prof__dl { grid-template-columns: 124px minmax(0, 1fr); gap: 6px 0; font-size: 15px; line-height: 22px; }
	.zm-prof__dl dt { padding-right: 12px; }
	.zm-prof__dl dd { margin-bottom: 0; }
	.zm-prof__dl .zm-prof__lead { font-size: 18px; line-height: 24px; padding-bottom: 10px; }
	.zm-prof__about { margin-top: 18px; }
	.zm-prof__about .zm-text { font-size: 15px; line-height: 24px; }
	.zm-sms.zm-panel { padding-top: 18px; padding-bottom: 26px; background-size: 520px 680px; }
	.zm-phone { padding: 0 13px 94px; border-radius: 50px 50px 56px 56px / 46px 46px 54px 54px; }
	.zm-phone__top { height: 36px; }
	.zm-phone__bezel { padding: 12px 10px 18px; border-radius: 26px 26px 30px 30px; }
	.zm-phone__display { padding: 13px 11px 15px; }
}

@media (max-width: 420px) {
	.zm-phone { padding-left: 11px; padding-right: 11px; }
	.zm-phone__bezel { padding-left: 8px; padding-right: 8px; }
	.zm-phone__display { padding-left: 10px; padding-right: 10px; }
	.zm-phone__keywell { width: 72%; }
	.zm-phone__chin { width: calc(72% + 12px); }
}

@media (prefers-reduced-motion: reduce) {
	.zm-phone__key { transition: none; }
}

@media print {
	.zm-sms-box { display: none; }
}