/**
 * Carxis Vehicle Action Buttons
 *
 * Desktop / tablet:
 * [ Telefon 30% ] [ WhatsApp 70% ]
 * [ Semak Kelayakan Loan 100% ]
 *
 * Small mobile:
 * Semua button satu baris penuh.
 */

/* ===============================
   Wrapper
=============================== */

.cx-action-buttons{
	display:flex;
	flex-direction:column;
	gap:10px;
	width:100%;
	margin-top:16px;
}

/* ===============================
   Compact Layout
=============================== */

.cx-action-buttons--compact{
	display:grid;
	grid-template-columns:minmax(0,3fr) minmax(0,7fr);
	gap:10px;
	width:100%;
}

/* Telefon kiri — 30% */
.cx-action-buttons--compact .cx-action-button--call{
	grid-column:1;
	grid-row:1;
}

/* WhatsApp kanan — 70% */
.cx-action-buttons--compact .cx-action-button--whatsapp{
	grid-column:2;
	grid-row:1;
}

/* Loan penuh di bawah */
.cx-action-buttons--compact .cx-action-button--loan{
	grid-column:1 / -1;
	grid-row:2;
}

/* ===============================
   Button Base
=============================== */

.cx-action-button,
.cx-action-button:link,
.cx-action-button:visited{
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;

	width:100%;
	min-width:0;
	min-height:50px;
	padding:11px 12px;

	border:1px solid transparent;
	border-radius:10px;

	text-align:center;
	text-decoration:none !important;

	font-size:15px;
	font-weight:700;
	line-height:1.2;

	opacity:1;
	filter:none;

	transition:
		background-color .2s ease,
		border-color .2s ease,
		color .2s ease,
		transform .2s ease,
		box-shadow .2s ease;
}

.cx-action-button:hover{
	text-decoration:none !important;
	transform:translateY(-1px);
}

.cx-action-button:focus-visible{
	outline:none;
	box-shadow:0 0 0 4px rgba(209,0,31,.12);
}

/* ===============================
   Icon
=============================== */

.cx-action-button__icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:19px;
	height:19px;
	flex:0 0 19px;
}

.cx-action-button__icon .carxis-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:100%;
	height:100%;
}

.cx-action-button__icon svg{
	display:block;

	width:19px;
	height:19px;
	max-width:19px;
	max-height:19px;
}

.cx-action-button__text{
	display:block;
	min-width:0;
	line-height:1.2;
	overflow-wrap:anywhere;
}

/* ===============================
   Telefon
=============================== */

.cx-action-button--call,
.cx-action-button--call:link,
.cx-action-button--call:visited{
	color:#ffffff !important;
	background-color:#2374e1 !important;
	border-color:#2374e1 !important;
}

.cx-action-button--call:hover,
.cx-action-button--call:focus,
.cx-action-button--call:focus-visible{
	color:#ffffff !important;
	background-color:#195fc2 !important;
	border-color:#195fc2 !important;
}

.cx-action-button--call svg{
	fill:currentColor;
	stroke:currentColor;
}

/*
 * Ruang button telefon lebih kecil.
 * Elakkan teks terlalu rapat dengan ikon.
 */
.cx-action-buttons--compact .cx-action-button--call{
	gap:6px;
	padding-left:8px;
	padding-right:8px;
	font-size:14px;
}

/* ===============================
   WhatsApp
=============================== */

.cx-action-button--whatsapp,
.cx-action-button--whatsapp:link,
.cx-action-button--whatsapp:visited{
	color:#ffffff !important;
	background-color:#22a447 !important;
	border-color:#22a447 !important;
}

.cx-action-button--whatsapp:hover,
.cx-action-button--whatsapp:focus,
.cx-action-button--whatsapp:focus-visible{
	color:#ffffff !important;
	background-color:#18873a !important;
	border-color:#18873a !important;
}

.cx-action-button--whatsapp svg{
	fill:currentColor;
	stroke:currentColor;
}

/* ===============================
   Loan
=============================== */

.cx-action-button--loan,
.cx-action-button--loan:link,
.cx-action-button--loan:visited,
.cx-action-button--loan[aria-disabled="true"],
.cx-action-button--loan.is-disabled,
.cx-action-button--loan.disabled{
	min-height:52px;

	color:#ffffff !important;
	background-color:#d1001f !important;
	border-color:#d1001f !important;

	opacity:1 !important;
	filter:none !important;
	visibility:visible !important;

	white-space:normal;
	text-align:center;
}

.cx-action-button--loan:hover,
.cx-action-button--loan:focus,
.cx-action-button--loan:focus-visible,
.cx-action-button--loan[aria-disabled="true"]:hover,
.cx-action-button--loan.is-disabled:hover,
.cx-action-button--loan.disabled:hover{
	color:#ffffff !important;
	background-color:#b5001b !important;
	border-color:#b5001b !important;

	opacity:1 !important;
	filter:none !important;
	text-decoration:none !important;
}

