/* ==========================================================================
   listing_new.css — property detail pages · 2026 redesign (blog layout)
   Load order: pcr_new.css → new_site.css → legacy_compat.css → listing_new.css
   Scope: #costa_rica_real_estate_content (only the property template uses it).
   The listing HTML is untouched; listing_new.js only adds classes/placeholders.
   ========================================================================== */

/* ---------- Legacy wrappers: release fixed widths ---------- */
#contentpage:has(#costa_rica_real_estate_content),
#contentpage:has(#costa_rica_real_estate_content) .contentfit,
#contentpage:has(#costa_rica_real_estate_content) #pagewidth_listing,
#contentpage:has(#costa_rica_real_estate_content) #wrapper,
#contentpage:has(#costa_rica_real_estate_content) #twocols,
#contentpage:has(#costa_rica_real_estate_content) #maincol_listings{display:block!important;float:none!important;width:auto!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;text-align:left;position:static}

/* ---------- Layout: content + sidebar (same grid as the blog) ---------- */
#costa_rica_real_estate_content{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 48px;align-items:start;max-width:1200px;margin:0 auto!important;padding:44px 20px 72px!important;background:none!important;width:auto!important;box-sizing:border-box;font-family:var(--opensans);color:var(--ink-2)}
#costa_rica_real_estate_content *,#costa_rica_real_estate_content *::before,#costa_rica_real_estate_content *::after{box-sizing:border-box}
#costa_rica_real_estate_content>article{display:block!important;width:auto!important;max-width:none!important;min-width:0;margin:0!important;padding:0!important;float:none!important;text-align:left!important;zoom:normal}

/* ---------- Listing header ---------- */
#properties_content_property #header_listing{display:block;width:auto;margin:0 0 26px;padding:0 0 22px;border-bottom:1px solid var(--line-2)}
#properties_content_property .main_real_estate_title{display:block;width:auto;text-align:left}
#properties_content_property h1{margin:0 0 12px!important;padding:0!important;font-family:var(--oswald)!important;font-weight:300!important;font-size:24px!important;line-height:1.2!important;letter-spacing:.3px;color:var(--ink-2)!important}
#properties_content_property h1 span{font-family:inherit!important;font-size:inherit!important;font-weight:400!important;color:var(--blue)!important}
#properties_content_property #code{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 10px;font-family:var(--opensans);font-weight:400;font-size:15px;line-height:1.6;color:var(--grey)}
#properties_content_property #code br{display:none}
#properties_content_property #code .ls-id{display:inline-flex;align-items:center;height:24px;margin:0;padding:0 9px;background:var(--ice);border:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--blue-dk);vertical-align:middle;white-space:nowrap}
#properties_content_property #price{margin:0 0 16px;font-family:var(--oswald);font-weight:400;font-size:20px;line-height:1.2;letter-spacing:.3px;color:var(--blue)}
#properties_content_property .sharethis-inline-share-buttons{margin:0 0 4px;text-align:left!important}

/* features: fact cards */
#properties_content_property .realestate_features{display:block;float:none;width:auto;margin:14px 0 0;text-align:left;font-size:14px}
#properties_content_property ul#data_table{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;float:none!important;margin:0!important;padding:0!important;list-style:none}
#properties_content_property ul#data_table li{position:relative;margin:0;padding:0 0 0 14px;text-align:left!important;font-size:12.5px;line-height:1.3;color:var(--ink-2);list-style:none}
#properties_content_property ul#data_table li::before{content:"";position:absolute;left:2px;top:6px;width:5px;height:5px;border-radius:50%;background:var(--aqua)}
#properties_content_property ul#data_table li,#properties_content_property ul#data_table li strong{font-weight:700}

/* wide screens: title / price / share on the left, features in one column on the right (as the old design) */
@media (min-width:1100px){
  #properties_content_property #header_listing{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:0 32px;align-items:start}
  #properties_content_property .realestate_features{margin:4px 0 0;padding:0 0 0 24px;border-left:1px solid var(--line-2)}
  #properties_content_property ul#data_table{grid-template-columns:minmax(0,1fr)!important;gap:0}
}

