/**
 * Producty Catalog Frontend Styles
 * Version: 1.0.0
 */

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}

/* ============================================
   CATALOG EXAMPLES GRID
   ============================================ */
.producty-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
}

.producty-catalog-grid .catalog-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.producty-catalog-grid .catalog-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-color: #d0d0d0;
    transform: translateY(-2px);
}

.producty-catalog-grid .catalog-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.producty-catalog-grid .catalog-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f5f5f5;
}

.producty-catalog-grid .catalog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.producty-catalog-grid .catalog-card.coming-soon .catalog-card-image img {
    opacity: 0.55;
}

.producty-catalog-grid .catalog-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.producty-catalog-grid .catalog-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 6px;
}

.producty-catalog-grid .catalog-card-description {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 12px;
}

.producty-catalog-grid .catalog-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.producty-catalog-grid .catalog-tag {
    display: inline-block;
    background: #f0f0f0;
    color: #333;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    line-height: 1.6;
}

.producty-catalog-grid .catalog-card-cta {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    margin: auto 0 0;
}

.producty-catalog-grid .catalog-card-cta.is-coming-soon {
    color: #666;
    font-weight: 400;
}

@media (max-width: 768px) {
    .producty-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 16px;
    }

    .producty-catalog-grid .catalog-card-body {
        padding: 12px 14px 14px;
    }

    .producty-catalog-grid .catalog-card-title {
        font-size: 1rem;
    }

    .producty-catalog-grid .catalog-card-description {
        font-size: 0.85rem;
        margin: 0 0 8px;
    }
}

/* ============================================
   PDF EMBEDDER — hide unneeded scrollbars
   ============================================ */
#viewerContainer,
[id^="viewerContainer"] {
    overflow: auto !important;
}

/* ============================================
   FEATURES MATRIX
   ============================================ */
.producty-features-matrix {
    margin: 0;
}

.producty-features-matrix .feature-category {
    margin-bottom: 56px;
    padding-left: 20px;
    border-left: 3px solid #1f2937;
}

.producty-features-matrix .category-title {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: #1f2937;
    padding: 7px 14px;
    border-radius: 0 6px 6px 0;
    margin: 0 0 16px -20px;
    line-height: 1.4;
    border-bottom: none;
}

.producty-features-matrix .category-description {
    font-size: 1.0625rem;
    color: #555;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.producty-features-matrix .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.producty-features-matrix .feature-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 22px;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.producty-features-matrix .feature-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-color: #d0d0d0;
    transform: translateY(-2px);
}

.producty-features-matrix .feature-card.has-link {
    cursor: pointer;
}

.producty-features-matrix .feature-card a.feature-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.producty-features-matrix .feature-icon {
    font-size: 1.75rem;
    color: #333;
    margin-bottom: 14px;
}

