/**
 * Frontend CSS for Custom Shaped Containers (v1.1.3 - Major Shape Expansion)
 * 
 * New in v1.1.3:
 * - Added Curved Edge (Left & Right) with controllable depth
 * - Added Wave effects (Top & Bottom) with amplitude control
 * - Added Trapezoid and Parallelogram shapes
 * - Added additional Cut Corners (Bottom-Left & Bottom-Right)
 * - Added Triangle variations (Up, Left, Right)
 * - Added 6-Point Star and Heart shapes
 * - Added Speech Bubbles (Left & Right) with customizable tail colors
 * - Added Arrow Left and Chevron shapes (Left & Right)
 * - Added Badge and Ticket Stub shapes
 * - Enhanced controls for better customization
 */

/* --- Base Styles for Shaped Elements --- */
.elementor-element.csc-shape-tv-screen,
.elementor-element.csc-shape-slanted-edge-bl,
.elementor-element.csc-shape-slanted-edge-br,
.elementor-element.csc-shape-slanted-edge-tl,
.elementor-element.csc-shape-slanted-edge-tr,
.elementor-element.csc-shape-slanted-edge-double-tlbr,
.elementor-element.csc-shape-curved-edge-bottom,
.elementor-element.csc-shape-curved-edge-top,
.elementor-element.csc-shape-curved-edge-left,
.elementor-element.csc-shape-curved-edge-right,
.elementor-element.csc-shape-wave-top,
.elementor-element.csc-shape-wave-bottom,
.elementor-element.csc-shape-trapezoid,
.elementor-element.csc-shape-parallelogram,
.elementor-element.csc-shape-rounded-edge-soft,
.elementor-element.csc-shape-rounded-edge-medium,
.elementor-element.csc-shape-rounded-edge-hard,
.elementor-element.csc-shape-circle,
.elementor-element.csc-shape-triangle-down,
.elementor-element.csc-shape-triangle-up,
.elementor-element.csc-shape-triangle-left,
.elementor-element.csc-shape-triangle-right,
.elementor-element.csc-shape-message-bubble,
.elementor-element.csc-shape-speech-bubble-left,
.elementor-element.csc-shape-speech-bubble-right,
.elementor-element.csc-shape-pentagon,
.elementor-element.csc-shape-hexagon,
.elementor-element.csc-shape-octagon,
.elementor-element.csc-shape-rhombus,
.elementor-element.csc-shape-star-5,
.elementor-element.csc-shape-star-6,
.elementor-element.csc-shape-heart,
.elementor-element.csc-shape-cut-corner-tr,
.elementor-element.csc-shape-cut-corner-tl,
.elementor-element.csc-shape-cut-corner-bl,
.elementor-element.csc-shape-cut-corner-br,
.elementor-element.csc-shape-arrow-right,
.elementor-element.csc-shape-arrow-left,
.elementor-element.csc-shape-chevron-right,
.elementor-element.csc-shape-chevron-left,
.elementor-element.csc-shape-badge,
.elementor-element.csc-shape-ticket,
.elementor-element.csc-shape-ribbon-cut-left,
.elementor-element.csc-shape-ribbon-cut-right,
.elementor-element.csc-shape-folded-corner-tl,
.elementor-element.csc-shape-folded-corner-br,
.elementor-element.csc-shape-inner-curve-tl,
.elementor-element.csc-shape-inner-curve-br
{
    /* Don't hide overflow by default, let specific shapes decide */
    /* overflow: hidden; */
    transition: clip-path 0.3s ease, border-radius 0.3s ease, background 0.3s ease, -webkit-mask-image 0.3s ease, mask-image 0.3s ease;
    position: relative; /* Needed for pseudo-elements and masks */
    /* Define CSS variables with defaults */
    --csc-slant-amount: 15%;
    --csc-cut-size: 10%;
    --csc-inner-curve-radius: 25px; /* Default inner curve radius */
    --csc-ribbon-size: 15px; /* Default ribbon cut size */
    --csc-tv-inset-top: 5%; /* Default TV Inset Top */
    --csc-tv-inset-right: 5%; /* Default TV Inset Right */
    --csc-tv-inset-bottom: 15%; /* Default TV Inset Bottom */
    --csc-tv-inset-left: 5%; /* Default TV Inset Left */
    --csc-tv-roundness: 10%; /* Default TV Corner Roundness */
    --csc-pseudo-color: #CCCCCC; /* Default pseudo element color */
    --csc-wave-amplitude: 10%; /* Default wave amplitude */
    --csc-trapezoid-angle: 20%; /* Default trapezoid angle */
    --csc-curve-depth: 30px; /* Default curve depth for left/right curves */
}

