/*
 * BuildKit Pro – Frontend Styles
 * License: GPL-2.0-or-later
 */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
	--bkp-primary:      #6c63ff;
	--bkp-accent:       #ff6584;
	--bkp-dark:         #1a1a2e;
	--bkp-light:        #f8f9ff;
	--bkp-text:         #333;
	--bkp-muted:        #777;
	--bkp-border:       #e0e0e0;
	--bkp-radius:       8px;
	--bkp-radius-sm:    4px;
	--bkp-shadow:       0 4px 20px rgba(0,0,0,.08);
	--bkp-shadow-md:    0 8px 32px rgba(0,0,0,.12);
	--bkp-transition:   .25s ease;
}

/* ── Reset helpers ──────────────────────────────────────────────────────────── */
.bkp-widget *,
.bkp-widget *::before,
.bkp-widget *::after {
	box-sizing: border-box;
}

/* ── Overlay ────────────────────────────────────────────────────────────────── */
.bkp-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--bkp-transition), visibility var(--bkp-transition);
}

.bkp-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

/* ── Modal / Popup ──────────────────────────────────────────────────────────── */
.bkp-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.bkp-modal__inner {
	background: #fff;
	border-radius: var(--bkp-radius);
	box-shadow: var(--bkp-shadow-md);
	max-width: 680px;
	width: calc(100% - 32px);
	max-height: 90vh;
	overflow-y: auto;
	transform: scale(.92) translateY(20px);
	opacity: 0;
	transition: transform var(--bkp-transition), opacity var(--bkp-transition);
	pointer-events: all;
}

.bkp-modal.is-open .bkp-modal__inner {
	transform: scale(1) translateY(0);
	opacity: 1;
}

.bkp-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--bkp-muted);
	transition: color var(--bkp-transition);
}

.bkp-modal__close:hover { color: var(--bkp-dark); }

/* ── Flip Box ───────────────────────────────────────────────────────────────── */
.bkp-flip-box {
	perspective: 1000px;
	height: 260px;
}

.bkp-flip-box__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .6s cubic-bezier(.4,0,.2,1);
}

.bkp-flip-box:hover .bkp-flip-box__inner,
.bkp-flip-box:focus-within .bkp-flip-box__inner {
	transform: rotateY(180deg);
}

.bkp-flip-box--vertical:hover .bkp-flip-box__inner,
.bkp-flip-box--vertical:focus-within .bkp-flip-box__inner {
	transform: rotateX(180deg);
}

.bkp-flip-box__front,
.bkp-flip-box__back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	border-radius: var(--bkp-radius);
}

.bkp-flip-box__back {
	transform: rotateY(180deg);
	background: var(--bkp-primary);
	color: #fff;
}

.bkp-flip-box--vertical .bkp-flip-box__back {
	transform: rotateX(180deg);
}

/* ── Image Comparison ───────────────────────────────────────────────────────── */
.bkp-img-comparison {
	position: relative;
	overflow: hidden;
	user-select: none;
	cursor: ew-resize;
}

.bkp-img-comparison img {
	display: block;
	width: 100%;
	height: auto;
}

.bkp-img-comparison__overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	width: 50%;
}

.bkp-img-comparison__overlay img {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	max-width: none;
}

.bkp-img-comparison__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 12px rgba(0,0,0,.2);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	cursor: ew-resize;
}

.bkp-img-comparison__divider {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 100%;
	background: #fff;
	z-index: 1;
	pointer-events: none;
}

/* ── Countdown ──────────────────────────────────────────────────────────────── */
.bkp-countdown {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.bkp-countdown__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 70px;
}

.bkp-countdown__number {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--bkp-primary);
}

.bkp-countdown__label {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bkp-muted);
	margin-top: 4px;
}

/* ── News Ticker ────────────────────────────────────────────────────────────── */
.bkp-news-ticker {
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--bkp-border);
	border-radius: var(--bkp-radius-sm);
}

.bkp-news-ticker__label {
	background: var(--bkp-primary);
	color: #fff;
	padding: 8px 16px;
	font-weight: 600;
	font-size: .875rem;
	white-space: nowrap;
	flex-shrink: 0;
}

.bkp-news-ticker__track {
	overflow: hidden;
	flex: 1;
	padding: 0 12px;
}

.bkp-news-ticker__inner {
	display: flex;
	gap: 48px;
	white-space: nowrap;
	animation: bkpTickerScroll 20s linear infinite;
}

.bkp-news-ticker__inner:hover {
	animation-play-state: paused;
}

@keyframes bkpTickerScroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ── Pricing Table ──────────────────────────────────────────────────────────── */
.bkp-pricing-table {
	border: 1px solid var(--bkp-border);
	border-radius: var(--bkp-radius);
	overflow: hidden;
	text-align: center;
	transition: transform var(--bkp-transition), box-shadow var(--bkp-transition);
}

.bkp-pricing-table:hover {
	transform: translateY(-4px);
	box-shadow: var(--bkp-shadow-md);
}

