/* ============================================================
   Alirahimpoor Contact & Social Panel v1.0.0 — frontend styles
   All colors driven by CSS custom properties (enqueued inline style)
   ============================================================ */

.acsp-wrapper, .acsp-wrapper * {
	box-sizing: border-box; margin: 0; padding: 0;
	-webkit-font-smoothing: antialiased;
}

/* Hard reset for any real <button>/<a> elements inside the widget so
   theme button skins (WoodMart, Elementor, WooCommerce, etc.) that
   target generic `button`, `a`, or `.btn` selectors can't leak their
   appearance, uppercase text-transform, font-weight, or border-radius
   in here. This runs before the component-specific rules below. */
.acsp-wrapper button,
.acsp-wrapper a {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	font-family: inherit !important;
	font-weight: normal;
	text-transform: none !important;
	letter-spacing: normal !important;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
}

/* ── Wrapper ── */
.acsp-wrapper {
	position: fixed;
	bottom: var(--acsp-btn-bottom, 80px);
	z-index: 2147483640;
	font-family: inherit;
}
.acsp-wrapper.acsp-pos-right { right: var(--acsp-btn-side, 24px); left: auto; }
.acsp-wrapper.acsp-pos-left  { left:  var(--acsp-btn-side, 24px); right: auto; }

/* ── Overlay ── */
.acsp-overlay {
	position: fixed; inset: 0;
	background: rgba(0, 6, 20, 0.68);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0; visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
	z-index: 2147483638; pointer-events: none;
}
.acsp-overlay.acsp-overlay--active {
	opacity: 1; visibility: visible; pointer-events: auto;
}

/* ── FAB button ──
   Selector is intentionally doubled (button.acsp-btn-main.acsp-btn-main)
   to raise specificity above generic theme rules like WoodMart's
   `button { ... }` reset, without resorting to !important everywhere.
   Key box-model/appearance props still carry !important because some
   themes ship their button reset with !important too. */
