/*
Admin styles for Video & Audio Player.

Table of contents:
==================
1. General Layout & Structure
2. Typography & Text Styles
3. Tab Navigation
4. Cards & Content Sections
5. Tables & Data Display
6. Buttons & Interactive Elements
7. Service & Contact Sections (Guide Page)
8. Hire Me Page Styles
9. Responsive Design
10. Utility Classes
*/

:root {
    --lpl-admin-preview-notice-offset: 6px;
    --lpl-admin-feature-row-padding-block: 5px;
    --lpl-admin-space-compact: 10px;
    --lpl-admin-space-field: 15px;
    --lpl-admin-builder-offset: 5px;
    --lpl-admin-builder-action-gap: 6px;
    --lpl-admin-builder-column-padding: 14px;
    --lpl-admin-builder-drag-font-size: 15px;
    --lpl-admin-builder-pill-padding-block: 2px;
    --lpl-admin-builder-add-all-padding-block: 3px;
    --lpl-admin-builder-player-row-padding-block: 7px;
    --lpl-admin-builder-badge-padding-block: 1px;
    --lpl-admin-highlight-padding-block: 2px;
    --lpl-admin-highlight-padding-inline: var(--lex-space-1, 4px);
    --lpl-admin-highlight-minimal-padding-block: 1px;
    --lpl-admin-highlight-minimal-padding-inline: var(--lex-radius-xs, 3px);
    --lpl-admin-highlight-minimal-radius: 2px;
    --lpl-admin-font-size-tiny: 10px;
    --lpl-admin-shadow-service: 0 4px 20px color-mix(in srgb, var(--wp-color-black) 8%, transparent);
    --lpl-admin-shadow-service-hover: 0 12px 40px color-mix(in srgb, var(--wp-color-black) 12%, transparent);
    --lpl-admin-shadow-soft: 0 2px 4px color-mix(in srgb, var(--wp-color-black) 5%, transparent);
    --lpl-admin-shadow-success: 0 2px 8px color-mix(in srgb, var(--wp-color-green-30) 25%, transparent);
    --lpl-admin-shadow-success-hover: 0 4px 12px color-mix(in srgb, var(--wp-color-green-30) 35%, transparent);
    --lpl-admin-shadow-primary-soft: 0 2px 4px color-mix(in srgb, var(--lex-color-brand-primary) 15%, transparent);
    --lpl-admin-shadow-builder-modal: 0 8px 40px color-mix(in srgb, var(--wp-color-black) 18%, transparent);
    --lpl-admin-shadow-builder-card-hover: 0 2px 8px color-mix(in srgb, var(--wp-color-blue-50) 12%, transparent);
    --lpl-admin-shadow-highlight: 0 1px 2px color-mix(in srgb, var(--wp-color-black) 10%, transparent);
    --lpl-admin-shadow-highlight-minimal: 0 0.5px 1px color-mix(in srgb, var(--wp-color-black) 3%, transparent);

    /* Playlist builder tokens */
    --lpl-b-blue:          var(--wp-color-blue-50);
    --lpl-b-blue-bg:       var(--wp-color-blue-0);

    --lpl-b-red:           var(--wp-color-red-50);

    --lpl-b-border:        var(--wp-color-gray-5);
    --lpl-b-radius:        6px;
    --lpl-b-radius-sm:     var(--lex-radius-sm, 4px);
    --lpl-b-radius-pill:   10px;

    --lpl-b-text-mid:      var(--wp-color-gray-60);
    --lpl-b-text-faint:    var(--wp-color-gray-30);

    --lpl-b-surface:       var(--wp-color-white);

    --lpl-b-font-base:     var(--lex-font-size-md);
    --lpl-b-font-sm:       var(--lex-font-size-xs, 11px);
    --lpl-b-font-xs:       var(--lex-font-size-xs);
}

/* #fs_connect div also carries class="wrap" (see freemius/templates/connect.php).
   lex-settings-core.css has a rule "#wpcontent .wrap" with higher specificity
   (1 id + 5 classes) that was overriding margin here on Freemius connect page.
   Adding #wpcontent + .wrap bumps our id/class count above it, so no !important
   needed and lex-settings-core.css stays untouched for every other page. */
   #wpcontent #fs_connect.wrap {
    margin-right: auto;
    margin-top: 60px;
}

/* Body scope also covers WP's own chrome; keep the arrow off the admin menu. */
.lpl-scope .wp-submenu a[target="_blank"]::after {
    content: none;
}

/* 1. General Layout & Structure
================================================== */
/* Override core */
.post-type-lean_player #preview-action,
.post-type-lean_player #visibility,
.post-type-lean_playlist #preview-action,
.post-type-lean_playlist #visibility{
    display: none;
}

.post-type-lean_player .lpl-preview-metabox,
.post-type-lean_playlist .lpl-preview-metabox{
    display:flex;
    align-items: flex-start;
    justify-content: start;
    margin-block-end: var(--lpl-admin-feature-row-padding-block);
    flex-direction: column;
}

.post-type-lean_player a.preview.button,
.post-type-lean_playlist a.preview.button{
    display: inline-flex;
    align-items: center;
    gap: var(--lpl-admin-feature-row-padding-block);
}
.post-type-lean_player a.preview.button span,
.post-type-lean_playlist a.preview.button span{
    line-height: 1;
}

.lpl-preview-metabox .dashicons-visibility {
    display: flex;
    align-items: center;
}

.post-type-lean_playlist a.preview.button.lpl-pla__preview-btn--dirty{
    opacity: 0.45;
    pointer-events: none;
}

.lpl-pla__preview-notice{
    margin-block: var(--lpl-admin-preview-notice-offset) 0;
    margin-inline: 0;
    font-size: var(--lex-font-size-xs, 11px);
    color: var(--wp-color-red-60);
    line-height: 1.4;
}


.lpl-hire-page{
    padding: var(--lex-space-5, 20px);
}

.lpl-hire-page .lpl-heading-1{
    margin-top:0;
}

/* Layout Classes - For positioning only */
.lpl-layout--two-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--lex-space-5, 20px);
    margin-top: var(--lex-space-5, 20px);
}

.lpl-layout__main {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
}

.lpl-layout__sidebar {
    width: 310px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

/* Get Support Card Styles */
.lpl-admin__support {
    margin-bottom: var(--lex-space-5, 20px);
}

/* Professional Service Card Styles */
.lpl-admin__service {
    border-radius: var(--lex-radius-xl, 16px);
    padding: var(--lex-space-6, 24px);
    box-shadow: var(--lpl-admin-shadow-service);
    -webkit-transition: box-shadow 0.3s ease, -webkit-transform 0.3s ease;
    transition: box-shadow 0.3s ease, -webkit-transform 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease;
    position: relative;
    overflow: hidden;
    background: var(--wp-color-white);
    border: 1px solid var(--wp-color-gray-2);
}

.lpl-admin__service:hover {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    box-shadow: var(--lpl-admin-shadow-service-hover);
}

.lpl-admin__service:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: -webkit-linear-gradient(left, var(--wp-color-red-20) 100%, var(--wp-color-red-5) 100%, var(--wp-color-red-5) 100%);
    background: linear-gradient(90deg, var(--wp-color-red-20) 100%, var(--wp-color-red-5) 100%, var(--wp-color-red-5) 100%);
}

