/* ═══════════════════════════════════════════════════════════════════════
 *  details-inline.css
 *  Listing-detail page CSS — extracted from
 *  includes/details/sections-css-bootstrap.php (Seam 3 of 12) on 2026-04-18.
 *
 *  Cuts ~17 KB of identical inline <style> bytes from every listing pageview
 *  by enqueuing a separate, browser-cached, CDN-cacheable stylesheet. The
 *  middle <style> block in sections-css-bootstrap.php remains inline because
 *  it's PHP-interpolated with admin-driven mobile-breakpoint settings
 *  (drx_mobile_settings: breakpoint, detail_gallery_cols, detail_stack_desc,
 *  detail_feat_cols, font_scale).
 *
 *  Selector order is preserved exactly — first the sticky-back / nav / hover /
 *  fullscreen-overlay block (originally inline-emit #1) followed by the
 *  MOBILE-FIRST PROPERTY DETAIL OVERHAUL block (originally inline-emit #3).
 *  This ordering matches the original DOM-emit sequence so cascade resolution
 *  is byte-equivalent to the inline version.
 *
 *  Cache-bust: bumped via wp_enqueue_style version arg in
 *  sections-css-bootstrap.php's drx_render_section_css_bootstrap(). Bump on
 *  every CSS edit.
 * ═══════════════════════════════════════════════════════════════════════ */

.crea-sticky-back { position: fixed; top: 140px; left: 20px; background: #cc0000; color: white !important; padding: 12px 20px; border-radius: 30px; font-weight: bold; text-decoration: none; z-index: 9999; box-shadow: 0 4px 10px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 8px; transition: 0.2s; font-family: sans-serif; font-size: 14px; height: 48px; box-sizing: border-box; }
.crea-sticky-back:hover { background: #a30000; transform: scale(1.05); }
.crea-sticky-nav { position: fixed; top: 50%; transform: translateY(-50%); background: #cc0000; color: white !important; width: 50px; height: 50px; border-radius: 50%; display: none; align-items: center; justify-content: center; z-index: 9999; font-size: 24px; text-decoration: none; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.3); font-family: sans-serif; }
.crea-sticky-nav:hover { background: #a30000; transform: translateY(-50%) scale(1.1); }
#crea-sticky-prev { left: 20px; }
#crea-sticky-next { right: 20px; }
@media (max-width: 768px) {
    .crea-sticky-back { top: auto; bottom: 20px; left: 50%; transform: translateX(-50%); }
    .crea-sticky-back:hover { transform: translateX(-50%) scale(1.05); }
    .crea-sticky-nav { display: none !important; }
}
.drx-block { transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; position: relative; border-radius: 8px; }
.drx-block:hover { transform: scale(1.015); box-shadow: 0 8px 25px rgba(0,0,0,0.12); z-index: 10; }
.drx-fullscreen-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.97); z-index:100000; overflow-y:auto; padding:40px 60px 60px; box-sizing:border-box; }
.drx-fullscreen-overlay.active { display:block; }
.drx-fullscreen-close { position:fixed; top:20px; right:30px; width:44px; height:44px; background:#cc0000; color:#fff; border:none; border-radius:50%; font-size:22px; cursor:pointer; z-index:100001; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.3); transition:0.2s; line-height:1; font-family:sans-serif; }
.drx-fullscreen-close:hover { background:#a30000; transform:scale(1.1); }
.drx-fullscreen-content { max-width:1100px; margin:0 auto; font-size:1.5em; line-height:1.8; }
.drx-fullscreen-content h2, .drx-fullscreen-content h3 { color:#333; font-size:1.4em; }
.drx-fullscreen-content table { font-size:1em; }
.drx-fullscreen-content li { margin-bottom:6px; }
.drx-fullscreen-content td { padding:14px 18px !important; }
@media (max-width:768px) {
    .drx-fullscreen-overlay { padding:20px 15px 40px; }
    .drx-fullscreen-close { top:10px; right:10px; width:36px; height:36px; font-size:18px; }
}
</style>';

/* ═══════════════════════════════════════════════════
   MOBILE-FIRST PROPERTY DETAIL OVERHAUL
   Premium realtor-grade experience for phones/tablets
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {

/* ── GLOBAL CONTAINER ── */
.property-details-container {
    padding: 0 12px !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* ── HEADER: address + price ── */
.property-details-container > div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    padding-top: 8px !important;
}
.property-details-container h1 {
    font-size: 1.4em !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}
.property-details-container h1 span[style*="font-size: 0.5em"] {
    display: inline-block !important;
    font-size: 0.55em !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}
.property-details-container p[style*="font-size: 1.2em"] {
    font-size: 1em !important;
    margin-bottom: 4px !important;
}
.property-details-container h2[style*="font-size: 2.5em"],
.property-details-container h2[style*="font-size: 1.8em"],
.property-details-container h2[style*="color: #cc0000"] {
    font-size: 1.8em !important;
    margin-top: 0 !important;
}

/* ── GALLERY: full-bleed hero + scrollable thumbs ── */
.property-gallery-container {
    margin-left: -12px !important;
    margin-right: -12px !important;
    width: calc(100% + 24px) !important;
}
.drx-gallery-main {
    height: 56vw !important;
    max-height: 420px !important;
    min-height: 220px !important;
    border-radius: 0 !important;
}
.property-gallery-container div:first-child {
    max-height: 420px !important;
}
.property-gallery-container div:first-child img {
    border-radius: 0 !important;
}
#crea-mini-gallery.drx-gallery-horiz {
    padding: 8px 12px !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
}
#crea-mini-gallery.drx-gallery-horiz img {
    height: 72px !important;
    min-width: 96px !important;
    max-width: 120px !important;
    border-radius: 6px !important;
    scroll-snap-align: start !important;
}
#crea-mini-gallery.drx-gallery-vert {
    max-height: 200px !important;
    gap: 6px !important;
    padding: 8px 12px !important;
}
#crea-mini-gallery.drx-gallery-vert img {
    height: 100px !important;
    border-radius: 6px !important;
}

/* ── ACTIONS BAR: like/share/back row ── */
.property-details-container > div[data-drx-section="actions"] > div[style*="display:flex"] {
    flex-direction: row !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    gap: 8px !important;
}
.property-details-container > div[data-drx-section="actions"] button,
.property-details-container > div[data-drx-section="actions"] a[style*="font-weight:600"] {
    min-height: 44px !important;
    font-size: 14px !important;
}
#drx-like-btn, #drx-share-btn {
    padding: 10px 18px !important;
    border-radius: 8px !important;
    min-height: 44px !important;
    font-size: 14px !important;
}

