/**
 * CACIB Custom ReadSpeaker Skin
 * Customizes ReadSpeaker webReader to match CACIB brand colors
 * 
 * Brand Colors:
 * - Primary: #007d57 (teal/green)
 * - Primary Hover: #00926a
 * - Background: #f7f8f8
 * - Text: #262a2d
 */

/* ========================================
 * Listen Button Styling
 * ======================================== */
.rsbtn_play {
  background: #f7f8f8 !important;
}

.rsbtn_play .rsbtn_left .rsbtn_text span {
  color: #007d57 !important;
  font-weight: 600 !important;
  font-family: "Open Sans", sans-serif !important;
}

.rsbtn_play .rsbtn_left .rsbtn_text::before {
  color: #007d57 !important; /* Speaker icon */
}

.rsbtn_play .rsbtn_right {
  border-left-color: #007d57 !important;
}

.rsbtn_play .rsbtn_right::before {
  color: #007d57 !important; /* Play icon */
}

/* Hover state */
.rsbtn_play:hover {
  background: #ffffff !important;
  /* border-color: #00926a !important; */
  box-shadow: 0 2px 4px rgba(0, 125, 87, 0.1) !important;
}

.rsbtn_play:hover .rsbtn_left .rsbtn_text span {
  color: #00926a !important;
}

.rsbtn_play:hover .rsbtn_left .rsbtn_text::before {
  color: #00926a !important; /* Speaker icon */
}

.rsbtn_play:hover .rsbtn_right {
  border-left-color: #00926a !important;
}

.rsbtn_play:hover .rsbtn_right::before {
  color: #00926a !important; /* Play icon */
}

/* Focus state for accessibility */
.rsbtn_play:focus {
  outline: 2px solid #007d57 !important;
  outline-offset: 2px !important;
}

/* ========================================
 * Menu Toggle Button
 * ======================================== */
.rsbtn_tooltoggle {
  background: #f7f8f8 !important;
}

.rsbtn_tooltoggle .rsicn {
  color: #007d57 !important;
}

.rsbtn_tooltoggle:hover {
  background: #ffffff !important;
  border-color: #00926a !important;
}

.rsbtn_tooltoggle:hover .rsicn {
  color: #00926a !important;
}

.rsbtn_tooltoggle:focus {
  outline: 2px solid #007d57 !important;
  outline-offset: 2px !important;
}

/* Menu toggle when expanded */
.rsbtn.zoom-tooltoggler .rsbtn_tooltoggle,
.rsbtn.zoom-tooltoggler .rsbtn_tooltoggle:hover {
  background: #007d57 !important;
  border-color: #007d57 !important;
}

.rsbtn.zoom-tooltoggler .rsbtn_tooltoggle .rsicn {
  color: #ffffff !important;
}

/* ========================================
 * Toolbar/Menu
 * ======================================== */
.rsbtn_tools {
  background: #ffffff !important;
  border: 1px solid #dfe1e3 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Menu items */
.rsbtn_tools .rsbtn_tool {
  color: #262a2d !important;
  font-family: "Open Sans", sans-serif !important;
  transition: background-color 0.2s ease-in-out !important;
}

.rsbtn_tools .rsbtn_tool:hover {
  background: rgba(0, 125, 87, 0.05) !important;
}

.rsbtn_tools .rsbtn_tool:focus {
  outline: 2px solid #007d57 !important;
  outline-offset: -2px !important;
}

/* Active state */
.rsbtn_tools .rsbtn_tool.active {
  background: rgba(0, 125, 87, 0.1) !important;
}

.rsbtn_tools .rsbtn_tool.active .rs_minitoggler::after {
  background: #007d57 !important;
}

.rsbtn_tools .rsbtn_tool .rsicn {
  color: #007d57 !important;
}

/* Toggle switches */
.rsbtn_tools .rs_minitoggler {
  background: #dfe1e3 !important;
  border-color: #007d57 !important;
}

.rsbtn_tools .rs_minitoggler::after {
  background: #dfe1e3 !important;
  transition: background 0.2s ease-in-out !important;
}

/* ========================================
 * Pop-up Control Panel (bottom right)
 * ======================================== */
.rsbtn_popup {
  background: #ffffff !important;
  border: 2px solid #007d57 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.rsbtn_popup .rsbtn_ctrl {
  color: #007d57 !important;
}

.rsbtn_popup .rsbtn_ctrl:hover {
  color: #00926a !important;
  background: rgba(0, 125, 87, 0.05) !important;
}

/* ========================================
 * Dark Mode Support
 * ======================================== */
.dark .rsbtn_play, .dark .rsbtn_exp_inner {
  background: #1a1a1a !important;
}

.dark .rsbtn_play .rsbtn_left .rsbtn_text span {
  color: #00926a !important;
}

.dark .rsbtn_play .rsbtn_left .rsbtn_text::before {
  color: #00926a !important;
}

.dark .rsbtn_play .rsbtn_right {
  border-left-color: #00926a !important;
}

.dark .rsbtn_play .rsbtn_right::before, .dark .rsbtn_exp_inner .rsicn:not(.rsicn-stop)::before, .dark #rs-controlpanel .rsicn::before {
  color: #00926a !important;
}

.dark .rsbtn_play:hover, .dark .rsbtn_tools:hover, .dark #rs-controlpanel button:hover {
  background: #262a2d !important;
}

.dark .rsbtn_tools .rs_minitoggler::after {
  background: #00926a !important;
  transition: background 0.2s ease-in-out !important;
}

.dark .rsbtn_play:hover .rsbtn_left .rsbtn_text span,
.dark .rsbtn_play:hover .rsbtn_left .rsbtn_text::before,
.dark .rsbtn_play:hover .rsbtn_right::before {
  color: #00a87a !important;
}

.dark .rsbtn_tooltoggle, .dark #rs-controlpanel {
  background: #1a1a1a !important;
}

.dark .rsbtn_tools {
  background: #1a1a1a !important;
  border-color: #262a2d !important;
}

.dark .rsbtn_tools .rsbtn_tool {
  color: #f7f8f8 !important;
}

.dark .rsbtn_tools .rsbtn_tool:hover {
  background: rgba(0, 146, 106, 0.1) !important;
}

.dark .rsbtn_tools .rsbtn_tool.active {
  background: rgba(0, 146, 106, 0.15) !important;
}

.dark .rsbtn_tools .rsbtn_tool .rsicn {
  color: #00926a !important;
}

.dark .rsbtn_btnlabel, .dark .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_powered a, .dark .rs-controlpanel-scroll-label {
  color: #f7f8f8 !important;
}

.dark .rs_minitoggler {
  border-color: #00926a !important;
}

.dark .rsbtn_tools .rsbtn_tool.active .rs_minitoggler::after {
  background: #00926a !important;
}