/*
Theme Name: Paqtelias Landing
Theme URI: https://paqtelias.com
Author: Paqtelias Team
Author URI: https://paqtelias.com
Description: A bold, transgressive landing page theme for Paqtelias - "Enviando paquetes sin bullshit"
Version: 1.1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paqtelias
Tags: landing-page, one-column, custom-colors, custom-menu, featured-images, translation-ready
*/

body {
  background-color: var(--ion-color-light) !important;
  font-family: 'Hubot Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Hide WordPress branding and header on front page ONLY - multiple selectors for safety */
.home .site-title,
.home .site-description,
.home .admin-bar,
.home #masthead,
.home .site-header,
.home .header-container,
.home .header-logo,
.home .header-logo-img,
.front-page #masthead,
.front-page .site-header,
.front-page .header-container,
body.home.page #masthead,
body.home.page .site-header,
body.home #masthead.site-header,
body.home header#masthead,
body.home header.site-header {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Additional safety for blog and non-landing pages - keep header visible */
body:not(.home) .site-header,
body:not(.home) #masthead {
  display: block !important;
}

/* If header logo shows on other pages, ensure reasonable size */
.site-header .header-logo-img,
#masthead .header-logo-img {
  max-height: 50px;
  width: auto;
}

/* Ensure the site-content wrapper doesn't add extra padding/margin */
.home #content.site-content {
  padding: 0;
  margin: 0;
}

.home #page.site {
  padding: 0;
  margin: 0;
}

/* Remove admin bar spacing from landing page */
.home.admin-bar #page.site {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.home.admin-bar #wpadminbar {
  display: none !important;
}

/* Ensure the welcome-content starts at the top */
.welcome-content {
  padding: 0;
  margin: 0;
}

/* Ensure all Ionic components inherit Hubot Sans font */
ion-page,
ion-card,
ion-list,
ion-segment,
ion-segment-button,
ion-select,
ion-textarea,
ion-datetime,
ion-searchbar,
ion-toast,
ion-alert,
ion-loading,
ion-popover,
ion-modal {
  font-family: var(--app-font-family-base);
}
/* Heading Styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--app-font-family-heading);
}

h2 {
  margin: var(--app-spacing-lg) 0 !important;
}

/* Base button styles (matching Button.vue component) */
.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--app-primary-color);
  color: white;
  border: none;
  border-radius: 0;
  box-shadow: 3px 3px 0 #666666;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  transition: all 0.2s ease;
  font-family: var(--app-font-family-base);
  cursor: pointer;
  text-decoration: none;
  padding: var(--app-spacing-md) var(--app-spacing-md);
  font-size: var(--app-font-size-md);
  height: 44px;
}

.app-button--primary {
  background: var(--app-primary-color);
  color: white;
}

.app-button--xlg {
  padding: var(--app-spacing-xl) var(--app-spacing-xl);
  height: 60px;
}

.app-button:not(:disabled):hover {
  transform: translateY(-4px) translateX(-4px);
  box-shadow: 10px 10px 0 #666666;
}

.app-button:not(:disabled):active {
  transform: translateY(2px) translateX(2px);
  box-shadow: 3px 3px 0 #666666;
}

.hero-cta .app-button--primary {
  width: fit-content;
  margin: 0 auto;
}


/* Driver marker pulse (global) */
.driver-pulse-container {
  position: relative;
}

.driver-pulse-container .driver-pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 102, 102, 0.18); /* matches #006666 with alpha */
  box-shadow: 0 0 0 0 rgba(0, 102, 102, 0.35);
  animation: driver-pulse 2s ease-out infinite;
  transform-origin: center center;
  pointer-events: none;
  z-index: 0;
}

.driver-pulse-container .driver-pulse-ring.delay {
  animation-delay: 1s;
}

@keyframes driver-pulse {
  0% {
    transform: scale(0.7);
    opacity: 0.8;
    box-shadow: 0 0 0 0 rgba(0, 102, 102, 0.35);
  }
  70% {
    transform: scale(1.8);
    opacity: 0;
    box-shadow: 0 0 0 16px rgba(0, 102, 102, 0);
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(0, 102, 102, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .driver-pulse-container .driver-pulse-ring {
    animation: none;
  }
}

/* Photo Confirmation Page Styles */
.photo-confirmation-content {
  --background: var(--app-bg-primary);
}

.photo-confirmation-container {
  padding: var(--app-spacing-lg);
  max-width: 600px;
  margin: 0 auto;
}

.photo-confirmation-container .header-section {
  text-align: center;
  margin-bottom: var(--app-spacing-xl);
}

.photo-confirmation-container .header-section h2 {
  font-size: var(--app-font-size-2xl);
  font-weight: 500;
  color: var(--app-text-primary);
  margin-bottom: var(--app-spacing-sm);
}

.photo-confirmation-container .subtitle {
  font-size: var(--app-font-size-base);
  color: var(--app-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.photos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--app-spacing-lg);
  margin-bottom: var(--app-spacing-xl);
}

@media (min-width: 768px) {
  .photos-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--app-spacing-xl);
  }
}

.photo-section {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
}

.photo-section h3 {
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  color: var(--app-text-primary);
  margin: 0;
  text-align: center;
}

.photo-preview-container {
  position: relative;
  border-radius: var(--app-radius-lg);
  overflow: hidden;
  box-shadow: var(--app-shadow-md);
  background: var(--app-bg-secondary);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-preview {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.retake-button {
  --border-radius: var(--app-radius-md);
  --padding-start: var(--app-spacing-md);
  --padding-end: var(--app-spacing-md);
  font-size: var(--app-font-size-sm);
  font-weight: 500;
  margin-top: var(--app-spacing-sm);
}

.confirmation-checkbox {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-md);
  justify-content: center;
  /* margin-bottom: var(--app-spacing-xl); */
}

.confirmation-checkbox ion-checkbox {
  --size: 20px;
  --border-radius: var(--app-radius-sm);
}

.confirmation-checkbox ion-label {
  font-size: var(--app-font-size-base);
  font-weight: 500;
  color: var(--app-text-primary);
  line-height: 1.4;
}

.action-section {
  margin-bottom: var(--app-spacing-xl);
}

.submit-button {
  --border-radius: var(--app-radius-lg);
  --padding-top: var(--app-spacing-md);
  --padding-bottom: var(--app-spacing-md);
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  min-height: 56px;
}

.submit-button:disabled {
  opacity: 0.5;
}

/* Size-based pricing styles */
.size-pricing-section {
  margin-bottom: var(--app-spacing-xl);
}

.recommendation-text {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  margin: var(--app-spacing-xs) 0 var(--app-spacing-lg) 0;
  font-style: italic;
}

.fee-explanation-text {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  margin: var(--app-spacing-xs) 0 var(--app-spacing-lg) 0;
}

.size-pricing-grid {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
}

.size-pricing-item {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-md);
  padding: var(--app-spacing-md);
  background: var(--app-bg-secondary);
  border-radius: var(--app-radius-lg);
  border: 1px solid var(--app-border-light);
}

.size-info {
  text-align: center;
}

.size-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: var(--app-bg-primary); */
  border-radius: var(--app-radius-md);
}

.size-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.size-details {
  flex: 1;
  text-align: left;
}

.size-name {
  font-weight: 600;
  color: var(--app-text-primary);
  margin-bottom: 2px;
}

.size-description {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
}

.price-input {
  min-width: 80px;
  max-width: 100px;
}

.price-input ion-item {
  --background: transparent;
  --border-width: 0;
  --inner-border-width: 0;
  --padding-start: 0;
  --padding-end: 0;
  margin: 0;
}

.price-input ion-item::part(native) {
  padding: 0;
}

.price-input ion-item .item-inner {
  padding-right: 0;
}

.price-input ion-label {
  font-size: var(--app-font-size-sm);
  font-weight: 500;
  color: var(--app-text-secondary);
}

.price-input ion-input {
  --padding-start: var(--app-spacing-sm);
  --padding-end: var(--app-spacing-sm);
  --padding-top: var(--app-spacing-xs);
  --padding-bottom: var(--app-spacing-xs);
  background: var(--app-bg-primary);
  border: 2px solid var(--app-gray-400);
  border-radius: var(--app-radius-md);
  font-weight: 600;
  text-align: center;
}

.currency-suffix {
  font-weight: 600;
  color: var(--app-text-secondary);
  margin-left: 2px;
}

/* Specific styles for pricing page - 3 column layout */
.pricing-page .size-pricing-grid {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
}

.pricing-page .size-pricing-item {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-md);
  padding: var(--app-spacing-md) var(--app-spacing-sm) var(--app-spacing-md) var(--app-spacing-md);
  background: var(--app-bg-secondary);
  border-radius: var(--app-radius-lg);
  border: 1px solid var(--app-border-light);
}

.pricing-page .size-checkbox {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 24px;
  padding-top: 2px;
}

.pricing-page .size-info {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-xs);
  flex: 1;
}

.pricing-page .size-actions {
  display: flex;
  align-items: center;
  min-width: 70px;
  max-width: 100px;
}

.pricing-page .size-header {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-sm);
}

.pricing-page .size-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pricing-page .size-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.pricing-page .size-name {
  font-size: var(--app-font-size-base);
  font-weight: 600;
  color: var(--app-text-primary);
  margin: 0;
}

.pricing-page .size-description {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  margin: 0;
}

.pricing-page .price-input {
  min-width: 100px;
  max-width: 120px;
}


/* Package type emoji styling */
.package-type-emoji {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--app-bg-primary);
  border-radius: var(--app-radius-md);
}

.currency-prefix {
  font-weight: 600;
  color: var(--app-text-secondary);
  margin-right: 2px;
}

/* Override Ionic default margin for slot="end" content */
.sc-ion-input-ios-s > [slot="end"]:first-of-type {
  margin-inline-start: 0 !important;
}

.additional-pricing-section {
  margin-top: var(--app-spacing-xl);
  padding-top: var(--app-spacing-lg);
  border-top: 1px solid var(--app-border-light);
}

.additional-pricing-section ion-text p {
  margin-bottom: var(--app-spacing-md);
}

/* Package types page styles */
.package-types-section {
  margin-bottom: var(--app-spacing-xl);
}

.package-types-grid {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
}

.package-type-item {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-md);
  padding: var(--app-spacing-md) var(--app-spacing-sm) var(--app-spacing-md) var(--app-spacing-md);
  background: var(--app-bg-secondary);
  border-radius: var(--app-radius-lg);
  border: 1px solid var(--app-border-light);
}

.package-type-checkbox {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 24px;
  padding-top: 2px;
}

.package-type-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.package-type-header {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-sm);
}

.package-type-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-bg-primary);
  border-radius: var(--app-radius-md);
  flex-shrink: 0;
}

.package-type-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.package-type-name {
  font-weight: 600;
  color: var(--app-text-primary);
  margin: 0;
}

.package-type-description {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  margin: 0;
}

.package-type-actions {
  display: flex;
  align-items: center;
  min-width: 70px;
  max-width: 100px;
}

.extra-charge-input {
  width: 100%;
}

.empty-space {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.extra-charge-input ion-item {
  --background: transparent;
  --border-width: 0;
  --inner-border-width: 0;
  --padding-start: 0;
  --padding-end: 0;
  margin: 0;
}

.extra-charge-input ion-item::part(native) {
  padding: 0;
}

.extra-charge-input ion-item .item-inner {
  padding-right: 0;
}

.extra-charge-input ion-input {
  --padding-start: var(--app-spacing-sm);
  --padding-end: var(--app-spacing-sm);
  --padding-top: var(--app-spacing-xs);
  --padding-bottom: var(--app-spacing-xs);
  background: var(--app-bg-primary);
  border: 2px solid var(--app-gray-400);
  border-radius: var(--app-radius-md);
  font-weight: 600;
  text-align: center;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Hubot Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: var(--app-font-size-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Your Deliveries Page Styles */
.deliveries-content {
  --background: var(--app-bg-primary);
}

.deliveries-container {
  padding: var(--app-spacing-lg);
  max-width: 600px;
  margin: 0 auto;
}

.deliveries-container h2 {
  font-size: var(--app-font-size-2xl);
  font-weight: 500;
  color: var(--app-text-primary);
  margin: var(--app-spacing-lg) 0 var(--app-spacing-md) 0;
  text-align: center;
}

/* Delivery Tabs */
.delivery-tabs {
  margin: var(--app-spacing-md) 0 var(--app-spacing-lg) 0;
  --background: transparent;
  border-radius: 0;
}

.delivery-tabs ion-segment-button {
  --color: var(--app-text-secondary);
  --color-checked: white;
  --background: var(--app-gray-100);
  --background-checked: var(--app-primary-color);
  --border-radius: 0;
  --indicator-color: transparent;
  --border-width: 0;
  font-weight: 500;
  transition: all var(--app-transition-fast);
  border: 1px solid var(--app-gray-300);
  border-right: none;
  min-height: 48px;
  height: 48px;
}

.delivery-tabs ion-segment-button:first-child {
  border-top-left-radius: var(--app-radius-md);
  border-bottom-left-radius: var(--app-radius-md);
}

.delivery-tabs ion-segment-button:last-child {
  border-top-right-radius: var(--app-radius-md);
  border-bottom-right-radius: var(--app-radius-md);
  border-right: 1px solid var(--app-gray-300);
}

.delivery-tabs ion-segment-button:hover {
  --background: var(--app-gray-200);
}

.delivery-tabs ion-segment-button.segment-button-checked {
  --color: white;
  --background: var(--app-primary-color);
  border-color: var(--app-primary-color);
  z-index: 1;
  position: relative;
}

.delivery-tabs ion-segment-button ion-label {
  color: inherit;
  font-weight: inherit;
}

/* Status Tabs */
.status-tabs {
  display: flex;
  gap: var(--app-spacing-sm);
  margin-bottom: var(--app-spacing-lg);
  overflow-x: auto;
  padding-bottom: var(--app-spacing-xs);
}

.status-tab {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-xs);
  padding: var(--app-spacing-sm) var(--app-spacing-md);
  background: var(--app-gray-100);
  border-radius: var(--app-radius-lg);
  cursor: pointer;
  transition: all var(--app-transition-fast);
  white-space: nowrap;
  border: 2px solid transparent;
}

.status-tab:hover {
  background: var(--app-gray-200);
  transform: translateY(-1px);
}

.status-tab.active {
  background: var(--app-primary-color);
  color: var(--app-white);
  border-color: var(--app-primary-color);
}

.status-tab span {
  font-size: var(--app-font-size-sm);
  font-weight: 600;
}

.tab-badge {
  background: var(--app-accent-color);
  color: var(--app-white);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--app-radius-full);
  min-width: 20px;
  text-align: center;
}

.status-tab.active .tab-badge {
  background: var(--app-white);
  color: var(--app-primary-color);
}

/* Deliveries List */
.deliveries-list {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
}

.delivery-card {
  background: var(--app-white);
  border-radius: var(--app-radius-lg);
  padding: var(--app-spacing-lg);
  box-shadow: var(--app-shadow-sm);
  border: 1px solid var(--app-border-color);
  cursor: pointer;
  transition: all var(--app-transition-fast);
}

.delivery-card:hover {
  box-shadow: var(--app-shadow-md);
  transform: translateY(-2px);
}

.delivery-card:active {
  transform: translateY(0);
}

/* Delivery Header */
.delivery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--app-spacing-md);
}

.delivery-status {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-xs);
  padding: var(--app-spacing-xs) var(--app-spacing-sm);
  border-radius: var(--app-radius-md);
  font-size: var(--app-font-size-sm);
  font-weight: 600;
}

.delivery-status.pending {
  background: rgba(255, 167, 38, 0.1);
  color: var(--app-warning-color);
}

.delivery-status.accepted {
  background: rgba(0, 128, 128, 0.1);
  color: var(--app-primary-color);
}

.delivery-status.in-progress {
  background: rgba(0, 128, 128, 0.1);
  color: var(--app-primary-color);
}

.delivery-status.completed {
  background: rgba(0, 128, 128, 0.15);
  color: #006666;
}

.delivery-status ion-icon {
  font-size: 16px;
}

.delivery-date {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  font-weight: 500;
}

/* Delivery Route */
.delivery-route {
  margin-bottom: var(--app-spacing-md);
}

.route-point {
  display: flex;
  align-items: flex-start;
  /* gap: var(--app-spacing-sm); */
  margin-bottom: var(--app-spacing-sm);
}

.route-point:last-child {
  margin-bottom: 0;
}

.route-icon {
  color: var(--app-primary-color);
  font-size: 16px;
  margin-right: 6px;
  vertical-align: middle;
  display: inline-block;
}

.route-info {
  flex: 1;
}

.route-city {
  display: block;
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
  margin-bottom: 2px;
}

.route-address {
  display: block;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: 1.4;
}

.route-arrow {
  display: flex;
  justify-content: center;
  margin: var(--app-spacing-xs) 0;
}

.route-arrow ion-icon {
  color: var(--app-gray-400);
  font-size: 16px;
}

/* Delivery Details */
.delivery-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: var(--app-spacing-md); */
  padding: var(--app-spacing-lg) 0;
  border-top: 1px solid var(--app-border-light);
  border-bottom: 1px solid var(--app-border-light);
}

.package-info {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-xs);
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
}

.package-icon {
  max-width: 48px;
  width: auto;
  height: auto;
}

.delivery-price {
  font-size: var(--app-font-size-lg);
  font-weight: 500;
  color: var(--app-primary-color);
}

/* Package Code */
.package-code {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-xs);
  padding: var(--app-spacing-sm) 0;
  margin-bottom: var(--app-spacing-sm);
}

.code-label {
  color: var(--app-text-secondary);
  font-weight: 500;
  font-size: var(--app-font-size-xs);
}

.code-value {
  color: var(--app-primary-color);
  font-weight: 500;
  font-size: var(--app-font-size-3xl);
  letter-spacing: 2px;
  line-height: 1.2;
}

.package-code-section {
  background: var(--app-bg-secondary);
  border-radius: var(--app-radius-md);
  padding: var(--app-spacing-md);
  margin: var(--app-spacing-md) 0;
}

.package-code-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--app-spacing-xs);
  margin-bottom: var(--app-spacing-sm);
}

.package-code-section .code-label {
  color: var(--app-text-primary);
  font-weight: 500;
  font-size: var(--app-font-size-xs);
}

.package-code-section .code-value {
  color: var(--app-primary-color);
  font-weight: 500;
  font-size: 3rem;
  letter-spacing: 3px;
  line-height: 1.2;
  text-align: center;
}

.code-instructions {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Driver Info */
.driver-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--app-spacing-sm);
  margin-bottom: var(--app-spacing-md);
  padding: 0 var(--app-spacing-sm);
  /* border-bottom: 1px solid var(--app-border-light); */
}

.driver-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.chat-button {
  margin-left: auto;
  flex-shrink: 0;
}

.full-width-button {
  width: 100%;
}

.driver-details {
  flex: 1;
}

.driver-name {
  display: block;
  font-size: var(--app-font-size-xs);
  font-weight: 600;
  color: var(--app-text-primary);
  margin-bottom: 1px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 3px;
}

.star-icon {
  color: var(--app-accent-color);
  font-size: 12px;
}

.rating-value {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  font-weight: 500;
}

/* Delivery Actions */
.delivery-actions {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-sm);
}

.delivery-actions ion-button,
.delivery-actions > div > button,
.delivery-actions button {
  width: 100%;
  --height: 40px;
  --font-size: var(--app-font-size-sm);
}

.rating-container {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-xs);
  margin-top: var(--app-spacing-lg);
  margin-bottom: var(--app-spacing-lg);
}

.rating-label {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  font-weight: 500;
}

.stars-rating {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.star-icon-rating {
  font-size: 48px;
  color: var(--app-gray-300);
  cursor: pointer;
  transition: color 0.2s ease;
  flex: 1;
  text-align: center;
}

.star-icon-rating.star-filled {
  color: var(--app-warning);
}

.star-icon-rating:hover {
  color: var(--app-warning);
}

/* Responsive Design */
@media (max-width: 480px) {
  .deliveries-container {
    padding: var(--app-spacing-lg);
  }
  
  .delivery-card {
    padding: var(--app-spacing-md);
  }
  
  .status-tabs {
    gap: var(--app-spacing-xs);
  }
  
  .status-tab {
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
  }
  
  .delivery-actions {
    flex-direction: column;
  }
  
  .delivery-actions ion-button {
    width: 100%;
  }
}

/* Global CSS Variables for modern flat design */
:root {
  /* Color Palette - Based on Logo Colors */
  --app-primary-color: #008080;
  --app-primary-dark: #006666;
  --app-primary-light: #00b3b3;
  --app-primary-very-light: #00e6e6;
  --app-secondary-color: #F8F9FA;
  --app-accent-color: #ff7f2a;
  --app-accent-dark: #cc6522;
  --app-accent-light: #ff9955;
  --app-accent-very-light: #ffccaa;
  --app-success-color: #ffcc00;
  --app-success-dark: #cca300;
  --app-success-light: #ffe64d;
  --app-success-very-light: #fff299;
  --app-warning-color: #ff7f2a;
  --app-error-color: #FF6B6B;
  --app-info-color: #008080;
  --app-alert-color: #006666;
  
  /* Neutral Colors - Based on Logo Dark Gray (#333333) */
  --app-white: #FFFFFF;
  --app-gray-50: #FAFAFA;
  --app-gray-100: #F5F5F5;
  --app-gray-200: #EEEEEE;
  --app-gray-300: #E0E0E0;
  --app-gray-400: #BDBDBD;
  --app-gray-500: #999999;
  --app-gray-600: #808080;
  --app-gray-700: #666666;
  --app-gray-800: #4d4d4d;
  --app-gray-900: #333333;
  
  /* Text Colors - Based on Logo Dark Gray */
  --app-text-primary: #333333;
  --app-text-secondary: #666666;
  --app-text-muted: #999999;
  --app-text-inverse: #FFFFFF;
  
  /* Background Colors */
  --app-bg-primary: #FFFFFF;
  --app-bg-secondary: #FFFFFF;
  --app-bg-tertiary: #FFFFFF;
  
  /* Border Colors */
  --app-border-color: #E0E0E0;
  --app-border-light: #F5F5F5;
  
  /* Shadow System */
  --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --app-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  --app-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.08);
  --app-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.08);
  
  /* Border Radius */
  --app-radius-sm: 4px;
  --app-radius-md: 8px;
  --app-radius-lg: 12px;
  --app-radius-xl: 16px;
  --app-radius-full: 50%;
  
  /* Spacing System */
  --app-spacing-xs: 4px;
  --app-spacing-sm: 8px;
  --app-spacing-md: 16px;
  --app-spacing-lg: 24px;
  --app-spacing-xl: 32px;
  --app-spacing-2xl: 48px;
  --app-spacing-3xl: 64px;
  --app-spacing-4xl: 96px;
  
  /* Typography */
  --app-font-family-base: 'Hubot Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --app-font-family-heading: 'Hubot Sans', sans-serif;
  --app-font-family-mono: var(--app-font-family-base);
  --app-font-size-base: 18px;
  --app-font-size-xs: 14px;
  --app-font-size-sm: 16px;
  --app-font-size-md: 18px;
  --app-font-size-lg: 20px;
  --app-font-size-xl: 22px;
  --app-font-size-2xl: 26px;
  --app-font-size-3xl: 32px;
  
  /* Line Heights */
  --app-line-height-tight: 1.25;
  --app-line-height-normal: 1.5;
  --app-line-height-relaxed: 1.75;
  
  /* Transitions */
  --app-transition-fast: 0.15s ease;
  --app-transition-normal: 0.3s ease;
  --app-transition-slow: 0.5s ease;
}

/* Global button styling - Modern flat design */
ion-button {
  --background: #008080;
  --color: #FFFFFF;
  --border-radius: var(--app-radius-md);
  --box-shadow: var(--app-shadow-sm);
  --font-weight: 600;
  --padding-start: var(--app-spacing-lg);
  --padding-end: var(--app-spacing-lg);
  --padding-top: var(--app-spacing-md);
  --padding-bottom: var(--app-spacing-md);
  transition: all var(--app-transition-fast);
  border: none;
  text-transform: none;
  font-size: var(--app-font-size-md);
  font-family: var(--app-font-family-base);
}

