/* =============================================================================
   ALPINE — BTCPay CSS Theme
   Crisp mountain air, fresh snowfields, pine forests, and cobalt skies.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Raleway:wght@400;600;700&display=swap');

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes snowfall {
  0%   { transform: translateY(-20px) translateX(0) rotate(0deg); opacity: 0; }
  5%   { opacity: 0.8; }
  95%  { opacity: 0.6; }
  100% { transform: translateY(100vh) translateX(40px) rotate(360deg); opacity: 0; }
}

@keyframes mountain-breath {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.005); }
}

@keyframes frost-in {
  from { opacity: 0; filter: blur(4px); transform: translateY(-6px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes peak-glow {
  0%, 100% { box-shadow: 0 -4px 20px rgba(135,206,250,0.3), 0 4px 20px rgba(21,101,192,0.2); }
  50%       { box-shadow: 0 -4px 30px rgba(135,206,250,0.5), 0 4px 30px rgba(21,101,192,0.3); }
}

@keyframes pine-sway {
  0%, 100% { transform: rotate(-1deg); }
  50%       { transform: rotate(1deg); }
}

@keyframes snow-crystal {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(360deg) scale(1.1); }
}

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Border radius — softly rounded like mountain peaks */
  --btcpay-border-radius:     .35rem;
  --btcpay-border-radius-l:   .75rem;
  --btcpay-border-radius-xl:  1.25rem;
  --btcpay-border-radius-xxl: 2rem;

  /* Crisp transitions */
  --btcpay-transition-duration-fast:    .15s;
  --btcpay-transition-duration-default: .25s;
  --btcpay-transition-duration-slow:    .45s;

  /* Brand — mountain blue & alpine green */
  --btcpay-brand-primary:   #1565C0;
  --btcpay-brand-secondary: #2E7D32;
  --btcpay-brand-tertiary:  #0D47A1;
  --btcpay-brand-dark:      #0D2340;

  --btcpay-white:     #FAFEFF;
  --btcpay-white-rgb: 250, 254, 255;

  /* Neutral — snow-white to slate */
  --btcpay-neutral-light-100: #F0F8FF;
  --btcpay-neutral-light-100-rgb: 240,248,255;
  --btcpay-neutral-light-200: #E1F0F8;
  --btcpay-neutral-light-200-rgb: 225,240,248;
  --btcpay-neutral-light-300: #C8E0F0;
  --btcpay-neutral-light-300-rgb: 200,224,240;
  --btcpay-neutral-light-400: #A8CCE4;
  --btcpay-neutral-light-400-rgb: 168,204,228;
  --btcpay-neutral-light-500: #6A9BB8;
  --btcpay-neutral-light-500-rgb: 106,155,184;
  --btcpay-neutral-light-600: #4A7A98;
  --btcpay-neutral-light-600-rgb: 74,122,152;
  --btcpay-neutral-light-700: #305870;
  --btcpay-neutral-light-700-rgb: 48,88,112;
  --btcpay-neutral-light-800: #1C3A52;
  --btcpay-neutral-light-800-rgb: 28,58,82;
  --btcpay-neutral-light-900: #0D2340;
  --btcpay-neutral-light-900-rgb: 13,35,64;

  /* Primary scale — mountain blue */
  --btcpay-primary-100: #E3F2FD;
  --btcpay-primary-100-rgb: 227,242,253;
  --btcpay-primary-200: #BBDEFB;
  --btcpay-primary-200-rgb: 187,222,251;
  --btcpay-primary-300: #90CAF9;
  --btcpay-primary-300-rgb: 144,202,249;
  --btcpay-primary-400: #64B5F6;
  --btcpay-primary-400-rgb: 100,181,246;
  --btcpay-primary-500: #42A5F5;
  --btcpay-primary-500-rgb: 66,165,245;
  --btcpay-primary-600: #1E88E5;
  --btcpay-primary-600-rgb: 30,136,229;
  --btcpay-primary-700: #1565C0;
  --btcpay-primary-700-rgb: 21,101,192;
  --btcpay-primary-800: #0D47A1;
  --btcpay-primary-800-rgb: 13,71,161;
  --btcpay-primary-900: #082C6E;
  --btcpay-primary-900-rgb: 8,44,110;
  --btcpay-primary-rgb: 21, 101, 192;

  /* Green scale = alpine forest */
  --btcpay-green-100: #E8F5E9;
  --btcpay-green-100-rgb: 232,245,233;
  --btcpay-green-200: #C8E6C9;
  --btcpay-green-200-rgb: 200,230,201;
  --btcpay-green-300: #A5D6A7;
  --btcpay-green-300-rgb: 165,214,167;
  --btcpay-green-500: #4CAF50;
  --btcpay-green-500-rgb: 76,175,80;
  --btcpay-green-700: #2E7D32;
  --btcpay-green-700-rgb: 46,125,50;
  --btcpay-green-900: #1B5E20;
  --btcpay-green-900-rgb: 27,94,32;
  --btcpay-green-rgb: 46,125,50;

  /* Blue scale (lighter, sky) */
  --btcpay-blue-100: #E3F2FD;
  --btcpay-blue-100-rgb: 227,242,253;
  --btcpay-blue-500: #2196F3;
  --btcpay-blue-500-rgb: 33,150,243;
  --btcpay-blue-700: #1565C0;
  --btcpay-blue-700-rgb: 21,101,192;
  --btcpay-blue-900: #0D2340;
  --btcpay-blue-900-rgb: 13,35,64;
  --btcpay-blue-rgb: 33,150,243;

  /* Yellow = sunlit snowfield */
  --btcpay-yellow-100: #FFFDE7;
  --btcpay-yellow-100-rgb: 255,253,231;
  --btcpay-yellow-500: #FFC107;
  --btcpay-yellow-500-rgb: 255,193,7;
  --btcpay-yellow-700: #F57F17;
  --btcpay-yellow-700-rgb: 245,127,23;
  --btcpay-yellow-900: #7B3F00;
  --btcpay-yellow-900-rgb: 123,63,0;
  --btcpay-yellow-rgb: 255,193,7;

  /* Red = mountain berries */
  --btcpay-red-100: #FFEBEE;
  --btcpay-red-100-rgb: 255,235,238;
  --btcpay-red-500: #F44336;
  --btcpay-red-500-rgb: 244,67,54;
  --btcpay-red-700: #C62828;
  --btcpay-red-700-rgb: 198,40,40;
  --btcpay-red-900: #7F0000;
  --btcpay-red-900-rgb: 127,0,0;
  --btcpay-red-rgb: 244,67,54;

  /* Typography */
  --btcpay-font-family-base:      'Nunito', 'Raleway', sans-serif;
  --btcpay-font-family-monospace: 'Courier New', monospace;
  --btcpay-font-size-m:   15px;
  --btcpay-font-size-l:   21px;
  --btcpay-font-size-xl:  28px;
  --btcpay-font-size-xxl: 38px;
  --btcpay-font-weight-normal:   400;
  --btcpay-font-weight-semibold: 700;
  --btcpay-font-weight-bold:     800;

  /* Neutral tokens */
  --btcpay-neutral-100: var(--btcpay-neutral-light-100);
  --btcpay-neutral-200: var(--btcpay-neutral-light-200);
  --btcpay-neutral-300: var(--btcpay-neutral-light-300);
  --btcpay-neutral-400: var(--btcpay-neutral-light-400);
  --btcpay-neutral-500: var(--btcpay-neutral-light-500);
  --btcpay-neutral-600: var(--btcpay-neutral-light-600);
  --btcpay-neutral-700: var(--btcpay-neutral-light-700);
  --btcpay-neutral-800: var(--btcpay-neutral-light-800);
  --btcpay-neutral-900: var(--btcpay-neutral-light-900);

  /* Body */
  --btcpay-body-bg-rgb:       240, 248, 255;
  --btcpay-body-bg-light:     #FAFEFF;
  --btcpay-body-bg-medium:    #E1F0F8;
  --btcpay-body-bg-hover:     #F0F8FF;
  --btcpay-body-text:         #0D2340;
  --btcpay-body-text-muted:   #4A7A98;
  --btcpay-body-text-rgb:     13, 35, 64;
  --btcpay-body-link:         #1565C0;
  --btcpay-body-link-rgb:     21, 101, 192;
  --btcpay-body-link-accent:  #0D47A1;
  --btcpay-body-shadow:       rgba(21, 101, 192, 0.3);
  --btcpay-body-border-light: #C8E0F0;
  --btcpay-body-border-medium:#A8CCE4;

  /* Header */
  --btcpay-header-bg:           #FAFEFF;
  --btcpay-header-text:         #0D2340;
  --btcpay-header-link:         #1565C0;
  --btcpay-header-link-accent:  #2E7D32;
  --btcpay-header-link-active:  #0D47A1;

  /* Nav */
  --btcpay-nav-link:         #4A7A98;
  --btcpay-nav-link-active:  #1565C0;
  --btcpay-nav-border-active:#1565C0;

  /* Footer */
  --btcpay-footer-bg:          #0D2340;
  --btcpay-footer-text:        #6A9BB8;
  --btcpay-footer-link:        #A8CCE4;
  --btcpay-footer-link-accent: #FAFEFF;

  /* Form */
  --btcpay-form-bg:          #FAFEFF;
  --btcpay-form-bg-addon:    #E1F0F8;
  --btcpay-form-text:        #0D2340;
  --btcpay-form-text-label:  #305870;
  --btcpay-form-border:      #A8CCE4;
  --btcpay-form-border-hover:#1565C0;
  --btcpay-form-border-focus:#1565C0;
  --btcpay-form-shadow-focus: rgba(21, 101, 192, 0.25);

  /* Tiles */
  --btcpay-bg-tile: #FAFEFF;
  --btcpay-bg-dark: #0D2340;

  /* Primary: mountain blue */
  --btcpay-primary:            #1565C0;
  --btcpay-primary-accent:     #0D47A1;
  --btcpay-primary-text:       #FAFEFF;
  --btcpay-primary-text-hover: #FAFEFF;
  --btcpay-primary-bg-hover:   #1976D2;
  --btcpay-primary-bg-active:  #0D47A1;
  --btcpay-primary-border:     #1565C0;
  --btcpay-primary-shadow:     rgba(21, 101, 192, 0.35);

  /* Secondary: snow white */
  --btcpay-secondary:            #FAFEFF;
  --btcpay-secondary-text:       #1565C0;
  --btcpay-secondary-text-hover: #0D47A1;
  --btcpay-secondary-border:     #A8CCE4;
  --btcpay-secondary-shadow:     rgba(168, 204, 228, 0.4);

  /* Success: alpine forest green */
  --btcpay-success:        #2E7D32;
  --btcpay-success-accent: #1B5E20;
  --btcpay-success-text:   #FAFEFF;
  --btcpay-success-shadow: rgba(46, 125, 50, 0.35);

  /* Info: sky */
  --btcpay-info:        #2196F3;
  --btcpay-info-accent: #1565C0;
  --btcpay-info-text:   #FAFEFF;
  --btcpay-info-shadow: rgba(33, 150, 243, 0.35);

  /* Warning */
  --btcpay-warning:        #FFC107;
  --btcpay-warning-accent: #F57F17;
  --btcpay-warning-text:   #0D2340;
  --btcpay-warning-shadow: rgba(255, 193, 7, 0.35);

  /* Danger */
  --btcpay-danger:        #F44336;
  --btcpay-danger-accent: #C62828;
  --btcpay-danger-text:   #FAFEFF;
  --btcpay-danger-shadow: rgba(244, 67, 54, 0.35);
}

