/**
 * CommerceKit — Free Shipping Notification (CK-1109 review redesign).
 *
 * Deliberately quiet. The earlier "card" (border + shadow + rounded bg +
 * truck/check icon + bordered pill) competed visually with the cart
 * totals. This is now an inline notice: one line of text and a single
 * slim progress line, with a low-emphasis "Ship to {country}" text
 * button that opens a small searchable utility popover.
 *
 * The accent colour comes from the `fsn_bar_color` admin option,
 * sanitised server-side with sanitize_hex_color() and surfaced via the
 * inline `--cgkit-fsn-accent` custom property on the root element.
 *
 * @package CommerceKit
 */

.cgkit-fsn-card {
	--cgkit-fsn-accent:  #3bb54a;
	--cgkit-fsn-success: #1a7f37;
	--cgkit-fsn-track-bg: #e8eaed;
	--cgkit-fsn-text:    #1f2328;
	--cgkit-fsn-muted:   #57606a;
	--cgkit-fsn-focus:   #3a4252;

	background:  transparent;
	border:      0;
	border-radius: 0;
	box-shadow:  none;
	box-sizing:  border-box;
	color:       var( --cgkit-fsn-text );
	display:     block;
	margin:      10px 0;
	padding:     0;
	position:    relative;
}

.cgkit-fsn-card * { box-sizing: border-box; }