/* Make icons white in primary buttons (default solid buttons) */
ion-button:not([fill="outline"]):not([fill="clear"]) ion-icon {
  color: white;
}

ion-button:hover {
  --box-shadow: var(--app-shadow-md);
  transform: translateY(-1px);
  --background: #006666;
}

ion-button:active {
  --box-shadow: var(--app-shadow-sm);
  transform: translateY(0);
  --background: #004d4d;
}

ion-button:focus {
  --background: #008080;
  --color: #FFFFFF;
  outline: 2px solid #008080;
  outline-offset: 2px;
}

/* Button variants */
ion-button[fill="clear"] {
  --background: transparent;
  --color: #008080;
  --box-shadow: none;
}

ion-button[fill="clear"] ion-icon {
  color: #008080;
}

ion-button[fill="clear"]:focus {
  --background: rgba(0, 128, 128, 0.1);
  --color: #008080;
  outline: 2px solid #008080;
  outline-offset: 2px;
}

ion-button[fill="clear"]:focus ion-icon {
  color: #008080;
}

ion-button[fill="outline"] {
  --background: transparent;
  --color: #008080;
  --border-color: #008080;
  --border-width: 2px;
  --box-shadow: none;
}

ion-button[fill="outline"]:hover {
  --background: #008080;
  --color: #FFFFFF;
}

ion-button[fill="outline"]:focus {
  --background: transparent;
  --color: #008080;
  --border-color: #008080;
  outline: 2px solid #008080;
  outline-offset: 2px;
}

/* Special button classes */
ion-button.success-button {
  --background: #ffcc00;
  --color: #333333;
}

ion-button.warning-button {
  --background: #ff7f2a;
  --color: #FFFFFF;
}

ion-button.error-button {
  --background: #FF6B6B;
  --color: #FFFFFF;
}

ion-button.info-button {
  --background: #008080;
  --color: #FFFFFF;
}

/* Common button heights and styles */
ion-button.standard-button {
  height: 56px;
  font-weight: 600;
  font-size: var(--app-font-size-md);
}

ion-button.social-button {
  height: 48px;
  font-size: var(--app-font-size-sm);
}

ion-button.action-button {
  height: 56px;
  font-weight: 600;
}

/* Container and layout patterns */
.desktop-container {
  max-width: 480px;
  margin: 0 auto;
  height: 100%;
}

.desktop-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--app-spacing-lg);
}

/* Form and card patterns */
.form-card {
  padding: 0;
}

.form-card h2 {
  margin-top: 0;
  margin-bottom: var(--app-spacing-md);
  color: var(--app-text-primary);
  font-size: var(--app-font-size-2xl);
  font-weight: 500;
  line-height: var(--app-line-height-tight);
}

.form-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* gap: var(--app-spacing-sm); */
}

.input-hint {
  margin-top: 2px;
  margin-bottom: var(--app-spacing-sm);
  font-size: var(--app-font-size-sm);
  color: var(--ion-color-medium);
  line-height: 1.4;
}

.form-row {
  margin-bottom: var(--app-spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--app-spacing-sm);
}

.form-row p {
  margin-bottom: 2px;
  color: var(--app-text-secondary);
  font-weight: 600;
  font-size: var(--app-font-size-sm);
  text-align: right;
}

.label-container {
  min-width: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.form-icon {
  color: var(--app-primary-color);
  font-size: 24px;
}

.input-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.input-container ion-item {
  width: 100%;
  --padding-start: 0;
  --padding-end: 0;
  --inner-padding-start: var(--app-spacing-sm);
  --inner-padding-end: var(--app-spacing-sm);
}

.continue-button {
  margin-top: 0;
}

/* Code verification input styles */
.code-inputs {
  display: flex;
  gap: var(--app-spacing-md);
  justify-content: center;
  margin: var(--app-spacing-xl) 0;
}

.code-input {
  --width: 56px;
  --height: 64px;
  text-align: center;
  font-size: var(--app-font-size-2xl);
  font-weight: 500;
  border: 2px solid var(--app-border-color);
  border-radius: var(--app-radius-md);
  background: var(--app-bg-primary);
  color: var(--app-text-primary);
  transition: all var(--app-transition-fast);
}

.code-input:focus {
  border-color: var(--app-primary-color);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.1);
}

/* Code Input Error States */
.code-inputs--error .code-input,
.code-input--error {
  border-color: var(--app-error-color);
}

.code-inputs--error .code-input:focus,
.code-input--error:focus {
  border-color: var(--app-error-color);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
}

/* Navigation patterns */
.navigation-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--app-spacing-md);
  background: var(--app-bg-primary);
  border-top: 1px solid var(--app-border-color);
  box-shadow: var(--app-shadow-lg);
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.nav-indicators {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--app-font-size-xs);
  gap: var(--app-spacing-xs);
  cursor: pointer;
  padding: var(--app-spacing-sm);
  border-radius: var(--app-radius-md);
  transition: all var(--app-transition-fast);
  color: var(--app-text-secondary);
  font-weight: 500;
}

.nav-item:hover {
  background-color: var(--app-bg-secondary);
  color: var(--app-primary-color);
}

.nav-item.active {
  color: var(--app-primary-color);
  background-color: rgba(0, 212, 170, 0.1);
}

.nav-item ion-icon {
  font-size: 24px;
  transition: all var(--app-transition-fast);
}

.nav-item.active ion-icon {
  transform: scale(1.1);
}

/* Content area patterns */
.content-area {
  text-align: center;
  padding: var(--app-spacing-2xl) var(--app-spacing-lg);
  margin: var(--app-spacing-lg) 0;
}

/* Bottom spacing to prevent content from being hidden by navbar */
.content-with-bottom-nav {
  padding-bottom: 80px;
}

.details-content {
  padding-bottom: 80px;
}

.details-container {
  padding: var(--app-spacing-md);
  margin-bottom: 250px;
}

.details-container .section-divider {
  height: 1px;
  background-color: var(--app-border-color);
  margin: var(--app-spacing-lg) 0;
}

.delivery-info {
  margin-bottom: var(--app-spacing-xl);
}

.delivery-info h3 {
  margin: 0 0 var(--app-spacing-md) 0;
  color: var(--app-text-primary);
  font-size: var(--app-font-size-lg);
  font-weight: 600;
}

.package-chip {
  margin-top: var(--app-spacing-sm);
}

.package-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: var(--app-spacing-md); */
}

.package-details {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-sm);
}

.package-icon {
  max-width: 48px;
  width: auto;
  height: auto;
}

.package-text {
  flex: 1;
}

.package-size {
  margin: 0 0 var(--app-spacing-xs) 0;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-primary);
}

.package-description {
  margin: 0;
  font-size: var(--app-font-size-xs);
  color: var(--app-text-muted);
}

.price-info {
  text-align: right;
}

.price {
  margin: 0;
  font-size: var(--app-font-size-lg);
  font-weight: 500;
  color: var(--app-primary-color);
}

.comments-section {
  margin-bottom: var(--app-spacing-md);
}

.comments-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--app-spacing-sm);
}

.reviews-link {
  --color: var(--app-primary-color);
  --background: transparent;
  font-weight: 500;
  font-size: var(--app-font-size-xs);
  height: auto;
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: var(--app-spacing-sm);
  margin: 0;
}

.reviews-link:hover {
  --color: var(--app-primary-dark);
}

.comments-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--app-spacing-md);
  padding: var(--app-spacing-sm) 0;
  margin-bottom: var(--app-spacing-md);
}

.comments-carousel::-webkit-scrollbar {
  display: none;
}

.comments-carousel {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-sm);
  width: calc(100vw - 2 * var(--app-spacing-md));
  max-width: 320px;
  scroll-snap-align: start;
  flex-shrink: 0;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-sm);
}

.comment-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
}

.comment-text {
  margin: 0 0 var(--app-spacing-xs) 0;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-primary);
  line-height: var(--app-line-height-normal);
}

.comment-time {
  margin: 0;
  font-size: var(--app-font-size-xs);
  color: var(--app-text-muted);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--app-spacing-xs);
  margin-top: var(--app-spacing-sm);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--app-border-color);
  transition: all var(--app-transition-fast);
  cursor: pointer;
}

.dot:hover {
  background-color: var(--app-primary-color);
  transform: scale(1.1);
}

.dot.active {
  background-color: var(--app-primary-color);
  transform: scale(1.2);
}

.driver-section {
  margin-bottom: var(--app-spacing-md);
}

.driver-section .driver-header {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-md);
  margin-bottom: var(--app-spacing-md);
}

.driver-name {
  margin: 0 0 var(--app-spacing-xs) 0;
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  color: var(--app-text-primary);
}

.rating {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-xs);
}

.star-icon {
  font-size: 16px;
  color: #FFD700;
}

.rating-value {
  font-size: var(--app-font-size-xs);
  font-weight: 600;
  color: var(--app-text-primary);
}

.rating-count {
  font-size: var(--app-font-size-xs);
  color: var(--app-text-muted);
}

.driver-attributes {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-sm);
}

.attribute {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-sm);
}

.attribute ion-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.attribute span {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
}

.action-buttons {
  margin-top: var(--app-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-sm);
}

.contact-button {
  --border-color: var(--app-primary-color);
  --color: var(--app-primary-color);
}

.contact-button ion-icon {
  color: var(--app-primary-color);
}

.send-request-button {
  --background: var(--app-primary-color);
  --color: var(--app-white);
}

.send-request-button ion-icon {
  color: var(--app-white);
}

.alert-button {
  /* Uses global clear button styling */
}

.main-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-section {
  margin-bottom: var(--app-spacing-lg);
}

.bottom-section {
  height: 100px;
  margin-top: var(--app-spacing-sm);
}

/* Success and info patterns */
.success-card {
  padding: var(--app-spacing-sm);
  text-align: center;
}

.success-icon {
  font-size: 64px;
  margin-bottom: var(--app-spacing-lg);
  color: var(--app-success-color);
}

.success-card h3 {
  margin: var(--app-spacing-lg) 0 var(--app-spacing-xl) 0;
  color: var(--app-text-primary);
  font-size: var(--app-font-size-xl);
  font-weight: 500;
  line-height: var(--app-line-height-tight);
}

.info-card {
  padding: var(--app-spacing-lg);
}

.info-card ul {
  margin: var(--app-spacing-md) 0;
  padding-left: var(--app-spacing-lg);
  color: var(--app-text-secondary);
}

.info-card li {
  margin-bottom: var(--app-spacing-sm);
  font-size: var(--app-font-size-sm);
  line-height: var(--app-line-height-relaxed);
}

/* Option card patterns */
.option-card {
  background: var(--app-bg-primary);
  border: 1px solid var(--app-border-color);
  border-radius: var(--app-radius-lg);
  padding: var(--app-spacing-lg);
  margin-bottom: var(--app-spacing-md);
  cursor: pointer;
  transition: all var(--app-transition-fast);
  /* box-shadow: var(--app-shadow-sm); */
}

.option-card:hover {
  border-color: var(--app-primary-color);
  box-shadow: var(--app-shadow-md);
  transform: translateY(-2px);
}

.option-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--app-bg-tertiary);
}

.option-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.route-info p {
  margin: 0;
  line-height: var(--app-line-height-normal);
  color: var(--app-text-primary);
}

.price-info {
  text-align: right;
}

.price {
  font-size: var(--app-font-size-xl);
  font-weight: 500;
  color: var(--app-primary-color);
  margin: 0 0 var(--app-spacing-sm) 0;
}

.status {
  color: var(--app-text-muted);
  margin: 0;
  font-size: var(--app-font-size-sm);
}

.driver-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--app-spacing-sm);
}

.driver-count {
  background: var(--app-primary-color);
  color: var(--app-text-inverse);
  border-radius: var(--app-radius-full);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--app-font-size-xs);
  font-weight: 500;
}

/* Day section patterns */
.day-section {
  margin-bottom: var(--app-spacing-xl);
}

.day-section h3 {
  margin: 0 0 var(--app-spacing-lg) 0;
  font-size: var(--app-font-size-lg);
  font-weight: 500;
  color: var(--app-text-primary);
}

/* Push notification patterns */
.push-notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  padding: var(--app-spacing-lg);
  backdrop-filter: blur(4px);
}

.push-notification {
  padding: var(--app-spacing-xl);
  width: 100%;
  max-width: 480px;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--app-spacing-lg);
}

.notification-header h3 {
  margin: 0;
  font-weight: 500;
  font-size: var(--app-font-size-lg);
  color: var(--app-text-primary);
}

.time {
  color: var(--app-text-muted);
  font-size: var(--app-font-size-sm);
}

.notification-body {
  display: flex;
  gap: var(--app-spacing-lg);
  margin-bottom: var(--app-spacing-xl);
}

.notification-avatar {
  background: var(--app-bg-secondary);
  padding: var(--app-spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 56px;
  color: var(--app-primary-color);
}

.notification-text p {
  margin: 0;
  line-height: var(--app-line-height-relaxed);
  color: var(--app-text-secondary);
  font-size: var(--app-font-size-sm);
}

.notification-actions {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
}

/* Social buttons patterns */
.social-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
}

.social-button {
  height: 48px;
  font-weight: 600;
}

/* Divider patterns */
.divider {
  text-align: center;
  margin: var(--app-spacing-sm) 0;
  position: relative;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--app-border-color);
}

.divider p {
  background: var(--app-bg-secondary);
  padding: 0 var(--app-spacing-md);
  color: var(--app-text-muted);
  font-size: var(--app-font-size-sm);
  font-weight: 500;
  display: inline-block;
  position: relative;
  z-index: 1;
}

/* Resend section patterns */
.resend-section {
  text-align: center;
  margin-top: var(--app-spacing-xl);
}

/* Code section patterns */
.code-section {
  margin: var(--app-spacing-xl) 0;
}

/* Phone section patterns */
.phone-section {
  margin: var(--app-spacing-xl) 0 var(--app-spacing-xs) 0;
}

/* Name section patterns */
.name-section {
  margin: var(--app-spacing-xl) 0;
}

/* Location and form specific patterns */
.location-container {
  padding: var(--app-spacing-lg);
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  /* gap: var(--app-spacing-lg); */
}

/* Address input and autocomplete styling */
.address-input-container {
  position: relative;
  margin-bottom: 0;
}

/* Current location link styling */
/* .current-location-link {
  margin: var(--app-spacing-sm) 0;
} */

.current-location-link ion-button {
  --color: var(--app-primary-color);
  --background: transparent;
  font-weight: 500;
  font-size: var(--app-font-size-md);
  height: auto;
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: var(--app-spacing-sm);
}

.current-location-link ion-button:hover {
  --color: var(--app-primary-dark);
}

.current-location-link ion-icon {
  color: var(--app-primary-color);
  font-size: 18px;
  margin-right: var(--app-spacing-xs);
  margin-left: var(--app-spacing-xs);
}

.suggestions-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--app-bg-primary);
  border: 1px solid var(--app-border-color);
  border-top: none;
  border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg);
  box-shadow: var(--app-shadow-lg);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-md);
  padding: var(--app-spacing-md) var(--app-spacing-lg);
  cursor: pointer;
  transition: all var(--app-transition-fast);
  border-bottom: 1px solid var(--app-border-light);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background: var(--app-bg-secondary);
}

.suggestion-item:active {
  background: var(--app-bg-tertiary);
}

.suggestion-icon {
  color: var(--app-primary-color);
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.suggestion-content {
  flex: 1;
  min-width: 0;
}

.suggestion-main {
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
  line-height: var(--app-line-height-tight);
  margin-bottom: var(--app-spacing-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-secondary {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Checkbox container styling */
.checkbox-container {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: var(--app-spacing-sm) 0;
  margin: var(--app-spacing-md) 0;
}

.checkbox-container ion-checkbox {
  margin: 0;
  --size: 20px;
  --border-radius: var(--app-radius-sm);
}

.checkbox-container ion-label {
  margin: 0;
  font-size: var(--app-font-size-md);
  color: var(--app-text-primary);
  font-weight: 500;
}

/* Address input container styling */
.address-input-container {
  position: relative;
  margin-bottom: var(--app-spacing-md);
}

.address-section {
  margin-bottom: var(--app-spacing-xl);
}

/* Address details styling */
/* .address-details {
  margin-top: var(--app-spacing-md);
} */

.detail-row {
  display: flex;
  gap: var(--app-spacing-sm);
  margin-bottom: var(--app-spacing-sm);
}

.detail-item {
  flex: 1;
  --background: var(--app-bg-secondary);
  --border-radius: var(--app-border-radius);
  --padding-start: var(--app-spacing-md);
  --padding-end: var(--app-spacing-md);
  --padding-top: var(--app-spacing-sm);
  --padding-bottom: var(--app-spacing-sm);
}

.detail-item-full {
  --background: var(--app-bg-secondary);
  --border-radius: var(--app-border-radius);
  --padding-start: var(--app-spacing-md);
  --padding-end: var(--app-spacing-md);
  --padding-top: var(--app-spacing-sm);
  --padding-bottom: var(--app-spacing-sm);
}

/* Address card styling */
.saved-addresses {
  margin-top: var(--app-spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-lg);
}

.address-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--app-spacing-lg);
  margin-bottom: var(--app-spacing-sm);
  background: var(--app-bg-primary);
  border: 1px solid var(--app-border-color);
  border-radius: var(--app-radius-lg);
  cursor: pointer;
  transition: all var(--app-transition-fast);
  /* box-shadow: var(--app-shadow-sm); */
}

.address-card:hover {
  border-color: var(--app-primary-color);
  box-shadow: var(--app-shadow-md);
  transform: translateY(-2px);
  background: var(--app-bg-secondary);
}

.address-card:active {
  transform: translateY(0);
  box-shadow: var(--app-shadow-sm);
}

.address-content {
  flex: 1;
}

.address-content ion-label {
  font-size: var(--app-font-size-md);
  color: var(--app-text-primary);
  font-weight: 500;
  line-height: var(--app-line-height-normal);
}

.address-heading-container {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-xs);
  flex: 1;
  margin-right: var(--app-spacing-sm);
}

.address-heading {
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
  line-height: var(--app-line-height-tight);
  margin-bottom: var(--app-spacing-xs);
  display: block;
}

.address-heading-container .location-icon {
  font-size: var(--app-font-size-md);
  color: var(--app-primary-color);
  margin-bottom: var(--app-spacing-xs);
  flex-shrink: 0;
}

.address-details {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-normal);
  display: block;
  margin-bottom: 0;
}

.collection-point-name {
  font-size: var(--app-font-size-xs);
  color: var(--app-primary-color);
  font-weight: 500;
  margin-top: var(--app-spacing-xs);
  display: block;
}

.address-content .address-details {
  font-size: var(--app-font-size-sm);
}

.address-main {
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
  line-height: var(--app-line-height-tight);
  margin-bottom: var(--app-spacing-xs);
  display: block;
}

.address-secondary {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-normal);
  display: block;
}

.card-icon {
  color: var(--app-text-muted);
  font-size: 20px;
  transition: all var(--app-transition-fast);
}

.address-card:hover .card-icon {
  color: var(--app-primary-color);
  transform: translateX(2px);
}

.clickable-item {
  cursor: pointer;
  border-radius: var(--app-radius-md);
  transition: all var(--app-transition-fast);
}

.clickable-item:hover {
  background-color: var(--app-bg-secondary);
}

/* Container patterns */
.options-container {
  padding: var(--app-spacing-lg);
}

/* No drivers available state */
.no-drivers-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--app-spacing-xl) var(--app-spacing-lg);
}

.no-drivers-content {
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.no-drivers-icon {
  font-size: 80px;
  color: var(--app-text-muted);
  margin-bottom: var(--app-spacing-lg);
}

.no-drivers-content h2 {
  font-size: var(--app-font-size-xl);
  font-weight: 600;
  color: var(--app-text-primary);
  margin-bottom: var(--app-spacing-md);
}

.no-drivers-message {
  font-size: var(--app-font-size-base);
  color: var(--app-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--app-spacing-xl);
}

.notification-button {
  margin-top: var(--app-spacing-lg);
  --background: var(--ion-color-primary);
  --color: white;
}

.notification-button ion-icon {
  color: white !important;
}

/* Make icons white in buttons with primary background */
ion-button[style*="--background: var(--ion-color-primary)"],
ion-button[style*="--background: #008080"],
ion-button[--background="var(--ion-color-primary)"] {
  --color: white;
}

ion-button[style*="--background: var(--ion-color-primary)"] ion-icon,
ion-button[style*="--background: #008080"] ion-icon,
ion-button[--background="var(--ion-color-primary)"] ion-icon {
  color: white !important;
}

.notification-confirmed-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--app-spacing-md);
  margin-top: var(--app-spacing-xl);
  padding: var(--app-spacing-lg);
}

.check-icon-large {
  font-size: 48px;
  color: var(--app-primary-color);
}

.notification-confirmed-text {
  font-size: var(--app-font-size-base);
  color: var(--app-text-secondary);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* Bottom link to trigger no drivers state */
.bottom-link-container {
  text-align: center;
  padding: var(--app-spacing-md) 0;
  margin-top: var(--app-spacing-lg);
}

.bottom-link {
  font-size: var(--app-font-size-xs);
  color: var(--app-text-muted);
  text-decoration: none;
  transition: color var(--app-transition-fast);
}

.bottom-link:hover,
.bottom-link:active {
  color: var(--ion-color-primary);
  text-decoration: underline;
}

/* Common spacing for containers */
.container-padding {
  padding: var(--app-spacing-lg);
}

.container-padding-bottom {
  padding-bottom: 100px;
}

/* Date options patterns */
.date-options {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
}

/* When container patterns */
.when-container {
  padding: var(--app-spacing-lg);
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  /* gap: var(--app-spacing-lg); */
}

/* Common spacing utilities */
.margin-top-xs { margin-top: var(--app-spacing-xs); }
.margin-top-sm { margin-top: var(--app-spacing-sm); }
.margin-top-md { margin-top: var(--app-spacing-md); }
.margin-top-lg { margin-top: var(--app-spacing-lg); }
.margin-top-xl { margin-top: var(--app-spacing-xl); }
.margin-bottom-xs { margin-bottom: var(--app-spacing-xs); }
.margin-bottom-sm { margin-bottom: var(--app-spacing-sm); }
.margin-bottom-md { margin-bottom: var(--app-spacing-md); }
.margin-bottom-lg { margin-bottom: var(--app-spacing-lg); }
.margin-bottom-xl { margin-bottom: var(--app-spacing-xl); }

/* Common text utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-muted { color: var(--app-text-muted); }
.text-primary { color: var(--app-primary-color); }
.text-success { color: var(--app-success-color); }
.text-warning { color: var(--app-warning-color); }
.text-error { color: var(--app-error-color); }

/* Common flex utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus styles for accessibility */
ion-button:focus,
ion-input:focus,
.clickable-item:focus {
  outline: 2px solid #008080;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --app-border-color: #000000;
    --app-text-secondary: #000000;
    --app-text-muted: #000000;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --app-bg-primary: #FFFFFF;
    --app-bg-secondary: #FFFFFF;
    --app-bg-tertiary: #FFFFFF;
    --app-text-primary: #212121;
    --app-text-secondary: #757575;
    --app-text-muted: #9E9E9E;
    --app-border-color: #E0E0E0;
    --app-border-light: #F5F5F5;
  }
}

/* Responsive design */
@media (max-width: 480px) {
  .desktop-container {
    max-width: 100%;
  }
  
  .desktop-content {
    padding: var(--app-spacing-md);
  }
  
  .form-card {
    /* padding: var(--app-spacing-lg); */
  }
  
  .code-inputs {
    gap: var(--app-spacing-sm);
  }
  
  .code-input {
    --width: 48px;
    --height: 56px;
    font-size: var(--app-font-size-xl);
  }
}

