From 3894e225f6dbe32281c553e87f990f33349c1c9d Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Mon, 23 Sep 2024 16:35:48 +0300
Subject: [PATCH 1/2] fix(addon-commerce): `InputCardGroup` fix for older
 Safari

---
 .../input-card-grouped.style.less             | 39 +++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
index 792a995d16a0..8a2b5ea79dfa 100644
--- a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
+++ b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
@@ -12,6 +12,8 @@
     height: var(--tui-height-l);
     width: @width-full;
     border-radius: var(--tui-radius-m);
+    overflow: hidden;
+    isolation: isolate;
 
     &[data-mode='onDark'] {
         --tui-autofill: var(--tui-autofill-night);
@@ -41,8 +43,9 @@
     height: 100%;
 
     &_cvc {
+        inline-size: 50%;
         margin-left: @offset-full;
-        transform: translate3d(100%, 0, 0);
+        transform: translate3d(200%, 0, 0);
 
         :host-context(tui-root._mobile) & {
             margin-left: @offset-small;
@@ -50,7 +53,18 @@
     }
 
     &_expire {
-        transform: translate3d(100%, 0, 0);
+        inline-size: 50%;
+        transform: translate3d(@wrapper-offset-full, 0, 0);
+
+        :host-context(tui-root._mobile) & {
+            transform: translate3d(@wrapper-offset-small, 0, 0);
+        }
+
+        .t-label,
+        .t-input {
+            margin-inline-start: 0;
+            padding-inline-start: 100%;
+        }
     }
 
     &_active {
@@ -59,6 +73,13 @@
         :host-context(tui-root._mobile) & {
             transform: translate3d(@wrapper-offset-small, 0, 0);
         }
+
+        &.t-wrapper_expire {
+            .t-label,
+            .t-input {
+                padding-inline-start: var(--tui-padding-l);
+            }
+        }
     }
 }
 
@@ -106,7 +127,8 @@
 
 .t-input {
     .textfield-input();
-    .transition(background);
+    .transition(~'background, padding');
+
     border: 0;
     padding: 0 1rem;
 
@@ -128,12 +150,19 @@
             caret-color: var(--tui-base-09);
             color: transparent !important;
             -webkit-text-fill-color: transparent !important;
+            transition:
+                background-color 600000s 0s,
+                padding var(--tui-duration) ease-in-out;
         }
 
         //noinspection CssInvalidPseudoSelector
         &::-webkit-credit-card-auto-fill-button {
             .webkit-auto-fill-button-hidden();
         }
+
+        &:focus {
+            z-index: 1;
+        }
     }
 
     &_inert {
@@ -175,3 +204,7 @@
 .t-ghost {
     visibility: hidden;
 }
+
+tui-icon {
+    z-index: 1;
+}

From abea091dc15610d158c1ed6d34b9816361ea0d0e Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Mon, 23 Sep 2024 18:50:52 +0300
Subject: [PATCH 2/2] fix(addon-commerce): `InputCardGroup` increase
 specitifity

---
 .../input-card-grouped/input-card-grouped.style.less  | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
index 8a2b5ea79dfa..74ae97d24514 100644
--- a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
+++ b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
@@ -60,10 +60,10 @@
             transform: translate3d(@wrapper-offset-small, 0, 0);
         }
 
-        .t-label,
+        .t-placeholder,
         .t-input {
             margin-inline-start: 0;
-            padding-inline-start: 100%;
+            padding-inline-start: 100% !important;
         }
     }
 
@@ -75,9 +75,9 @@
         }
 
         &.t-wrapper_expire {
-            .t-label,
+            .t-placeholder,
             .t-input {
-                padding-inline-start: var(--tui-padding-l);
+                padding-inline-start: var(--tui-padding-l) !important;
             }
         }
     }
@@ -199,12 +199,13 @@
     .textfield-placeholder();
     margin: 1.125rem 1rem;
     line-height: 1.25rem;
+    width: auto;
 }
 
 .t-ghost {
     visibility: hidden;
 }
 
-tui-icon {
+tui-svg {
     z-index: 1;
 }