.lpl-service__badge {
    background: var(--wp-color-red-0);
    color: var(--wp-color-red-50);
    border: 1px solid var(--wp-color-red-5);
    padding: var(--lpl-admin-space-service-badge-block, 6px) var(--lpl-admin-space-service-badge-inline, 14px);
    border-radius: var(--lex-radius-xl, 16px);
    font-weight: 600;
    font-size: var(--lex-font-size-xs, 11px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-block: var(--lpl-admin-space-compact) var(--lex-space-4, 16px);
    margin-inline: 0;
}

.lpl-service__heading {
    font-size: var(--lpl-admin-service-heading-font-size, 22px);
    margin-block: 0 var(--lex-space-4, 16px);
    margin-inline: 0;
    color: var(--wp-color-gray-80);
    font-weight: 700;
    line-height: 1.2;
}

.lpl-service__description {
    font-size: var(--lex-font-size-base, 14px);
    line-height: 1.5;
    color: var(--wp-color-gray-60);
    margin-bottom: var(--lex-space-5, 20px);
}

.lpl-service__contact-heading {
    font-size: var(--lpl-admin-service-contact-heading-font-size, 15px);
    color: var(--wp-color-gray-80);
    margin-bottom: var(--lex-space-4, 16px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lpl-service__contact-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: var(--lpl-admin-space-compact, 10px);
    font-size: var(--lex-font-size-md, 13px);
    color: var(--wp-color-gray-60);
}

.lpl-service__contact-icon {
    width: 16px;
    margin-inline-end: var(--lpl-admin-space-compact);
    color: var(--wp-color-red-50);
}

.lpl-service__link {
    color: var(--wp-color-red-50);
    text-decoration: none;
    font-weight: 500;
}

.lpl-service__link:hover {
    color: var(--wp-color-red-60);
    text-decoration: underline;
}

/* 2. Typography & Text Styles
================================================== */

.lpl-admin ul{
    list-style: disc;
    -webkit-padding-start: 1.625em;
       -moz-padding-start: 1.625em;
            padding-inline-start: 1.625em;
}

.lpl-admin ul li{
    border-color: var(--wp-color-gray-90);
}

/* Custom Heading Classes - BEM Convention */
.lpl-heading-1 {
    font-size: var(--lex-font-size-3xl, 24px);
    font-weight: var(--lex-font-weight-bold, 700);
    color: var(--wp-color-gray-90);
    margin-block: var(--lex-space-5, 20px);
    margin-inline: 0;
    line-height: 1.2;
}

.lpl-heading-2 {
    font-size: var(--lex-font-size-2xl, 20px);
    font-weight: var(--lex-font-weight-semibold, 600);
    color: var(--wp-color-gray-90);
    margin-block: 0 var(--lex-space-4, 16px);
    margin-inline: 0;
    line-height: 1.2;
}

.lpl-heading-3 {
    font-size: var(--lex-font-size-2xl, 18px);
    font-weight: var(--lex-font-weight-semibold, 600);
    color: var(--wp-color-gray-90);
    margin-block: 0 var(--lex-space-3, 12px);
    margin-inline: 0;
    line-height: 1.2;
}

.lpl-admin__main-title {
    font-size: var(--lex-font-size-3xl, 24px);
    font-weight: var(--lex-font-weight-semibold, 600);
    color: var(--wp-color-gray-90);
}

.lpl-admin__subtitle {
    font-size: var(--lex-font-size-base, 14px);
    color: var(--wp-color-gray-60);
    font-style: italic;
    margin-block: calc(var(--lpl-admin-space-field) * -1) var(--lpl-admin-space-field);
    margin-inline: 0;
}

.lpl-admin__section-title {
    font-size: var(--lex-font-size-2xl, 18px);
    font-weight: 600;
    color: var(--wp-color-gray-90);
    margin-block: var(--lpl-admin-section-gap, 30px) var(--lex-space-5, 20px);
    margin-inline: 0;
}

.lpl-admin__section-title:first-of-type {
    margin-top: var(--lex-space-5, 20px);
}

.lpl-admin__footer-text {
    font-size: var(--lex-font-size-base, 14px);
    color: var(--wp-color-gray-60);
    margin-block: var(--lpl-admin-section-gap, 30px) 0;
    margin-inline: 0;
}

/* Footer Text Professional Card Style */
.lpl-admin__footer-text--card {
    color: var(--wp-color-gray-80);
    background: var(--wp-color-gray-0);
    border: 1px solid var(--wp-color-gray-2);
    border-radius: var(--lex-radius-md, 8px);
    padding-block: var(--lex-space-4, 16px);
    padding-inline: var(--lex-space-5, 20px);
    margin-block: var(--lpl-admin-section-gap, 30px) 0;
    margin-inline: 0;
    box-shadow: var(--lpl-admin-shadow-soft);
    line-height: 1.6;
}

.lpl-admin__footer-text--card a {
    color: var(--wp-color-red-50);
    text-decoration: none;
    font-weight: 600;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.lpl-admin__footer-text--card a:hover {
    color: var(--wp-color-red-60);
    text-decoration: underline;
}

/* 3. Cards & Content Sections
================================================== */

/* Basic card styling */
.lpl-card {
    background-color: var(--wp-color-white);
    padding: var(--lex-space-5, 20px);
    border-radius: var(--lex-radius-sm, 4px);
    box-shadow: var(--lex-shadow-sm);
}

/* Service card variations */
.lpl-admin__service--highlight {
    border-inline-start: 4px solid var(--wp-color-blue-50);
}

/* Sidebar Service Card - No left border */
.lpl-service--sidebar {
    border-left: none;
}

/* 5. Tables & Data Display
================================================== */

/* Shortcode Tables */
.lpl-shortcode-table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 0 var(--lex-space-5, 20px);
    margin-inline: 0;
}

.lpl-shortcode-table th {
    background: var(--wp-color-gray-2);
    border: 1px solid var(--wp-color-gray-5);
    padding: var(--lex-space-3, 12px);
    text-align: left;
    font-size: var(--lex-font-size-xs, 11px);
    font-weight: 600;
    color: var(--wp-color-gray-60);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lpl-shortcode-table th:first-child {
    width: 125px;
}

.lpl-shortcode-table td {
    border: 1px solid var(--wp-color-gray-5);
    padding: var(--lex-space-3, 12px);
    vertical-align: middle;
    background: var(--wp-color-white);
}

.lpl-shortcode-table tbody tr:nth-child(even) td {
    background: var(--wp-color-gray-0);
}

.lpl-shortcode-table code {
    font-size: var(--lex-font-size-xs, 11px);
    color: var(--wp-color-gray-90);
    background: transparent;
    padding: 0;
    border: none;
    word-break: break-all;
    white-space: pre-wrap;
    line-height: 1.4;
}

.lpl-shortcode-table td:first-child {
    color: var(--wp-color-gray-60);
    min-width: 120px;
}

.lpl-shortcode-table__action-column {
    width: 80px;
    text-align: center;
}

/* Options Table (for compatibility) */
.lpl-options-table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--lex-space-5, 20px);
    margin-inline: 0;
}

.lpl-options-table th,
.lpl-options-table td {
    padding: var(--lex-space-3, 12px);
    text-align: left;
    border: 1px solid var(--wp-color-gray-5);
    vertical-align: top;
}

.lpl-options-table th {
    background: var(--wp-color-gray-2);
    font-weight: 600;
}

.lpl-options-table code {
    background: var(--wp-color-gray-0);
    padding-block: var(--lpl-admin-highlight-padding-block);
    padding-inline: var(--lpl-admin-builder-action-gap);
    border-radius: var(--lex-radius-xs, 3px);
    font-size: var(--lex-font-size-xs, 11px);
}

.lpl-option-scope {
    display: inline-block;
    margin-inline-start: var(--lex-space-2, 8px);
    padding-block: var(--lpl-admin-highlight-minimal-padding-block);
    padding-inline: var(--lpl-admin-builder-action-gap);
    border-radius: var(--lex-radius-xs, 3px);
    font-size: var(--lpl-admin-font-size-tiny);
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
}

.lpl-option-scope--both {
    color: var(--wp-color-blue-70);
    background: var(--wp-color-blue-0);
}

.lpl-option-scope--video {
    color: var(--wp-color-green-60);
    background: var(--wp-color-green-0);
}

.lpl-option-scope--audio {
    color: var(--wp-color-red-50);
    background: var(--wp-color-red-0);
}

.lpl-options-table__section-header td {
    background: var(--wp-color-blue-0);
    font-weight: 600;
    border-top: 2px solid var(--wp-color-blue-50);
}

/* 6. Service & Contact Sections (Guide Page)
================================================== */

/* Info Block Component - BEM Structure */
.lpl-info-block {
    margin-block-start: var(--lpl-admin-info-block-gap, 25px);
    padding: var(--lex-space-5, 20px);
    border-radius: var(--lpl-admin-info-block-radius, 6px);
}

.lpl-info-block h3,
.lpl-info-block .lpl-heading-3 {
    margin-top: 0;
}

.lpl-info-block ul {
    margin-block: var(--lpl-admin-space-compact);
    margin-inline: 0;
    padding-inline-start: var(--lpl-admin-space-field);
    list-style: disc;
}

.lpl-info-block li {
    margin-bottom: var(--lex-space-2, 8px);
}

/* Info Block Modifiers */
.lpl-info-block--note {
    background: var(--wp-color-blue-0);
    border: 1px solid var(--wp-color-blue-5);
}

.lpl-info-block--note h3,
.lpl-info-block--note .lpl-heading-3 {
    color: var(--wp-color-blue-50);
}

.lpl-info-block--contact {
    background: var(--wp-color-blue-0);
    border-top: 1px solid var(--wp-color-blue-5);
    margin-top: 0;
    border-radius: 0;
}

.lpl-info-block--contact h3,
.lpl-info-block--contact .lpl-heading-3 {
    color: var(--wp-color-blue-60);
}

.lpl-info-block--success {
    border: 1px solid var(--wp-color-green-5);
}

.lpl-info-block--success h3,
.lpl-info-block--success .lpl-heading-3 {
    color: var(--wp-color-green-40);
}

.lpl-info-block--outline {
    background: transparent;
    border: 1px solid var(--wp-color-blue-5);
}

.lpl-info-block--outline h3,
.lpl-info-block--outline .lpl-heading-3 {
    color: var(--wp-color-blue-50);
}

.lpl-info-block--success-outline {
    background: transparent;
    border: 1px solid var(--wp-color-green-5);
}

.lpl-info-block--success-outline h3,
.lpl-info-block--success-outline .lpl-heading-3 {
    color: var(--wp-color-green-40);
}

/* Quick Start Page
================================================== */
.lpl-qs-page {
    --lpl-qs-card-border-width:    2px;
    --lpl-qs-card-padding-block:   18px;
    --lpl-qs-card-padding-inline:  16px;
    --lpl-qs-card-gap:             var(--lex-space-3, 12px);
    --lpl-qs-card-radius:          var(--lex-radius-lg, 12px);
    --lpl-qs-panel-padding-block:  22px;
    --lpl-qs-panel-padding-inline: 24px;
    --lpl-qs-badge-size-md:        28px;
    --lpl-qs-badge-size-sm:        26px;
    --lpl-qs-shadow-card-hover:    0 2px 12px color-mix(in srgb, var(--lex-color-brand-primary) 12%, transparent);
    --lpl-qs-shadow-card-active:   0 2px 16px color-mix(in srgb, var(--lex-color-brand-primary) 18%, transparent);
    --lpl-qs-color-brand-tint:     color-mix(in srgb, var(--lex-color-brand-primary) 5%, white);
    --lpl-qs-color-brand-light:    color-mix(in srgb, var(--lex-color-brand-primary) 8%, white);
    --lpl-qs-color-brand-code-text: color-mix(in srgb, var(--lex-color-brand-primary) 80%, black);
    max-width: 860px;
    margin-inline: auto;
}

.lpl-qs-page__heading {
    text-align: center;
    font-size: var(--lex-font-size-2xl, 20px);
    font-weight: var(--lex-font-weight-bold, 700);
    color: var(--wp-color-gray-90);
    margin-block: 0 var(--lex-space-5, 20px);
    margin-inline: 0;
}

.lpl-qs-page__subheading {
    text-align: center;
    font-size: var(--lex-font-size-base, 14px);
    color: var(--wp-color-gray-60);
    margin-block: 0 var(--lex-space-5, 20px);
    margin-inline: 0;
}

.lpl-qs-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lpl-qs-card-gap);
}

