/* =========================
   GLOBAL RESET & BASE
========================= */
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html, body {
    overflow: hidden;
    height: 100%;
    font-family: 'Inter', sans-serif;
    background: #fff;
    color: #1d1d1f;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* =========================
   HEADER
========================= */
.header {
    position: absolute;
    top: 22px;
    left: 24px;
    right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.logo {
    font-size: 1.25rem; /* 20px */
    color: #1d1d1f;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.info-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid #1d1d1f;
    cursor: pointer;
    font-size: 1.125rem;
    transition: transform 0.15s cubic-bezier(0.4,0,0.2,1), background-color 0.25s ease;
    will-change: transform, background-color;
}

.info-btn:active {
    transform: scale(0.95);
}


/* =========================
   CONTAINER & SCREENS
========================= */

.container {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.screen {
    display: none;
}

.screen.active {
    display: block;
}

.message {
    font-size: 1.625rem; /* 26px */
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 2rem; /* 32px */
}


.reassurance-black {
    margin-top: 1.25rem;
    font-size: 1rem; /* 16px */
    line-height: 1.6;
}

.divider {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e5e5e7;
}

.notification-section {
    font-size: 0.8125rem;
    color: #6e6e73;
    margin-top: 0.75rem;
}


.notification-text {
    margin-bottom: 0.625rem;
}

.notification-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
}


.single-line {
    white-space: nowrap;
}


/* =========================
   TOGGLES
========================= */

.switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.switch input {
  display: none;
}

/* OFF state */
.slider {
  position: absolute;
  inset: 0;
  background: #e5e5e7;   /* light gray OFF */
  border-radius: 24px;
  transition: background 0.25s ease;
}

.slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.25s ease;
}

/* ON state */
.switch input:checked + .slider {
  background: #2f6fed; /* primary blue */
}

/* move knob when ON */
.switch input:checked + .slider:before {
  transform: translateX(20px);
}

input:checked + .slider:before { transform:translateX(20px);}

/* =========================
   BUTTONS
========================= */

button.app-btn {
    background: #2f6fed;
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1.125rem; /* 18px*/
    border-radius: 0.75rem;
    cursor: pointer;
    margin: 0.5rem;
    transition: transform 0.15s cubic-bezier(0.4,0,0.2,1), background 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    will-change: transform, background-color, box-shadow;
}

button.app-btn:hover {
    transform: translateY(-2px);
    background: #1e4fbf;
    box-shadow: 0 4px 12px rgba(0,0,0,0.16);
}

button.app-btn:active {
    transform: scale(0.95);
}

.reminder-buttons button:first-child {
    margin-right: 1.75rem;
}


/* =========================
   HALO ANIMATION
========================= */

.halo-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 1.75rem auto;
}

.halo-ring {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0.2);
    border-radius: 50%;
    border: 1.5px solid rgba(0,122,255,0.35);
    animation: haloExpand 4s infinite ease-out;
    will-change: transform, opacity;
}

.halo-ring:nth-child(2) { animation-delay: 2s; }

@keyframes haloExpand {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}


/* =========================
   MODALS
========================= */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex; /* keep it flex always */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;            
    pointer-events: none; 
    transition: opacity 0.3s ease;
}


.modal.show { 
    opacity: 1;
    pointer-events: auto;
}


.modal-content {
    background: white;
    padding: 2.5rem;
    border-radius: 0.875rem;
    text-align: center;
    min-width: 320px;
    max-width: 600px;
    width: 95%;
    transform: translateY(-16px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}

.modal.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.modal-content p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}


/* =========================
   TOOLTIP
========================= */

.info-wrapper, .tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip {
  position: absolute;
  top: 46px;
  right: 0;
  background: white;
  color: #1d1d1f;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  min-width: 220px;
  max-width: 400px;
  width: max-content;
  line-height: 1.6;
  white-space: normal;
}

/* Show tooltip on hover */
.info-wrapper:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}


/* Wrap toggle + tooltip */
.toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* Tooltip button style */
.tooltip-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #1d1d1f;
  background: white;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease;
}

.tooltip-btn:hover {
  background: #f2f2f2;
}

/* Tooltip container */
.tooltip-wrapper {
  position: relative;
}

/* Tooltip box */
.tooltip-wrapper .tooltip {
  position: absolute;
  top: 26px; /* below the button */
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: white;
  color: #1d1d1f;
  padding: 10px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 999;
}

/* Show tooltip on hover */
.tooltip-wrapper:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* =========================
   FOOTER NOTE
========================= */

.footer-note {
    font-size: 0.75rem;        
    color: #888;              
    text-align: center;       
    position: fixed;          
    bottom: 12px;             
    left: 0;
    width: 100%;              
    pointer-events: none;    
    user-select: none;        
}