/*
Theme Name: PodcastTexts
Theme URI: https://podcasttexts.com
Author: Derek Snyder
*/

body {
    font-family: 'Roboto', sans-serif;
    background-color: white;
    color: #1a1a1a;
    font-size: 1rem;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100% !important;
}

p {
    font-weight: 400;
    line-height: 28px;
}

h1, h2, h3, h4, h5, h6 {
    color: #221A64;
    font-weight: bold;
    margin-bottom: 24px;
}
h1 {
    font-size: 39px;
}
h2 {
    font-size: 30px;
}
h3 {
    font-size: 24px;
}
h5 {
    font-size: 19px;
}

b, strong, u {
    color:#221A64;
}

.btn {
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 8px 24px !important;
    border:none !important;
}
.btn.round {
    border-radius: 20px !important;
}
.btn.primary, .btn-primary, .btn-success {
    background-image: linear-gradient(to right, #57B7A6 0%, #5EBE7B 100%);
    color: #FBF9FF;
}
.btn.primary:hover, .btn-primary:hover, .btn-success:hover {
    background-image: linear-gradient(to right, #B8376D 0%, #E95C68 100%);
    color: white;
}
.btn.secondary {
    border: 2px solid #D1536A;
    background-image: linear-gradient(to right, #B8376D 0%, #E95C68 100%);
    color:#FBF9FF;
}
.btn.secondary:hover {
    border: 2px solid #57B7A6;
    background-image: linear-gradient(to right, #57B7A6 0%, #5EBE7B 100%);
    color: #FBF9FF;
}
.btn.tertiary, .btn-secondary {
    background-color:white;
    border: 2px solid #E95C68 !important;
    color:#E95C68;
}
.btn.tertiary:hover, .btn-secondary:hover {
    border: 2px solid #57B7A6 !important;
    color:#57B7A6;
}
button:disabled,
button[disabled] {
    background-image: none !important;
    background-color: #ccc !important;
    color:#555 !important;
    border-color:#555 !important;
}

a {
    color: #57B7A6;
}
a:hover {
    color: #5EBE7B;
}

/* body::selection, body::-moz-selection {
    background: #FF9DA5;
} */

::-moz-selection { background: #FF9DA5; color: #FFF; }
::selection { background: #FF9DA5; color: #FFF; }

/* Animations */
.animate {
    opacity: 0;
    transform: translate(0, 10vh);
}
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes fadeUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
@keyframes slideInRight {
    from {
        transform: translate3d(80px,0,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
.fadeIn {
    animation: fadeIn 2.4s;
    transform: translate(0, 0);
}
.fadeUp {
    animation: fadeUp 1s;
    transform: translate(0, 0);
}
.slideInRight {
    animation: slideInRight 1s;
    transform: translate(0, 0);
}
/* End Animations */

/* Modal styling */
#workerModal .modal-dialog {
    padding-top: 20%;
}
#workerModal .modal-content {
    max-width: 80px !important;
    max-height: 80px !important;
    padding-top:10px;
    padding-bottom:10px;
    margin:0 auto;
}
#workerModal .modal { 
    text-align: center;
}
/* End Modal styling */

.navbar {
    background-color: black;
    color: #FBF9FF;
    font-size: 0.9em;
}
.navbar .navbar-collapse {
    /* width: auto !important;
    flex-grow: 0 !important ; */
    justify-content: flex-end;
    margin-right: 30px;
}
/* .navbar .navbar-toggler {
    color: white;
    border-color: white !important;
} */
.navbar a {
    color: white;
}
.navbar a:hover, .navbar.scrolled a:hover {
    color: #5EBE7B;
}
.navbar.scrolled {
    background-color: #fff !important;
    transition: background-color 200ms linear;
    filter: drop-shadow(0px 4px 4px #EBEBEB);
}
.navbar.scrolled a {
    color: #5B2EC2;
}
.navbar.scrolled a.btn {
    color: #FBF9FF;
}

.main-content-area1 {
    padding-top: 45px;
    float:left;
    width:100%;
}

#site-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#site-banner, #howitworks .banner, #pricing .banner {
    background-color: black;
    color: #fff;
    position: relative; 
    width:100%;
    float:left;
    color: #FBF9FF;
}
#site-banner::before, #howitworks .banner::before, #pricing .banner::before {
    content: "";
    padding-right: auto;
    padding-left: auto;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../podcasttexts/assets/images/waveform-main-bkg.jpg);
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.40;
    /* mask-image: url(../podcasttexts/assets/images/wave-path-1.png);
    mask-position: center, top left;
    mask-repeat: no-repeat, no-repeat; */
}
.wave-path-bottom {
    position: absolute;
    z-index: 2;
    bottom: -3px;
    width: 100%;
}
.wave-path-top {
    position: absolute;
    z-index: 1;
    top: -3px;
    width: 100%;
}
#site-banner h1, #site-banner h2, #site-banner h3, #site-banner h4, #site-banner h5, #site-banner h6,
#howitworks .banner h1, #howitworks .banner h2, #howitworks .banner h3,
#pricing .banner h1, #pricing .banner h2, #pricing .banner h3 {
    color: #FBF9FF;
}
.banner img {
    z-index: 2;
    position: absolute;
}
#howitworks .step {
    padding-top: 50px;
    width: 337px !important;
    text-align: center;
    margin: 0 auto;
}
#howitworks .step h3 {
    overflow-wrap: break-word;
}
#howitworks .step img {
    max-height: 50px;
    width: auto;
}