.lpl-qs-cards {
    margin-block-end: var(--lex-space-6, 24px);
}

.lpl-qs-card {
    border: var(--lpl-qs-card-border-width) solid var(--wp-color-gray-2);
    border-radius: var(--lpl-qs-card-radius);
    padding-block: var(--lpl-qs-card-padding-block);
    padding-inline: var(--lpl-qs-card-padding-inline);
    cursor: pointer;
    -webkit-transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    background: var(--wp-color-white);
    text-align: left;
}

.lpl-qs-card:hover {
    border-color: var(--lex-color-brand-primary);
    box-shadow: var(--lpl-qs-shadow-card-hover);
}

.lpl-qs-card.is-active {
    border-color: var(--lex-color-brand-primary);
    box-shadow: var(--lpl-qs-shadow-card-active);
}

.lpl-qs-card__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: var(--lex-space-2, 10px);
    margin-block-end: var(--lex-space-2, 10px);
}

.lpl-qs-card__icon {
    font-size: 22px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.lpl-qs-card__title {
    font-size: var(--lex-font-size-lg, 16px);
    font-weight: var(--lex-font-weight-bold, 700);
    color: var(--wp-color-gray-90);
    line-height: 1.3;
    margin: 0;
}

.lpl-qs-card__desc {
    font-size: var(--lex-font-size-md, 13px);
    color: var(--wp-color-gray-60);
    line-height: 1.5;
    margin-block: var(--lex-space-2, 8px) 0;
    margin-inline: 0;
    text-align: center;
}

.lpl-qs-card__cta {
    display: block;
    margin-block-start: var(--lex-space-3, 12px);
    font-size: var(--lex-font-size-md, 13px);
    font-weight: var(--lex-font-weight-semibold, 600);
    color: var(--lex-color-brand-primary);
    text-align: center;
}

.lpl-qs-card__check {
    display: none;
    font-size: 18px;
    color: var(--lex-color-brand-primary);
    font-weight: var(--lex-font-weight-bold, 700);
    margin-block-start: var(--lex-space-2, 8px);
    text-align: center;
}

.lpl-qs-card.is-active .lpl-qs-card__check {
    display: block;
}

.lpl-qs-sc {
    font-size: var(--lex-font-size-xs, 11px);
    background: var(--lpl-qs-color-brand-light);
    color: var(--lpl-qs-color-brand-code-text);
    padding-block: 1px;
    padding-inline: var(--lex-space-1, 4px);
    border-radius: var(--lex-radius-xs, 3px);
}

.lpl-qs-panel {
    display: none;
    border: 2px solid var(--wp-color-gray-2);
    border-radius: var(--lpl-qs-card-radius);
    padding-block: var(--lpl-qs-panel-padding-block);
    padding-inline: var(--lpl-qs-panel-padding-inline);
    margin-block-end: var(--lex-space-5, 20px);
    background: var(--wp-color-white);
}

.lpl-qs-panel.is-visible {
    display: block;
}

.lpl-qs-panel__title {
    font-size: var(--lex-font-size-lg, 16px);
    font-weight: var(--lex-font-weight-bold, 700);
    color: var(--wp-color-gray-90);
    margin-block: 0 var(--lex-space-4, 14px);
    margin-inline: 0;
}

.lpl-qs-panel__hint {
    font-size: var(--lex-font-size-md, 13px);
    color: var(--wp-color-gray-60);
    margin-block: 0 var(--lex-space-2, 10px);
    margin-inline: 0;
}

.lpl-qs-step-heading {
    font-size: var(--lex-font-size-xl, 18px);
    font-weight: var(--lex-font-weight-bold, 700);
    color: var(--wp-color-gray-90);
    margin-block: 0 var(--lex-space-5, 20px);
    margin-inline: 0;
}

.lpl-qs-step-body {
    margin-block-end: var(--lex-space-5, 20px);
}

.lpl-qs-step-desc {
    font-size: var(--lex-font-size-md, 13px);
    color: var(--wp-color-gray-60);
    margin-block: 0 var(--lex-space-4, 16px);
    margin-inline: 0;
}

.lpl-qs-step {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--lex-space-4, 14px);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-block-end: var(--lex-space-4, 16px);
}

.lpl-qs-step__body h4 {
    margin-block: 0 var(--lex-space-1, 4px);
    margin-inline: 0;
    font-size: var(--lex-font-size-base, 14px);
    font-weight: var(--lex-font-weight-bold, 700);
    color: var(--wp-color-gray-90);
}

.lpl-qs-step__body p {
    margin: 0;
    font-size: var(--lex-font-size-md, 13px);
    color: var(--wp-color-gray-60);
}

.lpl-qs-step__note {
    margin-block: var(--lex-space-2, 8px) 0;
    margin-inline: 0;
    font-size: var(--lex-font-size-xs, 11px);
    color: var(--wp-color-gray-50);
}

.lpl-qs-num-badge {
    background: var(--lex-color-brand-primary);
    color: var(--wp-color-white);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-weight: var(--lex-font-weight-bold, 700);
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: var(--lpl-qs-badge-size-md);
    height: var(--lpl-qs-badge-size-md);
    font-size: var(--lex-font-size-md, 13px);
    margin-block-start: 2px;
}

.lpl-qs-num-badge--sm {
    width: var(--lpl-qs-badge-size-sm);
    height: var(--lpl-qs-badge-size-sm);
    font-size: var(--lex-font-size-xs, 11px);
    margin-block: 0 var(--lex-space-2, 8px);
    margin-inline: auto;
}

.lpl-qs-code-block {
    margin-block-start: var(--lex-space-2, 8px);
}

.lpl-qs-code-label {
    font-size: var(--lex-font-size-xs, 11px);
    font-weight: var(--lex-font-weight-semibold, 600);
    text-transform: uppercase;
    color: var(--wp-color-gray-30);
    margin-block-end: 3px;
    letter-spacing: 0.04em;
}

.lpl-qs-accordion-section {
    margin-block-end: 0;
}

.lpl-qs-accordion-section.lex-settings-section--collapsed .lpl-qs-accordion-body {
    display: none;
}

.lpl-qs-accordion-body {
    padding-block: var(--lex-space-2, 8px);
    padding-inline: var(--lex-space-3, 12px);
}