.producty-features-matrix .feature-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.producty-features-matrix .feature-excerpt {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

.producty-features-matrix .learn-more {
    display: inline-block;
    margin-top: 10px;
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
}

/* ============================================
   CATALOG FEATURES (5-column row)
   ============================================ */
.producty-catalog-features-row {
    padding: 20px 0;
}

.catalog-features-grid-5col {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

@media (max-width: 992px) {
    .catalog-features-grid-5col {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .catalog-features-grid-5col {
        grid-template-columns: repeat(2, 1fr);
    }
}

.catalog-feature-col {
    text-align: center;
    padding: 15px;
}

.catalog-feature-col.has-link a {
    text-decoration: none;
    color: inherit;
}

.catalog-feature-col-icon {
    font-size: 2rem;
    color: #0073aa;
    margin-bottom: 10px;
}

.catalog-feature-col-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.catalog-feature-col-description {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

.catalog-col-read-more {
    display: inline-block;
    margin-top: 8px;
    color: #0073aa;
    font-size: 0.85rem;
}

/* ============================================
   PRICING TABLE
   CSS Grid container holds every cell as a direct grid item.
   .pricing-row wrappers use display:contents so they exist semantically
   but contribute no layout box — this is what guarantees that every cell
   in column N sits at the same x position across every row, so column
   contents (header, price, data, button) stay in sync when scrolling.
   - Desktop: 6-col grid, all plans visible side-by-side.
   - Mobile (<=768px): horizontal scroll, sticky first column,
     scroll-snap to each plan column.
   ============================================ */
.producty-pricing-wrap {
    position: relative;
}

.producty-pricing-container {
    display: grid;
    grid-template-columns: 250px repeat(var(--plan-count, 5), 1fr);
    overflow-x: auto;
}

.pricing-header-row,
.pricing-row {
    display: contents;
}

.pricing-cell {
    padding: 15px;
    border: 1px solid #e0e0e0;
    margin: -1px 0 0 -1px;
}

.pricing-cell.feature-header,
.pricing-cell.feature-name {
    background: #f9f9f9;
    font-weight: 500;
}

.pricing-cell.header-cell {
    text-align: center;
}

.pricing-cell.plan-name-header {
    background-color: var(--plan-color, #0073aa);
    color: #fff;
    font-weight: 600;
    font-size: 1.2rem;
}

.pricing-cell.plan-header {
    background-color: #fff;
}

.plan-name {
    font-size: 1.2rem;
    font-weight: 600;
}

.plan-price {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #222;
}

.plan-price-term {
    font-size: 0.85rem;
    color: #666;
}

.plan-intro {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #444;
    margin-top: 10px;
}

.pricing-cell.category-header {
    grid-column: 1 / -1;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
    background: #f0f0f0;
}

/* On mobile this stays visible at the viewport edge while the band scrolls;
   on desktop it has nothing to stick against and behaves as a normal span. */
.category-header-text {
    display: inline-block;
    position: sticky;
    left: 12px;
}

.pricing-cell.feature-value {
    text-align: center;
}

.pricing-cell .checkmark {
    color: #28a745;
    font-size: 1.2rem;
}

.pricing-cell .no-check {
    color: #ccc;
}

.feature-note {
    display: block;
    font-size: 0.75rem;
    color: #666;
    margin-top: 3px;
}

.pricing-signup-button {
    display: inline-block;
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    color: #fff !important;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.pricing-signup-button:hover {
    opacity: 0.9;
}

.signup-row .plan-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Outline variant: white fill, plan-coloured border and text. */
.pricing-demo-button {
    background-color: #fff;
    border: 2px solid var(--plan-color, #333);
}

/* ---- Inline signup: selected plan column ---- */
.producty-pricing-container [data-plan-col] {
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.producty-pricing-container.has-selection [data-plan-col]:not(.is-selected) {
    opacity: 0.4;
}

.pricing-cell.plan-header.is-selected,
.pricing-cell.plan-detail.is-selected {
    background-color: var(--plan-color);
}

.plan-header.is-selected .plan-price,
.plan-header.is-selected .plan-price-term,
.plan-header.is-selected .plan-intro {
    color: #fff;
}

/* Primary button sits on its own colour once selected; outline it in white. */
.plan-detail.is-selected .pricing-buy-button {
    box-shadow: inset 0 0 0 2px #fff;
}

/* ---- Inline signup: panel (spans every plan column) ---- */
.pricing-signup-panel[hidden],
.signup-panel-note[hidden] {
    display: none !important;
}

.pricing-cell.pricing-signup-panel {
    grid-column: 2 / -1;
    padding: 0;
    margin: 12px 0 0;
    border: none;
}

.signup-panel-inner {
    position: relative;
    box-sizing: border-box;
    display: grid;
    /* summary | details | form */
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(0, 2fr);
    gap: 32px;
    padding: 28px;
    border: 2px solid var(--plan-color, #333);
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--plan-color, #333) 6%, #fff);
}

.signup-panel-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--plan-color, #333);
}

.signup-panel-title {
    margin: 6px 0 16px;
    font-size: 1.5rem;
    line-height: 1.25;
    color: #222;
}

.signup-panel-total {
    padding: 14px 16px;
    border-radius: 6px;
    background-color: #fff;
    color: #333;
}

.signup-panel-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.signup-panel-line + .signup-panel-line {
    margin-top: 8px;
}

.signup-panel-line[hidden] {
    display: none;
}

.signup-panel-total strong {
    font-size: 1.2rem;
}

.signup-panel-intro {
    margin: 14px 0 0;
    font-size: 0.85rem;
    color: #555;
}

.signup-panel-subhead {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #222;
}

.signup-panel-bullets {
    margin: 0 0 20px;
    padding-left: 1.2em;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #444;
}

.signup-panel-bullets:last-child {
    margin-bottom: 0;
}

/* Mid widths: summary and details side by side, form full width below. */
@media (max-width: 1200px) and (min-width: 901px) {
    .signup-panel-inner {
        grid-template-columns: 1fr 1fr;
    }

    .signup-panel-form {
        grid-column: 1 / -1;
    }
}

.signup-panel-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    margin: 0;
}

.signup-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.signup-field input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #bbb;
    border-radius: 6px;
    background-color: #fff;
    color: #222;
}

/* Native arrow kept: no appearance/background overrides, room on the right. */
.signup-field select {
    box-sizing: border-box;
    width: 100%;
    max-width: 360px;
    padding: 10px 36px 10px 12px;
    border: 1px solid #bbb;
    border-radius: 6px;
    background-color: #fff;
    color: #222;
}

.signup-field input:focus,
.signup-field select:focus {
    outline: none;
    border-color: #333;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}

.signup-panel-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.signup-terms {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #333;
}

.signup-terms a {
    color: #333;
    text-decoration: underline;
}

.signup-panel-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.85rem;
    color: #555;
}

/* Theme reset styles bare buttons; these selectors outrank it. */
.producty-pricing-container .signup-panel-submit,
.producty-pricing-container .signup-panel-submit:hover,
.producty-pricing-container .signup-panel-submit:focus {
    border: none;
    background-color: var(--plan-color, #333);
    color: #fff;
}

.producty-pricing-container .signup-panel-close,
.producty-pricing-container .signup-panel-close:hover,
.producty-pricing-container .signup-panel-close:focus {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    color: #333;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.producty-pricing-fade {
    display: none;
}

/* Single-plan mode: industry pages where the catalog has a recommended_plan_id.
   The grid collapses to label + one full-width plan column on every viewport,
   with horizontal scroll disabled. */
.producty-pricing-container.single-plan {
    grid-template-columns: 250px 1fr;
}

@media (max-width: 900px) {
    /* Sticky-column width matches scroll-padding-left so the snap point
       lands at the right edge of the sticky column, not under it.
       Change both in lockstep if you adjust the 130px.
       Plan columns are 38vw so roughly two plans + label are visible at
       once (~Free + Starter on default scroll). */
    .producty-pricing-container {
        grid-template-columns: 130px repeat(var(--plan-count, 5), 38vw);
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 130px;
        -webkit-overflow-scrolling: touch;
    }

    .pricing-cell {
        padding: 10px 7px;
        margin: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Label column is sticky and not a snap target.
       Category-header is excluded — it now spans the full row as a band. */
    .pricing-cell.feature-header,
    .pricing-cell.feature-name {
        padding: 10px 10px;
        position: sticky;
        left: 0;
        z-index: 2;
        scroll-snap-align: none;
        box-shadow: 4px 0 6px -3px rgba(0, 0, 0, 0.12);
        font-size: 0.85rem;
    }

    /* Category band is a snap-skipped row so swipes don't park on it. */
    .pricing-cell.category-header {
        scroll-snap-align: none;
        padding: 10px 12px;
    }

    /* Empty label cells in the two header rows have no inherent background;
       they need one so scrolling plan cells don't bleed through. */
    .pricing-cell.feature-header {
        background: #fff;
    }

    .plan-name {
        font-size: 1rem;
    }

    .plan-price {
        font-size: 1.6rem;
        margin: 6px 0;
    }

    .plan-price-term {
        font-size: 0.65rem;
    }

    .plan-intro {
        font-size: 0.75rem;
    }

    .producty-pricing-fade {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 48px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.08) 100%);
        pointer-events: none;
        z-index: 3;
    }

    /* Single-plan: nothing to scroll, plan column fills the viewport,
       sticky-column shadow off (no overlap to indicate). */
    .producty-pricing-container.single-plan {
        grid-template-columns: 130px 1fr;
        scroll-snap-type: none;
    }

    .producty-pricing-container.single-plan .pricing-cell.feature-header,
    .producty-pricing-container.single-plan .pricing-cell.feature-name {
        box-shadow: none;
    }

    /* Signup panel: full row, content pinned to the visible width
       (--pricing-visible-width is set by producty-pricing.js). */
    .pricing-cell.pricing-signup-panel {
        grid-column: 1 / -1;
        scroll-snap-align: none;
    }

    .signup-panel-inner {
        position: sticky;
        left: 0;
        width: var(--pricing-visible-width, 100%);
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 16px;
    }

    .signup-panel-title {
        font-size: 1.25rem;
        padding-right: 40px;
    }

    .signup-panel-form {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   BENEFITS
   ============================================ */
.producty-benefits-section {
    padding: 20px 0;
}

.benefits-container.layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

.benefits-container.layout-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.benefit-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    transition: box-shadow 0.2s ease;
}

.benefit-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.benefit-item.has-link a {
    text-decoration: none;
    color: inherit;
    display: flex;
    gap: 15px;
}

.benefit-icon {
    font-size: 2rem;
    color: #0073aa;
    flex-shrink: 0;
}

.benefit-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.benefit-summary {
    color: #333;
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.benefit-description {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

.benefit-item .read-more {
    display: inline-block;
    margin-top: 10px;
    color: #0073aa;
    font-size: 0.9rem;
}

/* ============================================
   SINGLE FEATURE CARD
   ============================================ */
.producty-feature-card-single {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    max-width: 400px;
    transition: box-shadow 0.2s ease;
}

.producty-feature-card-single:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.producty-feature-card-single.has-link a {
    text-decoration: none;
    color: inherit;
}

.producty-feature-card-single .feature-icon {
    font-size: 2.5rem;
    color: #0073aa;
    margin-bottom: 15px;
}

.producty-feature-card-single .feature-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.producty-feature-card-single .feature-description {
    color: #666;
    line-height: 1.6;
}

.producty-feature-card-single .learn-more {
    display: inline-block;
    margin-top: 15px;
    color: #0073aa;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.hideThis {
    display: none;
}

/* ============================================
   ELEMENTOR LINK-COLOUR OVERRIDE
   Elementor applies its theme link colour (red) to every <a> inside its
   widgets. This forces any link rendered by a Producty shortcode to use
   the surrounding text colour instead, regardless of Elementor's globals.
   Applies to anything whose class name contains "producty-", so it covers
   every current and future shortcode in this plugin.
   ============================================ */
[class*="producty-"] a,
[class*="producty-"] a:link,
[class*="producty-"] a:visited,
[class*="producty-"] a:hover,
[class*="producty-"] a:focus,
[class*="producty-"] a:active {
    color: inherit !important;
}

[class*="producty-"] a:hover,
[class*="producty-"] a:focus {
    text-decoration: underline;
}

/* Keep coloured buttons coloured — they set their own !important fill. */
[class*="producty-"] a.pricing-signup-button,
[class*="producty-"] a.pricing-signup-button:hover,
[class*="producty-"] a.pricing-signup-button:focus {
    color: #fff !important;
    text-decoration: none;
}

[class*="producty-"] a.pricing-demo-button,
[class*="producty-"] a.pricing-demo-button:hover,
[class*="producty-"] a.pricing-demo-button:focus {
    color: var(--plan-color, #333) !important;
}