/*
 * Styles for /Developments/Development.jsp (public development display page).
 *
 * The top gallery (big image + thumbnail strip, with fotorama as the click/mobile
 * fullscreen viewer) reuses the shared component styling in css-2026/listing.css.
 * Everything below the gallery - the two-column body, plans, site layout, features
 * and the enquiry form - is styled here.
 *
 * Palette/fonts follow css-2026/main.css: navy #142845, teal #82CEC7, coral #FE6F61,
 * Barlow for headings, Roboto for body.
 */

#devpage{ width:100%; background:#fff; }

#gallery #bigPicContainer #bigPic{ width:100%; height:100%; object-fit:cover; }

/* map tab: give the (floated) view an explicit width so the Google map isn't shrink-wrapped to 0 */
#galleryWrap #mapView{ width:100%; }

/* video tab: fill the gallery block with the YouTube iframe */
#galleryWrap #videoView{ width:100%; background:#000; }
#galleryWrap #videoView #vidIFrame{ width:100%; height:var(--gallhght); border:0; display:block; }

/* mobile photo gallery (#mainpicholer): fotorama can't parse height:'var(--gallhght)'
   and falls back to the image's own ratio. Our photos are 4:3, so the stage ends up
   shorter than #mainpicholer (which is fixed at var(--gallhght)), exposing its white
   background as a gap above the Photos/Map/Video toolbar. Force the stage + image to
   fill the container. Scoped to #devpage so Listing.jsp is unaffected. */
#devpage #mainpicholer .fotorama,
#devpage #mainpicholer .fotorama__wrap,
#devpage #mainpicholer .fotorama__stage{
   height:var(--gallhght) !important;
}
#devpage #mainpicholer .fotorama__stage__frame{
   width:100% !important; height:100% !important;
}
#devpage #mainpicholer .fotorama__stage .fotorama__img{
   position:absolute; top:0; left:0;
   width:100% !important; height:100% !important;
   max-width:none; max-height:none;
   transform:none !important;
   object-fit:cover;
}

/* "Coming Soon" tag overlaid on the top-left of the main image (matches the
   search-result card badge styling). #galleryWrap is the positioning context. */
#devpage #galleryWrap{ position:relative; }
#devpage .devGalleryBadge{
   position:absolute; top:14px; left:14px; z-index:10;
   font:600 11px "Roboto", sans-serif; letter-spacing:.06em; text-transform:uppercase;
   color:#fff; background:#FE6F61;
   padding:6px 12px; border-radius:8px;
   pointer-events:none;
}

/* ---------- two column body ---------- */
.devlayout{ width:92%; max-width:1200px; margin:0 auto; display:flex; align-items:flex-start; gap:40px; padding:10px 0 40px 0; }
.devlayout.nogallery{ padding-top:130px; }   /* clear the fixed header when there is no top gallery */
.devmain{ flex:1 1 auto; min-width:0; text-align:left; }

#rhd #contactdiv {
  padding: 60px 0px 30px;
  text-align: center;
}

.devside{ flex:0 0 340px; width:340px; }

.devside #contactdiv .messdone{margin: 0px 0px 20px 0px; padding: 20px 0px 0px 0px;}
.devside #contactdiv .messdone span{color:#142845;}
.devside #contactdiv .messdone i{  padding-right: 16px;
  color: green;
  font-size: 24px;
  top: 3px;
  position: relative;}

@media (max-width:900px){
   .devlayout{ flex-direction:column; gap:0; }
   .devside{ flex-basis:auto; width:100%; max-width:480px; }
}

/* ---------- admin-only "hidden" banner (development not visible to normal users) ---------- */
#devpage .devhiddenbanner{
   display: inline-block;
   position: relative;
   align-items:center;
   gap:10px;
   /* margin: 154px 0 0px; */
   padding:12px 18px;
   border:1px solid #FE6F61;
   border-left:5px solid #FE6F61;
   border-radius:6px;
   background:#FFF1EF;
   color:#142845;
   font:400 15px/1.4 "Roboto", sans-serif;
   width: calc(100% - 60px);
   top: 110px;
   margin: 30px 10px;
}
#devpage .devhiddenbanner i{ color:#FE6F61; font-size:18px; }
#devpage .devhiddenbanner strong{ color:#FE6F61; }

