/* ปุ่มติดต่อแบบมีลูกเล่น (.cbtn) — ใช้ใน _contact_buttons.php (widget-btn-contact*.php), ห้องพัก และ footer
   ลูกเล่น: แสงวิ่งผ่านปุ่ม / วงคลื่นรอบไอคอน / ไอคอนโทรศัพท์สั่น / ลูกศรเลื่อนตอนชี้ / ปุ่มยุบตอนกด */
.cbtn-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
	margin: 6px auto 10px;
}

.cbtn-group.cbtn-center { max-width: 760px; }
.cbtn-group.cbtn-stack { grid-template-columns: 1fr; }

.cbtn {
	--cbtn-bg: linear-gradient(120deg, #CE0001 0%, #8D0104 100%);
	--cbtn-glow: rgba(206, 0, 1, .35);
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 66px;
	padding: 9px 20px 9px 9px;
	border-radius: 999px;
	background: var(--cbtn-bg);
	color: #FFF !important;
	text-align: left;
	text-decoration: none !important;
	overflow: hidden;
	box-shadow: 0 10px 26px var(--cbtn-glow);
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}

.cbtn-line {
	--cbtn-bg: linear-gradient(120deg, #06C755 0%, #04a144 100%);
	--cbtn-glow: rgba(6, 199, 85, .35);
}

.cbtn-messenger {
	--cbtn-bg: linear-gradient(120deg, #0a7cff 0%, #a334fa 100%);
	--cbtn-glow: rgba(10, 124, 255, .35);
}

.cbtn-light {
	--cbtn-bg: #FFF;
	--cbtn-glow: rgba(0, 0, 0, .18);
	color: #8D0104 !important;
}

/* แสงวิ่งผ่านปุ่มเป็นระยะ */
.cbtn::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .45) 50%, transparent 100%);
	transform: skewX(-20deg);
	animation: cbtn-shine 4.5s ease-in-out infinite;
}

.cbtn-light::before { background: linear-gradient(100deg, transparent 0%, rgba(206, 0, 1, .12) 50%, transparent 100%); }
.cbtn-line::before { animation-delay: 1.5s; }

@keyframes cbtn-shine {
	0%, 65% { left: -60%; }
	100%    { left: 130%; }
}

.cbtn:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px var(--cbtn-glow);
}

.cbtn:active { transform: translateY(0) scale(.97); }

.cbtn:focus-visible {
	outline: 3px solid #ffb400;
	outline-offset: 3px;
}

.cbtn-icon {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	font-size: 19px;
}

.cbtn-line .cbtn-icon { font-size: 26px; }

.cbtn-light .cbtn-icon {
	background: #fdecec;
	color: #CE0001;
}

/* วงคลื่นรอบไอคอน */
.cbtn-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .7);
	animation: cbtn-ripple 2.2s ease-out infinite;
}

.cbtn-light .cbtn-icon::after { border-color: rgba(206, 0, 1, .45); }

@keyframes cbtn-ripple {
	0%   { transform: scale(1); opacity: .9; }
	100% { transform: scale(1.65); opacity: 0; }
}

/* ไอคอนโทรศัพท์สั่นเป็นระยะ */
.cbtn-tel .cbtn-icon i { animation: cbtn-ring 2.6s ease-in-out infinite; }

@keyframes cbtn-ring {
	0%, 62%, 100% { transform: rotate(0); }
	66% { transform: rotate(-18deg); }
	70% { transform: rotate(16deg); }
	74% { transform: rotate(-14deg); }
	78% { transform: rotate(10deg); }
	82% { transform: rotate(-6deg); }
	86% { transform: rotate(0); }
}

.cbtn-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.cbtn-text small {
	font-size: 13px;
	font-weight: 500;
	opacity: .9;
}

.cbtn-text strong {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cbtn-arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	font-size: 14px;
	transition: transform .25s ease;
}

.cbtn-light .cbtn-arrow {
	background: #fdecec;
	color: #CE0001;
}

.cbtn:hover .cbtn-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
	.cbtn,
	.cbtn-arrow { transition: none; }
	.cbtn::before,
	.cbtn-icon::after,
	.cbtn-tel .cbtn-icon i { animation: none; }
	.cbtn:hover { transform: none; }
}

@media (max-width: 575px) {
	.cbtn-group { grid-template-columns: 1fr; gap: 10px; }
	.cbtn { min-height: 62px; }
	.cbtn-text strong { font-size: 18px; }
}