@salla.sa/twilight-components 2.14.576 → 2.14.577

package/dist/collection/components/salla-cart-coupons/salla-cart-coupons.css

@@ -1,79 +1,141 @@
-/*!twlt*//* Most styles live in utilities.json (compiled into the theme's components layer).
-   The applied-coupon chip styles live here so they ship inside the component
+/*!twlt*/@charset "UTF-8";
+/* Most styles live in utilities.json (compiled into the theme's components layer).
+   The applied-coupon styles live here so they ship inside the component
    bundle and render even when the theme's global utilities layer isn't rebuilt.
    Flat plain-CSS selectors only, so this compiles under both the postcss and
    sass build paths. */
-.s-cart-coupons-applied-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 12px;
+/* CP-3695: an applied coupon is no longer a chip below the input — it is the same card as
+   every other coupon, tinted with the store's own colour and carrying مُطبق / إلغاء in its
+   footer.
+
+   The tint is derived from `--color-primary` (set per store by the theme — raed writes it in
+   `layouts/master.twig`), never a fixed green, so an applied card reads as "this store's
+   accent" on every storefront instead of clashing with the palette. Each declaration is
+   mixed with `transparent` rather than white so the same rule works over the card's
+   `bg-white dark:bg-gray-800`, and each is preceded by a flat neutral fallback for browsers
+   without `color-mix()` — the same shape `salla-count-down` and `salla-verified-review` use. */
+.s-cart-coupons-card--applied {
+  cursor: default;
 }
 
-.s-cart-coupons-applied-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 10px 12px;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
-  border-inline-start: 3px solid #10b981;
+.s-cart-coupons-card--applied:hover {
+  transform: none;
 }
 
