{"version":3,"file":"css/wcps-admin-style.min.css","mappings":"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;IAEI;EAxQN;AACF;AA2QA;AACA;;EAEI;EACA;AAzQJ;;AA4QA;AACA;;EAEI;EACA;AAzQJ;;AA4QA;AACA;EAEI;;IAEI;EA1QN;EA6QE;;IAEI;EA3QN;AACF;AAgRA;AACA;AACA;EACI;EACA;EACA;EAEA;EACA;EACA;AA/QJ;;AAmRA;AACA;EACI;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhRJ;;AAmRA;EACI;AAhRJ;;AAmRA;EACI;AAhRJ;;AAmRA;EACI;AAhRJ;;AAmRA;EACI;AAhRJ;;AAmRA;EACI;AAhRJ;;AAmRA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhRJ;;AAoRA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjRJ;;AAoRA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjRJ;;AAoRA;EACI;AAjRJ;;AAoRA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjRJ;;AAoRA;;;;;;;;;;;;GAAA;AAcA;EACI;EACA;AAlRJ;;AAqRA;EACI;EACA;EACA;EACA;EACA;EACA;AAlRJ;;AAqRA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAlRJ;;AAqRA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAlRJ;;AAqRA;EACI;AAlRJ;;AAqRA;EACI;EACA;EACA;AAlRJ;;AAqRA;EACI;EACA;AAlRJ;;AAqRA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAlRJ;;AAqRA;AACA;EACI;EACA;AAlRJ;;AAqRA;AACA;EACI;IACI;IACA;EAlRN;EAqRE;IACI;IACA;EAnRN;AACF;AAsRA;EACI;IACI;EApRN;EAuRE;IACI;EArRN;AACF;AAwRA;EAEI;IAEI;EAxRN;EA2RE;IACI;EAzRN;AACF;AA4RA;AACA;EACI;IA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CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjVhB;AAmVgB;;;;;;;EAEI;EACA;EACA;EACA;EACA;AA5UpB;AA+UgB;;;;EACI;EACA;AA1UpB;;AAoVA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,cA/qFY;EAgrFZ,mBA5qFO;EA6qFP;EACA;EACA;EACA;EACA;EACA;EAAA;EACA;EACA;EACA;EACA;AAjVJ;AAmVI;EACI,mBA7rFQ;EA8rFR,cA3rFA;EA4rFA,qBA/rFQ;AA82EhB;;AAsVA;;EAEI;EACA;EACA;AAnVJ;;AAsVA;EACI;EACA;EACA;EACA;EACA;AAnVJ;AAqVI;EACI;EACA;EACA;AAnVR;AAsVI;EACI;EACA;EACA;AApVR;AAuVI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArVR;;AAyVA;EACI;IACI;IACA;IACA;EAtVN;EAwVM;;IAEI;IACA;EAtVV;EAyVM;IACI;IACA;EAvVV;AACF;AA4VA;EACI;EACA;EACA;EACA;AA1VJ;;AA6VA;EACI;EACA;EACA;EACA;EACA;AA1VJ;;AA6VA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA1VJ;;AA6VA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA1VJ;AA4VI;EACI;EACA;AA1VR;AA4VQ;EACI;AA1VZ;;AAkWA;EACI;EACA;EACA;EACA;AA/VJ;;AAkWA;EACI;EACA;EACA;EACA;AA/VJ;;AAkWA;EACI;EACA;EACA;EACA;EACA;AA/VJ;;AAkWA;EACI;EACA;EACA;EACA;AA/VJ;;AAmWA;EAEI;;IAEI;IACA;EAjWN;EAoWE;;;IAGI;IACA;IACA;EAlWN;EAqWE;IACI;IACA;EAnWN;AACF;AAuWA;EACI;EACA;AArWJ;;AAwWA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArWJ;;AAwWA;EACI;EACA;EACA;EACA;EACA;EACA;AArWJ;;AAyWA;EACI;IACI;IACA;EAtWN;EAyWE;;IAEI;IACA;IACA;IACA;IACA;EAvWN;EA0WE;IACI;IACA;IACA;IACA;EAxWN;AACF;AA4WA;EAEI;;;IAGI;IACA;IACA;EA3WN;EA8WE;IACI;IACA;EA5WN;AACF;AAgXA;EACI;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA,+EACI;EAEJ;EACA;EACA;AAhXJ;AAkXI;EACI;EACA,+EACI;AAjXZ;AAoXQ;EACI;AAlXZ;AAsXI;EACI;EACA;EACA;EACA;AApXR;;AAwXA;EACI;IACI;IACA;EArXN;EAwXE;IACI;IACA;EAtXN;AACF;AAyXA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAvXJ;;AA0XA;EACI;IACI;EAvXN;EA0XE;IACI;EAxXN;EA2XE;IACI;EAzXN;AACF;AA4XA;EACI;EACA;AA1XJ;;AA6XA;EACI;EACA;AA1XJ;;AA6XA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;AA1XJ;AA4XI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA1XR;AA4XQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA1XZ;;AAiYA;EACI;IACI;EA9XN;EAiYE;IACI;EA/XN;EAkYE;IACI;EAhYN;EAmYE;IACI;IACA;IACA;IACA;EAjYN;EAoYE;IACI;IACA;IACA;IACA;EAlYN;EAqYE;IACI;IACA;EAnYN;AACF;AAsYA;EACI;IACI;EApYN;EAuYE;IACI;EArYN;EAwYE;IACI;IACA;IACA;EAtYN;EAyYE;IACI;IACA;IACA;EAvYN;EA0YE;IACI;IACA;EAxYN;AACF;AA4YA;EACI;EACA;EACA;EACA;AA1YJ;AA4YI;EACI;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA,kFACI;EAEJ;AA5YR;AA+YI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;AA7YR;AA+YQ;EACI;EACA;EACA,uFACI;AA9YhB;AAkZQ;EACI;EACA;EACA;EACA;AAhZZ;AAoZI;EACI;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,sHACI;EAGJ;EACA;EACA;EACA;EACA;EAEA;AAtZR;AAuZQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArZZ;AAwZQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtZZ;AA0ZI;EACI;EACA;EACA;AAxZR;;AA4ZA;EACI;AAzZJ;;AA4ZA;;;;EAII;AAzZJ;;AAiaA;EACI;AA9ZJ;;AAiaA;EACI;AA9ZJ;;AAoaA;EACI;EACA;EACA;AAjaJ;;AAoaA;EACI;EACA;EACA;EACA;EACA;EACA;AAjaJ;AAmaI;EACI;EACA;EACA;AAjaR;AAoaI;EACI;EACA;EACA;EACA;EACA;EACA;EACA,mBAvvGM;EAwvGN;EACA;EACA;AAlaR;AAqaI;EACI;EACA;EACA;EACA;EACA;EACA;EACA,mBAjxGA;EAkxGA;EACA;EACA;AAnaR;AAsaI;EACI,mBA3xGQ;AAu3FhB;AAuaI;EACI;EACA;AAraR;;AAyaA;EACI;EACA,cA/xGQ;EAgyGR;EACA;EACA;EACA;AAtaJ;;AA0aA;EACI;EACA;EACA;EACA;EACA;EACA,mBAhzGO;EAizGP;EACA,kBApyGY;EAqyGZ;EAAA;AAvaJ;AAyaI;EACI;EACA;EACA,cArzGI;EAszGJ,mBA1zGA;EA2zGA;EACA;EACA;EACA;KAAA;UAAA;EACA;AAvaR;AA0aI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,mBA10GA;EA20GA,cA90GQ;EA+0GR;EACA;EACA,gCAv0GK;EAw0GL;AAxaR;AA0aQ;EACI,mBAr1GI;EAs1GJ,cAn1GJ;EAo1GI;EACA;AAxaZ;AA2aQ;EACI;AAzaZ;AA4aQ;EACI;EACA;EACA;AA1aZ;AA6aQ;EACI,mBA11GI;EA21GJ,qBA31GI;EA41GJ,cAr2GJ;EAs2GI;AA3aZ;;AAibA;EACI;EACA;EACA;EACA,mBAv2GY;EAw2GZ,cAj3GI;EAk3GJ;EACA,kBAp2GY;EAq2GZ;EACA;EACA;EACA;EACA;EACA;AA9aJ;AAgbI;EACI;AA9aR;AAibI;EACI;EACA;AA/aR;;AAwbA;EACI;EACA;EACA;EACA;AArbJ;AAwbI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtbR;AAwbQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtbZ;AAybQ;EACI;EACA;EACA;AAvbZ;AA0bQ;EACI;EACA;EACA;EACA;EACA;AAxbZ;AA2bQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAzbZ;AA4bQ;EACI;EACA;EACA;EACA;EACA;AA1bZ;AA6bQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA3bZ;AA6bY;EACI;EACA;EACA;AA3bhB;AA+bQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA7bZ;AA+bY;EACI;EACA;EACA;AA7bhB;AAicQ;EACI;AA/bZ;AAocI;EACI;EACA;EACA;EACA;AAlcR;AAqcI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAncR;AAqcQ;EACI;EACA;AAncZ;AAscQ;EACI;EACA;EACA;AApcZ;AAscY;EACI;AApchB;AAucY;EACI;AArchB;AAwcY;EACI;AAtchB;AA0cQ;EACI;EACA;EACA;EACA;AAxcZ;AA2cQ;EACI;EACA;EACA;EACA;EACA;AAzcZ;AA8cI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5cR;AA8cQ;EACI;AA5cZ;AAidI;EACI;EACA;EACA;EACA;EACA;AA/cR;AAkdI;EACI;EACA;AAhdR;AAmdI;EACI;EACA;EACA;EACA;AAjdR;AAmdQ;EACI;EACA;AAjdZ;AAqdI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAndR;AAqdQ;EACI;AAndZ;AAsdQ;EACI;EACA;AApdZ;AAudQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArdZ;AAwdQ;EACI;EACA;AAtdZ;AA0dI;EACI;EACA;EACA;EACA;EACA;EACA;AAxdR;AA0dQ;EACI;AAxdZ;AA2dQ;EACI;EACA;EACA;AAzdZ;AA4dQ;EACI;EACA;EACA;EACA;EACA;AA1dZ;AA4dY;EACI;EACA;EACA;AA1dhB;AA8dQ;EACI;EACA;EACA;AA5dZ;AA8dY;EACI;EACA;EACA;AA5dhB;AA8dgB;EACI;EACA;EACA;EACA;EACA;AA5dpB;AAmeI;EACI;EACA;EACA;EACA;AAjeR;AAoeI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAleR;AAoeQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAleZ;AAqeQ;EACI;EACA;AAneZ;AAseQ;EACI;AApeZ;AAueQ;EACI;AAreZ;AAweQ;EACI;EACA;AAteZ;AAyeQ;EACI;EACA;EACA;EACA;AAveZ;AA0eQ;EACI;EACA;EACA;EACA;AAxeZ;AA2eQ;EACI;EACA;EACA;AAzeZ;AA2eY;EACI;EACA;EACA;EACA;EACA;AAzehB;AA4eY;EACI;AA1ehB;AA8eQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5eZ;AA8eY;EACI;EACA;EACA;AA5ehB;AAkfI;EACI;EACA;EACA;EACA;EACA;AAhfR;AAmfI;EACI;EACA;EACA;AAjfR;AAofI;EACI;EACA;EACA;EACA;AAlfR;AAofQ;EACI;EACA;AAlfZ;AAsfI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AApfR;AAsfQ;EACI;AApfZ;AAufQ;EACI;AArfZ;AAwfQ;EACI;AAtfZ;AAyfQ;EACI;AAvfZ;AA2fI;EACI;EACA;EACA;EACA;AAzfR;AA4fI;EACI;EACA;EACA;AA1fR;AA8fI;EACI;EACA;EACA;EACA;EACA;AA5fR;AA+fI;EACI;EACA;AA7fR;AAggBI;EACI;EACA;EACA;EACA;AA9fR;AAggBQ;EACI;EACA;EACA;AA9fZ;AAigBQ;EACI;EACA;EACA;AA/fZ;AAigBY;EACI;AA/fhB;AAkgBY;EACI;EACA;EACA;AAhgBhB;AAkgBgB;EACI;EACA;EACA;EACA;AAhgBpB;AAkgBoB;EACI;EACA;EACA;EACA;AAhgBxB;AAmgBoB;EACI;EACA;EACA;EACA;AAjgBxB;AAwgBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAtgBR;AAwgBQ;EACI;AAtgBZ;AA0gBI;EACI;EACA;EACA;AAxgBR;AA2gBI;EACI;EACA;EACA;EACA;EACA;AAzgBR;AA2gBQ;EACI;AAzgBZ;AA4gBQ;EACI;EACA;EACA;AA1gBZ;AA6gBQ;EACI;AA3gBZ;AA+gBI;EACI;EACA;EACA;EACA;AA7gBR;AAghBI;EACI;EACA;EACA;AA9gBR;AAghBQ;EACI;EACA;AA9gBZ;AAihBQ;EACI;EACA;AA/gBZ;AAmhBI;EACI;EACA;EACA;AAjhBR;AAqhBI;EAEI;IAKI;EAxhBV;EA2hBM;IACI;EAzhBV;EA4hBM;IACI;EA1hBV;AACF;AA6hBI;EACI;IACI;IACA;EA3hBV;EA8hBM;IACI;IACA;EA5hBV;AACF;AAgiBI;EA7nBJ;IA8nBQ;EA7hBN;EA+hBM;IACI;IACA;EA7hBV;EA+hBU;IACI;EA7hBd;EAgiBU;IACI;EA9hBd;EAiiBU;IACI;IACA;EA/hBd;EAkiBU;;IAEI;IACA;IACA;EAhiBd;EAoiBM;IACI;IACA;EAliBV;EAqiBM;IACI;EAniBV;EAqiBU;IACI;EAniBd;EAsiBU;IACI;EApiBd;EAwiBM;IACI;IACA;IACA;IACA;EAtiBV;EAyiBM;;;IAGI;EAviBV;EA0iBM;IACI;IACA;EAxiBV;EA2iBM;IACI;EAziBV;EA4iBM;IACI;EA1iBV;EA6iBM;IACI;EA3iBV;EA8iBM;IACI;IACA;EA5iBV;EA+iBM;IACI;EA7iBV;EAgjBM;IACI;EA9iBV;AACF;AAijBI;EACI;IACI;EA/iBV;EAijBU;IACI;EA/iBd;EAkjBU;IACI;EAhjBd;EAmjBU;IACI;EAjjBd;EAqjBM;IACI;EAnjBV;EAsjBM;IACI;EApjBV;EAsjBU;IACI;EApjBd;EAujBU;IACI;EArjBd;EAyjBM;IACI;IACA;EAvjBV;EA0jBM;IACI;EAxjBV;EA2jBM;IACI;EAzjBV;EA2jBU;IACI;EAzjBd;EA4jBU;IACI;EA1jBd;EA8jBM;IACI;IACA;IACA;EA5jBV;AACF;;AAukBA;;EAEI;AApkBJ;;AAukBA;;EAEI;EACA;AApkBJ;AAskBI;;EACI;AAnkBR;;AAukBA;EACI;AApkBJ;;AAukBA;;EAEI;EACA;AApkBJ;;AAukBA;EACI;AApkBJ,C","sources":["webpack://product-display/./assets/src/css/wcps-admin-style.scss"],"sourcesContent":["// Modern Variables\r\n$primary-color: #4a6cf7;\r\n$secondary-color: #1e293b;\r\n$border-color: #e2e8f0;\r\n$white: #ffffff;\r\n$light-bg: #f8fafc;\r\n$lighter-bg: #f1f5f9;\r\n$text-color: #475569;\r\n$dark-text: #1e293b;\r\n$box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);\r\n$input-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);\r\n$transition: all 0.2s ease-in-out;\r\n$focus-shadow: 0 0 0 2px rgba($primary-color, 0.3);\r\n$success-color: #10b981;\r\n$danger-color: #ef4444;\r\n$warning-color: #f59e0b;\r\n$light-gray: #f1f5f9;\r\n$medium-gray: #e2e8f0;\r\n$dark-gray: #334155;\r\n$border-radius: 6px;\r\n\r\n// Breakpoints\r\n$tablet: 1024px;\r\n$small-tablet: 782px;\r\n$mobile: 500px;\r\n\r\n// Main admin container\r\n.wcps-admin {\r\n    margin: 40px;\r\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\r\n    color: $text-color;\r\n\r\n    .wp-heading-inline {\r\n        display: inline-block;\r\n        margin-right: 12px;\r\n        font-weight: 600;\r\n        color: $dark-text;\r\n        font-size: 24px;\r\n    }\r\n\r\n    .page-title-action {\r\n        margin-top: -3px;\r\n        background: $white;\r\n        border: 1px solid $primary-color;\r\n        color: $primary-color;\r\n        border-radius: 30px;\r\n        padding: 6px 18px;\r\n        font-weight: 500;\r\n        transition: $transition;\r\n        box-shadow: 0 2px 6px rgba($primary-color, 0.15);\r\n\r\n        &:hover {\r\n            background: $primary-color;\r\n            border-color: $primary-color;\r\n            color: $white;\r\n            transform: translateY(-1px);\r\n            box-shadow: 0 4px 10px rgba($primary-color, 0.25);\r\n        }\r\n    }\r\n\r\n    // Empty state styling\r\n    .wcps-empty-state {\r\n        background: $white;\r\n        border: 1px solid $light-gray;\r\n        border-radius: $border-radius;\r\n        box-shadow: $box-shadow;\r\n        padding: 40px;\r\n        text-align: center;\r\n        margin: 40px 0;\r\n\r\n        p {\r\n            font-size: 17px;\r\n            line-height: 1.6;\r\n            margin-bottom: 24px;\r\n            color: $text-color;\r\n            max-width: 600px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n\r\n        .button-primary {\r\n            padding: 10px 24px;\r\n            height: auto;\r\n            font-size: 15px;\r\n            line-height: 1.5;\r\n            border-radius: 30px;\r\n            font-weight: 500;\r\n            box-shadow: 0 2px 10px rgba($primary-color, 0.2);\r\n\r\n            &:hover {\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 4px 15px rgba($primary-color, 0.25);\r\n            }\r\n        }\r\n    }\r\n\r\n    // Search box enhancements\r\n    .search-box {\r\n        float: right;\r\n        margin: 0 0 15px;\r\n        position: relative;\r\n\r\n        input[type=\"search\"] {\r\n            padding: 0 14px;\r\n            height: 38px;\r\n            width: 280px;\r\n            border-radius: 20px;\r\n            border: 1px solid $medium-gray;\r\n            box-shadow: $input-shadow;\r\n            transition: $transition;\r\n            font-size: 14px;\r\n\r\n            &:focus {\r\n                border-color: $primary-color;\r\n                box-shadow: $focus-shadow;\r\n                outline: none;\r\n            }\r\n        }\r\n\r\n        #search-submit {\r\n            margin-left: 8px;\r\n            height: 38px;\r\n            line-height: 36px;\r\n            padding: 0 16px;\r\n            border-radius: 20px;\r\n            border: 1px solid $primary-color;\r\n            background: $primary-color;\r\n            color: $white;\r\n            font-weight: 500;\r\n            box-shadow: 0 2px 6px rgba($primary-color, 0.15);\r\n            transition: $transition;\r\n\r\n            &:hover {\r\n                background: $primary-color;\r\n                box-shadow: 0 3px 8px rgba($primary-color, 0.25);\r\n                transform: translateY(-1px);\r\n            }\r\n        }\r\n    }\r\n\r\n    // Table styling\r\n    .wcps-showcases-table {\r\n        border-collapse: separate;\r\n        border-spacing: 0;\r\n        margin-top: 20px;\r\n        box-shadow: $box-shadow;\r\n        border-radius: $border-radius;\r\n        overflow: hidden;\r\n        width: 100%;\r\n        background: $white;\r\n        border: 1px solid $border-color;\r\n\r\n        th {\r\n            padding: 15px 16px;\r\n            font-weight: 600;\r\n            text-align: left;\r\n            color: $secondary-color;\r\n            background-color: $light-bg;\r\n            border-bottom: 1px solid $border-color;\r\n            font-size: 14px;\r\n            transition: $transition;\r\n            position: relative;\r\n\r\n            &:after {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                width: 1px;\r\n                background: $border-color;\r\n            }\r\n\r\n            &:last-child:after {\r\n                display: none;\r\n            }\r\n\r\n            &.column-cb {\r\n                width: 30px;\r\n            }\r\n        }\r\n\r\n        td {\r\n            padding: 14px 16px;\r\n            vertical-align: middle;\r\n            border-bottom: 1px solid $border-color;\r\n            font-size: 14px;\r\n            transition: $transition;\r\n\r\n            &.check-column {\r\n                padding: 0px 0 0 8px;\r\n            }\r\n\r\n            a {\r\n                text-decoration: none;\r\n                color: $primary-color;\r\n                transition: $transition;\r\n                font-weight: 500;\r\n\r\n                &:hover {\r\n                    color: $primary-color;\r\n                    text-decoration: underline;\r\n                }\r\n            }\r\n\r\n            .button {\r\n                margin-right: 8px;\r\n                border-radius: 20px;\r\n                padding: 5px 14px;\r\n                height: auto;\r\n                transition: $transition;\r\n                font-weight: 500;\r\n\r\n                &:last-child {\r\n                    margin-right: 0;\r\n                }\r\n\r\n                &:hover {\r\n                    transform: translateY(-1px);\r\n                    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);\r\n                }\r\n            }\r\n\r\n            .wcps-shortcode-input {\r\n                // width: calc(100% - 80px);\r\n                width: calc(90% - 34px);\r\n                min-width: 85px;\r\n                background-color: $light-bg;\r\n                border: 1px solid $border-color;\r\n                border-radius: 6px;\r\n                padding: 8px 12px;\r\n                box-shadow: $input-shadow;\r\n                font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;\r\n                font-size: 13px;\r\n                color: $dark-gray;\r\n                margin-right: 8px;\r\n                font-size: 10px;\r\n            }\r\n\r\n            .wcps-copy-shortcode {\r\n                min-width: 40px;\r\n                text-align: center;\r\n                position: relative;\r\n                vertical-align: middle;\r\n                transition: $transition;\r\n                border-radius: 20px;\r\n                padding: 0px 6px;\r\n                font-weight: 500;\r\n                background: $light-bg;\r\n                font-size: 10px;\r\n\r\n                &:hover {\r\n                    background: $lighter-bg;\r\n                    transform: translateY(-1px);\r\n                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);\r\n                }\r\n\r\n                &.copied {\r\n                    background: $success-color;\r\n                    border-color: $success-color;\r\n                    color: $white;\r\n                    box-shadow: 0 4px 8px rgba($success-color, 0.2);\r\n                }\r\n            }\r\n        }\r\n\r\n        tr {\r\n            &:last-child td {\r\n                border-bottom: none;\r\n            }\r\n\r\n            &:hover {\r\n                background-color: rgba($primary-color, 0.02);\r\n\r\n                td {\r\n                    box-shadow: inset 0 0 0 transparent,\r\n                        0 1px 2px rgba(0, 0, 0, 0.03);\r\n                }\r\n            }\r\n        }\r\n\r\n        // Action buttons\r\n        .wcps-delete-showcase {\r\n            color: $danger-color;\r\n            border-color: $danger-color;\r\n            background: rgba($danger-color, 0.05);\r\n\r\n            &:hover {\r\n                background-color: $danger-color;\r\n                color: $white;\r\n                box-shadow: 0 3px 8px rgba($danger-color, 0.25);\r\n            }\r\n        }\r\n    }\r\n\r\n    // Pagination styling\r\n    .tablenav {\r\n        margin: 20px 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n\r\n        .tablenav-pages {\r\n            margin: 0 0 9px;\r\n\r\n            .pagination-links {\r\n                display: inline-flex;\r\n                align-items: center;\r\n                margin-left: 12px;\r\n\r\n                .page-numbers {\r\n                    display: inline-flex;\r\n                    align-items: center;\r\n                    justify-content: center;\r\n                    min-width: 32px;\r\n                    height: 32px;\r\n                    margin: 0 3px;\r\n                    padding: 0 5px;\r\n                    color: $text-color;\r\n                    border: 1px solid $medium-gray;\r\n                    border-radius: 6px;\r\n                    background: $white;\r\n                    font-size: 14px;\r\n                    text-align: center;\r\n                    text-decoration: none;\r\n                    cursor: pointer;\r\n                    transition: $transition;\r\n\r\n                    &:hover {\r\n                        background: $lighter-bg;\r\n                        border-color: $medium-gray;\r\n                        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);\r\n                    }\r\n\r\n                    &.current {\r\n                        border-color: $primary-color;\r\n                        background: $primary-color;\r\n                        color: $white;\r\n                        font-weight: 600;\r\n                        box-shadow: 0 2px 8px rgba($primary-color, 0.2);\r\n                    }\r\n\r\n                    &.dots {\r\n                        border: none;\r\n                        background: none;\r\n                        box-shadow: none;\r\n\r\n                        &:hover {\r\n                            border: none;\r\n                            background: none;\r\n                            box-shadow: none;\r\n                        }\r\n                    }\r\n\r\n                    &.prev,\r\n                    &.next {\r\n                        font-size: 16px;\r\n                        padding: 0;\r\n                    }\r\n                }\r\n            }\r\n\r\n            .displaying-num {\r\n                margin-right: 10px;\r\n                color: $dark-gray;\r\n                font-size: 13px;\r\n                font-style: italic;\r\n            }\r\n        }\r\n\r\n        .alignleft.actions {\r\n            padding: 0;\r\n            display: flex;\r\n            align-items: center;\r\n\r\n            select {\r\n                margin-right: 8px;\r\n                max-width: 200px;\r\n            }\r\n        }\r\n    }\r\n\r\n    // Bulk action buttons\r\n    .bulkactions {\r\n        display: inline-flex;\r\n        align-items: center;\r\n\r\n        select {\r\n            margin-right: 8px;\r\n            vertical-align: middle;\r\n            height: 38px;\r\n            border-radius: 6px;\r\n            border: 1px solid $medium-gray;\r\n            padding: 0 30px 0 12px;\r\n            background-color: $white;\r\n            color: $text-color;\r\n            font-size: 14px;\r\n            line-height: 2;\r\n            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n            transition: $transition;\r\n            background-position: right 10px center;\r\n\r\n            &:focus {\r\n                border-color: $primary-color;\r\n                box-shadow: $focus-shadow;\r\n                outline: none;\r\n            }\r\n        }\r\n\r\n        .action {\r\n            vertical-align: middle;\r\n            height: 38px;\r\n            line-height: 36px;\r\n            padding: 0 16px;\r\n            border-radius: 6px;\r\n            font-weight: 500;\r\n            transition: $transition;\r\n\r\n            &:hover {\r\n                transform: translateY(-1px);\r\n                box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);\r\n            }\r\n        }\r\n    }\r\n\r\n    // Checkbox styling\r\n    .check-column {\r\n        input[type=checkbox] {\r\n            border: 2px solid $medium-gray;\r\n            border-radius: 4px;\r\n            background: $white;\r\n            color: $white;\r\n            clear: none;\r\n            cursor: pointer;\r\n            display: inline-block;\r\n            line-height: 0;\r\n            height: 20px;\r\n            margin: -5px 5px 0 5px;\r\n            outline: 0;\r\n            padding: 0 !important;\r\n            text-align: center;\r\n            vertical-align: middle;\r\n            width: 20px;\r\n            min-width: 20px;\r\n            box-shadow: none;\r\n            transition: $transition;\r\n            position: relative;\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n\r\n            &:checked {\r\n                background: $primary-color;\r\n                border-color: $primary-color;\r\n\r\n                &::before {\r\n                    content: \"\";\r\n                    position: absolute;\r\n                    top: 3px;\r\n                    left: 7px;\r\n                    width: 5px;\r\n                    height: 10px;\r\n                    border: solid $white;\r\n                    border-width: 0 2px 2px 0;\r\n                    transform: rotate(45deg);\r\n                }\r\n            }\r\n\r\n            &:hover {\r\n                border-color: $primary-color;\r\n            }\r\n        }\r\n    }\r\n\r\n    // Button styling\r\n    .button {\r\n        display: inline-block;\r\n        text-decoration: none;\r\n        font-size: 14px;\r\n        line-height: 2.15384615;\r\n        min-height: 36px;\r\n        margin: 0;\r\n        padding: 0 16px;\r\n        cursor: pointer;\r\n        border-width: 1px;\r\n        border-style: solid;\r\n        border-color: $medium-gray;\r\n        -webkit-appearance: none;\r\n        border-radius: 6px;\r\n        white-space: nowrap;\r\n        box-sizing: border-box;\r\n        transition: $transition;\r\n        background: $white;\r\n        font-weight: 500;\r\n        color: $text-color;\r\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\r\n\r\n        &:hover {\r\n            background: $light-bg;\r\n            border-color: $medium-gray;\r\n            color: $dark-text;\r\n            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);\r\n            transform: translateY(-1px);\r\n        }\r\n\r\n        &.button-primary {\r\n            background: $primary-color;\r\n            border-color: $primary-color;\r\n            color: $white;\r\n            box-shadow: 0 2px 6px rgba($primary-color, 0.2);\r\n\r\n            &:hover {\r\n                background: $primary-color;\r\n                border-color: $primary-color;\r\n                box-shadow: 0 4px 10px rgba($primary-color, 0.25);\r\n                transform: translateY(-1px);\r\n            }\r\n\r\n            &:focus {\r\n                box-shadow: 0 0 0 1px $white, 0 0 0 3px rgba($primary-color, 0.3);\r\n                outline: none;\r\n            }\r\n        }\r\n    }\r\n\r\n    // Admin header\r\n    .wcps-admin-header {\r\n        margin-bottom: 30px;\r\n        padding: 0 0 20px;\r\n        border-bottom: 1px solid $light-gray;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n\r\n        .button-primary {\r\n            padding: 0 18px;\r\n            font-size: 14px;\r\n            line-height: 36px;\r\n            height: 38px;\r\n            border-radius: 6px;\r\n            font-weight: 500;\r\n            box-shadow: 0 2px 6px rgba($primary-color, 0.15);\r\n            transition: $transition;\r\n\r\n            &:hover {\r\n                transform: translateY(-1px);\r\n                box-shadow: 0 4px 10px rgba($primary-color, 0.25);\r\n            }\r\n        }\r\n    }\r\n\r\n    // Responsive styles\r\n    @media screen and (max-width: $small-tablet) {\r\n        .search-box {\r\n            float: none;\r\n            margin-bottom: 20px;\r\n            width: 100%;\r\n\r\n            input[type=\"search\"] {\r\n                width: calc(100% - 90px);\r\n                max-width: 100%;\r\n                margin-right: 10px;\r\n            }\r\n\r\n            #search-submit {\r\n                width: 80px;\r\n                margin-left: 0;\r\n            }\r\n        }\r\n\r\n        .tablenav {\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n\r\n            .tablenav-pages {\r\n                float: none;\r\n                text-align: center;\r\n                margin-top: 15px;\r\n                width: 100%;\r\n                display: flex;\r\n                justify-content: center;\r\n            }\r\n        }\r\n\r\n        .bulkactions {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            padding-bottom: 15px;\r\n            width: 100%;\r\n\r\n            select {\r\n                width: 100%;\r\n                margin-bottom: 10px;\r\n                flex: 1 0 100%;\r\n            }\r\n\r\n            .action {\r\n                width: 100%;\r\n            }\r\n        }\r\n\r\n        .tablenav.top {\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .wcps-showcases-table {\r\n            border-radius: $border-radius;\r\n            overflow: hidden;\r\n            box-shadow: $box-shadow;\r\n\r\n            td.column-shortcode {\r\n                .wcps-shortcode-input {\r\n                    width: 100%;\r\n                    margin-bottom: 8px;\r\n                    font-size: 12px;\r\n                }\r\n\r\n                .wcps-copy-shortcode {\r\n                    display: block;\r\n                    width: 100%;\r\n                }\r\n            }\r\n\r\n            th {\r\n                display: none;\r\n\r\n                &:first-child {\r\n                    display: table-cell;\r\n                    width: 35px;\r\n                }\r\n            }\r\n\r\n            tr {\r\n                position: relative;\r\n                display: block;\r\n                border-bottom: 1px solid $border-color;\r\n                margin-bottom: 0;\r\n                background: $white;\r\n\r\n                &:last-child {\r\n                    border-bottom: none;\r\n                }\r\n\r\n                &:not(.inline-edit-row):not(.no-items) td:not(.check-column) {\r\n                    position: relative;\r\n                    display: block;\r\n                    width: auto;\r\n                    padding: 12px 12px 12px 35%;\r\n                    text-align: left;\r\n\r\n                    &:before {\r\n                        position: absolute;\r\n                        left: 12px;\r\n                        width: 30%;\r\n                        padding-right: 10px;\r\n                        white-space: nowrap;\r\n                        font-weight: 600;\r\n                        content: attr(data-colname);\r\n                        color: $dark-text;\r\n                    }\r\n                }\r\n\r\n                &:not(.inline-edit-row):not(.no-items) td.column-primary~td {\r\n                    border-top: 1px solid rgba(0, 0, 0, 0.05);\r\n                }\r\n\r\n                td {\r\n                    border-bottom: none;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @keyframes slideInUp {\r\n        from {\r\n            transform: translateY(15px);\r\n            opacity: 0;\r\n        }\r\n\r\n        to {\r\n            transform: translateY(0);\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    .wcps-showcases-table {\r\n        tbody tr {\r\n            animation: slideInUp 0.4s ease-in-out;\r\n            animation-fill-mode: both;\r\n\r\n            @for $i from 1 through 20 {\r\n                &:nth-child(#{$i}) {\r\n                    animation-delay: #{$i * 0.05}s;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    // Hover effects for rows\r\n    tr {\r\n        transition: $transition;\r\n\r\n        &:hover {\r\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\r\n        }\r\n    }\r\n}\r\n\r\n// OLD one end \r\n\r\n// Main Container NEW SCSS \r\n.wcps-admin.wcps-create-page {\r\n    padding: 20px;\r\n\r\n    .wcps-page-title {\r\n        color: $dark-text;\r\n        font-size: 2rem;\r\n        font-weight: 600;\r\n        margin: 0 0 2rem 0;\r\n        padding: 0;\r\n        border: none;\r\n        text-shadow: none;\r\n        margin-top: -15px;\r\n    }\r\n\r\n    // Panel Toggle Button\r\n    .wcps-panel-toggle {\r\n        margin-bottom: 1.5rem;\r\n        display: none; // Hidden on desktop, shown on mobile\r\n\r\n        @media (max-width: $tablet) {\r\n            display: block;\r\n        }\r\n\r\n        .wcps-toggle-settings {\r\n            background: $primary-color;\r\n            color: $white;\r\n            border: none;\r\n            padding: 12px 20px;\r\n            border-radius: $border-radius;\r\n            font-weight: 500;\r\n            cursor: pointer;\r\n            transition: $transition;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n\r\n            &:hover {\r\n                background: $primary-color;\r\n                transform: translateY(-1px);\r\n            }\r\n\r\n            .dashicons {\r\n                font-size: 16px;\r\n            }\r\n        }\r\n    }\r\n\r\n    // Layout container as flexbox\r\n    .wcps-layout-container {\r\n        display: flex;\r\n        gap: 20px;\r\n    }\r\n\r\n    .wcps-settings-column {\r\n        width: 20%;\r\n        min-width: 280px;\r\n        max-width: 350px;\r\n        flex-shrink: 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        position: relative;\r\n        height: 100vh;\r\n    }\r\n\r\n    .wcps-preview-column {\r\n        flex: 1 1 0;\r\n        min-width: 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        position: relative;\r\n        height: 100vh;\r\n\r\n        .wcps-products-container {\r\n            padding: 15px;\r\n\r\n            .wcps-table {\r\n                .wcps-product-title-col {\r\n                    min-width: unset !important;\r\n                    max-width: unset !important;\r\n                }\r\n            }\r\n\r\n\r\n        }\r\n    }\r\n\r\n    // Admin Tabs\r\n    .wcps-admin-tabs {\r\n        .wcps-tabs-nav {\r\n            display: flex;\r\n            background: $lighter-bg;\r\n            margin: 0;\r\n            padding: 0;\r\n            list-style: none;\r\n            border-radius: 12px 12px 0 0;\r\n\r\n            @media (max-width: $small-tablet) {\r\n                flex-wrap: wrap;\r\n            }\r\n\r\n            li {\r\n                flex: 1;\r\n                margin: 0;\r\n\r\n                @media (max-width: $small-tablet) {\r\n                    flex: 1 1 50%;\r\n                }\r\n\r\n                @media (max-width: $mobile) {\r\n                    flex: 1 1 100%;\r\n                }\r\n\r\n                a {\r\n                    display: block;\r\n                    padding: 3px 10px;\r\n                    text-decoration: none;\r\n                    color: $text-color;\r\n                    font-weight: 500;\r\n                    text-align: center;\r\n                    transition: $transition;\r\n                    border-bottom: 2px solid transparent;\r\n                    position: relative;\r\n                    font-size: 12px;\r\n                    box-shadow: none;\r\n\r\n                    @media (max-width: $mobile) {\r\n                        padding: 12px 16px;\r\n                        font-size: 14px;\r\n                    }\r\n\r\n                    &:hover {\r\n                        background: rgba($primary-color, 0.1);\r\n                        color: $primary-color;\r\n                    }\r\n\r\n                    &.active {\r\n                        background: $white;\r\n                        color: $primary-color;\r\n                        font-weight: 600;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .wcps-tabs-content {\r\n            background: $white;\r\n            border-radius: 0 0 12px 12px;\r\n\r\n            .wcps-tab-panel {\r\n                display: none;\r\n                padding: 5px;\r\n\r\n                @media (max-width: $mobile) {\r\n                    padding: 20px;\r\n                }\r\n\r\n                &.active {\r\n                    display: block;\r\n                }\r\n\r\n                .wcps-settings-subheading {\r\n                    color: $dark-text;\r\n                    font-size: 1.1rem;\r\n                    font-weight: 600;\r\n                    margin: 2rem 0 1rem 0;\r\n                    padding: 12px 16px;\r\n                    background: $light-bg;\r\n                    border-radius: $border-radius;\r\n                    border-left: 4px solid $primary-color;\r\n                    cursor: pointer;\r\n                    transition: $transition;\r\n\r\n                    &:hover {\r\n                        background: $light-bg;\r\n                    }\r\n\r\n                    &.collapsed {\r\n                        +table {\r\n                            display: none;\r\n                        }\r\n\r\n                        &::after {\r\n                            content: ' +';\r\n                            float: right;\r\n                            font-weight: bold;\r\n                        }\r\n                    }\r\n\r\n                    &:not(.collapsed)::after {\r\n                        content: ' −';\r\n                        float: right;\r\n                        font-weight: bold;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    // Form Table Styling\r\n    .form-table {\r\n        width: 100%;\r\n        border-collapse: separate;\r\n        border-spacing: 0;\r\n        margin-bottom: 1.5rem;\r\n\r\n        tr {\r\n            display: flex;\r\n            flex-direction: column;\r\n            padding: 10px 4px 16px 5px;\r\n            background: $white;\r\n            transition: $transition;\r\n\r\n            @media (max-width: $mobile) {\r\n                padding: 16px;\r\n                margin-bottom: 1rem;\r\n            }\r\n\r\n            &:hover {\r\n                border-color: rgba($primary-color, 0.3);\r\n                box-shadow: 0 2px 8px rgba($primary-color, 0.1);\r\n            }\r\n\r\n            th {\r\n                width: 100%;\r\n                text-align: left;\r\n                padding: 0 0 8px 0;\r\n                font-weight: 600;\r\n                color: $dark-text;\r\n                font-size: 14px;\r\n                text-transform: uppercase;\r\n                letter-spacing: 0.5px;\r\n\r\n                label {\r\n                    display: block;\r\n                    margin: 0;\r\n                    font-size: 14px;\r\n                }\r\n            }\r\n\r\n            td {\r\n                width: 100%;\r\n                padding: 0;\r\n\r\n                .description {\r\n                    margin: 8px 0 0 0;\r\n                    font-size: 13px;\r\n                    color: $text-color;\r\n                    line-height: 1.4;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    // Input Styling\r\n    input[type=\"text\"],\r\n    input[type=\"number\"],\r\n    input[type=\"email\"],\r\n    input[type=\"url\"],\r\n    select,\r\n    textarea {\r\n        width: 100%;\r\n        padding: 12px 16px;\r\n        border: 2px solid $border-color;\r\n        border-radius: $border-radius;\r\n        font-size: 14px;\r\n        color: $dark-text;\r\n        background: $white;\r\n        transition: $transition;\r\n        box-shadow: $input-shadow;\r\n        padding: 2px 0px 2px 10px;\r\n\r\n        &:focus {\r\n            outline: none;\r\n            border-color: $primary-color;\r\n            box-shadow: $focus-shadow;\r\n        }\r\n\r\n        &:disabled {\r\n            background: $light-gray;\r\n            color: $text-color;\r\n            cursor: not-allowed;\r\n        }\r\n\r\n        &.small-text {\r\n            width: 100px;\r\n\r\n            @media (max-width: $mobile) {\r\n                width: 80px;\r\n            }\r\n        }\r\n\r\n        &.regular-text {\r\n            width: 100%;\r\n            padding: 2px 0px 2px 10px;\r\n        }\r\n    }\r\n\r\n    // Checkbox and Radio Styling\r\n    input[type=\"checkbox\"],\r\n    input[type=\"radio\"] {\r\n        width: auto;\r\n        margin-right: 8px;\r\n        accent-color: $primary-color;\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    // Select Product \r\n    .wcps-radio-label {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        position: relative;\r\n        margin: 0 0 6px 0;\r\n        cursor: pointer;\r\n        width: 80%;\r\n        padding: 12px 20px;\r\n        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n        border: 2px solid #dee2e6;\r\n        border-radius: 10px;\r\n        color: #495057;\r\n        font-weight: 600;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        font-size: 14px;\r\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n        user-select: none;\r\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n        font-size: 12px;\r\n\r\n        // Hide the actual radio input\r\n        input[type=\"radio\"] {\r\n            position: absolute;\r\n            opacity: 0;\r\n            width: 0;\r\n            height: 0;\r\n        }\r\n\r\n        // Create the custom radio indicator\r\n        &::before {\r\n            content: '';\r\n            display: inline-block;\r\n            width: 20px;\r\n            height: 20px;\r\n            border: 2px solid #dee2e6;\r\n            border-radius: 50%; // Make it circular for radio button\r\n            background-color: #fff;\r\n            margin-right: 12px;\r\n            flex-shrink: 0;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n        }\r\n\r\n        // Hover effect\r\n        &:hover {\r\n            background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);\r\n            border-color: #adb5bd;\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\r\n\r\n            &::before {\r\n                border-color: #007bff;\r\n                box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);\r\n            }\r\n        }\r\n\r\n        // Checked state - this is the key fix\r\n        &:has(input[type=\"radio\"]:checked) {\r\n            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);\r\n            border-color: #0056b3;\r\n            color: white;\r\n            box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);\r\n\r\n            &::before {\r\n                background-color: #fff;\r\n                border-color: #fff;\r\n                box-shadow: inset 0 0 0 5px #007bff;\r\n            }\r\n\r\n            &:hover {\r\n                background: linear-gradient(135deg, #0056b3 0%, #004085 100%);\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);\r\n            }\r\n        }\r\n\r\n        // Alternative approach using JavaScript class\r\n        &.checked {\r\n            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);\r\n            border-color: #0056b3;\r\n            color: white;\r\n            box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);\r\n\r\n            &::before {\r\n                background-color: #fff;\r\n                border-color: #fff;\r\n                box-shadow: inset 0 0 0 5px #007bff;\r\n            }\r\n\r\n            &:hover {\r\n                background: linear-gradient(135deg, #0056b3 0%, #004085 100%);\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);\r\n            }\r\n        }\r\n\r\n        // Focus state for accessibility\r\n        &:has(input[type=\"radio\"]:focus) {\r\n            outline: none;\r\n            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);\r\n        }\r\n\r\n        // Active/pressed state\r\n        &:active {\r\n            transform: translateY(0);\r\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n        }\r\n    }\r\n\r\n    // Button Styling\r\n    .button {\r\n        padding: 0px 11px;\r\n        border-radius: $border-radius;\r\n        font-weight: 500;\r\n        font: size 12px;\r\n        text-decoration: none;\r\n        transition: $transition;\r\n        cursor: pointer;\r\n        border: 2px solid transparent;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n\r\n        &.button-primary {\r\n            background: $primary-color;\r\n            color: $white;\r\n            border-color: $primary-color;\r\n\r\n            &:hover {\r\n                background: $primary-color;\r\n                transform: translateY(-1px);\r\n                box-shadow: 0 4px 12px rgba($primary-color, 0.3);\r\n            }\r\n        }\r\n\r\n        .dashicons {\r\n            font-size: 16px;\r\n        }\r\n    }\r\n\r\n    // Form Actions\r\n    .wcps-form-actions {\r\n        padding: 30px;\r\n        border-radius: 0 0 12px 12px;\r\n        display: flex;\r\n        gap: 12px;\r\n        align-items: center;\r\n\r\n        @media (max-width: $mobile) {\r\n            padding: 20px;\r\n            flex-direction: column;\r\n\r\n            .button {\r\n                width: 100%;\r\n                justify-content: center;\r\n            }\r\n        }\r\n    }\r\n\r\n    // Conditional Fields\r\n    .wcps-conditional-field,\r\n    .wcps-nested-conditional-field {\r\n        padding: 0px;\r\n\r\n        select {\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n            -moz-appearance: none;\r\n            width: 80%;\r\n            padding: 12px 45px 12px 20px;\r\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n            border: 2px solid #dee2e6;\r\n            border-radius: 10px;\r\n            color: #495057;\r\n            font-weight: 600;\r\n            font-size: 14px;\r\n            cursor: pointer;\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n            outline: none;\r\n\r\n            // Multiple select specific styling\r\n            &[multiple] {\r\n                min-height: 150px;\r\n                padding: 8px;\r\n\r\n                option {\r\n                    padding: 8px 12px;\r\n                    margin: 2px 0;\r\n                    border-radius: 6px;\r\n                    background-color: transparent;\r\n                    color: #495057;\r\n                    font-weight: 500;\r\n                    cursor: pointer;\r\n\r\n                    &:checked {\r\n                        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);\r\n                        color: white;\r\n                        font-weight: 600;\r\n                    }\r\n\r\n                    &:hover {\r\n                        background-color: rgba(0, 123, 255, 0.1);\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Single select options\r\n            &:not([multiple]) {\r\n                option {\r\n                    padding: 10px;\r\n                    background-color: white;\r\n                    color: #495057;\r\n\r\n                    &:checked,\r\n                    &:hover {\r\n                        background-color: #007bff;\r\n                        color: white;\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Hover state\r\n            &:hover {\r\n                background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);\r\n                border-color: #adb5bd;\r\n                transform: translateY(-1px);\r\n                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\r\n            }\r\n\r\n            // Focus state\r\n            &:focus {\r\n                border-color: #007bff;\r\n                box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);\r\n                transform: translateY(-1px);\r\n            }\r\n\r\n            // Active state\r\n            &:active {\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        // Custom dropdown arrow for single select\r\n        &:not(.multiple-select)::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            right: 15px;\r\n            transform: translateY(-50%);\r\n            width: 0;\r\n            height: 0;\r\n            border-left: 6px solid transparent;\r\n            border-right: 6px solid transparent;\r\n            border-top: 8px solid #495057;\r\n            pointer-events: none;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        // Arrow animation on hover\r\n        &:hover:not(.multiple-select)::after {\r\n            border-top-color: #007bff;\r\n        }\r\n\r\n        // Arrow animation on focus\r\n        select:focus+&::after,\r\n        &:has(select:focus)::after {\r\n            border-top-color: #007bff;\r\n            transform: translateY(-50%) rotate(180deg);\r\n        }\r\n    }\r\n\r\n    select#proddisp_products {\r\n        height: 255px;\r\n    }\r\n\r\n    // Icon Selection\r\n    .wcps-button-option {\r\n        margin-bottom: 20px;\r\n        padding: 16px;\r\n        background: $light-bg;\r\n        border-radius: $border-radius;\r\n        border: 1px solid $border-color;\r\n\r\n        >label {\r\n            font-weight: 600;\r\n            color: $dark-text;\r\n            display: block;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .wcps-icon-select {\r\n            margin-left: 0px;\r\n            padding: 12px;\r\n            background: $white;\r\n            border-radius: $border-radius;\r\n            border: 1px solid $border-color;\r\n\r\n            label {\r\n                display: block;\r\n                margin-bottom: 8px;\r\n                font-weight: 500;\r\n                color: $text-color;\r\n            }\r\n\r\n            select {\r\n                margin-bottom: 12px;\r\n            }\r\n        }\r\n\r\n        .wcps-icon-picker {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 8px;\r\n            position: relative;\r\n\r\n            span.wcps-icon-preview {\r\n                position: absolute;\r\n                top: 0px;\r\n                right: 90px;\r\n            }\r\n\r\n            @media (max-width: $mobile) {\r\n\r\n                .wcps-icon-input,\r\n                .wcps-icon-select-btn {\r\n                    width: 100%;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    // Preview Column Styling\r\n    .wcps-preview-container {\r\n        margin-top: -122px;\r\n    }\r\n\r\n    // Color Picker\r\n    .wcps-color-picker {\r\n        max-width: 200px !important;\r\n    }\r\n\r\n    // Success/Error Messages\r\n    .wcps-message {\r\n        padding: 16px 20px;\r\n        border-radius: $border-radius;\r\n        margin-bottom: 20px;\r\n        font-weight: 500;\r\n        border-left: 4px solid;\r\n\r\n        &.success {\r\n            background: rgba($success-color, 0.1);\r\n            color: $success-color;\r\n            border-left-color: $success-color;\r\n        }\r\n\r\n        &.error {\r\n            background: rgba($danger-color, 0.1);\r\n            color: $danger-color;\r\n            border-left-color: $danger-color;\r\n        }\r\n\r\n        &.warning {\r\n            background: rgba($warning-color, 0.1);\r\n            color: $warning-color;\r\n            border-left-color: $warning-color;\r\n        }\r\n    }\r\n\r\n    // Responsive Utilities\r\n    @media (max-width: $tablet) {\r\n        padding: 15px;\r\n\r\n        .wcps-layout-container {\r\n            .wcps-settings-column {\r\n                order: 2;\r\n            }\r\n\r\n            .wcps-preview-column {\r\n                order: 1;\r\n            }\r\n        }\r\n    }\r\n\r\n    @media (max-width: $small-tablet) {\r\n        .form-table tr {\r\n\r\n            th,\r\n            td {\r\n                padding: 0;\r\n            }\r\n        }\r\n    }\r\n\r\n    @media (max-width: $mobile) {\r\n        padding: 10px;\r\n\r\n        .wcps-page-title {\r\n            font-size: 1.5rem;\r\n            margin-bottom: 1rem;\r\n        }\r\n\r\n        .wcps-layout-container {\r\n            gap: 15px;\r\n        }\r\n\r\n        input.small-text {\r\n            width: 100%;\r\n        }\r\n\r\n        .wcps-admin-tabs .wcps-tabs-content .wcps-tab-panel {\r\n            padding: 15px;\r\n        }\r\n\r\n        .form-table tr {\r\n            padding: 15px;\r\n            margin-bottom: 10px;\r\n        }\r\n    }\r\n}\r\n\r\n// Animation keyframes\r\n@keyframes fadeIn {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(10px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes slideDown {\r\n    from {\r\n        max-height: 0;\r\n        opacity: 0;\r\n    }\r\n\r\n    to {\r\n        max-height: 500px;\r\n        opacity: 1;\r\n    }\r\n}\r\n\r\n// Fade in animation for tab panels\r\n.wcps-tab-panel.active {\r\n    animation: fadeIn 0.3s ease-in-out;\r\n}\r\n\r\n// Slide animation for collapsible sections\r\n.wcps-settings-subheading:not(.collapsed)+table {\r\n    animation: slideDown 0.3s ease-in-out;\r\n}\r\n\r\n// Focus improvements for accessibility\r\n*:focus-visible {\r\n    outline: 2px solid $primary-color;\r\n    outline-offset: 2px;\r\n    border-radius: $border-radius;\r\n}\r\n\r\n// Print styles\r\n@media print {\r\n    .wcps-admin.wcps-create-page {\r\n        .wcps-preview-column {\r\n            display: none;\r\n        }\r\n\r\n        .wcps-settings-column {\r\n            width: 100%;\r\n        }\r\n\r\n        .wcps-panel-toggle {\r\n            display: none;\r\n        }\r\n    }\r\n}\r\n\r\n// Layout Selection Styles-----------------------\r\n\r\n// Mixins\r\n@mixin flex-center {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n@mixin card-hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n@mixin button-primary {\r\n    background: linear-gradient(135deg, $primary-color 0%, #6366f1 100%);\r\n    color: $white;\r\n    border: none;\r\n    border-radius: $border-radius;\r\n    padding: 12px 24px;\r\n    font-weight: 600;\r\n    text-decoration: none;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: $transition;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n    line-height: 1.4;\r\n    min-height: 44px;\r\n\r\n    &:hover {\r\n        transform: translateY(-1px);\r\n        box-shadow: 0 6px 20px rgba($primary-color, 0.4);\r\n        text-decoration: none;\r\n        color: $white;\r\n    }\r\n\r\n    &:focus {\r\n        outline: none;\r\n        box-shadow: $focus-shadow;\r\n    }\r\n\r\n    &:active {\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n@mixin responsive-grid($min-width: 280px, $gap: 24px) {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));\r\n    gap: $gap;\r\n}\r\n\r\n\r\n// Layout Type and Mode Selection Styles   \r\n/* Modern Product Display Layout Selection Styles */\r\n/* Base Container Styles */\r\n.proddisp-layout-selection,\r\n.proddisp-mode-selection {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 2rem;\r\n    min-height: 100vh;\r\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n}\r\n\r\n/* Header Styles */\r\n.proddisp-header {\r\n    text-align: center;\r\n    margin-bottom: 3rem;\r\n    position: relative;\r\n}\r\n\r\n.proddisp-header::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -20px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 60px;\r\n    height: 4px;\r\n    background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);\r\n    border-radius: 2px;\r\n}\r\n\r\n.proddisp-header h1 {\r\n    color: #ffffff;\r\n    font-size: 2.5rem;\r\n    font-weight: 700;\r\n    margin: 0 0 1rem 0;\r\n    text-shadow: 0 7px 7px rgba(0, 0, 0, 0.1);\r\n    letter-spacing: -0.5px;\r\n}\r\n\r\n.proddisp-header .description {\r\n    color: #718096;\r\n    font-size: 1.1rem;\r\n    font-weight: 400;\r\n    max-width: 600px;\r\n    margin: 0 auto;\r\n    line-height: 1.6;\r\n}\r\n\r\n/* Grid Layout */\r\n.proddisp-layout-grid,\r\n.proddisp-mode-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n    gap: 2rem;\r\n    padding: 0;\r\n}\r\n\r\n/* Card Styles */\r\n.proddisp-layout-card,\r\n.proddisp-mode-card {\r\n    background: rgba(255, 255, 255, 0.95);\r\n    backdrop-filter: blur(20px);\r\n    border-radius: 20px;\r\n    padding: 2.5rem 2rem;\r\n    text-align: center;\r\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.proddisp-layout-card::before,\r\n.proddisp-mode-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 4px;\r\n    background: linear-gradient(90deg, #667eea, #764ba2, #667eea);\r\n    background-size: 200% 100%;\r\n    animation: shimmer 3s ease-in-out infinite;\r\n    opacity: 0;\r\n    transition: opacity 0.3s ease;\r\n}\r\n\r\n.proddisp-layout-card:hover::before,\r\n.proddisp-mode-card:hover::before {\r\n    opacity: 1;\r\n}\r\n\r\n.proddisp-layout-card:hover,\r\n.proddisp-mode-card:hover {\r\n    transform: translateY(-10px) scale(1.02);\r\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\r\n    background: rgba(255, 255, 255, 1);\r\n}\r\n\r\n/* Icon Styles */\r\n.proddisp-layout-icon {\r\n    width: 80px;\r\n    height: 80px;\r\n    margin: 0 auto 1.5rem;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: 50%;\r\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);\r\n    transition: all 0.3s ease;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.proddisp-layout-icon::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);\r\n    transform: translateX(-100%);\r\n    transition: transform 0.6s ease;\r\n}\r\n\r\n.proddisp-layout-card:hover .proddisp-layout-icon::before,\r\n.proddisp-mode-card:hover .proddisp-layout-icon::before {\r\n    transform: translateX(100%);\r\n}\r\n\r\n.proddisp-layout-card:hover .proddisp-layout-icon,\r\n.proddisp-mode-card:hover .proddisp-layout-icon {\r\n    transform: scale(1.1);\r\n    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);\r\n}\r\n\r\n.proddisp-layout-icon .dashicons {\r\n    font-size: 2rem;\r\n    color: #ffffff;\r\n    width: auto;\r\n    height: auto;\r\n}\r\n\r\n/* Typography */\r\n.proddisp-layout-card h3,\r\n.proddisp-mode-card h3 {\r\n    color: #2d3748;\r\n    font-size: 1.4rem;\r\n    font-weight: 600;\r\n    margin: 0 0 1rem 0;\r\n    letter-spacing: -0.3px;\r\n}\r\n\r\n.proddisp-layout-description,\r\n.proddisp-mode-description {\r\n    color: #718096;\r\n    font-size: 0.95rem;\r\n    line-height: 1.6;\r\n    margin: 0 0 2rem 0;\r\n    font-weight: 400;\r\n}\r\n\r\n/* Button Styles */\r\n.proddisp-layout-card .button,\r\n.proddisp-mode-card .button {\r\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n    border: none;\r\n    color: #ffffff;\r\n    padding: 12px 30px;\r\n    border-radius: 50px;\r\n    font-weight: 500;\r\n    font-size: 0.95rem;\r\n    text-decoration: none;\r\n    display: inline-block;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);\r\n    position: relative;\r\n    overflow: hidden;\r\n    min-width: 140px;\r\n}\r\n\r\n.proddisp-layout-card .button::before,\r\n.proddisp-mode-card .button::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: -100%;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n    transition: left 0.5s ease;\r\n}\r\n\r\n.proddisp-layout-card .button:hover::before,\r\n.proddisp-mode-card .button:hover::before {\r\n    left: 100%;\r\n}\r\n\r\n.proddisp-layout-card .button:hover,\r\n.proddisp-mode-card .button:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);\r\n    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);\r\n}\r\n\r\n.proddisp-layout-card .button:active,\r\n.proddisp-mode-card .button:active {\r\n    transform: translateY(0);\r\n}\r\n\r\n/* Animations */\r\n@keyframes shimmer {\r\n    0% {\r\n        background-position: -200% 0;\r\n    }\r\n\r\n    100% {\r\n        background-position: 200% 0;\r\n    }\r\n}\r\n\r\n@keyframes fadeInUp {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n.proddisp-layout-card,\r\n.proddisp-mode-card {\r\n    animation: fadeInUp 0.6s ease forwards;\r\n}\r\n\r\n.proddisp-layout-card:nth-child(1) {\r\n    animation-delay: 0.1s;\r\n}\r\n\r\n.proddisp-layout-card:nth-child(2) {\r\n    animation-delay: 0.2s;\r\n}\r\n\r\n.proddisp-layout-card:nth-child(3) {\r\n    animation-delay: 0.3s;\r\n}\r\n\r\n.proddisp-layout-card:nth-child(4) {\r\n    animation-delay: 0.4s;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (max-width: 768px) {\r\n\r\n    .proddisp-layout-selection,\r\n    .proddisp-mode-selection {\r\n        padding: 1.5rem 1rem;\r\n    }\r\n\r\n    .proddisp-header h1 {\r\n        font-size: 2rem;\r\n    }\r\n\r\n    .proddisp-header .description {\r\n        font-size: 1rem;\r\n    }\r\n\r\n    .proddisp-layout-grid,\r\n    .proddisp-mode-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 1.5rem;\r\n    }\r\n\r\n    .proddisp-layout-card,\r\n    .proddisp-mode-card {\r\n        padding: 2rem 1.5rem;\r\n    }\r\n\r\n    .proddisp-layout-icon {\r\n        width: 70px;\r\n        height: 70px;\r\n    }\r\n\r\n    .proddisp-layout-icon .dashicons {\r\n        font-size: 1.8rem;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n\r\n    .proddisp-layout-selection,\r\n    .proddisp-mode-selection {\r\n        padding: 1rem;\r\n    }\r\n\r\n    .proddisp-header h1 {\r\n        font-size: 1.8rem;\r\n    }\r\n\r\n    .proddisp-layout-card,\r\n    .proddisp-mode-card {\r\n        padding: 1.5rem 1rem;\r\n    }\r\n\r\n    .proddisp-layout-icon {\r\n        width: 60px;\r\n        height: 60px;\r\n    }\r\n\r\n    .proddisp-layout-icon .dashicons {\r\n        font-size: 1.5rem;\r\n    }\r\n}\r\n\r\n/* Dark mode support */\r\n@media (prefers-color-scheme: dark) {\r\n\r\n    .proddisp-layout-card,\r\n    .proddisp-mode-card {\r\n        background: rgba(26, 32, 44, 0.95);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n    }\r\n\r\n    .proddisp-layout-card:hover,\r\n    .proddisp-mode-card:hover {\r\n        background: rgba(26, 32, 44, 1);\r\n    }\r\n\r\n    .proddisp-layout-card h3,\r\n    .proddisp-mode-card h3 {\r\n        color: #f7fafc;\r\n    }\r\n\r\n    .proddisp-layout-description,\r\n    .proddisp-mode-description {\r\n        color: #a0aec0;\r\n    }\r\n}\r\n\r\n/* Loading state animation */\r\n.proddisp-layout-grid.loading .proddisp-layout-card,\r\n.proddisp-mode-grid.loading .proddisp-mode-card {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n}\r\n\r\n/* Focus states for accessibility */\r\n.proddisp-layout-card .button:focus,\r\n.proddisp-mode-card .button:focus {\r\n    outline: none;\r\n    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.5);\r\n}\r\n\r\n/* High contrast mode support */\r\n@media (prefers-contrast: high) {\r\n\r\n    .proddisp-layout-card,\r\n    .proddisp-mode-card {\r\n        border: 2px solid #000;\r\n    }\r\n\r\n    .proddisp-layout-card .button,\r\n    .proddisp-mode-card .button {\r\n        border: 2px solid #000;\r\n    }\r\n}\r\n\r\n// END  \r\n\r\n/* Modern Product Display Style Selection Styles */\r\n/* Base Container Styles */\r\n.proddisp-style-selection {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 2.5rem 2rem;\r\n    // background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n    min-height: 100vh;\r\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n    position: relative;\r\n}\r\n\r\n\r\n/* Style Card Styles */\r\n.proddisp-style-card {\r\n    background: rgba(255, 255, 255, 0.95);\r\n    backdrop-filter: blur(20px);\r\n    border-radius: 24px;\r\n    overflow: hidden;\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    position: relative;\r\n    margin-bottom: 2rem;\r\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(0);\r\n    animation: fadeInUp 0.6s ease forwards;\r\n}\r\n\r\n.proddisp-style-card:nth-child(1) {\r\n    animation-delay: 0.1s;\r\n}\r\n\r\n.proddisp-style-card:nth-child(2) {\r\n    animation-delay: 0.2s;\r\n}\r\n\r\n.proddisp-style-card:nth-child(3) {\r\n    animation-delay: 0.3s;\r\n}\r\n\r\n.proddisp-style-card:nth-child(4) {\r\n    animation-delay: 0.4s;\r\n}\r\n\r\n.proddisp-style-card:nth-child(5) {\r\n    animation-delay: 0.5s;\r\n}\r\n\r\n/* Top Gradient Border */\r\n.proddisp-style-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 4px;\r\n    background: linear-gradient(90deg, #667eea, #764ba2, #667eea);\r\n    background-size: 200% 100%;\r\n    transform: scaleX(0);\r\n    transform-origin: left;\r\n    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n    z-index: 2;\r\n    animation: shimmer 3s ease-in-out infinite;\r\n}\r\n\r\n\r\n/* Preview Section Styles */\r\n.proddisp-style-preview {\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: all 0.4s ease;\r\n    background: linear-gradient(45deg, #f8fafc 0%, #e2e8f0 100%);\r\n    min-height: 200px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.proddisp-style-preview::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: -100%;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n    transition: left 0.6s ease;\r\n}\r\n\r\n.proddisp-style-card:hover .proddisp-style-preview::after {\r\n    left: 100%;\r\n}\r\n\r\n/* Typography Styles */\r\n.proddisp-style-card h3 {\r\n    font-size: 1.375rem;\r\n    font-weight: 600;\r\n    color: #2d3748;\r\n    margin: 0 0 0.5rem 0;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.3px;\r\n    padding: 1.5rem 1.5rem 0 1.5rem;\r\n    position: relative;\r\n}\r\n\r\n/* .proddisp-style-card h3::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: -8px;\r\n    left: 1.5rem;\r\n    width: 40px;\r\n    height: 2px;\r\n    background: linear-gradient(90deg, #667eea, #764ba2);\r\n    border-radius: 1px;\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n    transition: all 0.3s ease;\r\n} */\r\n\r\n.proddisp-style-card:hover h3::after {\r\n    opacity: 1;\r\n    transform: scaleX(1);\r\n}\r\n\r\n.proddisp-style-card p {\r\n    color: #718096;\r\n    font-size: 0.925rem;\r\n    line-height: 1.6;\r\n    margin: 0 0 1.5rem 0;\r\n    padding: 0 1.5rem;\r\n    font-weight: 400;\r\n}\r\n\r\n/* Button Styles */\r\n.proddisp-style-card .button {\r\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n    border: none;\r\n    color: #ffffff;\r\n    padding: 14px 24px;\r\n    border-radius: 12px;\r\n    font-weight: 500;\r\n    font-size: 0.95rem;\r\n    text-decoration: none;\r\n    display: block;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);\r\n    position: relative;\r\n    overflow: hidden;\r\n    margin: 0 1.5rem 1.5rem 1.5rem;\r\n    width: calc(100% - 3rem);\r\n    text-align: center;\r\n    cursor: pointer;\r\n}\r\n\r\n.proddisp-style-card .button::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: -100%;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n    transition: left 0.5s ease;\r\n}\r\n\r\n.proddisp-style-card .button:hover::before {\r\n    left: 100%;\r\n}\r\n\r\n.proddisp-style-card .button:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);\r\n    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);\r\n}\r\n\r\n.proddisp-style-card .button:active {\r\n    transform: translateY(0);\r\n    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);\r\n}\r\n\r\n/* Badge/Label Styles (if needed) */\r\n.proddisp-style-badge {\r\n    position: absolute;\r\n    top: 1rem;\r\n    right: 1rem;\r\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n    color: white;\r\n    padding: 0.5rem 1rem;\r\n    border-radius: 20px;\r\n    font-size: 0.75rem;\r\n    font-weight: 500;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);\r\n}\r\n\r\n/* Loading State */\r\n.proddisp-style-card.loading {\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n}\r\n\r\n/* Animations */\r\n@keyframes fadeInUp {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes shimmer {\r\n    0% {\r\n        background-position: -200% 0;\r\n    }\r\n\r\n    100% {\r\n        background-position: 200% 0;\r\n    }\r\n}\r\n\r\n@keyframes pulse {\r\n\r\n    0%,\r\n    100% {\r\n        opacity: 1;\r\n    }\r\n\r\n    50% {\r\n        opacity: 0.8;\r\n    }\r\n}\r\n\r\n/* Responsive Design */\r\n@media (max-width: 768px) {\r\n    .proddisp-style-selection {\r\n        padding: 2rem 1.5rem;\r\n    }\r\n\r\n    .proddisp-style-card {\r\n        margin-bottom: 1.5rem;\r\n    }\r\n\r\n    .proddisp-style-card h3 {\r\n        font-size: 1.25rem;\r\n        padding: 1.25rem 1.25rem 0 1.25rem;\r\n    }\r\n\r\n    .proddisp-style-card h3::after {\r\n        left: 1.25rem;\r\n    }\r\n\r\n    .proddisp-style-card p {\r\n        font-size: 0.875rem;\r\n        padding: 0 1.25rem;\r\n    }\r\n\r\n    .proddisp-style-card .button {\r\n        margin: 0 1.25rem 1.25rem 1.25rem;\r\n        width: calc(100% - 2.5rem);\r\n        padding: 12px 20px;\r\n    }\r\n\r\n    .proddisp-style-preview {\r\n        min-height: 160px;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .proddisp-style-selection {\r\n        padding: 1.5rem 1rem;\r\n    }\r\n\r\n    .proddisp-style-card {\r\n        border-radius: 16px;\r\n        margin-bottom: 1.25rem;\r\n    }\r\n\r\n    .proddisp-style-card h3 {\r\n        font-size: 1.125rem;\r\n        padding: 1.25rem 1.25rem 0 1.25rem;\r\n    }\r\n\r\n    .proddisp-style-card p {\r\n        font-size: 0.8rem;\r\n        padding: 0 1.25rem;\r\n        margin-bottom: 1.25rem;\r\n    }\r\n\r\n    .proddisp-style-card .button {\r\n        margin: 0 1.25rem 1.25rem 1.25rem;\r\n        width: calc(100% - 2.5rem);\r\n        font-size: 0.875rem;\r\n    }\r\n\r\n    .proddisp-style-preview {\r\n        min-height: 140px;\r\n    }\r\n}\r\n\r\n/* Dark Mode Support */\r\n@media (prefers-color-scheme: dark) {\r\n    .proddisp-style-card {\r\n        background: rgba(26, 32, 44, 0.95);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n    }\r\n\r\n    .proddisp-style-card:hover {\r\n        background: rgba(26, 32, 44, 1);\r\n    }\r\n\r\n    .proddisp-style-card h3 {\r\n        color: #f7fafc;\r\n    }\r\n\r\n    .proddisp-style-card p {\r\n        color: #a0aec0;\r\n    }\r\n\r\n    .proddisp-style-preview {\r\n        background: linear-gradient(45deg, #1a202c 0%, #2d3748 100%);\r\n    }\r\n}\r\n\r\n/* High Contrast Mode */\r\n@media (prefers-contrast: high) {\r\n    .proddisp-style-card {\r\n        border: 2px solid #000;\r\n    }\r\n\r\n    .proddisp-style-card .button {\r\n        border: 2px solid #000;\r\n    }\r\n}\r\n\r\n/* Focus States for Accessibility */\r\n.proddisp-style-card .button:focus {\r\n    outline: none;\r\n    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.5);\r\n}\r\n\r\n/* Reduced Motion Support */\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .proddisp-style-card,\r\n    .proddisp-style-card::before,\r\n    .proddisp-style-preview,\r\n    .proddisp-style-card .button {\r\n        transition: none;\r\n        animation: none;\r\n    }\r\n\r\n    .proddisp-style-card:hover {\r\n        transform: none;\r\n    }\r\n}\r\n\r\n// END \r\n\r\n// Style Preview\r\n.proddisp-style-preview {\r\n    background: $lighter-bg;\r\n    padding: 24px;\r\n    min-height: 200px;\r\n    @include flex-center;\r\n    flex-direction: column;\r\n    transition: $transition;\r\n    border-bottom: 1px solid $border-color;\r\n\r\n    @media (max-width: $mobile) {\r\n        padding: 20px;\r\n        min-height: 160px;\r\n    }\r\n\r\n    p {\r\n        color: $text-color;\r\n        font-style: italic;\r\n        margin: 0;\r\n        text-align: center;\r\n    }\r\n\r\n    // Style for actual product previews when they exist\r\n    .product-item {\r\n        background: $white;\r\n        border-radius: 8px;\r\n        padding: 16px;\r\n        margin: 8px;\r\n        box-shadow: $box-shadow;\r\n        transition: $transition;\r\n        max-width: 150px;\r\n\r\n        &:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        img {\r\n            width: 100%;\r\n            height: auto;\r\n            border-radius: 4px;\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        h4 {\r\n            font-size: 14px;\r\n            margin: 0 0 4px 0;\r\n            color: $dark-text;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .price {\r\n            color: $primary-color;\r\n            font-weight: 600;\r\n            font-size: 13px;\r\n        }\r\n    }\r\n}\r\n\r\n// Responsive Adjustments\r\n@media (max-width: $small-tablet) {\r\n\r\n    .proddisp-layout-grid,\r\n    .proddisp-mode-grid {\r\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n    }\r\n\r\n    .proddisp-style-grid {\r\n        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n    }\r\n}\r\n\r\n@media (max-width: $mobile) {\r\n\r\n    .proddisp-layout-card,\r\n    .proddisp-mode-card {\r\n        padding: 24px 20px;\r\n    }\r\n\r\n    .proddisp-layout-icon {\r\n        width: 60px;\r\n        height: 60px;\r\n\r\n        .dashicons {\r\n            font-size: 20px;\r\n        }\r\n    }\r\n}\r\n\r\n// Loading States\r\n.proddisp-loading {\r\n    @include flex-center;\r\n    min-height: 200px;\r\n\r\n    &::after {\r\n        content: '';\r\n        width: 32px;\r\n        height: 32px;\r\n        border: 3px solid $border-color;\r\n        border-top-color: $primary-color;\r\n        border-radius: 50%;\r\n        animation: spin 1s linear infinite;\r\n    }\r\n}\r\n\r\n@keyframes spin {\r\n    to {\r\n        transform: rotate(360deg);\r\n    }\r\n}\r\n\r\n// Focus and Accessibility\r\n.proddisp-layout-card,\r\n.proddisp-mode-card,\r\n.proddisp-style-card {\r\n    &:focus-within {\r\n        outline: none;\r\n        box-shadow: $focus-shadow;\r\n    }\r\n}\r\n\r\n// Print Styles\r\n@media print {\r\n\r\n    .proddisp-layout-selection,\r\n    .proddisp-mode-selection,\r\n    .proddisp-style-selection {\r\n        background: $white;\r\n        box-shadow: none;\r\n    }\r\n\r\n    .proddisp-layout-card,\r\n    .proddisp-mode-card,\r\n    .proddisp-style-card {\r\n        break-inside: avoid;\r\n        border: 1px solid $border-color;\r\n        box-shadow: none;\r\n    }\r\n}\r\n\r\n// END ------------\r\n\r\n// Create Page Styles\r\n.proddisp-create-page {\r\n    max-width: 1200px;\r\n    margin: 20px auto;\r\n}\r\n\r\n.proddisp-form-section {\r\n    background: #fff;\r\n    border: 1px solid #ddd;\r\n    border-radius: 8px;\r\n    padding: 20px;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.proddisp-form-section h2 {\r\n    margin-top: 0;\r\n    padding-bottom: 10px;\r\n    border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.proddisp-product-selection {\r\n    margin-top: 15px;\r\n}\r\n\r\n.proddisp-product-selection select {\r\n    width: 100%;\r\n    max-width: 400px;\r\n    margin-bottom: 15px;\r\n}\r\n\r\n.proddisp-preview-container {\r\n    background: #f0f0f1;\r\n    border: 1px solid #ddd;\r\n    border-radius: 8px;\r\n    padding: 20px;\r\n    min-height: 200px;\r\n}\r\n\r\n.proddisp-loading,\r\n.proddisp-error {\r\n    text-align: center;\r\n    padding: 40px;\r\n    color: #646970;\r\n}\r\n\r\n.proddisp-error {\r\n    color: #d63638;\r\n}\r\n\r\n// Select2 Customization\r\n.select2-container--default .select2-selection--multiple {\r\n    border-color: #ddd;\r\n}\r\n\r\n.select2-container--default.select2-container--focus .select2-selection--multiple {\r\n    border-color: #2271b1;\r\n    box-shadow: 0 0 0 1px #2271b1;\r\n}\r\n\r\n.select2-container--default .select2-selection--multiple .select2-selection__choice {\r\n    background-color: #f0f0f1;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n    padding: 2px 6px;\r\n}\r\n\r\n.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {\r\n    color: #646970;\r\n    margin-right: 5px;\r\n}\r\n\r\n.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {\r\n    color: #d63638;\r\n}\r\n\r\n// Form Table Styles\r\n.proddisp-create-page .form-table th {\r\n    width: 200px;\r\n    padding: 20px 10px 20px 0;\r\n}\r\n\r\n.proddisp-create-page .form-table td {\r\n    padding: 20px 10px;\r\n}\r\n\r\n.proddisp-create-page .form-table input[type=\"text\"],\r\n.proddisp-create-page .form-table input[type=\"number\"],\r\n.proddisp-create-page .form-table select {\r\n    width: 100%;\r\n    max-width: 400px;\r\n}\r\n\r\n// Checkbox Styles\r\n.proddisp-create-page .form-table label {\r\n    display: block;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.proddisp-create-page .form-table input[type=\"checkbox\"] {\r\n    margin-right: 8px;\r\n}\r\n\r\n// Submit Button\r\n.proddisp-create-page .submit {\r\n    margin-top: 20px;\r\n    padding-top: 20px;\r\n    border-top: 1px solid #ddd;\r\n}\r\n\r\n// Responsive Adjustments\r\n@media screen and (max-width: 782px) {\r\n    .proddisp-create-page .form-table th {\r\n        width: auto;\r\n        padding: 10px 0;\r\n    }\r\n\r\n    .proddisp-create-page .form-table td {\r\n        padding: 10px 0;\r\n    }\r\n\r\n    .proddisp-create-page .form-table input[type=\"text\"],\r\n    .proddisp-create-page .form-table input[type=\"number\"],\r\n    .proddisp-create-page .form-table select {\r\n        max-width: 100%;\r\n    }\r\n}\r\n\r\n// Style Selection Form\r\n.proddisp-style-form {\r\n    margin-top: 20px;\r\n    padding-top: 20px;\r\n    border-top: 1px solid $border-color;\r\n\r\n    .proddisp-name-input {\r\n        margin-bottom: 15px;\r\n\r\n        input {\r\n            line-height: 1.4;\r\n            width: 95%;\r\n            padding: 8px 6px 9px 15px;\r\n            margin: 12px 12px 14px 18px;\r\n            border: 2px solid #e2e8f0;\r\n            border-radius: 6px;\r\n            font-size: 14px;\r\n            color: #1e293b;\r\n            background: #ffffff;\r\n            transition: all 0.2s ease-in-out;\r\n            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);\r\n\r\n            &:focus {\r\n                border-color: $primary-color;\r\n                box-shadow: 0 0 0 1px $primary-color;\r\n                outline: none;\r\n            }\r\n        }\r\n\r\n        .proddisp-name-label {\r\n            font-size: 16px;\r\n            color: #000000;\r\n            line-height: 1.4;\r\n            padding: 8px 6px 9px 2px;\r\n            margin: -13px -3px 12px 20px;\r\n\r\n            &::before {\r\n                content: '| ';\r\n                color: #64748b;\r\n                margin-right: 6px;\r\n            }\r\n        }\r\n\r\n        .description {\r\n            font-size: 13px;\r\n            color: #475569;\r\n            line-height: 1.4;\r\n            padding: 8px 6px 9px 2px;\r\n            margin: -13px -3px 12px 20px;\r\n        }\r\n    }\r\n\r\n    .button-primary {\r\n        width: 100%;\r\n        margin-top: 10px;\r\n    }\r\n}\r\n\r\n// Layout wrong selection page style \r\n// Error Page Styles for render_selection_failed\r\n.proddisp-mode-selection,\r\n.proddisp-style-selection,\r\n.proddisp-create-page,\r\n.proddisp-error-page {\r\n\r\n    // Header section styling\r\n    .proddisp-header {\r\n        margin-bottom: 30px;\r\n        padding-bottom: 20px;\r\n        border-bottom: 1px solid #e1e1e1;\r\n\r\n        h1 {\r\n            margin: 0 0 10px 0;\r\n            font-size: 28px;\r\n            font-weight: 600;\r\n            color: #1d2327;\r\n            line-height: 1.3;\r\n        }\r\n    }\r\n\r\n    // Error notice styling\r\n    .notice.notice-error {\r\n        margin: 0 0 30px 0;\r\n        padding: 20px;\r\n        border-left: 4px solid #d63638;\r\n        background-color: #fff;\r\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n        border-radius: 0 4px 4px 0;\r\n        background: #ffffff;\r\n        border-radius: 12px;\r\n        padding: 32px 24px;\r\n        text-align: center;\r\n        transition: all 0.2s ease-in-out;\r\n        position: relative;\r\n        overflow: hidden;\r\n\r\n        p {\r\n            margin: 0 0 15px 0;\r\n            font-size: 14px;\r\n            line-height: 1.6;\r\n\r\n            &:last-child {\r\n                margin-bottom: 0;\r\n            }\r\n\r\n            strong {\r\n                color: #d63638;\r\n                font-weight: 600;\r\n            }\r\n        }\r\n\r\n        // Error message text\r\n        p:first-child {\r\n            color: #3c434a;\r\n            font-size: 15px;\r\n        }\r\n\r\n        // Button styling within error notice\r\n        .button {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            padding: 8px 16px;\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            text-decoration: none;\r\n            border-radius: 4px;\r\n            transition: all 0.2s ease;\r\n\r\n            &.button-primary {\r\n                background: linear-gradient(135deg, #4a6cf7 0%, #6366f1 100%);\r\n                color: #ffffff;\r\n                border: none;\r\n                border-radius: 6px;\r\n                padding: 12px 24px;\r\n                font-weight: 600;\r\n                text-decoration: none;\r\n                display: inline-flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                transition: all 0.2s ease-in-out;\r\n                cursor: pointer;\r\n                font-size: 14px;\r\n                line-height: 1.4;\r\n                min-height: 44px;\r\n                width: 100%;\r\n                max-width: 240px;\r\n\r\n                &:hover,\r\n                &:focus {\r\n                    background-color: #135e96;\r\n                    border-color: #135e96;\r\n                    color: #fff;\r\n                    transform: translateY(-1px);\r\n                    box-shadow: 0 2px 8px rgba(33, 113, 177, 0.3);\r\n                }\r\n\r\n                &:active {\r\n                    transform: translateY(0);\r\n                    box-shadow: 0 1px 4px rgba(33, 113, 177, 0.3);\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n// END \r\n\r\n// Style for the 'More+' separator in style selection grid\r\n.proddisp-style-more {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 24px 0 16px 0;\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    color: $primary-color;\r\n    background: $light-bg;\r\n    border: 1px dashed $primary-color;\r\n    border-radius: 20px;\r\n    padding: 8px 28px;\r\n    letter-spacing: 1px;\r\n    box-shadow: 0 2px 8px rgba($primary-color, 0.07);\r\n    width: fit-content;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n    cursor: pointer;\r\n    transition: background 0.2s, color 0.2s, border 0.2s;\r\n\r\n    &:hover {\r\n        background: $primary-color;\r\n        color: $white;\r\n        border-color: $primary-color;\r\n    }\r\n}\r\n\r\n// Fix: Constrain slider width in admin preview\r\n.wcps-preview-container .wcps-slider-container,\r\n.wcps-preview-container .wcps-layout-slider {\r\n    width: 100%;\r\n    max-width: 100%;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.preview-header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 10px;\r\n    margin-bottom: 1rem;\r\n\r\n    .preview-header-left {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n    }\r\n\r\n    .preview-header-right {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n    }\r\n\r\n    .wcps-form-actions {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        margin: 0;\r\n        padding: 0;\r\n        box-shadow: none;\r\n        background: none;\r\n        border: none;\r\n    }\r\n}\r\n\r\n@media (max-width: 700px) {\r\n    .preview-header {\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n        gap: 10px;\r\n\r\n        .preview-header-left,\r\n        .preview-header-right {\r\n            justify-content: flex-start;\r\n            gap: 8px;\r\n        }\r\n\r\n        .wcps-form-actions {\r\n            justify-content: flex-start;\r\n            width: 100%;\r\n        }\r\n    }\r\n}\r\n\r\n// Sticky Preview Header and Preview Area\r\n.wcps-preview-column {\r\n    position: relative;\r\n    height: 100vh;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.wcps-preview-container {\r\n    flex: 1 1 auto;\r\n    display: flex;\r\n    flex-direction: column;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n\r\n.preview-header {\r\n    position: sticky;\r\n    top: 25;\r\n    z-index: 10;\r\n    border-bottom: 1px solid #e2e8f0;\r\n    padding-top: 10px;\r\n    padding-bottom: 10px;\r\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n    background: white;\r\n    padding: 21px;\r\n    height: 15px;\r\n    border-radius: 5px;\r\n}\r\n\r\n#wcps-showcase-preview {\r\n    position: sticky;\r\n    top: 60px; // adjust based on header height\r\n    z-index: 5;\r\n    border-radius: 6px;\r\n    border-top: 1px solid #e2e8f0;\r\n    padding: 20px;\r\n    min-height: 400px;\r\n    margin-bottom: 1rem;\r\n\r\n    .wcps-container {\r\n        width: 80%;\r\n        margin: 0 auto;\r\n\r\n        .wcps-products-container {\r\n            width: 90%;\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\r\n// Sticky Tabs Nav in Settings\r\n.wcps-settings-column {\r\n    position: relative;\r\n    height: 100vh;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.wcps-admin-tabs {\r\n    flex: 1 1 auto;\r\n    display: flex;\r\n    flex-direction: column;\r\n    min-height: 0;\r\n}\r\n\r\n.wcps-tabs-nav {\r\n    position: sticky;\r\n    top: 0;\r\n    z-index: 10;\r\n    background: #fff;\r\n    border-bottom: 1px solid #e2e8f0;\r\n}\r\n\r\n.wcps-tabs-content {\r\n    flex: 1 1 auto;\r\n    overflow-y: auto;\r\n    min-height: 0;\r\n    max-height: calc(100vh - 60px); // adjust for header/tabs height\r\n}\r\n\r\n// Responsive: stack on mobile\r\n@media (max-width: 700px) {\r\n\r\n    .wcps-preview-column,\r\n    .wcps-settings-column {\r\n        position: static;\r\n        height: auto;\r\n    }\r\n\r\n    .preview-header,\r\n    #wcps-showcase-preview,\r\n    .wcps-tabs-nav {\r\n        position: static;\r\n        top: auto;\r\n        z-index: auto;\r\n    }\r\n\r\n    .wcps-tabs-content {\r\n        max-height: none;\r\n        overflow-y: visible;\r\n    }\r\n}\r\n\r\n// Desktop: side-by-side columns\r\n.wcps-layout-container {\r\n    display: flex;\r\n    gap: 20px;\r\n}\r\n\r\n.wcps-settings-column {\r\n    width: 20%;\r\n    min-width: 280px;\r\n    max-width: 350px;\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    position: relative;\r\n    height: 100vh;\r\n}\r\n\r\n.wcps-preview-column {\r\n    flex: 1 1 0;\r\n    min-width: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    position: relative;\r\n    height: 100vh;\r\n}\r\n\r\n// Responsive: stack columns on tablet/mobile\r\n@media (max-width: 1000px) {\r\n    .wcps-layout-container {\r\n        flex-direction: column;\r\n        gap: 0;\r\n    }\r\n\r\n    .wcps-settings-column,\r\n    .wcps-preview-column {\r\n        width: 100%;\r\n        min-width: 0;\r\n        max-width: 100%;\r\n        height: auto;\r\n        position: static;\r\n    }\r\n\r\n    .wcps-preview-container {\r\n        min-width: 0;\r\n        max-width: 100%;\r\n        width: 100%;\r\n        height: auto;\r\n    }\r\n}\r\n\r\n// Extra: ensure sticky elements revert on mobile\r\n@media (max-width: 700px) {\r\n\r\n    .preview-header,\r\n    #wcps-showcase-preview,\r\n    .wcps-tabs-nav {\r\n        position: static !important;\r\n        top: auto !important;\r\n        z-index: auto !important;\r\n    }\r\n\r\n    .wcps-tabs-content {\r\n        max-height: none !important;\r\n        overflow-y: visible !important;\r\n    }\r\n}\r\n\r\n// Pro images for layout selection \r\n.proddisp-locked-layout {\r\n    position: relative;\r\n    max-width: 800px;\r\n    width: 100%;\r\n    background: rgba(255, 255, 255, 0.15);\r\n    backdrop-filter: blur(20px);\r\n    border-radius: 5px;\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n    box-shadow:\r\n        0 25px 50px rgba(0, 0, 0, 0.1),\r\n        0 0 0 1px rgba(255, 255, 255, 0.05);\r\n    overflow: hidden;\r\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n    animation: slideUp 0.8s ease-out;\r\n\r\n    &:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow:\r\n            0 35px 70px rgba(0, 0, 0, 0.15),\r\n            0 0 0 1px rgba(255, 255, 255, 0.1);\r\n\r\n        img {\r\n            transform: scale(1.02);\r\n        }\r\n    }\r\n\r\n    img {\r\n        width: 100%;\r\n        height: auto;\r\n        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\r\n        transition: transform 0.3s ease;\r\n    }\r\n}\r\n\r\n@keyframes slideUp {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(40px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n.pro-tag {\r\n    position: absolute;\r\n    top: -12px;\r\n    right: 24px;\r\n    background: linear-gradient(135deg, #ff6b6b, #ee5a24);\r\n    color: white;\r\n    padding: 8px 20px;\r\n    border-radius: 50px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: 1px;\r\n    text-transform: uppercase;\r\n    z-index: 10;\r\n    box-shadow: 0 8px 25px rgba(238, 90, 36, 0.4);\r\n    animation: pulse 2s infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n    0% {\r\n        transform: scale(1);\r\n    }\r\n\r\n    50% {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    100% {\r\n        transform: scale(1);\r\n    }\r\n}\r\n\r\n.image-container {\r\n    position: relative;\r\n    padding: 32px 32px 0;\r\n}\r\n\r\n.wcps-upgrade-pro-btn {\r\n    text-decoration: underline;\r\n    cursor: pointer;\r\n}\r\n\r\n.proddisp-locked-message {\r\n    padding: 32px;\r\n    text-align: center;\r\n    color: #764ba2;\r\n    font-size: 18px;\r\n    font-weight: 500;\r\n    line-height: 1.6;\r\n    background: rgba(255, 255, 255, 0.1);\r\n    backdrop-filter: blur(10px);\r\n    margin: 24px 32px 32px;\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(255, 255, 255, 0.15);\r\n\r\n    .pro-highlight {\r\n        background: linear-gradient(135deg, #667eea, #764ba2);\r\n        -webkit-background-clip: text;\r\n        background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        font-weight: 700;\r\n        text-shadow: 0 0 30px rgba(102, 126, 234, 0.5);\r\n        display: inline-block;\r\n        position: relative;\r\n\r\n        &::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 2px;\r\n            background: linear-gradient(135deg, #667eea, #764ba2);\r\n            border-radius: 2px;\r\n            opacity: 0.7;\r\n        }\r\n    }\r\n}\r\n\r\n\r\n// Responsive Design\r\n@media (max-width: 768px) {\r\n    body {\r\n        padding: 16px;\r\n    }\r\n\r\n    .proddisp-locked-layout {\r\n        border-radius: 20px;\r\n    }\r\n\r\n    .image-container {\r\n        padding: 24px 24px 0;\r\n    }\r\n\r\n    .proddisp-locked-message {\r\n        padding: 24px;\r\n        margin: 20px 24px 24px;\r\n        font-size: 16px;\r\n        border-radius: 12px;\r\n    }\r\n\r\n    .pro-tag {\r\n        top: -10px;\r\n        right: 16px;\r\n        padding: 6px 16px;\r\n        font-size: 11px;\r\n    }\r\n\r\n    .wcps-upgrade-pro-btn {\r\n        padding: 12px 28px;\r\n        font-size: 15px;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .proddisp-locked-layout {\r\n        border-radius: 16px;\r\n    }\r\n\r\n    .image-container {\r\n        padding: 20px 20px 0;\r\n    }\r\n\r\n    .proddisp-locked-message {\r\n        padding: 20px;\r\n        margin: 16px 20px 20px;\r\n        font-size: 15px;\r\n    }\r\n\r\n    .pro-tag {\r\n        right: 12px;\r\n        padding: 5px 14px;\r\n        font-size: 10px;\r\n    }\r\n\r\n    .wcps-upgrade-pro-btn {\r\n        padding: 10px 24px;\r\n        font-size: 14px;\r\n    }\r\n}\r\n\r\n// Pro locked fields for upsell\r\n.wcps-pro-locked {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    position: relative;\r\n\r\n    select[disabled] {\r\n        opacity: 0.6;\r\n        pointer-events: none;\r\n        background: rgba(248, 250, 252, 0.8);\r\n        backdrop-filter: blur(20px);\r\n        color: #aaa;\r\n        border: 1px solid rgba(255, 224, 130, 0.4);\r\n        border-radius: 20px;\r\n        cursor: not-allowed;\r\n        box-shadow:\r\n            0 8px 32px rgba(0, 0, 0, 0.08),\r\n            inset 0 1px 0 rgba(255, 255, 255, 0.2);\r\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .wcps-pro-icon {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 32px;\r\n        height: 32px;\r\n        margin-left: 4px;\r\n        vertical-align: middle;\r\n        backdrop-filter: blur(20px);\r\n        border: 1px solid rgba(255, 255, 255, 0.2);\r\n        border-radius: 50%;\r\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n        &:hover {\r\n            background: rgba(241, 182, 0, 0.25);\r\n            transform: translateY(-2px);\r\n            box-shadow:\r\n                0 12px 36px rgba(241, 182, 0, 0.25),\r\n                inset 0 1px 0 rgba(255, 255, 255, 0.3);\r\n        }\r\n\r\n        svg {\r\n            fill: #f1b600;\r\n            width: 16px;\r\n            height: 16px;\r\n            filter: drop-shadow(0 2px 4px rgba(241, 182, 0, 0.2));\r\n        }\r\n    }\r\n\r\n    .wcps-pro-tooltip {\r\n        display: none;\r\n        position: absolute;\r\n        background: rgba(255, 251, 230, 0.95);\r\n        backdrop-filter: blur(20px);\r\n        color: #b38f00;\r\n        border: 1px solid rgba(255, 224, 130, 0.2);\r\n        border-radius: 20px;\r\n        padding: 6px 12px;\r\n        font-size: 13px;\r\n        margin-left: 8px;\r\n        z-index: 10;\r\n        box-shadow:\r\n            0 16px 48px rgba(0, 0, 0, 0.12),\r\n            0 8px 24px rgba(241, 182, 0, 0.1),\r\n            inset 0 1px 0 rgba(255, 255, 255, 0.3);\r\n        min-width: 220px;\r\n        max-width: 320px;\r\n        opacity: 0;\r\n        transform: translateX(-8px) scale(0.95);\r\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n        /* Glass arrow */\r\n        &::before {\r\n            content: '';\r\n            position: absolute;\r\n            left: -8px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            width: 0;\r\n            height: 0;\r\n            border-top: 8px solid transparent;\r\n            border-bottom: 8px solid transparent;\r\n            border-right: 8px solid rgba(255, 251, 230, 0.95);\r\n            filter: drop-shadow(-1px 0 2px rgba(0, 0, 0, 0.08));\r\n        }\r\n\r\n        &::after {\r\n            content: '';\r\n            position: absolute;\r\n            left: -9px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            width: 0;\r\n            height: 0;\r\n            border-top: 9px solid transparent;\r\n            border-bottom: 9px solid transparent;\r\n            border-right: 9px solid rgba(255, 224, 130, 0.2);\r\n        }\r\n    }\r\n\r\n    &:hover .wcps-pro-tooltip {\r\n        display: block;\r\n        opacity: 1;\r\n        transform: translateX(0) scale(1);\r\n    }\r\n}\r\n\r\n.wcps-pro-locked {\r\n    cursor: pointer;\r\n}\r\n\r\n.wcps-pro-locked input,\r\n.wcps-pro-locked select,\r\n.wcps-pro-locked textarea,\r\n.wcps-pro-locked label {\r\n    cursor: default;\r\n}\r\n\r\n// END \r\n\r\n// Toasmaster \r\n.tm-close-button {}\r\n\r\n.tm-price-modal-header {\r\n    margin-top: 15px !important;\r\n}\r\n\r\n.tm-price-modal-features {\r\n    text-align: left;\r\n}\r\n\r\n// END \r\n\r\n// Toggle Switch Styles\r\n.wcps-toggle-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n    margin-bottom: 12px;\r\n}\r\n\r\n.wcps-toggle-switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 44px;\r\n    height: 24px;\r\n    margin-right: 12px;\r\n    vertical-align: middle;\r\n\r\n    input[type=\"checkbox\"] {\r\n        opacity: 0;\r\n        width: 0;\r\n        height: 0;\r\n    }\r\n\r\n    .wcps-toggle-slider {\r\n        position: absolute;\r\n        cursor: pointer;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        background: $medium-gray;\r\n        border-radius: 24px;\r\n        transition: background 0.2s;\r\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\r\n    }\r\n\r\n    .wcps-toggle-slider:before {\r\n        position: absolute;\r\n        content: \"\";\r\n        height: 18px;\r\n        width: 18px;\r\n        left: 2px;\r\n        bottom: 3px;\r\n        background: $white;\r\n        border-radius: 50%;\r\n        transition: transform 0.2s, background 0.2s;\r\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\r\n    }\r\n\r\n    input:checked+.wcps-toggle-slider {\r\n        background: $primary-color;\r\n    }\r\n\r\n    input:checked+.wcps-toggle-slider:before {\r\n        transform: translateX(20px);\r\n        background: #ffffff;\r\n    }\r\n}\r\n\r\n.wcps-toggle-label {\r\n    font-size: 15px;\r\n    color: $dark-text;\r\n    margin-right: 18px;\r\n    vertical-align: middle;\r\n    font-weight: 500;\r\n    line-height: 24px;\r\n}\r\n\r\n// Shortcode display styling\r\n.wcps-shortcode-display {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    margin-top: 10px;\r\n    padding: 12px 16px;\r\n    background: $light-bg;\r\n    border: 1px solid $border-color;\r\n    border-radius: $border-radius;\r\n    max-width: fit-content;\r\n\r\n    code {\r\n        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\r\n        font-size: 14px;\r\n        color: $dark-text;\r\n        background: $white;\r\n        padding: 8px 12px;\r\n        border-radius: 4px;\r\n        border: 1px solid $medium-gray;\r\n        user-select: all;\r\n        cursor: text;\r\n    }\r\n\r\n    .wcps-copy-shortcode-btn {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 36px;\r\n        height: 36px;\r\n        padding: 0;\r\n        border: 1px solid $primary-color;\r\n        background: $white;\r\n        color: $primary-color;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        transition: $transition;\r\n        box-shadow: 0 2px 4px rgba($primary-color, 0.1);\r\n\r\n        &:hover {\r\n            background: $primary-color;\r\n            color: $white;\r\n            transform: translateY(-1px);\r\n            box-shadow: 0 4px 8px rgba($primary-color, 0.2);\r\n        }\r\n\r\n        &:active {\r\n            transform: translateY(0);\r\n        }\r\n\r\n        .dashicons {\r\n            font-size: 16px;\r\n            width: 16px;\r\n            height: 16px;\r\n        }\r\n\r\n        &.copied {\r\n            background: $success-color;\r\n            border-color: $success-color;\r\n            color: $white;\r\n            box-shadow: 0 4px 8px rgba($success-color, 0.2);\r\n        }\r\n    }\r\n}\r\n\r\n// Success notice styling\r\n.wcps-copy-notice {\r\n    position: fixed;\r\n    top: 32px;\r\n    right: 20px;\r\n    background: $success-color;\r\n    color: $white;\r\n    padding: 12px 20px;\r\n    border-radius: $border-radius;\r\n    box-shadow: 0 4px 12px rgba($success-color, 0.3);\r\n    z-index: 999999;\r\n    font-weight: 500;\r\n    font-size: 14px;\r\n    transform: translateX(100%);\r\n    transition: transform 0.3s ease-in-out;\r\n\r\n    &.show {\r\n        transform: translateX(0);\r\n    }\r\n\r\n    .dashicons {\r\n        margin-right: 8px;\r\n        vertical-align: middle;\r\n    }\r\n}\r\n\r\n\r\n\r\n\r\n// Get Started Page Style start -------------------------------------------\r\n// Get Started Page Styles\r\n.wcps-admin-get-started {\r\n    max-width: 1500px;\r\n    margin: 0 auto;\r\n    padding: 20px;\r\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n\r\n    // Welcome Section\r\n    .wcps-welcome-section {\r\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        color: white;\r\n        padding: 50px 40px;\r\n        border-radius: 5px;\r\n        margin: 30px 0;\r\n        text-align: center;\r\n        position: relative;\r\n        overflow: hidden;\r\n\r\n        &::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);\r\n            pointer-events: none;\r\n        }\r\n\r\n        .welcome-icon {\r\n            font-size: 60px;\r\n            margin-bottom: 20px;\r\n            animation: bounce 2s infinite;\r\n        }\r\n\r\n        .welcome-title {\r\n            color: white;\r\n            margin-bottom: 20px;\r\n            font-size: 32px;\r\n            font-weight: 700;\r\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        .welcome-description {\r\n            font-size: 18px;\r\n            margin-bottom: 30px;\r\n            opacity: 0.95;\r\n            line-height: 1.6;\r\n            max-width: 600px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n\r\n        .welcome-actions {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 20px;\r\n            flex-wrap: wrap;\r\n            margin-top: 30px;\r\n        }\r\n\r\n        .welcome-btn-primary {\r\n            background: white !important;\r\n            color: #667eea !important;\r\n            border: none !important;\r\n            padding: 15px 30px !important;\r\n            font-size: 16px !important;\r\n            font-weight: 600 !important;\r\n            border-radius: 8px !important;\r\n            text-decoration: none !important;\r\n            transition: all 0.3s ease !important;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;\r\n            display: inline-flex !important;\r\n            align-items: center !important;\r\n            gap: 8px !important;\r\n\r\n            &:hover {\r\n                transform: translateY(-2px) !important;\r\n                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;\r\n                background: #f8f9fa !important;\r\n            }\r\n        }\r\n\r\n        .welcome-btn-secondary {\r\n            background: rgba(255, 255, 255, 0.15) !important;\r\n            color: white !important;\r\n            border: 2px solid rgba(255, 255, 255, 0.3) !important;\r\n            padding: 15px 30px !important;\r\n            font-size: 16px !important;\r\n            border-radius: 8px !important;\r\n            text-decoration: none !important;\r\n            transition: all 0.3s ease !important;\r\n            display: inline-flex !important;\r\n            align-items: center !important;\r\n            gap: 8px !important;\r\n\r\n            &:hover {\r\n                background: rgba(255, 255, 255, 0.25) !important;\r\n                border-color: rgba(255, 255, 255, 0.5) !important;\r\n                transform: translateY(-2px) !important;\r\n            }\r\n        }\r\n\r\n        .btn-icon {\r\n            font-size: 18px;\r\n        }\r\n    }\r\n\r\n    // Stats Grid\r\n    .wcps-stats-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\r\n        gap: 25px;\r\n        margin: 40px 0;\r\n    }\r\n\r\n    .stat-card {\r\n        background: white;\r\n        padding: 30px 25px;\r\n        border-radius: 12px;\r\n        text-align: center;\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n        transition: all 0.3s ease;\r\n        border: 1px solid rgba(0, 0, 0, 0.05);\r\n\r\n        &:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\r\n        }\r\n\r\n        .stat-icon {\r\n            font-size: 40px;\r\n            margin-bottom: 30px;\r\n            color: #667eea;\r\n\r\n            &.stat-icon-success {\r\n                color: #28a745;\r\n            }\r\n\r\n            &.stat-icon-warning {\r\n                color: #ffc107;\r\n            }\r\n\r\n            &.stat-icon-danger {\r\n                color: #dc3545;\r\n            }\r\n        }\r\n\r\n        .stat-number {\r\n            font-size: 28px;\r\n            font-weight: 700;\r\n            color: #333;\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .stat-label {\r\n            color: #666;\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n    }\r\n\r\n    // Section Titles\r\n    .section-title {\r\n        color: #333;\r\n        margin-bottom: 30px;\r\n        font-size: 26px;\r\n        font-weight: 700;\r\n        border-bottom: 3px solid #667eea;\r\n        padding-bottom: 15px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n\r\n        .title-icon {\r\n            font-size: 30px;\r\n        }\r\n    }\r\n\r\n    // FAQ Section\r\n    .wcps-faq-section {\r\n        background: white;\r\n        padding: 40px;\r\n        border-radius: 16px;\r\n        margin: 40px 0;\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n    }\r\n\r\n    .faq-container {\r\n        display: grid;\r\n        gap: 20px;\r\n    }\r\n\r\n    .faq-item {\r\n        border: 1px solid #e0e0e0;\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        transition: all 0.3s ease;\r\n\r\n        &:hover {\r\n            border-color: #667eea;\r\n            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);\r\n        }\r\n    }\r\n\r\n    .faq-toggle {\r\n        width: 100%;\r\n        background: #f8f9fa;\r\n        border: none;\r\n        padding: 25px;\r\n        text-align: left;\r\n        cursor: pointer;\r\n        font-weight: 600;\r\n        color: #333;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        transition: all 0.3s ease;\r\n        font-size: 16px;\r\n\r\n        &:hover {\r\n            background: #e9ecef;\r\n        }\r\n\r\n        &.active {\r\n            background: #667eea;\r\n            color: white;\r\n        }\r\n\r\n        .faq-icon {\r\n            font-size: 20px;\r\n            font-weight: bold;\r\n            transition: transform 0.3s ease;\r\n            width: 24px;\r\n            height: 24px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            border-radius: 50%;\r\n            background: rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        &.active .faq-icon {\r\n            transform: rotate(180deg);\r\n            background: rgba(255, 255, 255, 0.2);\r\n        }\r\n    }\r\n\r\n    .faq-content {\r\n        display: none;\r\n        padding: 25px;\r\n        background: white;\r\n        border-top: 1px solid #e0e0e0;\r\n        line-height: 1.7;\r\n        color: #555;\r\n\r\n        p {\r\n            margin: 0 0 15px 0;\r\n        }\r\n\r\n        h4 {\r\n            color: #333;\r\n            margin: 20px 0 10px 0;\r\n            font-size: 16px;\r\n        }\r\n\r\n        .code-block {\r\n            background: #f8f9fa;\r\n            padding: 15px;\r\n            border-radius: 8px;\r\n            border-left: 4px solid #667eea;\r\n            margin: 15px 0;\r\n\r\n            code {\r\n                color: #667eea;\r\n                font-weight: 600;\r\n                font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\r\n            }\r\n        }\r\n\r\n        .feature-list {\r\n            margin: 15px 0;\r\n            padding-left: 0;\r\n            list-style: none;\r\n\r\n            li {\r\n                margin-bottom: 8px;\r\n                padding-left: 25px;\r\n                position: relative;\r\n\r\n                &::before {\r\n                    content: '✓';\r\n                    position: absolute;\r\n                    left: 0;\r\n                    color: #28a745;\r\n                    font-weight: bold;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    // Cards Grid\r\n    .wcps-cards-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\r\n        gap: 30px;\r\n        margin: 40px 0;\r\n    }\r\n\r\n    .support-card {\r\n        color: rgb(0, 0, 0);\r\n        padding: 40px 30px;\r\n        border-radius: 16px;\r\n        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);\r\n        transition: all 0.3s ease;\r\n        position: relative;\r\n        overflow: hidden;\r\n\r\n        &::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);\r\n            pointer-events: none;\r\n        }\r\n\r\n        &:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        &.card-success {\r\n            background: linear-gradient(135deg, #e3ebff 0%, #f0f0f0 100%);\r\n        }\r\n\r\n        &.card-purple {\r\n            background: linear-gradient(135deg, #e3ebff 0%, #f0f0f0 100%);\r\n        }\r\n\r\n        .card-icon {\r\n            font-size: 50px;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .card-title {\r\n            color: rgb(24, 24, 24);\r\n            margin-bottom: 20px;\r\n            font-size: 24px;\r\n            font-weight: 700;\r\n        }\r\n\r\n        .card-description {\r\n            margin-bottom: 25px;\r\n            opacity: 0.95;\r\n            line-height: 1.6;\r\n            font-size: 16px;\r\n        }\r\n\r\n        .card-features {\r\n            list-style: none;\r\n            padding: 0;\r\n            margin-bottom: 30px;\r\n\r\n            li {\r\n                margin-bottom: 12px;\r\n                display: flex;\r\n                align-items: center;\r\n                gap: 12px;\r\n                font-size: 15px;\r\n            }\r\n\r\n            .feature-icon {\r\n                font-size: 16px;\r\n            }\r\n        }\r\n\r\n        .card-button {\r\n            background: rgba(255, 255, 255, 0.2);\r\n            color: #414141;\r\n            border: 2px solid rgba(255, 255, 255, 0.3);\r\n            padding: 12px 24px;\r\n            text-decoration: none;\r\n            border-radius: 8px;\r\n            display: inline-block;\r\n            transition: all 0.3s ease;\r\n            font-weight: 600;\r\n\r\n            &:hover {\r\n                background: rgba(255, 255, 255, 0.3);\r\n                border-color: rgba(255, 255, 255, 0.5);\r\n                transform: translateY(-2px);\r\n            }\r\n        }\r\n    }\r\n\r\n    // Steps Section\r\n    .wcps-steps-section {\r\n        background: white;\r\n        padding: 40px;\r\n        border-radius: 16px;\r\n        margin: 40px 0;\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n    }\r\n\r\n    .steps-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n        gap: 30px;\r\n    }\r\n\r\n    .step-item {\r\n        text-align: center;\r\n        padding: 30px 20px;\r\n        transition: all 0.3s ease;\r\n        border-radius: 12px;\r\n\r\n        &:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\r\n        }\r\n    }\r\n\r\n    .step-number {\r\n        width: 60px;\r\n        height: 60px;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin: 0 auto 20px;\r\n        font-weight: 700;\r\n        font-size: 20px;\r\n        color: white;\r\n        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\r\n\r\n        &.step-primary {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        &.step-success {\r\n            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);\r\n        }\r\n\r\n        &.step-warning {\r\n            background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%);\r\n        }\r\n\r\n        &.step-danger {\r\n            background: linear-gradient(135deg, #dc3545 0%, #e91e63 100%);\r\n        }\r\n    }\r\n\r\n    .step-title {\r\n        color: #333;\r\n        margin-bottom: 15px;\r\n        font-size: 18px;\r\n        font-weight: 600;\r\n    }\r\n\r\n    .step-description {\r\n        color: #666;\r\n        font-size: 14px;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    // Shortcodes Section\r\n    .wcps-shortcodes-section {\r\n        background: white;\r\n        padding: 40px;\r\n        border-radius: 16px;\r\n        margin: 40px 0;\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n    }\r\n\r\n    .shortcodes-grid {\r\n        display: grid;\r\n        gap: 30px;\r\n    }\r\n\r\n    .shortcode-item {\r\n        border: 1px solid #e0e0e0;\r\n        border-radius: 12px;\r\n        padding: 30px;\r\n        transition: all 0.3s ease;\r\n\r\n        &:hover {\r\n            border-color: #667eea;\r\n            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        &.setup-tips {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n            color: white;\r\n            border: none;\r\n\r\n            .shortcode-title {\r\n                color: white;\r\n            }\r\n\r\n            .setup-list {\r\n                list-style: none;\r\n                padding: 0;\r\n                margin: 0;\r\n\r\n                li {\r\n                    margin-bottom: 12px;\r\n                    padding-left: 20px;\r\n                    position: relative;\r\n                    line-height: 1.6;\r\n\r\n                    &::before {\r\n                        content: '⚡';\r\n                        position: absolute;\r\n                        left: 0;\r\n                        font-size: 14px;\r\n                    }\r\n\r\n                    code {\r\n                        background: rgba(255, 255, 255, 0.2);\r\n                        padding: 2px 6px;\r\n                        border-radius: 4px;\r\n                        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .shortcode-title {\r\n        color: #333;\r\n        margin-bottom: 15px;\r\n        font-size: 20px;\r\n        font-weight: 600;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n\r\n        .shortcode-icon {\r\n            font-size: 24px;\r\n        }\r\n    }\r\n\r\n    .shortcode-description {\r\n        color: #666;\r\n        margin-bottom: 20px;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    .code-block {\r\n        background: #f8f9fa;\r\n        padding: 15px;\r\n        border-radius: 8px;\r\n        border-left: 4px solid #667eea;\r\n        margin: 15px 0;\r\n\r\n        &.code-success {\r\n            border-left-color: #28a745;\r\n        }\r\n\r\n        code {\r\n            color: #667eea;\r\n            font-weight: 600;\r\n            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\r\n        }\r\n\r\n        &.code-success code {\r\n            color: #28a745;\r\n        }\r\n    }\r\n\r\n    .shortcode-params {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n        gap: 15px;\r\n        margin: 20px 0;\r\n    }\r\n\r\n    .param-item {\r\n        background: #e8f5e8;\r\n        padding: 15px;\r\n        border-radius: 8px;\r\n\r\n        .param-name {\r\n            color: #28a745;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .param-description {\r\n            color: #666;\r\n            font-size: 13px;\r\n        }\r\n    }\r\n\r\n    .shortcode-usage {\r\n        color: #666;\r\n        font-size: 14px;\r\n        margin: 15px 0 0 0;\r\n    }\r\n\r\n    // Animations\r\n    @keyframes bounce {\r\n\r\n        0%,\r\n        20%,\r\n        50%,\r\n        80%,\r\n        100% {\r\n            transform: translateY(0);\r\n        }\r\n\r\n        40% {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        60% {\r\n            transform: translateY(-5px);\r\n        }\r\n    }\r\n\r\n    @keyframes fadeInUp {\r\n        from {\r\n            opacity: 0;\r\n            transform: translateY(30px);\r\n        }\r\n\r\n        to {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n    }\r\n\r\n    // Responsive Design\r\n    @media (max-width: 768px) {\r\n        padding: 15px;\r\n\r\n        .wcps-welcome-section {\r\n            padding: 40px 30px;\r\n            margin: 20px 0;\r\n\r\n            .welcome-title {\r\n                font-size: 28px;\r\n            }\r\n\r\n            .welcome-description {\r\n                font-size: 16px;\r\n            }\r\n\r\n            .welcome-actions {\r\n                flex-direction: column;\r\n                align-items: center;\r\n            }\r\n\r\n            .welcome-btn-primary,\r\n            .welcome-btn-secondary {\r\n                width: 100%;\r\n                max-width: 300px;\r\n                justify-content: center;\r\n            }\r\n        }\r\n\r\n        .wcps-stats-grid {\r\n            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n            gap: 15px;\r\n        }\r\n\r\n        .stat-card {\r\n            padding: 20px 15px;\r\n\r\n            .stat-icon {\r\n                font-size: 32px;\r\n            }\r\n\r\n            .stat-number {\r\n                font-size: 24px;\r\n            }\r\n        }\r\n\r\n        .section-title {\r\n            font-size: 22px;\r\n            flex-direction: column;\r\n            text-align: center;\r\n            gap: 8px;\r\n        }\r\n\r\n        .wcps-faq-section,\r\n        .wcps-steps-section,\r\n        .wcps-shortcodes-section {\r\n            padding: 30px 20px;\r\n        }\r\n\r\n        .faq-toggle {\r\n            padding: 20px;\r\n            font-size: 15px;\r\n        }\r\n\r\n        .faq-content {\r\n            padding: 20px;\r\n        }\r\n\r\n        .wcps-cards-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .support-card {\r\n            padding: 30px 25px;\r\n        }\r\n\r\n        .steps-grid {\r\n            grid-template-columns: 1fr;\r\n            gap: 25px;\r\n        }\r\n\r\n        .shortcode-item {\r\n            padding: 25px 20px;\r\n        }\r\n\r\n        .shortcode-params {\r\n            grid-template-columns: 1fr;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .wcps-welcome-section {\r\n            padding: 30px 20px;\r\n\r\n            .welcome-icon {\r\n                font-size: 48px;\r\n            }\r\n\r\n            .welcome-title {\r\n                font-size: 24px;\r\n            }\r\n\r\n            .welcome-description {\r\n                font-size: 15px;\r\n            }\r\n        }\r\n\r\n        .wcps-stats-grid {\r\n            grid-template-columns: 1fr 1fr;\r\n        }\r\n\r\n        .stat-card {\r\n            padding: 15px 10px;\r\n\r\n            .stat-number {\r\n                font-size: 20px;\r\n            }\r\n\r\n            .stat-label {\r\n                font-size: 12px;\r\n            }\r\n        }\r\n\r\n        .faq-toggle {\r\n            padding: 15px;\r\n            font-size: 14px;\r\n        }\r\n\r\n        .faq-content {\r\n            padding: 15px;\r\n        }\r\n\r\n        .support-card {\r\n            padding: 25px 20px;\r\n\r\n            .card-icon {\r\n                font-size: 40px;\r\n            }\r\n\r\n            .card-title {\r\n                font-size: 20px;\r\n            }\r\n        }\r\n\r\n        .step-number {\r\n            width: 50px;\r\n            height: 50px;\r\n            font-size: 18px;\r\n        }\r\n    }\r\n}\r\n\r\n// Get Started Page Style end----------------------------------------------- \r\n\r\n\r\n\r\n\r\n\r\n// Admin force layout issues fixed - ------------------------------\r\n.wcps-container.wcps-layout-flip-layout .wcps-cta-right .wcps-cta-title h3,\r\n.wcps-container.wcps-layout-flip-layout-2 .wcps-cta-right .wcps-cta-title h3 {\r\n    padding: 0px !important;\r\n}\r\n\r\n.wcps-container.wcps-layout-flip-layout .wcps-cta-right .wcps-cta-add-to-cart,\r\n.wcps-container.wcps-layout-flip-layout-2 .wcps-cta-right .wcps-cta-add-to-cart {\r\n    width: auto;\r\n    margin-left: -30px;\r\n\r\n    a {\r\n        padding: 10px 20px !important;\r\n    }\r\n}\r\n\r\n.wcps-container.wcps-layout-flip-layout-2 {\r\n    width: 100%;\r\n}\r\n\r\n.wcps-container.wcps-layout-flip-layout .wcps-cta-right,\r\n.wcps-container.wcps-layout-flip-layout-2 .wcps-cta-right {\r\n    padding: 0px !important;\r\n    cursor: pointer;\r\n}\r\n\r\n.wcps-container.wcps-layout-category_tabs .wcps-category-tabs .wcps-tab-content .wcps-products-grid .wcps-product-item .wcps-product {\r\n    padding: 15px !important;\r\n}\r\n\r\n// END ------------------------------------------------------"],"names":[],"sourceRoot":""}