/*
  ==========================================================================
  Base Styles for Mobile Applications
  ==========================================================================
  This stylesheet provides a clean, modern foundation for the mobile apps,
  improving consistency, readability, and maintainability.
*/

/* 1. Modern CSS Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape on iOS */
}

body {
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* A neutral background color for a clean look (Tailwind's gray-50) */
  background-color: #f9fafb;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

/*
  ==========================================================================
  App-Specific Styles
  ==========================================================================
*/

/* 2. Centralized Theme Colors */
:root {
  --color-swazimed: #2563eb;
  --color-ubuntu: #8f6b5f;
  --color-united: #f13b3b;
}

/* 3. Glossy Button Style */
.btn-glossy {
    background-image: linear-gradient(to bottom, #9e7a6e, #7a5a4f);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.2), /* Inner highlight */
        0 2px 4px rgba(0, 0, 0, 0.2); /* Drop shadow */
    transition: all 0.2s ease-in-out;
}

.btn-glossy:hover {
    background-image: linear-gradient(to bottom, #8f6b5f, #6b4c42);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Custom glossy green for Edit Profile button */
.btn-glossy-edit {
    background-image: linear-gradient(to bottom, #73a182, #669374); /* Lighter to base */
}
.btn-glossy-edit:hover {
    background-image: linear-gradient(to bottom, #669374, #5a8266); /* Base to darker */
}

/* Custom glossy dark green for Save Changes button */
.btn-glossy-save {
    background-image: linear-gradient(to bottom, #043b22, #032a18); /* Lighter to base */
}
.btn-glossy-save:hover {
    background-image: linear-gradient(to bottom, #032a18, #021e12); /* Base to darker */
}


/* 4. Toast Notification Styles */
.toast-glossy {
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.2), /* Inner highlight */
        0 2px 4px rgba(0, 0, 0, 0.2); /* Drop shadow */
}

.toast-success {
    background-image: linear-gradient(to bottom, #043b22, #032a18); /* Lighter to base green */
}

.toast-error {
    background-image: linear-gradient(to bottom, #8b1010, #681010); /* Lighter to base red */
}


/* 3. Component Styles */

/* Styles for the modal overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(31, 41, 55, 0.7); /* bg-gray-800 bg-opacity-70 */
    backdrop-filter: blur(5px);
}

/* NFC Animation for Tap to Pay */
.nfc-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0;
    animation: nfc-wave 5s infinite ease-out;
    border-width: 4px;
    border-style: solid;
}

/* Using CSS variables for NFC ring colors for better maintainability */
.nfc-ring-swazimed { border-color: var(--color-swazimed); }
.nfc-ring-ubuntu { border-color: var(--color-ubuntu); }
.nfc-ring-united { border-color: var(--color-united); }


@keyframes nfc-wave {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Toast Notification z-index */
#toast-notification {
    z-index: 100;
}

/* Topup iframe */
.topup-iframe {
    width: 100%;
    height: 400px; /* Adjust height as needed */
    border: none;
    margin-top: 10px;
}

.amount-computation {
  color: #7a5a4f;
}

.amount-computation-error{
  color: red;
}
/*
  ==========================================================================
  IMPORTANT: Mobile Readiness Checklist
  ==========================================================================

  For a fully responsive mobile experience, ensure the following meta tag
  is present in the <head> of your HTML files:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  This tag is essential for proper scaling on mobile devices.
*/