/* ── DESCRIPTION + QUICK FACTS: stack vertically ── */
.drx-block[style*="grid-template-columns:2fr 1fr"],
.drx-block[style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.drx-block[style*="grid-template-columns:2fr 1fr"] > div:first-child,
.drx-block[style*="grid-template-columns: 2fr 1fr"] > div:first-child {
    padding: 20px 16px !important;
    border-bottom: 1px solid #eee !important;
}
.drx-block[style*="grid-template-columns:2fr 1fr"] > div:last-child,
.drx-block[style*="grid-template-columns: 2fr 1fr"] > div:last-child {
    padding: 20px 16px !important;
    border-radius: 0 0 8px 8px !important;
}
.drx-block[style*="padding:25px"],
.drx-block[style*="padding: 25px"] {
    padding: 16px !important;
}
.drx-block h3 { font-size: 1.15em !important; }
.drx-block p[style*="line-height:1.7"] {
    font-size: 1em !important;
    line-height: 1.65 !important;
}

/* Quick Facts list: 2-column grid on mobile */
.drx-block ul[style*="line-height:2"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    line-height: 1.8 !important;
}
.drx-block ul[style*="line-height:2"] li {
    padding: 6px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

/* ── FEATURE CARDS: single column, compact ── */
.property-deep-details {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}
.property-deep-details > div {
    padding: 16px !important;
}
.property-deep-details h3 { font-size: 1em !important; }
.property-deep-details ul { line-height: 1.7 !important; font-size: 0.95em !important; }

/* ── ROOM DETAILS: responsive grid + touch-friendly table ── */
div[style*="minmax(320px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}
div[style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
}
#drx-unit-toggle {
    font-size: 12px !important;
}
.drx-unit-btn {
    padding: 8px 14px !important;
    font-size: 13px !important;
    min-height: 36px !important;
}
div[data-drx-section="rooms"] table td {
    padding: 10px 12px !important;
}

/* ── LISTING HISTORY TABLE ── */
.drx-hist-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
.drx-hist-table { font-size: 13px !important; }
.drx-hist-table td, .drx-hist-table th {
    padding: 10px 10px !important;
    white-space: nowrap !important;
}
.drx-hist-dom, .drx-hist-lid { display: none !important; }

/* ── LISTING INFO GRID ── */
div[data-drx-section="listing_info"] div[style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
}
div[data-drx-section="listing_info"] div[style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 12px 16px !important;
}

/* ── MAP SECTION ── */
div[style*="height: 500px"][style*="border-radius: 12px"],
#crea-map-wrap {
    height: 50vw !important;
    min-height: 200px !important;
    max-height: 320px !important;
}
div[style*="height: 120px"][style*="position: absolute"],
#crea-map-addr { height: 70px !important; }
#crea-map-addr span:last-child { font-size: 0.8em !important; }
div[data-drx-section="map"] > div[style*="display: flex"][style*="gap: 10px"] {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
}
div[data-drx-section="map"] > div[style*="display: flex"] a {
    padding: 14px 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    min-height: 48px !important;
}

/* ── TRAVEL TIME FORM ── */
div[data-drx-section="travel"] form {
    flex-direction: column !important;
}
div[data-drx-section="travel"] input[name="destination"] {
    min-width: 0 !important;
    width: 100% !important;
}
div[data-drx-section="travel"] button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
}