.lpl-qs-accordion-body .lpl-qs-code-row {
    padding-block: var(--lex-space-2, 8px);
    padding-inline: 0;
    border-block-end: 1px solid var(--lex-color-border-subtle, #f3f4f6);
    margin-block-end: 0;
}

.lpl-qs-accordion-body .lpl-qs-code-row:last-child {
    border-block-end: none;
}



.lpl-qs-row-label {
    font-size: var(--lex-font-size-xs, 11px);
    font-weight: var(--lex-font-weight-semibold, 600);
    color: var(--lex-color-text-muted, #6b7280);
    min-inline-size: 90px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.lpl-qs-source-hint {
    font-size: var(--lex-font-size-xs, 12px);
    color: var(--lex-color-text-muted, #6b7280);
    margin-block-start: var(--lex-space-2, 8px);
    margin-block-end: 0;
}

.lpl-qs-code-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--lex-space-2, 8px);
    margin-block-end: var(--lex-space-1, 6px);
}

.lpl-qs-code-row:last-child {
    margin-block-end: 0;
}

.lpl-qs-code-row code {
    background: var(--lpl-qs-color-brand-light);
    color: var(--lpl-qs-color-brand-code-text);
    padding-block: var(--lex-space-1, 4px);
    padding-inline: var(--lex-space-2, 8px);
    border-radius: var(--lex-radius-sm, 4px);
    font-size: var(--lex-font-size-md, 13px);
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.lpl-qs-btn {
    display: inline-block;
    padding-block: var(--lex-space-1, 6px);
    padding-inline: var(--lex-space-4, 14px);
    border-radius: var(--lex-radius-md, 8px);
    font-size: var(--lex-font-size-md, 13px);
    font-weight: var(--lex-font-weight-semibold, 600);
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.lpl-qs-btn--copy {
    background: color-mix(in srgb, var(--lex-color-brand-primary) 12%, white);
    color: var(--lpl-qs-color-brand-code-text);
}

.lpl-qs-btn--primary {
    background: var(--lex-color-brand-primary);
    color: var(--wp-color-white);
}

.lpl-qs-btn--secondary {
    background: var(--wp-color-gray-0);
    color: var(--wp-color-gray-80);
    border: 1px solid var(--wp-color-gray-5);
}

.lpl-qs-note {
    background: var(--wp-color-green-0);
    border: 1px solid var(--wp-color-green-5);
    border-radius: var(--lex-radius-md, 8px);
    padding-block: var(--lex-space-2, 10px);
    padding-inline: var(--lex-space-4, 14px);
    font-size: var(--lex-font-size-md, 13px);
    color: var(--wp-color-green-60);
    margin-block-start: var(--lex-space-4, 14px);
}

.lpl-qs-note--info {
    background: var(--wp-color-blue-0);
    border-color: var(--wp-color-blue-5);
    color: var(--wp-color-blue-60);
}

.lpl-qs-note--info a {
    color: var(--wp-color-blue-60);
    font-weight: var(--lex-font-weight-semibold, 600);
}

.lpl-qs-tint-block {
    background: var(--lpl-qs-color-brand-tint);
    border-radius: var(--lex-radius-md, 8px);
    padding-block: var(--lex-space-4, 16px);
    padding-inline: var(--lex-space-4, 18px);
}

.lpl-qs-how-it-works {
    margin-block-end: var(--lex-space-4, 18px);
}

.lpl-qs-how-it-works p {
    margin-block: 0 var(--lex-space-2, 8px);
    margin-inline: 0;
    font-size: var(--lex-font-size-md, 13px);
    color: var(--wp-color-gray-60);
}

.lpl-qs-how-it-works p:last-child {
    margin-block-end: 0;
}

.lpl-qs-how-it-works strong {
    color: var(--lpl-qs-color-brand-code-text);
}

.lpl-qs-playlist-steps {
    margin-block-end: var(--lex-space-4, 16px);
}

.lpl-qs-playlist-step {
    text-align: center;
    padding-block: var(--lex-space-4, 14px);
    padding-inline: var(--lex-space-4, 14px);
}

.lpl-qs-playlist-step h4 {
    font-size: var(--lex-font-size-md, 13px);
    font-weight: var(--lex-font-weight-bold, 700);
    color: var(--wp-color-gray-90);
    margin-block: 0 var(--lex-space-1, 4px);
    margin-inline: 0;
}

.lpl-qs-playlist-step p {
    font-size: var(--lex-font-size-xs, 11px);
    color: var(--wp-color-gray-60);
    margin: 0;
}

.lpl-qs-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--lex-space-2, 10px);
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-block-start: var(--lex-space-4, 14px);
}

.lpl-qs-footer-strip {
    border: 1px solid var(--wp-color-gray-2);
    border-radius: var(--lex-radius-md, 8px);
    padding-block: var(--lex-space-3, 12px);
    padding-inline: var(--lex-space-4, 16px);
    font-size: var(--lex-font-size-md, 13px);
    color: var(--wp-color-gray-60);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: var(--lex-space-3, 12px);
}

.lpl-qs-footer-strip a {
    font-weight: var(--lex-font-weight-semibold, 600);
    color: var(--lex-color-brand-primary);
    text-decoration: none;
}

.lpl-qs-footer-strip a:hover {
    color: var(--lex-color-brand-primary-hover);
    text-decoration: underline;
}

/* 8. Hire Me Page Styles - Matching lex-settings color scheme
================================================== */

/* Page background to match settings framework */
.lean_player-settings_page_lean_player-hire-me {
    background-color: var(--wp-color-blue-0);
}

.lean_player-settings_page_lean_player-hire-me  .lpl-admin, 
.lean_player-settings_page_lean_player-hire-me .lpl-admin p{
    font-size: var(--lex-font-size-lg, 16px);
    line-height: 1.5;
    color: var(--wp-color-gray-90);
}

/* Layout Classes - Grid Layout for Hire Me Page */
.lpl-layout--grid-sidebar {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 300px;
        grid-template-columns: 1fr 300px;
    gap: var(--lex-space-6, 24px);
    -ms-grid-row-align: start;
        align-items: start;
}

.lpl-layout__content {
    background: var(--wp-color-white);
    border: 1px solid var(--wp-color-gray-5);
    border-radius: var(--lex-radius-md, 8px);
    box-shadow: var(--lex-shadow-md);
}

/* Section separator */
.lpl-section-separator {
    border: none;
    border-top: 1px solid var(--wp-color-gray-5);
    margin-block: var(--lex-space-6, 24px);
    margin-inline: 0;
    opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

/* Hire Me Page Sections */
.lpl-hire__section {
    padding: var(--lex-space-6, 24px);
}

.lpl-hire__section:last-of-type {
    border-bottom: none;
}

.lpl-hire__heading {
    font-size: var(--lex-font-size-2xl, 18px);
    font-weight: 600;
    color: var(--wp-color-gray-90);
    margin-block-end: var(--lpl-admin-space-field);
    border-bottom: 1px solid var(--wp-color-gray-5);
    padding-block-end: var(--lex-space-2, 8px);
}

/* Intro text styling */
.lpl-hire__intro-text {
    font-size: var(--lex-font-size-base, 14px);
    line-height: 1.6;
    margin-bottom: var(--lex-space-5, 20px);
    color: var(--wp-color-gray-60);
}

.lpl-hire__intro-text strong {
    font-weight: 600;
    color: var(--wp-color-gray-90);
}

/* Highlight callout section */
.lpl-hire__highlight-callout {
    background: var(--wp-color-gray-0);
    border-inline-start: 4px solid var(--lex-color-brand-primary);
    padding-block: var(--lex-space-4, 16px);
    padding-inline: var(--lex-space-5, 20px);
    margin-block: var(--lex-space-5, 20px);
    margin-inline: 0;
    font-size: var(--lex-font-size-base, 14px);
    line-height: 1.5;
    border-radius: var(--lex-radius-sm, 4px);
    margin-bottom: 0;
}

.lpl-hire__highlight-callout p {
    margin-bottom: var(--lpl-admin-space-compact, 10px);
    color: var(--wp-color-gray-60);
}

.lpl-hire__highlight-callout p:last-child {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--wp-color-gray-90);
}

/* Feature list styling */
.lpl-features {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.lpl-features__item {
    padding-block: var(--lpl-admin-feature-row-padding-block);
    padding-inline: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.lpl-features__check {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--lex-color-brand-primary);
    border-radius: 50%;
    margin-right: 12px;
    margin-top: 1px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    position: relative;
}

.lpl-features__check:before {
    content: '✓';
    color: var(--wp-color-white);
    font-size: var(--lex-font-size-xs, 11px);
    font-weight: bold;
    line-height: 1;
}

.lpl-features__item strong {
    color: var(--wp-color-gray-90);
    font-weight: 600;
}

/* Services checklist styling */
.lpl-services {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--lpl-admin-section-gap, 30px);
    margin-block: var(--lex-space-5, 20px);
    margin-inline: 0;
}

.lpl-services__column {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--lex-space-3, 12px);
}

.lpl-services__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    color: var(--wp-color-gray-90);
    background: none;
    border: none;
}

