/* ============================================================================
   IHALE - Mindful Breathing App Styles
   ============================================================================ */

/* Color Variables */
:root{
  --bg: #F4EFE9;
  --title: #9B714A;
  --subtitle: #937E6D;
  --btn: #9B714A;           /* main buttons */
  --btn-light: #ECE1D6;     /* small chips / light buttons */
  --btn-light-text: #4F3E30;/* text on light buttons */
  --text: #4F3E30;          /* base text */
}

/* Base Styles */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}
.container{max-width:900px; margin:0 auto; padding:32px 20px}

/* Typography */

.title{
  font-family:'Playfair Display', serif; font-weight:700; color:var(--title);
  font-size:56px; letter-spacing:0.05em; text-align:center; margin:8px 0 6px; text-transform:uppercase;
}
.subtitle{color:var(--subtitle); text-align:center; margin:0 0 24px}

/* Breathing Circle */

.breather{display:grid; place-items:center; gap:16px; margin:12px auto 24px}
.circle{
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(100% 100% at 50% 0%, #FAF6F0 0%, #EDE3D5 100%);
  display:grid; place-items:center; text-align:center; font-weight:600; letter-spacing:0.06em; color:#7a6250;
  box-shadow:0 30px 80px #9b714a18; user-select:none;
  animation: none; /* enabled via JS */
}

.remaining-time{
  font-size:18px; 
  color:var(--subtitle); 
  font-weight:600; 
  margin-top:8px;
  text-align:center;
}
.remaining-time span{
  color:var(--title); 
  font-size:20px;
  font-weight:700;
}

@media (min-width: 700px){ .circle{ width:340px; height:340px; } }

/* CSS variables for breathing animation - set by JavaScript */
:root{ --inhale:4; --hold:4; --exhale:8; }

/* Controls & Buttons */

.controls{display:flex; gap:12px}
.btn{border:none; padding:12px 20px; border-radius:14px; cursor:pointer; font-weight:600}
.btn-primary{background:var(--btn); color:#fff; padding:16px 32px; font-size:18px}
.btn-light{background:var(--btn-light); color:var(--btn-light-text)}
.btn:disabled{opacity:0.6; cursor:not-allowed}

.chipbar{display:flex; gap:12px}
.chip{background:var(--btn-light); color:var(--btn-light-text); border:none; padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:600}
.chip .dash{opacity:0.4; font-weight:400}

/* Modals */

.modal{position:fixed; inset:0; background:#00000055; display:grid; place-items:center; padding:20px}
.modal[hidden]{display:none !important}
.modal-card{background:#fff; border-radius:18px; padding:22px; width:min(560px, 92vw)}
.modal-title{font-family:'Playfair Display', serif; color:var(--title); text-transform:uppercase; letter-spacing:0.03em; margin:0 0 16px}
.tabs{display:flex; gap:8px; margin-bottom:12px; flex-wrap:nowrap; overflow-x:auto}
.tab{
  padding:10px 12px; 
  border-radius:14px; 
  border:none; 
  cursor:pointer; 
  background:var(--btn-light); 
  color:var(--btn-light-text); 
  font-weight:600;
  display:flex;
  flex-direction:column;
  gap:3px;
  text-align:center;
  flex:1;
  min-width:120px;
  white-space:normal;
}
.tab.active{background:var(--btn); color:#fff}
.tab-title{
  font-size:14px;
  font-weight:600;
  letter-spacing:0.03em;
}
.tab-subtitle{
  font-size:11px;
  font-weight:400;
  opacity:0.85;
  line-height:1.3;
}
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin:10px 0 8px}
.grid label{display:grid; gap:6px; font-size:14px}
.grid input{padding:12px 10px; border-radius:12px; border:1px solid #E5D9CD; font-size:16px}
.modal-actions{display:flex; gap:10px; justify-content:flex-start; margin-top:14px}
.center{display:grid; place-items:center; gap:12px}
.minutes-input{padding:14px 10px; font-size:28px; width:120px; text-align:center; border-radius:12px; border:1px solid #E5D9CD}
.hint{font-size:12px; color:var(--subtitle); margin-top:6px; text-align:center}

/* Info links styling */
.info-links{
  display:flex; 
  flex-direction:column; 
  gap:12px; 
  margin:20px 0;
}
.info-link{
  display:block;
  width:100%;
  padding:16px 24px; 
  border-radius:12px; 
  background:var(--btn-light); 
  color:var(--btn-light-text); 
  text-decoration:none;
  text-align:center; 
  font-weight:600;
  font-size:18px;
  transition:all 0.2s ease;
  border:none;
  cursor:pointer;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}
.info-link:hover{
  background:var(--btn); 
  color:#fff;
}
.info-link-title{
  font-size:18px;
  font-weight:600;
}
.info-link-subtitle{
  font-size:14px;
  font-weight:400;
  margin-top:4px;
  opacity:0.8;
}

/* Preset options styling */
.preset-options{display:flex; flex-direction:column; gap:8px; margin:16px 0; padding:0 20px}
.preset-option{
  padding:14px 20px; 
  border-radius:12px; 
  background:var(--btn-light); 
  color:var(--btn-light-text); 
  cursor:pointer; 
  font-size:28px; 
  font-weight:400; 
  text-align:center; 
  letter-spacing:0.08em;
  transition:all 0.2s ease;
  font-family:'Playfair Display', serif;
}
.preset-option:hover{background:#E5D9CD}
.preset-option.selected{background:var(--btn); color:#fff}
.preset-option .dash{opacity:0.3; font-weight:300}

/* Mobile adjustments */
@media (max-width: 500px) {
  .preset-option{
    padding:12px 16px;
    font-size:24px;
  }
}

/* Timer slider styling */
.timer-slider{
  width:100%; 
  height:60px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  margin:20px 0;
}
.timer-slider input[type=range]{
  width:100%; 
  height:8px; 
  border-radius:4px; 
  background:var(--btn-light); 
  outline:none; 
  -webkit-appearance:none;
}
.timer-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; 
  width:24px; 
  height:24px; 
  border-radius:50%; 
  background:var(--btn); 
  cursor:pointer;
}
.timer-slider input[type=range]::-moz-range-thumb{
  width:24px; 
  height:24px; 
  border-radius:50%; 
  background:var(--btn); 
  cursor:pointer; 
  border:none;
}
.timer-value{
  text-align:center; 
  font-size:32px; 
  font-weight:600; 
  color:var(--title); 
  margin-top:10px;
}

/* Custom breathing pattern sliders */
.custom-sliders{
  padding:20px;
  margin:16px 0;
}
.slider-group{
  margin-bottom:24px;
}
.slider-group label{
  display:block;
  font-size:16px;
  font-weight:600;
  color:var(--title);
  margin-bottom:8px;
}
.slider-group input[type=range]{
  width:100%;
  height:8px;
  border-radius:4px;
  background:var(--btn-light);
  outline:none;
  -webkit-appearance:none;
}
.slider-group input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--btn);
  cursor:pointer;
}
.slider-group input[type=range]::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--btn);
  cursor:pointer;
  border:none;
}
.pattern-hint{
  text-align:center;
  font-size:14px;
  color:var(--subtitle);
  margin-top:16px;
  padding:12px;
  background:var(--btn-light);
  border-radius:8px;
}

/* Settings Tooltip */
.settings-tooltip{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:#fff;
  border-radius:16px;
  padding:20px 24px;
  box-shadow:0 20px 60px rgba(155, 113, 74, 0.25);
  z-index:10000;
  max-width:280px;
  text-align:center;
  display:none;
}
.settings-tooltip.show{
  display:block;
  animation:fadeInScale 0.3s ease;
}
.settings-tooltip p{
  color:var(--text);
  font-size:15px;
  line-height:1.5;
  margin:0 0 16px;
}
.settings-tooltip button{
  background:var(--btn);
  color:#fff;
  border:none;
  padding:10px 20px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
}
@keyframes fadeInScale{
  from{opacity:0; transform:translate(-50%, -50%) scale(0.9)}
  to{opacity:1; transform:translate(-50%, -50%) scale(1)}
}

/* Content Pages (About, Research, etc.) */

.content-page{
  max-width:700px; 
  margin:0 auto; 
  padding:0 20px;
}
.content-card{
  background:#fff; 
  border-radius:18px; 
  padding:32px; 
  margin:24px 0;
  box-shadow:0 10px 40px #9b714a10;
}
.content-card h3{
  color:var(--title);
  font-family:'Playfair Display', serif;
  font-size:24px;
  margin:0 0 8px;
}
.content-card h4{
  color:var(--title);
  font-family:'Playfair Display', serif;
  font-size:18px;
  margin:24px 0 12px;
}
.content-card p{
  color:var(--text); 
  line-height:1.8; 
  margin:0 0 16px;
  font-size:16px;
}
.content-card p:last-child{
  margin-bottom:0;
}
.content-card ul{
  color:var(--text);
  line-height:1.8;
  margin:0 0 16px;
  padding-left:24px;
}
.content-card ul li{
  margin-bottom:8px;
}
.content-card ul.references{
  font-size:14px;
}
.content-card ul.references li{
  margin-bottom:12px;
}
.content-card .disclaimer{
  background:#FFF8F0;
  border-left:4px solid var(--btn);
  padding:16px;
  border-radius:8px;
  font-size:14px;
  line-height:1.6;
  margin-top:24px;
}
.research-table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0 24px;
  font-size:14px;
}
.research-table thead,
.research-table tbody,
.research-table tr{
  display:table;
  width:100%;
  table-layout:fixed;
}
@media (max-width: 600px) {
  .research-table{
    font-size:11px;
    display:block;
    overflow-x:auto;
  }
  .research-table thead,
  .research-table tbody{
    display:block;
    width:100%;
  }
  .research-table tr{
    display:table;
    width:100%;
    table-layout:fixed;
  }
  .research-table th,
  .research-table td{
    padding:6px 4px;
    word-wrap:break-word;
  }
}
.research-table th{
  background:var(--btn-light);
  color:var(--btn-light-text);
  padding:12px;
  text-align:left;
  font-weight:600;
  border-bottom:2px solid var(--btn);
}
.research-table td{
  padding:12px;
  border-bottom:1px solid #E5D9CD;
  color:var(--text);
}
.research-table tr:last-child td{
  border-bottom:none;
}
.research-table tr:hover{
  background:#FAF6F0;
}
.back-button-container{
  text-align:center; 
  margin:32px 0;
}
.btn-large{
  padding:16px 40px; 
  font-size:18px;
  text-decoration:none;
  display:inline-block;
}

/* Footer */

.footer-note{text-align:center; color:var(--subtitle); margin-top:30px}

/* iOS PWA Prompt Modal */

.ios-prompt-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  display:grid;
  place-items:center;
  padding:20px;
  z-index:9999;
  animation:fadeIn 0.3s ease;
}
.ios-prompt-card{
  background:#fff;
  border-radius:18px;
  padding:28px;
  max-width:420px;
  width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.ios-prompt-title{
  font-family:'Playfair Display', serif;
  color:var(--title);
  font-size:22px;
  margin:0 0 16px;
  text-align:center;
}
.ios-prompt-text{
  color:var(--text);
  line-height:1.6;
  margin:0 0 16px;
  text-align:center;
}
.ios-prompt-steps{
  color:var(--text);
  line-height:1.8;
  margin:0 0 24px;
  padding-left:24px;
}
.ios-prompt-steps li{
  margin-bottom:12px;
}
.ios-prompt-steps strong{
  color:var(--title);
  font-weight:600;
}
.ios-prompt-steps svg{
  display:inline-block;
  vertical-align:middle;
  margin:0 2px;
}
.ios-prompt-actions{
  display:flex;
  gap:12px;
  justify-content:center;
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* Utility Classes */

.hidden{display:none}