#site-banner .message {
    margin-top: 100px;
}

#site-banner .content-container {
    padding-top: 220px;
    padding-bottom: 220px;
}
.content-container {
    padding-top: 90px;
    padding-bottom: 90px;
}

#site-features .feature {
    margin-top: 20px;
    /* opacity: 0; */
}

#services {
    padding-bottom: 120px;
}
.services-col-1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#howitworks .banner {
    min-height: 300px;
}

#pricing .banner {
    padding: 9% 0;
    /* height: 350px; */
}

/* Slider */
.pg-slider {
    /* float:left; */
    width: 158px;
    background-color: #F2F2F2;
    border-radius: 20px;
    font-size: 13px;
    margin: 0 auto;
    height: 100%;
    color: #424242;
}
.pg-slider .slot, .pg-slider .content {
    float:left;
    width: 100%;
    /* padding: 6px 10px; */
}
.pg-slider .slot {
    position: relative;
}
.pg-slider .slider-btn {
    position: absolute;
    z-index: 1;
    float:left;
    width: 50%;
    height: 100%;
    border-radius: 20px;
    filter: drop-shadow(4px 4px 4px #EBEBEB);
    background-color: white;
}
.pg-slider .content {
    z-index: 1;
    position: relative;
    padding-top: 8%;
    width: 158px;
    min-height: 42px;
}
.pg-slider .content span {
    float:left;
    width: 50%;
    font-weight: bold;
    text-decoration: underline;
    /* color: #424242; */
}
.pg-slider .content span:hover {
    cursor: pointer;
}
/* End Slider */

.plans, .manual-pricing-list {
    margin:30px auto;
    padding:0px;
    width:980px;
    list-style-type: none;
    height: auto;
}
.manual-pricing-list {
    width: auto !important;
    display:inline-block;
}
.plans li, .manual-pricing-list li {
    float:left;
    width: 310px;
    border: 1px solid #FCFAFA;
    background-color: white;
    text-align: initial;
    padding: 60px 37px 43px 37px;
    margin-right: 15px;
    border-radius: 4px;
    filter: drop-shadow(4px 4px 4px #EBEBEB);
}
.manual-pricing-list li {
    width: auto !important;
    max-width: 230px;
}
.plans li:last-child, .manual-pricing-list li:last-child {
    margin:0px;
}
.plans ul, .manual-pricing-list ul {
    float:left;
    list-style-type: none;
    border:none;
    width: 100%;
    margin:0px;
    padding:0px;
}
.plans li li, .manual-pricing-list li li {
    float:left;
    width: 100% !important;
    padding: 0px;
    margin-bottom: 15px;
    border:none;
    filter:none !important;
    border-radius: 0px;
    font-size: 14px;
}
.manual-pricing-list li li {
    text-align: center;
}
.manual-pricing-list p {
    color: #E95C68;
}
.plans .popular {
    border-radius:5px;
    top:15px;
    right:0px;
    padding: 8px 18px;
    background-color:#E85966;
    color:white;
    font-weight: bold;
    position:absolute;
}
.plans .price-container {
    margin: 30px 0 20px 0;
    float:left;
    width: 100%;
}
.plans .price-container .pricing {
    float:left;
    width: 50%;
    font-size: 34px;
    font-weight: bold;
    color: #211A44;
}
.plans .price-container .data {
    padding-top:8px;
    float:left;
    width: 50%;
    font-size: 13px;
    font-weight: 500;
}
.plans .price-container .data span:last-child {
    color:#B4B3B6;
}
.plans .btn {
    width: 100%;
}

#main-footer {
    background-color: black;
    color: #B9B7C5;
    float:left;
    width: 100%;
    padding: 100px 120px 16px 120px;
    font-size: 13px;
    margin-top: 20px;
}
#main-footer h1, #main-footer h2, #main-footer h3, #main-footer h4, #main-footer h5 {
    color: white;
}
#main-footer a {
    color:#B9B7C5;
    text-decoration: underline;
}
#main-footer a:hover, #main-footer .social-media-icons a:hover {
    color: #5EBE7B;
}
#main-footer .social-media-icons {
    color: white;
    margin: 50px auto 0 auto;
    padding:0px;
    list-style-type: none;
    width:auto;
}
#main-footer .social-media-icons li {
    float:left;
    font-size: 29px;
    margin-right: 30px;
}
#main-footer .social-media-icons li:last-child {
    margin:0px;
}
#main-footer .social-media-icons a {
    color: white;
}
#main-footer .bottom hr {
    border-color: #332F61;
    float:left;
    width: 100%;
}

