/**
 * Public-facing styles – Country Smart Affiliate Links v2.2
 * Poppins font · dual-ring spinner · URL-hide click behaviour.
 *
 * @package CountrySmartAffiliateLinks
 */

/* ── Google Fonts: Poppins ───────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ── Wrapper ─────────────────────────────────── */
.csal-btn-wrap {
	display: block;
	line-height: 1;
}

.csal-align-left   { text-align: left;   }
.csal-align-center { text-align: center; }
.csal-align-right  { text-align: right;  }

/* ── Core button ─────────────────────────────── */
.csal-btn {
	display:         var( --csal-display, inline-flex );
	width:           var( --csal-width, auto );
	align-items:     center;
	justify-content: center;
	gap:             7px;

	background-color: var( --csal-bg,     #0073aa );
	color:            var( --csal-txt,    #ffffff ) !important;
	border:           2px solid var( --csal-border, transparent );
	border-radius:    var( --csal-radius, 6px );

	padding:         var( --csal-py, 12px ) var( --csal-px, 24px );
	font-size:       var( --csal-fs, 16px );
	font-weight:     var( --csal-fw, 600 );
	font-family:     'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	line-height:     1.3;
	letter-spacing:  0.03em;
	text-decoration: none !important;
	cursor:          pointer;
	position:        relative;
	overflow:        hidden;
	white-space:     nowrap;
	min-height:      44px;

	transition:
		background-color var( --csal-trans, 300ms ) ease,
		color            var( --csal-trans, 300ms ) ease,
		border-color     var( --csal-trans, 300ms ) ease,
		transform        var( --csal-trans, 300ms ) ease,
		box-shadow       var( --csal-trans, 300ms ) ease,
		opacity          var( --csal-trans, 300ms ) ease;

	box-shadow:
		0 2px 6px  rgba(0, 0, 0, 0.14),
		0 4px 14px rgba(0, 0, 0, 0.09);

	-webkit-font-smoothing: antialiased;
}

/* Shimmer overlay */
.csal-btn::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: rgba(255,255,255,0);
	transition: background var( --csal-trans, 300ms ) ease;
	pointer-events: none;
}

/* ── Hover / Focus ───────────────────────────── */
.csal-btn:not(.csal-btn-loading):hover,
.csal-btn:not(.csal-btn-loading):focus {
	background-color: var( --csal-hover-bg,     transparent );
	color:            var( --csal-hover-txt,    #0073aa ) !important;
	border-color:     var( --csal-hover-border, #0073aa );
	text-decoration:  none !important;
	outline:          none;
	transform:        translateY(-2px) scale( var( --csal-scale, 1.03 ) );
	box-shadow:
		0 5px 18px rgba(0, 0, 0, 0.18),
		0 9px 28px rgba(0, 0, 0, 0.10);
}

.csal-btn:not(.csal-btn-loading):hover::before {
	background: rgba(255,255,255,0.07);
}

.csal-btn:active {
	transform:  translateY(0) scale(1) !important;
	box-shadow: 0 1px 4px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08) !important;
}

.csal-btn:focus-visible {
	outline:        3px solid var( --csal-hover-border, #0073aa );
	outline-offset: 3px;
}

/* ── Icon ────────────────────────────────────── */
.csal-btn-icon {
	display:        inline-flex;
	align-items:    center;
	flex-shrink:    0;
	line-height:    1;
}

.csal-btn-icon svg {
	display:  block;
	width:    1em;
	height:   1em;
	fill:     none;
	stroke:   currentColor;
}

/* ── Loading state ───────────────────────────── */
/* NOTE: as of v4.0 the shortcode renders a plain <a href="/go/slug/">
   with no client-side loading/spinner state — navigation is an ordinary
   link click straight to the server-side redirect. These rules are kept
   only for third-party themes/snippets still applying .csal-btn-loading
   manually; they are unused by the plugin itself. */
.csal-btn.csal-btn-loading {
	opacity:        0.88;
	cursor:         wait;
	pointer-events: auto;
}

.csal-btn.csal-btn-loading .csal-btn-text {
	opacity: 0.70;
}

/* ── Dual-ring Spinner – best look ───────────── */
.csal-btn-spinner {
	display:     none;
	width:       18px;
	height:      18px;
	flex-shrink: 0;
	position:    relative;
}

.csal-btn.csal-btn-loading .csal-btn-spinner {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
}

/* Outer ring */
.csal-btn-spinner::before {
	content:       '';
	position:      absolute;
	width:         18px;
	height:        18px;
	border-radius: 50%;
	border:        2.5px solid rgba(255,255,255,.22);
	border-top:    2.5px solid rgba(255,255,255,.95);
	animation:     csal-spin .70s linear infinite;
}

/* Inner ring (counter-spin) */
.csal-btn-spinner::after {
	content:        '';
	position:       absolute;
	width:          10px;
	height:         10px;
	border-radius:  50%;
	border:         2px solid rgba(255,255,255,.12);
	border-bottom:  2px solid rgba(255,255,255,.75);
	animation:      csal-spin .70s linear infinite reverse;
}

/* Hide icon while loading */
.csal-btn.csal-btn-loading .csal-btn-icon {
	display: none;
}

/* Shimmer sweep while loading */
.csal-btn.csal-btn-loading::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		90deg,
		rgba(255,255,255,0)    0%,
		rgba(255,255,255,.16)  50%,
		rgba(255,255,255,0)    100%
	);
	animation: csal-shimmer 1.5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes csal-spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes csal-shimmer {
	0%   { transform: translateX(-100%) skewX(-15deg); }
	100% { transform: translateX(220%)  skewX(-15deg); }
}

/* ── Error notice (admin only) ───────────────── */
.csal-error {
	color:        #dc3232;
	background:   #fbeaea;
	border:       1px solid #f5c6c6;
	border-radius:4px;
	padding:      8px 12px;
	font-size:    0.9rem;
	display:      inline-block;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 480px) {
	.csal-btn {
		width:           100% !important;
		display:         flex !important;
		justify-content: center;
		padding-left:    20px;
		padding-right:   20px;
		white-space:     normal;
	}

	.csal-btn-wrap {
		display: block;
		text-align: left !important;
	}
}

/* High-contrast mode support */
@media (forced-colors: active) {
	.csal-btn {
		border: 2px solid ButtonText;
	}
	.csal-btn:focus-visible {
		outline: 3px solid Highlight;
	}
}