:root{--premium-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--premium-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--premium-shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}@media (max-width:767px){header{backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);background:rgba(255,255,255,0.95) !important;border-bottom:1px solid rgba(0,0,0,0.05);box-shadow:0 1px 3px rgba(0,0,0,0.04)}.dark header{background:rgba(15,23,42,0.95) !important;border-bottom:1px solid rgba(255,255,255,0.05)}.hero-section{background:linear-gradient(135deg,rgba(6,182,212,0.03) 0%,rgba(14,165,233,0.03) 100%);border-bottom:1px solid rgba(6,182,212,0.1)}#rates [data-provider]{position:relative;background:white;border:1px solid rgba(0,0,0,0.06);border-radius:16px !important;margin-bottom:10px !important;box-shadow:0 2px 8px rgba(0,0,0,0.04);transform-origin:center;will-change:transform}.dark #rates [data-provider]{background:rgb(30,41,59);border:1px solid rgba(255,255,255,0.05);box-shadow:0 2px 8px rgba(0,0,0,0.2)}#rates [data-provider]:active{transform:scale(0.98);transition:transform 150ms cubic-bezier(0.4,0,0.2,1)}#rates [data-provider] img{filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1))}.send-now-btn{border-radius:14px !important;font-weight:700 !important;letter-spacing:0.02em;text-transform:none;position:relative;overflow:hidden}.send-now-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.3);transform:translate(-50%,-50%);transition:width 600ms ease-out,height 600ms ease-out}.send-now-btn:active::before{width:300px;height:300px}.you-receive-value,.rate-value,[data-animate-amount],[data-animate-rate]{font-feature-settings:'tnum' 1,'lnum' 1;font-variant-numeric:tabular-nums;letter-spacing:-0.02em}.stat-badge,.stats-row span{background:linear-gradient(135deg,rgba(6,182,212,0.08) 0%,rgba(14,165,233,0.08) 100%);border:1px solid rgba(6,182,212,0.15);border-radius:12px;padding:8px 14px;font-weight:600;font-size:13px;color:#0891b2}.dark .stat-badge,.dark .stats-row span{background:linear-gradient(135deg,rgba(6,182,212,0.12) 0%,rgba(14,165,233,0.12) 100%);color:#22d3ee}.corridor-badge{border-radius:12px !important;box-shadow:0 2px 6px rgba(0,0,0,0.06);border-width:1.5px !important}.corridor-badge:active{transform:scale(0.96)}.scroll-to-top{box-shadow:0 4px 12px rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.skeleton-rate-card{animation:skeleton-shimmer 1.5s ease-in-out infinite}@keyframes skeleton-shimmer{0%{opacity:0.6}50%{opacity:1}100%{opacity:0.6}}footer{border-top:1px solid rgba(0,0,0,0.05);background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.01) 100%)}.dark footer{border-top:1px solid rgba(255,255,255,0.05);background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,0.01) 100%)}.quick-amount-btn{background:white;border:1.5px solid rgba(0,0,0,0.1);border-radius:10px;padding:10px 16px;font-weight:600;font-size:14px;color:#64748b;transition:all 200ms cubic-bezier(0.4,0,0.2,1)}.quick-amount-btn:active{transform:scale(0.95);background:linear-gradient(135deg,#06B6D4 0%,#0EA5E9 100%);color:white;border-color:transparent}.dark .quick-amount-btn{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);color:#cbd5e1}}@media (min-width:1024px){.container{max-width:1280px;padding-left:48px;padding-right:48px}.desktop-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}#controls{position:relative;box-shadow:var(--premium-shadow-xl);border:1px solid rgba(0,0,0,0.06);transition:all 300ms cubic-bezier(0.4,0,0.2,1)}#controls:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,0.15);transform:translateY(-2px)}.dark #controls{border:1px solid rgba(255,255,255,0.08)}#rates{display:grid;gap:12px}#rates [data-provider]{background:white;border:1px solid rgba(0,0,0,0.06);border-radius:16px;padding:20px !important;transition:all 250ms cubic-bezier(0.4,0,0.2,1);cursor:pointer;position:relative;overflow:hidden}#rates [data-provider]::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#06B6D4 0%,#0EA5E9 100%);transform:scaleX(0);transform-origin:left;transition:transform 300ms cubic-bezier(0.4,0,0.2,1)}#rates [data-provider]:hover{border-color:rgba(6,182,212,0.3);box-shadow:0 8px 24px rgba(6,182,212,0.12),0 4px 12px rgba(0,0,0,0.05);transform:translateY(-4px) scale(1.01)}#rates [data-provider]:hover::before{transform:scaleX(1)}.dark #rates [data-provider]{background:rgb(30,41,59);border:1px solid rgba(255,255,255,0.08)}.dark #rates [data-provider]:hover{border-color:rgba(6,182,212,0.4);box-shadow:0 8px 24px rgba(6,182,212,0.2)}#rates [data-provider] img{height:32px;width:auto;filter:grayscale(0.2);transition:all 300ms cubic-bezier(0.4,0,0.2,1)}#rates [data-provider]:hover img{filter:grayscale(0);transform:scale(1.08)}.send-now-btn{position:relative;overflow:hidden;transition:all 300ms cubic-bezier(0.4,0,0.2,1)}.send-now-btn::after{content:'→';position:absolute;right:20px;opacity:0;transform:translateX(-10px);transition:all 300ms cubic-bezier(0.4,0,0.2,1)}.send-now-btn:hover{padding-right:40px !important}.send-now-btn:hover::after{opacity:1;transform:translateX(0)}.stats-row{display:flex;gap:24px;flex-wrap:wrap;margin-top:32px}.stats-row span{background:white;border:1px solid rgba(6,182,212,0.2);border-radius:12px;padding:12px 20px;font-weight:600;font-size:14px;color:#0891b2;box-shadow:0 2px 8px rgba(6,182,212,0.08);transition:all 250ms cubic-bezier(0.4,0,0.2,1)}.stats-row span:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(6,182,212,0.15)}.dark .stats-row span{background:rgba(6,182,212,0.08);border-color:rgba(6,182,212,0.25);color:#22d3ee}input[type="text"],input[type="number"],select{transition:all 250ms cubic-bezier(0.4,0,0.2,1)}input[type="text"]:hover,input[type="number"]:hover,select:hover{border-color:rgba(6,182,212,0.3)}input[type="text"]:focus,input[type="number"]:focus,select:focus{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(6,182,212,0.08)}.country-trigger:hover{border-color:rgba(6,182,212,0.3);box-shadow:0 2px 8px rgba(6,182,212,0.08)}.quick-amount-btn:hover{background:linear-gradient(135deg,#06B6D4 0%,#0EA5E9 100%);color:white;border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 12px rgba(6,182,212,0.25)}footer{margin-top:80px;border-top:1px solid rgba(0,0,0,0.06);background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.01) 100%)}.dark footer{border-top:1px solid rgba(255,255,255,0.06)}.comparison-toggle{display:inline-flex;background:white;border:1.5px solid rgba(0,0,0,0.08);border-radius:12px;padding:4px;gap:4px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}.comparison-toggle button{padding:8px 16px;border-radius:8px;border:none;background:transparent;font-weight:600;font-size:14px;color:#64748b;transition:all 200ms cubic-bezier(0.4,0,0.2,1);cursor:pointer}.comparison-toggle button.active{background:linear-gradient(135deg,#06B6D4 0%,#0EA5E9 100%);color:white;box-shadow:0 2px 6px rgba(6,182,212,0.3)}.comparison-toggle button:not(.active):hover{background:rgba(6,182,212,0.05);color:#0891b2}.dark .comparison-toggle{background:rgb(30,41,59);border-color:rgba(255,255,255,0.08)}.dark .comparison-toggle button{color:#cbd5e1}.dark .comparison-toggle button:not(.active):hover{background:rgba(6,182,212,0.08);color:#22d3ee}#rates::after{content:'';position:sticky;bottom:0;left:0;right:0;height:40px;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,0.95) 100%);pointer-events:none;opacity:0;transition:opacity 300ms ease}#rates.has-scroll::after{opacity:1}.dark #rates::after{background:linear-gradient(180deg,transparent 0%,rgba(15,23,42,0.95) 100%)}}@media (min-width:1536px){.container{max-width:640px}#rates [data-provider]{padding:24px !important}}@media (min-width:768px) and (max-width:1023px){.container{max-width:768px;padding-left:40px;padding-right:40px}#controls{box-shadow:var(--premium-shadow-lg)}#rates [data-provider]{border-radius:16px;padding:18px !important;background:white;border:1px solid rgba(0,0,0,0.06)}.dark #rates [data-provider]{background:rgb(30,41,59);border:1px solid rgba(255,255,255,0.06)}}@media (prefers-reduced-motion:reduce){#rates [data-provider]::before{transition:none}.send-now-btn::after,.send-now-btn::before{transition:none;animation:none}.skeleton-rate-card{animation:none}}*:focus-visible{outline:2px solid #06B6D4;outline-offset:2px;border-radius:4px}@media (prefers-contrast:high){#rates [data-provider]{border-width:2px}.send-now-btn{border:2px solid #0050E0}}
/* ============================================================
   AyaSend Responsive Layout v4.0
   All phone sizes: 320px (iPhone SE) → 430px (Pro Max)
   ============================================================ */