/* --- Basic Shapes --- */
.elementor-element.csc-shape-rounded-edge-soft { border-radius: 15px !important; clip-path: none !important; overflow: visible; }
.elementor-element.csc-shape-rounded-edge-medium { border-radius: 30px !important; clip-path: none !important; overflow: visible; }
.elementor-element.csc-shape-rounded-edge-hard { border-radius: 50px !important; clip-path: none !important; overflow: visible; }
.elementor-element.csc-shape-circle { clip-path: circle(50% at 50% 50%); border-radius: 0 !important; overflow: hidden; }

/* --- Edges & Corners --- */
.elementor-element.csc-shape-slanted-edge-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% calc(100% - var(--csc-slant-amount, 15%))); border-radius: 0 !important; overflow: hidden; }
.elementor-element.csc-shape-slanted-edge-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--csc-slant-amount, 15%)), 0% 100%); border-radius: 0 !important; overflow: hidden; }
.elementor-element.csc-shape-slanted-edge-tl { clip-path: polygon(0% var(--csc-slant-amount, 15%), 100% 0%, 100% 100%, 0% 100%); border-radius: 0 !important; overflow: hidden; }
.elementor-element.csc-shape-slanted-edge-tr { clip-path: polygon(0% 0%, 100% var(--csc-slant-amount, 15%), 100% 100%, 0% 100%); border-radius: 0 !important; overflow: hidden; }
.elementor-element.csc-shape-slanted-edge-double-tlbr { clip-path: polygon(0% 15%, 100% 0%, 100% 85%, 0% 100%); border-radius: 0 !important; overflow: hidden; } /* Double slant not using slider yet */

.elementor-element.csc-shape-curved-edge-bottom { border-radius: 0 0 50% 50% / 0 0 30px 30px !important; clip-path: none !important; overflow: visible; }
.elementor-element.csc-shape-curved-edge-top { border-radius: 50% 50% 0 0 / 30px 30px 0 0 !important; clip-path: none !important; overflow: visible; }
.elementor-element.csc-shape-curved-edge-left { border-radius: var(--csc-curve-depth, 30px) 0 0 var(--csc-curve-depth, 30px) / 50% 0 0 50% !important; clip-path: none !important; overflow: visible; }
.elementor-element.csc-shape-curved-edge-right { border-radius: 0 var(--csc-curve-depth, 30px) var(--csc-curve-depth, 30px) 0 / 0 50% 50% 0 !important; clip-path: none !important; overflow: visible; }

.elementor-element.csc-shape-cut-corner-tr { clip-path: polygon(0% 0%, calc(100% - var(--csc-cut-size, 10%)) 0%, 100% var(--csc-cut-size, 10%), 100% 100%, 0% 100%); border-radius: 0 !important; overflow: hidden; }
.elementor-element.csc-shape-cut-corner-tl { clip-path: polygon(var(--csc-cut-size, 10%) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--csc-cut-size, 10%)); border-radius: 0 !important; overflow: hidden; }
.elementor-element.csc-shape-cut-corner-bl { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, var(--csc-cut-size, 10%) 100%, 0% calc(100% - var(--csc-cut-size, 10%))); border-radius: 0 !important; overflow: hidden; }
.elementor-element.csc-shape-cut-corner-br { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--csc-cut-size, 10%)), calc(100% - var(--csc-cut-size, 10%)) 100%, 0% 100%); border-radius: 0 !important; overflow: hidden; }

