.voicecorps-audio-player {
max-width: 600px;
margin: 2rem auto;
}
.vcap-audio-info {
text-align: center;
margin-bottom: 1.5rem;
}
.vcap-title {
font-size: 1.5rem;
margin: 0;
}
#vcap-audio-element {
display: none;
} .vcap-controls {
background: #f5f5f5;
border: 2px solid #ddd;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1rem;
position: relative;
} .vcap-logo-container {
display: flex;
align-items: center;
justify-content: flex-end;
width: 120px;
flex-shrink: 0;
}
.vcap-logo {
width: 100%;
height: auto;
display: block;
} .vcap-progress-container {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.5rem 0;
width: 100%;
} .vcap-volume-container {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
margin-bottom: 1rem;
padding: 0.5rem 0;
} .vcap-speed-logo-row {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
margin-bottom: 0;
} .vcap-speed-container {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
padding: 0.5rem 0;
}
.vcap-skip-controls {
display: flex;
gap: 1rem;
width: 100%;
margin-bottom: 1rem;
}
.vcap-play-pause {
width: 100%;
background: #0073aa;
color: white;
border: none;
border-radius: 6px;
padding: 0.75rem;
font-size: 1.5rem;
cursor: pointer;
transition: background 0.2s;
}
.vcap-time {
font-size: 0.875rem;
min-width: 45px;
text-align: center;
}
.vcap-progress-bar {
flex: 1;
height: 12px;
-webkit-appearance: none;
appearance: none;
background: #ddd;
border-radius: 6px;
outline: none;
cursor: pointer;
}
.vcap-progress-bar:focus {
outline: 3px solid #ffb900;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(255, 185, 0, 0.2);
}
.vcap-progress-bar::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #0073aa;
border-radius: 50%;
cursor: pointer;
}
.vcap-progress-bar::-moz-range-thumb {
width: 20px;
height: 20px;
background: #0073aa;
border-radius: 50%;
border: none;
cursor: pointer;
} .vcap-volume-container {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
margin-bottom: 1rem;
padding: 0.5rem 0;
}
.vcap-volume-toggle {
background: transparent;
border: none;
font-size: 1.5rem;
cursor: pointer;
padding: 0.25rem;
}
.vcap-volume-slider {
flex: 1;
height: 10px;
-webkit-appearance: none;
appearance: none;
background: #ddd;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.vcap-volume-slider:focus {
outline: 3px solid #ffb900;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(255, 185, 0, 0.2);
}
.vcap-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
background: #0073aa;
border-radius: 50%;
cursor: pointer;
}
.vcap-volume-slider::-moz-range-thumb {
width: 18px;
height: 18px;
background: #0073aa;
border-radius: 50%;
border: none;
cursor: pointer;
} .vcap-speed-container {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
margin-bottom: 1rem;
padding: 0.5rem 0;
}
.vcap-speed-label {
font-size: 1rem;
font-weight: 500;
}
.vcap-speed-select {
flex: 1;
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
cursor: pointer;
}
.vcap-speed-select:focus {
outline: 3px solid #ffb900;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(255, 185, 0, 0.2);
border-color: #0073aa;
} .vcap-skip-controls {    clear: both;    display: flex;
gap: 1rem;
width: 100%;
margin-bottom: 1rem;
}
.vcap-skip-btn {
flex: 1;
background: white;
color: #0073aa;
border: 2px solid #0073aa;
border-radius: 6px;
padding: 0.75rem 1rem;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s;
}
.vcap-skip-btn:hover {
background: #0073aa;
color: white;
}
.vcap-skip-btn:focus {
outline: 1px solid #ffb900;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(255, 185, 0, 0.2);
} .vcap-play-pause {    clear: both;    width: 100%;
background: #0073aa;
color: white;
border: none;
border-radius: 6px;
padding: 0.75rem;
font-size: 1.5rem;
cursor: pointer;
transition: background 0.2s;
}
.vcap-play-pause:hover {
background: #005a87;
}
.vcap-play-pause:focus {
outline: 3px solid #ffb900;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(255, 185, 0, 0.2);
}
.vcap-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.vcap-icon {
display: inline-block;
} .vcap-navigation {
display: flex;
gap: 1rem;
width: 100%;
margin-bottom: 1rem;
}
.vcap-nav-btn {
flex: 1;
background: #0073aa;
color: white;
border: none;
border-radius: 6px;
padding: 0.75rem 1rem;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
}
.vcap-nav-btn:hover {
background: #005a87;
}
.vcap-nav-btn:focus {
outline: 3px solid #ffb900;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(255, 185, 0, 0.2);
}
.vcap-nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
} .vcap-back-link {
text-align: center;
padding-top: 1rem;
border-top: 1px solid #ddd;
}
.vcap-back-btn {
display: inline-block;
padding: 0.5rem 1rem;
color: #0073aa;
text-decoration: none;
border-radius: 4px;
}
.vcap-back-btn:hover {
text-decoration: underline;
}
.vcap-back-btn:focus {
outline: 3px solid #ffb900;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(255, 185, 0, 0.2);
}
.vcap-no-file {
text-align: center;
padding: 2rem;
color: #666;
} @media (max-width: 768px) {
.voicecorps-audio-player {
max-width: 100%;
margin: 1rem;
}
.vcap-controls {
padding: 1rem;
}
.vcap-title {
font-size: 1.25rem;
} .vcap-play-pause {
padding: 1rem;
font-size: 1.75rem;
min-height: 60px;
}
.vcap-skip-btn,
.vcap-nav-btn {
padding: 1rem;
font-size: 1rem;
min-height: 56px;
} .vcap-progress-bar {
height: 16px;
}
.vcap-progress-bar::-webkit-slider-thumb {
width: 28px;
height: 28px;
}
.vcap-progress-bar::-moz-range-thumb {
width: 28px;
height: 28px;
}
.vcap-volume-slider {
height: 14px;
}
.vcap-volume-slider::-webkit-slider-thumb {
width: 24px;
height: 24px;
}
.vcap-volume-slider::-moz-range-thumb {
width: 24px;
height: 24px;
} .vcap-speed-select {
padding: 0.75rem;
font-size: 1rem;
min-height: 48px;
} .vcap-speed-logo-row {
flex-direction: column;
align-items: stretch;
}
.vcap-speed-container {
width: 100%;
margin-bottom: 1rem;
}
.vcap-logo-container {
width: 100%;
justify-content: center;
margin-bottom: 0;
}
.vcap-logo {
max-width: 180px;
} .vcap-back-btn {
padding: 0.75rem 1.5rem;
font-size: 1rem;
min-height: 48px;
}
}
@media (max-width: 480px) {
.voicecorps-audio-player {
margin: 0.5rem;
}
.vcap-controls {
padding: 0.75rem;
border-radius: 6px;
}
.vcap-title {
font-size: 1.1rem;
word-break: break-word;
} .vcap-play-pause {
font-size: 2rem;
min-height: 64px;
} .vcap-skip-controls {
gap: 0.5rem;
}
.vcap-navigation {
gap: 0.5rem;
} .vcap-time {
font-size: 0.8rem;
min-width: 40px;
} .vcap-volume-label,
.vcap-speed-label {
font-size: 0.95rem;
}
} @media (hover: none) and (pointer: coarse) {
.vcap-btn,
.vcap-skip-btn,
.vcap-nav-btn,
.vcap-back-btn {
min-height: 48px;
padding: 0.875rem 1rem;
}
.vcap-progress-bar,
.vcap-volume-slider {
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 115, 170, 0.2);
} .vcap-play-pause:hover,
.vcap-skip-btn:hover,
.vcap-nav-btn:hover {
background: initial;
}
.vcap-play-pause:active {
background: #005a87;
}
.vcap-skip-btn:active {
background: #0073aa;
color: white;
}
.vcap-nav-btn:active {
background: #005a87;
}
}.wp-block-kadence-iconlist ul.kt-svg-icon-list:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc){list-style:none;padding:0;display:grid}.wp-block-kadence-iconlist ul.kt-svg-icon-list li.kt-svg-icon-list-item-wrap:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc){display:flex}.wp-block-kadence-iconlist ul.kt-svg-icon-list{padding:0;list-style:none;margin:0 0 10px 0;text-align:left;grid-template-rows:auto;display:grid;gap:5px 0}.wp-block-kadence-iconlist ul.kt-svg-icon-list svg{width:1em;height:1em}.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap{display:flex;align-items:center;padding:0}.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:10px;padding:4px 0;display:inline-flex;justify-content:center;align-items:center}.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-link{display:flex;align-items:center}.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap:last-child{margin-bottom:0}.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-level-0{padding-left:0rem}.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-level-1{padding-left:2rem}.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-level-2{padding-left:4rem}.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-level-3{padding-left:6rem}.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-level-4{padding-left:8rem}.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-level-5{padding-left:10rem}.rtl .wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-left:10px;margin-right:0}.kb-icon-list-tooltip-wrap{display:flex;align-items:center}.wp-block-kadence-listitem .kb-icon-list-tooltip:where(:not(.kb-list-tooltip-no-border)){border-bottom:1px dashed currentColor}.wp-block-kadence-listitem .kt-svg-icon-link>.kb-icon-list-tooltip{border-bottom:none}.wp-block-kadence-iconlist.kt-list-icon-aligntop ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap{align-items:flex-start}.wp-block-kadence-iconlist.kt-list-icon-alignbottom ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap{align-items:flex-end}.wp-block-kadence-iconlist.aligncenter .kt-svg-icon-list-item-wrap{justify-content:center}.kt-svg-icon-list-style-stacked .kt-svg-icon-list-single{border-style:solid;border-width:0}.kt-svg-icon-list-columns-2 ul.kt-svg-icon-list{grid-template-columns:repeat(2, minmax(0, 1fr))}.kt-svg-icon-list-columns-3 ul.kt-svg-icon-list{grid-template-columns:repeat(3, minmax(0, 1fr))}.wp-block-kadence-iconlist.kt-list-icon-aligntop ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap a.kt-svg-icon-link{align-items:flex-start}.wp-block-kadence-iconlist.kt-list-icon-alignbottom ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap a.kt-svg-icon-link{align-items:flex-end}@media(max-width: 1024px){.kt-tablet-svg-icon-list-columns-1 ul.kt-svg-icon-list{grid-template-columns:minmax(0, 1fr)}.kt-tablet-svg-icon-list-columns-2 ul.kt-svg-icon-list{grid-template-columns:repeat(2, minmax(0, 1fr))}.kt-tablet-svg-icon-list-columns-3 ul.kt-svg-icon-list{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media(max-width: 767px){.kt-mobile-svg-icon-list-columns-1 ul.kt-svg-icon-list{grid-template-columns:minmax(0, 1fr)}.kt-mobile-svg-icon-list-columns-2 ul.kt-svg-icon-list{grid-template-columns:repeat(2, minmax(0, 1fr))}.kt-mobile-svg-icon-list-columns-3 ul.kt-svg-icon-list{grid-template-columns:repeat(3, minmax(0, 1fr))}}