/**
 * Savvy Signature Country Selector — v5.0.0
 *
 * Identical on savvysignature.co, savvysignature.com.au and
 * savvysignatureindia.com. Every rule carries !important so no theme
 * (Astra, Divi, Elementor, Bricks, a custom child theme) can override it.
 *
 * v5 changes:
 *  • Popup grid handles 3 regions (Global / Australia / India) and stacks
 *    cleanly on small screens.
 *  • "You're here" tag on the region matching the current domain.
 *  • Visible focus rings throughout, scroll lock, reduced-motion support.
 *  • Trigger button is still a fixed 40x40 circle showing only the flag.
 */

/* ═══════════════════════════════════════════════════════
   SCROLL LOCK WHILE POPUP IS OPEN
   ═══════════════════════════════════════════════════════ */

body.savvy-cs-locked {
	overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════
   FIRST-VISIT POPUP OVERLAY
   ═══════════════════════════════════════════════════════ */

#savvy-cs-overlay {
	display:                 none !important;
	position:                fixed !important;
	top:                     0 !important;
	right:                   0 !important;
	bottom:                  0 !important;
	left:                    0 !important;
	background:              rgba(10, 20, 35, 0.82) !important;
	backdrop-filter:         blur(6px) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	z-index:                 2147483647 !important;
	justify-content:         center !important;
	align-items:             center !important;
	padding:                 20px !important;
	box-sizing:              border-box !important;
	overflow-y:              auto !important;
	margin:                  0 !important;
	border:                  none !important;
	border-radius:           0 !important;
	float:                   none !important;
	clear:                   both !important;
	max-width:               none !important;
}

/* The JS adds .savvy-open to reveal the popup. A class is used rather than
   an inline style because an inline display value cannot beat the
   `display: none !important` above, which is what kept the v4 popup hidden. */
#savvy-cs-overlay.savvy-open {
	display: flex !important;
}

/* ═══════════════════════════════════════════════════════
   POPUP CARD
   ═══════════════════════════════════════════════════════ */

.savvy-cs-popup {
	background:    #ffffff !important;
	border-radius: 24px !important;
	padding:       48px 44px 44px !important;
	max-width:     560px !important;
	width:         100% !important;
	text-align:    center !important;
	box-shadow:    0 32px 64px rgba(0,0,0,0.28), 0 8px 16px rgba(0,0,0,0.12) !important;
	animation:     savvyPopupIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	position:      relative !important;
	margin:        auto !important;
	float:         none !important;
	border:        none !important;
	box-sizing:    border-box !important;
}