/* ── WALKABILITY SCORES ── */
.drx-walk-scores {
    gap: 16px !important;
    flex-direction: column !important;
}
.drx-walk-item { min-width: 0 !important; }
div[style*="gap: 50px"][style*="flex-wrap"] { gap: 16px !important; }
div[style*="min-width: 200px"][style*="flex: 1"] { min-width: 100% !important; }

/* ── CALCULATOR TABS ── */
.drx-calc-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
    border-bottom: none !important;
}
.drx-calc-tab {
    padding: 10px 8px !important;
    font-size: 12px !important;
    text-align: center !important;
    border-radius: 8px 8px 0 0 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
}
.drx-calc-panel { padding: 16px !important; }
.drx-calc-panel > div[style*="grid-template-columns: 1fr 1fr"],
.drx-calc-panel > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}
.drx-calc-panel input, .drx-calc-panel select {
    min-height: 44px !important;
    font-size: 16px !important;
}
.drx-calc-panel button {
    min-height: 48px !important;
    font-size: 16px !important;
}

/* ── COMPARABLE TABS ── */
.drx-comp-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
}
.drx-comp-tab {
    padding: 10px 8px !important;
    font-size: 12px !important;
    text-align: center !important;
    border-radius: 6px 6px 0 0 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
}
.drx-comp-map { height: 220px !important; }
.drx-comp-panel { padding: 12px !important; }
.drx-comp-panel .crea-carousel-track > a,
.drx-comp-panel .crea-carousel-track .crea-card-link {
    min-width: 240px !important;
    max-width: 240px !important;
    flex: 0 0 240px !important;
}

/* ── SHARE / AUTH MODALS ── */
#drx-share-modal > div {
    padding: 20px !important;
    max-height: 80vh !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
#drx-share-modal {
    align-items: flex-end !important;
}
.drx-share-mobile-only { display: flex !important; }
#drx-auth-modal > div[style*="padding:35px"],
#drx-auth-modal > div[style*="padding: 35px"] {
    padding: 24px 20px !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}
#drx-auth-modal {
    align-items: flex-end !important;
}
#drx-auth-modal input[style*="letter-spacing: 12px"] {
    letter-spacing: 8px !important;
    font-size: 20px !important;
}
#drx-auth-modal input,
#drx-auth-modal button {
    min-height: 48px !important;
    font-size: 16px !important;
}

/* ── REVISION BANNERS ── */
.drx-rev-banner { padding: 8px 12px !important; }

/* ── SECTION HEADINGS: tighter spacing ── */
.property-details-container h2[style*="margin-top:40px"],
.property-details-container h2[style*="margin-top: 40px"] {
    margin-top: 28px !important;
    font-size: 1.25em !important;
    padding-bottom: 8px !important;
}

/* ── LIGHTBOX ARROWS: bigger touch targets ── */
#crea-lightbox span[onclick*="prevCreaImage"],
#crea-lightbox span[onclick*="nextCreaImage"] {
    width: 48px !important;
    height: 48px !important;
    font-size: 28px !important;
}