/* Page Styling */
.page-container {
    margin-top: 40px;
    margin-bottom: 40px;
}
.page h1, .page h2, .page h3, .page h4 {
    margin-top:40px;
}
/* End Page Styling */


/* For mobile phones: */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
and (orientation : portrait),
only screen and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) {

    .navbar-toggler {
        border-color:green;
    }
    .navbar-toggler-icon {
        color:green;
        fill: green;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(94,190,123, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }
    .navbar .action {
        display:none;
    }

    .navbar .navbar-collapse {
        margin-right:0px;
    }
    .navbar-nav a {
        text-align: center;
    }

    /* Modal Styles */
    #workerModal .modal-dialog {
        padding-top: 60%;
    }
    /* End Modal Styles */
    
    #site-banner .content-container {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    #site-features .content-container {
        padding-bottom: 40px;
        display:block;
    }

    #howitworks .banner .img-col {
        text-align: center;
    }
    .banner img {
        z-index: 0;
        position: relative;
    }

    #services {
        text-align: center;
    }

    .plans, .plans li, .manual-pricing-list, .manual-pricing-list li {
        width: 100%;
    }
    .plans li, .manual-pricing-list li {
        margin-bottom: 30px;
        max-width: none !important;
        width:100% !important;
    }
    .plans li:last-child, .manual-pricing-list:last-child {
        margin-bottom: 0px;
    }

    #pricing .banner {
        padding-bottom: 0px;
    }

    #main-footer {
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
    }
    #main-footer .logo {
        margin-bottom: 40px;
    }
    #main-footer .company-info ul {
        list-style-type: none;
        padding-left: 0px;
        margin-left: 0px;
    }
    #main-footer .social-media-icons {
        width: 80% !important;
    }
    
}
/* ============================================
   GLOBAL DARK MODE SUPPORT
   Applied when data-theme="dark" is set on <html>
   ============================================ */