/* ---------- header (top of left column) ---------- */
.devhead{ padding:26px 0 6px 0; }
.devhead .devadminbar{ margin-bottom:14px; font:600 13px "Roboto", sans-serif; }
.devhead .devadminbar a{ color:#142845; text-decoration:underline; margin-right:14px; }
.devhead .devadminbar a:hover{ color:#82CEC7; }
.devhead .devadminbar .hiddennote{ color:#FE6F61; margin-right:14px; }

.devhead .devstatus{
   display:inline-block; margin-bottom:12px; padding:5px 14px; border-radius:20px;
   background:#82CEC7; color:#142845; font:600 12px "Roboto", sans-serif; letter-spacing:.05em; text-transform:uppercase;
}
.devhead h1{ margin:0; font:600 42px "Barlow", sans-serif; color:#142845; line-height:1.1; }
.devhead .devmeta{ margin:12px 0 0 0; font:400 17px "Roboto", sans-serif; color:#555; }
.devhead .devmeta .sep{ padding:0 8px; color:#c0c0c0; }
.devhead .devprice{ margin:14px 0 0 0; font:600 26px "Barlow", sans-serif; color:#FE6F61; }
.devhead .devheading{ margin:22px 0 8px 0; font:600 23px "Barlow", sans-serif; color:#142845; }
.devhead .devdesc{ font:400 17px/1.6 "Roboto", sans-serif; color:#333; }

/* ---------- generic section ---------- */
.devsection{ padding:30px 0; /*! border-top:1px solid #eee; */ margin-top:26px; text-align:left; }
.devsection > h2{ margin:0 0 22px 0; font:600 28px "Barlow", sans-serif; color:#142845; }

/* ---------- plans (left aligned) ---------- */
.plangrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:22px; justify-items:start; width: 100%;}
.plancard{ width:100%; display:flex; flex-direction:column; border:1px solid #e3e3e3; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 1px 4px rgba(20,40,69,.06); }
.plancard .planthumb{ width:100%; background:#f4f6f8; position:relative; }
.plancard .planthumb img{ width:100%; height:auto; display:block; }

/* magnify button over the bottom-right of the plan thumbnail - opens the full-image modal */
.plancard .planzoom{
   position:absolute; right:10px; bottom:10px;
   width:38px; height:38px; padding:0; border:none; border-radius:50%;
   background:rgba(20,40,69,.65); color:#fff; cursor:pointer;
   display:flex; align-items:center; justify-content:center;
   font-size:16px; transition:background .15s ease;
}
.plancard .planzoom:hover{ background:#142845; }

/* orange "View Listing" button shown when a plan is linked to a property listing */
.plancard .planlisting{
   display:block; margin-top:auto; text-align:center;
   background:#FE6F61; color:#fff; text-decoration:none;
   font:600 15px "Roboto", sans-serif; padding:11px 16px; border-radius:6px;
   transition:background .15s ease;
}
.plancard .planlisting:hover{ background:#f4533f; color:#fff; }

/* full-image modal for plan thumbnails */
.planmodal{ display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.82); }
.planmodal.open{ display:flex; align-items:center; justify-content:center; }
.planmodal img{ max-width:92vw; max-height:88vh; border-radius:6px; box-shadow:0 4px 30px rgba(0,0,0,.5); }
.planmodal .planmodalclose{
   position:absolute; top:16px; right:24px; line-height:1;
   background:none; border:none; color:#fff; font-size:38px; cursor:pointer;
}
.plancard .planbody{ display:flex; flex-direction:column; flex:1 1 auto; padding:16px 14px 20px 14px; }
.plancard .plantitle{ margin:0 0 6px 0; font:600 20px "Barlow", sans-serif; color:#142845; }
.plancard .planprice{   margin-bottom:10px; font-family: "DIN", sans-serif;font-weight: 500;color: #1e1e1e;}
.plancard .planspecs{ font:400 15px "Roboto", sans-serif; color:#555; margin-bottom:10px; }
.plancard .planspecs span{ margin-right:14px; white-space:nowrap; display:inline-block; }
.plancard .planspecs .fa{ margin-right:5px; color:#82CEC7; }
/* garages uses a Font Awesome car icon (no garage symbol in sprites.svg); match the
   coral SVG specs icons in .recentsItem__row */
.plancard .recentsItem__row p .planspecicon{ width:18px; margin-right:6px; font-size:16px; text-align:center; color:#FE6F61; }
.plancard .plannotes{ font:400 14px/1.5 "Roboto", sans-serif; color:#666; padding: 10px 0px 10px;}

/* ---------- site layout ---------- */
#layoutSection .sitelayoutimg{ width:100%; max-width:760px; height:auto; border:1px solid #e3e3e3; border-radius:8px; display:block; margin-bottom:20px; }
#layoutSection .button{ text-decoration:none; }
#layoutSection .button .fa{ margin-right:8px; }

/* ---------- features (left aligned) ---------- */
.featgrid{ display:grid; /*! grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); */ gap:26px 40px; width: 100%;}
.featblock h3{ margin:0 0 10px 0; font:600 20px "Barlow", sans-serif; color:#142845; border-bottom:2px solid #82CEC7; padding-bottom:6px; width: 100%;}
.featblock .feattext{ font:400 16px/1.6 "Roboto", sans-serif; color:#333; padding-bottom: 20px;}
.featblock .feattext li{margin-left:20px;}

/* ---------- not found / not available ---------- */
.devnotavail{
   max-width:640px; margin:160px auto; padding:18px 24px; text-align:center; border-radius:8px;
   background:rgba(254,111,97,.12); border:1px solid #FE6F61; color:#FE6F61; font:600 18px "Roboto", sans-serif;
}

@media (max-width:600px){
   .devhead h1{ font-size:32px; }
   .devsection > h2{ font-size:24px; }
}


/* ====================================================================
 * Edit_Development.jsp form styling (moved out of that inline <style>).
 * Scoped to #offercont / #offerform so it only affects the edit page.
 * ==================================================================== */

/* ----- page wrapper ----- */
#offercont {
   width: 100%;
   text-align: center;
}
#offercont #contentholder {
   width: 96%;
   max-width: 1100px;
   margin: 0 auto;
   padding: 10px 2% 60px 2%;
   text-align: left;
   background: #FFFFFF;
   box-sizing: border-box;
}
#offercont .pghead { width: 100%; text-align: left; }
#offercont .pghead .crumbs { text-align:center; margin: 24px 0 0 0; font:14px Roboto, sans-serif; color:#555; }
#offercont .pghead .crumbs a { color:#142845; text-decoration:none; font-weight:600; }
#offercont .pghead .crumbs a:hover { color:#82CEC7; text-decoration:underline; }
#offercont .pghead .crumbs .sep { padding:0 8px; color:#c0c0c0; }
#offercont .pghead .crumbs .current { color:#555; font-weight:600; }
#offercont .pghead h1 { 
float: left;
  width: 100%;
  margin: 30px 0px 60px 0px;
  padding: 0px 0px 20px 0px;

  color: #142845;
  font: 50px 'Barlow', Roboto , Arial;
  text-align: center;





 }
#offercont .pghead .pgsub { color: #555; font-size: 14px; margin: 0 0 18px 0; }
#offercont .pghead .pgactions { width: 100%; clear: both; text-align: center; margin: 0 0 40px 0; }
#offercont .pghead .pgactions .pgactionbtn {
   display: inline-block;
   padding: 10px 22px;
   background: #142845;
   color: #FFFFFF;
   border-radius: 4px;
   font: 16px Roboto, sans-serif;
   font-weight: 600;
   text-decoration: none;
}
#offercont .pghead .pgactions .pgactionbtn:hover { background: #82CEC7; }
#offercont .pghead .pgactions .pgactionbtn .fa { padding-right: 6px; }

/* ----- section card (each "offercatg > infobox") ----- */
#offerform { font-family: Roboto, sans-serif; }
#offerform .offercatg { width: 100%; margin: 0 0 18px 0; }
#offerform .infobox {
   background: #FFFFFF;
   border: 1px solid #c0c0c0;
   border-radius: 6px;
   padding: 0;
}
#offerform .infobox .infoboxhdr {
   background: #142845;
   border-radius: 6px 6px 0 0;
   margin: 0;
}
#offerform .infobox .infoboxhdr h2 {
margin: 0;
  padding: 10px 20px;
  font: 20px Barlow, sans-serif;
  font-weight: 600;
  color: #FFFFFF;
}
#offerform .infobox .sectn {
   display: block;
   width: 100%;
   padding: 12px 0;
   box-sizing: border-box;
}

/* ----- each row: label left (200px) + control right ----- */
#offerform .infobox .infoboxct {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   width: 100%;
   max-width: 100%;
   flex: none;
   margin: 0;
   padding: 10px 14px;
   border: 0;
   font: 18px Roboto, sans-serif;
   box-sizing: border-box;
}

/* the wrappers FormUtils emits - kill any inherited border / background so we end up with
   exactly one border (on the input / select / .select2-selection itself) */
#offerform .infobox .infoboxct .intextwrap,
#offerform .infobox .infoboxct .yesnopick,
#offerform .infobox .infoboxct .selwrap {
   border: 0 !important;
   background: transparent !important;
   box-shadow: none !important;
}

/* labels - input row has bare <label>, select row wraps it in <span.yesnoflow> */
#offerform .infobox .infoboxct > label.listinlabel,
#offerform .infobox .infoboxct > .yesnoflow {
   flex: 0 0 200px;
   width: 200px;
   max-width: 200px;
   padding: 0 16px 0 0;
   margin: 0;
   box-sizing: border-box;
   font: 18px Roboto, sans-serif;
   font-weight: 600;
   color: #555;
   text-transform: none;
}
#offerform .infobox .infoboxct > .yesnoflow {
   padding-bottom: 0;
}
#offerform .infobox .infoboxct > .yesnoflow label.listinlabel {
   font: 18px Roboto, sans-serif;
   font-weight: 600;
   color: #555;
   text-transform: none;
}

/* shared sizing for input / select / select2-selection - all the same height + border + padding */
#offerform .infobox .infoboxct > .intextwrap input,
#offerform .infobox .infoboxct > .yesnopick .selwrap select,
#offerform .infobox .infoboxct > .yesnopick .selwrap .select2-container .select2-selection--single {
   height: 36px;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   padding: 0 14px;
   border: 1px solid #c0c0c0;
   border-radius: 4px;
   background: #FFFFFF;
   color: #142845;
   font: 16px Roboto, sans-serif;
   line-height: 50px;
   box-sizing: border-box;
}

/* focus state */
#offerform .infobox .infoboxct > .intextwrap input:focus,
#offerform .infobox .infoboxct > .yesnopick .selwrap select:focus {
   outline: none;
   border-color: #82CEC7;
   box-shadow: 0 0 0 2px rgba(130, 206, 199, 0.30);
}

/* text input wrapper takes the rest of the row */
#offerform .infobox .infoboxct > .intextwrap {
   flex: 1 1 0;
   min-width: 0;
   width: auto;
   max-width: calc(100% - 200px);
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
#offerform .infobox .infoboxct > .intextwrap .currency {
   display: inline-block;
   padding-right: 6px;
   color: #555;
   font-size: 18px;
}

/* select wrapper takes the rest of the row */
#offerform .infobox .infoboxct > .yesnopick {
   flex: 1 1 0;
   min-width: 0;
   width: auto;
   max-width: calc(100% - 200px);
   margin: 0;
   padding: 0;
   text-align: left;
   vertical-align: middle;
   box-sizing: border-box;
}
#offerform .infobox .infoboxct > .yesnopick .selwrap {
   width: 100%;
   max-width: 100%;
   padding: 0;
   height:auto;
}

/* native select - reset browser appearance so its built-in styling doesn't double up */
#offerform .infobox .infoboxct > .yesnopick .selwrap select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23555' d='M0 0 L6 8 L12 0 Z'/></svg>");
   background-repeat: no-repeat;
   background-position: right 14px center;
   background-size: 10px 6px;
   padding-right: 36px;
   line-height: normal;
}

/* error message - drops to a new line under the control */
#offerform .infobox .infoboxct > .offinputerr {
   flex: 0 0 100%;
   width: 100%;
   margin: 6px 0 0 200px;
   padding: 0;
   font: 13px Roboto, sans-serif;
   color: #cc0000;
   box-sizing: border-box;
}
#offerform .infobox .infoboxct > .yesnopick > .offinputerr {
   width: 100%;
   margin: 6px 0 0 0;
   padding: 0;
   font: 13px Roboto, sans-serif;
   color: #cc0000;
}
#offerform .offinf {
   display: inline-block;
   margin: 4px 0 0 0;
   font-size: 11px;
   color: #c0c0c0;
   width: calc(100% - 210px);
   margin-left: 200px;
}