/* ── TOOLTIP FIX (desktop) ──
 * Anchors the popup to the right edge of the "?" icon so it sits left of
 * the trigger with the arrow pointing up at it. Works on desktop because
 * there's plenty of room to the left of the section-header "?" for a
 * 260px box. On mobile the "?" sits near the LEFT edge of the screen so
 * a right-anchored 260px box overflows the viewport — see the
 * `@media (max-width:600px)` override below for the mobile-only fix. */
.drx-tip-box {
    left: auto !important;
    right: -10px !important;
    transform: none !important;
    max-width: 260px !important;
    white-space: normal !important;
}
.drx-tip-box::before, .drx-tip-box::after {
    left: auto !important;
    right: 14px !important;
    transform: none !important;
}

/* ── TOOLTIP FIX (mobile) ──
 * On narrow screens the section-header "?" sits ~16px from the LEFT edge
 * of the viewport, so a right-anchored 260px popup spills off-screen to
 * the LEFT (clipped to "…adius / …je / …ne Type / …rooms"). Promote the
 * popup to position:fixed and centre it on the viewport so it always
 * fits regardless of where the trigger lives in the document. The arrow
 * is hidden because it's no longer geometrically adjacent to the "?". */
@media (max-width: 600px) {
    .drx-tip-box {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        max-width: calc(100vw - 32px) !important;
        min-width: 0 !important;
        width: max-content !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    .drx-tip-box::before, .drx-tip-box::after {
        display: none !important;
    }
}

/* ── CAROUSEL CARDS ON DETAIL PAGE ── */
.crea-carousel-track > a,
.crea-carousel-track > .crea-card-link {
    min-width: 260px !important;
    max-width: 260px !important;
    flex: 0 0 260px !important;
}
.crea-carousel-track {
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding: 8px 4px !important;
}
.crea-carousel-track > a,
.crea-carousel-track > .crea-card-link {
    scroll-snap-align: start !important;
}
.crea-carousel-arrow {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 16px !important;
}

/* ── FULLSCREEN OVERLAY ── */
.drx-fullscreen-overlay { padding: 16px 12px 60px !important; }
.drx-fullscreen-close {
    top: 8px !important; right: 8px !important;
    width: 40px !important; height: 40px !important; font-size: 18px !important;
}
.drx-fullscreen-content { font-size: 1.1em !important; }

/* ── MOBILE TOUR BUTTON: bottom-right ── */
.drx-mobile-tour-btn {
    bottom: 20px !important;
    right: 16px !important;
    left: auto !important;
    transform: none !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    border-radius: 28px !important;
    min-height: 44px !important;
}

/* ── DRX BLOCK hover/expand off on touch ── */
.drx-block:hover {
    transform: none !important;
    box-shadow: none !important;
}
}

@media (max-width: 480px) {
.property-details-container { padding: 0 8px !important; }
.property-details-container h1 { font-size: 1.2em !important; }
.property-details-container h2[style*="color: #cc0000"] { font-size: 1.5em !important; }
.drx-gallery-main { height: 56vw !important; min-height: 180px !important; }
#crea-mini-gallery.drx-gallery-vert {
    grid-template-columns: 1fr 1fr !important;
    max-height: 180px !important;
}
#crea-mini-gallery.drx-gallery-vert img { height: 80px !important; }
#crea-mini-gallery.drx-gallery-horiz img {
    height: 64px !important;
    min-width: 86px !important;
}
.drx-calc-tab { font-size: 11px !important; padding: 8px 6px !important; }
.drx-comp-tab { font-size: 11px !important; }
.drx-comp-panel .crea-carousel-track > a,
.drx-comp-panel .crea-carousel-track .crea-card-link {
    min-width: 220px !important; max-width: 220px !important;
    flex: 0 0 220px !important;
}
.crea-carousel-track > a,
.crea-carousel-track > .crea-card-link {
    min-width: 240px !important; max-width: 240px !important;
    flex: 0 0 240px !important;
}
div[style*="height: 500px"][style*="border-radius: 12px"],
#crea-map-wrap {
    height: 48vw !important;
    min-height: 180px !important;
    max-height: 280px !important;
}
.property-details-container h2[style*="margin-top:40px"],
.property-details-container h2[style*="margin-top: 40px"] {
    margin-top: 22px !important;
    font-size: 1.15em !important;
}
}

/* ── SAFE AREA PADDING for notched phones ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.drx-mobile-tour-btn {
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}
.drx-mobile-tour-modal {
    padding-bottom: env(safe-area-inset-bottom) !important;
}
}