[data-theme="dark"] body {
    background-color: #141414 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
    background: linear-gradient(to right, #D870A0, #5EBE7B) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #5EBE7B !important;
}

[data-theme="dark"] b,
[data-theme="dark"] strong {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .navbar {
    background-color: #1a1a1a !important;
}

/* Form elements in dark mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #222222 !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder {
    color: #888 !important;
}

/* Cards and containers */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content {
    background-color: #1c1c1c !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

/* Upload/checkout page specific */
[data-theme="dark"] .page-content,
[data-theme="dark"] .container {
    color: #e0e0e0;
}

[data-theme="dark"] .bg-light {
    background-color: #222222 !important;
}

/* Links in dark mode */
[data-theme="dark"] a {
    color: #5EBE7B;
}

[data-theme="dark"] a:hover {
    color: #7dd99a;
}

/* Processing badge readability fix */
[data-theme="dark"] .badge-secondary {
    background-color: #e67e22 !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Error badge */
.badge-danger {
    background-color: #e74c3c !important;
    color: #ffffff !important;
}

/* Table/list styling in dark mode */
[data-theme="dark"] .gs-table,
[data-theme="dark"] .gs-table th,
[data-theme="dark"] .gs-table td {
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

[data-theme="dark"] .gs-table thead {
    background-color: #1a1a1a !important;
}

/* Footer in dark mode */
[data-theme="dark"] footer,
[data-theme="dark"] #main-footer {
    background-color: #111111 !important;
    color: #888 !important;
}

/* Dropdown menus */
[data-theme="dark"] .dropdown-menu {
    background-color: #222222 !important;
    border-color: #444 !important;
}

[data-theme="dark"] .dropdown-item {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: #2d2d2d !important;
}

/* Radio buttons and checkboxes labels */
[data-theme="dark"] label {
    color: #e0e0e0 !important;
}

/* Subscription expired notice */
[data-theme="dark"] .sub-expired {
    color: #e74c3c !important;
}

/* Order total and pricing */
[data-theme="dark"] .order-total,
[data-theme="dark"] .price {
    color: #5EBE7B !important;
}

/* Upload/checkout white boxes - make them dark */
[data-theme="dark"] .upload-area,
[data-theme="dark"] .card,
[data-theme="dark"] .checkout-box,
[data-theme="dark"] .well,
[data-theme="dark"] .panel {
    background-color: #222222 !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
}

/* Subscription/order sidebar box */
[data-theme="dark"] .sub-expired,
[data-theme="dark"] .order-sidebar,
[data-theme="dark"] [class*="subscription"] {
    background-color: #222222 !important;
    border: 1px solid #444 !important;
}

/* File list table area */
[data-theme="dark"] .file-list,
[data-theme="dark"] #ptDivUploadedFiles {
    background-color: transparent !important;
}

/* Any remaining white backgrounds on checkout */
[data-theme="dark"] .checkout-section,
[data-theme="dark"] .payment-section {
    background-color: #141414 !important;
}

/* Upload drag-drop areas */
[data-theme="dark"] .upload-box,
[data-theme="dark"] .dz-default {
    background-color: #222222 !important;
    border: 2px dashed #5EBE7B !important;
    color: #e0e0e0 !important;
}

/* Promo code input */
[data-theme="dark"] .promo-input,
[data-theme="dark"] input[type="text"] {
    background-color: #222222 !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
}

/* Sub-headings on checkout like "TRANSCRIBE VERBATIM" */
[data-theme="dark"] .section-title,
[data-theme="dark"] h4,
[data-theme="dark"] h5 {
    color: #b0b0b0 !important;
}

/* Make the "Add Custom Vocabulary | Set Speaker Count" links pop */
[data-theme="dark"] .file-options a,
[data-theme="dark"] .btn-link {
    color: #5EBE7B !important;
}

/* Fix any pure white text-on-white-bg containers */
[data-theme="dark"] div[style*="background-color: white"],
[data-theme="dark"] div[style*="background-color:#fff"],
[data-theme="dark"] div[style*="background: white"] {
    background-color: #222222 !important;
}

/* Force override any white backgrounds in dark mode */
[data-theme="dark"] div,
[data-theme="dark"] section,
[data-theme="dark"] aside {
    border-color: #444 !important;
}

/* Target the right sidebar subscription/order box by its white background */
[data-theme="dark"] .col-md-4 > div,
[data-theme="dark"] .col-md-3 > div,
[data-theme="dark"] .col-lg-4 > div,
[data-theme="dark"] .col-lg-3 > div {
    background-color: #222222 !important;
    color: #e0e0e0 !important;
}

/* Target file list container area */
[data-theme="dark"] .col-md-8 > div,
[data-theme="dark"] .col-lg-8 > div {
    background-color: transparent !important;
}

/* Override inline white backgrounds */
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"] {
    background-color: #222222 !important;
}

/* Payment page */
[data-theme="dark"] .paypal-button-container {
    background-color: transparent !important;
}

/* Make ORDER TOTAL label readable */
[data-theme="dark"] .order-total-label,
[data-theme="dark"] [class*="order"] {
    color: #e0e0e0 !important;
}

/* ============================================
   HIGHLIGHT MODES — Word Tracking During Playback
   Four modes: Highlighter, Karaoke Ball, Neon Glow, Typewriter
   ============================================ */

/* === MODE 1: HIGHLIGHTER (default) — solid color block like a real marker pen === */
word.highlightWord {
    background-color: rgba(155, 77, 202, 0.55) !important;
    border-radius: 2px;
    padding: 2px 3px;
    color: #ffffff !important;
    font-weight: 500;
    animation: none !important;
    transition: background-color 0.1s ease;
}

[data-theme="dark"] word.highlightWord {
    background-color: rgba(94, 190, 123, 0.6) !important;
    color: #ffffff !important;
}

/* === MODE 2: KARAOKE BALL === */
#karaoke-ball {
    display: none;
    position: absolute;
    z-index: 9999;
    font-size: 18px;
    line-height: 1;
    color: #5EBE7B;
    pointer-events: none;
    transform: translateX(-50%);
    text-shadow: 0 0 8px rgba(94, 190, 123, 0.6);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

#karaoke-ball.bounce {
    animation: karaokeBounce 0.35s ease-out;
}

@keyframes karaokeBounce {
    0%   { transform: translateX(-50%) translateY(0); }
    30%  { transform: translateX(-50%) translateY(-14px); }
    50%  { transform: translateX(-50%) translateY(-12px); }
    70%  { transform: translateX(-50%) translateY(-14px) scale(1.15); }
    100% { transform: translateX(-50%) translateY(0) scale(1); }
}

/* Karaoke mode: green underline + keep text visible */
[data-highlight-mode="karaoke"] word.highlightWord {
    background-color: rgba(94, 190, 123, 0.15) !important;
    border-bottom: 3px solid #5EBE7B;
    color: inherit !important;
    animation: none;
}

[data-theme="dark"] [data-highlight-mode="karaoke"] word.highlightWord {
    background-color: rgba(94, 190, 123, 0.2) !important;
    color: #e0e0e0 !important;
}

/* === MODE 3: NEON GLOW — no background, pure glowing text like a neon sign === */
word.hl-neon {
    color: #ff44aa !important;
    background-color: transparent !important;
    text-shadow:
        0 0 8px #ff44aa,
        0 0 20px #ff44aa,
        0 0 40px #ff44aa,
        0 0 60px #D870A0,
        0 0 90px #9B4DCA !important;
    transition: text-shadow 0.2s ease, color 0.2s ease;
    border-radius: 3px;
    padding: 1px 4px;
    font-weight: 700;
    animation: neonFlicker 2s ease-in-out infinite;
}

@keyframes neonFlicker {
    0%, 100% { text-shadow: 0 0 8px #ff44aa, 0 0 20px #ff44aa, 0 0 40px #ff44aa, 0 0 60px #D870A0, 0 0 90px #9B4DCA; color: #ff44aa; }
    50% { text-shadow: 0 0 12px #ff66cc, 0 0 30px #ff44aa, 0 0 55px #ff44aa, 0 0 80px #D870A0, 0 0 120px #9B4DCA; color: #ff66cc; }
    92% { text-shadow: 0 0 4px #ff44aa, 0 0 10px #ff44aa; color: #cc3388; }
    94% { text-shadow: 0 0 12px #ff66cc, 0 0 25px #ff44aa, 0 0 50px #ff44aa, 0 0 70px #D870A0, 0 0 100px #9B4DCA; color: #ff66cc; }
}

[data-theme="dark"] word.hl-neon {
    color: #5EBE7B !important;
    background-color: transparent !important;
    text-shadow:
        0 0 10px #5EBE7B,
        0 0 25px #5EBE7B,
        0 0 50px #5EBE7B,
        0 0 80px #D870A0,
        0 0 120px #9B4DCA !important;
}

/* === MODE 4: TYPEWRITER === */
word.hl-typewriter-past {
    color: inherit !important;
    opacity: 1 !important;
    transition: opacity 0.15s ease;
}

word.hl-typewriter-future {
    opacity: 0.2 !important;
    transition: opacity 0.15s ease;
}

[data-theme="dark"] word.hl-typewriter-past {
    color: #e0e0e0 !important;
}

[data-theme="dark"] word.hl-typewriter-future {
    opacity: 0.15 !important;
}

/* ============================================
   PROCESSING STATUS BADGE ANIMATION
   ============================================ */
.badge-processing {
    background-color: #e67e22 !important;
    color: #ffffff !important;
    animation: processingPulse 2s ease-in-out infinite;
}

@keyframes processingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ============================================
   KARAOKE MODE DROPDOWN
   ============================================ */
#karaoke-mode-options .toolbar-item-opts {
    min-width: 160px;
}

#karaoke-mode-options .karaoke-opt span {
    display: block;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

#karaoke-mode-options .karaoke-opt span:hover {
    background-color: rgba(94, 190, 123, 0.15);
}

#karaoke-mode-options .karaoke-opt.active-mode span {
    background-color: rgba(94, 190, 123, 0.25);
    font-weight: 600;
}

#karaoke-mode-options .karaoke-opt.active-mode span::after {
    content: ' ✅';
    font-size: 12px;
}

[data-theme="dark"] #karaoke-mode-options .karaoke-opt span:hover {
    background-color: rgba(94, 190, 123, 0.2);
}

