/* =========================================================
 *  20/80 Custom Widgets — shared front-end styles
 *  Colors/spacing that are editable live in Elementor controls.
 *  This file holds structural rules only.
 * ========================================================= */

/* ---------- Widget 1: Tooltip Button ---------- */
.cw-tt-wrap{position:relative;display:inline-block;
	font-family:'Heebo','Assistant',Arial,sans-serif;}

/* trigger: frosted-glass circle */
.cw-tt-trigger{
	cursor:pointer;box-sizing:border-box;width:44px;height:44px;
	border-radius:50%;background:rgba(255,255,255,.14);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	border: none;
	box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.10);
	display:flex;align-items:center;justify-content:center;padding:0;
}
.cw-tt-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;

  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1) 12%, 
    rgba(255, 255, 255, 0) 25%,  
    rgba(255, 255, 255, 0) 75%,  
    rgba(255, 255, 255, 1) 88%   
  );
  
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  pointer-events: none; 
}

.cw-tt-pill{display:block;width:9px;height:24px;border-radius:6px;
	background:#f3ece2;}

.cw-tt-box{display:none;position:absolute;top:50%;transform:translateY(-50%);
	width:235px;z-index:9999;border:1px solid rgba(255,255,255,.06);
	border-radius:16px;padding:18px 16px;text-align:right;--cw-arrow:#2a211b;}
.cw-tt-box.cw-tt-open{display:block;}
.cw-tt-box p{font-size:14px;line-height:1.6;margin:0 0 14px;font-weight:400;color:#ece2d6;}

/* side positioning */
.cw-tt-box.cw-tt-left{right:calc(100% + 16px);left:auto;}
.cw-tt-box.cw-tt-right{left:calc(100% + 16px);right:auto;}

/* action button */
.cw-tt-action{cursor:pointer;display:inline-flex;align-items:center;gap:8px;
	background:#ece3d6;color:#3a322b;font-size:14px;font-weight:500;
	padding:9px 22px;border-radius:30px;text-decoration:none;}
.cw-tt-glyph{font-size:16px;}

/* arrow (points toward the icon, color follows --cw-arrow) */
.cw-tt-arrow{position:absolute;top:50%;transform:translateY(-50%);width:0;height:0;
	border-top:9px solid transparent;border-bottom:9px solid transparent;}
.cw-tt-box.cw-tt-left  .cw-tt-arrow{right:-9px;border-left:10px solid var(--cw-arrow);}
.cw-tt-box.cw-tt-right .cw-tt-arrow{left:-9px;border-right:10px solid var(--cw-arrow);}

/* Fill-parent / stick-to-bottom layout */
.cw-tt-parent{position:relative;}          /* add this class to the parent container */
.cw-tt-wrap-fill{position:static;}         /* let the box anchor to the parent, not the icon */
.cw-tt-box.cw-tt-fill{top:auto;bottom:0;left:0;right:0;width:auto;
	transform:none;text-align:right;}
.cw-tt-box.cw-tt-fill .cw-tt-arrow{display:none;}
.cw-tt-box.cw-tt-fill{min-width:0;width:90%;margin: auto;}
.cw-tt-wrap-fill{position:static !important;} /* never let the wrap become the anchor */
.cw-tt-wrap-fill .cw-tt-trigger{position:absolute;top:45%;right:24px;z-index:6;}

/* ---------- Widget 2: Before / After ---------- */
.cw-ba{position:relative;width:100%;margin:0 auto;overflow:hidden;
	border-radius:14px;touch-action:none;user-select:none;line-height:0;}
.cw-ba-img{position:absolute;top:0;left:0;width:100%;height:100%;}
.cw-ba-after{position:relative;}            /* sets the natural height */
.cw-ba-img img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio: 4 / 5;
	pointer-events:none;}
.cw-ba-after img{height:auto;}              /* drive container height from this image */
.cw-ba-before{will-change:clip-path;}
.cw-ba-handle{position:absolute;top:0;bottom:0;left:50%;width:0;
	transform:translateX(-50%);z-index:5;cursor:ew-resize;}
.cw-ba-line{position:absolute;top:0;bottom:0;left:50%;width:1px;
	transform:translateX(-50%);background:#fff;}
.cw-ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:40px;height:40px;border-radius:50%;background: rgba(247, 245, 245, 0.15);backdrop-filter: blur(4px);color:#a8927f;
	display:flex;align-items:center;justify-content:center;font-size:20px;
	box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1);}
.cw-ba-grip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;

  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1) 12%, 
    rgba(255, 255, 255, 0) 25%,  
    rgba(255, 255, 255, 0) 75%,  
    rgba(255, 255, 255, 1) 88%   
  );
  
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  pointer-events: none; 	
}
.cw-ba-label{position:absolute;bottom:14px;border-radius:20px;
	font-size:14px;font-weight:500;line-height:1.2; z-index: 1;
	background:rgba(58,50,43,.55);color:#fff;pointer-events:none;}
.cw-ba-label-before{left:18px;}
.cw-ba-label-after{right:18px;}