/* Cameroon Portal – WordPress, Elementor and Essential Real Estate additions to the prototype styles (portal.css). */

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: #fff; color: var(--ink); padding: 8px 14px; }
.skip-link:focus { left: 8px; }
.site-main { display: block; min-height: 40vh; }

/* Whole card is clickable through its title link. */
.pcard { position: relative; }
.pcard .title.stretched { display: block; text-decoration: none; }
.pcard .title.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard .tr, .pcard .fav { position: relative; z-index: 2; }
.pcard .tr { position: absolute; }
.pcard .title.stretched:hover { color: var(--green); }
.pcard .fav [hidden] { display: none; }

/* City cards are links. */
a.city { display: block; text-decoration: none; }
a.city:hover { text-decoration: none; }

/* Hero without photos: brand colour only. */
.hero .slide:not([style]) { background: var(--forest); }

/* Text pages and blog posts. */
.cp-entry { max-width: 820px; }
.cp-entry h1 { margin-bottom: 16px; }
.cp-entry-image { margin: 20px 0; }
.cp-entry-image img { width: 100%; height: auto; display: block; }
.cp-content { line-height: 1.7; }
.cp-content > * + * { margin-top: 1em; }
.cp-content h2, .cp-content h3 { margin-top: 1.6em; }
.cp-content img { max-width: 100%; height: auto; }
.cp-content ul, .cp-content ol { padding-left: 1.4em; }
.cp-content a { color: var(--green); text-decoration: underline; }
.cp-content blockquote { border-left: 3px solid var(--gold); padding-left: 16px; color: var(--ink-2); }

