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

:root {
  --bg-body: #F2F2F7;
  --bg-hero: #000000;
  
  --card-metal: linear-gradient(135deg, #CFCFCF 0%, #A0A0A0 100%);
  --card-text: #1C1C1E;
  
  --text-dark: #000000;
  --text-light: #FFFFFF;
  --text-grey: #8E8E93;
  
  --success: #34C759;
  
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  
  --radius-hero: 40px;
  --radius-card: 20px;
  --radius-icon: 50%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-body);
  color: var(--text-dark);
  min-height: 100vh;
  /* Prevent bounce on mobile if needed */
  overscroll-behavior-y: none;
}

#app {
  max-width: 480px; /* Mobile focused default */
  margin: 0 auto;
  background: var(--bg-body);
  min-height: 100vh;
  position: relative;
  padding-bottom: 100px; /* Space for bottom nav */
  box-shadow: 0 0 40px rgba(0,0,0,0.1);
  transition: max-width 0.3s ease;
}

/* --- Hero Section (Black) --- */
.hero-container {
  background-color: var(--bg-hero);
  color: var(--text-light);
  padding: 60px 24px 40px; /* Top padding for status bar area */
  border-bottom-left-radius: var(--radius-hero);
  border-bottom-right-radius: var(--radius-hero);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.greeting {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.hero-actions {
  display: flex;
  gap: 12px;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1C1C1E; /* Dark grey for buttons on black */
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.icon-btn:active { background: #3A3A3C; }

/* New Pill Button Style for Reload Card */
.action-pill-btn {
  height: 44px;
  border-radius: 99px;
  background: #1C1C1E;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 20px;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s;
}
.action-pill-btn:active { background: #3A3A3C; }

.balance-block {
  margin-top: 8px;
}

.balance-label {
  font-size: 13px;
  color: var(--text-grey);
  margin-bottom: 4px;
}

.balance-amount {
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -1px;
}

/* --- Metal Card --- */
.card-wrapper {
  margin-top: 12px;
  width: 100%;
  aspect-ratio: 1.586;
  perspective: 1000px;
  position: relative;
}

.metal-card {
  width: 100%;
  height: 100%;
  background: var(--card-metal);
  border-radius: var(--radius-card);
  position: relative;
  padding: 24px;
  color: var(--card-text);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
}

.card-contactless {
  position: absolute;
  top: 24px;
  right: 24px;
  opacity: 0.6;
}

.card-chip {
  width: 40px;
  height: 28px;
  background: rgba(0,0,0,0.1);
  border-radius: 6px;
  margin-top: 30px;
}

.card-number-hidden {
  font-size: 14px;
  font-family: monospace;
  letter-spacing: 2px;
  margin-top: auto;
  margin-bottom: 24px;
  opacity: 0.7;
}

.card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.card-info-group {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Space between last4 and name */
}

.card-last4 {
  font-family: monospace;
  font-size: 15px;
  letter-spacing: 2px;
  opacity: 0.9;
  font-weight: 600;
}

.card-name {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
}

.card-logo {
  text-align: right;
  line-height: 1;
}

.visa-text {
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
}

.platinum-text {
  font-size: 10px;
  text-transform: uppercase;
  display: block;
  opacity: 0.7;
  margin-top: 2px;
}

/* --- Card Navigation --- */
.card-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.card-nav-btn:active {
  background: rgba(255,255,255,0.4);
}

#card-prev-btn { left: -12px; }
#card-next-btn { right: -12px; }

.card-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.2s;
}

.card-dot.active {
  background: white;
  transform: scale(1.2);
}

/* --- Transactions Section --- */
.transactions-section {
  padding: 32px 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
}

.see-all {
  font-size: 14px;
  color: var(--text-grey);
  text-decoration: none;
}

.tx-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tx-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tx-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #E5E5EA; /* Light grey circle */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  flex-shrink: 0;
  overflow: hidden;
}

.tx-details {
  flex: 1;
}

.tx-title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-bottom: 2px;
}

.tx-subtitle {
  font-size: 13px;
  color: var(--text-grey);
}

.tx-amount {
  text-align: right;
  font-size: 16px;
  font-weight: 500;
}

.tx-amount.positive { color: var(--success); }
.tx-amount.negative { color: #000; }

/* --- Floating Navigation --- */
.floating-nav {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: #1C1C1E; /* Almost black */
  border-radius: 32px;
  padding: 6px;
  display: flex;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 100;
}

.nav-item {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8E8E93;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  border: none;
}

.nav-item.active {
  background: #FFFFFF;
  color: #000000;
}

.nav-item:hover:not(.active) {
  color: #FFFFFF;
}

/* --- Modals (Keep styles functional but updated slightly) --- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: flex-end; /* Sheet style on mobile */
  justify-content: center;
}

.modal-content {
  width: 100%;
  max-width: 480px;
  background: white;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 32px 24px 48px;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (min-width: 480px) {
  .modal { align-items: center; }
  .modal-content { border-radius: 24px; padding: 32px; }
}

/* Utilities */
.hidden { display: none !important; }
.text-success { color: var(--success); }

/* Login Screen Override */
#login-screen {
  background: #000;
  display: grid;
  place-items: center;
}
.login-box {
  background: #1C1C1E;
  color: white;
  width: 90%;
  max-width: 360px;
  padding: 32px;
  border-radius: 24px;
}
.login-input {
  background: #2C2C2E;
  border: none;
  color: white;
  padding: 16px;
  border-radius: 12px;
  width: 100%;
  margin-bottom: 16px;
  font-size: 16px;
  outline: none;
}
.login-submit {
  background: white;
  color: black;
  width: 100%;
  padding: 16px;
  border-radius: 99px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* --- DESKTOP RESPONSIVE STYLES --- */
@media (min-width: 1024px) {
  #app {
    max-width: 1440px;
    padding: 40px;
    display: flex; /* Flex for alignment */
    flex-direction: column;
    height: 100vh;
    box-shadow: none; /* Remove mobile box shadow */
  }

  /* Grid Layout for Dashboard */
  #card-dashboard {
    display: grid;
    grid-template-columns: 420px 1fr;
    grid-template-rows: auto auto; /* Two rows for left column elements */
    gap: 40px;
    align-items: start;
    height: 100%;
  }

  /* Hero Section (Left Column) */
  .hero-container {
    grid-column: 1;
    grid-row: 1;
    position: relative; /* Reset sticky for now, or manage complex sticky container */
    top: 0;
    border-radius: 32px;
    height: auto;
    min-height: 500px;
    justify-content: flex-start;
  }

  /* Card Wrapper - slightly bigger on desktop */
  .card-wrapper {
    margin-top: 40px;
  }

  /* Transactions Section (Right Column) */
  .transactions-section {
    grid-column: 2;
    grid-row: 1 / span 2; /* Span both hero and nav rows */
    background: white;
    border-radius: 32px;
    padding: 40px;
    height: calc(100vh - 80px); /* Fill remaining height */
    overflow-y: auto; /* Internal scroll */
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  }

  /* Navigation (Left Column, Row 2) */
  .floating-nav {
    grid-column: 1;
    grid-row: 2;
    position: static;
    transform: none;
    width: 100%;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start; /* Align left to match content */
    gap: 16px;
    border-radius: 0;
  }

  /* Desktop Nav Item Styles - Text Buttons */
  .nav-item {
    width: auto;
    height: 48px;
    border-radius: 99px;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    color: #000;
    font-weight: 500;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
  }

  .nav-item i {
    width: 18px;
    height: 18px;
  }

  /* Add text labels via pseudo-elements if HTML doesn't have them, 
     but modifying HTML is cleaner. For now, assume CSS only request or I'll inject text content. 
     Actually, better to rely on HTML update. 
     Wait, the user just said "like how the reload card is". Reload card has text.
     The current HTML only has icons <i data-feather="home"></i>.
     I should add text labels to the HTML but hide them on mobile.
  */
  
  .nav-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  }

  .nav-item.active {
    background: #000;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }
}

/* Mobile: Hide nav labels */
.nav-label {
  display: none;
}

@media (min-width: 1024px) {
  .nav-label {
    display: inline-block;
  }
}