/* attention (validation error) - red border on the control itself */
#offerform .infobox .infoboxct .intextwrap.attention input,
#offerform .infobox .infoboxct .intextwrap.attention textarea,
#offerform .infobox .infoboxct .selwrap.attention select,
#offerform .infobox .infoboxct .selwrap.attention .select2-selection--single {
   border-color: #FE6F61 !important;
}

/* ----- textareas (.infoboxct.textB) - label on top, full-width textarea below ----- */
#offerform .infobox .infoboxct.textB {
   display: block;
   width: 100%;
   max-width: 100%;
   padding: 14px 24px;
   box-sizing: border-box;
}
#offerform .infobox .infoboxct.textB > label.listinlabel {
   display: block;
   flex: none;
   width: auto;
   max-width: none;
   margin: 0 0 8px 0;
   padding: 0;
   font: 18px Roboto, sans-serif;
   font-weight: 600;
   color: #555;
}
#offerform .infobox .infoboxct.textB > .intextwrap {
   display: block;
   width: 100%;
   max-width: 100%;
   margin: 0;
   padding: 0;
}
#offerform .infobox .infoboxct.textB > .intextwrap textarea {
   width: 100%;
   min-height: 130px;
   padding: 14px;
   border: 1px solid #c0c0c0;
   border-radius: 4px;
   font: 18px Roboto, sans-serif;
   line-height: 1.4;
   color: #142845;
   resize: vertical;
   box-sizing: border-box;
}
#offerform .infobox .infoboxct.textB > .intextwrap textarea:focus {
   outline: none;
   border-color: #82CEC7;
   box-shadow: 0 0 0 2px rgba(130, 206, 199, 0.30);
}
#offerform .infobox .infoboxct.textB > .offinputerr {
   margin-left: 0;
}