.cx-action-button--loan svg{
	fill:none;
	stroke:currentColor;
	stroke-width:1.9;
	stroke-linecap:round;
	stroke-linejoin:round;
}

/* ===============================
   Disabled Override
=============================== */

.cx-action-buttons .cx-action-button[disabled],
.cx-action-buttons .cx-action-button[aria-disabled="true"],
.cx-action-buttons .cx-action-button.is-disabled,
.cx-action-buttons .cx-action-button.disabled{
	opacity:1 !important;
	filter:none !important;
}

.cx-action-buttons .cx-action-button--loan[disabled],
.cx-action-buttons .cx-action-button--loan[aria-disabled="true"],
.cx-action-buttons .cx-action-button--loan.is-disabled,
.cx-action-buttons .cx-action-button--loan.disabled{
	color:#ffffff !important;
	background-color:#d1001f !important;
	border-color:#d1001f !important;
}

/* ===============================
   Other Layouts
=============================== */

.cx-action-buttons--stacked{
	display:flex;
	flex-direction:column;
}

.cx-action-buttons--inline{
	display:flex;
	flex-flow:row wrap;
}

.cx-action-buttons--inline .cx-action-button{
	width:auto;
	flex:1 1 auto;
}

.cx-action-buttons--grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:10px;
}

/* ===============================
   Tablet
=============================== */

@media (max-width:991px){

	.cx-action-buttons{
		margin-top:14px;
		gap:9px;
	}

	.cx-action-buttons--compact{
		grid-template-columns:minmax(0,3fr) minmax(0,7fr);
		gap:9px;
	}

	.cx-action-button{
		min-height:49px;
		padding:10px 11px;
		font-size:14px;
	}

	.cx-action-button--loan{
		min-height:51px;
	}
}

/* ===============================
   Mobile
=============================== */

@media (max-width:767px){

	.cx-action-buttons{
		margin-top:14px;
		gap:9px;
	}

	.cx-action-buttons--compact{
		grid-template-columns:minmax(0,3fr) minmax(0,7fr);
	}

	.cx-action-button{
		min-height:50px;
		padding:10px;
		font-size:14px;
	}

	.cx-action-buttons--compact .cx-action-button--call{
		gap:5px;
		padding-left:7px;
		padding-right:7px;
		font-size:13px;
	}

	.cx-action-button__icon{
		width:18px;
		height:18px;
		flex-basis:18px;
	}

	.cx-action-button__icon svg{
		width:18px;
		height:18px;
		max-width:18px;
		max-height:18px;
	}
}

/* ===============================
   Small Mobile
=============================== */

@media (max-width:420px){

	.cx-action-buttons--compact{
		grid-template-columns:1fr;
	}

	.cx-action-buttons--compact .cx-action-button--call,
	.cx-action-buttons--compact .cx-action-button--whatsapp,
	.cx-action-buttons--compact .cx-action-button--loan{
		grid-column:1;
	}

	.cx-action-buttons--compact .cx-action-button--call{
		grid-row:1;
		font-size:14px;
	}

	.cx-action-buttons--compact .cx-action-button--whatsapp{
		grid-row:2;
	}

	.cx-action-buttons--compact .cx-action-button--loan{
		grid-row:3;
	}

	.cx-action-button{
		min-height:50px;
		font-size:14px;
	}

	.cx-action-button--loan{
		min-height:52px;
	}
}

/* ===============================
   Vehicle Summary Layout Override
=============================== */

.carxis-vehicle-summary-actions.cx-action-buttons--compact{
	display:grid !important;
	grid-template-columns:minmax(0,3fr) minmax(0,7fr) !important;
	gap:10px !important;
	width:100% !important;
	flex-direction:initial !important;
}

.carxis-vehicle-summary-actions.cx-action-buttons--compact
.cx-action-button--call{
	grid-column:1 !important;
	grid-row:1 !important;
}

.carxis-vehicle-summary-actions.cx-action-buttons--compact
.cx-action-button--whatsapp{
	grid-column:2 !important;
	grid-row:1 !important;
}

.carxis-vehicle-summary-actions.cx-action-buttons--compact
.cx-action-button--loan{
	grid-column:1 / -1 !important;
	grid-row:2 !important;
}

@media (max-width:420px){

	.carxis-vehicle-summary-actions.cx-action-buttons--compact{
		grid-template-columns:1fr !important;
	}

	.carxis-vehicle-summary-actions.cx-action-buttons--compact
	.cx-action-button--call{
		grid-column:1 !important;
		grid-row:1 !important;
	}

	.carxis-vehicle-summary-actions.cx-action-buttons--compact
	.cx-action-button--whatsapp{
		grid-column:1 !important;
		grid-row:2 !important;
	}

	.carxis-vehicle-summary-actions.cx-action-buttons--compact
	.cx-action-button--loan{
		grid-column:1 !important;
		grid-row:3 !important;
	}
}