.bkp-pricing-table.is-featured {
	border-color: var(--bkp-primary);
	border-width: 2px;
}

.bkp-pricing-table__header {
	padding: 28px 24px 20px;
	background: var(--bkp-light);
}

.bkp-pricing-table.is-featured .bkp-pricing-table__header {
	background: var(--bkp-primary);
	color: #fff;
}

.bkp-pricing-table__name {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.bkp-pricing-table__price {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
}

.bkp-pricing-table__currency {
	font-size: 1.2rem;
	vertical-align: super;
	font-weight: 600;
}

.bkp-pricing-table__period {
	font-size: .85rem;
	color: var(--bkp-muted);
	margin-top: 4px;
}

.bkp-pricing-table.is-featured .bkp-pricing-table__period { color: rgba(255,255,255,.75); }

.bkp-pricing-table__features {
	list-style: none;
	margin: 0;
	padding: 20px 24px;
}

.bkp-pricing-table__features li {
	padding: 8px 0;
	border-bottom: 1px solid var(--bkp-border);
	font-size: .9rem;
}

.bkp-pricing-table__features li:last-child { border-bottom: none; }

.bkp-pricing-table__footer {
	padding: 20px 24px 28px;
}

.bkp-pricing-table__btn {
	display: inline-block;
	padding: 12px 32px;
	background: var(--bkp-primary);
	color: #fff;
	border-radius: var(--bkp-radius-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--bkp-transition);
}

.bkp-pricing-table__btn:hover {
	background: #5a52d5;
	color: #fff;
}

/* ── Team Member ────────────────────────────────────────────────────────────── */
.bkp-team-member {
	text-align: center;
}

.bkp-team-member__img-wrap {
	position: relative;
	display: inline-block;
	overflow: hidden;
	border-radius: 50%;
}

.bkp-team-member__img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
	transition: transform var(--bkp-transition);
}

.bkp-team-member:hover .bkp-team-member__img {
	transform: scale(1.05);
}

.bkp-team-member__social {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
}

.bkp-team-member__social a {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bkp-light);
	border-radius: 50%;
	color: var(--bkp-primary);
	text-decoration: none;
	transition: background var(--bkp-transition), color var(--bkp-transition);
}

.bkp-team-member__social a:hover {
	background: var(--bkp-primary);
	color: #fff;
}

/* ── Business Hours ─────────────────────────────────────────────────────────── */
.bkp-business-hours {
	border: 1px solid var(--bkp-border);
	border-radius: var(--bkp-radius);
	overflow: hidden;
}

.bkp-business-hours__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 16px;
	font-size: .9rem;
	border-bottom: 1px solid var(--bkp-border);
}

.bkp-business-hours__row:last-child { border-bottom: none; }

.bkp-business-hours__row.is-today {
	background: var(--bkp-light);
	font-weight: 600;
	color: var(--bkp-primary);
}

.bkp-business-hours__closed { color: var(--bkp-accent); }

/* ── Number Counter ─────────────────────────────────────────────────────────── */
.bkp-number-counter {
	text-align: center;
}

.bkp-number-counter__number {
	font-size: 3rem;
	font-weight: 800;
	color: var(--bkp-primary);
	line-height: 1;
}

.bkp-number-counter__label {
	font-size: .9rem;
	color: var(--bkp-muted);
	margin-top: 6px;
}

/* ── Image Hover ────────────────────────────────────────────────────────────── */
.bkp-image-hover {
	position: relative;
	overflow: hidden;
	border-radius: var(--bkp-radius);
	display: block;
}

.bkp-image-hover img {
	width: 100%;
	display: block;
	transition: transform .4s ease;
}

.bkp-image-hover:hover img {
	transform: scale(1.07);
}

.bkp-image-hover__overlay {
	position: absolute;
	inset: 0;
	background: rgba(108,99,255,.75);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--bkp-transition);
	color: #fff;
	padding: 20px;
	text-align: center;
}

.bkp-image-hover:hover .bkp-image-hover__overlay {
	opacity: 1;
}

/* ── Animated Headline ──────────────────────────────────────────────────────── */
.bkp-animated-headline .bkp-animated-text {
	display: inline-block;
	color: var(--bkp-primary);
}

.bkp-animated-headline .bkp-animated-text.is-out {
	animation: bkpFadeOut .3s forwards;
}

.bkp-animated-headline .bkp-animated-text.is-in {
	animation: bkpFadeIn .3s forwards;
}

@keyframes bkpFadeIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bkpFadeOut { from { opacity: 1; transform: translateY(0); }   to { opacity: 0; transform: translateY(-10px); } }

/* ── Share Buttons ──────────────────────────────────────────────────────────── */
.bkp-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bkp-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--bkp-radius-sm);
	color: #fff;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: opacity var(--bkp-transition);
}