[data-theme="dark"] #karaoke-mode-options .karaoke-opt.active-mode span {
    background-color: rgba(94, 190, 123, 0.3);
}

/* ============================================
   KARAOKE BALL — Bouncing dot above the word
   ============================================ */
#karaoke-ball {
    position: absolute;
    display: none;
    font-size: 18px;
    color: #5EBE7B;
    pointer-events: none;
    z-index: 9999;
    transform: translateX(-50%);
    text-shadow: 0 0 8px rgba(94, 190, 123, 0.6);
    transition: left 0.12s ease-out, top 0.12s ease-out;
}

#karaoke-ball.bounce {
    animation: karaokeBounce 0.35s ease-out;
}

@keyframes karaokeBounce {
    0%   { transform: translateX(-50%) translateY(0); }
    30%  { transform: translateX(-50%) translateY(-14px); }
    50%  { transform: translateX(-50%) translateY(-10px); }
    70%  { transform: translateX(-50%) translateY(-12px); }
    100% { transform: translateX(-50%) translateY(0); }
}

/* ============================================
   NEON GLOW MODE
   ============================================ */
word.hl-neon {
    text-shadow: 
        0 0 7px rgba(94, 190, 123, 0.8),
        0 0 15px rgba(94, 190, 123, 0.5),
        0 0 30px rgba(184, 55, 109, 0.4) !important;
    color: #ffffff !important;
    transition: text-shadow 0.2s ease;
}

[data-theme="dark"] word.hl-neon {
    text-shadow: 
        0 0 10px rgba(94, 190, 123, 1),
        0 0 20px rgba(94, 190, 123, 0.7),
        0 0 40px rgba(184, 55, 109, 0.5),
        0 0 60px rgba(94, 190, 123, 0.3) !important;
    color: #ffffff !important;
}

@keyframes neonFlicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.8; }
    94% { opacity: 1; }
}

word.hl-neon {
    animation: neonFlicker 3s ease-in-out infinite;
}

/* ============================================
   TYPEWRITER MODE (kept for future use)
   ============================================ */
word.hl-typewriter-past {
    opacity: 1;
    color: inherit;
}

word.hl-typewriter-future {
    opacity: 0.3;
    transition: opacity 0.15s ease;
}

/* ============================================
   MOBILE RESPONSIVE — Toolbar & Dropdowns
   ============================================ */
