@import url('./base-tokens.css');
/* Remove duplicate color/btn/card defs and use the utilities instead. */

:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #7c3aed;
  --border: #e2e8f0;
  --highlight: #f0f9ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a; --card: #1e293b; --text: #f1f5f9; --muted: #94a3b8; --border: #334155; --highlight: #1e293b;
  }
}
/* Theme override via [data-theme] */
:root[data-theme="light"] {
  --bg:#f8fafc; --card:#fff; --text:#0f172a; --muted:#64748b; --primary:#7c3aed; --border:#e2e8f0; --highlight:#f0f9ff;
}
:root[data-theme="dark"] {
  --bg:#0f172a; --card:#1e293b; --text:#f1f5f9; --muted:#94a3b8; --primary:#7c3aed; --border:#334155; --highlight:#1e293b;
}

body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); margin:0; padding:20px; }
.container { 
  max-width: 1600px; 
  margin: 0 auto; 
  position: relative; 
}
@media (min-width: 1200px){ 
  .container { 
    max-width: 1600px; /* Changed from 1000px */
  } 
}

/* Floating side buttons — robust positioning */
.side-button{
  position: fixed; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  z-index: 1000; transition: opacity 1s, visibility 1s; opacity:1; visibility:visible;
  right: max(10px, calc((100vw - min(1000px, 100vw)) / 2 - 60px));
}
@media (max-width: 900px){ .side-button{ right:10px; } }

.side-action{
  width:44px; height:44px; border-radius:50%;
  background: var(--card); color: var(--primary);
  border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  text-decoration: none;
  font-size: 1.1rem;
}
.side-action:hover{ background: var(--highlight); transform: translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.15); }