@keyframes savvyPopupIn {
	from { opacity: 0; transform: scale(0.88) translateY(20px); }
	to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.savvy-cs-globe-icon {
	width:           72px !important;
	height:          72px !important;
	margin:          0 auto 20px !important;
	background:      linear-gradient(135deg, #56B3C2 0%, #2E4E73 100%) !important;
	border-radius:   50% !important;
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	box-shadow:      0 8px 24px rgba(62, 108, 132, 0.35) !important;
	border:          none !important;
	padding:         0 !important;
	flex-shrink:     0 !important;
}

.savvy-cs-globe-icon svg {
	width:  36px !important;
	height: 36px !important;
	color:  #fff !important;
	fill:   none !important;
}

.savvy-cs-popup h2 {
	font-size:      22px !important;
	font-weight:    700 !important;
	color:          #0f1f30 !important;
	margin:         0 0 8px !important;
	line-height:    1.3 !important;
	letter-spacing: -0.3px !important;
	padding:        0 !important;
	text-transform: none !important;
	border:         none !important;
	background:     none !important;
}

.savvy-cs-popup p {
	font-size:   14px !important;
	color:       #6b7280 !important;
	margin:      0 0 32px !important;
	line-height: 1.6 !important;
	padding:     0 !important;
	background:  none !important;
	border:      none !important;
}

/* ═══════════════════════════════════════════════════════
   REGION BUTTONS — 3 up on desktop, stacked on mobile
   ═══════════════════════════════════════════════════════ */

.savvy-cs-buttons {
	display:               grid !important;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
	gap:                   12px !important;
	margin:                0 !important;
	padding:               0 !important;
	list-style:            none !important;
}

.savvy-cs-buttons--2 { grid-template-columns: repeat(2, 1fr) !important; }
.savvy-cs-buttons--3 { grid-template-columns: repeat(3, 1fr) !important; }

.savvy-cs-btn {
	display:          flex !important;
	flex-direction:   column !important;
	align-items:      center !important;
	justify-content:  flex-start !important;
	gap:              10px !important;
	padding:          20px 12px !important;
	border:           1.5px solid #e8edf2 !important;
	border-radius:    16px !important;
	background:       #f8fafc !important;
	cursor:           pointer !important;
	outline:          none !important;
	width:            100% !important;
	box-sizing:       border-box !important;
	-webkit-tap-highlight-color: transparent !important;
	touch-action:     manipulation !important;
	position:         relative !important;
	overflow:         hidden !important;
	text-decoration:  none !important;
	text-align:       center !important;
	transition:       border-color 0.22s ease, background 0.22s ease,
					  transform 0.22s ease, box-shadow 0.22s ease !important;
	float:            none !important;
	margin:           0 !important;
	line-height:      1 !important;
	font-family:      inherit !important;
	min-height:       0 !important;
}

.savvy-cs-btn:hover {
	border-color: #56B3C2 !important;
	background:   #fff !important;
	transform:    translateY(-3px) !important;
	box-shadow:   0 12px 28px rgba(86,179,194,0.22) !important;
}

.savvy-cs-btn:focus-visible {
	border-color: #2E4E73 !important;
	background:   #fff !important;
	box-shadow:   0 0 0 3px rgba(86,179,194,0.45) !important;
}

.savvy-cs-btn:active {
	transform:  translateY(0) !important;
	box-shadow: 0 4px 12px rgba(86,179,194,0.15) !important;
}

/* The region matching the domain the visitor is already on */
.savvy-cs-btn--suggested {
	border-color: rgba(86,179,194,0.55) !important;
	background:   #f4fbfc !important;
}

/* ═══════════════════════════════════════════════════════
   FLAGS — inline SVG, identical on every device
   Emoji flags are not used anywhere: Windows renders the AU
   and IN flag emoji as the letters "AU" and "IN".
   ═══════════════════════════════════════════════════════ */

.savvy-flag-svg {
	display:         block !important;
	width:           100% !important;
	height:          100% !important;
	border-radius:   50% !important;
	overflow:        hidden !important;
	margin:          0 !important;
	padding:         0 !important;
	border:          none !important;
	background:      none !important;
	box-shadow:      inset 0 0 0 1px rgba(15,31,48,0.10) !important;
	flex-shrink:     0 !important;
	max-width:       none !important;
	vertical-align:  middle !important;
}

.savvy-cs-flag {
	width:           46px !important;
	height:          46px !important;
	min-width:       46px !important;
	line-height:     1 !important;
	position:        relative !important;
	z-index:         1 !important;
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	margin:          0 !important;
	padding:         0 !important;
	background:      none !important;
	border:          none !important;
	flex-shrink:     0 !important;
}

.savvy-cs-country-name {
	font-size:       13px !important;
	font-weight:     600 !important;
	color:           #1f2937 !important;
	letter-spacing:  0.2px !important;
	position:        relative !important;
	z-index:         1 !important;
	display:         block !important;
	margin:          0 !important;
	padding:         0 !important;
	background:      none !important;
	border:          none !important;
	text-transform:  none !important;
	text-decoration: none !important;
	line-height:     1.2 !important;
}

.savvy-cs-suggested-tag {
	display:        inline-block !important;
	font-size:      10px !important;
	font-weight:    700 !important;
	letter-spacing: 0.4px !important;
	text-transform: uppercase !important;
	color:          #2E4E73 !important;
	background:     rgba(86,179,194,0.18) !important;
	border-radius:  999px !important;
	padding:        3px 8px !important;
	margin:         0 !important;
	line-height:    1.2 !important;
	border:         none !important;
	white-space:    nowrap !important;
}

/* Tablet / small laptop: 3 across gets tight, drop to 2 then 1 */
@media (max-width: 620px) {
	.savvy-cs-popup       { padding: 36px 24px 30px !important; }
	.savvy-cs-buttons,
	.savvy-cs-buttons--3  { grid-template-columns: 1fr !important; }
	.savvy-cs-btn {
		flex-direction: row !important;
		justify-content: flex-start !important;
		padding:        14px 18px !important;
		gap:            14px !important;
		text-align:     left !important;
	}
	.savvy-cs-btn:hover   { transform: none !important; }
	.savvy-cs-flag        { width: 34px !important; height: 34px !important; min-width: 34px !important; }
	.savvy-cs-country-name { font-size: 15px !important; }
	.savvy-cs-suggested-tag { margin-left: auto !important; }
	.savvy-cs-popup h2    { font-size: 20px !important; }
	.savvy-cs-popup p     { margin-bottom: 24px !important; }
}

@media (max-width: 400px) {
	.savvy-cs-popup      { padding: 30px 18px 26px !important; border-radius: 20px !important; }
	.savvy-cs-globe-icon { width: 60px !important; height: 60px !important; margin-bottom: 16px !important; }
	.savvy-cs-globe-icon svg { width: 30px !important; height: 30px !important; }
	.savvy-cs-suggested-tag  { display: none !important; }
}

@media (max-height: 560px) {
	#savvy-cs-overlay    { align-items: flex-start !important; padding: 12px !important; }
	.savvy-cs-popup      { padding: 24px 20px 22px !important; }
	.savvy-cs-globe-icon { width: 52px !important; height: 52px !important; margin-bottom: 12px !important; }
	.savvy-cs-popup p    { margin-bottom: 18px !important; }
}

/* ═══════════════════════════════════════════════════════
   GLOBE TRIGGER BUTTON
   Fixed 40x40 circle — flag only, name is screen-reader only.
   ═══════════════════════════════════════════════════════ */

.savvy-cs-switcher {
	display:    inline-flex !important;
	position:   relative !important;
	margin:     0 !important;
	padding:    0 !important;
	border:     none !important;
	background: none !important;
	float:      none !important;
	vertical-align: middle !important;
}

#savvy-cs-switcher-btn {
	display:                     inline-flex !important;
	align-items:                 center !important;
	justify-content:             center !important;
	width:                       40px !important;
	height:                      40px !important;
	min-width:                   40px !important;
	min-height:                  40px !important;
	max-width:                   40px !important;
	padding:                     0 !important;
	gap:                         0 !important;

	background:                  rgba(46,78,115,0.07) !important;
	border:                      1.5px solid rgba(46,78,115,0.18) !important;
	border-radius:               50% !important;
	cursor:                      pointer !important;
	color:                       #1f2937 !important;
	outline:                     none !important;
	white-space:                 nowrap !important;
	-webkit-tap-highlight-color: transparent !important;
	touch-action:                manipulation !important;
	user-select:                 none !important;
	-webkit-user-select:         none !important;
	box-shadow:                  none !important;
	text-decoration:             none !important;
	transition:                  background 0.2s ease, border-color 0.2s ease,
								 transform 0.15s ease, box-shadow 0.2s ease !important;
	margin:                      0 !important;
	float:                       none !important;
	position:                    relative !important;
	z-index:                     2 !important;
	-webkit-appearance:          none !important;
	appearance:                  none !important;
	font-family:                 inherit !important;
}

#savvy-cs-switcher-btn:hover {
	background:   rgba(46,78,115,0.12) !important;
	border-color: rgba(46,78,115,0.32) !important;
	box-shadow:   0 2px 10px rgba(46,78,115,0.1) !important;
}