/* Blog cards and pagination. */
.cp-post-card .ph { aspect-ratio: 16 / 10; }
.cp-pagination { margin-top: 32px; }
.cp-pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: background-color .2s, color .2s; }
.cp-pagination .page-numbers.current, .cp-pagination a.page-numbers:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* Comments. */
.cp-comments { max-width: 820px; margin-top: 40px; }
.cp-comments .comment-list { list-style: none; padding: 0; }
.cp-comments .comment-body { border-bottom: 1px solid var(--line); padding: 16px 0; }
.cp-comments textarea, .cp-comments input[type="text"], .cp-comments input[type="email"], .cp-comments input[type="url"] { width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font: inherit; }
.cp-comments .submit { background: var(--green); color: #fff; border: 0; border-radius: var(--r); padding: 12px 20px; font-weight: 600; cursor: pointer; }

/* Elementor pages use the full width between header and footer. */
.elementor-page .site-main > .elementor { width: 100%; }

/* Essential Real Estate pages: keep them inside the page width until each one is restyled. */
.ere-property-wrap, .ere-archive-property-wrap, .ere-agent-wrap,
body.post-type-archive-property .site-main > .container,
body.single-property .site-main > .container { max-width: 1240px; margin: 0 auto; padding: 32px 16px; }
body.cp-theme .btn, body.cp-theme button, body.cp-theme .button { border-radius: var(--r); }

/* Language switch links (Polylang / WPML) in the prototype toggle style. */
.lang-tog a { font-size: .78rem; font-weight: 700; letter-spacing: .04em; padding: 6px 9px; background: #fff; color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s; }
.lang-tog a.on { background: var(--forest); color: #fff; }
.lang-tog a:not(.on):hover { background: var(--mint); }
.utilbar .lang-tog a { color: var(--ink-2); }
.utilbar .lang-tog a.on { color: #fff; background: var(--gold); color: var(--forest); }
.searchbox .tabs { overflow-x: auto; scrollbar-width: none; }
.searchbox .tabs::-webkit-scrollbar { display: none; }

/* Search box fields: same height and look for selects and inputs, whatever other plugins load. */
body.cp-theme .searchbox .fields input,
body.cp-theme .searchbox .fields select { height: 42px; min-height: 42px; box-sizing: border-box; width: 100%; font: inherit; font-size: .95rem; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background-color: #fff; color: var(--ink); line-height: normal; }
body.cp-theme .searchbox .fields select { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
body.cp-theme .searchbox .fields .range-in input { width: 0; flex: 1 1 0; min-width: 0; }
body.cp-theme .searchbox .fields > label { min-width: 0; }

/* Search page */
.pill-tabs a { font: inherit; font-weight: 600; font-size: .88rem; padding: 7px 14px; border-radius: 2px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: background-color .15s, color .15s; }
.pill-tabs a.on { background: var(--forest); color: #fff; }
.pill-tabs a:not(.on):hover { background: var(--mint); }
.filters select, .filters input:not([type="checkbox"]):not([type="hidden"]) { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 10px; font: inherit; font-size: .92rem; background: #fff; }
.filters .range-in input { width: 0 !important; flex: 1 1 0; min-width: 0; }
.filters .seg button { transition: background-color .15s, color .15s, border-color .15s; }
.filters .seg button:not(.on):hover { border-color: var(--green); color: var(--green); }
.filters .cp-apply { width: 100%; justify-content: center; }
.filters.collapsed .cp-apply { display: none; }
.results-bar select { height: 38px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 10px; font: inherit; background: #fff; }
.cp-empty { align-items: flex-start; }
.results-grid.listview .pcard { flex-direction: row; }
.results-grid.listview .pcard .ph { width: 38%; flex: 0 0 38%; aspect-ratio: auto; min-height: 220px; }
@media (max-width: 640px) { .results-grid.listview .pcard { flex-direction: column; } .results-grid.listview .pcard .ph { width: 100%; flex-basis: auto; min-height: 200px; } }
.cp-default-submit { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.filters .seg { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
.filters .seg.seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filters .seg button { line-height: 1.3; margin: 0; }
.filters .range-in { width: 100%; }
.pcard .ph .tl { right: 94px; flex-wrap: wrap; row-gap: 4px; }

/* Bootstrap (loaded by Essential Real Estate) gives .row negative side margins; the prototype's .row is a plain flex row. */
body.cp-theme :where(.filters, .results-bar, .pcard, .card, .sec-head, .searchbox, .hero, .footer, .topbar, .cp-empty, .lhero, .detail-layout, .report-box) .row { margin-left: 0; margin-right: 0; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--mint); color: var(--forest); font-size: .84rem; font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; }
.cp-chip:hover { background: var(--forest); border-color: var(--forest); color: #fff; text-decoration: none; }
.cp-chip svg { width: 14px; height: 14px; }

/* Single listing page */
.cp-h3 { font-size: 1.2rem; }
.lhero .slide[data-lightbox] { cursor: zoom-in; }
.lh-g { position: relative; border: 0; padding: 0; cursor: zoom-in; background: var(--mint); overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; }
.lh-g:hover img { transform: scale(1.06); }
.cp-map { position: relative; height: 300px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--mint); }
.cp-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.cp-embed { position: relative; }
.cp-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }
.cp-embed img { width: 100%; height: auto; display: block; }
.cp-note { padding: 10px 12px; border-radius: var(--r); font-size: .92rem; margin: 0; }
.cp-note.ok { background: #e7f4ee; color: var(--forest); border-left: 3px solid var(--green); }
.cp-note.err { background: #fdf1f0; color: #8a1f17; border-left: 3px solid #b3261e; }
.cp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
#enquiry input:not([type="checkbox"]):not([type="hidden"]), #enquiry textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font: inherit; font-size: .95rem; background: #fff; }
#enquiry input:focus, #enquiry textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.cp-similar { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .cp-similar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .cp-similar { grid-template-columns: 1fr !important; } }
[data-cp-save].on { color: var(--terra); border-color: var(--terra); }

/* Photo viewer */
.cp-lb { position: fixed; inset: 0; z-index: 200; background: rgba(5, 20, 15, .94); display: grid; grid-template-rows: auto 1fr auto; color: #fff; }
.cp-lb-top { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.cp-lb-top b { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 64px; }
.cp-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cp-lb-prev, .cp-lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.cp-lb-prev { left: 14px; } .cp-lb-next { right: 14px; }
.cp-lb-thumbs { display: flex; gap: 8px; padding: 10px 14px 16px; overflow-x: auto; justify-content: center; }
.cp-lb-thumbs button { flex: 0 0 auto; width: 84px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: var(--r); overflow: hidden; background: none; cursor: pointer; opacity: .6; transition: opacity .15s, border-color .15s; }
.cp-lb-thumbs button.on, .cp-lb-thumbs button:hover { opacity: 1; border-color: var(--gold); }
.cp-lb-thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .cp-lb-stage { padding: 0 8px; } .cp-lb-prev, .cp-lb-next { top: auto; bottom: 90px; transform: none; } .cp-lb-thumbs { justify-content: flex-start; } }
.report-box .head h2 { color: #fff; }
.search-layout > div:last-child { transition: opacity .15s; }
.search-layout > div.is-loading { opacity: .45; pointer-events: none; }
@media (min-width: 761px) { .filters .cp-apply { display: none !important; } }

/* Sign-up and log-in */
.cp-signup [hidden], .cp-login [hidden], .auth .notice[hidden] { display: none !important; }
.auth label { margin-bottom: 0; }
.cp-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.choice:focus-within { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 1px; }
.auth .steps button { color: var(--ink); }
.auth .steps button:disabled { cursor: default; }
.auth .drop .drop-ic { display: grid; place-items: center; }
.auth .drop b { word-break: break-all; }
.auth .result svg { flex: none; margin-top: 2px; }
.auth .wiz-foot [data-su-submit] { margin-left: auto; }
.auth .wiz-foot [data-su-next] { margin-left: auto; }
.auth .plan li { display: flex; gap: 8px; align-items: flex-start; list-style: none; }
.auth .plan li svg { color: var(--green); flex: none; margin-top: 3px; }
.auth .notice svg { vertical-align: -2px; }
@media (max-width: 640px) { .auth .form-grid, .auth .doc .db, .auth .grid.g2 { grid-template-columns: 1fr; } .auth .steps button { min-width: 0; flex: 1 1 0; font-size: .82rem; padding: 8px; } }
.cp-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; margin: 2px 0 10px; }
.cp-or::before, .cp-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cp-social a, .cp-social button { border-radius: var(--r) !important; }

/* Home hero: everything centred (Donard, 0.4.2). */
.hero .stext { text-align: center; }
.hero .hero-h, .hero .lede { margin-left: auto; margin-right: auto; }
.hero .hero-ctrl, .hero .trust-row { justify-content: center; }
.hero .searchbox { margin-left: auto; margin-right: auto; }
.hero .searchbox .tabs { justify-content: center; }
.hero .shade { background: linear-gradient(180deg, rgba(7,40,30,.78) 0%, rgba(7,40,30,.7) 55%, rgba(7,40,30,.82) 100%); }
@media (max-width: 640px) { .hero .searchbox .tabs { justify-content: flex-start; } }

/* Search, city, type and status pages: 3 listings per row (home page keeps 4). */
@media (min-width: 1101px) { .search-layout .results-grid:not(.listview) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Card labels always on one line; on narrow cards the level dots and then "Featured" text give way. */
.pcard { container-type: inline-size; }
.pcard .ph .tl { flex-wrap: nowrap; overflow: hidden; }
.pcard .ph .tl > * { flex: none; white-space: nowrap; }
@container (max-width: 370px) { .pcard .ph .tl .vbadge .dots { display: none; } }
@container (max-width: 330px) { .pcard .ph .tl .chip.gold { display: none; } }

/* Share button and menu */
.pcard .ph .tr .cp-share-btn svg { width: 17px; height: 17px; }
.cp-sharemenu { position: fixed; max-height: none; }
.cp-sharemenu .cp-share-head { padding: 10px 12px 8px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid #f0f3f1; }
.cp-sharemenu a.ac-opt, .cp-sharemenu button.ac-opt { display: block; width: 100%; text-align: left; text-decoration: none; background: #fff; border: 0; border-bottom: 1px solid #f0f3f1; font: inherit; cursor: pointer; }
.cp-sharemenu .ac-opt:hover { background: var(--mint); }
.fav:hover { transform: scale(1.08); }

/* Property type list in the home search box (opens below the field) */
.cp-dd-native { display: none !important; }
body.cp-theme .searchbox .fields .cp-dd { height: 42px; width: 100%; box-sizing: border-box; text-align: left; font: inherit; font-size: .95rem; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6359' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
body.cp-theme .searchbox .fields .cp-dd[aria-expanded="true"], body.cp-theme .searchbox .fields .cp-dd:focus-visible { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 0; }

/* Saved-on-this-phone prompt */
.nudge .row { gap: 8px; }

/* Agents and agencies */
.cp-people .pcard .body { gap: 6px; }
.cp-people .pcard .title b { font-size: 1.02rem; }
.cp-agencycard { transition: transform .2s, box-shadow .2s; }
.cp-agencycard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cp-agcard .ph img { transition: transform .4s; }
.cp-agcard:hover .ph img { transform: scale(1.05); }
.cp-person .avatar.lg img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1101px) { .results-grid.cp-3col:not(.listview) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .grid.g4.cp-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .grid.g4.cp-people, .grid.g3.cp-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid.g4.cp-people, .grid.g3.cp-people { grid-template-columns: 1fr; } }
[data-cp-reveal].shown { pointer-events: auto; }

/* Bigger home search box (wider and taller) */
.hero .searchbox { max-width: 1240px; }
.hero .searchbox .tabs button { padding: 17px 26px; font-size: 1.05rem; }
.hero .searchbox .fields { padding: 24px 24px 26px; gap: 16px; }
body.cp-theme .hero .searchbox .fields input, body.cp-theme .hero .searchbox .fields select, body.cp-theme .hero .searchbox .fields .cp-dd { height: 52px; min-height: 52px; font-size: 1rem; }
.hero .searchbox .fields label.f { font-size: .9rem; gap: 7px; }
.hero .searchbox .fields .btn { height: 52px; padding: 0 28px; font-size: 1.02rem; }
@media (max-width: 640px) { .hero .searchbox .fields { padding: 16px; gap: 12px; } .hero .searchbox .tabs button { padding: 14px 16px; font-size: .98rem; } }
/* Bootstrap's .card is a column and its .row has negative margins: keep the prototype layout. */
body.cp-theme .card.row.cp-person { flex-direction: row; margin-left: 0; margin-right: 0; flex-wrap: wrap; }
body.cp-theme .cp-person .row, body.cp-theme .cp-people .row { margin-left: 0; margin-right: 0; }
@media (max-width: 640px) { body.cp-theme .card.row.cp-person { flex-direction: column; } .cp-person > .stack:last-child { width: 100%; } .cp-person > .stack:last-child .btn { width: 100%; justify-content: center; } }

/* Text pages and price guide */
.cp-legal-text > * + * { margin-top: .9em; }
.cp-legal-text ul, .cp-legal-text ol { padding-left: 1.3em; line-height: 1.75; color: var(--ink-2); }
.cp-legal-text a { color: var(--green); text-decoration: underline; }
.legal-toc a { text-decoration: none; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; gap: 24px; } .legal-toc { position: static; } }
.cp-price-notes table { width: 100%; border-collapse: collapse; background: #fff; }
.cp-price-notes th, .cp-price-notes td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.cp-price-notes th { background: var(--mint); }

/* Agency avatar from the first agent's photo */
.cp-agency-face { width: 52px; height: 52px; }
.cp-agency-face.lg { width: 96px; height: 96px; }
.cp-agency-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cp-agencycard .facts { flex-wrap: wrap; row-gap: 8px; }

/* v0.9: member dashboard */
.cp-dash{border-top:1px solid var(--line)}
.cp-dash .side{position:sticky;top:66px;align-self:start;min-height:calc(100vh - 66px)}
.cp-dash .side .who .avatar{display:grid;place-items:center;font-weight:800;border-radius:var(--r);flex:none}
.cp-dash .dmain h2{margin:0}
.cp-dash .cp-kpis .kpi b{line-height:1.1}
.cp-dash .thumb{background:var(--bg-2)}
.cp-dash .cp-3col{grid-template-columns:repeat(3,minmax(0,1fr))}
.cp-dash .cp-lead.unread{border-left:3px solid var(--terra)}
.cp-dash .cp-lead p{margin:0}
.cp-dash table.t form{margin:0}
.cp-dash .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-dash .form-grid .full{grid-column:1/-1}
.cp-dash .f{display:flex;flex-direction:column;gap:5px;font-size:.84rem;font-weight:650;color:var(--ink-2);margin:0}
.cp-dash .f input{width:100%}
.cp-dash .pw{position:relative;display:block}
.um-head b{font-size:.92rem}
@media (max-width:1100px){.cp-dash .cp-3col{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.cp-dash .side{min-height:0;top:66px}}
@media (max-width:640px){.cp-dash .cp-3col,.cp-dash .form-grid{grid-template-columns:1fr}.cp-dash .cp-kpis{grid-template-columns:1fr 1fr!important}}
.cp-dash table.t td:last-child .row{flex-wrap:nowrap}
.cp-dash table.t td:last-child .btn{white-space:nowrap}
.icon-btn.bump .count{animation:cpbump .35s ease-out}
@keyframes cpbump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.icon-btn .count[hidden]{display:none}
/* v0.9: listing wizard */
.cp-wiz .cp-pinmap{height:300px;border:1px solid var(--line);border-radius:var(--r);z-index:0}
.cp-wiz .photo-grid .cp-uploading{display:grid;place-items:center;background:var(--bg-2);color:var(--muted);font-size:.82rem;animation:cppulse 1.2s ease-in-out infinite}
@keyframes cppulse{50%{opacity:.55}}
.cp-wiz .drop input[type=file]{display:none}
.cp-wiz .choice{user-select:none}
.cp-wiz .choice:hover{border-color:var(--green);transform:translateY(-2px)}
.cp-wiz .wiz-foot .row{flex-wrap:wrap}
.cp-wiz .notice{display:flex;gap:8px;align-items:flex-start}
.cp-wiz .notice .i{flex:none;margin-top:2px}
@media (max-width:640px){.cp-wiz .doc .db{grid-template-columns:1fr}.cp-wiz .wiz-foot{flex-direction:column-reverse}.cp-wiz .wiz-foot .btn{width:100%;justify-content:center}.cp-wiz .wiz-foot .row{width:100%;flex-direction:column}}