/* ============================================================
   BODY — crisp mountain air
   ============================================================ */
body {
  background-color: #F0F8FF;
  background-image:
    linear-gradient(180deg, #E8F4FF 0%, #F0F8FF 40%, #FAFEFF 100%),
    radial-gradient(ellipse at 50% 0%, rgba(135,206,250,0.2) 0%, transparent 60%);
}

/* ============================================================
   STORE HEADER — clean summit bar
   ============================================================ */
.store-header,
header.store-header {
  background: rgba(250,254,255,0.95) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 2px solid #C8E0F0 !important;
  box-shadow: 0 2px 20px rgba(21,101,192,0.15) !important;
  animation: peak-glow 4s ease-in-out infinite;
}

.store-name {
  font-family: 'Raleway', sans-serif !important;
  font-weight: 700 !important;
  color: #0D2340 !important;
  letter-spacing: 0.04em;
  animation: frost-in 0.6s ease-out;
}

/* ============================================================
   CARDS — frosted glass panels
   ============================================================ */
.card, .tile.card {
  background: rgba(250,254,255,0.9) !important;
  border: 1px solid #C8E0F0 !important;
  box-shadow: 0 4px 20px rgba(21,101,192,0.1) !important;
  backdrop-filter: blur(8px) !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
  animation: frost-in 0.4s ease-out;
}

.card:hover, .tile.card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 30px rgba(21,101,192,0.2) !important;
  border-color: #1565C0 !important;
}

