/* BW Sipariş Süreç Takibi */

:root{
	--boj-accent:#16a34a;
	--boj-accent-dark:#15803d;
	--boj-neutral:#334155;
}

/* ── Zaman çizelgesi bloğu (teşekkür / sipariş detay) ─────── */
.boj-timeline{
	border:1px solid #e5e7eb;
	border-radius:10px;
	padding:20px 22px;
	margin:0 0 28px;
	background:#fff;
	box-sizing:border-box;
}
.boj-timeline-title{
	margin:0 0 4px;
	font-size:17px;
	font-weight:700;
	line-height:1.3;
	color:#111827;
}
.boj-timeline-lead{
	margin:0 0 18px;
	font-size:14px;
	line-height:1.5;
	color:#6b7280;
}

.boj-steps{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(var(--boj-cols,3),1fr);
	gap:14px;
}
.boj-steps.boj-steps--many{gap:10px;}
.boj-steps.boj-steps--many li{font-size:12.5px;}
.boj-steps.boj-steps--many strong{font-size:13px;}
.boj-steps.boj-steps--many small{font-size:11.5px;}
.boj-steps li{
	position:relative;
	padding-top:20px;
	font-size:13.5px;
	line-height:1.4;
	color:#9ca3af;
	margin:0;
}
.boj-steps li::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:11px;
	height:11px;
	border-radius:50%;
	border:2px solid #d1d5db;
	background:#fff;
	box-sizing:border-box;
	z-index:2;
}
.boj-steps li::after{
	content:"";
	position:absolute;
	top:5px;
	left:11px;
	right:-14px;
	height:2px;
	background:#e5e7eb;
	z-index:1;
}
.boj-steps li:last-child::after{display:none;}
.boj-steps li.is-done{color:#4b5563;}
.boj-steps li.is-done::before{background:var(--boj-accent);border-color:var(--boj-accent);}
.boj-steps li.is-done::after{background:var(--boj-accent);}
.boj-steps li.is-active{color:#111827;}
.boj-steps li.is-active::before{
	border-color:var(--boj-accent);
	box-shadow:0 0 0 3px rgba(22,163,74,.15);
}
.boj-steps strong{display:block;font-weight:600;font-size:14px;}
.boj-steps small{display:block;margin-top:3px;font-size:12.5px;color:#9ca3af;}

.boj-note{
	margin:16px 0 0;
	padding:9px 12px;
	background:#fffbeb;
	border:1px solid #fde68a;
	border-radius:6px;
	font-size:12.5px;
	line-height:1.45;
	color:#92400e;
}
.boj-cancel{
	margin:12px 0 0;
	font-size:12.5px;
	line-height:1.45;
	color:#6b7280;
}
.boj-cta{
	display:inline-block;
	margin-top:16px;
	font-size:13.5px;
	font-weight:600;
	color:var(--boj-accent);
	text-decoration:none;
}
.boj-cta:hover{text-decoration:underline;}

/* Dar ekranda adımlar her zaman alt alta. 782px WordPress'in mobil eşiği;
   6 adımı 600px genişliğe sığdırmak zaten okunmuyordu. */
@media(max-width:782px){
	.boj-steps,
	.boj-steps.boj-steps--many{
		grid-template-columns:1fr;
		gap:0;
	}
	.boj-steps li{
		padding:0 0 16px 22px;
		font-size:13.5px;
	}
	.boj-steps li:last-child{padding-bottom:0;}
	.boj-steps li::before{top:3px;}
	.boj-steps li::after{
		top:14px;
		left:5px;
		right:auto;
		bottom:1px;
		width:2px;
		height:auto;
	}
	.boj-steps strong{font-size:14px;}
	.boj-steps small{font-size:12.5px;}
	.boj-timeline{padding:16px;}
}

/* ── Hesabım tablosu rozeti ───────────────────────────────── */
.boj-pill{
	display:inline-block;
	padding:2px 9px;
	border-radius:11px;
	font-size:12px;
	font-weight:600;
	line-height:1.6;
	background:rgba(22,163,74,.12);
	color:var(--boj-accent-dark);
}

/* ── Yüzen gösterge ───────────────────────────────────────── */
.boj-widget{
	position:fixed;
	bottom:24px;
	left:24px;
	z-index:9999;
	display:flex;
	flex-direction:column-reverse;
	align-items:flex-start;
	gap:8px;
	transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
@media(max-width:768px){.boj-widget{bottom:80px;left:16px;}}
.boj-widget.boj-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);}

.boj-sr{
	position:absolute;width:1px;height:1px;margin:-1px;padding:0;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.boj-button{
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px 18px 12px 14px;
	color:#fff;
	border:none;
	border-radius:5px;
	cursor:pointer;
	font-size:14px;
	font-weight:600;
	font-family:inherit;
	position:relative;
	transition:background .2s ease,box-shadow .2s ease;
}
.boj-button.is-info{background:var(--boj-neutral);box-shadow:0 4px 14px rgba(15,23,42,.22);}
.boj-button.is-info:hover{background:#1e293b;box-shadow:0 6px 18px rgba(15,23,42,.3);}
.boj-button.is-action{background:var(--boj-accent);box-shadow:0 4px 14px rgba(22,163,74,.35);}
.boj-button.is-action:hover{background:var(--boj-accent-dark);box-shadow:0 6px 20px rgba(22,163,74,.45);}
.boj-button.is-action.boj-attention{animation:boj-pulse 2.4s ease-in-out 4;}
.boj-button:hover,.boj-button:focus-visible{animation-play-state:paused;}
.boj-button:focus-visible{outline:3px solid #86efac;outline-offset:2px;}
@keyframes boj-pulse{
	0%,100%{transform:scale(1);}
	40%{transform:scale(1.06);}
	60%{transform:scale(1.03);}
}
@media(prefers-reduced-motion:reduce){
	.boj-button.boj-attention{animation:none;}
	.boj-widget{transition:none;}
}

.boj-icon{display:flex;align-items:center;flex-shrink:0;}
.boj-icon svg{display:block;}
.boj-icon .boj-ic{display:none;}
.boj-button.is-info .boj-ic-info{display:block;}
.boj-button.is-action .boj-ic-action{display:block;}
.boj-label{white-space:nowrap;letter-spacing:.01em;}
.boj-badge{
	display:none;
	position:absolute;
	top:-7px;right:-7px;
	min-width:20px;height:20px;
	padding:0 5px;
	background:#dc2626;color:#fff;
	font-size:11px;font-weight:700;line-height:20px;
	border-radius:10px;text-align:center;
}
.boj-badge.visible{display:block;}

.boj-panel{
	position:relative;
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:8px;
	padding:16px;
	width:298px;
	box-sizing:border-box;
	box-shadow:0 10px 30px rgba(0,0,0,.14);
	display:none;
	flex-direction:column;
	gap:10px;
	animation:boj-fadeup .22s ease;
}
.boj-panel.visible{display:flex;}
@keyframes boj-fadeup{
	from{opacity:0;transform:translateY(8px);}
	to{opacity:1;transform:translateY(0);}
}
.boj-panel-title{margin:0;font-size:14px;font-weight:700;color:#111827;padding-right:20px;}
.boj-panel-text{margin:0;font-size:13px;color:#4b5563;line-height:1.5;}
.boj-panel .boj-note{margin:0;font-size:12px;padding:8px 10px;display:none;}
.boj-panel .boj-note.visible{display:block;}
.boj-panel .boj-cancel{margin:0;font-size:12px;display:none;}
.boj-panel .boj-cancel.visible{display:block;}
.boj-panel .boj-cta{margin-top:2px;font-size:13px;}

.boj-close{
	position:absolute;top:10px;right:10px;
	width:22px;height:22px;padding:0;
	border:0;background:transparent;color:#9ca3af;
	font-size:18px;line-height:1;cursor:pointer;border-radius:4px;
}
.boj-close:hover{color:#4b5563;background:#f3f4f6;}

/* Panel içindeki dikey çizelge */
.boj-steps-vertical{display:flex;flex-direction:column;gap:0;}
.boj-steps-vertical li{padding:0 0 14px 22px;font-size:12.5px;line-height:1.35;}
.boj-steps-vertical li::before{left:3px;top:4px;width:9px;height:9px;}
.boj-steps-vertical li::after{
	top:15px;left:7px;right:auto;bottom:1px;width:2px;height:auto;background:#e5e7eb;
}
.boj-steps-vertical li:last-child{padding-bottom:0;}
.boj-steps-vertical li.is-done::after{background:var(--boj-accent);}
.boj-steps-vertical strong{font-size:12.5px;font-weight:600;}
.boj-steps-vertical li:not(.is-active) strong{font-weight:400;}
.boj-steps-vertical small{font-size:11.5px;}

@media(prefers-color-scheme:dark){
	.boj-panel{background:#1f2937;border-color:#374151;}
	.boj-panel-title{color:#f9fafb;}
	.boj-panel-text{color:#9ca3af;}
	.boj-panel .boj-note{background:#3f2d0c;border-color:#78530f;color:#fcd34d;}
	.boj-steps-vertical li::before{background:#1f2937;border-color:#4b5563;}
	.boj-steps-vertical li::after{background:#374151;}
	.boj-steps-vertical li.is-active{color:#f9fafb;}
	.boj-close:hover{background:#374151;color:#e5e7eb;}
}