/* ── Overscroll containment ── */
@media(max-width:767px){
  body{overscroll-behavior-x:none}
  main,.page-content{overscroll-behavior-y:auto}
}

/* ── Fluid container padding ── */
@media(max-width:767px){
  .container,.page-wrapper{
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));
  }
}

/* ── iPhone SE / small phones (≤375px) ── */
@media(max-width:375px){
  .hero-title{font-size:1.5rem!important;line-height:1.2!important}
  .hero-subtitle{font-size:.875rem!important}
  .hero-card,.compare-card{padding:16px!important}
  .quick-actions-grid{grid-template-columns:repeat(2,1fr)!important}
  .amount-display{font-size:2.25rem!important}
  .provider-card{padding:12px 14px!important}
  .btn,.aya-cta-btn{padding:13px 20px!important;font-size:.9rem!important}
  /* Compress bottom nav text on very small screens */
  .bottom-nav-item span{font-size:9px!important}
}

/* ── Standard phones (376px – 390px) ── */
@media(min-width:376px) and (max-width:390px){
  .hero-title{font-size:1.75rem!important}
  .amount-display{font-size:2.75rem!important}
}

/* ── Larger phones (391px – 430px, iPhone Pro Max etc) ── */
@media(min-width:391px) and (max-width:767px){
  .hero-card,.compare-card{padding:24px!important}
  .amount-display{font-size:3rem!important}
  .provider-card{padding:16px 20px!important}
}