/* Inner Curve (Top-Left) - Mask Technique */
.elementor-element.csc-shape-inner-curve-tl {
    /* Define the mask */
    -webkit-mask-image: radial-gradient(circle at 0 0,
        transparent var(--csc-inner-curve-radius, 25px), /* Transparent center creates the curve */
        black calc(var(--csc-inner-curve-radius, 25px) + 1px) /* Opaque area starts just outside */
    );
    mask-image: radial-gradient(circle at 0 0,
        transparent var(--csc-inner-curve-radius, 25px),
        black calc(var(--csc-inner-curve-radius, 25px) + 1px)
    );
    /* Ensure mask covers the element and doesn't repeat */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top left;
    mask-position: top left;
    -webkit-mask-size: auto; /* Adjust size if needed */
    mask-size: auto;

    /* Reset other properties that might interfere */
    clip-path: none !important;
    border-radius: 0 !important;
    overflow: visible; /* Mask handles the clipping */
    /* Background is now controlled by Elementor Style Tab */
}
/* Inner Curve (Bottom-Right) - Mask Technique */
.elementor-element.csc-shape-inner-curve-br {
     -webkit-mask-image: radial-gradient(circle at 100% 100%, transparent var(--csc-inner-curve-radius, 25px), black calc(var(--csc-inner-curve-radius, 25px) + 1px));
    mask-image: radial-gradient(circle at 100% 100%, transparent var(--csc-inner-curve-radius, 25px), black calc(var(--csc-inner-curve-radius, 25px) + 1px));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom right;
    mask-position: bottom right;
    -webkit-mask-size: auto;
    mask-size: auto;

    clip-path: none !important;
    border-radius: 0 !important;
    overflow: visible;
}


/* --- Geometric Shapes --- */
.elementor-element.csc-shape-triangle-down,
.elementor-element.csc-shape-triangle-up,
.elementor-element.csc-shape-triangle-left,
.elementor-element.csc-shape-triangle-right,
.elementor-element.csc-shape-rhombus,
.elementor-element.csc-shape-pentagon,
.elementor-element.csc-shape-hexagon,
.elementor-element.csc-shape-octagon,
.elementor-element.csc-shape-star-5,
.elementor-element.csc-shape-star-6,
.elementor-element.csc-shape-heart {
    border-radius: 0 !important;
    overflow: hidden; /* Clip content for these polygon shapes */
}
.elementor-element.csc-shape-triangle-down { clip-path: polygon(50% 100%, 0 0, 100% 0); }
.elementor-element.csc-shape-triangle-up { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.elementor-element.csc-shape-triangle-left { clip-path: polygon(0% 50%, 100% 0%, 100% 100%); }
.elementor-element.csc-shape-triangle-right { clip-path: polygon(100% 50%, 0% 0%, 0% 100%); }
.elementor-element.csc-shape-rhombus { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.elementor-element.csc-shape-pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.elementor-element.csc-shape-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.elementor-element.csc-shape-octagon { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
.elementor-element.csc-shape-star-5 { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.elementor-element.csc-shape-star-6 { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 79% 61%, 98% 87%, 61% 87%, 50% 100%, 39% 87%, 2% 87%, 21% 61%, 2% 35%, 39% 35%); }
.elementor-element.csc-shape-heart { 
    clip-path: polygon(
        50% 25%, 
        60% 5%, 80% 5%, 95% 20%, 95% 35%, 80% 50%, 50% 90%, 
        20% 50%, 5% 35%, 5% 20%, 20% 5%, 40% 5%
    ); 
}

/* --- Misc & Special Shapes --- */
/* TV Screen - Using CSS Variables for inset and roundness */
.elementor-element.csc-shape-tv-screen {
    clip-path: inset(
        var(--csc-tv-inset-top, 5%)
        var(--csc-tv-inset-right, 5%)
        var(--csc-tv-inset-bottom, 15%)
        var(--csc-tv-inset-left, 5%)
        round var(--csc-tv-roundness, 10%) / calc(var(--csc-tv-roundness, 10%) * 3) /* Example complex radius */
    );
    border-radius: 0 !important;
    overflow: hidden;
}
.elementor-element.csc-shape-message-bubble { clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); border-radius: 20px !important; overflow: hidden; } /* Can combine clip-path and border-radius */
.elementor-element.csc-shape-arrow-right { clip-path: polygon(0% 20%, 75% 20%, 75% 0%, 100% 50%, 75% 100%, 75% 80%, 0% 80%); border-radius: 0 !important; overflow: hidden; }
.elementor-element.csc-shape-arrow-left { clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%); border-radius: 0 !important; overflow: hidden; }

/* Ribbon (Cut Left) - Using ::before and CSS variables */
.elementor-element.csc-shape-ribbon-cut-left {
    padding-left: calc(var(--csc-ribbon-size, 15px) + 10px) !important; /* Make space based on ribbon size */
    clip-path: none !important;
    border-radius: 0 !important;
    overflow: visible; /* Allow pseudo-element */
}
.elementor-element.csc-shape-ribbon-cut-left::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--csc-ribbon-size, 15px) 0 var(--csc-ribbon-size, 15px) var(--csc-ribbon-size, 15px);
    border-color: transparent transparent transparent var(--csc-pseudo-color, #cccccc);
}

