@ptcwebops/ptcw-design 5.7.9 → 5.8.1

package/dist/collection/components/ptc-dynamic-card/ptc-dynamic-card.js

@@ -2,48 +2,92 @@ import { Host, h, getAssetPath } from '@stencil/core';
 //import navDotSlick from '../../media/svg-imgs/nav-active-dotslick.svg';
 export class PtcDynamicCard {
   constructor() {
+    /**
+     * Open the card
+     */
+    this.openCard = () => {
+      if (!this.isExpanded) {
+        this.isExpanded = true;
+        this.cardOpened.emit(this.trackerId);
+      }
+      // If already expanded, do nothing to ensure at least one card remains open
+    };
+    /**
+     * Handle keyboard interactions
+     */
+    this.handleKeyDown = (event) => {
+      switch (event.key) {
+        case 'Enter':
+          //event.preventDefault();
+          this.openCard();
+          break;
+        default:
+          break;
+      }
+    };
     this.dotSvg = getAssetPath('./media/nav-active-dotslick.svg');
     this.cardType = 'sequential';
     this.cardTitle = 'Card Title Goes Here';
     this.cardImgSrc = undefined;
     this.cardImgAlt = undefined;
     this.cardScreen = 'desktop';
-    this.isExpanded = undefined;
+    this.isExpanded = false;
     this.overlayExists = true;
     this.styles = undefined;
     this.trackerId = undefined;
   }
-  // handleClick() {
-  //   this.isExpanded = !this.isExpanded;
-  // }
+  componentDidLoad() {
+    // Handle mouse enter and leave for overlay
+    this.el.addEventListener('mouseenter', () => (this.overlayExists = false));
+    this.el.addEventListener('mouseleave', () => (this.overlayExists = true));
+  }
+  /**
+   * Listen for 'cardOpened' events on the document to close other cards
+   */
+  handleCardOpened(event) {
+    const openedTrackerId = event.detail;
+    if (openedTrackerId !== this.trackerId && this.isExpanded) {
+      this.isExpanded = false;
+    }
+  }
+  /**
+   * Focus the card-wrapper element
+   */
+  async focusCardWrapper() {
+    const cardWrapper = this.el.querySelector('.card-wrapper');
+    if (cardWrapper) {
+      cardWrapper.focus();
+    }
+  }
+  /**
+   * Get CSS class map
+   */
+  getCssClassMap() {
+    return {
+      [this.cardType]: true,
+    };
+  }
+  /**
+   * Get desktop card based on expansion state
+   */
   getDesktopCard() {
     if (this.cardScreen === 'desktop' && this.isExpanded) {
       return [
-        h("div", { class: "card card-dt-open mf-listen", id: this.trackerId, tabindex: "0", role: "button", "aria-expanded": this.isExpanded }, h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })),
+        h("div", { class: "card card-dt-open mf-listen", id: this.trackerId }, h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })),
       ];
     }
     else if (this.cardScreen === 'desktop' && !this.isExpanded) {
       return [
-        h("div", { class: "card card-dt-closed mf-listen", id: this.trackerId, role: "button", tabindex: "0", "aria-expanded": this.isExpanded }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? h("ptc-overlay", { "filter-color": "solid-black-1" }) : h("ptc-overlay", { "filter-color": "solid-black-2" })), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))),
+        h("div", { class: "card card-dt-closed mf-listen", id: this.trackerId }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? (h("ptc-overlay", { "filter-color": "solid-black-1" })) : (h("ptc-overlay", { "filter-color": "solid-black-2" }))), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))),
       ];
     }
     else {
       return null;
     }
   }
