/* assets/css/ui.comfort.css
   Small, safe UI polish: nicer buttons + subtle animations.
   Loaded after overrides.css
*/

:root{
  --ui-primary: #3b82f6;
  --ui-accent:  #22d3ee;
  --ui-danger:  #fb7185;
  --ui-text: rgba(255,255,255,.94);
  --glass-1: rgba(255,255,255,.12);
  --glass-2: rgba(255,255,255,.06);
  --shadow-1: 0 10px 28px rgba(0,0,0,.28);
  --shadow-2: 0 16px 46px rgba(0,0,0,.38);
  --ring:     0 0 0 4px rgba(34,211,238,.14);
}

/* Comfortable premium buttons (works for plain <button> + your .primary/.danger) */
button, .btn, input[type="button"], input[type="submit"]{
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  color: var(--ui-text);
  background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
  box-shadow: var(--shadow-1);
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

button:hover, .btn:hover, input[type="button"]:hover, input[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  filter: brightness(1.06);
  border-color: rgba(255,255,255,.25);
}

button:active, .btn:active, input[type="button"]:active, input[type="submit"]:active{
  transform: translateY(0);
  filter: brightness(.98);
  box-shadow: 0 10px 32px rgba(0,0,0,.30);
}

button:focus-visible, .btn:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible{
  outline: none;
  box-shadow: var(--shadow-1), var(--ring);
}

/* nice soft shine */
button::before, .btn::before, input[type="button"]::before, input[type="submit"]::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(160px 80px at 18% 0%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(220px 90px at 85% -10%, rgba(34,211,238,.18), transparent 55%);
  opacity:.95;
  pointer-events:none;
}

/* Your project uses class="primary" and class="danger" */
button.primary, .btn.primary{
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(34,211,238,.62));
  border-color: rgba(34,211,238,.55);
  color: rgba(0,0,0,.88);
}
button.danger, .btn.danger{
  background: linear-gradient(180deg, rgba(251,113,133,.95), rgba(239,68,68,.60));
  border-color: rgba(251,113,133,.55);
  color: rgba(0,0,0,.88);
}

/* Tiny modal open animation (non-breaking) */
@keyframes popIn { from { transform: translateY(8px) scale(.985); opacity:0 } to { transform: translateY(0) scale(1); opacity:1 } }
.modal:not(.hidden) .modal-card{ animation: popIn .18s ease both; }

/* Extra comfort: soft glow for primary/danger */
button.primary:hover, .btn.primary:hover{ box-shadow: 0 16px 52px rgba(0,0,0,.42), 0 0 0 1px rgba(34,211,238,.18) inset, 0 0 22px rgba(34,211,238,.18); }
button.danger:hover, .btn.danger:hover{ box-shadow: 0 16px 52px rgba(0,0,0,.42), 0 0 0 1px rgba(251,113,133,.18) inset, 0 0 22px rgba(251,113,133,.18); }

/* Slightly softer corners for small control buttons */
#controls button{ border-radius: 12px; }


/* Extra comfort: soft glow for primary/danger */
button.primary:hover, .btn.primary:hover{
  box-shadow: 0 16px 52px rgba(0,0,0,.42), 0 0 0 1px rgba(34,211,238,.18) inset, 0 0 22px rgba(34,211,238,.18);
}
button.danger:hover, .btn.danger:hover{
  box-shadow: 0 16px 52px rgba(0,0,0,.42), 0 0 0 1px rgba(251,113,133,.18) inset, 0 0 22px rgba(251,113,133,.18);
}

/* Background preset buttons (Settings > Colors) */
.bg-presets .bgp{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bg-presets .bgp::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transform: translateZ(0);
}

/* Նուրբ փայլ */
.bg-presets .bgp::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 14px;
  background: radial-gradient(700px 140px at 30% 0%,
    rgba(255,255,255,.18),
    rgba(255,255,255,0) 55%);
  pointer-events:none;
  opacity:.55;

}
@keyframes bgpFloatA{
  0%   { background-position: 0% 20%, 80% 60%, 50% 90%, 0% 0%; }
  50%  { background-position: 20% 10%, 60% 70%, 55% 80%, 100% 100%; }
  100% { background-position: 0% 20%, 80% 60%, 50% 90%, 0% 0%; }
}

.bg-presets .bgp::before{
  background-size: 220% 220%, 220% 220%, 220% 220%, 100% 100%;
  animation: bgpFloatA 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .bg-presets .bgp::before{ animation: none; }
}

.bg-presets .bgp[data-bgp="1"]::before{
  background-image:
    radial-gradient(circle at 18% 28%, rgba(34,211,238,.70), transparent 58%),
    radial-gradient(circle at 82% 55%, rgba(99,102,241,.65), transparent 60%),
    radial-gradient(circle at 50% 88%, rgba(168,85,247,.55), transparent 62%),
    linear-gradient(135deg, rgba(10,18,34,.35), rgba(255,255,255,0));
}

.bg-presets .bgp[data-bgp="2"]::before{
  background-image:
    radial-gradient(circle at 22% 30%, rgba(251,146,60,.72), transparent 58%),
    radial-gradient(circle at 78% 52%, rgba(244,114,182,.60), transparent 60%),
    radial-gradient(circle at 50% 88%, rgba(250,204,21,.55), transparent 62%),
    linear-gradient(135deg, rgba(34,16,10,.28), rgba(255,255,255,0));
}

.bg-presets .bgp[data-bgp="3"]::before{
  background-image:
    radial-gradient(circle at 24% 32%, rgba(34,197,94,.68), transparent 58%),
    radial-gradient(circle at 78% 50%, rgba(45,212,191,.60), transparent 60%),
    radial-gradient(circle at 50% 88%, rgba(16,185,129,.55), transparent 62%),
    linear-gradient(135deg, rgba(8,26,18,.30), rgba(255,255,255,0));
}

.bg-presets .bgp[data-bgp="4"]::before{
  background-image:
    radial-gradient(circle at 22% 30%, rgba(139,92,246,.72), transparent 58%),
    radial-gradient(circle at 80% 52%, rgba(59,130,246,.60), transparent 60%),
    radial-gradient(circle at 50% 88%, rgba(236,72,153,.50), transparent 64%),
    linear-gradient(135deg, rgba(18,10,34,.30), rgba(255,255,255,0));
}
.bg-presets .bgp{
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bg-presets .bgp:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
}
.bg-presets .bgp.is-active{
  border-color: rgba(170,140,255,.55);
  box-shadow: 0 16px 44px rgba(0,0,0,.28), 0 0 0 4px rgba(170,140,255,.20);
}


/* Ensure modals do not add dark overlay (requested) */
.modal{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Fix native <select> dropdown readability */
select, .modal select{
  color: rgba(255,255,255,.92);
  background: rgba(12, 16, 24, .45);
  border: 1px solid rgba(255,255,255,.16);
}
select option{
  color: #111;
  background: #fff;
}