/* ── Landscape orientation ── */
@media(max-height:500px) and (orientation:landscape){
  #bottom-nav{display:none!important}
  body{padding-bottom:0!important}
  .hero-section{padding-top:8px!important;padding-bottom:8px!important}
  header{padding-top:0!important}
  .hero-title{font-size:1.5rem!important}
}

/* ── Page entrance transition ── */
@media(max-width:767px){
  @keyframes aya-page-enter-premium{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
  }
  main,.page-content{
    animation:aya-page-enter-premium .28s cubic-bezier(.4,0,.2,1) both;
  }
  @media(prefers-reduced-motion:reduce){
    main,.page-content{animation:none}
  }
}

/* ── Premium card hover / press on mobile ── */
@media(max-width:767px){
  [data-provider]:active,.provider-card:active{
    transform:scale(0.985) translateZ(0);
    transition:transform .12s ease!important;
  }
  .aya-cta-btn:active,.find-rates-btn:active,
  button[type="submit"]:not([disabled]):active{
    transform:scale(0.96) translateZ(0)!important;
    transition:transform .1s ease!important;
  }
}

/* ── Consistent card border-radius ── */
@media(max-width:767px){
  .provider-card,.glass-card,.compare-card{
    border-radius:18px!important;
  }
  .btn,.aya-cta-btn{
    border-radius:14px!important;
  }
  input:not([type="checkbox"]):not([type="radio"]){
    border-radius:12px!important;
  }
}

/* ── Bottom nav safe area and height ── */
@media(max-width:767px){
  #bottom-nav{
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  body{
    padding-bottom:calc(4.75rem + env(safe-area-inset-bottom,0px));
  }
}

/* ── Micro-animation for count/rate changes ── */
@keyframes aya-number-pop{
  0%{transform:scale(1)}
  50%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
.amount-updated{
  animation:aya-number-pop .2s cubic-bezier(.4,0,.2,1);
}

/* ── Loading state for buttons ── */
.btn-loading{
  position:relative;
  color:transparent!important;
  pointer-events:none;
}
.btn-loading::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:18px;height:18px;
  margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:aya-spin .7s linear infinite;
}

/* ── Safe scroll for sticky headers ── */
@media(max-width:767px){
  html{scroll-padding-top:calc(60px + env(safe-area-inset-top,0px))}
}