/* Large screen optimizations */
@media (min-width: 768px) {
  .desktop-container {
    max-width: 600px;
  }
  
  .push-notification {
    max-width: 600px;
  }

  /* Apply max-width to all main content containers except welcome-container */
  .deliveries-container,
  .details-container,
  .tracking-container,
  .options-container,
  .location-container,
  .when-container,
  .map-page-container,
  .photo-confirmation-container,
  .profile-container,
  .chat-container,
  .reviews-container,
  .code-container,
  .name-container,
  .phone-container,
  .register-container,
  .verify-container {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Exclude welcome-container from max-width restriction */
  .welcome-container {
    max-width: none;
  }
}

/* Additional modern design enhancements */

/* Enhanced input styling */
ion-input {
  --background: var(--app-bg-primary);
  --color: var(--app-text-primary);
  --placeholder-color: var(--app-text-muted);
  --border-radius: var(--app-radius-md);
  --padding-start: var(--app-spacing-sm);
  --padding-end: var(--app-spacing-sm);
  --padding-top: var(--app-spacing-sm);
  --padding-bottom: var(--app-spacing-sm);
  --border-color: var(--app-border-color);
  --border-width: 1px;
  --border-style: solid;
  font-size: var(--app-font-size-md);
  font-family: var(--app-font-family-base);
  transition: all var(--app-transition-fast);
}

ion-input:focus-within {
  --border-color: #008080;
  --border-width: 3px;
  --box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.1);
}

/* Enhanced item styling */
ion-item {
  --background: var(--app-bg-primary);
  --color: var(--app-text-primary);
  --border-color: var(--app-border-color);
  --border-radius: var(--app-radius-md);
  --padding-start: var(--app-spacing-md);
  --padding-end: var(--app-spacing-md);
  --padding-top: var(--app-spacing-sm);
  --padding-bottom: var(--app-spacing-sm);
  margin-bottom: var(--app-spacing-sm);
  font-family: var(--app-font-family-base);
  transition: all var(--app-transition-fast);
}

ion-item:hover {
  --background: var(--app-bg-secondary);
}

ion-item:focus-within {
  --border-color: var(--app-primary-color);
  --box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.1);
}

/* Enhanced label styling */
ion-label {
  --color: var(--app-text-primary);
  font-weight: 600;
  font-size: var(--app-font-size-sm);
  font-family: var(--app-font-family-base);
}

/* Enhanced checkbox styling */
ion-checkbox {
  --background: var(--app-bg-primary);
  --border-color: var(--app-border-color);
  --border-radius: var(--app-radius-sm);
  --checkmark-color: var(--app-text-inverse);
  --background-checked: var(--app-primary-color);
  --border-color-checked: var(--app-primary-color);
}

/* Enhanced header styling */
ion-header {
  background: var(--app-bg-primary);
  box-shadow: var(--app-shadow-sm);
  font-family: var(--app-font-family-base);
}

ion-toolbar {
  --background: var(--app-bg-primary);
  --color: var(--app-text-primary);
  --border-color: var(--app-border-color);
  font-family: var(--app-font-family-base);
}

ion-title {
  --color: var(--app-text-primary);
  font-weight: 500;
  font-size: var(--app-font-size-lg);
  font-family: var(--app-font-family-heading);
}

/* Enhanced content styling */
ion-content {
  --background: var(--ion-color-light);
  font-family: var(--app-font-family-base);
}

/* Enhanced avatar styling */
ion-avatar {
  --border-radius: var(--app-radius-full);
  box-shadow: var(--app-shadow-sm);
}

/* Enhanced icon styling */
ion-icon {
  color: var(--app-text-secondary);
  transition: all var(--app-transition-fast);
}

ion-icon:hover {
  color: var(--app-primary-color);
}

/* Enhanced text styling */
ion-text {
  color: var(--app-text-primary);
  line-height: var(--app-line-height-normal);
  font-family: var(--app-font-family-base);
}

/* Enhanced back button styling */
ion-back-button {
  --color: var(--app-primary-color);
  font-weight: 600;
  font-family: var(--app-font-family-base);
}

/* Enhanced loading states */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--app-spacing-xl);
  color: var(--app-text-muted);
}

/* Enhanced error states */
.error-message {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid var(--app-error-color);
  border-radius: var(--app-radius-md);
  padding: var(--app-spacing-md);
  color: var(--app-error-color);
  font-size: var(--app-font-size-sm);
  margin: var(--app-spacing-md) 0;
}

/* Validation Error Component */
.validation-error {
  margin-top: 2px;
  margin-bottom: 4px;
  animation: slideDown 0.2s ease-out;
  text-align: left;
}

.validation-error__message {
  font-size: var(--app-font-size-sm);
  line-height: 1.4;
  margin: 0;
  text-align: left;
}

.validation-error__message p {
  margin: 0;
  color: var(--app-error-color);
  text-align: left;
}

/* Validation error in input containers */
.input-container .validation-error {
  width: 100%;
  text-align: left;
}

/* Validation Error Transitions */
.validation-error-enter-active,
.validation-error-leave-active {
  transition: all 0.2s ease-out;
}

.validation-error-enter-from {
  opacity: 0;
  transform: translateY(-4px);
}

.validation-error-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Input Error States */
ion-item.item-has-error {
  --border-color: var(--app-error-color);
  --highlight-color-focused: var(--app-error-color);
  --highlight-color-invalid: var(--app-error-color);
}

ion-item.item-has-error ion-input {
  --color: var(--app-text-primary);
}

ion-item.item-has-error ion-textarea {
  --color: var(--app-text-primary);
}

ion-item.item-has-error ion-select {
  --color: var(--app-text-primary);
}

ion-item.item-has-error::part(native) {
  border-color: var(--app-error-color);
}

ion-item.item-has-error:focus-within::part(native) {
  border-color: var(--app-error-color);
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

/* Input wrapper with error state */
.input-wrapper--error ion-item {
  --border-color: var(--app-error-color);
  --highlight-color-focused: var(--app-error-color);
  --highlight-color-invalid: var(--app-error-color);
}

.input-wrapper--error ion-item::part(native) {
  border-color: var(--app-error-color);
}

.input-wrapper--error ion-item:focus-within::part(native) {
  border-color: var(--app-error-color);
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

/* Enhanced success states */
.success-message {
  background: rgba(0, 212, 170, 0.1);
  border: 1px solid var(--app-success-color);
  border-radius: var(--app-radius-md);
  padding: var(--app-spacing-md);
  color: var(--app-success-color);
  font-size: var(--app-font-size-sm);
  margin: var(--app-spacing-md) 0;
}

/* Enhanced disabled states */
.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Enhanced selection states */
.selected {
  background: rgba(0, 212, 170, 0.1);
  border-color: var(--app-primary-color);
}

/* Enhanced hover effects for cards */
.card-hover {
  transition: all var(--app-transition-fast);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--app-shadow-lg);
}

/* Enhanced typography hierarchy */
.text-heading {
  font-size: var(--app-font-size-2xl);
  font-weight: 500;
  color: var(--app-text-primary);
  line-height: var(--app-line-height-tight);
  margin-bottom: var(--app-spacing-md);
}

.text-subheading {
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  color: var(--app-text-primary);
  line-height: var(--app-line-height-tight);
  margin-bottom: var(--app-spacing-sm);
}

.text-body {
  font-size: var(--app-font-size-md);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-relaxed);
}

.text-caption {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-muted);
  line-height: var(--app-line-height-normal);
}

/* Enhanced spacing utilities */
.padding-xs { padding: var(--app-spacing-xs); }
.padding-sm { padding: var(--app-spacing-sm); }
.padding-md { padding: var(--app-spacing-md); }
.padding-lg { padding: var(--app-spacing-lg); }
.padding-xl { padding: var(--app-spacing-xl); }

.padding-top-xs { padding-top: var(--app-spacing-xs); }
.padding-top-sm { padding-top: var(--app-spacing-sm); }
.padding-top-md { padding-top: var(--app-spacing-md); }
.padding-top-lg { padding-top: var(--app-spacing-lg); }
.padding-top-xl { padding-top: var(--app-spacing-xl); }

.padding-bottom-xs { padding-bottom: var(--app-spacing-xs); }
.padding-bottom-sm { padding-bottom: var(--app-spacing-sm); }
.padding-bottom-md { padding-bottom: var(--app-spacing-md); }
.padding-bottom-lg { padding-bottom: var(--app-spacing-lg); }
.padding-bottom-xl { padding-bottom: var(--app-spacing-xl); }

/* Enhanced border utilities */
.border-radius-sm { border-radius: var(--app-radius-sm); }
.border-radius-md { border-radius: var(--app-radius-md); }
.border-radius-lg { border-radius: var(--app-radius-lg); }
.border-radius-xl { border-radius: var(--app-radius-xl); }
.border-radius-full { border-radius: var(--app-radius-full); }

/* Enhanced shadow utilities */
.shadow-sm { box-shadow: var(--app-shadow-sm); }
.shadow-md { box-shadow: var(--app-shadow-md); }
.shadow-lg { box-shadow: var(--app-shadow-lg); }
.shadow-xl { box-shadow: var(--app-shadow-xl); }

/* Enhanced width utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Enhanced height utilities */
.h-full { height: 100%; }
.h-auto { height: auto; }

/* Enhanced display utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

/* Enhanced position utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Enhanced overflow utilities */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* Enhanced z-index utilities */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Delivery Options Card Layout */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--app-spacing-md);
  padding-bottom: var(--app-spacing-md);
  border-bottom: 1px solid var(--app-border-light);
}

.card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--app-spacing-md) 0;
}

.route-info {
  flex: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-lg);
}

.price-info {
  flex: 1;
  width: 25%;
  margin-left: var(--app-spacing-md);
}

.price {
  font-size: var(--app-font-size-xl);
  font-weight: 500;
  color: var(--app-primary-color);
  margin: 0;
}

.status {
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-muted);
  margin: 0;
}

.route-point {
  margin-bottom: var(--app-spacing-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.route-point:last-child {
  margin-bottom: 0;
}

.route-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--app-spacing-xs);
  width: 100%;
}

.time-city {
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
  line-height: var(--app-line-height-tight);
  display: block;
  margin-bottom: var(--app-spacing-xs);
}

.route-link {
  --color: var(--app-primary-color);
  --background: transparent;
  font-weight: 500;
  font-size: var(--app-font-size-xs);
  height: auto;
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: var(--app-spacing-sm);
  margin: 0;
  margin-left: auto;
  flex-shrink: 0;
}

.route-link:hover {
  --color: var(--app-primary-dark);
}

.driver-details {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  flex: 1;
}

.driver-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  position: relative;
}

.verification-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-white);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  box-shadow: var(--app-shadow-sm);
}

.verification-badge ion-icon {
  color: var(--app-primary-color);
  font-size: 18px;
}

.avatar-container {
  position: relative;
  flex-shrink: 0;
}

.driver-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}

.driver-name {
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  color: var(--app-text-primary);
  display: block;
}

.rating {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-xs);
  justify-content: flex-start;
}

.star-icon {
  color: #FFD700;
  font-size: 16px;
}

.rating-value {
  font-size: var(--app-font-size-xs);
  font-weight: 500;
  color: var(--app-text-secondary);
}

.capabilities {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-sm);
  flex-shrink: 0;
}

.capability-icon {
  font-size: 20px;
  color: var(--app-primary-color);
  transition: all var(--app-transition-fast);
}

.capability-icon.disabled {
  color: var(--app-text-muted);
  opacity: 0.5;
}

.capability-icon:hover {
  transform: scale(1.1);
}


/* Responsive adjustments for delivery cards */
@media (max-width: 480px) {
  .price-info {
    margin-left: var(--app-spacing-sm);
  }
  
  .price {
    font-size: var(--app-font-size-lg);
  }
  
  .capabilities {
    gap: var(--app-spacing-xs);
  }
  
  .capability-icon {
    font-size: 18px;
  }
}

/* Enhanced cursor utilities */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* Enhanced user-select utilities */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* Enhanced visibility utilities */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* Enhanced opacity utilities */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Enhanced transform utilities */
.scale-0 { transform: scale(0); }
.scale-50 { transform: scale(0.5); }
.scale-75 { transform: scale(0.75); }
.scale-90 { transform: scale(0.9); }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.scale-125 { transform: scale(1.25); }
.scale-150 { transform: scale(1.5); }

/* Enhanced transition utilities */
.transition-none { transition: none; }
.transition-all { transition: all var(--app-transition-normal); }
.transition-colors { transition: color var(--app-transition-fast), background-color var(--app-transition-fast), border-color var(--app-transition-fast); }
.transition-opacity { transition: opacity var(--app-transition-fast); }
.transition-shadow { transition: box-shadow var(--app-transition-fast); }
.transition-transform { transition: transform var(--app-transition-fast); }

/* Insurance section styling */
.insurance-section {
  background: rgba(0, 128, 128, 0.1);
  border: 1px solid rgba(0, 128, 128, 0.2);
  border-radius: var(--app-radius-lg);
  margin: var(--app-spacing-md) 0;
  padding: var(--app-spacing-md);
}

.insurance-explanation {
  background: rgba(0, 128, 128, 0.05);
  border: 1px solid rgba(0, 128, 128, 0.15);
  border-radius: var(--app-radius-lg);
  margin-bottom: var(--app-spacing-lg);
  padding: var(--app-spacing-lg);
  text-align: center;
}

.insurance-header {
  display: flex;
  flex-direction:row-reverse;
  gap: var(--app-spacing-sm);
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--app-spacing-md);
  position: relative;
}

.insurance-header h3 {
  margin: 0;
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  color: var(--app-text-primary);
  text-align: left;
  flex: 1;
  order: 1;
}

.insurance-icon {
  color: var(--app-primary-color);
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
  order: 2;
}

.insurance-description {
  margin: 0;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-relaxed);
  text-align: left;
  /* max-width: 400px; */
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
}

.insurance-description li {
  margin-bottom: var(--app-spacing-xs);
  position: relative;
  padding-left: var(--app-spacing-lg);
}

.insurance-description li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--app-primary-color);
  font-weight: 500;
  font-size: var(--app-font-size-sm);
}

.insurance-description li:last-child {
  margin-bottom: 0;
}

.photo-instructions-banner {
  background: rgba(0, 128, 128, 0.05);
  border: 1px solid rgba(0, 128, 128, 0.15);
  border-radius: var(--app-radius-lg);
  /* margin-bottom: var(--app-spacing-lg); */
  padding: var(--app-spacing-lg);
  text-align: center;
}

.photo-instructions-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--app-spacing-md);
  position: relative;
}

.photo-instructions-header h3 {
  margin: 0;
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  color: var(--app-text-primary);
  text-align: left;
  flex: 1;
  order: 1;
}

.photo-instructions-icon {
  color: var(--app-primary-color);
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
  order: 2;
}

.photo-instructions-content {
  text-align: left;
}

.photo-instructions-content p {
  margin: 0 0 var(--app-spacing-sm) 0;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-relaxed);
}

.photo-instructions-list {
  margin: 0;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-relaxed);
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
}

.photo-instructions-list li {
  margin-bottom: var(--app-spacing-xs);
  position: relative;
  padding-left: var(--app-spacing-lg);
}

.photo-instructions-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--app-primary-color);
  font-weight: 500;
  font-size: var(--app-font-size-sm);
}

.photo-instructions-list li:last-child {
  margin-bottom: 0;
}

.camera-container .photo-preview {
  margin-bottom: var(--app-spacing-lg);
  border-radius: var(--app-radius-lg);
  overflow: hidden;
  box-shadow: var(--app-shadow-md);
}

.camera-container .preview-image {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  display: block;
}

.payment-explanation {
  background: rgba(0, 128, 128, 0.05);
  border: 1px solid rgba(0, 128, 128, 0.15);
  border-radius: var(--app-radius-lg);
  margin-bottom: var(--app-spacing-lg);
  padding: var(--app-spacing-lg);
  text-align: center;
}

.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--app-spacing-md);
  position: relative;
}

.payment-header h3 {
  margin: 0;
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  color: var(--app-text-primary);
  text-align: left;
  flex: 1;
  order: 1;
}

.payment-icon {
  color: var(--app-primary-color);
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
  order: 2;
}

.payment-description {
  margin: 0;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-relaxed);
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
}

.payment-description li {
  margin-bottom: var(--app-spacing-xs);
  position: relative;
  padding-left: var(--app-spacing-md);
}

.payment-description li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--app-primary-color);
  font-weight: 500;
  font-size: var(--app-font-size-sm);
}

.payment-description li:last-child {
  margin-bottom: 0;
}

.payment-terms-container {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-md);
  margin-top: var(--app-spacing-lg);
  padding-top: var(--app-spacing-lg);
  border-top: 1px solid rgba(0, 128, 128, 0.2);
  text-align: left;
}

.payment-terms-checkbox {
  flex-shrink: 0;
  margin-top: var(--app-spacing-xs);
  --size: 24px;
  --border-radius: var(--app-radius-sm);
}

.payment-terms-content {
  flex: 1;
}

.payment-terms-title {
  margin: 0 0 var(--app-spacing-xs) 0 !important;
  font-size: var(--app-font-size-sm) !important;
  font-weight: 600 !important;
  color: var(--app-text-primary) !important;
  line-height: var(--app-line-height-tight) !important;
}

.payment-terms-description {
  margin: 0 !important;
  font-size: var(--app-font-size-sm) !important;
  color: var(--app-text-secondary) !important;
  line-height: var(--app-line-height-relaxed) !important;
}

.insurance-item {
  --background: var(--app-white);
  --border-radius: var(--app-radius-md);
  --border-color: rgba(0, 128, 128, 0.3);
  --border-width: 1px;
  --border-style: solid;
  margin-bottom: var(--app-spacing-sm);
}

.insurance-item:last-child {
  margin-bottom: 0;
}

.insurance-item:hover {
  --background: var(--app-white);
  --border-color: var(--app-primary-color);
}

.insurance-item:focus-within {
  --border-color: var(--app-primary-color);
  --box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.1);
}

/* Package type selection styling */
.package-type-section {
  margin-bottom: var(--app-spacing-lg);
}

.type-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--app-spacing-md);
}

.type-option-label {
  display: block;
  cursor: pointer;
}

.type-radio {
  display: none;
}

.type-option-card {
  background: var(--app-white);
  border: 2px solid var(--app-border-color);
  border-radius: var(--app-radius-lg);
  padding: var(--app-spacing-md);
  transition: all var(--app-transition-fast);
  text-align: center;
  position: relative;
}

.type-option-label:hover .type-option-card {
  border-color: var(--app-primary-color);
  transform: translateY(-2px);
  box-shadow: var(--app-shadow-md);
}

.type-radio:checked + .type-option-card {
  border-color: var(--app-primary-color);
  background: rgba(0, 128, 128, 0.05);
  box-shadow: var(--app-shadow-sm);
}

.type-options.has-error .type-option-card {
  border-color: var(--app-error-color);
}

.type-options.has-error .type-option-card:hover {
  border-color: var(--app-error-color);
}

.type-info {
  text-align: center;
}

.type-name {
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  color: var(--app-text-primary);
  margin-bottom: var(--app-spacing-xs);
}

.type-description {
  font-size: var(--app-font-size-xs);
  color: var(--app-text-secondary);
}

.type-illustration {
  position: relative;
  height: 60px;
  margin-bottom: var(--app-spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Type icon styling */
.type-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transition: all var(--app-transition-fast);
  opacity: 0.8;
}

.type-option-label:hover .type-icon {
  transform: scale(1.1);
  opacity: 1;
}

.type-radio:checked + .type-option-card .type-icon {
  transform: scale(1.05);
  opacity: 1;
}

/* Overweight section styling */
.overweight-section {
  margin-bottom: var(--app-spacing-lg);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--app-radius-lg);
}

.overweight-section .checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-md);
  padding: var(--app-spacing-md);
  margin: 0;
  cursor: pointer;
  transition: all var(--app-transition-fast);
  border-radius: var(--app-radius-md);
  background: var(--app-bg-secondary);
  border: 1px solid var(--app-border-color);
}

.overweight-section .checkbox-container:hover {
  background: rgba(0, 128, 128, 0.05);
}

.overweight-section .checkbox-container .checkbox-input {
  margin: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--app-radius-sm);
  border: 2px solid var(--app-primary-color);
  background: var(--app-white);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  appearance: none;
  position: relative;
  transition: all var(--app-transition-fast);
}

.overweight-section .checkbox-container .checkbox-input:checked {
  background: var(--app-primary-color);
  border-color: var(--app-primary-color);
}

.overweight-section .checkbox-container .checkbox-input:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--app-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.overweight-section .checkbox-container .checkbox-input:hover {
  transform: scale(1.05);
}

.overweight-section .checkbox-container .checkbox-input:focus {
  outline: 2px solid var(--app-primary-color);
  outline-offset: 2px;
}

.checkbox-label {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-xs);
}

.checkbox-title {
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
  line-height: var(--app-line-height-tight);
}

.checkbox-description {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-normal);
}

/* Size selection styling */
.size-selection-section {
  margin-bottom: var(--app-spacing-lg);
}


.size-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--app-spacing-md);
}

.size-option-label {
  display: block;
  cursor: pointer;
}

.size-radio {
  display: none;
}

.size-option-card {
  background: var(--app-white);
  border: 2px solid var(--app-border-color);
  border-radius: var(--app-radius-lg);
  padding: var(--app-spacing-md);
  transition: all var(--app-transition-fast);
  text-align: center;
  position: relative;
}

.size-option-label:hover .size-option-card {
  border-color: var(--app-primary-color);
  transform: translateY(-2px);
  box-shadow: var(--app-shadow-md);
}

.size-radio:checked + .size-option-card {
  border-color: var(--app-primary-color);
  background: rgba(0, 128, 128, 0.05);
  box-shadow: var(--app-shadow-sm);
}

.size-options.has-error .size-option-card {
  border-color: var(--app-error-color);
}

.size-options.has-error .size-option-card:hover {
  border-color: var(--app-error-color);
}

.size-illustration {
  position: relative;
  height: 80px;
  margin-bottom: var(--app-spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Size icon styling */
.size-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  transition: all var(--app-transition-fast);
  opacity: 0.8;
}

.size-option-label:hover .size-icon {
  transform: scale(1.1);
  opacity: 1;
}

.size-radio:checked + .size-option-card .size-icon {
  transform: scale(1.05);
  opacity: 1;
}

/* Icon placeholder styling */
.icon-placeholder {
  width: 48px;
  height: 48px;
  background: var(--app-gray-200);
  border: 2px dashed var(--app-gray-400);
  border-radius: var(--app-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--app-transition-fast);
  position: relative;
}

.icon-placeholder::before {
  content: '📦';
  font-size: 24px;
  opacity: 0.5;
}

.book-placeholder::before {
  content: '📖';
}

.shoes-placeholder::before {
  content: '👟';
}

.microwave-placeholder::before {
  content: '📺';
}

.surfboard-placeholder::before {
  content: '🏄';
}

.size-option-label:hover .icon-placeholder {
  border-color: var(--app-primary-color);
  background: rgba(0, 128, 128, 0.1);
  transform: scale(1.1);
}

.size-radio:checked + .size-option-card .icon-placeholder {
  border-color: var(--app-primary-color);
  background: rgba(0, 128, 128, 0.1);
  transform: scale(1.05);
}

/* Dimension lines */
.dimension-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.dimension-line {
  position: absolute;
  background: #999;
  border: 1px dashed #999;
}

.dimension-line.horizontal {
  width: 20px;
  height: 0;
  top: 10px;
  right: -25px;
}

.dimension-line.vertical {
  width: 0;
  height: 20px;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
}

.dimension-line::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #999;
  border-radius: 50%;
}

.dimension-line.horizontal::before {
  top: -2px;
  left: -2px;
}

.dimension-line.horizontal::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #999;
  border-radius: 50%;
  top: -2px;
  right: -2px;
}

.dimension-line.vertical::before {
  top: -2px;
  left: -2px;
}

.dimension-line.vertical::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #999;
  border-radius: 50%;
  bottom: -2px;
  left: -2px;
}

.size-info {
  text-align: center;
}

.size-weight {
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  color: var(--app-text-primary);
  margin-bottom: var(--app-spacing-xs);
}

