/* =============================
 * File: /opt/triluma/public/triluma-popup.css
 *
 * Popup styles (isolated via Shadow DOM). No external dependencies.
 *
 * Version: 1.0.0
 * Last Updated: 2026-03-29 23:30
 * ============================= */

:host{
  --tri-blue:#3ba2c4;
  --tri-red:#bc0028;
  --tri-orange:#e78005;
  --tri-grey:#c4c8d0;
  --tri-black:#000000;
  --tri-white:#ffffff;

  --popup-radius:18px;
  --popup-shadow:0 12px 40px rgba(0,0,0,.25);

  --font-head:'Merriweather', serif;
  --font-body:'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;

  --text:#000;
  --headline:var(--tri-blue);
}

*{ box-sizing:border-box; }
a{ color:inherit; }

.tri-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:2147483000;
}

.tri-modal{
  width:min(626px, calc(100vw - 36px));
  background:var(--tri-white);
  border-radius:var(--popup-radius);
  box-shadow:var(--popup-shadow);
  padding:26px 30px 24px;
}

.tri-title{
  margin:0 0 10px 0;
  font-family:var(--font-head);
  font-weight:400;
  font-size:34px;
  line-height:1.05;
  color:var(--headline);
  letter-spacing:.2px;
}

.tri-copy{
  margin:0 0 14px 0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.35;
  color:var(--tri-black);
}

.tri-input{
  width:100%;
  height:56px;
  padding:0 22px;
  border-radius:999px;
  border:2px solid var(--tri-blue);
  outline:none;
  font-family:var(--font-body);
  font-size:28px;
  text-align: center;
  letter-spacing:.5em;
  color:var(--tri-black);
  background:var(--tri-white);
}

.tri-input::placeholder{
  color:var(--tri-grey);
  letter-spacing:.5em;
}

.tri-input:focus{
  box-shadow:0 0 0 4px rgba(59,162,196,.18);
}

.tri-input[disabled]{
  border-color:var(--tri-grey);
  color:var(--tri-grey);
}

.tri-input[disabled]::placeholder{
  color:var(--tri-grey);
}

.tri-checkrow{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:14px 0 0 0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.25;
  color:var(--tri-black);
}

.tri-checkrow small{
  display:block;
  margin-top:2px;
  font-size:13px;
  line-height:1.25;
  color:var(--tri-black);
  opacity:.85;
}

.tri-checkrow em{
  font-style:italic;
}

.tri-check{
  width:18px;
  height:18px;
  margin-top:3px;
  border:2px solid var(--tri-blue);
  border-radius:2px;
  appearance:none;
  -webkit-appearance:none;
  background:var(--tri-white);
  cursor:pointer;
  flex:0 0 auto;
}

.tri-check:checked{
  background:var(--tri-blue);
  border-color:var(--tri-blue);
  box-shadow:inset 0 0 0 3px var(--tri-white);
}

.tri-check:disabled{
  border-color:var(--tri-grey);
  cursor:not-allowed;
}

.tri-check:disabled:checked{
  background:var(--tri-grey);
  border-color:var(--tri-grey);
}

.tri-error{
  margin:14px 0 0 0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.25;
  color:var(--tri-red);
}

.tri-hint{
  margin:12px 0 0 0;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.25;
  color:var(--tri-orange);
}

.tri-actions{
  display:flex;
  gap:26px;
  justify-content:center;
  margin-top:20px;
}

.tri-btn{
  min-width:210px;
  height:52px;
  border-radius:999px;
  border:2px solid var(--tri-blue);
  background:var(--tri-white);
  color:var(--tri-black);
  font-family:var(--font-body);
  font-size:18px;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease, transform .02s ease;
}

.tri-btn:active{ transform:translateY(1px); }

.tri-btn:hover{
  background:var(--tri-blue);
  color:var(--tri-white);
}

.tri-btn[disabled]{
  border-color:var(--tri-grey);
  color:var(--tri-grey);
  cursor:not-allowed;
}

.tri-btn[disabled]:hover{
  background:var(--tri-white);
  color:var(--tri-grey);
}

/* Primary button can be forced "on" */
.tri-btn.primary.on{
  background:var(--tri-blue);
  color:var(--tri-white);
}

/* MIC button exception */
.tri-btn.mic.on,
.tri-btn.mic:hover{
  background:var(--tri-orange);
  color:var(--tri-black);
  border-color:var(--tri-orange);
}