/* ─── OrderTimeline ─── eski Tailwind → düz CSS */

/* Banner (payment pending / cancelled / refund) — flex items-center gap-3 px-4 py-3 border rounded-sm */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: 2px;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner-icon, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner-icon {
  flex-shrink: 0;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner-title, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner-title {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner-desc, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner-desc {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
}

/* amber: bg-amber-50 border-amber-200 icon text-amber-500 title text-amber-800 desc text-amber-600 */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--amber, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--amber {
  background: #fffbeb;
  border-color: #fde68a;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--amber .otl-banner-icon, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--amber .otl-banner-icon {
  color: #f59e0b;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--amber .otl-banner-title, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--amber .otl-banner-title {
  color: #92400e;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--amber .otl-banner-desc, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--amber .otl-banner-desc {
  color: #d97706;
}

/* emerald: bg-emerald-50 border-emerald-200 icon text-emerald-500 text text-emerald-800 */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--emerald, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--emerald {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--emerald .otl-banner-icon, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--emerald .otl-banner-icon {
  color: #10b981;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--emerald .otl-banner-title, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--emerald .otl-banner-title {
  color: #065f46;
}

/* neutral: bg-neutral-50 border-neutral-200 icon text-neutral-500 text text-neutral-700 */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--neutral, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--neutral {
  background: #fafafa;
  border-color: #e5e5e5;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--neutral .otl-banner-icon, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--neutral .otl-banner-icon {
  color: #737373;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--neutral .otl-banner-title, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--neutral .otl-banner-title {
  color: #404040;
}

/* red: bg-red-50 border-red-200 icon text-red-500 text text-red-800 */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--red, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--red {
  background: #fef2f2;
  border-color: #fecaca;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--red .otl-banner-icon, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--red .otl-banner-icon {
  color: #ef4444;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-banner--red .otl-banner-title, .cc_dadnPAQTf5_4X09CYtDHe .otl-banner--red .otl-banner-title {
  color: #991b1b;
}

/* ── Dikey (mobil) yerleşim ── */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-vertical, .cc_dadnPAQTf5_4X09CYtDHe .otl-vertical {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-vrow, .cc_dadnPAQTf5_4X09CYtDHe .otl-vrow {
  display: flex;
  gap: 0.75rem;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-vcol, .cc_dadnPAQTf5_4X09CYtDHe .otl-vcol {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-vbody, .cc_dadnPAQTf5_4X09CYtDHe .otl-vbody {
  padding-bottom: 1.5rem;
}
/* w-0.5 h-8 bg-neutral-200 | completed: bg-brand-green */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-vline, .cc_dadnPAQTf5_4X09CYtDHe .otl-vline {
  width: 2px;
  height: 2rem;
  background: #e5e5e5;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-vline.is-completed, .cc_dadnPAQTf5_4X09CYtDHe .otl-vline.is-completed {
  background: var(--lp-primary);
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-vdate, .cc_dadnPAQTf5_4X09CYtDHe .otl-vdate {
  margin: 0.125rem 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #a3a3a3;
}

/* ── Adım noktası — w-9 h-9 rounded-full flex items-center justify-center ── */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-dot, .cc_dadnPAQTf5_4X09CYtDHe .otl-dot {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f5f5f5; /* bg-neutral-100 */
  color: #d4d4d4; /* text-neutral-300 */
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-dot.is-completed, .cc_dadnPAQTf5_4X09CYtDHe .otl-dot.is-completed {
  background: var(--lp-primary);
  color: #ffffff;
}
/* active: bg-amber-100 text-amber-600 ring-2 ring-amber-300 */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-dot.is-active, .cc_dadnPAQTf5_4X09CYtDHe .otl-dot.is-active {
  background: #fef3c7;
  color: #d97706;
  box-shadow: 0 0 0 2px #fcd34d;
}

/* Adım etiketi — text-sm font-medium (dikey) */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-step-label, .cc_dadnPAQTf5_4X09CYtDHe .otl-step-label {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #a3a3a3; /* text-neutral-400 */
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-step-label.is-completed, .cc_dadnPAQTf5_4X09CYtDHe .otl-step-label.is-completed {
  color: var(--lp-primary);
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-step-label.is-active, .cc_dadnPAQTf5_4X09CYtDHe .otl-step-label.is-active {
  color: #b45309; /* text-amber-700 */
}

/* ── Yatay (desktop) yerleşim ── */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-horizontal, .cc_dadnPAQTf5_4X09CYtDHe .otl-horizontal {
  display: flex;
  align-items: flex-start;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-hstep, .cc_dadnPAQTf5_4X09CYtDHe .otl-hstep {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-dot--h, .cc_dadnPAQTf5_4X09CYtDHe .otl-dot--h {
  z-index: 10;
}
/* absolute top-[18px] -left-1/2 w-full h-0.5 -z-10 (çizgi dairelerin ARKASINDA) */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-hline, .cc_dadnPAQTf5_4X09CYtDHe .otl-hline {
  position: absolute;
  top: 18px;
  left: -50%;
  width: 100%;
  height: 2px;
  z-index: -10;
  background: #e5e5e5;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-hline.is-completed, .cc_dadnPAQTf5_4X09CYtDHe .otl-hline.is-completed {
  background: var(--lp-primary);
}
/* text-[11px] font-medium mt-2 text-center */
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-step-label--h, .cc_dadnPAQTf5_4X09CYtDHe .otl-step-label--h {
  font-size: 11px;
  line-height: 1.5;
  margin-top: 0.5rem;
  text-align: center;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .otl-hdate, .cc_dadnPAQTf5_4X09CYtDHe .otl-hdate {
  margin: 0.125rem 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: #a3a3a3;
}

/* ─── TrackingCard ─── eski Tailwind → düz CSS */

/* border border-neutral-200 rounded-sm p-4 */
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard, .cc_dadnPAQTf5_4X09CYtDHe .tcard {
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  padding: 1rem;
}

/* flex items-center gap-2 mb-3 */
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-head, .cc_dadnPAQTf5_4X09CYtDHe .tcard-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-head-icon, .cc_dadnPAQTf5_4X09CYtDHe .tcard-head-icon {
  color: var(--lp-primary);
}

/* text-sm font-semibold text-black */
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-title, .cc_dadnPAQTf5_4X09CYtDHe .tcard-title {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #000000;
}

/* text-xs text-neutral-500 mb-2 */
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-company, .cc_dadnPAQTf5_4X09CYtDHe .tcard-company {
  margin: 0 0 0.5rem;
  font-size: 12px;
  line-height: 16px;
  color: #737373;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-company-label, .cc_dadnPAQTf5_4X09CYtDHe .tcard-company-label {
  color: #a3a3a3;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-company-value, .cc_dadnPAQTf5_4X09CYtDHe .tcard-company-value {
  font-weight: 500;
  color: #404040;
}

/* flex items-center gap-2 mb-3 */
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-number-row, .cc_dadnPAQTf5_4X09CYtDHe .tcard-number-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-number-label, .cc_dadnPAQTf5_4X09CYtDHe .tcard-number-label {
  font-size: 12px;
  line-height: 16px;
  color: #a3a3a3;
}
/* text-xs font-mono bg-neutral-50 px-2 py-1 rounded text-neutral-700 */
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-number, .cc_dadnPAQTf5_4X09CYtDHe .tcard-number {
  font-size: 12px;
  line-height: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #fafafa;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  color: #404040;
}
/* text-[10px] text-brand-green hover:underline */
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-copy, .cc_dadnPAQTf5_4X09CYtDHe .tcard-copy {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  color: var(--lp-primary);
}
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-copy:hover, .cc_dadnPAQTf5_4X09CYtDHe .tcard-copy:hover {
  text-decoration: underline;
}

/* flex items-center justify-center gap-2 h-10 w-full bg-brand-green text-white text-xs
   font-semibold uppercase tracking-wider rounded-sm hover:bg-brand-green-mid */
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-link, .cc_dadnPAQTf5_4X09CYtDHe .tcard-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  width: 100%;
  background: var(--lp-primary);
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.cc_dadnPAQTf5_fWEb0wf5Bk .tcard-link:hover, .cc_dadnPAQTf5_4X09CYtDHe .tcard-link:hover {
  background: var(--lp-primary-dark);
}