@o2vend/theme-cli 1.0.36 → 1.0.38

package/test-theme/snippets/delivery-zone-search.liquid

@@ -18,6 +18,92 @@
 </div>
 
 <style>
+:root {
+  --color-primary: {{ settings.color_primary | default: '#000000' }};
+  --color-primary-hover: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-primary-light: {{ settings.color_primary_light | default: '#666666' }};
+  --color-success: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-light: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-dark: {{ settings.color_success | default: '#22c55e' }};
+  --color-danger: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-dark: {{ settings.color_error | default: '#ef4444' }};
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_light | default: '#999999' }};
+  --color-text-muted: {{ settings.color_text_muted | default: '#666666' }};
+  --color-background: {{ settings.color_background | default: '#ffffff' }};
+  --color-card-bg: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-border-light: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-white: #ffffff;
+  --color-black: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-gray-25: {{ settings.color_background | default: '#ffffff' }};
+  --color-gray-50: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-gray-100: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-gray-200: {{ settings.color_border | default: '#cccccc' }};
+  --color-gray-300: {{ settings.color_border | default: '#cccccc' }};
+  --color-gray-400: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-500: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-600: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-700: {{ settings.color_text | default: '#000000' }};
+  --color-gray-800: {{ settings.color_text | default: '#000000' }};
+  --color-gray-900: {{ settings.color_text | default: '#000000' }};
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-opacity: {{ settings.shadow_opacity | default: 0.1 }};
+  --shadow-blur: {{ settings.shadow_blur | default: 8 }}px;
+  --radius-sm: var(--radius-md);
+  --radius-md: var(--radius-lg);
+  --radius-lg: var(--radius-xl);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-full: var(--radius-full);
+  --spacing-xs: var(--space-2);
+  --spacing-sm: var(--space-4);
+  --spacing-md: var(--space-6);
+  --spacing-lg: var(--space-8);
+  --spacing-xl: var(--space-12);
+  --space-0: var(--space-0);
+  --space-0-5: var(--space-0-5);
+  --space-1: var(--space-1);
+  --space-1-5: var(--space-1-5);
+  --space-2: var(--space-2);
+  --space-3: var(--space-3);
+  --space-3-5: var(--space-3-5);
+  --space-4: var(--space-4);
+  --space-5: var(--space-5);
+  --space-6: var(--space-6);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+  --transition: var(--transition);
+  --transition-fast: var(--transition-fast);
+  --transition-slow: var(--transition-slow);
+  --duration-150: var(--duration-150);
+  --duration-300: var(--duration-300);
+  --ease-out: var(--ease-out);
+  --ease-in: var(--ease-in);
+  --ease-in-out: var(--ease-in-out);
+  --z-10: var(--z-10);
+  --z-modal: var(--z-modal);
+  --z-dropdown: var(--z-dropdown);
+  --font-primary: {{ settings.font_primary | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-heading: {{ settings.font_heading | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-display: {{ settings.font_display | default: '' }}, 'Georgia', 'Times New Roman', serif;
+  --font-body: {{ settings.font_body | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-weight-bold: {{ settings.font_weight_bold | default: 700 }};
+  --font-weight-medium: {{ settings.font_weight_medium | default: 500 }};
+  --line-height-heading: {{ settings.line_height_heading | default: 1.2 }};
+  --leading-none: var(--leading-none);
+  --leading-normal: var(--leading-normal);
+  --leading-snug: var(--leading-snug);
+  --tracking-wider: var(--tracking-wider);
+}
+
 .delivery-zone-search-container {
   position: relative;
   width: 100%;
@@ -28,21 +114,21 @@
   top: 100%;
   left: 0;
   right: 0;
-  margin-top: 4px;
-  background: white;
-  border: 2px solid #e5e7eb;
-  border-radius: 8px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  margin-top: var(--space-1);
+  background: var(--color-white);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
   max-height: 300px;
   overflow-y: auto;
-  z-index: 10;
+  z-index: var(--z-10);
 }
 
 .delivery-zone-search-result {
-  padding: 12px 16px;
+  padding: var(--space-3) var(--space-4);
   cursor: pointer;
-  transition: background-color 0.2s ease;
-  border-bottom: 1px solid #f3f4f6;
+  transition: background-color var(--transition);
+  border-bottom: 1px solid var(--color-gray-100);
 }
 
 .delivery-zone-search-result:last-child {
@@ -50,29 +136,29 @@
 }
 
 .delivery-zone-search-result:hover {
-  background-color: #f9fafb;
+  background-color: var(--color-gray-50);
 }
 
 .delivery-zone-search-result.active {
-  background-color: #f3f4f6;
+  background-color: var(--color-gray-100);
 }
 
 .delivery-zone-result-zipcode {
   font-weight: 600;
-  color: #111827;
-  margin-bottom: 2px;
+  color: var(--color-gray-900);
+  margin-bottom: var(--space-0-5);
 }
 
 .delivery-zone-result-details {
-  font-size: 12px;
-  color: #6b7280;
+  font-size: var(--text-xs);
+  color: var(--color-gray-400);
 }
 
 .delivery-zone-search-empty {
-  padding: 16px;
+  padding: var(--space-4);
   text-align: center;
-  color: #6b7280;
-  font-size: 14px;
+  color: var(--color-gray-400);
+  font-size: var(--text-sm);
 }
 </style>
 

package/test-theme/snippets/login-modal.liquid

@@ -21,17 +21,23 @@
     </header>
 
     <div class="login-modal__body">      
+      <!-- Debug: {{ shop.settings.loginTypes | json }} -->
       <!-- Method selection -->
       <div class="login-modal__methods" data-login-view="methods">
+        {% assign logintypes = shop.settings.loginTypes  %}
+        {% if logintypes contains 2 %}
         <button type="button" class="login-modal__method-card" data-login-method="email-otp">
           <div class="login-modal__method-title">Email OTP</div>
           <div class="login-modal__method-desc">Receive a one-time code to your email.</div>
         </button>
+        {% endif %}
 
+        {% if logintypes contains 1 %}
         <button type="button" class="login-modal__method-card" data-login-method="phone-otp">
           <div class="login-modal__method-title">Mobile OTP</div>
           <div class="login-modal__method-desc">Receive a one-time code via SMS.</div>
         </button>
+        {% endif %}
       </div>
 
       <!-- Email OTP flow (hidden until method is chosen) -->
@@ -56,7 +62,7 @@
             <input id="login-email-otp-code" name="otp" type="text" class="form-input" required maxlength="6" inputmode="numeric">
           </div>
           <div class="login-modal__resend">
-            <button type="button" class="btn btn-ghost btn-sm" data-login-resend-email-otp>
+            <button type="button" class="btn btn-ghost btn-sm" data-login-resend-email-otp id="resend-email-otp-btn">
               Resend code
             </button>
             <span class="login-modal__resend-timer" data-login-resend-email-timer></span>
@@ -90,7 +96,7 @@
             <input id="login-phone-otp-code" name="otp" type="text" class="form-input" required maxlength="6" inputmode="numeric">
           </div>
           <div class="login-modal__resend">
-            <button type="button" class="btn btn-ghost btn-sm" data-login-resend-phone-otp>
+            <button type="button" class="btn btn-ghost btn-sm" data-login-resend-phone-otp id="resend-phone-otp-btn">
               Resend code
             </button>
             <span class="login-modal__resend-timer" data-login-resend-phone-timer></span>
@@ -123,10 +129,101 @@
 </div>
 
 <style>
+:root {
+  --color-primary: {{ settings.color_primary | default: '#000000' }};
+  --color-primary-hover: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-primary-light: {{ settings.color_primary_light | default: '#666666' }};
+  --color-success: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-light: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-dark: {{ settings.color_success | default: '#22c55e' }};
+  --color-danger: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-dark: {{ settings.color_error | default: '#ef4444' }};
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_light | default: '#999999' }};
+  --color-text-muted: {{ settings.color_text_muted | default: '#666666' }};
+  --color-background: {{ settings.color_background | default: '#ffffff' }};
+  --color-card-bg: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-border-light: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-white: #ffffff;
+  --color-black: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-gray-25: {{ settings.color_background | default: '#ffffff' }};
+  --color-gray-50: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-gray-100: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-gray-200: {{ settings.color_border | default: '#cccccc' }};
+  --color-gray-300: {{ settings.color_border | default: '#cccccc' }};
+  --color-gray-400: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-500: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-600: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-700: {{ settings.color_text | default: '#000000' }};
+  --color-gray-800: {{ settings.color_text | default: '#000000' }};
+  --color-gray-900: {{ settings.color_text | default: '#000000' }};
+  /* Shadow variables - mapped from settings */
+  --shadow-opacity: {{ settings.shadow_opacity | default: 0.1 }};
+  --shadow-blur: {{ settings.shadow_blur | default: 8 }}px;
+  --shadow-spread: {{ settings.shadow_spread | default: 0 }}px;
+  
+  /* Border radius - mapped from settings */
+  --radius-sm: {{ settings.border_radius_small | default: 6 }}px;
+  --radius-md: {{ settings.border_radius_medium | default: 10 }}px;
+  --radius-lg: {{ settings.border_radius_large | default: 16 }}px;
+  --radius-xl: 24px;
+  --radius-2xl: 32px;
+  --radius-full: 9999px;
+  
+  /* Spacing - mapped from settings */
+  --spacing-xs: {{ settings.spacing_xsmall | default: 4 }}px;
+  --spacing-sm: {{ settings.spacing_small | default: 8 }}px;
+  --spacing-md: {{ settings.spacing_element | default: 16 }}px;
+  --spacing-lg: {{ settings.spacing_component | default: 24 }}px;
+  --spacing-xl: {{ settings.spacing_large | default: 32 }}px;
+  
+  /* Typography - mapped from settings */
+  --font-primary: {{ settings.font_primary | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-heading: {{ settings.font_heading | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-display: {{ settings.font_display | default: '' }}, 'Georgia', 'Times New Roman', serif;
+  --font-body: {{ settings.font_body | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-weight-bold: {{ settings.font_weight_bold | default: 700 }};
+  --font-weight-medium: {{ settings.font_weight_medium | default: 500 }};
+  --line-height-heading: {{ settings.line_height_heading | default: 1.2 }};
+  
+  /* Text sizes - based on font_size_base from settings */
+  --text-xs: 12px;
+  --text-sm: {{ settings.font_size_base | default: 14 }}px;
+  --text-base: {{ settings.font_size_base | default: 14 }}px;
+  --text-lg: 16px;
+  --text-xl: 18px;
+  --text-2xl: 21px;
+  
+  /* Transitions - mapped from settings */
+  --transition-fast: 133ms cubic-bezier(0, 0, 0.2, 1);
+  --transition: {{ settings.button_transition_speed | default: 200 }}ms cubic-bezier(0, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0, 0, 0.2, 1);
+  --duration-150: 150ms;
+  --duration-300: 300ms;
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Z-index values */
+  --z-10: 10;
+  --z-modal: 1050;
+  --z-dropdown: 1000;
+  
+  /* Line heights - mapped from settings */
+  --leading-none: 1;
+  --leading-normal: {{ settings.line_height_base | default: 1.6 }};
+  --leading-snug: 1.375;
+  
+  /* Letter spacing - mapped from settings */
+  --tracking-wider: {{ settings.letter_spacing_uppercase | default: 0.05 }}em;
+}
+
 .login-modal {
   position: fixed;
   inset: 0;
-  z-index: 10000;
+  z-index: var(--z-modal);
   display: none;
 }
 .login-modal--active {
@@ -137,160 +234,164 @@
 .login-modal__overlay {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  backdrop-filter: blur(4px);
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(8px);  
+  z-index: 10000; /* Lower than panel */
 }
 .login-modal__panel {
   position: relative;
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
+  background: var(--color-white);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xl);
   width: 100%;
   max-width: 480px;
   max-height: 90vh;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  z-index: 10001; /* Higher than overlay */
 }
 .login-modal__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid #e5e7eb;
+  padding: var(--space-5) var(--space-6);
+  border-bottom: 1px solid var(--color-gray-200);
 }
 .login-modal__title {
   margin: 0;
-  font-size: 20px;
+  font-size: 2rem;
   font-weight: 600;
-  color: #111827;
+  color: var(--color-gray-900);
 }
 .login-modal__subtitle {
-  margin: 4px 0 0;
-  font-size: 14px;
-  color: #6b7280;
+  margin: var(--space-1) 0 0;
+  font-size: var(--text-xs);
+  color: var(--color-gray-400);
 }
 .login-modal__close {
   border: none;
   background: none;
-  padding: 4px;
-  border-radius: 999px;
+  padding: var(--space-1);
+  border-radius: var(--radius-full);
   cursor: pointer;
-  color: #6b7280;
+  color: var(--color-gray-400);
 }
 .login-modal__close:hover {
-  background: #f3f4f6;
-  color: #111827;
+  background: var(--color-gray-100);
+  color: var(--color-gray-900);
 }
 .login-modal__body {
-  padding: 20px 24px 24px;
+  padding: var(--space-6) var(--space-6) var(--space-6);
   overflow-y: auto;
 }
 .login-modal__steps {
   display: flex;
-  gap: 12px;
-  font-size: 12px;
+  gap: var(--space-3);
+  font-size: var(--text-xs);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin-bottom: 16px;
+  letter-spacing: var(--tracking-widest);
+  margin-bottom: var(--space-4);
 }
 .login-modal__step {
-  padding-bottom: 4px;
+  padding-bottom: var(--space-1);
   border-bottom: 2px solid transparent;
-  color: #9ca3af;
+  color: var(--color-gray-400);
 }
 .login-modal__step--active {
-  border-color: #111827;
-  color: #111827;
+  border-color: var(--color-gray-900);
+  color: var(--color-gray-900);
 }
 .login-modal__methods {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 12px;
+  gap: var(--space-3);
 }
 .login-modal__method-card {
   width: 100%;
   text-align: left;
-  border-radius: 12px;
-  border: 1px solid #e5e7eb;
-  padding: 12px 14px;
-  background: #f9fafb;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-gray-200);
+  padding: var(--space-4) var(--space-5);
+  background: var(--color-white);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all var(--duration-150) var(--ease-out);
 }
 .login-modal__method-card:hover {
-  border-color: #111827;
-  background: #f3f4f6;
+  border-color: var(--color-gray-300);
+  background: var(--color-gray-50);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 .login-modal__method-title {
-  font-size: 14px;
+  font-size: var(--text-base);
   font-weight: 600;
-  color: #111827;
+  color: var(--color-gray-900);
+  margin-bottom: var(--space-1);
 }
 .login-modal__method-desc {
-  font-size: 12px;
-  color: #6b7280;
-  margin-top: 2px;
+  font-size: var(--text-xs);
+  color: var(--color-gray-500);
+  line-height: var(--leading-normal);
 }
 .login-modal__form {
   display: flex;
   flex-direction: column;
-  gap: 14px;
-  margin-top: 4px;
+  gap: var(--space-3-5);
+  margin-top: var(--space-1);
 }
 .login-modal__flow {
-  margin-top: 8px;
+  margin-top: var(--space-2);
 }
 .login-modal__info {
-  font-size: 13px;
-  color: #4b5563;
-  margin: 0 0 8px;
+  font-size: 1.3rem;
+  color: var(--color-gray-600);
+  margin: 0 0 var(--space-2);
 }
 .login-modal__resend {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  font-size: 12px;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
 }
 .login-modal__resend-timer {
-  color: #6b7280;
+  color: var(--color-gray-400);
 }
 .login-modal__error {
   display: none;
-  font-size: 13px;
-  color: #b91c1c;
+  font-size: 1.3rem;
+  color: var(--color-error);
   background: #fee2e2;
-  border-radius: 8px;
-  padding: 8px 10px;
+  border-radius: var(--radius-lg);
+  padding: var(--space-2) var(--space-2-5);
 }
 .login-modal__error--visible {
   display: block;
 }
 .login-modal__success {
   text-align: center;
-  padding-top: 8px;
+  padding-top: var(--space-2);
 }
 .login-modal__success-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 999px;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: var(--radius-full);
   background: #ecfdf3;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #16a34a;
-  margin-bottom: 12px;
+  color: var(--color-success);
+  margin-bottom: var(--space-3);
 }
 .login-modal__success-title {
-  margin: 0 0 4px;
-  font-size: 18px;
+  margin: 0 0 var(--space-1);
+  font-size: var(--text-xl);
   font-weight: 600;
 }
 .login-modal__success-text {
-  margin: 0 0 16px;
-  font-size: 14px;
-  color: #6b7280;
+  margin: 0 0 var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--color-gray-400);
 }
 
 @media (max-width: 640px) {
@@ -298,49 +399,135 @@
     max-width: 100%;
     height: 100%;
     max-height: 100%;
-    border-radius: 0;
+    border-radius: var(--radius-none);
   }
 }
 
 /* intl-tel-input styling for login modal */
-.login-phone-input {
+.login-modal .login-phone-input {
   padding-left: 3.5rem;
 }
 
-.iti {
+.login-modal .iti {
   width: 100%;
 }
 
-.iti__flag-container {
+.login-modal .iti__flag-container {
+  z-index: var(--z-10);
   z-index: 1;
+  position: relative;
+  pointer-events: auto !important;
+  cursor: pointer;
 }
 
-.iti__selected-flag {
+.login-modal .iti__selected-flag {
+  padding: 0 var(--space-3) 0 var(--space-2);
+  border-right: 1px solid var(--color-gray-200);
   padding: 0 0.75rem 0 0.5rem;
   border-right: 1px solid #e5e7eb;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+  touch-action: manipulation;
+  min-height: 44px; /* Minimum tap target size for mobile */
+  display: flex;
+  align-items: center;
+  pointer-events: auto !important;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.login-modal .iti__selected-flag:hover {
+  background-color: var(--color-gray-100);
 }
 
-.iti__selected-flag:hover {
-  background-color: #f3f4f6;
+.login-modal .iti__selected-flag:active {
+  background-color: #e5e7eb;
 }
 
-.iti__country-list {
-  z-index: 10001;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+/* Ensure country dropdown appears above modal */
+.login-modal .iti__country-list {
+  z-index: var(--z-popover);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
   max-height: 200px;
   overflow-y: auto;
+  z-index: 10010 !important; /* Much higher than modal (10000) to ensure it's on top */
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
+  border: 1px solid #e5e7eb !important;
+  border-radius: 8px !important;
+  max-height: 200px !important;
+  overflow-y: auto !important;
+  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+  pointer-events: auto !important;
+  position: fixed !important; /* Fixed positioning when appended to body */
+  background: white !important;
+  display: block !important;
+  margin-top: 0 !important;
+}
+
+/* Ensure dropdown is visible and clickable */
+.login-modal--active .iti__country-list {
+  z-index: 10010 !important;
+  pointer-events: auto !important;
 }
 
-.iti__country {
-  padding: 0.5rem 0.75rem;
+.login-modal .iti__country {
+  padding: var(--space-2) var(--space-3);
+  padding: 0.75rem; /* Increased padding for better touch targets */
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+  touch-action: manipulation;
+  min-height: 44px; /* Minimum tap target size for mobile */
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
 }
 
-.iti__country:hover,
-.iti__country.iti__highlight {
+.login-modal .iti__country:hover,
+.login-modal .iti__country.iti__highlight {
   background-color: #dbeafe;
 }
+
+.login-modal .iti__country:active {
+  background-color: #bfdbfe;
+}
+
+/* Mobile-specific improvements */
+@media (max-width: 640px) {
+  .login-modal .iti__selected-flag {
+    min-height: 48px; /* Larger tap target on mobile */
+    padding: 0 1rem 0 0.75rem;
+  }
+  
+  .login-modal .iti__country {
+    min-height: 48px; /* Larger tap target on mobile */
+    padding: 0.875rem 1rem;
+  }
+  
+  .login-modal .iti__country-list {
+    max-height: 250px; /* More space on mobile */
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  }
+}
+
+/* Align login modal primary buttons with product card button style */
+.login-modal .btn-primary {
+  padding: 12px 16px;
+  border: none;
+  border-radius: var(--radius-md);
+}
+
+.login-modal .btn-primary:hover:not(:disabled) {
+  background-color: var(--color-primary-hover);
+  border: none;
+}
+
+.login-modal .btn-primary:active:not(:disabled) {
+  background-color: var(--color-primary-hover);
+  border: none;
+  transform: translateY(1px);
+}
 </style>