/* --- Styles for Meta Box --- */
.sonic-play-meta-box .meta-box-row{margin-bottom:15px}.sonic-play-meta-box .toggle-switch{display:flex;border:1px solid #ccd0d4;border-radius:4px;overflow:hidden;width:fit-content}.sonic-play-meta-box .toggle-switch label{padding:8px 15px;cursor:pointer;background-color:#f6f7f7;color:#2271b1;border-left:1px solid #ccd0d4;transition:background-color .2s ease}.sonic-play-meta-box .toggle-switch label:first-child{border-left:none}.sonic-play-meta-box .toggle-switch input[type=radio]{display:none}.sonic-play-meta-box .toggle-switch input[type=radio]:checked+label{background-color:#2271b1;color:#fff;font-weight:600}.sonic-play-meta-box .source-panel{padding:15px;border:1px solid #ccd0d4;border-top:none;background-color:#fff}.sonic-play-meta-box #sonic_play_url_panel{display:none}.sonic-play-meta-box .url-input{width:70%}.sonic-play-meta-box .file-info{display:inline-block;margin-left:10px;font-style:italic;color:#50575e}

/* --- Styles for Visual Theme Selector --- */
.theme-browser .theme{border:1px solid #ddd;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff;position:relative;float:left;margin:0 2% 2% 0;width:31.8%}.theme.active{border:2px solid #2271b1}.theme-screenshot{display:block;overflow:hidden;position:relative;border-bottom:1px solid #ddd}.theme-screenshot img{display:block;width:100%;height:auto;transition:opacity .5s}.theme:hover .theme-screenshot img{opacity:.7}.theme-name{font-size:15px;font-weight:600;margin:0;padding:15px;line-height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.theme-name span{font-weight:400;color:#50575e}.theme-actions{position:absolute;bottom:0;right:0;left:0;padding:10px;background:rgba(244,244,244,.7);opacity:0;transition:opacity .1s ease-in-out;display:flex;justify-content:center;gap:10px}.theme:hover .theme-actions{opacity:1}.add-new-theme-wrapper{margin-top:40px;padding-top:20px;border-top:1px solid #ddd}.theme-actions .button{box-shadow:none;text-shadow:none;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.theme-actions .button-primary{background:#2271b1;border-color:#2271b1;color:#fff}.theme-actions .button-primary:focus,.theme-actions .button-primary:hover{background:#1e5a87;border-color:#1e5a87;color:#fff}.theme-actions .button-secondary{background:#f0f0f0;border-color:#ccc;color:#32373c}.theme-actions .button-secondary:focus,.theme-actions .button-secondary:hover{background:#e0e0e0;border-color:#bbb;color:#32373c}.theme-actions .button.disabled{background:#ececec!important;border-color:#ddd!important;color:#777!important;cursor:default;pointer-events:none}
.themes-buttons { height: 20px; }
/* --- Styles for Click-to-Copy Shortcode --- */
.sonic-play-shortcode-copy{cursor:pointer;border-bottom:1px dotted #2271b1;transition:background-color .2s ease}.sonic-play-shortcode-copy:hover{background-color:#f0f6fc}
#sonic-play-toast{visibility:hidden;min-width:150px;background-color:#32373c;color:#fff;text-align:center;border-radius:4px;padding:12px;position:fixed;z-index:99999;left:50%;bottom:30px;transform:translateX(-50%);opacity:0;transition:visibility 0s .3s,opacity .3s linear}
#sonic-play-toast.show{visibility:visible;opacity:1;transition:opacity .3s linear}

/* --- Styles for New Dashboard --- */
:root { --primary-color: #2271b1; --pro-color: #6c5ce7; --bg-light: #f6f7f7; --bg-white: #ffffff; --border-color: #e0e0e0; --text-dark: #2c3338; --text-light: #50575e; --status-published-bg: #d7f3e1; --status-published-text: #145c31; --status-draft-bg: #f0f0f1; }
.dashboard-container { max-width: 1200px; margin: 0; padding: 0; }
.dashboard-header { padding-bottom: 20px; border-bottom: 1px solid var(--border-color); margin-bottom: 30px; }
.dashboard-header h1 { font-size: 28px; margin: 0; }
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
.card { display: flex; align-items: center; padding: 25px 20px; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 8px; text-decoration: none; color: var(--text-dark); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.07); }
.card .icon { width: 40px; height: 40px; margin-right: 15px; color: var(--primary-color); }
.card .card-title { font-size: 16px; font-weight: 600; }
.card.card-pro { background: var(--pro-color); color: white; }
.card.card-pro .icon { color: white; }
.dashboard-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: flex-start; }
.recent-tracks { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.recent-tracks h2 { font-size: 18px; padding: 20px; margin: 0; border-bottom: 1px solid var(--border-color); }
.recent-tracks table { width: 100%; border-collapse: collapse; }
.recent-tracks th, .recent-tracks td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--border-color); }
.recent-tracks tbody tr:last-child td { border-bottom: none; }
.recent-tracks th { font-size: 13px; font-weight: 600; color: var(--text-light); }
.status-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.status-badge.publish { background: var(--status-published-bg); color: var(--status-published-text); }
.status-badge.draft, .status-badge.pending { background: var(--status-draft-bg); color: var(--text-dark); }
.status-badge.private { background-color: #fce9e8; color: #821813; }
.sidebar { position: sticky; top: 50px; }
.sidebar-box { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 8px; padding: 25px; margin-bottom: 20px; }
.sidebar-box h3 { font-size: 18px; margin-top: 0; margin-bottom: 20px; display: flex; align-items: center; }
.sidebar-box h3 .icon { width: 24px; height: 24px; margin-right: 10px; color: var(--pro-color); }
.sidebar-box ul { list-style: none; padding: 0; margin: 0 0 25px 0; }
.sidebar-box li { padding: 8px 0 8px 30px; position: relative; color: var(--text-light); }
.sidebar-box li::before { content: '✔'; position: absolute; left: 0; color: var(--pro-color); font-weight: 600; }
.sidebar-box .sonic-play-button { display: block; width: 100%; box-sizing: border-box; padding: 12px; background: var(--pro-color); color: white; text-align: center; text-decoration: none; font-size: 16px; font-weight: 600; border-radius: 5px; transition: background-color 0.2s ease; border: none; }
.sidebar-box .sonic-play-button:hover { background: #5244b8; }
@media (max-width: 960px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-layout { grid-template-columns: 1fr; } }
@media (max-width: 782px) { .cards-grid { grid-template-columns: 1fr; } }



/* --- Styles for Upgrade to Pro Page --- */

.sonic-play-pro-page {

    max-width: 900px;

    margin: 20px auto;

    background: #fff;

    border-radius: 8px;

    padding: 20px 40px 40px 40px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.05);

}


.sonic-play-pro-page .header-section {

    text-align: center;

    margin-bottom: 40px;

}


.sonic-play-pro-page .header-section .dashicons {

    font-size: 50px;

    width: 50px;

    height: 50px;

    color: #6c5ce7; /* A nice purple accent */

}


.sonic-play-pro-page .header-section h1 {

    font-size: 28px;

    margin-top: 10px;

    color: #2c3e50;

}


.sonic-play-pro-page .header-section .subtitle {

    font-size: 16px;

    color: #50575e;

    max-width: 600px;

    margin: 10px auto 0;

}


.sonic-play-pro-page .feature-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 25px;

    margin-bottom: 40px;

}


.sonic-play-pro-page .feature-card {

    background: #f7f8fa;

    padding: 25px;

    border-radius: 5px;

    border: 1px solid #e5e5e5;

    text-align: center;

}


.sonic-play-pro-page .feature-card .dashicons {

    font-size: 36px;

    width: 36px;

    height: 36px;

    color: #6c5ce7;

}


.sonic-play-pro-page .feature-card h3 {

    margin: 10px 0;

    font-size: 18px;

    color: #2c3e50;

}


.sonic-play-pro-page .feature-card p {

    font-size: 14px;

    line-height: 1.6;

    color: #50575e;

}


.sonic-play-pro-page .cta-section {

    text-align: center;

    padding-top: 30px;

    border-top: 1px solid #eee;

}


.sonic-play-pro-page .cta-section p {

    font-size: 16px;

    font-weight: 600;

}


.sonic-play-pro-page .cta-section .button-hero {

    margin-top: 10px;

    padding: 10px 30px;

    height: auto;

    font-size: 18px;

    background: #6c5ce7;

    border-color: #5848c8;

}

.sonic-play-pro-page .cta-section .button-hero:hover {

    background: #5848c8;

}


.sonic-play-pro-page .cta-section .guarantee {

    font-size: 13px;

    margin-top: 15px;

    color: #777;

    font-weight: normal;

}


/* --- Fix for Theme Selector Button Hover Effects --- */

.sonic-play-pro-page .feature-card .button-primary:hover,

.sonic-play-pro-page .feature-card .button-secondary:hover {

    color: #fff; /* Ensure text stays white on hover */

    /* Add any other specific hover styles if needed, e.g., slightly darker background */

    background-color: #5848c8; /* Example for primary button */

    border-color: #5848c8; /* Example for primary button */

}