/* helpers for the new buttons */
.side-action.purple { background: rgba(124,58,237,0.95); color:#fff; border:none; }
.side-action.pink   { background: rgba(236,72,153,0.95); color:#fff; border:none; }

.top-actions{
  display:flex; gap:10px; justify-content:flex-start; align-items:center; margin-bottom:16px; flex-wrap:wrap;
  transition: opacity 1s, visibility 1s;
}
.top-actions.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.search-view-btn{
  display:inline-block; color:#fff; background:var(--primary);
  padding:8px 16px; border-radius:6px; text-decoration:none; font-weight:500; transition: all .2s;
}
.search-view-btn:hover{ opacity:.9; transform: translateY(-1px); }

.verses-container { 
  background: var(--card); 
  border: 1px solid var(--border); 
  border-radius: 8px; 
  padding: 24px; /* Increased from 16px */
  max-width: 100%; /* Use full width */
}

h2{ margin:0 0 16px; display:flex; justify-content:space-between; align-items:center; }
.translation-label{ font-size:.9rem; color:var(--primary); padding:2px 8px; background:var(--highlight); border-radius:4px; }
.muted{ color:var(--muted); font-size:.95rem; margin:8px 0 12px; }
.subtitle{ font-size:.95rem; color:var(--muted); margin:-8px 0 12px; }

.chapter-navigation{ display:flex; justify-content:space-between; margin:24px 0 16px; }
.nav-button{
  display:inline-flex; align-items:center; color:var(--primary); text-decoration:none; font-weight:500;
  padding:8px 16px; border:1px solid var(--border); border-radius:6px; background:var(--card); transition:all .2s;
}
.nav-button:hover{ background:var(--highlight); transform: translateY(-1px); }
.nav-button svg{ width:16px; height:16px; margin:0 6px; }

.verse{
  padding:12px 0px; /*border-bottom:2px solid var(--border);*/ cursor:pointer; 
  margin-bottom:40px; 
  margin-left: 5px;
  margin-right: 5px;
  border-radius:8px; position:relative; transition: all .2s;
}
.verse:last-child{ border-bottom:none; margin-bottom:0; }
.verse::after{ content:""; height:10px; position:absolute; bottom:-20px; left:10%; right:10%; border-bottom:1px dashed var(--border); display:block; }
.verse:last-child::after{ display:none; }
.verse:hover{ background: rgba(124,58,237,.08); /*box-shadow:0 4px 12px rgba(0,0,0,.05);*/ border-left:1px solid var(--primary); padding-left:6px;   border-right:1px solid var(--primary); padding-right: 6px;}
.verse:hover .verse-number{ color:var(--primary); }
.verse:hover .verse-text{ color:var(--text);}

.verse-number{ 
  font-weight:700; 
  margin-right:12px; 
  color:var(--primary); 
  font-size:1.8rem; /* Increased from 1.6rem */
  min-width: 40px; /* Increased from 28px */
  display:inline-block; 
}

.verse-text{ 
  line-height:2.4; /* Increased from 2.2 */ 
  font-size:1.8rem; /* Increased from 1.6rem */ 
  letter-spacing:.01em; 
}

a{ color:inherit; text-decoration:none; }

jesus{ color:red; font-weight:500; }

#scrollTop{ opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
#scrollTop.visible{ opacity:1; visibility:visible; }

#toggleTextSize{ position:relative; }
#toggleTextSize::after{
  content:"A"; position:absolute; bottom:-3px; right:-3px; background:var(--primary); color:#fff; width:16px; height:16px; font-size:10px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700;
}
#toggleTextSize.size-large::after{ font-size:13px; width:18px; height:18px; }
#toggleTextSize.size-largest::after{ font-size:16px; width:20px; height:20px; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:1000;
  opacity:0; visibility:hidden; transition: opacity .3s, visibility .3s;
}
.modal-overlay.visible{ opacity:1; visibility:visible; }
.modal-content{
  background:var(--card); border-radius:12px; padding:24px; box-shadow:0 10px 25px rgba(0,0,0,.2);
  max-width:90%; width:350px; text-align:center; position:relative; transform:translateY(20px); transition: transform .3s;
}
.modal-overlay.visible .modal-content{ transform:translateY(0); }
.modal-title{ margin:0 0 16px; font-size:1.4rem; }
.modal-close{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; background:var(--bg); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.qrcode-container{ padding:15px; background:#fff; border-radius:8px; display:inline-block; margin-bottom:15px; }
#showQRCode{ position:relative; }
#showQRCode::after{
  content:"QR"; position:absolute; bottom:-5px; right:-8px; background:var(--primary); color:#fff; padding:2px 6px; font-size:8px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; text-transform:uppercase; line-height:1;
}
.qr-tabs{ display:flex; gap:5px; margin-bottom:15px; justify-content:center; }
.qr-tab{ padding:6px 12px; border-radius:16px; background:var(--bg); border:1px solid var(--border); cursor:pointer; font-size:.9rem; transition:.2s; }
.qr-tab.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.qr-tab:hover:not(.active){ background:var(--highlight); }
.qrcode{ display:none; }
.qrcode.active{ display:block; }

.side-button.hidden{ opacity:0; visibility:hidden; }

/* Passage Selector */
.passage-selector{ margin-bottom:2rem; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:1.5rem; }
.selector-row{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:1rem; }
.selector-row:last-child{ margin-bottom:0; }
.selector-field{ flex:1; min-width:150px; }
.selector-field label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px; font-weight:500; }
.selector-dropdown{
  width:100%; padding:10px 12px; border:2px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-size:1rem; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; cursor:pointer;
}
.selector-dropdown:disabled{ opacity:.6; cursor:not-allowed; }
.verse-range-inputs{ display:flex; align-items:center; gap:8px; }
.verse-dropdown{ width: calc(50% - 10px); }
.verse-separator{ color:var(--muted); font-size:.9rem; flex-shrink:0; }
.selector-action{ display:flex; align-items:flex-end; }
.selector-button{
  width:100%; padding:10px 20px; background:var(--primary); color:#fff; border:none; border-radius:6px; font-size:1rem; font-weight:700; cursor:pointer; transition: opacity .2s;
}
.selector-button:hover:not([disabled]){ opacity:.9; }
.selector-button:disabled{ opacity:.6; cursor:not-allowed; }
#passageSelectorWrapper.collapsed{ display:none; }
@media (max-width:768px){ .selector-field{ width:100%; flex:none; } .selector-action{ width:100%; } }