/**
 * WA Contact Button – Frontend Styles
 *
 * Uses CSS custom properties for easy theming.
 * Supports colour presets, size, shape and inline mode.
 *
 * @package SourceCodeEs_Floating_Contact_Widget
 * @since   1.0.0
 */

/* ── Custom property defaults ──────────────────────────────────────────────── */
:root {
	--scefcw-btn-color:      #25D366;
	--scefcw-btn-color-dark: #1da851;
	--scefcw-size:           60px;
	--scefcw-icon-size:      31px;
	--scefcw-radius-circle:  50%;
	--scefcw-radius-square:  12px;
	--scefcw-shadow:         0 4px 16px rgba(0, 0, 0, .25);
	--scefcw-zindex:         9999;
	--scefcw-anim-dur:       0.3s;
	--scefcw-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Colour presets ─────────────────────────────────────────────────────────── */
.scefcw-color-green      { --scefcw-btn-color: #25D366; --scefcw-btn-color-dark: #1da851; }
.scefcw-color-dark_green { --scefcw-btn-color: #128C7E; --scefcw-btn-color-dark: #0d6b65; }
.scefcw-color-teal       { --scefcw-btn-color: #075E54; --scefcw-btn-color-dark: #054840; }
.scefcw-color-blue       { --scefcw-btn-color: #3B5998; --scefcw-btn-color-dark: #2d4472; }

/* ── Floating wrapper ───────────────────────────────────────────────────────── */
.scefcw-wrapper {
	position:   fixed;
	z-index:    var(--scefcw-zindex);
	display:    flex;
	flex-direction: column;
	align-items: flex-end;
	gap:        10px;

	/* Hidden until JS makes it visible */
	opacity:    0;
	visibility: hidden;
	transform:  translateY(12px);
	transition: opacity var(--scefcw-anim-dur) ease,
	            visibility var(--scefcw-anim-dur) ease,
	            transform var(--scefcw-anim-dur) ease;
}

.scefcw-wrapper.scefcw-pos-bottom_left,
.scefcw-wrapper.scefcw-pos-top_left {
	align-items: flex-start;
}

.scefcw-wrapper.scefcw-visible {
	opacity:    1;
	visibility: visible;
	transform:  translateY(0);
}

/* ── Main button ────────────────────────────────────────────────────────────── */
.scefcw-button {
	position:        relative;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;

	width:           var(--scefcw-size);
	height:          var(--scefcw-size);

	background-color: var(--scefcw-btn-color);
	color:            #fff;
	border:           none;
	border-radius:    var(--scefcw-radius-circle);
	box-shadow:       var(--scefcw-shadow);
	cursor:           pointer;
	text-decoration:  none;
	font-family:      var(--scefcw-font);
	font-size:        var(--scefcw-icon-size);
	line-height:      1;

	transition: background-color 0.2s ease,
	            transform 0.2s ease,
	            box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.scefcw-button:hover,
.scefcw-button:focus-visible {
	background-color: var(--scefcw-btn-color-dark);
	transform:        scale(1.07);
	box-shadow:       0 6px 20px rgba(0, 0, 0, .3);
	outline:          none;
}

.scefcw-button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.scefcw-button:active {
	transform: scale(0.96);
}

/* ── Shape variants ─────────────────────────────────────────────────────────── */
.scefcw-shape-rounded {
	border-radius: var(--scefcw-radius-circle);
}

.scefcw-shape-square {
	border-radius: var(--scefcw-radius-square);
}

/* ── Icon ───────────────────────────────────────────────────────────────────── */
.scefcw-icon {
	display:     flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size:   var(--scefcw-icon-size);
	line-height: 1;
}

.scefcw-icon svg {
	width:  1em;
	height: 1em;
	fill:   currentColor;
	display: block;
}

/* ── Label text ─────────────────────────────────────────────────────────────── */
.scefcw-label {
	font-size:   0.875rem;
	font-weight: 600;
	white-space: nowrap;
	padding-right: 4px;
}

/* Wider button when text is shown */
.scefcw-button .scefcw-label ~ .scefcw-icon,
.scefcw-button .scefcw-icon + .scefcw-label {
	display: flex;
}

/* Auto-width when label present */
.scefcw-button:has(.scefcw-label) {
	width:      auto;
	min-width:  var(--scefcw-size);
	padding:    0 1.1rem;
}

/* ── Tooltip ────────────────────────────────────────────────────────────────── */
.scefcw-tooltip {
	position:    absolute;
	right:       calc(var(--scefcw-size) + 10px);
	top:         50%;
	transform:   translateY(-50%);
	background:  rgba(0, 0, 0, .78);
	color:       #fff;
	padding:     5px 10px;
	border-radius: 6px;
	font-size:   0.78rem;
	font-family: var(--scefcw-font);
	white-space: nowrap;
	pointer-events: none;
	opacity:     0;
	visibility:  hidden;
	transition:  opacity 0.2s ease, visibility 0.2s ease;
	z-index:     1;
}

.scefcw-pos-bottom_left .scefcw-tooltip,
.scefcw-pos-top_left    .scefcw-tooltip {
	right: auto;
	left:  calc(var(--scefcw-size) + 10px);
}

.scefcw-tooltip::after {
	content:  '';
	position: absolute;
	top:      50%;
	right:    -5px;
	transform: translateY(-50%);
	border:   5px solid transparent;
	border-right-width: 0;
	border-left-color: rgba(0, 0, 0, .78);
}

.scefcw-pos-bottom_left .scefcw-tooltip::after,
.scefcw-pos-top_left    .scefcw-tooltip::after {
	right: auto;
	left:  -5px;
	border-left-width: 0;
	border-right-color: rgba(0, 0, 0, .78);
}

.scefcw-button:hover .scefcw-tooltip,
.scefcw-button:focus-visible .scefcw-tooltip {
	opacity:    1;
	visibility: visible;
}

/* ── Chat box popup ─────────────────────────────────────────────────────────── */
.scefcw-chat-box {
	width:         300px;
	border-radius: 12px;
	overflow:      hidden;
	background:    #fff;
	box-shadow:    0 8px 32px rgba(0, 0, 0, .18);
	font-family:   var(--scefcw-font);

	opacity:    0;
	transform:  translateY(12px) scale(0.97);
	transition: opacity var(--scefcw-anim-dur) ease,
	            transform var(--scefcw-anim-dur) ease;
}

.scefcw-chat-box.scefcw-chat-box-visible {
	opacity:   1;
	transform: translateY(0) scale(1);
}

.scefcw-chat-box-header {
	display:         flex;
	align-items:     center;
	gap:             10px;
	padding:         14px 16px;
	background:      var(--scefcw-btn-color);
	color:           #fff;
}

.scefcw-chat-box-avatar {
	flex-shrink: 0;
	font-size:   1.6rem;
	line-height: 1;
	display:     flex;
}

.scefcw-chat-box-avatar svg {
	width:  1em;
	height: 1em;
	fill:   currentColor;
}

.scefcw-chat-box-info {
	flex:    1;
	min-width: 0;
}

.scefcw-chat-box-title {
	display:    block;
	font-size:  0.95rem;
	font-weight: 700;
}

.scefcw-chat-box-subtitle {
	display:   block;
	font-size: 0.77rem;
	opacity:   0.85;
	margin-top: 2px;
}

.scefcw-chat-box-close {
	flex-shrink:      0;
	background:       transparent;
	border:           none;
	color:            rgba(255, 255, 255, .8);
	font-size:        1.4rem;
	line-height:      1;
	cursor:           pointer;
	padding:          0 4px;
	transition:       color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.scefcw-chat-box-close:hover {
	color: #fff;
}

.scefcw-chat-box-body {
	padding: 16px;
	background: #e5ddd5;
}

.scefcw-chat-bubble {
	background:    #fff;
	border-radius: 0 8px 8px 8px;
	padding:       10px 14px;
	font-size:     0.88rem;
	line-height:   1.45;
	color:         #111;
	box-shadow:    0 1px 2px rgba(0, 0, 0, .1);
	max-width:     85%;
	word-break:    break-word;
}

.scefcw-chat-box-footer {
	padding:    12px 16px;
	background: #f8f8f8;
	border-top: 1px solid #ebebeb;
}

.scefcw-chat-start-btn {
	display:          block;
	text-align:       center;
	background:       var(--scefcw-btn-color);
	color:            #fff;
	padding:          10px 16px;
	border-radius:    8px;
	text-decoration:  none;
	font-size:        0.88rem;
	font-weight:      600;
	transition:       background-color 0.2s ease;
}

.scefcw-chat-start-btn:hover,
.scefcw-chat-start-btn:focus-visible {
	background-color: var(--scefcw-btn-color-dark);
	color:            #fff;
	outline:          none;
}

/* ── Inline button (shortcode / block) ──────────────────────────────────────── */
.scefcw-button-inline {
	position:    relative;
	display:     inline-flex;
	width:       auto;
	min-width:   0;
	height:      auto;
	padding:     0.55em 1.1em;
	border-radius: 6px;
	font-size:   1rem;
	box-shadow:  var(--scefcw-shadow);
}

.scefcw-button-inline.scefcw-shape-rounded {
	border-radius: 100px;
}

.scefcw-button-inline .scefcw-icon {
	font-size: 1.15em;
}

.scefcw-button-inline .scefcw-icon + .scefcw-label {
	display: flex;
	margin-left: 6px;
}

/* ── Pulse animation (optional – add class scefcw-pulse to wrapper) ──────────── */
@keyframes scefcw-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
	70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.scefcw-pulse .scefcw-button {
	animation: scefcw-pulse 2.2s infinite;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.scefcw-chat-box {
		width: calc(100vw - 32px);
		max-width: 300px;
	}

	/* Slightly smaller default on very small screens */
	:root {
		--scefcw-size:      54px;
		--scefcw-icon-size: 28px;
	}
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.scefcw-wrapper,
	.scefcw-button,
	.scefcw-chat-box,
	.scefcw-chat-start-btn,
	.scefcw-tooltip {
		transition: none;
		animation:  none;
	}
}

/* ── High contrast ──────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
	.scefcw-button {
		forced-color-adjust: none;
		border: 2px solid ButtonText;
	}
}