/* Custom styles for the pre-onboarding app */

/* Poppins font family */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Set Poppins as the default font and color for the entire application */
html, body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--color-body-text);
}

#blazor-error-ui {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

/* Custom animations and utilities */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

/* Color variables */
:root {
  /* Blues */
  --color-main-blue: rgb(79, 124, 255);
  --color-light-blue: rgba(79, 124, 255, 0.1);
  --color-sky-blue-bg: rgb(240, 249, 255);
  
  /* Greens */
  --color-progress-green: rgb(52, 211, 153);
  --color-success-green: rgb(22, 163, 74);
  --color-light-green: rgb(240, 253, 244);
  --color-text-dark-green: rgb(22, 101, 52);
  --color-progress-bar: #6FC080;
  
  /* Greys */
  --color-dark-grey: rgb(31, 41, 55);
  --color-medium-grey: rgb(107, 114, 128);
  --color-light-grey: rgb(244, 244, 249);
  
  /* Oranges */
  --color-orange: rgb(234, 88, 12);
  --color-light-orange: rgb(254, 215, 170);
  --color-orange-text: rgb(180, 83, 9);
  
  /* Reds */
  --color-red: rgb(239, 68, 68);
  --color-light-red: rgba(239, 68, 68, 0.2);
  
  /* Text Colors */
  --color-title-text: #082240;
  --color-body-text: #657888;
}

/* Simple camera styles - ensuring proper aspect ratio */
.camera-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Simple camera styling - basic vertical view */
.camera-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: black;
}

/* Camera container - full screen */
.camera-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom background, text and border classes */
.bg-app-sky-blue {
  background-color: rgba(240, 249, 255);
}

.border-app-light-blue {
  border: 1px solid #BAE6FE;
}

.text-app-title {
  color: var(--color-title-text);
}

.text-app-body {
  color: var(--color-body-text);
}

.progress-bar-app {
  background-color: var(--color-progress-bar);
}

/* For captured image preview */
.camera-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Color utility classes */
.bg-main-blue {
  background-color: var(--color-main-blue);
}

.bg-light-blue {
  background-color: var(--color-light-blue);
}

.bg-sky-blue-bg {
  background-color: var(--color-sky-blue-bg);
}

.bg-light-green {
  background-color: var(--color-light-green);
}

.bg-light-grey {
  background-color: var(--color-light-grey);
}

.text-main-blue {
  color: var(--color-main-blue);
}

.text-progress-green {
  color: var(--color-progress-green);
}

.border-main-blue {
  border-color: var(--color-main-blue);
}

.border-color-main-blue {
  border-color: var(--color-main-blue);
}

.border-progress-green {
  border-color: var(--color-progress-green);
}

.border-success-green {
  border-color: var(--color-success-green);
}

/* Next button styling */
.btn-next {
  background-color: var(--color-main-blue);
  border-color: var(--color-main-blue);
  color: white;
}

.btn-next:hover {
  background-color: rgba(79, 124, 255, 0.9);
  border-color: var(--color-main-blue);
}

.btn-next:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Safari specific fix for disabled button */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .btn-next:disabled {
      opacity: 0.6 !important;
      cursor: not-allowed !important;
      pointer-events: none !important;
      background-color: var(--color-medium-grey) !important;
    }
  }
}

/* Focus ring styling */
.focus-ring-main {
  --tw-ring-color: var(--color-main-blue);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--color-main-blue);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* Card selection styling */
.card-option.selected {
  background-color: rgba(79, 124, 255, 0.1) !important;
  border-color: rgb(79, 124, 255) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.5) !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: relative;
}

.card-option.selected .check-icon {
  color: white;
}

/* Safari-specific fixes using media query detection */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    /* Fix Safari rendering issues without changing colors */
    .card-option {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      touch-action: manipulation;
      -webkit-user-select: none;
      -webkit-appearance: none;
    }
    
    .card-option.selected {
      background-color: rgba(79, 124, 255, 0.1) !important;
      border-color: rgb(79, 124, 255) !important;
      border-width: 2px !important;
      -webkit-box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.5) !important;
      box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.5) !important;
    }
    
    /* Fix Safari's button rendering - targeting both button styles */
    button[class*="bg-gray-900"],
    button.btn-next {
      -webkit-appearance: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    
    /* Make button feedback feel more responsive in Safari */
    button[class*="bg-gray-900"]:active,
    button.btn-next:active {
      opacity: 0.9;
    }
    
    /* Ensure disabled state is respected */
    .safari-fix-disabled {
      pointer-events: none !important;
    }
  }
}

/* Mobile browser fixes (Chrome, Safari, Firefox) */
@media screen and (max-width: 768px) {
  /* Target all mobile browsers */
  .card-option {
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  /* Force hardware acceleration for smoother transitions */
  .card-option, .card-option.selected {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  /* Target Chrome on Android and iOS */
  @supports (-webkit-appearance:none) {
    /* Ensure styles are applied more strongly */
    .card-option.selected {
      background-color: rgba(79, 124, 255, 0.1) !important;
      border: 2px solid rgb(79, 124, 255) !important;
      -webkit-box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.5) !important;
      box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.5) !important;
      position: relative;
    }
    
    /* Enhance touch feedback */
    .card-option:active {
      opacity: 0.8;
      transform: scale(0.98);
      -webkit-transform: scale(0.98);
    }
    
    button.btn-next {
      background-color: rgb(79, 124, 255) !important;
      border-color: rgb(79, 124, 255) !important;
      color: white !important;
      -webkit-appearance: none;
    }
    
    .bg-main-blue {
      background-color: rgb(79, 124, 255) !important;
    }
    
    .border-color-main-blue {
      border-color: rgb(79, 124, 255) !important;
    }
    
    /* Override hover effects on touch devices */
    .card-option:hover {
      border-color: rgb(209, 213, 219) !important; /* gray-200 equivalent */
    }
    
    .card-option.selected:hover {
      border-color: rgb(79, 124, 255) !important;
    }
  }
}

/* Universal hardcoded fallbacks for all browsers */
.card-option.selected, 
div.card-option.selected {
  background-color: rgba(79, 124, 255, 0.1) !important;
  border-color: rgb(79, 124, 255) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.5) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Force CPU/GPU rendering to fix potential glitches */
.card-option {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: border-color, background-color;
}

.bg-main-blue {
  background-color: rgb(79, 124, 255) !important;
}

.border-color-main-blue,
.border-main-blue {
  border-color: rgb(79, 124, 255) !important;
}

.btn-next {
  background-color: rgb(79, 124, 255) !important;
  border-color: rgb(79, 124, 255) !important;
  color: white !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Element-specific selectors to increase specificity */
[class*="card-option"].selected,
div[class*="card-option"].selected {
  background-color: rgba(79, 124, 255, 0.1) !important;
  border-color: rgb(79, 124, 255) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.5) !important;
}

/* Fix mobile touch events */
@media (hover: none) {
  .card-option {
    touch-action: manipulation;
  }
  
  .card-option:active {
    opacity: 0.9;
  }
}