/* ----- select2 (suburb dropdown) - sizing already shared above, just the chrome details ----- */
#offerform .infobox .infoboxct > .yesnopick .selwrap .select2-container {
   width: 100% !important;
   max-width: 100%;
}
#offerform .infobox .infoboxct > .yesnopick .selwrap .select2-container .select2-selection--single .select2-selection__rendered {
   line-height: 50px;
   padding: 0;
   color: #142845;
   font: 18px Roboto, sans-serif;
}
#offerform .infobox .infoboxct > .yesnopick .selwrap .select2-container .select2-selection--single .select2-selection__arrow {
   height: 50px;
   right: 10px;
}

/* ----- update banners ----- */
.updateMsg, .updateErr {
   margin: 0 0 18px 0;
   padding: 12px 22px;
   border-radius: 6px;
   text-align: center;
   font-weight: 600;
}
.updateMsg {
   background: rgba(130, 206, 199, 0.25);
   border: 1px solid #82CEC7;
   color: #142845;
}
.updateErr {
   background: rgba(254, 111, 97, 0.15);
   border: 1px solid #FE6F61;
   color: #FE6F61;
   text-align: left;
}
.updateErr ul { margin: 0; padding-left: 22px; }
.updateErr li { margin: 2px 0; }

/* ----- submit row ----- */
#offerform .submitWrap {
   width: 100%;
   margin-top: 16px;
   padding: 20px 0 8px 0;
   border-top: 1px solid #c0c0c0;
   text-align: center;
}
#offerform .submitWrap button {
   padding: 10px 28px;
   background: #142845;
   color: #FFFFFF;
   border: none;
   border-radius: 4px;
   font: 14px Roboto, sans-serif;
   font-weight: 600;
   cursor: pointer;
}
#offerform .submitWrap button:hover { background: #82CEC7; }
#offerform .submitWrap .backLink {
   margin-left: 22px;
   color: #142845;
   text-decoration: underline;
   font-weight: 600;
}
#offerform .submitWrap .backLink:hover { color: #82CEC7; }