.lpl-services__check {
    width: 20px;
    height: 20px;
    background: var(--lex-color-brand-primary);
    color: var(--wp-color-white);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: var(--lex-font-size-xs, 11px);
    font-weight: bold;
    margin-inline-end: var(--lex-space-3, 12px);
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-block-start: 2px;
}

.lpl-services__item strong {
    font-weight: 600;
    color: var(--wp-color-gray-90);
}

/* Contact section styling */
.lpl-contact {
    background: var(--wp-color-gray-0);
    padding: var(--lex-space-5, 20px);
}

.lpl-contact__heading {
    font-size: var(--lex-font-size-2xl, 18px);
    font-weight: 600;
    color: var(--wp-color-gray-90);
    margin-block-end: var(--lpl-admin-space-field);
    border-bottom: none;
    padding-block-end: 0;
}

.lpl-contact__text {
    font-size: var(--lex-font-size-base, 14px);
    line-height: 1.6;
    color: var(--wp-color-gray-60);
}

.lpl-contact__buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--lex-space-3, 12px);
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

/* Strategy call styling */
.lpl-strategy-call {
    margin-block: var(--lex-space-5, 20px);
    margin-inline: 0;
}

/* Sidebar widget styling - Let's Talk Widget */
.lpl-sidebar-widget {
    background: var(--wp-color-white);
    border: 1px solid var(--wp-color-gray-5);
    border-radius: var(--lex-radius-md, 8px);
    overflow: hidden;
    box-shadow: var(--lex-shadow-md);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.lpl-sidebar-widget:hover {
    box-shadow: var(--lex-shadow-lg);
    transform: translateY(-2px);
}

.lpl-sidebar__widget-header {
    background: var(--lex-color-brand-primary);
    color: var(--wp-color-white);
    padding: var(--lex-space-5, 20px);
    text-align: center;
    position: relative;
    border-bottom: 1px solid transparent;
}

.lpl-sidebar__widget-header:after {
    display: none;
}

.lpl-sidebar__widget-heading {
    font-size: var(--lex-font-size-2xl, 18px);
    font-weight: 600;
    margin-bottom: var(--lex-space-2, 8px);
    color: var(--wp-color-white);
}

.lpl-admin .lpl-sidebar-widget .lpl-sidebar__widget-tagline {
    color: var(--wp-color-white);
    opacity: 0.95;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    font-style: italic;
    margin: 0;
    margin-top: -10px;
}

.lpl-sidebar__widget-content {
    padding: var(--lex-space-6, 24px) var(--lex-space-5, 20px) var(--lex-space-5, 20px);
}

.lpl-sidebar__widget-text {
    margin-block: var(--lex-space-5, 20px);
    margin-block-start: 0;
    text-align: center;
    color: var(--wp-color-gray-60);
}

.lpl-primary-button {
    display: block;
    text-align: center;
    text-decoration: none;
    padding-block: var(--lpl-admin-space-compact);
    padding-inline: var(--lex-space-5, 20px);
    margin-block-end: var(--lpl-admin-space-field);
    font-size: var(--lex-font-size-base, 14px);
    font-weight: 500;
    color: var(--wp-color-white);
    background: linear-gradient(135deg, var(--wp-color-green-30) 0%, var(--wp-color-green-50) 100%);
    border: none;
    border-radius: var(--lex-radius-md, 8px);
    box-shadow: var(--lpl-admin-shadow-success);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.lpl-primary-button:focus {
    outline: none;
    color: var(--wp-color-white);
}

.lpl-primary-button:hover {
    color: var(--wp-color-white);
    background: linear-gradient(135deg, var(--wp-color-green-50) 0%, var(--wp-color-green-60) 100%);
    box-shadow: var(--lpl-admin-shadow-success-hover);
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

.lpl-contact__methods {
    margin-bottom: var(--lex-space-5, 20px);
}

.lpl-contact__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-block: var(--lex-space-3, 12px);
    padding-inline: var(--lpl-admin-space-field);
    margin-bottom: var(--lex-space-2, 8px);
    font-size: var(--lex-font-size-md, 13px);
    color: var(--wp-color-gray-60);
    background: transparent;
    border: 1px solid var(--wp-color-gray-5);
    border-radius: var(--lex-radius-sm, 4px);
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.lpl-contact__item:hover {
    color: var(--lex-color-brand-primary);
    border-color: var(--lex-color-brand-primary);
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    box-shadow: var(--lpl-admin-shadow-primary-soft);
}

.lpl-contact__item:last-child {
    margin-bottom: 0;
}

.lpl-contact__item .lpl-contact__icon {
    width: 20px;
    margin-right: 10px;
    font-size: var(--lex-font-size-lg, 16px);
    text-align: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.lpl-contact__text {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    line-height: 1.4;
}

.lpl-contact__label {
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
    color: var(--wp-color-gray-90);
}

.lpl-contact__description {
    font-size: var(--lex-font-size-md, 13px);
    color: var(--wp-color-gray-60);
}

.lpl-contact__description a {
    color: var(--lex-color-brand-primary);
    text-decoration: none;
}

.lpl-contact__description a:hover {
    color: var(--lex-color-brand-primary-hover);
    text-decoration: underline;
}

.lpl-trust-badge {
    margin-top: var(--lpl-admin-space-field, 15px);
    padding-top: 15px;
    text-align: center;
    border-top: 1px solid var(--wp-color-gray-5);
}

.lpl-trust-badge__text {
    margin-bottom: 5px;
    font-size: var(--lex-font-size-xs, 11px);
    color: var(--wp-color-gray-60);
}

.lpl-trust-badge__value {
    font-size: var(--lex-font-size-base, 14px);
    font-weight: 600;
    color: var(--wp-color-green-40);
}

/* 9. Responsive Design
================================================== */

@media (max-width: 1024px) {
    .lpl-layout--two-column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .lpl-qs-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .lpl-layout__sidebar {
        width: 100%;
        margin-top: var(--lex-space-5, 20px);
    }

    /* Hire Me Page Responsive */
    .lpl-layout--grid-sidebar {
        -ms-grid-columns: 1fr;
            grid-template-columns: 1fr;
        gap: var(--lex-space-5, 20px);
    }
}

@media (max-width: 782px) {
    .lpl-shortcode-table {
        font-size: var(--lex-font-size-xs, 11px);
    }

    .lpl-shortcode-table th,
    .lpl-shortcode-table td {
        padding: var(--lex-space-2, 8px);
    }

    .lpl-shortcode-table code {
        font-size: var(--lpl-admin-font-size-tiny);
    }

    .lpl-qs-grid-3 {
        grid-template-columns: 1fr;
    }

    .lpl-admin__main-title {
        font-size: var(--lex-font-size-2xl, 20px);
    }

    .lpl-admin__section-title {
        font-size: var(--lex-font-size-lg, 16px);
    }

    /* Hire Me Page Mobile Responsive */
    .lpl-features {
        -ms-grid-columns: 1fr;
            grid-template-columns: 1fr;
    }

    .lpl-services {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--lex-space-5, 20px);
    }

    .lpl-contact__buttons {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
}

/* 9. Utility Classes
================================================== */


/* Text highlight styling - Notion-like yellow highlight */
.lpl-text-highlight {
    background: -webkit-linear-gradient(330deg, var(--wp-color-yellow-10) 0%, var(--wp-color-yellow-5) 100%);
    background: linear-gradient(120deg, var(--wp-color-yellow-10) 0%, var(--wp-color-yellow-5) 100%);
    background-color: var(--wp-color-yellow-10);
    padding-block: var(--lpl-admin-highlight-padding-block);
    padding-inline: var(--lpl-admin-highlight-padding-inline);
    border-radius: var(--lex-radius-xs, 3px);
    font-weight: 500;
    color: var(--wp-color-yellow-60);
    box-shadow: var(--lpl-admin-shadow-highlight);
    position: relative;
    display: inline;
}

/* Light yellow highlight variation - subtle emphasis */
.lpl-text-highlight--light {
    background: -webkit-linear-gradient(330deg, var(--wp-color-yellow-0) 0%, var(--wp-color-yellow-10) 100%);
    background: linear-gradient(120deg, var(--wp-color-yellow-0) 0%, var(--wp-color-yellow-10) 100%);
    background-color: var(--wp-color-yellow-0);
    padding-block: var(--lpl-admin-highlight-padding-block);
    padding-inline: var(--lpl-admin-highlight-padding-inline);
    border-radius: var(--lex-radius-xs, 3px);
    font-weight: 400;
    color: var(--wp-color-yellow-50);
    box-shadow: var(--lpl-admin-shadow-soft);
    position: relative;
    display: inline;
}

/* Very light yellow highlight variation - minimal emphasis */
.lpl-text-highlight--minimal {
    background: -webkit-linear-gradient(330deg, var(--wp-color-yellow-0) 0%, var(--wp-color-yellow-0) 100%);
    background: linear-gradient(120deg, var(--wp-color-yellow-0) 0%, var(--wp-color-yellow-0) 100%);
    background-color: var(--wp-color-yellow-0);
    padding-block: var(--lpl-admin-highlight-minimal-padding-block);
    padding-inline: var(--lpl-admin-highlight-minimal-padding-inline);
    border-radius: var(--lpl-admin-highlight-minimal-radius);
    font-weight: 400;
    color: var(--wp-color-yellow-50);
    box-shadow: var(--lpl-admin-shadow-highlight-minimal);
    position: relative;
    display: inline;
}

.lpl-list__item {
    margin-bottom: var(--lpl-admin-space-compact, 10px);
}

/* Margin utilities */
.lpl-margin-block--20 {
    margin-block: var(--lex-space-5, 20px);
}

/* List styling overrides for contact sections */
.lpl-contact ul,
.lpl-contact ul li {
    list-style: none;
    padding-left: 0;
}

#adminmenu  li.toplevel_page_lean_player-settings ul li:nth-child(8) a:not(.current) {
    color: var(--wp-color-green-10);
}

/* 10. Metabox Sections
================================================== */
.post-php #poststuff h2,
.post-new-php #poststuff h2 {
    padding-block: var(--lpl-admin-space-field);
    padding-inline: var(--lex-space-3, 12px);
}

.post-type-lean_player .lex-settings-section:not(.lex-settings-section--accordion) .lex-settings-section__title,
.post-type-lean_playlist .lex-settings-section:not(.lex-settings-section--accordion) .lex-settings-section__title {
    background: color-mix(in srgb, var(--lex-color-brand-primary) 7%, transparent);
    /* Override WordPress postbox heading defaults inside CPT metabox sections. */
    font-weight: bold !important;
    font-size: var(--lex-font-size-xs, 11px) !important;
    border-inline-start: 4px solid var(--lex-color-brand-primary);
}

.post-type-lean_player .lex-settings-section:not(.lex-settings-section--accordion),
.post-type-lean_playlist .lex-settings-section:not(.lex-settings-section--accordion) {
    margin-inline: calc(var(--lex-space-3, 12px) * -1);
    /* Override Lex section chrome when rendered inside WordPress CPT metaboxes. */
    border: none !important;
    box-shadow: none !important;
}

/* Accordion card style — used when startSection() is called with accordion: true */
.lex-settings-section.lex-settings-section--accordion {
    border: 1px solid var(--lex-color-border);
    border-radius: var(--lex-radius-md);
    box-shadow: var(--lpl-admin-shadow-soft);
    overflow: visible;
    margin-bottom: var(--lpl-admin-space-compact);
}

.lex-settings-section.lex-settings-section--accordion + .lex-settings-section.lex-settings-section--accordion {
    margin-top: 0;
}

.lex-settings-section--accordion .form-table {
    border-collapse: collapse;
}


.lex-settings-section--accordion .lex-settings-section__title:hover {
    background: var(--wp-color-gray-2);
}

.lex-settings-section--accordion .lex-settings-section__summary {
    display: none;
}

.lex-settings-section--accordion.lex-settings-section--collapsed .lex-settings-section__summary {
    display: inline;
    font-size: var(--lex-font-size-xs, 11px);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--lex-color-text-muted);
    opacity: 0.75;
    margin-inline-start: 8px;
}

/* Always-visible plain-text meta label beside a section title. Styled exactly
   like the summary, but unlike summary it stays visible whether the section is
   open, collapsed, or non-accordion. Multi-purpose: scope hints ("Video &
   Audio"), status tags, etc. */
.lex-settings-section__meta {
    display: inline;
    font-size: var(--lex-font-size-xs, 11px);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--lex-color-text-muted);
    opacity: 0.75;
    margin-inline-start: 8px;
    /* Keep the meta tight beside the title; push only the trailing controls
       (e.g. Save button) to the far end of the space-between flex row. */
    margin-inline-end: auto;
}

