/* ==========================================================
   K9 Paw – shared styles for all custom widgets
   Font: Roboto | Icons: Font Awesome | Accent: #DCA54A
   ========================================================== */
:root {
	--k9-gold: #DCA54A;
	--k9-gold-dark: #c48f37;
	--k9-dark: #171717;
	--k9-font: 'Roboto', sans-serif;
}

/* ==========================================================
   GLOBAL BUTTON – sab widgets ka ek hi button style
   Yahan change karein, har widget ka button badal jayega.
   ========================================================== */
.k9-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-height: 52px; padding: 15px 34px;
	font-family: var(--k9-font) !important; font-size: 15px; font-weight: 600;
	line-height: 1.2; letter-spacing: .2px; text-decoration: none !important;
	color: var(--k9-dark) !important;
	background-color: var(--k9-gold);
	border: 1px solid var(--k9-gold); border-radius: 4px;
	box-shadow: 0 8px 18px rgba(220,165,74,.25);
	cursor: pointer;
}
.k9-btn:hover, .k9-btn:focus-visible {
	color: var(--k9-gold) !important;
	background-color: var(--k9-dark);
	border-color: var(--k9-dark);
}
.k9-btn:focus-visible { outline: 2px solid var(--k9-gold); outline-offset: 3px; }
.k9-btn .k9-arrow svg, .k9-btn .k9hq__btn-icon svg { width: 14px; height: 14px; fill: currentColor; }
.k9-btn i { font-size: 14px; }

/* Secondary (outline) – same size & shape, transparent fill */
.k9-btn--outline {
	color: #fff !important;
	background-color: rgba(0,0,0,.35);
	border-color: rgba(255,255,255,.55);
	box-shadow: none;
}
.k9-btn--outline:hover, .k9-btn--outline:focus-visible {
	color: var(--k9-dark) !important;
	background-color: var(--k9-gold);
	border-color: var(--k9-gold);
}
.k9-btn--outline:hover .k9hq__btn-icon { color: var(--k9-dark); }

@media (max-width: 767px) {
	.k9-btn { min-height: 48px; padding: 14px 24px; font-size: 14px; }
}

/* ---- Button hover effect: lift + shine sweep + arrow slide ---- */
.k9-btn-fx {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease !important;
}
.k9-btn-fx::before {
	content: "";
	position: absolute; top: 0; left: -75%; z-index: -1;
	width: 50%; height: 100%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
	transform: skewX(-20deg);
	transition: left .6s ease;
	pointer-events: none;
}
.k9-btn-fx:hover::before { left: 130%; }
.k9-btn-fx:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(220,165,74,.35); }
.k9-btn-fx:active { transform: translateY(0); }
.k9-btn-fx .k9-arrow,
.k9-btn-fx .k9hq__arrow { display: inline-flex; transition: transform .3s ease; }
.k9-btn-fx:hover .k9-arrow,
.k9-btn-fx:hover .k9hq__arrow { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
	.k9-btn-fx, .k9-btn-fx::before, .k9-btn-fx .k9-arrow { transition: none !important; }
}