/* Ribbon (Cut Right) - Using ::before and CSS variables */
.elementor-element.csc-shape-ribbon-cut-right {
    padding-right: calc(var(--csc-ribbon-size, 15px) + 10px) !important;
    clip-path: none !important;
    border-radius: 0 !important;
    overflow: visible;
}
.elementor-element.csc-shape-ribbon-cut-right::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--csc-ribbon-size, 15px) var(--csc-ribbon-size, 15px) var(--csc-ribbon-size, 15px) 0;
    border-color: transparent var(--csc-pseudo-color, #cccccc) transparent transparent;
}

/* Folded Corner (Top-Left) - Using ::before and CSS variables */
.elementor-element.csc-shape-folded-corner-tl {
    clip-path: none !important;
    border-radius: 0 !important;
    overflow: visible;
}
.elementor-element.csc-shape-folded-corner-tl::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    /* Use a fixed size for fold for now, slider could be added */
    border-width: 0 0 20px 20px;
    border-color: transparent transparent var(--csc-pseudo-color, #cccccc) transparent;
    filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.2));
}

/* Folded Corner (Bottom-Right) - Using ::before and CSS variables */
.elementor-element.csc-shape-folded-corner-br {
    clip-path: none !important;
    border-radius: 0 !important;
    overflow: visible;
}
.elementor-element.csc-shape-folded-corner-br::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    /* Use a fixed size for fold for now, slider could be added */
    border-width: 20px 20px 0 0;
    border-color: var(--csc-pseudo-color, #cccccc) transparent transparent transparent;
    filter: drop-shadow(1px -1px 1px rgba(0,0,0,0.2));
}

/* Wave Effects */
.elementor-element.csc-shape-wave-top { 
    clip-path: polygon(
        0% var(--csc-wave-amplitude, 10%), 
        25% 0%, 
        50% var(--csc-wave-amplitude, 10%), 
        75% 0%, 
        100% var(--csc-wave-amplitude, 10%), 
        100% 100%, 
        0% 100%
    ); 
    border-radius: 0 !important; 
    overflow: hidden; 
}
.elementor-element.csc-shape-wave-bottom { 
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        100% calc(100% - var(--csc-wave-amplitude, 10%)), 
        75% 100%, 
        50% calc(100% - var(--csc-wave-amplitude, 10%)), 
        25% 100%, 
        0% calc(100% - var(--csc-wave-amplitude, 10%))
    ); 
    border-radius: 0 !important; 
    overflow: hidden; 
}