.bkp-share-btn:hover { opacity: .85; color: #fff; }

.bkp-share-btn--facebook  { background: #1877f2; }
.bkp-share-btn--twitter   { background: #1da1f2; }
.bkp-share-btn--linkedin  { background: #0a66c2; }
.bkp-share-btn--pinterest { background: #e60023; }
.bkp-share-btn--whatsapp  { background: #25d366; }
.bkp-share-btn--email     { background: #607d8b; }

/* ── Offcanvas ──────────────────────────────────────────────────────────────── */
.bkp-offcanvas {
	position: fixed;
	top: 0;
	left: -320px;
	width: 320px;
	height: 100%;
	background: #fff;
	z-index: 10000;
	box-shadow: 4px 0 20px rgba(0,0,0,.15);
	transition: left .3s ease;
	overflow-y: auto;
}

.bkp-offcanvas.is-open {
	left: 0;
}

[dir="rtl"] .bkp-offcanvas {
	left: auto;
	right: -320px;
	transition: right .3s ease;
}

[dir="rtl"] .bkp-offcanvas.is-open {
	right: 0;
}

.bkp-offcanvas__close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	position: absolute;
	top: 12px;
	right: 12px;
	color: var(--bkp-muted);
}

/* ── One-page scroll dots ───────────────────────────────────────────────────── */
.bkp-scroll-dots {
	position: fixed;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9990;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bkp-scroll-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(0,0,0,.25);
	cursor: pointer;
	transition: background var(--bkp-transition), transform var(--bkp-transition);
	border: none;
	padding: 0;
}

.bkp-scroll-dot.is-active,
.bkp-scroll-dot:hover {
	background: var(--bkp-primary);
	transform: scale(1.3);
}

/* ── Form Builder ───────────────────────────────────────────────────────────── */
.bkp-form .bkp-field-wrap {
	margin-bottom: 16px;
}

.bkp-form label {
	display: block;
	font-size: .875rem;
	font-weight: 600;
	margin-bottom: 5px;
	color: var(--bkp-text);
}

.bkp-form input[type="text"],
.bkp-form input[type="email"],
.bkp-form input[type="tel"],
.bkp-form input[type="url"],
.bkp-form input[type="number"],
.bkp-form input[type="date"],
.bkp-form textarea,
.bkp-form select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--bkp-border);
	border-radius: var(--bkp-radius-sm);
	font-size: .9rem;
	color: var(--bkp-text);
	background: #fff;
	transition: border-color var(--bkp-transition), box-shadow var(--bkp-transition);
	outline: none;
}

.bkp-form input:focus,
.bkp-form textarea:focus,
.bkp-form select:focus {
	border-color: var(--bkp-primary);
	box-shadow: 0 0 0 3px rgba(108,99,255,.15);
}

.bkp-form input.has-error,
.bkp-form textarea.has-error {
	border-color: var(--bkp-accent);
}

.bkp-form .bkp-field-error {
	color: var(--bkp-accent);
	font-size: .8rem;
	margin-top: 4px;
}

.bkp-form .bkp-submit-btn {
	padding: 12px 32px;
	background: var(--bkp-primary);
	color: #fff;
	border: none;
	border-radius: var(--bkp-radius-sm);
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--bkp-transition);
}

.bkp-form .bkp-submit-btn:hover { background: #5a52d5; }
.bkp-form .bkp-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

.bkp-form-success,
.bkp-form-error {
	padding: 12px 16px;
	border-radius: var(--bkp-radius-sm);
	font-size: .9rem;
	margin-top: 12px;
}

.bkp-form-success { background: #d4edda; color: #155724; }
.bkp-form-error   { background: #f8d7da; color: #721c24; }

/* ── Table of Contents ──────────────────────────────────────────────────────── */
.bkp-toc {
	border: 1px solid var(--bkp-border);
	border-radius: var(--bkp-radius);
	padding: 16px 20px;
	background: var(--bkp-light);
}

.bkp-toc__title {
	font-weight: 700;
	margin: 0 0 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}

.bkp-toc ol,
.bkp-toc ul {
	margin: 0;
	padding-left: 20px;
}

.bkp-toc li {
	margin: 4px 0;
	font-size: .9rem;
}

.bkp-toc a {
	color: var(--bkp-text);
	text-decoration: none;
	transition: color var(--bkp-transition);
}

.bkp-toc a:hover { color: var(--bkp-primary); }

/* ── Lottie placeholder ─────────────────────────────────────────────────────── */
.bkp-lottie {
	display: block;
	width: 100%;
}

/* ── Call to Action ─────────────────────────────────────────────────────────── */
.bkp-cta {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 32px;
	border-radius: var(--bkp-radius);
	background: var(--bkp-light);
	border: 1px solid var(--bkp-border);
}

.bkp-cta__content { flex: 1; }
.bkp-cta__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 8px; }
.bkp-cta__description { color: var(--bkp-muted); margin: 0; }

.bkp-cta__btn {
	flex-shrink: 0;
	display: inline-block;
	padding: 14px 28px;
	background: var(--bkp-primary);
	color: #fff;
	border-radius: var(--bkp-radius-sm);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--bkp-transition);
}

.bkp-cta__btn:hover { background: #5a52d5; color: #fff; }

@media (max-width: 640px) {
	.bkp-cta { flex-direction: column; text-align: center; }
}