/* Aiving Brand Color Scheme */
:root {
    /* Primary Aiving Colors - Professional Ice/Tech Theme */
    --primary-color: #0b2182;        /* Aiving Blue */
    --primary-dark: #08155c;         /* Darker blue for depth */
    --primary-light: #3a4fb5;        /* Light blue for accents */
    
    /* Secondary Colors */
    --secondary-color: #FFFFFF;      /* White */
    --secondary-dark: #F0F0F0;       /* Subtle gray for contrast */
    --secondary-light: #FFFFFF;      /* White */
    
    /* Accent Colors */
    --accent-color: #940026;         /* Aiving Burgundy */
    --accent-dark: #5f0019;          /* Darker burgundy */
    --accent-light: #d36a80;         /* Lighter burgundy */
    
    /* Neutral Colors */
    --background-primary: #FFFFFF;    /* Clean white */
    --background-secondary: #F8FAFC;  /* Very light gray */
    --background-tertiary: #E2E8F0;   /* Light gray */
    
    /* Text Colors */
    --text-primary: #0b2182;         /* Aiving Blue for headings/content */
    --text-secondary: #999999;       /* Small text gray (per brand guide) */
    --text-tertiary: #64748B;        /* Neutral tertiary */
    --text-light: #FFFFFF;           /* White text */
    
    /* Success/Error/Info Colors */
    --success-color: #339A38;        /* Online */
    --success-light: #D1FAE5;        /* Light green background */
    --error-color: #dc3545;          /* Offline */
    --error-light: #FEE2E2;          /* Light red background */
    --warning-color: #F59E0B;        /* Amber */
    --warning-light: #FEF3C7;        /* Light amber background */
    --info-color: #3B82F6;           /* Blue */
    --info-light: #DBEAFE;           /* Light blue background */
    
    /* Gradient Backgrounds */
    --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);
    --gradient-header:  linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);
    --gradient-accent:  linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50px;
}

/* Aiving-specific header/logo adjustments */
.header {
    padding: 20px 20px;
}

.header .brand-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(8px, 2vw, 16px);
    min-width: 0;
  }

  .header .brand-logo {
    flex: 0 0 28%;
    max-width: 112px;
    height: auto;
    object-fit: contain;
  }

  .header .brand-text h1 {
    font-weight: 600;
    font-size: clamp(1.35rem, 4.5vw, 2rem);
    line-height: 1.12;
  }

  .header .brand-text p {
    font-weight: 400;
    font-size: clamp(0.9rem, 2.6vw, 1.15rem);
    line-height: 1.25;
  }
  

.disclaimer {
    margin-top: 1em;             /* spacing from list */
    font-size: 1.1em;            /* slightly larger */
    text-align: left;            /* flush left */
    color: var(--accent-color);  /* use your Aiving Burgundy */
  }

h3 {
font-weight: normal;   /* reset */
font-size: 1.2em; 
}

h3 strong {
font-weight: bold;     /* only strong text stays bold */
font-size: 1em;        /* same size as regular text */
}

/* assets/themes/aiving/colors.css */
.normal {
    font-size: 1.1em;
    color: #000000;
    opacity: 1;
}

/* iPhone banner */
#iosBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #940026; /* Aiving Burgundy */
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: clamp(1rem, 3.5vw, 1.4rem); /* bigger, responsive */
    padding: clamp(18px, 3vw, 22px) clamp(8px, 3vw, 18px);
    z-index: 1100;
    cursor: pointer;
    box-shadow: 0 -3px 8px rgba(0,0,0,0.3);
  }
  
  /* Make emoji + "iPhone detected" pop */
  #iosBanner strong {
    font-size: clamp(1.4rem, 4vw, 1.6rem);
  }

  #iosModalBody p {
    line-height: 1;
    margin: 0; /* reset defaults */
  }
  
  /* Space between the first (info) and second (warning) paragraphs */
  #iosModalBody p:first-of-type {
    margin-bottom: 0.5em;  /* tweak as needed */
  }
  
  /* Warning callout box (line 3) */
  #iosModalBody p.warning {
    margin-top: 1.2em;       /* extra gap above the box */
    margin-bottom: 1.2em;    /* space before the steps */
    padding: 0.8em;
    background: #fff3f3;     /* soft red */
    border-radius: 6px;
    color: #c62828;
    font-weight: 600;
  }
  
  /* Optional: give the steps a touch more breathing room */
  #iosModalBody .ios-steps {
    margin-top: 0;           /* we already added space via .warning */
    padding-left: 1.2em;     /* tidy list indent (adjust if needed) */
  }


  .ios-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5ea; /* iOS divider line */
  }
  
  .ios-toggle .label {
    line-height: 1.2;
  }
  
  .ios-toggle .switch {
    position: relative;
    width: 51px;
    height: 31px;
    border-radius: 31px;
    background: #ccc;
    display: inline-block;
    pointer-events: none;   /* not clickable */
    user-select: none;      /* not selectable */
  }
  
  .ios-toggle .switch::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 23px;
    height: 23px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(0,0,0,.15);
    transition: transform 0.2s;
  }
  
  /* ON state */
  .ios-toggle .switch.on {
    background: #34c759; /* iOS green */
  }
  .ios-toggle .switch.on::before {
    transform: translateX(20px);
  }
  
  /* OFF state */
  .ios-toggle .switch.off {
    background: #ccc;
  }
  .ios-toggle .switch.off::before {
    transform: none;
  }

  
  
  .play {
    color: var(--primary-color);
  }

/* Highlight important instructions in Aiving Burgundy */
.highlight-burgundy {
    color: var(--accent-color);
    font-weight: 600;
}