{"version":3,"file":"css/admin-checkout-editor-styles.css","mappings":";;;AAII;;;;EAII;AAHR;AAMI;EACI;EACA;AAJR;AAOI;EACI;AALR;;AASA;EACI;EACA;EACA;EACA;AANJ;AAQI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AANR;AAQQ;EACI;EACA;EACA;AANZ;AASQ;EACI;EACA;EACA;AAPZ;AAUQ;EACI;EACA;EACA;AARZ;AAYI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAVR;AAYQ;EACI;EACA;AAVZ;AAaQ;EACI;EACA;AAXZ;AAeI;EACI;EACA;EACA;EACA;AAbR;AAgBI;EACI;EACA;EACA;EACA;EACA;AAdR;AAgBQ;EACI;EACA;EACA;EACA;AAdZ;AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;AAhBR;AAkBQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhBZ;AAkBY;EACI;AAhBhB;AAmBY;EACI;EACA;EACA;AAjBhB;AAoBY;EACI;EACA;AAlBhB;AAuBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArBR;AAuBQ;EACI;AArBZ;AAwBQ;EACI;EACA;AAtBZ;AA0BI;EACI;EACA;EACA;AAxBR;AA2BI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAzBR;AA2BQ;EACI;EACA;EACA;AAzBZ;AA2BY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAzBhB;AA2BgB;EACI;AAzBpB;AA4BgB;EACI;EACA;AA1BpB;AA+BQ;EACI;EACA;AA7BZ;AA+BY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA7BhB;AA+BgB;EACI;AA7BpB;AAiCY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/BhB;AAmCQ;EACI;EACA;EACA;AAjCZ;AAqCI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAnCR;AAqCQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAnCZ;AAsCQ;EACI;EACA;EACA;EACA;AApCZ;AAuCQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AArCZ;AAwCQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtCZ;AAwCY;EACI;EACA;EACA;AAtChB;AAyCY;EACI;EACA;AAvChB;;AA8CA;EACI;AA3CJ;AA6CI;EACI;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;AA3CR;AA6CQ;EACI;AA3CZ;AA8CQ;EACI;EACA;EACA;EACA;AA5CZ;AA+CQ;EACI;EACA;EACA;EACA;AA7CZ;AAgDQ;EACI;AA9CZ;AAkDI;EACI;AAhDR;AAkDQ;EACI;AAhDZ;AAkDY;EACI;AAhDhB;AAqDQ;EACI;AAnDZ;AAuDQ;EACI;AArDZ;AAwDQ;EACI;AAtDZ;AAyDQ;EACI;AAvDZ;;AA6DA;EACI;EACA;EACA;EACA;EACA;EACA;AA1DJ;;AA6DA;EACI;IACI;EA1DN;AACF,C","sources":["webpack://checkout-for-woocommerce/./sources/scss/admin/checkout-editor.scss"],"sourcesContent":["// Fullscreen editor styles\n// Scoped to .cfw-checkout-editor-page body class\n\nbody.cfw-checkout-editor-page {\n    #wpadminbar,\n    #adminmenumain,\n    #adminmenuwrap,\n    #wpfooter {\n        display: none !important;\n    }\n\n    #wpcontent {\n        margin-left: 0 !important;\n        padding-left: 0 !important;\n    }\n\n    .cfw-admin-notices-container {\n        display: none;\n    }\n}\n\n.cfw-editor {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    overflow: hidden;\n\n    &__header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        height: 56px;\n        min-height: 56px;\n        padding: 0 16px;\n        background: #fff;\n        border-bottom: 1px solid #e5e7eb;\n        z-index: 100;\n\n        &-left {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n        }\n\n        &-center {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n        }\n\n        &-right {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n        }\n    }\n\n    &__close-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 36px;\n        height: 36px;\n        border: none;\n        background: none;\n        border-radius: 6px;\n        cursor: pointer;\n        color: #6b7280;\n        transition: background-color 0.15s, color 0.15s;\n\n        &:hover {\n            background-color: #f3f4f6;\n            color: #111827;\n        }\n\n        svg {\n            width: 20px;\n            height: 20px;\n        }\n    }\n\n    &__title {\n        font-size: 14px;\n        font-weight: 600;\n        color: #111827;\n        margin: 0;\n    }\n\n    &__unsaved {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        font-size: 13px;\n        color: #ea580c;\n\n        &-dot {\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background: #ea580c;\n        }\n    }\n\n    &__device-toggle {\n        display: flex;\n        align-items: center;\n        gap: 2px;\n        padding: 4px;\n        background: #f3f4f6;\n        border-radius: 8px;\n\n        button {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 32px;\n            height: 32px;\n            border: none;\n            background: none;\n            border-radius: 6px;\n            cursor: pointer;\n            color: #6b7280;\n            transition: background-color 0.15s, color 0.15s;\n\n            &:hover {\n                color: #374151;\n            }\n\n            &.active {\n                background: #fff;\n                color: #111827;\n                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n            }\n\n            svg {\n                width: 18px;\n                height: 18px;\n            }\n        }\n    }\n\n    &__save-btn {\n        display: inline-flex;\n        align-items: center;\n        padding: 8px 16px;\n        border: none;\n        border-radius: 9999px;\n        font-size: 13px;\n        font-weight: 600;\n        color: #fff;\n        background: #2563eb;\n        cursor: pointer;\n        transition: background-color 0.15s, opacity 0.15s;\n\n        &:hover:not(:disabled) {\n            background: #1d4ed8;\n        }\n\n        &:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n    }\n\n    &__body {\n        display: flex;\n        flex: 1;\n        overflow: hidden;\n    }\n\n    &__sidebar {\n        width: 360px;\n        min-width: 360px;\n        background: #fff;\n        border-right: 1px solid #e5e7eb;\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n\n        &-tabs {\n            display: flex;\n            border-bottom: 1px solid #e5e7eb;\n            padding: 0 16px;\n\n            button {\n                flex: 1;\n                padding: 12px 0;\n                border: none;\n                background: none;\n                font-size: 13px;\n                font-weight: 500;\n                color: #6b7280;\n                cursor: pointer;\n                border-bottom: 2px solid transparent;\n                transition: color 0.15s, border-color 0.15s;\n\n                &:hover {\n                    color: #374151;\n                }\n\n                &.active {\n                    color: #2563eb;\n                    border-bottom-color: #2563eb;\n                }\n            }\n        }\n\n        &-search {\n            padding: 12px 16px;\n            border-bottom: 1px solid #e5e7eb;\n\n            input {\n                display: block;\n                width: 100%;\n                padding: 8px 12px 8px 32px;\n                font-size: 13px;\n                border: 1px solid #d1d5db;\n                border-radius: 6px;\n                background: #f9fafb;\n                outline: none;\n                transition: border-color 0.15s;\n\n                &:focus {\n                    border-color: #2563eb;\n                }\n            }\n\n            .search-icon {\n                position: absolute;\n                left: 24px;\n                top: 50%;\n                transform: translateY(-50%);\n                width: 16px;\n                height: 16px;\n                color: #9ca3af;\n                pointer-events: none;\n            }\n        }\n\n        &-content {\n            flex: 1;\n            overflow-y: auto;\n            padding: 0;\n        }\n    }\n\n    &__preview {\n        flex: 1;\n        background: #f3f4f6;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 24px;\n        position: relative;\n        overflow: hidden;\n\n        &-frame {\n            background: #fff;\n            border-radius: 8px;\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n            overflow: hidden;\n            transition: width 0.3s ease;\n            height: 100%;\n            position: relative;\n        }\n\n        iframe {\n            width: 100%;\n            height: 100%;\n            border: none;\n            display: block;\n        }\n\n        &-loading {\n            position: absolute;\n            inset: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: rgba(255, 255, 255, 0.8);\n            z-index: 10;\n        }\n\n        &-no-products {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: 12px;\n            padding: 32px;\n            text-align: center;\n            color: #6b7280;\n\n            svg {\n                width: 48px;\n                height: 48px;\n                color: #d1d5db;\n            }\n\n            p {\n                font-size: 14px;\n                margin: 0;\n            }\n        }\n    }\n}\n\n// EditorSection accordion\n.cfw-editor-section {\n    border-bottom: 1px solid #e5e7eb;\n\n    &__header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 14px 16px;\n        cursor: pointer;\n        user-select: none;\n        transition: background-color 0.15s;\n\n        &:hover {\n            background-color: #f9fafb;\n        }\n\n        h3 {\n            font-size: 13px;\n            font-weight: 600;\n            color: #111827;\n            margin: 0;\n        }\n\n        svg {\n            width: 16px;\n            height: 16px;\n            color: #9ca3af;\n            transition: transform 0.2s;\n        }\n\n        &.open svg {\n            transform: rotate(180deg);\n        }\n    }\n\n    &__body {\n        padding: 0 16px 16px;\n\n        .cfw-admin-field-container {\n            margin-bottom: 12px;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        // Make color pickers fit in sidebar\n        .cfw-admin-field-container.mb-4.w-min {\n            width: 100% !important;\n        }\n\n        // Compact admin page section in sidebar\n        .md\\:grid {\n            display: block !important;\n        }\n\n        .md\\:col-span-1 {\n            display: none;\n        }\n\n        .md\\:col-span-2 {\n            margin-top: 0;\n        }\n    }\n}\n\n// Spinner\n.cfw-editor-spinner {\n    width: 40px;\n    height: 40px;\n    border: 3px solid #e5e7eb;\n    border-top-color: #2563eb;\n    border-radius: 50%;\n    animation: cfw-editor-spin 0.8s linear infinite;\n}\n\n@keyframes cfw-editor-spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}