/* Add this to your index.css or a new styles file */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .keypad-button {
    @apply w-[calc(12vh)] h-[calc(12vh)] min-w-[80px] min-h-[80px] max-w-[120px] max-h-[120px] 
           rounded-full bg-white flex items-center justify-center;
  }

  .code-circle {
    @apply w-[calc(8vh)] h-[calc(8vh)] min-w-[60px] min-h-[60px] max-w-[80px] max-h-[80px]
           rounded-full border-2 border-white flex items-center justify-center;
  }

  .action-button {
    @apply bg-transparent border-2 border-white text-white py-4 rounded-xl text-xl 
           w-[calc(30vh)] min-w-[240px] max-w-[320px];
  }

  .icon-container {
    @apply w-[calc(10vh)] h-[calc(10vh)] min-w-[80px] min-h-[80px] max-w-[100px] max-h-[100px];
  }

  .section-padding {
    @apply p-[calc(4vh)] min-p-4 max-p-8;
  }

  .content-container {
    @apply min-h-[600px] max-h-[1200px] min-w-[800px] max-w-[1920px] mx-auto;
  }

  @layer utilities {
    .responsive-container {
      @apply fixed inset-0 flex flex-col overflow-hidden min-w-[800px];
    }
  
    .responsive-header {
      @apply h-[8vh] min-h-[64px] max-h-[80px] w-full flex items-center justify-between px-[min(4vw,24px)] flex-shrink-0;
    }
  
    .responsive-button {
      @apply w-[min(12vh,96px)] h-[min(12vh,96px)] min-w-[60px] min-h-[60px] rounded-full;
    }
  
    .responsive-icon {
      @apply w-[min(10vh,80px)] h-[min(10vh,80px)] min-w-[40px] min-h-[40px];
    }
  
    .responsive-text-large {
      @apply text-[min(4vh,2rem)] font-light;
    }
  
    .responsive-text-medium {
      @apply text-[min(2.5vh,1.25rem)];
    }
  
    .responsive-text-small {
      @apply text-[min(2.2vh,1.125rem)];
    }
  
    .responsive-grid {
      @apply gap-x-[min(12vh,96px)] gap-y-[min(8vh,64px)] p-[min(4vh,32px)];
    }
  }
  
}