/* ---------- Photos: rows of 3, .single-thumb full width ---------- */
#properties_content_property .photo{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:auto!important;min-width:0!important;max-width:none!important;margin:0 0 26px!important;padding:0!important;font-size:0;line-height:0}
#properties_content_property .photo.ls-empty{display:none!important}
#properties_content_property .photo a{display:block;overflow:hidden;background:#dde7ee;aspect-ratio:4/3;font-size:0}
#properties_content_property .photo img{display:block;width:100%!important;height:100%!important;max-width:none;object-fit:cover;margin:0!important;transition:transform .5s ease}
#properties_content_property .photo a:hover img{transform:scale(1.04)}
#properties_content_property .photo .ls-wide{grid-column:1/-1;aspect-ratio:auto}
#properties_content_property .photo a.ls-wide img,#properties_content_property .photo img.ls-wide{height:auto!important;max-height:80vh;object-fit:cover}
#properties_content_property .photo .to_enlarge{grid-column:1/-1;display:block;margin:4px 0 0;font-size:12px!important;line-height:1.4;letter-spacing:.5px;text-align:center;color:var(--grey-2);text-transform:uppercase}

/* ---------- Reading typography (blog single post) ---------- */
#properties_content_property>p:not(.photo),#properties_content_property>ul,#properties_content_property>ol,#properties_content_property>div:not(#header_listing):not(.contactus_link){font-size:15px!important;line-height:1.7;color:var(--ink-2);text-align:left}
#properties_content_property>p:not(.photo){margin:0 0 1.1em;padding:0}
#properties_content_property a{font-size:inherit}
#properties_content_property>p a,#properties_content_property>ul a,#properties_content_property>ol a{color:var(--link);text-decoration:underline;text-decoration-color:rgba(48,99,164,.35);text-underline-offset:3px}
#properties_content_property>h2,#properties_content_property>h3,#properties_content_property>h4{font-family:var(--oswald);font-weight:400;color:var(--ink-2);line-height:1.25;letter-spacing:.3px;text-align:left;text-transform:none}
#properties_content_property>h2{margin:1.8em 0 .6em;font-size:26px}
#properties_content_property>h3{margin:1.6em 0 .5em;font-size:21px}
#properties_content_property>ul,#properties_content_property>ol{margin:0 0 1.3em;padding-left:1.4em}
#properties_content_property>ul li,#properties_content_property>ol li{margin:.3em 0;list-style:revert;font-size:15px}
#properties_content_property>ul li::marker,#properties_content_property>ol li::marker{color:var(--blue)}
/* long lists (listing_new.js): 2 columns; short items 3 columns */
@media (min-width:480px){#properties_content_property>ul.ls-cols-3{columns:2;column-gap:36px}}
#properties_content_property>ul.ls-cols-3>li,#properties_content_property>ul.ls-cols-2>li{break-inside:avoid;margin:0 0 .45em}
@media (min-width:700px){
  #properties_content_property>ul.ls-cols-2{columns:2;column-gap:36px}
  #properties_content_property>ul.ls-cols-3{columns:3}
}

/* embedded video (YouTube iframe with fixed width/height in the HTML) */
#properties_content_property iframe{display:block;width:100%!important;max-width:100%;height:auto!important;aspect-ratio:16/9;margin:8px 0 26px;border:0;background:#000}
#properties_content_property #price a{font-family:var(--opensans);font-size:13px;letter-spacing:.5px;color:var(--link);text-decoration:underline;text-underline-offset:3px}
#properties_content_property #price br{display:none}
#properties_content_property #price a{margin-left:12px;vertical-align:middle}
#properties_content_property #price a.sold{color:#B3261E;font-weight:700}
#properties_content_property #price a.sold:hover{color:#8C1D17}
/* pcr_new.css hides the share buttons on phones (aside div{display:none}) */
#costa_rica_real_estate_content article#properties_content_property aside .sharethis-inline-share-buttons{display:block!important;text-align:center!important}

/* contact button + share */
#properties_content_property .contactus_link{margin:32px 0 0!important;padding:0!important;text-align:center}
#properties_content_property .contactus_link a{display:inline-flex;align-items:center;height:48px;padding:0 26px;background:var(--blue);color:#fff;font-family:var(--oswald);font-size:16px;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none}
#properties_content_property .contactus_link a:hover{background:#0379ab;color:#fff;text-decoration:none}
#properties_content_property .contactus_link #link_to_the_form{position:static;width:auto;margin:0;padding:0 26px;border-radius:0;box-shadow:none;font-size:16px;transition:background .2s}
#costa_rica_real_estate_content article#properties_content_property aside{display:block!important;width:auto!important;max-width:none;min-width:0;margin:32px 0 0;padding:18px 0 0;border-top:1px solid var(--line-2);text-align:center}
#costa_rica_real_estate_content article#properties_content_property aside h4{margin:0 0 10px;padding:0;font-family:var(--oswald);font-weight:500;font-size:15px;letter-spacing:1px;text-transform:uppercase;text-align:center;color:var(--grey)}

/* ---------- Sidebar: widgets as cards (blog) ---------- */
#formproperty{display:flex!important;flex-direction:column;font-size:14px;line-height:1.5;color:var(--ink-2)}
#formproperty>#searchapp,#formproperty>h2,#formproperty>form{background:var(--ice)}
#formproperty>#searchapp{width:auto!important;margin:0 0 22px!important;padding:18px 20px 20px;border-top:3px solid var(--aqua);position:relative}
#formproperty h2{margin:0!important;font-family:var(--oswald)!important;font-weight:500!important;font-size:18px!important;line-height:1.2;letter-spacing:1px;text-transform:uppercase;text-align:left!important;color:var(--grey)!important;background:none}
#formproperty>#searchapp>h2{margin:0 0 12px!important;padding:0!important;border:0!important;width:auto!important;height:auto!important;cursor:default;pointer-events:none}
#formproperty>h2{padding:18px 20px 12px;border-top:3px solid var(--aqua)}
#formproperty>h2 a[name]{display:none}

/* search widget */
#formproperty table.tablelistings,#formproperty table.tablelistings tbody,#formproperty table.tablelistings tr,#formproperty table.tablelistings td{display:block;width:100%!important;border:0;padding:0;margin:0;background:none}
#formproperty table.tablelistings.google{margin-top:8px}
#formproperty #searchapp .box_s2{display:flex;flex-wrap:wrap;gap:8px;background:none;padding:0;margin:0;text-align:left;width:auto!important}
#formproperty #searchapp input#id_id_listing{width:100%!important;height:44px!important;line-height:normal;text-align:left}
#formproperty #searchapp .box_s2 p{display:flex;font-size:0}
#formproperty #searchapp .box_s2 form{display:flex;gap:8px;flex:1 1 100%;margin:0}
#formproperty #searchapp .box_s2 p{flex:1 1 auto;margin:0;padding:0}
#formproperty input[type=text],#formproperty input[type=email],#formproperty input[type=tel],#formproperty input[type=number],#formproperty select,#formproperty textarea{display:block;width:100%!important;height:44px;margin:0!important;padding:0 12px;border:1px solid var(--line)!important;border-radius:0;background:#fff;font:15px Arial,Helvetica,sans-serif!important;color:var(--ink-2);box-shadow:none;-webkit-appearance:none;appearance:none}
#formproperty select{padding-right:34px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23585A59' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;cursor:pointer}
#formproperty select:invalid,#formproperty select:has(option:checked[value=""]){color:#757575}
#formproperty textarea{height:120px;padding:10px 12px;resize:vertical;line-height:1.5}
#formproperty input::placeholder,#formproperty textarea::placeholder{color:#757575;opacity:1}
#formproperty input:focus,#formproperty select:focus,#formproperty textarea:focus{outline:3px solid var(--blue);outline-offset:0}
#formproperty #searchapp input#btn-submit,#formproperty #searchapp .box_s2 input[type=submit]{flex:none;height:44px;width:auto!important;padding:0 20px;margin:0;border:0;border-radius:0;background:var(--blue);color:#fff;font-family:var(--oswald);font-size:17px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;appearance:none}
#formproperty #searchapp button#btn-submit.btn-advanced{flex:1 1 100%;width:auto!important;height:44px;margin:0;padding:0 18px;border:1px solid var(--blue)!important;border-radius:0;background:#fff!important;color:var(--blue)!important;font-family:var(--oswald);font-size:17px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
#formproperty #searchapp button#btn-submit.btn-advanced:hover{background:var(--blue)!important;color:#fff!important}
#formproperty #searchapp .box_s2 input[type=submit]:hover{background:#0379ab}
#formproperty .searchboxregion .searchboxregion{display:block!important;float:none!important;max-width:none!important;width:100%!important;padding:0!important;margin:0!important;position:static!important;left:auto!important;text-align:left!important}
#formproperty .searchboxx{display:block!important;float:none!important;max-width:none!important;margin:0!important;padding:0!important;width:100%!important}
#formproperty .searchboxx form{display:flex;gap:8px;margin:0}
#formproperty .searchboxx p{display:none}
#formproperty .searchboxx input[name=search]{flex:1 1 auto;min-width:0;height:44px!important;width:auto!important}
#formproperty .searchboxx input[type=submit]{flex:none;width:46px!important;height:44px!important;margin:0!important;padding:0;border:0!important;border-radius:0;font-size:0!important;color:transparent!important;cursor:pointer;-webkit-appearance:none;appearance:none;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat center!important}
#formproperty .searchboxx input[type=submit]:hover{background-color:#0379ab!important}
/* advanced panel (filled by pcr.js from /a/search_box.html) — same as the blog */
#formproperty #searchapp #advanced-search{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;padding:16px 20px 18px;background:#fff;border-top:4px solid var(--aqua);box-shadow:0 12px 34px rgba(0,0,0,.18);visibility:hidden;opacity:0;transition:opacity .2s}
#formproperty #searchapp #advanced-search:empty{display:none}
#formproperty #searchapp #advanced-search h2{display:none}
#formproperty #searchapp .box_s{padding:0;text-align:left}
#formproperty #searchapp .fieldWrapperStatus{margin:0 0 14px}
#formproperty #searchapp .fieldWrapperStatus ul{display:flex;height:42px;margin:0;padding:0;border:1px solid var(--line);list-style:none}
#formproperty #searchapp .fieldWrapperStatus li{flex:1 1 50%;display:flex;margin:0}
#formproperty #searchapp .fieldWrapperStatus label{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--oswald);font-size:15px;color:var(--ink-2);cursor:pointer}
#formproperty #searchapp .fieldWrapperStatus label:has(input:checked){background:var(--blue);color:#fff}
#formproperty #searchapp .tabs-wrapper input[type=radio]{display:none}
#formproperty #searchapp .tab-body-wrapper,#formproperty #searchapp .listResult{display:none}
#formproperty #searchapp #txttanda{display:flex;align-items:center;justify-content:center;height:42px;margin:0 0 8px;border:1px solid var(--blue);background:#fff;color:var(--blue);font-family:var(--oswald);font-size:15px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
#formproperty #searchapp #btnsubmt{position:static;display:block;width:100%;height:46px;margin:0;border:0;border-radius:0;background:var(--blue);color:#fff;font-family:var(--oswald);font-size:17px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}

/* contact widget */
#formproperty>form{display:block;margin:0;padding:0 20px 20px;text-align:left}
#formproperty>form>p{margin:0 0 12px!important;padding:0!important;font-size:13px;line-height:1.55;color:var(--grey-2);text-align:left}
#formproperty>form>p:last-child{margin:14px 0 0!important}
#formproperty>form>p u{text-decoration:none;font-weight:600}
#formproperty .rojo{color:inherit}
#formproperty table.formulario_propiedad,#formproperty table.formulario_propiedad>tbody{display:block;width:100%!important;margin:0!important;font-size:14px}
#formproperty table.formulario_propiedad tr{display:block;margin:0 0 8px}
#formproperty table.formulario_propiedad tr.ls-hide{display:none}
#formproperty table.formulario_propiedad td{display:block;width:100%!important;padding:0!important;border:0!important;text-align:left!important;font-size:14px;height:auto!important}
#formproperty table.formulario_propiedad td.ls-lbl{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#formproperty .inputform{display:block;float:none;border:0;text-align:left}
/* state / province: the visible prompt is the select's first option / placeholder */
#formproperty [id^="cnt_"]{margin:0!important;padding:0!important;width:auto!important;background:none!important}
#formproperty [id^="cnt_desc_"]{font-size:0;line-height:0}
#formproperty [id^="cnt_desc_"] .rojo{display:none}
#formproperty [id^="cnt_desc_"] .inputform{font-size:14px;line-height:1.5}
/* Buy / Rent */
#formproperty tr:has(.ls-seg) td.ls-lbl{position:static!important;width:auto!important;height:auto!important;clip:auto;margin:6px 0 6px!important;font-family:var(--oswald);font-size:13px!important;letter-spacing:1px;text-transform:uppercase;color:var(--grey)}
#formproperty .ls-seg{display:flex;height:44px;border:1px solid var(--line);background:#fff}
#formproperty .ls-seg label{flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font-family:var(--oswald);font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
#formproperty .ls-seg label+label{border-left:1px solid var(--line)}
#formproperty .ls-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#formproperty .ls-seg label.is-on,#formproperty .ls-seg label:has(input:checked){background:var(--blue);color:#fff}
#formproperty .ls-seg label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:-3px}
/* captcha (304px) fits the 300px card */
#formproperty .g-recaptchax{width:100%!important;transform:none!important;margin:4px 0 0}
#formproperty .g-recaptcha{transform:scale(.97)!important;transform-origin:0 0!important}
/* send */
#formproperty .formulario_footer{padding-top:4px!important}
#formproperty .formulario_footer input[type=submit],#formproperty #submit{display:inline-flex;align-items:center;justify-content:center;width:100%!important;height:46px!important;margin:0!important;padding:0 22px;border:1px solid var(--blue)!important;border-radius:0;background:var(--blue);color:#fff;font-family:var(--oswald);font-size:16px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;float:none!important;-webkit-appearance:none;appearance:none}
#formproperty #submit:hover{background:#0379ab;border-color:#0379ab}
#formproperty #submit:disabled{opacity:.7;cursor:progress}

/* pcr.js "Find Properties" link is not used here */
#costa_rica_real_estate_content .gotolistingsbtn{display:none!important}

/* ---------- Responsive ---------- */
/* phones / tablets: the contact button becomes a bar fixed at the bottom; hidden while the form is on screen */
@media (max-width:991.98px){
  html.ls-detail body{padding-bottom:56px}
  #properties_content_property .contactus_link #link_to_the_form{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;width:100%;height:52px;box-shadow:0 -4px 16px rgba(0,0,0,.15);transition:transform .25s ease}
  html.ls-form-on #properties_content_property .contactus_link #link_to_the_form{transform:translateY(110%)}
  #properties_content_property .contactus_link{margin:0!important;height:0}
}
@media (max-width:1100px){
  #costa_rica_real_estate_content{grid-template-columns:minmax(0,1fr) 310px;gap:0 32px}
}
@media (max-width:991.98px){
  #properties_content_property #price{font-size:19px}
  #costa_rica_real_estate_content{grid-template-columns:minmax(0,1fr);padding:30px 16px 56px!important}
  #formproperty{margin-top:44px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr;gap:0 20px;align-items:start}
  #formproperty>#searchapp{grid-column:1;grid-row:1/span 2;margin:0}
  #formproperty>h2{grid-column:2;grid-row:1}
  #formproperty>form{grid-column:2;grid-row:2}
}
@media (max-width:700px){
  #formproperty{display:flex!important}
  #formproperty>#searchapp{margin:0 0 22px}
  #properties_content_property #price{font-size:19px}
  #properties_content_property ul#data_table{grid-template-columns:minmax(0,1fr)}
  #properties_content_property ul#data_table li{font-size:12px}
  #properties_content_property ul#data_table li::before{top:5.5px}
  #properties_content_property .photo{gap:4px}
  #properties_content_property>h2{font-size:23px}
}