/* Trapezoid and Parallelogram */
.elementor-element.csc-shape-trapezoid { 
    clip-path: polygon(
        var(--csc-trapezoid-angle, 20%) 0%, 
        calc(100% - var(--csc-trapezoid-angle, 20%)) 0%, 
        100% 100%, 
        0% 100%
    ); 
    border-radius: 0 !important; 
    overflow: hidden; 
}
.elementor-element.csc-shape-parallelogram { 
    clip-path: polygon(
        var(--csc-slant-amount, 15%) 0%, 
        100% 0%, 
        calc(100% - var(--csc-slant-amount, 15%)) 100%, 
        0% 100%
    ); 
    border-radius: 0 !important; 
    overflow: hidden; 
}

/* Speech Bubbles with Pseudo-elements */
.elementor-element.csc-shape-speech-bubble-left {
    border-radius: 15px !important;
    clip-path: none !important;
    overflow: visible;
    margin-left: 20px !important;
}
.elementor-element.csc-shape-speech-bubble-left::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 20px 10px 0;
    border-color: transparent var(--csc-pseudo-color, #cccccc) transparent transparent;
}

.elementor-element.csc-shape-speech-bubble-right {
    border-radius: 15px !important;
    clip-path: none !important;
    overflow: visible;
    margin-right: 20px !important;
}
.elementor-element.csc-shape-speech-bubble-right::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent var(--csc-pseudo-color, #cccccc);
}

/* Chevron Shapes */
.elementor-element.csc-shape-chevron-right { clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%); border-radius: 0 !important; overflow: hidden; }
.elementor-element.csc-shape-chevron-left { clip-path: polygon(25% 0%, 100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%); border-radius: 0 !important; overflow: hidden; }

/* Badge Shape */
.elementor-element.csc-shape-badge {
    border-radius: 25px 25px 25px 0 !important;
    clip-path: none !important;
    overflow: visible;
    position: relative;
}
.elementor-element.csc-shape-badge::before {
    content: "";
    position: absolute;
    bottom: -10px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent var(--csc-pseudo-color, #cccccc) transparent transparent;
}

/* Ticket Shape */
.elementor-element.csc-shape-ticket {
    clip-path: polygon(
        0% 0%, 
        85% 0%, 
        90% 5%, 
        95% 0%, 
        100% 0%, 
        100% 100%, 
        85% 100%, 
        90% 95%, 
        95% 100%, 
        0% 100%
    );
    border-radius: 0 !important;
    overflow: hidden;
}

/* --- Responsive Considerations --- */
@media (max-width: 767px) {
    /* Adjust default variable values for mobile if needed */
    .elementor-element {
       /* Example: reduce default slant on mobile */
       /* --csc-slant-amount: 10%; */
    }

    /* Adjust pseudo-element sizes/paddings */
    .elementor-element.csc-shape-ribbon-cut-left { padding-left: calc(var(--csc-ribbon-size, 12px) + 8px) !important; }
    .elementor-element.csc-shape-ribbon-cut-right { padding-right: calc(var(--csc-ribbon-size, 12px) + 8px) !important; }
    /* Note: Ribbon border-width uses the variable now, slider controls it */

    .elementor-element.csc-shape-folded-corner-tl::before { border-width: 0 0 15px 15px; } /* Fixed size fold */
    .elementor-element.csc-shape-folded-corner-br::before { border-width: 15px 15px 0 0; } /* Fixed size fold */
}

/* --- Default State --- */
.elementor-element.csc-shape-default {
    clip-path: none !important;
    -webkit-mask-image: none !important; /* Reset mask */
    mask-image: none !important;
    overflow: visible; /* Reset overflow for default */
    /* Reset variables */
    --csc-slant-amount: 15%;
    --csc-cut-size: 10%;
    --csc-inner-curve-radius: 25px;
    --csc-ribbon-size: 15px;
    --csc-tv-inset-top: 5%;
    --csc-tv-inset-right: 5%;
    --csc-tv-inset-bottom: 15%;
    --csc-tv-inset-left: 5%;
    --csc-tv-roundness: 10%;
    --csc-pseudo-color: #CCCCCC;
}
/* Remove pseudo-elements for default state */
.elementor-element.csc-shape-default::before,
.elementor-element.csc-shape-default::after {
    content: none !important;
    display: none !important;
}