/* Custom additions on top of Tailwind */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background-image: radial-gradient(at 0% 0%, rgba(255,87,34,0.04) 0px, transparent 50%), radial-gradient(at 100% 0%, rgba(255,87,34,0.06) 0px, transparent 50%); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.gradient-text { background: linear-gradient(120deg, #FF5722 0%, #FF7F47 60%, #FFA375 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.glass { background: rgba(255,255,255,0.7); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }

.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}
@keyframes shimmer { from { background-position: -1000px 0 } to { background-position: 1000px 0 } }

/* Brand ring on focus */
.focus-ring:focus-visible { outline: 2px solid #FF5722; outline-offset: 2px; }

/* Hide on tiny screens */
@media (max-width: 360px) { .text-xxs { font-size: 10px; } }

/* Country flag base */
.flag { display: inline-flex; width: 24px; height: 18px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }

/* Toggle pill (Form Factor) */
.pill-toggle { position: relative; display: inline-flex; background: #F1F5F9; border-radius: 999px; padding: 4px; }
.pill-toggle button { position: relative; z-index: 2; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: #475569; transition: color .2s; }
.pill-toggle button.is-active { color: white; }
.pill-toggle .pill-indicator { position: absolute; top: 4px; bottom: 4px; border-radius: 999px; background: linear-gradient(135deg, #FF5722, #FF7F47); transition: all .25s cubic-bezier(.4,1.4,.6,1); z-index: 1; }

/* Step indicator dot */
.step-dot { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.step-dot.is-active { background: #FF5722; color: white; }
.step-dot.is-done { background: #10B981; color: white; }
.step-dot.is-pending { background: #E2E8F0; color: #64748B; }

/* Pulse check */
.check-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 999px; border: 2px solid #FF5722; animation: ping 1.5s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .7 } 80%, 100% { transform: scale(1.6); opacity: 0 } }

/* Mock QR canvas sizing */
.qr-tile { width: 220px; height: 220px; background: white; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; padding: 16px; }

/* Country card hover lift */
.country-card { transition: transform .2s ease, box-shadow .2s ease; }
.country-card:hover { transform: translateY(-2px); box-shadow: 0 12px 36px -12px rgba(255,87,34,.18); }

/* Bottom sheet */
.sheet { transform: translateY(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); }
.sheet.open { transform: translateY(0); }

/* Modal backdrop */
.backdrop { background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }