.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; } .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; } .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; } .cgkit-fsn-bar-shortcode.cgkit-fsn-layout-2 { align-items: center; display: flex; flex-wrap: nowrap; gap: 0; justify-content: center; --cgkit-fsn-layout-2-bar-width: 150px; --cgkit-fsn-layout-2-message-width: 350px; } .cgkit-fsn-bar-shortcode.cgkit-fsn-layout-2 .cgkit-fsn-progress { flex: 0 0 var( --cgkit-fsn-layout-2-bar-width ); margin: 0; max-width: var( --cgkit-fsn-layout-2-bar-width ); min-width: 0; order: 2; width: var( --cgkit-fsn-layout-2-bar-width ); } .cgkit-fsn-bar-shortcode.cgkit-fsn-layout-2 .cgkit-fsn-card-row { flex: 0 0 var( --cgkit-fsn-layout-2-message-width ); max-width: var( --cgkit-fsn-layout-2-message-width ); min-width: 0; order: 1; padding: 0 15px; text-align: right; width: var( --cgkit-fsn-layout-2-message-width ); } .cgkit-fsn-bar-shortcode.cgkit-fsn-layout-2 .cgkit-fsn-message-wrap { min-width: 0; width: auto; } .cgkit-fsn-bar-shortcode.cgkit-fsn-layout-2 .cgkit-fsn-message { white-space: nowrap; } @media ( max-width: 640px ) { .cgkit-fsn-bar-shortcode.cgkit-fsn-layout-2 { display: block; } .cgkit-fsn-bar-shortcode.cgkit-fsn-layout-2 .cgkit-fsn-progress { margin-bottom: 10px; max-width: none; min-width: 0; width: 100%; } .cgkit-fsn-bar-shortcode.cgkit-fsn-layout-2 .cgkit-fsn-card-row, .cgkit-fsn-bar-shortcode.cgkit-fsn-layout-2 .cgkit-fsn-message-wrap { max-width: none; text-align: center; width: 100%; } .cgkit-fsn-bar-shortcode.cgkit-fsn-layout-2 .cgkit-fsn-message { white-space: normal; } } @media ( prefers-reduced-motion: reduce ) { .cgkit-fsn-card .cgkit-fsn-progress-fill { transition: none; } } .cgkit-fsn-card .cgkit-fsn-country-wrap { flex: 0 0 auto; 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; } .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 ); } .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; } } .cgkit-fsn-card .cgkit-fsn-error { color: #b3261e; display: block; font-size: 12px; line-height: 1.3; margin-top: 4px; } .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; } @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; 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; } .cgkit-fsn-bar-mini-cart.cgkit-fsn-card { margin: 8px 0; } .cgkit-fsn-bar-mini-cart .cgkit-fsn-message { font-size: 13px; }