/* From payment-en.html */

    /* 3D Card Animations */
    .card-container {
      perspective: 1000px;
    }
    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transform-style: preserve-3d;
    }
    .card-inner.is-flipped {
      transform: rotateY(180deg);
    }
    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border-radius: 1.5rem;
    }
    .card-back {
      transform: rotateY(180deg);
    }
    /* Glassmorphism shine effect */
    .glass-shine::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
      transform: rotate(30deg);
      transition: all 0.5s ease-in-out;
      pointer-events: none;
      z-index: 10;
    }
    .card-container:hover .glass-shine::after {
      transform: rotate(30deg) translate(50%, 50%);
    }
    
    /* Input Animations */
    .input-field:focus-within label {
      color: #3b82f6;
      transform: translateY(-2px);
    }
  

/* From payment.html */

    /* 3D Card Animations */
    .card-container {
      perspective: 1000px;
    }
    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transform-style: preserve-3d;
    }
    .card-inner.is-flipped {
      transform: rotateY(180deg);
    }
    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border-radius: 1.5rem;
    }
    .card-back {
      transform: rotateY(180deg);
    }
    /* Glassmorphism shine effect */
    .glass-shine::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%);
      transform: rotate(30deg);
      transition: all 0.5s ease-in-out;
      pointer-events: none;
      z-index: 10;
    }
    .card-container:hover .glass-shine::after {
      transform: rotate(30deg) translate(50%, 50%);
    }
    
    /* Input Animations */
    .input-field:focus-within label {
      color: #3b82f6;
      transform: translateY(-2px);
    }
  

/* Brand Colors for Register Page */
.text-brand-600 { color: #1a73f5; }
.text-brand-700 { color: #155ce1; }
.bg-brand-50 { background-color: #eef7ff; }
.bg-brand-100 { background-color: #d9edff; }
.bg-brand-400 { background-color: #53b1ff; }
.bg-brand-600 { background-color: #1a73f5; }
.bg-brand-200\/20 { background-color: rgb(188 224 255 / 0.2); }
.border-brand-500 { border-color: #2b91ff; }
.focus\:border-brand-500:focus { border-color: #2b91ff; }
.focus\:ring-brand-500:focus { --tw-ring-color: #2b91ff; box-shadow: 0 0 0 2px var(--tw-ring-color); }
.shadow-brand-900\/10 { box-shadow: 0 20px 25px -5px rgb(25 64 143 / 0.1), 0 8px 10px -6px rgb(25 64 143 / 0.1); }
.shadow-brand-900\/15 { box-shadow: 0 20px 25px -5px rgb(25 64 143 / 0.15), 0 8px 10px -6px rgb(25 64 143 / 0.15); }
.shadow-brand-500\/30 { box-shadow: 0 20px 25px -5px rgb(43 145 255 / 0.3), 0 8px 10px -6px rgb(43 145 255 / 0.3); }
.from-brand-600 { --tw-gradient-from: #1a73f5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(26 115 245 / 0)); }
.via-brand-500 { --tw-gradient-stops: var(--tw-gradient-from), #2b91ff, var(--tw-gradient-to, rgb(43 145 255 / 0)); }
.hover\:shadow-brand-500\/30:hover { box-shadow: 0 20px 25px -5px rgb(43 145 255 / 0.3), 0 8px 10px -6px rgb(43 145 255 / 0.3); }
/* Cyan Colors for Register Page */
.to-cyan-400 { --tw-gradient-to: #22d3ee; }
.bg-cyan-400 { background-color: #22d3ee; }
.to-cyan-500 { --tw-gradient-to: #06b6d4; }
/* Tailwind responsive utilities for Register page layout */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:gap-20 {
    gap: 5rem;
  }
  .lg\:block {
    display: block !important;
  }
  .lg\:mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
}
.max-w-lg { max-width: 32rem; }
.gap-12 { gap: 3rem; }

:root { --brg: oklch(34% .07 155); --brg-deep: oklch(24% .06 155); }
.from-brg { --tw-gradient-from: var(--brg) var(--tw-gradient-from-position); --tw-gradient-to: color-mix(in oklab, var(--brg) 0%, transparent) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-brg-deep { --tw-gradient-to: var(--brg-deep) var(--tw-gradient-to-position); }
.shadow-brg\/40 { --tw-shadow-color: color-mix(in oklab, var(--brg) 40%, transparent); }
.hover\:shadow-brg\/60:hover { --tw-shadow-color: color-mix(in oklab, var(--brg) 60%, transparent); }