.size-dimensions {
  font-size: var(--app-font-size-xs);
  color: var(--app-text-secondary);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .size-options {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--app-spacing-sm);
  }
  
  .size-option-card {
    padding: var(--app-spacing-sm);
  }
  
  .size-illustration {
    height: 60px;
  }
  
  .icon-placeholder {
    width: 40px;
    height: 40px;
  }
  
  .icon-placeholder::before {
    font-size: 20px;
  }
  
  .type-options {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--app-spacing-sm);
  }
  
  .type-option-card {
    padding: var(--app-spacing-sm);
  }
  
  .type-illustration {
    height: 50px;
  }
  
  .type-icon {
    width: 36px;
    height: 36px;
  }
  
  .overweight-section {
    padding: var(--app-spacing-sm);
  }
  
  .overweight-section .checkbox-container {
    gap: var(--app-spacing-sm);
  }
  
  .overweight-section .checkbox-container .checkbox-input {
    width: 20px;
    height: 20px;
  }
  
  .overweight-section .checkbox-container .checkbox-input:checked::after {
    font-size: 12px;
  }
  
  .checkbox-title {
    font-size: var(--app-font-size-sm);
  }
  
  .checkbox-description {
    font-size: var(--app-font-size-xs);
  }
}

/* Enhanced animation utilities */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Enhanced responsive utilities */
@media (max-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:text-sm { font-size: var(--app-font-size-sm); }
  .sm\:text-md { font-size: var(--app-font-size-md); }
  .sm\:text-lg { font-size: var(--app-font-size-lg); }
}

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:text-sm { font-size: var(--app-font-size-sm); }
  .md\:text-md { font-size: var(--app-font-size-md); }
  .md\:text-lg { font-size: var(--app-font-size-lg); }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:text-sm { font-size: var(--app-font-size-sm); }
  .lg\:text-md { font-size: var(--app-font-size-md); }
  .lg\:text-lg { font-size: var(--app-font-size-lg); }
}

/* Enhanced print styles */
@media print {
  .print\:hidden { display: none; }
  .print\:block { display: block; }
  .print\:text-black { color: #000000; }
  .print\:bg-white { background-color: #ffffff; }
}

/* Payment Method Page Styles */
.payment-options {
  margin-bottom: var(--app-spacing-md);
}

.payment-option-item {
  margin-bottom: var(--app-spacing-sm);
  border-radius: var(--app-radius-lg);
  transition: all var(--app-transition-fast);
}

.payment-option-item:hover {
  background: var(--app-bg-secondary);
}

.payment-option-item:focus-within {
  border-color: var(--app-primary-color);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.1);
}

.payment-label {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-xs);
  padding: var(--app-spacing-sm) 0;
}

.payment-option-header {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-sm);
}

.payment-icon {
  font-size: 24px;
  color: var(--app-primary-color);
  flex-shrink: 0;
}

.payment-name {
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
}

.payment-description {
  margin: 0;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-normal);
}

/* Terms Section Styles */
.terms-section {
  margin-bottom: var(--app-spacing-md);
}

.terms-item {
  border-radius: var(--app-radius-lg);
  transition: all var(--app-transition-fast);
}

.terms-item:hover {
  background: var(--app-bg-secondary);
}

.terms-label {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-xs);
  padding: var(--app-spacing-sm) 0;
}

.terms-text {
  margin: 0;
  font-size: var(--app-font-size-md);
  color: var(--app-text-primary);
  line-height: var(--app-line-height-normal);
}

.terms-subtext {
  margin: 0;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-normal);
}

/* Request Sent Page Styles */
.success-header {
  text-align: center;
  margin-bottom: var(--app-spacing-md);
  padding: var(--app-spacing-lg) 0;
}

.success-icon-container {
  display: flex;
  justify-content: center;
  margin-bottom: var(--app-spacing-lg);
}

.success-icon {
  font-size: 64px;
  color: var(--app-success-color);
  background: rgba(229, 249, 147, 0.2);
  /* border-radius: var(--app-radius-full); */
  padding: var(--app-spacing-md);
}

.success-subtitle {
  margin: var(--app-spacing-md) 0 var(--app-spacing-xl) 0;
  font-size: var(--app-font-size-md);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-relaxed);
}

.timer-section {
  margin-bottom: var(--app-spacing-md);
}

.timer-container {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-md);
  padding: var(--app-spacing-lg);
  background: var(--app-bg-secondary);
  border: 1px solid var(--app-border-color);
}

.timer-icon {
  font-size: 32px;
  color: var(--app-primary-color);
  flex-shrink: 0;
  margin-top: var(--app-spacing-xs);
}

.timer-info {
  flex: 1;
}

.timer-title {
  margin: 0 0 var(--app-spacing-xs) 0;
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
  line-height: var(--app-line-height-tight);
}

.timer-description {
  margin: 0;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-relaxed);
}

.info-section {
  margin-bottom: var(--app-spacing-md);
}

.info-container {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-md);
  padding: var(--app-spacing-lg);
  background: var(--app-bg-secondary);
  border: 1px solid var(--app-border-color);
}

.info-icon {
  font-size: 32px;
  color: var(--app-primary-color);
  flex-shrink: 0;
  margin-top: var(--app-spacing-xs);
}

.info-checkbox {
  flex-shrink: 0;
  margin-top: var(--app-spacing-xs);
  --size: 24px;
  --border-radius: var(--app-radius-sm);
}

.info-content {
  flex: 1;
}

.info-title {
  margin: 0 0 var(--app-spacing-xs) 0;
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
  line-height: var(--app-line-height-tight);
}

.info-description {
  margin: 0;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-relaxed);
}

/* Map page styling - updated for new layout */
.address-input-overlay {
  position: relative;
  z-index: 1000;
  margin-bottom: var(--app-spacing-md);
}

.address-input-item {
  --background: var(--app-bg-primary);
  --border-radius: var(--app-radius-lg);
  --box-shadow: var(--app-shadow-lg);
  margin-bottom: 0;
}

.address-textarea {
  --padding-start: 0;
  --padding-end: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-height: auto;
  max-height: 200px;
  overflow-y: auto;
}

.map-container {
  position: relative;
  flex: 1;
  width: calc(100% + 2 * var(--app-spacing-lg));
  margin: 0 calc(-1 * var(--app-spacing-lg));
  overflow: hidden;
}

.map-view {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.map-center-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  pointer-events: none;
}

.center-marker-icon {
  font-size: 32px;
  color: var(--app-primary-color);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.location-info {
  position: absolute;
  bottom: calc(80px + var(--app-spacing-lg));
  left: var(--app-spacing-lg);
  right: var(--app-spacing-lg);
  background: var(--app-bg-primary);
  padding: var(--app-spacing-lg);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-lg);
  z-index: 1000;
}

.location-label {
  display: block;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  font-weight: 500;
  margin-bottom: var(--app-spacing-xs);
}

.location-address {
  display: block;
  font-size: var(--app-font-size-md);
  color: var(--app-text-primary);
  font-weight: 600;
  line-height: var(--app-line-height-tight);
}

/* Welcome/Landing Page Styles - Dadaism & Neoplasticism */

/* Gen X Transgressive Color Palette - Updated with Logo Colors */
:root {
  --grunge-charcoal: #333333;
  --grunge-rust: #ff7f2a;
  --grunge-concrete: #666666;
  --grunge-steel: #808080;
  --grunge-dust: #999999;
  --grunge-acid-green: #ffcc00;
  --grunge-blood: #006666;
  --grunge-paper: #F5F5DC;
  --grunge-ink: #333333;
  --grunge-warning: #ff7f2a;
}

/* Welcome page container overflow handling */
.welcome-content {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  --padding-start: 0;
  --padding-end: 0;
}

.welcome-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.form-section {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.form-card {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Hero Section - Gen X Transgressive */
.hero-section {
  position: relative;
  padding: var(--app-spacing-3xl) 0;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* margin-bottom: var(--app-spacing-2xl); */
  /* background: var(--grunge-paper);
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
  border-top: 8px solid var(--grunge-ink);
  border-bottom: 8px solid var(--grunge-ink); */
}

.hero-header {
  position: absolute;
  top: var(--app-spacing-xl);
  left: var(--app-spacing-xl);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--app-spacing-lg);
  max-width: calc(100% - 2 * var(--app-spacing-xl));
  box-sizing: border-box;
}

.hero-logo {
  height: 130px;
  width: auto;
  max-width: 100%;
}

.hero-video-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
}

.hero-video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* opacity: 0.2; */
  /* filter: grayscale(100%) contrast(1.2) brightness(0.7); */
}

/* Grunge Elements - Distressed Blocks */
.color-block {
  position: absolute;
  z-index: 3;
  border: 3px solid var(--grunge-ink);
  opacity: 0.8;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
  max-width: 20vw;
  max-height: 15vh;
}

.color-block-1 {
  width: 140px;
  height: 100px;
  background: #ff7f2a;
  top: 10%;
  right: 5%;
  transform: rotate(-8deg);
  clip-path: polygon(0 0, 100% 5%, 95% 100%, 5% 95%);
  max-width: min(140px, 20vw);
  max-height: min(100px, 15vh);
}

.color-block-2 {
  width: 120px;
  height: 120px;
  background: var(--grunge-concrete);
  bottom: 15%;
  left: 8%;
  transform: rotate(12deg);
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
  max-width: min(120px, 20vw);
  max-height: min(120px, 15vh);
}

.color-block-3 {
  width: 100px;
  height: 80px;
  background: #008080;
  top: 50%;
  right: 12%;
  transform: rotate(-15deg);
  clip-path: polygon(0 10%, 90% 0, 100% 90%, 10% 100%);
  max-width: min(100px, 20vw);
  max-height: min(80px, 15vh);
}

.hero-content {
  position: relative;
  z-index: 4;
  color: var(--grunge-ink);
  padding: var(--app-spacing-xl);
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
  /* width: 100%; */
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.hero-badge {
  display: inline-block;
  padding: 10px 20px;
  background: var(--grunge-ink);
  color: var(--grunge-paper);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  transform: rotate(-3deg);
  border: 2px solid var(--grunge-ink);
  box-shadow: 4px 4px 0 var(--grunge-concrete);
  font-family: var(--app-font-family-base);
}

.hero-title {
  font-size: 80px;
  font-weight: 500;
  font-variation-settings: 'wdth' 85;
  color: var(--grunge-ink);
  line-height: 0.85;
  margin-bottom: var(--app-spacing-xl);
  /* letter-spacing: -4px; */
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--app-spacing-md);
  /* text-transform: uppercase; */
  max-width: 100%;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Hubot Sans', sans-serif;
  justify-items: center;
}

.hero-title .title-word {
  display: block;
  padding: var(--app-spacing-md) var(--app-spacing-lg);
  background: var(--grunge-paper);
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.hero-title .title-word-1 {
  transform: rotate(-4deg);
  background: #008080;
  color: #FFFFFF;
}

.hero-title .title-word-2 {
  transform: rotate(3deg);
  background: #ffcc00;
  color: #333333;
}

.hero-title .title-word-3 {
  transform: rotate(-2deg);
  background: #ff7f2a;
  color: #FFFFFF;
}

.hero-title .title-word-4 {
  transform: rotate(5deg);
  background: var(--grunge-ink);
  color: #FFFFFF;
  margin-left: calc(var(--app-spacing-md) * -0.5);
}

.hero-subtitle-wrapper {
  max-width: 900px;
  margin-left: 0;
  margin-bottom: var(--app-spacing-xl);
  border-left: 4px solid var(--grunge-ink);
  padding-left: var(--app-spacing-lg);
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.hero-subtitle {
  font-size: var(--app-font-size-md);
  color: var(--grunge-charcoal);
  line-height: 1.7;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
}

/* Hero CTA */
.hero-cta {
  margin-top: var(--app-spacing-xl);
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-cta .app-button {
  transform: rotate(-2deg) scale(1.25) !important;
  box-shadow: 4px 4px 0 #666666 !important;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.hero-cta .app-button:hover {
  transform: rotate(0deg) scale(1.35) translateY(-5px) translateX(-5px) !important;
  box-shadow: 12px 12px 0 #666666 !important;
}

.hero-cta .app-button:active {
  transform: rotate(0deg) scale(1.25) translateY(2px) translateX(2px) !important;
  box-shadow: 4px 4px 0 #666666 !important;
}

/* Features Section - Gen X Transgressive */
.features-section {
  margin: 0;
  padding: var(--app-spacing-3xl) 0;
  background: #FFFFFF;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.features-header {
  text-align: center;
  margin-bottom: var(--app-spacing-2xl);
  padding: 0 var(--app-spacing-xl);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--app-spacing-xl);
  margin-top: var(--app-spacing-2xl);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--app-spacing-xl);
}

.feature-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  background: #FFFFFF;
  overflow: visible;
  position: relative;
  border: 3px solid #333333;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.1), 12px 12px 0 #E0E0E0;
  min-height: 320px;
  overflow: visible;
  clip-path: polygon(2% 0, 98% 2%, 100% 98%, 0 100%);
}

.feature-item-1 {
  background: #FFFFFF;
  border-color: #008080;
  clip-path: polygon(0 3%, 97% 0, 100% 97%, 3% 100%);
  transform: rotate(-1.5deg);
}

.feature-item-2 {
  background: #FFFFFF;
  border-color: #333333;
  clip-path: polygon(1% 2%, 99% 1%, 98% 99%, 2% 98%);
  transform: rotate(-0.8deg);
}

.feature-item-3 {
  background: #FFFFFF;
  color: #333333;
  border-color: #ffcc00;
  clip-path: polygon(3% 0, 100% 3%, 97% 100%, 0 97%);
  transform: rotate(1.2deg);
}

.feature-icon-box {
  width: 100%;
  height: 90px;
  background: #008080;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 500;
  font-family: var(--app-font-family-base);
  letter-spacing: 3px;
  border-bottom: 3px solid #008080;
  position: relative;
  z-index: 2;
  clip-path: polygon(0 0, 100% 5%, 98% 100%, 2% 95%);
  transform: rotate(0.5deg);
  text-transform: uppercase;
  padding: 0 var(--app-spacing-md);
}

.feature-item-1 .feature-icon-box {
  background: #008080;
  color: #FFFFFF;
  border-bottom-color: #008080;
  clip-path: polygon(2% 0, 98% 3%, 100% 97%, 0 100%);
  transform: rotate(-0.8deg);
}

.feature-item-2 .feature-icon-box {
  background: #333333;
  color: #FFFFFF;
  border-bottom-color: #333333;
  clip-path: polygon(1% 2%, 99% 0, 97% 100%, 3% 98%);
  transform: rotate(0.6deg);
}

.feature-item-3 .feature-icon-box {
  background: #ffcc00;
  color: #333333;
  border-bottom-color: #ffcc00;
  clip-path: polygon(3% 0, 100% 3%, 97% 100%, 0 97%);
  transform: rotate(1.2deg);
}

.feature-content-box {
  padding: var(--app-spacing-xl) var(--app-spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--app-spacing-lg);
  overflow: visible;
}

.feature-illustration {
  width: calc(100% + 2 * var(--app-spacing-lg));
  height: auto;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  margin: calc(-1 * var(--app-spacing-xl)) calc(-1 * var(--app-spacing-lg)) var(--app-spacing-md) calc(-1 * var(--app-spacing-lg));
  box-shadow: none;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.feature-illustration img {
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: none;
  display: block;
}

.feature-heading {
  font-size: 22px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 var(--app-spacing-sm) 0;
  padding: var(--app-spacing-xs) var(--app-spacing-md);
  letter-spacing: 1px;
  text-transform: lowercase;
  font-family: 'Hubot Sans', sans-serif;
  line-height: 1.3;
  position: relative;
  z-index: 2;
  text-align: left;
  display: inline-block;
  width: fit-content;
  align-self: flex-start;
}

.feature-item-1 .feature-heading {
  background-color: #008080;
}

.feature-item-2 .feature-heading {
  background-color: #333333;
}

.feature-item-3 .feature-heading {
  background-color: #ffcc00;
  color: #333333;
}

.feature-illustration ion-icon {
  font-size: 80px;
  color: #FFFFFF;
  --ionicon-stroke-width: 48px;
}

.feature-item-1 .feature-illustration {
  background: transparent;
}

.feature-item-1 .feature-illustration ion-icon {
  color: #FFFFFF;
}

.feature-item-2 .feature-illustration {
  background: transparent;
}

.feature-item-2 .feature-illustration ion-icon {
  color: #FFFFFF;
}

.feature-item-3 .feature-illustration {
  background: transparent;
}

.feature-item-3 .feature-illustration ion-icon {
  color: #333333;
}

.feature-text {
  font-size: 16px;
  color: #333333;
  margin: 0;
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: 0.1px;
  list-style: none;
  padding: 0;
  text-align: left;
  width: 100%;
}

.feature-text li {
  position: relative;
  padding-left: var(--app-spacing-lg);
  margin-bottom: var(--app-spacing-sm);
  line-height: 1.6;
}

.feature-text li:before {
  content: '•';
  position: absolute;
  left: 0;
  color: #333333;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
}

.feature-item-1 .feature-text li:before {
  color: #008080;
}

.feature-item-2 .feature-text li:before {
  color: #333333;
}

.feature-item-3 .feature-text li:before {
  color: #ffcc00;
}

.feature-item-2 .feature-text,
.feature-item-3 .feature-text {
  color: #333333;
}

/* Process Section - Gen X Transgressive */
.process-section {
  margin: 0;
  padding: var(--app-spacing-3xl) 0;
  position: relative;
  background: #F5F5F5;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.process-header {
  text-align: center;
  margin-bottom: var(--app-spacing-3xl);
  padding: 0 var(--app-spacing-xl);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.section-label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 4px;
  color: #333333;
  margin-bottom: var(--app-spacing-xl);
  text-transform: uppercase;
  font-family: var(--app-font-family-base);
  text-align: center;
}

.process-title {
  font-size: 80px;
  font-weight: 500;
  color: #333333;
  margin: var(--app-spacing-xl) 0 0 0;
  letter-spacing: -1px;
  line-height: 1.1;
  text-transform: none;
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-xl);
  font-family: 'Hubot Sans', sans-serif;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.process-title-line {
  display: inline-block;
  border: none;
  padding: var(--app-spacing-lg) var(--app-spacing-2xl);
  background: #ffcc00;
  max-width: calc(100% - 2 * var(--app-spacing-xl));
  text-transform: none;
  box-shadow: none;
  transform: rotate(-1deg);
  color: #333333;
  letter-spacing: 0.5px;
  line-height: 1.2;
  font-size: 80px;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.process-title-accent {
  background: #008080;
  color: #FFFFFF;
  transform: rotate(2deg);
  margin-left: var(--app-spacing-xl);
  text-transform: none;
  box-shadow: none;
  letter-spacing: 1px;
  line-height: 1.2;
  font-size: 80px;
  padding: var(--app-spacing-lg) var(--app-spacing-2xl);
  max-width: calc(100% - 2 * var(--app-spacing-xl));
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.process-dialog-bubble {
  position: absolute;
  top: 60%;
  right: -20px;
  transform: translateY(-50%) rotate(-3deg);
  background: #FFFFFF;
  border: 4px solid #333333;
  padding: var(--app-spacing-md) var(--app-spacing-lg);
  box-shadow: none;
  font-size: 40px;
  font-weight: 500;
  color: #333333;
  font-family: 'Hubot Sans', sans-serif;
  letter-spacing: 0.5px;
  z-index: 10;
  white-space: nowrap;
  pointer-events: none;
  max-width: calc(100% - var(--app-spacing-xl));
  box-sizing: border-box;
  line-height: 1.2;
}

.process-dialog-bubble::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 18px solid #333333;
  /* transform: rotate(15deg); */
}

.process-dialog-bubble::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 36px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #FFFFFF;
  /* transform: rotate(15deg); */
  z-index: 1;
}

.dialog-quote {
  font-size: 48px;
  font-weight: 500;
  line-height: 0;
  vertical-align: middle;
}

/* Process Video Container */
.process-video-container {
  width: 100%;
  margin: var(--app-spacing-2xl) 0;
  position: relative;
  overflow: hidden;
}

.process-video-placeholder {
  width: 100%;
  position: relative;
  background: #E0E0E0;
  border: 3px solid #333333;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.1), 12px 12px 0 #E0E0E0;
  clip-path: polygon(1% 0, 99% 2%, 98% 98%, 2% 100%);
  transform: rotate(0.5deg);
  overflow: hidden;
}

/* 16:9 Aspect Ratio */
.process-video-placeholder::before {
  content: '';
  display: block;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-placeholder-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-placeholder-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--app-spacing-md);
  background: transparent;
  z-index: 1;
}

.video-coming-soon-box {
  display: inline-block;
  padding: var(--app-spacing-md) var(--app-spacing-xl);
  background: #FFFFFF;
  border: 3px solid #333333;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.1), 12px 12px 0 #E0E0E0;
  transform: rotate(-1deg);
  color: #333333;
  letter-spacing: 2px;
  line-height: 1.2;
  font-size: 24px;
  font-weight: 500;
  font-family: var(--app-font-family-base);
  text-transform: uppercase;
  margin: 0 0 var(--app-spacing-lg) 0;
  box-sizing: border-box;
  white-space: nowrap;
}

.video-placeholder-icon {
  font-size: 64px;
  color: #FFFFFF;
  opacity: 0.9;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

.video-placeholder-text {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--app-font-family-base);
  margin: 0;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--app-spacing-xl);
  margin-top: var(--app-spacing-2xl);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--app-spacing-xl);
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  background: #FFFFFF;
  overflow: visible;
  position: relative;
  border: 3px solid #333333;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.1), 12px 12px 0 #E0E0E0;
  min-height: 320px;
  overflow: visible;
  clip-path: polygon(2% 0, 98% 2%, 100% 98%, 0 100%);
}

.process-step-1 {
  background: #FFFFFF;
  border-color: #008080;
  clip-path: polygon(0 3%, 97% 0, 100% 97%, 3% 100%);
  transform: rotate(-1.5deg);
}

.process-step-1::before {
  display: none;
}

.process-step-1::after {
  display: none;
}

.process-step-2 {
  background: #FFFFFF;
  border-color: #ff7f2a;
  clip-path: polygon(3% 0, 100% 3%, 97% 100%, 0 97%);
  transform: rotate(1.2deg);
}

.process-step-2::before {
  display: none;
}

.process-step-2::after {
  display: none;
}

.process-step-3 {
  background: #FFFFFF;
  border-color: #333333;
  clip-path: polygon(1% 2%, 99% 1%, 98% 99%, 2% 98%);
  transform: rotate(-0.8deg);
}

.process-step-3::before {
  display: none;
}

.process-step-3::after {
  display: none;
}

.step-number-box {
  width: 100%;
  height: 90px;
  background: #ff7f2a;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 500;
  font-family: var(--app-font-family-base);
  letter-spacing: 3px;
  border-bottom: 3px solid #ff7f2a;
  position: relative;
  z-index: 2;
  /* box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1); */
  clip-path: polygon(0 0, 100% 5%, 98% 100%, 2% 95%);
  transform: rotate(0.5deg);
  text-transform: uppercase;
  padding: 0 var(--app-spacing-md);
}

.process-step-1 .step-number-box {
  background: #008080;
  color: #FFFFFF;
  border-bottom-color: #008080;
  clip-path: polygon(2% 0, 98% 3%, 100% 97%, 0 100%);
  transform: rotate(-0.8deg);
}

.process-step-3 .step-number-box {
  background: #333333;
  color: #FFFFFF;
  border-bottom-color: #333333;
  clip-path: polygon(1% 2%, 99% 0, 97% 100%, 3% 98%);
  transform: rotate(0.6deg);
}