@media (max-width: 768px) {
    /* Make toolbar wrap on small screens */
    .editor-toolbar {
        flex-wrap: wrap;
        gap: 2px;
    }
    
    .toolbar-item {
        min-width: 36px;
        min-height: 36px;
    }
    
    /* Ensure dropdowns don't overflow screen */
    .toolbar-item-opts {
        right: 0;
        left: auto;
        max-width: 200px;
    }
    
    #karaoke-mode-options .toolbar-item-opts {
        right: 0;
        left: auto;
        min-width: 150px;
    }
    
    /* Larger touch targets for dropdown items on mobile */
    #karaoke-mode-options .karaoke-opt span {
        padding: 10px 14px;
        font-size: 15px;
    }
    
    .toolbar-item-opts li {
        min-height: 40px;
        display: flex;
        align-items: center;
    }
    
    /* Karaoke ball positioning fix for mobile */
    #karaoke-ball {
        font-size: 14px;
    }
    
    /* Make bouncing ball not interfere with touch scrolling */
    #karaoke-ball {
        pointer-events: none;
    }
}

/* Touch device: ensure toolbar dropdowns are tappable */
@media (hover: none) {
    .toolbar-item-list:active .toolbar-item-opts,
    .toolbar-item-list:focus-within .toolbar-item-opts {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #karaoke-mode-options .karaoke-opt span {
        padding: 12px 14px;
    }
}

/* ============================================
   THEME TOGGLE — Actual toggle switch design
   ============================================ */
.theme-switch-wrapper {
    z-index: 10;
}

.theme-switch {
    position: relative;
    display: inline-block;
}

