/**
 * WxDigitals Cargo — ön yüz stilleri
 *
 * Vurgu rengi önce Woodmart'ın, sonra WordPress temasının değişkenlerinden alınır;
 * ikisi de yoksa markanın laciverti kullanılır. Metin ve yüzey renkleri sayfadan
 * miras alınır, böylece hiçbir temada yamalı durmaz.
 */

/*
 * Renk temeli.
 *
 * Bileşen sayfanın metin rengini miras alır ve bütün yüzeyleri o renkten türetir.
 * Böylece açık temalı sitede açık, koyu temalı sitede koyu görünür — ayrıca kod
 * gerektirmez.
 *
 * İşletim sisteminin koyu tema tercihi BİLEREK izlenmiyor: sayfa açık kalırken
 * bileşenin kararması, ziyaretçinin telefonu koyu moddayken formu okunmaz hâle
 * getiriyordu. Koyu görünüm isteniyorsa tema="koyu" ile açıkça seçilir.
 */
.wxd-cargo {
	--wxdc-accent: var(--wd-primary-color, var(--wp--preset--color--primary, #1b3a5c));
	--wxdc-accent-soft: var(--wd-alternative-color, var(--wp--preset--color--secondary, #4fa8d8));
	/*
	 * Vurgu rengi YAZI olarak kullanıldığında metin rengiyle harmanlanır. Ham vurgu
	 * (koyu lacivert) koyu zeminli bir sayfada okunmuyordu; bu karışım her iki
	 * durumda da okunur kalır, marka rengi de sezilir.
	 */
	--wxdc-accent-text: color-mix(in srgb, var(--wxdc-accent) 45%, currentColor);
	--wxdc-muted: color-mix(in srgb, currentColor 74%, transparent);
	--wxdc-surface: color-mix(in srgb, currentColor 5%, transparent);
	--wxdc-border: color-mix(in srgb, currentColor 18%, transparent);
	--wxdc-radius: 10px;
	--wxdc-success: #15803d;
	--wxdc-warning: #8a5600;
	--wxdc-danger: #c0392b;

	color: inherit;
	font-family: var(--wd-text-font, inherit);
	max-width: 720px;
	margin-inline: auto;
}

/* Açıkça seçilen temalar kendi zeminlerini de getirir. */
.wxd-cargo--acik {
	background: #fff;
	color: #1f2933;
}

.wxd-cargo--koyu {
	background: #14181d;
	color: #e8edf2;
}

.wxd-cargo *,
.wxd-cargo *::before,
.wxd-cargo *::after {
	box-sizing: border-box;
}

.wxd-cargo__title {
	font-family: var(--wd-title-font, inherit);
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	margin: 0 0 1rem;
}

/* ---- Sekmeler ---------------------------------------------------------- */

.wxd-cargo__tabs {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--wxdc-border);
}

/*
 * Sekmeler <button> öğesi. Tarayıcılar butonlara kendi varsayılan metin rengini
 * (buttontext, siyah) verdiği için sayfa rengi miras alınmıyor ve currentColor
 * tabanlı karışımlar koyu zeminli sitede okunmaz hâle geliyordu. Renk zorla miras
 * alınıyor, soluk görünüm de saydamlıkla veriliyor — bu her zeminde doğru çalışır.
 */
.wxd-cargo__tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	opacity: 0.68;
	padding: 0.6rem 0.9rem;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.wxd-cargo__tab:hover {
	opacity: 1;
}

.wxd-cargo__tab.is-active {
	border-bottom-color: var(--wxdc-accent);
	font-weight: 600;
	opacity: 1;
}

/* ---- Form -------------------------------------------------------------- */

.wxd-cargo__form.is-hidden {
	display: none;
}

.wxd-cargo__field + .wxd-cargo__field {
	margin-top: 0.85rem;
}

.wxd-cargo__label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin-bottom: 0.4rem;
	opacity: 0.85;
}

.wxd-cargo__input-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/*
 * Yazı boyutu 16px'in altına indirilmiyor: iOS Safari daha küçük yazılı alanlara
 * odaklanınca sayfayı otomatik yakınlaştırıyor ve düzeni bozuyor. İnce görünüm
 * yükseklik ve iç boşlukla sağlanıyor.
 */
.wxd-cargo__input,
.wxd-cargo__select {
	background: transparent;
	border: 1px solid var(--wxdc-border);
	border-radius: var(--wxdc-radius);
	color: inherit;
	font: inherit;
	font-size: 1rem;
	line-height: 1.35;
	min-height: 46px;
	padding: 0.6rem 0.85rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

/*
 * Grup içindeyken genişlik esnek olmalı: width:100% ile flex-basis birlikte
 * verilince buton orta genişliklerde gereksiz yere alt satıra kaçıyordu.
 */
.wxd-cargo__input-group .wxd-cargo__input {
	flex: 1 1 12rem;
	min-width: 0;
	width: auto;
}

.wxd-cargo__input:focus,
.wxd-cargo__select:focus {
	border-color: var(--wxdc-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wxdc-accent) 22%, transparent);
	outline: none;
}

.wxd-cargo__button {
	align-items: center;
	background: var(--wxdc-accent);
	border: 0;
	border-radius: var(--wxdc-radius);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font: inherit;
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	min-height: 46px;
	padding: 0.6rem 1.4rem;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.1s ease;
}

.wxd-cargo__button:active {
	transform: translateY(1px);
}

/* İkon yalnızca dar ekranda, yazı yerine görünür. */
.wxd-cargo__button-icon {
	display: none;
	height: 20px;
	width: 20px;
}

.wxd-cargo__button:hover {
	filter: brightness(1.08);
}

.wxd-cargo__button[disabled] {
	cursor: progress;
	opacity: 0.75;
}

.wxd-cargo__button--small {
	font-size: 0.875rem;
	min-height: 38px;
	padding: 0.4rem 0.9rem;
}

.wxd-cargo__spinner {
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	border-top-color: #fff;
	display: none;
	height: 16px;
	width: 16px;
}

.wxd-cargo.is-loading .wxd-cargo__spinner {
	animation: wxdc-spin 0.7s linear infinite;
	display: inline-block;
}

@keyframes wxdc-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.wxd-cargo.is-loading .wxd-cargo__spinner { animation-duration: 2s; }
}

.wxd-cargo__hint {
	color: var(--wxdc-muted);
	font-size: 0.8125rem;
	margin: 0.4rem 0 0;
}

.wxd-cargo__advanced {
	margin-top: 0.85rem;
}

.wxd-cargo__advanced summary {
	color: var(--wxdc-muted);
	cursor: pointer;
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

/* ---- Sonuç ------------------------------------------------------------- */

.wxd-cargo__result {
	margin-top: 1.25rem;
}

.wxd-cargo__result:empty {
	display: none;
}

.wxd-cargo__card {
	background: var(--wxdc-surface);
	border: 1px solid var(--wxdc-border);
	border-radius: calc(var(--wxdc-radius) + 6px);
	/* Çok hafif bir yükseklik hissi; koyu zeminde de rahatsız etmeyecek kadar düşük. */
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -18px rgba(0, 0, 0, 0.35);
	padding: 1.25rem;
}

.wxd-cargo__card-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
}

.wxd-cargo__logo {
	height: 34px;
	max-width: 130px;
	object-fit: contain;
	width: auto;
}

.wxd-cargo__logo--text {
	font-weight: 700;
	height: auto;
}

.wxd-cargo__card-meta {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	margin-inline-end: auto;
}

.wxd-cargo__code-label {
	color: var(--wxdc-muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wxd-cargo__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	word-break: break-all;
}

/*
 * Rozetler dolu zeminli ve beyaz yazılı. Önceki soluk zemin + koyu yazı bileşimi,
 * sayfa koyu temalıyken okunmuyordu (kontrast 1.4); dolu zemin her iki durumda da
 * çalışıyor.
 */
.wxd-cargo__badge {
	background: var(--wxdc-accent);
	border-radius: 999px;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.35rem 0.85rem;
	white-space: nowrap;
}

.wxd-cargo__badge--delivered {
	background: var(--wxdc-success);
}

.wxd-cargo__badge--problem {
	background: var(--wxdc-danger);
}

.wxd-cargo__badge--out_for_delivery {
	background: var(--wxdc-warning);
}

.wxd-cargo__progress {
	background: color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 999px;
	height: 6px;
	margin: 1.1rem 0 0.6rem;
	overflow: hidden;
}

.wxd-cargo__progress-bar {
	background: linear-gradient(90deg, var(--wxdc-accent), var(--wxdc-accent-soft));
	border-radius: inherit;
	height: 100%;
	transition: width 0.5s ease;
}

.wxd-cargo__card--delivered .wxd-cargo__progress-bar {
	background: var(--wxdc-success);
}

.wxd-cargo__card--problem .wxd-cargo__progress-bar {
	background: var(--wxdc-danger);
}

/*
 * Teslim satırı rengi sayfadan miras alır: yeşil yazı hem açık hem koyu zeminde
 * sınırda kontrast veriyordu. Anlam renge değil, öndeki işarete ve kalın yazıya bağlı.
 */
.wxd-cargo__delivered {
	align-items: center;
	color: inherit;
	display: flex;
	font-weight: 600;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.wxd-cargo__delivered::before {
	background: var(--wxdc-success);
	border-radius: 50%;
	content: "";
	flex: 0 0 10px;
	height: 10px;
	width: 10px;
}

/* ---- Gönderi künyesi ---------------------------------------------------- */

.wxd-cargo__details {
	display: grid;
	gap: 0.75rem 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 1.15rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--wxdc-border);
}

.wxd-cargo__detail dt {
	color: var(--wxdc-muted);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	margin: 0 0 0.15rem;
	text-transform: uppercase;
}

.wxd-cargo__detail dd {
	font-weight: 600;
	margin: 0;
	overflow-wrap: anywhere;
}

.wxd-cargo__section-heading {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 1.5rem 0 0;
	padding-top: 1.15rem;
	border-top: 1px solid var(--wxdc-border);
}

/* ---- Zaman çizelgesi ---------------------------------------------------- */

.wxd-cargo__timeline {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	position: relative;
}

.wxd-cargo__step {
	display: flex;
	gap: 0.9rem;
	padding-bottom: 1.05rem;
	position: relative;
}

.wxd-cargo__step:last-child {
	padding-bottom: 0;
}

/*
 * Bağlantı çizgisi her adımın altına ayrı çiziliyor. Tek uzun çizgi kullanıp
 * noktaları zeminle maskelemek, zemin rengi sayfadan miras alındığı için
 * güvenilir değildi.
 */
.wxd-cargo__step:not(:last-child)::after {
	background: var(--wxdc-border);
	bottom: -2px;
	content: "";
	inset-inline-start: 5px;
	position: absolute;
	top: 23px;
	width: 2px;
}

.wxd-cargo__dot {
	background: transparent;
	border: 2px solid var(--wxdc-border);
	border-radius: 50%;
	flex: 0 0 12px;
	height: 12px;
	margin-top: 5px;
	position: relative;
	width: 12px;
	z-index: 1;
}

.wxd-cargo__step.is-current .wxd-cargo__dot {
	background: var(--wxdc-accent);
	border-color: var(--wxdc-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wxdc-accent) 18%, transparent);
}

.wxd-cargo__step--delivered.is-current .wxd-cargo__dot {
	background: var(--wxdc-success);
	border-color: var(--wxdc-success);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wxdc-success) 18%, transparent);
}