.step-content-box {
  padding: var(--app-spacing-xl) var(--app-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.step-illustration {
  width: calc(100% + 2 * var(--app-spacing-lg));
  height: auto;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  margin: calc(-1 * var(--app-spacing-xl)) calc(-1 * var(--app-spacing-lg)) var(--app-spacing-md) calc(-1 * var(--app-spacing-lg));
  box-shadow: none;
  position: relative;
  clip-path: none;
  transform: none;
  overflow: hidden;
  box-sizing: border-box;
}

.process-step-1 .step-illustration {
  border: none;
  clip-path: none;
  transform: none;
  box-shadow: none;
}

.process-step-1 .step-illustration::before {
  display: none;
}

.process-step-2 .step-illustration {
  border: none;
  clip-path: none;
  transform: none;
  box-shadow: none;
}

.process-step-2 .step-illustration::before {
  display: none;
}

.process-step-3 .step-illustration {
  border: none;
  clip-path: none;
  transform: none;
  box-shadow: none;
}

.process-step-3 .step-illustration::before {
  display: none;
}

.step-illustration img {
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: none;
  display: block;
}

.step-heading {
  font-size: 22px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 var(--app-spacing-sm) 0;
  padding: var(--app-spacing-xs) var(--app-spacing-md);
  letter-spacing: 1px;
  text-transform: lowercase;
  font-family: 'Hubot Sans', sans-serif;
  line-height: 1.3;
  position: relative;
  z-index: 2;
  text-align: left;
  display: inline-block;
  width: fit-content;
  align-self: flex-start;
}

.process-step-1 .step-heading {
  background-color: #008080;
}

.process-step-2 .step-heading {
  background-color: #ff7f2a;
}

.process-step-3 .step-heading {
  background-color: #333333;
}

/* Yellow background uses dark grey text for contrast */
.step-heading.step-heading--yellow {
  background-color: #ffd54f;
  color: #333333;
}

.step-title {
  font-size: 22px;
  font-weight: 500;
  color: #333333;
  margin: 0 0 var(--app-spacing-sm) 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Hubot Sans', sans-serif;
  line-height: 1.3;
  position: relative;
  z-index: 2;
}

.process-step-1 .step-title {
  color: #008080;
}

.process-step-2 .step-title {
  color: #ff7f2a;
}

.process-step-3 .step-title {
  color: #333333;
}

.step-text {
  font-size: 16px;
  color: #333333;
  margin: 0;
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: 0.1px;
  list-style: none;
  padding: 0;
  text-align: left;
  width: 100%;
}

.step-text li {
  position: relative;
  padding-left: var(--app-spacing-lg);
  margin-bottom: var(--app-spacing-sm);
  line-height: 1.6;
}

.step-text li:before {
  content: '•';
  position: absolute;
  left: 0;
  color: #333333;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
}

.process-step-1 .step-text li:before {
  color: #008080;
}

.process-step-2 .step-text li:before {
  color: #ff7f2a;
}

.process-step-3 .step-text li:before {
  color: #333333;
}


/* Stats Section - Gen X Transgressive */
.stats-section {
  margin: 0;
  padding: var(--app-spacing-3xl) 0;
  background: #FFFFFF;
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--app-spacing-lg);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--app-spacing-xl);
  box-sizing: border-box;
}

.stat-item {
  text-align: center;
  padding: var(--app-spacing-2xl) var(--app-spacing-xl);
  background: #FFFFFF;
  position: relative;
  min-width: 0;
}

.stat-item-1 {
  background: #FFFFFF;
}

.stat-item-2 {
  background: #FFFFFF;
}

.stat-item-3 {
  background: #FFFFFF;
  color: #333333;
}

.stat-number {
  font-size: 72px;
  font-weight: 500;
  color: #333333;
  line-height: 1.1;
  margin-bottom: var(--app-spacing-md);
  letter-spacing: -2px;
  font-family: var(--app-font-family-base);
}

.stat-item-1 .stat-number {
  color: #008080;
}

.stat-item-2 .stat-number {
  color: #ff7f2a;
}

.stat-item-3 .stat-number {
  color: #ffcc00;
}

.stat-label {
  font-size: 16px;
  color: #333333;
  font-weight: 500;
  margin-bottom: var(--app-spacing-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--app-font-family-base);
  line-height: 1.4;
}

.stat-item-1 .stat-label {
  color: #333333;
}

.stat-description {
  font-size: 16px;
  color: #666666;
  font-weight: 400;
  line-height: 1.5;
  margin-top: var(--app-spacing-xs);
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--app-font-family-base);
  overflow-wrap: break-word;
}

.stat-divider-vertical {
  width: 2px;
  height: 120px;
  background: #E0E0E0;
  flex-shrink: 0;
  align-self: center;
}

.stats-divider-horizontal {
  display: none;
}

/* CTA Section */
.cta-section {
  text-align: center;
  margin: var(--app-spacing-2xl) 0;
}

.cta-button {
  margin-bottom: var(--app-spacing-md);
  font-size: var(--app-font-size-lg);
  font-weight: 500;
}

.cta-subtitle {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-muted);
  margin: 0;
}

/* Footer Section - Gen X Transgressive */
.footer-section {
  text-align: center;
  margin: 0;
  padding: var(--app-spacing-2xl) var(--app-spacing-xl);
  border-top: 2px solid #E0E0E0;
  background: #F5F5F5;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.footer-text {
  font-size: 12px;
  color: #333333;
  margin: 0;
  line-height: 1.8;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--app-font-family-base);
}

.footer-link {
  color: #333333;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 2px solid #333333;
  transition: all 0.2s ease;
}

.footer-link:hover {
  background: #008080;
  padding: 2px 4px;
  color: #FFFFFF;
}

/* Responsive adjustments for landing page */
@media (max-width: 1024px) {
  .hero-content {
    padding: var(--app-spacing-lg);
  }
  
  .hero-title {
    font-size: clamp(40px, 8vw, 80px);
    width: 100%;
  }
  
  .hero-title .title-word {
    font-size: clamp(32px, 7vw, 72px);
  }
  
  .process-title {
    font-size: clamp(40px, 8vw, 80px);
  }
  
  .process-title-line,
  .process-title-accent {
    font-size: clamp(40px, 8vw, 80px);
    padding: var(--app-spacing-md) var(--app-spacing-lg);
  }
  
  .process-dialog-bubble {
    right: -20px;
    max-width: calc(100% - var(--app-spacing-lg));
    font-size: clamp(20px, 4vw, 40px);
    top: 60%;
  }
  
  .color-block {
    max-width: min(120px, 15vw);
    max-height: min(100px, 12vh);
  }
  
  .color-block-1 {
    width: min(140px, 15vw);
    height: min(100px, 12vh);
  }
  
  .color-block-2 {
    width: min(120px, 15vw);
    height: min(120px, 12vh);
  }
  
  .color-block-3 {
    width: min(100px, 15vw);
    height: min(80px, 12vh);
  }
  
  .hero-logo {
    height: clamp(58px, 10vw, 130px);
  }
  
  .stat-number {
    font-size: clamp(48px, 8vw, 72px);
  }
  
  .features-grid,
  .process-steps {
    padding: 0 var(--app-spacing-lg);
  }
  
  .process-header {
    padding: 0 var(--app-spacing-lg);
  }
}

@media (max-width: 768px) {
  .hero-header {
    max-width: calc(100% - 2 * var(--app-spacing-lg));
    left: var(--app-spacing-lg);
  }
  
  .hero-title {
    grid-template-columns: 1fr;
    gap: var(--app-spacing-sm);
    overflow: visible;
  }
  
  .process-title-line {
    margin-left: 0;
  }
  
  .process-title-accent {
    margin-left: 0;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .process-steps {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--app-spacing-lg);
  }
  
  .stat-description {
    max-width: 100%;
    font-size: 16px;
  }
  
  .stat-divider-vertical {
    display: none;
  }
  
  .stats-divider-horizontal {
    display: block;
    width: 100%;
    height: 2px;
    background: #E0E0E0;
    margin: var(--app-spacing-lg) 0;
  }
}

/* Tablet: process steps full width, one per row, alternating illustration */
@media (min-width: 769px) and (max-width: 1023px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: var(--app-spacing-xl);
    max-width: 100%;
    padding: 0 var(--app-spacing-xl);
  }

  .process-step {
    width: 100%;
    min-height: auto;
    transform: rotate(0deg) !important;
    clip-path: polygon(1% 0, 99% 1%, 99% 99%, 1% 100%) !important;
  }

  .process-step-1,
  .process-step-2,
  .process-step-3 {
    transform: rotate(0deg) !important;
    clip-path: polygon(1% 0, 99% 1%, 99% 99%, 1% 100%) !important;
  }

  .step-content-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: var(--app-spacing-xl);
    align-items: start;
    text-align: left;
    padding: var(--app-spacing-xl);
    min-height: 280px;
  }

  .step-illustration {
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-self: stretch;
    display: flex;
    align-items: stretch;
  }

  .step-illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Step 1 & 3: image left */
  .process-step-1 .step-illustration,
  .process-step-3 .step-illustration {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .process-step-1 .step-heading,
  .process-step-3 .step-heading {
    grid-column: 2;
    grid-row: 1;
  }

  .process-step-1 .step-text,
  .process-step-3 .step-text {
    grid-column: 2;
    grid-row: 2;
  }

  /* Step 2: image right */
  .process-step-2 .step-illustration {
    grid-column: 2;
    grid-row: 1 / -1;
  }

  .process-step-2 .step-heading {
    grid-column: 1;
    grid-row: 1;
  }

  .process-step-2 .step-text {
    grid-column: 1;
    grid-row: 2;
  }

  /* Tablet: features grid full width, one per row, alternating illustration */
  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--app-spacing-xl);
    max-width: 100%;
    padding: 0 var(--app-spacing-xl);
  }

  .feature-item {
    width: 100%;
    min-height: auto;
    transform: rotate(0deg) !important;
    clip-path: polygon(1% 0, 99% 1%, 99% 99%, 1% 100%) !important;
  }

  .feature-item-1,
  .feature-item-2,
  .feature-item-3 {
    transform: rotate(0deg) !important;
    clip-path: polygon(1% 0, 99% 1%, 99% 99%, 1% 100%) !important;
  }

  .feature-content-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: var(--app-spacing-xl);
    align-items: start;
    text-align: left;
    padding: var(--app-spacing-xl);
    min-height: 280px;
  }

  .feature-illustration {
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-self: stretch;
    display: flex;
    align-items: stretch;
  }

  .feature-illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Feature 1 & 3: image left */
  .feature-item-1 .feature-illustration,
  .feature-item-3 .feature-illustration {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .feature-item-1 .feature-heading,
  .feature-item-3 .feature-heading {
    grid-column: 2;
    grid-row: 1;
  }

  .feature-item-1 .feature-text,
  .feature-item-3 .feature-text {
    grid-column: 2;
    grid-row: 2;
  }

  /* Feature 2: image right */
  .feature-item-2 .feature-illustration {
    grid-column: 2;
    grid-row: 1 / -1;
  }

  .feature-item-2 .feature-heading {
    grid-column: 1;
    grid-row: 1;
  }

  .feature-item-2 .feature-text {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 480px) {
  .hero-section {
    min-height: 600px;
    padding: var(--app-spacing-xl) var(--app-spacing-lg);
    margin: calc(-1 * var(--app-spacing-lg)) 0 0 0;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
  }
  
  .hero-header {
    position: relative;
    top: auto;
    /* left: auto; */
    /* padding: 0 var(--app-spacing-xl); */
    margin-bottom: var(--app-spacing-lg);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .hero-logo {
    height: 48px;
    width: auto;
  }
  
  .hero-content {
    padding-top: 0;
  }
  
  .hero-title {
    font-size: 52px;
    grid-template-columns: 1fr;
    gap: var(--app-spacing-sm);
    max-width: 100%;
    margin: 0 auto;
  }
  
  .hero-title .title-word {
    font-size: 42px;
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    max-width: 100%;
    transform: rotate(0deg) !important;
  }
  
  .hero-subtitle {
    font-size: var(--app-font-size-base);
  }
  
  .hero-cta .app-button {
    transform: rotate(-2deg) scale(1.0) !important;
  }
  
  .hero-cta .app-button:hover {
    transform: rotate(0deg) scale(1.08) translateY(-5px) translateX(-5px) !important;
  }
  
  .hero-cta .app-button:active {
    transform: rotate(0deg) scale(1.0) translateY(2px) translateX(2px) !important;
  }
  
  .color-block {
    display: none;
  }
  
  .stat-number {
    font-size: 56px;
    letter-spacing: -1px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--app-spacing-lg);
    padding: 0 var(--app-spacing-lg);
  }
  
  .stat-item {
    padding: var(--app-spacing-xl) var(--app-spacing-lg);
  }
  
  .stat-description {
    font-size: 16px;
    max-width: 100%;
  }
  
  .stat-divider-vertical {
    display: none;
  }
  
  .process-title {
    font-size: clamp(28px, 8vw, 48px);
    letter-spacing: 0px;
    line-height: 1.2;
    align-items: center;
  }
  
  .process-title-line {
    letter-spacing: 0.3px;
    padding: var(--app-spacing-md) var(--app-spacing-md);
    font-size: clamp(28px, 8vw, 48px);
    max-width: calc(100% - var(--app-spacing-lg));
    box-sizing: border-box;
    white-space: normal;
  }
  
  .process-title-accent {
    letter-spacing: 0.5px;
    font-size: clamp(28px, 8vw, 48px);
    padding: var(--app-spacing-md) var(--app-spacing-md);
    max-width: calc(100% - var(--app-spacing-lg));
    box-sizing: border-box;
    margin-left: 0;
    white-space: normal;
  }
  
  .process-dialog-bubble {
    font-size: clamp(14px, 4vw, 24px);
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    right: -10px;
    top: 60%;
    max-width: calc(100% - var(--app-spacing-lg));
    white-space: normal;
  }
  
  .dialog-quote {
    font-size: clamp(18px, 4vw, 30px);
  }
  
  .section-label {
    font-size: 14px;
    letter-spacing: 3px;
  }
  
  .process-video-container {
    margin: var(--app-spacing-xl) 0;
    padding: 0 var(--app-spacing-md);
  }
  
  .process-video-placeholder {
    transform: rotate(0deg);
    clip-path: polygon(1% 0, 99% 1%, 99% 99%, 1% 100%);
  }
  
  .video-coming-soon-box {
    font-size: 16px;
    letter-spacing: 1px;
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    transform: rotate(0deg);
    white-space: normal;
  }
  
  .video-placeholder-icon {
    font-size: 48px;
  }
  
  .video-placeholder-text {
    font-size: 14px;
  }
  
  .process-steps {
    grid-template-columns: 1fr;
    gap: var(--app-spacing-xl);
    padding: 0 var(--app-spacing-md);
  }
  
  .process-step {
    transform: rotate(0deg) !important;
    clip-path: polygon(1% 0, 99% 1%, 99% 99%, 1% 100%) !important;
    overflow: hidden;
  }
  
  .process-step-1,
  .process-step-2,
  .process-step-3 {
    transform: rotate(0deg) !important;
    clip-path: polygon(1% 0, 99% 1%, 99% 99%, 1% 100%) !important;
  }
  
  .process-step::before,
  .process-step::after {
    display: none;
  }
  
  .step-number-box {
    height: 70px;
    font-size: 18px;
    letter-spacing: 2px;
    transform: rotate(0deg) !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    padding: 0 var(--app-spacing-sm);
  }
  
  .step-content-box {
    padding: var(--app-spacing-lg);
  }
  
  .step-illustration {
    width: calc(100% + 2 * var(--app-spacing-lg));
    margin: calc(-1 * var(--app-spacing-lg)) calc(-1 * var(--app-spacing-lg)) var(--app-spacing-md) calc(-1 * var(--app-spacing-lg));
    transform: none !important;
    clip-path: none !important;
    box-sizing: border-box;
  }
  
  .step-illustration img {
    width: 100%;
    height: auto;
    min-height: 180px;
    object-fit: cover;
    display: block;
  }
  
  .step-illustration::before {
    display: none;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .feature-item {
    transform: rotate(0deg) !important;
    clip-path: polygon(1% 0, 99% 1%, 99% 99%, 1% 100%) !important;
    overflow: hidden;
  }
  
  .feature-item-1,
  .feature-item-2,
  .feature-item-3 {
    transform: rotate(0deg) !important;
    clip-path: polygon(1% 0, 99% 1%, 99% 99%, 1% 100%) !important;
  }
  
  .feature-icon-box {
    height: 70px;
    font-size: 18px;
    letter-spacing: 2px;
    transform: rotate(0deg) !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    padding: 0 var(--app-spacing-sm);
  }
  
  .feature-content-box {
    padding: var(--app-spacing-lg);
  }
  
  .feature-illustration {
    width: calc(100% + 2 * var(--app-spacing-lg));
    margin: calc(-1 * var(--app-spacing-lg)) calc(-1 * var(--app-spacing-lg)) var(--app-spacing-md) calc(-1 * var(--app-spacing-lg));
    height: auto;
    min-height: 180px;
    box-sizing: border-box;
  }
  
  .feature-illustration img {
    width: 100%;
    height: auto;
    min-height: 180px;
    object-fit: cover;
    display: block;
  }
  
  .feature-illustration ion-icon {
    font-size: 60px;
  }
}

@media (max-width: 360px) {
  .process-title {
    font-size: clamp(22px, 7vw, 32px);
  }
  
  .process-title-line {
    font-size: clamp(22px, 7vw, 32px);
    padding: var(--app-spacing-sm) var(--app-spacing-md);
  }
  
  .process-title-accent {
    font-size: clamp(22px, 7vw, 32px);
    padding: var(--app-spacing-sm) var(--app-spacing-md);
  }
  
  .process-dialog-bubble {
    font-size: clamp(22px, 7vw, 32px);
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    right: 0;
    top: 70%;
    max-width: calc(100% - var(--app-spacing-lg));
    white-space: normal;
  }
  
  .dialog-quote {
    font-size: clamp(28px, 7vw, 40px);
  }
}

@media (min-width: 768px) {
  .hero-section {
    min-height: 800px;
  }
  
  .hero-logo {
    height: 58px;
  }
  
  .hero-title {
    font-size: 96px;
  }
  
  .hero-subtitle {
    font-size: 28px;
    line-height: 1.6;
  }
  
  .stats-grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .process-title {
    font-size: 96px;
    letter-spacing: -1px;
    line-height: 1.1;
  }
  
  .process-title-line {
    letter-spacing: 0.5px;
    font-size: 96px;
  }
  
  .process-title-accent {
    letter-spacing: 1px;
    font-size: 96px;
  }
  
  .process-dialog-bubble {
    font-size: 48px;
    top: 60%;
    right: -30px;
  }
  
  .dialog-quote {
    font-size: 60px;
  }
  
  .section-label {
    font-size: 18px;
    letter-spacing: 4px;
  }
  
  .stat-number {
    font-size: 48px;
    letter-spacing: -1px;
  }
}

@media (min-width: 1024px) {
  .stat-number {
    font-size: 72px;
    letter-spacing: -2px;
  }
}

@media (min-width: 1200px) {
  .stat-number {
    font-size: 80px;
    letter-spacing: -2px;
  }
}

/* Override primary button colors */
.primary-button {
  --background: #008080 !important;
  --color: #FFFFFF !important;
}

.primary-button:hover {
  --background: #006666 !important;
}

.primary-button:active {
  --background: #004d4d !important;
}

.primary-button:focus {
  --background: #008080 !important;
  --color: #FFFFFF !important;
  outline: 2px solid #008080 !important;
  outline-offset: 2px !important;
}

/* Comprehensive override to remove all blue colors */
ion-button[color="primary"] {
  --background: #008080 !important;
  --color: #FFFFFF !important;
}

ion-button[color="primary"]:hover {
  --background: #006666 !important;
}

ion-button[color="primary"]:active {
  --background: #004d4d !important;
}

ion-button[color="primary"]:focus {
  --background: #008080 !important;
  --color: #FFFFFF !important;
  outline: 2px solid #008080 !important;
  outline-offset: 2px !important;
}

/* Make icons white in all primary buttons */
ion-button[color="primary"] ion-icon {
  color: white !important;
}

ion-button[color="primary"]:hover ion-icon {
  color: white !important;
}

ion-button[color="primary"]:active ion-icon {
  color: white !important;
}

ion-button[color="primary"]:focus ion-icon {
  color: white !important;
}

/* Override any remaining blue colors */
ion-button {
  --ion-color-primary: #008080 !important;
  --ion-color-primary-rgb: 0, 128, 128 !important;
  --ion-color-primary-contrast: #FFFFFF !important;
  --ion-color-primary-contrast-rgb: 255, 255, 255 !important;
  --ion-color-primary-shade: #006666 !important;
  --ion-color-primary-tint: #00b3b3 !important;
}

/* Calendar and Date Selection Styles */
.recommended-dates {
  margin-bottom: var(--app-spacing-xl);
}

.section-title {
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  color: var(--app-text-primary);
  margin-bottom: var(--app-spacing-md);
  padding: 0 var(--app-spacing-lg);
}

.date-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--app-spacing-lg);
  margin-bottom: var(--app-spacing-sm);
  background: var(--app-bg-primary);
  border: 1px solid var(--app-border-color);
  border-radius: var(--app-radius-lg);
  cursor: pointer;
  transition: all var(--app-transition-fast);
}

.date-card:hover {
  border-color: var(--app-primary-color);
  box-shadow: var(--app-shadow-md);
  transform: translateY(-2px);
  background: var(--app-bg-secondary);
}

.date-card:active {
  transform: translateY(0);
  box-shadow: var(--app-shadow-sm);
}

.date-content {
  flex: 1;
}

.date-heading {
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
  line-height: var(--app-line-height-tight);
  margin-bottom: var(--app-spacing-xs);
  display: block;
}

.date-details {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-normal);
  display: block;
}

.calendar-section {
  margin-bottom: var(--app-spacing-xl);
}

.all-months-calendar {
  /* padding: 0 var(--app-spacing-lg); */
}

.month-calendar {
  margin-bottom: var(--app-spacing-xl);
}

.month-header {
  /* background: var(--app-gray-50); */
  padding: var(--app-spacing-md) var(--app-spacing-lg);
  border-bottom: 1px solid var(--app-border-color);
  margin-bottom: var(--app-spacing-md);
}

.month-title {
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  color: var(--app-text-primary);
  margin: 0;
  text-align: center;
}

.calendar-grid {
  padding: 0 var(--app-spacing-lg) var(--app-spacing-lg) var(--app-spacing-lg);
}

.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--app-spacing-xs);
  margin-bottom: var(--app-spacing-sm);
}

.day-header {
  text-align: center;
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  color: var(--app-text-secondary);
  padding: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--app-spacing-xs);
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--app-font-size-sm);
  font-weight: 500;
  color: var(--app-text-primary);
  background: var(--app-bg-primary);
  border: 1px solid var(--app-border-color);
  border-radius: var(--app-radius-md);
  cursor: pointer;
  transition: all var(--app-transition-fast);
  user-select: none;
}

.calendar-day:hover {
  background: var(--app-bg-secondary);
  border-color: var(--app-primary-color);
  transform: scale(1.05);
}

.calendar-day:active {
  transform: scale(0.95);
}

.calendar-day.other-month {
  color: var(--app-text-muted);
  background: var(--app-gray-50);
  cursor: not-allowed;
}

.calendar-day.other-month:hover {
  background: var(--app-gray-50);
  border-color: var(--app-border-color);
  transform: none;
}

.calendar-day.past-date {
  color: var(--app-text-muted);
  background: var(--app-gray-100);
  cursor: not-allowed;
  opacity: 0.6;
}

.calendar-day.past-date:hover {
  background: var(--app-gray-100);
  border-color: var(--app-border-color);
  transform: none;
}

.calendar-day.today {
  background: var(--app-primary-light);
  color: var(--app-primary-color);
  border-color: var(--app-primary-color);
  font-weight: 600;
  border-width: 2px;
}

.calendar-day.selected {
  background: var(--app-primary-color);
  color: var(--app-white);
  border-color: var(--app-primary-color);
  font-weight: 600;
}

.calendar-day.selected:hover {
  background: var(--app-primary-dark);
  transform: scale(1.05);
}

