/**
 * Share display shortcodes ([share_about], [share_field]) — frontend styling.
 */

.wpdst-about-short {
    margin-bottom: 14px;
    line-height: 1.7;
    color: #384047;
}

.wpdst-about-short p:last-child {
    margin-bottom: 0;
}

/* Read more toggle styled as the site's green button.
   When closed: only the button shows (long content hidden).
   When open: long content first, then the "Read less" button below it —
   achieved with flex ordering, zero JavaScript. */
.wpdst-about-more {
    display: inline-block;
}

.wpdst-about-more[open] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.wpdst-about-more[open] > .wpdst-about-long {
    order: 1;
}

.wpdst-about-more[open] > .wpdst-about-btn {
    order: 2;
    margin-top: 14px;
}

.wpdst-about-btn {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    background: #395D18;
    color: #fff;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 6px;
    user-select: none;
    transition: background 0.15s ease;
}

.wpdst-about-btn::-webkit-details-marker {
    display: none;
}

.wpdst-about-btn:hover {
    background: #8ED64C;
}

/* Swap the label to "View Less" when open, without any JS */
.wpdst-about-more[open] > .wpdst-about-btn {
    font-size: 0;
}

.wpdst-about-more[open] > .wpdst-about-btn::after {
    content: "View Less";
    font-size: 16px;
}

.wpdst-about-long {
    line-height: 1.7;
    color: #384047;
}

.wpdst-about-long p:last-child {
    margin-bottom: 0;
}

/* =========================================================================
   TREND HOTSPOT — [share_field key="trend"]
   The SVG artwork already contains the "TREND" caption and the
   Upward / Downward / Sideways wording, so only the icon and the "?" are
   rendered. The "?" opens the Reason Of Trend popup.
   Native <details>: zero JavaScript.
   ========================================================================= */

.wpdst-trend {
    /* >>> ICON SIZE: change this one value to resize the trend image. <<<
       Width is worked out automatically from each SVG's aspect ratio, so you
       never need to set a width. Mobile value is in the media query below. */
    --wpdst-trend-icon-height: 45px;

    /* >>> GAP between the icon and the "?" marker. <<< */
    --wpdst-trend-gap: 6px;

    /* >>> Diameter of the round "?" marker. <<< */
    --wpdst-trend-mark-size: 22px;

    display: inline-flex;
    align-items: center;
    gap: var(--wpdst-trend-gap);

    /* Sit above neighbouring elements (e.g. the Live Chat button) so the "?"
       is never painted underneath them. */
    position: relative;
    z-index: 20;

    /* Never inherit a card/box treatment from the theme. */
    background: none;
    box-shadow: none;
}

/* Height-driven sizing: width follows the SVG's own aspect ratio (they are
   wide lockups — 620x200 / 620x301.55 — so never force a square).
   The doubled class keeps this ahead of theme/Elementor `img { height:auto }`.
   The SVGs have a transparent canvas, so any white box / shadow around them
   comes from theme image styling — explicitly cleared here. */
.wpdst-trend .wpdst-trend-icon {
    flex: 0 0 auto;
    display: block;
    height: var(--wpdst-trend-icon-height);
    width: auto;
    max-width: 100%;
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Hidden-but-focusable toggle driving the popup (no JavaScript). */
.wpdst-trend-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* The "?" marker */
.wpdst-trend-mark {
    /* Never let the flex row squash the circle into an oval. */
    flex: 0 0 auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wpdst-trend-mark-size);
    height: var(--wpdst-trend-mark-size);
    min-width: var(--wpdst-trend-mark-size);
    min-height: var(--wpdst-trend-mark-size);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #1f1f1f;
    color: #fff;
    font-size: calc(var(--wpdst-trend-mark-size) * 0.62);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    list-style: none;
    user-select: none;
    /* Flat marker — no shadow, border or inherited label padding. */
    box-shadow: none;
    border: 0;
    padding: 0;
    margin: 0;
}

.wpdst-trend-toggle:focus-visible + .wpdst-trend-mark {
    outline: 2px solid #395D18;
    outline-offset: 2px;
}

/* Closed by default; the checkbox reveals both the backdrop and the panel. */
.wpdst-trend-backdrop,
.wpdst-trend-pop {
    display: none;
}

.wpdst-trend-toggle:checked ~ .wpdst-trend-backdrop,
.wpdst-trend-toggle:checked ~ .wpdst-trend-pop {
    display: block;
}

/* Dimmed backdrop — clicking it closes the popup. */
.wpdst-trend-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    cursor: pointer;
}

/* Popup: centred on screen, so it can never be cut off on small devices. */
.wpdst-trend-pop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    width: 440px;
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
    background: #395D18;
    color: #fff;
    border-radius: 12px;
    padding: 26px 24px 22px;
    font-size: 15px;
    line-height: 1.65;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

/* Close "×" */
.wpdst-trend-close {
    position: absolute;
    top: 8px;
    right: 14px;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    opacity: 0.85;
}

.wpdst-trend-close:hover {
    opacity: 1;
}

.wpdst-trend-pop p {
    margin: 0 0 10px;
}

.wpdst-trend-pop p:last-child {
    margin-bottom: 0;
}

.wpdst-trend-pop a {
    color: #8ED64C;
}