.wxd-cargo__step-desc {
	font-weight: 600;
	margin: 0;
}

.wxd-cargo__step-meta {
	color: var(--wxdc-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	gap: 0.35rem 0.75rem;
	margin: 0.15rem 0 0;
}

/* ---- Yönlendirme / öneriler -------------------------------------------- */

.wxd-cargo__message,
.wxd-cargo__suggest-title {
	margin: 0.75rem 0 0.6rem;
}

.wxd-cargo__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wxd-cargo__suggestion {
	align-items: center;
	background: transparent;
	border: 1px solid var(--wxdc-border);
	border-radius: var(--wxdc-radius);
	display: inline-flex;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease;
}

.wxd-cargo__suggestion:hover {
	border-color: var(--wxdc-accent);
}

.wxd-cargo__suggestion img {
	height: 22px;
	max-width: 74px;
	object-fit: contain;
}

.wxd-cargo__external {
	margin: 1rem 0 0;
}

.wxd-cargo__external a {
	color: var(--wxdc-accent-text);
	font-size: 0.875rem;
}

/* ---- Bildirim kutuları -------------------------------------------------- */

.wxd-cargo__notice {
	border: 1px solid var(--wxdc-border, rgba(0, 0, 0, 0.14));
	border-radius: 12px;
	padding: 0.9rem 1.1rem;
}

.wxd-cargo__notice--error {
	background: color-mix(in srgb, #c0392b 8%, transparent);
	border-color: color-mix(in srgb, #c0392b 30%, transparent);
}

.wxd-cargo__notice--success {
	background: color-mix(in srgb, #1e8e4a 8%, transparent);
	border-color: color-mix(in srgb, #1e8e4a 30%, transparent);
}

/* ---- Sipariş listesi ---------------------------------------------------- */

.wxd-cargo__orders {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wxd-cargo__order {
	background: var(--wxdc-surface);
	border: 1px solid var(--wxdc-border);
	border-radius: var(--wxdc-radius);
	padding: 0.9rem 1.1rem;
}

.wxd-cargo__order-head {
	align-items: baseline;
	color: var(--wxdc-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875rem;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}

.wxd-cargo__order-no {
	color: var(--wxdc-accent-text);
	font-weight: 700;
	text-decoration: none;
}

.wxd-cargo__order-cargo {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ---- Erişilebilirlik ve küçük ekran ------------------------------------- */

/*
 * Kargo firmalarının logoları koyu renkli çizimler; koyu temada kayboluyordu.
 * Altlarına açık bir zemin veriliyor.
 */
.wxd-cargo--koyu .wxd-cargo__logo,
.wxd-cargo--koyu .wxd-cargo__suggestion img {
	background: #fff;
	border-radius: 6px;
	padding: 4px 6px;
}

/* Klavyeyle gezenler odağın nerede olduğunu görebilmeli. */
.wxd-cargo__tab:focus-visible,
.wxd-cargo__button:focus-visible,
.wxd-cargo__suggestion:focus-visible,
.wxd-cargo__advanced summary:focus-visible {
	outline: 2px solid var(--wxdc-accent);
	outline-offset: 2px;
}

/* ---- Dar ekran ---------------------------------------------------------- */

@media (max-width: 560px) {
	/*
	 * Kod alanı ile buton yan yana kalır; buton yazı yerine ok ikonuna dönüşerek
	 * kare bir dokunma hedefine iner. Alt alta yığılmış tam genişlik buton, giriş
	 * alanını gereğinden iri ve hantal gösteriyordu.
	 */
	.wxd-cargo__input-group {
		flex-wrap: nowrap;
		gap: 0.4rem;
	}

	.wxd-cargo__input-group .wxd-cargo__input {
		flex: 1 1 auto;
	}

	.wxd-cargo__button {
		flex: 0 0 auto;
		min-height: 46px;
		padding: 0;
		width: 46px;
	}

	.wxd-cargo__button-text {
		/* Ekranda gizli ama ekran okuyucuda erişilebilir kalır. */
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.wxd-cargo__button-icon {
		display: block;
	}

	.wxd-cargo.is-loading .wxd-cargo__button-icon {
		display: none;
	}

	/* Sipariş sorgusunda buton kendi satırında ve tam genişlikte daha doğru durur. */
	.wxd-cargo__form[data-wxd-panel="order"] .wxd-cargo__input-group {
		flex-wrap: wrap;
	}

	.wxd-cargo__form[data-wxd-panel="order"] .wxd-cargo__button {
		padding: 0.6rem 1.4rem;
		width: 100%;
	}

	.wxd-cargo__form[data-wxd-panel="order"] .wxd-cargo__button-text {
		clip: auto;
		clip-path: none;
		height: auto;
		position: static;
		width: auto;
	}

	.wxd-cargo__form[data-wxd-panel="order"] .wxd-cargo__button-icon {
		display: none;
	}

	.wxd-cargo__title {
		margin-bottom: 0.75rem;
	}

	.wxd-cargo__tab {
		flex: 1 1 0;
		font-size: 0.875rem;
		padding: 0.55rem 0.4rem;
	}

	.wxd-cargo__card {
		padding: 1rem;
	}

	.wxd-cargo__card-head {
		gap: 0.5rem 0.75rem;
	}

	.wxd-cargo__logo {
		height: 26px;
		max-width: 96px;
	}

	.wxd-cargo__badge {
		font-size: 0.75rem;
		padding: 0.3rem 0.7rem;
	}

	.wxd-cargo__details {
		gap: 0.7rem 1rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wxd-cargo__step {
		gap: 0.7rem;
		padding-bottom: 0.9rem;
	}

	.wxd-cargo__step-desc {
		font-size: 0.9375rem;
	}
}

/* Eski tarayıcılar color-mix desteklemiyorsa okunabilirlik bozulmasın. */
@supports not (color: color-mix(in srgb, #000 10%, transparent)) {
	.wxd-cargo {
		--wxdc-muted: rgba(128, 128, 128, 0.95);
		--wxdc-surface: rgba(128, 128, 128, 0.08);
		--wxdc-border: rgba(128, 128, 128, 0.35);
	}
}