/* Notice row — message (flexible), shop link, country switcher. */
.cgkit-fsn-card .cgkit-fsn-card-row {
	align-items: baseline;
	display:     flex;
	flex-wrap:   wrap;
	gap:         4px 12px;
	padding:     0 0 8px;
}
.cgkit-fsn-card .cgkit-fsn-message-wrap {
	flex: 1 1 auto;
}
.cgkit-fsn-card:has(.cgkit-fsn-country-wrap) .cgkit-fsn-message-wrap {
	text-align:  left;
}
.cgkit-fsn-card .cgkit-fsn-message {
	color:       var( --cgkit-fsn-text );
	font-size:   13px;
	line-height: 1.4;
	min-width:   0;
	position: relative;
}
.cgkit-fsn-card.cgkit-fsn-state-success .cgkit-fsn-message {
    padding-left: 23px;
}
.cgkit-fsn-card.cgkit-fsn-state-success .cgkit-fsn-message:before {
    position: absolute;
    top: 50%;
    left: 0px;
    margin-top: -9px;
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: var( --cgkit-fsn-accent , #3bb54a );
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.cgkit-fsn-card .cgkit-fsn-message strong { font-weight: 600; }

.cgkit-fsn-card .cgkit-fsn-shop-link {
	flex:      0 0 auto;
	font-size: 13px;
}
.cgkit-fsn-card .cgkit-fsn-shop-link a {
	color:           var( --cgkit-fsn-muted );
	text-decoration: underline;
}

/* Slim progress line — full width, no chrome. */
.cgkit-fsn-card .cgkit-fsn-progress {
	background:    var( --cgkit-fsn-track-bg );
	border-radius: 5px;
	height:        8px;
	margin-bottom: 10px;
	overflow:      hidden;
	position:      relative;
}
.cgkit-fsn-card .cgkit-fsn-progress-fill {
	background: var( --cgkit-fsn-accent );
	display:    block;
	height:     100%;
	transition: width 250ms ease-out, background 250ms ease-out;
	width:      0;
	border-radius: 5px;
}

@media ( prefers-reduced-motion: reduce ) {
	.cgkit-fsn-card .cgkit-fsn-progress-fill { transition: none; }
}

/* Country switcher — a low-emphasis text button, NOT a bordered pill. */
.cgkit-fsn-card .cgkit-fsn-country-wrap {
	flex: 0 0 auto;
	/* Intentionally NOT a positioning context. The popover is anchored to
	   the card instead (which is always the full cart-column width), so it
	   can never be clipped off the card's left edge when the message wraps
	   and this trigger drops to the start of a new flex line. */
	position: static;
}
.cgkit-fsn-card .cgkit-fsn-country-pill {
	align-items:     center;
	background:      none;
	border:          0;
	box-shadow:      none;
	color:           var( --cgkit-fsn-muted );
	cursor:          pointer;
	display:         inline-flex;
	font-size:       13px;
	gap:             4px;
	line-height:     1.3;
	margin:          0;
	padding:         0;
}
.cgkit-fsn-card .cgkit-fsn-country-pill:hover .cgkit-fsn-country-name,
.cgkit-fsn-card .cgkit-fsn-country-pill[aria-expanded="true"] .cgkit-fsn-country-name {
	text-decoration: underline;
}
.cgkit-fsn-card .cgkit-fsn-country-pill:focus { outline: none; }
.cgkit-fsn-card .cgkit-fsn-country-pill:focus-visible {
	outline:        2px solid var( --cgkit-fsn-focus );
	outline-offset: 2px;
	border-radius:  3px;
}
/* Flag emoji sits left of the country name on the pill. Sized to match
   the label so it doesn't shift the baseline; JS swaps the emoji in
   place when the selected country changes. */
.cgkit-fsn-card .cgkit-fsn-flag {
	font-size:   14px;
	line-height: 1;
}
.cgkit-fsn-card .cgkit-fsn-ship-prefix { color: var( --cgkit-fsn-muted ); }
.cgkit-fsn-card .cgkit-fsn-country-name {
	color:       var( --cgkit-fsn-text );
	font-weight: 600;
}
.cgkit-fsn-card .cgkit-fsn-caret {
	color:      var( --cgkit-fsn-muted );
	flex:       0 0 auto;
	transition: transform 0.15s;
}
.cgkit-fsn-card .cgkit-fsn-country-pill[aria-expanded="true"] .cgkit-fsn-caret {
	transform: rotate( 180deg );
}

/* Loading state — added by JS while the country-save AJAX is in flight.
   Disables clicks on the pill, dims it, replaces the caret with a small
   spinner so the in-progress state is visible. The JS also guards
   selectCountry() against re-entry, but pointer-events:none belts-and-
   suspenders against the popover reopening mid-save. */
.cgkit-fsn-card .cgkit-fsn-country-wrap.is-loading .cgkit-fsn-country-pill {
	cursor:         progress;
	opacity:        0.6;
	pointer-events: none;
}
.cgkit-fsn-card .cgkit-fsn-country-wrap.is-loading .cgkit-fsn-caret {
	display: none;
}
.cgkit-fsn-card .cgkit-fsn-country-wrap.is-loading .cgkit-fsn-country-pill::after {
	animation:          cgkit-fsn-spin 0.7s linear infinite;
	border:             2px solid currentColor;
	border-radius:      50%;
	border-right-color: transparent;
	content:            '';
	display:            inline-block;
	height:             12px;
	margin-left:        0px;
	vertical-align:     middle;
	width:              12px;
}
@keyframes cgkit-fsn-spin {
	to { transform: rotate( 360deg ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.cgkit-fsn-card .cgkit-fsn-country-wrap.is-loading .cgkit-fsn-country-pill::after {
		animation: none;
	}
}

/* Inline error notice (AJAX save failed). Quiet, auto-dismissed by JS. */
.cgkit-fsn-card .cgkit-fsn-error {
	color:       #b3261e;
	display:     block;
	font-size:   12px;
	line-height: 1.3;
	margin-top:  4px;
}

/* Searchable utility popover (built by fsn-country-switcher.js).
   Anchored to .cgkit-fsn-card (the nearest positioned ancestor now that
   the trigger wrap is position:static) and pinned to the card's right
   edge, so it always sits within the card's width and drops just below
   the whole card — never clipped, regardless of where the trigger wraps
   or how many lines the message takes. */
.cgkit-fsn-country-popover {
	background:     #fff;
	border:         1px solid #d8dce1;
	border-radius:  6px;
	box-shadow:     0 4px 14px rgba( 17, 24, 28, 0.10 );
	display:        flex;
	flex-direction: column;
	max-height:     320px;
	max-width:      min( 280px, 100% );
	min-width:      0;
	padding:        8px;
	position:       absolute;
	left:           auto;
	right:          0;
	top:            calc( 100% + 4px );
	width:          320px;
	z-index:        9999;
}

/* Mobile: a fixed bottom sheet rather than an absolute dropdown so it is
   not clipped inside the mini-cart drawer or cart table. */
@media ( max-width: 480px ) {
	.cgkit-fsn-country-popover {
		bottom:     12px;
		left:       12px;
		max-height: 60vh;
		max-width:  none;
		min-width:  0;
		position:   fixed;
		right:      12px;
		top:        auto;
		width:      auto;
	}
}

.cgkit-fsn-country-popover .cgkit-fsn-search-wrap {
	position: relative;
}
.cgkit-fsn-country-popover .cgkit-fsn-search-wrap::before {
	content:   "";
	height:    16px;
	left:      10px;
	position:  absolute;
	top:       8px;
	width:     16px;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236e7781' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='7' r='5'/><path d='M14 14l-3-3'/></svg>" );
	background-repeat: no-repeat;
}

.cgkit-fsn-country-popover .cgkit-fsn-search-input {
	background:    #f6f7f8;
	border:        1px solid #d8dce1;
	border-radius: 6px;
	color:         #1f2328;
	font-size:     13px;
	height:        32px;
	margin:        0 0 6px;
	padding:       0 10px 0 34px; /* clears the magnifier icon */
	width:         100%;
}
.cgkit-fsn-country-popover .cgkit-fsn-search-input:focus {
	background:   #fff;
	border-color: #9aa2ab;
	outline:      none;
}

.cgkit-fsn-country-popover .cgkit-fsn-country-list {
	flex:       1 1 auto;
	list-style: none;
	margin:     0;
	max-height: 256px;
	overflow:   auto;
	padding:    0;
}
.cgkit-fsn-country-popover .cgkit-fsn-country-row {
	align-items:   center;
	border-radius: 4px;
	cursor:        pointer;
	display:       flex;
	font-size:     13px;
	gap:           8px;
	padding:       7px 8px;
}
.cgkit-fsn-country-popover .cgkit-fsn-country-row[aria-selected="true"],
.cgkit-fsn-country-popover .cgkit-fsn-country-row:hover {
	background: #f0f2f4;
}
.cgkit-fsn-country-popover .cgkit-fsn-country-row.is-active {
	color:          var( --cgkit-fsn-accent, #1a7f37 );
	cursor:         default;
	font-weight:    600;
	pointer-events: none;
}
.cgkit-fsn-country-popover .cgkit-fsn-flag {
	font-size:   16px;
	line-height: 1;
}

.cgkit-fsn-country-popover .cgkit-fsn-empty {
	color:      #57606a;
	font-size:  12px;
	padding:    12px 8px;
	text-align: center;
}

/* Mini-cart variant — a touch tighter inside the drawer. */
.cgkit-fsn-bar-mini-cart.cgkit-fsn-card { margin: 8px 0; }
.cgkit-fsn-bar-mini-cart .cgkit-fsn-message { font-size: 13px; }