/* CTA Tabbed Products – frontend
   Styled to match CTA Audit Builder v1.4.5
   Primary: #1a73d1 | Border: #d0dce8 | Light: #e8f1fb
*/

/* =========================================================================
   CSS custom properties (overridable via theme settings)
   ========================================================================= */
:root {
    --cta-tp-primary:   #1a73d1;
    --cta-tp-primary-dk:#1558a8;
    --cta-tp-light:     #e8f1fb;
    --cta-tp-border:    #d0dce8;
    --cta-tp-bg:        #ffffff;
    --cta-tp-tabs-bg:   #ffffff;
    --cta-tp-tab-text:  #555555;
    --cta-tp-text:      #1a1a1a;
    --cta-tp-subtitle:  #666666;
    --cta-tp-specs-bg:  #f5f8fc;
}

/* =========================================================================
   Outer container
   ========================================================================= */
.cta-tp {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--cta-tp-text);
    border: 2px solid var(--cta-tp-primary);   /* was 1px #dde3ea */
    border-radius: 10px;
    overflow: hidden;
    background: var(--cta-tp-bg);
}

/* =========================================================================
   Tab bar
   ========================================================================= */
.cta-tp-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    border: none !important;
    border-bottom: 1px solid #e4ecf5 !important;
    background: var(--cta-tp-tabs-bg) !important;
    list-style: none !important;
    box-shadow: none !important;
}

.cta-tp-tab {
    display: inline-block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 7px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--cta-tp-tab-text) !important;
    cursor: pointer !important;
    background: transparent !important;          /* was #f0f2f5 */
    border: 1.5px solid var(--cta-tp-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: color .15s, background .15s, border-color .15s !important;
    outline: none !important;
    -webkit-font-smoothing: antialiased;
}

.cta-tp-tab:hover {
    color: var(--cta-tp-primary) !important;
    background: var(--cta-tp-light) !important;  /* was #e6f0f8 */
    border-color: var(--cta-tp-primary) !important;
    box-shadow: none !important;
}

.cta-tp-tab.is-active {
    color: #ffffff !important;
    background: var(--cta-tp-primary) !important;
    border-color: var(--cta-tp-primary) !important;
    font-weight: 600 !important;
    box-shadow: none !important;                 /* was 0 2px 6px rgba(...) */
}

.cta-tp-tab:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(26, 115, 209, .25) !important;
}

/* =========================================================================
   Panels
   ========================================================================= */
.cta-tp-panel { display: none; padding: 20px 20px 24px; }
.cta-tp-panel.is-active { display: block; }

/* =========================================================================
   Product overview layout
   ========================================================================= */
.cta-tp-overview { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.cta-tp-product-image { min-width: 0; width: 100%; }
.cta-tp-product-image img { width: 100%; height: auto; border-radius: 8px; display: block; object-fit: cover; }

.cta-tp-title    { font-size: 1.35rem; font-weight: 700; margin: 0 0 4px; color: #111; }
.cta-tp-subtitle { color: var(--cta-tp-subtitle); margin: 0 0 14px; font-size: .95rem; }
.cta-tp-desc     { margin-bottom: 16px; line-height: 1.65; }
.cta-tp-desc h1, .cta-tp-desc h2, .cta-tp-desc h3,
.cta-tp-desc h4, .cta-tp-desc h5 { all: revert; font-family: inherit; }

/* =========================================================================
   Specs table — blue header matching audit builder table
   ========================================================================= */
.cta-tp-specs {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.cta-tp-specs thead tr {
    background: var(--cta-tp-primary);
}

.cta-tp-specs thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

.cta-tp-specs tbody tr {
    border-bottom: 1px solid #eef2f8;
    transition: background .1s;
}
.cta-tp-specs tbody tr:last-child { border-bottom: none; }
.cta-tp-specs tbody tr:hover { background: var(--cta-tp-specs-bg); }

.cta-tp-specs th,
.cta-tp-specs td {
    padding: 10px 14px;
    text-align: left;
}
.cta-tp-specs tbody th {
    font-weight: 600;
    color: var(--cta-tp-text);
    width: 40%;
    background: var(--cta-tp-specs-bg);
    border-right: 1px solid var(--cta-tp-border);
}
.cta-tp-specs tbody td { color: var(--cta-tp-text); }

/* =========================================================================
   Rich content panels
   ========================================================================= */
.cta-tp-rich { line-height: 1.7; max-width: 800px; }
.cta-tp-rich h1, .cta-tp-rich h2, .cta-tp-rich h3,
.cta-tp-rich h4, .cta-tp-rich h5 { all: revert; font-family: inherit; }
.cta-tp-rich ul, .cta-tp-rich ol { padding-left: 1.4em; margin: .5em 0; }
.cta-tp-rich li { margin: .25em 0; }

/* =========================================================================
   Video
   ========================================================================= */
.cta-tp-video { max-width: 800px; }
.cta-tp-video iframe,
.cta-tp-video video { width: 100%; border-radius: 8px; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 640px) {
    .cta-tp-tabs { padding: 12px 14px !important; }
    .cta-tp-panel { padding: 14px; }
    .cta-tp-specs thead { display: none; }
    .cta-tp-specs tr { display: block; border-bottom: 2px solid #e4ecf5; padding: 8px 0; }
    .cta-tp-specs th,
    .cta-tp-specs td { display: block; padding: 4px 14px; width: auto !important; }
}