-  componentDidLoad() {
-    // this.handleResize();
-    this.el.addEventListener('mouseenter', () => (this.overlayExists = false));
-    this.el.addEventListener('mouseleave', () => (this.overlayExists = true));
-  }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "card-wrapper" }, this.cardScreen == 'mobile' ? (h("div", { class: "card card-mobile mf-listen", id: this.trackerId, role: "button", "aria-expanded": this.isExpanded }, h("ptc-picture", { height: '287', "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : (this.getDesktopCard())), this.cardScreen === 'desktop' && (h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: true,
-    };
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "card-wrapper", role: "button", tabindex: "0", "aria-expanded": this.isExpanded, onClick: this.openCard, onKeyDown: this.handleKeyDown }, this.cardScreen === 'mobile' ? (h("div", { class: "card card-mobile mf-listen", id: this.trackerId }, h("ptc-picture", { height: "287", "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : (this.getDesktopCard())), this.cardScreen === 'desktop' && (h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))))));
   }
   static get is() { return "ptc-dynamic-card"; }
   static get encapsulation() { return "shadow"; }
@@ -150,20 +194,21 @@ export class PtcDynamicCard {
       },
       "isExpanded": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "is card expanded?"
         },
         "attribute": "is-expanded",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "styles": {
         "type": "string",
@@ -206,5 +251,55 @@ export class PtcDynamicCard {
       "overlayExists": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "cardOpened",
+        "name": "cardOpened",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted when this card is opened"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "focusCardWrapper": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Focus the card-wrapper element",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "cardOpened",
+        "method": "handleCardOpened",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.css

@@ -1133,29 +1133,29 @@ ptc-link, ptc-square-card,
 
 .mdc-checkbox {
   transform: translateX(-8px);
-  padding: calc((34px - 18px) / 2);
+  padding: 8px;
   /* @alternate */
   padding: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  margin: calc((34px - 34px) / 2);
+  margin: 0px;
   /* @alternate */
   margin: calc((var(--mdc-checkbox-touch-target-size, 34px) - 34px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__background {
-  top: calc((34px - 18px) / 2);
+  top: 8px;
   /* @alternate */
   top: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  left: calc((34px - 18px) / 2);
+  left: 8px;
   /* @alternate */
   left: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__native-control {
-  top: calc((34px - 34px) / 2);
+  top: 0px;
   /* @alternate */
   top: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  right: calc((34px - 34px) / 2);
+  right: 0px;
   /* @alternate */
   right: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  left: calc((34px - 34px) / 2);
+  left: 0px;
   /* @alternate */
   left: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
   width: 34px;

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css

@@ -1101,7 +1101,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.333333333333% - 10.66666666px);
+    width: calc(33.3333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1118,7 +1118,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.333333333333% - 21.3333333px);
+    width: calc(33.3333333333% - 21.3333333px);
   }
 }
 

package/dist/collection/components/ptc-multi-select/ptc-multi-select.css

@@ -54,7 +54,116 @@ ptc-link, ptc-square-card,
   }
 }
 
-.dropdown li {
+.ptc-multi-select {
+  position: relative;
+  display: block;
+  margin-bottom: var(--ptc-element-spacing-04);
+}
+.ptc-multi-select.invalid::before {
+  content: "";
+  position: absolute;
+  width: calc(100% + 16px);
+  height: calc(100% + 8px);
+  background: #FEF3F3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 0;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.ptc-multi-select.invalid .mdc-select-helper-text--validation-msg {
+  z-index: 2;
+  opacity: 1;
+  position: relative;
+  color: #AF3231;
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-xx-small);
+  font-style: normal;
+  font-weight: var(--ptc-font-weight-semibold);
+  line-height: var(--ptc-line-height-densest);
+  opacity: 1;
+  height: auto;
+  margin-left: 8px;
+  margin-top: var(--ptc-element-spacing-02);
+}
+.ptc-multi-select.invalid .mdc-select-helper-text--validation-msg svg {
+  transform: translate(-8px, 3px);
+}
+.ptc-multi-select .multi-select-label {
+  display: block;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  line-height: normal;
+  margin-bottom: var(--ptc-element-spacing-01);
+  z-index: 1;
+  position: relative;
+  color: #40434A;
+}
+.ptc-multi-select .selected-items {
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.38);
+  padding: 8px;
+  border-radius: 0px;
+  position: relative;
+  user-select: none;
+  color: var(--color-gray-12);
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-regular);
+  max-width: 100%;
+  max-height: 34px;
+  overflow: hidden;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.ptc-multi-select .selected-items:focus-visible {
+  outline: 2px solid #007bff;
+}
+.ptc-multi-select .selected-items .input-text {
+  width: calc(100% - 18px);
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+}
+.ptc-multi-select .multi-select-icon {
+  fill: rgba(0, 0, 0, 0.54);
+  position: absolute;
+  right: var(--ptc-element-spacing-02);
+  width: 18px;
+  height: 18px;
+  margin: 0 auto;
+}
+.ptc-multi-select .multi-select-icon .multi-arrow-svg {
+  transform: translate(-50%, 25%);
+  position: relative;
+  left: 50%;
+  bottom: 25%;
+}
+.ptc-multi-select .dropdown {
+  display: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border: 1px solid #ccc;
+  max-height: 350px;
+  overflow-y: auto;
+  position: absolute;
+  width: 100%;
+  background-color: #fff;
+  z-index: 1000;
+  /* Custom square for the checkbox */
+  /* When checkbox is checked, change background color */
+}
+.ptc-multi-select .dropdown.show {
+  display: block;
+}
+.ptc-multi-select .dropdown li {
   display: flex;
   align-items: center;
   padding: 5px 8px;
@@ -63,16 +172,16 @@ ptc-link, ptc-square-card,
   position: relative;
   /* Focused item styles */
 }
-.dropdown li:hover, .dropdown li:focus-within {
+.ptc-multi-select .dropdown li:hover, .ptc-multi-select .dropdown li:focus-within {
   background-color: var(--color-gray-02);
 }
-.dropdown li.selected {
+.ptc-multi-select .dropdown li.selected {
   background-color: var(--color-gray-02);
 }
-.dropdown li.selected:hover {
+.ptc-multi-select .dropdown li.selected:hover {
   background-color: var(--color-gray-04);
 }
-.dropdown li label {
+.ptc-multi-select .dropdown li label {
   display: -webkit-box;
   font-family: var(--ptc-font-latin);
   font-size: var(--ptc-font-size-xx-small);
@@ -87,7 +196,91 @@ ptc-link, ptc-square-card,
   text-overflow: ellipsis;
   line-height: 24px;
 }
-.dropdown li:focus-within {
+.ptc-multi-select .dropdown li:focus-within {
   background-color: var(--color-gray-02);
   outline: none;
+}
+.ptc-multi-select .dropdown li:last-child {
+  border-bottom: none;
+}
+.ptc-multi-select .dropdown input[type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+.ptc-multi-select .dropdown input[type=checkbox]:checked {
+  background-color: var(--color-green-07);
+}
+.ptc-multi-select .dropdown label::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 5px;
+  width: 14px;
+  height: 14px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+.ptc-multi-select .dropdown input[type=checkbox]:checked + label::before {
+  background-color: var(--color-green-07);
+  border-color: var(--color-green-07);
+}
+.ptc-multi-select .dropdown input[type=checkbox]:checked + label::after {
+  content: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.15341 1.14134C7.0572 1.04719 6.94024 1 6.80262 1C6.66499 1 6.54771 1.04719 6.45158 1.14134L3.06571 4.45979L1.5485 2.96965C1.45197 2.8755 1.33501 2.82831 1.19738 2.82831C1.05976 2.82831 0.942797 2.8755 0.846348 2.96965L0.144437 3.65645C0.0482247 3.75091 0 3.86528 0 4.00004C0 4.13472 0.0482247 4.2494 0.144437 4.34355L2.01277 6.17186L2.71492 6.85866C2.81113 6.95312 2.92809 7 3.06571 7C3.20334 7 3.3203 6.95312 3.41675 6.85866L4.11866 6.17186L7.85556 2.51525C7.95177 2.42086 8 2.30641 8 2.17173C8 2.03705 7.95177 1.9226 7.85556 1.82814L7.15341 1.14134Z' fill='white'/%3E%3C/svg%3E");
+  position: absolute;
+  left: 3px;
+  top: 0px;
+  color: white;
+  width: 8px;
+  height: 24px;
+}
+.ptc-multi-select button.ddl-click-text {
+  all: unset;
+  cursor: pointer;
+  color: var(--color-gray-7);
+  text-decoration: underline;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-semibold);
+}
+.ptc-multi-select .tooltip {
+  position: absolute;
+  transform: translate(0, -12px);
+  z-index: 1001;
+  padding: 8px;
+  color: var(--color-white);
+  font-size: var(--ptc-font-size-xxx-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  background: var(--color-gray-09);
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
+  border: none;
+  border-radius: 2px;
+  width: auto;
+  height: fit-content;
+  text-align: left;
+  text-shadow: none;
+  white-space: normal;
+}
+.ptc-multi-select .tooltip::after {
+  position: absolute;
+  content: "";
+  bottom: 0px;
+  border: 8px solid transparent;
+  border-top: 8px solid var(--color-gray-09);
+  left: 50%;
+  transform: translate(-50%, 100%);
+}
+@media only screen and (min-width: 992px) {
+  .ptc-multi-select .tooltip {
+    width: 273px;
+    transform: translate(-100%, 80%);
+  }
+  .ptc-multi-select .tooltip::after {
+    right: 8px;
+    left: auto;
+    transform: translateY(100%);
+  }
+}
+.ptc-multi-select .tooltip span {
+  word-break: initial;
 }

package/dist/collection/components/ptc-pagenation/ptc-pagenation.css

@@ -128,7 +128,7 @@ ptc-link, ptc-square-card,
   width: 1.125rem;
   height: 1.125rem;
   border: 1px solid var(--color-gray-10);
-  border-radius: calc(var(--ptc-border-radius-standard)/2);
+  border-radius: calc(var(--ptc-border-radius-standard) / 2);
   transition: background-color var(--ptc-ease-out) var(--ptc-transition-medium), fill var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);
 }
 .standard-filter .next-button:hover, .standard-filter .previous-button:hover {

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -1046,7 +1046,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.333333333333% - 10.66666666px);
+    width: calc(33.3333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1063,7 +1063,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.333333333333% - 21.3333333px);
+    width: calc(33.3333333333% - 21.3333333px);
   }
 }
 

package/dist/collection/components/ptc-textfield/ptc-textfield.css

@@ -2215,9 +2215,9 @@
 .iti__v-hide {
   visibility: hidden;
 }
-.iti input,
-.iti input[type=text],
-.iti input[type=tel] {
+.iti input.iti__tel-input,
+.iti input.iti__tel-input[type=text],
+.iti input.iti__tel-input[type=tel] {
   position: relative;
   z-index: 0;
   margin-top: 0 !important;
@@ -2256,26 +2256,35 @@
   border-top: none;
   border-bottom: 4px solid #555;
 }
-.iti__country-list {
+.iti__dropdown-content {
   position: absolute;
   z-index: 2;
-  list-style: none;
-  padding: 0;
-  margin: 0 0 0 -1px;
+  margin-left: -1px;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
   background-color: white;
   border: 1px solid #ccc;
-  white-space: nowrap;
   max-height: 200px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
-.iti__country-list--dropup {
+.iti__dropdown-content--dropup {
   bottom: 100%;
   margin-bottom: -1px;
 }
+.iti__search-input {
+  width: 100%;
+  border-width: 0;
+}
+.iti__country-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.iti--flexible-dropdown-width .iti__country-list {
+  white-space: nowrap;
+}
 @media (max-width: 500px) {
-  .iti__country-list {
+  .iti--flexible-dropdown-width .iti__country-list {
     white-space: normal;
   }
 }
@@ -2307,20 +2316,20 @@
   margin-right: 0;
   margin-left: 6px;
 }
-.iti--allow-dropdown input,
-.iti--allow-dropdown input[type=text],
-.iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
-.iti--separate-dial-code input[type=text],
-.iti--separate-dial-code input[type=tel] {
+.iti--allow-dropdown input.iti__tel-input,
+.iti--allow-dropdown input.iti__tel-input[type=text],
+.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
+.iti--separate-dial-code input.iti__tel-input[type=text],
+.iti--separate-dial-code input.iti__tel-input[type=tel] {
   padding-right: 6px;
   padding-left: 52px;
   margin-left: 0;
 }
-[dir=rtl] .iti--allow-dropdown input,
-[dir=rtl] .iti--allow-dropdown input[type=text],
-[dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
-[dir=rtl] .iti--separate-dial-code input[type=text],
-[dir=rtl] .iti--separate-dial-code input[type=tel] {
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
+[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
+[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
   padding-right: 52px;
   padding-left: 6px;
   margin-right: 0;
@@ -2339,12 +2348,12 @@
 .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
+.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
+.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
   cursor: default;
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
+.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
+.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
   background-color: transparent;
 }
 .iti--separate-dial-code .iti__selected-flag {
@@ -2368,18 +2377,26 @@
   cursor: pointer;
 }
 
-.iti-mobile .iti--container {
-  top: 30px;
-  bottom: 30px;
-  left: 30px;
-  right: 30px;
+.iti--fullscreen-popup.iti--container {
+  background-color: rgba(0, 0, 0, 0.5);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   position: fixed;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.iti--fullscreen-popup.iti--container.iti--country-search {
+  justify-content: flex-start;
 }
-.iti-mobile .iti__country-list {
+.iti--fullscreen-popup .iti__dropdown-content {
   max-height: 100%;
-  width: 100%;
+  position: relative;
 }
-.iti-mobile .iti__country {
+.iti--fullscreen-popup .iti__country {
   padding: 10px 10px;
   line-height: 1.5em;
 }
@@ -2405,7 +2422,7 @@
 .iti__flag.iti__va {
   width: 15px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2x) {
   .iti__flag {
     background-size: 5762px 15px;
   }
@@ -3471,7 +3488,7 @@
   background-color: #dbdbdb;
   background-position: 20px 0;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2x) {
   .iti__flag {
     background-image: url("../img/flags@2x.png?1");
   }