/* ==========================================================================
   NANO-IT — Serwis online: style
   ========================================================================== */

/* ---------- Strony publiczne (ciemny motyw strony) ---------- */
.srv-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

.srv-card {
	background: linear-gradient(160deg, rgba(80,80,210,0.12), rgba(12,8,60,0.55));
	border: 1px solid rgba(120,125,220,0.22);
	border-radius: 18px;
	padding: 26px 26px;
	margin-bottom: 22px;
	box-shadow: 0 14px 40px -22px rgba(0,0,0,0.7);
}

.srv-section-title { color: #fff; font-size: 1.05rem; letter-spacing: 1px; margin: 6px 0 14px; }
.srv-form .srv-section-title:first-child { margin-top: 0; }

.srv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.srv-col-2 { grid-column: 1 / -1; }
.srv-full { display: block; }

.srv-form label, .srv-full, .adm-form label { display: flex; flex-direction: column; gap: 6px; color: #cfcfee; font-size: 0.9rem; margin-bottom: 14px; }

.srv-form input[type=text], .srv-form input[type=email], .srv-form input[type=tel],
.srv-form textarea, .srv-full input, .srv-full textarea, .srv-gate input {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 10px;
	padding: 11px 13px;
	color: #fff;
	font-size: 1rem;
	font-family: inherit;
}
.srv-form input:focus, .srv-form textarea:focus, .srv-full input:focus, .srv-gate input:focus {
	outline: none; border-color: #ff4646; box-shadow: 0 0 0 3px rgba(255,40,40,0.18);
}
.srv-form input[type=file] { color: #cfcfee; font-size: 0.9rem; }

.srv-type { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.srv-radio, .srv-check { display: flex; align-items: center; gap: 9px; color: #d8d8f0; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); padding: 10px 14px; border-radius: 10px; }
.srv-check { margin: 8px 0; }

.srv-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: linear-gradient(100deg, #c41212, #ff2e2e);
	color: #fff; border: none; border-radius: 11px;
	padding: 13px 22px; font-size: 1rem; font-weight: 700; letter-spacing: 0.5px;
	cursor: pointer; text-decoration: none; transition: filter .25s, transform .25s;
}
.srv-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.srv-btn--pay { background: linear-gradient(100deg, #1f9d55, #28c46a); }
.srv-btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,0.25); }

.srv-note { color: #9a9ac8; font-size: 0.85rem; margin-top: 12px; }
.srv-dev { color: #ffd27a; font-size: 0.85rem; margin-top: 10px; }
.srv-errors { background: rgba(255,40,40,0.12); border: 1px solid rgba(255,40,40,0.4); color: #ffb3b3; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.srv-errors ul { margin: 0; padding-left: 18px; list-style: disc; }
.srv-info { color: #c8c8e6; line-height: 1.5; }
.srv-ok { color: #7ee0a0; font-weight: 600; }

/* Layout statusu */
.srv-status-layout { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
.srv-main-col, .srv-side-col { min-width: 0; }
.srv-head-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.srv-head-row h2 { color: #fff; margin: 4px 0 0; }
.srv-kicker { color: #ff6a6a; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; }
.srv-mono { font-family: ui-monospace, "Courier New", monospace; color: #b9b9e0; }
.srv-status-pill { background: rgba(255,40,40,0.16); border: 1px solid rgba(255,60,60,0.45); color: #ff8a8a; padding: 7px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; white-space: nowrap; }

.srv-quote { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: flex-start; }
.srv-quote > div span { display: block; color: #9a9ac8; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.srv-quote p { color: #e6e6f6; line-height: 1.5; }
.srv-amount strong { color: #fff; font-size: 1.6rem; }
.srv-terms { margin: 16px 0; color: #c8c8e6; }
.srv-terms summary { cursor: pointer; color: #ff8a8a; }
.srv-terms p { margin-top: 8px; line-height: 1.5; }
.srv-accept { margin-top: 10px; }

/* Oś czasu */
.srv-locked-note { color: #ffd27a; margin-bottom: 14px; }
.srv-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.srv-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: rgba(255,255,255,0.12); }
.srv-step { position: relative; padding: 9px 0 9px 34px; }
.srv-dot { position: absolute; left: 2px; top: 12px; width: 16px; height: 16px; border-radius: 50%; background: #15123a; border: 2px solid rgba(255,255,255,0.25); }
.srv-step-label { color: #b6b6d4; }
.srv-step--done .srv-dot { background: #28c46a; border-color: #28c46a; }
.srv-step--done .srv-step-label { color: #cfeede; }
.srv-step--current .srv-dot { background: #ff2828; border-color: #ff2828; box-shadow: 0 0 12px rgba(255,40,40,0.7); }
.srv-step--current .srv-step-label { color: #fff; font-weight: 700; }
.srv-timeline--locked { opacity: 0.45; filter: grayscale(0.7); pointer-events: none; }

.srv-desc { color: #d8d8f0; line-height: 1.55; }
.srv-photos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.srv-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); }

/* Czat (na szaro) */
.srv-disabled { opacity: 0.55; }
.srv-chat-body { min-height: 120px; background: rgba(255,255,255,0.03); border-radius: 10px; display: grid; place-items: center; }
.srv-disabled-note { color: #9a9ac8; }
.srv-chat-input { display: flex; gap: 8px; margin-top: 12px; }
.srv-chat-input input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; padding: 9px 11px; color: #fff; }
.srv-chat-input button { background: rgba(255,255,255,0.1); border: none; color: #fff; border-radius: 8px; padding: 0 16px; }

@media (max-width: 860px) {
	.srv-status-layout { grid-template-columns: 1fr; }
}

/* ---------- Panel admina (jasny CRM) ---------- */
.adm-body { background: #eef0f7; color: #1b1d2e; font-family: "Segoe UI", system-ui, sans-serif; margin: 0; min-height: 100vh; }
.adm-top { background: #0d0a30; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; }
.adm-logo b { color: #ff4646; }
.adm-top nav { display: flex; align-items: center; gap: 18px; }
.adm-top a { color: #cfcfee; text-decoration: none; }
.adm-top a:hover { color: #fff; }
.adm-user { color: #8a8ac0; font-size: 0.9rem; }
.adm-main { max-width: 1100px; margin: 26px auto; padding: 0 22px; }
.adm-main h1 { margin-top: 0; }
.adm-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px -16px rgba(0,0,0,0.3); }
.adm-table th, .adm-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #eef0f5; font-size: 0.92rem; }
.adm-table th { background: #f6f7fb; color: #5a5d72; font-weight: 600; }
.adm-badge { background: #eceeffe6; color: #4242c7; border: 1px solid #d9d9f3; border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; }
.adm-link { color: #c41212; font-weight: 600; text-decoration: none; }
.adm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.adm-box { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 8px 24px -16px rgba(0,0,0,0.3); }
.adm-box h2 { margin-top: 0; font-size: 1.05rem; }
.adm-box label { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; color: #44475c; margin-bottom: 14px; }
.adm-box input, .adm-box textarea, .adm-box select { border: 1px solid #d4d7e2; border-radius: 8px; padding: 9px 11px; font: inherit; }
.adm-box input:focus, .adm-box textarea:focus, .adm-box select:focus { outline: none; border-color: #4242c7; }
.adm-flash { background: #e3f9ea; border: 1px solid #9fe0b6; color: #1f7a45; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.adm-hist { list-style: none; padding: 0; margin: 0; }
.adm-hist li { padding: 6px 0; border-bottom: 1px dashed #e6e8f0; font-size: 0.88rem; color: #44475c; }
.adm-hist span { color: #8a8da0; }
.adm-order .srv-photos img { width: 70px; height: 70px; }
.adm-auth { max-width: 360px; margin: 8vh auto; background: #fff; padding: 32px; border-radius: 14px; box-shadow: 0 16px 40px -20px rgba(0,0,0,0.4); }
.adm-auth h1 { margin-top: 0; text-align: center; }
.adm-auth label, .adm-form label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; color: #44475c; font-size: 0.9rem; }
.adm-auth input, .adm-form input, .adm-form textarea, .adm-form select { border: 1px solid #d4d7e2; border-radius: 8px; padding: 10px 12px; font: inherit; }
.adm-auth .srv-btn, .adm-form .srv-btn { width: 100%; }

@media (max-width: 760px) { .adm-cols { grid-template-columns: 1fr; } }

/* ---------- Karty wyboru typu (formularz zgłoszenia) ---------- */
.srv-typecards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.srv-typecard { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; background: rgba(255,255,255,0.04); cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s; }
.srv-typecard input { position: absolute; opacity: 0; pointer-events: none; }
.srv-typecard:hover { border-color: rgba(255,70,70,0.5); transform: translateY(-2px); }
.srv-typecard.is-checked { border-color: #ff3b3b; background: rgba(255,60,60,0.12); box-shadow: 0 0 0 1px rgba(255,60,60,0.5), 0 0 22px -6px rgba(255,40,40,0.5); }
.srv-typecard-title { color: #fff; font-weight: 700; font-size: 0.98rem; line-height: 1.25; }
.srv-typecard-sub { color: #b6b6d6; font-size: 0.82rem; line-height: 1.35; }
.srv-typecard--soon { opacity: 0.55; cursor: not-allowed; }
.srv-typecard--soon:hover { transform: none; border-color: rgba(255,255,255,0.14); }
.srv-typecard-badge { position: absolute; top: 10px; right: 10px; font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #b0b0d2; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; padding: 3px 7px; }

/* ---------- Sekcja "jak to działa" ---------- */
.srv-howto { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.srv-howto-title { text-align: center; color: #fff; font-size: 1.4rem; letter-spacing: 1px; margin-bottom: 26px; }
.srv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.srv-step-card { position: relative; background: linear-gradient(160deg, rgba(80,80,210,0.10), rgba(12,8,60,0.5)); border: 1px solid rgba(120,125,220,0.2); border-radius: 14px; padding: 24px 16px 16px; text-align: center; }
.srv-step-ico { width: 46px; height: 46px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,60,60,0.14); border: 1px solid rgba(255,70,70,0.34); color: #ff7a7a; }
.srv-step-ico svg { width: 24px; height: 24px; }
.srv-step-num { position: absolute; top: 10px; left: 12px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #ff2828; color: #fff; font-size: 0.75rem; font-weight: 700; }
.srv-step-card h3 { color: #fff; font-size: 0.92rem; margin: 0 0 6px; }
.srv-step-card p { color: #b6b6d6; font-size: 0.78rem; line-height: 1.4; margin: 0; }

@media (max-width: 900px) {
	.srv-steps { grid-template-columns: 1fr 1fr 1fr; }
	.srv-typecards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .srv-steps { grid-template-columns: 1fr 1fr; } }