#savvy-cs-switcher-btn:focus-visible {
	box-shadow:   0 0 0 3px rgba(86,179,194,0.5) !important;
	border-color: #2E4E73 !important;
}

#savvy-cs-switcher-btn:active {
	transform: scale(0.93) !important;
}

/* Mobile menu open state (white on dark header) */
.mobile-header.open #savvy-cs-switcher-btn,
.savvy-cs-on-dark #savvy-cs-switcher-btn {
	background:   rgba(255,255,255,0.15) !important;
	border-color: rgba(255,255,255,0.38) !important;
	color:        #fff !important;
}

.mobile-header.open #savvy-cs-switcher-btn:hover,
.savvy-cs-on-dark #savvy-cs-switcher-btn:hover {
	background:   rgba(255,255,255,0.24) !important;
	border-color: rgba(255,255,255,0.6) !important;
}

/* The flag fills the 40px circle edge to edge on every device and viewport */
.savvy-cs-switcher__flag {
	width:           26px !important;
	height:          26px !important;
	min-width:       26px !important;
	line-height:     1 !important;
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	margin:          0 !important;
	padding:         0 !important;
	background:      none !important;
	border:          none !important;
	flex-shrink:     0 !important;
}

/* Region name — visually hidden everywhere, still announced by screen readers */
.savvy-cs-switcher__text {
	position:    absolute !important;
	width:       1px !important;
	height:      1px !important;
	padding:     0 !important;
	margin:      -1px !important;
	overflow:    hidden !important;
	clip:        rect(0, 0, 0, 0) !important;
	clip-path:   inset(50%) !important;
	white-space: nowrap !important;
	border:      0 !important;
}