/* When a day is both today and selected, selected takes priority */
.calendar-day.today.selected {
  background: var(--app-primary-color);
  color: var(--app-white);
  border-color: var(--app-primary-color);
  border-width: 2px;
}

/* Responsive adjustments for mobile */
@media (max-width: 480px) {
  .calendar-day {
    font-size: var(--app-font-size-xs);
  }
  
  .day-header {
    font-size: var(--app-font-size-xs);
  }
  
  .month-title {
    font-size: var(--app-font-size-md);
  }
  
  .calendar-grid {
    padding: var(--app-spacing-md);
  }
}

/* Back button container for register pages */
.back-button-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: var(--app-spacing-md);
}

.back-button-container ion-back-button {
  --color: var(--app-primary-color);
  --background: transparent;
  font-weight: 600;
  font-size: var(--app-font-size-md);
  height: auto;
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  margin: 0;
}

/* Map page specific styles */
.map-content {
  --background: var(--app-bg-primary);
  position: relative;
  height: 100vh;
}

.map-container-wrapper {
  padding: var(--app-spacing-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map-content .back-button-container {
  position: relative;
  z-index: 1000;
  margin-bottom: var(--app-spacing-sm);
}

.map-content h2 {
  margin: 0 0 var(--app-spacing-md) 0;
  font-size: var(--app-font-size-xl);
  font-weight: 600;
  color: var(--app-text-primary);
}

.use-address-section {
  position: absolute;
  bottom: var(--app-spacing-lg);
  left: var(--app-spacing-lg);
  right: var(--app-spacing-lg);
  z-index: 1000;
}

.use-address-button {
  --background: var(--app-primary-color);
  --color: var(--app-white);
  font-weight: 600;
}

/* Demo options styling */
.demo-options {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
  margin-top: var(--app-spacing-lg);
}

.demo-option-button {
  --border-radius: var(--app-radius-md);
  --border-width: 2px;
  --border-style: solid;
  --border-color: var(--app-primary-color);
  --color: var(--app-primary-color);
  --background: transparent;
  --background-hover: var(--app-primary-color);
  --color-hover: var(--app-white);
  --background-activated: var(--app-primary-dark);
  --color-activated: var(--app-white);
  --background-focused: var(--app-primary-color);
  --color-focused: var(--app-white);
  font-weight: 500;
  text-transform: none;
  height: 56px;
  transition: all var(--app-transition-normal);
}

.demo-option-button:hover {
  --background: var(--app-primary-color);
  --color: var(--app-white);
  transform: translateY(-1px);
  box-shadow: var(--app-shadow-md);
}

.demo-option-button:active {
  --background: var(--app-primary-dark);
  --color: var(--app-white);
  transform: translateY(0);
  box-shadow: var(--app-shadow-sm);
}

.demo-option-button ion-icon {
  margin-right: var(--app-spacing-sm);
  font-size: 20px;
}

/* Driver button specific styling */
.demo-option-button.driver-button {
  --border-color: #4CAF50;
  --color: #4CAF50;
  --background-hover: #4CAF50;
  --background-activated: #388E3C;
  --background-focused: #4CAF50;
}

/* Sender button specific styling */
.demo-option-button.sender-button {
  --border-color: #2196F3;
  --color: #2196F3;
  --background-hover: #2196F3;
  --background-activated: #1976D2;
  --background-focused: #2196F3;
}

/* Recipient button specific styling */
.demo-option-button.recipient-button {
  --border-color: #FF9800;
  --color: #FF9800;
  --background-hover: #FF9800;
  --background-activated: #F57C00;
  --background-focused: #FF9800;
}

/* Progress button specific styling */
.demo-option-button.progress-button {
  --border-color: #9C27B0;
  --color: #9C27B0;
  --background-hover: #9C27B0;
  --background-activated: #7B1FA2;
  --background-focused: #9C27B0;
}

/* Push button specific styling */
.demo-option-button.push-button {
  --border-color: #008080;
  --color: #008080;
  --background-hover: #008080;
  --background-activated: #006666;
  --background-focused: #008080;
}

/* SMS button specific styling with extra margin */
.demo-option-button.sms-button-extra-margin {
  margin-bottom: 80px; /* Extra margin to prevent overlap with bottom navbar */
}

/* Accordion content styling */
.accordion-content {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.accordion-content .demo-link-item {
  --border-radius: 0;
  --background: transparent;
  --color: var(--app-text-color);
  --padding-start: var(--app-spacing-md);
  --padding-end: var(--app-spacing-md);
  --padding-top: var(--app-spacing-md);
  --padding-bottom: var(--app-spacing-md);
  border-bottom: 1px solid var(--app-border-color);
}

.accordion-content .demo-link-item:last-child {
  border-bottom: none;
}

.accordion-content .demo-link-item:hover {
  --background: var(--app-background-hover);
}

.accordion-content .demo-link-item ion-label h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--app-text-color);
}

.accordion-content .demo-link-item ion-label p {
  font-size: 14px;
  color: var(--app-text-color-secondary);
  margin: 0;
  line-height: 1.4;
}

/* iOS-style notification overlay */
.ios-notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding: var(--app-spacing-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ios-notification-card {
  background: #F8F9FA;
  border-radius: 16px;
  width: 100%;
  max-width: 400px;
  margin-top: 60px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  animation: iosNotificationSlideIn 0.3s ease-out;
}

@keyframes iosNotificationSlideIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.ios-notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px 20px;
  border-bottom: 1px solid #E0E0E0;
  height: 2.5rem;
}

.ios-notification-app-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ios-app-icon {
  width: 20px;
  height: 20px;
  color: var(--app-primary-color);
}

.ios-app-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.ios-close-button {
  --color: #666;
  --color-hover: #333;
  --color-activated: #333;
  --padding-start: 8px;
  --padding-end: 8px;
  height: 32px;
  width: 32px;
  min-width: 32px;
}

.ios-close-button ion-icon {
  font-size: 18px;
}

.ios-notification-content {
  padding: 16px 20px;
}

.ios-notification-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}

.ios-notification-message {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
}

.ios-notification-actions {
  padding: 0 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ios-notification-actions ion-button {
  --border-radius: 8px;
  --background: #007AFF;
  --color: #FFFFFF;
  --background-hover: #0056CC;
  --background-activated: #0056CC;
  --background-focused: #007AFF;
  font-weight: 500;
  height: 44px;
  text-transform: none;
  font-size: 16px;
}

.ios-notification-actions ion-button[fill="outline"] {
  --background: transparent;
  --color: #007AFF;
  --border-color: #007AFF;
  --border-width: 1px;
  --background-hover: #007AFF;
  --color-hover: #FFFFFF;
}

.ios-notification-actions ion-button[fill="clear"] {
  --background: transparent;
  --color: #007AFF;
  --background-hover: rgba(0, 122, 255, 0.1);
  --color-hover: #007AFF;
}

/* Specific styling for different notification types */
.ios-notification-card.driver-notification .ios-app-icon {
  color: #4CAF50;
}

.ios-notification-card.sender-notification .ios-app-icon {
  color: #2196F3;
}

.ios-notification-card.recipient-notification .ios-app-icon {
  color: #FF9800;
}

.ios-notification-card.progress-notification .ios-app-icon {
  color: #9C27B0;
}

.ios-notification-card.push-notification .ios-app-icon {
  color: #008080;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .ios-notification-card {
    background: #1C1C1E;
  }
  
  .ios-notification-header {
    border-bottom-color: #38383A;
    height:2.5rem;
  }
  
  .ios-app-name {
    color: #FFFFFF;
  }
  
  .ios-notification-title {
    color: #FFFFFF;
  }
  
  .ios-notification-message {
    color: #EBEBF5;
  }
  
  .ios-close-button {
    --color: #EBEBF5;
    --color-hover: #FFFFFF;
    --color-activated: #FFFFFF;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
  .ios-notification-overlay {
    padding: var(--app-spacing-md);
  }
  
  .ios-notification-card {
    margin-top: 40px;
    max-width: none;
  }
  
  .ios-notification-header {
    padding: 12px 16px 8px 16px;
    height:2.5rem;
  }
  
  .ios-notification-content {
    padding: 12px 16px;
  }
  
  .ios-notification-actions {
    padding: 0 16px 16px 16px;
  }
}

/* Step number styling for driver screens */
.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--app-primary-color);
  color: var(--app-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--app-font-size-sm);
  flex-shrink: 0;
  margin-right: var(--app-spacing-md);
}

.step-number.completed {
  background: var(--app-success-color);
  color: var(--app-text-primary);
  font-size: 18px;
}

.step-number.current {
  background: var(--app-primary-color);
  color: var(--app-white);
  border: 2px solid var(--app-primary-light);
}

/* Enhanced info container for step items */
.info-container {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-md);
  padding: var(--app-spacing-lg);
  background: var(--app-bg-secondary);
  border: 1px solid var(--app-border-color);
  margin-bottom: var(--app-spacing-sm);
}

.info-container:last-child {
  margin-bottom: 0;
}

.info-icon {
  font-size: 32px;
  color: var(--app-primary-color);
  flex-shrink: 0;
  margin-top: var(--app-spacing-xs);
}

.info-content {
  flex: 1;
}

.info-title {
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
  line-height: var(--app-line-height-tight);
  margin-bottom: var(--app-spacing-xs);
  display: block;
}

.info-description {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-relaxed);
  display: block;
}

/* Enhanced info section spacing */
.info-section {
  margin-bottom: var(--app-spacing-md);
}

.info-section:last-child {
  margin-bottom: 0;
}

/* Straight-cornered info container for non-clickable elements */
.info-container-straight {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-md);
  padding: var(--app-spacing-lg);
  background: var(--app-bg-secondary);
  border: 1px solid var(--app-border-color);
  margin-bottom: var(--app-spacing-sm);
  border-radius: 0;
}

.info-container-straight:last-child {
  margin-bottom: 0;
}

/* Step icon styling */
.step-icon {
  font-size: 32px;
  color: var(--app-primary-color);
  flex-shrink: 0;
  margin-top: var(--app-spacing-xs);
}

/* Inline contact button styling */
.contact-button-inline {
  margin-top: var(--app-spacing-md);
  --border-radius: var(--app-radius-md);
  --background: transparent;
  --color: var(--app-primary-color);
  --border-color: var(--app-primary-color);
  --border-width: 1px;
  --background-hover: var(--app-primary-color);
  --color-hover: var(--app-white);
  font-weight: 500;
  height: 44px;
  text-transform: none;
  font-size: 16px;
}

/* WhatsApp-style chat interface */
.chat-content {
  --background: #E5DDD5;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><pattern id="chat-bg" patternUnits="userSpaceOnUse" width="100" height="100"><rect width="100" height="100" fill="%23E5DDD5"/><circle cx="20" cy="20" r="1" fill="%23D4CBC3"/><circle cx="80" cy="40" r="1" fill="%23D4CBC3"/><circle cx="40" cy="80" r="1" fill="%23D4CBC3"/></pattern></defs><rect width="100" height="100" fill="url(%23chat-bg)"/></svg>');
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--app-spacing-md);
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding-bottom: var(--app-spacing-md);
}

.message-date {
  text-align: center;
  margin: var(--app-spacing-lg) 0;
}

.message-date span {
  background: rgba(0, 0, 0, 0.1);
  color: var(--app-text-secondary);
  padding: var(--app-spacing-xs) var(--app-spacing-md);
  border-radius: var(--app-radius-full);
  font-size: var(--app-font-size-xs);
  font-weight: 500;
}

.message {
  display: flex;
  margin-bottom: var(--app-spacing-sm);
}

.message.incoming {
  justify-content: flex-start;
}

.message.outgoing {
  justify-content: flex-end;
}

.message-bubble {
  max-width: 70%;
  padding: var(--app-spacing-sm) var(--app-spacing-md);
  border-radius: var(--app-radius-lg);
  position: relative;
}

.message.incoming .message-bubble {
  background: var(--app-white);
  color: var(--app-text-primary);
  border-bottom-left-radius: var(--app-radius-xs);
}

.message.outgoing .message-bubble {
  background: var(--app-primary-color);
  color: var(--app-white);
  border-bottom-right-radius: var(--app-radius-xs);
}

.message-bubble p {
  margin: 0 0 var(--app-spacing-xs) 0;
  line-height: var(--app-line-height-normal);
  font-size: var(--app-font-size-sm);
}

.message-time {
  font-size: var(--app-font-size-xs);
  opacity: 0.7;
  display: block;
  text-align: right;
}

.message.incoming .message-time {
  color: var(--app-text-secondary);
}

.message.outgoing .message-time {
  color: rgba(255, 255, 255, 0.8);
}

.message-input-container {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-sm);
  background: var(--app-white);
  padding: var(--app-spacing-sm);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
}

.attach-button {
  --color: var(--app-text-secondary);
  --color-hover: var(--app-primary-color);
  --color-activated: var(--app-primary-color);
  flex-shrink: 0;
}

.message-input {
  flex: 1;
  --background: transparent;
  --color: var(--app-text-primary);
  --placeholder-color: var(--app-text-muted);
  --padding-start: var(--app-spacing-sm);
  --padding-end: var(--app-spacing-sm);
  --padding-top: var(--app-spacing-sm);
  --padding-bottom: var(--app-spacing-sm);
  font-size: var(--app-font-size-sm);
  border-radius: var(--app-radius-md);
  background: var(--app-gray-50);
}

.send-button {
  --color: var(--app-primary-color);
  --color-hover: var(--app-primary-dark);
  --color-activated: var(--app-primary-dark);
  --color-disabled: var(--app-text-muted);
  flex-shrink: 0;
}

.send-button:disabled {
  --color: var(--app-text-muted);
}

/* Chat header styling */
.chat-content ion-header {
  background: var(--app-primary-color);
}

.chat-content ion-toolbar {
  --background: var(--app-primary-color);
  --color: var(--app-white);
}

.chat-content ion-title {
  --color: var(--app-white);
  font-weight: 600;
}

.chat-content ion-back-button {
  --color: var(--app-white);
}

.chat-content ion-button[fill="clear"] {
  --color: var(--app-white);
}

/* Top right button styling to match back button */
.back-button-container .top-right-button {
  color: var(--app-primary-color);
  background: transparent;
  font-weight: 600;
  font-size: var(--app-font-size-md);
  height: auto;
  padding: 0;
  margin: 0 0 0 auto;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--app-spacing-xs);
  transition: color var(--app-transition-fast);
}

.back-button-container .top-right-button:hover {
  color: var(--app-primary-dark);
}

.back-button-container .top-right-button:focus {
  outline: none;
  color: var(--app-primary-dark);
}

.back-button-container .top-right-button ion-icon {
  font-size: var(--app-font-size-md);
}

.back-button-container .share-button {
  margin-left: auto;
}

/* Map component styles */
.map-content {
  height: 100vh;
  position: relative;
}

.map-container-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--app-spacing-md);
}

.map-content .back-button-container {
  margin-bottom: var(--app-spacing-md);
  z-index: 1000;
}

.map-content h2 {
  margin-bottom: var(--app-spacing-md);
  color: var(--app-text-primary);
  font-size: var(--app-font-size-lg);
  font-weight: 600;
}

.use-address-section {
  margin-top: auto;
  padding-top: var(--app-spacing-md);
}

.use-address-button {
  width: 100%;
  --border-radius: var(--app-radius-md);
}

/* Emoji icon styles for map components */
.suggestion-icon {
  font-size: 20px;
  margin-right: 12px;
  color: var(--app-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.center-marker-icon {
  font-size: 32px;
  color: var(--app-primary-color);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

/* Suggested towns section styles */
.suggested-towns-section {
  margin-bottom: var(--app-spacing-lg);
}

.towns-list {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-sm);
}

.town-checkbox {
  display: flex;
  align-items: center;
  padding: var(--app-spacing-md);
  border: 1px solid var(--app-border-color);
  border-radius: var(--app-radius-md);
  background: var(--app-bg-primary);
  cursor: pointer;
  transition: all var(--app-transition-fast);
  min-height: 56px;
}

.town-checkbox:hover {
  background: var(--app-gray-50);
  border-color: var(--app-primary-color);
}

.town-checkbox.selected {
  background: var(--app-primary-color);
  border-color: var(--app-primary-color);
}

.checkbox-icon {
  margin-right: var(--app-spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.checkbox-icon ion-icon {
  font-size: 20px;
  color: var(--app-text-muted);
}

.town-checkbox.selected .checkbox-icon ion-icon {
  color: var(--app-text-inverse);
}

.town-name {
  font-size: var(--app-font-size-sm);
  font-weight: 500;
  color: var(--app-text-primary);
  flex: 1;
}

.town-checkbox.selected .town-name {
  color: var(--app-text-inverse);
  font-weight: 600;
}

@media (max-width: 480px) {
  .town-checkbox {
    min-height: 52px;
    padding: var(--app-spacing-sm) var(--app-spacing-md);
  }
  
  .town-name {
    font-size: var(--app-font-size-sm);
  }
}

/* Minimalistic macOS-style sort modal */
.sort-modal {
  --width: 100%;
  --height: auto;
  --max-width: 100%;
  --border-radius: 16px 16px 0 0;
  --box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12), 0 -4px 16px rgba(0, 0, 0, 0.08);
}

.sort-modal::part(content) {
  width: 100%;
  max-width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  max-height: none;
}

.sort-modal-container {
  background: var(--app-white);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12), 0 -4px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sort-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px 24px;
  border-bottom: 1px solid var(--app-border-light);
}

.sort-modal-header h3 {
  margin: 0;
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  color: var(--app-text-primary);
}

.cancel-button {
  color: var(--app-primary-color);
  background: transparent;
  font-weight: 600;
  font-size: var(--app-font-size-md);
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color var(--app-transition-fast);
}

.cancel-button:hover {
  color: var(--app-primary-dark);
}

.cancel-button:focus {
  outline: none;
  color: var(--app-primary-dark);
}

.sort-options {
  padding: 8px 0 24px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.sort-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  cursor: pointer;
  transition: all var(--app-transition-fast);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  min-height: 56px;
  box-sizing: border-box;
}

.sort-option:hover {
  background: var(--app-gray-50);
}

.sort-option:active {
  background: var(--app-gray-100);
}

.sort-option.selected {
  background: rgba(0, 128, 128, 0.08);
  color: var(--app-primary-color);
}

.sort-option span {
  font-size: var(--app-font-size-md);
  color: var(--app-text-primary);
  font-weight: 500;
  transition: color var(--app-transition-fast);
}

.sort-option.selected span {
  color: var(--app-primary-color);
  font-weight: 600;
}

.sort-option ion-icon {
  color: var(--app-primary-color);
  font-size: 18px;
  transition: all var(--app-transition-fast);
}

.sort-option:not(.selected) ion-icon {
  opacity: 0;
}

.sort-option.selected ion-icon {
  opacity: 1;
  transform: scale(1.1);
}

/* Header buttons container */
.sort-modal-header .header-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Apply button */
.apply-button {
  color: var(--app-primary-color);
  background: transparent;
  font-weight: 600;
  font-size: var(--app-font-size-md);
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color var(--app-transition-fast);
}

.apply-button:hover {
  opacity: 0.8;
}

.apply-button:active {
  opacity: 0.6;
}

/* Section titles */
.section-title {
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  color: var(--app-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 24px;
  padding-top: 16px;
}

.sort-options .section-title {
  padding-top: 0;
}

/* Filter options container */
.filter-options {
  padding: 0 0 24px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--app-border-light);
}

/* Filter section */
.filter-section {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-label {
  font-size: var(--app-font-size-md);
  font-weight: 500;
  color: var(--app-text-primary);
  margin: 0;
}

/* Time inputs container */
.time-inputs {
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--app-border-light);
  border-radius: 8px;
  font-size: var(--app-font-size-md);
  color: var(--app-text-primary);
  background: var(--app-white);
  transition: all var(--app-transition-fast);
  font-family: inherit;
}

.time-input:focus {
  outline: none;
  border-color: var(--app-primary-color);
  box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.1);
}

.time-separator {
  font-size: var(--app-font-size-md);
  color: var(--app-text-secondary);
  font-weight: 500;
}

/* Dark mode support for modal */
@media (prefers-color-scheme: dark) {
  .sort-modal-container {
    background: #1C1C1E;
    border: 1px solid #38383A;
  }
  
  .sort-modal-header {
    border-bottom-color: #38383A;
  }
  
  .sort-modal-header h3 {
    color: #FFFFFF;
  }
  
  .sort-option:hover {
    background: #2C2C2E;
  }
  
  .sort-option:active {
    background: #3A3A3C;
  }
  
  .sort-option.selected {
    background: rgba(0, 128, 128, 0.15);
  }
  
  .sort-option span {
    color: #FFFFFF;
  }
  
  .sort-option.selected span {
    color: var(--app-primary-color);
  }
  
  .section-title {
    color: #AEAEB2;
  }
  
  .filter-options {
    border-top-color: #38383A;
  }
  
  .filter-label {
    color: #FFFFFF;
  }
  
  .time-input {
    background: #2C2C2E;
    border-color: #38383A;
    color: #FFFFFF;
  }
  
  .time-input:focus {
    border-color: var(--app-primary-color);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.2);
  }
  
  .time-separator {
    color: #AEAEB2;
  }
}

/* Photo Upload Section Styles */
.photo-upload-section {
  margin: var(--app-spacing-2xl);
}

.photo-optional-note {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-sm);
  margin-top: var(--app-spacing-sm);
  padding: var(--app-spacing-sm) var(--app-spacing-md);
  background: rgba(0, 128, 128, 0.08);
  border: 1px solid rgba(0, 128, 128, 0.2);
  border-radius: var(--app-radius-md);
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-normal);
}

.info-icon {
  font-size: 32px;
  color: var(--app-primary-color);
  flex-shrink: 0;
  margin-top: var(--app-spacing-xs);
}

.photo-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--app-spacing-xl);
  border: 2px dashed var(--app-border-color);
  border-radius: var(--app-radius-lg);
  background: var(--app-bg-secondary);
  cursor: pointer;
  transition: all var(--app-transition-fast);
  min-height: 120px;
  text-align: center;
}

.photo-upload-placeholder:hover {
  border-color: var(--app-primary-color);
  background: rgba(0, 128, 128, 0.05);
  transform: translateY(-2px);
  box-shadow: var(--app-shadow-md);
}

.photo-upload-placeholder:active {
  transform: translateY(0);
  box-shadow: var(--app-shadow-sm);
}

.upload-icon {
  font-size: 32px;
  color: var(--app-primary-color);
  margin-bottom: var(--app-spacing-sm);
}

.photo-upload-placeholder p {
  margin: 0 0 var(--app-spacing-xs) 0;
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
}

.upload-hint {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  font-style: italic;
}

.photo-preview-container {
  position: relative;
  border-radius: var(--app-radius-lg);
  overflow: hidden;
  box-shadow: var(--app-shadow-md);
  background: var(--app-white);
}

.photo-preview {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.remove-photo-button {
  position: absolute;
  top: var(--app-spacing-sm);
  right: var(--app-spacing-sm);
  background: rgba(0, 0, 0, 0.7);
  color: var(--app-white);
  border: none;
  border-radius: var(--app-radius-full);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--app-transition-fast);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.remove-photo-button:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.remove-photo-button:active {
  transform: scale(0.95);
}

.remove-photo-button ion-icon {
  font-size: 18px;
  color: var(--app-white);
}

/* Photo Capture Section Styles */
.photo-capture-section {
  margin-bottom: var(--app-spacing-lg);
}

.photo-capture-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--app-spacing-xl);
  border: 2px dashed var(--ion-color-medium);
  border-radius: var(--app-radius-lg);
  background: var(--app-bg-secondary);
  text-align: center;
  min-height: 200px;
  cursor: pointer;
  transition: all var(--app-transition-fast);
}

.photo-capture-placeholder:hover {
  border-color: var(--app-primary-color);
  background: rgba(0, 128, 128, 0.05);
}

.photo-capture-placeholder .camera-icon {
  font-size: 48px;
  color: var(--ion-color-medium);
  margin-bottom: var(--app-spacing-md);
}

.photo-capture-placeholder p {
  margin: 0 0 var(--app-spacing-md) 0;
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
}