.theme-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.theme-switch .slider.round {
    background: linear-gradient(135deg, #9B4DCA, #D870A0) !important;
    border: none !important;
    width: 170px;
    height: 36px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: all 0.3s ease;
    position: relative;
    padding: 0 12px 0 40px;
}

.theme-switch .slider.round::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    left: 4px;
    top: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.theme-switch input:checked + .slider.round::before {
    transform: translateX(132px);
}

.theme-switch input:checked + .slider.round {
    background: linear-gradient(135deg, #D870A0, #9B4DCA) !important;
    padding: 0 40px 0 12px;
}

.theme-switch .slider.round span {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    white-space: nowrap;
}

.theme-switch .slider.round:hover {
    box-shadow: 0 3px 14px rgba(155, 77, 202, 0.5);
    transform: scale(1.03);
}

[data-theme="dark"] .theme-switch .slider.round {
    background: linear-gradient(135deg, #9B4DCA, #D870A0) !important;
}

/* ============================================
   GRADIENT HEADINGS — Light mode
   Short headings get the brand gradient
   ============================================ */

/* Footer headings */
#main-footer h3,
#main-footer h4,
footer h3,
footer h4 {
    background: linear-gradient(to right, #D870A0, #5EBE7B) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Page section headings */
.page-content h2,
.page-content h3,
.section-title {
    background: linear-gradient(to right, #D870A0, #5EBE7B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Transcript title on editor page */
.transcript-title h3,
#transcriptTitle {
    background: linear-gradient(to right, #D870A0, #5EBE7B) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* "How would you rate" heading */
.rating-section h4,
.rating-section p:first-child {
    background: linear-gradient(to right, #D870A0, #5EBE7B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

/* Hero / landing page headings (if applicable) */
.hero h1,
.hero h2,
.banner h1,
.banner h2 {
    background: linear-gradient(to right, #D870A0, #5EBE7B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Don't gradient-ify long body text, table cells, or form labels */
.gs-table h3,
.gs-table h4,
.modal-title,
label h3,
label h4 {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: inherit !important;
    background-clip: unset !important;
}

/* ============================================
   FONT SELECTOR DROPDOWN
   ============================================ */
#font-selector .toolbar-item-opts {
    min-width: 170px;
}

#font-selector .font-opt span {
    display: block;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

#font-selector .font-opt span:hover {
    background-color: rgba(94, 190, 123, 0.15);
}

#font-selector .font-opt.active-font span {
    background-color: rgba(94, 190, 123, 0.25);
    font-weight: 600;
}

#font-selector .font-opt.active-font span::after {
    content: ' ✓';
    color: #5EBE7B;
    font-size: 12px;
}

[data-theme="dark"] #font-selector .font-opt span:hover {
    background-color: rgba(94, 190, 123, 0.2);
}

[data-theme="dark"] #font-selector .font-opt.active-font span {
    background-color: rgba(94, 190, 123, 0.3);
}

/* ============================================
   LIGHT MODE — ALL text and buttons BLACK
   ============================================ */

/* Toolbar buttons — black icons */
.toolbar-item,
.toolbar-item i,
.toolbar-item span,
.btn-action,
.tran-action {
    color: #000000 !important;
}

/* Editor text — black */
.ql-editor,
.scroller,
.ql-editor word,
.scroller word,
.ql-editor p,
.scroller p {
    color: #000000 !important;
}

/* Transcript title — gradient in both modes */
#tranTitle {
    background: linear-gradient(to right, #D870A0, #5EBE7B) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Speaker labels — black and bold */
speaker, .speaker-lbl, lbl {
    color: #000000 !important;
    font-weight: 700;
}

/* Timestamps — dark */
timestamp, .time-stamp, ts {
    color: #333333 !important;
}

/* Rating section text */
.rating-section,
.rating-section p,
div:has(> .star-rating) p,
div:has(> .star-rating) {
    color: #000000 !important;
}

/* Dropdown items — black text */
.toolbar-item-opts li span,
.toolbar-item-opts li a,
.karaoke-opt span,
.font-opt span,
.font-size-opt span,
.litest span {
    color: #000000 !important;
}

/* General content */
p, span, div, li, td, th, label {
    color: inherit;
}

/* Dark mode overrides — restore light colors */
[data-theme="dark"] .toolbar-item,
[data-theme="dark"] .toolbar-item i,
[data-theme="dark"] .toolbar-item span,
[data-theme="dark"] .btn-action,
[data-theme="dark"] .tran-action {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .ql-editor,
[data-theme="dark"] .scroller,
[data-theme="dark"] .ql-editor word,
[data-theme="dark"] .scroller word,
[data-theme="dark"] .ql-editor p,
[data-theme="dark"] .scroller p {
    color: var(--transcript-text-color, #e0e0e0) !important;
}

[data-theme="dark"] speaker,
[data-theme="dark"] .speaker-lbl,
[data-theme="dark"] lbl {
    color: #5EBE7B !important;
}

[data-theme="dark"] timestamp,
[data-theme="dark"] .time-stamp,
[data-theme="dark"] ts {
    color: #888888 !important;
}

[data-theme="dark"] .toolbar-item-opts li span,
[data-theme="dark"] .toolbar-item-opts li a,
[data-theme="dark"] .karaoke-opt span,
[data-theme="dark"] .font-opt span,
[data-theme="dark"] .font-size-opt span,
[data-theme="dark"] .litest span {
    color: #e0e0e0 !important;
}

/* Ensure toolbar dropdowns appear above transcript content */
.toolbar-item-list {
    position: relative;
}

.toolbar-item-list .toolbar-item-opts {
    z-index: 9999 !important;
}

#karaoke-mode-options .toolbar-item-opts,
#font-selector .toolbar-item-opts {
    z-index: 9999 !important;
    position: absolute;
}

/* ============================================
   MODE 5: SPOTLIGHT — Dim everything except current word
   ============================================ */
word.hl-spotlight-dim {
    opacity: 0.25 !important;
    transition: opacity 0.2s ease;
}

[data-theme="dark"] word.hl-spotlight-dim {
    opacity: 0.2 !important;
}

/* Current word in spotlight mode gets bright treatment */
[data-highlight-mode="spotlight"] word.highlightWord {
    background-color: rgba(255, 230, 0, 0.6) !important;
    color: #000000 !important;
    animation: none;
    box-shadow: 0 0 15px rgba(255, 230, 0, 0.4);
    border-radius: 3px;
    padding: 1px 4px;
}

[data-theme="dark"] [data-highlight-mode="spotlight"] word.highlightWord {
    background-color: rgba(94, 190, 123, 0.7) !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(94, 190, 123, 0.5);
}

/* ============================================
   TOGGLE — Center vertically in header bar
   ============================================ */
#userActionsContainer {
    display: flex !important;
    align-items: center !important;
    min-height: 50px;
}

#userActionsContainer > .col-md-12 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
}

.theme-switch-wrapper {
    display: flex !important;
    align-items: center !important;
    z-index: 10;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   FONT SIZE SELECTOR
   ============================================ */
#font-size-selector .toolbar-item-opts {
    min-width: 140px;
}

#font-size-selector .font-size-opt span {
    display: block;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

#font-size-selector .font-size-opt span:hover {
    background-color: rgba(94, 190, 123, 0.15);
}

#font-size-selector .font-size-opt.active-font span {
    background-color: rgba(94, 190, 123, 0.25);
    font-weight: 600;
}

#font-size-selector .font-size-opt.active-font span::after {
    content: ' ✓';
    color: #5EBE7B;
    font-size: 12px;
}

[data-theme="dark"] #font-size-selector .font-size-opt span:hover {
    background-color: rgba(94, 190, 123, 0.2);
}

/* ============================================
   TRANSCRIPT TITLE — Rename hover effect
   ============================================ */
#tranTitle:hover {
    opacity: 0.8;
    text-decoration: underline;
    text-decoration-color: #5EBE7B;
    text-underline-offset: 4px;
}

#tranTitleEditIcon:hover {
    color: #5EBE7B !important;
}

#tranTitleInput {
    border: 2px solid #5EBE7B !important;
    border-radius: 8px;
}

[data-theme="dark"] #tranTitleInput {
    background-color: #222222 !important;
    color: #e0e0e0 !important;
}

/* ============================================
   TOP-RIGHT HEADER ICONS — Same purple both modes, aligned
   ============================================ */
.actionsList {
    display: flex !important;
    align-items: center !important;
    list-style: none;
    margin: 0;
    padding: 0;
}

.actionsList li {
    align-items: center;
    justify-content: center;
    margin: 0 6px;
}

.actionsList li:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex;
}

