king-addons / includes / widgets / Holographic_Card / Holographic_Card.php

Holographic_Card.php in King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder 51.1.86, at includes/widgets/Holographic_Card/Holographic_Card.php

1,705 lines 63.7 KB

Raw Download Zip

1	<?php
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Background;
7	use Elementor\Group_Control_Border;
8	use Elementor\Group_Control_Box_Shadow;
9	use Elementor\Group_Control_Typography;
10	use Elementor\Icons_Manager;
11	use Elementor\Widget_Base;
12
13	if (!defined('ABSPATH')) {
14	exit; // Exit if accessed directly.
15	}
16
17	class Holographic_Card extends Widget_Base
18	{
19	protected function sanitize_inline_svg(string $svg): string
20	{
21	$allowed = [
22	'svg' => [
23	'class' => true,
24	'xmlns' => true,
25	'width' => true,
26	'height' => true,
27	'viewbox' => true,
28	'viewBox' => true,
29	'fill' => true,
30	'stroke' => true,
31	'stroke-width' => true,
32	'stroke-linecap' => true,
33	'stroke-linejoin' => true,
34	'aria-hidden' => true,
35	'role' => true,
36	],
37	'path' => [
38	'd' => true,
39	'fill' => true,
40	'stroke' => true,
41	'stroke-width' => true,
42	'stroke-linecap' => true,
43	'stroke-linejoin' => true,
44	'opacity' => true,
45	'transform' => true,
46	],
47	'g' => [
48	'fill' => true,
49	'stroke' => true,
50	'stroke-width' => true,
51	'opacity' => true,
52	'transform' => true,
53	],
54	'circle' => [
55	'cx' => true,
56	'cy' => true,
57	'r' => true,
58	'fill' => true,
59	'stroke' => true,
60	'stroke-width' => true,
61	'opacity' => true,
62	],
63	'rect' => [
64	'x' => true,
65	'y' => true,
66	'width' => true,
67	'height' => true,
68	'rx' => true,
69	'ry' => true,
70	'fill' => true,
71	'stroke' => true,
72	'stroke-width' => true,
73	'opacity' => true,
74	],
75	'polygon' => [
76	'points' => true,
77	'fill' => true,
78	'stroke' => true,
79	'stroke-width' => true,
80	'opacity' => true,
81	],
82	'polyline' => [
83	'points' => true,
84	'fill' => true,
85	'stroke' => true,
86	'stroke-width' => true,
87	'opacity' => true,
88	],
89	'line' => [
90	'x1' => true,
91	'y1' => true,
92	'x2' => true,
93	'y2' => true,
94	'stroke' => true,
95	'stroke-width' => true,
96	'opacity' => true,
97	],
98	'ellipse' => [
99	'cx' => true,
100	'cy' => true,
101	'rx' => true,
102	'ry' => true,
103	'fill' => true,
104	'stroke' => true,
105	'stroke-width' => true,
106	'opacity' => true,
107	],
108	];
109
110	return (string) wp_kses($svg, $allowed);
111	}
112	public function get_name(): string
113	{
114	return 'king-addons-holographic-card';
115	}
116
117	public function get_title(): string
118	{
119	return esc_html__('3D Holographic Card', 'king-addons');
120	}
121
122	public function get_icon(): string
123	{
124	return 'king-addons-icon king-addons-holographic-card';
125	}
126
127	public function get_style_depends(): array
128	{
129	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-holographic-card-style'];
130	}
131
132	public function get_script_depends(): array
133	{
134	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-holographic-card-script'];
135	}
136
137	public function get_categories(): array
138	{
139	return ['king-addons'];
140	}
141
142	public function get_keywords(): array
143	{
144	return ['holographic', 'card', '3d', 'tilt', 'parallax', 'hover', 'interactive', 'animated', 'king', 'addons', 'kingaddons', 'king-addons'];
145	}
146
147	public function get_custom_help_url(): string
148	{
149	return 'https://kingaddons.com/elementor/holographic-card/';
150	}
151
152	protected function register_controls(): void
153	{
154	// =====================================================
155	// CONTENT TAB
156	// =====================================================
157
158	// === CONTENT SECTION ===
159	$this->start_controls_section(
160	'king_addons_holo_card_section_content',
161	[
162	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
163	'tab' => Controls_Manager::TAB_CONTENT,
164	]
165	);
166
167	$this->add_control(
168	'king_addons_holo_card_title',
169	[
170	'label' => esc_html__('Title', 'king-addons'),
171	'type' => Controls_Manager::TEXT,
172	'default' => esc_html__('The Engineer', 'king-addons'),
173	'placeholder' => esc_html__('Enter your title', 'king-addons'),
174	'label_block' => true,
175	'dynamic' => ['active' => true],
176	]
177	);
178
179	$this->add_control(
180	'king_addons_holo_card_meta',
181	[
182	'label' => esc_html__('Meta Text', 'king-addons'),
183	'type' => Controls_Manager::TEXT,
184	'default' => esc_html__('19.1% of users share this archetype', 'king-addons'),
185	'placeholder' => esc_html__('Enter meta description', 'king-addons'),
186	'label_block' => true,
187	'dynamic' => ['active' => true],
188	]
189	);
190
191	$this->add_control(
192	'king_addons_holo_card_badge_text',
193	[
194	'label' => esc_html__('Badge Text', 'king-addons'),
195	'type' => Controls_Manager::TEXT,
196	'default' => esc_html__('Your Archetype', 'king-addons'),
197	'placeholder' => esc_html__('Enter badge text', 'king-addons'),
198	'label_block' => true,
199	'dynamic' => ['active' => true],
200	]
201	);
202
203	$this->add_control(
204	'king_addons_holo_card_topline_right',
205	[
206	'label' => esc_html__('Topline Right', 'king-addons'),
207	'type' => Controls_Manager::TEXT,
208	'default' => esc_html__('2025', 'king-addons'),
209	'placeholder' => esc_html__('Enter topline right text', 'king-addons'),
210	'label_block' => true,
211	'dynamic' => ['active' => true],
212	]
213	);
214
215	$this->end_controls_section();
216
217	// === MEDIA SECTION ===
218	$this->start_controls_section(
219	'king_addons_holo_card_section_media',
220	[
221	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Media', 'king-addons'),
222	'tab' => Controls_Manager::TAB_CONTENT,
223	]
224	);
225
226	$this->add_control(
227	'king_addons_holo_card_media_type',
228	[
229	'label' => esc_html__('Parallax Layer Type', 'king-addons'),
230	'type' => Controls_Manager::SELECT,
231	'default' => 'svg',
232	'options' => [
233	'none' => esc_html__('None', 'king-addons'),
234	'svg' => esc_html__('Default SVG', 'king-addons'),
235	'image' => esc_html__('Image', 'king-addons'),
236	'custom_svg' => esc_html__('Custom SVG', 'king-addons'),
237	],
238	]
239	);
240
241	$this->add_control(
242	'king_addons_holo_card_image',
243	[
244	'label' => esc_html__('Image', 'king-addons'),
245	'type' => Controls_Manager::MEDIA,
246	'default' => [
247	'url' => '',
248	],
249	'condition' => [
250	'king_addons_holo_card_media_type' => 'image',
251	],
252	]
253	);
254
255	$this->add_control(
256	'king_addons_holo_card_custom_svg',
257	[
258	'label' => esc_html__('Custom SVG Code', 'king-addons'),
259	'type' => Controls_Manager::CODE,
260	'language' => 'html',
261	'rows' => 10,
262	'default' => '',
263	'placeholder' => esc_html__('Paste your SVG code here', 'king-addons'),
264	'condition' => [
265	'king_addons_holo_card_media_type' => 'custom_svg',
266	],
267	]
268	);
269
270	$this->end_controls_section();
271
272	// === LINK SECTION ===
273	$this->start_controls_section(
274	'king_addons_holo_card_section_link',
275	[
276	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Link', 'king-addons'),
277	'tab' => Controls_Manager::TAB_CONTENT,
278	]
279	);
280
281	$this->add_control(
282	'king_addons_holo_card_link_enable',
283	[
284	'label' => esc_html__('Enable Link', 'king-addons'),
285	'type' => Controls_Manager::SWITCHER,
286	'default' => '',
287	]
288	);
289
290	$this->add_control(
291	'king_addons_holo_card_link',
292	[
293	'label' => esc_html__('Link', 'king-addons'),
294	'type' => Controls_Manager::URL,
295	'placeholder' => esc_html__('https://your-link.com', 'king-addons'),
296	'default' => [
297	'url' => '',
298	],
299	'dynamic' => ['active' => true],
300	'condition' => [
301	'king_addons_holo_card_link_enable' => 'yes',
302	],
303	]
304	);
305
306	$this->end_controls_section();
307
308	// === MOTION SECTION ===
309	$this->start_controls_section(
310	'king_addons_holo_card_section_motion',
311	[
312	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Motion', 'king-addons'),
313	'tab' => Controls_Manager::TAB_CONTENT,
314	]
315	);
316
317	$this->add_control(
318	'king_addons_holo_card_max_tilt',
319	[
320	'label' => esc_html__('Max Tilt Angle', 'king-addons'),
321	'type' => Controls_Manager::SLIDER,
322	'size_units' => ['deg'],
323	'range' => [
324	'deg' => [
325	'min' => 0,
326	'max' => 30,
327	'step' => 1,
328	],
329	],
330	'default' => [
331	'unit' => 'deg',
332	'size' => 12,
333	],
334	]
335	);
336
337	$this->add_control(
338	'king_addons_holo_card_smoothness_in',
339	[
340	'label' => esc_html__('Smoothness In', 'king-addons'),
341	'type' => Controls_Manager::SLIDER,
342	'size_units' => [''],
343	'range' => [
344	'' => [
345	'min' => 0.01,
346	'max' => 0.5,
347	'step' => 0.01,
348	],
349	],
350	'default' => [
351	'unit' => '',
352	'size' => 0.08,
353	],
354	'description' => esc_html__('Higher value = snappier animation', 'king-addons'),
355	]
356	);
357
358	$this->add_control(
359	'king_addons_holo_card_smoothness_hover',
360	[
361	'label' => esc_html__('Smoothness Hover', 'king-addons'),
362	'type' => Controls_Manager::SLIDER,
363	'size_units' => [''],
364	'range' => [
365	'' => [
366	'min' => 0.01,
367	'max' => 0.5,
368	'step' => 0.01,
369	],
370	],
371	'default' => [
372	'unit' => '',
373	'size' => 0.08,
374	],
375	'description' => esc_html__('Smoothness while moving mouse inside the card', 'king-addons'),
376	]
377	);
378
379	$this->add_control(
380	'king_addons_holo_card_smoothness_out',
381	[
382	'label' => esc_html__('Smoothness Out', 'king-addons'),
383	'type' => Controls_Manager::SLIDER,
384	'size_units' => [''],
385	'range' => [
386	'' => [
387	'min' => 0.01,
388	'max' => 0.5,
389	'step' => 0.01,
390	],
391	],
392	'default' => [
393	'unit' => '',
394	'size' => 0.12,
395	],
396	'description' => esc_html__('Higher value = snappier animation', 'king-addons'),
397	]
398	);
399
400	$this->add_control(
401	'king_addons_holo_card_parallax_strength',
402	[
403	'label' => esc_html__('Parallax Strength', 'king-addons'),
404	'type' => Controls_Manager::SLIDER,
405	'size_units' => [''],
406	'range' => [
407	'' => [
408	'min' => 0,
409	'max' => 1,
410	'step' => 0.05,
411	],
412	],
413	'default' => [
414	'unit' => '',
415	'size' => 0.18,
416	],
417	]
418	);
419
420	$this->add_control(
421	'king_addons_holo_card_disable_motion',
422	[
423	'label' => esc_html__('Disable Motion', 'king-addons'),
424	'type' => Controls_Manager::SWITCHER,
425	'default' => '',
426	'description' => esc_html__('Completely disable 3D tilt and parallax effects', 'king-addons'),
427	]
428	);
429
430	$this->add_control(
431	'king_addons_holo_card_respect_reduced_motion',
432	[
433	'label' => esc_html__('Respect Reduced Motion', 'king-addons'),
434	'type' => Controls_Manager::SWITCHER,
435	'default' => 'yes',
436	'description' => esc_html__('Disable effects for users who prefer reduced motion', 'king-addons'),
437	]
438	);
439
440	$this->end_controls_section();
441
442	// =====================================================
443	// STYLE TAB
444	// =====================================================
445
446	// === CARD BOX STYLE ===
447	$this->start_controls_section(
448	'king_addons_holo_card_section_style_card',
449	[
450	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Card Box', 'king-addons'),
451	'tab' => Controls_Manager::TAB_STYLE,
452	]
453	);
454
455	$this->add_responsive_control(
456	'king_addons_holo_card_alignment',
457	[
458	'label' => esc_html__('Alignment', 'king-addons'),
459	'type' => Controls_Manager::CHOOSE,
460	'options' => [
461	'flex-start' => [
462	'title' => esc_html__('Left', 'king-addons'),
463	'icon' => 'eicon-h-align-left',
464	],
465	'center' => [
466	'title' => esc_html__('Center', 'king-addons'),
467	'icon' => 'eicon-h-align-center',
468	],
469	'flex-end' => [
470	'title' => esc_html__('Right', 'king-addons'),
471	'icon' => 'eicon-h-align-right',
472	],
473	],
474	'default' => 'center',
475	'selectors' => [
476	'{{WRAPPER}}' => 'display: flex; justify-content: {{VALUE}};',
477	],
478	]
479	);
480
481	$this->add_responsive_control(
482	'king_addons_holo_card_width',
483	[
484	'label' => esc_html__('Card Width', 'king-addons'),
485	'type' => Controls_Manager::SLIDER,
486	'size_units' => ['px', '%', 'vw'],
487	'range' => [
488	'px' => [
489	'min' => 200,
490	'max' => 800,
491	'step' => 10,
492	],
493	'%' => [
494	'min' => 20,
495	'max' => 100,
496	],
497	'vw' => [
498	'min' => 20,
499	'max' => 100,
500	],
501	],
502	'default' => [
503	'unit' => 'px',
504	'size' => 420,
505	],
506	'selectors' => [
507	'{{WRAPPER}} .king-addons-holo-card-stage' => 'width: {{SIZE}}{{UNIT}}; max-width: 100%;',
508	],
509	]
510	);
511
512	$this->add_responsive_control(
513	'king_addons_holo_card_perspective',
514	[
515	'label' => esc_html__('3D Perspective', 'king-addons'),
516	'type' => Controls_Manager::SLIDER,
517	'size_units' => ['px'],
518	'range' => [
519	'px' => [
520	'min' => 500,
521	'max' => 2000,
522	'step' => 50,
523	],
524	],
525	'default' => [
526	'unit' => 'px',
527	'size' => 1000,
528	],
529	'selectors' => [
530	'{{WRAPPER}} .king-addons-holo-card-stage' => 'perspective: {{SIZE}}{{UNIT}};',
531	],
532	]
533	);
534
535	$this->add_responsive_control(
536	'king_addons_holo_card_padding',
537	[
538	'label' => esc_html__('Padding', 'king-addons'),
539	'type' => Controls_Manager::DIMENSIONS,
540	'size_units' => ['px', 'em', '%'],
541	'default' => [
542	'top' => '18',
543	'right' => '18',
544	'bottom' => '16',
545	'left' => '18',
546	'unit' => 'px',
547	],
548	'selectors' => [
549	'{{WRAPPER}} .king-addons-holo-card__content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
550	],
551	]
552	);
553
554	$this->add_responsive_control(
555	'king_addons_holo_card_content_gap',
556	[
557	'label' => esc_html__('Content Gap', 'king-addons'),
558	'type' => Controls_Manager::SLIDER,
559	'size_units' => ['px', 'em'],
560	'range' => [
561	'px' => [
562	'min' => 0,
563	'max' => 50,
564	],
565	'em' => [
566	'min' => 0,
567	'max' => 3,
568	'step' => 0.1,
569	],
570	],
571	'default' => [
572	'unit' => 'px',
573	'size' => 14,
574	],
575	'selectors' => [
576	'{{WRAPPER}} .king-addons-holo-card__content' => 'gap: {{SIZE}}{{UNIT}};',
577	],
578	]
579	);
580
581	$this->add_responsive_control(
582	'king_addons_holo_card_border_radius',
583	[
584	'label' => esc_html__('Border Radius', 'king-addons'),
585	'type' => Controls_Manager::DIMENSIONS,
586	'size_units' => ['px', '%'],
587	'default' => [
588	'top' => '26',
589	'right' => '26',
590	'bottom' => '26',
591	'left' => '26',
592	'unit' => 'px',
593	],
594	'selectors' => [
595	'{{WRAPPER}} .king-addons-holo-card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
596	'{{WRAPPER}} .king-addons-holo-card::before' => 'border-radius: calc({{TOP}}{{UNIT}} + 2px) calc({{RIGHT}}{{UNIT}} + 2px) calc({{BOTTOM}}{{UNIT}} + 2px) calc({{LEFT}}{{UNIT}} + 2px);',
597	],
598	]
599	);
600
601	$this->add_control(
602	'king_addons_holo_card_bg_color',
603	[
604	'label' => esc_html__('Background Color', 'king-addons'),
605	'type' => Controls_Manager::COLOR,
606	'default' => '#ffffff',
607	'selectors' => [
608	'{{WRAPPER}} .king-addons-holo-card' => 'background-color: {{VALUE}};',
609	],
610	]
611	);
612
613	$this->add_group_control(
614	Group_Control_Box_Shadow::get_type(),
615	[
616	'name' => 'king_addons_holo_card_box_shadow',
617	'selector' => '{{WRAPPER}} .king-addons-holo-card',
618	]
619	);
620
621	$this->add_control(
622	'king_addons_holo_card_hover_shadow_heading',
623	[
624	'label' => esc_html__('Hover Shadow', 'king-addons'),
625	'type' => Controls_Manager::HEADING,
626	'separator' => 'before',
627	]
628	);
629
630	$this->add_group_control(
631	Group_Control_Box_Shadow::get_type(),
632	[
633	'name' => 'king_addons_holo_card_box_shadow_hover',
634	'selector' => '{{WRAPPER}} .king-addons-holo-card.is-active',
635	]
636	);
637
638	$this->add_group_control(
639	Group_Control_Border::get_type(),
640	[
641	'name' => 'king_addons_holo_card_border',
642	'selector' => '{{WRAPPER}} .king-addons-holo-card',
643	'separator' => 'before',
644	]
645	);
646
647	$this->end_controls_section();
648
649	// === POSTER STYLE ===
650	$this->start_controls_section(
651	'king_addons_holo_card_section_style_poster',
652	[
653	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Poster', 'king-addons'),
654	'tab' => Controls_Manager::TAB_STYLE,
655	]
656	);
657
658	$this->add_responsive_control(
659	'king_addons_holo_card_poster_height',
660	[
661	'label' => esc_html__('Height', 'king-addons'),
662	'type' => Controls_Manager::SLIDER,
663	'size_units' => ['px', '%', 'vh'],
664	'range' => [
665	'px' => [
666	'min' => 100,
667	'max' => 600,
668	'step' => 10,
669	],
670	'%' => [
671	'min' => 20,
672	'max' => 150,
673	],
674	'vh' => [
675	'min' => 10,
676	'max' => 80,
677	],
678	],
679	'default' => [
680	'unit' => 'px',
681	'size' => 260,
682	],
683	'selectors' => [
684	'{{WRAPPER}} .king-addons-holo-card__poster' => 'height: {{SIZE}}{{UNIT}};',
685	],
686	]
687	);
688
689	$this->add_responsive_control(
690	'king_addons_holo_card_poster_border_radius',
691	[
692	'label' => esc_html__('Border Radius', 'king-addons'),
693	'type' => Controls_Manager::DIMENSIONS,
694	'size_units' => ['px', '%'],
695	'default' => [
696	'top' => '18',
697	'right' => '18',
698	'bottom' => '18',
699	'left' => '18',
700	'unit' => 'px',
701	],
702	'selectors' => [
703	'{{WRAPPER}} .king-addons-holo-card__poster' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
704	],
705	]
706	);
707
708	$this->add_group_control(
709	Group_Control_Background::get_type(),
710	[
711	'name' => 'king_addons_holo_card_poster_background',
712	'types' => ['classic', 'gradient'],
713	'selector' => '{{WRAPPER}} .king-addons-holo-card__poster',
714	'fields_options' => [
715	'background' => [
716	'default' => 'gradient',
717	],
718	'color' => [
719	'default' => '#7cc7ff',
720	],
721	'color_b' => [
722	'default' => '#c59bff',
723	],
724	'gradient_type' => [
725	'default' => 'linear',
726	],
727	'gradient_angle' => [
728	'default' => [
729	'unit' => 'deg',
730	'size' => 135,
731	],
732	],
733	],
734	]
735	);
736
737	$this->end_controls_section();
738
739	// === PARALLAX LAYER STYLE ===
740	$this->start_controls_section(
741	'king_addons_holo_card_section_style_parallax',
742	[
743	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Parallax Layer', 'king-addons'),
744	'tab' => Controls_Manager::TAB_STYLE,
745	'condition' => [
746	'king_addons_holo_card_media_type!' => 'none',
747	],
748	]
749	);
750
751	$this->add_responsive_control(
752	'king_addons_holo_card_layer_width',
753	[
754	'label' => esc_html__('Width', 'king-addons'),
755	'type' => Controls_Manager::SLIDER,
756	'size_units' => ['%', 'px'],
757	'range' => [
758	'%' => [
759	'min' => 30,
760	'max' => 100,
761	],
762	'px' => [
763	'min' => 100,
764	'max' => 500,
765	],
766	],
767	'default' => [
768	'unit' => '%',
769	'size' => 78,
770	],
771	'selectors' => [
772	'{{WRAPPER}} .king-addons-holo-card__layer' => 'width: {{SIZE}}{{UNIT}};',
773	],
774	]
775	);
776
777	$this->add_responsive_control(
778	'king_addons_holo_card_layer_max_width',
779	[
780	'label' => esc_html__('Max Width', 'king-addons'),
781	'type' => Controls_Manager::SLIDER,
782	'size_units' => ['px'],
783	'range' => [
784	'px' => [
785	'min' => 100,
786	'max' => 600,
787	],
788	],
789	'default' => [
790	'unit' => 'px',
791	'size' => 320,
792	],
793	'selectors' => [
794	'{{WRAPPER}} .king-addons-holo-card__layer' => 'max-width: {{SIZE}}{{UNIT}};',
795	],
796	]
797	);
798
799	$this->add_responsive_control(
800	'king_addons_holo_card_layer_scale',
801	[
802	'label' => esc_html__('Scale', 'king-addons'),
803	'type' => Controls_Manager::SLIDER,
804	'size_units' => [''],
805	'range' => [
806	'' => [
807	'min' => 0.5,
808	'max' => 2,
809	'step' => 0.05,
810	],
811	],
812	'default' => [
813	'unit' => '',
814	'size' => 1.03,
815	],
816	'selectors' => [
817	'{{WRAPPER}} .king-addons-holo-card__layer' => '--layer-scale: {{SIZE}};',
818	],
819	]
820	);
821
822	$this->add_control(
823	'king_addons_holo_card_layer_shadow_color',
824	[
825	'label' => esc_html__('Shadow Color', 'king-addons'),
826	'type' => Controls_Manager::COLOR,
827	'default' => 'rgba(0, 0, 0, 0.18)',
828	'selectors' => [
829	'{{WRAPPER}} .king-addons-holo-card__layer' => 'filter: drop-shadow(0 22px 34px {{VALUE}});',
830	],
831	]
832	);
833
834	$this->end_controls_section();
835
836	// === TYPOGRAPHY STYLE ===
837	$this->start_controls_section(
838	'king_addons_holo_card_section_style_typography',
839	[
840	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Typography', 'king-addons'),
841	'tab' => Controls_Manager::TAB_STYLE,
842	]
843	);
844
845	$this->add_control(
846	'king_addons_holo_card_title_heading',
847	[
848	'label' => esc_html__('Title', 'king-addons'),
849	'type' => Controls_Manager::HEADING,
850	]
851	);
852
853	$this->add_group_control(
854	Group_Control_Typography::get_type(),
855	[
856	'name' => 'king_addons_holo_card_title_typography',
857	'selector' => '{{WRAPPER}} .king-addons-holo-card__title span',
858	]
859	);
860
861	$this->add_control(
862	'king_addons_holo_card_title_color',
863	[
864	'label' => esc_html__('Color', 'king-addons'),
865	'type' => Controls_Manager::COLOR,
866	'default' => '#0c0f14',
867	'selectors' => [
868	'{{WRAPPER}} .king-addons-holo-card__title span' => 'color: {{VALUE}};',
869	],
870	]
871	);
872
873	$this->add_control(
874	'king_addons_holo_card_meta_heading',
875	[
876	'label' => esc_html__('Meta', 'king-addons'),
877	'type' => Controls_Manager::HEADING,
878	'separator' => 'before',
879	]
880	);
881
882	$this->add_group_control(
883	Group_Control_Typography::get_type(),
884	[
885	'name' => 'king_addons_holo_card_meta_typography',
886	'selector' => '{{WRAPPER}} .king-addons-holo-card__meta',
887	]
888	);
889
890	$this->add_control(
891	'king_addons_holo_card_meta_color',
892	[
893	'label' => esc_html__('Color', 'king-addons'),
894	'type' => Controls_Manager::COLOR,
895	'default' => '#4b5563',
896	'selectors' => [
897	'{{WRAPPER}} .king-addons-holo-card__meta' => 'color: {{VALUE}};',
898	],
899	]
900	);
901
902	$this->add_control(
903	'king_addons_holo_card_badge_heading',
904	[
905	'label' => esc_html__('Badge', 'king-addons'),
906	'type' => Controls_Manager::HEADING,
907	'separator' => 'before',
908	]
909	);
910
911	$this->add_group_control(
912	Group_Control_Typography::get_type(),
913	[
914	'name' => 'king_addons_holo_card_badge_typography',
915	'selector' => '{{WRAPPER}} .king-addons-holo-card__topline',
916	]
917	);
918
919	$this->add_control(
920	'king_addons_holo_card_badge_color',
921	[
922	'label' => esc_html__('Color', 'king-addons'),
923	'type' => Controls_Manager::COLOR,
924	'default' => 'rgba(255,255,255,0.92)',
925	'selectors' => [
926	'{{WRAPPER}} .king-addons-holo-card__topline' => 'color: {{VALUE}};',
927	],
928	]
929	);
930
931	$this->add_control(
932	'king_addons_holo_card_badge_text_shadow',
933	[
934	'label' => esc_html__('Text Shadow', 'king-addons'),
935	'type' => Controls_Manager::TEXT_SHADOW,
936	'selectors' => [
937	'{{WRAPPER}} .king-addons-holo-card__topline' => 'text-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{COLOR}};',
938	],
939	'default' => [
940	'horizontal' => 0,
941	'vertical' => 2,
942	'blur' => 10,
943	'color' => 'rgba(0,0,0,0.15)',
944	],
945	]
946	);
947
948	$this->add_responsive_control(
949	'king_addons_holo_card_topline_padding',
950	[
951	'label' => esc_html__('Topline Padding', 'king-addons'),
952	'type' => Controls_Manager::DIMENSIONS,
953	'size_units' => ['px', 'em'],
954	'default' => [
955	'top' => '12',
956	'right' => '14',
957	'bottom' => '0',
958	'left' => '14',
959	'unit' => 'px',
960	],
961	'selectors' => [
962	'{{WRAPPER}} .king-addons-holo-card__topline' => 'top: {{TOP}}{{UNIT}}; right: {{RIGHT}}{{UNIT}}; left: {{LEFT}}{{UNIT}};',
963	],
964	]
965	);
966
967	$this->end_controls_section();
968
969	// === HOLOGRAPHIC EFFECTS STYLE ===
970	$this->start_controls_section(
971	'king_addons_holo_card_section_style_effects',
972	[
973	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Holographic Effects', 'king-addons'),
974	'tab' => Controls_Manager::TAB_STYLE,
975	]
976	);
977
978	$this->add_control(
979	'king_addons_holo_card_film_enable',
980	[
981	'label' => esc_html__('Enable Holographic Film', 'king-addons'),
982	'type' => Controls_Manager::SWITCHER,
983	'default' => 'yes',
984	]
985	);
986
987	$this->add_control(
988	'king_addons_holo_card_film_intensity',
989	[
990	'label' => esc_html__('Film Intensity', 'king-addons'),
991	'type' => Controls_Manager::SLIDER,
992	'size_units' => [''],
993	'range' => [
994	'' => [
995	'min' => 0,
996	'max' => 1,
997	'step' => 0.05,
998	],
999	],
1000	'default' => [
1001	'unit' => '',
1002	'size' => 0.55,
1003	],
1004	'selectors' => [
1005	'{{WRAPPER}} .king-addons-holo-card__film' => '--film-intensity: {{SIZE}};',
1006	],
1007	'condition' => [
1008	'king_addons_holo_card_film_enable' => 'yes',
1009	],
1010	]
1011	);
1012
1013	$this->add_control(
1014	'king_addons_holo_card_rim_enable',
1015	[
1016	'label' => esc_html__('Enable Rim Glow', 'king-addons'),
1017	'type' => Controls_Manager::SWITCHER,
1018	'default' => 'yes',
1019	'separator' => 'before',
1020	]
1021	);
1022
1023	$this->add_control(
1024	'king_addons_holo_card_rim_intensity',
1025	[
1026	'label' => esc_html__('Rim Intensity', 'king-addons'),
1027	'type' => Controls_Manager::SLIDER,
1028	'size_units' => [''],
1029	'range' => [
1030	'' => [
1031	'min' => 0,
1032	'max' => 1,
1033	'step' => 0.05,
1034	],
1035	],
1036	'default' => [
1037	'unit' => '',
1038	'size' => 0.35,
1039	],
1040	'selectors' => [
1041	'{{WRAPPER}} .king-addons-holo-card' => '--rim-intensity: {{SIZE}};',
1042	],
1043	'condition' => [
1044	'king_addons_holo_card_rim_enable' => 'yes',
1045	],
1046	]
1047	);
1048
1049	$this->add_control(
1050	'king_addons_holo_card_poster_shine_enable',
1051	[
1052	'label' => esc_html__('Enable Poster Shine', 'king-addons'),
1053	'type' => Controls_Manager::SWITCHER,
1054	'default' => 'yes',
1055	'separator' => 'before',
1056	]
1057	);
1058
1059	$this->add_control(
1060	'king_addons_holo_card_pattern_enable',
1061	[
1062	'label' => esc_html__('Enable Pattern Overlay', 'king-addons'),
1063	'type' => Controls_Manager::SWITCHER,
1064	'default' => 'yes',
1065	'separator' => 'before',
1066	]
1067	);
1068
1069	$this->add_control(
1070	'king_addons_holo_card_pattern_opacity',
1071	[
1072	'label' => esc_html__('Pattern Opacity', 'king-addons'),
1073	'type' => Controls_Manager::SLIDER,
1074	'size_units' => [''],
1075	'range' => [
1076	'' => [
1077	'min' => 0,
1078	'max' => 1,
1079	'step' => 0.05,
1080	],
1081	],
1082	'default' => [
1083	'unit' => '',
1084	'size' => 0.22,
1085	],
1086	'selectors' => [
1087	'{{WRAPPER}} .king-addons-holo-card__pattern' => 'opacity: {{SIZE}};',
1088	],
1089	'condition' => [
1090	'king_addons_holo_card_pattern_enable' => 'yes',
1091	],
1092	]
1093	);
1094
1095	$this->add_control(
1096	'king_addons_holo_card_title_mark_enable',
1097	[
1098	'label' => esc_html__('Enable Title Mark', 'king-addons'),
1099	'type' => Controls_Manager::SWITCHER,
1100	'default' => 'yes',
1101	'separator' => 'before',
1102	]
1103	);
1104
1105	$this->add_control(
1106	'king_addons_holo_card_badge_logo_enable',
1107	[
1108	'label' => esc_html__('Enable Badge Logo', 'king-addons'),
1109	'type' => Controls_Manager::SWITCHER,
1110	'default' => 'yes',
1111	'separator' => 'before',
1112	]
1113	);
1114
1115	$this->end_controls_section();
1116
1117	// === TITLE MARK STYLE ===
1118	$this->start_controls_section(
1119	'king_addons_holo_card_section_style_mark',
1120	[
1121	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title Mark', 'king-addons'),
1122	'tab' => Controls_Manager::TAB_STYLE,
1123	'condition' => [
1124	'king_addons_holo_card_title_mark_enable' => 'yes',
1125	],
1126	]
1127	);
1128
1129	$this->add_control(
1130	'king_addons_holo_card_mark_type',
1131	[
1132	'label' => esc_html__('Type', 'king-addons'),
1133	'type' => Controls_Manager::SELECT,
1134	'default' => 'default',
1135	'options' => [
1136	'none' => esc_html__('None', 'king-addons'),
1137	'default' => esc_html__('Default', 'king-addons'),
1138	'icon' => esc_html__('Icon Library', 'king-addons'),
1139	],
1140	]
1141	);
1142
1143	$this->add_control(
1144	'king_addons_holo_card_mark_icon',
1145	[
1146	'label' => esc_html__('Icon', 'king-addons'),
1147	'type' => Controls_Manager::ICONS,
1148	'condition' => [
1149	'king_addons_holo_card_mark_type' => 'icon',
1150	],
1151	]
1152	);
1153
1154	$this->add_responsive_control(
1155	'king_addons_holo_card_mark_size',
1156	[
1157	'label' => esc_html__('Size', 'king-addons'),
1158	'type' => Controls_Manager::SLIDER,
1159	'size_units' => ['px', 'em'],
1160	'range' => [
1161	'px' => [
1162	'min' => 8,
1163	'max' => 50,
1164	],
1165	'em' => [
1166	'min' => 0.5,
1167	'max' => 3,
1168	'step' => 0.1,
1169	],
1170	],
1171	'default' => [
1172	'unit' => 'px',
1173	'size' => 18,
1174	],
1175	'selectors' => [
1176	'{{WRAPPER}} .king-addons-holo-card__mark' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; font-size: {{SIZE}}{{UNIT}};',
1177	],
1178	]
1179	);
1180
1181	$this->add_control(
1182	'king_addons_holo_card_mark_icon_color',
1183	[
1184	'label' => esc_html__('Icon Color', 'king-addons'),
1185	'type' => Controls_Manager::COLOR,
1186	'default' => '#ffffff',
1187	'condition' => [
1188	'king_addons_holo_card_mark_type' => 'icon',
1189	],
1190	'selectors' => [
1191	'{{WRAPPER}} .king-addons-holo-card__mark--icon' => 'color: {{VALUE}};',
1192	],
1193	]
1194	);
1195
1196	$this->end_controls_section();
1197
1198	// === BADGE LOGO STYLE ===
1199	$this->start_controls_section(
1200	'king_addons_holo_card_section_style_logo',
1201	[
1202	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Badge Logo', 'king-addons'),
1203	'tab' => Controls_Manager::TAB_STYLE,
1204	'condition' => [
1205	'king_addons_holo_card_badge_logo_enable' => 'yes',
1206	],
1207	]
1208	);
1209
1210	$this->add_control(
1211	'king_addons_holo_card_logo_type',
1212	[
1213	'label' => esc_html__('Type', 'king-addons'),
1214	'type' => Controls_Manager::SELECT,
1215	'default' => 'default',
1216	'options' => [
1217	'none' => esc_html__('None', 'king-addons'),
1218	'default' => esc_html__('Default', 'king-addons'),
1219	'icon' => esc_html__('Icon Library', 'king-addons'),
1220	],
1221	]
1222	);
1223
1224	$this->add_control(
1225	'king_addons_holo_card_logo_icon',
1226	[
1227	'label' => esc_html__('Icon', 'king-addons'),
1228	'type' => Controls_Manager::ICONS,
1229	'condition' => [
1230	'king_addons_holo_card_logo_type' => 'icon',
1231	],
1232	]
1233	);
1234
1235	$this->add_responsive_control(
1236	'king_addons_holo_card_logo_size',
1237	[
1238	'label' => esc_html__('Size', 'king-addons'),
1239	'type' => Controls_Manager::SLIDER,
1240	'size_units' => ['px', 'em'],
1241	'range' => [
1242	'px' => [
1243	'min' => 8,
1244	'max' => 50,
1245	],
1246	'em' => [
1247	'min' => 0.5,
1248	'max' => 3,
1249	'step' => 0.1,
1250	],
1251	],
1252	'default' => [
1253	'unit' => 'px',
1254	'size' => 18,
1255	],
1256	'selectors' => [
1257	'{{WRAPPER}} .king-addons-holo-card__logo' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; font-size: {{SIZE}}{{UNIT}};',
1258	],
1259	]
1260	);
1261
1262	$this->add_control(
1263	'king_addons_holo_card_logo_icon_color',
1264	[
1265	'label' => esc_html__('Icon Color', 'king-addons'),
1266	'type' => Controls_Manager::COLOR,
1267	'default' => '#ffffff',
1268	'condition' => [
1269	'king_addons_holo_card_logo_type' => 'icon',
1270	],
1271	'selectors' => [
1272	'{{WRAPPER}} .king-addons-holo-card__logo--icon' => 'color: {{VALUE}};',
1273	],
1274	]
1275	);
1276
1277	$this->end_controls_section();
1278
1279	// === DIVIDER STYLE ===
1280	$this->start_controls_section(
1281	'king_addons_holo_card_section_style_divider',
1282	[
1283	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Divider', 'king-addons'),
1284	'tab' => Controls_Manager::TAB_STYLE,
1285	]
1286	);
1287
1288	$this->add_control(
1289	'king_addons_holo_card_divider_enable',
1290	[
1291	'label' => esc_html__('Show Divider', 'king-addons'),
1292	'type' => Controls_Manager::SWITCHER,
1293	'default' => 'yes',
1294	]
1295	);
1296
1297	$this->add_control(
1298	'king_addons_holo_card_divider_color',
1299	[
1300	'label' => esc_html__('Color', 'king-addons'),
1301	'type' => Controls_Manager::COLOR,
1302	'default' => 'rgba(0,0,0,0.06)',
1303	'selectors' => [
1304	'{{WRAPPER}} .king-addons-holo-card__divider' => 'background-color: {{VALUE}};',
1305	],
1306	'condition' => [
1307	'king_addons_holo_card_divider_enable' => 'yes',
1308	],
1309	]
1310	);
1311
1312	$this->add_responsive_control(
1313	'king_addons_holo_card_divider_height',
1314	[
1315	'label' => esc_html__('Height', 'king-addons'),
1316	'type' => Controls_Manager::SLIDER,
1317	'size_units' => ['px'],
1318	'range' => [
1319	'px' => [
1320	'min' => 1,
1321	'max' => 10,
1322	],
1323	],
1324	'default' => [
1325	'unit' => 'px',
1326	'size' => 1,
1327	],
1328	'selectors' => [
1329	'{{WRAPPER}} .king-addons-holo-card__divider' => 'height: {{SIZE}}{{UNIT}};',
1330	],
1331	'condition' => [
1332	'king_addons_holo_card_divider_enable' => 'yes',
1333	],
1334	]
1335	);
1336
1337	$this->add_responsive_control(
1338	'king_addons_holo_card_divider_margin',
1339	[
1340	'label' => esc_html__('Margin Top', 'king-addons'),
1341	'type' => Controls_Manager::SLIDER,
1342	'size_units' => ['px'],
1343	'range' => [
1344	'px' => [
1345	'min' => 0,
1346	'max' => 50,
1347	],
1348	],
1349	'default' => [
1350	'unit' => 'px',
1351	'size' => 2,
1352	],
1353	'selectors' => [
1354	'{{WRAPPER}} .king-addons-holo-card__divider' => 'margin-top: {{SIZE}}{{UNIT}};',
1355	],
1356	'condition' => [
1357	'king_addons_holo_card_divider_enable' => 'yes',
1358	],
1359	]
1360	);
1361
1362	$this->end_controls_section();
1363
1364	// Register Pro features promo section
1365	$this->register_pro_notice_controls();
1366	}
1367
1368	/**
1369	* Register Pro notice controls with premium features promo.
1370	*
1371	* @return void
1372	*/
1373	protected function register_pro_notice_controls(): void
1374	{
1375	if (function_exists('king_addons_freemius') && king_addons_freemius()->can_use_premium_code__premium_only()) {
1376	return; // Pro version - skip promo
1377	}
1378
1379	// === PRO ANIMATIONS PROMO SECTION ===
1380	$this->start_controls_section(
1381	'king_addons_holo_card_section_pro_animations',
1382	[
1383	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Pro Animations', 'king-addons'),
1384	'tab' => Controls_Manager::TAB_CONTENT,
1385	]
1386	);
1387
1388	$this->add_control(
1389	'king_addons_holo_card_auto_sway_promo',
1390	[
1391	'label' => sprintf(__('Auto-Sway Animation %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
1392	'type' => Controls_Manager::SWITCHER,
1393	'classes' => 'king-addons-pro-control no-distance',
1394	'description' => esc_html__('Card will gently sway/float automatically, simulating mouse hover movement', 'king-addons'),
1395	]
1396	);
1397
1398	$this->end_controls_section();
1399
1400	// === PRO EFFECTS PROMO SECTION ===
1401	$this->start_controls_section(
1402	'king_addons_holo_card_section_pro_effects',
1403	[
1404	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Pro Effects', 'king-addons'),
1405	'tab' => Controls_Manager::TAB_STYLE,
1406	]
1407	);
1408
1409	$this->add_control(
1410	'king_addons_holo_card_sparkle_promo',
1411	[
1412	'label' => sprintf(__('Sparkle Effect %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
1413	'type' => Controls_Manager::SWITCHER,
1414	'classes' => 'king-addons-pro-control no-distance',
1415	'description' => esc_html__('Add animated sparkle/glitter particles overlay', 'king-addons'),
1416	]
1417	);
1418
1419	$this->add_control(
1420	'king_addons_holo_card_rainbow_promo',
1421	[
1422	'label' => sprintf(__('Rainbow Shift %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
1423	'type' => Controls_Manager::SWITCHER,
1424	'classes' => 'king-addons-pro-control no-distance',
1425	'description' => esc_html__('Animate the holographic film colors in a continuous rainbow cycle', 'king-addons'),
1426	]
1427	);
1428
1429	$this->end_controls_section();
1430
1431	// === UPGRADE TO PRO SECTION ===
1432	Core::renderProFeaturesSection($this, '', Controls_Manager::RAW_HTML, 'holographic-card', [
1433	'Auto-Sway Animation (5 animation types: Orbit, Figure-8, Wave, Random, Pendulum)',
1434	'Sparkle/Glitter Effect with customizable colors and density',
1435	'Rainbow Color Shift for holographic film',
1436	]);
1437	}
1438
1439	/**
1440	* Generate gradient/background style for mark and logo elements
1441	*/
1442	protected function get_gradient_style(string $type, array $settings): string
1443	{
1444	$prefix = 'king_addons_holo_card_' . $type . '_';
1445	$gradient_type = $settings[$prefix . 'gradient_type'] ?? 'conic';
1446	$color1 = $settings[$prefix . 'color_1'] ?? '#00d4ff';
1447	$color2 = $settings[$prefix . 'color_2'] ?? '#ff2bd6';
1448	$color3 = $settings[$prefix . 'color_3'] ?? '#ffd600';
1449	$color4 = $settings[$prefix . 'color_4'] ?? '#00ffa8';
1450	$angle = isset($settings[$prefix . 'gradient_angle']['size']) ? $settings[$prefix . 'gradient_angle']['size'] : 90;
1451	$highlight_enable = $settings[$prefix . 'highlight_enable'] ?? 'yes';
1452	$highlight_color = $settings[$prefix . 'highlight_color'] ?? 'rgba(255, 255, 255, 0.85)';
1453
1454	$style = '';
1455	$highlight = '';
1456
1457	if ($highlight_enable === 'yes') {
1458	$highlight = "radial-gradient(circle at 30% 30%, {$highlight_color}, rgba(255, 255, 255, 0) 60%), ";
1459	}
1460
1461	switch ($gradient_type) {
1462	case 'solid':
1463	$style = "background: {$highlight}{$color1};";
1464	break;
1465	case 'linear':
1466	$style = "background: {$highlight}linear-gradient({$angle}deg, {$color1}, {$color2});";
1467	break;
1468	case 'radial':
1469	$style = "background: {$highlight}radial-gradient(circle, {$color1}, {$color2});";
1470	break;
1471	case 'conic':
1472	default:
1473	$style = "background: {$highlight}conic-gradient(from {$angle}deg, {$color1}, {$color2}, {$color3}, {$color4}, {$color1});";
1474	break;
1475	}
1476
1477	return $style;
1478	}
1479
1480	protected function render(): void
1481	{
1482	$settings = $this->get_settings_for_display();
1483	$id = $this->get_id();
1484
1485	// Build data attributes for JS
1486	$data_attrs = [
1487	'max-tilt' => $settings['king_addons_holo_card_max_tilt']['size'] ?? 12,
1488	'smoothness-in' => $settings['king_addons_holo_card_smoothness_in']['size'] ?? 0.16,
1489	'smoothness-hover' => $settings['king_addons_holo_card_smoothness_hover']['size'] ?? 0.08,
1490	'smoothness-out' => $settings['king_addons_holo_card_smoothness_out']['size'] ?? 0.12,
1491	'parallax-strength' => $settings['king_addons_holo_card_parallax_strength']['size'] ?? 0.18,
1492	'disable-motion' => $settings['king_addons_holo_card_disable_motion'] === 'yes' ? 'true' : 'false',
1493	'respect-reduced-motion' => $settings['king_addons_holo_card_respect_reduced_motion'] === 'yes' ? 'true' : 'false',
1494	];
1495
1496	$data_string = '';
1497	foreach ($data_attrs as $key => $value) {
1498	$data_string .= ' data-' . esc_attr($key) . '="' . esc_attr($value) . '"';
1499	}
1500
1501	// Classes for conditional features
1502	$card_classes = ['king-addons-holo-card'];
1503	if ($settings['king_addons_holo_card_film_enable'] !== 'yes') {
1504	$card_classes[] = 'king-addons-holo-card--no-film';
1505	}
1506	if ($settings['king_addons_holo_card_rim_enable'] !== 'yes') {
1507	$card_classes[] = 'king-addons-holo-card--no-rim';
1508	}
1509	if ($settings['king_addons_holo_card_poster_shine_enable'] !== 'yes') {
1510	$card_classes[] = 'king-addons-holo-card--no-shine';
1511	}
1512
1513	// Link wrapper
1514	$link_tag = 'article';
1515	$link_attrs = '';
1516	if ($settings['king_addons_holo_card_link_enable'] === 'yes' && !empty($settings['king_addons_holo_card_link']['url'])) {
1517	$link_tag = 'a';
1518	$link_attrs = ' href="' . esc_url($settings['king_addons_holo_card_link']['url']) . '"';
1519	if (!empty($settings['king_addons_holo_card_link']['is_external'])) {
1520	$link_attrs .= ' target="_blank"';
1521	}
1522	if (!empty($settings['king_addons_holo_card_link']['nofollow'])) {
1523	$link_attrs .= ' rel="nofollow"';
1524	}
1525	}
1526
1527	echo '<div class="king-addons-holo-card-stage king-addons-holo-card-' . esc_attr($id) . '"' . $data_string . '>';
1528	echo '<' . esc_html($link_tag) . ' class="' . esc_attr(implode(' ', $card_classes)) . '"' . $link_attrs . ' aria-label="' . esc_attr__('Holographic 3D card', 'king-addons') . '">';
1529
1530	// Holographic film overlay
1531	if ($settings['king_addons_holo_card_film_enable'] === 'yes') {
1532	echo '<div class="king-addons-holo-card__film" aria-hidden="true"></div>';
1533	}
1534
1535	echo '<div class="king-addons-holo-card__content">';
1536
1537	// Poster section
1538	echo '<div class="king-addons-holo-card__poster">';
1539
1540	// Pattern overlay
1541	if ($settings['king_addons_holo_card_pattern_enable'] === 'yes') {
1542	echo '<div class="king-addons-holo-card__pattern" aria-hidden="true"></div>';
1543	}
1544
1545	// Topline
1546	echo '<div class="king-addons-holo-card__topline">';
1547	echo '<span class="king-addons-holo-card__badge">';
1548	if ($settings['king_addons_holo_card_badge_logo_enable'] === 'yes') {
1549	$logo_type = $settings['king_addons_holo_card_logo_type'] ?? 'default';
1550	if ($logo_type === 'none') {
1551	// Intentionally hidden
1552	} else {
1553	$logo_classes = ['king-addons-holo-card__logo'];
1554	$logo_inner = '';
1555
1556	if ($logo_type === 'icon') {
1557	$logo_classes[] = 'king-addons-holo-card__logo--icon';
1558	$icon = $settings['king_addons_holo_card_logo_icon'] ?? [];
1559	if (!empty($icon['value'])) {
1560	ob_start();
1561	Icons_Manager::render_icon($icon, ['aria-hidden' => 'true']);
1562	$logo_inner = (string) ob_get_clean();
1563	}
1564	}
1565
1566	echo '<span class="' . esc_attr(implode(' ', $logo_classes)) . '" aria-hidden="true">' . $logo_inner . '</span>';
1567	}
1568	}
1569	if (!empty($settings['king_addons_holo_card_badge_text'])) {
1570	echo '<span>' . esc_html($settings['king_addons_holo_card_badge_text']) . '</span>';
1571	}
1572	echo '</span>';
1573	if (!empty($settings['king_addons_holo_card_topline_right'])) {
1574	echo '<span>' . esc_html($settings['king_addons_holo_card_topline_right']) . '</span>';
1575	}
1576	echo '</div>';
1577
1578	// Art layer (parallax)
1579	if ($settings['king_addons_holo_card_media_type'] !== 'none') {
1580	echo '<div class="king-addons-holo-card__art" aria-hidden="true">';
1581
1582	if ($settings['king_addons_holo_card_media_type'] === 'svg') {
1583	// Default SVG
1584	echo '<svg class="king-addons-holo-card__layer" viewBox="0 0 420 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="">';
1585	echo '<defs>';
1586	echo '<linearGradient id="holo-g1-' . esc_attr($id) . '" x1="0" y1="0" x2="1" y2="1">';
1587	echo '<stop offset="0" stop-color="#ffffff" stop-opacity=".92"/>';
1588	echo '<stop offset=".55" stop-color="#d7e7ff" stop-opacity=".92"/>';
1589	echo '<stop offset="1" stop-color="#ffe0f2" stop-opacity=".9"/>';
1590	echo '</linearGradient>';
1591	echo '<linearGradient id="holo-g2-' . esc_attr($id) . '" x1="0" y1="1" x2="1" y2="0">';
1592	echo '<stop offset="0" stop-color="#7dd3ff" stop-opacity=".95"/>';
1593	echo '<stop offset="1" stop-color="#c4b5ff" stop-opacity=".95"/>';
1594	echo '</linearGradient>';
1595	echo '<filter id="holo-s-' . esc_attr($id) . '" x="-20%" y="-20%" width="140%" height="140%">';
1596	echo '<feDropShadow dx="0" dy="10" stdDeviation="10" flood-color="#000" flood-opacity=".18"/>';
1597	echo '</filter>';
1598	echo '</defs>';
1599	echo '<g filter="url(#holo-s-' . esc_attr($id) . ')" opacity=".95">';
1600	echo '<path d="M84 98c8-14 28-18 40-8 10-12 30-12 40 0 18-6 34 10 28 28H70c-18 0-26-14-18-20 8-6 18-2 32 0z" fill="url(#holo-g1-' . esc_attr($id) . ')"/>';
1601	echo '</g>';
1602	echo '<g filter="url(#holo-s-' . esc_attr($id) . ')">';
1603	echo '<path d="M132 206c0-10 8-18 18-18h114c10 0 18 8 18 18v46H132v-46z" fill="url(#holo-g2-' . esc_attr($id) . ')"/>';
1604	echo '<path d="M114 252h206c6 0 10 4 10 10v8H104v-8c0-6 4-10 10-10z" fill="#ffffff" opacity=".9"/>';
1605	echo '<rect x="152" y="200" width="110" height="40" rx="10" fill="#ffffff" opacity=".18"/>';
1606	echo '</g>';
1607	echo '<g filter="url(#holo-s-' . esc_attr($id) . ')">';
1608	echo '<ellipse cx="236" cy="186" rx="64" ry="54" fill="url(#holo-g1-' . esc_attr($id) . ')" opacity=".92"/>';
1609	echo '<circle cx="214" cy="158" r="26" fill="url(#holo-g1-' . esc_attr($id) . ')" opacity=".95"/>';
1610	echo '<circle cx="266" cy="158" r="26" fill="url(#holo-g1-' . esc_attr($id) . ')" opacity=".95"/>';
1611	echo '<ellipse cx="240" cy="152" rx="72" ry="64" fill="url(#holo-g1-' . esc_attr($id) . ')" opacity=".95"/>';
1612	echo '<circle cx="214" cy="154" r="10" fill="#0c0f14" opacity=".75"/>';
1613	echo '<circle cx="266" cy="154" r="10" fill="#0c0f14" opacity=".75"/>';
1614	echo '<circle cx="210" cy="150" r="4" fill="#fff" opacity=".8"/>';
1615	echo '<circle cx="262" cy="150" r="4" fill="#fff" opacity=".8"/>';
1616	echo '<path d="M232 170c6 6 12 6 18 0" stroke="#0c0f14" stroke-opacity=".45" stroke-width="5" stroke-linecap="round"/>';
1617	echo '<path d="M212 120c-8-18 10-34 28-22 8-14 30-10 30 8" fill="none" stroke="#ffffff" stroke-opacity=".55" stroke-width="7" stroke-linecap="round"/>';
1618	echo '</g>';
1619	echo '<g filter="url(#holo-s-' . esc_attr($id) . ')" opacity=".85">';
1620	echo '<path d="M310 218l10 6-6 10-12-4-6 10-12-4 2-12-10-6 6-10 12 4 6-10 12 4-2 12z" fill="#ffffff" opacity=".85"/>';
1621	echo '<path d="M164 220l10 6-6 10-12-4-6 10-12-4 2-12-10-6 6-10 12 4 6-10 12 4-2 12z" fill="#ffffff" opacity=".75"/>';
1622	echo '</g>';
1623	echo '</svg>';
1624	} elseif ($settings['king_addons_holo_card_media_type'] === 'image' && !empty($settings['king_addons_holo_card_image']['url'])) {
1625	echo '<img class="king-addons-holo-card__layer" src="' . esc_url($settings['king_addons_holo_card_image']['url']) . '" alt="" />';
1626	} elseif ($settings['king_addons_holo_card_media_type'] === 'custom_svg' && !empty($settings['king_addons_holo_card_custom_svg'])) {
1627	// Sanitize SVG and add class
1628	$svg = $settings['king_addons_holo_card_custom_svg'];
1629	$svg = preg_replace('/<svg\s/', '<svg class="king-addons-holo-card__layer" ', $svg, 1);
1630	echo wp_kses($svg, [
1631	'svg' => ['class' => true, 'viewBox' => true, 'xmlns' => true, 'role' => true, 'aria-label' => true, 'width' => true, 'height' => true, 'fill' => true],
1632	'defs' => [],
1633	'linearGradient' => ['id' => true, 'x1' => true, 'y1' => true, 'x2' => true, 'y2' => true, 'gradientUnits' => true, 'gradientTransform' => true],
1634	'radialGradient' => ['id' => true, 'cx' => true, 'cy' => true, 'r' => true, 'fx' => true, 'fy' => true, 'gradientUnits' => true],
1635	'stop' => ['offset' => true, 'stop-color' => true, 'stop-opacity' => true, 'style' => true],
1636	'filter' => ['id' => true, 'x' => true, 'y' => true, 'width' => true, 'height' => true],
1637	'feDropShadow' => ['dx' => true, 'dy' => true, 'stdDeviation' => true, 'flood-color' => true, 'flood-opacity' => true],
1638	'feGaussianBlur' => ['in' => true, 'stdDeviation' => true],
1639	'feOffset' => ['dx' => true, 'dy' => true, 'result' => true],
1640	'feBlend' => ['in' => true, 'in2' => true, 'mode' => true],
1641	'g' => ['filter' => true, 'opacity' => true, 'fill' => true, 'transform' => true],
1642	'path' => ['d' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'stroke-linecap' => true, 'stroke-linejoin' => true, 'stroke-opacity' => true, 'opacity' => true, 'transform' => true],
1643	'rect' => ['x' => true, 'y' => true, 'width' => true, 'height' => true, 'rx' => true, 'ry' => true, 'fill' => true, 'opacity' => true, 'transform' => true],
1644	'circle' => ['cx' => true, 'cy' => true, 'r' => true, 'fill' => true, 'opacity' => true, 'transform' => true],
1645	'ellipse' => ['cx' => true, 'cy' => true, 'rx' => true, 'ry' => true, 'fill' => true, 'opacity' => true, 'transform' => true],
1646	'polygon' => ['points' => true, 'fill' => true, 'opacity' => true, 'transform' => true],
1647	'polyline' => ['points' => true, 'fill' => true, 'stroke' => true, 'opacity' => true],
1648	'line' => ['x1' => true, 'y1' => true, 'x2' => true, 'y2' => true, 'stroke' => true, 'stroke-width' => true],
1649	'text' => ['x' => true, 'y' => true, 'fill' => true, 'font-size' => true, 'font-family' => true, 'text-anchor' => true],
1650	'tspan' => ['x' => true, 'y' => true, 'dx' => true, 'dy' => true],
1651	'use' => ['href' => true, 'xlink:href' => true, 'x' => true, 'y' => true, 'width' => true, 'height' => true],
1652	'clipPath' => ['id' => true],
1653	'mask' => ['id' => true],
1654	]);
1655	}
1656
1657	echo '</div>';
1658	}
1659
1660	echo '</div>'; // End poster
1661
1662	// Divider
1663	if ($settings['king_addons_holo_card_divider_enable'] === 'yes') {
1664	echo '<div class="king-addons-holo-card__divider" aria-hidden="true"></div>';
1665	}
1666
1667	// Title
1668	if (!empty($settings['king_addons_holo_card_title'])) {
1669	echo '<div class="king-addons-holo-card__title">';
1670	if ($settings['king_addons_holo_card_title_mark_enable'] === 'yes') {
1671	$mark_type = $settings['king_addons_holo_card_mark_type'] ?? 'default';
1672	if ($mark_type === 'none') {
1673	// Intentionally hidden
1674	} else {
1675	$mark_classes = ['king-addons-holo-card__mark'];
1676	$mark_inner = '';
1677
1678	if ($mark_type === 'icon') {
1679	$mark_classes[] = 'king-addons-holo-card__mark--icon';
1680	$icon = $settings['king_addons_holo_card_mark_icon'] ?? [];
1681	if (!empty($icon['value'])) {
1682	ob_start();
1683	Icons_Manager::render_icon($icon, ['aria-hidden' => 'true']);
1684	$mark_inner = (string) ob_get_clean();
1685	}
1686	}
1687
1688	echo '<span class="' . esc_attr(implode(' ', $mark_classes)) . '" aria-hidden="true">' . $mark_inner . '</span>';
1689	}
1690	}
1691	echo '<span>' . esc_html($settings['king_addons_holo_card_title']) . '</span>';
1692	echo '</div>';
1693	}
1694
1695	// Meta
1696	if (!empty($settings['king_addons_holo_card_meta'])) {
1697	echo '<div class="king-addons-holo-card__meta">' . esc_html($settings['king_addons_holo_card_meta']) . '</div>';
1698	}
1699
1700	echo '</div>'; // End content
1701	echo '</' . esc_html($link_tag) . '>';
1702	echo '</div>';
1703	}
1704	}
1705