.photo-actions {
  display: flex;
  gap: var(--app-spacing-md);
  margin-top: var(--app-spacing-md);
  justify-content: center;
}

.photo-actions button {
  flex: 1;
  max-width: 200px;
}

/* Responsive adjustments for photo upload */
@media (max-width: 480px) {
  .photo-upload-placeholder {
    padding: var(--app-spacing-lg);
    min-height: 100px;
  }
  
  .upload-icon {
    font-size: 28px;
  }
  
  .photo-upload-placeholder p {
    font-size: var(--app-font-size-sm);
  }
  
  .upload-hint {
    font-size: var(--app-font-size-xs);
  }
  
  /* .photo-preview {
    height: 160px;
  } */
  
  .remove-photo-button {
    width: 28px;
    height: 28px;
  }
  
  .remove-photo-button ion-icon {
    font-size: 16px;
  }
  
  .photo-optional-note {
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
    font-size: var(--app-font-size-xs);
  }
  
  .info-icon {
    font-size: 32px;
  }
}

/* Reviews Page Styles */
.reviews-content {
  --background: var(--app-bg-primary);
}

.reviews-container {
  padding: var(--app-spacing-lg);
  max-width: 600px;
  margin: 0 auto;
}

.reviews-header {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-md);
  margin-bottom: var(--app-spacing-lg);
}

.page-title {
  font-size: var(--app-font-size-2xl);
  font-weight: 500;
  color: var(--app-text-primary);
  margin: 0;
}

/* Driver Summary Section */
.driver-summary {
  background: var(--app-bg-secondary);
  border-radius: var(--app-radius-lg);
  padding: var(--app-spacing-lg);
  margin-bottom: var(--app-spacing-lg);
}

.driver-avatar-section {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: var(--app-spacing-md);
}

.driver-avatar-large {
  width: 80px;
  height: 80px;
}

.verification-badge-large {
  position: absolute;
  bottom: 0;
  right: calc(50% - 40px + 10px);
  background: var(--app-success);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--app-bg-primary);
}

.check-icon {
  color: white;
  font-size: 14px;
}

.driver-stats {
  text-align: center;
}

.driver-name {
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
  margin: 0 0 var(--app-spacing-sm) 0;
}

.overall-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-spacing-sm);
  margin-bottom: var(--app-spacing-md);
}

.rating-stars {
  display: flex;
  gap: 2px;
}

.star-icon {
  font-size: 18px;
  color: var(--app-gray-300);
}

.star-icon.filled {
  color: var(--app-warning);
}

.rating-value {
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  color: var(--app-text-primary);
}

.rating-count {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
}

/* Rating Breakdown */
.rating-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-sm);
}

.rating-bar {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-sm);
}

.rating-label {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  min-width: 80px;
  text-align: left;
}

.rating-label.clickable {
  cursor: pointer;
  transition: color var(--app-transition-fast);
  text-decoration: underline;
}

.rating-label.clickable:hover {
  color: var(--app-primary);
}

.rating-label.clickable.active {
  color: var(--app-primary);
  font-weight: 600;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: var(--app-gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--app-primary-color);
  transition: width var(--app-transition-normal);
}

.rating-percentage {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  min-width: 30px;
  text-align: right;
}

/* Clear Filters Section */
.clear-filters {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--app-spacing-md);
}

.clear-filters-button {
  --color: var(--app-primary);
  font-size: var(--app-font-size-sm);
}

/* Reviews List */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-lg);
  margin-bottom: var(--app-spacing-lg);
}

.review-item {
  background: var(--app-bg-secondary);
  border-radius: var(--app-radius-lg);
  padding: var(--app-spacing-lg);
}

.review-header {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-md);
  margin-bottom: var(--app-spacing-md);
}

.reviewer-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.reviewer-info {
  flex: 1;
}

.reviewer-name {
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--app-text-primary);
  margin: 0 0 var(--app-spacing-xs) 0;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-sm);
}

.stars {
  display: flex;
  gap: 2px;
}

.review-date {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
}

.review-content {
  margin-left: calc(48px + var(--app-spacing-md));
}

.review-text {
  font-size: var(--app-font-size-md);
  color: var(--app-text-primary);
  line-height: 1.5;
  margin: 0 0 var(--app-spacing-sm) 0;
}

.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-spacing-xs);
}

.review-tag {
  --background: var(--app-primary-light);
  --color: var(--app-primary);
  font-size: var(--app-font-size-xs);
}

/* Load More Section */
.load-more-section {
  margin-bottom: var(--app-spacing-xl);
}

.load-more-button {
  --border-radius: var(--app-radius-lg);
}

/* Section Divider */
.section-divider {
  height: 1px;
  background: var(--app-gray-200);
  margin: var(--app-spacing-lg) 0;
}

/* Package handling options styling */
.handling-options-section {
  margin-bottom: var(--app-spacing-lg);
}

.handling-options {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
}

.handling-option-label {
  display: block;
  cursor: pointer;
}

.handling-radio {
  display: none;
}

.handling-option-card {
  background: var(--app-white);
  border: 2px solid var(--app-border-color);
  border-radius: var(--app-radius-lg);
  padding: var(--app-spacing-md);
  transition: all var(--app-transition-fast);
  display: flex;
  align-items: center;
  gap: var(--app-spacing-md);
  position: relative;
}

.handling-option-label:hover .handling-option-card {
  border-color: var(--app-primary-color);
  transform: translateY(-2px);
  box-shadow: var(--app-shadow-md);
}

.handling-radio:checked + .handling-option-card {
  border-color: var(--app-primary-color);
  background: rgba(0, 128, 128, 0.05);
  box-shadow: var(--app-shadow-sm);
}

.handling-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: var(--app-background-light);
  border-radius: var(--app-radius-md);
  flex-shrink: 0;
}

.handling-icon {
  font-size: 28px;
  color: var(--app-primary-color);
  transition: all var(--app-transition-fast);
}

.handling-option-label:hover .handling-icon {
  transform: scale(1.1);
}

.handling-radio:checked + .handling-option-card .handling-icon {
  transform: scale(1.05);
}

.handling-info {
  flex: 1;
  text-align: left;
}

.handling-name {
  font-size: var(--app-font-size-md);
  font-weight: var(--app-font-weight-semibold);
  color: var(--app-text-primary);
  margin-bottom: 4px;
}

.handling-description {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-primary);
}

.handling-explanation {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

/* Disabled handling option styling */
.handling-option-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.handling-option-disabled:hover .handling-option-card {
  border-color: var(--app-border-color);
  transform: none;
  box-shadow: none;
}

.handling-option-disabled:hover .handling-icon {
  transform: none;
}

.handling-option-disabled .handling-option-card {
  background: var(--app-background-light);
  border-color: var(--app-border-color);
}

.handling-option-disabled .handling-icon {
  color: var(--app-text-disabled);
}

.handling-option-disabled .handling-name {
  color: var(--app-text-disabled);
}

.handling-option-disabled .handling-description {
  color: var(--app-text-disabled);
}

/* Chevron icon styling */
.handling-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.chevron-icon {
  font-size: 1.2rem;
  color: var(--app-text-secondary);
  transition: all var(--app-transition-fast);
}

.handling-option-label:hover .chevron-icon {
  color: var(--app-primary-color);
  transform: translateX(2px);
}

.handling-option-disabled .chevron-icon {
  color: var(--app-text-disabled);
}

.handling-option-disabled:hover .chevron-icon {
  color: var(--app-text-disabled);
  transform: none;
}

/* Coming soon tag styling */
.coming-soon-tag {
  display: inline-block;
  background: var(--app-warning-color);
  color: var(--app-white);
  font-size: var(--app-font-size-xs);
  font-weight: var(--app-font-weight-medium);
  padding: 4px 8px;
  border-radius: var(--app-radius-sm);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Locker size selection styling */
.locker-size-section {
  margin-bottom: var(--app-spacing-lg);
}

.locker-size-options {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
}

.locker-size-option-label {
  display: block;
  cursor: pointer;
}

.locker-size-radio {
  display: none;
}

.locker-size-option-card {
  background: var(--app-white);
  border: 2px solid var(--app-border-color);
  border-radius: var(--app-radius-lg);
  padding: var(--app-spacing-md);
  transition: all var(--app-transition-fast);
  display: flex;
  align-items: center;
  gap: var(--app-spacing-md);
  position: relative;
}

.locker-size-option-label:hover .locker-size-option-card {
  border-color: var(--app-primary-color);
  transform: translateY(-2px);
  box-shadow: var(--app-shadow-md);
}

.locker-size-radio:checked + .locker-size-option-card {
  border-color: var(--app-primary-color);
  background: rgba(0, 128, 128, 0.05);
  box-shadow: var(--app-shadow-sm);
}

.locker-size-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--app-background-light);
  border-radius: var(--app-radius-md);
  flex-shrink: 0;
}

.locker-size-icon {
  font-size: 28px;
  color: var(--app-primary-color);
  transition: all var(--app-transition-fast);
}

.locker-size-option-label:hover .locker-size-icon {
  transform: scale(1.1);
}

.locker-size-radio:checked + .locker-size-option-card .locker-size-icon {
  transform: scale(1.05);
}

.locker-size-info {
  flex: 1;
  text-align: left;
}

.locker-size-name {
  font-size: var(--app-font-size-md);
  font-weight: var(--app-font-weight-semibold);
  color: var(--app-text-primary);
  margin-bottom: 4px;
}

.locker-size-dimensions {
  font-size: var(--app-font-size-sm);
  color: var(--app-primary-color);
  font-weight: var(--app-font-weight-medium);
  margin-bottom: 2px;
}

.locker-size-description {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
}

/* Boomerang Illustration Styles */
.boomerang-illustration {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ID Card Illustration Styles */
.id-card-illustration {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Verification Explanation Banner Styles */
.verification-explanation-banner {
  background: rgba(0, 128, 128, 0.05);
  border: 1px solid rgba(0, 128, 128, 0.15);
  border-radius: var(--app-radius-lg);
  padding: var(--app-spacing-lg);
  text-align: center;
}

.verification-explanation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--app-spacing-md);
  position: relative;
}

.verification-explanation-header h3 {
  margin: 0;
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  color: var(--app-text-primary);
  text-align: left;
  flex: 1;
}

.verification-explanation-icon {
  color: var(--app-primary-color);
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
  order: 2;
}

.verification-explanation-content {
  text-align: left;
  margin-bottom: var(--app-spacing-lg);
}

.verification-explanation-list {
  margin: 0;
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
  line-height: var(--app-line-height-relaxed);
  text-align: left;
  list-style: none;
  padding: 0;
}

.verification-explanation-list li {
  margin-bottom: var(--app-spacing-xs);
  position: relative;
  padding-left: var(--app-spacing-lg);
}

.verification-explanation-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--app-primary-color);
  font-weight: 500;
}

.verification-explanation-list li:last-child {
  margin-bottom: 0;
}

/* Photo Confirmation Page Styles */
.photo-confirmation-content {
  --padding-bottom: 100px; /* Extra padding to account for bottom navigation */
}

.photo-confirmation-container {
  padding-bottom: var(--app-spacing-xl);
}

/* Photo overlay styles for confirmation page */
.photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: var(--app-white);
  padding: var(--app-spacing-md);
  text-align: center;
}

.photo-overlay p {
  margin: 0;
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Camera container styles for photo confirmation */
.camera-container {
  margin-bottom: var(--app-spacing-lg);
}

.camera-container .photo-section {
  margin-bottom: var(--app-spacing-xl);
}

.camera-container .photo-section:last-child {
  margin-bottom: 0;
}

.photo-label {
  display: block;
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  color: var(--app-text-primary);
  margin: var(--app-spacing-lg) 0 0 0;
  text-align: left;
}

.camera-container .photo-preview {
  position: relative;
  margin-bottom: 0;
  border-radius: var(--app-radius-lg);
  overflow: hidden;
  box-shadow: var(--app-shadow-md);
}

.camera-container .preview-image {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  display: block;
}

/* Confirmation checkbox inside banner */
.photo-instructions-banner .confirmation-checkbox {
  margin-top: var(--app-spacing-lg);
  padding-top: var(--app-spacing-md);
  border-top: 1px solid rgba(0, 128, 128, 0.2);
  display: flex;
  align-items: center;
  gap: var(--app-spacing-sm);
}

/* Success icon styling */
.success-icon {
  color: var(--app-primary-color);
  font-size: 64px;
}

/* Your Deliveries Page - Bottom Navigation Padding */
.deliveries-content {
  --padding-bottom: 100px; /* Extra padding to account for bottom navigation */
}

/* Country Selector Styles */
.phone-input-container {
  display: flex;
  gap: var(--app-spacing-sm);
  align-items: center;
  margin-bottom: var(--app-spacing-md);
}

.country-selector {
  --padding-start: var(--app-spacing-sm);
  --padding-end: var(--app-spacing-sm);
  --padding-top: var(--app-spacing-sm);
  --padding-bottom: var(--app-spacing-sm);
  min-width: 100px;
  max-width: 120px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: var(--app-spacing-xs);
}

.country-selector .flag {
  font-size: 18px;
  line-height: 1;
}

.country-selector .country-code {
  font-size: var(--app-font-size-sm);
  font-weight: 500;
  color: var(--ion-color-primary);
}

.phone-input-item {
  flex: 1;
  --padding-start: 0;
  --padding-end: 0;
  --inner-padding-start: var(--app-spacing-sm);
  --inner-padding-end: var(--app-spacing-sm);
}

.phone-input-item ion-input {
  --padding-start: 0;
  --padding-end: 0;
}

/* Country Modal Styles */
.country-modal ion-item {
  --padding-start: var(--app-spacing-md);
  --padding-end: var(--app-spacing-md);
}

.country-modal .flag {
  font-size: 20px;
  margin-right: var(--app-spacing-sm);
}

.country-modal .country-code {
  font-size: var(--app-font-size-sm);
  color: var(--ion-color-medium);
  font-weight: 500;
}

/* Review Request Page Styles */
.page-header {
  margin-bottom: var(--app-spacing-lg);
  text-align: left;
}

.page-header h2 {
  font-size: var(--app-font-size-2xl);
  font-weight: 500;
  color: var(--app-text-primary);
  margin: 0 0 var(--app-spacing-sm) 0;
  line-height: 1.2;
}

.page-subtitle {
  font-size: var(--app-font-size-base);
  color: var(--app-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.message-section {
  margin: var(--app-spacing-lg) 0;
}

.message-item {
  --background: transparent;
  --border-radius: var(--app-radius-md);
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  margin: 0;
  border: none;
}

.message-item ion-label {
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  color: var(--app-text-primary);
  margin-bottom: var(--app-spacing-sm);
}

.message-textarea {
  --background: transparent;
  --color: var(--app-text-primary);
  --placeholder-color: var(--app-text-tertiary);
  font-size: var(--app-font-size-base);
  line-height: 1.5;
  border: none;
  resize: none;
}

.message-textarea:focus {
  --background: var(--app-bg-primary);
  border: 2px solid var(--app-primary-color);
  border-radius: var(--app-radius-sm);
}

.send-request-button {
  margin-top: var(--app-spacing-md);
}

/* ========================================
   DELIVERY DETAILS PAGE - NEW DESIGN
   ======================================== */

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  margin-bottom: var(--app-spacing-lg);
  padding: var(--app-spacing-sm) 0;
}

.share-button {
  background: none;
  border: none;
  padding: var(--app-spacing-sm);
  border-radius: 50%;
  background-color: var(--ion-color-light);
  color: var(--ion-color-medium);
  font-size: 20px;
  transition: all 0.2s ease;
}

.share-button:hover {
  background-color: var(--ion-color-medium);
  color: white;
}

/* Status Card */
.status-card {
  background: white;
  border-radius: 16px;
  padding: var(--app-spacing-lg);
  margin-bottom: var(--app-spacing-lg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: var(--app-spacing-md);
  border-left: 4px solid var(--ion-color-primary);
}

.status-card.pending {
  border-left-color: var(--ion-color-warning);
}

.status-card.in-progress {
  border-left-color: var(--ion-color-primary);
}

.status-card.completed {
  border-left-color: var(--ion-color-success);
}

.status-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--ion-color-primary-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.status-card.pending .status-icon {
  background-color: var(--ion-color-warning-tint);
}

.status-card.completed .status-icon {
  background-color: var(--ion-color-success-tint);
}

.status-content {
  flex: 1;
}

.status-title {
  margin: 0 0 var(--app-spacing-xs) 0;
  font-size: var(--app-font-size-lg);
  font-weight: 600;
  color: var(--ion-color-dark);
}

.status-description {
  margin: 0;
  font-size: var(--app-font-size-sm);
  color: var(--ion-color-medium);
  line-height: 1.4;
}

/* Info Cards */
.info-card {
  background: white;
  border-radius: 16px;
  padding: var(--app-spacing-lg);
  margin-bottom: var(--app-spacing-md);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.card-header {
  margin-bottom: var(--app-spacing-md);
}

.card-title {
  margin: 0;
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--ion-color-dark);
}

/* Route Information */
.route-info {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-sm);
}

.route-point {
  display: flex;
  align-items: flex-start;
  /* gap: var(--app-spacing-md); */
}

.route-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--ion-color-primary);
  margin-top: 6px;
  flex-shrink: 0;
}

.route-point.to .route-dot {
  background-color: var(--ion-color-success);
}

.route-line {
  width: 2px;
  height: 20px;
  background-color: var(--ion-color-light);
  margin-left: 5px;
  margin: 0 0 0 5px;
}

.route-details {
  flex: 1;
}

.city {
  margin: 0 0 var(--app-spacing-xs) 0;
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--ion-color-dark);
}

.address {
  margin: 0;
  font-size: var(--app-font-size-sm);
  color: var(--ion-color-medium);
  line-height: 1.4;
}

/* Package Information - Updated */
.package-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.package-details {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-md);
  flex: 3;
}

.package-icon {
  max-width: 48px;
  width: auto;
  height: auto;
}

.package-text {
  flex: 1;
}

.package-size {
  margin: 0 0 var(--app-spacing-xs) 0;
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--ion-color-dark);
}

.package-description {
  margin: 0;
  font-size: var(--app-font-size-sm);
  color: var(--ion-color-medium);
}

.price-badge {
  background-color: var(--ion-color-primary-tint);
  padding: var(--app-spacing-sm) var(--app-spacing-md);
  border-radius: 20px;
}

.price {
  font-size: var(--app-font-size-lg);
  font-weight: 500;
  color: var(--app-primary-color);
  margin: 0;
}

/* Contact Information Card */
.contact-card {
  background: linear-gradient(135deg, var(--ion-color-primary-tint) 0%, var(--ion-color-light) 100%);
}

.contact-header {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-md);
  margin-bottom: var(--app-spacing-md);
}

.avatar-container {
  position: relative;
  flex-shrink: 0;
}

.contact-avatar {
  width: 60px;
  height: 60px;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.verification-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background-color: var(--ion-color-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

.verification-badge ion-icon {
  color: white;
  font-size: 12px;
}

.contact-info {
  flex: 1;
}

.contact-name {
  margin: 0 0 var(--app-spacing-xs) 0;
  font-size: var(--app-font-size-md);
  font-weight: 600;
  color: var(--ion-color-dark);
}

.rating {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-xs);
}

.rating ion-icon {
  color: var(--ion-color-warning);
  font-size: 16px;
}

.rating-value {
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  color: var(--ion-color-dark);
}

.rating-count {
  font-size: var(--app-font-size-sm);
  color: var(--ion-color-medium);
}

.contact-attributes {
  display: flex;
  gap: var(--app-spacing-md);
  flex-wrap: wrap;
}

.attribute {
  display: flex;
  align-items: center;
  gap: var(--app-spacing-xs);
  font-size: var(--app-font-size-sm);
  color: var(--ion-color-medium);
}

.attribute ion-icon {
  font-size: 16px;
}

/* Action Buttons */
.action-buttons {
  margin-top: var(--app-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-md);
}

/* Override existing details styles for new design */
.details-content {
  --background: var(--ion-color-light);
  padding-bottom: 80px;
}

.details-container {
  padding: var(--app-spacing-md);
  max-width: 600px;
  margin: 0 auto;
}

/* Hide old section dividers */
/* .details-container .section-divider {
  display: none;
} */

/* QR Code Desktop Verification Styles */
.desktop-verification-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--app-spacing-lg) 0;
}

.qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.qr-container {
  background: white;
  /* border-radius: 12px; */
  padding: var(--app-spacing-xl);
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
  margin-bottom: var(--app-spacing-lg);
}

.qr-code {
  width: 200px;
  height: 200px;
  display: block;
  margin: 0 auto var(--app-spacing-md);
}

.qr-instructions {
  margin-top: var(--app-spacing-md);
}

.qr-instructions h3 {
  color: var(--ion-color-primary);
  margin-bottom: var(--app-spacing-sm);
  font-size: 1.2rem;
  font-weight: 600;
}

.qr-instructions p {
  color: var(--ion-color-medium);
  line-height: 1.5;
  margin: 0;
}

/* Privacy section styles */
.privacy-section {
  margin: var(--ion-margin, 16px) 0;
}

.privacy-checkbox-item {
  --background: transparent;
  --border-radius: 8px;
  --padding-start: 0;
  --padding-end: 0;
  --inner-padding-end: 0;
  --inner-padding-start: 0;
  align-items: flex-start;
}

.privacy-label {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ion-color-medium);
  margin-left: 8px;
  font-weight: normal;
}

.privacy-label p {
  margin: 0;
}

/* ================================================
   EMAIL FORM PAGE STYLES
   Consistent with landing page design
   ================================================ */

/* Email Form Section - Full page layout */
.email-form-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--app-spacing-2xl) var(--app-spacing-lg);
  background: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
}

.email-form-container {
  max-width: 600px;
  width: 100%;
  text-align: center;
}

/* Email Form Title */
.email-form-title {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 var(--app-spacing-lg) 0;
  color: var(--app-text-primary);
  line-height: 1.1;
}

/* Email Form Description */
.email-form-description {
  font-size: 18px;
  color: var(--app-text-secondary);
  margin: 0 0 var(--app-spacing-2xl) 0;
  line-height: 1.6;
}

/* Email Form Itself */
.email-form {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing-lg);
  width: 100%;
}

.email-form-group {
  text-align: left;
  width: 100%;
}

.email-form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--app-text-primary);
  margin-bottom: var(--app-spacing-sm);
}

/* Email Form Input */
.email-form-input {
  width: 100%;
  padding: var(--app-spacing-md) var(--app-spacing-lg);
  font-size: 16px;
  font-family: 'Hubot Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--app-text-primary);
  background: #FFFFFF;
  border: 3px solid #333333;
  border-radius: 0;
  box-shadow: 4px 4px 0 #666666;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.email-form-input:focus {
  outline: none;
  border-color: var(--app-primary-color);
  box-shadow: 6px 6px 0 #666666;
  transform: translateY(-2px) translateX(-2px);
}

.email-form-input::placeholder {
  color: var(--app-text-muted);
}

/* Submit Button - Matching landing page CTA style */
.email-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--app-primary-color);
  color: white;
  border: none;
  border-radius: 0;
  box-shadow: 4px 4px 0 #666666;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: var(--app-spacing-lg) var(--app-spacing-2xl);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Hubot Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  width: 100%;
  margin-top: var(--app-spacing-md);
}

.email-form-submit:not(:disabled):hover {
  transform: translateY(-4px) translateX(-4px);
  box-shadow: 10px 10px 0 #666666;
}

.email-form-submit:not(:disabled):active {
  transform: translateY(2px) translateX(2px);
  box-shadow: 3px 3px 0 #666666;
}

.email-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Message Display */
.email-form-message {
  padding: var(--app-spacing-md);
  border-radius: 0;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: var(--app-spacing-lg);
  box-shadow: 3px 3px 0 #666666;
  text-align: center;
}

.email-form-message.success {
  background: #d4edda;
  color: #155724;
  border: 3px solid #28a745;
}