#lnkNavToList,
#lnkNavToList i,
#lnkNavToList .far,
#lnkNavToList .fas,
li#btnInfo i,
li#btnInfo .fas,
li#btnInfo .fa-info-circle,
li#btnTips i,
li#btnTips .fas,
li#btnTips .fa-question-circle,
li#btnTips .tran-action {
    color: #7B2D9E !important;
    font-size: 20px !important;
    transition: color 0.2s ease;
    line-height: 1 !important;
}

#lnkNavToList:hover,
#lnkNavToList:hover i,
li#btnInfo:hover i,
li#btnTips:hover i {
    color: #9B4DCA !important;
}

/* Dark mode: SAME purple as classic mode */
[data-theme="dark"] #lnkNavToList,
[data-theme="dark"] #lnkNavToList i,
[data-theme="dark"] #lnkNavToList .far,
[data-theme="dark"] li#btnInfo i,
[data-theme="dark"] li#btnInfo .fas,
[data-theme="dark"] li#btnInfo .fa-info-circle,
[data-theme="dark"] li#btnTips i,
[data-theme="dark"] li#btnTips .fas,
[data-theme="dark"] li#btnTips .tran-action {
    color: #7B2D9E !important;
}

[data-theme="dark"] #lnkNavToList:hover,
[data-theme="dark"] #lnkNavToList:hover i,
[data-theme="dark"] li#btnInfo:hover i,
[data-theme="dark"] li#btnTips:hover i {
    color: #9B4DCA !important;
}

/* Also fix the spotlight light mode highlight color to match purple */
[data-highlight-mode="spotlight"] word.highlightWord {
    background-color: rgba(155, 77, 202, 0.5) !important;
    box-shadow: 0 0 15px rgba(155, 77, 202, 0.4);
}

/* ============================================
   UPLOAD BUTTON — Prevent text overflow
   ============================================ */
.ptBtnUploadFiles,
button[class*="Upload"],
.btn-upload,
#btnUploadFiles {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    padding: 8px 16px !important;
}

/* ============================================
   MOBILE RESPONSIVE — Full layout
   ============================================ */
@media (max-width: 992px) {
    /* Toolbar wraps */
    .toolbar-item {
        min-width: 32px;
        min-height: 32px;
        padding: 4px !important;
    }
    
    /* Stack file list columns */
    .gs-table td,
    .gs-table th {
        font-size: 13px;
        padding: 6px 4px !important;
    }
}

@media (max-width: 768px) {
    /* Toggle switch scales down */
    .theme-switch .slider.round {
        min-width: 130px !important;
        height: 32px;
        font-size: 10px;
    }
    
    .theme-switch .slider.round::before {
        width: 26px;
        height: 26px;
    }
    
    .theme-switch input:checked + .slider.round::before {
        transform: translateX(92px);
    }
    
    .theme-switch .slider.round span {
        font-size: 9px !important;
        letter-spacing: 0.3px;
    }
    
    /* Toolbar: 2 rows, smaller icons */
    .editor-toolbar,
    .row > .col-md-12 > div:has(.toolbar-item) {
        flex-wrap: wrap !important;
        gap: 2px;
    }
    
    .toolbar-item {
        min-width: 30px !important;
        min-height: 30px !important;
        font-size: 14px;
    }
    
    /* Upload button */
    .ptBtnUploadFiles,
    button[class*="Upload"] {
        max-width: 130px;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
    
    /* File list: hide less important columns */
    .gs-table .col-uploaded,
    .gs-table th:nth-child(3),
    .gs-table td:nth-child(3) {
        display: none;
    }
    
    /* Scroller/editor padding */
    .scroller {
        padding: 0 8px !important;
    }
    
    /* Search bar */
    #searchInput,
    input[placeholder*="Sear"] {
        max-width: 120px;
    }
    
    /* Transcript title smaller on mobile */
    #tranTitle {
        font-size: 1rem !important;
    }
    
    /* Dropdown menus don't overflow */
    .toolbar-item-opts {
        right: 0 !important;
        left: auto !important;
        max-width: 90vw;
    }
}

@media (max-width: 480px) {
    /* Phone: minimal toolbar */
    .toolbar-item {
        min-width: 28px !important;
        min-height: 28px !important;
        font-size: 12px;
    }
    
    .toolbar-item i {
        font-size: 13px;
    }
    
    /* Header icons smaller */
    .actionsList li {
        margin: 0 2px !important;
    }
    
    /* Toggle even smaller */
    .theme-switch .slider.round {
        min-width: 110px !important;
        height: 28px;
    }
    
    .theme-switch .slider.round::before {
        width: 22px;
        height: 22px;
    }
    
    .theme-switch input:checked + .slider.round::before {
        transform: translateX(80px);
    }
    
    /* Player controls compact */
    #waveform {
        height: 40px !important;
    }
    
    /* File list page */
    .ptBtnUploadFiles {
        max-width: 100px;
        font-size: 11px !important;
    }
    
    /* Editor text readable on phone */
    .ql-editor, .scroller {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}