/* Hide conditional sections by default - JavaScript will show them */
.lpl-conditional-section {
    display: none;
}

/* Sticky Postbox Container - Only for lean_player post type
================================================== */
/* Fix post-body height issue for sticky positioning */
body.post-type-lean_player #post-body.metabox-holder.columns-2,
body.post-type-lean_playlist #post-body.metabox-holder.columns-2 {
    min-height: 1px;
    overflow: visible;
}

/* Make postbox-container-1 sticky */
body.post-type-lean_player #postbox-container-1,
body.post-type-lean_playlist #postbox-container-1 {
    position: -webkit-sticky;
    position: sticky;
    top: 32px; /* WordPress admin bar height */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    z-index: 1;
    align-self: flex-start;
}

/* 11. Playlist Builder
================================================== */

.lpl-pla__builder {
    padding-block-start: var(--lpl-admin-builder-offset);
}

/* ── Add panel ── */
.lpl-pla__add-panel {
    padding: var(--lex-space-4, 16px);
    margin-block-end: var(--lex-space-4, 16px);
    background: var(--wp-color-gray-2);
    border: 1px solid color-mix(in srgb, var(--lpl-b-blue) 30%, transparent);
    border-radius: var(--lpl-b-radius);
}

/* ── Omnibox ── */
.lpl-pla__omnibox {
    display: flex;
    align-items: center;
    gap: var(--lex-space-2, 8px);
}

.lpl-pla__omnibox-url {
    flex: 1;
    min-width: 0;
}

.lpl-pla__omnibox-error {
    margin: var(--lex-space-2, 8px) 0 0;
    font-size: var(--lpl-b-font-sm);
    color: var(--lpl-b-red);
}

.lpl-pla__omnibox-hint {
    margin: var(--lex-space-2, 8px) 0 0;
    font-size: var(--lpl-b-font-sm);
    color: var(--lpl-b-text-mid);
}

/* Accepted-source examples sit below the hint, one step quieter. The string
   carries its own line break (see leanpl_get_playlist_source_hints), so
   pre-line keeps the provider URLs and the direct-file note on separate rows. */
.lpl-pla__omnibox-hint-examples {
    display: block;
    margin-top: var(--lex-space-1, 4px);
    font-size: var(--lpl-b-font-xs);
    color: var(--lpl-b-text-faint);
    white-space: pre-line;
    word-break: break-word;
}

/* ── Secondary add paths ── */
.lpl-pla__builder-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lex-space-2, 8px);
    margin-block-start: var(--lex-space-3, 12px);
    padding-block-start: var(--lex-space-3, 12px);
    border-block-start: 1px solid color-mix(in srgb, var(--lpl-b-blue) 20%, transparent);
}

.lpl-pla__builder-link {
    display: inline-flex;
    align-items: center;
    gap: var(--lex-space-1, 4px);
    padding-block: var(--lex-space-1, 4px);
    padding-inline: var(--lex-space-2, 8px);
    border: 1px solid var(--lpl-b-blue);
    border-radius: var(--lpl-b-radius-sm);
    cursor: pointer;
    font-size: var(--lpl-b-font-sm);
    line-height: 1.8;
    background: var(--lpl-b-blue-bg);
    color: var(--lpl-b-blue);
}

.lpl-pla__builder-link svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.lpl-pla__builder-link:hover {
    background: var(--lex-color-apple-blue);
    border-color: var(--lex-color-apple-blue);
    color: var(--wp-color-white);
}

.lpl-pla__builder-link:focus-visible {
    outline: 2px solid var(--lpl-b-blue);
    outline-offset: 2px;
}


.lpl-pla__builder-remove-all-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--lpl-b-font-sm);
    color: var(--lpl-b-text-faint);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.lpl-pla__builder-remove-all-btn:hover {
    color: var(--lpl-b-red);
    text-decoration-style: solid;
}

/* ── Shared item list ── */
.lpl-pla__builder-item-list {
    min-height: 80px;
}

/* ── Item row (shared, both modes) ── */
.lpl-pla__builder-item-row {
    display: flex;
    align-items: center;
    gap: var(--lex-space-2, 8px);
    padding-block: var(--lex-space-2, 8px);
    padding-inline: var(--lpl-admin-space-compact);
    background: var(--lpl-b-surface);
    border: 1px solid var(--lpl-b-border);
    border-radius: var(--lpl-b-radius);
    margin-bottom: 4px;
    cursor: grab;
}

.lpl-pla__builder-item-row:last-of-type {
    margin-bottom: 0;
}

.lpl-pla__builder-item-row--chosen {
    opacity: 0.5;
    cursor: grabbing;
}

.lpl-pla__builder-item-row--ghost {
    border: 2px dashed var(--lpl-b-blue);
    background: var(--lpl-b-blue-bg);
    opacity: 1;
}

/* Drag handle */
.lpl-pla__builder-drag-handle {
    color: var(--lpl-b-text-faint);
    cursor: grab;
    font-size: var(--lpl-admin-builder-drag-font-size);
    flex-shrink: 0;
    line-height: 1;
}