/* ============================================================
   BUTTONS — crisp mountain-fresh
   ============================================================ */
.btn-primary {
  background: linear-gradient(135deg, #1565C0 0%, #1E88E5 100%) !important;
  border: none !important;
  color: #FAFEFF !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.0em !important;
  letter-spacing: 0.04em !important;
  border-radius: 1rem !important;
  padding: 0.65rem 1.8rem !important;
  box-shadow: 0 4px 15px rgba(21,101,192,0.35) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0D47A1 0%, #1565C0 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(21,101,192,0.45) !important;
}

.btn-secondary {
  background: #FAFEFF !important;
  border: 2px solid #1565C0 !important;
  color: #1565C0 !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 1rem !important;
}

.btn-secondary:hover {
  background: #E3F2FD !important;
  border-color: #0D47A1 !important;
  color: #0D47A1 !important;
}

/* ============================================================
   PROGRESS BAR — altitude gauge
   ============================================================ */
.progress {
  background: #C8E0F0 !important;
  border-radius: 1rem !important;
  height: 1rem !important;
  border: none !important;
  box-shadow: inset 0 2px 4px rgba(13,35,64,0.1) !important;
}

.progress-bar {
  background: linear-gradient(90deg, #1565C0, #42A5F5) !important;
  border-radius: 1rem !important;
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form-control, .form-select {
  background: rgba(250,254,255,0.9) !important;
  border: 2px solid #C8E0F0 !important;
  color: #0D2340 !important;
  border-radius: 0.75rem !important;
}

.form-control:focus, .form-select:focus {
  border-color: #1565C0 !important;
  box-shadow: 0 0 0 3px rgba(21,101,192,0.2) !important;
  background: #FAFEFF !important;
}

/* ============================================================
   SCROLLBAR — glacial blue
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #E1F0F8; border-radius: 3px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1565C0, #42A5F5);
  border-radius: 3px;
}

::selection {
  background: #1565C0;
  color: #FAFEFF;
}