-.s-cart-coupons-applied-code {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  font-weight: 700;
-  color: #111827;
+.s-cart-coupons-card--applied .s-cart-coupons-top-section,
+.s-cart-coupons-card--applied .s-cart-coupons-bottom-section,
+.s-cart-coupons-card--applied .s-cart-coupons-divider {
+  border-color: #d1d5db; /* fallback for browsers without color-mix() */
+  border-color: color-mix(in srgb, var(--color-primary, #004d5a) 40%, transparent);
 }
 
-.s-cart-coupons-applied-code::before {
-  content: "";
-  width: 7px;
-  height: 7px;
-  border-radius: 9999px;
-  background: #10b981;
+.s-cart-coupons-card--applied .s-cart-coupons-bottom-section {
+  background: rgba(0, 0, 0, 0.04); /* fallback for browsers without color-mix() */
+  background: color-mix(in srgb, var(--color-primary, #004d5a) 8%, transparent);
+}
+
+/* The ticket notches are pseudo-elements on the card, so they carry their own border. */
+.s-cart-coupons-card--applied::before,
+.s-cart-coupons-card--applied::after {
+  border-color: #d1d5db; /* fallback for browsers without color-mix() */
+  border-color: color-mix(in srgb, var(--color-primary, #004d5a) 40%, transparent);
 }
 
-.s-cart-coupons-applied-remove {
+/* Footer holds two controls side by side instead of a single label. */
+.s-cart-coupons-card--applied .s-cart-coupons-action {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  color: #ef4444;
+  gap: 10px;
+}
+
+/* Match the footer's own scale (expiry/minimum are text-[10px] gray-700) rather than the
+   9px bold gray-900 the shared .action utility applies — the design reads these as quiet
+   footer text, not as a call to action. */
+.s-cart-coupons-card--applied .s-cart-coupons-action {
+  font-size: 10px;
+  font-weight: 600;
+  color: #4b5563;
+}
+
+/* The state label is the one place the accent has to be legible as text, so it takes the
+   store colour at full strength (its dark variant where the theme publishes one) rather
+   than a tint. */
+.s-cart-coupons-card-applied-label {
+  color: #4b5563; /* fallback for themes that publish no store colour */
+  color: var(--color-primary-dark, var(--color-primary, #4b5563));
+}
+
+/* The footer is nowrap inside an overflow-hidden card, so a long label pushes the
+   remove control outside the box where it is clipped and unclickable. Let it shrink. */
+.s-cart-coupons-card--applied .s-cart-coupons-action {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.s-cart-coupons-card-applied-label,
+.s-cart-coupons-card-remove {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The theme's compiled CSS carries `.s-cart-coupons-card *` and `.s-cart-coupons-action *`
+   { pointer-events: none } — from when the whole card was the only click target and nothing
+   inside it was interactive. The remove control is the first real interactive child, so it must
+   opt back in explicitly or the click never reaches it and إلغاء silently does nothing.
+   Both selectors below are (0,2,0) and beat the theme's (0,1,0) blanket rules. */
+.s-cart-coupons-card--applied .s-cart-coupons-action,
+.s-cart-coupons-card--applied .s-cart-coupons-card-remove {
+  pointer-events: auto;
+}
+
+.s-cart-coupons-card-remove {
+  flex: none;
+  font-size: inherit;
+  font-weight: inherit;
+  color: #6b7280;
   background: transparent;
   border: 0;
-  border-radius: 9999px;
+  padding: 0;
   cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition: color 0.15s ease;
 }
 
-.s-cart-coupons-applied-remove:hover {
-  background: #fef2f2;
+/* Removing is the destructive half of the footer, so it stays on the danger colour rather
+   than the store accent — same `--color-danger` hook `salla-applied-filters` and
+   `salla-delivery-promise` already use. */
+.s-cart-coupons-card-remove:hover {
+  color: var(--color-danger, #ef4444);
 }
 
-.s-cart-coupons-applied-remove:disabled {
+.s-cart-coupons-card-remove:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.visible {
+
+/* Fallback card for an applied code the payload could not describe (older backend, or a coupon
+   the server cannot resolve). It renders with the SAME type scale as every other card — the
+   applied ones now arrive with full data via `applied_coupons`, so this path is rare and must
+   not look like a different component.
+
+   The one thing it still needs: a normal card's footer holds two children (terms + action) so
+   `justify-between` pushes the action to the end, while this card has only the action and would
+   otherwise sit at the START — the opposite side from every other card. */
+.s-cart-coupons-card--minimal .s-cart-coupons-bottom-section {
+  justify-content: flex-end;
+}
+.visible{
   visibility: visible;
 }
-.fixed {
+.fixed{
   position: fixed;
 }
-.shrink {
+.shrink{
   flex-shrink: 1;
 }
-.filter {
+.filter{
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.form-input {
+.form-input{
   height: 2.5rem;
   width: 100%;
   border-radius: 0.375rem;
@@ -83,35 +145,35 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 300ms;
 }
-.form-input:focus {
+.form-input:focus{
   border-color: var(--color-primary);
   --tw-ring-color: transparent;
 }
-.form-input:is(.dark *) {
+.form-input:is(.dark *){
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
 }
-.form-input:focus:is(.dark *) {
+.form-input:focus:is(.dark *){
   border-color: var(--color-primary);
 }
-@media (min-width: 640px) {
-  .form-input {
+@media (min-width: 640px){
+  .form-input{
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
 }
-.s-cart-coupons-wrapper {
+.s-cart-coupons-wrapper{
   display: block;
   width: 100%;
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
-.s-cart-coupons-input-section {
+.s-cart-coupons-input-section{
   margin-bottom: 0.625rem;
 }
-.s-cart-coupons-coupon-label {
+.s-cart-coupons-coupon-label{
   margin-bottom: 0.625rem;
   display: block;
   font-size: 0.875rem;
@@ -119,70 +181,70 @@
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
-.s-cart-coupons-coupon-input-container {
+.s-cart-coupons-coupon-input-container{
   position: relative;
   display: flex;
   align-items: stretch;
 }
-.s-cart-coupons-coupon-input-container .form-input {
+.s-cart-coupons-coupon-input-container .form-input{
   height: auto;
   flex: 1 1 0%;
 }
-.s-cart-coupons-coupon-input-container .form-input:where([dir="ltr"], [dir="ltr"] *) {
+.s-cart-coupons-coupon-input-container .form-input:where([dir="ltr"], [dir="ltr"] *){
   border-top-left-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
   border-top-right-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
   border-right-width: 0px;
 }
-.s-cart-coupons-coupon-input-container .form-input:where([dir="rtl"], [dir="rtl"] *) {
+.s-cart-coupons-coupon-input-container .form-input:where([dir="rtl"], [dir="rtl"] *){
   border-top-right-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
   border-top-left-radius: 0px !important;
   border-bottom-left-radius: 0px !important;
   border-left-width: 0px;
 }
-.s-cart-coupons-coupon-input-container .form-input:focus {
+.s-cart-coupons-coupon-input-container .form-input:focus{
   position: relative;
   z-index: 10;
 }
-.s-cart-coupons-coupon-button:where([dir="ltr"], [dir="ltr"] *) {
+.s-cart-coupons-coupon-button:where([dir="ltr"], [dir="ltr"] *){
   border-top-right-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
 }
-.s-cart-coupons-coupon-button:where([dir="rtl"], [dir="rtl"] *) {
+.s-cart-coupons-coupon-button:where([dir="rtl"], [dir="rtl"] *){
   border-top-left-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
-.s-cart-coupons-coupon-button-remove:where([dir="ltr"], [dir="ltr"] *) {
+.s-cart-coupons-coupon-button-remove:where([dir="ltr"], [dir="ltr"] *){
   border-top-right-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
   border-top-left-radius: 0px !important;
   border-bottom-left-radius: 0px !important;
 }
-.s-cart-coupons-coupon-button-remove:where([dir="rtl"], [dir="rtl"] *) {
+.s-cart-coupons-coupon-button-remove:where([dir="rtl"], [dir="rtl"] *){
   border-top-left-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
   border-top-right-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
 }
-.s-cart-coupons-coupon-button-apply:where([dir="ltr"], [dir="ltr"] *) {
+.s-cart-coupons-coupon-button-apply:where([dir="ltr"], [dir="ltr"] *){
   border-top-right-radius: 0.5rem !important;
   border-bottom-right-radius: 0.5rem !important;
   border-top-left-radius: 0px !important;
   border-bottom-left-radius: 0px !important;
 }
-.s-cart-coupons-coupon-button-apply:where([dir="rtl"], [dir="rtl"] *) {
+.s-cart-coupons-coupon-button-apply:where([dir="rtl"], [dir="rtl"] *){
   border-top-left-radius: 0.5rem !important;
   border-bottom-left-radius: 0.5rem !important;
   border-top-right-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
 }
-.s-cart-coupons-coupon-error {
+.s-cart-coupons-coupon-error{
   margin-top: 0.5rem;
   display: block;
   font-size: 10px;
@@ -190,13 +252,13 @@
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
-.s-cart-coupons-slider {
+.s-cart-coupons-slider{
   width: 100%;
   overflow: hidden;
   padding-left: 0.375rem;
   padding-right: 0.375rem;
 }
-.s-cart-coupons-card {
+.s-cart-coupons-card{
   position: relative;
   cursor: pointer;
   overflow: hidden;
@@ -206,19 +268,19 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 300ms;
 }
-.s-cart-coupons-card:is(.dark *) {
+.s-cart-coupons-card:is(.dark *){
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
 }
-.s-cart-coupons-card:hover {
+.s-cart-coupons-card:hover{
   --tw-translate-y: -0.125rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.s-cart-coupons-disabled {
+.s-cart-coupons-disabled{
   cursor: not-allowed;
   opacity: 0.5;
 }
-.s-cart-coupons-disabled:hover {
+.s-cart-coupons-disabled:hover{
   transform: none;
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
@@ -226,7 +288,7 @@
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.s-cart-coupons-top-section {
+.s-cart-coupons-top-section{
   display: flex;
   height: 60px;
   flex-direction: row;
@@ -243,12 +305,12 @@
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
-.s-cart-coupons-discount-values {
+.s-cart-coupons-discount-values{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
-.s-cart-coupons-discount-values .s-cart-coupons-main-amount {
+.s-cart-coupons-discount-values .s-cart-coupons-main-amount{
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -260,18 +322,18 @@
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
-.s-cart-coupons-discount-values .s-cart-coupons-secondary-info {
+.s-cart-coupons-discount-values .s-cart-coupons-secondary-info{
   margin: 0px;
   font-size: 10px;
   line-height: 1rem;
 }
-.s-cart-coupons-code {
+.s-cart-coupons-code{
   font-size: 10px;
   font-weight: 700;
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
-.s-cart-coupons-divider {
+.s-cart-coupons-divider{
   position: relative;
   z-index: 10;
   margin: 0px;
@@ -279,7 +341,7 @@
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
-.s-cart-coupons-bottom-section {
+.s-cart-coupons-bottom-section{
   display: flex;
   min-height: 44px;
   flex-direction: row;
@@ -298,31 +360,31 @@
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
-.s-cart-coupons-terms {
+.s-cart-coupons-terms{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
-.s-cart-coupons-terms .s-cart-coupons-expiry {
+.s-cart-coupons-terms .s-cart-coupons-expiry{
   margin: 0px;
   font-size: 10px;
   line-height: 16px;
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
-.s-cart-coupons-terms .s-cart-coupons-minimum {
+.s-cart-coupons-terms .s-cart-coupons-minimum{
   margin: 0px;
   font-size: 10px;
   line-height: 16px;
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
-.s-cart-coupons-terms .s-cart-coupons-expiry.s-cart-coupons-expiry-warning {
+.s-cart-coupons-terms .s-cart-coupons-expiry.s-cart-coupons-expiry-warning{
   font-weight: 500;
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity, 1));
 }
-.s-cart-coupons-action {
+.s-cart-coupons-action{
   cursor: pointer;
   white-space: nowrap;
   border-width: 0px;
@@ -336,23 +398,23 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.s-cart-coupons-action:hover {
+.s-cart-coupons-action:hover{
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
 }
-.s-cart-coupons-slide-one-fourth {
+.s-cart-coupons-slide-one-fourth{
   width: calc(75% - 10px);
   min-width: 200px !important;
   padding-left: 5px !important;
   padding-right: 5px !important;
   padding-top: 2px !important;
 }
-@media (min-width: 1024px) {
-  .s-cart-coupons-slide-one-fourth {
+@media (min-width: 1024px){
+  .s-cart-coupons-slide-one-fourth{
     width: calc(40% - 10px) !important;
   }
 }
-.s-cart-coupons-card:before {
+.s-cart-coupons-card:before{
   pointer-events: none;
   position: absolute;
   right: -10px;
@@ -371,11 +433,11 @@
   --tw-content: '';
   content: var(--tw-content);
 }
-.s-cart-coupons-card:is(.dark *):before {
+.s-cart-coupons-card:is(.dark *):before{
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
 }
-.s-cart-coupons-card:after {
+.s-cart-coupons-card:after{
   pointer-events: none;
   position: absolute;
   left: -10px;
@@ -394,11 +456,11 @@
   --tw-content: '';
   content: var(--tw-content);
 }
-.s-cart-coupons-card:is(.dark *):after {
+.s-cart-coupons-card:is(.dark *):after{
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
 }
-.s-cart-coupons-coupon-input-container .form-input.s-coupon-input-error {
+.s-cart-coupons-coupon-input-container .form-input.s-coupon-input-error{
   --tw-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important;
   --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color) !important;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;