/*
 * PORTUGAL_VIATOR_20260930_R011_product_spacing.css
 * Product-detail spacing + mobile accordion cleanup.
 *
 * - Removes the Overview / Included / Itinerary / etc. section navigation on mobile.
 * - Makes Overview, What's included, Itinerary, Meeting point, Tour options,
 *   Good to know, Traveler reviews and Cancellation collapsed accordions by default.
 * - Adds deliberate breathing room below the site header on desktop and mobile.
 */

/* Product detail should not begin flush against the black site header.
   This applies only to product-detail pages carrying the R008+ body class. */
.portugal-viator-r008-mobile-pdp .po-viator-product-section > .po-tours-shell {
    padding-top: 24px !important;
}

@media screen and (max-width: 768px) {
    /* Give the smaller header/content transition a little more breathing room. */
    .portugal-viator-r008-mobile-pdp .po-viator-product-section > .po-tours-shell {
        padding-top: 28px !important;
    }

    /* Product-detail breadcrumb is intentionally omitted on mobile, matching
       the approved desktop product presentation. Destination-page breadcrumbs
       are unaffected. */
    .portugal-viator-r008-mobile-pdp .po-viator-product-breadcrumb {
        display: none !important;
    }

    .portugal-viator-r008-mobile-pdp .po-viator-pdp-nav {
        display: none !important;
    }

    .portugal-viator-r008-mobile-pdp .po-viator-pdp-content > .po-viator-pdp-section.po-viator-mobile-collapsible {
        margin: 0 0 10px !important;
        padding: 0 !important;
        overflow: hidden;
        border: 1px solid #d9e1ea !important;
        border-radius: 6px !important;
        background: #fff;
    }

    .portugal-viator-r008-mobile-pdp .po-viator-mobile-accordion-heading {
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
    }

    .portugal-viator-r008-mobile-pdp .po-viator-mobile-accordion-heading > h2,
    .portugal-viator-r008-mobile-pdp h2.po-viator-mobile-accordion-heading {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 15px 46px 15px 17px !important;
        color: #2f6fb9 !important;
        font-size: 1.12rem !important;
        line-height: 1.28 !important;
        cursor: pointer;
        user-select: none;
        outline: 0;
    }

    .portugal-viator-r008-mobile-pdp .po-viator-mobile-accordion-heading > h2::after,
    .portugal-viator-r008-mobile-pdp h2.po-viator-mobile-accordion-heading::after {
        content: '+';
        position: absolute;
        top: 50%;
        right: 17px;
        transform: translateY(-50%);
        color: #2f6fb9;
        font-size: 1.45rem;
        font-weight: 500;
        line-height: 1;
    }

    .portugal-viator-r008-mobile-pdp .po-viator-mobile-collapsible.is-open .po-viator-mobile-accordion-heading > h2::after,
    .portugal-viator-r008-mobile-pdp .po-viator-mobile-collapsible.is-open > h2.po-viator-mobile-accordion-heading::after {
        content: '\2212';
    }

    .portugal-viator-r008-mobile-pdp .po-viator-mobile-accordion-heading > h2:focus-visible,
    .portugal-viator-r008-mobile-pdp h2.po-viator-mobile-accordion-heading:focus-visible {
        box-shadow: inset 0 0 0 2px #8eafd0;
    }

    /* Closed means the accordion heading only. */
    .portugal-viator-r008-mobile-pdp .po-viator-mobile-collapsible:not(.is-open) > *:not(.po-viator-mobile-accordion-heading) {
        display: none !important;
    }

    /* Content spacing once a section is opened. */
    .portugal-viator-r008-mobile-pdp .po-viator-mobile-collapsible.is-open > *:not(.po-viator-mobile-accordion-heading) {
        margin-left: 17px !important;
        margin-right: 17px !important;
    }

    .portugal-viator-r008-mobile-pdp .po-viator-mobile-collapsible.is-open > *:last-child:not(.po-viator-mobile-accordion-heading) {
        margin-bottom: 17px !important;
    }

    /* Itinerary already had an older mobile inner toggle. The new section accordion
       owns that responsibility, so avoid a double accordion. */
    .portugal-viator-r008-mobile-pdp #itinerary.po-viator-mobile-collapsible .po-viator-section-heading-row {
        display: block !important;
    }

    .portugal-viator-r008-mobile-pdp #itinerary.po-viator-mobile-collapsible .po-viator-mobile-section-toggle {
        display: none !important;
    }

    .portugal-viator-r008-mobile-pdp #itinerary.po-viator-mobile-collapsible.is-open .po-viator-itinerary-body {
        display: block !important;
    }

    /* Good to know also had a nested mobile "Additional information" toggle.
       Once the outer section is opened, show its content directly. */
    .portugal-viator-r008-mobile-pdp #details.po-viator-mobile-collapsible .po-viator-additional-toggle {
        display: none !important;
    }

    .portugal-viator-r008-mobile-pdp #details.po-viator-mobile-collapsible.is-open .po-viator-additional-desktop-title,
    .portugal-viator-r008-mobile-pdp #details.po-viator-mobile-collapsible.is-open .po-viator-additional-body {
        display: block !important;
    }

    /* Reviews use a compound heading. Keep only "Traveler reviews" visible
       while collapsed; rating/provider information appears after opening. */
    .portugal-viator-r008-mobile-pdp #reviews.po-viator-mobile-collapsible .po-viator-reviews-heading {
        display: block !important;
    }

    .portugal-viator-r008-mobile-pdp #reviews.po-viator-mobile-collapsible:not(.is-open) .po-viator-reviews-heading > *:not(:first-child),
    .portugal-viator-r008-mobile-pdp #reviews.po-viator-mobile-collapsible:not(.is-open) .po-viator-reviews-provider-note {
        display: none !important;
    }

    .portugal-viator-r008-mobile-pdp #reviews.po-viator-mobile-collapsible.is-open .po-viator-reviews-heading {
        padding: 0 17px 12px !important;
    }

    .portugal-viator-r008-mobile-pdp #reviews.po-viator-mobile-collapsible.is-open .po-viator-reviews-heading h2 {
        margin-left: -17px !important;
        margin-right: -17px !important;
        width: calc(100% + 34px);
    }

    /* Preserve clean anchor positioning when a review-count link jumps into
       a collapsed section from a results card. */
    .portugal-viator-r008-mobile-pdp .po-viator-mobile-collapsible {
        scroll-margin-top: 82px;
    }
}