.email-form-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 3px solid #dc3545;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .email-form-section {
    padding: var(--app-spacing-xl) var(--app-spacing-md);
  }

  .email-form-title {
    font-size: 36px;
    letter-spacing: 1px;
  }

  .email-form-description {
    font-size: 16px;
  }

  .email-form-input {
    box-shadow: 3px 3px 0 #666666;
  }

  .email-form-input:focus {
    box-shadow: 4px 4px 0 #666666;
  }

  .email-form-submit {
    font-size: 16px;
    padding: var(--app-spacing-md) var(--app-spacing-xl);
    box-shadow: 3px 3px 0 #666666;
  }

  .email-form-submit:not(:disabled):hover {
    transform: translateY(-3px) translateX(-3px);
    box-shadow: 6px 6px 0 #666666;
  }
}

@media (max-width: 480px) {
  .email-form-title {
    font-size: 28px;
  }

  .email-form-description {
    font-size: 14px;
  }

  .email-form-submit {
    font-size: 14px;
    letter-spacing: 1px;
  }
}

/* Email form page uses the standard inner-page navbar (body:not(.home) rules below) */

/* ============================================
   INNER PAGE NAVBAR (blog, articles, etc.)
   ============================================ */

/* Header container for inner pages */
body:not(.home) .site-header {
  display: block !important;
  background: #FFFFFF;
  border-bottom: 2px solid #E0E0E0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
}

body:not(.home) .header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  gap: 24px;
}

body:not(.home) .header-logo {
  flex-shrink: 0;
}

body:not(.home) .header-logo-img {
  max-height: 44px;
  width: auto;
  display: block;
}

body:not(.home) .header-logo a {
  display: block;
  line-height: 0;
}

/* Navigation menu */
body:not(.home) .main-navigation {
  display: flex;
  align-items: center;
}

body:not(.home) .nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body:not(.home) .nav-menu li {
  margin: 0;
}

body:not(.home) .nav-menu li a {
  display: block;
  padding: 8px 16px;
  font-family: 'Hubot Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
  border-radius: 4px;
}

body:not(.home) .nav-menu li a:hover,
body:not(.home) .nav-menu li.current-menu-item > a,
body:not(.home) .nav-menu li.current_page_item > a {
  color: #008080;
  background-color: rgba(0, 128, 128, 0.08);
}

/* Mobile menu toggle */
body:not(.home) .menu-toggle {
  display: none;
  background: none;
  border: 2px solid #333333;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
}

body:not(.home) .menu-toggle-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body:not(.home) .menu-toggle-icon span {
  display: block;
  width: 20px;
  height: 2px;
  background: #333333;
  transition: all 0.15s ease;
}

/* Mobile responsive navbar */
@media (max-width: 768px) {
  body:not(.home) .header-container {
    padding: 10px 16px;
  }
  
  body:not(.home) .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  body:not(.home) .main-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-bottom: 2px solid #E0E0E0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  body:not(.home) .main-navigation.toggled {
    max-height: 400px;
  }
  
  body:not(.home) .nav-menu {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
  }
  
  body:not(.home) .nav-menu li a {
    padding: 12px 24px;
    border-radius: 0;
  }
}

/* ============================================
   BLOG SECTION (homepage)
   ============================================ */

.blog-section {
  padding: 64px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.blog-header {
  text-align: left;
  margin-bottom: 48px;
}

.blog-header .section-label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 4px;
  color: #333333;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: 'Hubot Sans', sans-serif;
}

.blog-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  font-family: 'Hubot Sans', sans-serif;
  color: #333333;
}

.blog-title-line {
  display: block;
}

.blog-title-accent {
  color: #008080;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.blog-card {
  display: block;
  background: #FFFFFF;
  border: 2px solid #E0E0E0;
  border-radius: 4px;
  padding: 24px 16px;
  text-decoration: none;
  color: #333333;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.blog-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: #ff7f2a;
  transition: width 0.3s ease;
}

.blog-card:hover {
  border-color: #008080;
  box-shadow: 4px 4px 0 #666666;
  transform: translate(-2px, -2px);
}

.blog-card:hover::after {
  width: 100%;
}

.blog-card-date {
  font-size: 14px;
  font-weight: 500;
  color: #808080;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-family: 'Hubot Sans', sans-serif;
}

.blog-card-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 8px 0;
  color: #333333;
  font-family: 'Hubot Sans', sans-serif;
}

.blog-card-excerpt {
  font-size: 16px;
  line-height: 1.5;
  color: #666666;
  margin: 0 0 16px 0;
  font-family: 'Hubot Sans', sans-serif;
}

.blog-card-link {
  font-size: 16px;
  font-weight: 600;
  color: #008080;
  text-decoration: none;
  font-family: 'Hubot Sans', sans-serif;
}

.blog-card:hover .blog-card-link {
  color: #006666;
}

.blog-cta {
  text-align: left;
}

.blog-all-link {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  text-decoration: none;
  border-bottom: 3px solid #ff7f2a;
  padding-bottom: 4px;
  transition: color 0.15s ease;
  font-family: 'Hubot Sans', sans-serif;
}

.blog-all-link:hover {
  color: #008080;
}

.hero-blog-link {
  display: inline-block;
  margin-left: 24px;
  padding: 10px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  text-decoration: none;
  border: 2px solid #333333;
  border-radius: 0;
  transition: all 0.15s ease;
  font-family: 'Hubot Sans', sans-serif;
}

.hero-blog-link:hover {
  background: #333333;
  color: #FFFFFF;
}

/* ============================================
   BLOG LISTING PAGE
   ============================================ */

.blog-page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.blog-page-header {
  text-align: left;
  margin-bottom: 48px;
}

.blog-page-header .section-label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 4px;
  color: #333333;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: 'Hubot Sans', sans-serif;
}

.blog-page-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  font-family: 'Hubot Sans', sans-serif;
  color: #333333;
}

.blog-page-title .blog-title-line {
  display: block;
}

.blog-page-title .blog-title-accent {
  color: #008080;
}

.blog-page-wrapper .blog-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.blog-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Blog pagination */
.blog-pagination {
  text-align: left;
  margin-top: 48px;
}

.blog-pagination .page-numbers {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  text-decoration: none;
  border: 2px solid #E0E0E0;
  border-radius: 0;
  transition: all 0.15s ease;
  font-family: 'Hubot Sans', sans-serif;
}

.blog-pagination .page-numbers:hover {
  border-color: #008080;
  color: #008080;
  box-shadow: 2px 2px 0 #BDBDBD;
}

.blog-pagination .page-numbers.current {
  background: #008080;
  color: #FFFFFF;
  border-color: #008080;
}

.blog-pagination .page-numbers.dots {
  border: none;
  padding: 8px 4px;
}

/* ============================================
   SINGLE POST / ARTICLE PAGE
   ============================================ */

/* Hide sidebar on single posts */
.single-post .widget-area.sidebar,
.single-post .sidebar {
  display: none !important;
}

.single-post .site-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  width: 100%;
  box-sizing: border-box;
}

.single-post .content-area {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* Entry header */
.entry-header {
  text-align: left;
  margin-bottom: 32px;
}

.entry-header .category-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #008080;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-family: 'Hubot Sans', sans-serif;
}

.entry-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  color: #333333;
  margin: 0 0 16px 0;
  font-family: 'Hubot Sans', sans-serif;
  text-align: left;
}

/* Post meta */
.entry-meta,
.post-meta-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 16px;
  color: #666666;
  margin-bottom: 24px;
  text-align: left;
  font-family: 'Hubot Sans', sans-serif;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #333333;
}

.post-date {
  color: #666666;
}

.post-reading-time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666666;
}

.reading-time-icon {
  font-size: 16px;
}

/* Entry content - article body */
.entry-content {
  font-size: 18px;
  line-height: 1.75;
  color: #333333;
  text-align: left;
  font-family: 'Hubot Sans', sans-serif;
}

.entry-content p {
  margin: 0 0 16px;
}

.entry-content h2 {
  font-size: 26px;
  font-weight: 600;
  color: #333333;
  margin: 32px 0 16px;
  font-family: 'Hubot Sans', sans-serif;
  text-align: left;
}

.entry-content h3 {
  font-size: 22px;
  font-weight: 600;
  color: #333333;
  margin: 24px 0 8px;
  font-family: 'Hubot Sans', sans-serif;
  text-align: left;
}

.entry-content a {
  color: #008080;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.entry-content a:hover {
  color: #006666;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.entry-content li {
  margin-bottom: 4px;
  line-height: 1.75;
}

.entry-content ul li::marker {
  color: #008080;
}

.entry-content ol li::marker {
  color: #008080;
  font-weight: 600;
}

.entry-content blockquote {
  border-left: 4px solid #008080;
  padding: 8px 24px;
  margin: 24px 0;
  background: #FAFAFA;
  color: #666666;
  font-style: italic;
  font-size: 18px;
}

.entry-content blockquote p {
  margin: 0;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border: 2px solid #E0E0E0;
  margin: 24px 0;
}

.entry-content figure {
  margin: 24px 0;
}

.entry-content figcaption {
  font-size: 14px;
  color: #666666;
  text-align: left;
  margin-top: 4px;
  font-family: 'Hubot Sans', sans-serif;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 16px;
}

.entry-content th {
  background: #008080;
  color: #FFFFFF;
  font-weight: 600;
  padding: 8px 16px;
  text-align: left;
  border: 1px solid #006666;
  font-family: 'Hubot Sans', sans-serif;
}

.entry-content td {
  padding: 8px 16px;
  border: 1px solid #E0E0E0;
  text-align: left;
  font-family: 'Hubot Sans', sans-serif;
}

.entry-content tr:nth-child(even) td {
  background: #FAFAFA;
}

.entry-content code {
  background: #F5F5F5;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'Hubot Sans', monospace;
}

.entry-content pre {
  background: #333333;
  color: #F5F5F5;
  padding: 16px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 24px 0;
}

.entry-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.entry-content hr {
  border: none;
  border-top: 2px solid #E0E0E0;
  margin: 32px 0;
}

/* Entry footer */
.entry-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid #EEEEEE;
  font-size: 16px;
  color: #666666;
  text-align: left;
  font-family: 'Hubot Sans', sans-serif;
}

.entry-footer .post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.entry-footer .post-categories a {
  display: inline-block;
  padding: 4px 12px;
  background: #F5F5F5;
  color: #333333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  border: 1px solid #E0E0E0;
  transition: all 0.15s ease;
  font-family: 'Hubot Sans', sans-serif;
}

.entry-footer .post-categories a:hover {
  background: #008080;
  color: #FFFFFF;
  border-color: #008080;
}

/* Post meta bottom */
.post-meta-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 16px;
  color: #666666;
  margin-top: 16px;
  text-align: left;
  font-family: 'Hubot Sans', sans-serif;
}

/* Social sharing */
.post-social-sharing {
  margin: 32px 0;
  text-align: left;
}

.sharing-label {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  margin-right: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Hubot Sans', sans-serif;
}

.share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  background: #FFFFFF;
  border: 2px solid #E0E0E0;
  border-radius: 0;
  color: #666666;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.15s ease;
  font-family: 'Hubot Sans', sans-serif;
}

.share-link:hover {
  background: #008080;
  color: #FFFFFF;
  border-color: #008080;
  box-shadow: 2px 2px 0 #666666;
  transform: translate(-1px, -1px);
}

/* Post navigation */
.post-navigation {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid #EEEEEE;
}

.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
  flex: 1;
  min-width: 200px;
}

.post-navigation .nav-next {
  text-align: right;
}

.post-navigation a {
  display: block;
  padding: 16px;
  border: 2px solid #E0E0E0;
  text-decoration: none;
  color: #333333;
  transition: all 0.15s ease;
  border-radius: 0;
  font-family: 'Hubot Sans', sans-serif;
}

.post-navigation a:hover {
  border-color: #008080;
  box-shadow: 3px 3px 0 #BDBDBD;
  transform: translate(-1px, -1px);
}

.post-navigation .nav-subtitle {
  font-size: 14px;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  display: block;
  font-family: 'Hubot Sans', sans-serif;
}

.post-navigation .nav-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  font-family: 'Hubot Sans', sans-serif;
}

/* Related posts */
.related-posts {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid #EEEEEE;
}

.related-posts-title {
  font-size: 22px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 24px;
  font-family: 'Hubot Sans', sans-serif;
  text-align: left;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.related-post-item {
  display: block;
  padding: 16px;
  background: #FFFFFF;
  border: 2px solid #E0E0E0;
  text-decoration: none;
  color: #333333;
  transition: all 0.15s ease;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.related-post-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #ff7f2a;
  transition: width 0.3s ease;
}

.related-post-item:hover {
  border-color: #008080;
  box-shadow: 3px 3px 0 #BDBDBD;
  transform: translate(-1px, -1px);
}

.related-post-item:hover::after {
  width: 100%;
}

.related-post-meta {
  font-size: 14px;
  color: #808080;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  font-family: 'Hubot Sans', sans-serif;
}

.related-post-date {
  color: #666666;
}

.related-post-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #333333;
  margin: 0;
  font-family: 'Hubot Sans', sans-serif;
}

.related-post-content {
  margin-top: 4px;
}

/* Author info */
.author-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 24px;
  background: #FAFAFA;
  border-left: 4px solid #008080;
}

.author-name {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  font-family: 'Hubot Sans', sans-serif;
}

/* Back to blog link */
.back-to-blog {
  display: inline-block;
  margin-top: 32px;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  text-decoration: none;
  border-bottom: 3px solid #ff7f2a;
  padding-bottom: 2px;
  transition: color 0.15s ease;
  font-family: 'Hubot Sans', sans-serif;
}

.back-to-blog:hover {
  color: #008080;
}

/* ============================================
   NEWSLETTER SECTION
   ============================================ */

.newsletter-section {
  padding: 64px 24px;
  background: #008080;
  color: #FFFFFF;
}

.newsletter-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.newsletter-content {
  margin-bottom: 32px;
}

.newsletter-content .section-label {
  color: #00e6e6;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: 'Hubot Sans', sans-serif;
}

.newsletter-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.25;
  font-family: 'Hubot Sans', sans-serif;
}

.newsletter-subtitle {
  font-size: 18px;
  opacity: 0.9;
  max-width: 600px;
  margin: 0;
  line-height: 1.5;
  font-family: 'Hubot Sans', sans-serif;
}

.newsletter-form {
  max-width: 500px;
  margin: 0;
}

.newsletter-input-group {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.newsletter-input {
  flex: 1;
  padding: 16px 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.95);
  color: #333333;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: 'Hubot Sans', sans-serif;
}

.newsletter-input:focus {
  border-color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

.newsletter-btn {
  padding: 16px 32px;
  background: #ff7f2a;
  color: #FFFFFF;
  border: none;
  border-radius: 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: 'Hubot Sans', sans-serif;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.newsletter-btn:hover:not(:disabled) {
  background: #cc6522;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
}

.newsletter-btn:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.newsletter-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.newsletter-message {
  font-size: 16px;
  margin: 8px 0;
  min-height: 20px;
  font-weight: 500;
  font-family: 'Hubot Sans', sans-serif;
}

.newsletter-success {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 0;
  display: inline-block;
}

.newsletter-error {
  color: #fef2f2;
  background: rgba(255, 107, 107, 0.2);
  padding: 8px 16px;
  border-radius: 0;
  display: inline-block;
}

.newsletter-privacy {
  font-size: 13px;
  opacity: 0.7;
  margin-top: 8px;
  font-family: 'Hubot Sans', sans-serif;
}

.newsletter-altcha-wrapper {
  margin-top: -8px;
  margin-bottom: 8px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 900px) {
  .blog-grid,
  .blog-page-wrapper .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .single-post .site-main {
    padding: 32px 16px 48px;
  }
  .entry-title {
    font-size: 26px;
  }
  .entry-content {
    font-size: 16px;
  }
  .entry-content h2 {
    font-size: 22px;
  }
  .entry-content h3 {
    font-size: 20px;
  }
  .post-navigation .nav-links {
    flex-direction: column;
  }
  .post-navigation .nav-next {
    text-align: left;
  }
  .related-posts-grid {
    grid-template-columns: 1fr;
  }
  .blog-page-wrapper {
    padding: 32px 16px 48px;
  }
  .blog-page-title {
    font-size: 26px;
  }
  .blog-page-wrapper .blog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .blog-pagination .page-numbers {
    padding: 6px 10px;
    margin: 0 2px;
  }
}

@media (max-width: 640px) {
  .blog-section {
    padding: 48px 16px;
  }
  .blog-title {
    font-size: 26px;
  }
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hero-blog-link {
    margin-left: 0;
    margin-top: 8px;
    display: block;
    text-align: left;
  }
  .newsletter-title {
    font-size: 26px;
  }
  .newsletter-subtitle {
    font-size: 16px;
  }
  .newsletter-input-group {
    flex-direction: column;
  }
  .newsletter-btn {
    width: 100%;
  }
  .newsletter-altcha-wrapper {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .newsletter-input-group .altcha-row,
  .newsletter-input-group .newsletter-altcha-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .altcha-branding-text {
    white-space: normal !important;
    width: 100% !important;
  }
}


/* ============================================
   BLOG ARTICLE TWO-COLUMN LAYOUT
   PAQ-77: Related Posts sidebar + comment form fix
   ============================================ */

/* Override max-width for two-column layout */
.single-post .site-main {
  max-width: 1200px !important;
}

/* Two-column grid: main content left, sidebar right */
.article-layout-wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
  max-width: 100%;
  overflow: hidden;
}

/* Main content column */
.article-main-content {
  min-width: 0;
  overflow: hidden;
}

/* Sidebar - move to right (it's first in HTML order) */
.article-sidebar {
  order: 2;
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

/* Related posts in sidebar */
.article-sidebar .related-posts {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.article-sidebar .related-posts-title {
  font-size: 18px;
  margin-bottom: 16px;
  color: #333333;
}

.article-sidebar .related-posts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-sidebar .related-post-item {
  padding: 12px;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  background: #FAFAFA;
  transition: border-color 0.15s ease;
}

.article-sidebar .related-post-item:hover {
  border-color: #008080;
}

.article-sidebar .related-post-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.article-sidebar .related-post-title a {
  color: #333333;
  text-decoration: none;
}

.article-sidebar .related-post-title a:hover {
  color: #008080;
}

.article-sidebar .related-post-date {
  font-size: 12px;
  color: #999999;
  margin-top: 4px;
  display: block;
}

/* ============================================
   COMMENT FORM STYLING
   PAQ-77: Left-aligned, labels above inputs
   ============================================ */

.comments-area {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid #EEEEEE;
}

.comment-respond {
  margin-top: 32px;
}

.comment-reply-title {
  font-size: 22px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 20px;
  font-family: 'Hubot Sans', sans-serif;
  text-align: left;
}

.comment-form {
  text-align: left;
  max-width: 600px;
}

.comment-form p {
  margin-bottom: 16px;
  text-align: left;
}

.comment-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 6px;
  text-align: left;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%;
  max-width: 400px;
  padding: 10px 12px;
  border: 1px solid #D0D0D0;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  display: block;
  box-sizing: border-box;
}

.comment-form textarea {
  width: 100%;
  max-width: 600px;
  padding: 12px;
  border: 1px solid #D0D0D0;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  display: block;
  box-sizing: border-box;
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: #008080;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.1);
}

.comment-form .submit-button {
  background: #008080;
  color: #FFFFFF;
  border: none;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Hubot Sans', sans-serif;
  transition: background 0.15s ease;
}

.comment-form .submit-button:hover {
  background: #006666;
}

.comment-notes {
  font-size: 13px;
  color: #666666;
  margin-bottom: 20px;
}

.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.comment-form-cookies-consent input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
}

.comment-form-cookies-consent label {
  font-size: 13px;
  font-weight: 400;
  color: #666666;
  margin-bottom: 0;
}

/* ============================================
   RESPONSIVE - Stack columns on mobile
   ============================================ */

@media (max-width: 900px) {
  .article-layout-wrapper {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .article-sidebar {
    order: 0;
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .article-sidebar .related-posts {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 2px solid #EEEEEE;
  }

  .single-post .site-main {
    max-width: 760px !important;
  }
}

/* ============================================
   PAQ-77 MOBILE BLOG FIXES — 2026-07-30
   Fix: horizontal scroll, header width, nav visibility
   ============================================ */
html { overflow-x: hidden; }
#page.site { width: 100%; max-width: 100%; }
body:not(.home) .site-header { width: 100%; }
.single-post .content-area { padding: 0 !important; text-align: left !important; }
.single-post .entry-content { text-align: left; }
.single-post .entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (min-width: 769px) {
  body:not(.home) .main-navigation { display: flex !important; }
  body:not(.home) .nav-menu { display: flex !important; position: static !important; max-height: none !important; overflow: visible !important; }
}
@media (max-width: 768px) {
  body:not(.home) .menu-toggle { display: flex !important; visibility: visible !important; opacity: 1 !important; }
  body:not(.home) .main-navigation.nav-open { max-height: 400px !important; overflow: visible !important; }
  body:not(.home) .header-container { width: 100%; max-width: 100%; box-sizing: border-box; }
}


/* ============================================
   PAQ-38 MOBILE RESPONSIVENESS FIXES — 2026-07-31
   Fix: table overflow on pages, tap target sizes, form UX
   ============================================ */

/* 1. General table scroll for ALL pages (extends PAQ-77 fix which only covered .single-post) */
.entry-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* 2. Prensa page table styling */
.prensa-fact-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.prensa-fact-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #E0E0E0;
  font-size: 15px;
}
.prensa-fact-table td:first-child {
  font-weight: 600;
  white-space: nowrap;
  color: #333333;
}

/* 3. Menu toggle button — ensure 44px minimum tap target */
@media (max-width: 768px) {
  body:not(.home) .menu-toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
  }
  
  /* Nav menu links — ensure adequate tap target height */
  body:not(.home) .nav-menu li a {
    padding: 14px 24px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* 4. Form tap target improvements for mobile */
@media (max-width: 480px) {
  /* Ensure all form inputs have minimum 44px height */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS auto-zoom */
  }
  
  /* Radio/checkbox containers — ensure adequate tap target area */
  .checkbox-container {
    min-height: 44px;
    padding: 8px 0;
  }
  
  /* Radio button containers */
  .radio-container,
  .form-row:has(input[type="radio"]),
  .form-row:has(input[type="checkbox"]) {
    min-height: 44px;
  }
  
  /* Form labels — prevent text from being too small */
  .form-row p,
  .form-row label,
  .checkbox-container label,
  .checkbox-container ion-label {
    font-size: 15px;
    line-height: 1.4;
  }
  
  /* Form buttons — ensure adequate tap target */
  .form-card button,
  .form-card .btn,
  .form-card input[type="submit"] {
    min-height: 48px;
    font-size: 16px;
  }
}

/* 5. General mobile text wrapping — prevent long words from causing overflow */
@media (max-width: 480px) {
  .entry-content p,
  .entry-content li,
  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .prensa-section p,
  .prensa-section li {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* 6. Ensure all images are responsive on all pages */
.entry-content img,
.prensa-section img,
.blog-post img {
  max-width: 100%;
  height: auto;
}

/* 7. Prensa download box — ensure mobile-friendly layout */
@media (max-width: 480px) {
  .prensa-download-box {
    padding: 16px;
    overflow-x: auto;
  }
  
  .prensa-download-box table {
    font-size: 14px;
  }
  
  .prensa-download-box table td {
    padding: 6px 8px;
  }
}

/* 8. Blog listing page — ensure cards stack properly on mobile */
@media (max-width: 640px) {
  .blog-grid,
  .blog-page-wrapper .blog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 9. Comment form — ensure fields are full-width on mobile */
@media (max-width: 480px) {
  .comment-form input[type="text"],
  .comment-form input[type="email"],
  .comment-form input[type="url"],
  .comment-form textarea {
    width: 100%;
    max-width: 100%;
  }
}

/* 10. Home page shipping calculator — ensure form is usable on mobile */
@media (max-width: 480px) {
  .shipping-calculator input,
  .shipping-calculator select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
  
  .shipping-calculator .form-row {
    flex-direction: column;
    gap: 8px;
  }
}