/* ===== Global Rotation Control ===== */
.pretpot-rotated-yes.elementor-section{transform-origin:center center}
.pretpot-rotated-yes.elementor-column{transform-origin:center center;z-index:1}

/* ===== Global Skew Control ===== */
.pretpot-skewed-yes.elementor-section{transform-origin:center center}
.pretpot-skewed-yes.elementor-column{transform-origin:center center;z-index:1}

/* =====================================================================
   PRETPOT TEXT Distortion EFFECTS
   ===================================================================== */

.pretpot-text-effect-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

.pretpot-text-effect {
	display: block;
	position: relative;
	line-height: inherit;
}

/* ----------------------------------------------------------------
   1. FLIP
   Each .ptx-char sits inside a perspective container and flips in.
---------------------------------------------------------------- */
.pretpot-text-effect[data-ptx-effect="flip"] {
	perspective: 600px;
}

.pretpot-text-effect[data-ptx-effect="flip"] .ptx-char {
	display: inline-block;
	opacity: 0;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	/* initial state set by JS based on axis */
}

.pretpot-text-effect[data-ptx-effect="flip"] .ptx-char.ptx-flipped {
	animation: ptx-flip-in var(--ptx-flip-dur, 500ms) cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes ptx-flip-in-Y {
	0%   { opacity: 0; transform: rotateY(90deg); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: rotateY(0deg); }
}

@keyframes ptx-flip-in-X {
	0%   { opacity: 0; transform: rotateX(-90deg); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: rotateX(0deg); }
}

/* ----------------------------------------------------------------
   2. STAGGER FADE
   Each .ptx-char or .ptx-word rises and fades in.
---------------------------------------------------------------- */
.pretpot-text-effect[data-ptx-effect="stagger_fade"] .ptx-char,
.pretpot-text-effect[data-ptx-effect="stagger_fade"] .ptx-word {
	display: inline-block;
	opacity: 0;
	/* transform set inline by JS */
	will-change: opacity, transform;
}

/* ----------------------------------------------------------------
   3. STROKE DRAW
   SVG text — stroke-dashoffset animates from full length to 0.
   The <svg> is injected by JS to match the element dimensions.
---------------------------------------------------------------- */
.pretpot-text-effect[data-ptx-effect="stroke_draw"] {
	/* Original HTML text hidden; SVG placed on top */
	color: transparent;
	position: relative;
}

.pretpot-text-effect[data-ptx-effect="stroke_draw"] .ptx-stroke-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ptx-stroke-svg text {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ptx-stroke-svg text.ptx-drawing {
	animation: ptx-stroke-draw var(--ptx-stroke-dur, 2s) ease forwards;
}

@keyframes ptx-stroke-draw {
	to { stroke-dashoffset: 0; }
}

.ptx-stroke-svg text.ptx-fill-in {
	animation: ptx-stroke-fill var(--ptx-stroke-dur, 2s) ease forwards;
}

@keyframes ptx-stroke-fill {
	0%   { fill-opacity: 0; }
	100% { fill-opacity: 1; }
}

/* ----------------------------------------------------------------
   4. WAVE BOUNCE
   Continuous CSS animation — each .ptx-char gets its own
   animation-delay so they form a sine-wave.
---------------------------------------------------------------- */
.pretpot-text-effect[data-ptx-effect="wave_bounce"] .ptx-char {
	display: inline-block;
	animation: ptx-wave-bounce var(--ptx-wave-speed, 0.6s) ease-in-out infinite alternate;
	/* delay set inline by JS */
}

@keyframes ptx-wave-bounce {
	0%   { transform: translateY(0); }
	100% { transform: translateY(calc(-1 * var(--ptx-wave-h, 12px))); }
}

/* ----------------------------------------------------------------
   5. OUTLINE FILL
   Starts with -webkit-text-stroke and transparent fill;
   JS adds .ptx-filled class to trigger the colour transition.
---------------------------------------------------------------- */
.pretpot-text-effect[data-ptx-effect="outline_fill"] {
	-webkit-text-stroke: var(--ptx-ol-stroke-width, 2px) var(--ptx-ol-stroke-color, #6366f1);
	color: transparent;
	transition: color var(--ptx-ol-duration, 600ms) ease;
}

.pretpot-text-effect[data-ptx-effect="outline_fill"].ptx-filled {
	color: var(--ptx-ol-fill-color, #6366f1);
}


/* ===== Pretpot Toggle Button ===== */
.pretpot-toggle-btn-wrapper{display:inline-block;width:100%;text-align:var(--alignment,center)}
.pretpot-toggle-btn{display:inline-flex;align-items:center;gap:8px;background:var(--btn-bg,#f1f3f5);border-radius:8px;padding:var(--btn-pad,8px 16px);cursor:pointer;text-decoration:none;transition:background .3s,box-shadow .3s}
.pretpot-toggle-btn:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}
.pretpot-toggle-pill{display:inline-flex;align-items:center;gap:6px;background:var(--pill-off-bg,#ffffff);padding:4px 12px;border-radius:999px;box-shadow:0 2px 4px rgba(0,0,0,.15);transition:background .3s,color .3s}
.pretpot-toggle-btn.pretpot-active .pretpot-toggle-pill{background:var(--pill-on-bg,#ffffff);color:var(--pill-on-color,#007cba)}
.pretpot-toggle-right{font-weight:600;color:var(--right-color,#555);white-space:nowrap}

/* ===== PRETPOT PAYPAL & STRIPE BUTTONS ===== */
.pretpot-paypal-wrapper,.pretpot-stripe-wrapper{display:inline-block;width:100%}
.pretpot-paypal-button,.pretpot-stripe-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 30px;border:none;border-radius:5px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-decoration:none}
.pretpot-paypal-button:hover,.pretpot-stripe-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.2)}
.pretpot-paypal-icon,.pretpot-stripe-icon{display:inline-flex;align-items:center}

/* ===== PRETPOT TABLE OF CONTENTS ===== */
.pretpot-toc-wrapper{position:relative;width:100%}
.pretpot-toc-container{position:relative;background:#f9f9f9;padding:20px;border-radius:8px}
.pretpot-toc-sticky{position:sticky;top:20px;z-index:100}
.pretpot-toc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.pretpot-toc-title{margin:0;font-size:18px;font-weight:700;color:#333}
.pretpot-toc-toggle{background:transparent;border:none;cursor:pointer;width:24px;height:24px;position:relative}
.pretpot-toc-toggle-icon{display:block;width:100%;height:2px;background:#333;position:relative;transition:all 0.3s ease}
.pretpot-toc-toggle-icon::before,.pretpot-toc-toggle-icon::after{content:'';position:absolute;width:100%;height:2px;background:#333;left:0;transition:all 0.3s ease}
.pretpot-toc-toggle-icon::before{top:-6px}
.pretpot-toc-toggle-icon::after{top:6px}
.pretpot-toc-minimized .pretpot-toc-content{display:none}
.pretpot-toc-minimized .pretpot-toc-toggle-icon{background:transparent}
.pretpot-toc-minimized .pretpot-toc-toggle-icon::before{top:0;transform:rotate(45deg)}
.pretpot-toc-minimized .pretpot-toc-toggle-icon::after{top:0;transform:rotate(-45deg)}
.pretpot-toc-list{list-style:none;margin:0;padding:0}
.pretpot-toc-list li{margin-bottom:8px}
.pretpot-toc-list a{text-decoration:none;color:#555;transition:color 0.3s ease;display:block}
.pretpot-toc-list a:hover{color:#007cba}
.pretpot-toc-list a.active{color:#007cba;font-weight:600}
.pretpot-toc-list ul{margin-left:20px;margin-top:8px}
@media(max-width:768px){.pretpot-toc-container{padding:15px}}

/* ===== PRETPOT BLURRED GLASS ===== */
.pretpot-blurred-glass-yes{position:relative!important;overflow:hidden!important;isolation:isolate!important}
.pretpot-blurred-glass-yes::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;border-radius:inherit;background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pretpot-blurred-glass-yes>*{position:relative;z-index:2}

/* ===== PRETPOT BLOG POSTS ===== */
.pretpot-blog-posts-wrapper{position:relative;width:100%}
.pretpot-blog-grid{display:grid;width:100%}
.pretpot-blog-post-card{position:relative;display:flex;flex-direction:column;transition:all 0.3s ease;overflow:hidden}
.pretpot-blog-post-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.pretpot-blog-post-image{position:relative;width:100%;overflow:hidden;line-height:0;background:#f5f5f5;flex-shrink:0}
.pretpot-blog-post-image a{display:block;width:100%;position:relative;overflow:hidden}
.pretpot-blog-post-image img{display:block;width:100%;transition:transform 0.3s ease;position:absolute;top:0;left:0}
.pretpot-blog-post-image:hover img{transform:scale(1.05)}
.pretpot-blog-post-title{margin:0;line-height:1.4}
.pretpot-blog-post-title a{text-decoration:none;transition:color 0.3s ease}
.pretpot-blog-post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px}
.pretpot-meta-separator{display:inline-block}
.pretpot-blog-post-excerpt{line-height:1.6}
.pretpot-blog-read-more-wrap{margin-top:auto}
.pretpot-blog-read-more{display:inline-block;text-decoration:none;transition:all 0.3s ease;font-weight:600}
.pretpot-blog-read-more:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,124,186,0.3)}
@media(max-width:768px){.pretpot-blog-post-card{padding:15px}.pretpot-blog-post-meta{font-size:13px}}
.pretpot-blog-posts-wrapper.loading{opacity:0.6;pointer-events:none}
.pretpot-blog-posts-wrapper .pretpot-no-posts{text-align:center;padding:60px 20px;color:#666;font-size:16px}
.pretpot-blog-posts-wrapper .pretpot-no-posts::before{content:'📝';display:block;font-size:48px;margin-bottom:20px;opacity:0.3}