/* ====================================================================
 * home.jsp developments landing page (moved out of that inline <style>).
 * Scoped to #devLanding.
 * ==================================================================== */

#devLanding{ background:#fff; }


/* ---------- hero ---------- */
#devLanding .devHero{
   text-align:center;
   padding:170px 0 40px 0;
}
#devLanding .devHero .tag{ margin-bottom:16px; }
#devLanding .devHero h1{ color:#142845; margin:0; }
#devLanding .devHero .subhead{ color:#555; max-width:680px; margin:18px auto 0 auto; }

/* ---------- grid (cards centered) ---------- */
#devLanding .devListSection{ padding:20px 0 90px 0; }
#devLanding .devGrid{
   display:grid;
   grid-template-columns:repeat(auto-fit, minmax(330px, 360px));
   justify-content:center;
   gap:34px;
}

/* ---------- card ---------- */
#devLanding .devCard{
   display:block;
   background:#fff;
   border-radius:16px;
   overflow:hidden;
   text-decoration:none;
   box-shadow:0 4px 22px rgba(20,40,69,.08);
   transition:transform .25s ease, box-shadow .25s ease;
}
#devLanding .devCard:hover{
   opacity:1;
   transform:translateY(-6px);
   box-shadow:0 16px 36px rgba(20,40,69,.18);
}
#devLanding .devCard__imgwrap{
   position:relative;
   width:100%;
   aspect-ratio:4 / 3;
   background:#142845;
   overflow:hidden;
}
#devLanding .devCard__img{
   width:100%; height:100%;
   object-fit:cover; display:block;
   transition:transform .45s ease;
}
#devLanding .devCard:hover .devCard__img{ transform:scale(1.06); }

