:root{--safe-area-inset-top:env(safe-area-inset-top,0px);--safe-area-inset-bottom:env(safe-area-inset-bottom,0px);--safe-area-inset-left:env(safe-area-inset-left,0px);--safe-area-inset-right:env(safe-area-inset-right,0px);--touch-target-min:44px;--mobile-padding:16px;--mobile-gap:12px;--transition-snappy:200ms cubic-bezier(0.4,0,0.2,1);--transition-smooth:300ms cubic-bezier(0.4,0,0.2,1);--transition-bounce:400ms cubic-bezier(0.68,-0.55,0.265,1.55)}html{overscroll-behavior-y:none;-webkit-overflow-scrolling:touch}body{overscroll-behavior:contain;-webkit-tap-highlight-color:rgba(0,0,0,0.05)}*{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@supports (padding:max(0px)){body{padding-left:max(var(--mobile-padding),var(--safe-area-inset-left));padding-right:max(var(--mobile-padding),var(--safe-area-inset-right))}header,.hero-section,#controls{padding-top:max(1rem,var(--safe-area-inset-top))}footer{padding-bottom:max(1rem,var(--safe-area-inset-bottom))}}@media (max-width:767px){body{padding-left:0;padding-right:0}.container{padding-left:var(--mobile-padding);padding-right:var(--mobile-padding)}[data-provider]{padding:20px 16px !important;margin-bottom:1px;transition:background-color var(--transition-snappy)}[data-provider]:active{background-color:rgba(0,0,0,0.02)}[data-provider]>div:first-child{margin-bottom:16px !important}[data-provider] [class*="tier"],[data-provider] .text-\[10px\]{margin-top:8px !important;line-height:1.5 !important}[data-provider] .flex-col{gap:10px !important;margin-top:12px !important}[data-provider] .col-span-4{margin-bottom:14px !important}[data-provider]>.col-span-12:last-child{margin-top:16px !important;padding-top:12px !important;border-top:1px solid rgba(0,0,0,0.06)}html.dark [data-provider]>.col-span-12:last-child{border-top-color:rgba(255,255,255,0.08)}.hero-section{padding:24px var(--mobile-padding) !important}.hero-section h1{font-size:1.75rem !important;line-height:1.2 !important}.hero-section p{font-size:1rem !important}.info-tags{white-space:normal !important;word-break:break-word !important;overflow-wrap:break-word !important;max-width:100% !important;display:inline-block !important;width:auto !important;padding:0 8px !important}.info-tags span{display:inline !important;white-space:nowrap !important}@media (max-width:375px){.info-tags{font-size:10px !important;padding:0 4px !important}.info-tags span[style*="margin"]{margin:0 2px !important}}.bg-hero{padding-top:1rem !important;padding-bottom:1.5rem !important}.bg-hero>div{padding-left:20px !important;padding-right:20px !important}.bg-hero .rounded-3xl{padding:24px 20px !important;margin-top:0 !important}.bg-hero .grid>div:first-child{text-align:center;margin-bottom:32px}.bg-hero h1,.bg-hero p{text-align:center}.hero-layout{gap:16px !important}.show-rates-button-container{margin-bottom:0 !important}main.max-w-6xl{margin-top:16px !important}.popular-corridors{margin-top:-6px !important;margin-bottom:12px !important;padding-top:0 !important;position:relative;z-index:10}.popular-corridors{background:var(--card-bg,#ffffff);border-radius:24px;overflow:visible}.dark .popular-corridors{background:var(--card-bg-dark,#1e293b)}#best-overall.best-overall-wrapper{margin-top:0 !important;padding-top:0 !important;padding-bottom:20px !important}.corridor-grid{margin:0 auto;padding:0;width:100%}.amount-card__body{display:flex !important;align-items:center !important;justify-content:center !important;padding:16px 20px !important;position:relative !important}.amount-card__spacer{display:none !important}.amount-card__value{flex:1 !important;display:flex !important;justify-content:center !important;align-items:center !important}.amount-card__input,.amount-card--send .amount-card__input,.amount-card--receive .amount-card__input,input#amount,input#receive-amount{text-align:center !important;font-size:28px !important;font-weight:700 !important;line-height:1.2 !important;width:100% !important;padding:0 !important;margin:0 !important}.amount-card--receive .amount-card__input,input#receive-amount{color:#0078ff !important}.amount-card__badge{position:absolute !important;right:16px !important;top:50% !important;transform:translateY(-50%) !important;z-index:1 !important}.amount-card__currency-pill,button.amount-card__currency-pill{font-size:11px !important;font-weight:500 !important;padding:4px 10px !important;border-width:1px !important;opacity:0.9 !important}html.dark .amount-card--receive .amount-card__input,html.dark input#receive-amount{color:#60a5fa !important}header img[alt*="AyaSend"]{height:58px !important;width:auto !important;max-width:none !important}header{padding-bottom:0.5rem !important}footer{padding:24px var(--mobile-padding) !important}[role="dialog"]:not(.country-panel){margin:0;max-width:100vw;border-radius:0}}@media (min-width:768px){.bg-hero{padding-top:2rem !important;padding-bottom:2.5rem !important}.bg-hero .rounded-3xl{margin-top:0.5rem !important}header{padding-bottom:unset !important}}@media (min-width:768px) and (max-width:1023px){.container{max-width:720px;padding-left:32px;padding-right:32px}#rates [data-provider]{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}button,.send-now-btn{min-height:48px;font-size:16px}}@media (min-width:1024px){.container{max-width:1200px;margin-left:auto;margin-right:auto}button:hover,.send-now-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,185,129,0.3)}a:hover{opacity:0.8}[data-provider]:hover{background-color:rgba(0,0,0,0.02)}}@media (max-width:767px){.pull-to-refresh{position:fixed;top:-60px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:12px 24px;background:rgb(16,185,129);color:white;border-radius:999px;font-size:14px;font-weight:600;transition:top var(--transition-smooth);z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,0.1)}.pull-to-refresh.visible{top:calc(var(--safe-area-inset-top)+16px)}.pull-to-refresh svg{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}}.htmx-indicator{display:flex;align-items:center;justify-content:center}.htmx-request .htmx-indicator{display:flex !important}@media (max-width:767px){.dark{background:#0f172a}.dark #rates{background:rgba(30,41,59,0.95)}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}@media (max-width:767px){header{position:sticky;top:0;z-index:100;background:rgb(255,255,255)}.dark header{background:rgb(15,23,42)}}@media (max-width:767px){section{margin-bottom:24px}h1,h2,h3{margin-bottom:16px}p{margin-bottom:12px}main{padding-bottom:calc(32px+var(--safe-area-inset-bottom))}}@media (max-width:767px){#rates,.card{box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.06)}.dark #rates,.dark .card{box-shadow:0 1px 3px rgba(0,0,0,0.3),0 1px 2px rgba(0,0,0,0.2)}}@media (max-width:767px) and (orientation:landscape){.hero-section{padding:16px var(--mobile-padding) !important}.hero-section h1{font-size:1.5rem !important}}@media (max-width:767px){@keyframes haptic-pulse{0%{transform:scale(1)}50%{transform:scale(0.98)}100%{transform:scale(1)}}.haptic-feedback{animation:haptic-pulse 100ms ease-out}}
/* ============================================================
   AyaSend Mobile Premium Additions v7.1
   ============================================================ */

/* ── Page entrance animation ── */
@keyframes aya-page-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes aya-fade-in{from{opacity:0}to{opacity:1}}
@keyframes aya-slide-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes aya-scale-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
@keyframes aya-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes aya-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

main,.page-content,.hero-section{animation:aya-page-enter .28s cubic-bezier(.4,0,.2,1) both}
@media(prefers-reduced-motion:reduce){main,.page-content,.hero-section{animation:none}}

/* ── Skeleton shimmer loaders ── */
.skeleton,.skeleton-line,.skeleton-card,.skeleton-btn,.skeleton-text{
  background:linear-gradient(90deg,#f1f5f9 0%,#e2e8f0 40%,#f1f5f9 80%);
  background-size:400px 100%;
  animation:aya-shimmer 1.6s ease-in-out infinite;
  border-radius:8px;
  color:transparent!important;
  user-select:none;
  pointer-events:none;
}
.dark .skeleton,.dark .skeleton-line,.dark .skeleton-card,.dark .skeleton-btn,.dark .skeleton-text{
  background:linear-gradient(90deg,#1e293b 0%,#334155 40%,#1e293b 80%);
  background-size:400px 100%;
}
.skeleton-text{height:1em;border-radius:4px}
.skeleton-title{height:1.5em;border-radius:4px;background:inherit;animation:inherit;background-size:inherit}
.skeleton-card{height:80px;border-radius:16px}
.skeleton-btn{height:48px;border-radius:12px}
.skeleton-avatar{border-radius:50%}

/* ── Scroll-margin for keyboard-covered inputs ── */
input:focus,textarea:focus,select:focus{scroll-margin-bottom:340px}

/* ── Offline indicator bar ── */
.offline-bar{
  position:fixed;top:0;left:0;right:0;
  background:#dc2626;color:#fff;text-align:center;
  font-size:13px;font-weight:500;letter-spacing:.01em;
  padding:calc(env(safe-area-inset-top,0px) + 6px) 16px 8px;
  z-index:9999;transform:translateY(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.offline-bar.visible{transform:translateY(0)}

/* ── SW update toast ── */
.sw-update-toast{
  position:fixed;
  bottom:calc(5.5rem + env(safe-area-inset-bottom,0px) + 10px);
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#1e293b;color:#f8fafc;
  border-radius:14px;padding:12px 18px;
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:500;
  box-shadow:0 8px 32px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.15);
  z-index:9995;opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.32,.72,0,1);
  white-space:nowrap;max-width:calc(100vw - 32px);
}
.sw-update-toast.visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
@media(min-width:768px){.sw-update-toast{bottom:20px}}
.sw-update-toast__btn{
  background:#3b82f6;color:#fff;border:none;
  border-radius:8px;padding:5px 12px;
  font-size:12px;font-weight:600;cursor:pointer;
  min-height:30px;white-space:nowrap;
  transition:background .15s ease;
}
.sw-update-toast__btn:hover{background:#2563eb}

/* ── Pull-to-refresh indicator ── */
.pull-to-refresh{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 64px);
  left:50%;
  transform:translateX(-50%) translateY(-120%);
  background:#fff;border-radius:24px;
  padding:8px 20px;
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:#1e293b;
  box-shadow:0 4px 20px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.08);
  transition:transform .25s cubic-bezier(.32,.72,0,1);
  z-index:9990;pointer-events:none;
}
.dark .pull-to-refresh{background:#1e293b;color:#f1f5f9;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.pull-to-refresh.visible{transform:translateX(-50%) translateY(0)}
.pull-to-refresh svg{animation:aya-spin .8s linear infinite;flex-shrink:0}

/* ── Focus ring (keyboard nav) ── */
:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}
:focus:not(:focus-visible){outline:none}

/* ── Prevent layout shift on images ── */
img[width][height]{aspect-ratio:attr(width)/attr(height)}
img:not([src]),img[src=""]{background:#f1f5f9}
.dark img:not([src]),.dark img[src=""]{background:#1e293b}

/* ── Smooth scrollbars hidden on mobile ── */
@media(max-width:767px){::-webkit-scrollbar{width:0;height:0;background:transparent}}

/* ── Text selection on interactive elements ── */
button,[role="button"],.bottom-nav-item{-webkit-user-select:none;user-select:none}

/* ── Number inputs: no spinners ── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield}

/* ── Bottom sheet ── */
.bottom-sheet{
  position:fixed;bottom:0;left:0;right:0;
  background:#fff;border-radius:24px 24px 0 0;
  padding-bottom:env(safe-area-inset-bottom,20px);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
  will-change:transform;z-index:600;
  max-height:90dvh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.dark .bottom-sheet{background:#0f172a}
.bottom-sheet.open{transform:translateY(0)}
.bottom-sheet-handle{
  width:40px;height:4px;background:#cbd5e1;
  border-radius:2px;margin:12px auto 4px;flex-shrink:0;
}
.dark .bottom-sheet-handle{background:#475569}

/* ── Viewport height fix (100svh) ── */
.min-h-svh{min-height:100svh}
.h-svh{height:100svh}
@supports not (height:100svh){
  .min-h-svh{min-height:-webkit-fill-available}
  .h-svh{height:-webkit-fill-available}
}

/* ── HTMX transitions ── */
.htmx-swapping{opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease}
.htmx-settling{opacity:1;transform:translateY(0);transition:opacity .2s ease,transform .2s ease}