.savvy-cs-switcher__caret {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════
   PORTAL DROPDOWN — appended to <body> by JS
   ═══════════════════════════════════════════════════════ */

/**
 * Position comes from two custom properties that the JS sets on the element.
 *
 * It must NOT be a plain inline `style.top` / `style.left`: these rules carry
 * !important so no theme can move the dropdown, and an inline value loses to
 * an !important declaration. That is what pinned the dropdown to the top-left
 * corner instead of anchoring it under the globe button. A custom property is
 * resolved before the cascade, so the JS wins and the theme still cannot.
 */
#savvy-cs-dropdown-portal {
	position:        fixed !important;
	top:             var(--savvy-cs-top, -9999px) !important;
	left:            var(--savvy-cs-left, -9999px) !important;
	right:           auto !important;
	bottom:          auto !important;
	z-index:         2147483646 !important;
	min-width:       200px !important;
	max-width:       calc(100vw - 16px) !important;
	background:      #ffffff !important;
	border-radius:   16px !important;
	border:          1px solid rgba(0,0,0,0.09) !important;
	box-shadow:      0 16px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.06) !important;
	padding:         6px !important;
	overflow:        hidden !important;
	margin:          0 !important;
	float:           none !important;
	list-style:      none !important;

	opacity:         0 !important;
	visibility:      hidden !important;
	transform:       translateY(-8px) scale(0.97) !important;
	pointer-events:  none !important;
	transition:      opacity 0.2s ease, visibility 0.2s ease,
					 transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
}

#savvy-cs-dropdown-portal.savvy-open {
	opacity:        1 !important;
	visibility:     visible !important;
	transform:      translateY(0) scale(1) !important;
	pointer-events: auto !important;
}

#savvy-cs-dropdown-portal ul,
#savvy-cs-dropdown-portal li {
	list-style: none !important;
	margin:     0 !important;
	padding:    0 !important;
	border:     none !important;
	background: none !important;
}

#savvy-cs-dropdown-portal li + li {
	border-top: 1px solid #f3f4f6 !important;
}

.savvy-cs-dropdown-option {
	display:                     flex !important;
	align-items:                 center !important;
	gap:                         12px !important;
	width:                       100% !important;
	padding:                     11px 14px !important;
	background:                  transparent !important;
	border:                      none !important;
	border-radius:               10px !important;
	cursor:                      pointer !important;
	text-align:                  left !important;
	box-sizing:                  border-box !important;
	margin:                      0 !important;
	outline:                     none !important;
	-webkit-tap-highlight-color: transparent !important;
	touch-action:                manipulation !important;
	user-select:                 none !important;
	-webkit-user-select:         none !important;
	-webkit-appearance:          none !important;
	appearance:                  none !important;
	transition:                  background 0.15s ease !important;
	text-decoration:             none !important;
	float:                       none !important;
	line-height:                 1 !important;
	box-shadow:                  none !important;
	font-family:                 inherit !important;
}

.savvy-cs-dropdown-option:hover {
	background: #f0f9fb !important;
}

.savvy-cs-dropdown-option:focus-visible {
	background:  #f0f9fb !important;
	box-shadow:  inset 0 0 0 2px rgba(86,179,194,0.6) !important;
}

.savvy-cs-dropdown-option:active {
	background: #e0f2f6 !important;
}

.savvy-dropdown-flag {
	width:           26px !important;
	height:          26px !important;
	min-width:       26px !important;
	line-height:     1 !important;
	flex-shrink:     0 !important;
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	margin:          0 !important;
	padding:         0 !important;
	background:      none !important;
	border:          none !important;
}

.savvy-dropdown-name {
	display:         block !important;
	font-size:       15px !important;
	font-weight:     600 !important;
	color:           #111827 !important;
	line-height:     1.2 !important;
	margin:          0 !important;
	padding:         0 !important;
	background:      none !important;
	border:          none !important;
	text-transform:  none !important;
	text-decoration: none !important;
	letter-spacing:  0.1px !important;
}

.savvy-dropdown-sub {
	display: none !important;
}

.savvy-cs-dropdown-option.savvy-active {
	background: #f0fafb !important;
}

.savvy-cs-dropdown-option.savvy-active .savvy-dropdown-name {
	color: #2E4E73 !important;
}

.savvy-check {
	width:           20px !important;
	height:          20px !important;
	min-width:       20px !important;
	background:      linear-gradient(135deg, #56B3C2, #2E4E73) !important;
	border-radius:   50% !important;
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	flex-shrink:     0 !important;
	margin-left:     auto !important;
	border:          none !important;
	padding:         0 !important;
	opacity:         0 !important;
	transform:       scale(0.5) !important;
	transition:      opacity 0.18s ease, transform 0.18s ease !important;
	box-shadow:      none !important;
}

.savvy-cs-dropdown-option.savvy-active .savvy-check {
	opacity:   1 !important;
	transform: scale(1) !important;
}

.savvy-check svg {
	width:   10px !important;
	height:  10px !important;
	display: block !important;
	fill:    none !important;
	stroke:  #ffffff !important;
	margin:  0 !important;
	padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.savvy-cs-popup,
	.savvy-cs-btn,
	#savvy-cs-switcher-btn,
	#savvy-cs-dropdown-portal,
	.savvy-cs-dropdown-option,
	.savvy-check {
		animation:  none !important;
		transition: none !important;
	}
	.savvy-cs-btn:hover { transform: none !important; }
}