/* ── Daily Check-in ──────────────────────────────────────────────────────── */
.dcp-wrap {
	width: 60%;
}
.dcp-card-wrapper{
	display: flex;
	align-items: start;
}
.dcp-card-content{
	flex: 1;
}
.dcp-flame-bg {
	width: 18%;
	position: relative;
	z-index: 1;
}
.dot-flame-img {
	width: 100%;
	height: auto;
	display: block;
	/* glow effect */
	filter: drop-shadow(0 0 10px #2E7BFF)
		drop-shadow(0 0 20px #2E7BFF)
		drop-shadow(0 0 35px #4DA3FF);
	/* animation */
	animation: flameFloatGlow 3s ease-in-out infinite;
}
/* animation keyframes */
@keyframes flameFloatGlow {
	0% {
		transform: translateY(0) scale(1);
		filter: drop-shadow(0 0 8px #2E7BFF)
			drop-shadow(0 0 15px #2E7BFF);
	}
	50% {
		transform: translateY(-10px) scale(1.06);
		filter: drop-shadow(0 0 25px #4DA3FF)
			drop-shadow(0 0 45px #4DA3FF);
	}
	100% {
		transform: translateY(0) scale(1);
		filter: drop-shadow(0 0 8px #2E7BFF)
			drop-shadow(0 0 15px #2E7BFF);
	}
}
.dcp-flame-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle, rgba(77,163,255,0.25) 0%, transparent 70%);
	filter: blur(25px);
	z-index: -1;
}
.dcp-card {
	background: linear-gradient(180deg, #0B2A5B 0%, #0D3470 50%, #081F47 100%);
	border-radius: 24px;
	padding: 26px 26px 22px;
	position: relative;
	overflow: hidden;
}
.dcp-card-wrapper{
	display: flex;
	align-items: start;
	gap: 22px;
}
.dcp-title-row {
	display: flex;
	flex-flow: column;
	gap: 10px;
	margin-bottom: 18px;
}
.dcp-title-wrapper{
	display: flex;
	gap: 16px;
	align-items: end;
}
.dcp-fire{ 
	font-size: 34px;
	line-height: 1;
}
.dcp-title-row h2 {
	font-family: "Outfit", sans-serif;
	font-size: 27px;
	color: #FFFFFF;
	margin-bottom: 0;
	line-height: 1;
}
.dcp-title-row p {
	font-size: 18px;
	color: #e3f0ff}

/* ── Button — full width white ───────────────────────────────────────────── */
.dcp-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 70%;
	background: #FFFFFF;
	border: none;
	border-radius: 14px;
	padding: 14px 30px;
	transition: transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 6px 22px rgba(0,0,0,0.3);
}
.dcp-btn:hover   { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.4); }
.dcp-btn:active  { transform: scale(0.98); }
.dcp-btn:disabled{ opacity: 0.6; cursor: not-allowed; transform: none; }

.dcp-btn-left { display: flex; align-items: center; gap: 10px; }

/* Calendar custom image */
.dcp-btn-lbl , .dcp-btn-pts { font-size: 18px; font-weight: 600; color: #2f63e0; }

/* ── Done box ────────────────────────────────────────────────────────────── */
.dcp-done-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 14px;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 500;
	color: #FFFFFF;
	letter-spacing: 1px;
	position: relative;
	z-index: 2;
}

/* ── Streak box ──────────────────────────────────────────────────────────── */
.dcp-streak-box {
	border-radius: 18px;
	padding: 20px;
	margin-top: -22px;
	background: #ffffff0d;
	backdrop-filter: blur(2px);
}
.dcp-streak-header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	gap: 10px;
	flex-wrap: wrap;
}
.dcp-streak-lbl { font-size: 15px; font-weight: 500; color: #FFFFFF; letter-spacing: 1px;}
.dcp-streak-val { 
	font-size: 13px;
	color: #fff;
	letter-spacing: 0.5px;
	padding: 6px 15px;
	border-radius: 20px;
	background: #ffffff00;
	backdrop-filter: blur(20px);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* ── Week track ──────────────────────────────────────────────────────────── */
.dcp-track {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.dcp-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	position: relative;
}

/* ── Connector line ──────────────────────────────────────────────────────── */
.dcp-conn {
	flex: 1;
	height: 2px;
	background: rgba(255,255,255,0.12);
	margin-bottom: 28px; /* push down to align with dot centers */
}
.dcp-conn.conn-active {
	background: #2F75FF;
}

/* ── Dots base ───────────────────────────────────────────────────────────── */
.dcp-dot {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Checked — blue */
.dcp-dot.dot-checked {
	background: linear-gradient(135deg, #2F75FF, #0044D8);
}
.dcp-dot.dot-checked svg { width: 20px; height: 20px; }

/* Today — white border */
.dcp-dot.dot-today {
	background: #FFFFFF;
	border: 2.5px solid #FFFFFF;
}
.dcp-dot.dot-today .dot-num { color: #2f63e0; }

/* Missed — red cross */
.dcp-dot.dot-missed {
	background: #fff;
	border: 2px solid #fff;
}
.dot-cross {
	font-size: 16px;
	font-weight: 900;
	color: red;
	line-height: 1;
}

/* Future */
.dcp-dot.dot-future {
	background: rgba(255,255,255,0.1);
	border: 2px solid rgba(255,255,255,0.15);
}

/* Day 7 gift dot */
.dcp-dot.dot-gift {
	background: rgba(255,255,255,0.1);
	border: 2px solid rgba(255,255,255,0.2);
}
.gift-top-img {
	position: absolute;
	right: 1px;
	top: -6px;
	width: 15px;
}

/* Day 7 "Day 7" label above dot */
.gift-top-label {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	font-weight: 700;
	color: rgba(255,255,255,0.75);
	white-space: nowrap;
	background: rgba(255,255,255,0.12);
	padding: 2px 7px;
	border-radius: 99px;
}

/* Numbers */
.dot-num { font-size: 18px; font-weight: 600; color: #e3f0ff; }

/* Labels */
.dcp-lbl      { font-size: 12px; font-weight: 600; color: #e3f0ff; }
.lbl-today    { color: #FFFFFF;}
.lbl-checked  { color: #FFFFFF; }
.lbl-missed   { color: #EF4444; }

/* ── Bottom msg ──────────────────────────────────────────────────────────── */
.dcp-msg {
	font-size: 15px;
	color: #e3f0ff;
}