/* Om Chant Player – Bindi Widget Styles */
/* ================================================ */

:root {
  --ocp-gold:         #c9a84c;
  --ocp-gold-light:   #e8c97a;
  --ocp-crimson:      #8b1a1a;
  --ocp-crimson-deep: #6b1010;
  --ocp-bg-panel:     rgba(16, 12, 8, 0.94);
  --ocp-text:         #f5ead8;
  --ocp-text-muted:   #a89070;
  --ocp-border:       rgba(201, 168, 76, 0.3);
  --ocp-shadow:       0 4px 24px rgba(0,0,0,0.55), 0 1px 6px rgba(0,0,0,0.35);
  --ocp-transition:   0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --ocp-font:         -apple-system, 'Segoe UI', sans-serif;
  --ocp-z:            999999;
  --ocp-bindi-size:   46px;
}

/* ── Widget wrapper ─────────────────────────────── */
.ocp-widget {
  position: fixed;
  z-index: var(--ocp-z);
  font-family: var(--ocp-font);
}

.ocp-bottom-right { bottom: 22px; right: 22px; }
.ocp-bottom-left  { bottom: 22px; left:  22px; }
.ocp-top-right    { top:    22px; right: 22px; }
.ocp-top-left     { top:    22px; left:  22px; }

/* ── Bindi button ───────────────────────────────── */
.ocp-toggle {
  width:  var(--ocp-bindi-size);
  height: var(--ocp-bindi-size);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: radial-gradient(circle at 38% 36%,
    #c0392b 0%,
    var(--ocp-crimson) 52%,
    var(--ocp-crimson-deep) 100%
  );

  border: 1.5px solid rgba(201, 168, 76, 0.45);
  box-shadow:
    var(--ocp-shadow),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.3);

  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--ocp-transition),
    box-shadow var(--ocp-transition),
    border-color var(--ocp-transition),
    background var(--ocp-transition);

  position: relative;
  overflow: visible;
}

.ocp-toggle:hover {
  transform: scale(1.1);
  border-color: var(--ocp-gold);
  box-shadow:
    var(--ocp-shadow),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 0 14px rgba(201, 168, 76, 0.4);
}

.ocp-toggle:active { transform: scale(0.95); }

/* ── Playing state – bindi turns golden ──────────── */
.ocp-toggle[aria-pressed="true"] {
  background: radial-gradient(circle at 38% 36%,
    #f0d060 0%,
    var(--ocp-gold) 52%,
    #9a6e18 100%
  );
  border-color: var(--ocp-gold-light);
  box-shadow:
    var(--ocp-shadow),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 0 18px rgba(201, 168, 76, 0.55);
}

/* Ripple ring 1 */
.ocp-toggle[aria-pressed="true"]::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 168, 76, 0.7);
  animation: ocp-ripple 2s ease-out infinite;
  pointer-events: none;
}

/* Ripple ring 2 – staggered */
.ocp-toggle[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.4);
  animation: ocp-ripple 2s ease-out 0.8s infinite;
  pointer-events: none;
}

@keyframes ocp-ripple {
  0%   { opacity: 0.8; transform: scale(1); }
  80%  { opacity: 0;   transform: scale(1.7); }
  100% { opacity: 0;   transform: scale(1.7); }
}

/* ── Speaker icon ───────────────────────────────── */
.ocp-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ocp-btn-icon svg {
  display: block;
  stroke: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  transition: stroke var(--ocp-transition);
}

.ocp-toggle[aria-pressed="true"] .ocp-btn-icon svg {
  stroke: rgba(50, 28, 0, 0.88);
}

/* Always hide text label – icon-only bindi */
.ocp-btn-label { display: none !important; }

/* ── Popup volume panel ─────────────────────────── */
.ocp-panel {
  position: absolute;
  background: var(--ocp-bg-panel);
  border: 1px solid var(--ocp-border);
  border-radius: 12px;
  box-shadow: var(--ocp-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  width: 158px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85) translateY(6px);
  transition:
    opacity   0.2s ease,
    transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Panel anchored above bindi for bottom positions */
.ocp-bottom-right .ocp-panel {
  bottom: calc(var(--ocp-bindi-size) + 12px);
  right: 0;
  transform-origin: bottom right;
}
.ocp-bottom-left .ocp-panel {
  bottom: calc(var(--ocp-bindi-size) + 12px);
  left: 0;
  transform-origin: bottom left;
}
/* Panel below bindi for top positions */
.ocp-top-right .ocp-panel {
  top: calc(var(--ocp-bindi-size) + 12px);
  right: 0;
  transform-origin: top right;
}
.ocp-top-left .ocp-panel {
  top: calc(var(--ocp-bindi-size) + 12px);
  left: 0;
  transform-origin: top left;
}

.ocp-panel.ocp-panel-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}

.ocp-panel-inner {
  padding: 11px 13px 12px;
}

.ocp-panel-title {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ocp-text-muted);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ocp-panel-title .ocp-om {
  color: var(--ocp-gold);
  font-size: 14px;
  line-height: 1;
}

/* Volume row */
.ocp-volume-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ocp-vol-icon {
  color: var(--ocp-text-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.ocp-vol-pct {
  font-size: 10px;
  color: var(--ocp-text-muted);
  min-width: 26px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Volume slider ──────────────────────────────── */
.ocp-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--ocp-gold) 0%,
    var(--ocp-gold) var(--ocp-fill, 25%),
    rgba(255,255,255,0.1) var(--ocp-fill, 25%),
    rgba(255,255,255,0.1) 100%
  );
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.ocp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ocp-gold-light);
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: transform 0.12s;
}
.ocp-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--ocp-gold-light);
  cursor: pointer;
}
.ocp-slider::-webkit-slider-thumb:hover { transform: scale(1.28); }
.ocp-slider::-moz-range-thumb:hover     { transform: scale(1.28); }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 480px) {
  .ocp-bottom-right { bottom: 16px; right: 16px; }
  .ocp-bottom-left  { bottom: 16px; left:  16px; }
  .ocp-top-right    { top:    16px; right: 16px; }
  .ocp-top-left     { top:    16px; left:  16px; }
  :root { --ocp-bindi-size: 42px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ocp-toggle::before,
  .ocp-toggle::after { animation: none !important; }
  .ocp-toggle, .ocp-panel { transition: none !important; }
}