/* placeholder when there is no image at all */
#devLanding .devCard__noimg{
   width:100%; height:100%;
   display:flex; align-items:center; justify-content:center;
   background:linear-gradient(135deg, #142845 0%, #24426e 100%);
   color:#82CEC7;
}
#devLanding .devCard__noimg i{ font-size:54px; }

#devLanding .devCard__badge{
   position:absolute; top:14px; left:14px;
   font:600 11px "Roboto", sans-serif; letter-spacing:.06em; text-transform:uppercase;
   color:#fff; background:#FE6F61;
   padding:6px 12px; border-radius:8px;
}

#devLanding .devCard__body{ padding:22px 24px 26px 24px; }
#devLanding .devCard__name{
   margin:0;
   font:500 28px/1.1 "Barlow", sans-serif;
   color:#142845;
}
#devLanding .devCard__meta{
   margin:10px 0 0 0;
   display:flex; flex-direction:column; align-items:flex-start; gap:4px;
   font:400 15px "Roboto", sans-serif; color:#555;
}
#devLanding .devCard__meta .suburb i{ color:#82CEC7; margin-right:6px; }
#devLanding .devCard__price{
   font:600 15px "Barlow", sans-serif; color:#FE6F61; white-space:nowrap;
   width: 100%;
}

/* ---------- empty state ---------- */
#devLanding .devEmpty{
   text-align:center; color:#555; font:400 18px "Roboto", sans-serif;
   padding:60px 20px 90px 20px;
}

@media only screen and (max-width: 900px) {
   #devLanding .devHero{ padding:140px 0 30px 0; }
   #devLanding .devGrid{ grid-template-columns:repeat(auto-fit, minmax(280px, 360px)); gap:26px; }
}

@media only screen and (max-width: 400px) {
   #devLanding .devGrid{ grid-template-columns:1fr; }
   #devLanding .devCard__name{ font-size:24px; }
}