@media (max-width: 600px) {
    .wpdst-trend {
        /* >>> MOBILE ICON SIZE <<< */
        --wpdst-trend-icon-height: 40px;
        --wpdst-trend-gap: 5px;
        --wpdst-trend-mark-size: 20px;
    }

    /* The popup is a screen-centred modal, so it stays inside the viewport on
       its own (width: 440px capped by max-width: calc(100vw - 32px)). */
    .wpdst-trend-pop {
        padding: 22px 18px 18px;
        font-size: 14px;
    }
}


/* =========================================================================
   SHARE FAQ ACCORDION  (was assets/css/faq.css)
   Merged in so share pages load ONE head stylesheet instead of three
   footer ones (fewer requests, no unstyled flash). Verified: these rule
   sets share no selectors, so the cascade is unchanged.
   ========================================================================= */

/**
 * Share FAQs accordion — frontend (zero JavaScript, native <details>).
 * Styled to match the site's green pill accordion (formerly JetTabs).
 */

.wpdst-faqs {
    margin: 0 0 28px;
    width: 100%;
}

.wpdst-faq,
.wpdst-faqs-heading {
    width: 100%;
    box-sizing: border-box;
}

/* Make the FAQ fill its section's content width even if the Elementor
   Shortcode widget was left at a reduced desktop width. Overrides only the
   widget's own width (Elementor's --width var) — NOT the boxed container's
   content cap — so the FAQ lines up with the other sections rather than
   bleeding to the full viewport. :has() is supported in current browsers. */
.elementor-widget-shortcode:has(.wpdst-faqs) {
    --width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

.elementor-widget-shortcode:has(.wpdst-faqs) > .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
}

.wpdst-faqs-heading {
    margin: 0 0 20px;
    text-align: center;
}

.wpdst-faq {
    margin-bottom: 20px;
    border-radius: 10px;
    background: #395D18;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* Question row (the green pill) */
.wpdst-faq-q {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    padding: 20px 70px 20px 26px;
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    position: relative;
    user-select: none;
    min-height: 28px;
}

.wpdst-faq-q::-webkit-details-marker {
    display: none;
}

/* White circular chevron button on the right */
.wpdst-faq-q::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    background:
        #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23395D18' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
        center / 14px 14px no-repeat;
    transition: transform 0.25s ease;
}

.wpdst-faq[open] > .wpdst-faq-q::after {
    transform: rotate(180deg);
}

/* Answer body */
.wpdst-faq-a {
    background: #fff;
    padding: 20px 26px;
    color: #384047;
    line-height: 1.7;
    font-size: 15px;
}

.wpdst-faq-a p {
    margin: 0 0 12px;
}

.wpdst-faq-a p:last-child {
    margin-bottom: 0;
}

.wpdst-faq-a a {
    color: #395D18;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .wpdst-faq {
        margin-bottom: 14px;
    }
    .wpdst-faq-q {
        font-size: 15px;
        padding: 16px 58px 16px 18px;
    }
    .wpdst-faq-q::after {
        right: 16px;
        width: 26px;
        height: 26px;
        margin-top: -13px;
    }
    .wpdst-faq-a {
        padding: 16px 18px;
    }
}


/* =========================================================================
   GOOGLE-SHEET / WORKSHEET TABLES  (was assets/css/sheets-table.css)
   Merged in so share pages load ONE head stylesheet instead of three
   footer ones (fewer requests, no unstyled flash). Verified: these rule
   sets share no selectors, so the cascade is unchanged.
   ========================================================================= */

/**
 * Google Spreadsheet tables — frontend styling.
 * Matches the site's share-info table design: green header row,
 * white / light-green zebra striping, subtle borders.
 */

.wpdst-sheet-table-wrap {
    overflow-x: auto;
    margin: 0 0 24px;
    -webkit-overflow-scrolling: touch;
}

/* split="N" renders multiple tables side by side; they wrap into a
   single column on narrow screens. */
.wpdst-sheet-split {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    align-items: flex-start;
}

.wpdst-sheet-split .wpdst-sheet-table-wrap {
    flex: 1 1 320px;
    min-width: 280px;
}

.wpdst-sheet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.4;
    background: #fff;
}

.wpdst-sheet-table th,
.wpdst-sheet-table td {
    border: 1px solid #ddd;
    padding: 11px 14px;
    text-align: left;
    vertical-align: middle;
    word-break: break-word;
}

.wpdst-sheet-table thead th {
    background: #395D18;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.wpdst-sheet-table tbody tr:nth-child(odd) {
    background: #f3faf3;
}

.wpdst-sheet-table tbody tr:nth-child(even) {
    background: #ffffff;
}

.wpdst-sheet-table tbody tr:hover {
    background: #e8f5e9;
}

.wpdst-sheet-table td a {
    color: #395D18;
    font-weight: 500;
    text-decoration: underline;
}

/* Value colouring: negatives red, positives green (financial convention). */
.wpdst-sheet-table td .wpdst-neg {
    color: #c0392b;
}

.wpdst-sheet-table td .wpdst-pos {
    color: #1a7f37;
}

/* Placeholder dash for cells with no data (muted so it never reads as a value). */
.wpdst-sheet-table td .wpdst-empty {
    color: #9aa0a6;
}

@media (max-width: 767px) {
    .wpdst-sheet-table {
        font-size: 13px;
    }
    .wpdst-sheet-table th,
    .wpdst-sheet-table td {
        padding: 8px 10px;
    }

    /* Tables with 3+ columns keep a readable width and swipe sideways
       inside their wrapper instead of crushing names into single words. */
    .wpdst-sheet-table.wpdst-wide {
        min-width: 560px;
    }
    .wpdst-sheet-table.wpdst-wide td:first-child {
        white-space: nowrap;
    }
}