/* CompleteGreet Features owner revision: forms, actions, captions and cart. */

/* Standard form + multiform */
.cg3d-form-switch {
    background: #ffffff;
    border: 1px solid var(--cg3d-line);
    border-radius: 10px;
    box-shadow: 0 14px 28px -16px rgba(7,20,38,.32);
    display: flex;
    gap: 5px;
    left: 12%;
    padding: 5px;
    position: absolute;
    top: 30px;
    transform: translateZ(72px);
    z-index: 3;
}
.cg3d-form-switch span { border-radius: 6px; color: var(--cg3d-muted); font-size: 9px; font-weight: 700; padding: 7px 10px; }
.cg3d-form-switch span.is-active { background: var(--cg3d-blue); color: #ffffff; }
.cg3d-form-card { gap: 8px; left: 8%; padding: 18px; top: 72px; width: 270px; }
.cg3d-form-card label { align-items: center; display: flex; padding: 0 10px; }
.cg3d-form-card label span { background: transparent; color: var(--cg3d-muted); font-size: 9px; height: auto; margin: 0; width: auto; }
.cg3d-form-card button { font-size: 10px; }
.cg3d-multiform-card {
    background: #ffffff;
    border: 1px solid var(--cg3d-line);
    border-radius: 16px;
    box-shadow: 0 24px 44px -16px rgba(7,20,38,.34);
    display: grid;
    gap: 10px;
    padding: 19px;
    position: absolute;
    right: 6%;
    top: 91px;
    transform: translateZ(78px) rotateY(-4deg);
    width: 230px;
}
.cg3d-multiform-card small { color: var(--cg3d-blue); font-size: 8px; font-weight: 800; }
.cg3d-multiform-card strong { color: var(--cg3d-navy); font-size: 13px; }
.cg3d-multiform-card .is-choice { border: 1px solid var(--cg3d-line); border-radius: 7px; color: var(--cg3d-text); font-size: 9px; padding: 8px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--forms .cg3d-multiform-card { animation: cg3d-form-compare 5s ease-in-out infinite; }

/* Action builder with a real Bubble preview */
.cg3d-actions-v2 { height: 100%; position: relative; }
.cg3d-action-bubble {
    background: #ffffff;
    border: 1px solid var(--cg3d-line);
    border-radius: 18px;
    box-shadow: 0 25px 45px -16px rgba(7,20,38,.36);
    left: 7%;
    padding: 9px;
    position: absolute;
    top: 42px;
    transform: translateZ(42px) rotateY(6deg);
    width: 154px;
}
.cg3d-action-bubble .cg3d-video { height: 178px; width: 134px; }
.cg3d-preview-actions { display: grid; gap: 6px; margin-top: 7px; }
.cg3d-preview-actions span { border: 1px solid var(--cg3d-line); border-radius: 6px; color: var(--cg3d-text); font-size: 8px; font-weight: 700; padding: 7px; text-align: center; }
.cg3d-preview-actions span.is-primary { background: var(--cg3d-orange-dark); border-color: var(--cg3d-orange-dark); color: #ffffff; }
.cg3d-action-library {
    background: #ffffff;
    border: 1px solid var(--cg3d-line);
    border-radius: 16px;
    box-shadow: 0 24px 44px -16px rgba(7,20,38,.32);
    padding: 19px;
    position: absolute;
    right: 5%;
    top: 65px;
    transform: translateZ(30px) rotateY(-5deg);
    width: 270px;
}
.cg3d-action-library > strong { color: var(--cg3d-navy); display: block; font-size: 13px; margin-bottom: 14px; }
.cg3d-action-grid { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.cg3d-action-grid span { align-items: center; border: 1px solid var(--cg3d-line); border-radius: 9px; color: var(--cg3d-text); display: flex; font-size: 9px; font-weight: 700; gap: 7px; padding: 10px; }
.cg3d-action-grid span.is-selected { background: var(--cg3d-blue-soft); border-color: var(--cg3d-blue); color: var(--cg3d-blue-dark); }
.cg3d-action-grid i { align-items: center; background: #ffffff; border-radius: 6px; display: flex; font-size: 12px; font-style: normal; height: 24px; justify-content: center; width: 24px; }
.cg3d-action-flow { border-top: 3px solid var(--cg3d-blue); left: 37%; position: absolute; top: 151px; transform: translateZ(65px) rotate(-7deg); width: 104px; }
.cg3d-action-flow i { background: var(--cg3d-orange); border: 3px solid #ffffff; border-radius: 50%; height: 13px; position: absolute; top: -8px; width: 13px; }
.cg3d-action-added { background: var(--cg3d-navy); border-radius: 8px; bottom: 45px; color: #ffffff; font-size: 9px; font-weight: 700; padding: 9px 12px; position: absolute; right: 9%; transform: translateZ(76px); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--actions .cg3d-action-flow i { animation: cg3d-action-connect 4.4s ease-in-out infinite; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--actions .cg3d-action-added { animation: cg3d-action-confirm 4.4s ease-in-out infinite; }

/* Complete caption editor workflow */
.cg3d-caption-studio { height: 100%; position: relative; }
.cg3d-caption-editor {
    background: #ffffff;
    border: 1px solid var(--cg3d-line);
    border-radius: 16px;
    box-shadow: 0 26px 48px -16px rgba(7,20,38,.34);
    height: 260px;
    left: 5%;
    overflow: hidden;
    position: absolute;
    top: 38px;
    transform: translateZ(34px) rotateY(4deg);
    width: 90%;
}
.cg3d-caption-header { align-items: center; background: #eef2f7; border-bottom: 1px solid var(--cg3d-line); display: flex; height: 38px; justify-content: space-between; padding: 0 14px; }
.cg3d-caption-header strong { color: var(--cg3d-navy); font-size: 11px; }
.cg3d-caption-header span { background: var(--cg3d-blue); border-radius: 6px; color: #ffffff; font-size: 8px; font-weight: 700; padding: 6px 8px; }
.cg3d-caption-workspace { display: grid; grid-template-columns: 54% 46%; height: 164px; }
.cg3d-caption-preview { align-items: center; background: #e9eef7; display: flex; justify-content: center; position: relative; }
.cg3d-caption-preview .cg3d-video { height: 126px; width: 210px; }
.cg3d-caption-overlay { bottom: 27px; display: flex; gap: 3px; left: 50%; position: absolute; transform: translateX(-50%) translateZ(62px); white-space: nowrap; z-index: 4; }
.cg3d-caption-overlay span { background: rgba(7,20,38,.92); color: #ffffff; font-size: 8px; font-weight: 800; padding: 4px 5px; }
.cg3d-caption-overlay span:nth-child(2) { background: var(--cg3d-orange-dark); }
.cg3d-transcript { border-left: 1px solid var(--cg3d-line); padding: 15px; }
.cg3d-transcript > strong { color: var(--cg3d-navy); font-size: 11px; }
.cg3d-transcript p { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 9px !important; }
.cg3d-transcript p i { background: #eef2f7; border-radius: 5px; color: var(--cg3d-text); font-size: 8px; font-style: normal; padding: 6px; }
.cg3d-transcript p i:nth-child(3) { background: var(--cg3d-blue); color: #ffffff; }
.cg3d-transcript small { color: var(--cg3d-muted); font-size: 7px; }
.cg3d-transcript div { display: flex; gap: 5px; margin-top: 12px; }
.cg3d-transcript div b { border: 1px solid var(--cg3d-line); border-radius: 5px; color: var(--cg3d-muted); font-size: 7px; padding: 5px 7px; }
.cg3d-caption-wave { align-items: center; border-top: 1px solid var(--cg3d-line); bottom: 0; display: flex; gap: 9px; height: 58px; left: 0; padding: 0 18px; position: absolute; right: 0; }
.cg3d-caption-wave span { background: var(--cg3d-blue); border-radius: 3px; height: 14px; width: 28px; }
.cg3d-caption-wave span:nth-child(2n) { height: 27px; }
.cg3d-caption-wave span:nth-child(3n) { background: var(--cg3d-orange); height: 20px; }
.cg3d-caption-wave em { background: var(--cg3d-navy); height: 42px; left: 20px; position: absolute; width: 2px; }
.cg3d-caption-ready { background: #e7f8ef; border: 1px solid #72c496; border-radius: 8px; bottom: 25px; color: #24784a; font-size: 9px; font-weight: 800; padding: 9px 12px; position: absolute; right: 1%; transform: translateZ(78px); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--captions .cg3d-caption-wave em { animation: cg3d-caption-scan 4.8s linear infinite; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--captions .cg3d-caption-ready { animation: cg3d-caption-ready 4.8s ease-in-out infinite; }

/* Click, add and confirm instead of flying product card */
.cg3d-cart-v2 { height: 100%; position: relative; }
.cg3d-cart-video { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 17px; box-shadow: 0 24px 42px -16px rgba(7,20,38,.34); left: 5%; padding: 8px; position: absolute; top: 58px; transform: translateZ(30px) rotateY(6deg); }
.cg3d-cart-video .cg3d-video { height: 205px; width: 130px; }
.cg3d-cart-panel { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 16px; box-shadow: 0 25px 46px -16px rgba(7,20,38,.34); display: grid; gap: 14px; grid-template-columns: 88px 1fr; padding: 17px; position: absolute; right: 5%; top: 74px; transform: translateZ(54px) rotateY(-4deg); width: 315px; }
.cg3d-cart-image { align-items: center; background: var(--cg3d-blue-soft); border-radius: 10px; display: flex; justify-content: center; }
.cg3d-cart-image i { background: var(--cg3d-blue); border-radius: 8px 8px 16px 16px; height: 70px; position: relative; width: 48px; }
.cg3d-cart-image i::before { border: 3px solid var(--cg3d-blue); border-bottom: 0; border-radius: 20px 20px 0 0; content: ''; height: 21px; left: 11px; position: absolute; top: -17px; width: 26px; }
.cg3d-cart-info { display: grid; gap: 6px; }
.cg3d-cart-info strong { color: var(--cg3d-navy); font-size: 12px; }
.cg3d-cart-info > span { color: var(--cg3d-blue-dark); font-size: 12px; font-weight: 800; }
.cg3d-cart-info small { color: var(--cg3d-muted); font-size: 8px; }
.cg3d-cart-options { display: flex; gap: 5px; }
.cg3d-cart-options i { align-items: center; border: 1px solid var(--cg3d-line); border-radius: 5px; color: var(--cg3d-muted); display: flex; font-size: 8px; font-style: normal; height: 24px; justify-content: center; width: 24px; }
.cg3d-cart-options i.is-active { background: var(--cg3d-blue); border-color: var(--cg3d-blue); color: #ffffff; }
.cg3d-cart-info button { background: var(--cg3d-orange-dark); border: 0; border-radius: 7px; color: #ffffff; font-size: 9px; font-weight: 800; height: 34px; }
.cg3d-cart-confirm { background: var(--cg3d-navy); border-radius: 11px; bottom: 38px; box-shadow: 0 17px 30px -13px rgba(7,20,38,.48); color: #ffffff; display: grid; gap: 2px; grid-template-columns: 28px 1fr; padding: 11px 14px; position: absolute; right: 9%; transform: translateZ(82px); width: 190px; }
.cg3d-cart-confirm b { align-items: center; background: #25a967; border-radius: 50%; display: flex; grid-row: span 2; height: 25px; justify-content: center; width: 25px; }
.cg3d-cart-confirm span { font-size: 10px; font-weight: 800; }
.cg3d-cart-confirm small { color: #b8c5d7; font-size: 8px; }
.cg3d-cart-count { align-items: center; background: var(--cg3d-orange-dark); border: 4px solid #ffffff; border-radius: 50%; color: #ffffff; display: flex; font-size: 10px; font-weight: 800; height: 34px; justify-content: center; position: absolute; right: 4%; top: 55px; transform: translateZ(90px); width: 34px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--cart .cg3d-cart-info button { animation: cg3d-cart-click 5s ease-in-out infinite; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--cart .cg3d-cart-confirm { animation: cg3d-cart-toast 5s ease-in-out infinite; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--cart .cg3d-cart-count { animation: cg3d-cart-count 5s ease-in-out infinite; }

@keyframes cg3d-form-compare { 0%,100% { transform: translateZ(72px) rotateY(-4deg) translateY(0); } 50% { transform: translateZ(86px) rotateY(-4deg) translateY(-6px); } }
@keyframes cg3d-action-connect { 0%,18% { left: 0; opacity: 0; } 35%,70% { left: calc(100% - 13px); opacity: 1; } 85%,100% { left: calc(100% - 13px); opacity: 0; } }
@keyframes cg3d-action-confirm { 0%,42% { opacity: 0; transform: translateZ(68px) translateY(8px); } 55%,85% { opacity: 1; transform: translateZ(76px) translateY(0); } 100% { opacity: 0; transform: translateZ(68px) translateY(8px); } }
@keyframes cg3d-caption-scan { from { left: 20px; } to { left: calc(100% - 22px); } }
@keyframes cg3d-caption-ready { 0%,58% { opacity: 0; transform: translateZ(70px) translateY(8px); } 70%,92% { opacity: 1; transform: translateZ(78px) translateY(0); } 100% { opacity: 0; } }
@keyframes cg3d-cart-click { 0%,30%,100% { transform: scale(1); } 38%,44% { transform: scale(.94); } }
@keyframes cg3d-cart-toast { 0%,42% { opacity: 0; transform: translateZ(70px) translateY(12px); } 55%,88% { opacity: 1; transform: translateZ(82px) translateY(0); } 100% { opacity: 0; transform: translateZ(70px) translateY(12px); } }
@keyframes cg3d-cart-count { 0%,46% { opacity: 0; transform: translateZ(80px) scale(.55); } 58%,100% { opacity: 1; transform: translateZ(90px) scale(1); } }

@media (max-width: 767px) {
    .cgf-feature-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .cgf-feature-row,
    .cgf-feature-row--reverse {
        grid-template-columns: minmax(0, 1fr);
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .cgf-feature-copy,
    .cgf-product-preview,
    .cgf-browser-shell--3d .cgf-browser-content,
    .cgf-browser-shell--3d .cgf-illustration-shell,
    .cg3d-scene {
        max-width: 100%;
        min-width: 0;
    }

    .cgf-browser-shell--3d,
    .cgf-browser-shell--3d .cgf-browser-content,
    .cgf-browser-shell--3d .cgf-illustration-shell {
        overflow: hidden;
    }

    .cg3d-scene--forms .cg3d-form-card {
        left: 4%;
        width: 76%;
    }

    .cg3d-scene--forms .cg3d-multiform-card {
        right: 2%;
        width: 62%;
    }

    .cg3d-action-bubble {
        left: 2%;
        width: 142px;
    }

    .cg3d-action-library {
        right: 1%;
        width: 225px;
    }

    .cg3d-caption-editor {
        left: 2%;
        width: 96%;
    }

    .cg3d-cart-product {
        right: 2%;
        width: 58%;
    }

    .cg3d-cart-confirm {
        right: 3%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cg3d-scene *,
    .cg3d-scene *::before,
    .cg3d-scene *::after {
        animation: none !important;
        transition: none !important;
    }
}