button.acsp-btn-main.acsp-btn-main {
	all: unset; box-sizing: border-box !important;
	width: 64px !important; height: 64px !important; border-radius: 50% !important;
	min-width: 0; min-height: 0; max-width: none; max-height: none;
	background: var(--acsp-fab-bg, #001637) !important;
	background-image: none !important;
	border: 2px solid rgba(255,255,255,0.16) !important;
	cursor: pointer; position: relative;
	display: flex !important; align-items: center; justify-content: center;
	line-height: normal !important;
	box-shadow:
		0 10px 36px rgba(0,0,0,0.45),
		0 3px 10px rgba(0,0,0,0.25),
		inset 0 1px 0 rgba(255,255,255,0.10) !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition:
		background 0.3s ease,
		transform 0.3s cubic-bezier(.34,1.56,.64,1),
		box-shadow 0.3s ease,
		border-color 0.3s ease !important;
	overflow: hidden; z-index: 2147483641;
	-webkit-tap-highlight-color: transparent;
	user-select: none; -webkit-user-select: none;
}
.acsp-btn-main::before {
	content: '';
	position: absolute; inset: 0; border-radius: 50%;
	background: linear-gradient(140deg, rgba(255,255,255,0.09) 0%, transparent 55%);
	pointer-events: none;
}
button.acsp-btn-main.acsp-btn-main:hover {
	background: var(--acsp-fab-bg-hover, #002456) !important;
	transform: scale(1.09);
	border-color: rgba(255,255,255,0.30) !important;
	box-shadow:
		0 16px 52px rgba(0,0,0,0.55),
		0 5px 14px rgba(0,0,0,0.30),
		inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
button.acsp-btn-main.acsp-btn-main:active { transform: scale(0.93); }
button.acsp-btn-main.acsp-btn-main:focus-visible { outline: 3px solid rgba(255,255,255,0.6); outline-offset: 4px; }

/* Ring animations */
.acsp-btn-ring {
	position: absolute; inset: -5px; border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,0.14);
	animation: acsp-ring 2.6s ease-out infinite; pointer-events: none;
}
.acsp-btn-ring--2 { inset: -12px; animation-delay: 0.7s; border-color: rgba(255,255,255,0.06); }
@keyframes acsp-ring {
	0%   { transform: scale(1);    opacity: 1; }
	100% { transform: scale(1.45); opacity: 0; }
}

/* Icon swap */
.acsp-btn-icon-wrap {
	position: relative; width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center; z-index: 2;
}
.acsp-icon {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--acsp-fab-icon, #fff);
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.acsp-icon--phone { opacity: 1; transform: rotate(0deg) scale(1); }
.acsp-icon--close { opacity: 0; transform: rotate(-80deg) scale(0.5); }
.acsp-btn-main.acsp-btn--active .acsp-icon--phone { opacity: 0; transform: rotate(80deg) scale(0.5); }
.acsp-btn-main.acsp-btn--active .acsp-icon--close  { opacity: 1; transform: rotate(0deg) scale(1); }
.acsp-btn-main.acsp-btn--active .acsp-btn-ring { animation-play-state: paused; opacity: 0; transition: opacity 0.2s; }

/* ── Panel ── */
.acsp-panel {
	position: absolute; bottom: 80px; width: 348px;
	background: var(--acsp-panel-bg, #001637);
	border-radius: 22px;
	border: 1px solid var(--acsp-panel-border, rgba(255,255,255,0.10));
	font-family: var(--acsp-panel-font, inherit);
	box-shadow:
		0 36px 88px rgba(0,0,0,0.55),
		0 10px 28px rgba(0,0,0,0.30),
		inset 0 1px 0 rgba(255,255,255,0.06);
	opacity: 0; visibility: hidden;
	transform: translateY(14px) scale(0.94);
	transform-origin: bottom right;
	transition:
		opacity 0.32s ease,
		visibility 0.32s ease,
		transform 0.38s cubic-bezier(.34,1.56,.64,1);
	overflow: hidden; z-index: 2147483641;
}
.acsp-pos-right .acsp-panel { right: 0; left: auto; transform-origin: bottom right; }
.acsp-pos-left  .acsp-panel { left: 0;  right: auto; transform-origin: bottom left; }
.acsp-panel.acsp-panel--active {
	opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.acsp-panel::after {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
	pointer-events: none;
}

/* ── Panel header ── */
.acsp-panel__header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 17px 18px 15px;
	background: var(--acsp-header-bg, rgba(0,30,70,0.60));
	border-bottom: 1px solid var(--acsp-divider, rgba(255,255,255,0.07));
}
.acsp-panel__brand { display: flex; align-items: center; gap: 12px; }
.acsp-brand-pulse {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--acsp-pulse, #22d3a0); flex-shrink: 0; position: relative;
}
.acsp-brand-pulse::after {
	content: ''; position: absolute; inset: -4px; border-radius: 50%;
	background: color-mix(in srgb, var(--acsp-pulse, #22d3a0) 30%, transparent);
	animation: acsp-pulse 2.2s ease-out infinite;
}
@keyframes acsp-pulse {
	0%   { transform: scale(1);   opacity: 1; }
	100% { transform: scale(2.8); opacity: 0; }
}
.acsp-panel__title {
	color: var(--acsp-title, #fff);
	font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px;
}
.acsp-panel__subtitle {
	display: block; color: var(--acsp-subtitle, #22d3a0);
	font-size: 11px; font-weight: 500; margin-top: 2px;
}
button.acsp-panel__close.acsp-panel__close {
	all: unset; box-sizing: border-box !important;
	width: 34px !important; height: 34px !important; border-radius: 50% !important;
	min-width: 0; min-height: 0; max-width: none; max-height: none;
	background: var(--acsp-close-btn, rgba(255,255,255,0.06)) !important;
	background-image: none !important;
	border: 1px solid rgba(255,255,255,0.09) !important;
	color: var(--acsp-close-icon, rgba(255,255,255,0.50)) !important;
	cursor: pointer; display: flex !important; align-items: center; justify-content: center;
	line-height: normal !important;
	text-transform: none !important;
	transition: background 0.22s, color 0.22s, transform 0.28s ease !important;
	flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
button.acsp-panel__close.acsp-panel__close:hover {
	background: var(--acsp-close-hover, rgba(255,255,255,0.14)) !important;
	color: #fff !important; transform: rotate(90deg);
}
button.acsp-panel__close.acsp-panel__close:focus-visible { outline: 2px solid rgba(255,255,255,0.4); outline-offset: 2px; }

/* ── Sections ── */
.acsp-section { padding: 13px 14px 0; }
.acsp-section--social {
	padding-bottom: 14px;
	border-top: 1px solid var(--acsp-divider, rgba(255,255,255,0.07));
	margin-top: 4px;
}
.acsp-section__label {
	display: block; color: var(--acsp-section-label, rgba(255,255,255,0.38));
	font-size: 10px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 1.3px; margin-bottom: 9px;
}

/* ── Contacts ── */
.acsp-contacts { display: flex; flex-direction: column; gap: 4px; list-style: none; margin-bottom: 11px; }

.acsp-contact-card {
	display: flex; align-items: center; gap: 13px;
	padding: 11px 13px; border-radius: 14px;
	text-decoration: none !important; cursor: pointer;
	background: var(--acsp-contact-bg, rgba(255,255,255,0.04));
	border: 1px solid transparent;
	transition: background 0.22s, border-color 0.22s, transform 0.26s ease;
	outline: none; -webkit-tap-highlight-color: transparent;
}
.acsp-contact-card:hover {
	background: var(--acsp-contact-hover, rgba(255,255,255,0.09));
	border-color: rgba(255,255,255,0.10);
	transform: translateX(-3px);
}
.acsp-pos-left .acsp-contact-card:hover { transform: translateX(3px); }
.acsp-contact-card:active { transform: scale(0.97); }
.acsp-contact-card:focus-visible { border-color: rgba(255,255,255,0.35); }

.acsp-avatar {
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,0.05);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; position: relative; overflow: hidden;
	border: 1.5px solid rgba(255,255,255,0.10);
}
.acsp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.acsp-avatar__fallback {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,0.32);
}
.acsp-online-dot {
	position: absolute; bottom: 1px; right: 1px;
	width: 11px; height: 11px; border-radius: 50%;
	background: var(--acsp-online-dot, #22d3a0);
	border: 2px solid var(--acsp-panel-bg, #001637);
}
.acsp-contact__info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acsp-contact__name {
	color: var(--acsp-contact-name, #fff);
	font-size: 13px; font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.acsp-contact__phone {
	color: var(--acsp-contact-phone, rgba(255,255,255,0.50));
	font-size: 11.5px; direction: ltr; text-align: right;
	font-variant-numeric: tabular-nums; display: block;
}
.acsp-call-icon {
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--acsp-call-btn, rgba(255,255,255,0.10));
	border: 1px solid rgba(255,255,255,0.11);
	display: flex; align-items: center; justify-content: center;
	color: #fff; flex-shrink: 0;
	transition: background 0.22s, transform 0.26s ease;
}
.acsp-contact-card:hover .acsp-call-icon {
	background: var(--acsp-call-btn-hover, rgba(255,255,255,0.22));
	transform: scale(1.10);
}

/* ── Social grid — 2 rows of 3 ── */
.acsp-social-row { display: flex; gap: 8px; }
.acsp-social-sep {
	height: 1px;
	background: var(--acsp-divider, rgba(255,255,255,0.07));
	margin: 8px 0;
}

.acsp-social-card {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	gap: 7px; padding: 12px 6px 10px;
	border-radius: 14px; text-decoration: none !important; cursor: pointer;
	border: 1px solid rgba(255,255,255,0.07);
	background: rgba(255,255,255,0.035);
	transition: background 0.24s, border-color 0.24s, transform 0.28s cubic-bezier(.34,1.56,.64,1);
	outline: none; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden;
}
.acsp-social-card:hover {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.14);
	transform: translateY(-4px);
}
.acsp-social-card:active { transform: scale(0.94) translateY(0); }
.acsp-social-card:focus-visible { outline: 2px solid rgba(255,255,255,0.45); outline-offset: 2px; }

.acsp-social-card__img-wrap {
	width: 42px; height: 42px; border-radius: 12px;
	overflow: hidden; display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.09);
	flex-shrink: 0;
	transition: transform 0.26s ease;
}
.acsp-social-card:hover .acsp-social-card__img-wrap { transform: scale(1.08); }
.acsp-social-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }
.acsp-social-card__placeholder {
	display: block; width: 24px; height: 24px; border-radius: 50%;
	background: rgba(255,255,255,0.12);
}
.acsp-social-card__label {
	color: rgba(255,255,255,0.72);
	font-size: 10px; font-weight: 600; text-align: center;
	line-height: 1.35; letter-spacing: 0.1px;
	max-width: 100%; word-break: break-word;
}

/* ── Responsive ── */
@media (max-width: 480px) {
	.acsp-wrapper.acsp-pos-right { right: 16px; }
	.acsp-wrapper.acsp-pos-left  { left: 16px; }
	.acsp-panel { width: calc(100vw - 32px); max-width: 348px; }
	.acsp-btn-main { width: 58px; height: 58px; }
	.acsp-avatar { width: 40px; height: 40px; }
	.acsp-social-card__img-wrap { width: 38px; height: 38px; border-radius: 10px; }
	.acsp-social-card__label { font-size: 9.5px; }
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
	.acsp-btn-ring,
	.acsp-brand-pulse::after { animation: none !important; }
	.acsp-contact-card,
	.acsp-social-card,
	.acsp-btn-main,
	.acsp-panel,
	.acsp-overlay,
	.acsp-icon,
	.acsp-panel__close { transition: none !important; }
}