/* Order number */
.lpl-pla__builder-item-num {
    min-width: 20px;
    font-size: var(--lpl-b-font-sm);
    font-weight: 600;
    color: var(--lpl-b-text-mid);
    text-align: center;
    flex-shrink: 0;
}

/* Title */
.lpl-pla__builder-item-title {
    flex: 1;
    font-size: var(--lpl-b-font-base);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Actions: Edit + Remove */
.lpl-pla__builder-item-actions {
    display: flex;
    align-items: center;
    gap: var(--lpl-admin-builder-action-gap);
    flex-shrink: 0;
    cursor: default;
}

.lpl-pla__builder-edit-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: var(--lpl-b-font-sm);
    color: var(--lpl-b-blue);
    text-decoration: none;
    cursor: pointer;
}

.lpl-pla__builder-edit-link:hover {
    color: var(--wp-color-blue-60);
    text-decoration: underline;
}

.lpl-pla__builder-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--lpl-b-text-faint);
    font-size: var(--lex-font-size-lg, 16px);
    line-height: 1;
    width: 20px;
    height: 20px;
}

.lpl-pla__builder-remove-btn:hover {
    color: var(--lpl-b-red);
}

/* ── Items empty state ── */
.lpl-pla__builder-items-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 2px dashed var(--lpl-b-blue);
    border-radius: var(--lpl-b-radius-sm);
    background: var(--lpl-b-blue-bg);
    padding-block: var(--lex-space-6, 24px);
    padding-inline: var(--lex-space-4, 16px);
    text-align: center;
}

.lpl-pla__builder-items-empty-title {
    font-size: var(--lpl-b-font-base);
    color: var(--lpl-b-text-mid);
    margin-block: 0 var(--lex-space-1, 4px);
    margin-inline: 0;
    font-weight: 500;
}

.lpl-pla__builder-items-empty-sub {
    font-size: var(--lpl-b-font-sm);
    color: var(--lpl-b-text-faint);
    margin: 0;
}

/* ── Type row ── */


/* ── Item list header ── */
.lpl-pla__builder-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--lpl-admin-space-compact, 10px);
}

.lpl-pla__builder-items-header-right {
    display: flex;
    align-items: center;
    gap: var(--lex-space-2, 8px);
}

.lpl-pla__builder-items-title {
    font-size: var(--lpl-b-font-base);
    font-weight: 600;
    color: var(--wp-color-gray-90);
}

/* Count pill */
.lpl-pla__builder-count-pill {
    display: inline-block;
    padding-block: var(--lpl-admin-builder-pill-padding-block);
    padding-inline: var(--lex-space-2, 8px);
    border-radius: var(--lpl-b-radius-pill);
    font-size: var(--lpl-b-font-xs);
    font-weight: 600;
    background: var(--wp-color-blue-5);
    color: var(--wp-color-blue-70);
}

/* Search */
.lpl-pla__builder-search-wrap {
    margin-bottom: var(--lex-space-2, 8px);
}

.lpl-pla__builder-search {
    width: 100%;
    box-sizing: border-box;
}

/* Filter row */
.lpl-pla__builder-filter-row {
    display: flex;
    gap: var(--lpl-admin-builder-action-gap);
    align-items: center;
    margin-bottom: var(--lpl-admin-space-compact, 10px);
    flex-wrap: wrap;
}

.lpl-pla__builder-category-filter {
    flex: 1;
    min-width: 120px;
}

.lpl-pla__builder-add-all {
    flex-shrink: 0;
    /* Override WordPress button sizing so the compact add-all action fits the builder row. */
    font-size: var(--lpl-b-font-xs) !important;
    padding-block: var(--lpl-admin-builder-add-all-padding-block) !important;
    padding-inline: var(--lex-space-2, 8px) !important;
    height: auto !important;
    line-height: 1.6 !important;
}

/* Player list */
.lpl-pla__builder-player-list {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid var(--lpl-b-border);
    border-radius: var(--lpl-b-radius-sm);
    background: var(--wp-color-gray-0);
}

/* ── Drawer context ──
   The 380px cap above was tuned to the old two-column layout. In the drawer
   the body is already the scroll container, so let the list run and scroll
   the whole pane as one. */
.lex-drawer .lpl-pla__builder-player-list {
    max-height: none;
}

/* Player row */
.lpl-pla__builder-player-row {
    display: flex;
    align-items: center;
    gap: var(--lex-space-2, 8px);
    padding-block: var(--lpl-admin-builder-player-row-padding-block);
    padding-inline: var(--lpl-admin-space-compact);
    cursor: pointer;
    border-bottom: 1px solid var(--wp-color-gray-2);
}

.lpl-pla__builder-player-row:last-of-type {
    border-bottom: none;
}

.lpl-pla__builder-player-row:hover {
    background: var(--wp-color-gray-0);
}

.lpl-pla__builder-player-row--added {
    background: var(--wp-color-green-0);
}

.lpl-pla__builder-player-row--added:hover {
    background: var(--wp-color-green-0);
}

.lpl-pla__builder-player-row--hidden {
    /* Override row display rules when search/filter state hides a player. */
    display: none !important;
}

.lpl-pla__builder-player-checkbox {
    flex-shrink: 0;
    margin: 0;
}

.lpl-pla__builder-player-title {
    flex: 1;
    font-size: var(--lpl-b-font-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Added pill */

/* Source type badges */
.lpl-pla__builder-badge {
    display: inline-block;
    padding-block: var(--lpl-admin-builder-badge-padding-block);
    padding-inline: var(--lpl-admin-builder-action-gap);
    border-radius: var(--lpl-b-radius-sm);
    font-size: var(--lpl-b-font-xs);
    font-weight: 600;
    flex-shrink: 0;
}

.lpl-pla__builder-badge--youtube    { background: var(--wp-color-red-0); color: var(--wp-color-red-50); }
.lpl-pla__builder-badge--vimeo      { background: var(--wp-color-blue-0); color: var(--wp-color-blue-50); }
.lpl-pla__builder-badge--self-hosted { background: var(--wp-color-green-0); color: var(--wp-color-green-40); }
.lpl-pla__builder-badge--external   { background: var(--wp-color-yellow-0); color: var(--wp-color-yellow-50); }

/* Picker empty states */
.lpl-pla__builder-picker-empty {
    padding-block: var(--lex-space-6, 24px);
    padding-inline: var(--lex-space-4, 16px);
    text-align: center;
}

.lpl-pla__builder-picker-empty-title {
    font-size: var(--lpl-b-font-base);
    color: var(--lpl-b-text-mid);
    margin-block: 0 var(--lex-space-1, 4px);
    margin-inline: 0;
    font-weight: 500;
}

.lpl-pla__builder-picker-empty-sub {
    font-size: var(--lpl-b-font-sm);
    color: var(--lpl-b-text-faint);
    margin-block: 0 var(--lex-space-3, 12px);
    margin-inline: 0;
}

.lpl-pla__builder-add-new-btn {
    display: inline-block;
}

/* 12. Playlist Type Modal
================================================== */

/* Backdrop + modal container */
.lpl-pla__builder-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lpl-pla__builder-modal[hidden] {
    display: none;
}

.lpl-pla__builder-modal-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--wp-color-black) 55%, transparent);
}

/* Modal box */
.lpl-pla__builder-modal-box {
    --lpl-admin-builder-modal-padding-block-start: var(--lex-space-8, 32px);
    --lpl-admin-builder-modal-padding-block-end: 28px;
    --lpl-admin-builder-modal-padding-inline: 28px;

    position: relative;
    background: var(--wp-color-white);
    border-radius: var(--lex-radius-md, 8px);
    box-shadow: var(--lpl-admin-shadow-builder-modal);
    padding-block: var(--lpl-admin-builder-modal-padding-block-start) var(--lpl-admin-builder-modal-padding-block-end);
    padding-inline: var(--lpl-admin-builder-modal-padding-inline);
    width: 480px;
    max-width: calc(100vw - 40px);
    z-index: 1;
}

/* Close button */
.lpl-pla__builder-modal-close {
    --lpl-admin-builder-modal-close-offset-block: 14px;
    --lpl-admin-builder-modal-close-offset-inline: var(--lex-space-4, 16px);
    --lpl-admin-builder-modal-close-font-size: 22px;

    position: absolute;
    inset-block-start: var(--lpl-admin-builder-modal-close-offset-block);
    inset-inline-end: var(--lpl-admin-builder-modal-close-offset-inline);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--lpl-admin-builder-modal-close-font-size);
    line-height: 1;
    color: var(--wp-color-gray-30);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lex-radius-sm, 4px);
}

.lpl-pla__builder-modal-close:hover {
    color: var(--wp-color-gray-90);
    background: var(--wp-color-gray-2);
}

