/**
 * Frontend CSS for Custom Shaped Containers (v1.1.4)
 */

/* --- Base Styles --- */
.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-left,
.elementor-element.csc-shape-slanted-edge-right,
.elementor-element.csc-shape-slanted-edge-left-top,
.elementor-element.csc-shape-slanted-edge-left-bottom,
.elementor-element.csc-shape-slanted-edge-right-top,
.elementor-element.csc-shape-slanted-edge-right-bottom,
.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-rectangle-chevron-right,
.elementor-element.csc-shape-rectangle-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 {
    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;
    --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-wave-amplitude: 10%;
    --csc-trapezoid-angle: 20%;
    --csc-curve-depth: 30px;
    --csc-chevron-pointiness: 20px;
    --csc-speech-bubble-color: #CCCCCC;
    --csc-folded-corner-color: #CCCCCC;
    --csc-ribbon-color: #CCCCCC;
    --csc-badge-color: #CCCCCC;
    --csc-ticket-color: #FFFFFF;
}

/* --- Shapes --- */
.elementor-element.csc-shape-rounded-edge-soft { border-radius: 15px !important; }
.elementor-element.csc-shape-rounded-edge-medium { border-radius: 30px !important; }
.elementor-element.csc-shape-rounded-edge-hard { border-radius: 50px !important; }
.elementor-element.csc-shape-circle { clip-path: circle(50% at 50% 50%) !important; }
.elementor-element.csc-shape-slanted-edge-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% calc(100% - var(--csc-slant-amount))) !important; }
.elementor-element.csc-shape-slanted-edge-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--csc-slant-amount)), 0% 100%) !important; }
.elementor-element.csc-shape-slanted-edge-tl { clip-path: polygon(0% var(--csc-slant-amount), 100% 0%, 100% 100%, 0% 100%) !important; }
.elementor-element.csc-shape-slanted-edge-tr { clip-path: polygon(0% 0%, 100% var(--csc-slant-amount), 100% 100%, 0% 100%) !important; }
.elementor-element.csc-shape-slanted-edge-left { clip-path: polygon(0% 0, 100% var(--csc-slant-amount), 100% calc(100% - var(--csc-slant-amount)), 0% 100%); }
.elementor-element.csc-shape-slanted-edge-right { clip-path: polygon(0% var(--csc-slant-amount), 100% 0, 100% 100%, 0% calc(100% - var(--csc-slant-amount))); }
.elementor-element.csc-shape-slanted-edge-left-top { clip-path: polygon(var(--csc-slant-amount) 0,100% 0,100% 100%,0 100%) !important; }
.elementor-element.csc-shape-slanted-edge-left-bottom { clip-path: polygon(0 0,100% 0,100% 100%,var(--csc-slant-amount) 100%) !important; }
.elementor-element.csc-shape-slanted-edge-right-top { clip-path: polygon(0 0,calc(100% - var(--csc-slant-amount)) 0,100% 100%,0 100%) !important; }
.elementor-element.csc-shape-slanted-edge-right-bottom { clip-path: polygon(0 0,100% 0,calc(100% - var(--csc-slant-amount)) 100%,0 100%) !important; }
.elementor-element.csc-shape-slanted-edge-double-tlbr { clip-path: polygon(0% 15%, 100% 0%, 100% 85%, 0% 100%) !important; }
.elementor-element.csc-shape-curved-edge-bottom { border-radius: 0 0 50% 50% / 0 0 30px 30px !important; }
.elementor-element.csc-shape-curved-edge-top { border-radius: 50% 50% 0 0 / 30px 30px 0 0 !important; }
.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; }
.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; }
.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%) !important; }
.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%)) !important; }
.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%))) !important; }
.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%) !important; }
.elementor-element.csc-shape-inner-curve-tl { -webkit-mask-image: radial-gradient(circle at 0 0, transparent var(--csc-inner-curve-radius, 25px), black calc(var(--csc-inner-curve-radius, 25px) + 1px)) !important; }
.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)) !important; }
.elementor-element.csc-shape-triangle-down { clip-path: polygon(50% 100%, 0 0, 100% 0) !important; }
.elementor-element.csc-shape-triangle-up { clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important; }
.elementor-element.csc-shape-triangle-left { clip-path: polygon(0% 50%, 100% 0%, 100% 100%) !important; }
.elementor-element.csc-shape-triangle-right { clip-path: polygon(100% 50%, 0% 0%, 0% 100%) !important; }
.elementor-element.csc-shape-rhombus { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important; }
.elementor-element.csc-shape-pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) !important; }
.elementor-element.csc-shape-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) !important; }
.elementor-element.csc-shape-octagon { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%) !important; }
.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%) !important; }
.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%) !important; }
.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%) !important; }
.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%)) !important; }
.elementor-element.csc-shape-message-bubble { clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%) !important; border-radius: 20px !important; }
.elementor-element.csc-shape-arrow-right { clip-path: polygon(0% 20%, 75% 20%, 75% 0%, 100% 50%, 75% 100%, 75% 80%, 0% 80%) !important; }
.elementor-element.csc-shape-arrow-left { clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%) !important; }
.elementor-element.csc-shape-ribbon-cut-left { padding-left: calc(var(--csc-ribbon-size, 15px) + 10px) !important; }
.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-ribbon-color, #cccccc); }
.elementor-element.csc-shape-ribbon-cut-right { padding-right: calc(var(--csc-ribbon-size, 15px) + 10px) !important; }
.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-ribbon-color, #cccccc) transparent transparent; }
.elementor-element.csc-shape-folded-corner-tl::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 20px 20px; border-color: transparent transparent var(--csc-folded-corner-color, #cccccc) transparent; filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.2)); }
.elementor-element.csc-shape-folded-corner-br::before { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 20px 20px 0 0; border-color: var(--csc-folded-corner-color, #cccccc) transparent transparent transparent; filter: drop-shadow(1px -1px 1px rgba(0,0,0,0.2)); }
.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%) !important; }
.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%))) !important; }
.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%) !important; }
.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%) !important; }
.elementor-element.csc-shape-speech-bubble-left { border-radius: 15px !important; 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-speech-bubble-color, #cccccc) transparent transparent; }
.elementor-element.csc-shape-speech-bubble-right { border-radius: 15px !important; 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-speech-bubble-color, #cccccc); }
.elementor-element.csc-shape-chevron-right { clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%) !important; }
.elementor-element.csc-shape-chevron-left { clip-path: polygon(25% 0%, 100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%) !important; }
.elementor-element.csc-shape-rectangle-chevron-right { clip-path: polygon(0% 0%, calc(100% - var(--csc-chevron-pointiness, 20px)) 0%, 100% 50%, calc(100% - var(--csc-chevron-pointiness, 20px)) 100%, 0% 100%) !important; }
.elementor-element.csc-shape-rectangle-chevron-left { clip-path: polygon(var(--csc-chevron-pointiness, 20px) 0%, 100% 0%, 100% 100%, var(--csc-chevron-pointiness, 20px) 100%, 0% 50%) !important; }
.elementor-element.csc-shape-badge { border-radius: 25px 25px 25px 0 !important; }
.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-badge-color, #cccccc); }
.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%) !important; }
.elementor-element.csc-shape-ticket::before,
.elementor-element.csc-shape-ticket::after { content: ''; position: absolute; background: var(--csc-ticket-color, #FFFFFF); width: 20px; height: 20px; border-radius: 50%; left: 85%; }
.elementor-element.csc-shape-ticket::before { top: -10px; transform: translateX(-50%); }
.elementor-element.csc-shape-ticket::after { bottom: -10px; transform: translateX(-50%); }

/* --- Responsive --- */
@media (max-width: 767px) {
    .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; }
    .elementor-element.csc-shape-folded-corner-tl::before { border-width: 0 0 15px 15px; }
    .elementor-element.csc-shape-folded-corner-br::before { border-width: 15px 15px 0 0; }
}

/* --- Default State --- */
.elementor-element.csc-shape-default {
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
.elementor-element.csc-shape-default::before,
.elementor-element.csc-shape-default::after {
    content: none !important;
    display: none !important;
}