/* ==========================================================================
   Pixels Logic Forms — front-end popup + trigger buttons
   Self-contained styling (scoped variables) so it looks identical on any theme.
   Critical properties use !important so page builders / themes (Elementor,
   Astra, etc.) cannot override the popup buttons and fields.
   ========================================================================== */

.plf-overlay,
.plf-overlay *{
	box-sizing:border-box;
}

.plf-overlay{
	--plf-navy-950:#060D1F;
	--plf-navy-900:#081226;
	--plf-navy-800:#0C1B36;
	--plf-navy-600:#1B3A66;
	--plf-cyan:#4CC9F0;
	--plf-blue:#2E7CF6;
	--plf-green:#25D366;
	--plf-text:#EAF1FB;
	--plf-muted:#8FA3C2;
	--plf-line:rgba(143,163,194,.16);
	--plf-head:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
	--plf-body:'Inter','Segoe UI',system-ui,sans-serif;

	position:fixed;
	inset:0;
	z-index:99999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	background:rgba(4,9,20,.72);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	opacity:0;
	pointer-events:none;
	transition:opacity .35s ease;
}
.plf-overlay.plf-open{
	opacity:1;
	pointer-events:auto;
}

/* ---- Neutralise theme / page-builder interference on our controls ---- */
.plf-overlay button,
.plf-overlay input,
.plf-overlay select,
.plf-overlay textarea{
	font-family:var(--plf-body) !important;
	letter-spacing:normal !important;
	text-transform:none !important;
	box-shadow:none !important;
	outline:none !important;
	margin:0 !important;
	min-height:0 !important;
	max-width:none !important;
	line-height:1.4 !important;
	text-align:left;
	text-shadow:none !important;
	float:none !important;
}

/* ---- Modal card ---- */
.plf-modal{
	position:relative;
	width:100%;
	max-width:480px;
	max-height:90vh;
	overflow-y:auto;
	background:linear-gradient(165deg,var(--plf-navy-800),var(--plf-navy-950));
	border:1px solid var(--plf-line);
	border-radius:22px;
	padding:38px 36px 30px;
	box-shadow:0 40px 90px rgba(0,0,0,.6);
	color:var(--plf-text);
	font-family:var(--plf-body);
	line-height:1.6;
	transform:translateY(26px) scale(.96);
	transition:transform .4s cubic-bezier(.16,.8,.3,1);
}
.plf-overlay.plf-open .plf-modal{
	transform:none;
}
.plf-modal::before{
	content:"";
	position:absolute;
	top:0;left:0;right:0;
	height:3px;
	border-radius:22px 22px 0 0;
	background:linear-gradient(90deg,var(--plf-cyan),var(--plf-blue));
}

/* ---- Close button ---- */
button#plf-close{
	position:absolute;
	top:16px;right:16px;
	width:36px !important;
	height:36px !important;
	padding:0 !important;
	border-radius:50% !important;
	border:1px solid var(--plf-line) !important;
	background:rgba(255,255,255,.04) !important;
	color:#B9C6DD !important;
	cursor:pointer;
	display:grid !important;
	place-items:center;
	transition:background .25s,color .25s,transform .25s;
}
.plf-close svg{width:16px;height:16px;display:block;}
.plf-close:hover{
	background:rgba(255,92,57,.16) !important;
	color:#fff !important;
	transform:rotate(90deg);
}

/* ---- Header ---- */
.plf-tag{
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important;
	font-size:.66rem;
	letter-spacing:.14em !important;
	text-transform:uppercase !important;
	color:var(--plf-cyan);
	display:block;
	margin:0;
}
.plf-tag:empty{display:none;}
.plf-heading{
	font-family:var(--plf-head) !important;
	font-weight:800;
	font-size:1.5rem;
	color:#fff;
	margin:10px 0 8px;
	line-height:1.25;
	padding:0;
}
.plf-sub{
	color:var(--plf-muted);
	font-size:.92rem;
	margin:0 0 24px;
	line-height:1.55;
}
.plf-sub:empty{display:none;margin:0;}