/* Heading + sub */
.lpl-pla__builder-modal-title {
    font-size: var(--lex-font-size-2xl, 18px);
    font-weight: 700;
    color: var(--wp-color-gray-90);
    margin-block: 0 var(--lpl-admin-builder-action-gap);
    margin-inline: 0;
    line-height: 1.3;
}

.lpl-pla__builder-modal-sub {
    font-size: var(--lex-font-size-md, 13px);
    color: var(--wp-color-gray-60);
    margin-block: 0 var(--lex-space-6, 24px);
    margin-inline: 0;
}

/* Cards row */
.lpl-pla__builder-modal-cards {
    display: flex;
    gap: var(--lpl-admin-builder-column-padding);
}

/* Individual card */
.lpl-pla__builder-modal-card {
    --lpl-admin-builder-modal-card-padding-block-start: var(--lex-space-6, 24px);
    --lpl-admin-builder-modal-card-padding-block-end: var(--lex-space-5, 20px);

    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lpl-admin-space-compact);
    padding-block: var(--lpl-admin-builder-modal-card-padding-block-start) var(--lpl-admin-builder-modal-card-padding-block-end);
    padding-inline: var(--lex-space-4, 16px);
    background: var(--wp-color-gray-0);
    border: 2px solid var(--wp-color-gray-5);
    border-radius: var(--lex-radius-md, 8px);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.lpl-pla__builder-modal-card:hover {
    border-color: var(--wp-color-blue-50);
    background: var(--wp-color-blue-0);
    box-shadow: var(--lpl-admin-shadow-builder-card-hover);
    text-decoration: none;
}

.lpl-pla__builder-modal-card:focus {
    outline: 2px solid var(--wp-color-blue-50);
    outline-offset: 2px;
}

/* Card icon */
.lpl-pla__builder-modal-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wp-color-blue-0);
    color: var(--wp-color-blue-50);
    flex-shrink: 0;
    transition: background 0.15s;
}

.lpl-pla__builder-modal-card:hover .lpl-pla__builder-modal-card-icon {
    background: var(--wp-color-blue-5);
}

/* Card text */
.lpl-pla__builder-modal-card-title {
    font-size: var(--lex-font-size-base, 14px);
    font-weight: 700;
    color: var(--wp-color-gray-90);
    text-align: center;
    line-height: 1.2;
}

.lpl-pla__builder-modal-card-desc {
    font-size: var(--lex-font-size-xs, 11px);
    color: var(--wp-color-gray-60);
    text-align: center;
    line-height: 1.5;
}

/* 12b. Type badge in metabox (replaces segmented control after type is set)
================================================== */

/* 13. Display Options metabox (.lpl-pla__display-options)
================================================== */

.lpl-pla__display-options-preset-instruction {
    display: flex;
    align-items: center;
    gap: var(--lpl-admin-feature-row-padding-block);
    margin-block: 0 var(--lpl-admin-space-compact);
    margin-inline: 0;
    color: var(--wp-color-gray-60);
    font-size: var(--lex-font-size-md, 13px);
}

.lpl-pla__display-options-preset-instruction .dashicons {
    font-size: var(--lex-font-size-lg, 16px);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lpl-pla__display-options-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lex-space-2, 8px);
    align-items: center;
    margin-block-end: var(--lex-space-1, 4px);
}

.lpl-pla__display-options-preset-heading {
    margin-block: 0 var(--lex-space-2, 8px);
    margin-inline: 0;
    font-size: var(--lex-font-size-md, 13px);
    font-weight: 600;
    color: var(--wp-color-gray-90);
}

.lpl-pla__display-options-preset-label {
    font-weight: 600;
}

.lpl-pla__display-options-preset-desc {
    flex-basis: 100%;
    margin-block: var(--lpl-admin-builder-pill-padding-block) 0;
    margin-inline: 0;
}

.lpl-pla__display-options-preset-select {
    min-width: 180px;
}

.lpl-pla__display-options-divider {
    border: none;
    border-top: 1px solid var(--wp-color-gray-5);
    margin-block: var(--lex-space-4, 16px);
    margin-inline: 0;
}

#lpl-metabox-wrapper .lpl-pla__display-options-divider {
    margin-top: 0;
}

/* lex-vtabs metabox overrides — disable sticky nav, JS controls pane visibility */
#lpl-metabox-wrapper .lex-vtabs__nav,
.lpl-pla__display-options .lex-vtabs__nav {
    position: static;
}
.lex-vtabs .lex-vtab-pane { display: none; }

.lpl-pla__display-options .form-table th {
    width: 250px;
    padding-block: var(--lex-space-2, 8px);
    padding-inline: 0;
    font-weight: 400;
}

.lpl-pla__display-options .form-table td {
    padding-block: var(--lex-space-2, 8px);
    padding-inline: 0;
}

/* Preset apply: flash changed rows */
tr.lpl-pla__do-field--changed th,
tr.lpl-pla__do-field--changed td {
    background-color: var(--wp-color-yellow-0);
    transition: background-color 1.8s ease;
}

/* ── Playlist builder: Quick Add / Batch Add forms ─────────────── */

/* The lex horizontal-vtabs base rule frames the content pane (border + padding).
   That framing is unwanted inside our drawer — the drawer already provides the
   container. Framework-correct fix would be a [data-variant="detached"] reset in
   lex CSS; overriding here for now, scoped to the drawer and chained through the
   base selector so it outweighs it (0,4,0 vs 0,3,0) without !important. */
.lpl-pla__builder-drawer .lex-vtabs[data-layout="horizontal"] .lex-vtabs__content {
    border: 0;
    padding: 0;
}

.lpl-pla__qa-error,
.lpl-pla__ed-error {
    color: #d63638;
    margin: 8px 0;
}

/* Label-above layout for the Quick Add / Edit Track fields tables */
.lpl-pla__qa-fields th,
.lpl-pla__ed-fields th {
    display: block;
    width: auto;
    padding: 0;
    padding-bottom: 4px;
}

.lpl-pla__qa-fields td,
.lpl-pla__ed-fields td {
    display: block;
    padding: 0;
    padding-bottom: 4px;
}

.lpl-pla__qa-fields tr.lex-field input,
.lpl-pla__ed-fields tr.lex-field input {
    width: 100%;
}

/* Duration + Meta Text sit side by side, two columns */
.lpl-pla__qa-fields tbody,
.lpl-pla__ed-fields tbody {
    display: flex;
    flex-wrap: wrap;
}

.lpl-pla__qa-fields tr.lex-field,
.lpl-pla__ed-fields tr.lex-field {
    flex: 1 1 100%;
}

.lpl-pla__qa-fields tr.lpl-pla__qa-field--half,
.lpl-pla__ed-fields tr.lpl-pla__qa-field--half {
    flex: 1 1 calc(50% - 8px);
}

.lpl-pla__qa-fields tr.lpl-pla__qa-field--half + tr.lpl-pla__qa-field--half,
.lpl-pla__ed-fields tr.lpl-pla__qa-field--half + tr.lpl-pla__qa-field--half {
    margin-left: 16px;
}

/* Action row at the bottom of each drawer pane (Quick Add / Bulk Add / Edit
   Track), separated from the fields above by a divider. */
.lpl-pla__drawer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
    padding-top: 16px;
    border-top: 1px solid var(--lpl-b-border);
}

.lpl-pla__ed-full-editor {
    font-size: var(--lpl-b-font-sm);
}

/* Label-above layout for the Batch Add fields table */
.lpl-pla__ba-fields th,
.lpl-pla__ba-fields td {
    display: block;
    width: auto;
    padding: 0;
    padding-bottom: 4px;
}

.lpl-pla__ba-fields tr.lex-field textarea {
    width: 100%;
}

.lpl-pla__ba-error {
    color: #d63638;
    margin: 8px 0;
}

/* Per-URL failure reasons, one row per rejected line */
.lpl-pla__ba-failures {
    margin: 8px 0;
    max-height: 160px;
    overflow-y: auto;
    font-size: var(--lpl-b-font-xs);
}

.lpl-pla__ba-failures li {
    margin: 0 0 4px;
    color: var(--lpl-b-text-faint);
    word-break: break-all;
}

.lpl-pla__ba-failures li strong {
    display: block;
    color: #d63638;
    font-weight: 400;
    word-break: normal;
}

/* Live Preview panel - always visible below the title, starts as a "View Player Preview" CTA */
.lpl-live-preview-panel {
    margin: 20px 0 0;
    border: 1px solid var(--lpl-b-border, #dcdcde);
    border-radius: 4px;
    background: #fff;
}

.lpl-live-preview-panel__inner {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: opacity 200ms ease;
}

.lpl-live-preview-panel__inner.is-loading {
    opacity: 0.35;
}

.lpl-live-preview-panel__inner--has-content {
    display: block;
    min-height: 0;
    padding: 24px;
}

.lpl-live-preview-panel__error {
    margin: 0;
    color: var(--lex-color-error, #d63638);
}