/* ---- Fields ---- */
.plf-fields{
	display:flex;
	flex-direction:column;
	gap:16px;
	margin-bottom:8px;
}
.plf-mf{
	display:flex;
	flex-direction:column;
	gap:7px;
}
.plf-mf > label{
	font-size:.8rem !important;
	font-weight:600 !important;
	color:#D6DEEC !important;
	margin:0 !important;
	padding:0 !important;
	line-height:1.3 !important;
	display:block;
}
.plf-mf > label .plf-req{color:#FF5C39 !important;}

.plf-mf input,
.plf-mf select,
.plf-mf textarea{
	-webkit-appearance:none;
	appearance:none;
	font-size:.92rem !important;
	color:#fff !important;
	background:rgba(255,255,255,.045) !important;
	border:1px solid var(--plf-line) !important;
	border-radius:11px !important;
	padding:13px 15px !important;
	width:100% !important;
	height:auto !important;
	transition:border-color .2s,background .2s,box-shadow .2s;
}
.plf-mf textarea{resize:vertical;min-height:88px !important;}
.plf-mf input::placeholder,
.plf-mf textarea::placeholder{color:#7286A5 !important;opacity:1;}
.plf-mf input:hover,
.plf-mf select:hover,
.plf-mf textarea:hover{
	border-color:rgba(76,201,240,.4) !important;
}
.plf-mf input:focus,
.plf-mf select:focus,
.plf-mf textarea:focus{
	border-color:var(--plf-cyan) !important;
	background:rgba(76,201,240,.07) !important;
	box-shadow:0 0 0 3px rgba(76,201,240,.15) !important;
}
.plf-mf select{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238FA3C2' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat:no-repeat !important;
	background-position:right 14px center !important;
	padding-right:40px !important;
	cursor:pointer;
}
.plf-mf select option{background:var(--plf-navy-900);color:#fff;}
.plf-mf.plf-invalid input,
.plf-mf.plf-invalid select,
.plf-mf.plf-invalid textarea{
	border-color:#FF5C39 !important;
	background:rgba(255,92,57,.06) !important;
}

/* chips */
.plf-chips{display:flex;flex-wrap:wrap;gap:8px;}
.plf-chip{
	font-size:.82rem !important;
	font-weight:600 !important;
	color:#C4D0E4 !important;
	background:rgba(255,255,255,.045) !important;
	border:1px solid var(--plf-line) !important;
	border-radius:50px !important;
	padding:9px 16px !important;
	cursor:pointer;
	transition:.2s;
	user-select:none;
	line-height:1 !important;
}
.plf-chip:hover{
	border-color:rgba(76,201,240,.45) !important;
	color:#fff !important;
}
.plf-chip.plf-on{
	background:linear-gradient(90deg,var(--plf-cyan),var(--plf-blue)) !important;
	color:var(--plf-navy-950) !important;
	border-color:transparent !important;
}

/* ---- Action buttons (WhatsApp + Email) ---- */
.plf-actions{
	display:flex;
	flex-direction:column;
	gap:11px;
	margin-top:22px;
}
.plf-btn{
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	gap:9px;
	width:100%;
	font-family:var(--plf-head) !important;
	font-weight:700 !important;
	font-size:.95rem !important;
	padding:15px 26px !important;
	border-radius:50px !important;
	text-decoration:none !important;
	border:1.5px solid transparent !important;
	cursor:pointer;
	transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s;
	line-height:1 !important;
	-webkit-appearance:none;
	appearance:none;
}
.plf-btn svg{flex:none;display:block;}
.plf-btn .plf-btn-label{display:inline-block;}
.plf-btn:disabled{opacity:.6 !important;cursor:default;transform:none !important;}

/* WhatsApp — solid green brand button */
.plf-btn-primary{
	background:linear-gradient(135deg,#2BD86E,#12B45A) !important;
	color:#04220F !important;
	border-color:transparent !important;
}
.plf-btn-primary svg{fill:#04220F;}
.plf-btn-primary:hover:not(:disabled){
	transform:translateY(-2px);
	box-shadow:0 14px 34px rgba(37,211,102,.45) !important;
	color:#04220F !important;
}

/* Email — filled dark button with cyan accent on hover */
.plf-btn-email{
	background:rgba(76,201,240,.10) !important;
	border-color:rgba(76,201,240,.35) !important;
	color:#EAF1FB !important;
}
.plf-btn-email svg{stroke:currentColor;}
.plf-btn-email:hover:not(:disabled){
	transform:translateY(-2px);
	background:rgba(76,201,240,.18) !important;
	border-color:var(--plf-cyan) !important;
	color:#fff !important;
	box-shadow:0 12px 30px rgba(46,124,246,.28) !important;
}

/* ---- Note + honeypot ---- */
.plf-note{
	font-size:.74rem;
	color:#7E8DAA;
	text-align:center;
	margin:16px 0 0;
	line-height:1.5;
}
.plf-note:empty{display:none;}
.plf-note b{color:#B9C6DD;}
.plf-hp{
	position:absolute !important;
	left:-9999px !important;
	width:1px !important;
	height:1px !important;
	opacity:0 !important;
	padding:0 !important;
	border:0 !important;
}

/* ---- Success state ---- */
.plf-success{
	text-align:center;
	padding:14px 0 6px;
}
.plf-success-ico{
	width:64px;height:64px;
	margin:0 auto 18px;
	border-radius:50%;
	display:grid;place-items:center;
	color:#fff;
	background:linear-gradient(135deg,var(--plf-cyan),var(--plf-blue));
	box-shadow:0 0 30px rgba(76,201,240,.45);
}
.plf-success-ico svg{width:30px;height:30px;}
.plf-success-title{
	font-family:var(--plf-head) !important;
	font-weight:800;
	font-size:1.35rem;
	color:#fff;
	margin:0 0 8px;
}
.plf-success-msg{
	color:var(--plf-muted);
	font-size:.95rem;
	margin:0;
}

/* ==========================================================================
   Trigger buttons rendered by the shortcode (on the page, not the popup)
   ========================================================================== */
.plf-trigger{
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	gap:10px;
	font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif !important;
	font-weight:700 !important;
	font-size:.95rem !important;
	padding:15px 30px !important;
	border-radius:50px !important;
	text-decoration:none !important;
	border:1.5px solid transparent !important;
	cursor:pointer;
	line-height:1 !important;
	box-shadow:none;
	transition:transform .3s,box-shadow .3s,background .3s,color .3s,border-color .3s;
}
.plf-trigger.plf-btn-primary{
	background:linear-gradient(135deg,#4CC9F0,#2E7CF6) !important;
	color:#060D1F !important;
}
.plf-trigger.plf-btn-primary:hover{
	transform:translateY(-3px);
	box-shadow:0 16px 40px rgba(46,124,246,.5) !important;
	color:#060D1F !important;
}
.plf-trigger.plf-btn-outline{
	background:transparent !important;
	border-color:rgba(143,163,194,.45) !important;
	color:inherit !important;
}
.plf-trigger.plf-btn-outline:hover{
	transform:translateY(-3px);
	border-color:#4CC9F0 !important;
	color:#4CC9F0 !important;
}
.plf-trigger.plf-btn-dark{
	background:#0C1B36 !important;
	color:#fff !important;
}
.plf-trigger.plf-btn-dark:hover{
	transform:translateY(-3px);
	background:#13294B !important;
}

/* ---- Responsive ---- */
@media (max-width:520px){
	.plf-modal{padding:32px 22px 26px;}
	.plf-heading{font-size:1.3rem;}
}

@media (prefers-reduced-motion: reduce){
	.plf-overlay,
	.plf-modal,
	.plf-btn,
	.plf-trigger,
	.plf-close{transition:none !important;}
	.plf-modal{transform:none;}
}